Forem: jabo Landry

You’re probably writing complex CSS for no reason

jabo Landry — Sat, 21 Mar 2026 18:46:22 +0000

These past days I’ve noticed that many of us haven’t been checking out on what’s new with CSS features and I think if you haven’t checked for these new features, you’re probably complicating your CSS snippets and writing complicated JavaScript snippets that can done using CSS.

In Today’s guide I will be talking about some of the new features of CSS that you probably haven’t heard of or may have heard of them but haven’t practiced them, no worries I will be guiding you on how they work and giving an example of their use-cases.

Features we will cover

has pseudo-class
CSS Nesting
- Nesting for pseudo-elements and pseudo-classes
@scope
@container queries
Summary
Final Thoughts

`has` pseudo-class

The has pseudo-class unlocks a lot of possibility with CSS, now with has pseudo-class you can style the parent element based on its descendant's behavior, styling and even their attributes.

If I we were to have a button that toggles a text on/off, in this case we would use JavaScript classList method on the element to trigger its visibility by adding and removing the class to hide/show the element that we want to toggle, we would have something that looks like this:

With has we don’t need to write any JavaScript at all, But here we take a different approach instead of using a button in our markup as we normally do we use an input box of a checkbox and style it to look more like a button and then we use the parent to check if there’s a checked element in its descendants elements if so we target the p element and set its display behavior to none, take a look at this video too:

snippet

<style>
      body:has(input:checked) p {
        display: none;
      }
      input[type="checkbox"] {
        appearance: none;
        cursor: pointer;
      }

      input[type="checkbox"]::before {
        content: "Hide";
        background-color: green;
        color: white;
        padding: 0.4rem 1.4rem;
        border-radius: 0.4rem;
      }

      input[type="checkbox"]:checked::before {
        content: "show";
      }
      input[type="checkbox"]:active:before {
        background-color: limegreen;
      }
    </style>
  </head>

  <body>
    <input type="checkbox" />

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum
      temporibus molestiae itaque harum ut consectetur odit, sit cumque quae
      fugiat error inventore, perspiciatis tempore, voluptatibus magni
      laudantium quas aliquid. Nulla voluptate ex ut molestiae exercitationem
      autem doloribus modi? Voluptatem, repudiandae.
    </p>
  </body>

These are the snippet that make up this function, we’ve wrapped all the contents inside the body element which acts as a parent, now we use the has pseudo-class to find a checked input under the body element we then target the p element to hide it when the checkbox is checked and unhide it when we uncheck the checkbox.

When combined with pseudo-elements like ::before and ::after you can make it more interactive as I did in the example, and of course, you can do more than just toggling things on and off.

CSS nesting

Before if we were to style a specific descendant element of a given parent, we would have to prefix the parent or wrapping element before the element we want to style, let’s take an example of our previous example we want to style the p element we would have written a CSS that looks like this:

body{
  box-sizing: border-box;
  margin: .9rem;
}

body p {
  font-family: sans-serif;
  font-size: 1em;
}

But do you know that we can do the same thing by nesting the p element inside the body declaration like so:

body {
  box-sizing: border-box;
  margin: 0.9rem;
  p {
    font-family: sans-serif;
    font-size: 1em;
  }
}

nesting for pseudo-elements and pseudo-classes

And we if we wanted to nest any pseudo-element or pseudo-class, we use the & for example we can simplify this input declaration:


      body:has(input:checked) p {
        display: none;
      }
      input[type="checkbox"] {
        appearance: none;
        cursor: pointer;
      }

      input[type="checkbox"]::before {
        content: "Hide";
        background-color: green;
        color: white;
        padding: 0.4rem 1.4rem;
        border-radius: 0.4rem;
      }

By nesting the ::before selection inside the input selector like this:

input[type="checkbox"] {
        appearance: none;
        cursor: pointer;
        &::before{
          content:"Hide"
           background-color: green;
            color: white;
            padding: 0.4rem 1.4rem;
            border-radius: 0.4rem;
        }
      }

This is helpful when you have long list of pseudo-elements and classes you want to apply to a single element you can nest them as the example we have to avoid having many definitions of the same element declaration.

But be careful using this type of nesting because it can lead to unreadable CSS it's better to use it for pseudo-classes, pseudo-elements or when you are constantly prefixing your parent element on its descendant's children you want to style.

@scope

Did you actually know that with CSS you can style elements based in a scope they are define in and you can limit the elements of the scope that gets affected, just as in normal programming when have scopes and we can limit the availability of the variable based on the scope the same with CSS.

Let’s take an example to see how this would work:

 <body>
    <section>

      <div class="profile">
        <img src="./assets/people.png" alt="article image" width="200" />
      </div>

      <div class="img-2">
        <img src="./assets/people.png" alt="article image" width="200" />
      </div>

    </section>
  </body>

Let’s say we have this HTML structure; we have a section that has two divs one of them has the class called img-2 which has the same content as the first one they both have images take the first div.’s image and make it a rounded image much more like a profile, the snippet could look like this

.profile img {
  border: 4px solid green;
  border-radius: 50%;
}

We can use @scope to limit the styles to only apply to the first image using the section we can write like:

@scope (section) to (.img-2) {
  img {
    border: 4px solid greenyellow;
    border-radius: 50%;
  }
}

