My name is Ramazan, and I'm a front-end developer and enthusiast who loves looking at familiar things in web development from new perspectives.

You might have heard of functional programming (FP). It's a paradigm characterised by the use of pure functions and the preservation of data immutability. There are even languages in which FP principles prevail, like Haskell, OCaml, and Elixir. Other languages like JavaScript, Python, and C++ also support this approach, although they're not limited to it.

But an attentive reader will look at the title and ask: "Functional programming is fine. But what does Atomic CSS have to do with it?" I'll answer that now!

The thing is, back when the atomic approach first appeared, it had another name: Functional CSS. Some people still use it quite often today to avoid confusion with other terms with the same name. But why is this approach to writing CSS called functional?

That's the question I'll try to answer in this article. First, I'll describe the basic principles of FP. Then, I'll talk about the basics of Atomic CSS (which I'll refer to here as ACSS), drawing analogies with functional programming. I'll also try to use simple examples to show what problems you can solve by applying Atomic CSS to styling.

When preparing the materials for this article, I relied a lot on this tutorial on FP and this one on Functional CSS.

Well, let's get started!

Prerequisites

To follow along with this article, all you need is a basic understanding of HTML, CSS, and JavaScript. There are also some examples where we'll use the Atomic CSS framework mlut, but you don't have to know its syntax because I've provided the text with the equivalent CSS styles.

What We'll Cover:

1. The Basic Principles of Functional Programming

   • Pure Functions

   • Immutability

   • Function Composition

2. How the Principles of FP Meet Their Incarnation in Atomic CSS

   • Purity

   • Immutability in ACSS

   • Composition

3. Conclusion

The Basic Principles of Functional Programming

Functional programming is a broad field that has been the subject of numerous complex articles and an entire scientific journal. So in my article, I'll focus on exploring only the basic principles of FP and drawing analogies with them in Atomic CSS.

This approach is based on the idea that all the actions we need to perform in a program should be done by calling certain functions and their compositions.

Let me outline the main concepts I'll use to explain the core idea of this approach:

1. Pure functions

2. Immutability

3. Function composition

Pure Functions

A function is called pure if it:

• returns the same value for the same input parameters;

• has no side effects (changes to external values or entities).

Here are a couple of examples to illustrate this:

let c = 10;
let s = 0;

// Pure function
function pureSum(a,b) {
  return a + b
}

// Impure function
function notPureSum (a) {
  s = a + c
  return s
}

The first function is pure because if we enter the same arguments, we'll get the same result. Also, this function doesn't change any global variables and doesn't mutate objects.

The second function doesn't meet the concept of purity on both points. It changes the external variable s and uses another external variable c for calculations, which can change.

Pure functions allow you to write more predictable code. An application can grow and a function with an implicit parameter that can change over time can lead to great difficulties in debugging and maintaining the codebase.

Immutability

Immutability is a principle which states that data objects shouldn't change after they're created. To make changes to data, you need to create a new instance of it and then work with that new copy.

At first glance, it may seem that this approach limits flexibility in the development process and reduces the speed of the program. But in reality, if the language or runtime has optimisations for immutable data, adhering to this principle helps you avoid many errors and use parallel calculations.

Here's a fairly simple example: let's take a React component that renders a task in a to-do list. The state of the task is described by an object. And in order for React to correctly redraw the state of the task component when the user changes something in it, it's necessary to pass as the new state not the mutated old object, but a new instance of the object with the current state. Here is the example where an immutable object is used for the state of the to-do:

import { useState } from "react";

function TodoItem() {
  const [todo, setTodo] = useState({
    text: "Write article",
    done: false
  });

  const toggleDone = () => {
    setTodo({
      ...todo,
      done: !todo.done
    });
  };

  return (
    <div>
      <span>
        {todo.text} — {todo.done ? "✅" : "❌"}
      </span>
      <button onClick={toggleDone}>
        Toggle
      </button>
    </div>
  );
}

export default TodoItem;

Here we'll see that clicking on the button will lead to changes in the state of the to-do and will cause re-rendering of the component. But we could define the function toggleDone() in a different way using mutations of the object:

const toggleDone = () => {
  todo.done = !todo.done;
  setTodo(todo);
};

With such an event handler, the effect will not work because the link to the object is still the same, even though the object itself was mutated.

Function Composition

Function composition involves using the result of one function as an argument for another function. Here's an example of a program that capitalises the first letter of each word:

function compose(f1, f2) {
  return function (str) {
    return f1(f2(str));
  }
}

function makeFirstCapital(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function upperEveryFirst(str) {
  return str.split(' ').map(makeFirstCapital).join(' ');
}

function lower(str) {
  return str.toLowerCase();
}

const capitalize = compose(upperEveryFirst, lower);
const string = 'this sTring should be Capitalized'

console.log(capitalize(string)) // 'This String Should Be Capitalized'

Here, we have defined the function compose(f1, f2), which returns the composition of the functions passed to it in arguments. Next, we use this function to create the function capitalise(), which will capitalise only the first letters of words by composing the functions lower() and upperEveryFirst(). The first one is executed first and returns a string with all lowercase letters to the second function as an argument. The second function capitalises the first letter of each word.

In large projects and when complex calculations are required, such compositions can be larger, and the logic in them can be much richer. In such cases, this approach to calculations helps break down very large transformations into a series of relatively simple and compact functions that are applied one after the other. This makes it easier to develop, refactor, and debug code.

How the Principles of FP Meet Their Incarnation in Atomic CSS

Now that we know a little about functional programming, let's try to answer the question: ‘What does Atomic CSS have to do with it?’ Let's draw an analogy between these approaches at the level of the principles described above.

What is Atomic CSS?

But first, let's take a moment to explain what Atomic CSS is. It's a methodology of styling layouts in which we use small Atomic CSS rules, each of which performs a single action. These classes are called utilities. They usually apply one CSS property, but not necessarily just one.

For example, in the mlut framework, the Bgc-red utility corresponds to the background-colour: red property, and the -Sz50p utility corresponds to two properties at once: width: 50% and height: 50%.

Modern Atomic CSS frameworks, such as mlut and Tailwind, use a so-called JIT engine. This is a component that generates CSS based only on the utilities you used in your markup.

Purity

Purity in CSS is determined by which selectors, or more specifically, classes, are used to style elements. In clean CSS, the behaviour of an element should be determined solely by the classes that are attached to it in the class attribute. This means that, ideally, a stylesheet should not contain selectors such as section or div > ul.

Firstly, they set too general rules, which are likely to be broken or supplemented in one part of the project or another. So when we style specific elements, we'll have to constantly keep these styles in mind in order to understand how to achieve the necessary styling without spoiling anything.

Secondly, the purity of CSS for each specific element is violated. Let's say we have the following markup:

<button class="greeting">Hello!</button>
<div class="wrapper">
  <button class="greeting">Hello!</button>
</div>

With the CSS styles below:

.wrapper > .greeting {
  background-color: green;
}
.greeting {
  background-color: red;
}

As a result, we get that the first button is red, and the nested one is green. It seems pretty harmless in this simple case, but it will cause inconvenience when the project structure grows significantly.

Here we see that the result of the .greeting class's custom styles depends on where the corresponding element is located. This is similar to a function that produces different results for the same input data depending on where it's called.

Atomic CSS allows you to avoid this effect. In this approach, in most cases, styles are applied only to those elements for which the corresponding classes are specified. If you need to make several identical elements, the same utility is specified in the class attribute of each such element.

A similar example can be rewritten in mlut like this:

<button class="Bgc-red">Hello!</button>
<div>
  <button class="Bgc-green">Hello!</button>
</div>

And JIT-engine will generate the following styles:

.Bgc-red {
  background-color: red;
}

.Bgc-green {
  background-color: green;
}

Here we can see that the styles of elements in this approach will depend only on the classes assigned to them.

It's worth noting here that the mlut syntax allows you to do things that deviate from the strict concept of CSS purity. Sometimes this is necessary to create relatively more complex effects.

Let's say we want to implement a card that changes the background colour of the button inside it when hovered. Then we would need to write the following in mlut:

<div class="-Ctx">
  <button class="^:h_Bgc-red">Greeting</button>
</div>

CSS:

.-Ctx:hover .\^\:h_Bgc-red {
  background-color: red;
}

Immutability in ACSS

By CSS immutability, I mean that element styles are not rewritten. Immutability in ACSS means that utilities do not typically mutate each other.

For example, in BEM (Block Element Modifier), the main styles are set by a block or element, and a modifier mutates these styles. In other approaches that use combined selectors, such mutations occur more often and less explicitly.

Let me give you a simple example. Suppose we have a product card that can be in its default state or in a highlighted state. In BEM it would look like this:

<div class="product-card">Card 1</div>
<div class="product-card product-card--selected">Card 2</div>
<div class="product-card">Card 3</div>

.product-card {
  background-color: red;
  padding: 5px;
}

.product-card--selected {
  background-color: green;
}

In this example, we see that the product-card class sets the default background colour of the card to red. And in order to somehow mark the selected card with a different background colour we have to add a modifier class that changes the colour from red to green. It does this by rewriting the background-color property, that is by mutating the block styles.

In the Atomic CSS approach, this problem is solved because utilities allow you to set CSS properties independently of each other and apply modifications without resorting to mutation.

Here's what this example would look like if you used mlut:

<div class="P5 Bgc-red">Card 1</div>
<div class="P5 Bgc-green">Card 2</div>
<div class="P5 Bgc-red">Card 3</div>

.P5 {
  padding: 5px;
}

.Bgc-red {
  background-color: red;
}

.Bgc-green {
  background-color: green;
}

Composition

Functional programming makes extensive use of function composition. In Atomic CSS, function composition is analogous to utility composition when styling elements. Just as in FP we obtain complex behaviour through the sequential application of a set of simple functions, so in ACSS we can obtain non-trivial styling through a set of simple utilities.

As an example, I'll show a simple smiley face made using only Atomic CSS:

<div class="-Sz150 Bgc-yellow Bdrd100p M-a Ps">
  <div class="-Sz20p Bgc-gray Bdrd100p Ps-a T30p L20p"></div>
  <div class="-Sz20p Bgc-gray Bdrd100p Ps-a T30p R20p"></div>
  <div class="W50p H40p Bdb5;s;gray Bdrd100p Ps-a T40p L25p"></div>
</div>

.-Sz150 {
  width: 150px;
  height: 150px;
}

.Bgc-yellow {
  background-color: yellow;
}

.Bdrd100p {
  border-radius: 100%;
}

.M-a {
  margin: auto;
}

.Ps {
  position: relative;
}

.-Sz20p {
  width: 20%;
  height: 20%;
}

.Bgc-gray {
  background-color: gray;
}

.Ps-a {
  position: absolute;
}

.T30p {
  top: 30%;
}

.L20p {
  left: 20%;
}

.R20p {
  right: 20%;
}

.W50p {
  width: 50%;
}

.H40p {
  height: 40%;
}

.Bdb5;s;gray {
  border-bottom: 5px solid gray;
}

.T40p {
  top: 40%;
}

.L25p {
  left: 25%;
}

This is how our result will look:

Thus, by applying the utilities one after another, we even made some small CSS art.

Conclusion

To sum up, I will say that Atomic CSS truly embodies the basic principles of functional programming. Of course, not literally – but in the sense that is relevant for front-end developers and layout designers.

I would be happy to hear your additions and objections – it'll be interesting to read and think about them.

Finally, I would like to say: look at familiar things with a fresh perspective. And, as usual, I wish you success on your exciting journey of front-end development!

Then you experiment with margin: auto;, which centers a div horizontally but doesn’t help with vertical alignment. Before long, you find yourself searching through solutions involving Flexbox, Grid, transforms, and other techniques that appear complicated and inconsistent.

The reality is that CSS does not provide a single universal property that can center everything. Instead, each layout scenario requires the right method, and understanding when to use each technique is the key to mastering CSS centering.

Table of Contents

• First: Understand the Two Types of Centering

• Method 1: Center Inline Content (text, inline elements)

• Method 2: Center a Block Horizontally

• Method 3: Perfect Center (Horizontal + Vertical) with Flexbox

• Method 4: Center Using CSS Grid (The Easiest Method Ever)

• Method 5: Center with Absolute Position + Transform

• Method 6: Vertical Center Single Line Text

• Method 7: The Table-Cell Method (Old but Useful)

• Quick Decision Guide

• Common Beginner Problems (And Fixes)

• Pro Tips You’ll Use Forever

• Summary

• The 7 Methods You Should Memorize

First: Understand the Two Types of Centering

Before diving into centering techniques, it’s important to understand the two types of centering in CSS, because different methods work along different axes. CSS layouts operate on two axes: Knowing which axis you want to center along helps you choose the right approach.

There are two axes in CSS layout:

When someone says “center this element”, they usually mean one of four things:

• Center text inside a container

• Center a block horizontally

• Center vertically

• Center both horizontally and vertically

Each requires a different solution.

Method 1: Center Inline Content (text, inline elements)

This method centers inline content such as text, links, inline images, and sometimes buttons, using the text-align: center; property. This is the simplest centering method in CSS, but it is often misunderstood because it only affects the content inside a block container, not the container itself.

Example

<div class="box">
  <h2>Hello World</h2>
  <p>This text is centered.</p>
</div>

.box {
  text-align: center;
  border: 2px solid #444;
  padding: 20px;
}

Output

Why It Works

When you apply text-align: center; to a parent element, the browser horizontally aligns all inline and inline-block children within that container. This makes it perfect for centering headings, paragraphs, navigation links, or small inline elements, but it won’t work for block-level elements like divs unless their display is changed to inline-block.

So this will NOT work:

.box {
  width: 300px;
  text-align: center; /* does NOT center the box */
}

Real-world use cases

• Center headings

• Center button labels

• Navigation menus

• Card content alignment

Beginner Mistake

Most people try to center a <div> with text-align: center;. This won’t move the div, only its contents.

Method 2: Center a Block Horizontally

This method centers a block element horizontally using margin: 0 auto;, which is one of the oldest and most reliable CSS techniques. It works by automatically distributing the available horizontal space equally on the left and right sides of the element. When you set the left and right margins to auto, the browser calculates the remaining space in the container and splits it evenly, pushing the element into the center.

Works when:

• Element has a width

• Element is block-level

Example, Center a Card

<div class="card">
  I am centered!
</div>

.card {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background: #eee;
}

Output

Why It Works

When you set the elements' margins to auto, the browser calculates the remaining horizontal space in the container after accounting for the element’s width. It then distributes this extra space equally between the left and right margins, which pushes the element into the center. This happens automatically, making margin: 0 auto; a simple and reliable way to horizontally center block elements with a fixed width.

|----auto----|---element---|----auto----|

Browser calculates: left margin = right margin. So the element sits in the middle.

Important Rule

If width is not defined, it won't work:

.card {
  margin: auto; /* won't center , takes full width */
}

Because block elements default to width: 100%;.

Real-world use cases

• Center website layout container

• Center forms

• Center blog content area

Method 3: Perfect Center (Horizontal + Vertical) with Flexbox

This method uses Flexbox to center an element both horizontally and vertically, making it one of the most reliable modern CSS solutions. When you set a container to display: flex;, you activate the Flexbox layout system, which gives you powerful alignment controls. The property justify-content: center; centers the content along the main axis (usually horizontal), while align-items: center; centers it along the cross axis (usually vertical).

Example, Center Login Box

<div class="page">
  <div class="login">
    Login Form
  </div>
</div>

.page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  padding: 40px;
  background: white;
  border: 2px solid #333;
}

Output

Why It Works

Flexbox treats the container and its children as a flexible layout system, automatically distributing space along the main and cross axes. This allows any element, regardless of its size, to sit perfectly in the middle of the container, making it ideal for centering modals, hero sections, and other dynamic content.

This Works Regardless Of:

• Unknown height

• Unknown width

• Responsive layouts

• Dynamic content

That’s why it’s widely used today.

Real-world use cases

Developers commonly use Flexbox centering to place important interface elements directly in the middle of the screen. For example, it helps center modal dialogs, loading spinners, hero section content, and other full-screen UI components. Hence, they remain visually balanced and easy for users to notice, regardless of screen size.

Method 4: Center Using CSS Grid (The Easiest Method Ever)

CSS Grid offers one of the simplest ways to center elements both horizontally and vertically. By setting a container to display: grid; and applying place-items: center;, you can position any child element perfectly in the middle with just a few lines of code. This method works because Grid provides built-in alignment controls that automatically handle positioning along both axes.

Example

<div class="wrapper">
  <div class="box">Centered!</div>
</div>

.wrapper {
  height: 100vh;
  display: grid;
  place-items: center;
}
.box {
  width: 200px;
  padding: 30px;
  text-align: center;
  background: white;
  border: 2px solid #333;
}

Output

In this example, the .wrapper acts as the grid container, and the .box element becomes a grid item. The property place-items: center; automatically aligns the box in the middle of the container, both horizontally and vertically.

100vh means 100% of the viewport height, which is the full height of the visible browser window. When you set height: 100vh; on a container, it expands to fill the entire screen from top to bottom.

Why It Works

The property place-items: center is actually shorthand for two grid alignment properties:

align-items: center;
justify-items: center;

• align-items controls vertical alignment inside the grid.

• justify-items controls horizontal alignment.

By combining both in one line, Grid centers elements in both directions automatically without needing additional layout rules.

When to Prefer Grid Over Flexbox

CSS Grid is ideal when you only need simple centering and don’t require complex layout control. It keeps your code short and easy to read.

Use Grid when:

• You only need to center a single element

• You are not building complex layouts

• You want the simplest and cleanest code

Use Flexbox when:

• You are aligning multiple items

• Layout direction matters (row vs column)

• You need spacing control between elements

Method 5: Center with Absolute Position + Transform

This centers an element using absolute positioning combined with CSS transforms, and it works even when you are not using Flexbox or Grid. In this approach, you position the element with position: absolute; and move it to the middle of its parent using top: 50%; and left: 50%;.

Example, Center Popup

<div class="container">
  <div class="popup">I'm centered</div>
</div>

.container {
  position: relative;
  height: 400px;
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Output

Why It Works

1. top: 50% moves the top edge to the middle

2. left: 50% moves the left edge to the middle

3. translate(-50%, -50%) shifts the element back by half its size

So the center becomes the element’s midpoint, not the corner.

Explanation

Without transform: The element corner sits at the center, which means this places the top-left corner of the element at the center point.

To fix that, you apply transform: translate(-50%, -50%);, which shifts the element back by half of its own width and height. This adjustment ensures the actual center of the element aligns with the center of the container. Developers often use this technique for overlays, modals, tooltips, and floating UI components.

Real-world use cases

• Modals

• Tooltips

• Floating labels

• Overlays

Method 6: Vertical Center Single Line Text

This method vertically centers single-line text inside a container by using the line-height property. When you set the line-height to the same value as the container’s height, the browser places the text in the vertical middle of that space because the line box expands to fill the container evenly.

Example, Center Text in Button

<button class="btn">Click Me</button>

.btn {
  height: 60px;
  line-height: 60px;
  text-align: center;
}

Output

Why It Works

This technique works best for elements with a fixed height, such as buttons, badges, or navigation items. However, it only works reliably when the text stays on one line, because multiple lines will break the vertical alignment.

Limitations

The main limitation of using line-height to vertically center text is that it only works for single-line text. If the text wraps onto multiple lines, the line-height no longer matches the container height for each line, causing the vertical centering to break.

This makes the method unsuitable for paragraphs, headings, or any content that can expand beyond one line, so it’s best reserved for buttons, labels, or other fixed-height, single-line elements.

Method 7: The Table-Cell Method (Old but Useful)

This method uses the table-cell technique to center content vertically and horizontally, a reliable approach for older CSS layouts and email templates. By setting a container to display: table; and its child element to display: table-cell; with vertical-align: middle; and text-align: center;, The browser treats the child like a table cell and automatically centers its content.

Example

<div class="outer">
  <div class="inner">Centered</div>
</div>

.outer {
  display: table;
  width: 100%;
  height: 300px;
}

.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Output

How It Works

• The .outer container acts as a table.

• The .inner element behaves like a table cell.

• Table cells automatically respect vertical alignment rules.

• Combining vertical-align: middle; and text-align: center; perfectly centers the content both vertically and horizontally.

Why Use This Method

• It works in older browsers that don’t fully support Flexbox or Grid.

• It’s especially useful in email templates or legacy layouts.

• No knowledge of height calculation or transforms is required.

Quick Decision Guide

Common Beginner Problems (And Fixes)

Problem 1: “margin auto not working.”

You forgot the width.

width: 300px;
margin: auto;

Problem 2: “align-items center not working.”

Parent needs height.

height: 100vh;

Problem 3: “absolute centering weird position.”

Parent missing positioning.

parent { position: relative; }

Problem 4: Flexbox vertical centering fails

Check direction:

flex-direction: column;

Now vertical/horizontal axes swap!

Pro Tips You’ll Use Forever

1. Flexbox = alignment tool

2. Grid = placement tool

3. Margin auto = layout tool

Different tools, different jobs.

Remember This Rule

• If you are centering one thing, use Grid

• If centering many things, use Flexbox

Summary

CSS centering often feels difficult because beginners expect a single magic property that works in every situation, but no such property exists. Instead, CSS provides multiple layout systems, each designed to solve specific alignment problems.

These include inline alignment for text and inline elements, flow layout for standard block elements, Flexbox for flexible row or column arrangements, Grid for two-dimensional layouts, and positioned layouts for absolute or fixed elements. Once you understand which system applies to your scenario, centering becomes predictable and much easier to implement.

The 7 Methods You Should Memorize

1. text-align: center

2. margin: 0 auto

3. Flexbox centering

4. Grid place-items: center

5. Absolute + transform

6. Line-height trick

7. Table-cell fallback

If you’ve ever struggled to center something with CSS or tried to make columns line up nicely, Flexbox simplifies this dramatically. With just a few properties, you can build modern layouts that “flex” to different screen sizes, without needing to write a bunch of custom media queries.

Developer and teacher Indra (CodeWithIndra) will walk you through every Flexbox property step by step. You’ll learn how to align items along the main and cross axis, reorder elements without changing the HTML, control how items grow and shrink, and finally understand what flex-grow, flex-shrink, and flex-basis are really doing. He also shows real examples from sites like GitHub and DataDog, then demonstrates how to recreate pieces of their layout.

The course ends with two small projects: centering an element vertically and horizontally (the thing everyone Googles at some point) and building a clean navigation bar using only Flexbox.

If you want to improve your front end development skills, this course is a good way to invest a couple hours of your weekend. [2 hour YouTube course]:

PWAs bring the power of the web to your fingertips with the experience of a mobile app. Even better? If you lose internet connection while on the go, the app can still function, showing your previously loaded data and getting updates once you’re back online.

In this tutorial, you’ll learn how to implement a service worker with WorkBox in a weather app using HTML, CSS, and JavaScript. We’ll start by understanding what a PWA is, the core components behind the scenes, especially service workers, and how to use Workbox to supercharge your app with offline capabilities.

Table of Contents

• What We’ll Cover

• What is a Progressive Web App (PWA)?

• What Makes a Web App “Progressive”?

• Components of a PWA

• What is a Service Worker in PWA?

• Why Use Workbox Instead of Manual Service Workers?

• Introduction to WorkBox

• Project Setup

• Creating the Offline HTML Structure

• Styling with CSS

• How to Set Up app.js and config.js

• How to Create a Manifest File

• How to Add WorkBox to Your service-worker.js File

• How to Create your Service Worker in the service-worker.js File

• How to Set Up App Installation

• How to Install the Weather App

• Conclusion

What We’ll Cover

• Setting Up the Project: We'll build a simple weather app using HTML, CSS, and JavaScript. This approach is perfect for this tutorial because it keeps things simple and accessible while focusing on core PWA concepts without the added complexity of frameworks like React or Vue.

• Turning the App into a PWA: Next, we’ll walk through the concept of a Progressive Web App, covering the key features and best practices of PWAs.

• Implementing Service Worker via WorkBox: Finally, we’ll dive deeper into how service workers function and explore why using Workbox simplifies the process.

Here’s what the final application will look like:

Audience

This tutorial is for web developers of all levels. Whether you're new to Progressive Web Apps (PWAs) or just starting to explore service workers, this guide will walk you through the core concepts and demonstrate why using a Google-backed library like Workbox to implement service workers can be more efficient than manual implementation.

Prerequisites

Before you begin

1. Get a free API key from the OpenWeatherAPI website

2. Make sure you’re familiar with HTML, CSS, and JavaScript.

3. If you’re new to PWAs, you might want to read some introductory articles to get a quick overview.

   • Progressive web apps

   • Workbox

What is a Progressive Web App (PWA)?

A PWA is a web application that combines the best of web and mobile apps. It’s built using standard web technologies like HTML, CSS, and JavaScript, but it behaves and feels like a native mobile app on your phone or tablet.

Think of apps like Instagram Web, Twitter Lite, or Spotify Web Player. Even though you’re not using a native app from an app store:

• You can still scroll your feed, view media, and send messages.

• It works even on slow or unstable networks.

• You can “install” it on your home screen and launch it like a regular app.

• You even get push notifications just like a mobile app!

With PWAs, you get the reach of the web and the feel of an app without the heavy storage or installation process.

What Makes a Web App “Progressive”?

A PWA is not just any website. It’s built to progressively enhance the user experience, depending on their device and browser capabilities. Here are the core characteristics that define a PWA:

• Responsive: Works on all screen sizes, that is, phones, tablets, and desktops.

• Reliable: Loads instantly, even when offline or on poor networks.

• Installable: Can be added to the home screen without needing an app store.

• Engaging: Supports features like push notifications and background sync.

Components of a PWA

Before your web app can be considered a PWA, it must include the following:

A Web Application Manifest

The web app manifest is a JSON file that tells the browser about your web app, how it should appear, and behave when installed on a user's device.

Think of it like your app’s business card. It includes details like:

• App name and short name – How your app is labeled on the home screen or app list.

• Icons – Images used for app icons on different screen sizes and resolutions.

• Theme color and background color – Defines the look of your app’s UI and loading screen.

• Start URL – The page that opens when the app is launched.

• Display mode – Controls whether the app opens in a browser tab, fullscreen, or a native-like window.

• Screenshots – Optional preview images that show how your app looks on different devices in app stores or installation prompts.

A Service Worker

This is a script that runs in the background. It handles offline behaviour, caching, background sync, and push notifications needed to make your PWA function.

More details about the service worker will be discussed later in this article.

HTTPS

PWAs must be served over HTTPS. This is not optional. Here’s why:

• It protects users by ensuring secure data transfer.

• It enables important features like service workers and push notifications.

• Browsers won’t allow service workers to register on non-secure origins.

If you're testing locally, you can use localhost (which is treated as secure), But for production, your site must have an SSL certificate.

What is a Service Worker in PWA?

In PWAs, a service worker is a JavaScript file that runs in the background, separate from your main app, and acts like a network proxy. It can:

• Cache resources and serve them offline

• Intercept network requests and apply caching strategies

• Handle background syncs

• Manage push notifications

Think of it as your app’s behind-the-scenes assistant—makes it load fast, works offline, and stays updated, even when you're not looking.

Why Use Workbox Instead of Manual Service Workers?

Service workers are essential in creating a PWA, but getting started with them can be challenging. Writing service worker code from scratch can often be tedious and prone to errors. For example, you'd need to:

• Manually configure caching strategies

• Handle service worker updates

• Write and maintain a lot of repetitive boilerplate code

Workbox, a library from Google, makes things easier by letting developers focus on what matters, without worrying about the complicated parts of service workers.

However, it’s still important to understand how service workers function, since they handle some complex tasks under the hood.

Here are key things a service worker (with or without Workbox) does:

• Install event: Set up cache

• Activate event: Clean up old caches

• Fetch event: Intercept network requests and serve from cache

With Workbox, these are wrapped in easy-to-use functions.

Introduction to WorkBox

Workbox is a collection of libraries that helps developers build efficient service workers quickly, with best practices built right in. It supports strategies like:

• CacheFirst: Load from cache, fall back to network

• NetworkFirst : Try network, fall back to cache

• StaleWhileRevalidate: Serve from cache and update in the background

Understanding Workbox Modules

Workbox is more than just a tool. It is a collection of powerful modules, each designed to simplify different parts of working with service workers. These modules are flexible and can be used in three key contexts:

• Service Worker Context – Inside your service worker file, where you handle caching, routing, and other background tasks.

• Window Context – Inside your main application (the client-side JS), where you register and communicate with the service worker.

• Build Tools Integration – Tools like Webpack use Workbox to generate service worker files and precache manifests during your build process.

Let’s break down some of the most popular and essential modules Workbox offers:

1. workbox-routing

This module handles routing network requests within your service worker. Think of it like a traffic director that listens for fetch events and decides what to do with them.

Use case: Route API requests to the network while routing static asset requests to the cache.

2. workbox-strategies

This is where caching strategies like CacheFirst, NetworkFirst, and StaleWhileRevalidate are used. It provides a clean and consistent API for handling how your app responds to different requests.

Use case: Apply different caching behaviours for images, fonts, or dynamic data with minimal code.

3. workbox-precaching

This module handles precaching by storing static assets during the service worker’s install phase. It makes it easy to cache files ahead of time and ensures that updates are managed efficiently.

Use case: Preload essential assets (like HTML, CSS, and logo images) so your app loads instantly, even offline.

4. workbox-expiration

It is used as a plugin alongside caching strategies. This module adds smart cache expiration. You can automatically remove old or excessive items from the cache based on how long they've been stored or how many items exist.

Use case: Keep your cache size under control without manually tracking and deleting outdated files.

workbox-window

This module is designed for the browser (window) side of your app. It simplifies service worker registration and allows you to communicate with the service worker from your page easily.

Use case: Detect when a new service worker is available and prompt the user to refresh the app to update.

You can use WorkBox via:

• npm

• CDN (which we'll use here for simplicity)

Project Setup

Let's start by creating our project structure:

weather-pwa/
├── index.html
├── style.css
├── js/
│   ├── app.js
│   └── install.js
├── service-worker.js
├── images/
│   └── [your image files and folders here]
├── manifest.json
├── config.js  
└── offline.html

The HTML Structure

First, let's build our index.html file:

<!DOCTYPE html>
<html lang="en">
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="/images/logo.png" type="image/png">
        <meta name="description" content="Simple Weather Progressive Web App" />
        <link rel="stylesheet" href="/styles.css" />
        <title>Weatherly</title>
    </head>


<body>
    <header class="header">
        <img loading="lazy" class="logo" src="images/logo.png" alt="Weatherly Logo">
        <h1>Weatherly</h1>
    </header>

    <main class="main">
        <div class="weather-card">
            <div class="location-container">
                <input type="text" id="location-input" placeholder="Enter city name">
                <button id="search-btn">Search</button>
                <button id="locationBtn">📍 Use My Location</button>
                <button id="installBtn" style="display: none;">Install App</button>
            </div>

            <div id="offline-message" class="offline-message">
                You are currently offline. Weather data may not be up-to-date.
            </div>


            <div class="error">
                <p id="error-message"></p>
            </div>

            <div id="weather-container" class="weather-container">
                <h3>Your last searched location weather:</h3>
                <div class="location-info">
                    <h2 id="city"></h2>
                    <p id="date"></p>
                </div>

                <div class="current-weather">
                    <img loading="lazy" id="weather-icon" src="" alt="Weather icon">
                    <div class="temperature-container">
                        <h3 id="temperature"></h3>
                        <p id="weather-description"></p>
                    </div>
                </div>

                <div class="weather-details">
                    <div class="detail">
                        <img loading="lazy" id="humidity-icon" src="/images/humidity.png" alt="Humidity icon">
                        <span class="label">Humidity</span>
                        <span id="humidity" class="value"></span>
                    </div>
                    <div class="detail">
                        <img loading="lazy" id="wind-icon" src="/images/wind.png" alt="Wind icon">
                        <span class="label">Wind</span>
                        <span id="wind" class="value"></span>
                    </div>
                </div>
            </div>

            <!-- Your location weather -->
            <div class="location-weather">
                <h3>Your location's weather:</h3>
                <div class="weather-info" id="weatherInfo">

                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>Made with ❤️ by <a href="www.linkedin.com/in/damilola-oniyide">Damilola Oniyide</a>
    </footer>
    <script type="module" src="/js/app.js" defer></script>
</body>
</html>

Creating the Offline HTML Structure

The offline.html is the page that users will see when they lose network connection and try to navigate to a page that isn’t cached.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#2196f3">
  <title>Weatherly - Offline</title>
  <link rel="stylesheet" href="/styles.css">
  <style>
    .offline-icon {
      font-size: 5rem;
      margin-bottom: 1.5rem;
      color: #2196f3;
    }

    .offline-message {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .offline-subtext {
      font-size: 1rem;
      margin-bottom: 2rem;
      color: #666;
    }

    .retry-button {
      padding: 0.75rem 1.5rem;
      background-color: #2196f3;
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .retry-button:hover {
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <header>
    <h1>Weatherly</h1>
  </header>

  <main>
    <div class="app-container">
      <div class="weather-card">
        <div class="offline-container">
          <div class="offline-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
              <path d="M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm-2.715 5.933a.5.5 0 0 1-.183-.683A4.498 4.498 0 0 1 8 9.5a4.5 4.5 0 0 1 3.898 2.25.5.5 0 0 1-.866.5A3.498 3.498 0 0 0 8 10.5a3.498 3.498 0 0 0-3.032 1.75.5.5 0 0 1-.683.183zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
            </svg>
          </div>
          <h2 class="offline-message">You're offline</h2>
          <p class="offline-subtext">Please check your internet connection and try again.</p>
          <button class="retry-button" onclick="window.location.href='/'">Retry</button>
        </div>
      </div>
    </div>
  </main>

  <footer>
    <p>Made with ❤️ by Damilola Oniyide</p>
  </footer>
</body>
</html>

Styling with CSS

Now, let's create our style.css file for a responsive and user-friendly design:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.header {
    background-color: #2196f3;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header h1 {
    font-size: 1.5rem;
}


.header img {
    width: 55px;
    height: 55px;
    border: #ffff 1px solid;
    margin-right: 4px;
    border-radius: 10%;
}


.main {
    padding: 1rem;
    max-width: auto;
    margin: 0 auto;
}

.weather-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1.5rem 3rem;
    margin-top: 1rem;
}

/* Location input styles */
.location-container {
    display: flex;
    margin-bottom: 1.5rem;
    justify-content: center;
}

#location-input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    max-width: 240px;
}

#location-input:focus {
    outline: none;
    border-color: #2196f3;
}
#location-input::placeholder {
    color: #999;
}   

#search-btn, #locationBtn {
    background-color: #2196f3;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1rem;
    margin-right: 2.5px;
}


