Val believes that animation is often mis-used and mis-understood on the web. Throughout the talk Val uses a mocked-up registration confirmation form to demonstrate how animation can be used to reinforce a brand message.
Val references Disney’s 12 basic principles of animation and highlights the key factors to focus on when animating on the web:
Using a live example and the Chrome Developer Tools animation controls Val shows that animations can convey meaning and emotion when these four factors are considered properly.
Alicia knows that testing is hard, and that front-end developers aren’t traditionally great at testing. By introducing testing framework language Alicia sets the scene for unit testing, introducing core concepts for front-end developers. The focus is on automation, making testing as simple as possible to drive adoption and engagement.
The testing concept then gets extended to visual regression testing, where Alicia lists the following automation tools to make this simple:
Of course no talk on testing would be complete without a nod to accessibility. Alicia lists two tools to help with automating accessibility testing:
And the final chapter in automated testing is performance (yay!). Alicia mentions a number of tools for automated testing:
I would add to the list a notable exception:
Harry starts his talk with a look back over his family history, highlighting that we have been use modern programming languages since 1959, the year his parents were born. CSS has only been around since 1996, but we have decades more software engineering experience which we can apply to CSS to make our projects more robust, scalable and predictable. I’ve noted down the core principles Harry advocates below:
I will never look at CSS the same. While a lot of this seems obvious when written down, how many times have you broken these simple rules?!
Sara is well-known as the SVG guru, in this talk she guides us through the perils and pitfalls of embedding SVG in our applications. It turns out that the way you embed an SVG image directly impacts what you can do with it. The table below summarises how you can animate SVG based on the way it is embedded, with the most flexible being an <svg> element. This has the drawback of increasing your HTML size and reducing cache-ability, however.
|Embedding Technique||CSS Animations||JS Animations|
Sara then details the various methods of animating SVG, with the following table summarising her recommendations:
The rest of Sara’s talk goes in to detail on specific animations, path drawing and some cross-browser issues with transform-origin. Not to mention the fact that CSS transforms do not work in either Internet Explorer nor Microsoft Edge.
The part of Sara’s talk I found most interesting was around manipulating the SVG viewbox property. By changing the value of the viewBox, you change the area of the canvas that is visible inside the SVG viewport. This enables you to zoom in to specific areas or objects. This can also enable you to manage SVG sprites and even step-animation in SVG.
Robin used a selection of videos and personal stories to remind us of how transformative the web is for people with disabilities. Even with the increased focus that developers put on accessibility, many web sites are totally inaccessible to blind people like Robin. New technologies such as automated intelligence, voice recognition and driver-less cars are all going to help people with disabilities, if only the designers and developers bear that in mind.
Frederik started his talk with a reference to web performance - render the obvious. He mentions that we should show customers what they’ve got as soon as they’ve got it. From there the talk rapidly morphed into a psychedelic exploration of teaching and knowledge, using ‘how a rainbow works’ as a metaphor of a knowledge abstraction.
Children don’t need to know exactly how a rainbow works, so a simple demonstration of a prism refracting light and creating the colours of the rainbow suffices. This is an abstraction away from how rainbows actually work, involving reflection and refraction in spheres of water. You can’t hope to know everything, so accepting abstractions of knowledge in some areas is fine, but you must understand that everything you know is an abstraction…