Dette var uken for høye dyr på stylter🦒, en mann med dårlig forhold til måker 🐦, og en reality check for oss andre 🐒.
Og 3229 ting skjedde i frontend-verdenen!
Cascade layers, container queries og nye fargesystemer: - Skjer mye spennende med CSS!
Frontend-testing til nye høyder?
Har du noensinne revet deg i håret, skreket febrilsk ut i luften og slengt laptopen i veggen i frustrasjon ved komponent-testing? 😵 Frykt ikke lenger! Playwright, test- og automatiseringsrammeverket til Microsoft, søker å gi deg sjelefred og gjøre komponent-testing til en lek (pun intended). I siste versjon er det lansert en eksperimentell funksjon som gjør at man kan teste React-, Vue- og Svelte-komponenter! Det er verdt å legge til at selv om dette er et rammeverk av Microsoft, blir du ikke låst til produktene deres av den grunn; den støtter nemlig de fleste moderne nettlesere og fungerer på tvers av plattformer.
Andre testverktøy kjører gjerne tester enten isolert i Node.js, eller lettvektsversjoner av komponenter i nettleseren. Problemet med kjøring utelukkende i Node.js er at man ikke får tilgang til den faktiske CSSen eller layouten. Interaksjonen som gjøres med komponentene, som for eksempel museklikk, er også simulerte. For lettvektsversjoner i nettleseren er problemet at man ikke får backingen av Node.js. Playwright forsøker å kombinere det beste fra to verdener ved å putte testkjøreren i Node.js og samtidig vise komponentene i nettleseren 🙌
Med Playwright kan du debugge testene dine linje for linje, og se hvordan hvert steg utføres i nettleseren. Ved å klikke på komponentene i testene i editoren din, vil komponentene også markeres i nettleservinduet. Kult!🤩 I tillegg kan man, som seg hør og bør ved komponent-testing, skrive tester for interaksjoner. Dette kan være utfylling av tekstbokser, klikking eller tabbing mellom elementer. Det er altså mye snacks her som er verdt å sjekke ut🍿
Les mer om hvordan du kan sette opp testing i dokumentasjonen, eller se en introduksjon til temaet som teamet bak har snekret sammen! 🎦
Første release fra Mithril.js på tre år
Tiden flyr, og hurra meg rundt hvor mange nye versjoner av ulike biblioteker som blir lansert. De siste tre årene har det blitt sluppet 14 versjoner av React og 50+versjoner av Vue.js. 🚀 Et annet Javascript-bibliotek som ikke har hatt like høy releasefrekvens er Mithril.js; i forrige uke ble nemlig første release på tre år lansert. Mithril.js er et rammeverk for å bygge ensideapplikasjoner som er lynraske og brukes av selskaper som Vimeo og Nike.
Endatil er nedlastingsstørrelsen på biblioteket under 10 kilobyte. Tre år kan virke som en evighet i frontend-verdenen, men i følge utviklerne av rammeverket sier dette noe om hvor fornøyde brukerne er med hvor idiomatisk biblioteket er skrevet. Hvis du er nysgjerrig på å lære mer om Mithril.js, sjekk ut tutorialen i lenken for hvordan man kan bygge en enkel ensideapplikasjon.
Denne HTML-nyheten skal gjøre det enklere å finne innholdet ditt
Pixler or rem, that is the question
Det evige spørsmålet: piksler eller rem — hvilken var det jeg burde bruke nå igjen? 😦😵💫 Og hvordan var det hvis jeg skal ta hensyn til universell utforming i tillegg?😬 Frontend-design byr på mange utfordringer, og det er mange hensyn å ta. Josh Comeau, en gjenganger i ForrigeUke, ønsker å gjøre oss klokere med en grundig gjennomgang av temaet.
Uten å røpe for mye av konklusjonen, kan jeg si så mye som at man trenger både piksler og ems/rems for en løsning som tar hensyn til universell utforming. Sjekk ut artikkelen i lenken for å finne ut når du bør bruke de ulike variantene.
Sverre falt av lasset og ble redd for frontend. Så prøvde han Vue.js
A walk down memory lane…
Selv om det i denne bloggen fokuseres mye på å titte fremover, er det av og til sunt og ta en pust i bakken og titte bakover. ⏸ Det store, og nesten endeløse World Wide Web har vært under en rivende utvikling i flere tiår, og vi har gått fra enkle nettsider til store og komplekse web-applikasjoner.
Robin Wieruch publiserte denne uken en interessant artikkel som omhandler nettopp denne evolusjonen, men som også tar arkitekturen som ligger bak i nærmere ettersyn. Hvis du allerede kan litt om HTML, CSS og JavaScript, men gjerne skulle likt å vite hva REST/GraphQL, Enkeltside-applikasjoner, multiside-applikasjoner, lazy loading, tree shaking, statisk side-generering, BaaS, PaaS og IaaS er, ta en titt på denne artikkelen da vel 👈
Takk for denne gang, og fred ut ☮️ Håper å se deg igjen neste uke! 🖖
