Lemone: Fronteers Conf 2022

 

Na een afwezigheid van 2 jaar was er dit jaar weer een Fronteers Conference en Lemone was erbij. Want als je elke dag de lat een stukje hoger legt, moet je door blijven leren en ontwikkelen.

– ONE DAY SIX SPEAKERS NEW LOCATION SAME GREAT COMMUNITY

Dit jaar was Fronteers Conf in Pathé Utrecht Leidsche Rijn, een verandering ten opzichte van vorige edities die steeds plaatsvonden in Pathé Tuschinski in Amsterdam. Dit was niet de enige verandering, ook was Fronteers Conf kleinschaliger en 1 dag in plaats van 2 dagen.

Beyond the persona

Marie van Driessche

In de eerste presentatie van de dag neemt Marie ons mee in haar ontwerpproces, zodat we tijdens de design fase echt inclusief kunnen zijn. Ze wijst ons op de tekortkomingen van Design Thinking en verteld ons dat empathie niet altijd een goede basis is voor een goed inclusief ontwerp.

– “I don’t need your empathy. Don’t try to be in my shoes for a while and say how hard that was on you. That’s audism. Instead, be aware and understand.”

Marie maakt zich hard om ook de “inclusieve”-doelgroep mee te nemen in het ontwerp proces. Een doelgroep die vaak wordt vergeten bij het samenstellen van persona’s, aangezien die zijn gebaseerd op de gemiddelde doelgroep.

Het meenemen van de “inclusieve”-doelgroep kan voorkomen dat door een simpele handeling, zoals het weglaten van een contact formulier, je website niet langer toegangkelijk is. De drempel om contact op te nemen wordt voor een dove bezoeker hierdoor een stuk hoger.

De conclusie van Marie; “Om echt inclusief te designen moet je je een inclusieve doelgroep hebben”.

Unlock the Fun!

Ulrike Rausch

Na een korte pauze gaan we verder met een praatje over font design. Ulrike specialiseert zich in handgeschreven fonts, maar is ook bezig met het ontdekken van de grenzen van de technologie.

– Creating outstanding typographic designs is not just about choosing the right font. It’s about using all the super powers that font technology offers you today.

Door te werken met variaties per letter, kun je het idee van een handgeschreven font versterken. Een stap verder is om alle letters in te scannen en te gebruiken als bitmap, met grote font files als gevolg.

Voorbeeld handgeschreven font:
Bekijk de tweet

Voorbeeld animated SVG font:
Bekijk de tweet

Interessante links

• Fontdrop – informatie over een font
• Typearture – wat kan je doen met variabele fonts

Web Protocols for Frontend Developers

Robin Marx

Het derde praatje van de dag gaat over HTTP/3 en de perfomance voordelen hiervan, de meeste hiervan krijg je voor niets door simpel te upgraden vanaf HTTP/2. Sommige vereisen input van de developer.

One does not simply talk about networking protocols without using pop culture references!

Robin blijkt een groot fan van Lord of the Rings, dus als stage prop komt er een replica zwaard tevoorschijn en de talk is gevuld met slechte / grappige verwijzingen naar de films.

Tijdens het uitleggen van het http protocol wordt de “14kb site” afgedaan als onzin. Ja, de eerste request is 14kb, maar daar zit meer informatie in dan alleen maar de website.

Servers zijn slecht in het bepalen van de prioriteit en het verschilt per server (apache, nginx, etc.), browsers zijn hier veel beter in.

Wees voorzichtig met het gebruik van “preload”, dit kan je website zelfs trager maken. Goed gebruik is op bijvoorbeeld je hero-image, icm fetchpriority="high".

Ook een goede tip om maximale performance the halen uit je website is de volgorde van het “head”-element, Harry Roberts heeft hier een presentatie (get your head straight) over gegeven .

CSS in 2022 (and beyond)

Bramus van Damme

Next up; een praatje over CSS en welke features we kunnen verwachten in 2022. Waar in het verleden browsers onafhankelijk van elkaar features leken te implementeren, hebben de verschillende browsers nu afspraken over welke features ze in een jaar implementeren.

