Front-end Web Scientist
Hittamat.nu - DesignkonceptAlla blogginläggUppgift B_1 HTML - Äppelkaka
Som front-endutvecklare så är din uppgift att utveckla användargränssnittet, det som användaren interagerar vid, till skillnad från back-endprogrammering som sköter de mer dolda funktionerna, så som databashantering.
En front-endutvecklare jobbar med html, css och javascript. Html är strukturen, css är designlagret, och javascript är till för att till exempel lägga till/ändra och förflytta saker i html.
Som front-endutvecklare har du tre huvudsakliga mål med hemsidan du utvecklar. Det första är tillgänglighet, som går ut på att hemsidan ska fungera så bra som möjligt på alla olika webbläsare och smartphones, den ska helt enkelt vara tillgänglig på så många ställen som möjligt. Det andra målet är användbarhet; viktiga saker på hemsidan ska vara tydliga och lättåtkomliga, det ska vara lätt att använda hemsidan. Det sista är prestanda, hemsidan ska ladda snabbt så att användaren inte klickar bort innan hen hinner se innehållet.
Det finns många tekniker för att uppnå respektive mål. För att öka hemsidans tillgänglighet så kan man använda javascript-filer för att till exempel meddela om problem med användarens webbläsarversion. Ett sådant javascript-verktyg är modernizr, som lägger till klasser i html-taggen om webbläsaren inte stödjer vissa funktioner som till exempel css3 transform, eller om användaren använder en touch-device. Då kan man sedan utnyttja att klassen finns i html-taggen genom att använda den som första selectorn i css:en, för att designa om ett element så att det passar den ej kompatibla webbläsaren.
/* Exempel */
/* Positionerad med CSS3 transform. */
.box {
transform: translateY(20px);
}
/* Ersättning om webbläsaren inte har transform. */
.no-transform .box {
top: 20px;
};.box kommer då endast att få top: 20px om taggen .no-transform är närvarande i html:en, vilket endast sker om funktionen saknas.
För att få ett någorlunda bra webbläsarstöd i äldre versioner av Internet Explorer kan man också använda html5shiv.js och css3-mediaqueries.js som då simulerar html5/css3 i en gammal webbläsare.
Ett sätt för att öka hemsidans användbarhet är att försöka hålla hemsidans innehåll så kort och koncist som möjligt. Webben har gjort så att användaren med åren har fått en sämre och sämre koncentrationsförmåga. Detta leder då till att vi ofta bara skannar texten efter viktiga nyckelord för att validera texten innan vi börjar läsa den. Därför är det bra att dela upp texten till stycken med undertitlar för att ge användaren en bättre förståelse för vad det är den ska läsa.
För att öka din hemsidas prestanda så finns det massor av optimeringar man kan göra. Det vanligaste är att man minifierar koden innan den laddas upp på en server, detta minskar filstorleken och då även filens nedladdningstid. Men jag skulle ändå säga att det viktigaste är att man helt enkelt skriver riktigt smart/effektiv och kortfattad kod. Det sparar mer tid än dom millisekunderna som en minifiering sparar.
När man jobbar med css så finns det även där många bra verktyg. Några sådana är Sass, Less och Stylus som är preprocessorer som i stort sett förvandlar den limiterade naturen av css till ett fullfjädrat programmeringsspråk där man har funktioner (mixins), variabler och nesting. Preprocessorer kompilerar sedan din kod till läsbar css, ungefär som c++ kompilerar användarvänlig kod till mindre användarvänlig maskinkod. Det finns även frameworks som endast är färdig css-kod som kan användas och byggas ut för att passa dina hemsidebehov.
Sist men inte minst så har vi javascript som verkligen har tagit över marknaden de senaste åren. Nu används det i stort sett överallt. Främst pågrund av olika javascriptbibliotek som Mootools, Prototype och jQuery. jQuery är det mest använda av dessa och många anser att det är pågrund av det som javascript har blivit ett relativt lättlärt språk då jQuery simplifierar dom-manipulation och animering en hel del.
Jag valde att intervjua Olof Svanberg från Social Web Group. Social Web Group vann 2014 priset Årets Företagare med motivationen att de på kort tid har etablerat sig i området och har snabbt fått uppdrag hos ett flertal större företag och föreningar. Olof vann samma år Årets Affärskreatör där tio unga entreprenörer tävlade om en studieplats vid Handelshögskolan i Stockholm. Social Web Group har gjort uppdrag åt stora kunder så som Atlas Copco och Svenskt Näringsliv.
Olof säger att Social Web Group främst säljer tjänster i form av utvecklingstimmar och konsultation. Dom erbjuder även support. I nuläget jobbar Social Web Group med ett stort nätverk av utvecklare. Dom som mer seniora företagare tar in jobb från företag och sedan leder projekten. Social Web Group är mycket för att stödja nyblivna webbutvecklare och ungdomar genom att ge dom en chans att frilansa som underleverantör. Utvecklarna har då även stort inflytande över arbetsgången och projektens upplägg.
Olof började vid 15 års ålder med webbutveckling under skoltiden. Det blev snabbt ett intresse och sedan en passion. Det första projektet han deltog i var en Wordpress hemsida åt ett mindre företag i Örebro. Till den använde han mest html och php.
Jag frågade honom hur han tror att framtiden ser ut för denna bransch. Han sade att framtiden ser mycket god ut. Det har dock blivit lättare för personer samt företag att köpa färdiga generiska hemsidor, vilket ställer högre krav på oss seriösa webbyråer. Det behövs även mer kvinnor i vår bransch, något som vi alla måste försöka främja för utvecklingen av vår bransch.
Olof säger att förutom kodspråken samt design-känsla så behöver man en passion för det man gör för att bli en framgångsrik webbutvecklare.
Jag frågade slutligen Olof om det är något mer man bör veta innan man ger sig in i detta yrke. Det är viktigt att hitta dina språk som passar dig bäst och bli riktigt bra på dom, att lära sig allt direkt är ett slöseri med tid och energi. Var inte rädd för att göra både back-end och front-end!
Wikipedia: Front End Developement
Mashable: Website Usability Tips
Publicerad: 9/10 - 2015
Nästa blogginlägg: Uppgift B_1 HTML - Äppelkaka