If you’re looking for the english version… it’s here

Allereerst een disclaimer. 
Ik ben niet gevraagd om dit te schrijven, maar ben wel partijdig. Ik ken 2 vrijwilligers uit mijn limoengroen periode (nee, niet zoals Picasso). Ze hebben me niet omgekocht.

update: 31 Mei 2019 – Heb wat spelfouten verwijderd

Vorige week donderdag startte Frontend United. Door de naam zou je denken dat het een boel radicale politici is. Het enige wat radicaal is, is waarschijnlijk de experimentele CSS die sommigen uit hun mouw schudden.

TL;DR // De conclusie staat onderaan dit artikel, met een onaangepaste lijst met wat ik heb opgeschreven en opgestoken.

Frontend United is een drie-daagse conferentie in Utrecht voor developers en designers. Voor de conferentie (deze duurt 2 dagen) is er een dag waarin er workshops zijn. Bij de conferentie zelf komen allerlei onderwerpen voorbij zoals hoe je een website of applicatie sneller kan lader,  nieuwe technieken zoals CSS Layout, maar ook interaction design. Het is een aanrader als je nog nooit bij zulke conferenties bent geweest.

Ik ben naar een workshop van Vitaly Friedman gegaan (of Smashing Vitaly zoals ik hem verkeerd noem). Smashing Vitaly Vitaly Friedman is een oprichter van SmashingMagazine (wat ik telkens verkeerd Smashing Web noem). Als je dat niet kent, dan moet je maar van mij aannemen dat hij een zwaargewicht is in webnerd-land. Deze man weet heel veel. En dat zet hij op zijn website. Smashingmagazine dus, niet smashingweb. 

De workshop heette Front-End + Interface Design Bootcamp. Voor 350 euro zou ik een hele dag leren van Vitaly Friedman over Front-End + Interface Design.

Mijn toegangsbewijs en mijn aantekeningen
mijn toegangsbewijs en mijn aantekeningen

Ken je hell week van de Navy Seals? Met zo’n idee boekte ik deze workshop. Er waren andere workshops over CSS en Vue waar ik eigenlijk heen zou moeten gaan, maar ik wilde naar de hell week voor nerdy seals.

Om 9 uur zat ik braaf als een schaapje, met andere designers/developers in een zaal van de Witte Vosch. Het internet deed het niet, dus ik moest maar luisteren zonder mijn downloads map op mijn laptop op te ruimen. Ik weet niet of het mijn afkickverschijnselen waren, maar Vitaly heeft een hoog tempo in zijn workshops. Dat is dus het “Bootcamp” gedeelte in de titel van zijn workshop. Het was dus toch een soort hell week voor nerdy seals. Gelukkig was ik niet de enige, want elke keer als Vitaly een vraag stelde gaf er zelden iemand antwoord. Het ontbrak aan het geluid van krekels in de zaal. Interactie is echt niet besteed aan nerdy seals, Vitaly. 

Vitaly sprong rap van een tip naar een inzicht in zijn presentatie, maar er waren ook nog wat oefeningen. Oefeningen die goed waren, maar waar ik helemaal niet op zat te wachten. Een zo’n opdracht was een website met wel 20 verschillende fonts, illustraties en SVG’s. Hoe ga je daarmee om? 

Meer krekels. 

Een meneer in de zaal had een goede opmerking. Het ligt er ook maar net aan hoe het onderhouden wordt. Wordt het elke maand veranderd? Hoe dan? Via een CMS? Zijn er veel designers die zich ermee bemoeien? Moeten die elke SVG aanpassen?

Oh ja. Ja. Daar had ik zelf niet over nagedacht. Shit. 

We kregen ook opdrachten waar we web componenten naar een mobiele variant moesten omzetten. Een onpopulair probleem is tables. Niemand wil tables responsive maken. Toch moest ik voor 350 euro er over nadenken. Gelukkig had Vitaly wel wat suggesties. 

Van de opdrachten ga je elke opdracht met je groepje uitwerken in een wireframe (gewoon met een papiertje en pen) in zo’n 10 minuten. Daarna geef je wat je getekend hebt aan het groepje dat voor je zit. Het groepje achter jou geeft hun creatie door. En die mag je beoordelen. Dit deden we zo met vier opdrachten. 

