If you have wrote CSS for fonts before you have probably experienced having to introduce a lot of media queries for different breakpoints.

A designer will provide designs for mobile/desktop and then the developer ends up asking “what about tablet?”, sound familiar? The output of those decisions could end up like this:

:root {
--heading-font-size: 3em;
--heading-font-size-tablet: 6em;
--heading-font-size-desktop: 9em;
}
body {
font-size: 16px;
}
h1,
.h1 {
font-size: var(--heading-font-size);
}
@media screen and (min-width: 48em) {
h1,
.h2 {
font-size: var(--heading-font-size-tablet);
}
}
@media screen and (min-width: 64em) {
h1,
.h2 {
font-size: var(--heading-font-size-desktop);
}
}

With technology changing so fast and new devices being released everyday our websites have to try and cater for those new screen sizes. Media queries solve only half the problem by setting fixed breakpoints at certain screen sizes. What if we could just make our fonts scale with no media queries and it’s implemented in one line of css? This is where CSS clamp() comes into the mix. …


The other day I was building a storybook page component and I was having issues where the page had a useEffect hook that hit an api from the dev environment to populate the state. There was a few issues with this because the data I was getting back needed an Id so it could a lookup in the database to find the record relating to the Id.

This to me gave me a few red alerts because I couldn’t make my story look the way it would on the website. …


On my personal website I use Medium as my content platform so I can channel my content via multiple channels. This is great because it allows me to take advantage of medium’s rich text editor and the implementation is really easy to do in 11ty.

Tech Stack

Website

The website is built by a popular framework called 11ty which is just a simple static site generator that helps you build Jamstack websites. It gets the medium data at the build time so it can build the blog pages before deploying them to Netlify.

Problem

The problem with this approach is that my content has a dependency on Medium to trigger a webhook that will trigger my Netlify build but it doesn’t have anything like that unless you upgrade your account. …


Image for post
Image for post

Minifying html is a really useful feature that can improve TTFB on the page and with 11ty it is very simple to do. In the eleventy.js config file we need to add a transform to the config which will check if the output is a .html file and if it is we will use an npm plugin called html-minifier to compress our html code.


Lazy loading is a concept where you only load the images within the viewport of the device the user is in. As the user navigates around the site, images will load in on demand. This makes a massive improvement on the page weight, which then has a domino effect on the load time due to less requests coming in on initial load of the page.

Image for post
Image for post

Let’s go through how implementing the current way of lazy loading.

Implementing lazy loading

My go-to plugin is called LazySizes because it is really easy to setup, has multiple add-ons, features that extend the current functionality and it is lightweight. …


How a font works in the browser?

Fonts have the potential to be extremely slow. The more you include the more it can impact multiple metrics such as page weight, page load, first paint and first contentful paint.

Image for post
Image for post

What performance issues can occur?

Chain requests

A chain request is when a resource that is required by another file instead of the document. When you add font-face inside a css file it will have a dependency on the css file to load before it can load the font in the browser. This can be a problem especially on slow connections because the HTML could take a second to load, then a second for your CSS and then an extra 1–2 seconds for the fonts to load. …


Day one was focused around CSS and each talk was truly inspiring. Here are a couple of talks that really stood out for me.

Image for post
Image for post
Conference main room (https://www.dotjs.io/)

Sarah Dayan — Utility based design systems

The first talk was about Utility based design systems. Sara explained how to build design systems/style guides more efficiently using the utility based classes. The talk went over how using utility based classes can not only improve performance on the CSS bundle but it can also provide a better html output via Gzip.

What I liked about this talk was the fact that Sara made the idea of using utility based classes very reasonable because it has performance benefits from a css/html prospective and to me thats a big win! Like any other developer, I hate repeating myself so if I can write those styles once and then use those class names wherever on the site it is a big win. …


React refs are useful for when we have to set focus to an element after the user has interacted with it. In my case, I needed to use refs for setting focus to the correct accordion item when I selected/used arrow keys.

The problems I faced while doing this was a mixture of having issues with passing down refs into my components but also having one ref that represented an array of items just as you would in a none react app using document.querySelectorAll().

The problem

When there is only one ref we tend to simply assign our ref value with the variable that creates the useRef function. …


Image for post
Image for post

Yesterday I spent some time learning about how to use the context and when I read the docs I thought, “this sounds extremely complex for something that does a simple thing”. I definitely felt like this at first:


Image for post
Image for post

Offline is becoming a standard thing to do in web applications because they allow your website to feel like an app. In the modern web most things are doable in an app can now be done on the web.

The progressive web app follows 3 principles:

  • Reliable — the application needs to load instantly and never show the offline dinosaur. The web application should be able to handle anything that is thrown at it so having a network fallback from the application is a must.
  • Fast — it must respond quickly to user interactions. The animations should feel smooth and there are no “Jank” when the user scrolls down the page. …

About

Matt Claffey

Advocate for Site Speed, PWA’s and Accessibility and UI Libraries

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store