Ansett senior og velprøvde Frontend-utviklere

Etterspørselen etter frontend-utviklere har økt drastisk de siste årene. Dette er rett og slett fordi det er så mange mennesker som vil ha en hjemmeside, men ikke like mange personer som har kunnskap nok til å lage en flott hjemmeside på egenhånd.

Men hva er egentlig frontend-utvikling, og hvorfor skal vi ta hensyn til det?

Hva er frontend-utvikling?

Når noen sier «frontend dev», mener de vanligvis frontend webutvikling eller app-utvikling, som hovedsakelig fokuserer på den delen av nettsiden/applikasjonen som brukerne ser på siden sin (også kjent som klientsiden).

I utgangspunktet forvandler en frontend webutvikler backend-koden til et grafisk grensesnitt som brukere kan se, bruke og samhandle med uten å ødelegge backend-arkitekturen til applikasjonen.

For en mer detaljert beskrivelse, sjekk ut vår ultimate guide om frontend utviklingsspråk og hvordan de skiller seg fra hverandre.

Hvor populært er frontend-utvikling?

Som jeg sa, har frontend-utvikling blitt stadig mer populær de siste årene over hele verden.

Men for å virkelig forstå betydningen av frontend-utvikling, må vi ta en titt på de mest populære individuelle språkene og rammeverkene, og behandle dem som elementer i det enorme settet som er frontend software utvikling.

JavaScript cruiser videre

Til tross for at det er et relativt gammelt skriptspråk, blir JavaScript stadig oppgradert (og gjenbrukt), med nye, raskere og mer pålitelige rammeverk som "springer" ut fra JavaScript-paradigmet i et tempo som ingen har klart å holde styr på i det siste.

Svimlende nok har JavaScript vært det mest brukte programmeringsspråket ni år på rad. Vær imidlertid oppmerksom på at for de fleste utviklere regnes programmering som nettprogrammering.

Angular, React.js og Vue.js er topp 3

JavaScript har en rimelige andel av rammer å velge mellom. Heavy-hitters som Angular, Vue.js og React.js er blant noen av de mest etterspurte rammeverkene av utviklere over hele verden.

Ut av den ultimate JavaScript-trifectaen, ser det ut til at React.js tar topplassen ved å vinne hjertene og sinnene til utviklingsteamene hos WhatsApp, BBC, Pinterest og flere multi-milliard dollar selskaper.

"D'Artagnan of JavaScript", Vue 3, prøver å kjempe om de tre beste plassene. Om det lykkes gjenstår å se.

TypeScript er fremtiden

Selvfølgelig kan du ikke nevne JavaScript uten TypeScript, den ene følger den andre. Siden lanseringen i 2012, har TypeScript blitt det språket utviklerne ønsker å jobbe mest med hvis de ikke allerede bruker det.

Ifølge samme undersøkelse er TypeScript også det syvende mest populære språket blant alle respondenter, og det femte mest populære språket blant profesjonelle utviklere. I lys av dette har den fått en betydelig del av populariteten på 30,19 % og 36,42 % av henholdsvis 83 052 og 58 031 respondenter.

Svelte begynner å få popularitet

Endelig får et komponentbasert JS-rammeverk kalt Svelte også drahjelp og begynner å gjøre sitt navn kjent.

Kode generert i Svelte kan manipulere DOM, og dermed forbedre ytelsen på alle fronter og gjøre JavaScript enda bedre når det gjelder populariteten blant profesjonelle frontend-ingeniører.

Vær på utkikk etter Svelte-utviklere hvis du ikke allerede ser etter disse nye frontend-trendene.

Hvor finner man dyktige frontend-utviklere?

Her er noen av de mest pålitelige stedene hvor du kan finne og ansette en frilans frontend-utvikler:

• Hired: Et pålitelig nettsted for å finne frontend-, backend- og fullstack-utviklere
• Upwork: Frilanstalenter som kommer fra en rekke bakgrunner og erfaringer
• Dice: Et dedikert teknologiside med over 3 millioner fagfolk på plattformen
• Gun.io: En veldig unik og quirky ressurs for å finne utviklere til prosjektene dine
• Proxify: Dette er oss! Vi tilbyr svært dyktige, testede og forhåndskontrollerte profesjonell utviklere som er ledige i løpet av få dager
• X-team: Tilbyr on-demand utviklere til å fullføre en rekke forskjellige prosjekter

