Render Conf 2016
Bruce Lawson - web.next
Description | Slides | Video
I had assumed that Bruce's talk would be identical to the last few I've seen. Bruce's previous talks on web.next have focused on where customers are coming from and what devices they are using. This talk was much more focused around the web technologies that will allow the next 4 billion people to use the web.
Progressive Web Apps (PWAs) will replace native mobile apps and this is a good thing: a relatively light-weight 20MB app might take over 30 minutes to install on 2G - by which time the network will probably have flaked out, Bruce notes.
PWAs increase accessibility to mobile users with limited devices and limited connectivity.
In telling his story, Bruce highlighted how browser manufacturers have had to collaborate to create better web technologies - and thus better user experiences. Mozilla, Google, Opera and Microsoft are trying to improve their relationship with web developers to produce scalable and useful functionality. AppCache is the counter-example Bruce uses to demonstrate what happens when this relationship is not built correctly.
Another great talk by Bruce, inspiring a room of front-end engineers to get involved with the Web Platform Incubator Group (https://www.w3.org/blog/2015/07/wicg/).
Val Head - Designing Meaningful Animation
Description | Video
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:
- Staging
- Follow Through
- Timing
- Secondary Action
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 Sedlock - The landscape of front-end testing
Description | Slides | Video
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 Roberts - CSS for software engineers for CSS developers
Description | Slides | Video
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:
- Don't Repeat Yourself (DRY)
- Your source should be DRY but the output can have repetition.
- Use a preprocessor to store data in variables
- Some repetition is better than a bad abstraction
- Single Responsibility Principle
- Use a class to denote a single responsibility, e.g. class="button button-large button-positive"
- Separation of Concerns
- Do not use CSS classes for JavaScript and vice versa
- Do not bind CSS rules on to accessibility concerns, e.g. role="navigation"
- Do not write CSS with JavaScript
- Immutability
- Do not allow any CSS rule to change, e.g. with a media query
- Use responsive suffixes, as Harry defines in BEMIT
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 Soueidan - SVG in motion
Description | Slides (PDF) | Video
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 |
|---|---|---|
| <img> | Inside <svg> | N/A |
| url(); | Inside <svg> | N/A |
| <picture> | Inside <svg> | N/A |
| <iframe> | Inside <svg> | Anywhere |
| <object> | Inside <svg> | Anywhere |
| <svg> | Anywhere | Anywhere |
Sara then details the various methods of animating SVG, with the following table summarising her recommendations:
| Animation | Technique |
|---|---|
| Transforms | JavaScript (or CSS) |
| Path Morphing | JavaScript |
| Line Drawing | JavaScript (or CSS) |
| Colour & Simple Animations | CSS (or JavaScript) |
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 Christopherson - Technology – the power and the promise
Description
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 Vanhoutte - Rendering the Obvious
Description
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...