What we are essentially doing is we are taking section scope and target all the images elements within the section scope, to method is essential because it tells CSS to apply styles to every img in the scope except the images that are found inside an element with the class of .img-2 if you forgot to add it will add styles to all img elements in the scope

Rule of Thumb

use to to limit you’re styles to a specific scope only by excluding a given markup or scope you define inside it’s curry braces ()

@container queries

Container queries are another type of making responsive design but in a more a customized way, before the responsive required you to target the whole screen’s viewport or width to start applying styles based on a certain viewport the screen reaches, which sometimes was hard to work when you only wanted to add responsive to a certain section of your page.

With @container queries, you can add responsive designs based on the size of the parent element or the wrapping element.

Consider this example

  <section class="blog">
      <figure>
        <div>
          <img src="./assets/people.png" alt="article image" />
          <figcaption>sample image</figcaption>
        </div>

        <p class="description">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae,
          asperiores dolorum. Aspernatur laboriosam quam, nulla ipsum cumque
          dolores pariatur recusandae nobis ea itaque commodi similique eos
          dolor! Quae dolore eaque numquam quidem voluptatem, asperiores ea!
          Esse ut ratione quam quisquam.
        </p>
      </figure>
    </section>

We have a section with a class of blog and we want to make the content display flex when its size in width is less than 640px , using container queries we can do it using the below example

section {
  display: grid;
  container-type: inline-size;
}

@container (width < 640px) {
  figure {
    display: flex;
    align-items: center;
    background-color: green;
  }
}

Unlike media queries to be able to use container queries you first need to have an element wrapping the elements you want to have container queries on, and then target the wrapper element in our case we have section as our wrapper element and then use the property of container-type to specify if you want your styles to be triggered while scaling the screen horizontally or scaling vertically,

Most of the time you will want the responsive the occur when scaling horizontally meaning when the screen is shrinking on the x-axis for this behavior you use the inline-size.

If you want to apply vertically meaning shrinking on the y-axis you can use the block-size

And also, there is another one both to track both sides.

Below there is a demo showing how container queries differ from me

As you can see in the demo, we have a black background color that is applying when our screen is below the width 640px and we have a green background that is later appearing when our container size with is below 640px.

You can see the difference even though it is small, but the green background lasts a little longer than the black one because our container width is still less than 640px even though our screen width is greater than 640px

Summary

We have covered the has pseudo-class which can be used style the parent element or style its descendants based on the descendant's behavior, style or attributes

We’ve covered @scope which we can use to only apply styles to a specific element in a scope of the markup structure and the @container queries that we use to add responsive design based on the parent or container element size.

Final Thoughts

This was few in more features that are being released in CSS and they can do more advanced things more than what I demoed in this guide, if you explore more you will find many use-cases for each feature and also the examples in this guide are also a good reference for more use-cases you may think of or challenge they can help solve with your CSS, Thanks for reading I hope you’ve enjoyed it.

Docker key terms simplified

jabo Landry — Fri, 06 Mar 2026 16:20:52 +0000

Containerization is a must-have skill for DevOps engineers and software developers alike. It is essential for creating robust, deployable applications. In this article, I will explain the Docker concepts every developer needs to know and provide a hands-on example.

Prerequisites
What is Docker?
Why is Docker Important
Idea of How Docker Works
What is a Docker Image?
Dockerfile Commands Explanation
Running the Image
What is a Docker Container?
How to Run a Docker Container
Docker Volumes
Final Thoughts

Prerequisites:

to follow along this article be sure to

Download and install Docker Desktop.
Ensure Docker is running (especially on macOS or Windows) while practicing.

What is docker:

Docker is a software platform that helps package and run applications on any machine with the exact environment you have configured.

Teams often face the "it works on my machine" issue, where an application runs locally but crashes when a teammate tries to run it. This happens due to:

Mismatched environment or library versions.
Differences in Operating Systems (OS) that don't support specific features.

Configuring every environment to match can be time-consuming and slows down development. Docker solves this by "containerizing" the environment.

Why is docker important:

As a developer, you shouldn't waste time troubleshooting environment setups. Docker allows you to:

Configure the environment once and reuse it throughout the development process.
Run multiple copies of the same application with different environments without conflicts.
Eliminate library version mismatches.

Idea of how docker works:

Imagine you have a minivan that you use as a home, a business venture, and transport all at once. You can drive anywhere, and everything you need is already inside. You don't need to find a new bed or kitchen every time you move; it's all in the van.

That is the idea of Docker. It contains all the essentials needed to run an application in a single container. This container can be used by anyone, anywhere, without further configuration.

What is a docker image:

Docker image is a blueprint that describes how our application environment will look like and how it will be built from the ground up and after it is created it cannot be modified.

with docker image we describe how docker should allocate and arrange our application environment this process happens in a file called Dockerfile.

A Dockerfile defines the layers (stages) required to run the container, starting from the OS up to your codebase.

#this creates a node runtime of version 18 and OS of alpine
From node:18-alpine

#this specifies the path where docker will store you application codes this could be any name of path you want
WORKDIR /app 

#copies the package file to docker files directory so that when npm can have packages to install
COPY package.json 

#this will run and install all the packages you are using in your package file
RUN npm install 

#copies all the codebase in your directory to the docker files
COPY . . 

#define the port that will be used when testing the application

EXPOSE 3000

