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! Sponsorship Studio Press – Breakthrough Pro 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. Articles Firefox 71: A year-end arrival There are soooo many great releases in Firefox in #71. My top three are SubgridColspan (yes, it’s been available in other browsers for ever)Multiline console editing & Blocking render request updates (that’s technically four). Thinking about color 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. Six Web Performance Technologies to Watch in 2020 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. The Fastest Homepages in Higher Ed A top ten countdown to the fastest University website. Dealing with Ads in 2020 Firefox’s fight for the future of the web Tutorial Spanning and Balancing Columns 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. Use CSS Subgrid to layout full-width content stripes in an article template 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. An Introduction to Variable Fonts 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. Motion Paths – Past, Present and Future 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. Simplified Fluid Typography 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. Building a Website Screenshot API 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. The ugly truth about optimising beautiful images 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. Performance Tips for Background Video 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 Binary Music Player 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. Diagram.Codes Describe your diagrams with a simple text language and automatically generate an image you can export. CSS Layout A collection of popular layouts and patterns made with CSS. HEAD – A free guide to <head> elements 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?