1 Laatst bewerkt door Roy Tomeij (19-10-2012 09:18:24)

Onderwerp: Front-end apprentice: welke competenties te leren?

Sinds gisteren hebben we bij 80beans drie maanden lang een "apprentice" in het kader van de eerste stappen in een experimenteel apprenticeship program. Dit is geen stage: er is geen beoordeeling na afloop en er is geen eindresultaat waarop een apprentice afgerekend gaat worden. Het gaat puur om het leren van nieuwe en verbeteren van bestaande competenties.

We gebruiken voor de ontwikkeling van deze competenties geen werkzaamheden die op het kritieke pad van het ontwikkelingsproces liggen. Het moeten voldoen aan deadlines legt zeker in het begin te veel druk op de apprentice. We werken daarom op basis van bestaande, eerder gerealiseerde projecten. We hebben er rond de 100 op de plank liggen, variërend van simpele one-page designs tot complexe apps waarvan het nadenken over de front-end architectuur alleen al dagen gekost heeft. Op basis van de competentie waaraan gewerkt gaat worden kiezen we in overleg een passende case.

Als je je afvraagt waar ons voordeel zit, dan is het antwoord heel simpel: op de korte termijn is dat er niet. We betalen geen salaris, maar wel een onkostenvergoeding. Daarnaast zorgen we voor een nieuwe Macbook Air die de apprentice in bruikleen krijgt. Omdat er niets wordt geproduceerd wat in productie gaat en er regelmatige begeleiding nodig is kost het alleen geld. Het programma daarop afrekenen zou echter kortzichtig zijn. Er is een schrijnend tekort aan gekwalificeerde front-end developers en de enige manier waarop we daar als industrie iets aan kunnen doen is door in praktijkgerichte opleidingen te voorzien. Onze apprentice is na afloop van deze drie maanden niet verplicht om een contract bij 80beans te tekenen; als ze ergens anders naartoe wil dan is dat geen probleem. Ook in dat geval hebben we ervoor gezorgd dat de wereld een stukje beter is geworden.

Na deze lange introductie volgt de vraag: Wat moet een apprentice allemaal leren?

Zelf heb ik onderstaande lijst opgesteld, die zowel over puur front-end (HTML, CSS & JavaScript) gaat alsmede over competenties die daarnaast nodig zijn om binnen een team en een bedrijf te kunnen functioneren. Ik ben erg benieuwd naar wat jullie hiervan vinden en wat je eventueel mist. In een periode van drie maanden kunnen we niet overal even diep op ingaan, maar ik wil onderstaande allemaal voldoende raken. NB: Sommige van deze zaken zijn specifiek voor ons bedrijf en onze toolset.

Dit is erg veel en wellicht niet haalbaar in drie maanden tijd, afhankelijk van snelheid van begrip, focus, etc. Evaluatie echter pas achteraf.