# if you are using nodemon you write a command to start your application like this
CMD ["npm", "run", "dev"]

# if you are using node to execute the code you use
CMD ["node", "name of the file.js"]

Docker file commands Explanation

From specifies which kind of runtime you are using in my case I am using JavaScript, but you can use whatever based on your project setup and the colon helps in specifying the version and the hyphen to specify the OS system the system will be built on top of.

WORKDIR this command specifies the directory in which docker will store your application codes generally you can specify any path you want but /app is the convenient one.

COPY this command copies a specific file from your project files to docker

EXPOSE this command specifies the port in which you are application is running on and also helps to define a port your application will run on when starting a container

CMD this command is the one that runs you application after it have been initialized.

Note: for window users and macOS when running your application using nodemon package inside your run script file in package.json file place -L flag before your file for it to run, without it your application won’t get started unless you are a Linux user

Running the image

After setting your docker file you can create an image by running the build command in your terminal using the docker command

docker build -t my-first-docker-image:version-one .

The build command is the one used to build the image for your docker, and the -t flag us used to specify the tag of the image.

Image tag helps to differentiate images with the same name, docker image cannot be modified after they are built to edit it you would need to create a new image, but you may want to keep the same image but change its versions so you can track your changes and version over time and to do that the -t flag helps create a tag that you can refer as a version of the image, to specify the tag or version of your image you use double colon(: )

e.g.

docker build -t my-first-docker-image:version-two .

If you didn’t define the tag name by default docker will assign it the latest as the default tag name

e.g.

docker build -t my-first-docker-image .

without -t flag it would hard to track down the changes of the image when we are constantly making changes and rebuilding the image

. tells docker where to look for files to copy

What is docker container:

Docker container is the implementation of a plan created in docker image, now all of the specifications you’ve specified inside your Dockerfile will be executed one by one and create a container of your application codes and also create the underlying OS which is alpine and a runtime environment of node.js below is the command to run and create a container.

How to run a docker container

docker run --name container_name -p  image-name

Let’s start with knowing each command step by step

run command is used to start a new container.

--name flag specifies the name for your container, the name you would like your container to have

-p flag is referred as port mapping this should be used if you have specified EXPOSE command in your Dockerfile it helps map any port you specify to the exposed port in docker file you put you preferred port on the left and the exposed port on the right and separate them using a colon.

e.g.

-p prefferedPort:exposedPort

image-name and then you have to specify the name of image in which you want to create a container from.

running a container from the image we’ve created above we can something like this

docker run --name container_one -p 3000:3000 my-first-docker-image:version-one

Docker Volumes

Docker images are "read-only." If you change your code on your computer, the running container won't see those changes unless you rebuild the image. Docker Volumes solve this.

Volumes act as a bridge between your local development environment and the running container.

docker run --name container_one -p 3000:3000 -v /our apps location:./our docker specified path

the command is the one we’ve been using to create a container before but The -v flag binds your local folder to the folder inside the container (e.g., /app). Now, any changes you make in your code editor will instantly reflect inside the running container!

So, the real command can look something like this:

docker run --name container_one -p 3000:3000 -v /C:\Users\arnol\OneDrive\Documentos\newContent\client:./app

Final Thoughts

Docker makes development faster and smoother. Whether you are aiming to be a DevOps engineer or a Full-stack developer, understanding these basics is essential for modern software engineering.

Thank you for reading! If you learned something new or have suggestions, please let me know in the comments below.

Procrastination in disguise

jabo Landry — Sat, 21 Feb 2026 18:18:25 +0000

Introduction
Procrastination in disguise
Stepping out of your comfort zone
Final Thoughts

Introduction

Recently, this month, I have started exploring TypeScript. It was very exciting at the start because I was gaining new experience and skills under my sleeves, like everyone else who is doing something for the first time. Little by little, you start feeling overwhelmed and confused, not knowing when to use a certain concept over another.

This kind of feeling of uncertainty is a good sign that you are learning, you are facing new challenges beyond what you used to, and you are stepping out of your comfort zone which is a good sign but if you continue to hold on to those feelings and not do the right thing which is practice it may later lead to procrastination.

Procrastination in disguise

Procrastinating is a thing we all programmers in our case try to avoid at all costs, so we tend to do more reading and more research on a certain concept.

I have come to realization that reading in programming is another type of procrastination beyond the saying “I will do this tomorrow”.

a typical example is when I was reading about interfaces and type aliases at first, I had two confusions:

the difference between type aliases and interface when creating types
Why do we have them doing the exact thing which is creating type

I keep on reading about interfaces and type aliases but within me deep down I felt a fear to embrace them and practice on them to decide on where we might need to use one over the other, in which case and under which circumstances.

And I ignored that feeling and kept on reading to make myself believe I am learning something, but it didn’t click, even though I read about 5 articles and maybe watched a bunch of videos on YouTube.

Stepping out of your comfort zone

To solve the confusion about the two concepts I confronted myself and I made a conclusion to build a simple Dictionary app that you input a word and fetches data from an oxford dictionary public API for the meaning and other ways we can pronounce the word you’ve searched.

In the first attempt to fetch and work with data I had that aha moment where I started knowing why we need type aliases and interface how to use them effectively for clarity. I’ve found out that interfaces are useful when you want to create a structure of the object and match your frontend with the incoming API response.

