Flex med bokser

Flex med bokser: Magnus Dæhlen from JavaZone on Vimeo.

Hva er Flexbox?

Flexbox, eller “CSS3 Flexible box layout”, er en CSS layout som gjør det enklere å implementere dynamiske nettsider. Flexbox har vært under utvikling over flere år, men det var først i fjor det fikk stor oppmerksomhet. Mye av dette skyldes at Flexbox ble den valgte layouten for React Native.

Med dagens antall mobile enheter begynte arbeidsmengden å bli tyngre og tyngre for CSS-en til hver enkelts nettside. I dag finnes det utallige forskjellige enheter med forskjellige skjermstørrelser. I tillegg kommer mange av disse med muligheten til å vise innhold både vertikalt og horisontalt. Tidligere brukte man media queries i CSS til å løse problematikk rundt struktur for forskjellige enheter. Med dagens antall enheter blir dette uhåndterbart. Flexbox kom som et svar på at ikke var noe klar måte å strukturere dynamisk og responsive nettsider. Dette ble også et stort problem med nettsider der man har et ukjent antall elementer som kommer inn i DOM-en, som nesten alle webapplikasjoner har i dag.

Per dags dato er Flexbox fortsatt en såkalt Candidate Recommendation, men det er bare et spørsmål om tid før det er en W3C-standard. Alle dagens nettlesere har full Flexbox-støtte (med mindre en regner eldre versjoner av IE som en nettleser).

Hvorfor bruke Flexbox?

Å strukturere en nettsiden som inneholder et ukjent antall elementer kan være utfordrende. Mye kan løses med mange av dagens gridløsninger, som for eksempel Bootstrap sin, men det krever ofte mer CSS og mye kunnskap om hvordan CSS oppfører seg. Flexbox krever lite CSS for å gjøre operasjoner som før var vanskelige. Å sentrere alle elementene i en div kan nå gjøres med bare to linjer CSS:

display: flex;
justify-content: center;

Men Flexbox er ikke en silver bullet. For eksempel vil jeg ikke anbefale å utelukkende bruke Flexbox som layout. Det vil være flere steder der antall elementer er kjent og dermed ikke trenger noe dynamisk layout. Da vil det være fornuftig å skrive sin egen CSS for rammene eller bruke et tredjeparts grid-rammeverk. Du kan tenke deg at et grid er rammen til et bilde, mens alt inne i bildet er Flexbox.

Sist vil jeg påpeke at Flexbox gjør layout-bygging morsomt. Det er enkelt å flytte elementene i en div uten å måtte slåss med bredder, wrapping og andre utfordringer.

Flexbox 101

Så litt mer teknisk hva det faktisk er. Flexbox kan deles i to, ett sett med container-sentrerte kommandoer og ett sett med item-sentrerte kommandoer.

ci

Det første man må lære seg er det “the magic word”, display: flex . Det definerer at containeren din skal få layouten Flexbox.

.my-container {
display: flex;
}

Neste steg er å lære seg at når man bruker Flexbox så snakker man om en hovedakse og en crossakse. Hovedaksen er aksen du vil fokusere elementene rundt. Dette kan være x- eller y-aksen etter hva du definerer. Crossaksen vil være den motsatte aksen av den du definerer som hovedaksen.

Så hvordan gjør man det? Det gjøres slik flex-direction: row/column . Row er x-aksen og column er y-aksen. Én kan også reversere dem ved å legge på -reverse etter. Man kan også definere om elementene skal wrappe når de blir for store for boksen eller krympe slik at de passer. Det gjøres med flex-wrap. Under er et eksempel med flex-direction og flex-row pluss attributtet flex-flow som er 2 i 1.

.my-container {
flex-direction: row;
flex-wrap: wrap;
//COMBO!
flex-flow: row wrap;
}

Den kanskje viktigste tingen å lære seg er attributtet justify-content. Den sørger for å holde styr på hvordan elementene dine legger seg på hovedaksen. Se eksempel i paragrafen om hvorfor Flexbox.

just

justify-content

Det siste attributtet vi viser er align-items. Det er rett og slett det motsatte av justify-content. Det bestemmer hvordan elementene legger seg på cross-aksen. Altså den motsatte aksen av justify-content.align.png

For eksempel om din cross-akse er satt til Y og man har en satt høyde så kan man definere hvordan elementene skal legge seg i høyden.

.my-container {
justify-content: space-between;
align-items: center;
}

Tilslutt

Flexbox er her for å bli. Dermed vil vi sterkt anbefale å lære litt av hvordan det fungerer, enten jobber daglig med CSS og HTML eller bare litt. Det er også enkelt å starte med og enkelt å se endringene man ønsker.

W3C jobber også med en standard for et grid, “CSS Grid Layout”, som kanskje vil ta over for alle tredjeparts gridløsninger som finnes i dag.  Vi gleder oss allerede til å bygge dynamiske nettsider med både Grid og Flexbox. 

Noen tips til hvor man kan starte å leke med Flexbox:

CSS Tricks har en veldig god tutorial på sin nettside, CSS Tricks
Flexbox Froggy er et spill som går utpå å plassere froskene på sine respektive blader med Flexbox. Det gjør læring spesielt morsom. flexboxfroggy.com

Gogo start flexing!

Eksterne lenker:

 

The Product Landing

They say the hardest thing about flying is landing. That made me think about the language we use in product development, in particular the product launch metaphor. Can a term like that in itself drive us to do things we don’t want to do?

Space shuttle launch

There flies your better judgement

To recap, a Product Launch is supposed to encompass a number of coordinated efforts, including things like:

  • Optimising the technology for heavy loads
  • Going big on marketing
  • Omnipresence in press and social media, roadshows, exhibitions, etc
  • Community building, content curation, customer service
  • (and much more)

Ideally, we are well prepared before the product launch. We may have iterated under the radar with “early adopter” customers, but now it’s finally time to create a big bang and become as instantaneously successful as Pokemon Go, with its more than 10 million downloads within the first week of release. Awesome!

Pokemon Go

Who needs to iterate when we can Pokemon Go for it

It doesn’t have to be this way. In fact, most experienced entrepreneurs would do anything to avoid it. Aiming for a product launch is a beginners mistake, but in the world of entrepreneurship there are a lot of beginners. Why has the all or nothing approach to product release become an ideal so strong that we continue doing it, or pretend to be doing it, despite overwhelming experiences telling us to work differently?

Continue reading

bryggemontasje

Lean Summer 2016: Brygging

Iterates sommerstudenter har som tradisjon å brygge et eget øl i løpet av sommeren. Vi som er her i år skal selvsagt holde denne tradisjonen i hevd.

20160712_163834

Fordums sommerstudentøl. Står vanligvis til utstilling i kontorene.

Ølbryggingsfagene ved NTNU er dessverre ikke åpne for andre enn biologistudenter, og på UiO brygges det meg bekjent kun på hobbybasis. Altså møtte vi ikke med samme selvtillit til bryggingen som når det skal programmeres. Heldigvis er det noen erfarne bryggere blant de fast ansatte, og vi fikk hjelp av to av dem: Susanne og Karine.

Her får du lese mer om hvordan det gikk (og ikke minst hva vi endte opp med til slutt).

Continue reading

2016-06-20 13.50.18

Lean Summer 2016: De to første dagene

erik

Slik ser jeg ut.

Hello, World! Jeg heter Eirik og er en av studentene som jobber hos Iterate sommeren 2016. Iterate er et konsulentselskap med rundt førti ansatte, og vi er syv studenter som skal jobbe her i sommer. Vi er seks IT-studenter, der fem er fra NTNU og én er fra UiO, og én grafisk-design-student fra Westerdals.

I går var første dag på jobb. Iterates kontorer ligger ikke så langt fra Karl Johan. Men på tross av god beliggenhet og nøye planlegging av reisen, hadde jeg bare et par minutters margin da jeg kom inn døra den første dagen. (Programmerer-lærdom én: Estimering er ingen enkel sport.)

alle.jpg

… og slik ser resten av oss ut. Fra øverst til venstre: Julia, Anders, Andreas, Ingrid, Hogne og Thor Håkon.

Continue reading

7 deep skills for entrepreneurs

Einstein playing violin

You’d be surprised how much The Martian and Einstein have in common. Except from the fate of Einstein’s brain, which was stolen from his body after he died (it’s a bit macabre, I know). Still preserved, the brain surfaced decades later in a hospital lab, and a brain specialist was asked to analyse it, not knowing who it had belonged to. He was able to deduct two things about the person: 1. He had played the violin. 2. He had an extraordinary capacity for processing terrain and other three-dimensional space. Both turned out to be true: Einstein did play the violin, and his theory of relativity is largely based on multi-dimensional thinking.

Brain plasticity is fascinating. Our brain physically changes based on what we do. Einstein played the violin to relax, and it helped him solve fundamental puzzles of physics. It sounds impressive, but instead of seeing it as two distinct accomplishments (how could he have time to learn the violin?), you should see it as synergy between seemingly disparate activities.

An astronaut doesn’t tell Houston “you have problem”:

Continue reading

Hvordan få til endring – del 2

For noen år siden skulle vi endre måten vi jobbet på i en avdelning i et stort IT-selskap hvor jeg jobbet. Vi var allerede ganske smidige, og mye var riktig, men vi hadde likevel en vei å gå for å nå målet vårt med å kunne release software hver dag.

  • vi hadde en syklus på ca 6-9 mnd
  • vi hadde mange tester, men mye ble også testet manuelt
  • en del av testene som kjørte automatisk feilet – tilsynelatende tilfeldig
  • vi hadde mange kjente bugs
  • det var til tider dårlig kommunikasjon mellom medlemmer av teamet – selv om de alle jobbet i samme kodebase.

Det var altså mye å ta tak i – og vi så raskt at vi kunne ikke ta alt samtidig.

Som prosjektleder var jeg fristet til å si TA DERE SAMMEN! Vi må bedre kodekvaliteten, folkens! Jeg kunne til og med laget vakre slides. Men både jeg og resten av ledergruppen var sikre på at det ikke ville være til hjelp. Vi hadde lært om Mary Poppendieck sitt system 1 og system 2, så vi visste at vi måtte gå en annen vei.

Noen år senere kom jeg over en bok av Chip og Dan Heath. Den illustrerte Marys system 1 og system 2 svært godt ved å forestille seg en elefant (system 1) og en rytter (system 2) som skal styre elefanten. I tillegg presenterer boken tre overraskelser når det kommer til endring. Jeg har tidligere postet ett innlegg om denne boken, hvor jeg avslører første overraskelse (https://blog.iterate.no/2016/01/16/hvordan-fa-til-endring-del-1/). I dette innlegget vil jeg presentere de to siste overraskelsene – og forklare hva vi gjorde i situasjonen beskrevet innledningsvis.

Continue reading