Foto: Samuel Uneus
Innehållet på konferensen var varierat men vi såg framförallt två huvudinriktningar: experiment med ny teknik och användbarhet. Vi fick se spännande exempel på teknik för att uppleva VR och avancerade animationer i webbläsaren. Andra föreläsare fokuserade på användbarhet och värdeskapande för användare och världen vi lever i idag. Vi tror att båda inriktningarna behövs och att de kompletterar varandra. Konferensens sista föreläsare Sara Vieira sammanfattade det bra: "Useless is not worthless". Vi kan inte ligga i framkant utan att experimentera. Det är genom att våga testa och lära oss av det som vi kan skapa produkter som gör världen bättre.
Här är sex föreläsningar vi gillade:
David Khourshid: Intelligent user interfaces
David Khourshids föredrag handlade om hur vi genom analys och maskininlärning kan förutse våra användares betende på våra webbplatser och genom det anpassa gränssnittet och funktionerna för dem automatiskt. Det gör det möjligt att förkorta laddningstider genom att förutse användarens nästa steg och ladda in sidan i förväg, och även ta bort mellansteg som är helt onödiga för användaren. Det kan handla om exempelvis processen att ta bort data och att frågan "Är du säker?" blir onödig om du vet att användaren alltid väljer "Ja" på den frågan. Istället kan användaren då ges möjlighet att ångra efter att funktionen utförts.
Rachel Andrew: Refactoring (the way we talk about) CSS
Hur ofta har du hört någon säga att "Jag hatar css" eller sett en meme som sammanfattar css som ett buggigt och ohanterligt språk? Rachel Andrew menar att boven delvis är hur vi pratar om css. Ofta när vi hittar lösningar på kodproblem på till exempel Stackoverflow innehåller svaren "css hacks". I själva verket är det inga hacks utan helt enkelt hur css fungerar och är formulerade i sina specifikationer. Hon tog också upp webbläsarstöd som ytterligare exempel. Ofta beskrivs brist på webbläsarstöd som en bugg när det i själva verket inte är implementerat i webbläsaren. Så sammanfattningsvis, om vi kommer bort ifrån att kalla lösningar för hacks och css som inte beter sig som vi förväntar oss för buggar, kommer förståelsen för css öka.
Fernando Via Canel: Universal components
Har ert företag både en webb- och en nativeapp? Vi har tidigare skrivit om Progressive Web Apps som kan överbrygga det gap som finns mellan appar och webbplatser. Men hur gör man när det är motiverat att ha både en webb- och en nativeapp? Det kan innebära mycket duplicerad kod för att få till ett enhetligt utseende och funktioner. Lösningen? Att bygga egna lösningar eller använda ramverk som låter oss ha en delad kodbas för både vår webb- och nativeapp. Det här pratade Fernando Via Canel om på konferensen. För att ta React som exempel så finns det likheter i vissa delar av implementeringen av React och React Native. Till exempel tjänar <div> i React och <view> i React-Native liknande syften som containrar. Samma sak med <img> och <Image>. Det fick React-communityt att tänka "Tänk om det fanns ett gemensamt gränssnitt för dessa liknande komponenter? Utifrån det skapades ett gränssnitt som heter React-Primitives som samlar de mest använda komponenterna i React och React Native, och som möjliggör att kunna bygga användargränssnitt som är återanvändbara mellan plattformar.
Fernando Via Canel på Github
Faceyspacey, React universal component på Github
Vitaly Friedman: Designing and building with privacy in mind 🍪
Hur privat är ditt digitala privatliv egentligen? Det är i princip omöjligt att läsa igenom alla användaravtal för alla tjänster som vi använder. Företagen utvecklar strategier för att förvirra din annonsblockerare och har du riktigt otur använder du en som i själva verkar arbetar för annonsindustrin. Dina personliga uppgifter från till exempel hälsoappar kan användas mot dig av försäkringsbolag. Det är helt enkelt svårt att undvika att bli trackad och få sin persondata såld eller utnyttjad. Varför lägger vi ner så mycket energi på att undvika att ge bort vår persondata för att sedan acceptera hundratals kakvarningar? Vitaly Friedman menar att användare inte ser något annat alternativ, accepterar du inte kan du inte använda webbplatsen. Du kan inte heller vara säker på att du kommer undan om du trycker bort varningen. Stängknappen kan likaväl trigga samma funktion som acceptera knappen, ett verkligt scenario som Friedman stött på. En del har helt enkelt gett upp kampen helt mot kakvarningarna, idag finns till och med webbläsartillägg som helt enkelt tar bort alla varningar.
Friedmans slides från årets konferens finns inte tillgängliga men en variant av samma dragning från Webexpo finns här.
Eva Ferreira: Video animation
Med moderna webbläsare kan vi återskapa avancerade animationer som rotoskopi. Hur kan vi modifiera webbvideor med JavaScript och CSS? Eva Ferreira tog i sin föreläsning upp videoanimationstekniker som Chroma Key och Rotoskopi och hur de kan föras över till webben. Rotoskopi är en animationsteknik som utgår från avfilmade scener. Via konturteckningar baserade på filmrutorna skapas animerad film som följer det filmade bakgrundsmaterialet men omvandlade till teckningar. Chroma Key är en teknik för att dölja eller göra objekt osynliga/genomskinliga. Man kan använda sig av en grön eller blå bakgrund och sedan ersätta bakgrunden med vad som helst.
Chroma Key kan användas i webbläsaren på följande sätt:
- Få tillgång till användarens kamera via JavaScript och lägg i en <video>-tagg.
- Rendera videon i ett <canvas>-element.
- Ta bort grön eller blå färg från canvas-elementet genom att modifiera pixlar – hitta till exempel de gröna pixlarna och ta bort dem.
- Lägg till önskad bakgrundsvideo eller -bild.
Om du också är en Harry Potter fantast som Ferreira kan du med ett trollslag befinna dig på Hogwarts med din osynlighetsmantel.
Eva Ferreiras presentation
Livedemo av Ferreiras osynlighetsmantel
Källkod
Piérre Reimertz: Machine learning🤖
Maskininlärning får dig kanske att tänka på robotar men Pierre Reimertz visade oss att det också kan användas för en bättre användarupplevelse. Genom att analysera scrollbetendet hos användaren kan vi beräkna om hen är vänster- eller högerhänt och således flytta knappen för mobilmenyn automatiskt. Maskininlärning kan också kombineras med din mobil- eller datorkamera för bildigenkänning. Reimertz demonstrerade genom att visa en mobilapp som med mobilkameran kan känna igen en laddningssladd som inte riktigt är inkopplad i datorn. En funktionalitet som till exempel skulle kunna avlasta en tekniksupport.
Maskininlärning kan också öppna upp för nya lösningar för att öka tillgängligheten på webben. Redan idag finns verktyg för automatisk textning för att göra videoklipp mer tillgängliga. Vad sägs om en app som automatiskt stänger av funktioner som är aktiverade av rörelsestyrning ifall den kan känna av ifall användaren darrande händer?
Källkoden för alla Pierres exempel
Om konferensen
Nordic.js är en stor årlig JavaScript konferens i Stockholm. I år hölls den i Frihamnen, 10-12 oktober.
Filmade föreläsningar finns på Youtube.
Kontakta Sandra eller Jessica om du vill veta mer om hur vi jobbar med front end-utveckling.