Frontend

Moderne nettlesere har fått veldig gode verktøy for å måle ytelse. I denne artikkelen ser vi på hvordan vi kan bruke Server Timing for å få mer innsikt i hvordan serveren vår oppfører seg.

Alle elsker emojier 👻

Alle elsker video 🎥

Her får du begge deler, på en gang 🤯

Lær hvordan du kan kombinere webcam-APIet i nettleseren med emojier på en kreativ måte.

Hvordan gjør du et bilde om til ASCII med webteknologi?

En forutsetning for å treffe med softwaredesign er at vi har god kontroll på domenet vi opererer i. Men hva er egentlig domenet til frontendkoden din?

Når man lager frontend applikasjoner er det fint om man unngår duplisering av sentrale elementer i designet. Her går vi gjennom noen forskjellige alternativer man kan bruke for å organisere CSS og komponenter.

En liten historie om hvordan en ny feature i et open source-bibliotek ble nedskalert og samtidig mer nyttig.

Ofte så lager vi løsninger med en fast visuell struktur. Du har for eksempel en header med en meny, en sidespesifikk kropp og en footer. Hva gjør vi hvis noen sider trenger en annen struktur?

I jula som var satt jeg og nerdet litt innimellom all julekosen. Jeg prøvde å finne et lite bibliotek for enkel håndtering av websockets i en nettleserapplikasjon. Nå følger det jo med en standard WebSocket implementasjon i alle nettlesere, men jeg ville også at den skulle ha støtte for automatisk gjenoppkobling og pulskontroll mot server. Etter å ha søkt litt på npm som seg hør og bør, fant jeg ikke noen som helt fristet å dra inn. Kanskje jeg skal lage et lite bibliotek selv da? Hva om jeg implementer det ved å basere meg på en Finite State Machine i bunn? Det hadde vært digg om biblioteket hadde en funksjonell kjerne og at sideeffekter håndteres separat. Her er det bare å brette opp armene å se hva vi kan få til.

Det er 2020, og nettleseren har fortsatt ikke UITableView. Det er ikke fordi de som lager nettlesere er inkompetente, men fordi WC3-spesifikasjonene gjør det umulig å lage kjappe implementasjoner av GUI-rendring på web.

Derfor lever vi med at Slack bruker 2gb minne for å vise et lite knippe tekstlinjer. (Desktop-appen til Slack er et webview.)

Men vi har to store unntak: både Google Docs og Visual Studio Code klarer å rendre enorme dokumenter på null komma svisj, med lav minnebruk og greier. Hvordan klarer de det?

I forbindelse med bloggposten om en enkel frontendarkitektur som funker, spurte Ove: “Hvis du har en tekstboks og en knapp, hvem har ansvaret for å ta verdien fra tekstboksen og sende den til eventbussen når man trykker på knappen?” Det er et betimelig spørsmål med noen interessante detaljer.

Du har en Single Page Application (SPA). Brukerne har typisk appen åpen i nettleseren lenge - mange dager, eller til og med uker. Samtidig sitter du og dytter ut nye versjoner opptil flere ganger om dagen. Hvordan i alle dager skal du sørge for at folk ikke blir sittende på en gammel frontend som kanskje har bugs du allerede har fiksa, eller bruker en utdatert API-klient? Vel, her får du ett forslag.

CSS slutter aldri å overraske. Noen ganger ramler man over noe som man i utgangspunktet ikke ser nytteverdien av, men som kombinert med litt kreativitet produserer et interessant resultat.

Det er mange store stilaser å velge blant for din frontendarkitektur, men trenger du all leamikken? Her er en enkel arkitektur som jeg har hatt mye glede av.

I 2018 fikk jeg sjansen til å jobbe i et spillprosjekt. Da ble det etterhvert mange og sammensatte animasjoner som bød på flere spennende utfordringer. I dette innlegget skriver jeg litt om hvordan vi løste CSS in JS for ClojureScript og hvordan vi brukte det til animasjoner.

Snart er det JavaZone, og da blir det kosetime med Christian og meg. Vi skal lage et nytt zombiespill - denne gangen med terninger.

Terningspill er langt morsommere hvis man kan se terningene rulle, så jeg brettet opp ermene (ikke armene) og skrev litt CSS i forberedelse til presentasjonen. Her er det jeg lærte om å kaste terninger med CSS.

CSS grids har endelig gitt oss en enkel og fleksibel modell for layout på nett. Med bare noen få properties kan du stort sett pakke float helt bort, få full kontroll over kilde-rekkefølge og et kraftig verktøy for responsiv design på kjøpet.

Putt tilstand i ClojureScript-appen din i en DataScript-database for å få kontroll på tilstanden på framsiden.