Recently all front-end ‘Coders’ attended the inaugural UpFront Conference in Manchester. Organised by McrFRED and Speak the Web, the event is pitched as a front-end conference for anyone who makes for the web.
With a speaker line-up including Brad Frost, Anna Debenham, Ben Foxall and many other worthy names, it ran with the idea that the web is fun and a powerful platform whilst also addressing how designers and developers can improve the way they work together to ensure a higher quality end product.
Below are some thoughts from a few of the Code attendees and insights into what they took away from the day.
“The first speaker (and my most anticipated of the day) was Brad Frost. Brad is one of the pioneers of ‘atomic design’, where component-driven development has five distinct levels: atoms, molecules, organisms, templates, and pages (atoms make molecules that make organisms and so on).
Brad showed examples of an atom being a single input. A molecule may be this single input paired with a label and button to create a site search component. Putting this into the context of a site header — beside the logo and navigation — forms an organism. This would itself be part of a template, i.e. a complete page without the final copy, while a final page is all of this plus all the content: images, texts and full copy. You can read more about the principles of atomic design on Brad’s blog.
I noticed that web performance seemed a particularly hot topic at this year’s event: Dean Hume and Yesenia Perez-Cruz both did talks where this issue was front and centre, and plenty of other talks mentioned performance as considerations. As a community, we can sometimes be preoccupied with bringing in new technologies, trying to bridge the gap between web and native applications with newer and more abstract APIs or bringing new methods of making a site look and feel modern. But it’s important to remember that doing this can sometimes have a negative effect on performance.
Dean Hume’s ‘Faster Mobile Websites’ talk covered techniques for optimisation to help eek out every byte of performance, while Yesenia Perez-Cruz’s ‘Design Decisions Through the Lens of Performance’ approached the issue from a design perspective. She introduced the concept of a ‘performance budget’, a number set for a project that it shouldn’t go over (such as a 600 kilobytes) which then becomes a pillar for future discussions of additions. For example, if a new set of images were to be brought in which would push the project over its performance budget, how much work could be done and how long would it take to optimise other aspects of a project to bring the budget ‘in the black’ or could the proposed addition be approached in a different way to reduce the performance impact?”
“Ben Foxall’s ‘The Internet of Browsers’ talk was one of the most interactive presentation of the day, and also the one that really got me thinking.
Ben noted that most of us underuse the web immensely, and then offered a glimpse of what is potentially possible if we’re brave enough to really push the boundaries.
The demo started with everybody in the room being asked to pull out their phones and navigate to a specific webpage. After plotting each one of our positions using the distance between the host (an iPad) and us he showed us an on-screen map of the room, and prompted us to press buttons on our phones to make certain things happen on the screen.
After this was a really impressive audio demonstration in which he sent a sound around the room, playing on each device as it passed — it literally was 300:1 surround sound!
Yesenia Perez-Cruz’s talk really caught my attention too, particularly the comment: “Designers should be the first people to care about performance.” She made the point that designers that work with the developer from the beginning and understand that performance impacts and influences the effectiveness of their designs will have an easier time actually getting their designs built.”
“I really enjoyed Dean Hume’s talk, and his tips on tools that you can use to accommodate responsive images were really useful. Using things such as the source media attribute allows developers to set different sizes images for different screen sizes; as an example, you could set an image to be only used below 400px. There are also various gulp tasks that he recommended such as ‘gulp-responsive-images’, which automates this process.
There were a few other points that he made such as keeping file sizes small and only loading in what is needed. Google Chrome has very good auditing tools which allow you to see various stats about a website; for example, you can see how much CSS is being used on the page. This makes it easier to improve page load times and ensure that a site runs at 60 frames per second, which is the most optimal FPS.
Ben Foxall did an interesting talk showing how browsers don’t just have to show content; they can also collect data. He gave an example using a simple application he created. This application could collect data about where a user was or what they were doing — for example, he could see which phones in the room were on charge and which were not. This really makes you think about the real possibilities of the web. The fact that you can do much more than just show the user content is amazing.”
:http://upfrontconf.com/ “The UpFront Conference Website”
:https://twitter.com/mcr_fred “The MCRFred Twitter Feed”
:https://twitter.com/speaktheweb “Speak The Web’s Twitter Feed”
:http://bradfrost.com/blog/post/atomic-design-book/ “Brad Frost’s Blog On Atomic Design”