Recap Tweakers Developers Summit

De Tweakers Development Summit 2023. Arcadians Joey, Demiën en Sander waren erbij. Heb je het gemist? No worries. Demiën schreef een recap over de talks, met uiteraard onze eigen Sander ten Brinke als spreker over 'Keep it secret, keep it safe'. Lees je mee?

Linda is de auteur en illustrator van “Hello Ruby”, een kinderboekenserie over de wonderlijke wereld van computers. Ook oprichter van “Rails Girls”, een wereldwijde beweging die meisjes kennis laat maken met computers en leert programmeren.

Tijdens de opening vertelt Linda over haar fascinatie met computers, programmeren en AI. Ze vertelt over de groeiende sector, dat IT niet meer per se een muffe sector is en steeds toegankelijker wordt voor veel mensen. Met deze sector, die haar zo fascineert, wil ze kinderen op een leuke manier kennis laten maken. Dat doet ze bijvoorbeeld in haar boekenserie “Hello Ruby”, waarin het hoofdpersonage Ruby technische principes ontdekt die de basis vormen voor de technische denkwijze. De rest van haar verhaal gaat over AI, hoe ze kinderen spelenderwijs kennis laat maken met AI en begrijpen hoe machine learning werkt. Maar ook over hoe ze vergelijkbare werkwijzen gebruikt bij lezingen en bijvoorbeeld CEO’s van vooraanstaande bedrijven. Ook tipt ze aan de ietwat dystopische visie dat AI misschien wel onze banen over zal gaan nemen. Ze sluit af te zeggen dat het een collega zal gaan worden die het werk lichter maakt en ons in staat stelt groter te denken dan we tot nu toe konden. Net zoals Photoshop haar heeft geholpen om sneller en beter te illustreren voor haar boeken.

Vitaly vormt als oprichter en creative lead een belangrijke spil bij Smashing Magazine. Verder is hij front-end en UX-consultant voor organisaties zoals het Europese Parlement, Haufe-Lexware en meer. Ontwikkelingen in het front-end landschap houdt hij nauwlettend in de gaten, terwijl hij zich tegenwoordig vooral op UX ontwikkeling focust.

De eerste interessante ontwikkeling die Vitaly opvalt is dat het verloop van server side rendering (SSR) naar client side rendering (CSR) in een nieuw stadium is aanbeland, een die het best gekenmerkt wordt door progressive hydration. Met progressive hydration ga je op zoek naar de beste balans tussen SSR en CSR om de client snelheid, efficientie maar ook interactivitier en responsiveness te bieden. De zwaarste calculaties worden uitbesteed aan de server terwijl interactieve, essentiele elementen in de client worden gerendered.

Maar waarom zouden we duurdere servers gebruiken wanneer computers en telefoons steeds krachtiger worden? Vitaly betoogt dat het belangrijk is om uit te gaan van de meest gebruikte telefoons en dat zijn natuurlijk niet de nieuwste Galaxies of iPhones. Dus hij doet onderzoek naar zijn demografie, bekijk bijvoorbeeld op amazon.nl of bol.com de bestsellers van dit moment. Het is cruciaal dat de ervaring op zo’n apparaat ook goed, of zelfs geweldig is. Voor een minder krachtige telefoon is het dus handig om zware computatie uit te besteden aan een krachtige server – bijvoorbeeld het renderen van JavaScript gegenereerde content. Om dit te realiseren kun je gebruik maken van de islands architecture, een denkwijze waar je je website opdeelt in blokken met gedeelde functionaliteit. Dit is je waarschijnlijk al bekend als componenten. Vervolgens bepaal je wat op de server gerendered kan worden en wat niet. Koppel dit met een techniek als Gatsby, Next.Js of Vuepress en je kan dit gaan integreren.

