DEV Community: David Jaja

Your code has a health problem — Here's how to see it

David Jaja — Wed, 25 Mar 2026 08:39:51 +0000

A VS Code extension that scores your code like a doctor scores your health. No AI, no cloud, no guessing.

And that's the problem Iris was built to fix.

Every developer has that moment. You open a file you wrote three months ago and it's 400 lines long, has six nested if statements, three unused imports, and a console.log you forgot to clean up before the last deploy. You knew it was messy. You just didn't know how messy.

That's the gap Iris fills.

Why I built it

I kept moving through large codebases with no real sense of which files were actually problematic. Linters catch syntax errors. Formatters handle style. But nothing answered the question I kept asking: is this file fine, or is this file a problem?

Iris answers that question. Every time you open a file, in under a second, you know where you stand.

What Iris is

Iris is a VS Code extension that gives your code a health score — the same way a doctor gives you one after a checkup.

Open any file, and you get a score from 0 to 100, backed by actual measurements: cyclomatic complexity, code smell detection, unused import analysis, and function-level breakdowns. Not vibes. Numbers.

Run a workspace scan, and you get all of that aggregated across your entire project — a ranked list of your most complex files, a Problems tab with every finding sorted by severity, and TODOs surfaced from every corner of the codebase. Every finding is clickable and takes you directly to the line.

How the analysis actually works

No AI. No cloud. Everything runs locally.

When you open or save a file, Iris runs a full static analysis pass on it — usually under a second. There's a version-based cache, so it's not re-running on every keystroke, only when the file actually changes.

Each language has its own analyser with language-specific rules:

For TypeScript and JavaScript, Iris tracks things like any usage, @ts-ignore count, missing return types on exported functions, non-null assertions, and type assertion patterns — metrics that actually matter for TypeScript quality beyond what a linter gives you. It also detects unused variables and unused imports by checking whether each binding appears in the rest of the file after stripping out the import lines themselves.

For Go, the analyser understands the difference between exported and unexported functions — it won't flag a capitalised function as unused just because it isn't called within the file, since it may be the whole point of the package. It parses go.mod for workspace-level unused dependency detection.

For Python, function boundaries are tracked by indentation depth rather than braces, deep nesting is flagged at four indent levels rather than two, and unused function detection is scoped to _private functions only — public functions may be imported anywhere.

Complexity scoring starts at 1 and caps at 10, factoring in function density, max indentation depth, control flow count, and third-party import volume. The health score starts at 100 and gets deducted based on actual findings — any usages, console logs, unused variables, deep nesting, and long parameter lists. Floor is 0.

This is all deterministic. Same code, same score, every time.

Why the scores are weighted the way they are

A health score is only useful if the penalties actually reflect real-world impact. Here's the thinking behind the numbers.

Health score deductions

Not all code problems are equal, and the deductions reflect that.

@ts-ignore gets a heavier penalty than a stray console.log because it's an active decision to suppress the type system — you're not just leaving debugging code in, you're telling TypeScript to look away. Similarly, unused functions carry a larger penalty than unused variables. A dead variable is noise. A dead function is a maintenance trap: someone will eventually wonder if it's safe to delete, spend time tracing it, and find out it does nothing.

any usage sits in the middle — it's not always wrong, but it's a signal that type coverage has a hole. Each usage chips away at the score rather than tanking it, because one any in a large file is very different from twenty.

Errors deduct more than warnings, and warnings deduct more than info-level findings. That sounds obvious, but it means a file with one long function isn't necessarily unhealthy — it gets flagged, but it doesn't crater the score the way multiple suppressed type errors would.

Here's the full breakdown:

Finding	Deduction
Error-level warning	-5 each
Warning-level warning	-3 each
`any` usage	-2 each
`@ts-ignore`	-3 each
`console.log`	-1 each
Deep nesting (per function)	-2 each
Long parameter list (per function)	-1 each
Unused variable	-1 each
Unused function	-2 each

Score floor is 0 — it won't go negative.

Complexity score

Complexity is a 1–10 scale that answers a different question than health: not "is this code problematic?" but "how hard is this code to hold in your head?"

Four things contribute to it. Function density — how many functions exist relative to the file's size — reflects how much is being packed into one place. Max indentation depth is a proxy for nesting hell: deeply indented code usually means deeply nested conditionals, which means deeply nested logic you have to mentally unwind to follow. Control flow count tracks the actual branching — every if, for, while, switch, catch, and ternary is a decision point that multiplies the paths through the code. Third-party import volume is the loosest signal of the four, but a file pulling in a lot of external dependencies tends to be doing a lot of things, which usually means more to reason about.

Each factor has a cap on its contribution, so no single thing can max out the score alone. A file can be large and have many functions, but still score low on complexity if the logic itself is straightforward.

Workspace rankings

When you scan a full workspace, Iris surfaces two ranked lists: largest files by line count and most complex files by complexity score. These are intentionally separate because they answer different questions.

A 600-line file with simple, flat logic is a different kind of problem than a 200-line file with a complexity score of 9. The first is probably just overdue for a split. The second is the one that will slow down every developer who has to touch it.

The Problems tab sorts by severity — errors first, then warnings, then info. The goal is that the first thing you see when you open it is the thing most worth fixing, not just the most recent finding.

What it supports

JavaScript, TypeScript (including JSX/TSX), Go, and Python. Each language has its own analysis rules built for how that language actually works — not a one-size-fits-all pass applied to everything.

How to get it

Search Iris — Code Health on the VS Code Marketplace, or go to iriscode.co.

Free to install. The free plan covers full file-level analysis — health score, complexity, code smells, status bar, and code lens. Pro unlocks workspace and folder-wide scans, the Problems tab, TODOs aggregation, and .irisconfig.json for team-wide config. Pricing is regionally adjusted — Nigerian developers get an early adopter rate of ₦2,000/month until March 30.

What's next

The core is solid — file health, workspace scans, code smell detection, and unused import analysis. There's more coming. I'm not going to put a full roadmap here, but if you've ever wanted Iris in a CI/CD pipeline, or wanted to track whether your codebase is getting healthier or worse over time, that's the kind of direction things are heading.

If you try it and something feels off or missing, reply to this post or reach me at hello@iriscode.co. I read everything.

OneEntry Headless Content Management System

David Jaja — Fri, 02 Feb 2024 12:19:45 +0000

In the world of online content, where everyone talks about CMS, OneEntry stands out. Forget the usual CMS stories — OneEntry is more than just a solution; it’s a game-changer. It’s not your typical content manager. It’s super easy to use, flexible, and keeps your content safe. In a time when success is all about digital experiences, OneEntry is here to shake things up. Say goodbye to the usual and hello to something extraordinary! In this article, we’ll cover OneEntry CMS from practical integration steps to its unique features.

What Sets Headless CMSs Apart from Conventional Ones?

A headless CMS is a revolutionary type of content management system designed to liberate content creation and storage from the constraints of presentation on specific devices or platforms. In stark contrast to traditional CMS, which tightly intertwines the front end (what users see) with the back end (where content is managed), a headless CMS takes a more liberated approach. It decouples these components, offering unparalleled flexibility in disseminating content across diverse channels, making it a pivotal solution for crafting modern and engaging digital experiences.

Key Distinctions from Traditional CMS

Decoupled Front and Back Ends: Traditional CMS integrates the content creation and storage process tightly with the presentation layer, often limiting flexibility in content delivery. In contrast, a headless CMS decouples these functions, allowing for independent management and seamless distribution across various platforms.
Channel-Agnostic Content: Headless CMSs enable the creation of content that is agnostic to specific devices or channels. This means content can be repurposed and delivered effortlessly across websites, mobile applications, IoT devices, and other digital touchpoints without being tied to a predefined structure.
Enhanced Flexibility: The decoupling of the front and back ends grants developers the freedom to choose the technologies best suited for each component. This results in a more adaptable and scalable system that can evolve with technological advancements.
Efficient Content Delivery: With traditional CMS, content is often delivered in a predefined format, limiting its adaptability. Headless CMS empowers content creators to tailor their content dynamically, ensuring an optimal user experience across a spectrum of devices and platforms.
Ensuring long-term viability: The architecture of a headless CMS is naturally designed to anticipate shifts in technology and trends in content consumption. This adaptability serves as a strategic advantage, enabling businesses to maintain a leading position in the constantly evolving digital environment.