Andre nettressurser hvor du kan finne kvalitetsutviklere inkluderer StackOverflow, GitHub, Reddit (med litt utholdenhet), og til og med verktøy som Ahrefs og SEMrush (utføre søkeord-undersøkelser, noe som "finn frontend-utviklere i nærheten av meg") hvis du er dyktig nok i SEO.

Hvordan intervjue frontendutviklere?

For lenge siden ville pliktene og ansvaret til frontend-utviklere sett omtrent slik ut: å kunne oversette det statiske designet til funksjonelle nettsider eller apper ved hjelp av HTML/CSS, JavaScript og andre verktøy og rammeverk.

I dag har imidlertid denne definisjonen helt klart utvidet seg til å bli forferdelse for noen og jubel for mange. De moderne pliktene, ansvaret og forventningene fra en moderne dyktig frontend-webingeniør er som følger:

• Bygge, vedlikeholde og feilsøke nettsider og nettapplikasjoner mens du følger den beste praksisen for webdesign
• Gjøre om design og applikasjonstegninger til frontend-kode ved hjelp av HTML5, CSS3, JavaScript, og dets mange rammeverk og biblioteker (React.js, Angular, Vue.js)
• Arbeide sammen med backend-utviklere for å hjelpe til med å integrere elementer innen brukergrensesnitt med databaser og APIer
• Være kjent med søkemotoroptimalisering (SEO), inkludert muligheten til å optimalisere en nettside/app for ytelse og hastighet
• Skrive kvalitetskode, dokumentere deretter og utføre rutinekontroller og tester for å sikre en jevn flyt av operasjoner på nettsiden/applikasjonen
• Å ha drivkraften til å stadig forbedre egne eksisterende ferdigheter (inkludert myke ferdigheter), og lære nye deretter

Intervjuspørsmål + deres forventede svar

For Juniorer

1. Hvilke ferdigheter trenger en frontend-utvikler?

Forventet svar: En frontend-utvikler må kunne HTML, CSS og JavaScript. De må også være kjent med responsiv design og beste praksis for nettutvikling.

2. Definer HTML-metakoder.

Forventet svar: Metakoder er HTML-elementer som inneholder informasjon om siden, inkludert sidens navn, beskrivelse, nøkkelord, forfatter og mer. De brukes ofte av søkemotorer for å hjelpe dem med å finne ut hvordan de skal kategorisere nettsiden din.

3. Beskriv fordelene med REST webtjenester?

Forventet svar: REST står for Representational State Transfer. Det er en arkitektonisk stil for å bygge webtjenester over HTTP. REST-webtjenester gjør det enklere for klienter å få tilgang til data på tvers av flere plattformer og enheter (for eksempel: mobiltelefoner).

4. Hva er et Grid-system i CSS?

Forventet svar: Et Grid-system er et sett med verktøy for å lage oppsett ved hjelp av CSS. Det brukes ofte til å lage et konsistent oppsett som kan gjenbrukes på tvers av flere sider, men det kan også brukes til å få en enkelt side til å se bedre ut.

5. Forklar brukersentrert design?

Forventet svar: Et brukersentrert design fokuserer på brukernes behov og ønsker, i stedet for å kun være fokusert på at produktet skal se pent ut. Brukersentrert design hjelper deg til å forstå hva brukerne dine ønsker og trenger, slik at de kan benytte seg av produktet ditt på en mer effektiv og fornøyelig måte.

6. Fortell meg når og hvorfor jeg skal bruke Webpack?

Forventet svar: Webpack er en åpen kildekodebundler for JavaScript-applikasjoner. Den pakker sammen alle filene dine til én fil kalt en "bundle". Dette betyr at i stedet for å måtte laste hver enkelt fil separat (som CSS, HTML og JavaScript), samler WebPack dem i én fil som lastes raskt og effektivt – slik at nettstedet ditt laster raskere!