Voor mij was dit niet echt behulpzaam. Ik kan echt niet in 10 minuten op mobiel timelines, een interactief programma om een auto aan te passen, en tables aanpassen. Dus het beste kwam niet naar boven in mij. 

Wat dat betreft had die workshop niet gehoeven voor mij. Het was leuker geweest als het niet zo gehaast is. Als we gedurende de dag aan 1 opdracht in groepjes werkten, met diverse aspecten en dan steeds van groep wisselden.

Maar ik heb wel wat opgestoken! En ik heb wel een miljoenmiljard (zoals men dat bij Sooqr zegt) documenten uit Vitaly’s dropbox gekregen. Die ga ik niet delen. Dat is niet zo netjes. 

Conclusie
Zou ik het nog een keer doen? Een workshop, ja. Natuurlijk! Je hebt er veel aan. Maar ik denk niet dat ik naar nog een workshop van Vitaly Fridman zal gaan. Ik denk dat workshops meer hands-on moeten zijn. Deze workshop had teveel informatie.

Dit kwam er allemaal voorbij…

  • Bij Facebook is er een 2G Tuesdays om te testen bij traag internet.
  • Pas je aan aan de netwerkverbinding.
  • Maak een performance budget
  • Gebruik Notion voor namespacing documentatie
  • GZip is traag. In plaats daarvan is er ook Zopfli, Brotli
  • Voor afbeeldingen kan je Lepton gebruiken
  • Maak afbeeldingen efficient. (in verband met performance budget)
  • Background images als of met een mask (css)
  • Maak je afbeelding grijs en gooi er dan een css filter overheen voor de kleuren.
  • jpegs compress well.
  • Blur wat je niet nodig hebt op een afbeelding. (mail me als je wil weten wat ik hiermee bedoel)
  • Iets met progressive JPEG.
  • WEBP heeft nog niet veel support op het web.
  • Traced SVG Placeholders
Traced SVG by Gatsby
Traced SVG by Gatsby
  • Er is ook machine learning om afbeeldingen te optimaliseren
  • Video: Progressive loading
  • AV1 is nu ook een ding. Dat gaat sneller.
  • Vitaly legde het verschil uit tussen video, audio en een container.
  • Zet je video op autoplay + muted. Dat helpt ook.
  • Fonts: woff/Woff2
  • @font-face zal alleen geladen worden op de pagina’s die deze fonts gebruiken.
  • Gebruik een fallback font.
  • Font-Display.
  • Font-style matcher
  • Variable fonts
  • CSS font-variation-settings 🤞🏼 bad performance
  • OTF gaat verdwijnen.
    Echt?
  • UDP vs TCP
  • progressive CSS. Verdeel je css op. Heb ik gedaan na de workshop. Geen idee of het werkt, maar zo ziet het er dan uit:
Stukje code
Zet je <link rel=”stylesheet”> lekker tussen je code neer. Dat scheelt weer met pageloads. En het is leesbaarder. Voor meer vragen kan je me altijd even een berichtje sturen via twitter of via de mail.
  • dan heleboel over inline caching, service workers en web assembly.
  • Mensen spenderen totaal 3 uur per dag op hun mobiel. Bij mij is dat wel het dubbele.
  • Ze checken hun mobiel 80x per dag gemiddeld
  • Het performance budget op mobiel is 30 seconden of minder. Volgens mij is dat nogal gul.
  • Thumb Driven Design.
  • Vingers raken moeilijk het doel.
  • Let’s see what Amazon or AirBnB does: “They can afford the luxury to be wrong. You have to fight for every user”.
  • Sliders are cool for finances or 3D rendering toggles.
  • Tables: tilt de headings on mobile.
Tilted headers on a table. Source: CSS-Tricks. Didn’t ask permission. Thanks, Chris.
  • Email: font-size veranderen als het niet past in de img alt
  • Email: het is mogelijk een live twitterfeed laden in een email nieuwsbrief.
  • Email: Live berekeningen maken met een css counter.
  • Email: Interactivity
  • Bulletproof emails
  • Als je dit allemaal goed kan kan je geld verdienen met Sr. Full Stack E-Mail Developer. 🧐
  • Wrapping up: ahhh. It will never be perfect. awwww 🥺
  • Wrapping up: Vitaly is nu een almost-perfectionist.
  • Wrapping up: Als Vitaly er een probleem mee heeft, hebben de meesten daar ook een probleem mee.

The End.

LEAVE A REPLY

Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.