Web development tools has come a long way in just a few short years. Tämän edistyksen ansiosta voimme valjastaa erittäin testattujen kirjastojen voiman parantamaan työnkulkuamme ja hyötymään suuremmista mahdollisuuksista reagoivassa suunnittelussa. Sen lisäksi voimme rakentaa asioita yhdessä yhä parantuvien versionhallintajärjestelmien ansiosta. Selaimen lisäosista ja liitännäisistä prosessoreihin, jotka virtaviivaistavat koodiasi, ei ole koskaan ollut enemmän mahdollisuuksia luoda mahtavia verkkosovelluksia.

mutta web dev-työkalujen määrän kasvaessa lähes päivittäin, parhaan ohjelmiston löytäminen työn tekemiseksi voi joskus tuntua pelottavalta. Auttaaksemme sinua, olemme luoneet listan tärkeimmistä työkaluista frontendin kehittämiseen, jotta pääset alkuun. Jos olet kiinnostunut selvittämään yksi erityisesti, valitse se alla olevasta luettelosta.

1. Sublime Text
2. Chrome Developer Tools
3. jQuery
4. GitHub
5. Twitter Bootstrap
6. Kulmikas.js
7. Sass

ei innostunut lukemisesta? Katso sitten alla olevalta videolta, jossa yksi kurssin asiantuntijoista puhuu työkalujen kautta.

1. Sublime Text

aloitetaan perusasioista: ensiluokkainen koodieditori-sellainen, jossa on hyvin suunniteltu, supertehokas ja erittäin nopea käyttöliittymä. On olemassa useita, jotka tekevät tämän hyvin, mutta luultavasti paras (ja suosituin) on ylevä teksti.

yhden miehen kehitystiimin taidokkaasti hoitama Sublimen menestyksen salaisuus piilee ohjelman laajassa pikanäppäimistössä-kuten kyvyssä suorittaa samanaikaista muokkausta (tehdä samoja interaktiivisia muutoksia useille valituille alueille) sekä nopeassa navigoinnissa tiedostoihin, symboleihin ja riveihin. Ja kun vietät 8 + tuntia editorin kanssa joka päivä, ne arvokkaat muutamat sekunnit, jotka on tallennettu kutakin prosessia varten, todella lisäävät …

voit aloittaa koodauksen Subliimin kanssa tässä ilmaisessa web development tutoriaalissa (rekisteröitymistä ei tarvita).

2. Chrome Developer Tools

eikö olisi hienoa, jos voisit muokata HTML: ää ja CSS: ää reaaliajassa tai debugata JavaScriptiä katsellessasi sivustosi perusteellista suorituskykyanalyysiä?

Googlen sisäänrakennetut Chrome-kehittäjätyökalut mahdollistavat juuri sen. Mukana ja saatavilla sekä Chromessa että Safarissa, ne mahdollistavat kehittäjien pääsyn verkkosovelluksensa sisäosiin. Tämän lisäksi verkkotyökalujen paletti voi auttaa optimoimaan latausvirtasi, kun taas aikajana antaa sinulle syvemmän käsityksen siitä, mitä selain milloinkin tekee.

Google julkaisee päivityksen kuuden viikon välein – tutustu siis heidän verkkosivuihinsa sekä Google Developers-YouTube-kanavaan pitääksesi taitosi ajan tasalla.

3. jQuery

JavaScriptiä on jo pitkään pidetty keskeisenä etupään kielenä kehittäjien keskuudessa, vaikka se ei olekaan ongelmaton: selainten epäjohdonmukaisuuksien riivaama, sen hieman monimutkainen ja vaikeasti lähestyttävä syntaksi aiheutti sen, että toiminnallisuus usein kärsi.

Tämä oli vuoteen 2006 asti, jolloin jQuery – nopea, pieni, cross-platform JavaScript-kirjasto, jonka tarkoituksena oli yksinkertaistaa front – end-prosessia-ilmestyi näyttämölle. Abstrahoimalla paljon toimintoja, jotka yleensä jäävät kehittäjien ratkaistaviksi itse, jQuery antoi paremmat mahdollisuudet luoda animaatioita, lisätä laajennuksia tai jopa vain selata asiakirjoja.

ja se on selvästi onnistunut – jQuery oli ylivoimaisesti suosituin JavaScript-kirjasto vuonna 2015, sillä se asennettiin 65%: iin verkon 10 miljoonasta eniten myydystä sivustosta.

4. GitHub

It ’s every developer’ s worst nightmare-you ’ re working a new project feature and you mokaa. Anna versionhallintajärjestelmät (VCS) – ja tarkemmin, GitHub.

