Detecting if a page is cached

Detecting on the client side whether a page was served from Cache can be an important feature for your website. You don’t want folks reading stale news if you’re updating it frequently, your article might have had a refresh, you might be serving up live content that is static. I feel this will mainly occur […]

Read more

Debugging CSS Grid – Part 1: Understanding implicit tracks

Michelle explains exactly what implicit tracks are (tracks that are formed without you specifying them in the CSS) and how they might break certain layouts you are looking to achieve. Great article with some valuable work arounds (and nice demos)

Read more

The Dark Side of the Grid (Part 2)

The article is named after the Dark Side of the Moon album from Pink Floyd. I don’t think there’s any dark sides to CSS Grid, but there are a number of areas you should be aware of when getting into Grid which this article does well to point out. They’re not bad or negative things, […]

Read more

Gatsby site search with Lunr.js

One of the downsides for a static site is that a search capability is tough to come by. This tutorial looks at using a tool called Lunr.js (note the similarity to Solr) on how you might use this with your static site.

Read more

Scraping Burned Toast

Google has recently proposed a new element into the HTML ecosystem, the <toast> element. This would be used to semantically encapsulate any elements that provide a notification kind of popup (all I need is for people to have more reasons to use notification popups). In this post, Adrian covers the timeline and the backlash in […]

Read more

Truncating Multi-line Text with CSS

-web-kit-line-clamp allows you to specify the number of lines shown using CSS. Does this mean that designers can get away with perfectly uniform content elements on the page designs? No it does not, but it’s still pretty cool. Support coming in Firefox soon

Read more

The “Inside” Problem

I love an edge to edge background colour with text content well positions inside. But then I want to break out the image to go full width, or have two images side by side that push outside the text container width. Chris takes a look at the different scenarios and how you might look to […]

Read more

Why we prefer CSS Custom Properties to SASS variables

CodyHouse provide some practical examples of why they decided to keep their CSS variables inside of the CSS Custom Properties. This spans color schemes, typography, spacing, and vertical rhythm and does well to also pull out the catch (browser support)

Read more

Digging Into The Display Property: Grids All The Way Down

Subgrids are an exciting addition to the CSS Grid specification and as we see it roll out across browsers you’re going to find uses for it. Rachel looks at how they can effect a simple card layout.

Read more

Cloudflare Image Resizing: Simplifying Optimal Image Delivery

Cloudflare continue the performance party this week with a new image resizing tool to join their already impressive set of capabilities. Unfortunately this is only available to Business and Enterprise customers, so if you’re a Pro or Free user then take a look at our feature sponsor this week for an idea about where you […]

Read more

AMP as your web framework

AMP just confuses me now. They seem to have pivoted their approach and changed their purpose. Apparently it’s not another format of the web, it’s not an SEO thing (yeah it is), and isn’t a replacement for HTML (except for the HTML replacement elements). AMP seems to be struggling to find its footing as developers […]

Read more

A report from the AMP Advisory Committee Meeting

For the longest time I’ve been sharing Terence’s posts about AMP, all of which have been a negative outlook towards the project. Terence now sits on the Advisory Committee for AMP (keep your friends close and all that) and they recently met in person in London. I’m glad someone like Terence is part of the […]

Read more

Building the future of email with AMP

After watching a colleague wrestle with trying to create a reasonably good looking email I can see the use of AMP in email becoming something that catches on. The added bonus is that it won’t receive as much pushback as AMP received when trying to take over the standard HTML pages.

Read more

Building the Squarespace Image Filters

Squarespace is still the number one go-to-tool that I recommend to friends when they ask me if I can help them build a website (in fact my friend even set up her own upholstery side business on her own and she often refers to herself as technically challenged). They’ve recently improved their image filters through […]

Read more

Beyond Tellerrand – Düsseldorf 2019

I’m excited to say that I’ve sorted my flights and tickets to what I would call the best conference in Europe. For those of you that don’t know about Beyond Tellerrand, it roughly translates to beyond the edge of the plate and certainly pushes my mind past the edge of what I thought was possible […]

Read more

The WebAIM Million

In February 2019, WebAIM conducted an evaluation of the home pages for the top 1,000,000 web sites using the WAVE stand-alone API (with additional tools to collect site technology parameters). While this research focuses only on automatically detectable issues, the results paint a rather dismal picture of the current state of web accessibility.

Read more

Fancy new selectors within groups can break your CSS rule

Just when you think CSS is completely forgiving in its syntax here is an example where it will ignore your CSS rules. I would have thought it would skip over selectors it didn’t recognise, but it seems that if one is invalid (not recognised) it skips the whole group and rules altogether.

Read more

Interactive Typography cheatsheet

This is a great example where someone takes something amazing that has been created and available on the web and reproduces it to make it even more amazing. Find, learn, re-purpose, repeat. This is just the article on the process, the cheatsheet itself is in the tools section below

Read more

How @supports Works

@supports is great for creating progressively enhanced features within CSS. A few years ago I was annoyed with @supports because a lot of the CSS features I wanted to test for weren’t supported in browsers that also didn’t support @supports, nightmare! Fortunately there’s only two potential browsers you’re supporting (I hope) that don’t have @supports […]

Read more

Firefox 65 release

What a cracker jack box of amazing that is Firefox 65. This could be a newsletter edition on its own, but for now I’ll list my highlights. CSS Flexbox inspector to allow you to see where/why items are sitting on a page, their flex state and the space available, a great edition to the existing […]

Read more

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.