Fronteers '17: de highlights - E-sites.nl
/ blog / Fronteers '17: de highlights
Fronteers '17: de highlights
Door Bram Smulders, front-end developer
20 oktober 2017 - 3128 x bekeken - Categorieën: Kennis, Tech
We waren er weer bij dit jaar: Fronteers Conference in Tuschinski, Amsterdam. Het hoogtepunt van het jaar voor veel front-end developers. Zo ook voor onze ontwikkelaars John, Tim, Tom en ikzelf. Het was mijn allereerste week bij E-sites, dus dit event was meteen ook een leuke gelegenheid om mijn nieuwe collega's wat beter te leren kennen!
De twee congresdagen waren volgepakt met toffe talks, een pubquiz, Jam Sessions en veel lotgenoten. Het ideale moment om kennis bij te spijkeren op front-end gebied en daarnaast te netwerken met collega's uit het vak. Wij hebben samen gereflecteerd op de inhoud, hieronder lees je onze highlights!
Van Async naar 'N Sync
Voor de tweede keer werd dit jaar de avond voor de conferentie 'FrontCheers' georganiseerd. De hosts, Charis en Peter, hebben deze pubquiz volgepropt met vragen over JavaScript, HTML, CSS en natuurlijk boy/girl bands. Onze front-enders zaten in team "Heydon"(Heyon Pickering), maar konden geen potten breken in de Quiz. Natuurlijk is er veel gelachen en bijgepraat met ex-collega's en kennissen uit het vak. Ook waren er sprekers van de partij waar we een praatje mee hebben kunnen maken. Zo hebben we het met Ash Kyd gehad over Amsterdam en Nederland en heeft Jake Archibald in zijn eentje hungry hippos gewonnen. Een goede start wat ons betreft, het beloofde een paar mooie conferentiedagen te worden.
Niels Leenheer: Don't panic
Spreker Niels Leenheer trapte de eerste dag af met een overzicht van standaardisatie, concurrerende browsers en competitie. Hij doelde op het feit dat we niet voor specifieke browsers moeten bouwen maar voor het web als geheel. Met als grote voorbeeld dat Internet Explorer 6 in 2002-2003 de grootste browser was en webdevelopers specifiek voor deze browser code hebben geschreven. Hetzelfde gebeurde een aantal jaren terug met de Chrome browser. Zorg ervoor dat je code in meerdere browsers werkt door middel van geaccepteerde standaarden.
Jessica Rose: Impostor Syndrome and Individual Competence
Onze hersenen zijn zeer slecht in zelfbeoordeling. Ze gebruiken slechte gegevens om nog slechtere conclusies te trekken waar ze nog eens aan gehecht raken ook: het impostor syndrome (het oplichterssyndroom). Jessica vertelde hoe technologie dit syndroom alleen maar versterkt. Dit komt doordat we onze eigen ervaring zijn gaan vergelijken met iemand anders zijn 'best of' momenten.
Hoe kunnen we het beter maken? Jessica legt uit dat we nooit aan iemand moeten vertellen dat die persoon het Impostor syndroom heeft. Daarnaast draagt positieve en onderbouwde feedback bij aan het verwerken van het gevoel van incompetentie. Om het voor jezelf beter te maken, kun je proberen jezelf te 'testen' door artikelen te schrijven of les te geven over onderwerpen waar je jezelf goed bij voelt.
Maar wat als het Impostor syndrome een slechte manier van je hersenen is om te zeggen dat alles goed gaat?
Alice bespreekt het sociale aspect van het ontwikkelen. We hebben verantwoordelijkheid voor login-, medische- en bankgegevens waardoor we veiligheid moeten garanderen. Het is van belang dit ook testen. Er zijn verschillende manieren om je front-end code te testen:
Unit tests zorgen ervoor dat kleine stukken code precies (blijven) werken zoals bedoeld.
Met integration tests kun je complete stukken van je applicatie testen. Daarnaast test je of componenten samen kunnen werken en naast elkaar gebruikt kunnen worden.
Wanneer je complete flows wil testen gebruik je acceptance tests. Hiermee kan je bijvoorbeeld van A tot Z een bestelstraat testen.
Als front-enders werken we veel aan het visuele aspect van de website. Met Visual regression tests is het mogelijk om de applicatie te testen op visuele consistentie.
Alle bovengenoemde tests kun je uitbreiden met het testen van de toegankelijkheid van je website. Deze worden getest aan de hand van de WCAG 2 handleidingen.
Als laatste kun je je project testen onder grote druk. Vallen er componenten om, wanneer er heel snel geklikt wordt op buttons? Wordt jouw formulier maar 1 keer verzonden wanneer je meerdere keren op de submit knop klikt? Deze tests worden monkey tests genoemd. Je raadt al waarom ;-)
Alice Boxhall: Debugging Accessibility
Dit was een zeer interessante talk voor ons aangezien wij accessibility hoog in het vaandel hebben staan. Het probleem is altijd geweest dat je toegankelijkheid niet goed kan debuggen in de browser. Tot nu!
Alice vertelde over beperkingen en dat deze niet altijd binair zijn. Iemand kan een tijdelijke beperking hebben, bijvoorbeeld een gebroken arm of een langdurige beperking zoals blindheid. Het is belangrijk om mensen met een beperking te helpen bij het navigeren van een website.
Het toegankelijk ontwikkelen van interfaces doen we al langer, maar we kunnen het nu ook debuggen in de devtools van Google Chrome. Awesome!
Ruben van der Leun: Possibilities of WebVR and its role in the future
Dit was een van de meest inspirerende talks van dit jaar. Ruben legde uit hoe je Virtual Reality in de browser maakt met aFrame. aFrame is een abstractie bovenop three.js die het makkelijk maakt om 3D omgevingen te maken. Dit deed hij live vanuit zijn presentatie waar 550 mensen tegelijkertijd door een web interface en een Cardboard naar aan het kijken waren. Impressive!
Val Head: Choose Your Animation Adventure
Er zijn verschillende manieren om op het web te animeren met CSS, JavaScript en SVG. Val nam ons mee naar 'het eiland' van animatie. CSS blinkt vooral uit wanneer je van de ene state naar de andere wil animeren, loopende animaties en :hover & :focus animaties. Je hebt geen externe libraries nodig, het presteert goed en je kunt animaties aanpassen met media queries.
JavaScript is vooral goed wanneer je timings wil controleren en controle wil hebben over de animatie. Doordat je deze controle hebt, kun je complexere animaties maken.
SVG is afbeelding en code in één. Kunst gecombineerd met wiskunde! Het leent zich vooral voor animatie van illustraties/iconen en infographics. SVG kan door SMIL(deprecated), CSS en JavaScript geanimeerd worden met alle bovenstaande voordelen.
Naast het dagprogramma is er op donderdag ook altijd een avondprogramma, waarbij de focus vooral ligt op het sociale aspect. In de Industrieele Groote Club, vlakbij de Dam is er een borrel waarbij je kan een biertje kan drinken met vakgenoten en bordspelletjes gespeeld worden. Ook worden er op deze avond Jam Sessions gehouden, korte presentaties van maximaal 10 minuten door 'de gewone developer', waar iedereen zich vrij op kan inschrijven. De onderwerpen hiervan variëren van een supersnelle kennisquiz (vol strikvragen), een korte introductie over (P)React en zelfs een presentatie over het geven van een presentatie. Dat is wat Fronteers uniek maakt, het gaat niet enkel over het opdoen van kennis, maar er wordt ook aandacht besteed aan het zelf delen van kennis en vooral nieuwe mensen leren kennen en oude kennissen weerzien.