When creating those interfaces, I came across an issue of using the same type on every field of the interface I am creating I noticed that they have the same type instead of always typing the same type I can simplify it by creating a new name for a certain type that is repeating multiple times and use that name to assign type to my field and that was achieved with the help of type aliases which makes the process of extending and changing types in future fast and easy to do.

Final Thoughts

Through this process I have found that sometimes we developers we tend to learn a certain concept by reading it believing we are understanding it in detail, and we will then practice later on when we have conceptually grasped the concept.

But programming is a fascinating concept, and the more you read the more you fear practicing and with no practice there is no progress

Ending this, I would urge all of you guys on any level, whatever concept you are learning, to have an introduction and then jump into practice, and after you hit a wall, you can go back to read more about the concept. That way, you will not be procrastinating, but you will be advancing and building depth more.

Enhancement on Caching and Service Workers

jabo Landry — Sat, 07 Feb 2026 16:53:39 +0000

Welcome to My Video Post

Following my previous article on Comprehensive guide on getting started with caching using service workers,

I’ve created a video explaining how to update an already existing cache.

Enjoy!

The Video covers

practical steps for updating cached assets and resources.
It also highlights common pitfalls and how to avoid them.

Final Thoughts

Thanks for watching!

If you’ve tried similar caching strategies, share your experience in the comments—I’d love to compare notes.

Comprehensive guide on getting started with caching using service workers

jabo Landry — Mon, 26 Jan 2026 06:43:46 +0000

Ever wondered why some sites loads slow when you first visit them, but after loading the full page when you get back the next time the site loads instantly fast, in today’s guide I will be walking you through the beauty of service worker by demonstrating how you can reduce you’re site loading time in the users browsing device the next time they visit you’re site.

Prerequisites
What is a service Worker
Caching
Basic caching implementation using Service worker
Starting Cache operations
- install event
- activate event
- Fetch event
Wrap Up
Final Thoughts

Prerequisites:

To follow along this guide, you must be familiar with the following JavaScript concept:

Promises
Events in JavaScript

What is a service Worker:

service workers is a JavaScript technique of running tasks in the background from the page main thread to help us developers, intercept request, cache resources from the client and even allows the app to run even offline, we will be focusing on how to cache resources/assets of the site in this article today.

Caching

caching is to save resources and assets of the site that takes too much time to load to the browser’s memory so the next time we try to access them we won’t need to re-download them from the server rather but on the browser's memory which is instantly first than getting them from the server.

Basic caching implementation using Service worker

I have a created a simple site of space tourism which contains information about different location on the space you can visit in the space and the details about it; is a frontend mentor challenge which you can find using this link if you want to try it out and follow along with.

this project is the perfect scenario to explain how we can cache the resources to reduce the load time on our site, and to be clear a site with a lot of visuals like images can be slow so I want to cache the home page to show how you can cache the site if you find site loading slowly and give you an insight on how service worker and caching works.

Looking at this image below, I am displaying all the time and size each file is taking to load the full homepage or index page

Image showing the network status when I first load the site on my device for the first time

You can see that I am fetching files with 264 KB in 266ms as the time it takes to load the whole landing page which means when I again visit the site it will take the same amount of time and size to load which is not ideal, again you find this information by going to the devtools→network tab

We start by registering a service worker in the app entry or main file mine is index.js

if("serviceWorker" in window.navigator){
    window.navigator.serviceWorker.register('/sw.js').then(registeredSw => console.log(registeredSw).catch(err => console.log(err))
    }

We start by checking if the current browser the app/site running on supports the service Worker, serviceWorker is a property of the navigator object of the windows object.

we use the register() on the serviceWorker to register a service worker in the browser, which takes in 2 arguments the first one is the destination where we’ve created a file which we will be writing in all our caching logic it is advised to put the service worker file in global directory in order to have access to all files

and the second argument is optional, the scope of files the service worker will track if you’ve saved it in a certain folder, it’s scope would be that given directory that why it advisable to put in the global directory.

The register() returns a Promise we use then to display the registered service worker and catch to catch any errors that may occur while registering the service worker

if it is successfully registered will be returned its instance in console which will look like this

The console shows the registered service worker

To view the created service worker, you will need to navigate to:

devtools
application and choose the Service workers pane on the left panel of the application section

service worker takes 3 phases it passes through to be installed which are:

installation: which have completed in the first step when we register a new service worker
Activation: activation of the service worker to start operating
wait: Still waiting for the service to be activating

Starting Cache operations:

In service Workers we use event driven approach to cache and fetch our resources and assets; in this section we will look each one of events needed to start service worker and cache your assets and resources and explain its part in caching resources/assets.

install event:

Exploration of the event

this is the first event to be fired, remember when we registered a new service worker that’s when the event is triggered

in this event we create a cache storage in the browser and add the resources that we will need to be cached in the cache.

Implementation of the event

to implement switch to the sw.js you have registered as you're service worker file and then implement the following snippet

const resourcesToCache = [
  "/",
  "/index.html",
  "/src/JavaScript/index.js",
  "/src/output.css",
];
const cacheName = "version-1";

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches
      .open(cacheName)
      .then((cache) => {
        cache.addAll(resourcesToCache);
      })
      .catch((err) => console.log(err)),
  );
});

