Dette var uken for moderne nettsider 🕸, haisikkerhet 🦈, og et lite flexbox cheat-sheet.
Og masse nytt skjedde i frontend-verdenen!
Optimalisering av nettsider — mål og fiks 💪
I forrige uke skrev utviklerne i gov.uk om hvordan fjerningen av jQuery har påvirket hastigheten på nettsidene sine.
Dette er en slags del to av et tidligere blogginnlegg, som dreide seg om hvorfor og hvordan de valgte å fjerne jQuery fra sidene.
jQuery-scriptet på 32 kb var ikke så stort i seg selv, men det ble lastet inn på hver eneste side, og blokkerer rendering av siden. Ved å plukke vekk jQuery kunne de redusere tiden det tok før første render — kanskje spesielt for brukere med dårlig internett-tilkobling eller trege enheter.
Den kanskje aller mest interessante take-awayen fra artikkelen, er at de kjører automatiske tester for å sjekke web vitals hver dag på nettsidene, med simulerte enheter og ulike tilkoblingshastigheter. Fordi de gjør dette hver dag, kan de monitorere hvordan endringer som skjer på nettsidene påvirker hastigheten for brukerne sine!
Det er musikk i mine ører. 👂 🎵
- jQuery er som sex i offentligheten!
Nydelige bildekollasjer med CSS? 😍
Det er sjeldent jeg leser en artikkel med CSS-tips og blir skikkelig inspirert, men det ble jeg i forrige uke!
CSS-tricks disket opp med en ny artikkel om hvordan man kan lage en slags kollasje av bilder med custom former, og mange eksempler på dette. Det er så pent!
Trikset (hehe) er bare litt god bruk av CSS grids, transform/translate og clip-paths, og voila! Ta en titt da vel! (P.S. I skrivende stund har del to også blitt lagt ut.)
Hvordan fungerer egentlig re-renders i React?
I React oppdaterer ikke vi DOM-en direkte, men vi beskriver hvordan vi ønsker at DOM-en skal se ut, også håndterer React oppdateringen for oss.
Dette er jo en massiv forenkling, men det fører også til mye forvirring rundt hvordan re-renders egentlig fungerer i React.
Hvis dette er noe du kjenner du ikke er helt stødig på, eller kanskje du bare klør deg i hodet over hvorfor komponenten din rendres på nytt (eller ikke), så vil jeg anbefale å ta en titt på Josh Comeaus nye blogginnlegg.
Der tar han for seg vanlige feilslutninger, og går gjennom hvordan dette egentlig henger sammen på en fin og pedagogisk måte.
Petter lagde Norges 4. største musikkapp på én uke: - Viktig å naile den ene funksjonen
JavaScript-motoren i et lite scroll-eventyr 🖱
I forrige uke kom undertegnede over et lite hobbyprosjekt, som forklarer hvordan JavaScript-motoren fungerer, ved at du scroller deg gjennom og får forklaringer og illustrasjoner.
Det var jo både pedagogisk og pent, og på desktop får du fire scenarioer å velge blant! Herlig skaperglede! ⭐️
Og med det var denne ukens <ForrigeUke /> over, takk for meg, også sees vi neste uke! 👋