A Complete Content Management Solution

OneEntry is a headless CMS, which provides an extensive array of tools and functionalities that go beyond the normal boundaries of traditional data storage solutions. It’s not just a place to store your data; it’s a powerful platform that allows you to manage, organize, and present your content in the most effective way possible. With OneEntry, you can foster collaboration across your team, streamline your content delivery processes, and ultimately, enhance your audience’s digital experience.

A Prerequisite for Seamless Integration

Before delving into npm integration, let’s acknowledge the preliminary step — configuring your content with OneEntry’s intuitive GUI. If you’re new to this, fret not. The detailed instructions on OneEntry’s official instructions page are your go-to resource, covering account setup to content structuring.

OneEntry NPM Package

The OneEntry NPM package is a powerful tool for developers, offering efficient and adaptable features. It seamlessly integrates with all major frameworks, providing a toolkit that goes beyond limits. This compatibility unlocks OneEntry’s full capabilities and is accompanied by an in-code documentation and robust guide ensuring quick and effective integration.

Essentials:

Compatibility: OneEntry’s NPM package is framework-agnostic, supporting React, Angular, Vue, and more.
In-Code Documentation: Comprehensive documentation within the codebase for quick reference and clarity.

Integration Guide:

Run on your computer’s terminal

npm install oneentry

Then import the package

import { defineOneEntry } from 'oneentry';
To initialize your project, run the command and log to the console to see your OneEntry app instance.

const api = defineOneEntry('your-url', { apiKey: 'your-api-key' });

Logging your project instance to the console gives

Fetching data from your OneEntry Project

To demonstrate retrieving data from OneEntry, follow the following steps.

Log into your OneEntry project and create a couple of pages

Navigate to Settings and copy your API key

Create a local JS application (eg React).

npm create vite@latest
Finally, create an API request with your API key and domain URL.

useEffect(() => { const fetchData = async () => { try { const params = new URLSearchParams({ langCode: "en_US", }); const response = await fetch("${API_URL}/api/content/pages?${params}", { method: "GET", headers: { "Content-Type": "application/json", "x-app-token": API_TOKEN, }, }); const status = response.status; const data = await response.json(); setPages(data); console.log(data); console.log(status); } catch (error) { console.error("Error fetching data:", error); } }; fetchData(); }, []);

And with that, you’ve successfully fetched your pages data from your project.

Secure API and SDK Integration

OneEntry ensures the security of your data with a dedicated API and SDK for JavaScript and Swift, guaranteeing seamless content management. Security measures include the utilization of mTLS certificates and an optional token-based authentication system. Mutual TLS (mTLS) is a protocol ensuring both client and server authenticate each other, a vital layer of security for protecting sensitive data and preventing unauthorized access. For a step-by-step guide, check OneEntry’s material page, and if you’re setting up a Swift application, consult OneEntry’s SDK docs for a thorough walkthrough.

Backup

Recognizing the paramount significance of data security and integrity, OneEntry incorporates a robust content backup feature. Automatic data backups are regularly executed to mitigate the risk of data loss, ensuring the safety and retrievability of your content in unforeseen circumstances. This feature not only instills peace of mind but also offers the assurance that your data is secure and can be restored as needed. While the system handles backups automatically, users also have the flexibility to trigger manual backups through the admin panel.

Attribute-based System

OneEntry operates on an attribute-based system. This system allows you to create attribute sets for various elements such as pages, goods, news, blocks, etc. The built-in logic for linking attributes makes it easy to use through the admin panel. Users can edit, add, and delete attributes in a working project, providing flexibility and customization to suit your specific needs. This attribute-based structure is a powerful tool for data validation and content customization, including its usage for form building.

Attribute Sets for Pages and Blocks

Creating attribute sets for pages and blocks in OneEntry is straightforward. For pages, you can create attributes like Image and Text with Header. For blocks, you can create attributes like String and Image. These attributes allow you to customize your pages and blocks to suit your specific content needs. To do this, head over to content management, select your page and edit the attributes of your use case.

Validation

OneEntry uses attribute validators for data validation. This feature ensures that the data entered matches the specified attribute type, enhancing the integrity and reliability of your data. It simplifies the process of server-side validations, making it easier for developers to ensure data accuracy.

Module Overview

OneEntry offers key modules such as Catalog, Menu, Forms, and Blocks. The Catalog module allows you to create text, catalogue, news and other pages, add forms, blocks and other elements to pages, and set up hierarchies. The Forms module lets you add/delete/edit fields, configure validation and placeholders, and set up interaction with the form. The Blocks module provides page elements showing the content, such as text or news.

Creating and Managing Menus

OneEntry allows you to create menus and rearrange pages within the menu. You can also nest pages within each other, providing a hierarchical structure to your content. This feature offers flexibility in organizing your content and enhances the user experience.

Customization using Blocks

Blocks in OneEntry extend page content and provide flexibility in adding them to pages. They are page elements that display content such as text, or news. This feature allows for a high level of customization, enabling you to tailor your pages to your specific needs.

Multilingual Content Storage

OneEntry supports storing content in multiple languages. This feature is particularly useful for businesses operating in multiple regions or countries, as it allows for content localization and enhances the user experience.

Product Catalog Relation

OneEntry allows for linking products as “Related Products” in the catalogue. This feature facilitates better organization and presentation of product information, making it easier for users to find related products.

Managing Product Statuses

OneEntry allows you to manage product statuses. This feature is important in organizing and presenting products. It enables you to categorize products based on their status, making it easier for users to find what they are looking for.

Administrator Action Log

OneEntry provides an administrator action log. This feature tracks and monitors administrative activities, providing transparency and accountability. It is a useful tool for auditing and tracking changes made by administrators.

Additional Features

OneEntry offers several unique and notable features that make it a comprehensive Content Management System. It is a flexible, user-friendly, and scalable backend that allows you to manage all your websites and applications from a centralized dashboard. With OneEntry, you can deliver content at scale to multiple platforms like websites, mobile applications, electronic devices, IoTs, etc.

Conclusion

OneEntry is a comprehensive, flexible, and user-friendly Content Management System that goes beyond traditional data storage. It is a complete content management solution that offers a wide range of tools and functionalities, designed to streamline content delivery processes and enhance digital experiences. Whether you’re a beginner or an experienced developer, OneEntry provides a platform that meets your needs, empowering you to create, manage, and deliver content effectively and efficiently. With OneEntry, you are not just managing your content; you are transforming how your content is presented and delivered to your audience.

Originally published at https://daiveedjay.hashnode.dev on February 2, 2024.

Building a Utility Weather Widget with JavaScript

David Jaja — Mon, 19 Dec 2022 09:31:50 +0000

We've all seen widgets on web pages before, haven't we? Those little icons of varying shapes and sizes usually displayed in a corner of a devices viewport. These widgets are simply small, pre-designed components that can be easily added to a website to provide additional functionality or information. They can be made using HTML , CSS , and JavaScript. By hovering over or clicking on a widget, you can interact with it and see what it does. Examples of widgets include chatbots in the sidebar, pop-ups, and CTA buttons.

In this article, we will learn how to build a widget that displays a user's current weather, date and time using their current location.

Why use Widgets?

For one, you can use widgets to improve the visual organization and presentation of information on a website. Widgets can be added to a website to provide additional features or hide data that may create cluttered visual elements. They can also be used to display pop-ups and other types of information without making changes to the website's underlying code. By using widgets, you can effectively reduce clutter and improve the overall appearance of your website.

