Skal du velge Flexbox eller Grid?

ForrigeUke: Velg riktig layout, vrak biblioteker som tar for mye plass, lag kunst og VR i React og skriv media queries i JavaScript.

Flexbox eller Grid? Katten spør. 📸: <a href="https://unsplash.com/@hikeshaw?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">H Shaw</a> on <a href="https://unsplash.com/s/photos/kitten?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
Flexbox eller Grid? Katten spør. 📸: H Shaw on Unsplash Vis mer

Dette var uken hvor Github ble et interiørfirma 🛁 , det ble oppdaget folk med OCD i IT-bransjen 🤖, og selv den beste kan gjøre feil ❌.

Og 12 079 ting skjedde i frontend-verdenen!

#ProgrammersDay

Forrige uke var det programmerernes dag! Den 256. dagen hvert år, så den 12. september i år var det endelig vår dag!

Grunnen til at det er akkurat tallet 256 er at det kommer fra antall distinkte verdier man får ut av en byte (2^8). Programmerernes dag, eller #ProgrammersDay på Twitter ble selvfølgelig feiret 🐦

Og ikke minst:

Grid og Flexbox

Både Grid og Flexbox er kraftige verktøy innenfor css, som gjør at vi posisjonere elementer i en komponent. Med Grid kan du legge ut multidimensjonalt, og legge til i kolonner og rader, men med Flex kan du “bare” velge en av de.

Så hva bruker man hvor? Tenker du over hva du bruker, har du en go-to av de to metodene? Det er vanskelig å komme med en fasit på dette.

«Jeg personlig er fan av flexbox på grunn av friheten og enkel syntaks.»

Ahma Shadeed har en finfin artikkel om dette, og nevner blant annet noen do’s and dont’s. For eksempel så er kanskje ikke Grid det beste man kan bruke når man lager meny/header til en side. Hva tenker du om tommelfingerregelen at flexbox bør brukes til komponenter og grid til layout? Sjekk det ut artikkelen da vel! 👈

Jeg personlig er fan av flexbox på grunn av friheten og enkel syntaks med tanke på 1fr 2fr i grid. Ja, grid-syntax blir nok mer vanlig jo mer man bruker det, og det tok lang tid før jeg klarte å huske forskjellen på align-items vs justify-content for flexbox uten å måtte slå det opp hver gang 😁. Jeg er stadig i diskusjon med en kollega om at man må sverge til Flexbox, men er jo fint å være litt sta og uenig også! 😈

Trenger du inspirasjon?

Personlig er jeg ikke noe fan av 10 biblioteker du bør ha i prosjektet ditt eller Disse 48 triksene bør du kunne som React-utvikler, men jeg er veldig for at man skal prøve ting du ikke har gjort før.

En Twitter-trend er #100DaysOfCode som går ut på at du skal skrive én time kode hver dag for å lære deg noe nytt, og samtidig få kontinuiteten av læringen hver dag. Klarer du utfordringen? Se denne listen for inspirasjon av kodeprosjekter du kan begi deg ut på da vel! 📈

Her er litt “tips og triks” i React, om det er så veldig mye nytt for deg vet jeg ikke, men kan jo gi det en sjanse!

It’s all about the space 👩🚀

Biblioteker kan ta mye plass, og er ikke alltid lett å vite om det finnes et bedre alternativ til det man bruker i prosjektet. Men det er jo alltid greit å ha i bakhodet at jo mer kode du må ta med ut i produksjon, jo lengre tid kan for eksempel lasting ta.

Derfor er det så greit når folk kommer på lure løsninger, for nemlig Lighthouse i ChromeDevTools gir deg anbefalinger dersom du har litt stor bagasje med kode som har noen gode alternativer 🏋️.

Moment blir tatt frem som den store stygge ulven her, men når det finnes mindre alternativer, hvorfor ikke bruke de? Vi på prosjekt hadde en runde med å erstatte moment med date-fns, og det var veldig verdt det!

One-time-code 🔒

Engangskoder er noe man ikke kommer utenom. Enten om det er for å sjekke skatten eller for innlogging i en sparkesykkel-app. Og jeg ble aldri så glad da jeg fikk denne engangskoden på mobilen, og med ett trykk var det ferdig utfylt på nettsiden jeg brukte!

Derfor er det jo ganske smooth å kunne implementere i egne prosjekter man bruker engangskoder!

Digger at man kan gjøre en så bra brukeropplevelse ved kun én prop i HTML! Disclaimer: aldri testa det i eget prosjekt, men hvis det er så enkelt så blir jeg rimelig fornøyd!

Hva med React og … VR?

Jeg blir stadig overrasket over hva folk får til med React, og jeg håper at VR blir en større del av utviklingen med React!

Sjekk ut den utrolig kule demoen som ble posta på Twitter! 👓

React + kunst 🎨

Apropos kule ting, hva med å bruke React til å lage kunst?

Jeg tør faktisk å påstå at hvis man lager Samus ved bruk av React så er det faktisk kunst! Og det tenker jeg er en fin oppfordring, at du ikke må ha en ide til neste Flappy Bird, eller neste Snapchat for å lage deg et hobbyprosjekt. Hva med å lage en layout som bare er sjukt fet?

Rett inn i inspirasjonsboka mi hvertfall! 📖

Du allsidige JavaScript ❤️

Javascript kan brukes til så mangt, og en webapplikasjon for bedrifter er ofte det det blir brukt til om dagen (arrester meg om jeg tar feil 🤓). Men hva med å bruke det for å lage et spill?

Jeg fant ikke noe kodebase for dette, men vi får bare tro på han at han bruker JavaScript! 👀

JavaScript Media Queries

En nettside jeg ofte må gå til for råd (ofte for flexbox), er CSS-tricks. Og forrige uke publiserte de en bra artikkel om media queries i JavaScript.

Ved å bruke matchMedia() kan du lage conditions for de brekkpunktene du vil ha, ved å bruke JavaScript og ikke CSS! I tillegg kan man også lage eventListeners på disse, for å lytte til endringer.

Jeg har aldri prøvd det, men det virker lovende! I tillegg har den ganske god browser støtte ser det ut som 👊.

Unix Timestamp

Helt til slutt vil jeg bare informere dere at vi når en milepæl neste søndag 🤓.

Det var alt for denne gangen, vi skrives en annen uke! 👩💻