Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already do it for the most part, but there is just one thing that makes it hard: doing the vertical-staggering and having a left-to-right source order. So that’s what this new ability will solve in addition to it just being less hacky in general.
You can already test a partial implementation in Firefox Nightly by enabling layout.css.grid-template-masonry-value.enabled.
I like the grid-template-rows: masonry; syntax because I think it clearly communicates: “You aren’t setting these rows. In fact, there aren’t even really rows at all anymore, we’ll take care of that.” Which I guess means there are now rows to inherit in subgrid, which also makes sense.
I was going to add a CodePen logo but there is already one in there at 375 Bytes. I’ve got one at 208 Bytes, based on a logo update David DeSandro did for us a couple years back.
Math.random() is an API in JavaScript. It is a function that gives you a random number. The number returned will be between 0 (inclusive, as in, it’s possible for an actual 0 to be returned) and 1 (exclusive, as in, it’s not possible for an actual 1 to be returned).
Math.random(); // returns a random number lower than 1
This is incredibly useful for gaming, animations, randomized data, generative art, random text generation, and more! It can be used for web development, mobile applications, computer programs, and video games.
Whenever we need randomization in our work, we can use this function! Let’s look at eight different ways we can use it. These examples are all from different authors doing something interesting with this API.
Animation
To spawn an object and animate it, we use Math.random. The neon lines form spontaneous hexagons but randomization is also in its generative sparks.
Computer-generated music
This program takes the traditional melody of “Auld Lang Syne” and plays random notes from it in piano. A change package is created from the count data and a random number is generated to select a value. The octave is also randomly selected.
Display a random image
Images are stored in an array. A number is generated and multiplied by the number of images in the array via array.length. Then Math.floor rounds the value to a round number and sets the image src in the HTML when the page is loaded or the button is clicked.
Random background color
This is where the magic happens:
const random = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
The first line of code randomly shuffles the array and the second line returns a random umber between 0 and 10. In the example of a random color background, the range of colors and specifics such as hues, saturations, and shades can be set.
For another method for generating a random hex color, check out this article by Chris Coyer.
Generative art
In this morphing fractal curve, Math.random is used twice to set the colors for the gradient and once more for the max radius of the curves. This is a great way to construct an entirely new appearance with every iteration!
Word generator
We replace the header with a randomly selected word from an array using Math.random:
var word = words[Math.floor(Math.random() * words.length)] + "!";
This is a lot like the random image example — the perfect sort of practice for beginners!
API key generator
Here’s a super real-world practical use case for random numbers! The demo generates 16 random numbers to create a universally unique identifier (UUID) that can be used as a key that provides access to an API.
Text scramble
A few phrases are stored and displayed in sequence, separated by an animation that appears to scramble the letters with random characters between phrases that are selected by Math.random.
Rock Paper Scissors
In this childhood classic game of Rock Paper Scissors, Math.random is used to generate a randomized move for the computer playing as the opponent. It makes a pick from the three available moves.
Strong Password Generator
This password generator uses Math.random to get a password array filled with uppercase and lowercase letters then adds random digits to the generated password. This is another great practical example!
A couple of notes…
It’s possible you have questions after seeing Math.random in these examples. There are a couple I see come up often…
Is Math.random() really random?
Not exactly. Math.random() returns a pseudo-random number. This algorithm is called a pseudo-random number generator (or PRNG). This means its randomization can be reproduced under certain circumstances.
The randomization is based on the algorithm xorshift128+, which is likely running on your browser.
So, it’s random-ish.
How do you handle repeated values?
There are many methods to achieve unique values without repetition. The Fisher-Yates is one great way to prevent getting the same number twice by shuffling the sequence. Math.random will select a value from the shuffled array of a finite sequence demonstrated by the code snippet below.
function shuffle (array) {
var i = 0
, j = 0
, temp = null
for (i = array.length - 1; i > 0; i -= 1) {
j = Math.floor(Math.random() * (i + 1))
temp = array[i]
array[i] = array[j]
array[j] = temp
}
}
Is Math.random() the same as WebCrypto?
As you’ve seen from this article, Math.random() is awesome! However, if you dealing with sensitive applications and need a more secure method of randomization, I’d recommend WebCrypto. Reasons you may want to use WebCrypto include temporary verification codes, random password generation, randomized lottery numbers, etc.
If you need randomization for the purposes of cybersecurity, cryptography, or statistics , use the function window.crypto.getRandomValues and check out Mozilla’s documentation on the WebCrypto API.
Last week, we took you into the future with SEO expert Britney Muller to explore link prospecting in 2021. This week, we're going back in time — all the way to 2017 — for her concrete advice on an important part of building links: image link building.
Image link building is a delicate art. There are some distinct considerations from traditional link building, and doing it successfully requires a balance of creativity, curiosity, and having the right tools on hand. Let's dive in!
Click on the whiteboard image above to open a high-resolution version in a new tab!
Video Transcription
Hey, Moz fans, welcome to another edition of Whiteboard Friday. Today we're going to go over all things image link building, which is sort of an art. I'm so excited to dig into this with you.
Know your link targets
So first and foremost, you need to know your link targets:
I. Popular industry platforms - top pages
What are those top platforms or websites that you would really like to acquire a link from? Then, from there, you can start to understand who might be influencers on those platforms, who's writing the content, who might you contact, and also what are the top pages currently for those sites. There are a number of tools that give you a glimpse into that information. Moz's OSE, Open Site Explorer, will show you top pages. SEMrush has a top page report. SimilarWeb has a popular page report. You can dig into all that information there, really interesting stuff.
II. Old popular images - update!
You can also start to dig into old, popular images and then update them. So what are old popular images within your space that you could have an opportunity to revamp and update? A really neat way to sort of dig into some of that is BuzzSumo's infographics filter, and then you would insert the topic. You enter the industry or the topic you're trying to address and then search by the infographics to see if you can come across anything.
III. Transform popular content into images
You can also just transform popular content into images, and I think there is so much opportunity in doing that for new statistics reports, new data that comes out. There are tons of great opportunities to transform those into multiple images and leverage that across different platforms for link building.
So, from here, we're going to dive into the keyword research part of this whole puzzle, and this is really understanding the intent behind people searching about the topic or the product or whatever it might be. Something you can do is evaluate keywords with link intent. This is a brilliant concept I heard about a couple weeks back from Dan Shure's podcast. Thank you, Dan. Essentially it's the idea that keywords with statistics or facts after the keyword have link intent baked into the search query. It's brilliant. Those individuals are searching for something to reference, to maybe link to, to include in a presentation or an article or whatever that might be. It has this basic link intent.
Another thing you want to evaluate is just anything around images. Do any of your keywords and pictures or photos, etc. have good search volume with some opportunities? What does that search result currently look like? You have to evaluate what's currently ranking to understand what's working and what's not. I used to say at my old agency I didn't want anyone writing any piece of content until they had read all of the 10 search results for that keyword or that phrase we were targeting. Why would you do that until you have a full understanding of how that looks currently and how we can make something way better?
Rand had also mentioned this really cool tip on if you find some keywords, it's good to evaluate whether or not the image carousel shows up for those searches, because if it does, that's a little glimpse into the searcher intent that leads to images. That's a good sign that you're on the right track to really optimize for a certain image. It's something to keep in mind.
Provide value
So, from here, we're going to move up to providing value. Now we're in the brainstorming stage. Hopefully, you've gotten some ideas, you know where you want to link from, and you need to provide value in some way. It could be a...
I. Reference/bookmark Maybe something that people would bookmark, that always works.
II. Perspective is a really interesting one. So some of the most beautiful data visualizations do this extremely well, where they can simplify a confusing concept or a lot of data. It's a great way to leverage images and graphics.
III. Printouts still work really well. Moz has the SEO Dev Cheat Sheet that I have seen printed all over at different agencies, and that's really neat to see it adding value directly.
IV. Curate images. We see this a lot with different articles. Maybe the top 25 to 50 images from this tradeshow or this event or whatever it might be, that's a great way to leverage link building and kind of getting people fired up about a curated piece of content.
Gregory Ciotti — I don't know if I'm saying that right — has an incredible article I suggest you all read called "Why a Visual Really Is Worth a Thousand Words," and he mentions don't be afraid to get obvious. I love that, because I think all too often we tend to overthink images and executing things in general. Why not just state the obvious and see how it goes? He's got great examples.
Optimize
So, from here, we are going to move into optimization. If any of you need a brush-up on image optimization, I highly suggest you check out Rand's Whiteboard Friday on image SEO. It covers everything. But some of the basics are your...
Title
You want to make sure that the title of the image has your keyword and explains what it is that you're trying to convey.
Alt text
This was first and foremost designed for the visually impaired, so you need to be mindful of visually impaired screen readers that will read this to people to explain what the image actually is. So first and foremost, you just need to be helpful and provide information in a descriptive way to describe that image.
Compression
Compression is huge. Page speed is so big right now. I hear about it all the time. I know you guys do too. But one of the easiest ways to help page speed is to compress those huge images. There's a ton of great free tools out there, like Optimizilla, where you can bulk upload a bunch of large images and then bulk download. It makes it super easy. There are also some desktop programs, if you're doing this kind of stuff all the time, that will automatically compress images you download or save. That might be worth looking into if you do this a lot.
You want to host the image. You want it to live on your domain. You want to house that. You can leverage it on other platforms, but you want sort of that original to be on your site.
SRCSET
Source set attribute is getting a little technical. It's super interesting, and it's basically this really incredible image attribute that allows you to set the minimum browser size and the image you would prefer to show up for different sizes. So you can not only have different images show up for different devices in different sizes, but you can also revamp them. You can revamp the same image and serve it better for a mobile user versus a tablet, etc. Jon Henshaw has some of the greatest stuff on source set. Highly suggest you look at some of his articles. He's doing really cool things with it. Check that out.
Promotion
So, from here, you want to promote your images. You obviously want to share it on popular platforms. You want to reach back out to some of these things that you might have into earlier. If you updated a piece of content, make them aware of that. Or if you transformed a really popular piece of content into some visuals, you might want to share that with the person who is sharing that piece of content. You want to start to tap into that previous research with your promotion.
Inform the influencers
Ask people to share it. There is nothing wrong with just asking your network of people to share something you've worked really hard on, and hopefully, vice versa, that can work in return and you're not afraid to share something a connection of yours has that they worked really hard on.
Monitor the image SERPs
From here, you need to monitor. One of the best ways to do this is Google reverse image search. So if you go to Google and you click the images tab, there's that little camera icon that you can click on and upload images to see where else they live on the web. This is a great way to figure out who is using your image, where it's being held, are you getting a backlink or are you not. You want to keep an eye on all of that stuff.
Two other tools to do this, that I've heard about, are Image Raider and TinEye. But I have not had great experience with either of these. I would love to hear your comments below if maybe you have.
Reverse image search with Google works the best for me. This is also an awesome opportunity for someone to get on the market and create a Google alert for images. I don't think anyone is actually doing that right now. If you know someone that is, please let me know down below in the comments. But it could be a cool business opportunity, right? I don't know.
So for monitoring, let's say you find your image is being used on different websites. Now you need to do some basic outreach to get that link. You want to request that link for using your image.
This is just a super basic template that I came up with. You can use it. You can change it, do whatever you want. But it's just:
Hi, [first name].
Thank you so much for including our image in your article. Great piece. Just wondering if you could link to us.com as the source.
Thanks,
Britney
Something like that. Something short, to the point. If you can make it more personalized, please do so. I can't stress that enough. People will take you way more seriously if you have some nugget of personal information or connection that you can make.
From there, you just sort of stay in this loop. After you go through this process, you need to continue to promote your content and continue to monitor and do outreach and push that to maximize your link building efforts.
So I hope you enjoyed this. I look forward to hearing all of your comments and thoughts down below in the comments. I look forward to seeing you all later. Thanks for joining us on this edition of Whiteboard Friday. Thanks.
Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!
from The Moz Blog https://ift.tt/37gzGu2
via IFTTT
There is really no limit to how you can style them. If you don’t like the default focus ring, you can remove that, but make sure to put some kind of styling back.
Here I’ve used a header element for each expandable section, which has a focus state that mimics other interactive elements on the page.
The only browser that doesn’t support this are the Microsoft ones (and Opera Mini which makes sense—it doesn’t really do interactive).
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome
Firefox
IE
Edge
Safari
12
49
No
79
6
Mobile / Tablet
Android Chrome
Android Firefox
Android
iOS Safari
86
82
4
6.0-6.1
But even then, it’s just like all the sections are opened, so it’s not a huge deal:
Wanna style that default triangle? Strangely enough, the standard way to do that is through the list-style properties. But Blink-based browsers haven’t caught up to that yet, so they have a proprietary way to do it. They can be combined though. Here’s an example of replacing it with an image:
Unfortunately, they don’t turn, and there is no way to animate the default triangle either. One idea might be to target the :focus state and swap backgrounds:
But that seems to be limited to WebKit and Blink and, even then, the arrow will return once the item is out of focus even if the item is still expanded.
AVIF, the file format based on the AV1 video codec, is the latest addition to the next-gen image formats. Early reports and comparisons show good results compared to JPEG and WebP. However, even if browser support is good, AVIF is still on the bleeding edge in regards to encoding and decoding. Encoding, decoding, settings and parameters has been well discussed elsewhere.
No doubt, AVIF images generate a smaller payload and are nice looking. In this post, we’ll take a closer look at issues to be aware or before you go all in on AVIF.
1. WebP is Better for Thumbnails
One interesting observation is that for small dimension images, WebP will produce lighter payload images than AVIF.
It’s probably possible to explain why, and tune the encoder to address this case. However, that is not an option for most people. Most people would probably rely on an image optimizer like squoosh.app or an image CDN like ImageEngine. The below comparison uses exactly these two alternatives for AVIF conversion.
We see that WebP will generally produce images with a higher file size than AVIF. On larger dimension images, ImageEngine performs significantly better than squoosh.app.
Now, to the interesting observation. On images around 100px × 100px squoosh.app passes ImageEngine on effectiveness, but then also WebP catches up and for a 80px x 80px image. WebP is actually the most effective image measured in file size.
The test performs relatively consistently on different types of images. For this illustration, this image from Picsum is used.
Pixels
Original JPEG (bytes)
Optimized WebP (bytes)
ImageEngine AVIF (bytes)
squoosh.app AVIF (bytes)
50
1,475
598
888
687
80
2,090
1,076
1,234
1,070
110
3,022
1,716
1,592
1,580
150
4,457
2,808
2,153
2,275
170
5,300
3,224
2,450
2,670
230
7,792
4,886
3,189
3,900
290
10,895
6,774
4,056
5,130
2. AVIF Might Not Be the Best for Product Images with High Entropy
Typically, a product page consists of images of the product, and when a user’s mouse hovers over or clicks on the product image, it zooms in to offer a closer look at the details.
It is worth noting that AVIF will in certain cases reduce the level of detail, or perceived sharpness, of the image when zoomed in. Especially on a typical product image where the background is blurred or has low entropy while foreground, and product, has more detail and possibly higher entropy.
Below is a zoomed in portion of a bigger product image (JPEG, AVIF) which clearly illustrates the difference between a regularly optimized JPEG versus an AVIF image optimized by squoosh.app.
The AVIF is indeed much lighter than the JPEG, but in this case the trade off between visual quality and lower file size has gone too far. This effect will not be as perceptible for all types of images, and therefore will be difficult to proactively troubleshoot in an automated build process that relies on responsive images syntax for format selection.
Moreover, unlike JPEG, AVIF does not support progressive rendering. For a typical product detail page, progressive rendering might provide a killer feature to improve key metrics like Largest Contentful Paint and other Core Web Vitals metrics. Even if a JPEG takes a little bit longer time to download due to its larger file size compared to AVIF, chances are that it will start rendering sooner than an AVIF thanks to its progressive rendering mechanism. This case is well illustrated by this video from Jake Achibald.
3. JPEG 2000 is Giving AVIF Tough Competition
The key selling point of AVIF is its extremely low file size relative to an acceptable visual image quality. Early blogs and reports have been focusing on this. However, JPEG2000 (or JP2) may in some cases be a better tool for the job. JPEG2000 is a relatively old file format and does not get the same level of attention as AVIF, even if the Apple side of the universe already supports JPEG2000.
To illustrate, let’s look at this adorable puppy. The AVIF file size optimized by squoosh.app is 27.9 KB with default settings. Converting the image to JPEG2000, again using ImageEngine, the file size is 26.7 KB. Not much difference, but enough to illustrate the case.
What about the visual quality? DSSIM is a popular way to compare how visually similar an image is to the original image. The DSSIM metric compares the original image to a converted file, with a lower value indicating better quality. Losslessly converting the AVIF and JPEG2000 version to PNG, the DSSIM score is like this:
AVIF has slightly better DSSIM but hardly visible to the human eye.
Right Tool for the Job
The key takeaway from this article is that AVIF is hardly the “silver bullet,” or the one image format to rule them all. First of all, it is still very early in the development of both encoders and decoders. In addition, AVIF is yet another format to manage. Like Jake Archibald also concludes in his article, offering 3+ versions of each image on your webpage is a bit of a pain unless the entire workflow (resize, compress, convert, select, deliver) is all automated.
Also, like we’ve seen, just because a browser supports AVIF, it doesn’t mean that it is the best choice for your users.
Using responsive images and adding AVIF to the list of image formats to pre-create is better than not considering AVIF at all. A potential challenge is that the browser will then pick AVIF if it’s supported regardless of whether AVIF is the right tool or not.
However, using an image CDN like ImageEngine, will to a greater extent be able to dynamically choose between supported formats and make a qualified guess whether WEBP, JPEG2000 or AVIF will give the best user experience. Using an image CDN to automate the image optimization process will take into account browser compatibility, image payload size and visual quality.
Some really refreshing technological comparison writing from Eric Bailey. Like, ya know, everything in life, we don’t have to hate or love everything. Baby bear thinking, I like to say. There are benefits and drawbacks. Every single bullet point here is well-considered and valid. I really like the first in each section, so I’ll quote those as a taste here:
Tailwind Benefit:“The utility CSS approach creates an API-style approach to thinking about CSS, which helps many developers work with it.”
Tailwind Drawback:“You need to learn Tailwind class names in addition to learning CSS property names to figure out the visual styling you want. Tailwind is reliant on, and will be outlived by CSS, so it is more long-term beneficial to focus on CSS’ capabilities directly.”
BEM Benefit:“BEM will allow you to describe any user interface component you can dream up in a flexible, extensible way. As it is an approach to encapsulate the full range of CSS properties, it will allow you to style things Tailwind simply does not have classes for—think highly art directed experiences.”
BEM Drawback:“BEM runs full-tilt into one of the hardest problems in computer science—naming things. You need to not only describe your component, but also all its constituent parts and their states.”
And remember, these certainly aren’t the only two choices on the block. I covered my thoughts on some other approaches here.
Around eight months ago, I started building a framework which would eventually go on to become Halfmoon. I made a post on this very website announcing the launch of the very first version. Halfmoon has been billed as a Bootstrap alternative with a built-in dark mode feature, that is especially good when it comes to building dashboards and tools. All of this still applies to the framework.
However, today I would like to talk about an area of the framework that is a bit understated. I believe our industry as a whole seriously underestimates the value of customization and user personalization, i.e. users being able to set their own design preferences. Chris has written before about knowing who a design system is made for, pointing out a spectrum of flexibility depending on who a system is meant to help.
But it’s more than design systems. Let’s talk about how Halfmoon addresses these issues because they’re important considerations for knowing which framework works best for your specific needs.
Dashboard built using Halfmoon
Who is Halfmoon for?
Before diving in, let’s address an important question: Is Halfmoon the right framework for you? Here’s a list of questions to help you answer that:
Are you building a dashboard, tool, or even a documentation website? Halfmoon has many unique components and features that are specific to these use cases.
Are you familiar with Bootstrap’s class names, but wish that the design was a bit more premium-looking?
Does your users want or expect a dark mode on your website?
Do you dislike dependencies? Halfmoon does not use jQuery, and also has no build process involving CSS preprocessors. Everything is pure, vanilla CSS and JavaScript.
Are you tired of dealing with complex build systems and front-end tooling? This ties in to the previous point. Personally, I find it difficult to deal with front-end tooling and build processes. As mentioned above, Halfmoon has no build process, so you just pull in the files (local, CDN, or npm), and start building.
If you answered yes to any (or all) of these questions, you should probably give Halfmoon a try. It is important to note however, that Halfmoon is not a UI component library for React/Vue/Angular, so you shouldn’t go into it expecting that. Moreover, if you are more fond of purely utility driven development, then Tailwind CSS is a better option for you. When it comes to CSS utilities, Halfmoon takes a middle of the road approach – there are utilities plus semantic classes for common components.
Using CSS custom properties
First, let’s get the easy stuff out of the way. CSS custom properties are incredible, and I expect them to completely replace preprocessor variables in the future. Browser support is already at a solid ~96%, and with Internet Explorer being phased out by Microsoft, they are expected to become a standard feature.
Halfmoon is built entirely using CSS variables because they provide a huge degree of customization. Now, you might immediately think that all this means is that there are a few custom properties for colors sprinkled in there, but it’s more than that. In fact, there are over 1,500 global variables in Halfmoon. Almost everything can be customized by overriding a property. Here’s a nifty example from the docs:
Swapping out a few custom property values opens up a ton of possibilities in Halfmoon, whether it’s theming things for a brand, or tweaking the UI to get just the right look.
That’s what we’re talking about here when it comes to customization: does the system still stand up and work well if the person using it overrides anything. I have written extensively about this (and much more) in the official Halfmoon docs page.
Variables aren’t a new concept to frameworks. Many frameworks actually use Sass or Less variables and have done so for quite a while. That’s still a good and effective way to establish a customizable experience. But at the same time, those will lock into a preprocessor (which, again, doesn’t have to be a bad thing). By relying instead on CSS custom properties — and variable-izing all the things — we are relying on native CSS, and that doesn’t require any sort of build dependency. So, not only can custom properties make it easier to customize a framework, but they are much more flexible in terms of the tech stack being used.
There is a balance to be had. I know I suggested creating variables for everything, but it can be equally tough to manage and maintain scores and scores of variables (just like anything else in the codebase). So, lean heavily on variables to make a framework or design system more flexible, but also be mindful of how much flexibility you need to provide and whether adding another variable is part of that scope.
Deciding what components to include
When it comes to building a CSS framework, deciding what components to include is a big part of that ordeal. Of course, for a developer working on a passion project, you want to include everything. But that is simply not feasible, so a few decisions were made on my part.
As of right now, Halfmoon has most of the components you can find in similar frameworks such as Bootstrap or Bulma. These frameworks are great and widely used, so they are a good frame of reference. However, as I have mentioned already, a unique thing about Halfmoon is the focus on building tools and dashboards on the web. This niche, if you could call it that, has led me to build some unique components and features:
5 different types of sidebars, with built-in toggle and overlay handlers. Sidebars are very important for most dashboards and tools (and a pain to get right), so this was a no brainer.
2 different types of navbars. There is one that sticks to the bottom of the page, which can be used to great effect for action buttons. Think about the actions that pop up when you select items on data-table. You could place those action buttons here.
Omni-directional dropdowns (with 12 different placements, 3 for each direction).
Beautiful form components.
Built-in keyboard shortcut system, with an easy way to declare new ones for your tool.
Tons of utilities. Of course, this is not comparable to Tailwind CSS, but Halfmoon has enough responsive utility classes to handle a lot of use cases right out of the box.
Moreover, the built-in dark mode, huge customizability, and the standard look and feel to the components, should all work together to make Halfmoon a great tool for building web tools and dashboards. And I am hopefully nowhere close to being done! The next updates will bring in a form validator (demo video), more form components, multi-select component, date and time picker, data-table component, etc.
So what is exactly missing from Halfmoon? Well the most obvious ones are tabs, list group, and spinners. But all of these are planned to be added in v1.2.0, which is the next update. There are also other missing components such as carousels, tree navigation, avatars, etc, which are slightly out of scope.
Providing user preferences
Giving end users the ability to set their preferences is often overlooked by frameworks. Things like setting the font size of an article, or whether to use a dark or light theme. In some ways, it’s sort of funny, because the web is catching up to what operating systems have allowed users to do for decades.
Here are some examples of user personalization on the web:
Being able to select your preferred color mode. And, even better, the website automatically saves and respects your preference when the page is loaded. Or better yet, looking at your operating system preferences and automatically accommodating them.
Setting the default size of elements. Especially font size. A small font might look good in a design, but allowing users to set their ideal font size makes the content actually readable. Technically, every modern browser has an option to zoom into content, but that is often unwieldy, and does not actually save your settings.
Setting the compactness of elements. For example, some people prefer large padding with rounded corners, while others find it a waste of space, instead preferring a tighter UI. Sort of like how Gmail lets you decide whether you want a lot of breathing room in your inbox or make it as small and tight as possible to see more content.
Setting the primary color on the website. While this is entirely cosmetic, it is still charming to be able to set your favorite color on every button and link on a website.
Enabling a high contrast mode. Someone pointed this out to me on GitHub. Apparently, many (and I mean many) CSS frameworks often fail the minimum contrast recommended between foreground and background colors on common elements, such as buttons. That list includes Halfmoon. This is often a tradeoff, because overly contrastive elements often look worse (purely in terms of aesthetic). User personalization can allow you to turn on a high contrast mode, if you have difficulty with the default contrast.
Allowing for user personalizations can be really difficult to pull off — especially for a framework — because that would could mean swapping out huge parts of CSS to accommodate the different personalization settings and combinations. However, with a framework like Halfmoon (i.e. built entirely using CSS variables), this becomes trivial as CSS variables can be set and changed on run-time using JavaScript, like so:
// Get the <html> tag (for reading and setting variables in global scope)
var myElement = document.documentElement;
// Read CSS variable
getComputedStyle(myElement).getPropertyValue("--variable-name");
// Set CSS variable
myElement.style.setProperty("--variable-name", "value");
Therefore, user personalization can be implemented using Halfmoon in the following way:
The user sets a preference. That basically means a variable value gets changed. The variable is set with JavaScript (as shown above), and the new value is stored in a cookie or local storage.
When the user comes back to the website, their preferences are retrieved and set using JavaScript (again, as shown above) once the page is loaded.
Here are visual examples to really hammer the point home.
Setting and saving the default font size
In the example above, whenever the range slider is changed, the variable --base-font-size is updated to the slider’s value. This is great for people who prefer larger text. As explained in the previous section, this new value can be saved in a cookie or local storage, and the next time the user visits the website, the user preference can be set on page load.
Setting the compactness of content
Because there are CSS custom properties used as utilities, like spacing and borders, we can remove or override them easily to create a more compact or expanded component layout.
Only two variables are updated in this example to go from an expanded view to a compact one:
--content-and-card-spacing changed from 3rem (30px) to 2rem (20px).
--card-border-radius changed from 0.4rem (4px) to 0.2rem (2px).
For a real life scenario, you could have a dropdown that asks the user whether they prefer their content to be Default or Compact, and choosing one would obviously set the above CSS variables to theme the site. Once again, this could be saved and set on page load when the user visits the website on their next session.
Wait, but why?
Even with all the examples I have shown so far, you may still be asking why is this actually necessary. The answer is really simple: one size does not fit all. In my estimate, around half of the population prefers a dark UI, while the other half prefers light. Similarly, people have wild variations about the things they like when it comes to design. User personalization is a form of improving the UX, because it lets the user choose what they prefer. This may not be so important on a landing page, but when it comes to a tool or dashboard (that one has to use for a long time to get something done), having a UI that can be personalized is a boon to productivity. And knowing that is what Halfmoon is designed to do makes it ideal for these types of use cases.
Moreover, you know how people often complain that websites made with a certain framework (eg Bootstrap) all look the same? This is a step toward making sure that websites built with Halfmoon will always look distinct, so that the focus is on the website and content itself, and not on the framework that was used to build it.
Again, I am not saying that everything should be allowed to be personalized. But knowing who the framework is for and what it is designed to do helps make it clear what should be personalized.
Looking ahead
I strongly feel that flexibility for customization and accounting for user preferences are often overlooked on the web, especially in the framework landscape. That’s what I’m trying to address with Halfmoon.
In the future, I want to make it a lot easier for developers to implement user preferences, and also promote diversity of design with new templates and themes. That said, here are some things on the horizon for Halfmoon:
Here are the big categories of rendering websites:
Client: ship a <div id="root"></div> and let a JavaScript template render all of it.
Static: pre-render all the HTML.
Server: let a live server process requests and generate the HTML response.
They are not mutually exclusive.
A website could statically pre-render 75% of it’s pages (say, blog posts), but the other 25% have a server respond to (say, forums).
A website could statically pre-render all the pages, but have a couple of empty <div>s in there that have client-side rendered content in them (e.g. a dynamically generated menu based on the logged-in user).
A website could be primarily server-rendered, but has caching in front of it such that it behaves statically.
A website could render statically, but then “hydrate” itself into an entirely client-rendered site.
A website could be a mix of server and static rendering, but have dynamic parts similar to client-side rendering, but actually happen in an edge function, so it ends up more like server-side rendering.
Next.js is interesting in that it can do all three. Here’s Tim Neutkens in a recent interview:
Next.js allows you to pre-render pages. It creates HTML on a server at build time with static site generation or uses run-time rendering on the server side. Next allows you to do a hybrid of those. Unlike most other frameworks, you are not bound by, oh, I’m going to build my app completely statically generated. Instead, you’re allowed to have some pages be server-side rendered and some pages be statically generated.
In the new release we make it possible to update these statically generated pages without having to run a new build, rebuilding your whole app.
Cool. Love to see that happening at the framework level. Seems like having to go all-in on one rendering style isn’t practical for a lot of sites.
Client rendering is the most flexible, but comes with all these serious downsides like worse performance, worse reliability, more strain on devices, bad SEO, etc. Static pre-rendering is the most robust, speedy, and secure, but is the most limited. Edge functions on top of static is starting to open doors, but server-rendering is the classic mix of flexibility and speed that has dominated the web for good reason.
Client rendering also opens the door for that “SPA” (Single Page App) feel. I still like that, personally. I like the no-page-refresh feel. It’s makes a site feel snappy and opens the door for page transitions. Gatsby is famous for popularizing hydration, where you get the pre-rendered static bonus, but then the upgrade into SPA as the JavaScript downloads.
I’d love to see the web get to the point where we get all that “good feel” bonus of an SPA without actually having to build an SPA. It’s notable when frameworks provide SPA feels without having to manage much of that yourself, but still, something is managing it and that something is a bunch of JavaScript.
Tom MacWright wrote about that recently in his “If not SPAs, What?” post. Some of today’s alternatives:
Turbolinks … what is the bare minimum you need to do to get the SPA experience without any cooperation from your application?
Turbolinks is like… click link, click is intercepted, Ajax request for new page is made, JavaScript flops out the content on the page with the new content. Super easy to implement, but it’s still JavaScript, and not particularly intelligent about sending less data across the wire.
barba.js and instant.page are alternative approaches to the same sort of problem.
Barba is all about getting page transitions going (more detail on that concept). instant.page is all about pre-loading/rendering pages right before you click then, so even though you get a page refresh, it feels less intrusive (particularly with paint holding). Both are cool, but not quite one-to-one replacements for an SPA. (Even with paint holding, pre-rendering, and lightweight pages, I still don’t think the experience is quite a smooth as an SPA. For example, you still get the page loading spinner.)
So… is the anything else cooking? Kinda. There is <portal>. Possibly too simplified, but here goes: portals are like iframes. They can even be visually displayed just like an iframe. That means the rendering of the URL in the portal is already done. Then you can “promote” the portal to be the active page, and even animate the portal itself while doing so.
I don’t hate it. I can imagine someone building a turbolinks-like library on portals so they are “easy to use” and make a site more SPA-like.
Still, animating a rectangle into position isn’t often what is desired from animated page transitions. Just look at Sarah’s “Native-Like Animations for Page Transitions on the Web” article. That’s what the people want (at least the possibility of it). That’s why Jeremy said not portals the other day when he cheekily said that “[m]ost single page apps are just giant carousels.” He also points to Jake’s navigation-transitions proposal from a few years back.
I love this proposal. It focuses on user needs. It also asks why people reach for JavaScript frameworks instead of using what browsers provide. People reach for JavaScript frameworks because browsers don’t yet provide some functionality: components like tabs or accordions; DOM diffing; control over styling complex form elements; navigation transitions. The problems that JavaScript frameworks are solving today should be seen as the R&D departments for web standards of tomorrow. (And conversely, I strongly believe that the aim of any good JavaScript framework should be to make itself redundant.)
So what’s the best rendering method? Whatever works best for you, but perhaps a hierarchy like this makes some general sense:
Static HTML as much as you can
Edge functions over static HTML so you can do whatever dynamic things
Server generated HTML what you have to after that
Client-side render only what you absolutely have to
A web font workflow is simple, right? Choose a few nice-looking web-ready fonts, get the HTML or CSS code snippet, plop it in the project, and check if they display properly. People do this with Google Fonts a zillion times a day, dropping its <link> tag into the <head>.
Let’s see what Lighthouse has to say about this workflow.
Stylesheets in the <head> have been flagged by Lighthouse as render-blocking resources and they add a one-second delay to render? Not great.
We’ve done everything by the book, documentation, and HTML standards, so why is Lighthouse telling us everything is wrong?
Let’s talk about eliminating font stylesheets as a render-blocking resource, and walk through an optimal setup that not only makes Lighthouse happy, but also overcomes the dreaded flash of unstyled text (FOUT) that usually comes with loading fonts. We’ll do all that with vanilla HTML, CSS, and JavaScript, so it can be applied to any tech stack. As a bonus, we’ll also look at a Gatsby implementation as well as a plugin that I’ve developed as a simple drop-in solution for it.
What we mean by “render-blocking” fonts
When the browser loads a website, it creates a render tree from the DOM, i.e. an object model for HTML, and CSSOM, i.e. a map of all CSS selectors. A render tree is a part of a critical render path that represents the steps that the browser goes through to render a page. For browser to render a page, it needs to load and parse the HTML document and every CSS file that is linked in that HTML.
Here’s a fairly typical font stylesheet pulled directly from Google Fonts:
You might be thinking that font stylesheets are tiny in terms of file size because they usually contain, at most, a few @font-face definitions. They shouldn’t have any noticeable effect on rendering, right?
Let’s say we’re loading a CSS font file from an external CDN. When our website loads, the browser needs to wait for that file to load from the CDN and be included in the render tree. Not only that, but it also needs to wait for the font file that is referenced as a URL value in the CSS @font-face definition to be requested and loaded.
Bottom line: The font file becomes a part of the critical render path and it increases the page render delay.
What is the most vital part of any website to the average user? It’s the content, of course. That is why content needs to be displayed to the user as soon as possible in a website loading process. To achieve that, the critical render path needs to be reduced to critical resources (e.g. HTML and critical CSS), with everything else loaded after the page has been rendered, fonts included.
If a user is browsing an unoptimized website on a slow, unreliable connection, they will get annoyed sitting on a blank screen that’s waiting for font files and other critical resources to finish loading. The result? Unless that user is super patient, chances are they’ll just give up and close the window, thinking that the page is not loading at all.
However, if non-critical resources are deferred and the content is displayed as soon as possible, the user will be able to browse the website and ignore any missing presentational styles (like fonts) — that is, if they don’t get in the way of the content.
Optimized websites render content with critical CSS as soon as possible with non-critical resources deferred. A font switch occurs between 0.5s and 1.0s on the second timeline, indicating the time when presentational styles start rendering.
The optimal way to load fonts
There’s no point in reinventing the wheel here. Harry Roberts has already done a great job describing an optimal way to load web fonts. He goes into great detail with thorough research and data from Google Fonts, boiling it all down into a four-step process:
Preconnect to the font file origin.
Preload the font stylesheet asynchronously with low priority.
Asynchronously load the font stylesheet and font file after the content has been rendered with JavaScript.
Provide a fallback font for users with JavaScript turned off.
Let’s implement our font using Harry’s approach:
<!-- https://fonts.gstatic.com is the font file origin -->
<!-- It may not have the same origin as the CSS file (https://fonts.googleapis.com) -->
<link rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin />
<!-- We use the full link to the CSS file in the rest of the tags -->
<link rel="preload"
as="style"
href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap"
media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" />
</noscript>
Notice the media="print" on the font stylesheet link. Browsers automatically give print stylesheets a low priority and exclude them as a part of the critical render path. After the print stylesheet has been loaded, an onload event is fired, the media is switched to a default all value, and the font is applied to all media types (screen, print, and speech).
Lighthouse is happy with this approach!
It’s important to note that self-hosting the fonts might also help fix render-blocking issues, but that is not always an option. Using a CDN, for example, might be unavoidable. In some cases, it’s beneficial to let a CDN do the heavy lifting when it comes to serving static resources.
Even though we’re now loading the font stylesheet and font files in the optimal non-render-blocking way, we’ve introduced a minor UX issue…
Flash of unstyled text (FOUT)
This is what we call FOUT:
Why does that happen? To eliminate a render-blocking resource, we have to load it after the page content has rendered (i.e. displayed on the screen). In the case of a low-priority font stylesheet that is loaded asynchronously after critical resources, the user can see the moment the font changes from the fallback font to the downloaded font. Not only that, the page layout might shift, resulting in some elements looking broken until the web font loads.
The best way to deal with FOUT is to make the transition between the fallback font and web font smooth. To achieve that we need to:
Choose a suitable fallback system font that matches the asynchronously loaded font as closely as possible.
Adjust the font styles (font-size, line-height, letter-spacing, etc.) of the fallback font to match the characteristics of the asynchronously loaded font, again, as closely as possible.
Clear the styles for the fallback font once the asynchronously loaded font file has has rendered, and apply the styles intended for the newly loaded font.
We can use Font Style Matcher to find optimal fallback system fonts and configure them for any given web font we plan to use. Once we have styles for both the fallback font and web font ready, we can move on to the next step.
Merriweather is the font and Georgia is the fallback system font in this example. Once the Merriweather styles are applied, there should be minimal layout shifting and the switch between fonts should be less noticeable.
We can use the CSS font loading API to detect when our web font has loaded. Why that? Typekit’s web font loader was once one of the more popular ways to do it and, while it’s tempting to continue using it or similar libraries, we need to consider the following:
It hasn’t been updated for over four years, meaning that if anything breaks on the plugin side or new features are required, it’s likely no one will implement and maintain them.
We are already handling async loading efficiently using Harry Roberts’ snippet and we don’t need to rely on JavaScript to load the font.
If you ask me, using a Typekit-like library is just too much JavaScript for a simple task like this. I want to avoid using any third-party libraries and dependencies, so let’s implement the solution ourselves and try to make it is as simple and straightforward as possible, without over-engineering it.
Although the CSS Font Loading API is considered experimental technology, it has roughly 95% browser support. But regardless, we should provide a fallback if the API changes or is deprecated in the future. The risk of losing a font isn’t worth the trouble.
The CSS Font Loading API can be used to load fonts dynamically and asynchronously. We’ve already decided not to rely on JavaScript for something simple as font loading and we’ve solved it in an optimal way using plain HTML with preload and preconnect. We will use a single function from the API that will help us check if the font is loaded and available.
document.fonts.check("12px 'Merriweather'");
The check() function returns true or false depending on whether the font specified in the function argument is available or not. The font size parameter value is not important for our use case and it can be set to any value. Still, we need to make sure that:
We have at least one HTML element on a page that contains at least one character with web font declaration applied to it. In the examples, we will use the but any character can do the job as long it’s hidden (without using display: none;) from both sighted and non-sighted users. The API tracks DOM elements that have font styles applied to them. If there are no matching elements on a page, then the API isn’t be able to determine if the font has loaded or not.
The specified font in the check() function argument is exactly what the font is called in the CSS.
I’ve implemented the font loading listener using CSS font loading API in the following demo. For example purposes, loading fonts and the listener for it are initiated by clicking the button to simulate a page load so you can see the change occur. On regular projects, this should happen soon after the website has loaded and rendered.
Isn’t that awesome? It took us less than 30 lines of JavaScript to implement a simple font loading listener, thanks to a well-supported function from the CSS Font Loading API. We’ve also handled two possible edge cases in the process:
Something goes wrong with the API, or some error occurs preventing the web font from loading.
The user is browsing the website with JavaScript turned off.
Now that we have a way to detect when the font file has finished loading, we need to add styles to our fallback font to match the web font and see how to handle FOUT more effectively.
The transition between the fallback font and web font looks smooth and we’ve managed to achieve a much less noticeable FOUT! On a complex site, this change would result in a fewer layout shifts, and elements that depend on the content size wouldn’t look broken or out of place.
What’s happening under the hood
Let’s take a closer look at the code from the previous example, starting with the HTML. We have the snippet in the <head> element, allowing us to load the font asynchronously with preload, preconnect, and fallback.
<body class="no-js">
<!-- ... Website content ... -->
<div aria-visibility="hidden" class="hidden" style="font-family: '[web-font-name]'">
/* There is a non-breaking space here here */
</div>
<script>
document.getElementsByTagName("body")[0].classList.remove("no-js");
</script>
</body>
Notice that we have a hardcoded .no-js class on the <body> element, which is removed the moment the HTML document has finished loading. This applies webfont styles for users with JavaScript disabled.
Secondly, remember how the CSS Font Loading API requires at least one HTML element with a single character to track the font and apply its styles? We added a <div> with a character that we are hiding from both sighted and non-sighted users in an accessible way, since we cannot use display: none;. This element has an inlined font-family: 'Merriweather' style. This allows us to smoothly switch between the fallback styles and loaded font styles, and make sure that all font files are properly tracked, regardless of whether they are used on the page or not.
Note that the character is not showing up in the code snippet but it is there!
The CSS is the most straightforward part. We can utilize the CSS classes that are hardcoded in the HTML or applied conditionally with JavaScript to handle various font loading states.
JavaScript is where the magic happens. As described previously, we are checking if the font has been loaded by using the CSS Font Loading API’s check() function. Again, the font size parameter can be any value (in pixels); it’s the font family value that needs to match the name of the font that we’re loading.
var interval = null;
function fontLoadListener() {
var hasLoaded = false;
try {
hasLoaded = document.fonts.check('12px "[web-font-name]"')
} catch(error) {
console.info("CSS font loading API error", error);
fontLoadedSuccess();
return;
}
if(hasLoaded) {
fontLoadedSuccess();
}
}
function fontLoadedSuccess() {
if(interval) {
clearInterval(interval);
}
/* Apply class names */
}
interval = setInterval(fontLoadListener, 500);
What’s happening here is we’re setting up our listener with fontLoadListener() that runs at regular intervals. This function should be as simple as possible so it runs efficiently within the interval. We are using the try-catch block to handle any errors and catch any issues so that web font styles still apply in the case of a JavaScript error so that the user doesn’t experience any UI issues.
Next, we’re accounting for when the font successfully loads with fontLoadedSuccess(). We need to make sure to first clear the interval so the check doesn’t unnecessarily run after it. Here we can add class names that we need in order to apply the web font styles.
And, finally, we are initiating the interval. In this example, we’ve set it up to 500ms, so the function runs twice per second.
Here’s a Gatsby implementation
Gatsby does a few things that are different compared to vanilla web development (and even the regular create-react-app tech stack) which makes implementing what we’ve covered here a bit tricky.
To make this easy, we’ll develop a local Gatsby plugin, so all code that is relevant to our font loader is located at plugins/gatsby-font-loader in the example below.
Our font loader code and config will be split across the three main Gatsby files:
Plugin configuration (gatsby-config.js): We’ll include the local plugin in our project, list all local and external fonts and their properties (including the font name, and the CSS file URL), and include all preconnect URLs.
Server-side code (gatsby-ssr.js): We’ll use the config to generate and include preload and preconnect tags in the HTML <head> using setHeadComponents function from Gatsby’s API. Then, we’ll generate the HTML snippets that hide the font and include them in HTML using setPostBodyComponents.
Client-side code (gatsby-browser.js): Since this code runs after the page has loaded and after React starts up, it is already asynchronous. That means we can inject the font stylesheet links using react-helmet. We’ll also start a font loading listener to deal with FOUT.
You can check out the Gatsby implementation in the following CodeSandbox example.
I know, some of this stuff is complex. If you just want a simple drop-in solution for performant, asynchronous font loading and FOUT busting, I’ve developed a gatsby-omni-font-loader plugin just for that. It uses the code from this article and I am actively maintaining it. If you have any suggestions, bug reports, or code contributions, feel free to submit them on on GitHub.
Conclusion
Content is perhaps the most component to a user’s experience on a website. We need to make sure content gets top priority and loads as quickly as possible. That means using bare minimum presentation styles (i.e. inlined critical CSS) in the loading process. That is also why web fonts are considered non-critical in most cases — the user can still consume the content without them — so it’s perfectly fine for them to load after the page has rendered.
But that might lead to FOUT and layout shifts, so the font loading listener is needed to make a smooth switch between the fallback system font and the web font.
I’d like to hear your thoughts! Let me know in the comments how are you tackling the issue of web font loading, render-blocking resources and FOUT on your projects.
