Headline
Some great tips around building a faster site including design, content, images, SVG, fonts, JS & CSS loading, server settings, and caching. Very much worth your time for a read and a tinker on your own site.
At CSS Dev Conf 2016 The Alamo, join Rachel Andrew, Trent Walton, Chris Coyier, Rachel Nabors, Estelle Weyl, Jen Simmons, and Jonathan Snook and more this October in gorgeous San Antonio, deep in the heart of Texas. Your CSS Dev Conference registration includes: Admission to the two-day conference, including keynotes and sessions; Continental breakfast, lunch, and snacks throughout the day; and Admission to the Check-In Reception, Monday night Party, and Tuesday night Happy Hour!Check out the sessions and register now!
Articles
It looks like AMP articles are going to slip into the search results on mobile devices now (denoted by the lighting bolt)
I remember the responsive sausage dog... this is a much better use of the technique
Holy crap, now this is what you call a testing suite! SWEET!
A great article about not being afraid to try new things and learn from what you've done. If you're stuck in a bit of a rut and need to realign your life goals this is worth a read.
Jeremy looks at a better approach to web components.
Also known as the bits we do anyway but fail to charge the client for them. It's not that the client needs to be charged more... we would do these as part of the build anyway, but I think it's important that they understand all the things we do for them.
Can mobile web provide an alternative to the dominant platform in the mobile market? Yeah I'm pretty sure it can do.
A few different approaches to ensure that even if you're site isn't loading quickly the user believes it's loading faster.
Over the past few months Service Workers have been covered quite a lot. Recently a whole bunch of clever folks met up in the Mozilla offices to talk about the future of the spec. Jake has written up notes and urges anyone to contribute feedback to help shape the direction in the future. It's good to see there were people from Mozilla, Google, Microsoft, Apple, Samsung and Facebook.
A great insight into the world of online nerdy article publishing. There is also a clear hint at the end that we can all start contributing a membership to Smashing in the future should you find yourself in a fortunate financial state.
Save even more time on your page load by taking advantage of push for your CSS and JS rather than relying on rel=preload.
I'm going to be watching this closely, Christian Heilmann always has very strong opinions around the way things should be done and I have to admit I'm surprised his first overview of AMP is glowing... I'm keen to hear more.
Tutorials
One of my biggest complaints with implementations of frameworks like React is their poor delivery when things go wrong and JS fails. This is a great article about how to implement some progressive enhancement techniques to improve on them.
The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.
If you've been frustrated with the inability to upload SVG's into the Wordpress Media section then this article is for you!
Sarah Drasner goes through her process of ensuring that the SVG's she's working on are as performant as possible. In fact using these techniques she managed to drop a page load from 10s down to 2s. Bravo Sarah, bravo.
If you want your PNG as small as it can possibly go then you need to read this tutorial and ensure you're following the right steps
Tools & Resources
A Firefox extension for seeing the grid lines created by CSS Grid.
This website tells you all about your current devices and all of it's capabilities (including the browser)
A Sass mixin for creating angled edges on sections with SVG
Podcasts
This week we talk about Offline Analytics, new policies and an amazing way to do front end web testing.
In the very first podcast we talk about what you need to do to make your very first podcast. Meta.
Finally
That's all for this week. Thanks for being an awesome subscriber and please feel free to share this with your friends/bosses/co-workers.... but totally feel free to rip it off and make it look like your own :)
See you next week!
Cheers,
Justin.
