Frontmania 2023

Geschreven door: Melvin Bootsgezel, Front-end Expert bij Pancompany

Jaarlijks wordt er in de Jaarbeurs Utrecht het evenement Frontmania georganiseerd. Een tech-paradijs waar sprekers van over de hele wereld komen praten over wat hun het meest enthousiasmeert: ontwikkelingen binnen de Front End wereld. Een groot aanbod aan sprekers, met een groot aanbod aan onderwerpen.  Van de laatste ontwikkelingen van CSS, naar nieuwe trending JavaScript frameworks tot artificial intelligence. Niet te vergeten de toffe workshops die er te volgen zijn.

Dit jaar was Frontmania op 12 oktober 2023 en waren we vanuit Pancompany met 16 collega’s en onze drukbezochte “Dart Vader”-stand in het Frontmania jaarthema “Sciencefiction” aanwezig. Ook hebben we 2 bezoekers blij gemaakt met prachtige prijzen. Zij wonnen de Lego X-Wing en de Lego Milennium Falcon.

Ook ik had de kans om de toffe talks van Frontmania bij te wonen. Een die ik niet zomaar voorbij liet gaan. Ik neem je mee door de dag en een aantal talks die ik hier heb gevolgd.

Supercharge Your Productivity: Mastering Prompt Engineering

Jeroen Egelmeers – Tech Lead- deelde zijn ervaringen met AI chatbots zoals ChatGPT. Er is momenteel veel te vinden over dit soort tools. Maar hoe schrijf je nou goede prompts om nuttige info uit ChatGPT te krijgen. Jeroen vertelde over het “Crafting AI Prompts Framework”, en hoe je het kan gebruiken om het beste uit ChatGPT te krijgen.

Vragen stellen aan een chatbot lijkt misschien heel simpel, maar er zijn een hoop dingen die we al snel vergeten te benoemen. Stel, je geeft ChatGPT de opdracht: “Maak een sportschema”. Dan krijg je een schema met 3 oefeningen per dag, voor 3 dagen. Waarschijnlijk is dit niet wat je wilt. Dit komt omdat ChatGPT niet weet waar je naar op zoek bent. Dit is informatie waarmee je de bot moet voeden. Jeroen demonstreerde zijn “Crafting AI Prompts Framework”, en hoe je het kan toepassen om betere vragen te stellen aan ChatGPT. Hij beschrijft zijn **CRAFT** model als volgt:

– C – Context: Beschrijf de achtergrond, het onderwerp, en eventuele relevante voorbeelden of termen. Bijvoorbeeld “Ik heb geen sportervaring en heb een kantoorbaan waarbij ik veel zit. Ik wil 2 keer in de week, maximaal 60 minuten sporten.”

– R – Register (schrijfstijl):Leg uit op welke wijze er geschreven moet worden. Formeel of informeel. Bijvoorbeeld “Schrijf op een simpele informele manier.”

– A – Acting Role: Benoem een bepaalde rol die je wilt dat ChatGPT aanneemt bij het schrijven. Bijvoorbeeld “Schrijf alsof je een sportcoach bent”

– F – Format: Hoe wil je dat de tekst opgemaakt wordt. Bijvoorbeeld in een lijst, of in een tabel.

– T- Taak: Wat wil je dat ChatGPT doet. Gebruik actiewoorden zoals “schrijf” of “vat samen”. Zorg dat het duidelijk is wat je wilt dat ChatGPT moet doen. Bijvoorbeeld “Maak een sportschema voor gewichtheffen”

Daarnaast benoemde hij nadrukkelijk hoe belangrijk het is om het resultaat te valideren. Niet alles wat ChatGPT zegt hoeft te kloppen.

Als je al deze punten meeneemt in het stellen van je vraag, zal de kwaliteit van ChatGPT zijn antwoord een stuk beter zijn. Al met al een zeer interessante talk van Jeroen Egelmeers. Het heeft mij zeker geholpen met mijn interacties met ChatGPT.

Animating Delight: Elevate UX with Framer Motion Microinteractions

Vilva Athiban – JavaScript developer, International tech Speaker, Open Source Contributor, Seasonal Blogger en YouTuber – vertelde over Microinteractions in de wereld van UX. Hij legde uit hoe belangrijk microinteractions zijn binnen een (web)applicatie, en hoe je ze kan gebruiken om de gebruikers engaged te houden. Microinteractions zijn niets meer dan kleine animaties die de gebruiker entertainen om simpele acties zoals de druk op een knop leuker te maken dan een simpele klik.

Vaak worden real-world effecten gebruikt als inspiratie. Denk hierbij bijvoorbeeld aan het effect wanneer je een steentje in stil water gooit. Het effect is dan een aantal kleine golven die naar buiten bewegen. Google’s Material Design maakt gebruik van dit effect op hun knoppen, genaamd het “ripple” effect. Dit is een simpele animatie die de achtergrond van een knop zo animeert zoals de golven in het water.

