Dette var uken for regelbrudd🙅, lure bilister🚗 og den mest usette forsiden på internett. 🕸
Og 235711 ting skjedde i frontend-verdenen!
Neste generasjons Tailwind CSS 🎨
Tailwind har alltid hatt tatt liten plass i prod ved at de “purger” vekk all ubrukt styling og filene har typisk ikke vært større enn ~5–10KB.
Men i development mode har de lenge slitt med store genererte filer som fort blir på >10MB når man legger til mye config, noe som pusher grensene til hva browser tåler.
De har nå lansert en eksperimentell versjon kalt “Just-In-Time” som gjør CSS-en on-demand i stedet for up-front. Planen er at denne versjonen skal være default i Tailwind v3.0. Som nevnt i tweeten nedenfor er dette store nyheter!
🚀 Excited to share the biggest advancement we've made with Tailwind CSS since the first release back in 2017!
— Adam Wathan (@adamwathan) March 15, 2021
⚡️ A lightning fast JIT compiler
🧁 Never configure variants again
🤸 Write less custom CSS than ever
Watch the announcement 👉https://t.co/VWuTNZRnxj pic.twitter.com/tnPMJJ9qJe
Her er lanseringsvideoen som demonstrerer hvordan det hele funker:
ECMAScript 2021 features 💡
Hvert år kommer det en ny ES-versjon med nye features som skal gjøre JavaScript-utvikling enklere.
Og 2021 er intet unntak.
Det kan være vanskelig å få med seg fra gang til gang hva som er nytt og for 2021-versjonen har Towards Dev snekret sammen en liste over alle nye features (inkl. eksempler) som er foreslått for lanseringen i juni.
«Listen med fordeler er lang og utvikleropplevelse er virkelig satt i sentrum.»
Relay med hooks 🎣
Ny major av Relay (versjon 11) er lansert.
Og det er ingen liten greie, for nå kommer det nemlig med et sett nye APIer for GraphQL-fetching med React Hooks!
Listen med fordeler er lang og utvikleropplevelse er virkelig satt i sentrum.
🚀Major Announcement🚀
— Facebook Open Source (@fbOpenSource) March 9, 2021
Introducing Relay Hooks: Improved React APIs for Relay!
The Relay team has worked on a new set of APIs called Relay Hooks, with the future of @reactjs in mind. These changes emphasize DevX and performance.
Learn more on our blog: https://t.co/O0PmrN8Caq
Clean Code i React 🧼
Ren kode skal være lett å lese, lett å forstå og ryddig. Det er en kunst å få til, men trenger ikke være vanskelig.
Her har Tyler samlet et knippe gode tips til ren og god kode med eksempler på hvordan det gjøres og hvordan det ikke gjøres.
Kanskje er du en racer i ren kode fra før, eller ikke. Uansett er det verdt en titt!
useEncapsulation — kun custom hooks i React-komponenter? 🔥🤔
En brannfakkel fra Kyle som mener all hooks-bruk skal innkapsuleres i custom hooks som igjen kan brukes i komponenter.
Hans rasjonale for denne meningen er at komponenter fort blir uoversiktlige når state- og effekt-hooks blir slengt rundt og mister sammenheng med f.eks. event handlers og den slags.
useEncapsulation, or "Why Your #React Components Should Only Use Custom Hooks". Controversial point (never use useState or useEffect directly in a component), but the result components do look more maintainable. https://t.co/77mY8GYcBR pic.twitter.com/NGbwYg7DDY
— François Zaninotto (@francoisz) March 16, 2021
Har han et poeng? Les og døm selv!
Framer Motion 4
Til slutt en major-oppdatering fra Framer Motion som er all about bundle size og lazy loading! Sjekk ut denne twitter-tråden for mer info 👇
🚀 Introducing Framer Motion 4!
— Matt Perry (@mattgperry) March 18, 2021
The new LazyMotion component can help 🗜 crank your first-render bundle as low as 4.86kb. Lazy load animation and gesture functionality after first mount.
Guide: https://t.co/q0ZQ21rkVg
👇 1/4 pic.twitter.com/G8bc76c1jT
Det var det forrige uke hadde å by på! Ses neste uke 👋
Jeg bruker en JSON-fil som CMS, og er nesten ikke flau over det
Kanskje vi skal lære noe av alle memene, og slutte å gjøre alt så komplisert?