#installBtn {
    background-color: #2196f3;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;

}

#search-btn:focus, #locationBtn:focus, #installBtn:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}
#search-btn:hover, #locationBtn:hover, #installBtn:hover {
    background-color: #1976d2;
}

.error, .loading {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    margin-top: 10px;
    display: none;;
}

.error-message {
    color: #d32f2f;

}
/* Weather display styles */
.weather-container {
    display: none 
}

#weather-icon {
    width: 1000px; 
    height: 100px;
  }

.current-weather{
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.location-weather{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
}


#weather-icon {
    width: 80px;
    height: 80px;
    margin-right: 1rem;
}

.location-info {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.location-info h2,  .current-weather h3, .weather-container h3, .location-weather h3 {
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
}



.location-info p, .current-weather p {
    color: #666;
    font-size: 1.4rem;
}

.temperature-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.temperature-container h3 {
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
}

.temperature-container p {
    color: #666;
    text-transform: capitalize;
}

.weather-details {
    display: flex;
    justify-content: center;
    background-color: #f9f9f9;
    border-radius: 4px;
    padding: 1rem;
}

#humidity-icon, #wind-icon{
    width: 40px;
    height: 40px;
}

.detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1rem;
    text-align: center;
}

.label {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.value {
    font-size: 1.2rem;
    font-weight: 500;
}

/* Error and offline message styles */
.error-message {
    color: #d32f2f;
    text-align: center;
    margin-top: 1rem;
    display: none;
} 

.offline-message {
    background-color: #ffab91;
    color: #7f0000;
    padding: 0.75rem;
    text-align: center;
    margin-top: 1rem;
    border-radius: 4px;
    display: none;
}


/* 5 days forecast weather */
.forecast-container {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
}

.forecast-item {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1rem 4rem;
    text-align: center;
}



footer {
    background-color: #2196f3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 0;
}

footer p, footer a {
    color: #f9f9f9;
    font-weight: 500;
}
/* Responsive styles */
@media (max-width: 480px) {
    .header h1 {
        font-size: 1.2rem;
    }

    .location-container {
        flex-direction: column;
        align-items: center;
        gap: .6rem
    }


    .current-weather {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .weather-container h3,  .location-weather h3, .forecast h3 {
        font-size: 1.5rem;
    }

    #weather-icon {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .forecast-container {
        flex-direction: column;
        align-items: center;
    }
}

How to Set Up app.js and config.js

Now, let's create our app.js file to add functionality to the weather app. Before proceeding, ensure you’ve obtained your API key from OpenWeather. For best practice, store your API key in a separate file like config.js to keep things organized and avoid hardcoding sensitive data.

Here's what your config.js should look like:

export const CONFIG = {
    WEATHER_API_KEY: "WRITE-YOUR-API-KEY-HERE",
};

Ensure you add the config.js file to .gitignore to avoid leaking sensitive information on a public platform like GitHub.

Now let’s move to app.js. This is where the main logic of your weather app will live. You can now reference your API key using Weather_API_KEY from the config.js file.

Below is the structure of your app.js file:

import { CONFIG } from './config.js';
const BASE_URL = `https://api.openweathermap.org/data/2.5/weather?&appid=${CONFIG.WEATHER_API_KEY}&units=metric&q=`;

const cityName = document.getElementById('location-input');
const searchButton = document.getElementById('search-btn');
const weatherIcon = document.getElementById('weather-icon');
const locationBtn = document.getElementById('locationBtn');
const weatherInfo = document.getElementById('weatherInfo');


function getWeatherIcon(condition) {
  switch (condition) {
    case "Clear":
      return "images/weather-icons/clear.png";
    case "Clouds":
      return "images/weather-icons/clouds.png";
    case "Drizzle":
      return "images/weather-icons/drizzle.png";
    case "Rain":
      return "images/weather-icons/drizzle.png";
    case "Mist":
      return "images/weather-icons/mist.png";
    case "Snow":
      return "images/weather-icons/snow.png";
    default:
      return "images/weather-icons/default.png";
  }
}
//Search for weather by city name
async function checkWeatherBySearch(city){
    if(city.length == 0) {
        document.getElementsByClassName('error')[0].style.display = 'block';
        document.getElementsByClassName('error')[0].innerHTML = "Please enter a city name!";
        document.getElementsByClassName('error')[0].style.color = 'red';
        document.getElementById('weather-container').style.display = 'none'; 
        return;
    }
    const response = await fetch(BASE_URL + city);
    document.getElementsByClassName('error')[0].style.display = 'block';
    document.getElementsByClassName('error')[0].innerHTML = "Wait a sec, your location's data will be displayed soon!";

    if (response.status == 404) {
        document.getElementsByClassName('error')[0].style.display = 'block';
        document.getElementsByClassName('error')[0].innerHTML = "City not found! Please enter a valid city name.";
        document.getElementsByClassName('error')[0].style.color = 'red';
        document.getElementById('weather-container').style.display = 'none';       
    } else {
      const data = await response.json();
      document.getElementById('weather-container').style.display = 'block';
      document.getElementsByClassName('error')[0].style.display = 'none';
      localStorage.setItem('lastCity', city);
      document.getElementById('city').innerHTML = data.name;
      document.getElementById('date').innerHTML = new Date(data.dt * 1000).toLocaleDateString();
      document.getElementById("temperature").innerHTML = Math.round(data.main.temp) + "°C";
      document.getElementById("humidity").innerHTML = data.main.humidity + "%";
      document.getElementById("wind").innerHTML = data.wind.speed + "m/s";
      document.getElementById('weather-description').innerHTML = data.weather[0].description;
      const weatherCondition = data.weather[0].main;
      weatherIcon.src = getWeatherIcon(weatherCondition);
    }
}

 // display next 5-day forecast by coordinates
function display5DaysForecast(forecast) {
   const fragment = document.createDocumentFragment(); 
    const forecastWrapper = document.createElement('div');
    forecastWrapper.className = 'forecast';

    const heading = document.createElement('h3');
    heading.innerHTML = "Your location's next 5 days forecast:";

    const container = document.createElement('div');
    container.className = 'forecast-container';

    const addedDates = new Set();
    const today = new Date().toDateString();

    forecast.forEach((entry) => {
      const entryDateObj = new Date(entry.dt * 1000);
      const entryDateStr = entryDateObj.toDateString();

      if (entryDateStr !== today && !addedDates.has(entryDateStr)) {
        addedDates.add(entryDateStr);
        if (addedDates.size > 6) return;


        const condition = entry.weather[0].main;
        const iconSrc = getWeatherIcon(condition);

        const forecastItem = document.createElement('div');
        forecastItem.className = 'forecast-item';

        const date = document.createElement('p');
        date.id = 'date';
        date.innerHTML = `<strong>${new Date(entry.dt * 1000).toLocaleDateString()}</strong>`;

        const icon = document.createElement('img');
        icon.loading = 'lazy';
        icon.id = 'weather-icon';
        icon.src = iconSrc;
        icon.alt = `${condition} icon`;

        const tempContainer = document.createElement('div');
        tempContainer.className = 'temperature-container';

        const temp = document.createElement('h3');
        temp.id = 'temperature';
        temp.innerHTML = `${Math.round(entry.main.temp)} °C`;

        const description = document.createElement('p');
        description.id = 'weather-description';
        description.innerHTML = `${entry.weather[0].description}`;

        tempContainer.appendChild(temp);
        tempContainer.appendChild(description);
        forecastItem.appendChild(date);
        forecastItem.appendChild(icon);
        forecastItem.appendChild(tempContainer);
        container.appendChild(forecastItem);
      }
    });

    forecastWrapper.appendChild(heading);
    forecastWrapper.appendChild(container);
    fragment.appendChild(forecastWrapper);
    weatherInfo.appendChild(fragment); 
}

// Fetch next 5-day forecast by coordinates
function get5DaysForecast(lat, lon) {
    fetch(
      `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${CONFIG.WEATHER_API_KEY}&units=metric`
    )
      .then(res => res.json())
      .then(data => {
        requestIdleCallback(() => {
          setTimeout(() => display5DaysForecast(data.list), 0);
        });        
      })
      .catch(() => {
        weatherInfo.innerHTML = 'Error fetching forecast data.';
    });
}

 // Display current weather data
function displayUserWeather(data) {
    const weatherCondition = data.weather[0].main;
    const iconSrc = getWeatherIcon(weatherCondition);

    weatherInfo.innerHTML = `
      <h2 id="city">${data.name}, ${data.sys.country}</h2>

      <div class="current-weather">
        <img loading="lazy" id="weather-icon" src="${iconSrc}" alt="Weather icon">
        <div class="temperature-container">
          <h3 id="temperature"> ${Math.round(data.main.temp)} °C</h3>
          <p id="weather-description">${data.weather[0].description}</p>
        </div>
      </div>

      <div class="weather-details">
        <div class="detail">
          <img loading="lazy" id="humidity-icon" src="/images/humidity.png" alt="Humidity icon">
          <span class="label">Humidity</span>
          <span id="humidity" class="value"> ${data.main.humidity}%</span>
        </div>
        <div class="detail">
          <img loading="lazy" id="wind-icon" src="/images/wind.png" alt="Wind icon">
          <span class="label">Wind</span>
          <span id="wind" class="value"> ${data.wind.speed} m/s</span>
        </div>
      </div>
    `;
  }

// Fetch weather by coordinates
function getWeatherByCoords(lat, lon) {
    fetch(
      `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${CONFIG.WEATHER_API_KEY}&units=metric`
    )
      .then(res => res.json())
      .then(data => {
        displayUserWeather(data);
        get5DaysForecast(lat, lon);
      })
      .catch(() => {
        weatherInfo.innerHTML = 'Please turn on your device&apos;s location to get weather data.';;
      });
  }

// Event listeners for search button and input field
cityName.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') checkWeatherBySearch(cityName.value);
});

  // Search button click event
