Home Insights Smashing Conference London 2018
15th March 2018 in News

Smashing Conference London 2018

Paul Wong-Gibbs

By Paul Wong-Gibbs

Smashing Conference London 2018

Just before joining Indigo Tree, I bumped into a blog post of our website by our own Ben Read, “What is JAMstack web technology?” That opened the floodgates of my curiosity, I was really intrigued by the whole new way of building websites vs the “traditional” WordPress way. Once I came on board I realised Chris Geary was the true instigator of this new philosophy which he picked from Netlify.

A few conversation on topic later, it turned out that Smashing Magazine (one of the most popular web publisher out there) was about to take the leap of faith and rebuilt their website, which was made of four different platforms, entirely and “exclusively” with a JAMstack approach. If you want to learn more check out the case study, or watch the notes on YouTube.

Fast forward a couple of months, when I knew I earned my position at Indigo Tree, it was time to think about how to spend the very generous company allowance for my yearly web conference. It was a no brainer at that stage that I wanted to attend the London Smashing Conference. My aim was to learn more about the JAMstack way of doing things, front-end technologies and take a good look outside the WordPress bubble. I was also able to convince Louise, my geeky wonder-networker employer, to come along.

Smashing Magazine also organised two days of workshops, one before the conference (New Front-End Adventures in Responsive Design) and one after (Advanced CSS Layouts & Umar Hansa on The Modern Front-End Workflow Bootcamp) but being out of the office more than a couple of days is a little tricky so Louise and I skipped those.

When the time of the conference came I was very excited. I knew the venue (St Luke’s) well since I attended a jazz gig by an Italian trumpeter (Enrico Rava) 10 years earlier. It’s a stunning 18th century church conversion a stone throw from Silicon roundabout.

The Talks

Ok the actual conference (not just a day but two) was jam packed with super interesting high level talks, here’s the list with some useful links and what I’ve learnt.

Making Platforms And Processes Promote Performance
by Phil Hawksworth
link to the video

The conference started with the topic which made me attend in the first place: JAMstack. Phil shared in a very amusing way what a typical project timeline is, make sure you know how to deploy as early as possible, prepare yourself.

Actually a git-based workflow all the way to production is a very efficient way to build and manage websites. With Netlify you can see how pull requests look like on the front end with their independent url, atomic deployment is quite nifty.

“Version control for everything” Phil said, I could not agree more with that, sometimes I think how better ours lives would be if we were to version control everything, not just code, but also things like: thoughts, documentations, designs, blog posts, ideas.

Phil also pointed out that serverless basically means FaaS (function as a service) that helped me understand more that abstract concept.

Unlocking the Power of CSS Grid Layout
by Rachel Andrew
link to the video

Next up was Rachel, I had been looking forward to her talk. CSS Grid for me is the most exciting web feature since I bumped into WordPress 6 years ago.

I got lots of ideas to implement CSS grids, one of my personal projects include revamping a local restaurant website exploiting this technology.
As a matter of fact, with regards of internal work, I hope we will be able to be more framework agnostic and create our css grid startup theme.

Rachel wisely said: “Before worrying if a technique performs well, ask yourself if you need it at all.” That could be applied to so many other situations.
Here are a few useful links, Rachel has some useful content on one of her websites gridbyexample, if you want to learn by coding try Css Grid Garden and here are a few examples of what can be achieved.

The Joy of Optimizing Images
by Una Kravets
and Martin Splitt
link to the video
link to the slides

The talk about image optimisation was quite new to me, it was also a dual talk that you don’t see often, Una & Martin. It was very informative and something that I definitely need to dig.

For instance, did you know the life-cycle of images?

  1. downloading images
  2. rendering header (setup)
  3. decoding image
  4. VRAM upload
  5. composite
  6. display 🙂

I then find out about Cloudinary and imgIX which we might get to use in our new JAMstack. Una also shared a link where she recreated Instagram filters with CSS filters and blend modes.

Furthermore I was reminded of a super cool technique our senior developer Chris implemented on the latest version of a client’s website and that is the “blur up” technique, a great way to improve the image performance of your website.

A/B Testing, Ads and other 3rd Party Tags
by Andy Davies
link to the video
link to the slides

How much do you know about A/B testing? I personally don’t know a lot, mainly because I never got to work with a very high traffic website where that kind of test could yield some meaningful results.

Andy’s talk made me mainly realise that we should be really careful what 3rd party script we add to our websites, last but not least because they can have a dramatic impact on performance.

Oh guess what!? Netlify offers split testing (currently in beta) for free.

Curious fact, if I recall rightly, Andy is either from or he lived in that Welsh village with the longest name ever “llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch” give it a try and see if you can pronounce it first and then remember it, I broke it down like so and still struggled: llan-fair-pwll-gwyn-gyll-gogery-chwyrn-drob-wlll-lanty-sili-ogogogoch.