In een zoektocht om websites verder te optimaliseren kunnen we ook kijken naar de browser die de bezoeker graag gebruikt, want ook op een desktop worden websites vaak als traag ervaren. Als je bezoeker een Chromium browser gebruikt, is de kans groot dat hij ook extensies geïnstalleerd heeft. Maar waar vaak geen rekening mee gehouden wordt is dat die een grote impact hebben op de performance van jouw pagina. Wanneer je voor een bepaalde doelgroep werkt, is het dus slim om te inventariseren wat veel wordt gebruikt en een profiel aan te maken met die extensies. Zo kun je actief optimaliseren voor de ‘computer’ van je doelgroep. Een leuke tip is de website debugbear.com, waar ze in kaart hebben gebracht hoeveel laadtijd een extensie toevoegt en hoeveel gebruikers ze hebben (https://www.debugbear.com/chrome-extension-performance-lookup).

Het maken van een popup, lightbox of dialog, heel leuk maar ze moeten ook toegankelijk zijn. Naast de brede native HTML-ondersteuning voor het Dialog element, is er sinds een paar maanden ook ondersteuning is alle grote browsers voor het maken van focus traps: de inert attribute. Deze maakt het mogelijk om click en focus events binnen een element te houden, waardoor de gebruiker direct met ‘tab’ de website kan bedienen. Scheelt heel veel werk, en draag bij aan de web content accessibility guidelines!

De volgende gave ontwikkeling is dat Brotli werkt aan een nieuwe versie van hun compressie, namelijk ‘recompression and artifacts’. Het verschil in deze nieuwe, die voorlopig nog niet uitkomt, is dat niet meer hele bestanden naar de client gestuurd worden als deze nog in cache staan. In plaats daarvan ontvangt de client een ‘delta’, met de aanpassingen op de cache zodat er veel minder kilobits over de lijn gaan wat dus weer zorgt voor een snellere gebruikerservaring.

In de nieuwe CSS-kleurspecificatie is er een nieuwe kleurnotatie toegevoegd oklch, hierin kun lightness van een kleur aanpassen die voor onze ogen consistenter is dan bij bijvoorbeeld hsl kleuren. Designers kunnen formules maken waaraan het kleurenpalet kan worden gegenereerd en daarnaast biedt het veel meer kleuren. Namelijk kleuren uit de wide-gamut P3 kleurruimte waardoor ook op ‘preciezere’ schermen betere kleuren weergeven kunnen worden. Waar sRGB (conventioneel) 35.9% van de kleuren ondersteund is dit voor het wide-gamut P3 kleurruimte 52.1%.

Onze eigen lead software engineer en ook nog een Microsoft MVP. Eigenlijk geen introductie nodig.

Sander bespreekt het belang van secrets die ook echt secret zijn, de invloed van gelekte secrets en hoe je daar het beste mee kan omgaan. Allereerst mag genoemd worden dat je altijd een configuratie moet gebruiken voor je secrets, als zouden we dat niet hoeven zeggen. .NET biedt verschillende configuratieproviders voor je secrets: appsettings, .env, command line variables of externe bronnen. Over de talk heeft Sander ook een blog geschreven, lees die vooral: https://stenbrinke.nl/blog/configuration-and-secret-management-in-dotnet/.

Maarten werkt al bijna 20 jaar als web ontwikkelaar, na jaren bij designbureaus werkt hij nu via Capgemini voor de Politie. Chris heeft een achtergrond in UX en front-end en is de grondlegger van het design system van de Politie.

“Blauwdruk”, zo heet het designsysteem van de Politie, volgens Chris een belangrijke factor in de uitstraling van de Politie. Uniformiteit – zoals die ook uitgedragen wordt doordat agenten dezelfde uniforms dragen en auto’s rijden – is van groot belang voor de uitstraling van de Politie, dus ook digitaal. De Politie heeft zo’n 160 applicaties die gebouwd zijn in uiteenlopende frameworks: Angular, React, Vue en meer. Een design system dat aansluit op al deze verschillende technieken zou dus mooi meegenomen zijn.

Het design system is opgebouwd uit tokens, components en wrappers. Tokens komen uit het design en zijn bijvoorbeeld kleuren, lettertypen, regelafstanden, standaard spacing en meer van dat soort variabelen. Vervolgens zijn alle componenten gemaakt als web-components, zo zijn ze binnen de meeste frameworks gewoon te gebruiken. Deze componenten zijn heel atomair, dat wil zeggen dat ze allemaal zo min mogelijk functionaliteit bevatten. Zo is een button met icon niet één component, maar een button met daarin een button-icon genest. De wrappers zijn ten slotte de frameworkspecifieke toepassingen om het voor andere developers zo eenvoudig mogelijk te maken om te integreren. Ook gebruiken ze Stensil.JS om deze te genereren of te scaffolden vanaf de web components.

Het design in Figma maakt het mogelijk om heel makkelijk verschillende ‘token sets’ te beheren: je verschillende themas. Zo is er een politieblauw thema, een groene om mee te testen en een donker thema voor apps van DSI zodat die minder herkenbaar zijn.

Ramona is software engineer bij Rockstar en maakt zich hard voor het creëren van inclusieve en toegankelijke webapplicaties.

“Stel je voor dat je naar het ziekenhuis gaat in een rolstoel, maar niet naar binnen kunt vanwege de twintig traptreden die je moet nemen”, zo opent Ramona gevolgd met de vraag: “maar hoe zit dat op het web?”. Een goede vraag webtoegangkelijkheid is namelijk erg belangrijk voor een grote groep mensen in Nederland. Maar waarom zou je er als bedrijf of ontwikkelaar bij stil moeten staan? Volgens Ramona vergroot je het bereik van je diensten en verbeter je je SEO, wat moet leiden tot meer inkomsten. Daarnaast is het een stuk maatschappelijk verantwoord ondernemen, omdat je zo met je bedrijf laat zien dat je naar iedereen omkijkt.

Als laatste een stukje wetgeving, op 28 juni 2025 treedt de European Accessibility Act (EAA) in werking. Deze wetgeving gaat bedrijven verplichten om digitaal te voldoen aan toegankelijkheidsmaatregelen die gebaseerd zullen worden op de Web Content Accessibility Guidelines versie 2.2 op niveau AA (bevat aanpassingen voor leeftijdsbeperkingen).

De EAA gaat onder ander van kracht zijn op: • Besturingssystemen; • Computers, telefoons en tablets; • E-commerce uitingen; • Vervoersdiensten zoals ticketautomaten en openbaar vervoer apps; • Streamingsdiensten zoals Spotify en Netflix; • Financiele diensten zoals internetbankieren of de apps van banken; • Ticketservices; • Uitingen van telecomproviders.

De wet is nog niet volledig uitgewerkt, wel is nu dus belangrijk om zo veel mogelijk draagvlak te gaan maken bij opdrachtgevers, product-owners, ux/ui designers, testers maar ook bij developers! De impact van deze wet kan erg groot zijn en het web een stuk toegankelijker maken voor de 12% Nederlanders met een permanente beperking, 20% met een tijdelijke beperking of 53% met een leeftijdsbeperking.