searchButton.addEventListener('click', ()=>{
    checkWeatherBySearch(cityName.value);
});

// Geolocation button
locationBtn.addEventListener('click', () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        pos => {
          const { latitude, longitude } = pos.coords;
          getWeatherByCoords(latitude, longitude);
        },
        () => {
          weatherInfo.innerHTML = 'Unable to retrieve location.';
        }
      );
    } else {
      weatherInfo.innerHTML = 'Geolocation not supported.';
    }
});


// Load last searched city
window.onload = () => {
    const lastCity = localStorage.getItem('lastCity');
    if (lastCity) {
        checkWeatherBySearch(lastCity);
    }

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          pos => {
            const { latitude, longitude } = pos.coords;
            getWeatherByCoords(latitude, longitude);
          },
          () => {
            weatherInfo.innerHTML = 'Unable to retrieve location.';
          }
        );
      } else {
        weatherInfo.innerHTML = 'Geolocation not supported.';
      }
};

Now that we have our weather app. Let’s go further to make it a progressive web app.

How to Create a Manifest File

We need to create a manifest.json file, a critical part of making your app a PWA. We’ll also use pwa-asset-generator, a CLI tool that helps you to generate all the necessary icons and splash screens from a single image (like your logo). This tool also updates your manifest.json and optionally injects relevant <link> tags into index.html.

Below is the manifest.json file containing key properties that define how the Progressive Web App behaves and appears when installed.

{
  "name": "Weatherly",                      // The full name of your app that may be shown to users.
  "short_name": "Weatherly",               // A shorter name used when space is limited, like on the home screen.
  "description": "A simple weather Progressive Web App", // A short description of what your app does.
  "start_url": "/index.html",              // The page that opens when the app is launched from the home screen.
  "display": "standalone",                 // Makes the app look like a native app without browser UI (like address bar).
  "background_color": "#ffffff",           // The background color used when the app is loading.
  "theme_color": "#2196f3",                // The main color of the app’s UI, like the status bar.
  "orientation": "portrait",                // Locks the screen orientation to portrait mode.
   "screenshots": [                         //helps show users a preview of your app before installing it — especially in places like the "Add to Home screen" prompt on Android or in app stores that support PWAs.
        {
          "src": "images/screenshots/desktop-screenshot.png",
          "sizes": "1337x645",
          "type": "image/png",
          "form_factor": "wide"
        },
        {
          "src": "images/screenshots/mobile-screenshot.png",
          "sizes": "720x1417",
          "type": "image/png",
          "form_factor": "narrow"
        }
      ]
}

How to Generate Icons and Splash Screens

Inside your images folder, create a new folder called assets. This will store all the generated icons and splash screens. When your app is launched from the home screen, these splash screens will help improve the user experience on iOS devices.

Run the following command to generate PWA assets, update the manifest.json, and inject <link> tags into index.html

npx pwa-asset-generator logo.png ./images/assets -m manifest.json -i index.html

Injected Link Tags in index.html

Once the command runs successfully, a series of <link> and <meta> Tags will be automatically added to your index.html <head>. These tags ensure support for splash screens and icons across various Apple devices:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Other meta/link tags -->

  <link rel="apple-touch-icon" href="images/assets/apple-icon-180.png">
  <meta name="mobile-web-app-capable" content="yes">

  <link rel="apple-touch-startup-image" href="images/assets/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="images/assets/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (orientation: landscape)">
  <!-- ...more splash screen tags for various devices... -->
</head>

Here’s how the manifest.json file should look like now:

{
    "name": "Weatherly",
    "short_name": "Weatherly",
    "description": "A simple weather Progressive Web App",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#2196f3",
    "orientation": "portrait",
    "icons": [
        [
            {
              "src": "images/assets/manifest-icon-192.maskable.png",
              "sizes": "192x192",
              "type": "image/png",
              "purpose": "any"
            },
            {
              "src": "images/assets/manifest-icon-192.maskable.png",
              "sizes": "192x192",
              "type": "image/png",
              "purpose": "maskable"
            },
            {
              "src": "images/assets/manifest-icon-512.maskable.png",
              "sizes": "512x512",
              "type": "image/png",
              "purpose": "any"
            },
            {
              "src": "images/assets/manifest-icon-512.maskable.png",
              "sizes": "512x512",
              "type": "image/png",
              "purpose": "maskable"
            }
          ]
        ],
    "screenshots": [
        {
          "src": "images/screenshots/desktop-screenshot.png",
          "sizes": "1337x645",
          "type": "image/png",
          "form_factor": "wide"
        },
        {
          "src": "images/screenshots/mobile-screenshot.png",
          "sizes": "720x1417",
          "type": "image/png",
          "form_factor": "narrow"
        }
      ]
    }

You can then link your manifest file to your HTML file:

<link rel="manifest" href="manifest.json" />

How to Add WorkBox to Your service-worker.js File

In this tutorial, WorkBox will be added to index.html via CDN. You can copy the import code below or visit WorkBox to get the link. You can then add it to the index.html file by placing the URL inside a <script> tag. You can copy the import code below or visit the WorkBox website for the latest link.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js');

How to Create your Service Worker in the service-worker.js File

Here, we’ll implement the necessary functionalities needed to make the weather app a PWA

Step 1: Activate the New Service Worker Immediately

Add workbox.core.skipWaiting() to make the newly installed service worker activate right away instead of waiting for the old one to be removed in the service-worker.js file.

workbox.core.skipWaiting();

Step 2: Take Control of Open Tabs

Add workbox.core.clientsClaim() to ensure that the activated service worker takes control of all currently open pages, so the latest version of your app works immediately across all tabs after it becomes active.

workbox.core.clientsClaim();

Step 3: Check if Workbox is Loaded

Before using Workbox, make sure it has loaded properly.

if (workbox) {
  console.log('Workbox loaded successfully');
} else {
  console.log('Workbox failed to load');
}

This confirms that the workbox object is available and ready to use. If not, the fallback message in the else block will be shown.

We then proceed to create the functions inside the if block

Step 4: Pre-cache Core Files

Pre-cache essential files enable your app to work offline. This caches your app shell (HTML, CSS, JS), so it loads even without a network connection.

workbox.precaching.precacheAndRoute([
    { url: '/index.html', revision: '3' },
    { url: '/style.css', revision: '11' },
    { url: '/app.js', revision: '7' },
    { url: '/images/logo.png', revision: '3' },
    { url: '/manifest.json', revision: '5' },
    { url: '/offline.html', revision: '1' },
  ]);

The revision helps with updating cached files when changes are made.

Step 5: Cache API Responses Dynamically

Set up a route to cache data from your weather API using the NetworkFirst caching strategy. This tells Workbox to try fetching fresh data from the network first. If the network fails, it serves the cached version instead.

 // Cache API requests 
  workbox.routing.registerRoute(
    ({ url }) => url.origin === 'https://api.openweathermap.org',
    new workbox.strategies.NetworkFirst({
      cacheName: 'weather-api-cache',
      plugins: [
        new workbox.expiration.ExpirationPlugin({
          maxAgeSeconds: 24 * 60 * 60,
          maxEntries: 10,
        }),
      ],
    })
  );

Step 6: Dynamic Image Caching

This function enables dynamic caching for images using the StaleWhileRevalidate strategy. When a user requests an image, Workbox first serves it from the cache (if available) for faster load times, while simultaneously fetching an updated version from the network to refresh the cache. This ensures users get a quick response without missing out on updated content. It’s a smart way to handle images by balancing speed and freshness.

// Cache images
  workbox.routing.registerRoute(
    ({ request }) => request.destination === 'image',
    new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'image-cache',
    })
  );

Step 7: Serve Cached Resources

The commonly used static files (like HTML, CSS, JS, fonts, and so on) are served quickly from the cache. It uses the CacheFirst strategy, meaning that the service worker will look in the cache first and only fetch from the network if the file isn’t already stored. The cache is named "static-cache" and it’s set to automatically remove items older than seven days using the expiration plugin. This helps keep the cache fresh and avoids taking up too much space.

  // Serve Cached Resources 
  workbox.routing.registerRoute(
    ({url}) => url.origin === self.location.origin,  
    new workbox.strategies.CacheFirst({
      cacheName: 'static-cache',  
      plugins: [
        new workbox.expiration.ExpirationPlugin({
          maxAgeSeconds: 7 * 24 * 60 * 60,  // Cache static resources for 7 days
        }),
      ],
    })
  );

Step 8: Cache HTML Pages with Offline Support

The index.html page will be handled using the NetworkFirst strategy. This means that the service worker tries to fetch the latest version from the network first. If the user is offline or the network fails, it falls back to the cached version. The cache is named "pages-cache" and the offline fallback page (offline.html) is returned when the requested page isn’t available. This ensures that users can still navigate the app even without an internet connection.

// Serve HTML pages with Network First and offline fallback
workbox.routing.registerRoute(
  ({ request }) => request.mode === 'navigate',
  async ({ event }) => {
    try {
      const response = await workbox.strategies.networkFirst({
        cacheName: 'pages-cache',
        plugins: [
          new workbox.expiration.ExpirationPlugin({
            maxEntries: 50,
          }),
        ],
      }).handle({ event });
      return response || await caches.match('/offline.html');
    } catch (error) {
      return await caches.match('/offline.html');
    }
  }
);

Step 9: Handle When Workbox Doesn’t Load

You should always provide a fallback in case something goes wrong. The if block will have an else block to catch issues during development and debugging.

else {
     console.log('Workbox failed to load');
}

Once the service worker finishes handling the different conditions in the if-else block, we add a general cleanup step to remove any outdated or unused caches.

Step 10: Clean Up Outdated Caches

During the service worker's activation phase, old or unused caches are removed. It compares all existing cache names with a list of current ones (precache, weather-api-cache, image-cache, pages-cache, and static-resources). If a cache doesn’t match the current list, it gets deleted. This helps keep the app lightweight and ensures that outdated data doesn't persist.

// Clean up old/unused caches during activation
self.addEventListener('activate', event => {
  const currentCaches = [
    workbox.core.cacheNames.precache,
    'weather-api-cache',
    'image-cache',
    'pages-cache',
    'static-cache'
  ];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!currentCaches.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

This is what your service-worker.js file should look like:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js');

// Force waiting service worker to become active
workbox.core.skipWaiting();
workbox.core.clientsClaim();

if (workbox) {
  console.log('Workbox loaded successfully');

  // Precache critical files with revisions (update revisions when files change)
  workbox.precaching.precacheAndRoute([
    { url: '/index.html', revision: '3' },
    { url: '/style.css', revision: '11' },
    { url: '/app.js', revision: '7' },
    { url: '/images/logo.png', revision: '3' },
    { url: '/manifest.json', revision: '5' },
    { url: '/offline.html', revision: '1' },
  ]);

  // Cache API requests 
  workbox.routing.registerRoute(
    ({ url }) => url.origin === 'https://api.openweathermap.org',
    new workbox.strategies.NetworkFirst({
      cacheName: 'weather-api-cache',
      plugins: [
        new workbox.expiration.ExpirationPlugin({
          maxAgeSeconds: 24 * 60 * 60,
          maxEntries: 10,
        }),
      ],
    })
  );

  // Cache images
  workbox.routing.registerRoute(
    ({ request }) => request.destination === 'image',
    new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'image-cache',
    })
  );

    // Serve Cached Resources 
  workbox.routing.registerRoute(
    ({url}) => url.origin === self.location.origin,  
    new workbox.strategies.CacheFirst({
      cacheName: 'static-cache',  
      plugins: [
        new workbox.expiration.ExpirationPlugin({
          maxAgeSeconds: 7 * 24 * 60 * 60,  // Cache static resources for 7 days
        }),
      ],
    })
  );

  // Serve HTML pages with Network First and offline fallback
workbox.routing.registerRoute(
  ({ request }) => request.mode === 'navigate',
  async ({ event }) => {
    try {
      const response = await workbox.strategies.networkFirst({
        cacheName: 'pages-cache',
        plugins: [
          new workbox.expiration.ExpirationPlugin({
            maxEntries: 50,
          }),
        ],
      }).handle({ event });
      return response || await caches.match('/offline.html');
    } catch (error) {
      return await caches.match('/offline.html');
    }
  }
);
} else {
  console.log('Workbox failed to load');
}