Front-end skills
- Structuur en semantiek van een document bepalen op basis van een grafisch ontwerp
- Toepassen van deze structuur in HTML5 (m.b.v. Haml)
- Begrip van specificity, document flow, floats en positioning
- Toepassen van het ontwerp op deze structuur in CSS3 (m.b.v. Sass & Compass)
- Bepalen welke elementen in een ontwerp modulair herbruikt kunnen worden
- Begrip van retina (high DPI screens), responsive design en "mobile first"
- Toepassen van CSS voor retina
- Toepassen van responsive design
- Begrip van (perceived) front-end performance
- Toepassen van een deel van de Y!Slow regels t.b.v. front-end performance
- Debuggen m.b.v. web inspector
- Toepassen van cross-browser compatible code (moderne browsers)
- Enige ervaring met testen op mobiele apparaten (uit ons device lab)
- Beperkte kennis van browserspecifieke problemen (alle IE's)
- Beperkte kennis van JavaScript zonder libraries
- Toepassen van jQuery in alledaagse taken met begrip van performance

Andere skills
- Begrip van "het internet": DNS, HTTP, server, asynchrone requests, back-end, front-end
- Effectief gebruik kunnen maken van versiebeheer (Git)
- Gebruik kunnen maken van Terminal (command-line interface) voor dagelijkse taken
- Kunnen werken in een groter project met een templating taal (in ons geval Rails m.b.v. Haml en Rails helpers)
- In kunnen schatten hoeveel tijd werkzaamheden gaan kosten
- Communicatie naar externe partijen over de (on)mogelijkheden in een grafisch ontwerp en het kunnen verwoorden van alternatieven
- Samen kunnen werken met front-enders en andere disciplines (UX, UI, grafisch, back-end, klant)

2

Re: Front-end apprentice: welke competenties te leren?

Fantastisch initiatief, ik ben heel benieuwd naar de uitkomst. De skills die je opsomt lijken me prima hoewel ik me eerlijk gezegd afvraag of je direct aan de slag moet met dingen als SASS, HAML en jQuery. Is het niet beter om eerst de basis goed te begrijpen? Ik zie dit meer als tools voor ervaren developers maar wellicht heb jij daar andere ideeën over.
Eén dingetje mis ik, en dat is up-to-date blijven. Het zou mooi zijn als de apprentice na drie maanden niet alleen een goede set basisskills heeft maar ook een uitstekend OPML-bestand en een nuttige Twitter-stream.
Deze apprentice heeft echt enorme mazzel. Ik ben benieuwd naar de methodes die je toepast, ik kan me voorstellen dat andere bureaus hier ook mee aan de slag willen.

3

Re: Front-end apprentice: welke competenties te leren?

Dank voor je input Vasilis. Haml, Sass & Compass zijn hier onderdeel van omdat wij geen regel HTML, CSS en JavaScript schrijven, maar enkel pre-processors gebruiken. Zonder die tools kun je in onze projecten niet uit de voeten. Dit is overigens een apprentice die al een basis heeft in HTML en CSS en de bijbehorende syntax prima onder de knie heeft.

Ik heb gekozen voor een basis in JavaScript en vervolgens jQuery omdat dat een "werkbare situatie" oplevert, omdat veruit de meesten tegenwoordig een JS library gebruiken. Ik zou misschien liever eerst op pure JS focussen, maar aan de andere kant wil ik me richten op skills die bij de praktijk lijken aan te sluiten. Het is absoluut een trade-off.

Het is nu nog even zoeken hoe we de dingen gaan doen. Opdelen in wekelijkse thema's, zien hoe het loopt, steeds een stapje verder, etc? De eerste twee dagen heb ik me gericht op het doen van een 0-meting door het laten omzetten van reeds door de apprentice gemaakte code naar Haml & Sass (om bekend te worden met de syntax), het bepalen van de semantische structuur van een ontwerp op papier en het in code (Haml & Sass) uitwerken van een simpel ontwerp vanuit Photoshop.

Binnenkort een blog over de vorderingen!

4

Re: Front-end apprentice: welke competenties te leren?

Ik mis nog toegankelijkheid. Een van de voordelen van websites is dat ze redelijk eenvoudig toegankelijk gemaakt kunnen worden. Bedenk ook dat Google de grootste blinde gebruiker is.

Als frontendontwikkelaar moet een website die je maakt tenminste blijven werken als je de plaatjes uitschakelt en het toetsenbord in plaats van muis of touchpad gebruikt.

5 Laatst bewerkt door Roy Tomeij (26-10-2012 12:57:55)

Re: Front-end apprentice: welke competenties te leren?

Edwin, ik heb deze kwaliteiten bewust niet genoemd omdat ze wat mij betreft de kern vormen van goed front-end development. Dit moet verweven zijn met alle andere competenties, omdat je anders een broddelaar bent smile

Potdorie, waarom stond daar eerst "Martin" i.p.v. "Edwin"?

6

Re: Front-end apprentice: welke competenties te leren?

Het ligt voor de hand natuurlijk en toch wil ik het aankaarten dat voordat iemand bezig moet zijn met actuele begrippen zoals responsive design, resolutie onafhankelijkheid en tools zoals de pre-processors en !Slow, dat een solid basis gelegd moet worden van de achterliggende concepten en de noodzaak om fundamentele bouwstenen te begripen.
Ik merk zelf dat er te veel mensen worstelen met de basis begrippen; zoals het verschil tussen block elementen en inline, POSH, en basis progressive enhancement.
Dat zijn dingen die helemaal niet hip zijn maar toch onmisbaar.

Als jouw apprentise geen web-noob is en die dingen goed onder de knie heeft dan kan je pas serieus beginnen aan al de hippe dingen

7

Re: Front-end apprentice: welke competenties te leren?

Dank voor je input David. Onze apprentice heeft inderdaad al een solide basis na zelfstudie en diverse korte cursussen, dus zaken als document flow, positioning en inline/block hoefden niet behandeld te worden (semantiek zat er ook in, maar dat blijft moeilijk en geen exacte wetenschap, dus dat is een voortdurende rode draad). Voordat we 3 maanden van onze tijd besteden aan het trainen van iemand verwachten we ook dat er al een zekere basis is; een apprentice moet wat ons betreft al weten dat hij/zij daadwerkelijk in het vak aan de slag wil gaan.

Ik ben overigens wel aan het denken over een programma om bij het absolute nulpunt te beginnen en heb daarvoor ook diverse "testdagen" doorgebracht met aspirant-developers die vrij blanco waren. Dat is een heel ander tempo en dan zijn 3 maanden zeker niet genoeg.