Fronteers Conference 2017 – Dag 2 – Middag

Choose Your Animation Adventure – Val Head

Val Head is, Design Evangelist bij Adobe, een web animatie expert en auteur van het boek Designing Interface Animation. Daarnaast geeft ze online les in CSS animaties. Val sprak met heel veel energie en opwinding over web animaties. Ze toonde de 3 manieren van animaties op het web: SVG, CSS of Javascript en wanneer je deze het beste kunt gebruiken.

Het voordeel van SVG is dat afbeeldingen oneindig schaalbaar. Je kunt ze dus oneindig in en uitzoomen zonder kwaliteits verlies. Echter animaties met alleen puur SVG (ook wel SMIL) wordt door haar afgeraden doordat dit geen IE of Edge support heeft en is ook afgekeurd is in Chrome. Echter kun je SVG wel in combinatie met je CSS of Javascript animaties.

Met CSS kun je al heel veel animaties maken en afvangen met “transitions” en “keyframes”. Als je bijvoorbeeld op de hover state een element wil laten bewegen kun je dat met CSS maken. Animaties betrekking op de styling kunnen we dus afvangen met CSS. Echter ben je wel beperkt tot de mogelijkheden van CSS. Daarnaast worden “transforms” niet ondersteund in IE of Edge.

Als er een bepaalde interactie of event bij komt kijken en als er een bepaald proces aan hangt dan kun je dat niet altijd met CSS afvangen. Dan gaan we over naar Javascript. CSS kunnen we dan nog wel gebruiken voor de styling van de animaties. Javascript en CSS werken dan als het ware samen om de gewenste animatie te tonen. Sommige dingen kun je in CSS afvangen maar is niet altijd de gewenste situatie doordat je veel regels code krijgt. Ook dan kun je dit beter combineren met Javascript. Met Javascript kun je een stuk meer.

Er zijn veel javascript frameworks voor animaties. Val noemde de 3 bekendste en telde jQuery niet mee. Ze benoemde GreenSock, Velocity.js en Anime en noemde bij ieder zijn voor en nadelen. Je kunt de voor en nadelen hieronder zien.

Met GreenSock kun je veel meer maar is een stuk zwaarder. Het heeft een fallback voor IE8 en heeft daarnaast een grote community. Sommige features zijn dan wel betaald. Velocity.js daarentegen is een stuk lichter, maar heeft dan ook iets minder features. Het is wel volledig gratis en je kunt het als extensie gebruiken van jQuery. Anime is het allerlichtste maar heeft daarentegen geen fallback voor IE8 en gaat maar terug tot IE10. Het heeft een kleine documentatie en geen of geen grote community.

Val was prettig om naar te luisteren en het verhaal was erg duidelijk ondanks dat ze erg energiek was en snel praatte. Dit was overigens een applaus waard voor de schrijftolk die alles real-time moest typen. Haar slides waren leuk en het was een helder verhaal. Animaties zijn sowieso leuk en maken een website aantrekkelijker om mee te interacteren.

Emoji, Web Components, and Art – Monica Dinculescu

Monica Dinculescu is een “emojineer” bij Google. Ze werkt aan het project Polymer, een Javascript bibliotheek om eigen HTML elementen of Web Components te creëren om ze te kunnen hergebruiken. Ook werkt ze aan Web Components zelf en aan Google Chrome. O ja, ze is ook nog ongelooflijk geobsedeerd door emoji’s. Polymer elementen zijn gebaseerd op de standaard Web Components API’s en werken naadloos met de browser’s ingebouwde elementen en andere Web Components.

In haar talk geeft ze aan dat ze erg veel van kunst houdt en van het delen van kunst houdt. Iedereen heeft wel eens iets gedeeld op het internet wat hij of zij gemaakt heeft. Tegenwoordig zijn er heel veel tools om iets zelf te kunnen maken en worden ook steeds beter. Zo ook met het web door het web steeds toegankelijker wordt voor iedereen.

De web heeft een aantal elementen. Semantics zoals <header>, <nav>, <article>. Ze zijn hetzelfde als een <div> element en doen verder niets dan alleen vertellen waar deze in de layout of op de pagina zich bevinden. Verder heeft het web “encapsulation” zoals <video>, <input>, <summary>. Dit zijn magische elementen die magische dingen doen op het web. Ze doen meer dan <div> elementen alleen je ziet in de code niet echt wat ze nou precies doen. In DevTools kun je dit inschakelen met de setting “Show user agent shadow DOM” en kun je de onderliggende code bekijken.

Met Web Components kun je eigen elementen creëren. Als je bijvoorbeeld een input slider wilt stylen, dan heb je een hele hoop regels CSS. Zodra je een eigen Web Component maakt met je eigen input slider dan kun je dat daarmee versimpelen. Via Polymer kun je de data van meerdere Web Components met elkaar koppelen ofwel “data binding”. Monica heeft een app gemaakt met Polymer en Web Components genaamd Emojillate. Je kunt hiermee afbeeldingen uploaden en vervolgens wordt je afbeelding over getekend met Emoji’s.