Een ander voorbeeld is het notificatie belletje wat we op veel websites zien. Wanneer de gebruiker een notificatie krijgt, kan je een microinteraction toevoegen door bijvoorbeeld het belletje heen en weer te laten bewegen zoals een echte ouderwetse bel dat ook doet. Zo trek je ook gelijk de aandacht naar het belletje toe.

Vilva demonstreerde deze microinteractions via het JavaScript framework “Framer Motion”. Hij vertelde over hoe je het framework kan gebruiken om microinteractions toe te voegen aan een website, en geeft technische voorbeelden hoe je ze moet implementeren.

Een interessante talk van Vilva Athiban over microinteractions. In de eerstvolgende website die ik ga bouwen ga ik zeker wat microinteractions toevoegen.

Visualizing Connections

Nadieh Bremer – Data Visualization Designer and Artist – vertelde over de uitdagingen van big data, en hoe zij deze data op interactieve wijze visualiseert. Data komt in veel verschillende vormen. Vaak ook in verschillende formats, in verschillende schrijfwijzes. Het filteren en corrigeren van deze data is een van de vele uitdagingen van het vak, vertelde ze. Big data is niet iets waar je meteen een beeld bij hebt hoe dat eruit ziet, of hoe het met elkaar verbonden is. Nadieh specialiseert zich in het visualiseren van de connecties tussen alle data.

Zo vertelde ze dat ze in samenwerking met UNESCO de geschiedenis in is gedoken om te achterhalen welke elementen van verschillende culturen te verbinden zijn met elkaar. Denk hierbij aan bijvoorbeeld dansstijlen, festivals, kostuums, poëzie, en nog veel meer. Dit zijn allemaal dingen die in veel verschillende culturen voorkomen. Nadieh legt deze connecties op de meest creatieve manieren vast, en visualiseert deze in haar eigen webomgeving. Ze gebruikt hiervoor tools zoals D3.js en CanvasJS.

Nadieh heeft me erg verrast met deze leuke visuele talk over Visualizing Connections.

Automating your Developer Workflow with Playwright’s UI Mode

Nimo Beeren – Software Engineer bij iO – vertelde vol enthousiasme zijn ervaringen met software testing en demonstreerde zijn go-to testing framework, Playwright.

Stel, je bent bezig met het ontwikkelen van een nieuwe complexe feature. Je bent een flow aan het programmeren om een item van je webwinkel te bestellen. Je schrijft code om een item aan je winkelmand toe te voegen, en via je winkelmand de bestelling te plaatsen. Vervolgens maak je het stukje om de betaling af te handelen. Waarna je de factuur naar de gebruiker stuurt via email. Alles lijkt te werken. But then… a wild bug appears. Vervelend, maar het hoort erbij. Het ding is, de bug zit helemaal aan het einde van je flow. Je wilt gaan debuggen, maar dat is tijdrovend, omdat de bug helemaal aan het einde van je flow zit, en dus elke keer heel je flow door moet klikken.

Je herinnert je een een toffe spreker van Frontmania die het over Playwright had. Een geweldig end-to-end testing framework. Je installeert Playwright via npm (of yarn) via `npm init playwright@latest`, je kiest welke browsers je wilt testen, enkel Chrome is prima. En je kan gelijk beginnen. Je hebt natuurlijk geen zin om elke stap van de end-to-end handmatig te typen. Gelukkig hoeft dat niet, Playwright heeft namelijk een record feature! Met het commando `npx playwright codegen` start je een record sessie. Playwright opent een managed browser sessie, en je kan beginnen. Elke actie, elke klik met je muis, elke letter die jij typt wordt opgenomen door Playwright, en omgezet naar testcode. Actie voor actie, regel voor regel. Als je klaar bent sluit je de browser sessie af.

Je kunt nu je opgenomen end-to-end test bewerken waar nodig, extra pauzes toevoegen, een regel verwijderen, regel toevoegen, no problemo. Als je klaar bent kan je je test runnen met `npx playwright test –ui`.  Playwright opent een UI view waarin je je tests kan monitoren, en voor elke stap de state van de applicatie kan bekijken.

Nimo heeft zeker mijn interesse opgewekt voor Playwright en ik heb het ondertussen al voor meerdere projecten gebruikt! Ben jij ook benieuwd wat je allemaal met Playwright kan doen, kijk dan op https://playwright.dev/. Wil je meer weten waar Nimo Beeren zich mee bezig houdt, kijk dan op https://www.nimobeeren.com/

Borrel

Na zo’n fantastisch evenement moet er natuurlijk geborreld worden. Aan het einde van de dag ging de muziek, verzorgd door een live DJ, aan in de grote hal en kon je genieten van een hapje en een drankje. Ik stond met een drankje in mijn rechterhand, een bitterbal in mijn linkerhand, collega’s om mij heen en kon mijzelf na deze dag een echte Frontmaniac noemen. Volgend jaar weer? Ik dacht het wel!

Kon jij er dit jaar niet bij zijn, maar wil je volgend jaar wel mee? Solliciteer dan op onze vacatures want als medewerker van Pancompany ga je samen met je collega’s naar Frontmania 2024! 😊

Check de aftermovie hier: