This site, made by the friends of Google Fonts, cover everything about Variable Fonts and show you how to get started. Google Fonts have even included variable fonts as one of the filter options on it’s own site. BEWARE though, make sure you also read the performance article about Variable Fonts below and understand when […]
A great round up of what CSS Viewport Units can offer you along with a whole bunch of useful examples on how and when to implement them.
Ann takes a look at the Roboto Variable Font compared against loading static versions of the Font to see which has the better performance. As with most things, it depends is really the answer, but this should make you think twice before automatically reaching for a variable font (and it helps you understand what you […]
The Page Visibility API is useful for detecting the visibility state of the page. We can listen to the visibilitychange event and then get the visibility state with document.visibilityState and so what we want with it. How can you use it? Well imagine you’re playing a video and then scroll away from it, or maybe […]
A step by step tutorial that shows you a variety of techniques to make the front-end of your site feel faster.
A really clever approach using a combination of Grid layout and nth-child declarations produces this lovely looking responsive magazine layout. When I first came across CSS Grid I really struggled to understand how it was going to change the way in which we built our sites until I took some time to put the periodic […]
If you’re anything like me you will have heard the term “Virtual DOM” mentioned in a million different tutorials and articles, and probably mixed up the use of the term Virtual and Shadow DOM assuming they’re the same thing (or maybe that was just me). I’ve never really taken the time to properly understand what […]
In this piece Brian talks about the “Container Queries” problem, tries to shine some light on some misconceptions, and tells you about the state of things.
This isn’t so much as a bit of news to update you with, but rather an awesome resource that you can use. I’ve always been fine with technical side of constructing a site. I get the architecture requirements, the content matrix, but when it comes to including imagery I used to just forget about it. […]
I don’t like to say things are “Easy” because for someone getting started things are rarely ever easy. This is the name of a series that will help take you through the steps you need to get your site up and secure.
Positioning things within a browser is easy… but positioning where you actually want them to go…. well that’s a whole different story. This tutorial will help take the complexity out of positioning and make it an easier process for you to build your sites.
Frank Chimero’s new redesign has been a fascinating read. This article he looks at how the grid will come together, and if you like that check out his post about the footer too.
ResizeObserver has hit WebKit Safari Technology Preview releases by default as of version 97l. Rather than focus on how slow webkit were to enable this feature (Chrome released this in Jan 2018) let’s rejoice in the fact that another browser supports this (Chrome, FF, Edge, Opera… all desktop). The article has a great example and […]
I love this piece from Matthias and I can’t echo his words enough (or Sara’s linked to in the post). “Write about what is most important to you in the first place and create the opportunity for people to learn and reach their own conclusions. Oh, and don’t forget to publish your work. Ideally on […]
Stack elements easy with display:grid… although you can do the same thing with display:block; — BUT that’s not really what Stefan is doing in this article, instead it’s moving the elements out of the regular content flow and setting them to grid positions that you would have otherwise required absolute positioning to achieve.
The idea of the man-month (need not be a man) is that you can not simnply add more developers to a project to shorten the delivery time, and in fact that adding more people will delay delivery further. The article author, John Foreman who is Chief Product Office at Mailchimp (and therefore has my undivided […]
Most of you these days will focus on one or more of the three key metrics when it comes to performance: First Contentful Paint (is it happening), First Meaningful Paint (is it useful), and Time to Interactive (can I use it?). Those have paved the way for three new metrics that will are worth looking […]
Designing an information architecture with input from multiple stakeholder groups can feel like a NASA-level effort. This article shares thoughts on how to keep things organised while working systematically.
Microsoft Edge is now shipping with Chrome running it behind the scenes. For the first time in a long time a Microsoft browser is once again available on MacOS. I’ve installed it, tried it, and now I’m not likely to reopen it unless I need to debug something.
Chris looks at the adventure of laying out three boxes with a variety of content using Flex box and how different settings will impact the layout. One interesting approach that I’ve never done before is setting display:block on the elements when you want them to stack vertically over using flex-direction: column;
Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.