RWD Weekly #447
Hello again, welcome back to RWD Weekly #447.
Our feature site this week comes from a course which I’ve signed up for called The ultimate Three.js course. It’s not a sponsored spot so I won’t tell you how amazing the course looks, but I can’t wait to get started and build out my very own little galaxy.
Let’s get linking!
Sponsor
Authority Pro Theme Package
Authority Pro perfectly highlights your knowledge, years of experience, and acquired wisdom. Even if it’s early in your journey toward building expertise and trust, this carefully-constructed design will accelerate how quickly your audience grows.
Article
An Opinionated Guide to Performance Budgets
Performance budgets are one of those ideas that everyone gets behind conceptually, but then are challenged to put into practice – and for very good reason. Web pages are unbelievably complex, and there are hundreds of different metrics available to track. If you’re just getting started with performance budgets – or if you’ve been using them for a while and want to validate your work – this post is for you.
A new history API, “app history”
The web history API is very useful when it comes to most web use cases, but with the rise in webs applications the benefits aren’t always there. There is a new proposed API layers to go on top of the existing API called appHistory.
Web Frameworks: Why You Don’t Always Need Them
There’s a tonne of different ways you can build a site without frameworks these days, but is that the right way to go? I was chatting to a virtual colleague today about how this newsletter got started, and how it’s much easier to build responsive websites today. But, with that ease, it takes me longer to get a project setup then it did with just a HTML page and a CSS file. In making things easier, we’ve just shifted the complexity.
Front-of-the-front-end and back-of-the-front-end web development
Brad has such a good head on his shoulders and I’m nodding along with the breakdown between the ends of web development. I particularly like both being responsible for writing unit tests (which in my opinion is the least favourite part of the work).
No news is… a sign of a stagnating Internet
Apparently if you’re in Australia you’re not allowed to post news links into Facebook any more. This is off the back of the Australian Government passing legislation around what Google and Facebook can republish and the cost to those companies for republishing that content. I can’t see Australia sticking with things the way they are, but it’s a bold move.
A History of the Web in 100 Pages
John Allsopp, who famously wrote a dao of web design, has begun a new project. A documentary about the web told through 100 web pages. This is the first in the series and covers the first three web pages in the list, can you guess what the first one is?
Tutorials
Maximally optimizing image loading for the web in 2021
In this post Malte outlines 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. YAY, performance and images in one tutorial.
How to use and feature-detect CSS grid masonry layout
This post shares what you need to do to get started and implement masonry layout in your sites, and it explains feature detection in CSS and JavaScript. It’s not going into the nighty-gritty details of masonry grid layouts. If you want to dive into the topic, Stefan has included more links at the end of the tutorial.
Understanding Z-Index in CSS
A very clever and informative journey through Z-index using kids, floaty toys, paddling pools, ducks, and lakes. Ahmad breaks these confusing systems down into easy to understand chunks and you always walk away with a better understanding. If you like this article you’ll love his book too!
Resources & Tools
Prince 14
While I cringe every time someone asks me to upload and link to a PDF on a website, I know there are use cases for people wanting to download a PDF VERSION of something. That’s where Prince comes in, which gets its name from what it does… Print from CSS. There’s a new release which includes, colour emoji and SVG fonts, support for calc(), new column and page float capabilties and formatting with JS.
Github1s
Just add 1s after github and press Enter in the browser address bar for any repository you want to read.