Du bør bruke Webpack når du vil pakke flere JavaScript-filer sammen til én fil, og laste dem alle samtidig i nettleseren.

7. Nevn tre måter å redusere sideinnlastingstiden på.

Forventet svar:

• Hold antallet HTTP-forespørsler på et minimum ved å kombinere flere filer til én.

• Reduser størrelsen på hver ressurs ved å komprimere bilder og forminske HTML-, CSS- og JavaScript-filer.

• Minimer avstanden mellom serveren og sluttbrukeren ved å bruke et CDN (Content Delivery Network).

For erfarne utviklere

8. Hva er stringify?

Forventet svar: Stringify er et nettbasert verktøy som hjelper deg med å konvertere ren tekst til rike utdrag i HTML- og JSON-formater. Den fungerer på vanlige tekstdokumenter, trekker ut metadata fra dem og konverterer dem til JSON- eller HTML-kode med formaterings- og stilinformasjon. Det er mange utviklere som bruker Stringify for å lage rike utdrag til nettsidene sine så vel som nettstedene, slik at Google bedre kan forstå hva nettsiden deres handler om, og rangere den høyere på søkeresultatsidene.

9. Oppgi alle elementene i CSS Box Model.

Forventet svar: Boksmodellen består av fire elementer: margin, utfylling, kantlinje og innholdsbredde. Disse går sammen for å lage en boks rundt innholdet ditt på skjermen.

10. Hva er fordelen med srcset-attributtet i en bildekode?

Forventet svar: srcset-attributtet lar deg spesifisere flere bilder som kan lastes avhengig av enhet og skjermstørrelse. Dette gjør det mulig å gi brukerne en bedre opplevelse når de surfer på nettsiden din på mobile enheter.

11. Forklar forskjellen mellom Git Pull og Git Fetch.

Forventet svar: Git Pull og Git Fetch er to forskjellige kommandoer som henter ny kode fra et eksternt depot, og slår den sammen til din lokale arbeidskopi. Git Pull henter ny kode fra et eksternt depot, slår den sammen til din lokale arbeidskopi og stopper. Git Fetch ligner på Git Pull, bortsett fra at den ikke stopper etter sammenslåing; i stedet fortsetter den med eventuelle tilleggskommandoer du har gitt (som git checkout).

12. Hva er semantisk HTML? Hvordan virker det?

Forventet svar: Semantisk HTML er når du bruker HTML-tags som er relevante for innholdet på nettstedet ditt, for eksempel avsnitt for tekst og lister for lister. Semantisk HTML hjelper søkemotorer med å forstå hva nettstedet ditt handler om, slik at de kan gi bedre resultater for brukere som surfer på nettet med disse søkemotorene.

13. Definere Anonym-funksjonen i JS?

Forventet svar: Den anonyme funksjonen i JavaScript brukes når du ikke vil eksplisitt definere et funksjonsnavn, men ønsker å kjøre noe kode i stedet for.

Topp tekniske ferdigheter frontend-utviklere bør ha

Noen selskaper vil kreve en bachelorgrad i informatikk, eller et beslektet felt, for å søke på en jobb som utvikler (i hvilken som helst kapasitet). Andre selskaper krever ikke annet enn rå kodingsferdigheter og problemløsningsevner. Uavhengig av dette, er det alltid et pluss å ha en slags utviklerrelatert sertifisering.

Her er noen av de viktigste kvalifikasjonene som forventes fra en kunnskapsrik frontend-utvikler:

• Flere års erfaring (2+) med å utvikle moderne, raske og ansvarlige nettsider med HTML, CSS og JavaScript
• Grundig kjennskap innen de mest populære JavaScript-rammeverkene som React.js, Angular og Vue.js
• Stor forståelse og god erfaring fra å jobbe med JavaScript-biblioteker som Bootstrap og jQuery
• God forståelse av SEO-prinsipper og praksis
• Gode ferdigheter med semantiske HTML5-elementer, WAI-ARIA og mikroformater
• Gode ferdigheter med CSS-forprosessorer (Sass, Less eller Stylus)
• Rikelig erfaring med testing og kompatibilitet på tvers av nettlesere