The above snippet declare resourcesToCache array to keep track of multiple resources and assets we want to cache and cacheName is the name that will use as the cache name.

event setup:

the self is service worker we have registered, essentially it is attaching event to itself that’s why they call it self
we attach an event of install as well as a callback function that will trigger when service worker is first registered on any device browser our site/app is running in.

Cache setup:

The waitUntil() on the install event ensures that the service worker is installed after the operation inside the waitUntil() has completed.
The caches object helps create, manage the browser’s cache storage.
We start by opening a new cache with open() which takes a string as an argument that will act as a cache name, we used the cacheName variable.
The open() returns a promise we chain then() to access the created cache.
The .addAll() to add multiple resources we would like to cache and finally a catch block to handle any errors that may occur in caching.

you’ve just cached you’re first assets/resources in your browser cache, to view the changes go to devtools(application→Service workers) and you should see you a button labeled as skipWaiting

Service worker panel in the browser

click on skipWaiting and then look on the left and then expand to Cache Storage tab you should see the name of you cache and when you click on it you will see resources cached insider there

created cache in the browser

and this should be it for setting up the cache for the site

NOTE: that to make testing easier it is better to enable the checkbox for Update on reload in service workers’ section; to test without needing to click on skipWaiting every single time you make changes to the page.

activate event:

Exploration of the event

this event fires every time there is a new change in a service worker file, its responsible is to activate a service worker.

Implementation of the event

self.addEventListener("activate", (event) => {
  console.log("Activated service worker");
});

we use the activate event to trigger activation of our service worker every time there is a change in service worker file, so the next time you change something from the sw.js the activate event will be triggered and in console you will see the message ‘Activated service worker’.

Fetch event:

Exploration of the event:

This event is fired every time you make a request to the server requesting resources/assets, and this is where we intercept the request and first check if the data we are trying to download from the server includes in our cache if we have it in our cache we can directly return them if not we can continue with the request.

Implementation of the event:

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    }),
  );
});

in above snippet we have:

attached fetch event to service worker that will trigger any time we make a request
we access the respondWith() of the fetch event, the respondWith() method will help intercept the request before it sends to the server requesting some assets/ resources
we access the request property on the event object.
inside the respondWith() we then use match() and pass our request to find the matching resources/assets in cache similar to the request we are sending to the server.
the caches.match() returns a promise, we attach then() to handle the resolve the promise and if it has found some assets/resources in our cache we then return them instantly if not we continue with the request.

to see the effects of this let’s compare the network of the first image when we had no service worker and now, when we have a service worker

Figure A: Before service worker implementation network report

network request report of site with not service worker and cache

Figure B: After service worker implementation network report

network request report of site with service worker and cache

With this you can see the difference, the file that we are getting from our service worker have a low load time compared to before the service worker and you can see they are taking up 0 size compared to before.

before we had a load time of 266 and after service worker, we have a load time of 124 which is less than half of the first load time we had before we cache.

we also had 264Kb of our resource size before we apply service worker but now, we only have 116Kb of resource size.

Wrap Up

In this guide we covered how to apply cache to static resources that may cause long load time which can be a bad user experience on the site,

Final Thoughts

Service workers are not only limited to caching resources they can be used for push notifications, enabling site accessibility in offline mode which is commonly known as PWA (Progress web app)

This guide helps you get started working with service worker, basic implementation and fundamental explanation of how caching works, in future articles I am planning to dive deep of how we can use service worker not only for caching but also for offline accessibility and background sync techniques.

Understanding Stateful Functions Through JavaScript Closures

jabo Landry — Mon, 12 Jan 2026 10:15:40 +0000

Closure In JavaScript is a function that retains access to variables from its outer scope, even after the outer function has finished executing.

This definition may seem complicated at the first, but don’t worry in this article— we will Learn how JavaScript closures transform functions from stateless to stateful, with practical examples and the mental model that makes everything click.

in this article we will cover:

Why We Need Closures
What is Lexical Scope
Understanding Closures and Lexical Scope
Working with Closure
Use Cases for Closures
Final Remarks

Why We need closures

Closures are very important to know for you to be able to use today's modern frameworks like React, Redux library.

In this guide we will go through the inner workings of closures and also provide you with use-cases and application of closures in React framework and in real world example using closures.

Advantages of closures includes:

Helps keep the function pure without mutating the external of it.
Helps make variable private the scope they are declare in.

What is Lexical scope:

Lexical Scope by definition

Lexical scope in JavaScript are rules that determines how and where the variable can be accessed in your program.

Lexical Scope under the hood

lexical scope under the hood is an object in JavaScript’s scope either in a function or any JavaScript scope you may think of

that object which we call Lexical scope keeps track of:

the variable in that scope.
the value of this of that scope.
the pointer that points to the outer lexical scope if there any if there is no other scope above that the point is null

so, when we have a function that looks like this

let x = 10

function test(){
    let y = 4
}

This function lexical scope would look like this:

as we demonstrated in this diagram each scope has its own lexical scope which points to the outer lexical scope above it.

when in the test() you try to access the variable x JavaScript will look for it in the lexical scope of test() if it is not there, it will then look in its outer lexical scope pointer which is the global one and if we have x there we will then access to x and use it inside our function of test()

What happens when we don’t have it, we will continue go up the tree and until we hit the lexical scope that’s points to null and that’s when you get the error saying: Uncaught ReferenceError: x is not defined