Prerequisites

Fundamental knowledge of HTML, CSS and JavaScript.
Fundamental knowledge of JavaScripts Native Internalization and Geolocation API.
Fundamental knowledge of Asynchronous JavaScript (Using Promises and the try catch block).
A code editor and a browser (Preferably Google Chrome).
Fundamental knowledge of the working of a Browsers Dev Tools.

Project Breakdown

Before we dive into building our project, it is important to know that this project consists of 2 parts:

The Interface section
The Functionality section

The Interface Section

This section consists of all the mockup and styling required to render our widget on the page. Instead of diving head-first into the strange-looking HTML and CSS, I will give you a sneak preview of what the widget will look like in the end. This will help you understand why our codebase is structured the way it is.

Excited right? Lets dive in!

The markup for this project is shown below.

<body>
    <div class="widget">
      <div class="widget__blob">
         <i class="fa-duotone fa-gear"></i>
      </div>
      <div class="widget__sidebar">
        <div class="arrow__pointer"></div>
        <div class="weather">
          <span class="greet">Hi there, </span>
          <i class="fa-solid fa-hand-wave"></i><br />
        </div>
        <div class="date">Placeholder Date</div>
        <div class="color__palette--container">
          <div class="color__palette" data-bgcolor="#5DADE2"></div>
          <div class="color__palette" data-bgcolor="#cf9fed"></div>
          <div class="color__palette" data-bgcolor="#73C6B6"></div>
          <div class="color__palette" data-bgcolor="#EDBB99"></div>
          <div class="color__palette" data-bgcolor="#808B96"></div>
        </div>
      </div>
    </div>

I know the HTML markup looks weird with all the nesting and data attributes 😂, so lets go over it. First, the main parent element is a div with the class widget containing 2 child elements, ( widget__blob ) and ( widget__sidebar ). The widget__blob contains only one element, which is an icon from font awesome .

Next, the widget__sidebar contains 4 elements ( arrow__pointer, weather, date and color__palettecontainer ), which are all self-explanatory. The only thing left to highlight is the data-bgcolor attribute attached to each of the color-pallette elements. This attribute will help us dynamically set each of the elements background to the value set in its data-bgcolor attribute. With the HTML set, we can now proceed to the CSS part of this section.

The Styling for this project is shown below.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Ubuntu", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #e0e0e0;
}