Naturligvis ønsker jeg å rydde opp i noen misforståelser om frontend-utviklingstjenesten (og frontend-utvikling generelt), så jeg tok kontakt med Proxify-nettverket av utviklere med et par spørsmål som de gladelig svarte på.

Mitt første spørsmål var mer en isbryter enn noe annet, men jeg tror det bidro til å sette tonen i samtalen:

1. Hva er hovedforskjellen mellom en frontend- og en backend-utvikler?

Armen Nersisyan, en ekspert innen HTML, CSS og JavaScript, fant et svar raskt:

“Frontend-utviklere er folk som jobber med detaljer rettet mot brukerne, eller med andre ord, alt vi ser (klientsiden) som applikasjonsfarger, animasjoner og mye mer. Alt dette gjøres av frontend-utviklere. På den annen side jobber backend-ingeniører med ting som ikke er synlige for brukerne, for eksempel autentisering, arbeid med databaser og flere slike ting.”

Armen Nersisyan

En annen utvikler, en av Proxify-teamets dyktige utviklere, tilbød også sitt svar. Ardit Maloku har lang erfaring med en rekke frontend- og backend-prosjekter, med hovedvekt på PHP, Laravel og JavaScript som hans foretrukne språk:

“Frontend-utvikling er programmering som fokuserer på de visuelle elementene til en nettside eller app som en bruker vil samhandle med. I mellomtiden fokuserer backend-utvikling på den delen av en nettside brukere ikke kan se.”

Ardit Maloku

Mitt andre spørsmål var mer rettet mot ledere, kunder og andre kolleger som ikke nødvendigvis kommer fra en teknisk bakgrunn.

2. Hva er den eneste tingen som ikke-teknologiske folk ofte blir forvirret av når det gjelder frontend-utviklere?

Armen svarte ukomplisert:

“Frontend-utvikling forveksles ofte med UI-utvikling, og noen ganger tror folk at frontend-utviklere bare lager et design. Men i dag, bortsett fra brukergrensesnitt og design, er det også mange logiske deler som må fullføres spesifikt av frontend-utviklere.”

Armen Nersisyan

Ardit kom med en fin analogi:

“Alle liker biler, eller i hvert fall noen av oss, haha. Hvis vi sammenligner nettsider med biler, kan vi se hva de har til felles. Altså er frontenden her interiøret og eksteriøret til en bil, mens bakenden er motoren. Brukeren på nettsiden er føreren av bilen, så føreren må fortsatt trykke på pedalene for å kjøre bilen. Det frontend gjør for nettsiden, gjør at motoren (backend) kjører og fungerer fra sluttbrukerens perspektiv.”

Ardit Maloku

Han fortsatte: “Når alt det er sagt, får frontend dataene til å samhandle med brukeren; det skaper automatiserte handlinger som gjør det enklere for personen som bruker nettsiden. Vi må heller ikke glemme at frontend-utvikling tar seg av hvordan nettstedet (eller nettsiden) ser ut.”

Mitt tredje og siste spørsmål var som følger:

3. Hva er frontend-utviklerne hovedansvarlige for i utviklingsprosessen av en (web)applikasjon?

Armen’s siste svar var kort og aktuelt:

“De to viktigste tingene frontend-utviklere er ansvarlige for er UI/UX og sidehastighetsytelse.”

Armen Nersisyan

Ardit konkluderte på en kortfattet måte:

“Frontend-utviklere bør være ansvarlige for å bygge pikselperfekte nettsider, holde brukerne oppdatert på alt som skjer på nettsiden og komme med meninger om hvordan man kan forbedre brukeropplevelsen.”

Ardit Maloku

Hvordan teste en frontend-utvikler tekniske ferdigheter og øye for design

Det er en rekke tekniske spørsmål du kan stille frontend-utviklere for å sikre at de er dyktige og pålitelige utviklere. Her er flere.

(1) Hvordan sørger du for at nettsiden eller applikasjonen din er tilgjengelig, brukervennlig og oppdaterte innen de nyeste nettutviklingsstandardene og beste praksis?