function test(){
    let y = 4
    return x
}

console.log(test()) //Uncaught ReferenceError: x is not defined

Understanding Closures and Lexical scope:

To understand closures, we first need to understand how the normal function works under the hood. this will helps knowing what options with closure that are limited when using usual function.

A normal function when its execution finishes there is a memory management mechanism in JavaScript that is known as garbage collection .

Garbage collection: is a mechanism for JavaScript to clean up the allocated memory for non-primitive data types when they are no longer in use, again if you don’t know how functions and non-primitive data types how are stored in memory, I have an article which talks about it which you can find here.

garbage collection removes the allocated memory when the function is no longer in use makes the functions after execution reset all its variables and values declared with in its block scope of a function or the passed argument to the function.

function test(){
    let y = 4
    return y+= 1
}

console.log(test()) // 5
console.log(test()) // 5
console.log(test()) // 5
console.log(test()) // 5

No matter how long we call the function the result will always be the same unless we have variable y in global scope

let y = 4;

function test(){
    return y+= 1
}

console.log(test()) // 5
console.log(test()) // 6
console.log(test()) // 7
console.log(test()) // 8

What happens here is the garbage collection will clear out any allocated space that is no longer has reference with global object in case of browser the global object is the window object, When the function finished executing it cuts reference and ties to the window object which then makes it eligible for garbage collected and wipe out all of its declared variable and passed argument if there are any.

But when we have declared a variable in a global scope, the declared variable connection with the window object will stay forever until you remove the variable from the global scope, which is why the variable is updated to a new value every time we call the function, because the variable state is updating.

To give you a better mental model shift around these concepts you should think of them like:

stateless function: a function that has no access to variable(s) outside of its scope the function variables are stateless
stateful function: the function with access variable(s) from outside of its scope they have state which can be tracked and updated over time which makes them persists data and update as we go.

Working with closure:

You know how the whole life cycle of execution of functions and a knowledge of how lexical scope works.

I want you to take a look at this snippet:

function counter(){
    let n = 0
    return function(){
            return n += 1
        }
}

this is the most common example you will see online of working with closures, and yeah this is how we create a closure we return a function and wrap it inside another function so when we call the outer function in our case counter it will return another function which will look like this [Function (anonymous)] .

because as we have seen in the example above the counter returns a function, now the returned function has reference to its outer scope variable n thus making connection with its lexical scope, since we have the connection with variable outside of the scope of the inner function it will persist the state of data.

remember the stateful mental model** it states that “the function with access to variable(s) from outside of its scope they have state which can be tracked and updated over time which makes them persists data and update as we go.”

It means that since we have the reference to the variable n garbage collection will not remove variable n from the memory because there is some function that is referencing it,

The outer function will be removed but n will stay because of the connection it has with the inner function and that’s why mostly you will hear people define closure as “a function that retains its lexical scope even after its outer function has finished executing”

now because of closures we’ve made variable n from stateless to state preservation and now we can use the function to increment numbers we want, and here is how we execute the closure function

const count = counter() // assing the return function to a new variable
// use that variable to get the counts from the inner function
console.log(count()) //1
console.log(count()) //2
console.log(count()) //3

Tricky Question

Try and figure out what is a closure from the below 2 snippets

function outer(){
    let p = 0;
    return function(){
            return p += 1
        }
    }
    const results = outer()
    console.log(results()) // 1
    console.log(results()) // 2
    console.log(results()) // 3

function outer(){
    return function(){
        let p = 0;
            return p += 1
        }
    }
    const results = outer()
    console.log(results()) // 1
    console.log(results()) // 1
    console.log(results()) // 1

Well option A is the real answer because it has reference to its outer scope while B is returning another function true,

but we are declaring variable within that function which means the moment the function finishes executing garbage collection will wipe out everything from function B

remember the stateless mental model: it states that “a function that has no access to variable(s) outside of its scope the function variables are stateless”

Use Cases for Closures

Let’s try to explore one practical use cases for closures that feels more real and makes sense to understand closure.

Example for use Case:

suppose we are creating a function that lists the names of members of our app and the country they are representing; with the stateless way we can create our function like this:

function introduceYou(name, country){
    return `Hi I am ${name} and I am representing ${country}`
}