Web Fonts Are ИØ Rocket Science
by Zach Leatherman
link to the video
link to the article

I like typography a lot and I think I don’t spend enough time trying to convince our clients to use some quirky ones. But as Zach put it, fonts can be disrupt your user experience if not rendered in a timely fashion.

He shared lots of useful tips and among other things the link to a website for playing with OpenType variable fonts Axis-Praxis.

Last but not certainly least, why not prank someone with the following:

@font-face {
   font-family: Helvetica;
   src: local('Comic Sans MS');
}
How fast is it?
by Patrick Meenan
link to the video
link to the slides

Next up was the creator of WebPagetest, a tool we use a lot at work. I didn’t know he was running WebPagetest from the basement of his house, he shared a funny picture of all the hardware.

WebPagetest-basement

Patrick basically recommended to pick metrics that will improve the user experience and shared details in a very informative way. He also showed us some visual metrics I never seen before.

Finally if you want to audit and improve performance these tools might help:

A Modern Front-End Workflow with DevTools
by Umar Hansa
link to the video

Last talk of the afternoon was about the developers’ best friend: the DevTools. Umar covered network, render and programmatic performance.

I learnt you can also take screenshots with the tools and you can enable local override if you need to measure the behaviour of the page you edited in the dev tools environment.

He also discussed its evolution saying that one day we might use it as an IDE :-O

[ because I was taking me quite some time to put this post together I decided to add the my notes for the second day at a later stage – watch this space ]

I personally haven’t used them, but the organisers created a couple of collaborative documents on their Google drive on which people could have added their notes and questions. It’s a nice idea if you think about it, everybody gets to benefit from other people’s input. Here are the links if you are curious: day 1 notes & and day 2 notes.

Taking the Vile out of the Privilege
by Christian Heilmann
link to the video
How’s the UX on the Web, Really?
by Ilya Grigorik
link to the video
Javascript Performance
by Mathias Bynens
link to the video
Improving Page Performance in Modern Web Apps
Katie Hempenius
link to the video
Resource Loading – Past, Present & Future
Yoav Weiss
link to the video
Performant Animations: Hitting 60fps
by Emily Heyman
link to the video
Building Performance for the Long Term
Allison McKnight
link to the video
In the Loop
Jake Archibald
link to the video

Extras

If you are on Twitter take also a look at the #smashingconf hashtag, there are some interesting comments.

One of the coolest features of the conference was DJ Tobi, he played during the break music mixed with bits of the talks, cool and surreal at the same time, I wonder if there is a release scheduled but if you want to check his work here is a link for you https://soundcloud.com/beyondtellerrand/sets

To spice things up a bit, the organisers asked each speaker to plant clues about a mystery theme among some of their slides. I initially thought it was the sky, then I saw someone’s tweet about the rainbow and I was totally sold but eventually it turned out to be … hold on a sec, why don’t you go through all the slides/videos yourself and take a guess 😉 If you want to find out what it was check this link out.

Between one talk and the next I sometime wandered to the sponsors area. One of the stole was occupied by Balsamiq, a wire-framing software, it was with great surprise that I found out it’s actually an Italian company, bring it on! Not only that, they are based in Bologna where I spent some time in the 90’s and have very fond memories, if you happen to travel to “Il Bel Paese”, you got to visit this amazing city which, among other things, has the oldest university in Europe (1088).

Balsamiq organised a Lego challenge which I entered with a very easy representation of a very complex #JAMstack built.

Other people had more fantasy than I did of course and this is my favourite

During the breaks, up on the stage the big screen showed a social media wall, something I’ve never seen before that I quite liked, last but not least because I had a few little moments of fame when my tweets were displayed.

On-the-social-wall

It was like scrolling through the conference hashtag on Twitter but on a maxi screen.

Conclusion

First and foremost I’d like to thank Indigo Tree for letting take part!

From a networking point of view I wished I tried to engage more with people, developers are notoriously not easy to approach I excuse myself. It was nice though to see a few familiar faces from the WordPress community.

I use to be a night bird back in the years of making music, I now am very much an early bird and that’s basically why I totally missed the after party and any opportunity for social interaction.

The food was awesome but the coffee sucked (:-/) so much I had to go all the way to Old Street station to get a decent one, not a big deal since I fancied stretching my legs, it was actually a nice sunny day.

The chairs on which we sat for two days, I found out only as I was drafting this blog post many people complained, they were not the most comfortable. Someone also complained they were too close to one another 😀

All in all it was an awesome experience which I hope to repeat soon.

Did you attend any of the Smashing Conferences? How did you like them? Share your thoughts with us below.

Leave a Reply

Your email address will not be published. Required fields are marked *