In code ziet het er ongeveer zo uit:

Let’s save the internet: How to make browsers compatible with the web – Ola Gasidlo

Ola is een Web Compatibility Engineer bij Mozilla en woont in Berlijn. Ze houdt ervan om het web toegankelijk te maken voor iedereen. Ze zou eerst de talk “I’m offline. Cool! What now?” geven, maar het onderwerp van haar presentatie is veranderd. Ola gaf een geschiedenisles over browsers, de browser war en browser compatibility en deelde een aantal quizz vragen met het publiek over de browser compatibility van bepaalde CSS.

De browser wars vergeleek ze in haar presentatie met Star Wars, wat best wel grappig was. Heel snel dan een stukje geschiedenis. Het begon met het “web” uitgevonden door Sir Tim Berners-Lee in 1980. In 1991 kwam het WorldWideWeb, wat later Nexus, de eerste browser werd. In 1992 en 1993 kwamen andere browsers waaronder Mosaic dat de standaard browser werd. In 1995 kwam Netscape wat toen de grootste werd. Andere browsers overleefden het niet. En toen kwam Microsoft Internet Explorer. In datzelfde jaar werd Javascript bij beide browsers ondersteund. In 1996 ondersteunde ze beide CSS. In 1996 kwam ook Opera. Tot 2002 werd IE steeds groter en Netscape steeds kleiner. Vanaf 2003 kwamen nieuwe browsers. Mozilla Firefox, Google Chrome, Safari en Opera. Tot op heden nog steeds actief.

Ola vindt de browser wars wel een positief iets doordat ze elkaar steeds willen overtreffen en doordat browsers elkaar bij willen houden en zich continu ontwikkelen en verbeteren. Die mening deel ik in principe ook al zal het als front-end developer wel een hemel zijn om maar voor een browser te hoeven stylen. Maar ik denk zodra er maar 1 browser is, dat er voor die browser geen competitie is en dat de vernieuwingen en verbeteringen dan ook minder zullen zijn.

THE END – Jason Scott

Jason Scott mocht Fronteers Conference 2017 afsluiten. Jason kwam erg overtuigend op het podium en had een kostuum aan van een engel een grote hoed en witte vleugels op zijn rug. Zijn opkomst was erg indrukwekkend. Het was niet meer alsof je naar een presentatie zat te luisteren maar meer naar een stuk theater.

Jason, een Amerikaanse archivist, historicus van technologie en filmmaker werkt voor the Internet Archive die alle historische bestanden archiveert. Jason begon met een tragische verhaal over zijn eigen gezondheid en vertelde over zijn bijna dood ervaring, dat van zijn vader en dat van de content van het internet. Zijn doel is om het internet permanent beschikbaar te maken, en dat doet hij op archive.org. Archive.org heeft niet alleen oude versies van het web, maar ook albums, LP’s, nieuwsberichten, kranten, archieven, handleidingen, videospellen, alles waar ze maar aan kunnen komen. Heb je heel lang geleden ooit een site gemaakt dan staat deze waarschijnlijk nog op archive.org!

Al had zijn talk geen gebrek aan entertainment weet ik niet precies goed wat ik hiermee moet. Voor mij was het meer een levensverhaal en een levensles om zoveel mogelijk uit het leven te halen doordat het leven kort is of kan zijn. Maar ook dat je niets maar dan ook niets moet verwijderen wat je ooit gemaakt hebt omdat het ooit nog van pas kan zijn of omdat het in de toekomst misschien nog wel wat waard kan zijn. Natuurlijk was het na 16 talks lastig om nog meer inhoudelijke kennis op te doen en kon ik de afsluiting wel waarderen.

Conclusie

Dit was mijn eerste keer Fronteers en ik ben er zeker onder de indruk van. Het was goed geregeld, de sprekers, onderwerpen, locatie en het eten. Soms kwamen er onderwerpen aan bod waar je niet zo gauw mee te maken krijgt zoals de talk over WebAssembly en WebVR en soms waren er ook onderwerpen die heel pittig waren en lastig te volgen zoals de talk over Caching. Andere onderwerpen lagen misschien verder weg van de front-end developer zoals de talk over Readability en de talk van Jason. Andere presentaties zoals de talk over DevTools, over CSS en over animaties hadden dan weer wel direct te maken met de front-end developer. De diversiteit aan sprekers en onderwerpen vond ik wel iets hebben. Het zorgde voor een goede afwisseling en zorgde ook voor andere invalshoeken. Een front-end developer heeft niet alleen te maken met code en design. Er komt veel meer bij kijken. Fronteers was het in elk geval zeker waard. Volgend jaar ben ik er weer bij.