console.log(introduceYou('Jabo', 'Rwanda') // Hi I am Jabo and I am respresenting Rwanda
console.log(introduceYou('Arnold', 'Rwanda') // Hi I am Arnold and I am respresenting Rwanda 
console.log(introduceYou('Landry', 'Rwanda') // Hi I am Landry and I am respresenting Rwanda 
console.log(introduceYou('John', 'Rwanda') // Hi I am John and I am respresenting Rwanda 
console.log(introduceYou('Abdul', 'UAE') // Hi I am Abdul and I am respresenting UAE 
console.log(introduceYou('Jane', 'USA') // Hi I am Jane and I am respresenting USA 
console.log(introduceYou('Doe', 'USA') // Hi I am Doe and I am respresenting USA

Problems in Changing the existing structure

This approach works, but here’s a catch, you came up with the idea like you know what let instead use the city names instead of country names to change this would look very tedious say you have a thousand representing Rwanda, and millions representing USA.

Solution for the change

it would be hard to change all of those places and to be honest it is time consuming, but there is a solution , you can use closure to reference the thing that is common to the data we trying to capture in our case country some users may have the same country or many of them; So we will make that a default reference that will stay in memory for as long as we wish to and this will make it easier changing it to something new like city

closure solution implementation

function introduceYou(locaction){
    return function user(name){
        return `Hi I am ${name} and I am representing ${location}`
    }
}

//now we create a function that will handle people from different region

let rwandaUsers = introduceYou("Rwanda")
let americanUsers = IntroduceYou("USA")
let uaeUsers = IntroduceYou("UAE")

//and now we create a function for users based on the variable country we created

console.log(rwandaUsers("Jabo")) // Hi I am Jabo and I am respresenting Rwanda
console.log(rwandaUsers("Arnold")) // Hi I am Arnold and I am respresenting Rwanda
console.log(americanUsers("Jane")) // Hi I am Jane and I am respresenting USA
console.log(uaeUsers("Abdul")) // Hi I am Abdul and I am respresenting UAE

now if you want to change to their city all we need to be go where we’ve declared a certain user of a certain country and change the passed argument to be the city instead of country

example (let’s change rwandaUsers to use the city Kigali instead)

rwandaUsers = introduceYou("Kigali")

console.log(rwandaUsers("Jabo")) // Hi I am Jabo and I am respresenting Kigali
console.log(rwandaUsers("Arnold")) // Hi I am Arnold and I am respresenting Kigali

Final Remarks

When I was preparing this article, I found that React states are built using closures which links back to that mental model shift for stateless and stateful function I shared with you, those mental model helped me realize why React state are called state and how they are able to persist data throughout component life cycle.

I hope this article gave you both understanding and confidence with closures. If you found it valuable, please share it with someone who's struggling with this concept—it might be the explanation that finally makes it click for them.

Beyond Server‑Side Rendering: Rediscovering PHP and the Joy of Experimenting

jabo Landry — Wed, 31 Dec 2025 20:10:38 +0000

The Old Way We Were Taught

For years we've been trained and taught that working with PHP you surely need to use the server-side rendering to complete the project, and it did stick in many of us that when we are developing PHP based projects we stick to that principle.

The Turning Point

And without considering looking for other ways to do things and they come a day I had some school assignment for developing a backend project using PHP.

I hated PHP way of doing things using the server-side rendering and something crosses my mind, "wait is there a way can change the narrative and came up with something new hmm...🤔🤔".

Exploring New Possibilities

And just like that I said let's explore if it is possible to create APIs in PHP as modern web application and use JavaScript to fetch those API data provided with our PHP backend.

Rediscovering PHP’s Strengths

I went all in to find the ways to implement such thing and guess what I found it is actually 1000/100 possible, and this time I was feeling like I just invented a new rocket.

And I was like all this time there was something great with PHP and we noticed we blindly hated on it and some of us have already buried and didn't even want to look on PHP again.

PHP has a lot of features in it like Bearer tokens. for authentication

This solved a lot of problems that came with working server-side rendering of PHP like:

Having backend errors showing up in frontend which for me I consider unprofessional
Separation of concern which is a core in working with today's efficient systems

The Lesson Learned

I used to not get the term they used to say, "There is no one way/solution to a problem in programming" and at that time I finally released and felt what they meant when they mention that quote.

My Advice to Developers

My advice to all of you who have made it to end of the article is to not consider one way to a solution and to always be curious and try to apply what you've learned to unlock new patterns to make program fun because seriously if you do things in a certain defined way you will get bored of programming eventually.

so go out there challenge yourselves find new ways to do things try combining new ways with old way to boast that dopamine of yours and fun in programming.

Final Thoughts

Well, that's all I got to share any suggestions for improvement? sure, I got you-just write down your thought and feedback in the comment section I do be happy to interact.

Let's discuss Deep and Shallow Clone in JavaScript

jabo Landry — Sat, 01 Nov 2025 13:43:24 +0000

I want to give you a test, so you get the real reason you need to learn about Deep and shallow clone or copy and why we still need to have the understanding of immutable and mutability in JavaScript ready let’s go 😎

In previous article I discussed about mutability and immutability in JavaScript, if you’ve read the article kudus to you and if you haven’t, please check it out immutability and mutability in JavaScript because in this article I will be assuming you understand the concept of immutability and mutability in JavaScript and for those who have read it,

can you figure the output of the following snippet:

const fruits = ['apple', 'mango', 'banana']
const fruitsAndVeg = ['pinapple', 'peaches',['dodo', 'tomato' ]]
const fruitsCopy = [...fruits];
const fruitsAndVegCopy = [...fruitsAndVeg]

what will happen if we then console the above snippet 👇🏿:

fruitsAndVegCopy[2].push("potatoes");
console.log(fruitsAndVegCopy) // ?
console.log(fruitsAndVeg) // ?

Oh! and don’t focus on the potatoes I don’t know if they are in the category of vegetable but let’s take it as it is, so the question is what do you think the output will look like?

well, the output will look something like this:

console.log(fruitsAndVegCopy) // ['pinapple', 'peaches',['dodo', 'tomato', 'potatoes']]
console.log(fruitsAndVeg) // ['pinapple', 'peaches',['dodo', 'tomato', 'potatoes']]

if you guessed it correct well good for you, but do you know why? and if you guessed wrong well 😴 you will need to stay with me for a while

you may be confused what in the hell is this I get it I have been there too.

it all boils down on how non-primitive datatypes are stored in JavaScript, non-primitive data types in JavaScript include arrays, objects, functions.

Heap and storage of non-primitive types in memory

when you create a non-primitive datatype in JavaScript it is stored in a memory location called heap and the variable name you’ve given that non-primitive will be used to identify the data you’ve stored in heap by their memory address in heap.

let’s demonstrate how it works in the below snippet

const arrOne = [1,2,3,4,5];
const arrTwo = [6,7,8,9,0];
const arrThree = ['a', 'b', 'c'];

The diagram below shows how the arrays created will be stored in memory:

In the diagram the heap is the container for our arrays actual data.

The actual variable we’ve created stores reference pointing to a place in heap memory where our arrays are being stored and (this also applies to objects and function, ), which means the variable will store the reference of a place in memory to find the data not the actual data.

Shallow copy:

We say that something is shallow copied when we have a nested non-primitive like object of arrays or arrays of object or nested arrays as the example we had before

when we don’t want to mess with the original array or object and create a copy of it using the spread operator like we had in this example

const fruitsAndVeg = ['pinapple', 'peaches',['dodo', 'tomato' ]]
const fruitsAndVegCopy = [...fruitsAndVeg]

The values that are not arrays will be copied, because primitive stores actual values not the reference as non-primitives,

and since we have a nested array inside the original array it means we have that nested arrays reference to the memory not the actual array itself as it is in the code.

This is how it will be structured in the memory

Shallow copy can be defined as a copy that copies the top level and on the nested level it copies its memory reference, which will point to the same memory location but with different reference

the new copy will refer to the same location as the original one, this means if you change the fruitsAndVegCopy nested array contents, changes will also apply to the original array because they point or refer to the same location in memory on the same data

but if you change pineapple to apple of fruitsAndVegCopy array they won’t have effect on the original one.

Deep copy:

let’s also talk about Deep copy, Deep copy will copy the value from top-level to the deepest level of the object we want to clone.

I will be using the JSON method technique to show how to deep clone

`JSON` method technique:

step 1: first stringfy the object we are about to clone:

we use the stringfy() method of JSON to make the object a string

const fruits = ['apple', 'mango', 'banana'];
const fruitsAndVeg = ['pinapple', 'peaches',['dodo', 'tomato' ]];
const stringfiedarr = JSON.stringfy(fruitsAndVeg); // '["pinapple","peaches",["dodo","tomato"]]'

our new stringfied array version would look like this:

step 2: Convert the object from a string version to a non-primitive type again:

the parse() method of JSON is used to convert back converted object back to normal objects or non-primitive type

and then store that array into a new variable which will create a new memory reference for our array

const fruits = ['apple', 'mango', 'banana'];
const fruitsAndVeg = ['pinapple', 'peaches',['dodo', 'tomato' ]]; 
const fruitAndVegCopy = JSON.parse(stringfiedObject)

after the conversion is done we will create a new memory location assign its address to fruitAndVegCopy which will be completely different from the original array allowing us to manipulate it without having to worry about the original array mutability

Final Thoughts:

if you find this way of deep clone or copy using JSON you can read more about this you can read more about the method to deep clone called structuredClone method which does the same as the JSON does

conclusion:

I hope you got something out of this and have grasped the concept of deep and shallow copy in JavaScript, I would appreciate sharing with me what you gained throughout this whole article and what do you think about the content in general.

Forem: jabo Landry

You’re probably writing complex CSS for no reason

Features we will cover

has pseudo-class

CSS nesting

nesting for pseudo-elements and pseudo-classes

@scope

@container queries

Summary

Final Thoughts

Docker key terms simplified

Table of Contents

Prerequisites:

What is docker:

Why is docker important:

Idea of how docker works:

What is a docker image:

Docker file commands Explanation

Running the image

What is docker container:

How to run a docker container

Docker Volumes

Final Thoughts

Procrastination in disguise

Table of Contents

Introduction

Procrastination in disguise

Stepping out of your comfort zone

Final Thoughts

Enhancement on Caching and Service Workers

Welcome to My Video Post

The Video covers

Final Thoughts

Comprehensive guide on getting started with caching using service workers

Table of Contents

Prerequisites:

What is a service Worker:

Caching

Basic caching implementation using Service worker

Starting Cache operations:

install event:

event setup:

Cache setup:

activate event:

Fetch event:

Wrap Up

Final Thoughts

Understanding Stateful Functions Through JavaScript Closures

Why We need closures

What is Lexical scope:

Lexical Scope by definition

Lexical Scope under the hood

Understanding Closures and Lexical scope:

Working with closure:

Tricky Question

Use Cases for Closures

Problems in Changing the existing structure

Solution for the change

closure solution implementation

Final Remarks

Beyond Server‑Side Rendering: Rediscovering PHP and the Joy of Experimenting

The Old Way We Were Taught

The Turning Point

Exploring New Possibilities

Rediscovering PHP’s Strengths

The Lesson Learned

My Advice to Developers

Final Thoughts

Let's discuss Deep and Shallow Clone in JavaScript

Heap and storage of non-primitive types in memory

Shallow copy:

Deep copy:

JSON method technique:

Final Thoughts:

`has` pseudo-class

`JSON` method technique: