Keeping front-end relevant for our clients

Daniel Dixon, Sasha Richardson & Rhian van Esch, Front-end team

Keeping front-end relevant for our clients

Introduction

To ensure that we are always building our client’s brands using the very latest technology has to offer, we’re on the road quite a lot, learning how to apply new ideas. In November, our front-end development team attended ffconf in Brighton which covers a wide range of topics from web standards to security to JavaScript memory management. With a strong focus on ethics and the user experience, the conference emphasised the responsibility that developers have to do right by their users and to create experiences that are inclusive of everyone. For our team, this is a philosophy that we’ve bought into a long time ago, but some specific talks really stood out for us…

Our favourites

#1 Speed and performance

In “Lessons Learned Sciencing the Web”, Addy Osmani presented ways to improve speed and performance of websites which he did with humour and some excellent practical advice.

Addy demonstrated how to make this happen in our code, focusing on improving the experience for mobile users and user expectations, reinforcing the point that we will more often than not simply abandon websites if they don’t load quickly enough.

He also emphasised how important user-centric performance is in modern web development. One of the key approaches to improved performance means re-thinking the way we load resources on a webpage. Traditionally, we’ve loaded everything we need up front, but this leads to a very poor experience on slow internet connections. A different tactic is to load what we need only when we need it.

He set-out a three stage approach to user-centric performance, suggesting tools and patterns for developers to use for each:

  • Measurement: use of real user metrics (RUM) to identify real-world issues and areas of improvement.
  • Optimisation: introduction of workflows “that force everybody to think about loading times from the beginning” and using a performance budget, meaning you set maximum sizes for resources in the project. For example, a commitment by the developer to use no more than 200KB of images, 50KB of CSS, etc.
  • Monitoring: the development team adheres to the performance budget because – in line with the theme of the day - “everyone is responsible for performance”.

#2 Web standards and polyfills

Monica Dinculescu’s “How The Web Sausage Gets Made” was beautifully illustrated and jam-packed with ideas on a variety of topics from web standards and components, to polyfills and browser vendors.

Setting things up, she explained that back in 2010 “we were just writing JavaScript and throwing it at the wall until it stuck.”

So, web standards have become important because they ensure browsers don’t copy each other’s bugs, which happened with Netscape. But you can’t just standardize anything, it must be the right thing. And web standards are a compromise between all browser vendors.

“Polyfills teleport your browser into the future”

Of course, not all browsers support the same features and in the past we’ve had to wait until a feature is implemented in a browser before we can use it. So: Polyfills to the rescue! Like Polyfilla which is used to fill holes and cracks in walls, Polyfills do the same, but with your browser. If a feature doesn’t exist in a browser, a polyfill can fill that hole in the browser and make it behave as if the feature exists. 

Monica encourages developers to use polyfills more. And if we do polyfills right, they will become redundant because they will eventually become integrated features of browsers and therefore no longer needed.

This approach empowers developers and encourages us to influence changes in web standards. Shaping web standards shapes and democratises the whole web platform. We don’t have to wait until features get implemented by browsers vendors, but – instead - as a community we can influence the features vendors plan to implement in browsers.

#3 CSS in JavaScript and accessibility

In line with the scene-setting theme theme of the conference, Bruce Lawson spoke about the need to make the web for everyone, no matter the speed of their internet connection or the quality of their device.

He covered a range of topics with pace and humour.

He started by describing the latest holy war in the web industry: CSS in JavaScript, including both the pros and cons. He also provided his own solution, a product he has developed called Stylable.

Far from trying to sell something to the audience, it came across loudly that he is cause minded: he wants us all to make better websites, regardless of the technology.

In the second and less technical part of his talk, he emphasised this, talking about about the ethos that should drive every one of us in the industry: a world wide web truly accessible to everyone should be our absolute priority.

And he explained this message in context of his own personal experience – the internet was the only source of information and support when he was diagnosed with MS in the late nineties.

And he reinforced his message with a comprehensive analysis of the digital divide, the issues related to internet access in emerging economies and what we can do to help.

This resonated particularly strongly with us and in our recent Tinnovation on Progressive Web Apps we drew similar conclusions.

In case you’re wondering…

You can watch all the talks on YouTube here. We came away buzzing with thoughts about what we’d seen and heard - here are our impressions of the day.

What does ffconf stand for?

One of the organisers, Remy Sharp, sheds some light on that on his blog. Short answer: it stands for whatever you want it to!

 

And - if you’d like to join us - where we are thinking of heading next…

SmashingConf in February, London
Third-party scripts, A/B testing, HTTP/2, debugging, JAM stack, PWA, web fonts loading and more.

Render Conf 2018 in March, Oxford
With Una Kravets and Harry Roberts as the confirmed speakers

Front-end NE in April, Newcastle
Close to TheTin North offices in Newcastle, with a panel of speakers including Léonie Watson.

CSSConf EU and JSConf EU in June, Berlin
Held back-to-back in Berlin in June, last year they produced some of the most interesting talks of the year!



Header/cover photograph courtesy of ffconf 2017, design by Laura Walters

As your brand and technology partner, we’ll help you discover what’s possible.

We’ll make sure that the way we work is the right fit for your business, and we’ll ask the right questions to make sure you’re set up for success.

Together, we’ll create a unique advantage for your brand.

We are TheTin – building brands through technology, email [email protected]

Share this

Comments are closed

TheTin uses cookies to give you the best possible experience on our website and to help us analyse our site traffic.
You can update your cookie settings and review our Cookie Policy at any time.