webbutvecklingsverktyg har kommit långt på bara några korta år. Tack vare dessa framsteg kan vi utnyttja kraften i högt testade bibliotek för att förbättra vårt arbetsflöde och dra nytta av större möjligheter när det gäller responsiv design. Inte bara det, vi kan bygga saker tillsammans tack vare ständigt förbättrade versionskontrollsystem. Från webbläsartillägg och plugins till processorer som effektiviserar din kod har det aldrig funnits fler möjligheter att skapa fantastiska webbapplikationer.
men med antalet webb dev verktyg ökar nästan dagligen, hitta den bästa programvaran för att få jobbet gjort kan ibland kännas skrämmande. För att hjälpa dig har vi skapat en lista över viktiga verktyg för frontend-utveckling för att komma igång. Om du är intresserad av att ta reda på om en särskilt, helt enkelt välja den från listan nedan.
- Sublime Text
- Chrome Utvecklarverktyg
- jQuery
- GitHub
- Twitter Bootstrap
- vinkel.js
- Sass
inte angelägen om att läsa? Titta sedan på videon nedan där en av våra Kursspecialister pratar genom verktygen.
1. Sublime Text
Låt oss börja med grunderna: en förstklassig kodredigerare-en som har ett väldesignat, supereffektivt och extremt snabbt användargränssnitt. Det finns flera som gör det bra, men förmodligen är det bästa (och mest populära) Sublime Text.
Artfully drivs av en enmansutvecklingsteam, hemligheten till Sublime framgång ligger i programmets stora utbud av kortkommandon – till exempel möjligheten att utföra samtidig redigering (gör samma interaktiva ändringar i flera valda områden) samt snabb navigering till filer, symboler och linjer. Och när du spenderar 8 + timmar med din redaktör varje dag, lägger de värdefulla få sekunderna som sparas för varje process verkligen upp…
Du kan börja koda med Sublime i denna gratis webbutvecklingshandledning (ingen registrering krävs).
2. Chrome Developer Tools
skulle det inte vara bra om du kunde redigera din HTML och CSS i realtid, eller felsöka JavaScript, allt medan du tittar på en grundlig prestandaanalys av din webbplats?
Googles inbyggda Chrome-Utvecklarverktyg låter dig göra just det. Buntade och tillgängliga i både Chrome och Safari, de tillåter utvecklare tillgång till internalerna i deras webbapplikation. Utöver detta kan en palett med nätverksverktyg hjälpa till att optimera dina laddningsflöden, medan en tidslinje ger dig en djupare förståelse för vad webbläsaren gör när som helst.
Google släpper en uppdatering var sjätte vecka – så kolla in deras webbplats samt Google Developers YouTube-kanal för att hålla dina färdigheter uppdaterade.
3. jQuery
JavaScript har länge ansetts vara ett viktigt front-end-språk av utvecklare, även om det inte är utan problem: riddled med webbläsarens inkonsekvenser, dess något komplicerade och otillåtna syntax innebar att funktionaliteten ofta LED.
det var fram till 2006, då jQuery – ett snabbt, litet, plattformsoberoende JavaScript-bibliotek som syftade till att förenkla front-end – processen-dök upp på scenen. Genom att abstrahera mycket av den funktionalitet som vanligtvis lämnas för utvecklare att lösa på egen hand, tillät jQuery större utrymme för att skapa animationer, lägga till plug-ins eller till och med bara navigera i dokument.
och det är tydligt framgångsrikt – jQuery var det överlägset mest populära JavaScript-biblioteket som fanns 2015, med installation på 65% av de 10 miljoner mest trafikerade webbplatserna på webben.
4. GitHub
det är varje utvecklares värsta mardröm-du arbetar med en ny projektfunktion och du skruvar upp. Ange versionskontrollsystem (VCS) – och mer specifikt GitHub.
genom att rulla ut ditt projekt med tjänsten kan du se alla ändringar du har gjort eller till och med gå tillbaka till ditt tidigare tillstånd (gör irriterande misstag en sak av det förflutna). Förvarets värdtjänst har också ett rikt utvecklingsgemenskap med öppen källkod (vilket gör samarbete mellan Team lika enkelt som paj), samt tillhandahåller flera andra komponenter som felspårning, funktionsförfrågningar, uppgiftshantering och wikis för varje projekt.
många arbetsgivare kommer att leta efter finslipade Git-färdigheter, så nu är det den perfekta tiden att anmäla sig – plus det är ett bra sätt att engagera sig och lära av det bästa med ett brett utbud av open source-projekt att arbeta med.
5. Twitter Bootstrap
trött på att skriva i samma styling för en behållare? Vad sägs om den knappen som fortsätter att beskära upp? När du börjar bygga front-end-applikationer regelbundet börjar du märka att samma mönster dyker upp.
UI-ramar är ett försök att lösa dessa problem genom att abstrahera de gemensamma elementen i återanvändbara moduler – vilket innebär att utvecklare kan ställa in elementen i nya applikationer med snabbhet och lätthet.
den mest använda av dessa ramar är Bootstrap, ett omfattande UI-paket som utvecklats av teamet på Twitter. Komplett med verktyg för att normalisera formatmallar, bygga modala objekt, lägga JavaScript plugins, och en uppsjö av andra funktioner, Bootstrap kan dramatiskt skära ner på mängden kod (och tid) som behövs för att bygga ditt projekt.
6. Kantig.JS
HTML är vanligtvis hörnstenen i någon frontend-utvecklares verktygslåda, men den har vad många uppfattar som en allvarlig brist: den var inte utformad för att hantera dynamiska vyer.
det är här AngularJS, en öppen källkod webbapplikation ram, kommer in. Utvecklad av Google, AngularJS låter dig utöka programmets HTML-syntax, vilket resulterar i en mer uttrycksfull, läsbar och snabb att utveckla miljö som annars inte kunde ha byggts med HTML ensam.
projektet är inte utan kritiker: vissa känner att denna typ av databindning ger en rörig, icke-Separerad kod, men vi tycker fortfarande att det är en ovärderlig färdighet att ha i ditt front-end kit.
7. Sass
Web dev-verktyg som sparar tid är din bästa vän och en av de första sakerna du lär dig om kod är att den måste vara torr (”upprepa inte dig själv”). Det andra du förmodligen lär dig är att CSS vanligtvis inte är särskilt torrt.
gå in i CSS-preprocessorns Värld, ett verktyg som hjälper dig att skriva underhållbar, framtidssäker kod, samtidigt som du minskar mängden CSS du måste skriva (håller den torr).
kanske mest populär bland dem är Sass, ett åtta år gammalt open source-projekt som ganska mycket definierade genren av moderna CSS-förprocessorer. Även om det är lite knepigt att ta tag i början, kommer Sass kombination av variabler, häckning och mixins att göra enkel CSS när de sammanställs, vilket innebär att dina formatmallar blir mer läsbara och (viktigast av allt) torra.
slutsats
om tanken på att lära sig dessa frontendverktyg och ställa ut på en 7-månaders resa för att bli webbutvecklare tilltalar dig, rekommenderar jag verkligen att du tittar på den nya Full-Stack Webbutvecklingskursen från CareerFoundry. Den är utformad för att lära dig kärnan frontend teknik från grunden innan du fortsätter att förse dig med mycket eftertraktade färdigheter i JavaScript utveckling. Du kommer att paras ihop med två erfarna utvecklare för online mentorskap och handledning, och det finns en jobbgaranti: om du inte får ett jobb som webbutvecklare inom 6 månader efter examen får du pengarna tillbaka. Kontakta en karriärrådgivare idag för att ta reda på mer och gå med i vår allra första fullständiga kohort.