Et utvalg verktøy for effektiv frontend-utvikling. Prosessorer og montører
De grunnleggende teknologiene er HTML (for å lage sidestruktur), CSS (for styling) og JavaScript (for interaktivitet). Av denne grunn grunnleggende kunnskap i de ovennevnte områdene trenger du definitivt. Men i 2019 må du vite hva rammeverk er, versjonskontrollsystemer og mange andre ting som gjør livet enklere for en moderne utvikler. La oss se nærmere på hver av dem.
HTML (Hyper Text Markup Language) og CSS (Cascading Style Sheets) er grunnlaget for nettutvikling. Uten disse to teknologiene vil du ikke være i stand til å lage et webdesign, og resultatet vil være enkel tekst på skjermen. Du kan ikke engang legge til et bilde på en side uten HTML!
Før du starter din webutviklingskarriere, må du bli en ekspert på HTML og CSS. Den gode nyheten er at trygg kunnskap om disse teknologiene kan oppnås på bare noen få ukers studier. Du kan komme gjennom med oss!
JavaScript lar deg legge til en enorm mengde funksjonalitet til nettsiden din. Du kan lage ganske funksjonelle nettapplikasjoner ved å bruke bare HTML, CSS og JavaScript (forkortet JS). Faktisk grunnleggende nivå JS lar deg legge til interaktivitet. Du kan bruke den til å lage et kart som oppdateres i sanntid, interaktive elementer og nettspill. Nettsteder som Pinterest gjør full bruk av JavaScript for å lage et brukervennlig grensesnitt.
Dessuten er det det mest populære programmeringsspråket i verden, så selv til tross for karriereplanene dine, er det supert brukbart språk for å studere.
JQuery er et JavaScript-bibliotek: et sett med plugins og utvidelser som gjør utvikling med bruker JavaScript raskere og enklere. I stedet for å måtte skrive alt fra bunnen av, lar JQuery deg legge til forhåndsbygde elementer til prosjektet ditt, som du deretter kan modifisere for å passe dine behov (en av grunnene til at det er så viktig å kunne JavaScript). JQuery brukes når du trenger å legge til en nedtellingstidtaker på siden din, et søkeskjema med autofullføring, eller til og med en tabell som automatisk omorganiserer og endrer størrelse for å passe til innholdet.
JavaScript-rammeverk
JS-rammeverk (inkludert AngularJS, Backbone, Ember og ReactJS) gir en ferdig struktur for JavaScript-koden din. Eksistere Forskjellige typer rammer for en rekke behov, men de fire over er de mest populære på listen over jobbkrav i 2019. Rammer setter virkelig fart på utviklingsprosessen, og gir deg en hurtigstart, og kan brukes sammen med biblioteker som JQuery for å minimere tiden brukt på å skrive standardblokker.
Frontend-rammer
CSS- og Frontend-rammeverk (det mest populære er Bootstrap) gjør for CSS det JS-rammeverk gjør for JavaScript: de fremskynder utviklingen ved å gi et utgangspunkt med en ferdig oppstartsprosjektstruktur. Siden de grunnleggende CSS-blokkene gjentas fra prosjekt til prosjekt, er et rammeverk som definerer alt for deg veldig nyttig. De fleste arbeidsgivere krever kunnskap om hva frontend-rammeverk er og hvordan man jobber med dem.
RESTful tjenester og APIer
Uten å gå inn på tekniske detaljer, står REST for Representational State Transfer. I generell disposisjon, er en teknologi som gjør det lettere for komponenter å kommunisere i et nettverk. Både RESTful-tjenester og API-er er REST-arkitekturtjenester. Du kan lese mer om dette her.
La oss si at du bestemmer deg for å skrive en søknad som vil sortere alle vennene dine i sosialt nettverk etter dato lagt til. Du kan sende en forespørsel til VKontakte RESTful API for å få en liste over vennene dine. Det samme er mulig med Twitter og Facebook, som også bruker RESTful APIer.
Innholdsstyringssystemer og e-handelsplattformer
Nesten alle nettsider er bygget på et innholdsstyringssystem (CMS). E-handelsplattformer er en av typene CMS. Verdens mest populære CMS er WordPress, som er bak teppet på millioner av nettsteder, nesten 60% av alle nettsteder som bruker et CMS er bygget på WordPress. Andre populære CMS er Joomla, Drupal og Magento. Selv en overfladisk kunnskap om disse systemene vil gi deg en fordel når du søker jobb.
Testing og feilsøking
Feil skjer - dette er et universelt akseptert faktum. Å være kjent med test- og feilsøkingsprosesser er viktig.
Enhetstester er prosessen med å teste individuelle blokker kildekode og spesialiserte rammer for denne typen testing gir ganske praktisk funksjonalitet. Det finnes ulike rammer for forskjellige språk programmering.
En annen type testing er UI-tester, også kjent som funksjonelle tester. Sjekket her generell oppførsel nettstedet når en bruker samhandler med det.
Feilsøking er prosessen med å eliminere alle feil (bugs) funnet under testing. Ulike selskaper De bruker forskjellige tilnærminger til testing og feilsøking, men hvis du noen gang har gjort det før, vil du ikke ha vanskelig for å justere.
Git og versjonskontrollsystemer
Versjonskontrollsystemer lar deg spore endringer som er gjort i koden din over tid. De gjør det også enkelt å gå tilbake til tidligere versjoner av koden din hvis du roter til noe. Git er det vanligste versjonskontrollsystemet. Kunnskap om Git for en utvikler er et nødvendig krav i nesten alle selskaper. Du kan studere her.
Hva en profesjonell front-end-utvikler bør vite i dag
I løpet av de siste årene har React, et av JavaScript-bibliotekene, blitt frontend-utviklingsstandarden – og dette kommer utviklere på tvers av plattformer til gode, med React Native-fordeler som:
- en enkel og intuitiv filosofi for å deklarere synspunkter og tilstander, noe som gjør koden ren, lesbar og lett å feilsøke;
- Smart og effektiv gjengivelse som kun tegner om komponenter når det er nødvendig når tilstanden endres.
Snakker på enkelt språk, React binder HTML og JavaScript sammen.
Når det gjelder CSS, er det ingen som skriver i CSS lenger. ren CSS i disse dager, så kunnskap om preprosessorspråk som Sass eller Less er så å si en nødvendighet for en front-end-utvikler i 2019.
Gitt allestedsnærværende av flere formfaktorer ulike enheter (Mobil, nettbrett, stasjonære PC-er), vil vi også anbefale å studere måter å bygge adaptive nettsider på. Det finnes et bredt utvalg av JavaScript- og CSS-biblioteker som gjør denne jobben godt. Mange av dem er basert på Googles retningslinjer for materialdesign.
Det er mange relaterte emner og biblioteker som er verdt din tid og oppmerksomhet. For eksempel:
- Webpack for modulære bygg (selv om Webpack-opplevelsen er ganske forferdelig og fellesskapets byggevalg endres hvert 1-2 år);
- JSON Web Token for autorisasjon (en slags erstatning for informasjonskapsler som tidligere var standard);
- Relay/GraphQL eller Redux eller Flux, avhengig av hvor dypt du vil dykke ned i datastrømmer og samples;
Samt et bredt utvalg av biblioteker for feilsøking, ytelsesoptimalisering, testing, prosjektledelse, etc.
Derfor, i disse dager, for å være en ettertraktet utvikler, må du ikke bare vite det grunnleggende, men også være i stand til å bruke det eksisterende arbeidet til kolleger i form av ulike biblioteker og rammeverk som fremskynder utviklingsprosessene betydelig.
Vårt råd: Hvis du akkurat har begynt med frontend-utvikling, gå gjennom vårt.
På denne fine fredagen tør jeg å tilby Habra-fellesskapet et lite utvalg applikasjoner designet for å øke produktiviteten mens jeg jobber med frontend. Hvis favorittappen din ikke er representert her, velkommen til kommentarene!
Denne fantastiske skjemageneratoren vil hjelpe deg med å lage vakre CSS-påloggingsbokser og andre inputting, med minimal tidsinvestering. I tillegg til skjemaer på nettstedet til dette prosjektet, kan du lage andre ikke mindre vakker CSS elementer, inkludert knapper og bånd.
For Twitter Bootstrap-elskere ble denne generatoren opprettet, takket være den kan du enkelt endre innledende innstillinger stiler og start prototyping.
Brytere og vippebrytere i ren CSS. Meget høy kvalitet og enkel.
Colllor genererer harmonisering farge palett basert spesifisert farge. Lar deg unngå "utskjæringseffekten" i prosjektene dine, og samtidig bruke et bredt spekter av farger.
Komprimering for din CSS og JavaScript-filer uten bekymringer og problemer.
Nyttig verktøy, som synkroniserer endringer gjort via FireBug med CSS-filer. Du kan forestille deg hvor mye tid du vil spare deg selv.
Denne siden vil hjelpe deg med å sortere CSS basert på gitte kriterier, prioriteringer, velgere og så videre. En veldig praktisk ting.
Lasteindikatorgenerator for AJAX og jQuery. Enkel å bruke og tilpasse.
Dette verktøyet vil hjelpe deg med å lage et søtt bånd. Vel, du skjønner hva jeg mener - de er overalt i disse dager.
Typecast-prosjektet er ment for skrifteksperimenter. 30 sekunder på å registrere deg, og du har et ganske kraftig verktøy i arsenalet ditt som lar deg gjøre alle slags operasjoner med fonter, og når du først har funnet din ideelle kombinasjon, eksporteres alt til CSS. Vel, er det ikke fantastisk?
Mange ikoner og ikoner for CSS-bruk på nettstedet ditt. Velg de du er interessert i, se forhåndsvisningen og last ned. Det er enkelt.
Den mest praktiske appen for å lage sprites. Bare dra og slipp de nødvendige bildene, klikk Generer og få et spriteark. Foreløpig fungerer det bare i Chrome Firefox.
Hvis du lager et responsivt prosjekt, kan du her sjekke hvordan det vil se ut på skjermene til ulike enheter.
Vil du lage animasjoner med CSS enkelt og uanstrengt? Følg deretter lenken. Angi retning, koordinater, se animasjonen og last ned kildekoden.
Et annet verktøy å jobbe med CSS sprites. Også et drag"n"-slipp-grensesnitt, men jeg synes det er penere.
Hvis du er en elsker av LESS-forprosessoren, kan du være interessert i dette verktøyet som konverterer fra CSS til LESS med ett klikk.
Flott bakgrunnsgenerator. Et stort utvalg av teksturer, effekter og muligheter for å endre dem.
SnipSave 
Denne siden tilbyr deg å lagre alle CSS-snuttene dine på ett sted. På biblioteket mitt, altså. Fint grensesnitt, det er en fornøyelse å jobbe med.
Prefiksr
Appen fra Jeffrey Way hjelper deg raskt å løse problemer på tvers av nettlesere. Du kan skrive CSS-kode for bare én nettleser, deretter kjøre den gjennom Prefixr, og den vil generere den manglende koden for å vises riktig i andre nettlesere.
HTML5, vær så snill 
Du kan kalle dette prosjektet en online HTML5-assistent. Forvirret om å bruke en spesifikk ny tag? Siden vil fortelle deg om det er verdt å bruke. Og i så fall, hvordan nøyaktig.
I dette materialet, Jeg ønsker å presentere en liste over verktøy som hjelper meg når jeg utvikler klientsiden til en applikasjon eller et nettsted. Vi snakker om Front-End-utvikling.
Hvem er en front-end-utvikler?
Etter at du har generert den nødvendige malen, er det på tide å layoute og jobbe med stilarket.
Jobber med CSS.
Det finnes mange verktøy og generatorer for å jobbe med CSS. Noen av dem er samlet i denne artikkelen "Utvalg av CSS-generatorer".
Nettsted: http://habrahabr.ru/post/118056
I mitt arbeid bruker jeg bare én generator, dette er CSSsir-utvidelsen for Mozilla nettleser Firefox. Et enkelt og brukervennlig verktøy som lar deg generere kode på tvers av nettlesere for grunnleggende CSS-egenskaper med noen få klikk. Denne CSS3-generatoren vil være nyttig ikke bare for webmastere og designere, men også for vanlige brukere.
Nettsted: https://addons.mozilla.org/ru/firefox/addon/csssir
CSS-referanse
Arbeid med nettstedsdynamikk JavaScript og jQuery
Tjenester for arbeid med jQuery API.
jQuery Cheatsheet - Oscar Otero
JQuery Cheatsheet i HTML med lenker til den originale API-dokumentasjonen. Det er praktisk fordi alt er samlet i ett mset, du kan velge versjoner av jQuery-biblioteket og se hvilken versjon som støtter hva. Beskrivelse av funksjoner åpner den originale dokumentasjonen i et nytt vindu.
Netology-redaktør Svetlana Shapovalova forstår hvem en front-end-utvikler er, hva han bør kunne gjøre (eller ikke bør), og hvorfor han får en utmerket lønn (eller ikke så mye).
Hvem er en front-end-utvikler
I følge den årlige StackOverflow-studien er det mest populære yrket blant tjenestebrukere i 2017 nettutvikler. Dette er kategorien alle frontend-utviklere faller inn under.
StackOverflow-data
Hvis du går til den første jobbsøkesiden du kommer over, for eksempel hh.ru, vil du få inntrykk av at dette er en kameleonspesialist.
Det hele starter med forvirring i stillingstitler: du kan finne "front-end-utvikler", og "front-end-utvikler", og "front-end-utvikler", og "front-end-utvikler" og "webutvikler", og "front-end utvikler". Noen ganger kan du til og med se en "webdesigner" med krav til en fullstack-utvikler. Det er bare én reaksjon på dette: WTF?!
Problemet er at noen arbeidsgivere ikke skiller (eller ikke ønsker å skille) en layoutdesigner fra en front-end-utvikler – dette fremgår tydelig av stillingsbeskrivelsene. La oss finne ut hvilke ferdigheter som skiller en front-end-utvikler fra en "arbeidsbenk" (layoutdesignere, ikke bli fornærmet, du er også god).
En layoutdesigner er en fighter på en smal front. Hans oppgave er å layoute oppsettet mottatt fra designeren ved hjelp av HTML+CSS. Han kan kanskje litt JavaScript, men oftere er han begrenset til muligheten til å installere noen jQuery-plugin.
En front-end-utvikler lager ikke bare oppsett. Han kjenner JavaScript godt, forstår rammeverk og biblioteker (og bruker noen av dem aktivt), forstår hva som er "under panseret" på serversiden. Han er ikke redd for forprosessorer og assemblere LESS, SASS, GRUNT, GULP, han kan jobbe med DOM, API, SVG-objekter, AJAX og CORS, han kan skrive SQL-spørringer og grave i data. Det viser seg en samling av ferdigheter, som er lagt til en forståelse av prinsippene for UI/UX-design, adaptiv og responsiv layout, kryss-nettlesere og kryssplattformer, og noen ganger ferdigheter mobil utvikling.
En front-end-utvikler må kunne jobbe med versjonskontroll (Git, GitHub, CVS, etc.), bruke grafiske editorer og «leke» med ulike CMS-maler.
Det er også svært ønskelig å kunne engelsk for ikke å oversette spesifikasjonen i Google Translator, kunne jobbe i team, noen ganger flerspråklig, forstå nettfonter og forstå testere og selve testprosessen.
Så, hvilke teknologier bør en front-end-utvikler mestre:
- HTML og CSS (inkludert rutenett og CSS-rammeverk, W3C- og WHATWG-spesifikasjoner, HTML5/CSS3 Polyfills)
- CSS-forprosessorer (Sass, Less, Stylus, etc.)
- JavaScript
- Populære rammeverk og biblioteker: jQuery, Angular.JS, React.JS, Backbone.js, etc.)
- OOCSS/BEM/SMACSS
- HTML5 API
- ECMAScript 6
- Populært CMS (WordPress, Drupal, Joomla, etc.)
- Forstå og forstå serverteknologier(Node.js, PHP, Ruby, .NET osv.)
- Feilsøkingsverktøy (Chrome Dev Tools, Firebug og andre)
- JavaScript-transpilere (Babel)
- Versjonskontrollverktøy (Git, GitHub, CVS, etc.)
- Databaser og spørringsspråk (SQL, MySql, NoSQL, MongoDB, etc.)
- Grafiske redaktører (Photoshop, Illustrator, etc.)
- utvikling på tvers av nettlesere og plattformer;
- progressiv forbedring og grasiøs nedbrytning;
- mobil utvikling;
- adaptiv og responsiv layout;
- web fonter;
- prinsipper for SEO-optimalisering.
Hva sier statistikken
Hvilke teknologier og verktøy bruker frontend-utviklere oftest? For det første er det vanskelig å forestille seg en front-end-utvikler som ikke kan JavaScript. Undersøkelser bekrefter dette:- I følge StackOverflow leder JavaScript listen over front-end-verktøy med en enorm margin (90,5 %)
- En studie av O"Reilly, utført blant europeiske programmerere på slutten av 2016, setter også JavaScript på første plass.
StackOverflow-data
Hvis vi grupperer de mest populære verktøyene i stabler, får vi følgende situasjon:
StackOverflow-data
Og settet med de mest populære rammeverkene og bibliotekene til alle utviklere ser slik ut (se illustrasjon). Det er hyggelig å se front-end-verktøy blant denne listen:
StackOverflow-data
Karrierevei og lønn til en front-end utvikler
Karrierebanen til en front-end-utvikler begynner vanligvis med en layoutdesigner - dette er det mest logiske og generelt aksepterte alternativet. Først studeres en bunt, deretter "legges" kunnskap, biblioteker og rammeverk på den. Den fremtidige spesialisten studerer også nøkkelkonsepter bygge serverdelen, legger her til verktøyene som er nødvendige for den valgte spesialiseringen. Så er alt dette polert av muligheten til å jobbe med versjonskontroll, grafiske redaktører og forståelse av prinsippene.Det finnes andre alternativer. Hvis en nybegynner programmerer først vet i hvilket område han planlegger å utvikle seg, er det ingenting som hindrer ham i å lære en nøkkelteknologistabel på en gang, og ikke i deler. Alt avhenger av målene og tiden som er tilgjengelig for den fremtidige front-end-utvikleren. Ethvert alternativ er akseptabelt, så lenge sluttresultatet er en intelligent spesialist.
En ferdiglaget front-end-utvikler har generelt tre hovedutviklingsalternativer:
- horisontalt (for å forbedre deg som spesialist, og dermed stadig øke din verdi på arbeidsmarkedet);
- vertikal (vokse opp karrierestigen);
- diversifisering (mestre relaterte spesialiteter, bli en full stack og omskolering).
Hvilken man skal velge avhenger kun av spesialisten selv og hans ønsker/ferdigheter.
Når det gjelder lønn til front-end utviklere: her, som i hele IT-bransjen, er det ingen enhetlig betalingsstandard. Alt avhenger av ferdighetene og evnen til å presentere deg selv. Vel, noen ganger av flaks :)
Gjennomsnittlig lønn for en front-end-spesialist i Russland, rubler/måned
Gjennomsnittlig lønn til en front-end-spesialist i Moskva, rubler/måned
I følge My Circle
Tradisjonelt er årslønnen til front-end-utviklere i USA litt høyere enn i Russland. Men hvis du jobber i en filial av et utenlandsk selskap, er du mest sannsynlig ikke redd for et slikt gap. 
I følge PayScale
Hvordan bli en front-end-utvikler
Ta først av deg de rosefargede brillene. Læring er hardt arbeid og selvdisiplin. De fleste nybegynnere IT-spesialister dropper ut på stadiet "Jeg vil bli programmerer og få betalt i dollar, men jeg trodde ikke at jeg skulle trenge å studere så mye." Det unike med programmering og enhver IT-spesialitet generelt ligger i konstant selvlæring. Dette er både kompleksiteten og skjønnheten i IT-sektoren. Hvis dette ikke skremmer deg, kult! Du har alle muligheter til å bli en utmerket spesialist.Hovedregelen for en fremtidig spesialist er å sette seg realistiske mål underveis i læringsprosessen. Planlegging vil hjelpe med dette. Lag en liste over verktøyene du planlegger å lære og ha den foran deg.
De som starter fra bunnen av, må begynne med og mestre dem på nivået med ideell utforming av PSD-oppsett. På dette stadiet må du også lære å jobbe med tekst- og grafiske redaktører og kjenne til de grunnleggende prinsippene for design (som et pluss). Ta deretter på JavaScript: syntaks, arkitektur og språkfunksjoner. Mestre populære rammeverk og biblioteker, og forelsk deg samtidig i versjonskontrollsystemer og en av de populære taskrunners. Legg til forprosessorer og CSS-rammeverk, forstå serverteknologier. Og så kan du drikke smoothies på Bali og pusse opp kunnskapen du har fått i det uendelige.
En omtrentlig vei for en begynnende front-end-utvikler.
Du vil ha en av dine egne.
Du kan gå denne veien enten alene eller med mentorer (universiteter, kurs). Her er de mest populære utvikleropplæringsformatene ifølge StackOverflow: 
StackOverflow-data
Nettkurs er på første plass, stemt frem av 64,7 % av de spurte utviklerne, etterfulgt av selvstudier fra bøker, offline-kurs, åpen kildekode-utvikling og programmeringsleirer. Interessant nok koster høyere utdanning (mastergrad) nesten siste plass.
Konklusjon
er en universell soldat. Han vil fullføre oppsettet, bygge webapplikasjonen, og om nødvendig mestre serverdelen. Du trenger å kunne mye: HTML, CSS, JavaScript, JS-biblioteker og rammeverk, CSS-forprosessorer og rammeverk, versjonskontrollsystemer og taskrunners, backend-teknologier, enhetstesting og mye mer.I tillegg vil myke ferdigheter være nyttige: samhandling med mennesker og teamarbeid, evnen til å etablere effektiv arbeidsflyt og løse tildelte oppgaver på den mest effektive måten. på best mulig måte. Du kan ikke klare deg uten trygg kunnskap på engelsk.
Lønnen til en front-end-spesialist er ganske anstendig, og jo flere ferdigheter, desto større er sjansene for å få en "feit" lønn.
Alle som ikke gir etter for selvstudier kan bli en front-end-utvikler: Som vi fant ut, er det vanskelig å stole på en universitetsutdanning. Det ideelle alternativet er ulike online og offline kurs + litteratur om emnet, praksis og den gode Google.
Netology lanserer et fullverdig opplæringsprogram for front-end spesialister - . Dette er et 6 måneders kurs dedikert til grunnleggende teknologier front-end utvikling: HTML og CSS, JavaScript, Web API, AJAX, web-sockets, React-bibliotek.
På slutten av kurset skal studentene lage sin egen ensides nettapplikasjon. Opplæringen gjennomføres av 10 praktiserende frontend-spesialister – dette lar deg få en omfattende forståelse av verktøyene og oppgavene til frontend-utvikling. I løpet av hele opplæringen vil studentene få minst 100 praktiske oppgaver, nærmest mulig «kamp», og gjennomføre 3 mellomstore prosjekter og 1 fullverdig prosjekt som oppgave.
Alle studenter som fullfører kurset får et sertifikat for avansert opplæring i den etablerte formen og et merket diplom av "Netology".
P.S. Etter din mening, hvilken kunnskap er viktig for en front-end-utvikler, og hvilken kunnskap kan mestres etter behov?
Hvis du ønsker å endre spesialitet for å få en ny, bedre betalt jobb, passer IT- og frontend-feltene best for dette.
Hovedfordeler: høy lønn, kreativt arbeid og fleksibel timeplan. Men det er hele linjen og andre grunner til at IT-feltet er et attraktivt alternativ.
Nå vil jeg fokusere på front-end-utvikling. Generelt sett skriver front-end-utviklere nettsteder ved hjelp av HTML, CSS og JavaScript. De implementerer også ferdig design På nett.
En rask gjennomgang av nåværende åpninger for front-end-utviklere viser at det er et klart sett med ferdigheter som arbeidsgivere ser etter. For eksempel er listene over krav for de tre første ledige stillingene for frontend-utviklere som jeg fant på Glassdoor.com stort sett identiske: kunnskap om HTML, CSS og Javascript, versjonskontroll, rammeverk.
Dette er begrepene du vil bli kjent med når du begynner å lære frontend-utvikling. Nedenfor er en liste over 10 essensielle ferdigheter hver front-end-utvikler trenger.
1. HTML/CSS
Det er et standard markup-språk som brukes til å lage nettsider. Et markup language er en måte å spesifisere markup på digitalt dokument, som kan skilles fra vanlig tekst. Dette er grunnlaget du trenger for å utvikle nettsider.
CSS ( cascading stilark) er et språk som brukes til å representere et dokument opprettet med ved hjelp av HTML. CSS brukes til å definere sidelayout, farger, fonter og andre stiler!
2. JavaScript / jQuery
Et annet hovedverktøy i arsenalet til en begynnende frontend-utvikler bør være JavaScript ( JS). Hvis HTML er et markup-språk og CSS er et styling-språk, så er JS et programmeringsspråk. Mens HTML og CSS definerer presentasjonen av en side, definerer JS funksjonaliteten.
For enkle nettsider eller nettsider vil HTML/CSS være tilstrekkelig. Men for interaktive funksjoner ( lyd og video, spill, rulling, sideanimasjon) trenger JS.
En interessant ting En ting du bør vite om JS er tilstedeværelsen av biblioteker som jQuery. Biblioteker er samlinger av plugins og utvidelser som gjør det enklere og raskere å bruke JS på en nettside.
jQuery godtar generelle oppgaver, som krever flere linjer med JS-kode for å implementere, og komprimerer dem slik at det kan gjøres med en enkelt linje.
3. CSS- og JavaScript-rammeverk
CSS og JavaScript-rammeverk er sett CSS-filer eller JS, som gjør en enorm mengde arbeid samtidig som de gir grunnleggende funksjonalitet. For eksempel registreringsskjemaer på en nettside eller blogg. I stedet for å starte med et tomt dokument, starter du med en fil som allerede har generisk JS-kode.
Frontend utvikling og at det er vanskelig bevises av at rammeverk har sine egne styrker og svake sider. For eksempel er noen JS-rammeverk flotte for å lage komplekse brukergrensesnitt, og andre for å vise innhold på nettstedet.
For å forenkle ting ytterligere, kan rammeverk brukes sammen. Brukes vanligvis til å pare Bootstrap med en annen JavaScript-rammeverk slik som AngularJS. Innholdet håndteres av Angular og utseende- Støvelhempe ( med noen endringer i CSS).
Du kommer til å bruke CSS og JS hele tiden, og siden mange prosjekter starter med lignende elementer, er disse rammeverkene avgjørende for å være en effektiv utvikler.
4. CSS-forbehandling
En av CSS-restriksjoner er det faktum at du ikke kan definere variabler, funksjoner eller utføre aritmetiske operasjoner. Ligner på CSS (og JS) rammeverk, er CSS-forbehandling en annen måte å gjøre livet ditt enklere på.
Ved å bruke CSS-forprosessorer som Sass, LESS eller Stylus kan du skrive kode på preprosessorspråket, stole på at den gjør ting som kan ta lang tid å gjøre bruker CSS. Forbehandleren konverterer deretter koden til CSS for å få den til å fungere på nettstedet.
La oss si at du bestemmer deg for å endre nyansen av blått som brukes på nettstedet. Ved bruk av CSS-forprosessor nok til å endre heksadesimal verdi På en plass. I stedet for å gå gjennom alle stiler og endre fargeverdier overalt.
5. Versjonskontroll / Git
Etter å ha skrevet HTML-, CSS- og JS-programmering, må nettutvikleren i grensesnittet gjennomgå arbeidet som er utført. Hvis noe går galt, er det siste du vil gjøre å starte på nytt. Versjonskontroll er prosessen med å spore og kontrollere endringer i kildekoden.
Programvare for versjonskontroll som f.eks Åpen kilde Stalwart Git er et verktøy for å spore endringer slik at du kan gå tilbake til forrige versjon og finne ut hva som gikk galt.
6. Responsivt design
I dag bruker vi et stort nummer av datamaskiner, smarttelefoner og nettbrett for å surfe på nettet. Har du noen gang lagt merke til hvordan nettsider tilpasser seg enheten du bruker. Det henger sammen med adaptiv design. Å forstå responsive designprinsipper og hvordan de implementeres er nøkkelen til grensesnittdesign.
Responsiv design er en integrert del av CSS-rammeverk som Bootstrap nevnt ovenfor.
7. Testing/feilsøking
For å få alt til å fungere som det skal, må du teste koden for feil. Derfor er test- og feilsøkingsferdigheter et must for frontend-utviklere.
Det er flere ulike metoder testing. Funksjonstesting sjekker den spesifikke funksjonaliteten til nettstedet ( for eksempel et skjema eller en database).
Enhetstesting er en annen metode. Den sjekker kodefragmenter som er ansvarlige for bare én ting på nettstedet for å sikre at de fungerer som de skal.
Testing er en viktig del av frontend-utviklingsprosessen i Java. Men dette er et annet område hvor det finnes ulike rammer for å hjelpe deg. Programmer som Mocha og Jasmine er utviklet for å øke hastigheten på og forenkle testprosessen.
8. Nettleserverktøy for utviklere
Hvordan nettstedet ditt vises av nettlesere vil i stor grad avgjøre suksessen. I likhet med testing og feilsøking, moderne nettlesere utstyrt med utviklerverktøy. Disse verktøyene lar deg teste og tilpasse sider basert på hvordan nettleseren tolker koden.
Utviklerverktøyene innebygd i moderne nettlesere består vanligvis av en inspektør og en JavaScript-konsoll. Inspektøren lar deg se hvordan HTML-koden på siden ser ut og hvilken CSS som er knyttet til et spesifikt element på siden. Den lar deg også redigere HTML og CSS, og se endringer som har skjedd i sanntid.
JS-konsollen lar deg se feil som oppstår når nettleseren prøver å kjøre JS-kode.
9. Bygg og automatisering/produktivitetsverktøy
Ytelsen til et nettsted avhenger av hvor lang tid det tar å laste det. Hvis du støter på kjøretidsproblemer under frontend-programmering, må du ta skritt for å løse dem. For eksempel bildeoptimalisering ( skalering og komprimering av bilder for maksimal ytelse ), minifiser CSS og JavaScript ( fjerne unødvendige symboler fra kode uten å endre funksjonalitet).
Å utføre oppgaver som fører til økt produktivitet kan også være tidkrevende. Men det er her bygg- og automatiseringsverktøy kommer til unnsetning. Programmer som Grunt og gulp kan brukes til å automatisere bildeoptimalisering, CSS- og JS-minifisering og andre oppgaver.
10. Kommandolinje
Å bruke GUIer kan virke som en fristende idé når det kommer til webutvikling. Og de er ofte ganske praktiske. Men universell GUI vil ha sine begrensninger for noen spesifikke applikasjoner. Noen ganger må du åpne en terminal på datamaskinen og skrive inn skrevne kommandolinjekommandoer.
Dette er forskjellen: gjennom GUI kan du bare legge inn det som er tilgjengelig for deg, men gjennom kommandolinje du kan gjøre grunnleggende innstillinger.