CSSConf EU & JSConf EU 2019!
Skrevet av Daphne Leebeek, Halldis Søhoel, Fredrik Stenbro, Markus Rauhut, Kjetil Svalestuen, Marte Dybendal Gleditsch, Nicolai Hagen og My Thao Nguyen.
En real delmengde fra frontend-miljøet vårt dro til den aller siste CSSConf EU + JSConf EU i Berlin, og i denne artikkelen deler vi de aller beste godbitene 😋 For å sette deg skikkelig i stemningen vi hadde, anbefaler vi å ha på themesongen til konferansen i bakgrunnen mens du tråler videre:
Konferanseturen vår til Berlin 💚
Skrevet av Daphne Leebeek
Siste dagen i mai var det igjen duket for CSSConf- og JSConf EU. Den 10. på rad, og dessverre den siste på ubestemt tid. Med en rekordstor gjeng på 13 stykker satte vi oss på flyet og vendte snuten mot Berlin.
Noen kanskje mer spent enn andre, en del av oss var nemlig fra kullet som begynte i Bekk i august. De var så heldig å skulle få oppleve sin første konferanse noen gang. Konferansen leverte og skuffelsen var ikke-eksisterende!
På konferansen fikk vi mulighet til å gå på stands til kjente bedrifter. Dette var en gylden mulighet til å snakke med folk som interesserer seg og brenner for det samme som oss. I tillegg fikk man være litt barnslig igjen, der man sammen med kollegaene samlet inn klistremerker, spiste yoghurtis dagen lang, tok engangstatoveringer og sang karaoke.
Været var det heller ingenting å klage på, bortsett fra at det nesten var for varmt. Dette var dog ikke et stort problem, da vi fikk servert så mye vann og limonade som man orket. Og apropos mat og drikke, maten vi fikk gjennom dagene var utrolig god, varierende og kun vegetar. Tommel opp for det!
I ettertid sitter vi igjen med den viktigste opplevelsen; nemlig mange gode, inspirerende og lærerike foredrag. Her snakker vi om alt fra hvor ordet “HTML-tags” stammer fra, til det nyeste og ferskeste innenfor JavaScript. Noen foredragsholdere hadde til og med sneket inn litt peptalk rettet mot unge i bransjen, noe som var ekstra motiverende.
JavaScript: Who, What, Where, Why and Next av Laurie Voss
Skrevet av Fredrik Stenbro
Åpningstalken under årets JSConf ble holdt av Laurie Voss, som er Co-Founder og en av lederne i Npm Inc. Han hadde gravd frem litt statistikk fra Npms pakkeregister, samt gått igjennom spørreundersøkelser gjennomført av både Npm og stateofjs.com. Dette for å gi oss innsikt i hva som er status i dag under paraplyen “Javascript”. Mot slutten lovet han også å spå litt i tebladene om fremtidens web-utvikling.
Dette var noen av de mest interessante funnene hans:
- Javascript er det mest populære og mest brukte programmeringsspråket. Noensinne.
- ~ 99 % av Javascript-utviklere bruker npm
- 97 % av Javascript-utviklere sier de skriver kode for nettlesere
- 63 % av Javascript-utviklere bruker React
- 37 % av Npm-brukere bruker AngularJS eller Angular
- 27 % av Javascript-utviklere bruker Vue
Og så, ikke uforventet:
- 63 % av Javascript-utviklere bruker Typescript i en eller annen grad, opp fra 45% i 2018
- 36 % av Javascript-utviklere sier de bruker Typescript som hovedspråk.
Han svinger også kort innom WebAssembly. Interessen har økt kraftig det siste året, men få sier at de bruker det i produksjon ennå.
Avslutningsvis spår han at vi i fremtiden kommer til å se stadig enklere måter å bygge websider- og applikasjoner på. Han ser for seg at vi går mer i retning av å tilgjengeliggjøre webutvikling for ikke-tekniske personer igjennom ferdiglagde byggeklosser og drag-n-drop-løsninger.
The Modern PWA Cheat Sheet
Skrevet av Kjetil Svalestuen
There’s an app for that. Da Apple annonserte sin første iPhone i 2007 startet de en liten revolusjon innen mobilteknologi og -design. Men den virkelige innovasjonen kom ikke før et år senere med lanseringen av App Store, som lot eksterne utviklere lage applikasjoner for iOS og publisere dem på den sentraliserte plattformen. Vil du bestille pizza, sjekke været eller lokalisere bilen din? Du vet hva de sier.
I dag finnes det mer enn to millioner applikasjoner i Apples appbutikk. Google Play huser enda flere. Men trenger virkelig alle tjenestene våre egne applikasjoner på hver plattform? Maximiliano Firtman mener det finnes bedre alternativer.
I “The modern PWA Cheat Sheet” forklarer Firtman hvordan man lager Progressive Web Apps (PWAs), en betimelig motvekt til apphysteriet. En PWA er en nettside som kan installeres på mobilen slik at den oppfører seg omtrent som applikasjoner kompilert til mobilens operativsystem, selv uten internettdekning ved hjelp av Service workers. Slike applikasjoner passer ypperlig til tjenester som ikke trenger å bruke mobilens SDK, ikke krever spesielt høy ytelse og som kanskje ikke skal brukes så ofte.
Foredraget fokuserer spesielt på hvordan du sikrer en god brukeropplevelse når du lager en PWA versus en vanlig, mobilvennlig nettside. Det er nemlig flere finurligheter å tenke på hvis du vil utnytte potensiale i at appen ligger nærmere mobilens kjernefunksjoner. Firtman snakker blandt annet om hvordan du håndterer appens ulike livssykluser, hvordan du utnytter operativsystemets autentiserings- og delingsmuligheter, og hvordan det hele er litt vanskeligere på iPhone. Apple har nemlig veldig lite eller ingen dokumentasjon på hvordan Progressive Web Apps fungerer på iOS, og alle toppresultatene hos Google er artikler skrevet av Firtman selv.
Hvis du ønsker å gi kundene dine en god mobilopplevelse, uten å knote med XCode og Android Studio, og helst vil skjerme brukerne dine fra enda en app, men allikevel ønsker å tilby brukerne dine en pålitelig, rask og engasjerende brukeropplevelse — da er dette foredraget noe for deg:
Fremtidens pakkemanagere 📦
Skrevet av Markus Rauhut
Tenk om du aldri hadde trengt å kjøre npm install igjen! Litt utopisk, tenker du? Foredraget til Kat Marchán viste under JSConf EU at dette kan være nærmere virkeligheten enn du tror:
Den eksperimentelle pakkemanageren tink lar deg bruke pakker fra npm uten at disse faktisk installeres i node_modules. Istedenfor vil den kun inneholde én enkelt fil med hashene til alle filene i pakkene prosjektet bruker. Dette skjer i bakgrunnen og skal korte ned tiden det tar fra du f.eks. oppdaterer et prosjekt til du har det kjørende.
Franske Maël Nison, som er vedlikeholderen av Yarn, holdt forøvrig også et foredrag om den kommende versjonen av det populære npm-alternativet. Her presenterte han et tink-lignende konsept — zero-installs. Forskjellen er at hele node_modules-mappen komprimeres og lastes opp til repoet ditt. Dermed trenger man ikke kjøre yarn install lenger, samt at det skal være lettere å følge med på hvilke pakker som legges til eller fjernes til enhver tid.
Hvilken variant som kommer til å bli den nye industristandarden gjenstår derimot å se. Det er i alle fall tydelig at mye vil skje på pakkemanagerfronten framover!
Class Clash — Funksjonell css og lego
Skrevet av Halldis Søhoel
Funksjonell programmering har lenge stått på agendaen og har nå også nådd CSS verden. Alex Tait forklarte oss hvordan vi kan bygge opp CSSen vår på en funksjonell måte ved å ta i bruk det hun kaller legokloss modellen. Her skal man kalle en legokloss for en legokloss.
Legokloss-modellen
Legokloss modellen går ut på at dersom man har en legokloss med 6 tapper, da skal man kalle det for en legokloss med 6 tapper og ikke oppkalle den etter hva den skal brukes til. Hva vil dette si i praksis? I CSS betyr dette at i istedenfor å lage en CSS klasse for hver container eller hvert item du har i koden din så vil vi heller lage èn CSS-klasse per ting vi vil gjøre. Og hver klasse skal kun gjøre èn ting. Det vil si, hvis et element skal ha blå bakgrunn og liten skrift, så lager man én klasse for den blå bakgrunnen og én for å sette font-size. Videre bygger man opp CSSen ved å legge alle nødvendige klasser på html-elementet.
Fordelen med dette er at man får mindre og mer oversiktlige CSS filer og man kan lett lese hvordan et element kommer til å se ut kun ved å se på klassenavnene. Dette vil i praksis bety at man som utvikler i stor grad slipper unna å skrive CSS når man har bygget opp en god base med klasser.
Å bygge opp CSSen på denne måten har mange fordeler. Blant annet vil det gi bedre ytelse når nettsiden rendres fordi nettleseren ikke trenger å hente og analysere store mengder CSS som ikke er i bruk. I tillegg slipper man å miste oversikten i store CSS filer.
Vil ikke dette i praksis være det samme som inline styling?
Svaret er nei. Ved å bygge opp CSS på en funksjonell måte kan man ta i bruk flere teknikker som ikke er mulig med inline styling. Eksempler på det er media queries, selektorer og muligheten for å deaktivere stylesheets. I tillegg vil normale spesifisitetsregler gjelde. Funksjonell CSS er tross alt helt vanlig CSS!
Om det ikke var nok til å overbevise deg om at funksjonell CSS er bedre enn inline styling så vil kanskje dette gjøre det. Lesbarheten er langt bedre med funksjonell CSS. Motstykket til eksempelet over med inline styling ville sett slik ut.
Gjenbrukbarhet
Fordi klassene blir gjenbrukt gjennom hele løsningen så vet du at fargene og fontene du har valgt vil være de samme overalt, også hvis du bestemmer deg for å endre de i etterkant. Med andre ord, dersom du bestemmer deg for å gå for en annen nyanse av blå, så trenger du kun å endre dette i klassen du har definert for fargen blå.
Den største ulempen med funksjonell CSS er at der hvor elementene skal ha mye styling kan oppramsingen av CSS klasser i HTMLen fort ta av. Her blir det en smakssak om dette er en trade-off man er villig til å leve med.
CSS Subgrids & animasjoner
Skrevet av Marte Dybendal Gleditsch
CSS Subgrids
CSS Grid Layout har snart vært tilgjengelig i to år, og flere og flere har begynt å ta det i bruk. Men den første versjonen av CSS grid har også noen begrensninger. Selvom man kan ha nested grids i versjon 1 så er det kun direkte barn som arver strukturen og gridlinjene til foreldreelementene, og andre barn vil ikke ha noe forhold til dette eller til hverandre. Dette kan føre til rotete og unaligned design som vil gjøre vondt i en OCD-persons hjerte. Ta for eksempel en layout hvor du har flere “kort” med nogenlunde likt innhold — du har kanskje en tittel, en subtittel, et bilde, en større hovedtekst hvor antall tegn vil variere og en knapp. Til nå har det vært et lite mareritt å få høyden på containeren til hovedteksten til å følge et grid som går på tvers av alle kort. Det har vært mulig, men ikke på en pen og enkel måte. Det er nettopp dette som blir lansert i versjon 2 av CSS Grids, og som kalles Subgrids. Subgrids lar deg hekte på barnelementer på foreldregridden, slik at strukturen til barnene kan arve av og benytte seg av samme gridlinjer som foreldrene. Dette gjør det mye enklere å skape fine og ryddige layouts. Hurra for det!
Animations — Learning from Cartoons
Det blir bare mer og mer populært med CSS animasjoner for å skape en god og interaktiv brukeropplevelse i browseren. Men hvordan lager du animasjoner som fremstår “ekte” for det blotte øyet, hvordan får du en bevegelse til å føles naturlig? Martin Sonnenholzer introduserte 8 leveregler for hvordan designe gode og virkelighetsnære animasjoner inspirert av hvordan man lagde tegneserier så tidlig som 1906.
- Squash and Stretch. Bruk av squash og stretch på formen til elementer for å animere fart og sammenstøt og for å få en følelse av vekt og fleksibiliteten til elementene.
- Anticipation. Brukes for å forberede mottakeren på at en bevegelse skal til å skje.
- Staging. Ha en klar idé om hva du prøver å vise og la animasjonen underbygge dette. Animasjonen er ment for å hjelpe ikke forvirre.
- Frame-by-frame. Planlegg hvor animasjonen skal starte, hvor den skal slutte og hva som skal skje stegvis i midten.
- Follow through and overlapping action. Follow through er en teknikk som brukes for å forsterke opplevelsen av at elementer følger fysikklovene. Overlapping action betyr at løse deler fortsetter å bevege seg etter at hovedelementet har stoppet opp. Ulike deler på elementer beveger seg i ulik fart og har ulik reaksjonsevne.
- Ease in and out. En realistisk bevegelse trenger tid til å akselerere opp og bremse ned.
- Arc. Naturlige bevegelser følger ofte en buet bane. Lavere hastighet fører til mer bøyd bane og høyere hastighet fører til en flatere bane.
- Secondary animation. Implementer støtteanimasjoner for å forsterke primæranimasjonen. For eksempel at forgrunnen beveger seg raskere enn bakgrunnen, armer på et menneske, eller ansiktsuttrykk.
Inclusiveness på konferansen
Skrevet av My Thao Nguyen
Arrangørene har hatt stort fokus på å inkludere så mange som mulig, og satte i gang mange tiltak for å få til akkurat dette.
Sit — Sit/Stand
Et litt forvirrende tiltak for konferansenewbies som meg, var skilting av toaletter. I stedet for tradisjonelle toalettskilt for menn og kvinner, ble toalettene markert med “Sit” og “Sit/Stand” 🚽 Man kunne altså ta i bruk hvilket som helst toalett uavhengig av kjønn ✨👯♂️👯♀️.
Live captioning/Transcriptions
For de med vansker for å høre hva som blir sagt på talks, var det en skjerm til høyre for hver scene med live teksting 👂✨. Til tross for litt delay, opplevdes det som et snedig og kult tiltak for å legge til rette for enda flere mennesker.
Scholarships
For fjerde året på rad var det mulig for underrepresenterte i tech å søke på et Scholarship program for å få dekket konferansebillett, overnatting og reise.
I år var det hele 150 som fikk stipend, sammenlignet med fjorårets 80 stk 🥳. En tidligere stipendiat, Soeun Lee 👩💻, var så inspirert etter JSconf EU 2018, og er med på å organisere JSconf Korea for første gang i September ✨.
BIPoCiT Space
Det mest interessante tiltaket introdusert i år, var BIPoCiT Space:
BIPoCiT Space var et sted med fokus på kommunikasjon og inspirasjon for underrepresenterte i tech. I pausene ble det holdt interessante talks både under CSSConf og JSConf som f.eks. Hasan Özdemir sin «Building substratum for an inclusive tech community» med fokus på ulike tilnærminger man kunne gjøre for å legge til rette for minoriteter i tech communities. Det var utrolig kult å se hvor langt arrangørene var villig til å gå for å tilrettelegge og inkludere✨. Samtidig skulle jeg ønske at flere utenfor BIPoCiT space kunne fått med talksa selv, ettersom området var lukket for andre😌.
Et slag for skapergleden!
Skrevet av Nicolai Hagen
Det å reise på konferanse handler om mye forskjellig. Det handler om å bli bedre kjent med andre fra bransjen vår. Dele erfaringer. Kanskje kose seg litt ekstra i noen dager. Det handler også om å lære nye ting, kanskje til og med noe som andre på teamet ikke har hørt om ennå, og som man kan dele med de når man kommer tilbake. Det handler om å lære noe som man forhåpentligvis får bruk for tilbake i prosjekthverdagen.
Men det er ikke alle foredragene under konferanser som ikke helt passer inn i en av disse kategoriene. Nat Alison sitt foredrag handlet nemlig ikke om fremtiden til pakkemanagere eller funksjonell CSS eller den kommende versjonen av yarn. Den handlet om å, nørde skikkelig hardcore, og skape noe man alltid drømt om men aldri helt funnet tid til å gjøre.
Hva denne drømmen består av er høyst subjektiv, noe Nat Alison virkelig fikk frem i foredraget sitt. Hun snakket nemlig om hvordan hun laget en polyhedra-viewer. En Poly-he-what?? Nettopp. I mange, mange år har hun vært opptatt av en spesiell form for geometriske polygoner, som følger helt bestemte regler for hvordan de skapes, endres og fungerer sammen. I så mange år har hun lett etter det perfekte verktøyet for å undersøke dette, selvfølgelig svært subjektivt, vakre polygonet.
Hobbyen hennes, polygonene og deres væremåte, ble til slutt til et eget kjempehobbyprosjekt, og er mildt sagt ganske så imponerende. Ta en titt selv, og klikk deg rundt på ulike polyhedras her:
Noen ganger er det ikke like viktig å få maksimalt faglig utbytte av alle talks. Noen ganger gjør det så godt å bare få litt inspirasjon og virkelig kjenne på engasjementet og gleden som andre viser gjennom å fortelle om ting de har skapt helt selv.
Hun fikk oss hvertfall til å huske på hvor heldige vi er som får skape noe i hverdagen vår, og ga oss ekstra lyst til å lage noe skikkelig rått!
Nat Alison med “Polyhedra, I Choose You! Letting Your Passions Take Form”:
Takk for oss, Berlin! ❤️
Har du lyst til å se resten av foredragene, ta en titt på: https://2019.jsconf.eu/videos
Hvem var det som holdt talks, egentlig?https://2019.jsconf.eu/speakers