Bramus neemt ons in een snel trein vaart door de features die dit jaar al geïmplementeerd zijn door alle browsers en welke features er nog aankomen. Of te wel CSS release notes.

Wat we vandaag al kunnen gebruiken

Custom properties
Of te wel css variabelen var(–variable-name)

Preference queries
Bijvoorbeeld reduce motion en color scheme

space seperated colors
Gebruik rgb(0 0 0 / 90) ipv rgba(0,0,0,.9)

Aspect ratio
Niet langer de padding hack nodig

Logical properties
Bijvoorbeeld inline en block size, goede aanvulling op leesrichtingen

Scroll behaviour
Smooth scrolling zonder javascript

Scroll snapping
Scroll snapping zonder javascript

Wat er nog aankomt

Focus-visible
Verbeterde focus voor klikbare elementen

Container queries
Responsive componenten op basis van de parent ipv de windwo

Cascade layers
Meer controle over css

Color functions
Mogelijkheid om kleuren te manipuleren met css (bijvoorbeeld; donker of lichter)

New color spaces
Meer color spaces zoals P3.

New viewport units
Meer viewport units die rekening houden met de browser elementen

has selector
Ook wel de parent selector genoemd, hier kan je bijvoorbeeld alle a-elementen met een afbeelding selecteren

subgrid
Je grid gebruiken in “child”-elementen, mooie layout verbetering.

accent-color
Accent kleur aangeven aan form elementen

media query ranges
Simpelere notatie van media queries

individual transform properties
Door ze individueel te declareren overschrijven ze elkaar niet.

Debugging web privacy

Maud Nalpas

Het is altijd een beetje dubbel om iemand van Google over privacy te horen praten, maar toch weet ze een aantal interessante dingen te vertellen.

Overigens heeft mijn collega Rutger een interessant artikel geschreven over Privacy.

– Privacy is boring, or isn’t it …

Aan de hand van een voorbeeld site, neemt Maud ons langs een aantal stappen over privacy en wat je als developer kan doen om privacy te bevorderen. Gelukkig gebruikt al 80% van alle websites https.

Een paar tips die ik heb meegenomen;

• Vraag nooit om je gebruikers locatie, zonder context. Want 85% van de locatie verzoeken wordt geweigerd.
• Waar mogelijk gebruik navigator.userAgentData over navigator.userAgent.
• navigator.userAgent kan gebruikt worden om gebruikers cross site te volgen, is een unieke string.
• Test je site zonder cookies / javascript, dan is er ook geen local storage, werkt je site dan nog steeds?
• Google analytics heeft een hoop privacy settings, maar misschien beter een alternatief gebruiken of niets?

Lost in Translation

Manuel Matuzović

De presentatie van Manuel gaat over het omzetten van een design naar HTML en CSS en dat hierbij er soms informatie verloren gaat, omdat we teveel vertrouwen op de visuele aspecten van het design en minder op de sysmantische betekenis. En wat de consequenties zijn van de beslissingen die wij maken als developer op de toegangkelijkheid van de website.

– A div is not a button

Uit het WebAIM Million rapport worden de 6 meest voorkomende vergissingen aangehaald.

• Low contrast
• Missing alt-tags
• Empty links
• Missing labels
• Empty buttons
• missing doc language

Hidde de Vries schreef een goed artikel over hoe je deze a11y vergissingen kan verbeteren / voorkomen.

Tijdens het tweede gedeelte van de presentatie worden we meegenomen aan de hand van een design. En hoe we symantisch de beste vertaling kunnen maken, zodat HTML er voor zorgt dat de website toegangkelijk is. Goed symantisch geschreven HTML is toegangkelijk van zichzelf en als developer hoef je dus niet terug te vallen op ARIA.

De conslusie van Manuel; “HTML is niet simpel”.

– Geen ARIA is beter dan Slechte ARIA

Er moet meer aandacht besteed worden aan goed symantisch geschreven HTML ipv slecht geschreven HTML met verkeerd toegepaste ARIA tags.

Interessante links

• HTMHell – voorbeelden van slechte html
• Button Cheat Sheet – wat is nu een goede knop