Forventet svar: “Jeg sørger alltid for å teste nettsidene og appene mine på alle de store nettleserne, enhetene og konfigurasjonene for å sikre at brukeropplevelsen er på plass hos dem alle. Jeg bruker skjermlesere og andre løsninger for å sikre at applikasjonene mine er tilgjengelige for alle brukere. Jeg holder meg oppdatert innen de beste fremgangsmåter for nettutviklere og bruker de nyeste språkversjonene for å redusere og til slutt eliminere rom for feil i koden min. Jeg bruker testdrevet utvikling jevnlig og ofte.”

(2) Hva er dine favoritt (og/eller mest brukte) HTML-funksjoner, og hvordan har du brukt dem i prosjektene dine?

Forventet svar: “Jeg setter virkelig pris på hvordan HTML5 håndterer multimediastøtte i motsetning til tidligere iterasjoner. Jeg bruker ofte denne funksjonen for å lage et interessant, visuelt tiltalende og responsivt design som bruker lyd- og videoelementer som en avgjørende del av den overordnede nettsideopplevelsen. Den lar meg bygge fritt uten å måtte bekymre meg for feil under lastetiden, eller møte konflikter med andre elementer på nettsiden.”

(3) Hvordan tilpasser du CSS slik at andre utviklere enkelt kan jobbe med koden din?

Forventet svar: “Jeg ordner stilarkene mine i seksjoner, og parer hver seksjon med en tilsvarende komponent på nettsiden. I tillegg har hver seksjon kommentarer, så når andre utviklere jobber med koden, kan de enkelt endre den, legge til den eller skalere den.”

(4) Hva er favorittressursene dine for å tilpasse deg de siste trendene innen frontend-utvikling og design?

Forventet svar: “Jeg deltar jevnlig i diskusjoner på StackOverflow-forumene. Disse ressursene hjelper meg enormt med å lære, og tilpasse meg, de siste trendene innen frontend-utvikling og design.”

(5) Hva er en CSS-float? Kan du dele noen eksempler på hvordan det brukes?

Forventet svar: “CSS-float egenskapen plasserer et element på høyre eller venstre side av beholderen, og lar dermed innebygde elementer (og tekst) vikle rundt det uten å forårsake konflikter med andre elementer på siden. Jeg bruker ofte floats når jeg jobber med en side som endrer størrelse, dynamisk basert på oppløsningen til brukerens enhet.”

Hvorfor bør du ansette en frontend-utvikler?

Det er så mye mer ved frontend-utvikling enn bare HTML, CSS eller JavaScript-kode. Frontend-ingeniører kan bidra med effektive løsninger på følgende utfordringer:

Nettstedets tilgjengelighet: Tilgjengelighetsutfordringer er noe frontend-utviklere er opplært til å fikse. Det er relativt enkelt å lage en nettside som er tilgjengelig for de fleste brukere. Men hva med å lage en som kan nås av alle brukere uavhengig av deres omstendigheter? Frontend-utviklere er den beste personen for jobben, siden de er direkte ansvarlige for å skrive delene av nettsiden som brukere får tilgang til og samhandler med i enhver tenkelig kapasitet.

Nettstedets ytelse: Ifølge nettsteders ytelsesekspert Steve Souders, er mellom 80 % og 90 % av brukerens responstid allokert til frontend. Dette betyr at bare 10-20 % av nettsteders ytelse er avhengig av backend (server-side). Hvis nettytelsen er treg og upålitelig, vil brukerne raskt forlate nettstedet og prøve andre alternativer. Det er derfor det er avgjørende å ha god nettytelse, sammen med et fantastisk UI (brukeropplevelse), som uunngåelig fører til mer trafikk og til syvende og sist forbedrede inntekter i det lange løp.

Web design: En frontend-utvikler av høy kvalitet er en "hybrid" mellom en programvareingeniør og en grensesnittdesigner. De er i stand til å ta et rå grafisk designmønster og oversette det til en visuelt skinnende HTML-opplevelse som tilbyr: tilgjengelighet, pålitelig nettytelse, enkelt vedlikehold, kompatibilitet på tvers av enheter og responsiv webdesign.