käynnistämällä projektisi palvelun avulla voit tarkastella tekemiäsi muutoksia tai jopa palata entiseen tilaasi (tehden ärsyttävistä virheistä menneisyyttä). Arkiston hostauspalvelussa on myös rikas avoimen lähdekoodin kehitysyhteisö (mikä tekee tiimien välisestä yhteistyöstä helppoa), sekä useita muita komponentteja, kuten vikaseuranta, ominaisuuspyynnöt, tehtävien hallinta ja wikit jokaiselle projektille.

monet työnantajat etsivät hiottuja Git – taitoja, joten nyt on täydellinen aika ilmoittautua-plus se on loistava tapa päästä mukaan ja oppia parhailta laajan valikoiman avoimen lähdekoodin projekteja työstettäviksi.

5. Twitter Bootstrap

Kyllästyttääkö kirjoittaa samaan stailaukseen kontista? Entä se nappi, joka nousee esiin? Kun alat rakentaa front-end sovelluksia säännöllisesti, alat huomata samoja kuvioita syntymässä.

KÄYTTÖLIITTYMÄKEHYKSET ovat yritys ratkaista nämä ongelmat tiivistämällä yhteiset elementit uudelleenkäytettäviksi moduuleiksi – eli kehittäjät voivat telineyttää uusien sovellusten elementit nopeasti ja helposti.

käytetyin näistä kehyksistä on Bootstrap, tiimin Twitterissä kehittämä kattava KÄYTTÖLIITTYMÄPAKETTI. Täydellinen työkaluja normalisoida tyylisivut, rakentaa modaalisia esineitä, lisää JavaScript plugins, ja lukuisia muita ominaisuuksia, Bootstrap voi dramaattisesti vähentää koodin määrä (ja aika) tarvitaan rakentaa projektin.

6. Kulma.js

HTML on yleensä minkä tahansa frontend-kehittäjän työkalupakin kulmakivi, mutta siinä on se, mitä monet pitävät vakavana puutteena: sitä ei ole suunniteltu dynaamisten näkymien hallintaan.

tähän astuu AngularJS, avoimen lähdekoodin web-sovelluskehys. Kehittämä Google, AngularJS voit laajentaa sovelluksen HTML syntaksi, jolloin ilmeikäs, luettava, ja nopea kehittää ympäristö, joka muuten ei olisi rakennettu HTML yksin.

projekti ei ole vailla arvostelijoitaan: joidenkin mielestä tällainen tietojen Sitominen tekee sotkuisesta, erottelemattomasta koodista, mutta mielestämme se on silti korvaamaton taito, joka löytyy etupään paketista.

7. Sass

aikaa säästävät Web dev-työkalut ovat paras ystäväsi ja ensimmäisiä asioita, jotka opit koodista, on se, että sen pitää olla kuiva (”älä toista itseäsi”). Toinen asia sinun luultavasti oppia on, että CSS ei yleensä ole kovin kuiva.

Enter the world of the CSS precessor, työkalu, joka auttaa sinua kirjoittamaan ylläpitävää, tulevaisuuden kestävää koodia, kaikki samalla kun vähennät CSS: n määrää, joka sinun on kirjoitettava (pitää se kuivana).

heistä ehkä suosituin on kahdeksan vuotta vanha avoimen lähdekoodin projekti Sass, joka aika pitkälti määritteli nykyaikaisten CSS-esiprosessorien genren. Vaikka hieman hankala saada käsiinsä aluksi, Sass n yhdistelmä muuttujia, pesintä, ja mixins tekee yksinkertainen CSS kun kootaan, eli tyylisivut on luettavissa ja (mikä tärkeintä) kuiva.

johtopäätös

Jos ajatus näiden frontend-työkalujen oppimisesta ja 7 kuukauden matkasta web-kehittäjäksi vetoaa sinuun, suosittelen todella katsomaan careerfoundryn uutta Full-Stack Web Development Course-kurssia. Se on suunniteltu opettamaan sinulle ydin frontend teknologioita tyhjästä ennen kuin jatkat lahjoittaa sinulle paljon kysyttyjä taitoja JavaScript kehitystä. Sinut pariksi kaksi kokenutta Kehittäjät Online mentorship ja tutorship, ja siellä on työpaikka takuu: Jos et saa työtä web-kehittäjä sisällä 6 kuukautta valmistumisesta, saat rahat takaisin. Ota yhteyttä uraneuvoja tänään tietää lisää ja liittyä ensimmäinen täysi cohort.