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.
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.
An amazing video (again) from @heydonworks about what progressive enhancement is, and what it is not. A defy you to not giggle during the video and to not come away with a better way of explaining PE.
Umar has written this great tutorial on how to use some browser API’s to check the capabilities of the device and network, and then use that to load additional (expensive) JavaScript (and as a result probably more expensive/heavy interactions). Let’s take a look at some of the use cases. Device Memory You can retrieve the […]
Recently I rearranged my home office after working for 7 months on a camp table in our main bedroom. We were pretty lucky to have done some work on the house to allow everyone to shuffle around rooms, and I’m really happy with the finished product. This post looks at all the changes that I […]
I’ve literally come across this exact same issue today, except the pattern we’re using is a little more like the pattern you see on https://diversity.fb.com/initiatives/at-facebook/. I’ll also be looking at implementing this sticky approach on the cart element on the Back Pocket Notebooks site as well.
Funny and informative stuff from Heydon. WEBBED BRIEFS are brief videos about the web, its technologies, and how to make the most of them. They’re packed with information, fun time, and actual goats. Yes, it’s a vlog, but it isn’t on Youtube. Unthinkable! The first is all about ARIA.
A great series of posts from Chris around Service workers ranging from an overview of what they can do, how to write them with vanilla js, improving performance, invalidating cache and more.
The content-visibility property is coming to Chome shortly and will help page load performance from within CSS alone. The new property will flag to the browser that it can skip the rendering work for its region until it’s needed. This means that if you’ve got a long list of blog posts, you could offset the […]
Although I use Firefox as my primary browser on the laptop and Safari on mobile and tablet, I do still have a lot of love for Chrome because of its Dev Tools capabilities. In this tutorial, Umar takes you through some of the best bits of Chrome Dev tools this year including some that I’ve […]
Last week there were rumours that this was the case when in fact, it is not. Safari are including Intelligent Tracking Prevention which will impact the ability for sites to track users, however, Google Analytics is a first-party analytics platform in that it stores first-party cookies on the browser for the site.
Five years ago I was really keen to see how our websites were going to take advantage of AR and VR to unleash our content on the world, but in the past two years I’ve been more excited about how voice is going to fit into how we interact online. Abraham has a great overview […]
Bootstrap 5 is hitting alpha and it’s jam-packed with changes. The biggest changes for me is a shiny new logo (very nice), a departure from using jQuery, and the dropping of support for Internet Explorer. You can read about more of the changes (including increased use of CSS custom variables) in this article.
Twitter is hilarious (but not really). I respect Jake and the work he does for the web and this week one tweet of his really took off (in a not so good way). In true Twitter style, I read this post and the comments without watching the video and was annoyed at the end and […]
This tool allows you to drop in a publicly accessible twitter user, and will then run some machine learning across up to 3,200 tweets. This is necessarily the optimum number of tweets, but more to do with the limit of the Twitter API. It looks at your most commonly used words, how positive or negative […]
I’m on annual leave this week and I’m looking for a few online tidbits that I want to try out and learn something new. Eleventy is high on that list so I’m likely to post a few things around that. When getting into these new technologies I always like to initially try and leverage off […]
StackOverflow now has a Dark Mode. This tutorial goes through the entire process from finding the right colours across their brand assets to how they implemented it through the CSS.
This isn’t the usual image tutorial that we feature where the focus is on the responsive code implementation. Instead, Ahmad takes a close look at the different design approaches you can have with images and how they’re done with CSS & HTML.
PostCSS is a tool for transforming CSS with JavaScript. It will auto prefix vendor specific code, add pollyfills to new CSS methods based on your browser support needs and more. Now PostCSS 8.0 will bring new API for plugins, which will make your CSS build faster and keep your node_modules smaller.
If you’re working on the web it’s a good chance you’ve had to write a technical document at some point in your career. These are aimed at engineers and product owners but I think everyone could learn something from these free resources.
Are you interested in the JAM Stack but you’re not really sure how to get started? Have you been working with Hugo, Gatsby, or Jekyll or other static site generators but you want to give Eleventy a go? Well I HIGHLY recommend you signing up to this new course from Andy Bell, currently on Early […]
Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.