// Clean up old/unused caches during activation
self.addEventListener('activate', event => {
  const currentCaches = [
    workbox.core.cacheNames.precache,
    'weather-api-cache',
    'image-cache',
    'pages-cache',
    'static-cache'
  ];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!currentCaches.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

How to Set Up App Installation

The code to install the app will be written in install.js following the steps below:

Step 1: Register the Service Worker

Register the service worker to activate and run it in your app.

if('serviceWorker' in navigator){
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/service-worker.js').then(reg => {
        reg.onupdatefound = () => {
          const newWorker = reg.installing;
          newWorker.onstatechange = () => {
            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
              window.location.reload();
            }
          };
        };
      });
    })
 }

Step 2: Enable Custom Install Prompt

Next, we will allow users to install the weather PWA with a custom button. Inside the install.jsfile, add the beforeinstallprompt event which intercepts the default prompt and shows your install button instead. When clicked, it triggers the install prompt.

  let deferredPrompt;

document.addEventListener('DOMContentLoaded', () => {
  const installBtn = document.getElementById('installBtn');

  window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;

    // Show the button
    installBtn.style.display = 'block';

    installBtn.addEventListener('click', () => {
      // Directly triggered by user click
      installBtn.style.display = 'none';

      // Show the install prompt
      deferredPrompt.prompt();

      deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the install prompt');
        } else {
          console.log('User dismissed the install prompt');
        }
        deferredPrompt = null;
      });
    });
  });

The appinstalled event confirms successful installation.

window.addEventListener('appinstalled', () => {
    console.log('PWA was installed');
  });
});

Step 3: Add script tag to import install.js in index.html

Add the <script> tag for install.js inside the index.html file to include the installation logic.

 <script type="module" src="/js/install.js"></script>

How to Install the Weather App

You can choose to install the Weatherly app on your phone or desktop. Below is a demonstration on how to install it on your mobile phone:

Open the Weatherly app in your browser. You should see an “Install App” button, as shown in the image below. Click on the button to continue.

After clicking, a preview of the app will appear along with an “Install” option, as shown below. Click the Install button.

Once the installation is complete, the Weatherly app will appear on your home screen, just like a native app. And that’s it! Your weather app is now a Progressive Web App (PWA).

Conclusion

Progressive Web Apps combine the best of web and native app experiences, and service workers are the backbone of that functionality. With tools like Workbox, you don’t have to worry about manually handling caching, offline support, or background sync. Its simple APIs and built-in strategies make it easier to build fast, reliable, and installable web apps. Whether it’s a small weather app like Weatherly or a more complex project, Workbox helps you deliver a seamless user experience.

You can check out the full project and assets on GitHub

Before now, developers used tags like <br> or <span> to manually adjust word spacing. But what happens in cases where you also need to consider the responsiveness of the website? Well, the new text-wrap: balance property in CSS can now automatically calculate and divide the lines in such a way that every word looks organized and even. Like this:

In this article, you’ll learn how the text-wrap property works and how to use it in your code. You’ll also see a few examples along the way.

Without wasting time, let's get right into it.

Table of Contents

• Understanding the Problems

• Introducing text-wrap

  • What is text-wrap?

  • Basic Syntax of text-wrap

• text-wrap vs. max-width : When to Use Each

  • When to Use max-width vs text-wrap

  • Browser Support and Considerations

• Practical Implementation: Step-by-Step Guide

• Conclusion

Understanding the Problems

Apart from making words harder to read when your text is unevenly displayed, there are other issues uneven or poorly displayed text can cause on your website as a whole. Some of these are:

• Responsive Design: We wouldn't have any issues if we could manually design for every screen size and carefully place and space the lines of our text exactly as we wanted users to read them. Unfortunately, we can't do this, which is why making designs responsive is always crucial. When text adjusts from one screen size to another, lines break, and what looks good on a desktop may look terrible on a tablet view.

• Headings and Short Paragraphs: Since paragraphs and small blocks of text have many words, there is a high probability of words ending in a very unbalanced way. Often, we see a heading line ending with just one word, forming an awkward shape in the overall design.

• Dynamic Content: If your website contains dynamic content (such as cards of various sizes, product descriptions, or blog posts), having no text-wrap might make your layout break or appear unpredictable.

Introducing text-wrap

In the last section, we looked at the problems attributed to uneven text distribution. In this section, you’ll see how text-wrap is a game changer in how you organize your text.

Before text-wrap, developers relied heavily on max-width, text-align, or <br> to control text lines. The new text-wrap CSS property was created to help break text naturally across lines without making it look out of place, preventing the need for trial and error in checking if text fits.

What is text-wrap?

text-wrap is a CSS property that can help you adjust and space text automatically, break lines evenly without using the rigid <br> tag, and not have to rely on text-align, which didn't work on all screen sizes.

With text-wrap, your headings and paragraphs are sure to look good. Instead of having some lines that look longer than others, text-wrap neatly arranges everything to appear visually appealing.

Basic Syntax of text-wrap

There are two major ways to apply text-wrap to your text. These values are:

text-wrap: balance: (The Smart Heading Balancer)

This is the smart way of telling the browser to adjust the text evenly, regardless of the screen size.

Code snippet:

h1 {
  text-wrap: balance;
}

In this code, the heading text lines will split naturally without any weird short lines.

text-wrap: pretty; (The Smart Paragraph Balancer)

Just as text-wrap: balance works best for headings, text-wrap: pretty is the best for styling long paragraphs.

Code snippet:

p{
  text-wrap: pretty;
}

The p in this code will make sure the paragraphs maintain natural readability.

Other values include:

text-wrap vs. max-width : When to Use Each

max-width was always the go-to option for developers in the past. While this method works in most cases, it won’t stop uneven text distribution. Let's compare it with the new text-wrap CSS property so you can know when to use each one.

Using max-width:

h1 {
  max-width: 400px;
}

The max-width here forces the heading not to exceed a 400px width. This can be good for controlling short body paragraphs but can cause unevenness for headings when dealing with multiple screen sizes.

Using text-wrap:

h1 {
  text-wrap: balance;
}

Here, the browser dynamically breaks the heading text in a balanced way, preventing any weird-looking single lines.

When to Use max-width vs text-wrap

Use text-wrap: balance when you want a more natural text read without any weird line breaks.

Use max-width when you need to control the text width and don't necessarily care how the lines break.

Use both if you want a more natural read within a confined width limit.

h1 {
  max-width: 500px;
  text-wrap: balance;
}

This ensures the heading stays within a 500px limit while maintaining an even text distribution.

Browser Support and Considerations

Currently, Chrome and Edge are the only main browsers that support the new text-wrap property. If you are building a project that should work on browsers like Safari and Firefox, you will need to use traditional text formatting methods like text-align, <br>, or max-width instead.

Fallback snippet:

@supports (text-wrap: balance) {
  h1 {
    text-wrap: balance;
  }
}

The @support is a pro tip to apply this style to only supported browsers.

Practical Implementation: Step-by-Step Guide

Now that you’ve seen how important text-wrap can be and how to use it, let’s put that knowledge into practise and see real examples, compare the before and after screens of using it (and not), and check how it reacts in responsive designs as well.

1. Applying text-wrap: balance to Headings

In this section, we will see how the heading lines in the topic "How to Use CSS Text Balance: A Simple Trick for Smoother, Cleaner Designs" will break across different sizes and how it looks when text-wrap: balance is applied.

Without text-wrap: balance:

HTML

<h1 class="title">How to Use CSS Text Balance: A Simple Trick for Smoother, Cleaner Designs</h1>

CSS

.title {
  font-size: 2.5rem;
  font-weight: bold;
}

Without any special application to the headings, it will just adjust freely.

Result:

With text-wrap: balance:

CSS

.title {
  font-size: 2.5rem;
  font-weight: bold;
  text-wrap: balance;
}

Now, the browser automatically adjusts the line breaks to ensure a more even distribution.

Result:

2. Using text-wrap: pretty on Short Paragraphs

You’ve now seen how text-wrap: balance handles headings, so lets also take a look at how it breaks the lines evenly in your text paragraphs. As I mentioned above, the value pretty is mostly used for paragraphs or short block of words. Here’s how it works and appears on a block of text.

Without text-wrap: pretty:

HTML

<p class="subText"> Do you know that inconsistent text layout can ruin the look of your website design? Maybe a heading has an extra word that takes up another line or in a paragraph some lines are longer than others whereby leaving the whole thing looking messed up and hard to read.</p>

CSS

.subText {
  font-size: 1.2rem;
  line-height: 1.5;
}

In this code, text adjustment will behave normally without any smart contraints.

Result:

With text-wrap: pretty:

CSS

.subText {
  font-size: 1.2rem;
  line-height: 1.5;
  text-wrap: pretty;
}

The code above makes the line breaks evenly in a way that it will be easier for someone to read through.

Result:

How text-wrap Works in Responsive Design

When you use text-wrap on your text, you need not to worry how it is going to appear on various screen sizes. The below video shows you what I mean by that:

Using Media Queries for Extra Control

Combine media-queries and text-wrap to have a great special kind of control on how your text appears on various screens.

h1 {
  font-size: 2.5rem;
  text-wrap: balance;
}

/* On smaller screens, reduce font size and apply text-balancing */
@media (max-width: 600px) {
  h1 {
    font-size: 2rem;
    text-wrap: balance;
  }
}

This code ensures your heading text adapts and remains clean across multiple device sizes.

Conclusion

How text displays is something every good developer should pay attention to. It plays a big role in user experience. By using text-wrap, you can ensure that your website layouts don't look messy or difficult to read.

One of the best things about using text-wrap in your text formatting is that it just works every time. You don’t need to bother with <br> tags, tweak max-width, or fight with text alignment.

Even though it's not yet supported by all browsers, adding it to your next project will future-proof your design so it’s always intact and good-looking.

In this article, I’ll discuss a couple ways you can do this. The first is using the <mark> element, and the second is using the CSS Custom Highlight API. We’ll go through examples, and I’ll explain the issues with <mark>. Then you’ll learn how the Custom Highlight API solves these challenges.

Here’s what we’ll cover:

1. What We Want to Do

2. Reasons for Highlighting Text

3. How to Highlight Text Using the Mark Element

4. Introducing the CSS Custom Highlight API

5. How to Apply a Custom Highlight

6. How to Modify a Highlighted Range

7. How to Highlight Multiple Ranges

8. How to Remove Highlights

9. Browser Support

10. Wrapping Up

What We Want to Do

We want to apply highlighting effects to some text in a document, without needing to manually select the text. Typically, we’d do this by giving the text a background color that calls attention to the highlighted text. You can see what this looks like in the following screenshot.

Reasons for Highlighting Text

There are several use cases for programmatically highlighting text. Before we talk about how to highlight, let's talk about why we might want to highlight.

• Highlighting search results or matches: If the user reaches this page by searching, it may help them to call out the matching search text by applying highlighting.

• Emphasizing information: We might want to call out some important text on the page.

• User defined highlighting: An example would be in an e-reading app like Amazon's Kindle app. Here, users can select and save highlighted regions of a book. Later, when returning to a page, the user's previous highlights are shown.

How to Highlight Text Using the <mark> Element

One way you can highlight text is by using the HTML <mark> element. This has the benefit of being an HTML semantic element.

To highlight text using <mark>, you can wrap the text to highlight in a <mark> element. The browser will apply a highlight style to any text inside a <mark> element.

Consider the following HTML containing a <mark> element which surrounds the text you want to highlight.

Here is some <mark>text to highlight</mark>.

<mark> can be styled with CSS like any other HTML element, so you can customize the color and style of the highlighted text.

Using the <mark> element has some drawbacks, though. You have to modify the DOM and insert nodes whenever you want to add highlighting. This can cause side effects such as a layout recalculation that can affect the page's performance.

It's also harder to highlight text that might span multiple HTML elements. Since <mark> is an HTML element, you have to use it in such a way that it produces valid HTML.

For the rest of this article, we'll use some example HTML markup that we want to highlight parts of. Consider this HTML markup containing an introductory paragraph and some list items. We want to apply highlighting to some of the content, but let's show the base HTML first.

<p>Some introductory text.</p>

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Now, suppose we want to highlight "Some introductory text." and "Item one" together. We can't use a single <mark> element, because it would be invalid HTML.

The closing tag would be nested inside a <li> element, which is not valid HTML. The following code shows what that might look like:

<p><mark>Some introductory text.</p>

<ul>
  <li>Item one</mark></li>
  <li>Item two</li>
</ul>

Instead, to achieve the desired effect, we would have to insert multiple <mark> elements as shown in the following code. Note that there are two <mark> elements: one in the introduction, and one in the first list item. If you wanted to highlight multiple list items, you'd need to add even more <mark> elements.

Here's some example code with multiple <mark> elements:

<p><mark>Some introductory text.</mark></p>

<ul>
  <li><mark>Item one</mark></li>
  <li>Item two</li>
</ul>

This works, but it's cumbersome and does not result in a single continuous highlight.

Introducing the CSS Custom Highlight API

The solution to our problem is the CSS Custom Highlight API, a newer API that lets you create highlight regions and style them with CSS. Highlights are tied to ranges, which can span multiple HTML elements and do not add any markup or elements to the document.

There are several concepts you’ll need to know when using this API:

• Range: A Range is an object representing part of a document between two nodes. These can be element nodes or text nodes.

• Highlight: A Highlight is an object that defines a custom highlight around one or more Range objects. These objects are registered with the CSS engine under a unique name.

• CSS highlight registry: A global object where Highlight objects are registered under unique names.

• The ::highlight pseudo-element: This is used in a CSS stylesheet to define the highlighting style. Each ::highlight pseudo-element references a Highlight object name that was registered with the CSS highlight registry.

How to Apply a Custom Highlight

Let's return to the earlier highlighting example and use the CSS Custom Highlight API to highlight the introductory text and the first list item.

First, let's add some IDs so we can select the relevant elements more easily. Consider this updated code where we have added IDs to some of the elements.

<p id="intro">Introductory text.</p>

<ul>
  <li id="item1">Item one</li>
  <li id="item2">Item two</li>
</ul>

Let's walk through the steps to create the highlight.

Create the Range

First, we'll create a Range object that spans the desired elements. This will represent a range of elements that spans the introduction and first list item without having to modify the DOM.

const range = new Range();
range.setStartBefore(document.getElementById('intro'));
range.setEndAfter(document.getElementById('item1'));

This Range object will start at the beginning of the <p> element, and will end at the end of the <li> with ID item1.

Create and Register the Highlight Object

Now that we have a Range, we can create a Highlight for that Range. We do this by calling the Highlight constructor, passing the Range object as its argument.

const highlight = new Highlight(range);

This creates the Highlight object, but we can't do anything with it yet. First, we'll need to register it with the CSS highlight registry with the CSS.highlights.set method.

The following code shows how you can use CSS.highlights.set to register a Highlight object under the name my-custom-highlight. We'll reference this name in the CSS when we apply styling in the next step.

CSS.highlights.set('my-custom-highlight', highlight);

Style the Highlight

We've created and registered the Highlight around a given Range, but at this point, we still won't see anything in the document. We need to use a CSS rule to define the highlight style.

To do this, we'll use the ::highlight pseudo-element. We pass the name of the custom highlight used in the previous step to this pseudo-element. This allows us to set CSS styles that are applied to the text within the highlighted range.

::highlight(my-custom-highlight) {
  background-color: yellow;
}

Now, the introductory text and the first list item will be highlighted in yellow, as shown in this screenshot.

How to Modify a Highlighted Range

When we create a Highlight object around a Range object, the Highlight will be dynamically updated with any changes made to the Range. In our example, let's say we now want to extend the highlight to the second list item.

We don't need to create a new Highlight or Range – rather, we can just set the Range's end position to the new element.

range.setEndAfter(document.getElementById('item2'));

As soon as the Range is modified, the new text will be highlighted as shown in this screenshot.

How to Highlight Multiple Ranges

For even more flexibility, a single Highlight can cover multiple Ranges. Let's update our example HTML to include four list items.

<p id="intro">Introductory text.</p>

<ul>
  <li id="item1">Item one</li>
  <li id="item2">Item two</li>
  <li id="item3">Item three</li>
  <li id="item4">Item four</li>
</ul>

So far, we're highlighting the introductory text and the first two list items. Suppose we now want to also highlight the fourth list item. We can't do this with our existing Range object, since it wouldn't represent a contiguous range of nodes. We'll need to create a second Range. This new Range spans the fourth list item.

const item4 = document.getElementById('item4');
const range2 = new Range();
range2.setStartBefore(item4);
range2.setEndAfter(item4);

Now, we can add this new Range to our existing Highlight object by calling its add method. This will let us apply highlighting to the second Range.

highlight.add(range2);

Once we do this, the fourth list item will be highlighted as well, as shown in this screenshot.

How to Remove Highlights

There are two ways that you can remove highlights from the document.

First, let's suppose we want to remove the highlight from the introductory text and first two list items, but keep the last list item highlighted. We can use the Highlight object's delete method to remove the first Range from the Highlight object.

highlight.delete(range);

After we delete this Range, only the last list item will remain highlighted, as shown in this screenshot.

The other way to remove highlights is to un-register a Highlight object from the CSS highlight registry by calling CSS.highlights.delete with the unique name we gave the Highlight. This removes the Highlight object that we registered previously.

CSS.highlights.delete('my-custom-highlight');

Now, nothing will remain highlighted, as shown in this screenshot.

Browser Support

As of January 2025, at the time of writing, the CSS Custom Highlight API is supported in Chrome, Edge, and Safari. Firefox support is starting to show up in nightly builds, so you should expect Firefox to have improved support soon. For the latest compatibility data, see https://caniuse.com/mdn-api_highlight.

To test if the browser supports CSS custom highlighting, you can check for the existence of the highlights property of the CSS object:

if (!('highlights' in CSS)) {
  // highlight API is not supported
}

Wrapping Up

The CSS Custom Highlight API lets you programmatically highlight regions of text in an HTML document without having to modify the DOM or worry about inserting invalid HTML markup. Its flexible and dynamic nature lets you add, modify, and remove highlights at runtime.

Further Reading

• Range (MDN): API documentation for the Range interface.

• CSS Custom Highlight API (MDN): More details about the CSS Custom Highlight API.

Take our year-end freeCodeCamp podcast listener survey real quick: https://forms.gle/2M9NW776723uSdDT7

Support for this podcast comes from a grant from Wix Studio. Wix Studio provides developers tools to rapidly build websites with everything out-of-the-box, then extend, replace, and break boundaries with code. Learn more at https://wixstudio.com.

Support also comes from the 11,043 kind folks who support freeCodeCamp through a monthly donation. Join these kind folks and help our mission by going to https://www.freecodecamp.org/donate

CORRECTION: I (Quincy) say during the interview that the Uber found a way to access microphones on iOS without users' knowledge. There have been documented cases of malware doing this (like Pegasus) but Uber didn't do this. They did do a lot of other shady things, like continue collecting data even after you deleted their app – but mic spying was not one of them. Yes, early Uber was an ethical tire fire. But it's important to get facts right here.

We talk about:

• Why you should still learn CSS in 2025

• How teaching concepts improves your own understanding of them

• How learning to skateboard helped Kevin escape Tutorial Hell

• Massive improvements coming to CSS

You can watch the interview on YouTube:

Or you can listen to the podcast in Apple Podcasts, Spotify, or your favorite podcast app. Be sure to follow the freeCodeCamp Podcast there so you'll get new episodes each Friday.

Links we talk about during our conversation:

• Kevin's YouTube channel: https://www.youtube.com/kevinpowell

• Original Space Jam website Kevin mentions: https://www.spacejam.com/1996/

• The article that coined the term Responsive Design: https://alistapart.com/article/responsive-web-design/

• Kevin's freeCodeCamp article on how learning skateboarding helped him out of tutorial hell: https://www.freecodecamp.org/news/how-learning-to-skateboard-helped-me-find-a-way-out-of-tutorial-hell/

• Kevin's freeCodeCamp course on building and deploying a portfolio page: https://www.freecodecamp.org/news/how-to-build-a-portfolio-website-and-deploy-to-digital-ocean/

• Playable Minesweeper in CSS that Quincy mentions: https://codepen.io/bali_balo/pen/BLJONZ

• Acknowledged mistakes that are permanently coded into CSS: https://wiki.csswg.org/ideas/mistakes

• Talk on why is CSS so weird: https://www.youtube.com/watch?v=aHUtMbJw8iA

Well, fear not! I’ve cracked the code for building components that trigger and respond to keyboard shortcuts. In this article, I’ll teach you how to create them with React, Tailwind CSS, and Framer Motion.

Table of Content

Here’s everything we’ll cover:

• Prerequisites

• What Is a Keyboard Shortcut Listener (KSL) Component?

• How to Build the KSL Component

• How to Create the Reveal Component

• How to Trigger the Component via Keyboard Shortcut

• How to Animate the Component’s Visibility

• How to Optimize Your KSL Component

• Conclusion

Prerequisites

• Fundamentals of HTML, CSS, and Tailwind CSS

• Fundamentals of JavaScript, React, and React Hooks.

What Is a Keyboard Shortcut Listener (KSL) Component?

A Keyboard Shortcut Listener component (KSLC) is a component that listens for specific key combinations and triggers actions in your app. It's designed to make your app respond to keyboard shortcuts, allowing for a smoother, more efficient user experience.

Why is it important?

• Accessibility: The KSL component makes it simple for people who use a keyboard to trigger actions, making your app more inclusive and easy to use.

• Snappier Experience: Shortcuts are quick and efficient, allowing users to get things done in less time. No more fumbling around for the mouse—just hit a key (or two) and boom, action happens!

• Reusability: Once you’ve set up your KSL, it can handle different shortcuts across your app, making it easy to add without rewriting the same logic.

• Cleaner Code: Instead of scattering keyboard event listeners everywhere, the KSL component keeps things tidy by centralising the logic. Your code stays clean, organized, and easier to maintain.

How to Build the KSL Component

I've prepared a GitHub repository with starter files to speed things up. Simply clone this repo and install the dependencies.

For this project, we’re using Tailwind’s home page as our muse and creating the KSL functionality. After installing and running the build command, here’s what your page should look like:

How to Create the Reveal Component

The reveal component is the component we want to show when we use the shortcut.

To begin, create a file called search-box.tsx and paste in this code:

export default function SearchBox() {
  return (
    <div className="fixed top-0 left-0 w-full h-full backdrop-blur-sm bg-slate-900/50 ">
      {" "}
      <div className=" p-[15vh] text-[#939AA7] h-full">
        <div className="max-w-xl mx-auto divide-y divide-[#939AA7] bg-[#1e293b] rounded-md">
          <div className="relative flex justify-between px-4 py-2 text-sm ">
            <div className="flex items-center w-full gap-2 text-white">
              <BiSearch size={20} />
              <input
                type="text"
                className="w-full h-full p-2 bg-transparent focus-within:outline-none"
                placeholder="Search Documentation"
              />
            </div>
            <div className="absolute -translate-y-1/2 right-4 top-1/2 ">
              <kbd className="p-1 text-xs rounded-[4px] bg-[#475569] font-sans font-semibold text-slate-400">
                <abbr title="Escape" className="no-underline ">
                  Esc{" "}
                </abbr>{" "}
              </kbd>
            </div>
          </div>
          <div className="flex items-center justify-center p-10 text-center ">
            <h2 className="text-xl">
              How many licks does it take to get to the center of a Tootsie pop?
            </h2>
          </div>
        </div>
      </div>
    </div>
  );
}

Ok, so what’s happening in this code?

1. Main Overlay (<div className="fixed top-0 left-0 ...">)

   • This is the full-screen overlay that dims the background.

   • The backdrop-blur-sm adds a subtle blur to the backdrop, and bg-slate-900/50 gives it a semi-transparent dark overlay.

2. Search Box Wrapper (<div className="p-[15vh] ...">)

   • The content is centered using padding and flex utilities.

   • The max-w-xl makes sure that the search box stays within a reasonable width for readability.

Then in your App.tsx, create a state that dynamically shows that component:

const [isOpen, setIsOpen] = useState<boolean>(false);

• useState: This hook initializes isOpen to false, meaning the search box is hidden by default.

• When isOpen is set to true, the SearchBox component will render on the screen.

And render the search component:

  {isOpen && <SearchBox />}

To show the search component, add a toggle function to the input button:

<button
  type="button"
  className="items-center hidden h-12 px-4 space-x-3 text-left rounded-lg shadow-sm sm:flex w-72 ring-slate-900/10 focus:outline-none hover:ring-2 hover:ring-sky-500 focus:ring-2 focus:ring-sky-500 bg-slate-800 ring-0 text-slate-300 highlight-white/5 hover:bg-slate-700"
  onClick={() => setIsOpen(true)}>
  <BiSearch size={20} />
  <span className="flex-auto">Quick search...</span>
   <kbd className="font-sans font-semibold text-slate-500">
   <abbr title="Control" className="no-underline text-slate-500">
    Ctrl{" "}
    </abbr>{" "}
    K
   </kbd>
</button>

The onClick event sets isOpen to true, displaying the SearchBox.

But as you’ve seen, this was triggered by a click action, not a keyboard shortcut action. Let’s do that next.

How to Trigger the Component via Keyboard Shortcut

To make the reveal component open and close using a keyboard shortcut, we’ll use a useEffect hook to listen for specific key combinations and update the component’s state accordingly.

Step 1: Listen for Keyboard Events

Add an useEffect hook in your App.tsx file to listen for key presses:

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.ctrlKey && event.key === Key.K) {
        event.preventDefault(); // Prevent default browser behavior

      }    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

What’s happening in this code?

1. Effect Setup (useEffect)

   • useEffect ensures that the event listener for key presses is added when the component mounts and cleaned up when the component unmounts, preventing memory leaks.

2. Key Combination (event.ctrlKey && event.key === "k")

   • The event.ctrlKey checks if the Control key is being pressed.

   • The event.key === "k" ensures we’re listening specifically for the "K" key. Together, this checks if the Ctrl + K combination is pressed.

3. Prevent Default Behavior (event.preventDefault())

   • Some browsers may have default behaviors tied to key combinations like Ctrl + K (e.g., focusing the browser’s address bar). Calling preventDefault stops this behavior.

4. Event Cleanup (return () => ...)

   • The cleanup function removes the event listener to prevent duplicate listeners from being added if the component re-renders.

Step 2: Toggle Component Visibility

Next, update the handleKeyDown function to toggle the SearchBox visibility when the shortcut is pressed:

useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      // Listen for Ctrl + K
      if (event.ctrlKey && event.key === Key.K) {
        event.preventDefault(); // Prevent default browser behavior
        setIsOpen((prev) => !prev); // Toggle the search box
      } else if (event.key === Key.Escape) {
        setIsOpen(false); // Close the search box
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

What’s happening in this code?

1. Toggling State (setIsOpen((prev) => !prev))

   • When Ctrl + K is pressed, the setIsOpen state setter toggles the visibility of the SearchBox.

   • The prev argument represents the previous state. Using !prev flips its value:

     • true (open) becomes false (close).

     • false (closed) becomes true (open).

2. Closing with the Escape Key (event.key === "Escape")

   • When the Escape key is pressed, setIsOpen(false) explicitly sets the state to false, closing the SearchBox.

This results in the following:

How to Animate the Component’s Visibility

At the moment, our component works, but it lacks a little flair, wouldn’t you say? Let’s change that.

Step 1: Create the Overlay Component

We’ll start by creating an overlay component, which acts as the dark, blurred backdrop for the search box. Here’s the base version:

import { ReactNode } from "react";

export default function OverlayWrapper({ children }: { children: ReactNode }) {
  return (
    <div
      className="fixed top-0 left-0 w-full h-full backdrop-blur-sm bg-slate-900/50 ">
      {children}
    </div>
  );
}

Step 2: Add Animations to the Overlay

Now, let’s make the overlay fade in and out using Framer Motion. Update the OverlayWrapper component like this:

import { motion } from "framer-motion";
import { ReactNode } from "react";

export default function OverlayWrapper({ children }: { children: ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed top-0 left-0 w-full h-full backdrop-blur-sm bg-slate-900/50 ">
      {children}
    </motion.div>
  );
}

Key animation props:

• initial: Sets the starting state when the component is mounted (fully transparent).

• animate: Defines the state to animate toward (fully opaque).

• exit: Specifies the animation when the component is unmounted (fading out).

Step 3: Animate the Search Box

Next, add some motion to the search box itself. We’ll make it slide and fade in when it appears and slide out when it disappears.

import { motion } from "framer-motion";
import { BiSearch } from "react-icons/bi";
import OverlayWrapper from "./overlay";

export default function SearchBox() {
  return (
    <OverlayWrapper>
      <motion.div
        initial={{ y: "-10%", opacity: 0 }}
        animate={{ y: "0%", opacity: 1 }}
        exit={{ y: "-5%", opacity: 0 }}
        className=" p-[15vh] text-[#939AA7] h-full">
        <div
          className="max-w-xl mx-auto divide-y divide-[#939AA7] bg-[#1e293b] rounded-md"
        >
          <div className="relative flex justify-between px-4 py-2 text-sm ">
            <div className="flex items-center w-full gap-2 text-white">
              <BiSearch size={20} />
              <input
                type="text"
                className="w-full h-full p-2 bg-transparent focus-within:outline-none"
                placeholder="Search Documentation"
              />
            </div>
            <div className="absolute -translate-y-1/2 right-4 top-1/2 ">
              <kbd className="p-1 text-xs rounded-[4px] bg-[#475569] font-sans font-semibold text-slate-400">
                <abbr title="Escape" className="no-underline ">
                  Esc{" "}
                </abbr>{" "}
              </kbd>
            </div>
          </div>
          <div className="flex items-center justify-center p-10 text-center ">
            <h2 className="text-xl">
              How many licks does it take to get to the center of a Tootsie pop?
            </h2>
          </div>
        </div>
      </motion.div>
    </OverlayWrapper>
  );
}

Step 4: Enable Animation Tracking with AnimatePresence

Finally, wrap your conditional rendering logic in the AnimatePresence component provided by Framer Motion. This ensures Framer Motion tracks when elements enter and leave the DOM.

<AnimatePresence>{isOpen && <SearchBox />}</AnimatePresence>

This enables Framer Motion to track when an element enters and leaves the DOM. With this, we get the following result:

Ah, much better!

How to Optimize Your KSL Component

If you thought we were done, not so fast…We still have a little more to do.

We need to optimize for accessibility. We should add a way for users to close the search component with a mouse, as accessibility is very important.

To do this, start by creating a hook called useClickOutside. This hook uses a reference element to know when a user is clicking outside the target element (search box) which is a very popular behaviour for closing modals and KSLCs.

import { useEffect } from "react";

type ClickOutsideHandler = (event: Event) => void;

export const useClickOutside = (
  ref: React.RefObject<HTMLElement>,
  handler: ClickOutsideHandler
) => {
  useEffect(() => {
    const listener = (event: Event) => {
      // Do nothing if clicking ref's element or descendant elements
      if (!ref.current || ref.current.contains(event.target as Node)) return;

      handler(event);
    };

    document.addEventListener("mousedown", listener);
    document.addEventListener("touchstart", listener);

    return () => {
      document.removeEventListener("mousedown", listener);
      document.removeEventListener("touchstart", listener);
    };
  }, [ref, handler]);
};

To use this hook, pass in the function responsible for opening and closing the search component:

<AnimatePresence> {isOpen && <SearchBox close={setIsOpen} />} </AnimatePresence>

Then receive the function in the search with its proper prop type:

export default function SearchBox({
  close,
}: {
  close: React.Dispatch<React.SetStateAction<boolean>>;
}) {

After that, create a reference (ref) to the item you want to track and mark that element:

import { motion } from "framer-motion";
import { useRef } from "react";
import { BiSearch } from "react-icons/bi";
import { useClickOutside } from "../hooks/useClickOutside";
import OverlayWrapper from "./overlay";

export default function SearchBox({
  close,
}: {
  close: React.Dispatch<React.SetStateAction<boolean>>;
}) {
  const searchboxRef = useRef<HTMLDivElement>(null);
  return (
    <OverlayWrapper>
      <motion.div
        initial={{ y: "-10%", opacity: 0 }}
        animate={{ y: "0%", opacity: 1 }}
        exit={{ y: "-5%", opacity: 0 }}
        className=" p-[15vh] text-[#939AA7] h-full">
        <div
          className="max-w-xl mx-auto divide-y divide-[#939AA7] bg-[#1e293b] rounded-md"
          ref={searchboxRef}>
          <div className="relative flex justify-between px-4 py-2 text-sm ">
            <div className="flex items-center w-full gap-2 text-white">
              <BiSearch size={20} />
              <input
                type="text"
                className="w-full h-full p-2 bg-transparent focus-within:outline-none"
                placeholder="Search Documentation"
              />
            </div>
            <div className="absolute -translate-y-1/2 right-4 top-1/2 ">
              <kbd className="p-1 text-xs rounded-[4px] bg-[#475569] font-sans font-semibold text-slate-400">
                <abbr title="Escape" className="no-underline ">
                  Esc{" "}
                </abbr>{" "}
              </kbd>
            </div>
          </div>
          <div className="flex items-center justify-center p-10 text-center ">
            <h2 className="text-xl">
              How many licks does it take to get to the center of a Tootsie pop?
            </h2>
          </div>
        </div>
      </motion.div>
    </OverlayWrapper>
  );
}

Then pass in that ref and the function to be called when a click outside that element is detected.

useClickOutside(searchboxRef, () => close(false));

Testing it out now gives the following result:

We can also optimize the code a bit more. Like we did with the accessibility feature, we can make out listener for detecting shortcuts much cleaner and efficient with the following steps.

First, create a useKeyBindings hook file for handling key press combinations.

Then define the hook and the Interface. The hook will accept an array of bindings, where each binding consists of:

• A keys array, which specifies the key combination (for example, ["Control", "k"])

• A callback function, which gets called when the corresponding keys are pressed.

import { useEffect } from "react";

// Define the structure of a keybinding
interface KeyBinding {
  keys: string[]; // Array of keys (e.g., ["Control", "k"])
  callback: () => void; // Function to execute when the keys are pressed
}

export const useKeyBindings = (bindings: KeyBinding[]) => {

};

Next, create the handleKeyDown function. Inside the hook, define a function that will listen for keyboard events. This function will check if the pressed keys match any defined key combinations.

We'll normalize the keys to lowercase so that the comparison is case-insensitive and track which keys are pressed by checking for ctrlKey, shiftKey, altKey, metaKey, and the key pressed (for example, "k" for Ctrl + K).

const handleKeyDown = (event: KeyboardEvent) => {
  // Track the keys that are pressed
  const pressedKeys = new Set<string>();

  // Check for modifier keys (Ctrl, Shift, Alt, Meta)
  if (event.ctrlKey) pressedKeys.add("control");
  if (event.shiftKey) pressedKeys.add("shift");
  if (event.altKey) pressedKeys.add("alt");
  if (event.metaKey) pressedKeys.add("meta");

  // Add the key that was pressed (e.g., "k" for Ctrl + K)
  if (event.key) pressedKeys.add(event.key.toLowerCase());
};

Next, we’ll compare the pressed keys with the keys array from our bindings to check if they match. If they do, we’ll call the associated callback function. We also ensure that the number of pressed keys matches the number of keys defined in the binding.

// Loop through each keybinding
bindings.forEach(({ keys, callback }) => {
  // Normalize the keys to lowercase for comparison
  const normalizedKeys = keys.map((key) => key.toLowerCase());

  // Check if the pressed keys match the keybinding
  const isMatch =
    pressedKeys.size === normalizedKeys.length &&
    normalizedKeys.every((key) => pressedKeys.has(key));

  // If the keys match, call the callback
  if (isMatch) {
    event.preventDefault(); // Prevent default browser behavior
    callback(); // Execute the callback function
  }
});

Finally, set up event listeners on the window object to listen for keydown events. These listeners will trigger the handleKeyDown function whenever a key is pressed. Make sure to add clean up the event listeners when the component unmounts.

useEffect(() => {
  // Add event listeners for keydown
  window.addEventListener("keydown", handleKeyDown);

  // Cleanup the event listeners when the component unmounts
  return () => {
    window.removeEventListener("keydown", handleKeyDown);
  };
}, [bindings]);

The full useKeyBindings hook now put together looks like this:

import { useEffect } from "react";

interface KeyBinding {
  keys: string[]; // A combination of keys to trigger the callback (e.g., ["Control", "k"])
  callback: () => void; // The function to execute when the keys are pressed
}

export function useKeyBindings(bindings: KeyBinding[]) {
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      bindings.forEach(({ keys, callback }) => {
        const normalizedKeys = keys.map((key) => key.toLowerCase());
        const pressedKeys = new Set<string>();

        // Track modifier keys explicitly
        if (event.ctrlKey) pressedKeys.add("control");
        if (event.shiftKey) pressedKeys.add("shift");
        if (event.altKey) pressedKeys.add("alt");
        if (event.metaKey) pressedKeys.add("meta");

        // Add the actual key pressed
        if (event.key) pressedKeys.add(event.key.toLowerCase());

        // Match exactly: pressed keys must match the defined keys
        const isExactMatch =
          pressedKeys.size === normalizedKeys.length &&
          normalizedKeys.every((key) => pressedKeys.has(key));

        if (isExactMatch) {
          event.preventDefault(); // Prevent default behavior
          callback(); // Execute the callback
        }
      });
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [bindings]);
}

Here’s how you can use this hook in your App:

import { useKeyBindings } from "./hooks/useKeyBindings";

export default function App() {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  useKeyBindings([
    {
      keys: ["Control", "k"], // Listen for "Ctrl + K"
      callback: () => setIsOpen((prev) => !prev), // Toggle the search box
    },
    {
      keys: ["Escape"], // Listen for "Escape"
      callback: () => setIsOpen(false), // Close the search box
    },
  ]);

Which gives the following result:

With this approach, you can even add multiple shortcuts to trigger the search component’s visibility.

useKeyBindings([
    {
      keys: ["Control", "k"], // Listen for "Ctrl + K"
      callback: () => setIsOpen((prev) => !prev), // Toggle the search box
    },
    {
      keys: ["Control", "d"], // Listen for "Ctrl + D"
      callback: () => setIsOpen((prev) => !prev), // Toggle the search box
    },
    {
      keys: ["Escape"], // Listen for "Escape"
      callback: () => setIsOpen(false), // Close the search box
    },
  ]);

Here are links to all the resources you may need for this article:

• Starter files

• Final

Conclusion

I hope this article felt like a well-timed shortcut, getting you to the heart of building reusable keyboard shortcut components. With every keypress and animation, you can now turn ordinary web experiences extraordinary ones.

I hope your shortcuts help you create apps that click with your users. After all, the best journeys often start with just the right combination.

Like my articles?

Feel free to buy me a coffee here, to keep my brain chugging and provide more articles like this.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X: @jajadavid8

• LinkedIn: David Jaja

• Email: Jajadavidjid@gmail.com

This article will serve as a comprehensive guide on how to come up with meaningful names for class names, variables, and functions with examples and best practices.

Why Does Naming Matter?

• Readability: Good names make your code intuitive and reduce the learning curve for others.

• Maintainability: It is easier to refactor or debug well-named code.

• Collaboration: Clear names improve team communication and productivity.

• Scalability: Meaningful names help keep large projects manageable.

Different Naming Convention Styles

Different naming convention styles are crucial in improving code readability and maintainability across various programming languages.

Styles like camelCase, PascalCase, snake_case, and kebab-case are tailored to specific contexts and practices.

camelCase is widely used for variables and functions, while PascalCase is preferred for classes. snake_case is a favorite in Python for its clarity, and kebab-case dominates CSS for HTML element styling.

Each style ensures consistency, making code intuitive for teams and future developers. Here’s a quick summary table of some popular naming conventions along with their use cases and examples:

How to Choose the Right Style

1. Language-Specific: Follow the conventions of your programming language or framework. For example:

   • JavaScript: camelCase for variables and functions, PascalCase for components.

   • Python: snake_case for variables and functions.

   • CSS/HTML: kebab-case for class names and IDs.

2. Team or Project Standards: Consistency is key. Use the agreed style for your team/project.

3. Purpose-Specific: Use naming styles that best represent the entity being named (for example, constants in SCREAMING_SNAKE_CASE).

General Naming Guidelines

Before diving into specific naming conventions for class names, variables, and functions, let’s explore some universal principles:

1. Be descriptive and concise: Names should convey the purpose or role of the variable/function/etc:

    // Bad
    let x = 10;
   
    // Good
    let maxUsersAllowed = 10;
   

2. Avoid cryptic abbreviations that might be hard for other devs to understand (or even your future self):

    // Bad
    let usrNm = "John";
   
    // Good
    let userName = "John";
   

3. Use consistent naming conventions: Choose a naming style (camelCase, PascalCase, kebab-case, snake_case) and stick with it throughout your project.

4. Avoid reserved keywords or confusing names:

    // Bad
    let let = 5;
   
    // Good
    let variableName = 5;
   

Alright, now that we’ve covered the basis, lets dig deeper into some helpful naming conventions.

How to Create Good Class Names

Class names define the visual or structural behavior of elements in your application. Writing clear class names ensures your HTML and CSS are easy to understand and maintain.

1. Use Descriptive Names

Class names should describe the purpose of the element, not its appearance.

<!-- Bad -->
<div class="red-button"></div>

<!-- Good -->
<div class="primary-button"></div>

2. Follow the BEM (Block-Element-Modifier) Methodology

BEM is a popular convention for writing scalable and maintainable CSS. It separates components into:

• Block: Represents the component (for example, card).

• Element: Represents child elements of the block (for example, card__title).

• Modifier: Represents variations of the block or element (for example, card__title--highlighted).

Example:

<div class="card">
  <h1 class="card__title card__title--highlighted">Welcome</h1>
  <p class="card__description">This is a card component.</p>
</div>

3. Use kebab-case

CSS class names are traditionally written in kebab-case for better readability.

<!-- Bad -->
<div class="primaryButton"></div>

<!-- Good -->
<div class="primary-button"></div>

How to Create Good Variable Names

Variables hold data and should have meaningful names that describe what they represent.

1. Use Nouns for Variables

Variables are typically nouns because they represent entities or data.

// Bad
let a = "John";

// Good
let userName = "John";

2. Use Prefixes to Add Context

Adding prefixes helps clarify the type or purpose of a variable:

• Boolean: is, has, can

• Numbers: max, min, total

• Arrays: Use plural forms (for example, users, items).

Example:

let isUserLoggedIn = true;
const maxUploadLimit = 5; // MB
const usersList = ["John", "Jane"];

3. Avoid Generic Names

Avoid names like data, value, or item unless they’re necessary.

// Bad
let data = 42;

// Good
let userAge = 42;

How to Create Good Function Names

Functions perform actions, so their names should reflect the operation or process they execute.

1. Use Verbs for Functions

Functions are action-oriented, so their names should begin with a verb:

// Bad
function userData() {
  // ...
}

// Good
function fetchUserData() {
  // ...
}

2. Be Specific About Functionality

Function names should indicate what they do.

// Bad
function handle() {
  // ...
}

// Good
function handleFormSubmit() {
  // ...
}

3. Use Prefixes for Intent

• For event handlers: handle, on

• For utilities: calculate, convert, format

• For fetch operations: fetch, get, load

• For setters and getters: set, get

Example:

function handleButtonClick() {
  console.log("Button clicked!");
}

function calculateDiscount(price, discountPercentage) {
  return price * (discountPercentage / 100);
}

How to Know if a Name is Good for a Variable, Function, or Class

To understand if a name is good for a variable, function, or class, evaluating it using several key principles is important. Here’s a guide to help you decide whether a name is appropriate and meaningful in your programming context:

1. Does It Represent the Purpose?

Purpose-driven names are the most important characteristic of good naming. A name should immediately tell you what the variable, function, or class represents or does without needing to read additional comments or documentation.

How to Assess:

Ask yourself: "When I read this name, can I immediately understand its purpose?"

Example:

• userAge is better than a because userAge tells you what the variable represents, whereas a is too ambiguous.

2. Is It Specific Enough?

The name should be specific enough to reflect the exact role of the entity in your code. Overly generic names like data or temp can be confusing because they don’t provide enough context.

How to Assess:

Ask: "Is this name specific to what this variable, function, or class represents in my application?"

Example:

• calculateTaxAmount() is better than calculate() because it’s clear what the function is calculating.

3. Does It Follow a Consistent Naming Convention?

Consistency in naming conventions is vital. When all team members follow the same conventions, the code is easier to understand and navigate.

How to Assess:

Ask: "Is this name consistent with the naming conventions used in the rest of the project?" Follow project guidelines such as:

• camelCase for variables and functions (e.g., userAge)

• PascalCase for classes (e.g., UserProfile)

• UPPERCASE_SNAKE_CASE for constants (e.g., MAX_USERS)

Example:

• If your team follows camelCase, userData is better than UserData.

4. Does it Avoid Ambiguity?

A good name eliminates ambiguity. It should not be open to multiple interpretations. If it can mean different things in different contexts, it will lead to confusion.

How to Assess:

Ask: "Could someone unfamiliar with the codebase misinterpret what this name refers to?"

Example:

• Instead of naming a boolean isValid, use isUserLoggedIn or isEmailVerified to make it clearer what is being checked.

5. Is It Easy to Read and Pronounce?

While not strictly necessary, ease of reading and pronunciation can improve the overall readability and maintainability of your code.

How to Assess:

Ask: "Is this name easy to read aloud, and can I understand it at a glance?"

Avoid long names, and use common abbreviations only when they are widely accepted.

Example:

• maxRetries is better than maximumNumberOfAttemptsToReconnect.

6. Does It Avoid Redundancy?

Avoid redundancy in names. Don’t repeat information that is already implied or described by the context.

How to Assess:

Ask: "Am I repeating information that is already clear from the surrounding context?"

Example:

• If you have a class named User, naming a method userGetData() is redundant. Instead, use getData().

7. Is It Self-Documenting?

The best names document themselves. Good names reduce the need for additional comments or explanations.

How to Assess:

Ask: "Does this name fully describe the variable, function, or class without requiring a comment to explain what it does?"

Example:

• calculateTotalPrice is self-explanatory, so there’s no need for an additional comment like “This function calculates the total price after discount.”

8. Is It Contextual and Relevant to the Domain?

The name should fit within the context of your project and its domain. For example, naming conventions for a web application may differ from those for a mobile app or a machine learning model.

How to Assess:

Ask: "Is this name aligned with the domain and context of my project?"

If you’re working in a specific domain (for example, finance, health, gaming), use domain-specific terms that are easily recognizable.

Example:

• In a gaming app, healthPoints is more appropriate than hp, as it reflects its meaning.

9. Is It Future-Proof?

Think about how your code will evolve. Names should be flexible enough to accommodate future changes without requiring refactoring.

How to Assess:

Ask: "Will this name still make sense if the functionality changes or the project grows?"

Example:

• userInfo could become outdated if the data structure changes. It’s better to use userProfile if you expect more fields to be added.

10. Does It Avoid Magic Numbers and Hard-Coded Values?

Magic numbers (numbers with unclear meaning) should be avoided in favor of named constants.

How to Assess:

Ask: "Does this name represent a meaningful constant, or is it just a raw number?"

Example:

• Instead of using 1000, use a constant like MAX_FILE_SIZE to explain the meaning behind the number.

Practical Examples

CSS Example

The following CSS example demonstrates how to apply BEM (Block-Element-Modifier) naming conventions to maintain a structured and scalable class hierarchy in your stylesheet:

<!-- HTML -->
<div class="navbar">
  <ul class="navbar__list">
    <li class="navbar__item navbar__item--active">Home</li>
    <li class="navbar__item">About</li>
    <li class="navbar__item">Contact</li>
  </ul>
</div>

/* CSS */
.navbar {
  background-color: #333;
  padding: 10px;
}

.navbar__list {
  list-style: none;
}

.navbar__item {
  display: inline-block;
  padding: 10px;
}

.navbar__item--active {
  color: orange;
}

Here’s what’s going on in this code:

• BEM Naming: navbar is the Block, representing the main navigation component.

• navbar__list is the Element, a child of the block, representing the list of navigation items.

• navbar__item is another Element representing individual list items.

• navbar__item--active is a Modifier, used to highlight the active menu item.
  This approach makes it easy to understand relationships and roles within the HTML and CSS, supporting modular and reusable styles.

JavaScript Example

This JavaScript example shows how to use meaningful and consistent naming conventions for variables and functions to make the code self-explanatory:

// Variables
let isUserLoggedIn = false;
const maxAllowedItems = 10;

// Functions
function fetchUserDetails(userId) {
  // Fetch user data from the API
}

function calculateTotalPrice(cartItems) {
  return cartItems.reduce((total, item) => total + item.price, 0);
}

Here’s what’s going on in the code:

• Variables:

  • isUserLoggedIn: A boolean variable named to clearly indicate its purpose. Prefixing with is helps identify it as a boolean.

  • maxAllowedItems: A constant with an uppercase max prefix shows it's a limit, making its intent clear.

• Functions:

  • fetchUserDetails(userId): The name reflects the purpose of the function, that is retrieving user details. The parameter userId is descriptive and avoids ambiguity.

  • calculateTotalPrice(cartItems): The function name explicitly states the action performed. The cartItems parameter is contextually relevant to the e-commerce domain.

Why It’s Good: These conventions ensure the code is readable and intuitive, reducing the cognitive load for other developers working on the same project.

Conclusion

Meaningful naming is both an important convention and an art form that significantly impacts your code's readability and maintainability.

Try to follow these basic principles:

• Use descriptive, concise names.

• Adhere to consistent conventions like BEM for class names and camelCase for variables and functions.

• Use prefixes to add context and clarity.

These and the other tips we’ve discussed here will make your code a joy to work with, whether you revisit it months later or collaborate with a team. Start applying these tips today, and watch your code quality soar.

Here is an overview of what you’ll be building:

You can also check my online collection to see up to 20 variations using a zig-zag shape.

We won’t study all the variations but I will show you a few tricks that’ll help you create as many variations as you want.

How to Create a Zig-Zag Shape

The first step is to create a zig-zag shape. For this, you can grab the code from my CSS shape website: https://css-shape.com/zig-zag-line/.

You can adjust the different variables to get the zig-zag you want. In our case, I will use an easier version with no variables.

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  background:
   conic-gradient(from 135deg at top,#000 90deg,#0000 0) top,
   conic-gradient(from 135deg at top,#0000 90deg,#000 0) bottom;
  background-size: 20% 50%;
  background-repeat: repeat-x;
}

And here is a figure to illustrate how those gradients create the shape:

The first gradient created the red part while the second one created the green part. We have two triangle shapes that repeat horizontally.

Since we have five repetitions, I used aspect-ratio: 5 and 20% (100%/5) in the background-size. You can make it more generic by introducing a variable to control the number of repetitions but as I said previously, I am going to keep things simple.

I want to point out that when using gradients, you can achieve the same result by using different syntaxes. For example, I can update the previous code with the following:

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  background:
   conic-gradient(from 135deg at top   ,#000 90deg,#0000 0),
   conic-gradient(from -45deg at bottom,#000 90deg,#0000 0) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
}

It’s still the same output but with a different syntax for the second gradient. Did you notice the repeated part within the gradients? That part controls the coloration and we can define it as a variable to avoid repetition and be able to update the color only once in the code.

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  --c:#000 /* the color */ 90deg,#0000 0;
  background:
   conic-gradient(from 135deg at top   ,var(--c)),
   conic-gradient(from -45deg at bottom,var(--c)) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
}

Now we have our zig-zag shape and we are ready to animate it.

How to Animate the Zig-Zag Shape

Since we’re using a background, we’ll animate the background-position to get our first loader. The idea is to move the gradients horizontally and create an infinite movement.

.loader {
  height: 47px; /* control the size */
  aspect-ratio: 5;
  --c:#000 /* the color */ 90deg,#0000 0;
  background:
   conic-gradient(from 135deg at top   ,var(--c)),
   conic-gradient(from -45deg at bottom,var(--c)) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
  animation: loading .8s infinite linear;
}

@keyframes loading {
  0%   {background-position: 0   0,12.5% 100%}
  100% {background-position: 25% 0,37.5% 100%}
}

Note how we increased the X value of the background-position by 25%. In case you are wondering what the logic behind that value is, here is the formula:

0.2 / (1 - 0.2) = .25 = 25%

.2 corresponds to the 20% used inside the background-size.

We have our first loader! Actually, two loaders because we can easily change the direction of the movement by adding animation-direction: reverse.

Let’s try a different animation: using clip-path and the inset() value. We can easily adjust this technique to create many variations.

Let’s start with a basic example:

.loader {
  /* same code as previously */
  animation: loading .8s infinite linear;
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

The inset() value creates a rectangle where only the part inside it will be visible. For this, we define a distance from each side of the element (top, right, bottom, left).

Logically, inset(0 0 0 0) shows the whole element since all the distances are equal to 0, but inset(0 100% 0 0) completely hides the element since the right value is equal to 100%. So it will touch the opposite edge, creating an empty rectangle.

By animating that right value from 100% to 0 we create a reveal animation. Another loader variation!

If you inspect the code of the second animation, you will see that I did the same thing but with the left side.

We can also have a sliding effect if we animate both the left and right values while keeping their difference constant.

.loader {
  /* same code as previously */
  animation: loading .8s infinite linear;
}
@keyframes loading {
  0%   {clip-path: inset(0 60% 0 0  )}
  100% {clip-path: inset(0 0   0 60%)}
}

The right value animates from 60% to 0 and the left one from 0 to 60%, so we have a constant difference equal to 60% which will create the illusion of a sliding rectangle. Another cool loader!

By trying different combinations of inset() values, you can get a lot of CSS loaders. Give it a try! You can also check my online collection and try to identify the variations that use clip-path: inset().

How to Create a Discrete Animation

To achieve a discrete animation, you can use the steps() timing function instead of linear. Let’s start with the first example using steps(2).

We can do the same with almost all the variations. Let’s try with the ones that use clip-path: inset().

.loader {
  /* same code as previously */
  animation: loading .8s infinite steps(5);
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

We have five repetitions so let’s see what we’ll get with steps(5).

At the moment, it’s not good because we don’t see all the repetition. The animation stops at 4 repetitions, but we need to see the whole element (5 repetitions). The count starts from 0 so what we really need is 6 steps instead of 5 to show all the repetitions.

.loader {
  /* same code as previously */
  animation: loading .8s infinite steps(6);
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

Even with 6 steps, the result is still not good but don’t worry, it’s not a bug. The default behavior of steps() gives us that output but we can update it to get the expected output:

.loader {
  /* same code as previously */
  animation: loading .8s infinite steps(6,jump-none);
}
@keyframes loading {
  0%   {clip-path: inset(0 100% 0 0)}
  100% {clip-path: inset(0 0    0 0)}
}

If you’re not familiar with jump-none, it’s a value that can fix most of your issues when working with steps(). I wrote a short article about it if you want more details: “How to correctly use steps() with animations“

Our animation looks perfect now! We can also make it an 11-step animation (5×2 + 1) and get another cool loader.

Even the sliding effect can have its discrete variation.

Can you figure out why I am using 4 and 7 steps? I’ll let you do the calculation as a small exercise.

Conclusion

This article showed you how to create zig-zag shapes, how to animate them using clip-path, and how to make a discrete animations. You can also consider more tricks like using both pseudo-elements to have two shapes.

I didn’t explore all the variations but you now have the recipe to create most of them!

You can explore my Zig-Zag loaders collection to study other variations and try to create your own loader. It’s a good opportunity to practice what you have learned from this article.

In this guide, I’ll show you how to host a website using a pre-designed template from CSS templates directly on your EC2 instance.

Before we dive into this guide, make sure you’ve gone through my previous blog on how to launch and connect to an EC2 instance. If you haven’t set up an EC2 instance yet, head over to that post first to get your instance up and running. Once that’s done, you’re all set to proceed!

Step 1: Download the "Built Better" Template

For this tutorial, we’ll use the Built Better template, which is free and easy to set up.

Head over to this link and download the template.

Right-click on the download button and select "Copy clean link". We’ll use this link to download the template directly into your EC2 instance.

Step 2: Download the Template Directly to Your EC2 Instance

Now that you have the link to the template, let’s download it straight to your EC2 instance using wget.

Log in to your EC2 instance via SSH or MobaXterm (as covered in my previous blog) and navigate to the /var/www/html directory where your website files will be stored:

cd /var/www/html

Use the wget command followed by the copied link to download the "Built Better" template directly into your EC2 instance:

sudo wget https://www.free-css.com/assets/files/free-css-templates/download/page284/built-better.zip

Note: After downloading, it's a good idea to check the file name to ensure it matches the file used in the subsequent commands. You can do this by running the ls command:

ls

Step 3: Unzip the Template Files

Now that the template has been downloaded, it’s time to extract it. Install the unzip utility if it’s not already installed:

sudo dnf install unzip -y

Then unzip the template:

sudo unzip built-better.zip -d /var/www/html/

After unzipping, make sure to check the folder name where the files were extracted from. You can do this by listing the contents of the /var/www/html directory:

ls /var/www/html/

In this case, the unzipped contents are located inside a folder named html. This folder contains all the template files. If the folder name is different in your case, adjust the following steps accordingly.

First, move the files from the html folder to the root /var/www/html/ directory:

sudo mv /var/www/html/html/* /var/www/html/

Then remove the unnecessary folder:

sudo rm -r /var/www/html/html

Lastly, remove the ZIP file:

sudo rm built-better.zip

Step 4: Set Up the Web Server to Host Your Template

If you haven’t already, make sure your Apache HTTPD web server is installed and running. You can follow these steps to ensure your server is ready:

Install Apache (if not installed):

sudo yum install httpd -y

Start the Apache service:

sudo systemctl start httpd

Enable Apache to start on boot:

sudo systemctl enable httpd

Now your web server should be up and running, ready to serve your template.

Step 5: Test Your Website

Now for the exciting part seeing your site live! Open a browser and navigate to your EC2 instance’s public IP address. You should now see the Built Better template live and ready to go.

Here’s how to check:

• Find your EC2 instance’s public IP from the AWS EC2 dashboard.

• Enter the IP in your browser, like so: http://your-ec2-public-ip

• Your website should now be live with the Built Better template! 🎉

Wrapping Up

Congratulations! You’ve successfully hosted a professional-looking website using the Built Better CSS template on your EC2 instance.

With just a few steps, you’ve moved from launching an EC2 instance to hosting a fully styled website, all using the AWS powerful cloud infrastructure.

You can follow me on

• Twitter

• LinkedIn

I think a demo is worth thousands of words, so check out this Codepen:

In the above Pen, I’m showing you four different CSS filler-style loaders – but we can make even more. You can check out this collection I created to see more than 20 different loaders.

You might think the article is going to be super long – I mean, how long will it take to explain how to create 20 different CSS loaders?

Well don’t worry – this tutorial will be super quick, because I’ll show a few CSS tricks that help you create as many variation as you want. The loaders look different, but all of them rely on the same techniques. By simply adjusting a few setting you can get a whole new loader.

The Initial Loader Configuration

Like all the CSS Loaders I create, the HTML code is a simple as a single element. Nothing more! Here’s what it looks like:

<div class="loader">Loading</div>

Then we apply the following CSS:

.loader {
  font-weight: bold;
  text-transform: uppercase;
  color: #0000; /* or transparent */
  -webkit-text-stroke: 1px #000;
}

Nothing fancy so far. We make the text transparent and we add a black stroke to it. Here’s what that looks like:

The -webkit-text-stroke is still tagged as experimental, but it has good browser support so you should be able to use it without any issues. This said, it’s always good to test your code in different browsers to make sure everything works fine.

How to Fill the Text with Colors

Now it’s time to fill our text (that’s why this technique is called the Filling CSS loaders!). To do this, we are going to rely on gradients and background-clip: text. Here’s the code:

.loader {
  background-image: conic-gradient(#000 0 0);
  background-position: left;
  background-size: 40% 100%;
  background-repeat: no-repeat;
  background-clip: text;
}

Or the shorthand version if you prefer more compact code:

.loader {
  background: 
    conic-gradient(#000 0 0) text
    left/40% 100% no-repeat;
}

The above figure illustrates the difference between using or not using background-clip: text. It’s pretty clear that the left result is what we are aiming for. We are limiting the background coloration to only the text instead of the whole element.

The conic-gradient(#000 0 0) looks strange, right? It lets you have a one-color gradient. I wrote a small tip about it that I invite you to read to understand why we’re using that particular syntax in this article, “How to correctly define a one-color gradient“.

How to Create the Filling Loaders

Believe it or not, we’re almost done because we have everything we need to make the CSS loaders. For the first loader, we simply animate the background-size as follows:

#l1 {
  animation: l1 1s linear infinite;
}
@keyframes l1 {  /*  width  height */
  0% {background-size: 0%   100%}
  to {background-size: 120% 100%}
}

We start with a width equal to 0% until we reach a width equal to 120%. I could have used 100%, but I want the full coloration to stay longer so I am using a value bigger than 100%. As for the height (the second value of the background-size), it remains at 100%.

The second loader uses the same animation, but instead of a linear timing function, we use steps() to have a discrete animation.

#l2 {
  font-family: monospace;
  animation: l2 2s steps(8, jump-none) infinite;
}
@keyframes l2 {
  0% {background-size: 0%           100%}
  to {background-size: 100% 100%}
}

The text contains 7 characters so we use 8 steps (N + 1). I am also using a monospace font to make sure all the characters have the same width. In case you are wondering about the jump-none value, read the following: How to correctly use steps() with animations.

That’s basically the main trick. By animating the background properties, we create different kinds of loaders. It’s either the background-size like the previous ones or the background-position like the below:

Can you figure out how they work before checking my code? This will be your first homework!

How to Use Multiple Gradients

Using one gradient is enough to create a lot of variations – but we can do even more if we introduce multiple gradients. If you check the fourth loader of the first demo, you’ll see that I’m using seven gradients – one gradient per character.

#l4 {
  font-family: monospace;
  --g: conic-gradient(#000 0 0) no-repeat text;
  background: var(--g) 0,var(--g) 1ch,var(--g) 2ch,var(--g) 3ch,var(--g) 4ch,var(--g) 5ch,var(--g) 6ch;
  background-position-y: bottom;
  animation: l4 3s infinite;
}
@keyframes l4 {
  0%     {background-size: 1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  14.28% {background-size: 1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  28.57% {background-size: 1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  42.85% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   ,1ch 0   }
  57.14% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   ,1ch 0   }
  71.43% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   ,1ch 0   }
  85.71% {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 0   }
  100%   {background-size: 1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%,1ch 100%}
}

I’m using the same gradient, so we consider a CSS variable --g to avoid repetition. Then, I call that variable 7 times inside the background property. All the gradients have the same Y position (bottom) but a different X position. That’s why you see the 0, 1ch, 2ch, …,6ch.

Now if you check the animation, I’m simply animating the height of each gradient individually. At 0%, all of them have a height equal to 0. Then I update their height one by one until all of them are at 100%. The width doesn’t change – it’s always equal to 1ch (the width of one character).

It may look difficult at first glance, but if you think about it one gradient at a time, it’s pretty simple.

What about the third loader, you might ask? For that one, I will rely on my online generator for wavy shapes to generate the gradient configuration:

Then I animate the background-position like below:

#l3 {
  background:
    radial-gradient(1.13em at 50% 1.6em,#000 99%,#0000 101%) calc(50% - 1.6em) 0/3.2em 100%,
    radial-gradient(1.13em at 50% -0.8em,#0000 99%,#000 101%) 50% .8em/3.2em 100% repeat-x;
  background-clip: text;
  animation: l3 2s linear infinite;
}
@keyframes l3 {
  0% {background-position: calc(50% - 1.6em) 0,     50%          .8em}
  to {background-position: calc(50% + 1.6em) 0,calc(50% + 3.2em) .8em}
}

This one is probably a bit trickier, but it’s another example to illustrate all the possibilities. From the simple gradient configuration to the most complex one, we can create as many loaders as we want.

What about creating your own CSS loader? You can use what you have learned from the article and try to create a loader that is not part of my collection. The best way to learn is to practice – so give it a try!

Conclusion

By creating some cool loaders, we went through a bunch of CSS tricks related to gradients and backgrounds. Even if creating loaders is not your goal, you can always re-use the same tricks to do something else.

Don’t forget to check my CSS Tip blog where I am sharing cool CSS tricks and demos.

Here is an overview of the shapes we’ll look at here, applied to the header of my freeCodeCamp profile:

Cool right? Both designs are commonly used as section dividers. We will learn together how to create such shapes with some simple code.

Before we start, you can find the code of the shapes we are making (and more!) within my online collection. You can easily copy the code from there – but don’t go away right now! Understanding the logic behind the code is also important and will help you customize it to fit your needs.

How to Create a Rounded Edge using clip-path

Let’s start with the first shape: The rounded edge. It may sound surprising, but the code to create such a shape is as simple as one CSS declaration:

.rounded-edge {
  clip-path: ellipse(85% 100% at top);
}

Let’s draw a figure to understand how an “ellipse” creates a rounded edge shape.

We start with a rectangle element with no clip-path applied to it. Then, we add clip-path: ellipse(50% 100% at top). As you can see, we have the ellipse shape. Its center is at the “top center” of the element and its radii are equal to 50% horizontally and 100% vertically. The shape is overflowing the element boundaries, which is why we only see the bottom half part of it. The top half is clipping nothing.

So you might be wondering: I said “top center”, but why in the code do we only have “top”?

By default, if we don’t specify the position it will be the center of the element. This is equivalent to “center”, “center center”, “50%” or “50% 50%”. Note how we can either define one value or two values. If the second value is omitted, it will be equal to “center” so defining “top” is the same as “top center”.

You don’t need to remember all the cases. Using the keywords such as "top”, “left”, and so on is, most of the time, enough – unless you need to create a custom shape (we will see this later on).

Let’s get back to the previous figure. If we increase the horizontal radius and make it bigger than 50% (85% for example), the ellipse will get bigger and will logically cover a bigger area. You start to see the trick, right? In the end, it’s only a portion at the bottom of the ellipse that is visible – the rounded edge we want!

As a bonus, it’s responsive, since we are relying on percentage values. The horizontal radius is relative to the width while the vertical one is relative to the height. This said, you can also rely on pixel values if you want a fixed size for your ellipse. In some cases, it can give a better result.

Here is a demo showing both cases. Resize the screen to notice the difference:

So what about the other variation? We just have to change “top” with “bottom”, right?

Exactly! By changing the center of the ellipse, you change the placement of the rounded edge and easily get the four directions.

You can also get a more custom shape if you adjust the center of the ellipse using percentage values. Like for example using 30% 0% to get a rounded edge shifted to the left (note that top is equivalent to 50% 0%).

A lot of possibilities with only one line of code!

Go check the online version where you can find more examples and easily customize the shape by adjusting the existing code.

How to Create a Curved Edge using mask

Let’s move to the second shape: the curved edge. This one is also pretty easy to create as it requires one line of code as well.

.curved-edge {
  mask: radial-gradient(60% 70px at bottom,#0000 100%,#000);
}

This time, we are going to rely on mask instead of clip-path but the logic is the same. We will hide some parts of the element and keep the remaining visible. When using mask, the hidden part is the transparent color of the gradient (the #0000) while the visible part is the opaque color of the gradient (the #000).

It doesn’t really matter which color you use, only the transparency of the color matters. So you are free to use any color syntax you want. Here’s an example using the rgb() syntax:

.curved-edge {
  mask: radial-gradient(60% 70px at bottom,rgb(0 0 0/0%) 100%,rgb(0 0 0/100%));
}

Or color names:

.curved-edge {
  mask: radial-gradient(60% 70px at bottom,transparent 100%,black);
}

And here is a figure to illustrate how it works.

Similar to the ellipse function of the clip-path, the radial-gradient() will also create an ellipse shape. The only difference is that this time we will hide the inside part of the ellipse and show the outside part. And thanks to the overflowing part, we get the curved shape we want.

I think you know the rest of the story now. By adjusting the radii and the position of the center of the ellipse, we get the different variations. As a small homework assignment, try to update the previous code to get the top, left, and right directions. You can compare what you have found with my implementation.

When using this method, make sure you have enough space at the bottom. Unlike the rounded edge, the curved edge may hide some of your content at the bottom so it’s always good to include a padding equal to the vertical radius.

.curved-edge {
  padding-bottom: 70px;
  mask: radial-gradient(60% 70px at bottom,#0000 100%,#000);
}

How to Combine Both of These CSS Shapes

What about having both curves so you can create a curved rectangle shape? It’s possible by simply combining both bits of code like this:

.curved-rectangle {
  /* curved edge at the bottom */
  mask: radial-gradient(60% 70px at bottom,#0000 100%,#000);
  /* rounded edge at the top */
  clip-path: ellipse(80% 100% at bottom);
}

See it in play:

And the opposite effect by changing bottom with top:

.curved-rectangle {
  /* curved edge at the top */
  mask: radial-gradient(60% 70px at top,#0000 100%,#000);
  /* rounded edge at the bottom */
  clip-path: ellipse(80% 100% at top);
}

You will notice that I am either using top everywhere or bottom everywhere which makes both pieces of code easy to remember.

Now you might be wondering – how can we have the same curves and the top and bottom?

As you may have noticed, both curves don’t match, which makes the whole shape kind of broken. But we can fix this. We need to make sure both parts of the code create the same ellipse shape by setting the same radii.

.curved-header {
  /* curved edge at the top */
  mask: radial-gradient(80% 100% at top,#0000 100%,#000);
  /* rounded edge at the bottom */
  clip-path: ellipse(80% 100% at top);
}

Note the “80% 100% at top” which is the same in both declarations – but nothing will be visible if we use this code. Don’t forget that the clip-path will hide the outside part of the ellipse while the gradient will hide the inside part. So if both ellipses are the same, everything will be hidden.

To fix this, we have to offset the gradient and move it to the top to get the following:

.curved-rectangle {
  /* curved edge at the top */
  mask: radial-gradient(80% 100% at 50% -78% /* instead of 50% 0% */,#0000 100%,#000);
  /* rounded edge at the bottom */
  clip-path: ellipse(80% 100% at top);
}

The shape is now perfect and both curves are aligned.

If you don’t like to use magic numbers like the “-78%”, we can consider some math to get accurate results:

.curved-rectangle {
  --c: 80; /* control the curve */

  mask: 
    radial-gradient(calc(var(--c)*1%) 100% 
     at 50% calc(-100%*cos(asin(50/var(--c)))),
     #0000 100%,#000);
  clip-path: ellipse(calc(var(--c)*1%) 100% at top);
}

The code looks more complex (I will skip the boring geometry explanation) but you can easily control the curve by adjusting a single value.

So what about the bottom version? We update the code like the below:

.curved-rectangle {
  --c: 80; /* control the curve */

  mask: 
    radial-gradient(calc(var(--c)*1%) 100% 
     at 50% calc(100% + 100%*cos(asin(50/var(--c)))),
     #0000 100%,#000);
  clip-path: ellipse(calc(var(--c)*1%) 100% at bottom);
}

The top of the clip-path becomes bottom and inside the gradient, we use 100% + X instead of -X where X is the offset. You can always find all the code within my online collection.

Wrapping Up

How many lines of code do you have to remember? Only two lines of code – that’s all! You can create a rounded edge using clip-path:

.rounded-edge {
  clip-path: ellipse(85% 100% at top);
}

And you can create a curved edge using mask:

.curved-edge {
  mask: radial-gradient(60% 70px at top,#0000 100%,#000);
}

And by combining both, you get a curved rectangle:

.curved-rectangle {
  mask: radial-gradient(80% 100% at 50% -78%,#0000 100%,#000);
  clip-path: ellipse(80% 100% at top);
}

You don’t have to remember the verbose version where I am using math. Most of the time, you don’t really need to have accurate values and you can manually adjust the position until you get it right.

Don’t forget to bookmark my online collection of CSS shapes if you want to easily copy the code of any shape. I also recommend reading my “Modern guide for making CSS shapes” to know the secret behind creating more CSS shapes.

Once the design phase is complete, the focus shifts to UI development, where tools like HTML, CSS, and JavaScript come into play. At a higher level, libraries like React and Vue streamline the development process.

Regardless of the application type, your code can almost always be broken down into components.

“Repeated components are a nightmare to manage.” – Every frustrated UI developer

Imagine having a component library where all commonly used elements are pre-built and responsive—how much easier and faster would that make development?

In this article, I’ll show you how to build your own component library, using a minimal tech stack, and then use it to build an application.

What We’ll Cover

1. Prerequisites

2. Why Build a Component Library?

3. How to Build the Component Library

4. Let’s Build the Library

   • Step 1: Design the Layout using Pen and Paper

   • Step 2: Design the Components in HTML and CSS

   • Step 3: Hosting the Project CSS File

5. FAQ

6. Conclusion

Prerequisites

• Proficiency in HTML, CSS, and JavaScript: A solid understanding of front-end development fundamentals is essential.

• Basic Deployment Skills: Familiarity with deploying applications on platforms like Netlify or Vercel is required.

• Git/GitHub Knowledge: You should be comfortable with version control, including basic Git commands and managing repositories on GitHub.

Why Build a Component Library?

Every website is built from components, which are structured with HTML and styled using CSS.

HTML and CSS are fundamental technologies for creating visually appealing web pages. However, mastering them can be challenging due to the wide array of HTML tags and CSS properties.

To simplify the process, developers often use component libraries, which deliver various benefits:

1. Faster Development: Pre-built components and responsive design features accelerate the development process.

2. Consistency: Ensures uniform styling and cross-browser compatibility across the application.

3. Maintainability: Encourages structured, modular code, making it easier to maintain and scale.

4. Community Support: extensive documentation, plugins, and a strong community provide valuable resources.

5. Customization and Accessibility: offers easy customization and accessibility-focused components for inclusive designs.

How to Build the Component Library

Building a component library involves several key steps. First, I’ll give you an overview of each step we’ll take to create the component library. After that, we’ll build it together.

1. Design the Layout of the Components

Before writing any code, it’s crucial to have a clear vision of what you want to build. Start by sketching the layout of your components on paper, or use design tools like Figma or Canva to create a visual representation.

Having a visual guide will streamline your coding process and help you stay focused as you translate designs into code.

2. Write the Component Structure in HTML

Once the design is ready, the next step is to structure your components in HTML. This creates the foundation of your webpage, as HTML is the backbone of any web project.

Pro-tip: Use semantic HTML to improve user accessibility and SEO. For example, use <article>, <section>, or <header> tags instead of generic <div> elements when appropriate.

3. Style the Components with CSS

With the HTML structure in place, you can begin styling the components using CSS. Apply styles like background colours, font sizes, link decorations, and button styles using CSS classes and IDs.

CSS is a powerful tool—you can even add beautiful animations. But in this tutorial, we’ll focus on utilizing the essential properties of CSS to create clean, functional designs.

4. Host the Project's CSS File

Once your component library is ready, you’ll want to make it accessible for future projects. Hosting your CSS file on platforms like Netlify, GitHub Pages, or Vercel allows you to use the components across different projects by simply linking to the global CSS file.

By following these four steps, you’ll create a reusable component library that helps you build beautiful websites efficiently and effectively.

Let’s Build the Library

I began my journey as a software developer by diving into HTML and CSS to design webpages. These foundational technologies are essential for any web developer, but mastering them can be challenging—HTML boasts 152 tags, while CSS has over 200 properties.

While you won’t need to use every single HTML tag or CSS property, knowing the core concepts requires significant time and effort. .

Now, let’s consider a scenario: if I asked you to create a small website or a landing page without using any component library, how would you approach it? My goal is to minimize the time spent on designing.

Imagine if there was a way to automate the design process, allowing you to achieve beautiful results without sacrificing flexibility. This is where a component library comes into play. By writing your components in pure vanilla CSS once, you can reuse them across any project.

I encourage you to pursue this approach because it will provide real-time experience with HTML and CSS while helping you learn a multitude of concepts simultaneously.

I developed a small library consisting of 10+ beautiful components, which you can explore here: SlateUi. This library has helped deepen my understanding of web technologies.

My goal was to understand HTML and CSS thoroughly. After completing one project, I wanted to feel confident in all the critical aspects of web design, from UI to code.

By designing and developing these components, I gained greater control and customization options tailored to specific requirements.

The learning process was also incredibly rewarding. Creating each component took considerable time, but the exposure I gained to these two technologies significantly boosted my confidence.

Additionally, this approach helps avoid the redundancy of writing repetitive CSS code for similar elements.

Step 1: Design the Layout using Pen and Paper

First, you’ll want to create a basic layout for the webpage. This is just initial sketching so that you know what you have to build in your project

The layout consists of three key elements:

a) Header
b) Card(s)
c) Footer

Each component includes distinct colours, text, and additional elements. Here’s what it looks like in our example:

In an actual project, you typically start with prepared design models created in tools like Figma or other UI design software.

For this project, I used Canva to design the layout. This initial design phase is crucial as it lays the foundation for core feature development.

Then, you’ll write the structure of the component in HTML. At this level, I will simply put our HTML elements in such a way so that we can prepare a basic skeleton of the webpage as we have designed it. In the header I have a logo and some navigation links, in the cards I have a button and an image; and in the footer, I have some more links.

Step 2: Design the Components in HTML and CSS

At this point, we’ll enhance the components we created with HTML by applying CSS properties to beautify them. This stage involves using CSS to set background colours, primary colours, link decorations, button styles, and more. We’ll do this by utilizing CSS classes and IDs.

So far, we’ve built three components:

a) Header with navigation links
b) Footer
c) Horizontal Cards with action buttons

Now, let’s begin by building the first component: the Header.

The header component:

The header is at the top of a page or a section. It usually contains a logo, search bar, navigational links, and so on.

The footer component:

The Footer defines the footer or bottom of a web page or a section. Usually, it contains copyright information, contact details, navigation links, and so on.

The card component:

The card component can house various types of content, including a heading, image, main content, and a footer that features a call-to-action button.

Cards are designed to serve specific purposes, such as showcasing e-commerce products, displaying news items, or serving multiple other functions across different contexts.

Combining it all together:

By clicking the button, the card data will update with random cat facts, along with the length of each fact.

Note: I used an open-source API for this project. If the content does not update on the card, it may be due to an API outage.

Now, have you checked the CSS code?

You might be wondering why I’ve imported just a single line of code into my CSS file. Well, I have combined the CSS files of all three parts of the layout (header, footer, & cards components) into one CSS file and hosted the file on Netlify. This is the URL that is holding all three CSS files:

@import url("https://hashnodeblogchallenge.netlify.app/index.css");

It serves the CSS in all three components and maintains the styles for all three components.

Step 3: Hosting the Project CSS File

Finally, I’ve arrived at the most crucial part of this project, where all the magic happens.

Currently, I have three CSS files for each of the web components: header, cards, and footer.

Since our project is small, I will combine all CSS file code into one CSS file to get one CSS file which will work as a universal CSS file.

The process of hosting the CSS file is straightforward. Here's a detailed breakdown of what you need to do:

1. Push Your Code to GitHub

You need to push (upload) your project files, including the HTML, CSS, and other assets, to a GitHub repository. Here’s how you can do that:

1. Initialize a Git repository in your project directory using git init.

2. Add all your files using git add ..

3. Commit the files with git commit -m "Initial commit".

4. Link to a GitHub repository you’ve created using git remote add origin <repo-url>.

5. Finally, push your code using git push -u origin main.

6. Result: Your project files will now be hosted in your GitHub repository.

2. Open Netlify and Log In or Sign Up

Then, visit Netlify and either sign in if you already have an account or create a new one.

You can sign up using your GitHub credentials or a separate email. This step gives you access to Netlify's web hosting services, which will allow you to deploy your project directly from GitHub.

3. Connect Your GitHub Repository That Contains Your Code

Once logged in, you'll connect your GitHub repository to Netlify.

1. On Netlify, click on "New site from Git".

2. Choose GitHub as the source.

3. Authorize Netlify to access your GitHub account.

4. Select the repository that contains your project from the list.

5. Configure build settings if necessary (though for simple static sites, Netlify automatically detects them).

4. Click "Deploy"

After connecting your repository, Netlify will display a "Deploy" button.

1. Click "Deploy" to trigger the build and deployment process.

2. Netlify will pull your code from GitHub, build the site (if needed), and deploy it to a live URL.

Your project is now live on the web, and you’ll be provided with a URL where you can access the deployed site.

5. Access the Deployed URL and Append the CSS File URL

You’ll access the deployed site by visiting the URL provided by Netlify and directly referencing the CSS file you uploaded.

1. Once your site is deployed, note down the provided URL (for example, https://example.netlify.app).

2. To access a specific CSS file, append the file name to the URL, for example: https://example.netlify.app/styles.css.

3. Here, styles.css is the name of your CSS file that you uploaded to GitHub and deployed via Netlify.

This will allow you to view or reference the CSS file directly through a public URL.

This process essentially helps you host your project and its assets on Netlify, allowing easy access to any file (like filename.css) that you uploaded to GitHub. You can use these public links in your projects or share them.

And that’s it! Link this URL to your project's CSS file.

I have hosted the main CSS file on the Netlify app so that it can be accessed anywhere simply by importing it into your project. Here is the URL of my hosted CSS file: https://hashnodeblogchallenge.netlify.app/index.css.

The beauty of component libraries is that they allow you to focus on development rather than design.

FAQ

What Benefits Have We Gained from This?

Now, you simply need to copy the HTML code and import the CSS file into your project. Here are the key benefits:

• Reduces time spent on repetitive CSS coding.

• Provides greater control over components, allowing for customization based on your needs.

• Offers real-time experience with HTML and CSS, enabling you to learn core concepts effectively.

What if I Want to Change Something?

This is straightforward. Just edit your CSS file and update the header colour from black to blue where you have declared that header class or ID.

What if I Want to Create More Components?

You can create as many components as you need! Just store the style code in the same hosted CSS file, and everything will work seamlessly.

How Does This Save Me Time?

Imagine you need to create 5 websites, each with 5 pages (that’s a total of 25 pages). If you identify common elements, such as headers and footers, that will be used across all 25 pages, you can avoid writing 25 separate components. Instead, you can simply use the components from your library—just copy and paste the HTML and add the CSS file.

What Lets the Entire App Function with Just One Line of CSS?

The concept is quite simple and can be broken down into the following steps:

1. Create components based on your requirements.

2. Control their design with CSS and apply the necessary properties.

3. Host your main CSS file somewhere to obtain a new URL, which you can use to import your CSS styles in HTML.

Now you can calculate how much time you have saved.

Conclusion

Creating a component library using HTML and CSS allows you to build beautiful web pages quickly and effectively.

It also provides you with a deep understanding of HTML and CSS, which are essential skills for a successful software development career. With these skills, you'll be able to create engaging layouts without spending excessive time coding from scratch.

To help you get started, here’s an example of a component library I developed, which includes 10+ beautiful components: SlateUI.

Now, you simply need to copy the HTML code and paste it where you want to display your components, along with importing your CSS file URL into that HTML file.

So guys this is the end from my side. If you find this article useful, then do share it and connect with me – I am open to opportunities:

• Follow Me on X: Prankur's Twitter

• Follow me on LinkedIn: Prankur's Linkedin

• Look at my Portfolio here: Prankur's Portfolio

In this article, I'll share some ways CSS can support accessibility so you can start using these techniques in your own projects.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of HTML, CSS, and a little bit of Javascript.

Update Focus Styles

The browser provides default focus styles for interactive elements like buttons or input fields. But sometimes these default focus styles might not be ideal for your design system – especially if the colors used in your design are too close to the default colors. This might make it difficult to notice.

Also, different browsers have different default focus styles and you might want to standardize the focus styles to ensure uniformity.

You can change the default focus style of an element in CSS using the :focus pseudo-class. For example, the default focus style for an input element is a blue outline in Chrome and a blue outline with outline offset in Firefox, to update the default focus styles of an input element you can do this:

input:focus {
  outline: 2px solid #007BFF;
  outline-offset: 2px;
  border-radius: 1rem;
}

Avoid Content Shifts

Content shifts can happen when you’re lazy loading images, where images load progressively as the user scrolls down the page. Sometimes the image pushes the content around it downwards, shifting the text you're reading out of place.

Content shifts can also happen during dynamic content fetching, especially when new content like text, images, or ads is added to the page without reserving space for it in advance.

Content shifts can be frustrating, especially for users:

• With cognitive disabilities who may lose track of where they are in the content.

• Using screen magnifiers, where the shift can cause them to lose their zoomed-in focus.

• Navigating with a keyboard, as it can mess up the natural tab order and make navigation confusing.

You can pre-allocate space for content to prevent shifts by using the min-height or aspect-ratio properties. Here's how you can allocate space for an image to prevent content shift before the image has fully loaded.

img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover; /* Ensures the image fits well within the allocated space */
}

You can also use animations or transitions when dynamically loading content to add smooth transitions for new content. So, instead of a sudden shift, the content slides in gracefully, reducing the perception of disruption.

.new-content {
    transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

Reduce Motion

Rapid animations or really complex transitions can be disorienting for users with motion sensitivity, which could lead to discomfort like headaches, dizziness, or vertigo (for users with vestibular disorders).

You can use CSS’s prefers-reduced-motion media query to reduce or disable animations for users.

Personally, instead of disabling animations completely, I replace complex, distracting animations with more subtle ones to maintain functionality while respecting user preferences.

Here's how to use prefers-reduced-motion to create a simpler animation:

/* Default animation */
@keyframes complexAnimation {
    0% { transform: translateX(0); opacity: 0; }
    50% { transform: translateX(100px); opacity: 0.5; }
    100% { transform: translateX(0); opacity: 1; }
}

.element {
    animation: complexAnimation 2s ease-in-out;
}

/* Simpler animation for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    @keyframes simpleAnimation {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    .element {
        animation: simpleAnimation 1s ease-in-out;
    }
}

Here’s an example from the code above. If you have reduced motion enabled you’ll see a fading ball instead of a moving ball:

Note: If you want to see the reduced motion in action, you can enable it in the rendering tab on Google Chrome.

Focus Within for Nested Elements

You can highlight or style a parent element when any of its child elements receive focus to make it clear which group (like form inputs or dropdown menus) is currently being interacted with.

To do this, you can use CSS’s :focus-within pseudo-class which is used to style an element when any of its descendants receive focus either through keyboard navigation or user interaction.

For example, to highlight a fieldset when any item in the group is focused in a grouped control, you can do this:

<style>
 fieldset {
   padding: 10px;
   border: 1px solid #ccc;
 }

 fieldset:focus-within {
   border-color: #007BFF; /* highlight the fieldset when a user focuses on any input */
 }
</style>

<fieldset>
  <legend>Choose a color:</legend>
  <label><input type="radio" name="color" value="red"> Red</label>
  <label><input type="radio" name="color" value="green"> Green</label>
  <label><input type="radio" name="color" value="blue"> Blue</label>
</fieldset>

Customize Contrast Options

Sometimes you may be working on a design that uses lots of colors and might not maintain high contrast between text and background to fit an aesthetic. Or perhaps you're working on a design with lots of bright colors. In these cases, you should consider how your application renders for different users.

Some users with low vision or certain types of color blindness might need high contrast mode to differentiate text from the background more clearly. Other users sensitive to bright colors might prefer a softer, less jarring visual experience.

Some of these users might have their systems set to high or low contrast to help improve their experience. To customize their experience, you can use the CSS prefers-contrast media query.

The prefers-contrast media query allows you to tailor the contrast of your website or application based on the user's system settings.

Here's an example of using prefers-contrast:

/* default styling preference */
body {
    background-color: white;
    color: black;
}

/* high contrast preference */
@media (prefers-contrast: more) {
    body {
        background-color: black;
        color: white;
    }
    a {
        color: yellow;
    }
}
/* low contrast preference */

@media (prefers-contrast: less) {
    body {
        background-color: #f0f0f0;
        color: #333;
    }
    a {
        color: #555;
    }
}

In the example above, the prefers-contrast: more option ensures that when a user prefers high contrast, the background is black and the text is white, with yellow links for better visibility.

The prefers-contrast: less adjusts the color scheme to a softer color for users who prefer less contrast. The default style is used if the user has no specific contrast preference or if their preference is not detected.

Note: If your design uses minimal colors and maintains high contrast between text and background or you're working with a design where text is minimal and the focus is on visual content (like image galleries or video players), you might not need prefers-contrast as much. But it's still good practice to consider contrasts.

Enable Dark Mode

You can use CSS to accommodate users’ preferences for dark or light modes. You can achieve this through the CSS prefers-color-scheme media query. The browser can detect the user's color preference and apply the style if provided in CSS.

Here's an example of how you can add a dark mode style to your site using CSS variables:

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #000000;
    --text-color: #ffffff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

In the example above, the variables get updated if the browser detects a dark color scheme preference.

If you want to allow users to toggle between modes manually, you can use JavaScript for this:

<style>
 /* Default light mode styles */
  body {
   background-color: #ffffff;
   color: #000000;
  }
 /* Dark mode styles */
  body.dark-mode {
   background-color: #000000;
   color: #ffffff;
  }
</style>

<button id="toggle-theme">Toggle Theme</button>

<script>
  const toggleButton = document.getElementById('toggle-theme');
  toggleButton.addEventListener('click', () => {
   document.body.classList.toggle('dark-mode');
  });
</script>

Use rem Units for Responsive Typography

Using rem units for responsive typography can help enhance accessibility to adapt more dynamically to a user's preference. Since rem is relative to the root font size (typically set by the browser or user), it scales with changes in the base font size. This helps ensure that text remains readable without breaking layouts.

Users can set a preferred font size in their browser or operating system for better readability. When you use rem, the website content scales according to this setting which ensures that the text is not too small or too large for the users (which can happen when using fixed units like px).

When users zoom in using browser settings or increase their preferred text size, the rem-based text will scale appropriately.

The default root font size (usually 16px) is typically inherited from the browser, but you can set it explicitly if needed:

html {
  font-size: 100%; /* Default 16px */
}

After setting the root font size, you can use rem unit for the rest of your content. For example:

h1 {
  font-size: 2.5rem; /* Equivalent to 40px if root is 16px */
}

p {
  font-size: 1rem; /* Equivalent to 16px */
}

Use Animations to Enhance UX

CSS animations can enhance accessibility when used thoughtfully. They can help create an engaging and understandable experience for users.

Here are some ways that animations can help improve accessibility:

• You can use animations to indicate loading state to visually communicate to users that the system is working on a task.

• Using animated text effects, like fades or scaling on headlines or important sections, can help guide users' eyes to important content. This can be useful for people with cognitive disabilities who benefit from clear visual hierarchies.

• Subtle transitions for state change instead of having abrupt changes (like a modal popping up instantly) can create smoother transitions between different interface states.

• Using animated highlights or shaking effects on form fields can provide visual feedback to users about input errors. You should pair these animations with labels or ARIA attributes to make it clear what the user needs to correct.

• Animations can help users track focus, especially keyboard users or those with visual impairments. CSS transitions that highlight focused elements (for example by enlarging buttons or changing the border) assist users in understanding where they are within the page.

Best Practices:

• Ensure animations are used purposefully, not just for aesthetic reasons.

• Avoid overly long or continuous animations that can distract or annoy users.

• Combine animations with other accessible features, such as screen reader announcements, to ensure all users understand content changes.

Conclusion

When considering accessibility, well-structured HTML forms the foundation of an accessible page – but CSS also plays a vital role in enhancing that structure.

CSS alone cannot fix poorly structured HTML. But when it’s applied thoughtfully to a solid foundation, it ensures a more inclusive and engaging experience by improving visual hierarchy, readability, and interaction for users of all abilities.

Combining accessible HTML with CSS not only improves the user interface but also provides support for assistive technologies.

Thank you so much for reading this article. If you found it helpful, consider sharing. Happy coding!

You can connect with me on LinkedIn.