ColdFront-konferencen, der startede sidste år, havde i år inviteret en række højtprofilerede frontendere fra det internationale frontend-community. På talerlisten var bl.a. redaktøren og stifteren af Smashing Magazines, en ekspert fra CSS Working Group og en af udviklerne på Sparta-projektet, i dag bedre kendt som Microsoft Edge. Der blev talt om alt fra HTML5 og CSS3/4 til internethastighed og etiske problemstillinger ved brug af internettet.
ColdFront blev i år afholdt på Grand Teatret i en hyggelig sidegade til Strøget. På billetterne stod der ”All Inclusive”, hvilket betød, at første stop var optankning af kaffe og croissanter. Det var dog hverken stedet eller forplejningen, der trak de 300 deltagere til, men derimod den velkomponerede liste af talere. De er alle kendt fra sociale medier, har sammenlagt over én million følgere på twitter, og de var alle håndplukket til at dele deres viden på ColdFront. Kort sagt: forventningerne var høje.
Klokken 9.00 havde alle sat sig til rette i den store sal i Grand Teatret. Kenneth Auchenberg og Daniel Frost, stifterne af ColdFront, bød velkommen, og Kenneth forklarede i en kort intro, at ColdFront er skabt for at udvide det eksisterende frontend-community i Danmark. Samtidig er målet at inspirere deltagerne gennem eksklusive oplæg fra håndplukkede talere - af samme grund var der ikke wifi i salen.
”Lean back, relax, and enjoy good content!”
Hver taler fik 45 minutters taletid – hvilket viste sig at være en perfekt længde. Der var tid til at komme nærmere ind på det enkelte emne, og nysgerrigheden blev vakt nok til, at man fik lyst til at gå hjem og researche videre på egen hånd. Det var meget forskelligt, hvor konkrete de enkelte talere var, og den store variation sikrede deltagernes opmærksomhed på trods af afdæmpet belysning og bløde biografsæder.
Deltagerne blev præsenteret for en bred palette af ny viden. Bl.a. fik vi lov at snuse lidt til CSS4, og Vitaly Friedman leverede en aha-oplevelse i forhold til, hvordan man også kan servere og udfylde en webformular: det behøver ikke at være kedeligt.
Konferencen var ikke kun en fornøjelse for de videbegærlige, der var også gjort meget ud af forplejningen. I år havde ColdFront nemlig allieret sig med Copenhagen Street Food, som serverede alt fra gourmet-rugbrødsmadder til økologiske hotdogs.
Den røde tråd
På trods af de meget forskellige emner, som talerne tog op, gik man ud af salen sidst på dagen med et indtryk af en klar rød tråd i konferencen. Der blev givet meget stof til eftertanke og spændende alternativer til arbejdsgange, som deltagerne kan gøre brug af i deres kommende projekter.
Helt i konferencens ånd pegede flere af talerne på online-communities og opfordrede deltagerne til at gøre brug af dem. Lea Verou, fra CSS Working Group, præsenterede en enkel løsning på et cirkeldiagram skrevet med en linje CSS. Problemet er, at ingen browsere kan eller vil støtte koden på grund af manglende efterspørgsel fra de enkelte communities.
Lea var ikke den eneste, der pegede på brugen af community for at få hjælp – vi så flere eksempler på, hvad der sker, når man f.eks. finder på et hack til at lave en simpel work-around-løsning, lægger den ud på et forum og ser hvad ’kollgerne’ vender tilbage med efter at havde leget med koden.
Alt i alt var ColdFront 2015 en stor succes. Som Morten, en app-udvikler, udtalte i frokostpausen:
”Det er svært at finde en decideret konference eller workshop der er spændende, men det er ColdFront.”
Hvis du ikke selv var så heldig at være til stede under konferencen, kan du læse mere om de enkelte indlæg herunder:
Vitali Friedman
- Responsive web design
Nogle ser designprocessen som en meget rodet proces, hvor man kører i ring. Men som Vitali Friedman forklarer, kan processen ses som et træ: nogle forgreninger har døde ender – det var forsøg, som ikke virkede. Andre forgreninger løber sammen – det er to løsninger, der støtter hinanden for at skabe en effekt.
Design patterns for responsitivt UI-design kan lære os, hvilke løsninger der virker, og hvilke der er døde ender, hvormed vi hurtigere kan opnå et godt design. Og design patterns kom der en solid strøm af; fra design af webformularer, der er lækre at udfylde, til ting der giver problemer på mobile – såsom billeder, der åbnes i en dialog hvor billedet vises mindre, end det blev brugt på websitet. Fra meget generelle udfordringer til hvordan han fandt løsninger på helt unikke problemstillinger.
Vitali opfordrede deltagerne til at studere standard responsive løsninger og til ikke at forsøge at genopfinde hjulet.
Alex Feyerke
- Offline first
Det er på mode at fremstille perfekte fremtidsvisioner i reklamefilm, hvor alle dyrker ekstremsport, og ingen har problemer med netværksforbindelser. Men virkeligheden er en anden, og i gamle reklamer var man ikke bange for at vise, hvor let fejl håndteres, og hvordan ny teknologi blev brugt af almindelige mennesker. Folk vil ikke have det perfekte, de ønsker fleksibilitet.
Vores målgruppe er ikke udviklere. Vi skal bygge til virkelige mennesker med dårligt internet. ”Offline” er ikke en fejl, det er virkeligheden, når brugeren står i en elevator, kører i metro osv. Brugere forventer, at de ting de lige har set på stadig er tilgængelige, når de går tilbage til en side eller app. De forventer, at deres egne data altid er tilgængelige for dem og ikke, at de sidder fast i skyen.
Hvordan det kan løses blev demonstreret med hood.ie – et JavaScript API, der læser/gemmer data lokalt, og synkroniserer til internettet, når det er tilgængeligt. Dermed er det lavet til ”offline first”.
Men for at skabe tillid til data, skal man i UI’en også klart vise, om man ser synkroniserede data, eller data, der mangler at blive synkroniseret.
Feross Aboukhadijeh
- Web Apps of the Future
I kampen mellem native apps og web-apps, hvad kræves der for at web vinder?
Styrken i web er, at det ikke kræver installation, og at man frit kan linke til indhold. Men det er samtidig muligt at lave apps, der gemmes lokalt i browseren, så de er tilgængelige offline som en app.
Feross er stærk fortaler for at tænke decentralt og i peer-to-peer løsninger uden en central server, mellemmand eller bindeled, og det er i dag muligt. Han demonstrerede en sådan web-app, hvor du som bruger frit kan vælge en ældre udgave eller et ældre design, og ingen tvinger dig til at opdatere til en nyere version, samt peer-to-peer offline authentication med Keyboot.
Patrick Hamann
- Embracing the network
Vi har ingen kontrol over, hvad der lige nu er tilgængeligt på nettet, og den virkelighed bør vi lære at omfavne. Det er ikke bare et spørgsmål om internet eller ej, men visse services kan være nede, og vi bør være klar over, om vores websites overlever det.
For eksempel var der en dag, hvor doubleclick-annoncenetværket var nede, og rigtig mange nyhedssites viste derfor brugerne en tom skærm, mens browseren ventede uendeligt på JavaScript, der aldrig kom. Men det kan undgås. Financial Times’ website var ikke nede den dag, og der findes værktøjer såsom http://requestmap.webperf.tools til at opdage afhængigheder, ligesom der er værktøjer til at simulere høj latency, langsomme forbindelser og hele domæner/services, der ikke svarer.
Netflix står for det ekstreme i at lære udviklere at håndtere netværksfejl pænt: de har en ”Chaos Monkey”, som tilfældigt hiver produktionssystemer ned, og alle programmer forventes at kunne håndtere det så godt, at brugerne aldrig opdager det.
Derpå blev mange af de nye teknologier gennemgået, som kan hjælpe med at sikre os mod fejl og forbedre hastigheden og oplevelsen af nettet – bl.a. en ”service worker” til at holde styr på cache, ignorere domæner, der midlertidigt ikke svarer og give hurtige fallback-strategier frem for at vente på browser-timeouts.
David Rousset
- Microsoft Edge
Den gamle Internet Explorer (IE)har i hver ny version haft mulighed for at emulere tidligere versioner, men det gjorde, at IE11 var nået op på otte interne browsere, der alle skulle vedligeholdes og dermed blev tunge at videreudvikle.
Microsoft Edge starter på en frisk. Der er ikke længere kompatibilitets-modes, men kun den nyeste standard af HTML og CSS, så Microsoft langt lettere kan følge med og implementere nye ting i Edge.
Rigtig mange websites ser dog stadig på browserens ”UserAgent”-navn for at afgøre, hvilket indhold, de sender, og de er ikke blevet opdateret til de nye IE-versioner, der kan vise standard-HTML. Derfor gør Microsoft nu det samme som Chrome og Safari m.fl. gør i deres UserAgent: Edge kalder sig selv for samtlige navne for de andre (tidligere) browsere, og dermed viser de gamle websites nu samme smukke responsive indhold til Edge som websiten giver til Safari.
Da nogle Mac-udviklere desuden glemmer standard CSS-varianter, ser Edge nu også nogle ”-webkit”-præfikser som sine egne. Dog kun få udvalgte, så udviklere bør stadig teste deres websites i alle browsere.
Udviklere kan skrive ”about:flags” for at afprøve eksperimentelle features i Edge, hvilket giver mulighed for at teste nye ting, der endnu ikke er slået til for almindelige brugere. På http://status.modern.ie kan man se et roadmap for fremtiden, og hvad der er understøttet. Stem på de features, du gerne ser implementeret i Microsoft Edge.
Lea Verou
- The missing slice
Lea Verou demonstrerede en veloplagt ”out of the box”-tankegang ved at vise, hvordan effekter kan skabes med CSS. Mere præcist, hvordan et cirkeldiagram bliver til udelukkende ved hjælp af CSS-styling af et HTML-element. Det blev til hele fire hacks, der gradvist blev bedre og bedre i form af renere og renere kode.
Den sidste løsning, en conic-gradient, findes endnu ikke, men den er et forslag til næste CSS-standard for CSS4!
Til alle de browsere, som lige nu er moderne, findes der dog et polyfill på http://leaverou.github.io/conic-gradient/, som gør dem i stand til at vise fremtidens effekt allerede nu.
Der er dog ingen garanti for, at den kommer, medmindre tilstrækkeligt mange stemmer for, at browserne skal implementere forslaget til den nye type CSS gradient fill. Dermed viste Lea både, hvordan ideer til fremtidens standard kan udvikles, og hvordan vi alle har mulighed for at lave forslag til nye standarder. Vi kan alle påvirke byggestenene i den næste generation af browsere.
Paul Kinlan
- The headless web and thefuture of the web on mobile
Der er en tendens til, at apps ønsker at holde brugeren i den enkelte app, såsom facebook, hvor man følger links til websites inde i app’en i stedet for at åbne en browser. Det får Poul Kinlan til at forudse, at nye brugere om 5 år ikke længere er klar over, hvad en browser er.
Men det betyder ikke at websites er på vej mod snarlig udslettelse – tværtimod er det endnu vigtigere, at de er mobile friendly, at deres indhold kan indekseres af søgemaskiner, og at de tilbyder indhold med det samme. For det er nettets store styrke, at indhold er tilgængeligt uden installation. Hvert ekstra trin man beder en bruger om at tage, vil hægte 20 % af. Lad derfor ikke ”Installer vores app” være det første, en besøgende møder på dit website.
Eksponer først informationen, brugeren er interesseret i, og tilbyd derefter at levere det via en app.
Med ”service workers” (på Android og Desktop Chrome), har websites en ny mulighed for at lade som om, at de er native apps. Det kræver kun et klik for at oprette en genvej, der samtidig cacher websitet/app’en til offline-brug. Dermed får websitet eller app’en mulighed for at modtage push-beskeder, vise notifikationer og køre baggrundssynkronisering. Alle de ting man normalt forbinder med en native app, men udført af et cached website, der åbnes i en browser, hvor brugeren ikke vil kunne se forskel på, om det kører i en browser eller er en native app.
Jeremy Keith
- Resilience
”Resilience” er et systems evne til at kunne klare forandringer, og det er det grundprincip i deklarative sprog, såsom HTML og CSS, der har tilladt os at udvide HTML fra 21 elementer til 121 elementer – uden at udløse fejl i gamle browsere. For browsere ved, hvordan de skal vise eller ignorere ukendt indhold – ikke nødvendigvis smukt, men siden vil altid blive vist uden fejlmeddelelser.
JavaScript er et imperativt sprog, hvilket i sin natur er skrøbeligt: En fejl et tilfældigt sted vil stoppe al JavaScript på siden i at blive udført – og fejl sker! Hvis ikke i vores egen kode, så i nogle af de mange megabytes af JavaScript-biblioteker, sporings- og reklamekode, som nogle websites inkluderer.
For at sikre at vores websites er meget modstandsdygtige overfor fejl, bør man lave ”crash tests”. Hvad sker der med websitet, hvis et refereret domæne – som et CDN eller reklamer – er blokeret eller nede?
Jeremy Keith delte sin opskrift på en tretrinsproces, der sikrer modstandsdygtige websites:
- Identificér core-funktionalitet.
- Gør funktionaliteten tilgængelig med den simplest mulige teknologi, så det virker, selv hvis JavaScript fejler.
- Forbedr!
I punkt 3 kan man gå amok i smarte ting. Forsøg ikke at tvinge avancerede elementer, som ikke er core-funktionalitet, -ind i punkt 2, men foretag et bevidst valg om, hvad der skal fungere i en crash test-situation.
