Der er noget romantisk og spændende ved at åbne TextEdit eller Notepad og skrive “<HTML>” for at starte et nyt projekt. Det er sådan mange af os begyndte vores besættelse af kodning til internettet. Gør webudviklingsværktøjer mere end blot at registrere vores tekst – de hjælper os med at skabe projekter og giver hele processen et ekstra løft. Derudover er der mange flere elementer end blot HTML og CSS at tage hensyn til.
Planlægningsfasen er f.eks. afgørende. Du skal overveje wireframing, designvalg og arbejdsgange i samarbejde. Så er der valget af den ideelle JavaScript-framework, om du skal bruge et integreret udviklingsmiljø (IDE) og meget mere.
I dette indlæg tager vi et kig på 62 webudviklingsværktøjer, som du bør overveje at bruge. Men før vi går i gang med det, skal vi tale om, hvad vi mener, at et webudviklingsværktøj er.
Hvad vi betragter som et webudviklingsværktøj
På overfladen virker det simpelt at kategorisere et webudviklingsværktøj. Men selv når man dykker ned i den lave ende, er der et par overvejelser, der udvisker grænserne.
Overvej for eksempel, om en videostreaming-tjeneste tæller som et udviklingsværktøj. I en boble, sandsynligvis ikke. Men hvis du bruger den til at optage din skærm til et specifikt designprogram, bliver den pludselig til et unikt samarbejdsværktøj.
Efter vores mening er et webudviklingsværktøj noget, der hjælper dig med at nå målene for dit projekt på en fokuseret måde. Selv om dette ikke omfatter individuelle programmeringssprog, er der delmængder, supersæt og frameworks som TypeScript, der går på tværs af grænsen. Hvis du ønsker at tjene de store penge, er det afgørende at holde øje med disse aspekter.
Et andet eksempel er Git. Man kan hævde, at dette versionskontrolsystem (VCS) dækker en masse områder. Der er et specifikt sprog, der bruges til at køre kommandoer, og kernefunktionaliteten tilbyder en hel del med hensyn til webudvikling. Du kan dog også bruge det som et læringsværktøj, især ved at gennemtrawle logs og commits til problemsporing.
Alt i alt kan et webudviklingsværktøj være praktisk talt alt, der får dit projekt til at køre effektivt og produktivt. Du vil bemærke denne mangfoldighed i listen over værktøjer.
Sådan kan webudviklingsværktøjer strømline din arbejdsgang
Vi vil give dig en triggeradvarsel før de næste par ord: “crunch time“.
Ja, denne frygtede sætning skriger på, at tidsbesparende webudviklingsværktøjer skal redde dagen. Statistikkerne viser, at flere projekter anvender crunch som standard, og mange udviklingsbrancher bruger det stadig i dag.
Uanset om din virksomhed bruger eller har brug for crunch og overtid, kan webudviklingsværktøjer stadig hjælpe. Disse værktøjer klarer det tunge arbejde og automatiserer det banale arbejde, der æder din dag. Som sådan giver de et organisk boost til din produktivitet.
De kan dog også give en bonus, hvis du arbejder under en agil projektramme som Scrum. Overvej for eksempel, hvordan et værktøj som JSFiddle kan hjælpe dig med at dele snippets med andre teams i slutningen af et sprint, så du er klar til det næste.
Desuden kan en Discord-server eller en Slack-kanal, selv om daglige stand-ups ikke forsvinder, være en bedre måde at fokusere og tilpasse et kommende sæt opgaver på, væk fra presset fra målene for dit nuværende sprint.
I det hele taget handler webudviklingsværktøjer lige så meget om planlægning som om udførelse.
Sådan vælger du den rigtige udviklingsstack til dit projekt
Vi prædiker sandsynligvis for de omvendte, men et fremragende webudviklingsværktøj er sin vægt værd i en rosa guld M1-drevet MacBook. Derfor er det afgørende at få den rigtige blanding af værktøjer til dit specifikke projekt for at skabe et solidt grundlag for arbejdet.
Hvis det er noget, du ikke har overvejet før, vil en indledende planlægningsfase vise sig at være uvurderlig. Hvis du tager dig tid til at finde ud af, hvilke værktøjer du vil bruge, forsinker du kodningsfasen i projektet. Du får dog denne tid tilbage senere, da der vil være færre potentielle softwarerelaterede problemer. Du vil også se et mere ensartet outputniveau (da alle vil være på samme side).
Overvejelser i forbindelse med valg af din udviklingsstack
Valg af den rigtige stack til projektet kan koges ned til følgende:
- Kompleksitet: Overvej, hvor kompleks din leverance skal være, da dette vil bestemme stakkens kompleksitet.
- Skalerbarhed: Hvis dit projekt er til en lokal virksomhed, vil dette kræve andre løsninger end en global virksomhed. Som sådan har du brug for en mere skalerbar stack for at nå dine mål.
- Sikkerhed: Det siger næsten sig selv, at uanset hvad du vælger, må det ikke gå ud over brugerens og webstedets sikkerhed.
- Omkostninger: Selvfølgelig kan ingen lide at bruge for meget, og hvis der er tale om stramme budgetter, vil dette have større betydning end et blankt checkhæfte.
Der er to områder, som du kan dele teknologier op i:
- Server-side: Her skal du se på de backend-teknologier, du bruger. Du skal f.eks. se på dit valg af hosting og webserver, nøgleværdi- og SQL-lagring, eventuelle app- og automatiseringsrammer, du vil bruge, og selvfølgelig programmeringssproget.
- Klientsiden: Dine valg af frontend-værktøjer vil uden tvivl være mere ligetil, især når det gælder de sprog, du bruger. HTML, CSS og JavaScript vil være en del af applikationen, men dit valg af JavaScript-ramme (og automatiseringsramme) skal overvejes nøje.
Når det kommer til nogle reelle udviklingsstacks, vil du bemærke, at mange store websteder bruger en eller anden kombination af JavaScript og React.js sammen med Nginx. Du vil også se Memcached, Redis og Ruby on Rails i udviklingsstacks.
62 fantastiske webudviklingsværktøjer til brug
Lad os uden videre se på listen over webudviklingsværktøjer, som vi anbefaler at bruge. Vi har organiseret dem i kategorier, men ellers er værktøjerne ikke i nogen bestemt rækkefølge. Hvis du har travlt, er du velkommen til at springe til et bestemt afsnit, der er anført nedenfor.
Lokale udviklingsmiljøer
Et lokalt udviklingsmiljø er en vigtig del af enhver udviklingsstack. Det er dog særligt vigtigt for webudvikling. Her er nogle af de mest fremtrædende lokale udviklingsværktøjer.
1. DevKinsta
Vi er måske forudindtaget, men DevKinsta kan blive det førende webudviklingsværktøj.
Klart – vi er forudindtagede, og vi er stolte af det, vi har udgivet!
For de uindviede er DevKinsta en måde at hjælpe dig med at oprette lokale WordPress-installationer på et øjeblik. Det er en komplet suite, der giver dig mulighed for at designe, udvikle og implementere et WordPress-websted til macOS- og Windows-maskiner (med en Linux-version på vej).
Du er i stand til at skræddersy din installation til dit aktuelle projekt. Din “server” kan f.eks. bruge Nginx eller Apache, dit valg af PHP-version, køre MariaDB eller MySQL og meget mere:
Der er også mere under motorhjelmen. Du er også i stand til at fejlfinde og teste e-mail via den indbyggede SMTP-server, og til databaseadministration kan du bruge det kraftfulde Adminer-værktøj:
Alt i alt mener vi, at DevKinsta er ideel til moderne WordPress-udvikling. Det kan passe direkte ind i din arbejdsgang.
Vi har skabt dette værktøj med udviklere, designere, freelancere og bureauer i tankerne. Men praktisk talt alle med daglige udviklingsbehov vil finde værdi i DevKinsta – især (men ikke udelukkende) Kinsta-brugere.
Hvad mere er, DevKinsta er helt gratis!
2. MAMP
Man skulle tro, at de klassiske værktøjer til oprettelse og implementering af websider er døde og begravet, når man tænker på ankomsten af hurtigere sandbox-ærktøjer. Men de traditionelle webtjenestestakke, såsom LAMP, MAMP og XAMPP, er stadig stærke.
Typisk kombinerer de et operativsystem (OS) – Linux, macOS eller Windows – sammen med Apache-webserveren, MySQL-databasen og programmeringssprogene Python, PHP og Perl i én stak. Som sådan vil en webtjenestestack som denne stadig blive brugt i den nærmeste fremtid..
MAMP er den macOS-specifikke version af værktøjet. Ved denne fremgangsmåde installerer du en stack og arbejder med design og implementering. Selv om processen kan være mere langsommelig end mere moderne opsætninger, er der stadig et lignende niveau af fleksibilitet under motorhjelmen – eller i det mindste er potentialet der.
Mens du i et værktøj som DevKinsta vælger fra en smart grafisk brugergrænseflade (GUI), skal du med en webtjenestestack installere de tilføjelser, du har brug for, manuelt. Der er f.eks. ingen indbygget måde at oprette et WordPress-websted på uden at “rulle dit eget“. Det er en lignende situation med test af e-mail.
Som med andre værktøjer til lokale udviklingsmiljøer er MAMP helt gratis. Der findes dog også en premium-version af MAMP til både Windows og Mac, som øger funktionaliteten og giver et omfattende, robust webudviklingsværktøj.
På grund af fleksibiliteten og prisen findes klassiske webtjenestestacks stadig på mange udviklernes computere. Kommandolinjeaficionados vil naturligt søge mod denne løsning, især hvis du elsker at bruge pakkehåndteringsprogrammer som Homebrew, Flatpak eller Ninite.
Selvfølgelig vil Apache-udviklere også bruge disse stakke, ligesom MySQL- og Python- eller PHP-udviklere vil gøre det. I forlængelse heraf vil WordPress-udviklere også føle sig hjemme her.
3. XAMPP
XAMPP er en anden webtjenestestack, der får meget kærlighed fra PHP-udviklere, herunder dem, der skaber WordPress-produkter. “X” i navnet repræsenterer værktøjets cross-platform natur. Det tilbyder installationsprogrammer til Windows-, macOS- og Linux-maskiner:
Mens der tidligere var forskel på de forskellige webtjeneste stakke, har konstante opdateringer og forbedringer udlignet feltet. Alligevel har XAMPP et par unikke tricks i ærmet.
F.eks. er MySQL ikke længere standard RDMS (Relational Database Management System). I stedet bruger XAMPP MariaDB. Det er sandsynligvis en mere nøjagtig repræsentation af en produktionsserver i betragtning af skiftet til andre løsninger efter Oracles overtagelse.
Desuden er der et webapp-installationsprogram i XAMPP-pakken. Bitnami svarer til løsninger som Softaculous, men Bitnami er XAMPP-specifik:
Selvom der er mange apps til rådighed, vil du sandsynligvis være mest interesseret i WordPress-installationsprogrammet. Alligevel er der mange add-ons at vælge imellem, hvilket gør XAMPP til en fleksibel løsning til lokal udvikling.
Tekst- og kode-redigeringsprogrammer
De fleste udviklere elsker at diskutere om hvilken kodeeditor du skal bruge. Okay, vi er overdrevne, men der er masser af meninger om emnet, med en glødende fanbase for hver editor.
Men hvis undersøgelserne er korrekte, bruger du sandsynligvis Sublime Text, Visual Studio Code (VSCode) eller IntelliJ IDEA. Det giver god mening, da disse tre værktøjer varierer fra simpel tekstredigering til fuldt udbyggede integrerede udviklingsmiljøer (IDE’er). Der er dog også andre, der er værd at nævne. Lad os tage et kig på et par af dem.
4. Visual Studio Code
Siden lanceringen i 2015 er brugen af Visual Studio Code eksploderet på udviklingsskriveborde af alle slags.
Det er en open source-kodeeditor udviklet af Microsoft, der tilbyder nok i kassen til at blive betragtet som en IDE. Den tilbyder utvivlsomt nok funktionalitet til at erobre over halvdelen af markedet – 55% af webudviklerne bruger Visual Studio Code dagligt.
I sin standardopsætning er Visual Studio Code først og fremmest en teksteditor. Men når det kombineres med dets udvidelsesbibliotek, bliver det modulært og fleksibelt nok til at opfylde alle dine udviklingsbehov:
Det betyder, at du kan installere linters og fixers til dit valgte sprog (ja, ESLint og PHP CS Fixer er der), sammen med Docker- og Vagrant-udvidelser og meget mere.
Apropos sprog: Visual Studio Code understøtter JavaScript, Node.js og TypeScript out of the box. Udvidelsesøkosystemet er dog så rigt, at du vil være i stand til at finde noget, der understøtter det sprog, du bruger.
Desuden finder du også en førsteklasses integration med andre Microsoft-produkter, især GitHub:
Visual Studio er helt gratis, og i betragtning af funktionssættet er det ideelt for mange. Vi anser VSCode for at være en glimrende mellemting mellem IDEA og Sublime Text. Apropos det, lad os se på sidstnævnte som det næste.
5. Sublime Text
Sublime Text er en grundpille inden for tekstredigeringsprogrammer. Det er mere reduceret end de fleste andre løsninger, selv om dets udseende modsiger kraften under motorhjelmen.
For eksempel vil du se meget af det, som Sublime Text tilbyder, hos andre konkurrenter. Kommandopaletten er noget, du vil se i mange løsninger, fordi den er ligetil at bruge.
Derudover er der kraftige tastaturgenveje til redigering, f.eks. ved at foretage flere valg for at redigere flere kolonner på én gang. Funktionen Goto Anything tilbyder også Vim-lignende kombinationer af tastaturgenveje til at gå gennem dine filer:
Sublime Text er et premium-værktøj med en meget liberal prøveperiode. Det kan betragtes som gratis, men for at give noget tilbage til udvikleren bør du købe en licens til udvidet brug.
Efter vores mening tilbyder Sublime Text for mange mindre eller hobbyprogrammører en fantastisk brugeroplevelse (UX), der giver det allermest nødvendige. Den er fortsat populær blandt mange udviklere på grund af dens tiltalende visuelle udseende, layout uden besvær og udvidelsesmuligheder.
6. Atom
På et tidspunkt nød Atom stor udbredelse blandt udviklere. Men siden Visual Studio Code kom til, er det blevet mindre udbredt. Det er en skam, for det er en fantastisk kodeeditor, der er velegnet til mange forskellige applikationer.
Det er en GitHub-udviklet app, hvilket måske forklarer, hvorfor den er blevet skubbet ned i hakkeordenen hos Microsoft. Den opdateres dog jævnligt og kan betragtes som en alternativ version af Visual Studio Code.
Tekstredigering er funktionel, og ligesom sin større søskende har den indbygget GitHub-integration. Der er også mange tilføjelser kaldet “pakker”:
Der er mange tilgængelige til at hjælpe med at skræddersy Atom til din arbejdsgang og dine projekter. Atom indeholder flere temaer at vælge imellem, og nogle, såsom One Dark, er så populære, at de også har fundet vej ind i andre editorer:
Atom er en funktionel kodeeditor, der fortjener et forsøg. Men da Atom er bygget på Electron (uden ordspil), har nogle brugere klaget over store filer og projekter, der kører langsomt. Som sådan vil vi foreslå, at den er god til mindre projekter og hurtige scripts (især med den indbyggede terminalpakke), men den er måske ikke den bedste til komplekst arbejde.
7. Notepad++
Lige fra starten er det værd at sige, at Notepad++ måske ikke erstatter nogen af de “store” kodeeditorer, som du allerede bruger, såsom IntelliJ IDEA eller Visual Studio Code. Men det vil give dig mere kraft under motorhjelmen til enkle scripts og generelle tekstredigeringsprogrammer.
Afhængigt af dine projekter kan det friste dig til at skifte. På trods af sin enkelhed bruges Notepad++ på tværs af en lang række projekter.
Det er en kodeeditor kun til Windows, hvilket forklarer “plus-plus”-elementet i navnet. Notepad er naturligvis en no-nonsense-teksteditor, der findes som standard på Windows-installationer. Notepad++ ligner sin søskende, men indeholder også udviklingsspecifikke funktioner som f.eks:
- faneblade og opdelte vinduer
- Understøttelse af næsten 80 programmeringssprog
- Automatisk udfyldningsfunktionalitet
- En funktionsliste, som giver en fantastisk måde at se alle de funktioner, der bruges i en fil, på et øjeblik
Desuden er Notepad++ fleksibel, når det kommer til projektstyring. Det understøtter tre forskellige tilgange: sessioner, arbejdsområder og projekter. Når du først begynder at grave dig ned i Notepad++, vil du se, at du kan bruge det til mere omfattende projekter end scripts med en enkelt side.
Vi tror, at Notepad++ vil passe til udviklere, der ønsker stor funktionalitet, som også kan tilpasses. Ved brug har det den samme open source Vim-vibe som Vim, hvilket vil passe bedre til visse typer projekter end andre.
8. JetBrains-suite
Når det kommer til udviklings-IDE’er, vil JetBrains’ suite af løsninger være øverst (eller meget tæt på) på din liste. Forretningsmodellen er smart, for selv om der findes mange editorer fra JetBrains, er de alle faktisk “delmængder” af deres hovedredigeringsprogram IntelliJ IDEA.
IDEA præsenterer sig selv som en Java-IDE. Det understøtter praktisk talt alle funktionaliteterne i andre IDE-værktøjer i sit sortiment. Og som sådan understøtter det også mange programmeringssprog.
PyCharm river f.eks. det meste af Python-funktionaliteten ud af IDEA og pakker den som sit eget værktøj. Du vil også se at phpStorm og WebStorm gør det samme.
Det er let at bruge IDEA – JetBrains har gjort et godt stykke arbejde for at få dig til at kode i stedet for at vade ind i konfigurationer og indstillinger. Det kan komme som en overraskelse, men grænsen mellem at bruge en kommandolinjeeditor som Vim og IDEA er ofte tynd.
Der er et lignende fokus på arbejdsgang og effektivitet i begge værktøjer, selv om IDEA også lader dig importere Vim-tastaturbindinger, hvis du også er fortrolig med at arbejde på den måde.
Vi går ud fra, at du sandsynligvis bruger IntelliJ IDEA, hvis du arbejder som en del af et stort projekt eller en virksomhed med en softwareaftale på plads. Det kan være for at dele projekter eller for at arbejde i et ensartet miljø. Masser af WordPress-udviklere bruger JetBrains produkter på grund af hvor robuste de er til at styre projekter.
Prisen er også en faktor, og IntelliJ er bygget på en abonnementsmodel, der ofte løber op i tre- eller firecifrede beløb om året.
Alligevel findes der nogle “community”-udgaver af JetBrains produkter. Det er dog nedskårne versioner af den oprindelige software; det er i bund og grund open source-løsninger, hvor de proprietære elementer er fjernet.
Desuden tilbyder JetBrains konkurrencedygtige priser til open source-projekter, nystartede virksomheder, uddannelsesinstitutioner, Docker Captains og mange andre nichegrupper.
Værktøjer til webdesign og prototyping
Selvfølgelig er en webapp ikke noget uden en god brugeroplevelse (UX). Som sådan har prototypering af dine layouts og visuelle elementer ofte brug for et dedikeret værktøj. Designværktøjer vil være afgørende på både server- og klientsiden af udviklingen. Her er et par populære valg.
9. Figma
Figma er et ofte omtalt webudviklingsværktøj, der giver dig mulighed for at samarbejde om design.
Du kan bruge drag-and-drop-editoren til at bygge grænseflader og andre brugervendte elementer. For udviklere kan du også hente kodestumper, som du kan indarbejde i dine projekter. Figma gør processen – fra idé til implementering – smidig og holder revisionerne nede i hele projektkæden.
Du får også fordel af et homogeniseret sæt værktøjer til at hjælpe med valg af skrifttype og farver. Denne proces står i modsætning til at bruge separate værktøjer såsom Type Scale:
…og en delmængde af webudviklingsværktøjer som Adobe Color, Coolors, forskellige farvevælgere og meget mere.
Selv om Figma har værdi for projekter med en enkelt udvikler, har det større fordele for et team, da det skaleres i størrelse. Teams vil kunne lide de kollaborative aspekter af Figma, som f.eks. det centrale asset repository og genanvendelige komponenter. Teamledere vil også sætte pris på de omfattende rapporteringsmuligheder, så de kan se, hvordan teammedlemmerne bruger de forskellige designsystemer.
Hvad angår priserne, fås Figma 12 USD pr. “editor” på standardniveauet, hvilket stiger til 45 USD pr. “editor” for enterprise-baserede teams (læs “seat” for “editor” – det er det samme koncept). Som sådan kan prisen stige alt efter, hvor mange redaktører du ønsker at have med om bord.
10. Sketch
Sketch er en app kun til macOS, som også nævnes meget blandt udviklere:
Den er populær, fordi Sketch indeholder masser af funktionalitet under motorhjelmen, og den er også let at bruge, hvilket giver god mening, da det er en macOS-app, der er native. Den ligner lidt Apples Xcode IDE, hvilket ikke er nogen dårlig ting, og det føles godt at navigere i den.
Selvfølgelig kan du udføre essentielle funktioner som vektorredigering og begrænsning af størrelsen af begrænsninger. Der er dog meget mere i appen, som hjælper dig med at generere designs og eksportere dem til andre på en hurtig måde.
Tag for eksempel Sketchs Smart Layout-funktionalitet, som bruger adaptiv størrelsesændring til at matche dine dimensioner og dit aktuelle layout. Der er også mange samarbejdsværktøjer, der giver alle en måde at dykke ned i et design på og hjælpe med at perfektionere det.
Sketch adskiller sig fra et værktøj som Figma ved, at en freelancer eller en enlig udvikler kan hoppe gratis ombord og derefter købe et abonnement, når der er et behov. I den henseende er Sketchs prisfastsættelse enten en engangsbetaling på 99 dollars eller 9 dollars pr. måned pr. bruger.
11. InVision Studio
InVision Studio sælger sig selv entydigt som en “skærmdesign”-app. Det giver mening, og det er også mere overskueligt at forstå. InVision Studio har alle de standardfunktioner og -funktioner, du forventer, såsom en intuitiv lagbaseret editor og vektorunderstøttelse.
Der er dog meget mere i boksen i forbindelse med prototyping og oprettelse af animationer. Du kan f.eks. pege, klikke og trække for at sammenkoble artboards og skærme. Med denne funktion kan du bygge animationer som en del af designprocessen i stedet for som noget, du afleverer senere.
Når vi taler om overdragelse, kan hele teamet arbejde i InVision Studio på grund af delte komponentbiblioteker, globale synkroniseringsmuligheder, en robust Inspect-tilstand og meget mere.
Prisstrukturen er også konkurrencedygtig. Den gratis version af InVision Studio giver dig næsten alle funktionaliteterne i den betalte version, med kun en begrænsning på antallet af dokumenter, du kan gemme. Pro-niveauet er værdifuldt for appens kraft (ca. 95 USD/bruger/år).
12. Affinity Designer
Hvis du er en Adobe Illustrator-bruger, er du sikkert stødt på Affinity Designer tidligere. Serif’s tilgang til grafisk design ser ud til at give Adobes løsning kamp til stregen:
Siden lanceringen har den fået en voksende brugerbase på grund af dens gode forhold til fællesskabet, de fremragende designprincipper og den attraktive prismodel. Du finder versioner til Mac, Windows og iPad, og hver version kan arbejde med vektorer, rasters eller begge dele på én gang:
De værktøjer, du er vant til fra Illustrator, er alle til stede, sammen med en komplet pakke af farveprofiler og eksportmuligheder:
Kort sagt er funktionerne og funktionaliteten på plads til at skabe professionel grafik til dine projekter. Desuden er priserne yderst konkurrencedygtige. Det koster omkring 50 USD til fuld pris, hvilket er en engangsbetaling. Det har ikke en passende cloud-baseret mulighed som Illustrator. Alligevel får du for et engangsbeløb omfanget af Adobe præsenteret på en subjektivt set bedre måde.
13. CodePen eller JSFiddle
Da vi diskuterede IntelliJ IDEA tidligere, nævnte vi ikke en af dets mindre, men praktiske funktioner – Scratch-filer. Den giver dig mulighed for hurtigt at skrive og teste en kodestump uden at skulle påvirke dit nuværende arbejdsprojekt.
For brugere af andre kodeeditorer er en løsning som CodePen eller JSFiddle en glimrende erstatning. De fungerer begge på samme måde: der er tre tekstredigeringsprogrammer til HTML, CSS og JavaScript og en outputskærm til at se resultatet:
Du kan navngive din “Pen” eller “Fiddle” afhængigt af din platform, gemme den og dele den med andre. Det er sådan en simpel idé – en idé, der kan hjælpe dig med at tage dine halvfærdige ideer om et aspekt af et projekt og realisere dem på få sekunder.
For udviklere, der ønsker at kaste lys på et bestemt element i en fil og vise, hvor ændringer er mulige, er en “online IDE” uvurderlig. Derudover er samarbejde også muligt via chat eller en “live mic”:
Alt i alt kan et online IDE betragtes som et “sleeper” webudviklingsværktøj, idet det ikke nævnes for ofte, men bruges af mange udviklere til at skabe bedre kode.
14. Buttons Generator
Buttons Generator er et gratis online CSS-knapgeneratorværktøj, der kan bruges til at skabe en række forskellige CSS-knapstile med blot et klik. Du skal blot rulle gennem alle knapstilene og finde den, du kan lide. Klik på den stil, og CSS’en tilføjes automatisk til din udklipsholder.
Du kan bruge knappernes farver og stilarter, som de er, eller blot redigere CSS’en for at give knappen den farve og de stilarter, du ønsker. Der er en del forskellige stilarter at vælge imellem, inklusive 3D, Gradient, With Shadow Border, Neumorphic, Retro, Sliding Effect og mange flere.
Prøv det, det er sjovt, unikt, nemt at generere CSS-knapper.
Git-klienter
At have en centraliseret måde at gemme kode på, dokumentere ændringerne og arbejde på den med et team uden dobbeltarbejde er en opgave for et versionskontrolsystem (VCS). Her er et par klienter, der håndterer ét VCS: git.
Lad os først diskutere selve VCS’et.
15. Git
Git er uundværligt for en moderne udvikler, og som sådan er det et af de mest afgørende webudviklingsværktøjer, der findes. Kort fortalt er det en måde at dokumentere de ændringer, du foretager i dit projekts kode, og gemme dem i “repositories”:
Git blev opfundet af Linux-skaberen Linus Torvalds og bruger en række kommandoer til at tilføje filændringer til et “staging area”, hvor du derefter “commit” dem til et repository. Derfra “skubber” du dem til et fjernrepositorium, der er hostet online.
Selv om det ikke er det eneste VCS, der er tilgængeligt – WordPress-udviklingsholdet bruger stadig Trac til mange projekter – er det det mest fremtrædende. Et VCS som Git eller Trac hjælper teams med at arbejde sammen ved at hoste kode på et centralt sted.
De grundlæggende kommandoer er funktioner med et enkelt ord indledt med git, som ofte bruges fra kommandolinjen. For eksempel:
git add file.phpDette udtryk tilføjer file.php til dit staging-område. Med andre ord registrerer det ændringerne som noget, du gerne vil gemme uden at lægge sidste hånd på det. Du kan gøre dette med en enkelt fil eller et helt projekt, hvis du ønsker det.
For at committe filen kører du git commit. Herfra kan du tilføje en kommentar for at fortælle andre om dine commits. Herefter bliver dine ændringer gemt og skubbet til den primære “branch”. Det afhænger selvfølgelig af, om du arbejder på en ekstern “repo”.
Hvis du er nybegynder med Git og VCS’er generelt, har GitLab en god begynderguide til brug af Git på kommandolinjen. Vi vil også tale lidt om selve GitLab senere.
16. GitHub
For langt de fleste udviklere er GitHub det sted, hvor projektets Git-repositorier gemmes:
Det er en Microsoft-ejet løsning, der dækker meget mere end Git-hosting. Der er også en masse automatiserede testværktøjer og et forsøg på at tilbyde ekstra samarbejdsfunktioner.
For open source-projekter er platforme som GitHub næsten den de-facto løsning. På baggrund af dette er GitHub som et webudviklingsværktøj uvurderligt for mange open source-brugere, lærende og udviklere generelt. Det gælder især, når man graver ned i GitHubs problemtracker for at løse et problem med installerede pakker.
GitHub er ikke kun til opbevaring af programrepos. Det er også til andre kodningsprojekter, f.eks. webudvikling og endda til bøger.
Alt i alt er GitHub et fantastisk værktøj, der hjælper med at opbygge et sundt fællesskab fra mange forskellige grene. Det er dog ikke den eneste platform, der findes.
17. GitLab
Vi har nævnt det tidligere, men GitLab er en konkurrent til GitHub, med et lignende mål. Det er i bund og grund en host for Git repos, men tilbyder også et par andre ekstramuligheder.
Mens GitHub kalder sig selv en “udviklingsplatform”, fokuserer GitLab på “DevOps”. På sit gratis niveau tilbyder GitLab alle faser af DevOps-livscyklussen, statisk applikationssikkerhedstest og ca. 400 minutter om måneden til Continuous Development (CD) og Continuous Integration (CI).
GitLab falder i sin fællesskabsfølelse, hvilket er den store forskel, når det gælder GitHub. Det handler mere om implementering og hele projektets cyklus. Det er ikke negativt, men det betyder, at GitLab er en mere “isoleret” platform, som nok ikke er lige så velegnet til open source-projekter som GitHub.
For de fleste teams vil GitLabs gratis niveau være tilstrækkeligt. For ca. 230 dollars om året pr. bruger får du adgang til analyser af din kode og produktivitet, ca. 10.000 CD/CI-minutter og meget mere.
18. Sourcetree
Sourcetree er ikke en Git-repository-vært, men en grafisk brugergrænseflade (GUI) til at administrere dem. Det er en af mange løsninger, såsom GitKraken, Sublime Merge, GitHub Desktop og mange flere.
Det er et Atlassian produkt (og vi elsker Atlassian!), der forbindes med andre produkter som Bitbucket for at tilbyde en visuel repræsentation af dit Git repository.
Sourcetree markedsføres som en nem Git-klient – og det er det også – men det er også velegnet til erfarne brugere. Den har masser under motorhjelmen til at understøtte et team, der arbejder med Git (og også Mercurial).
Sourcetree gør for eksempel simple ting, såsom at fremhæve ændringer fra det sidste commit, men det tager også fat på mere, hvis du har brug for det. Teamledere kan gennemgå ændringssæt, arbejde mellem grene efter behov og visualisere koden ved hjælp af grafer og informationsfaner:
Om en Git-klient er den rigtige for dig afhænger af dine omstændigheder. Hvis du stadig er ved at lære det, vil vi anbefale, at du holder dig til en Terminal, mens du forstår flowet og processen. For professionelle eller teams med omfattende Git-brug vil en klient som Sourcetree barbere minutter af det arbejde, du udfører hver dag.
Browser-udviklerværktøjer
Uden en webbrowser er der ingen webudvikling. Men selv om din valgte browser er afgørende for at navigere på nettet, kan du også bruge den til at finde ud af, hvordan det kører.
De fleste moderne browsere indeholder specifikke udviklingsværktøjer, der hjælper dig med at analysere backend-kode, som du derefter kan tage med tilbage i dit projekt. Her er nogle af de mest populære.
19. Chrome-udviklerværktøjer
Chromes “DevTools” er æret i alle fællesskaber for deres fantastiske funktionssæt og diagnoser.
I betragtning af fremkomsten af Chromium-baserede browsere har mange af dem det samme sæt DevTools med lignende genveje. Du kan tjekke Microsoft Edge, Brave, selve Chromium og mange flere kloner og arbejde med dine projekter i browseren.
Elements-fanen vil være et regelmæssigt besøg, da det er her, du vil se sidens kildekode. Og efter vores mening giver fanen Performance-fanen indsigt i sidens indlæsning, som andre browser DevTools ikke kan matche:
Fanen Sikkerhed giver også nogle gode oplysninger, som vil være nødvendige for at overvåge (eller undersøge) en kundes websted:
Endnu bedre er det, at du vil kunne generere Google Lighthouse-rapporter direkte fra din Chromium-baserede browser:
DevTools her er subjektivt set de bedste, så du vil opleve, at Chrome- og Chromium-baserede brugere vil læne sig op ad dem. Selvom andre browsere også har DevTools, og de er også værd at overveje.
20. Firefox Developer Tools
Med en månedlig aktiv brugerbase på omkring 220 millioner er Firefox stadig en populær browser, på trods af Googles dominans. Tidligere roste udviklere Firebug, og den var ofte førende inden for debugging i browseren.
I dag har vi Firefox’ udviklerværktøjer:
Der er et kernesæt af funktioner til visning af webstedets kildekode (Inspector), en debugger, hukommelse, lagring og meget mere.
For begyndere er konsollen en indgang til kodning generelt, fordi du kan køre JavaScript direkte i browseren, og det er en nem måde at afprøve snippets på og finde dig til rette, når du først begynder:
På trods af dette mener vi, at Firefox (og andre browsere) har mindre pakket ind i deres Developer Tools end Chromium-baserede browsere. Alligevel vil du ofte trykke Firefox i brug til debugging og fejlfinding på tværs af browsere. Som sådan er det godt, at de er ideelle til næsten alle opgaver.
Frontend Frameworks
Når vi taler om frontend, har du brug for noget, der er egnet til at skabe flotte hjemmesider. Dit valg af rammeværk her er afgørende. Du bør altid vælge det bedste værktøj til opgaven.
Med det i tankerne, lad os se på et par populære valg.
21. Bootstrap
Mobil responsivitet er en standardfunktion i moderne webdesign. Det er et velkomment skridt, i betragtning af hvordan mobil browsing nu har overhalet desktops. I betragtning af dette vil du gerne have en måde at oprette mobile first-websteder hurtigt.
Bootstrap er et fantastisk værktøj til webudvikling, som bliver brugt i stor stil:
Det er et værktøjssæt, der kombinerer JavaScript-plugins, Sass-variabler, nogle præfabrikerede komponenter, et responsivt grid-system af høj kvalitet og meget mere. Der findes endda en markedsplads med officielle temaer, der fungerer med Bootstrap, og masser af WordPress-websteder bruger også temaer, der er bygget oven på designrammen.
Om du bruger Bootstrap eller ej, afhænger naturligvis af, hvad dit projekt har brug for. Det er dog logisk at antage, at webudviklingsprojekter med stramme budgetter og hurtige turnarounds vil vende sig mod en “Bootstrap”-løsning og tilpasse den til WordPress. Da denne framework og WordPress er gratis, bliver din tid den eneste omkostningsfaktor.
22. Tailwind CSS
På papiret giver Tailwind CSS ikke mening. Det er et frontend framework til et sprog, der er en del af den centrale treenighed inden for webudvikling. Som sådan er det logisk at tro, at målbrugeren allerede ville have den rette viden uden behov for en framework.
I virkeligheden giver Tailwind CSS perfekt mening. Det er en måde at designe frontenddelen af dit websted på uden at forlade HTML.
Du bruger utility-klasser inden for forskellige tags til at tilføje CSS fra et centralt StyleSheet. CSS er naturligvis stadig den primære stylingkilde. Det er bare uden for dit synsfelt, når du opbygger et layout ved hjælp af HTML. Det giver dig således mulighed for at udvikle struktur og stil på samme tid.
Denne fremgangsmåde minder om 960 Grid System og ville fungere godt sammen med dette framework. Når det er sagt, er der en fare for at pakke elementer med så mange klasser, at du kan ende med et rod af spaghetti-kode. Du skal have tålmodighed og disciplin for at arbejde med Tailwind CSS, men hvis det passer til dit projekt, er det et hurtigt og robust framework.
23. Bulma
Vi har gjort alle de fremskridt, vi har gjort med at designe webstedsstrukturer og layouts, at skabe fleksible, responsive og dynamiske kolonner er en hindring for mange. Selv om håndtering af dette ikke er det eneste, Bulma kan gøre, er denne type applikation kød og kartofler til framework’en:
Meget ligesom Tailwind CSS skjuler Bulma CSS’en og giver dig nytteklasser til din HTML. Det er bygget med Flexbox, mobile first og modulært. Det er fantastisk, hvis du kun har brug for få komponenter. Du kan også blande og matche frameworks, hvis du ønsker det.
Desuden behøver du ikke noget JavaScript for at få Bulma op at køre, da det kun er CSS. Du er i stand til at tilføje grænsefladeelementer som f.eks. knapper med et absolut minimum af kode. Det er en ukompliceret open source-ramme, som kan tilpasses til dit eget projekts behov. I vores bog er det en værdifuld egenskab, som du gør klogt i at udnytte.
24. Foundation
ZURB-holdet har sit helt eget bud på en CSS-framework’ i Foundation. Det er et semantisk værktøj, der fokuserer på mobiler, og som har to varianter til websteder og e-mail:
Foundation er bygget med tilgængelighed som en prioritet. Hver enkelt snippet i Foundation leveres med dedikerede ARIA-attributter. Men før du når til dette stadium, er Foundation imponerende til hurtig prototyping på grund af den måde, du tilføjer det til din HTML. Du er i stand til at oprette næsten alle strukturelle elementer på din side – selv forskellige typer menuer og navigation:
ZURB tilbyder også et væld af fremragende dokumentation og vejledninger, så du kan lære alt det praktiske omkring framework’en. Foundation er enkel at bruge, men vi formoder, at du kan gå i dybden med at bygge websteder og komme ud med komplekse layouts og funktionalitet.
Du finder også en masse skabeloner på Foundation-webstedet også. Det er bare-bone wireframes til at hjælpe dig med at komme i gang – en tilføjelse vi sætter pris på:
I det store og hele gør Foundation-rammen, hvad der står på dåsen. Det vil være centralt for udviklingen af dit websted, snarere end at du kan tilføje flere funktioner. Som sådan bruger du det måske ikke til alle projekter. Men når det anvendes, vil det gøre forretningen på alle slags websteder.
25. Materiale-UI
Vi vil diskutere React mere detaljeret senere, men indtil videre skal du vide, at Material-UI er baseret på dette JavaScript-frameworks komponentbibliotek. For de uvidende er Material Design Googles “filosofi” om, hvordan man skal designe et websteds frontend. Det betyder masser af Roboto-skrifttyper og farveblokke:
Du importerer biblioteket til React og bruger derefter dedikerede HTML-tags til at opbygge dit websted:
Hvis du vil tilpasse elementet yderligere, tilføjer du klasser til dine HTML-tags. Hele blokken af kode er pakket ind i en funktion, og du renderer detaljerne (og siden i forlængelse heraf) i React.
Der er også mange gratis og premium-temaer til rådighed, som dækker mange anvendelsesmuligheder og priser:
Da Material-UI har ét specifikt anvendelsesområde – at skabe websteder omkring Material Design – vil det være et go-to framework, hvis dette er dit mål. Især tema-biblioteket vil være en værdifuld ressource til at komme i gang, uanset dit budget.
26. HTML5 Boilerplate
Hvis du er en WordPress-udvikler, er du måske stødt på Underscores. Det er et bar-bones WordPress-starttema, der sparer dig for utallige timer med at sammensætte dit websteds funktionelle og centrale elementer. HTML5 Boilerplate gør det samme på et generelt designniveau.
Som sådan indeholder det syv filer, der spænder over HTML, CSS og JavaScript. De indeholder alle kun de mest nødvendige filer og kode til at gengive en side. Ud over dette punkt er det op til dig, hvordan din side bliver til.
HTML5 Boilerplate har mange fans, fordi det mere er et tidsbesparende værktøj end et fuldgyldigt framework. Der er således ikke nogen visuelle elementer ud af boksen til at imponere “tilfældige fagfolk”, men hvis du presser HTML5 Boilerplate i brug, kan du måske opdage, at det fremskynder din udvikling på samme måde som Underscores gør for WordPress-udviklere.
27. Materialize
Mens vi ikke ville kalde Materialize for en konkurrent til Material-UI, er det endnu et framework, der ser ud til at bruge principperne i Material Design til at skabe et layout:
I stedet for at bruge React er Materialize dog en CSS-ramme. Det gør Materialize lettere at implementere på frontend. Ligesom andre CSS-baserede frameworks bruger du klasser i HTML’en til at trække elementer ind i frontend.
Når det er sagt, er der også en masse JavaScript-komponenter til elementer som f.eks. modals og dropdowns:
Ligesom mange af disse frameworks er der premium-temaer, der hjælper dig med at opbygge layouts i en bestemt stil. De er dog alle statiske HTML-temaer, hvilket kan vise sig at være et problem, hvis du ønsker at implementere JavaScript. I disse tilfælde bør du måske overveje Material-UI i stedet.
Frameworks for webapplikationer
Kort sagt giver et JavaScript-framework eller -bibliotek dig mulighed for at arbejde anderledes med den såkaldte “vanilla”-kode. I dette tilfælde er det for at skabe specifikke webapplikationer og websteder. Der findes også masser af “varianter” – lad os gennemgå et par stykker.
28. React.js
React.js er et populært Facebook-designet JavaScript-bibliotek, som driver mange af de mere moderne WordPress-elementer. Både WordPress.com-backend’en og Block Editor bruger React, og vi vil betragte det som en interface-første måde at bruge JavaScript på.
Som sådan bør WordPress-udviklere – for at parafrasere Matt Mullenweg – lære React.js grundigt. Selvom det ikke kun er et framework for WordPress-udviklere.
Alle steder, hvor du har brug for en moderne og dynamisk brugergrænseflade (UI), vil React være den første valgmulighed. Det bruger en syntaksudvidelse til JavaScript kaldet JSX til at skabe elementer, som derefter renderes til Document Object Module (DOM):
const name = "Ken Starr';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render
Element,
document.getElementById('root')
);JavaScript-variablen i JSX kan være et hvilket som helst gyldigt udtryk, hvilket gør det muligt at opbygge komplekse argumenter. Det gør React til et stærkt valg, når det kommer til frameworks. På grund af dens popularitet mener vi, at React bør være på din “must-learn”-liste, uanset hvor du bruger din udviklingstid.
29. Vue.js
Vue.js er et andet JavaScript framework til at bygge brugergrænseflader. Det er baseret i “view-laget” og er fantastisk til at integrere med andre biblioteker og frameworks.
På HTML-siden kunne Vue ikke være mere tilgængelig. Du giver dit tag et ID og kalder en nøgle fra et ordbogssæt på JavaScript-siden. Dataene er nu reaktive, og dataene og DOM er forbundet.
På den måde minder Vue.js meget om nogle af de CSS-rammer, som vi så på tidligere i artiklen. Dette framework er overbevisende, og vi opfordrer dig til at kigge dokumentationen igennem for at se, hvad der er muligt.
Selvom Vue.js understøtter JSX-deklarationer, er det bedre egnet til at bruge skabeloner baseret på de “klassiske” webteknologier. Som sådan vil den være ideel for udviklere, der ikke kun vil arbejde i JavaScript.
30. Express.js
Vi bevæger os ind på meta-framework-territorium her, da Express.js forbinder til Node.js og udgør en base for andre frameworks.
Det er et minimalistisk framework (deraf navnet), og en af de vigtigste fordele er, at det hjælper dig med at organisere komponenter på serversiden i et velkendt Model-View-Controller-format (MVC). Som sådan ser koden mere kompliceret ud end andre frameworks – selv vanilla JavaScript:
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send("Hello world!");
});
app.listen(3000);Vi tror, at Express.js vil passe til applikationer, der trækker og skubber meget fra databaser. Det gør det velegnet til mange moderne webapplikationer og backend-udviklere, som ønsker at arbejde med frontend-opgaver med et minimum af stress.
31. Svelte.js
En solid tommelfingerregel, når du udvikler til internettet, er at sørge for, at dine websteder fungerer på så mange browsere som muligt. Når det er sagt, kan du i nogle tilfælde ønske at udvikle apps eller websteder uden at understøtte ældre browsere. I disse tilfælde bør Svelte.js stå øverst på din liste.
Frameworket har fået sit navn på grund af dets filstørrelse – blot 5kb, når det er minificeret. Den har et jQuery-lignende format, der vil være let for velkendte brugere:
$('.hello').text("Hello svelte");Der er under 40 funktioner i Svelte API’et, så det vil være nemt at komme i gang. Desuden kan du nemt tilføje nye funktioner ved hjælp af $.fn.
Du finder “polyfills” til understøttelse af Internet Explorer 9, men det er næsten den eneste indrømmelse. Hvis du ønsker hypermoderne browserunderstøttelse ved hjælp af et superlækkert framework, kan Svelte.js være noget for dig.
32. Laravel
Indtil videre har vi kigget på JavaScript- eller CSS-frameworks. I betragtning af udbredelsen af PHP giver det mening at dække et framework til dette sprog også. Laravel er det ideelle valg her, da det er populært blandt mange udviklere på grund af dets syntaks og økosystem:
Det er mere passende at sige, at Laravel er et økosystem, da det indeholder masser af værktøjer til at hjælpe dig med at opbygge projekter. Selv om du ikke bruger meget af selve framework’en, kan du bruge Laravels Homestead, et Vagrant-baseret lokalt udviklingsmiljø.
Laravel selv er et Docker-baseret PHP-rammeværk og bruger en CLI (kaldet Sail) til at interagere med det. Ligesom Vagrant bruger du sail op til at bygge containere og køre dem.
Laravel har dog mange flere strenge på sin bue. Du kan f.eks. bruge det som en full-stack framework, en API backend til Next.js apps og næsten alt derimellem.
Hvis du er PHP-udvikler, vil Laravel være et centralt (om ikke velkendt) værktøj i din arbejdsgang.
33. Gatsby
Gatsby er et open source frontend framework, der har fået en masse opmærksomhed på det seneste. Det skyldes, at Gatsby er hurtigt, skalerbart, performant og sikkert.
Der er en superhurtig installationsproces, der involverer Node Package Manager (npm). Vi vil have mere om dette senere. Selv om det er et JavaScript-framework, genererer Gatsby statiske HTML-filer på køretid, så der er ingen måde at angribe et websted på. Desuden automatiserer Gatsby ydelsen for at holde dit websted kørende i en optimal konfiguration.
Med den automatiserede ydeevne, den dynamiske skalering og den statiske HTML-opbygning føles Gatsby som en levende organisme. Der er en kompleks kodning “makeup”, der involverer JSX, Markdown, CSS og meget mere baseret på dine behov. Hvert trin i din arbejdsgang og hver del af din stack kan skræddersys til dine behov.
WordPress-udviklere vil også kunne lide, hvordan Gatsby integreres med platformen. Det vil dog ikke være egnet i alle tilfælde. Hvis du f.eks. har brug for at administrere et cloud-baseret CMS fuldt ud, er dette ikke noget for dig. Alligevel kan Gatsby tilpasse sig dit projekt i de fleste tilfælde, og det fungerer godt med WordPress.
34. Django
Trods al snakken om at Python er et “begynder-” eller “lærings”-programmeringssprog, tjener det som rygrad på mange højt profilerede websteder. Nogle af de største websteder – Instagram, Uber, Reddit, Pinterest og flere – bruger Django. Ofte finder du ingen omtale af selve Python, men kun Django.
Django er en ramme, der bruger Python til at skabe server-side webapplikationer. Det er lige så ligetil at bruge som Python selv, med et yderst læsbart format.
Python er et fantastisk scriptsprog til logikbaserede projekter, så det passer godt til en webapplikation at udnytte dette til en webapplikation. Desuden er Pythons behandlingshastighed hurtig, og den grundlæggende filstruktur er let. Fordi det er hurtigt, er Django et fremragende server-side framework sammenlignet med PHP og har lige så meget grunt som det mere populære sprog.
Når det er sagt, er udbredelsen lavere, hvilket måske skyldes Pythons ry som et sprog, der kan læres. På trods af dette fungerer Django godt sammen med andre sprog, f.eks. JavaScript, som grundlag for en moderne webapp.
Hvis du planlægger at bruge et CMS som WordPress, eller hvis du skaber løsninger til React-baserede projekter, har du naturligvis færre muligheder. Alligevel tror vi, at vi vil se en stigning i antallet af websteder, der kører på Django.
35. Ruby on Rails
Programmeringssproget Ruby var for et par år siden “darling” blandt begyndersprog og scripting-alternativer til PHP. Det bliver ofte sammenlignet med Python.
Og ligesom Django var Ruby on Rails også en favorit hos mange udviklere.
Du kan finde Ruby brugt i mange server-side- og under-the-hood webapplikationer. Desuden bruges Ruby on Rails som en server-side framework på utallige websteder. Det bruger en MVC-tilgang og tilbyder strukturer til webtjenesten, sider og en database. Som sådan har du et barebones-websted, der venter på dig, out of the box.
Ruby on Rails vil passe til dit projekt, hvis det skal planlægge mange opgaver og arbejde med tredjepartsløsninger. Der er f.eks. indbygget integration med filopbevaring som Google Cloud og en wrapper til at sende e-mails.
I det hele taget er det et godt valg, hvis du ønsker et robust sæt standardindstillinger (f.eks. mappestruktur), som kan tilpasses efter behov. På den anden side er det ikke et godt valg, hvis du kan lide at bruge API’er under udviklingen.
Kodestrukturen i Ruby on Rails kan blive kompleks og udfordrende at forstå med store projekter. Køretiden kan også blive påvirket, så det er måske ikke det bedste framework til hastighedskritiske projekter.
Alligevel er Ruby on Rails et af de førende webserver-side frameworks, og brugen af det bliver ikke langsommere for egnede projekter.
36. TypeScript
Kort fortalt giver TypeScript valgfri statisk “typekontrol” til JavaScript. Det er et “supersæt” af sproget, og det understøtter også mange andre JavaScript-biblioteker. I det hele taget er TypeScript JavaScript med nogle få ekstra funktioner, og du kan kompilere begge sprog ved siden af hinanden.
Mange udviklere har vendt sig mod TypeScript for at reducere antallet af runtime-fejl, de får. Typefejl er en af de mest almindelige, og hvis du reducerer dem, kan du få en masse ekstra tid tilbage.
For at få et meget simpelt eksempel på TypeScript kan du overveje en streng:
let helloWorld = “Hello World”;
// ^ = lad helloWorld: string
Her bruger TypeScript let i stedet for det sædvanlige var til helloWorld-variablen. Herfra ved TypeScript, at helloWorld er en streng og kontrollerer den på dette grundlag.
I sidste ende er TypeScript ikke et uundværligt værktøj til webudvikling, selv om det er blevet mere populært på grund af dets centrale mærkevarefunktion. Hvis du ender med at spare noget tiltrængt tid, kan det blive afgørende for din arbejdsgang.
37. GraphQL
Her er et unikt værktøj, der kan finde gunst blandt udviklere, der arbejder med data i et API. GraphQL er et forespørgselssprog, der bruges i et API, som også fungerer som en køretid til at servere resultaterne af den forespørgsel, du laver.
Med et standard REST API skal du ofte indlæse fra flere URL’er. Med GraphQL kan du hente data fra en enkelt forespørgsel. Desuden er GraphQL-API’erne ordnet efter type i stedet for endpoints. Denne klassificering hjælper effektiviteten af din forespørgsel og giver mere eksplicitte fejl, hvis noget går galt.
Typer kan også bruges til at springe over at overskrive manuel parsingkode, i betragtning af hvordan GraphQL implementerer dem. Du kan også tilføje nye felter og typer til din API uden at påvirke det arbejde, du har udført indtil nu.
Værktøjet er fleksibelt og skalerbart på mange områder. Fordi GraphQL skaber et ensartet API for dit projekt, kan du trække en motor ind, der matcher dit valgte projektsprog. Det gør det fantastisk til en bred vifte af applikationer, snarere end en nicheløsning til et udbredt problem.
Du kan finde GraphQL anvendt på websteder som GitHub, Spotify, Facebook og mange flere. Det skulle give dig en idé om, hvordan GraphQL bruges på forespørgselstunge websteder af alle slags. Som sådan kan du få brug for at trække på denne løsning mere end én gang i løbet af de næste 12 måneder og fremover.
Pakkehåndtere
Programmeringssprog, frameworks og andet har mange bevægelige dele. Disse afhængigheder skal downloades og installeres på den rigtige måde for at fungere. Kom ind i pakkehåndteringssystemet. Disse hjælper dig med at hente og installere specifikke afhængigheder fra kommandolinjen. Lad os gennemgå et par værktøjer, som du vil støde på.
38. Node Package Manager (npm)
Ja, downloading af installationsprogrammer har sin plads. Men at bruge en pakkehåndtering fra kommandolinjen er super simpelt i de fleste tilfælde. Det giver også en lynhurtig måde at hente og installere filer fra nettet på.
Node Package Manager (npm) er et JavaScript-specifikt webudviklingsværktøj, der ejes af Microsoft, og som lader dig installere sprogspecifikke pakker efter behov:
Hvis man for eksempel søger efter React-packages, får man over 155.000 resultater frem:
Ligesom med et online IDE er npm et webudviklingsværktøj, der ikke får meget “airtime”, primært fordi det er allestedsnærværende. Som sådan vil praktisk talt alle webudviklere bruge dette værktøj.
Men det er utroligt, og nu hvor det er under GitHubs vinger, vil flere udviklere bruge npm i den nærmeste fremtid.
39. Yarn
Meget ligesom npm og pip til Python hjælper Yarn dig med at installere pakker relateret til dit projekt og dets værktøjer. Forskellen her er, at Yarn også er et projektstyringsværktøj.
Installationen er enkel, og det kræver også et minimum af indsats at initialisere Yarn til et nyt projekt. Det er blevet en robust open source-løsning til installation af pakker og administration af dit projekt ved siden af.
Du bruger workspaces til at oprette “monorepos”, og flere versioner af dit projekt lever både i samme repo og kan krydsrefereres. Du kan installere plugins til alt det, som Yarn ikke kan gøre (som du ønsker at tilføje nye fetchers og resolvers til). For at være mere præcis kan du installere plugins, men der er ikke ret mange, i hvert fald ikke i de officielle lister. I stedet skal du kode dine egne, hvis du er desperat efter funktionaliteten. Alligevel er valget der til at tilpasse Yarn til dit projekts behov.
Yarn gør en unik indsats for at blive din primære pakkehåndtering. I et projekt i den virkelige verden vil du måske læne dig mere op ad npm, men Yarn vil snige sig ind i din arbejdsgang på måder, der kun kan gavne dig.
API- og testværktøjer
At sikre sig, at tingene fungerer, er en proces, der ofte springes over, men det kommer også med beklagelser, når tingene går galt. Som sådan bør testfasen af dit projekt være solid, robust og grundig.
På baggrund af dette er her nogle API- og testværktøjer, som du skal have ved hånden til dine projekter.
40. HoppScotch
HoppScotch, der er drevet af Netlify, er et open source API-udviklingsværktøj. Udviklerne kalder det et “økosystem”, hvilket modsiger funktionaliteten under kølerhjelmen.
Det er en no-nonsense og robust løsning, og ikke for sarte sjæle. Indlæringskurven er stejl, hvis du aldrig har brugt et værktøj som dette, hvis du aldrig har brugt det. Der er næsten ingen vejledning i brugen af HoppScotch på nogen af appens sider, men det er normalt ikke et problem, da værktøjet alligevel er beregnet til erfarne udviklere.
Der er mange realtidsforbindelser (WebSocket, SSE med mere) og en GraphQL-implementering. Vi kan også godt lide dokumentationsskaberen:
Den arbejder med dine HoppScotch-“samlinger” for at oprette dokumentation i farten, hvilket er en velkommen tidsbesparelse.
I det hele taget er HoppScotch et funktionelt værktøj, som vil være åbent meget i din browser. Det er en af de løsninger, som du altid vil bruge uden at være klar over det – vi kan ikke give det større ros end det!
41. Postman
Advarsel – vi er ved at nævne det frygtede “C”-ord: samarbejde. Postman er et webudviklingsværktøj, der hjælper dig med at oprette en API (Application Programming Interface) som et team via Postman-platformen:
Der er masser af anvendelsesmuligheder for at integrere Postman i din arbejdsgang. Du kan f.eks. bruge det på en standardiseret måde til applikationsudvikling, hvilket direkte kan oversættes til webbaserede projekter. Du kan simulere slutpunkter ved hjælp af mock-servere, hvilket især vil appellere til WordPress-udviklere.
Du er endda i stand til at oprette onboarding for at hjælpe brugerne af dine API’er med at lære at kende. De projekter, hvor der er masser af brugeromsætning eller betydelig trafik, vil se fordelene her.
Med hensyn til prisfastsættelse tilbyder Postman et gratis niveau, men du vil få mest værdi fra et af premium-niveauerne. Du skal se ud til at betale omkring 12-30 dollars, afhængigt af din faktureringscyklus og antallet af brugere.
42. Testing Library
Kode, der kører, er ideelt, men apps, der fungerer, er slutmålet. Testing Library gør det, som navnet antyder: det giver dig et sæt hjælpeprogrammer, der hjælper dig med at teste dine projekter og opfordrer dig til at bruge god kodningspraksis.
Ideen er, at du opretter tests, der repræsenterer din app-brug. Hvis de kører uden problemer, er der gode chancer for, at din app også vil køre uden problemer. Det er et agnostisk værktøj med hensyn til framework, og det er ikke en test runner. Det centrale formål med Testing Library er at hjælpe dig med at skrive vedligeholdelsesvenlige tests, der er afkoblet fra implementeringsdetaljerne.
Alt i Testing Library-værktøjet er centreret omkring dets vejledende principper. Som sådan skaber du ikke kun tests – du lærer også, hvordan du gør dem bedre og mere værdifulde.
På grund af dette kan Testing Library blive en stor del af din arbejdsgang. Vi vil hævde, at næsten alle projektkæder kan drage fordel af Testing Library, og React-brugere vil næsten helt sikkert ønske at installere dette værktøj som standard.
Samarbejdsværktøjer
På trods af trope om at udviklere er asociale, er sandheden, at teknologi og samarbejde går hånd i hånd.
Lad os derfor samle nogle fantastiske samarbejdsværktøjer, der vil passe ind i dit næste projekt.
43. Jira
Atlassian er et velanset firma, når det kommer til software. Vi er store fans af et par af virksomhedens tilbud: Confluence, Trello, Sourcetree, Bitbucket og vores fokus her, Jira.
Det er et udviklingsværktøj til teams, der bruger agile frameworks – især Scrum, som er så populært. På grund af dette får du et væld af funktioner med i pakken. For eksempel kan du bruge kanban-tavler til at hjælpe med at organisere opgaver og sprints. Du kan også implementere din estimeringsteknik, der er tilpasset din metode og dit projekt.
Jira fokuserer på en gentagelig arbejdsgang: planlæg, sporing, frigivelse og rapportering. Det er centralt for flere agile frameworks, men du kan også oprette dit eget afhængigt af din planlægning forud for projektet. Hvis du er nødt til at dreje mellem sprints, kan du udvikle dit projekt og skalere op eller ned.
Den gode nyhed om Jira er, at der er et gratis niveau, så du kan komme i gang, og rimelige priser for de andre niveauer. Når det er sagt, vil du opdage, at et team på ti personer vil være minimumskravet for at bruge Jira effektivt. Det kan være overkill for enhver mindre gruppe.
44. Taskade
Når det kommer til samarbejdsværktøjer, er det sjældent, at man finder Taskade. Det gør appen en bjørnetjeneste, da det er et fantastisk værktøj til at holde et team fokuseret og på rette spor.
Hvis du er bruger af andre samarbejdsværktøjer som Asana eller Basecamp (mere om begge senere), vil du føle dig hjemme her. De oplysninger, du har mest brug for, såsom to-dos og påmindelser, er centraliseret under kølerhjelmen. Således kan du præsentere det på mange måder afhængigt af dit projekt.
Visningstyperne “Mindmap” og “Org Chart” er stjerneklare, og de giver dig hver især et andet perspektiv på de oplysninger, du har tilføjet.
Appen er vildledende i sin enkelhed. Ud over en fleksibel måde at præsentere og administrere opgaver på, er der ikke meget andet at byde på.
At arbejde med dit team kræver en håndfuld tryk på en knap. For eksempel har hver skærm et chatvindue, der kan udvides:
For nogle, især sammenlignet med andre løsninger, kan Taskade opfattes som barebones og endda underudrustet. Det er dog ikke tilfældet. Taskade en fantastisk måde at samarbejde med et team på, og på grund af sin enkelhed vil det passe direkte ind i det projekt, du arbejder på.
45. Asana
Asana er et af de mere prominente navne inden for samarbejdsværktøjer. Det er et monster, når det gælder om at tage fat i et projekt og piske det i form med hjælp fra et team. Asana er også fantastisk til at tilpasse sig til forskellige arbejdsgange. Du kan f.eks. skifte mellem lister og kalendere, men også få adgang til tidslinjer også.
Der er også nogle fantastiske teambaserede funktioner og funktioner. Rapporteringen er omfattende, og på højere abonnementer får du adgang til et dashboard, der viser forskellige analyser vedrørende dit teams præstationer. Der er endda en måde at overvåge arbejdsbelastninger for hvert enkelt teammedlem. Asana hjælper dig således med at holde besværet til et minimum og forhindrer teammedlemmer i at brænde ud.
Hvad mere er, er det gratis niveau ikke en forkrøblet demo af den fuldt udbyggede app. Du kan skalere Asana i takt med, at du skalerer et team, og der er god funktionalitet her til at hjælpe dig. Du kan f.eks. tildele arbejde til teammedlemmer og administrere hver enkelt arbejdsgang. Du kan også sende generelle meddelelser på et enkelt arbejdsområde til hele teamet.
Det er en gammel kending inden for kollaborativ projektstyring, men Asana leverer næsten hver gang. Du vil opdage, at en stor del af dine kunder og holdkammerater også har en Asana-konto, hvilket betyder, at det vil ske oftere, end du måske tror, at du samles i appen.
46. Basecamp
Basecamp er en anden stor spiller inden for team-baseret projektstyring. Det er en af de gamle vagter, der har eksisteret næsten lige så længe som WordPress selv. Kernesoftwaren har eksisteret meget længere, så den har en stamtavle og en track record, der er værd at bemærke.
På papiret er der intet spændende ved Basecamp i forhold til konkurrenterne. Ærligt talt har mange af de andre samarbejdsapps indhentet det, som Basecamp tilbyder. Det er dog ikke hele historien.
Ja, du kan oprette opgaver og to-do-lister, tildele dem til teammedlemmer og arbejde med det hele på projektniveau. Basecamps dræberfunktioner er dog infrastruktur og design.
Der er en enkel tilgang til at bruge Basecamp: Opret et projekt, udarbejd din to-do-liste eller tidsplan, og tildel opgaverne til teammedlemmerne. Hvert projekt har en række selvstændige aspekter, der hjælper dig med at få et projekt i mål:
Som sagt er der ikke noget banebrydende her, men det er netop pointen. Basecamp er et pålideligt projektstyringssystem uden mange klokker og fløjter. Som sådan vil du blive ved med at vende tilbage til det, fordi det er pålideligt og kan udvides ud fra dine behov.
47. Livecycle
Livecycle er et kraftfuldt værktøj, der er designet specifikt til samarbejde med udviklerteams. Livecycle udnytter kraften i “preview-miljøer”, der er ved at blive en almindelig teknik, der bruges af udviklingsteams til at skabe midlertidige, delbare forhåndsvisninger af nye ændringer eller funktioner i en udviklers pull-anmodning.
Preview-miljøerne lader udviklere dele et øjebliksbillede af den seneste version uden at skulle flette ændringerne til iscenesættelse eller produktion.
Livecycle tilføjer et Figma-lignende samarbejdslag til disse forhåndsvisningsmiljøer, så alle på holdet kan give visuel feedback i kontekst.
Ved at styre anmeldelsesfeedbacken på denne måde gør Livecycle gennemgangsprocessen kortere, får udviklere feedback af højere kvalitet og gør det muligt for teams at sende kode til produktion hurtigere. Stærkt anbefalet til ethvert udviklingsteam, der ønsker at påvirke deres gennemgangsarbejdsgange og overordnede udvikleroplevelse.
Opgave taskrunners
At arbejde med små opgaver inden for et webudviklingsprojekt giver et problem. De er nødvendige for at gøre dig mere effektiv og produktiv. Du er nødt til at bruge tid og energi på at få disse mikroopgaver over stregen på den anden side.
Til at hjælpe dig har du brug for en task runner. Her er et par af vores favoritter.
48. Grunt
Grunt er en JavaScript-specifik task runner, der søger at automatisere nogle af de banale og gentagende opgaver, du støder på dagligt. Tænk på opgaver, som du måske typisk betragter som almindelige: linting, minification, kompilering og mange flere.
Grunt håndterer disse for dig via en JSON-baseret konfigurationsfil (kaldet en “Gruntfile”). Her er et eksempel:
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};Hvis du ofte oplever, at dine projekter mister tid på grund af rutineopgaver, vil Grunt sandsynligvis blive en del af din kasse med webudviklingsværktøjer, som det allerede er tilfældet for WordPress, Bootstrap og mange andre.
49. Gulp
Når man sammenligner opgaveløbere, er det ofte et shootout mellem Gulp og Grunt. Gulp er et JavaScript-baseret værktøjssæt til automatisering af din arbejdsgang og forøgelse af din effektivitet.
Du bruger dedikerede filer og “streams” til at handle på dine aktiver og kode, før de skrives på disken. Hver opgave, du opretter, er en “asynkron” funktion, og du kan indstille den er som enten privat eller offentlig. Forskellen er en af tilladelserne: private opgaver kan ikke køres af slutbrugeren og er designet til at arbejde sammen med andre funktioner.
Apropos det, så kan du bruge funktionerne series() og parallel() til at oprette opgaver. Det betyder, at du kan tage små opgaver, gøre dem til ét tandhjul i et mere omfattende system og derefter indlejre dem.
Desuden kan du også udvide Gulp-funktionaliteten gennem fællesskabsskabte plugins:
Det er måske en generalisering, men både Gulp og Grunt er gode til forskellige ting. Gulp er solidt, når det drejer sig om at arbejde med aktiver, der kan være en del af et mere omfattende sæt instruktioner. På grund af dette skal du vælge den rette task runner på projektbasis.
Værktøjer til containerisering
Vi vil gå ud på et sidespring her og sige, at hvis du ikke bruger en form for containerisering eller et værktøj til virtuelle maskiner, vil dine fremskridt som webudvikler lide under det.
Det gælder selvfølgelig ikke nødvendigvis for alle, men der er mange fordele ved at bruge et containerbaseret udviklingsmiljø. Her er et par udvalgte løsninger.
50. Docker
For mange er Docker det containerbaserede udviklingsmiljø, der er det foretrukne. Open source-platformen handler ikke kun om containere, men det er en ofte nævnt grund til at bruge den.
På fronten er det en simpel proces: Klik på en knap og få et virtuelt sandboxed udviklingsmiljø. Selvfølgelig er alt, hvad der virker simpelt ovenfra, dybt underneden. Docker kombinerer en brugergrænseflade (UI), CLI og API med en sikkerhedsbestemmelse for at give dig hurtig implementering i hænderne.
For mange udviklere vil Docker være centralt for at skabe nye apps. Webudviklere – især WordPress-udviklere – har et udvalg af værktøjer til jobbet. Local by Flywheel og DevKinsta er førende platforme.
Bemærk: Vi har for nylig lanceret DevKinsta – et lokalt udviklingsværktøj til at hjælpe dig med at oprette nye WordPress-websteder. Du kan også implementere webstederne til din Kinsta-konto med et enkelt klik.
Docker integrerer også med mange værktøjer – og flere af dem vil allerede være i din arbejdsgang. Apps som GitHub, VS Code m.m. kan oprette forbindelse til Docker og tilbyde en problemfri integration.
I det hele taget kunne Docker fylde en hel serie artikler om, hvad det indeholder. På trods af dette er intet af det måske nødvendigt. Sandsynligheden er, at du bruger Docker dagligt, og du ved allerede, hvor fantastisk det er!
51. LXD
I enkle vendinger er LXD en containermanager til Linux-distroer. Den er image-baseret og leveres med flere præfabrikerede images til Linux. Ved at bruge en LXD får du ro i sindet, fordi du udvikler på det samme standard slutbruger OS som standard.
Det blev grundlagt af Ubuntu-udviklerne Canonical og har naturligvis en open source-struktur. Du er i stand til at skabe sikre miljøer ved hjælp af uprivilegerede containere, styre ressourceforbruget ved hjælp af mange ressourcer og endda administrere netværk.
LXD er også skalerbar, hvilket betyder, at du kan køre tusindvis af beregningsnoder eller holde tingene enkle. Til cloud-baserede applikationer integreres LXD med OpenNebula – sidstnævnte har officielle drivere til at administrere LXD-instanser.
Som standard bruger mange containeriseringsværktøjer Ubuntu som det virtuelle standardmiljø. Alligevel er LXD optimeret til at køre distroen. Hvis det ikke er noget, du har prøvet før, er det tiden værd at køre et testarbejdsområde igennem. Du kan finde ud af, at det passer bedre til specifikke arbejdsgange eller kundeprojekter end konkurrenterne.
Værktøjer til billedoptimering
Aktiver (eller medier, eller hvad du nu foretrækker at kalde dem) findes i overflod på nettet. Der findes hele onlinekulturer, der er dedikeret og baseret på billeder. Som sådan er det afgørende at få dine webudviklingsprojekter til at fungere godt på trods af antallet af billeder, der anvendes.
Her er nogle af de mest populære og fremragende værktøjer til billedoptimering, der findes.
52. ShortPixel
Der findes mange apps til billedoptimering, men ShortPixel har en subjektivt robust algoritme. Den er i stand til at knuse billedfilstørrelser uden at påvirke kvaliteten. Hvis vi skal være kræsen, vil vi foreslå, at fordi standardindstillingen er den højeste tilgængelige komprimering, er der ingen andre steder at gå hen, hvis dit billede ikke er presset nok. Alligevel er dette ikke en væsentlig kritik.
ShortPixel har tonsvis af funktionalitet under motorhjelmen. Der er tre komprimeringsniveauer, en fantastisk PDF-optimering og endda en GIF-kompressor. Sidstnævnte er noget, du ikke finder i mange andre værktøjer, så det er en velkommen tilføjelse til produktlinjen.
Hele grænsefladen er også tilgængelig: Du trækker og smider billeder på uploader og venter på, at ShortPixel udfører sin magi. Når dine billeder er behandlet, kan du downloade dem som en batch eller vælge individuelle billeder til download:
ShortPixel API-værktøjerne er også robuste. Du finder separate API’er til at reducere online- og offline-billeder, omfattende PHP- og .NET-klientbiblioteker, en JavaScript-baseret adaptiv motor og meget mere.
Vi vil foreslå, at ShortPixel er et værktøj for udviklere, da det er fantastisk til at forbinde dit websted eller din app. Vi vil også sige, at det ville overhale din TinyPNG-afhængighed i et snuptag, især hvis du ønsker at bruge det som en del af en større arbejdsgang.
53. TinyPNG
Det er tid til alles yndlingsværktøj til billedoptimering – TinyPNG. Du kan også bundle TinyJPG i dette indlæg, selv om begge værktøjer arbejder med de samme billedformater.
Du vil opdage, at TinyPNG ikke har ændret sig meget gennem årene. Det er stadig et simpelt træk-og-slip-værktøj til optimering af dine billeder. Der er ikke nogen komplikationer, og der er ikke et omfattende sæt af filformater. Alligevel er det, som TinyPNG tilbyder , suveræn brugervenlighed og en masse integrationer med andre værktøjer.
Der er f.eks. et Photoshop-plugin og – for mere finkornede applikationer – et funktionelt udvikler-API. Selv Python-brugere kan være med, da API’en også understøtter dette sprog. Der er også blevet oprettet adskillige plugins ved hjælp af API’et til masser af tredjepartsværktøjer.
Vi antyder ikke, at TinyPNG har monopol på markedet for billedoptimering, men det er ofte det første valg for mange brugere. Det tager få sekunder at tage et billede og lægge det i uploader, og når du får en 99,9% perfekt repræsentation af dit billede tilbage, er det nemt at stole på det.
Værktøjer til test af websteder
Vi talte tidligere om at teste din API og kernewebstedets kode, men dette går dog glip af dit websteds ydeevne. Her er et par værktøjer, som vi elsker, og som også kan hjælpe dig med at analysere, hvordan dine websteder performer.
54. Responsively
Hvis du nogensinde er blevet overvældet af antallet af media queries, som du skal udføre og perfektionere i din app, så tjek Responsively ud. Det er et open source frontend-værktøj, der hjælper dig med at udvikle websteder i henhold til de forskellige viewports for de forskellige enheder, du har valgt.
Det fantastiske ved dette er, hvordan du kan sammenligne layouts side om side. Det giver dig en solid chance for at øge din konsistens mellem enheder. Hver enhed er præcis, og der er mange at vælge imellem, hvilket er fremragende, hvis dit websted er rettet mod specifikke enheder.
Du kan også tilføje de dedikerede browserudvidelser til Mozilla Firefox, Microsoft Edge og Google Chrome for at sende sider til Responsively-browseren. Herfra kan du åbne de indbyggede udviklingsværktøjer og komme i gang med arbejdet.
Der er tonsvis af andre funktioner, såsom screenshot-funktionalitet, hot-loading-understøttelse og meget mere, der kan hjælpe dig med at udvikle. Det er svært at argumentere imod taglinen om, at Responsively er “webudviklerens browser”. Det kan ende med at blive en central komponent i din arbejdsgang.
55. Google Lighthouse
For mange er Googles PageSpeed Insights et værdifuldt værktøj til at opdage, hvordan et websted klarer sig, og hvor du kan forbedre indlæsningshastigheden.
Når det er sagt, er noget af softwaren under kølerhjelmen mere interessant at se nærmere på i dybden. Det kunne også være bedre egnet til dine behov. Google Lighthouse kan køres mod enhver webside og giver revisioner og rapporter om sidens ydeevne, SEO, Progressive Web Apps (PWA) osv.
De primære måder at køre Google Lighthouse på er fra kommandolinjen, ved hjælp af Chromes DevTools eller som et Node-modul. Hvis du bruger PageSpeed Insights-grænsefladen, genererer Lighthouse nogle af scorerne og udbyderne yderligere indsigt.
Det er værd at bemærke, at Google Lighthouse og PageSpeed Insights på overfladen ser ens ud. Men PageSpeed Insights bruger laboratoriebaserede data kombineret med brugerdata fra den virkelige verden. Lighthouse’suse analyse ser bort fra brugerdata og måler flere elementer på dit websted.
Efter vores mening er det værd at køre både PageSpeed Insights og Lighthouse, især hvis din kundes mål er at komme øverst på SERP’erne (Search Engine Results Pages). Under alle omstændigheder er det et solidt værktøj at have ved hånden, og det kunne endda erstatte PageSpeed Insights som dit foretrukne præstationsværktøj.
56. Cypress
End-to-end-test er noget, der ikke er en glædelig oplevelse for mange udviklere. Cypress har valgt denne bakke at dø på – det er en no-fuss-løsning, der går imod tendensen for end-to-end-test og producerer noget stjerneagtigt.
Mens de fleste end-to-end testværktøjer er baseret på Selenium, går Cypress i en anden retning. Det betyder, at de problemer, som brugerne finder med Selenium-baserede testere, ikke er til stede her. Faktisk ønsker udviklerne at gøre det nemt at opsætte, skrive og køre tests.
For at gøre dette har de bygget arkitekturen op fra bunden og fokuseret på end-to-end-testning med udelukkelse af andre former. For at hjælpe med ydeevnen kører Cypress i den samme køreløkke som dit program, i stedet for at udføre fjernkommandoer via netværket.
Da testkoden kører i browseren, er der ingen driver- eller sprogbindinger at tage hensyn til. Alligevel kan du kompilere ned til JavaScript, før du kører testene.
Hvis du er en kvalitetssikringsingeniør (QA) eller en udvikler, der ønsker, at din end-to-end-testning skal have native adgang til dit arbejde, bør Cypress vække din opmærksomhed. Det bedste er, at der også er et gratis niveau med alle funktioner!
57. Stack Overflow og søgemaskiner
Tillad os for et øjeblik at udvide grænserne for, hvad der betragtes som et webudviklingsværktøj. Stack Overflow er velkendt for alle med bare en smule viden om webudvikling:
Det er et websted med spørgsmål og svar med fokus på programmering, og det er en del af Stack Exchange-netværket, som dækker alle mulige andre emner:
Det er kendt som en go-to ressource for tusindvis af udviklere, og på trods af en vis kontrovers om dets fællesskab er trafikken stadig betydelig. Vi vil vove at påstå, at Stack sammen med din foretrukne søgemaskine udgør et fleksibelt værktøj til webudvikling til at lære og forbedre dine færdigheder.
For eksempel vil du sandsynligvis gå til Stack Overflow, når du støder på en udviklingsblokering i forbindelse med kode. Når der dukker en fejl op, som du er usikker på, hvordan du skal løse, er det ligeledes den hurtigste måde at finde det svar, du har brug for, ved at indsætte det i en søgemaskine.
Eftersom 90% af de adspurgte brugere går til Stack Overflow for at løse problemer, er det sandsynligt, at alle bruger værktøjet. Men for begyndere – eller selv hvis du ikke kan formulere dit problem – vil søgemaskinerne nok være lidt mere venlige.
Referencer om webudvikling
Hvis du er en udvikler, der abonnerer på “RTFM”-ethos, behøver du ikke at blive overtalt af de følgende få indlæg. Hvis du derimod kan lide at gå ind i et problem og finde ud af det, skal du vide, at der har været utallige udviklere før dig, som sandsynligvis har fundet et svar.
På baggrund af dette kan du se på følgende få webudviklingsværktøjer, der alle er baseret på webreferencematerialer.
58. MDN Web Docs
Helt tilbage i nettets tidlige dage var der et websted kaldet Webmonkey, der blev drevet af Lycos og havde til formål at undervise nye brugere i webudvikling og programmering. Ånden fra dette websted lever videre i Mozillas MDN Web Docs. Webmoney lukkede i 2004, og MDN Web Docs kom til i 2005, så der er en naturlig sammenhæng mellem de to.
Det er en samling af ressourcer, der kan hjælpe dig med at lære dig programmering til internettet i nogle tilfælde og Mozilla-specifikke produkter i andre tilfælde. Indholdet er opdelt i to brede kategorier: teknologier og referencevejledninger. Du får vist flere tutorials baseret på dine eksisterende evner og erfaringer, en dedikeret referenceguide og nogle yderligere ressourcer for førstnævnte.
Vejledningerne er alle relateret til specifikke nicher og brancher inden for udviklingsbranchen. F.eks. fungerer webudviklingsreferencen som en “hjørnesten”-side for yderligere HTML-, CSS- og JavaScript-vejledninger.
Der er også brede kig på forskellige brancher, f.eks. spiludvikling, og hvad der skal til for at starte på området:
MDN Web Docs er vigtig læsning for en nybegynder inden for webudvikling, og den tilbyder også mere end nok værdi for en ekspert. Hvis der er noget websted, der fortjener et browser-bogmærke, er det dette!
59. DevDocs – API-dokumentationsbrowser
Tidligere gemte man alle manualer til de produkter, man købte, i en støvet skuffe eller et støvet skab. I takt med at livet er blevet mere digitalt, har disse papirmanualer givet plads til PDF-downloads fra de enkelte producenters websted.
Dermed har vi nu websteder, der samler de digitale versioner af manualer i kuraterede biblioteker. Det giver dig mulighed for at finde det, du har brug for, fra ét samlet lager. Som sådan er det nærliggende, at der også ville eksistere en sådan for emner inden for webudvikling.
Kort sagt er DevDocs et bibliotek med dokumentation for API’er, og det er noget, som vi tror vil være værdifuldt for næsten alle udviklere:
Før du kigger biblioteket igennem, skal du aktivere den ønskede API-dokumentation. Det gør du fra skærmbilledet Preferences (Indstillinger):
Når det er gjort, kan du få adgang til den relevante dokumentation fra en dedikeret træmenu:
Det er en simpel løsning på et ineffektivt problem, idet du har flere API-referencer på ét sted. DevDocs er et andet websted, der fortjener et bogmærke, og det er en skam, at der ikke er en desktop-app tilgængelig for endnu hurtigere reference.
60. CSS-Tricks
Chris Coyier er et navn, som mange webudviklere vil kende. Vi vil vædde med, at du allerede kender det websted, han har grundlagt – CSS-Tricks. Som navnet antyder, er det et websted dedikeret til frontend-kodning, specifikt CSS, og hvordan man bliver bedre.
Som det fremgår af About-siden, var CSS det dominerende emne i de første par år. Siden da er HTML, JavaScript, WordPress og flere andre emner dog blevet lige så vigtige og ofte diskuteret. Resultatet er et websted, der fokuserer på frontend-udvikling, med en masse artikler, videoer og vejledninger til inspiration for dig.
Et enkelt, men værdifuldt element er CSS Almanac, som beskriver selectors og egenskaber i CSS. Det er en fantastisk referencekilde, hvis du har brug for at komme op i gear med visse aspekter af sproget.
Selv om der er reference-lignende aspekter af CSS-Tricks, er det ikke i sig selv en referenceressource. Alligevel bør den være et regelmæssigt sted for dig, uanset om det er via et RSS-feed eller en anden løsning. Indholdet er af høj kvalitet og kan udfordre dig på måder, du ikke havde tænkt på før. Du kan i det mindste abonnere på nyhedsbrevet og vente på, at CSS-Tricks rammer din indbakke.
61. DEV-fællesskab
Forestil dig, at du kunne tage de fremragende dele fra sociale medier, webudvikling og Stack Overflow og derefter skabe et site, der fusionerer dem. DEV Community kunne være resultatet.
Det er en bloggingplatform, men også en måde at finde svar på udviklingsspørgsmål på. Du vælger tags og personer at følge, og dit nyhedsfeed bliver en automatiseret og kurateret tidslinje med indlæg og indsigt:
Det er en rimelig pointe at antyde, at det er oplysninger, som du kan finde overalt – hvis du er villig til at finde dem. Fordelen ved DEV Community er, at det er her, og at det er en målrettet samling af udviklingsemner. Tænk på det som en udviklerkonference, i stedet for at overhøre og blande sig i en relateret samtale ved busstoppestedet.
Det er endnu et site, der vil gøre sig godt i dit RSS-feed eller som en digest i din indbakke. Som sådan er det også en “sleeper”-ressource, idet du vil komme her ofte uden at vide det.
62. Can I use…
Man kan hævde, at Jeeves startede tendensen med at stille spørgsmål på internettet for at finde oplysninger. Han blev hurtigt afløst af forskellige søgealgoritmer, selv om den spørgsmålsbaserede søgning stadig er en pålidelig måde at finde det, du har brug for.
Kan jeg bruge… er frontend-udviklerens svar på “Findes der en Ask Jeeves for CSS?”
Præmissen er enkel: Du skriver CSS-selektoren eller -egenskaben i søgefeltet, og databasen returnerer, om du kan bruge den til at skabe websteder. Du er heller ikke begrænset til CSS. JavaScript og HTML er også understøttet:
Det er en database for frontend-sprog, så den vil ikke søge at returnere resultater for PHP, Python eller andre server-side sprog. Alligevel er Can I use... et enormt og værdifuldt værktøj, som vil hjælpe dig, når det gælder tilgængelighed og design til flere enheder.
Det er et simpelt forslag til at trække et specifikt element frem og se med et blik, om din målbrowser understøtter det:
Hvis du kigger nærmere efter, kan du også finde statistikker som f.eks. udgivelsesdatoen for elementet og en brugsprocent:
Oplysninger om et specifikt element i Kan jeg bruge…I det store og hele bliver Can I use… måske ikke brugt regelmæssigt. I visse faser af et projekt vil den dog være åben næsten hele tiden. Når du først har fundet ud af, hvad dine målbrowsere vil understøtte, kan Can I use.… blive lagt tilbage i dine bogmærker og vente på, at du får brug for det næste gang. Det er en nyttig tjeneste, som kan være en “vandbærer”, når det gælder din frontend-kode.
Opsummering
Tid og penge er knappe, og der er en vis logik i at vælge de samme gamle webudviklingsværktøjer, som du altid har brugt. Men hvis du træffer et velovervejet valg om et projekts behov, vil det betale sig i tid, omkostninger og produktivitet.
I dette indlæg har vi dækket 62 fantastiske webudviklingsværktøjer, som du kan bruge for at give dig og dit team et løft. Det kan være, at du allerede gør det. Hvis de forskellige undersøgelser er korrekte, er der flere udviklere end nogensinde før, der henvender sig til GitHub, TypeScript, forskellige webtjeneste stakke og et af de mange JavaScript frameworks for at få projekterne over stregen.
Uanset hvilke webudviklingsværktøjer du vælger at bruge, har Kinsta-kunder adgang til endnu flere via MyKinsta-platformen. Dette omfatter et hurtigt og nemt boost til din generelle optimering ved at bruge kode-minificeringsfunktion der er indbygget direkte i MyKinsta-dashboardet, hvilket giver kunderne mulighed for at aktivere automatisk CSS- og JavaScript-minificering med et enkelt klik.
Har du et webudviklingsværktøj, som du kan anbefale, og som udviklere vil bruge i den nærmeste fremtid? Lad os høre dine tanker i kommentarfeltet nedenfor!
Skriv et svar