.widget {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.widget__blob {
  width: 75%;
  height: 75%;
  cursor: pointer;
  background: #5dade2;
  border-radius: 68% 55% 46% 69% / 58% 74% 44% 59%;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  color: #f0f4fd;
  transition: all ease-in 0.2s;
}

.widget__blob:hover > i {
  animation: blobby 10s infinite linear;
}

@keyframes blobby {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.widget__sidebar {
  color: #3d3d3d;
  position: absolute;
  top: 0;
  width: 170%;
  left: -200%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  gap: 1rem;
  line-height: 1.5;
  transition: all ease-in 0.2s;
  background: #5dade2;
  border-radius: 1rem;
}

.arrow__pointer {
  position: absolute;
  content: "";
  top: 50%;
  transform: rotate(45deg) translate(0, -50%);
  right: 0;
  background: #5dade2;
  width: 50px;
  height: 50px;
  transition: all ease-in 0.2s;
  z-index: -1;
}

.weather span {
  color: #fff;
  font-size: 1.6rem;
}

.weather i {
  font-size: 1.6rem;
  color: #fff;
}

.color__palette--container {
  display: flex;
  gap: 0.5rem;
}

.color__palette {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
}

There's quite a lot of CSS code there, so feel free to take a moment to analyze it before moving on. The styling above simply arranges the two child elements of the widget element next to each other and adds some interactivity to the widget__blob element.

What weve achieved so far can be seen below

We neatly presented both elements and their contents, with only the elements in color__palette--container still yet to be displayed, but dont worry, we would fix that in the Functionality section.

The Functionality Section

This section consists of all our programs logic and how the widget would work. To help you grasp the totality of everything were going to do, heres a flowchart of our application.

Flowchart of the Application

Before we begin implementing, we should keep in mind that we will start on the right side with the Load Page symbol.

Weve already added the widget to the webpage. Now, we will handle the behaviour when the widget is clicked. We want to hide the widget__sidebar element and only show it again when the widget__blob is clicked. To achieve this, we will create a CSS class that hides the widget__sidebar element and add that class to the widget__sidebar element in our HTML markup.

.hidden {
  opacity: 0;
  transform: translateX(-100%);
}

Then target the widget__sidebar element to render the widget__sidebar visible with JavaScript whenever we click on the widget__blob.

const widgetBlob = document.querySelector(".widget__blob");
const widgetSideBar = document.querySelector(".widget__sidebar");

const revealSideBar = function () { widgetSideBar.classList.toggle("hidden"); 
};
widgetBlob.addEventListener("click", revealSideBar);

Here is a quick recap of how we just achieved this;

First, we selected both elements and stored them in variables.

Next, we created a function called revealSideBar which toggles the hidden class on the widget__sidebar element every time the widget__blob is clicked. Finally, we attached an event handler function to the widget__blob and passed the revealSideBar function as a callback. This means that the revealSideBar function will be called every time the widget__blob is clicked.

The next step in our flowchart is to display the color palettes and the current date and time. To do this, we use the following lines of code to dynamically set the color of each palette element to its corresponding HTML data attribute value (recall we stored color codes in their individual data attribute in our HTML markup).

const colorPalete = document.querySelectorAll(".color__palette");
colorPalete.forEach((el) => (el.style.backgroundColor = el.dataset.bgcolor));

This simply loops over each element and changes the background color to the value set in its data-bgcolor attribute.

Thus producing the interface below.

Next, we work on displaying live date and time information on the widget__sidebar. To accomplish this, we would make use of JavaScripts Internationalization API . This API is a built-in feature of the JavaScript language that provides a set of functions and objects for formatting and parsing dates, numbers, and strings according to the conventions of a specific locale (ie the language format of the users location).

To begin, we first select our HTML element where we plan to store our date and time information.

const dateEl = document.querySelector(".date");

After that, we retrieve the language preference of the user from the browser using navigator.locale and store it in the locale variable.

const locale = navigator.language;

Logging my locale to the console, yields

Then we create a date using the date constructor function and store the result in the now variable.

const now = new Date();

Logging our result to the console gives:

Remember that the date and time information will vary based on when you implement this.

Next, we create a date options object which we would use to extract all the information we want from the date object.

const dateOptions = {
    hour: "numeric",
    minute: "numeric",
    day: "numeric",
    month: "long",
    year: "numeric",
    weekday: "long",
  };

Then, we use our Internationalization API to format our date to the users locale. To do this, we first create our Internationalization function and store it in a variable with the syntax below.

const curDate = new Intl.DateTimeFormat();

After that, we pass in our locale and our dateOptions object as arguments to our Internationalization function.

const curDate = new Intl.DateTimeFormat(locale, dateOptions);

Then, we call the format method on the date were trying to format.

const curDate = new Intl.DateTimeFormat(locale, dateOptions).format(now);

Looking at what weve done in the console gives;

Finally, we display our well-formatted data on our webpage.

 dateEl.textContent = `Your current date and time is ${curDate}`;

With that, lets have a look at our interface so far.

And yeah, weve successfully implemented live date and time information which is already pretty cool. Lets refactor our new code into a nice helper function getDnT which contains all our date and time logic.

const getDnT = function () {
  const now = new Date();
  const dateOptions = {
    hour: "numeric",
    minute: "numeric",
    day: "numeric",
    month: "long",
    year: "numeric",
    weekday: "long",
  };
  const locale = navigator.language;
  const curDate = new Intl.DateTimeFormat(locale, dateOptions).format(now);
  dateEl.textContent = `Your current date and time is ${curDate}`;
};

Finally, we call the getDnT function with the same event handler function we called the revealSideBar function, like so

widgetBlob.addEventListener("click", function () {
  revealSideBar();
  getDnT();
});

Note : Instead of calling our function manually, we can attach it to an event handler function. This will prevent the function from constantly running in the background, which can improve performance.

To clarify the next step, we will change the theme of the widget_sidebar , arrow__pointer , and widget__blob based on the color palette that we click.

Id like to divide this step into 3 sub-steps:

Theme Changing (Changing the theme based on the palette we click).
Active Class Addition (Adding an active class to the current palette we clicked on).
Local Storage Use ( Storing the active theme in local storage to prevent the theme from resetting on reload of the webpage).

Theme Changing

For this first step, we create a themeChanger function containing all the swapping logic between our target elements.

const arrowPointer = document.querySelector(".arrow__pointer");
const themeChanger = function (e) {
  widgetSideBar.style.backgroundColor = e.target.dataset.bgcolor;
  widgetBlob.style.backgroundColor = e.target.dataset.bgcolor;
  arrowPointer.style.backgroundColor = e.target.dataset.bgcolor;
};

The e argument is simply the event object which points to the current element being clicked. Then, we loop over each color__palette element, attach an event handler, and pass in the themeChanger function as an argument. This runs our themeChanger function everytime we click on a palette.

colorPalete.forEach((el) => {
  el.addEventListener("click", themeChanger);
});

We have successfully implemented the first step of our theme changer function.

Active Class Addition

If you paid attention, you may have noticed that whenever we click on a palette, it appears to blend in and disappear with the background. We plan to fix this by adding an active class to any element we click on, which will make it easier to see which element is currently selected. We first create a CSS active class which separates the active palette from the rest.

.color__palette--active {
  border: 1.5px solid #fff;
}

Then, we add that active class to any palette we click on using the code snippet below.

 e.target.classList.add("color__palette--active");

Finally, to ensure that only the clicked palette has the active class, we need to remove the active class from all other palettes. This way, when a new palette is clicked, it will be the only one palette with an active class. This will help us achieve the desired behaviour where only one palette can be active at a time.

colorPalete.forEach((el) => el.classList.remove("color__palette--active"));

Note : We're adding the above code snippets to our themeChanger function so that we can add the active class when we toggle between themes.

This leaves our final function looking something like this:

const themeChanger = function (e) {
  widgetSideBar.style.backgroundColor = e.target.dataset.bgcolor;
  widgetBlob.style.backgroundColor = e.target.dataset.bgcolor;
  arrowPointer.style.backgroundColor = e.target.dataset.bgcolor;
  colorPalete.forEach((el) => el.classList.remove("color__palette--active"));
  e.target.classList.add("color__palette--active");
};

Local Storage Use

In the third step, we will use Local Storage to save the theme that the user has selected. This way, their theme selection will be retained even if the user refreshes the page or closes it. To do this, we have to store the current theme in Local Storage and load that theme whenever the user refreshes the page. Seems fairly easy? Lets begin then.

First, we call the setItem method on the LocalStorage object.

localStorage.setItem();

This method enables us to store data in the browser and create a key: value pair, with the key being a name used to reference the stored value in Local Storage.

Next, we pass in key: value pair into our setItem method

localStorage.setItem("palette", color);

Keep in mind that the color argument would be the value stored in the palette we click.

Next we wrap our above snippet in a function.

const setLocalStorage = function (color) {
  localStorage.setItem("palette", color);
};

This way, whatever value is being called with the setLocalStorage function becomes color value.

Next, we call the setLocalStorage function with the element that was clicked.

setLocalStorage(e.target.dataset.bgcolor);

Note: To ensure that Local Storage is updated with the current theme, we call this function inside the themeChanger function.

To prove Local Storage is operational, head over to your developer tools, open the application tab, and then click on a palette.

If you observe closely, each time we click on a palette, the local storage theme value is updated, proving weve successfully saved the current theme value.

To ensure that we dont lose our theme when we reload or exit the webpage, we retrieve our theme from local storage and update our interface. To implement this, we start by listening for the load event.

window.addEventListener("load", function () {});

Next, we retrieve the value stored in our Local Storage using its key and store it in a variable.

const paletteColor = localStorage.getItem("palette");

After that, we change the theme of all our targetted elements to the value stored in Local Storage.

widgetSideBar.style.backgroundColor = paletteColor;
widgetBlob.style.backgroundColor = paletteColor;
arrowPointer.style.backgroundColor = paletteColor;

Next, we clear all the active classes on the palette elements

colorPalete.forEach((el) => el.classList.remove("color__palette--active"));

Finaly, we select the palette whose data attribute value matches that value stored in the Local Storage, and add the active class to it.

const btn = document.querySelector(
    `.color__palette[data-bgcolor="${paletteColor}"]`
  );
btn.classList.add("color__palette--active");

We have successfully completed all the steps on the right side of our flowchart. Congratulations on making it this far 🎈, but we still have more work to do.

Next up, wed be working on adding live weather information using asynchronous JavaScript ( promises and the try catch block. ).

Adding Weather functionality to the Widget using Asynchronous JavaScript

A code is asynchronous if it can execute multiple lines of code at the same time, rather than executing them one at a time in the order in which they appear.

In JavaScript, asynchronous code is typically written using callback functions , promises , or async/await. These techniques allow the JavaScript engine to execute multiple lines of code concurrently, rather than executing them sequentially. In this step, were going to use promises and async/await. techniques to fetch the users current position and supply the user with weather data corresponding with their location.

The steps to achieving this include:

Promisifying the Geolocation API.
Catching the error produced when the Geolocation API promise fails.
Creating an async function to contain all our logic.
Extracting the users coordinates.
Fetching the users city data with the users coordinates.
Throwing an error if the users city data cannot be obtained.
Fetching the users weather data with the users coordinates.
Throwing an error if the users city weather data cannot be obtained.
Destructuring the weather data object to get the weather value.
Storing the final weather data string in a variable.
Inserting the weather data in our webpage.

const getPosition = function () {
  return new Promise(function (resolve, reject) {
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
};

Keep in mind that calling this function right now returns a promise and not the data gotten from the Geolocation function.

Next, we catch any errors formed when the Geolocation promise fails (i.e, the user refuses to share their location data).

getPosition().catch((err) =>
  alert(`${err.message}. Please grant location access to see weather data`)
);

After that, we create our async function which includes a trycatch block to contain all our logic.

const whereAmI = async function () {
  try {
  } catch {}
};

To extract the users coordinates (latitude and longitude), we simply await the values from the getPosition function, then deconstruct the result into 2 variables.

const position = await getPosition();
const { latitude, longitude } = position.coords;

Next, we use a Reverse Geolocation API to convert our coordinates into a defined city. Ill be using Geocode XYZs Reverse Geolocation API to perform this operation.

const responseGeo = await fetch( `https://geocode.xyz/${latitude},${longitude}?geoit=json&auth=YOUR_API_KEY`
    );

Our result in the console becomes

If an error occurs during the fetch operation, we handle that by using an error constructor function to throw an error message.

if (!responseGeo.ok) throw new Error("Problem getting location data");

If no error occurs, we convert the result of our fetch function to an object using the .json() method.

const dataGeo = await responseGeo.json();

Next, we use a Weather API to fetch the users weather information based on their current position. Well be using Open Metros API to get our weather data.

const weatherResponse = await fetch(
      `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&hourly=temperature_2m`
    );

Our result in the console becomes

We also account for errors during the fetch operation.

if (!weatherResponse.ok) throw new Error("Problem getting Weather data");

Then convert the value of the fetch function to an object if we do not encounter any errors.

const weatherData = await weatherResponse.json();

We then deconstruct our weatherData object to obtain the exact current weather value.

const [curWeather] = weatherData.hourly.temperature_2m;

After that, we create a string which contains the format for displaying our weather on our webpage.

const finalWeather = `The weather in ${dataGeo.region} right now is ${curWeather} ${weatherData.hourly_units.temperature_2m}`;

Logging our progress to the console so far gives:

The resulting data will vary based on your location, but the format would likely be similar.

Then, we insert the above string into our webpage

const weatherEl = document.querySelector(".weather");
 weatherEl.insertAdjacentText("beforeend", finalWeather);

And with this, weve successfully completed our widget, congratulations!🎉🎉

Only thing left to do is catch any errors that we may not have caught earlier using the catch block and log that to the console.

catch (err) {
    console.log(`${err} 💥💥💥`);
  }

Then calling our function in the global scope.

whereAmI();

Our final codebase looks something like this

const setLocalStorage = function (color) {
  localStorage.setItem("palette", color);
};

const widget = document.querySelector(".widget");
const widgetBlob = document.querySelector(".widget__blob");
const widgetSideBar = document.querySelector(".widget__sidebar");
const arrowPointer = document.querySelector(".arrow__pointer");
const weatherEl = document.querySelector(".weather");
const paletteContainer = document.querySelector(".color__palette--container");
const colorPalete = document.querySelectorAll(".color__palette");
const dateEl = document.querySelector(".date");

window.addEventListener("load", function () {
  const paletteColor = localStorage.getItem("palette");
  widgetSideBar.style.backgroundColor = paletteColor;
  widgetBlob.style.backgroundColor = paletteColor;
  arrowPointer.style.backgroundColor = paletteColor;

  const btn = document.querySelector(
    `.color__palette[data-bgcolor="${paletteColor}"]`
  );
  colorPalete.forEach((el) => el.classList.remove("color__palette--active"));
  btn.classList.add("color__palette--active");
});

const revealSideBar = function () {
  widgetSideBar.classList.toggle("hidden");
};

widgetBlob.addEventListener("click", function () {
  revealSideBar();
  getDnT();
});

colorPalete.forEach((el) => (el.style.backgroundColor = el.dataset.bgcolor));

const themeChanger = function (e) {
  widgetSideBar.style.backgroundColor = e.target.dataset.bgcolor;
  widgetBlob.style.backgroundColor = e.target.dataset.bgcolor;
  arrowPointer.style.backgroundColor = e.target.dataset.bgcolor;
  colorPalete.forEach((el) => el.classList.remove("color__palette--active"));
  e.target.classList.add("color__palette--active");
  setLocalStorage(e.target.dataset.bgcolor);
};

colorPalete.forEach((el) => {
  el.addEventListener("click", themeChanger);
});

document.addEventListener("keydown", function (e) {
  if (e.key === "Escape" && !widgetSideBar.classList.contains("hidden")) {
    widgetSideBar.classList.toggle("hidden");
  }
});

const getDnT = function () {
  const now = new Date();
  const dateOptions = {
    hour: "numeric",
    minute: "numeric",
    day: "numeric",
    month: "long",
    year: "numeric",
    weekday: "long",
  };

  const locale = navigator.language;

  const curDate = new Intl.DateTimeFormat(locale, dateOptions).format(now);

  dateEl.textContent = `Your current date and time is ${curDate}`;
};

const getPosition = function () {
  return new Promise(function (resolve, reject) {
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
};

getPosition().catch((err) =>
  alert(`${err.message}. Please grant location access`)
);

const whereAmI = async function () {
  try {
    const position = await getPosition();
    const { latitude, longitude } = position.coords;
    const responseGeo = await fetch(
      `https://geocode.xyz/${latitude},${longitude}?geoit=json&auth=YOUR_API_KEY`
    );

    if (!responseGeo.ok) throw new Error("Problem getting location data");
    const dataGeo = await responseGeo.json();

    const weatherResponse = await fetch(
      `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&hourly=temperature_2m`
    );
    if (!weatherResponse.ok) throw new Error("Problem getting Weather data");

    const weatherData = await weatherResponse.json();
    const [curWeather] = weatherData.hourly.temperature_2m;

    const finalWeather = `The weather in ${dataGeo.region} right now is ${curWeather} ${weatherData.hourly_units.temperature_2m}`;

    weatherEl.insertAdjacentText("beforeend", finalWeather);
  } catch (err) {
    console.log(`${err} 💥💥💥`);
  }
};
whereAmI();

As you can see, our utility widget is fully operational, good going! It displays accurate time, date and weather information all at the click of a button, pretty cool, dont you think?

Limitation

Despite our best efforts to build a cool application, it does have a limitation. Both APIs used during implementation were free APIs, meaning that they can only handle a limited number of API calls per second. This hinders our widget from being a full-scale application that can be used by a large number of people simultaneously.

Project Link

Source Code: GitHub

Conclusion

We successfully built a utility widget using JavaScript that can provide us with the current weather, date, and time. This widget utilizes the fetch() function to retrieve data from a Weather API and the Date object to access the current date and time. By implementing this widget, we have demonstrated the power of JavaScript in creating dynamic and useful web applications. With a few lines of code, we are able to access real-time data and display it in a user-friendly manner, making it easy for users to stay informed and up-to-date. Overall, this widget serves as a useful tool for anyone looking to quickly check the current weather, date and time.

Implementing image lazy loading to improve website performance using JavaScript

David Jaja — Wed, 16 Nov 2022 09:09:38 +0000

You know that feeling of logging into a website but having to wait an extra few seconds before you can efficiently navigate the page because the images haven't loaded completely? Annoying, right? 😅 Well, this situation typically occurs based on one of the following reasons:

A slow internet connection.
An older (slower) device.
The size of the image being fetched by the browser.

With the use of graphic assets(images) on websites for aesthetics, illustration, data representation, and several other reasons, there is a need to find more efficient ways of quickly delivering them to the users. Hence, the need for the implementation of lazy loading in images.

Prerequisites

Fundamental knowledge of HTML, CSS and JavaScript.
Fundamental knowledge of JavaScripts Intersection API.
A code editor and a browser (Preferably one that supports JavaScripts Intersection API eg Google Chrome).
Fundamental knowledge of the working of a Browsers Dev Tools.

What is lazy loading?

Put plainly, lazy loading is a technique in web development where the loading of resources is postponed on a page until they are needed rather than loading them immediately after the page loads. This technique helps to improve user experience, makes better use of the device's resources, and helps optimize page performance.

Why Lazy Load at All?

If the user never scrolls to the point on the page where the image resides, then there is never a need to load it in the first place, leading to increased website performance.

Methods of Lazy Loading

Some methods of performing lazy loading include:

Use of JavaScript libraries eg Layzr.js.
Triggering the image loading using native JavaScript.

What is an Intersection Observer API?

The Intersection Observer API is a native JavaScript API that allows the browser to observe changes according to the way a specific target element intersects another element in the DOM. It is also a great way to keep track of how much of an element is visible on the screen.

How does the Intersection Observer API work?

The Intersection Observer API watches an element or elements to see if it intersects (meets or passes through) another element in the DOM. It can also be set up to watch for intersections between an element and the browser's viewport. The intersection observer function watches for a specified intersection event and fires a callback function when that event occurs.

Note : A callback function is a normal function passed to another function as that functions argument.

Creating a simple Intersection Observer

To create an Intersection Observer, we would need to adhere to a couple of steps.

Define the Intersection Observer function itself.
Call the observe method on the element we wish to observe.
Define our observer callback function.
Define our observer options object.

I know all this seems pretty complex, so Ill break it down into smaller, more manageable steps.

Firstly, we initialize and store our Intersection Observer function in a variable using the syntax below.

const observer = new IntersectionObserver();

The IntersectionObserver function takes in two arguments as parameters, i.e., an observer options object and a callback function, but more about that later.

After initializing the IntersectionObserver API, we have to specify which element we wish to observe using the observe method. To do this, we call the observe method on our observer API and pass the element were trying to observe to the observe method.

observer.observe(h1);

In this case, weve chosen to observe the h1 element.

Next, we specify or define our Observer callback function. This callback function holds what we want the observed element to do or how we want it to behave.

const observerCallback = function () {};

Finally, we define the observer options object i.e., the second argument passed to our observer function. This is used to customize the intersection event; and before creating this, we must first understand the contents of this object. This object contains the following properties:

root : This is the root element that our target element is intersecting. For reference, our target element is the h1 element we just recently observed.
threshold : This is the percentage of the root element at which the event is triggered. To better explain it, let's use an example of a swimming pool as the root element. How deep should a person (target element) dive into the pool (root element) before it is considered an intersection. Similarly, the threshold is the intersection required before the Intersection observer event is fired and its callback function (observerCallback) is executed. To set the threshold value, we use numbers between 0 to 1 to indicate the value from 0% to 100%.

Creating the observer options object becomes:

const observerCallback = {
    root: null,
    threshold: 0.1,
};

Note : If the root element is unspecified, or set to null , the root element becomes the entire browsers viewport, just as weve done in our code sample above.

Considering this article isnt intended on explaining the workings of the JavaScript Intersection Observer extensively, Ill recommend the following articles for a better understanding.

Now, that were familiar with JavaScripts intersection Observer API, lets dive into the actual implementation of the lazy loading feature.

Creating Lazy Loading Images with JavaScripts Intersection Observer

The main idea behind image lazy loading is to showcase a low-resolution/size version of the image (that is faster to download) when the page loads, and then replace that image with the final higher-quality image when the user scrolls to where the image is located on the webpage. Lazy loading logic can be made possible through JavaScripts native Intersection Observer API with the following steps:

Check for the users current viewport when the page loads.
Check for intersections between the viewport and the target element.
Swap the low-resolution image for its high-resolution alternative when the target element intersects with the viewport.

Considering the size of our project to be built, we would divide the implementation into three phases;

The mockup phase ( Webpage Creation)
The CSS phase ( Webpage Designing )
The JavaScript phase ( Functionality development )

Keep in mind that we would only explain the essential parts of the first two stages of implementation.

The Mockup phase

This phase consists of all the HTML markup we are going to need for the project.

<body>
    <header>
      <h1>Just a header</h1>
    </header>
    <main>
      <div class="image__container">
        <img
          src="./img/digital-lazy.jpg"
          data-src="./img/digital.jpg"
          alt="Computer"
          class="section__img"
        />
        <div class="image__description"> Lorem ipsum dolor sit amet consectetur adipisicing elit.Quas iusto eius sapiente distinctio aut quaerat ab. Necessitatibus provident esse repudiandae culpa officiis libero minus, consequatur incidunt voluptates repellat sunt cum?
        </div>
      </div>
      <div class="image__container">
        <div class="image__description">
         Lorem ipsum dolor sit amet consectetur adipisicing elit.Quas iusto eius sapiente distinctio aut quaerat ab. Necessitatibus provident esse repudiandae culpa officiis libero minus, consequatur incidunt voluptates repellat sunt cum?
        </div>
        <img
          src="./img/card-lazy.jpg"
          data-src="./img/card.jpg"
          alt="Card"
          class="section__img"
        />
      </div>
      <div class="image__container">
        <img
          src="./img/grow-lazy.jpg"
          data-src="./img/grow.jpg"
          alt="Plant"
          class="section__img"
        />
        <div class="image__description">
         Lorem ipsum dolor sit amet consectetur adipisicing elit.Quas iusto eius sapiente distinctio aut quaerat ab. Necessitatibus provident esse repudiandae culpa officiis libero minus, consequatur incidunt voluptates repellat sunt cum?
        </div>
      </div>
    </main>
    <footer><h1>Just a footer</h1></footer>
  </body>

Its a little overwhelming, I know. Lets go over it then. We created three sections; a header section, the main section, and a footer section.

The header section only contains a heading text, which would be helpful when scrolling into our observed elements.

We created three sections; a header section, the main section, and a footer section. The header section only contains a heading text, which would be helpful when scrolling into our observed elements. The main section consists of three child elements named ( image__container ). Each of these three children elements contain two child elements (an img element and a div ). Finally, the footer section contains a heading text.

After taking a closer look at the HTML markup, you may notice that each img element contains two similar attributes: the src and the data-src attribute. These attributes would be useful in implementing the lazy loading feature because they are the attributes that contain the images we are swapping. The src attributes contain the initial low-resolution images and the data-src attributes, are custom attributes containing the high-resolution images.

The HTML markup looks like this;

The CSS phase

Then, for the CSS, we have the following codes:

header {
  border-bottom: 1px dashed #888;
}

header,
footer {
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  font-size: 2rem;
}
footer {
 border-top: 1px dashed #888;
}

.image__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3rem;
  gap: 2rem;
  place-items: center;
}

.image__container img {
  width: 100%;
}

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

We use the above code block to style our webpage to display the images neatly before we add our lazy loading effect. A visual representation of what we have achieved so far:

At a first glance, we can see the well-laid-out structure of our webpage, the separation between sections, and, more importantly, how only the low-resolution images load into the webpage. Now, it is time to focus on the functional aspect of our webpage.

The JavaScript Phase

Below is a step-by-step procedure for this phase to help us better understand what we plan to do. These steps include;

Outlining and selecting all the elements to be lazy-loaded.
Creating our intersection observer function. This process breeds two subprocesses which are:
- Creating our observer callback function.
- Creating our observer options object.
Passing the callback function and options object as arguments of the Intersection observer function.
Looping through all the observed images to observe each of the images.
Creating a guard clause to ignore non-intersecting events.
Creating a lazy loading event which fires when the observed images intersect with the viewport. This logic is responsible for swapping out the low-quality image for the high-quality image.
Adding a blurry effect to the images, so they appear blurry when swapping hasnt occurred and clear when it has.
Capturing the load event to remove the blurry filter when the load event is done.
Unobserving all the images after theyve been loaded.

As you can see, weve got our work cut out, so lets dive right in.

Firstly, we identify what elements we plan to lazy load on our webpage. On quick inspection of our HTML document, we can quickly determine that all our images have a common attribute called data-src, so we use that attribute to select them.

const imgTargets = document.querySelectorAll("img[data-src]");

Next, we initialize our intersection observer API.

const imgObserver = new IntersectionObserver();

Define our observer callback function.

const imgLoad = function (entries, observer) {};

It is important to note that our observer callback function is invoked with two arguments:

The entries argument, which is an array that holds the IntersectionObserverEntry Object. This object contains several properties describing the intersection event between the target element and its root element.
Its second argument is the observer object (i.e., the intersection Observer we created earlier).

And our observer options object:

const obsOptions = {
  root: null,
  threshold: 0.2,
};

Note: We set the root to null to trigger our lazy loading effect relative to the devices viewport and set a threshold of 0.2, i.e., to trigger our functionality when a 20% intersection is obtained.

Next, we pass the callback function and options object as arguments to the Intersection observer function.

const imgObserver = new IntersectionObserver(imgLoad, obsOptions);

After that, we use a forEach loop to iterate through each image and observe them individually. We are capable of doing this because the document.querySelectorAll created a nodelist of all the selected images, and despite a nodelist not being an array, we can loop through it.

imgTargets.forEach((img) => imgObserver.observe(img));

This statement interpreted in English is For each img in the nodelist (imgTargets), observe each img.

To have a more visual understanding of our progress so far, I wrote a small code block inside of our callback function.

const imgLoad = function (entries, observer) {
  entries.forEach((entry) => {
    console.log(entry);
  });
};

As stated earlier, the entries argument, an array indicating when an intersection occurs, can easily be looped over to display the entry and exit of an intersecting element. The result of the imgLoad callback function can be shown in the image below.

By default, JavaScript fires the Intersection Observer function once the page loads, which yields a false value on the IntersectionObserverEntry Objects isIntersecting attribute. But as we scroll down the page, the threshold is reached, and the isIntersecting value changes to true.

It is also noteworthy to talk about some of the essential attributes in the IntersectionObserverEntry Object, such as;

target : This is the element the observer is looking at for an intersection with the root element.
isIntersecting : This attribute returns a Boolean value of true if the target element being observed is intersecting with the root element(if the threshold value has been achieved).
intersectionRatio : This attribute consists of float values between 0 and 1 and is constantly compared with the threshold value to indicate when the threshold has been reached. When the value of intersectionRatio is greater than or equal to the threshold value, the callback function is fired.

One more thing we must do before creating the program's logic is to get the returned object of each entry from the entries array using array destructuring. Performing this action makes our function look something like this:

const imgLoad = function (entries, observer) {
  entries.forEach((entry) => {
    console.log(entry);
  });
  const [entry] = entries;
};

After that, we create a guard clause that ignores non-intersecting events or triggers fired after an element has stopped intersecting with the root element. This can easily be implemented with this code:

if (!entry.isIntersecting) return;

This code states that if the observed elements are not intersecting with the root element, no action should be taken, hence the return statement. isIntersecting attribute, which we just discussed.

So far, our callback function looks something like this:

const imgLoad = function (entries, observer) {
  entries.forEach((entry) => {
    console.log(entry);
  });
  const [entry] = entries;
  if (!entry.isIntersecting) return;
};

Next, we create our program logic which swaps the low-quality image for the high-quality image using one simple line of code:

entry.target.src = entry.target.dataset.src;

Explaining the code above; entry.target is simply the current element that has intersected the viewport. Adding the .src property specifies that we are targeting the source attribute contained in our target element. Next, we assign entry.target.src the value stored in the dataset.src of that same element. Keep in mind that the dataset.src value is the link to the high-quality we specified in our HTML using the data-src attribute. With this single line of code, weve successfully swapped the low-quality image for that of the high-quality image, and implemented the image lazy-loading feature!

Dont believe me? See for yourself.

As you can see, as we scroll down the page, our callback function is fired, and the browser automatically swaps the image in our src attribute to the image in our data-src attribute, effectively swapping the images as we scroll to them.

Note : Whenever JavaScript swaps each image, it emits a load event to indicate that our data-src image has been loaded to display. This event can be useful when writing logic to check if each image has been swapped.

Next, Id like to add a blurry effect to our observed images so that they appear blurry at first and become clear when loaded. It is safe to assume that a certain aesthetic effect is added when the user sees a blurry image become clear rather than a low-quality pixelated image at first. To do this, we simply use the CSS class created below containing the styles to add our blurry effect, add them to our specific HTML elements, then take it off with JavaScript based on the users scroll.

.lazy-img {
  filter: blur(20px);
  transition: filter 0.5s;
}

And now, to remove them when we scroll into our observed elements. We use another inbuilt JavaScript event the load event to check if each target element(image) has been loaded, then remove the blurry effect from it. Seems pretty easy enough? 😉 Lets dive in immediately.

entry.target.addEventListener("load", function () {
    entry.target.classList.remove("lazy-img");
});

We attached an event listener with the load event for each element were observing, then removed the class lazy-img , which contained our blur.

And yeah, It worked! Of course, it did; we wrote sleek code to achieve this. As you can see, each image loses its blur after we've scrolled into it and revealed a nice high-resolution image for display. Keep in mind that for this article, I intentionally slowed down the webpage's load time to showcase the blur effect fading out on the scroll. Normally, It possesses a faster load time since we're developing with our local machine.

Finally, we easily unobserve each element so that the browser no longer pays attention to (observes) them after they have been loaded.

observer.unobserve(entry.target);

And with that, we have successfully implemented our lazy loading feature on our images; congratulations! All thats left is to demonstrate the performance difference between a lazy-loaded website and a regular one, as illustrated by the images below.

Image -1 represents our lazy-loaded webpage

Image -2 represents the same webpage but without any lazy-loading feature

As you can see, our lazy-loaded website is near 4700ms (4.7 seconds) faster than our regular webpage. Thats quite a sizeable gap, wouldnt you say? And in a field where speed and performance matter, our lazy-loaded website ousts its alternative.

Project Link

GitHub

Conclusion

This article has been quite a lengthy one. Still, it has also been an adventure where we explored a perfect use of JavaScripts Intersection Observer and created a lazy-loading feature. Its now up to you to explore and push the limits of the Intersection Observer and create more fascinating features on your own, and to that, I wish you the best .

Creating aesthetic cards with CSS ::before and ::after pseudo-elements

David Jaja — Thu, 22 Sep 2022 17:36:32 +0000

Have you ever wondered how some beautiful animations on the web are made, then assumed it was done by a far more experienced and skilled person, and then abandoned your plans to recreate it?

Usually, vanilla CSS is used to create these mesmerizing designs, not some animation library. This article will look at how to make some mesmerizing designs, starting with small practical examples and working our way to creating a highly aesthetic profile card to further elaborate on the actual ability of pseudo-selectors.

Prerequisites

Before we elucidate our topic of interest, we need to get familiar with some essential web development tools and knowledge required to follow along.

Fundamental knowledge of HTML
Fundamental knowledge of CSS
A Code editor and a browser

What are Pseudo-elements?

Pseudo-elements are CSS selectors that add a whole new HTML element into the markup. They tend to add content or decorate our webpage without creating additional HTML tags. We declare these elements with the double colon as a prefix (i.e., ::before). This article will dwell on the ::before and ::after pseudo-elements to understand how we can use them to create fantastic animations and transitions.

However, there is a common misconception associated with pseudo-elements. Pseudo-elements are sometimes mistaken as pseudo-classes, however, there is a slight variation. A pseudo-class selects elements that exist in a specific state and often applies some styling to it, and sometimes to prevent excessive use of CSS classes when targeting specific elements to promote cleaner HTML code. They are declared with the single colon as a prefix (i.e., :hover). Some examples of pseudo-classes include: :hover, :first-child, :first-letter.

Pseudo-elements overview

The ::before pseudo-element

As the name implies, the function of the ::before pseudo-element is to add content before the element's content.

<p> This is a paragraph </p>


p::before { content: "👑"; }

The ::after pseudo-element

Also, as the name implies, the function of the ::after pseudo-element is to add content after the elements content.

<p> This is a paragraph </p>


p::after { content: "👑"; }

CSS Properties applied with the Pseudo-elements

Preliminary to diving into building our main attraction (profile card) of this article, lets take a little detour and first explain some CSS properties well be using for design and customization.

Positioning
- Relative
- Absolute
Z-index
Transform
Transition

A brief intro to CSS Positioning and Z-index

Before using these properties to build our final project, it is important to highlight their behaviours.

Positioning in CSS

The position property of an element specifies the type of positioning the element should have in the document or page. In CSS, there are several positioning properties such as fixed, sticky, absolute, relative, and sticky, but well only go through relative and absolute in this article.

Relative Positioning

Setting an elements position property relative sets the element according to the normal document flow. An offset can then be selected based on top, right, bottom, and left.

An example would be:

<body>
    <div class="box-1">Normal Flow</div>
    <div class="box-2">Offset Flow</div>
</body>


.box-1 {
  background: #333;
}
.box-2 {
  position: relative;
  left: 120px;
  background: #999;
  top: 0;
}

As shown above, .box-2 moves 120px away from its natural alignment, yet other surrounding elements observe its vacated space.

Absolute Positioning

On the contrary, setting an elements position property to absolute pulls the element out of its natural document flow. It tethers that element to its immediate parent, whose position property is set to relative. If no relative parent of the absolutely positioned element is available, it is tethered to the body element (i,e., root relative parent element). It is important to note that absolutely positioned elements have a higher stacking order than relative elements and are placed above every relative element they intersect.

An example would be:

<body>
  <div class="container">
    <div class="box-1"></div>
    <div class="box-2"></div>
  </div>
</body>


.container {
        position: relative;
        width: 300px;
        height: 200px;
        border: 2px solid #888;
  }

  .box-1 {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 50px;
        height: 50px;
        background: lavender;
   }

   .box-2 {
        position: absolute;
        left: 200px;
        top: 70px;
        width: 50px;
        height: 50px;
        background: aqua;
    }

As expected, both boxes are tethered and use their parent element (.container) as a reference point of alignment when the position coordinates are provided.

Z-index and CSS elements stacking order

First off, the stacking order describes the arrangement of HTML elements in the z-axis, i.e., how elements are arranged when stacked on top of each other (which comes before the other). Naturally, HTML elements are positioned in the following order:

Root element.
Non-positioned elements in the order theyre defined (i.e., elements without a position property defined).
Positioned elements in the order theyre defined.

The Z-index property

This property lets us stack elements on each other depending on their increasing number of z-index. An element with a higher z-index property value will appear on top of all other elements with a lower z-index value.

A visual example would be:

It is worth remembering that the z-index property only works on elements whose position properties have been set. Also, if two elements have the same z-index, the element created further down the HTML document stays over the previous element.

The Transform and Transition property

The CSS transform property comprises a series of preset functions such as;

Translate(): This property repositions an element in a horizontal and/or vertical direction(s).

div {
    background: #c3c3ff;
    width: 30px;
    height: 30px;
}
.box-1 { transform: translateX(30px); }
.box-2 { transform: translate(30px); }

Rotate(): This property rotates an element without deforming it around a fixed point in the 2D plane.

.box-1 { transform: rotate(30deg); }

Scale(): This property resizes a 2D plane element.

.box-1 { transform: scale(2); }

Skew(): This property skews a 2D plane element. Skew means a slight tilt in a particular direction or to a certain angle.

.box-1 { transform: skewX(30deg); }

Lastly, the CSS transition function allows you to define the transition of an element between different states. After acclimatizing with some of the basics, lets dive into our starter project.

Building an animated button with CSS pseudo-elements

We start by creating a button element using the HTML link syntax

<a href="#" class="btn"> Hover Me </a>

Then adding some basic CSS:

a {
  padding: 15px 25px;
  border: 2px solid #926ec6;
  border-radius: 10px;
  text-decoration: none;
  position: relative;
}

This is easy code; we applied padding to create spacing around our buttons text. Then added borders to it and rounded off those borders using the border-radius property. Next, we removed the default underlining displayed as we created the element (i.e., the underlining that comes with all a tags). Finally, we added a position property of relative since were making a child pseudo-element and need to tether it to its parent (the a element).

Now, we create our pseudo-element from the parent element and style that.

a::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #926ec6;
  transition-property: all;
  transition-timing-function: ease-in;
  transition-duration: 0.3;
}

We first set the position property to absolute. This lifts the pseudo-element from its natural stacking order and attaches it to its relative parent element (the a tag). We also set the content to an empty set of quotation marks ( ), since we arent adding any content to the parent element. Then using offset values, we set the absolutely positioned elements bearings to the top left part of its parent element (i.e., top:0, left: 0). Finally, we spanned the absolutely positioned element its parent height and width (i.e., width: 100%, height: 100%), added a background colour and some transition properties for smooth animation.

It looks like weve messed up our button, doesnt it 😅? Well, dont fright, we meant to do this, and well modify it in a second. For clarity, the pseudo-element we created is currently laying over our button. We then translate the pseudo-element weve created by its full height upwards along the Y-axis to reveal our initial button.

a::before {
  transform: translateY(-100%);
}

Then we apply the pseudo-class :hover to the parent element and animate the tethered pseudo-element based on the :hover behaviour.

a:hover::before {
  transform: translateY(0);
}

And viola!, we have this really cool animation done with pure CSS.

We're left with changing the colour of the text to make it visible on hover and this can easily be achieved with the code below.

a::before { z-index: -1; }

a:hover {
  transition-property: all;
  transition-timing-function: ease-in;
  transition-delay: 0.5s;
  transition-duration: 0.1s;
  color: #fff;
}

To explain the code above. First, we reduced the z-index of the pseudo-element, which moves the pseudo-element behind its parent element, and hence makes the parent element always stay on top. We then added similar transition function properties to the parent element, with the variation being the transition delay, which in my opinion, adds a smoother effect. This delays the parent elements animation after the pseudo-element has finished animating. Finally, we changed the colour of the text in the parent element to make the text visible and finish our animation.

Now, we only need to remove the overflowing bits produced by the pseudo-element to leave this beautifully rounded button. We can quickly achieve this using the overflow function, which hides any overflowing content.

Implementing this function looks something like this:

a:{ overflow: hidden; }

And finally, we have:

Creating an advanced aesthetic card with multiple pseudo-elements.

Now comes the big show. We're building a more complex animated card using multiple pseudo-elementstwo to be exactto create a stunning origami-looking effect. Without further ado, let's dive into the HTML mockup.

<body>
    <div class="card">
      <div class="img-box"></div>
      <div class="details">
        <h2>Jenny Lawrence <br /><span>Founder</span></h2>
      </div>
    </div>
</body>

We created a parent class named card and nested two child elements (img-box and details). We then filled the details element with some content separated by a line break, which we would style later.

Indulging in the CSS, we add the following styles:

* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: #222;
}

.card {
  width: 320px;
  height: 350px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  position: relative;
}

.img-box {
  background: #222;
  transition: all, ease-in, 0.5s;
}

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

Firstly, the * styling is used to remove default styling applied by browsers. For the body, we specified a height, used CSS Grid to place the card right in the middle of the browsers page, and added a background colour. We then specified the dimensions for the card, set a background, rounded its corners, added some box shadow, and positioned it relatively. Additionally, a background and a transition property were set on the img-box container. Finally, a fixed height was set on the details container, and its text was aligned to the center.

Adding the last piece of HTML: an image

<div class="img-box">
    <img src="./sample.jpg" alt="Sample image" />
</div>

Then adding a little more CSS:

.img-box {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
}

.details {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Lets first go over what we just did.

We first positioned the img-box element absolutely, which tethered it to its relative parent element (card). We then used position offset values to move it 10px from every direction, which produces the white border-like effect.

We also absolutely positioned the details element, but we can't see it only due to the higher z-index of the img-box element sitting over the details element. Then we spanned the image to its parent container's full width/height. Finally, we used the object-fit property to control how the image is resized to fit its container (trust me, this would be useful later).

And now, we have a cool looking card:

To finally get our desired effect, we add the following styles:

h2 {
  color: #777;
  text-transform: uppercase;
  font-weight: 400px;
}
span {
  font-size: 16px;
  font-weight: 500;
  color: #f38695;
}
.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: #fff;
  transition: all, ease-in, 0.5s;
  z-index: -1;
}
.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: #fff;
  Transition: all, ease-in, 0.5s;
  z-index: -2;
}

.card:hover::before {
  transform: rotate(20deg);
  box-shadow: 0 20px 10px rgba(0, 0, 0, 0.2);
}

.card:hover::after {
  transform: rotate(10deg);
  box-shadow: 0 20px 10px rgba(0, 0, 0, 0.2);
}

.card:hover .img-box {
  bottom: 80px;
}

I know what youre thinking 😅; thats a handful of code, which is why Ill go through every critical line with you. We created two pseudo-elements ::before and ::after and positioned them absolutely to their relative parent element. We styled their width and height, and gave them varying z-indexes to create the effect of stacking them on each other. Then we added a transition animation which made them rotate at slightly different angles and activated the animation on hover of their parent. Finally, on hover, we increased the bottom offset of the image container, which allows the text in the details container to be smoothly revealed.

Thus, producing this masterpiece!

Source Code (Code Pen)

Conclusion

Congratulations on making it to the end of the article. As youve seen, the ::before and ::after pseudo-elements can be applied in several ways to create some mesmerizing effects.

Feel free to play around with these elements and create your own custom designs and test your level of imagination.