Hey everyone and welcome to week #389 of the responsive design weekly.
We’re heading up to the run into Christmas now and it’s that time of year that I like to try some little side projects as client work slows down before the holidays. There are a tonne of tutorials this week and I’ll be doing a couple of them tomorrow afternoon, I hope you can make some time to do the same!
Right, let’s get linking!
Breakthrough Pro combines a palette of beautiful colors and minimal design in a sleek, modern layout for an advertising or marketing agency. Demonstrate your work, services, creativity, and more—perfect for your next breakthrough moment.
There are soooo many great releases in Firefox in #71. My top three are
- Colspan (yes, it’s been available in other browsers for ever)
- Multiline console editing & Blocking render request updates (that’s technically four).
Most of the articles, in fact all of them, that I’ve posted from cloudflare have been performance related, period. That’s why I loved this article based on their changing colour palette over the years and they use some great tools to get there.
Simon picks his six technologies he thinks will improve on web performance next year. On the list are the JAMstack, Web Assembly, Edge computing and more.
A top ten countdown to the fastest University website.
In this guide we look at how to make elements span across columns inside the multicol container and how to control how the columns are filled.
With the implementation of sub grids we can declare the layouts of our site at the top level of the site and have sub elements align to them as well. This example shows this by aligning elements within an article against the overall grid structure of the page containing the article.
24 Ways is my favourite advent calendar and this year is not disappointing. There are back to back tutorials on Variable Fonts and I highly recommend you starting with the overview from Jason Pamental before following up with Mandy’s.
If you’re looking to get started with including animations along a path (think an acrobatic plane flying across the screen) then this tutorial from Cassie is jammed packed with approaches. Using the latest release of GreenSock, things are a bit more straight forward now.
I loved it when we could declare different font sizes between breakpoints to have the best typography for the given width, but when the typography locks were introduced things go a whole lot better.
After featuring Ire’s article last week about using puppeteer to grab a tonne of screenshots we have another one. Again it’s using puppeteer but this time the resulting screenshots are being dumped into Google storage.
Sometimes when you’re making optimisations to images on a site you won’t see that much of a change to the overall load time or the first significant paint. Often this is a result of some other implementation factor, and if you dig one more layer down you’ll find a way to get the really big savings you were originally after.
There’s some great tips here for background videos, particularly removing the sound track. I’d also add the recommendation of using a tool like Handbrake if you’re more of a GUI person.
Tools & Resources
Well, it’s responsive. Tim Holman, who is in my top 10 favourite people on the internet, produces this great music player which works as 8 bit binary counts upwards. You can change the notes for each bit, loads of fun.
Describe your diagrams with a simple text language and automatically generate an image you can export.
A collection of popular layouts and patterns made with CSS.
Although all the important stuff comes from the <body> tags (the important stuff being the actual content) the things you place inside the <head> are vital for the content actually being seen. This is a great guide to what is vital and important and what each of the elements do. Who’s doing the <body> version?