import { BubblingVisualizer } from "./event-delegation/BubblingVisualizer"; This article explains how event delegation works in the React DOM. We will first define the terms and show what they do in plain JavaScript; skip ahead if you already know

PS: This is extracted from [my monthly newsletter](https://buttondown.email/agney/archive/jem-web-in-december-javascript-every-month/). This is an endeavour to reflect on the observations made throughout the year and make predictions or manifest ex

I was at React India 2023 and gave a talk on accessibility. I'm not actually roasting anyone here but weird patterns that I find on actual websites and pull requests. I hope you enjoy it! <iframe width="560" height="315" src="https://www.yout

When working with Tailwind CSS, there are instances where you may need to use dynamic values, such as data fetched from the backend or calculations performed within your code. In these scenarios, you might initially consider using arbitrary values:

One of the most common places a `useMemo` is seen (in the wild) is for memoizing React context value. Let's look into what are the advantages of doing this and how we can prevent unnecessary renders using this pattern. --- Context provides a way t

I have already made my love for [`styled-components`](https://www.styled-components.com/) pretty clear on many different posts in this blog. This blog is about a new absolute favorite - [`twin.macro`](https://github.com/ben-rogerson/twin.macro). Be

This blog exclusively deals with how to fetch associations in sequelize. Primary knowledge of NodeJS, Express and SequelizeJS is recommended. [Sequelize](https://sequelize.org/) is an Object relational library (ORM) that helps to communicate betwee

[Sequelize](https://sequelize.org/) is an Object relational library (ORM) that helps to communicate between database (Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server) and programming models on the NodeJS end. This blog exclusively deals w

This post is small rant on optional chaining and it's usage. If you don't know, optional chaining allows you to use shorten your object reference chain by returning `undefined` when it sees a non existent reference in the chain. Consider a scenari

`Children.count()` and `Children.toArray().length` have different outputs. We are going to explore how and why. Consider a React component: ```javascript import React, { Children } from "react"; function Wrapper({ children }) { const count = Ch

[Snowpack](https://www.snowpack.dev/) is a tool for building web applications with less tooling and 10x faster iteration. Snowpack comes with a starter generator called [Create Snowpack App](https://github.com/pikapkg/create-snowpack-app), it has of

[Snowpack](https://www.snowpack.dev/) is a tool for building web applications with less tooling and 10x faster iteration. [Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework for rapidly building custom designs. Let's explore ho

With the rise of JavaScript as a viable option on both frontend and backend, there has been a steady increase in the number of people who claim to be full stack developers. In fact, everyone resume you find could be of a full stack developer (not to

## Prerequisites - [Promises - JS Concepts](/promises-js-concepts/) --- It is quite common during web development that we run across scenarios where we have to orchestrate different asynchronous operations together. This blog describes ways in wh

There comes a time when we want to add more fields/elements into an array or object when it satisfies a certain condition. This blog is an exploration of how and why. ## Spreading into an Array `isWinter` is a boolean variable and you need to add

If you are using Chrome or the new Edge browser, you might have noticed that opening a page from Google Search highlights and scrolls to the text that had your search query. ![Rick and Morty Suace details at McDonalds highlighted on a CNN page](htt

Harry Roberts writes about fastest ways of loading Google fonts on [his blog](https://csswizardry.com/2020/05/the-fastest-google-fonts/): > It’s widely accepted that self-hosted fonts are the fastest option: same origin means reduced network negoti

> This has changed lots after publication. You are better off following the [official docs on Snowpack](https://www.snowpack.dev/#tailwind-css) now. [Snowpack](https://www.snowpack.dev/) is a tool for building web applications with less tooling and

About 5 years ago, as I started out on Stack Overflow, I was simply looking for a way to keep track of answers that I see. Then, one day it felt like I could use some validation. If I could get out there and answer few questions from others, I could

 A lot of people are taking to remote for the first time because of the pandemic. While doing software engineering remote is well and good enough for most people, it's the communication that they s

A toast notification is a long standing custom in mobile application used to notify the user of something happening within the system. Sometimes it even has buttons for interaction. ![Toast GIFc](https://www.hkinfosoft.com/wp-content/uploads/2019/0

Avatar components are a huge part of our pages nowadays. From homepages to profile, the proliferation of round avatars everywhere. What would be the challenges of just adding an image in place? 1. Images take time to load, the space would be empty

A guide on theming your web applications with Styled Components. ## Why should you theme? - Themes help create an identity for your application. Themes can help abstract all usages of a particular color, length or shadow to a single place so that

Today I learned that there is a thing named _Grid Blowout_. It's not as bad as sounds though. One fine day, I had a normal grid going and things were going great. <Playground initialSnippet={{ markup: ` <div class="container"> <div> <d

This post describes a fast track to dark mode with Styled Components and a couple of other packages which is currently implemented on this blog. Note that we will not be discussing the implications or concept behind dark mode, there are enough arti

[Styled Components](https://www.styled-components.com/) and [EmotionJS](https://emotion.sh/) are two of the most popular CSS-in-JS libraries for the React land. But both of these do come with a cost, anywhere between 10KB to 20KB is how much any of

Caution: This currently works only on Chrome and Safari. Firefox still does not have support for programmatic PiP. [Can I Use - Picture in Picture](https://caniuse.com/#feat=picture-in-picture) # The Normal Pomodoro Timer I'm starting off with a

React Router 5 embraces the power of [hooks](https://reactjs.org/docs/hooks-intro.html) and has introduces four different hooks to help with your routing. But before we look at hooks themselves, we have to look at a new pattern that the `Route` com

I'm in 💖 with the [JAMStack](https://jamstack.org/), It gets the work done. One of the very exciting companies in this area is [Netlify](https://www.netlify.com/). Anyone who tested their hosting would tell you it's top class and I would recommend

This is part of a series where I try to explain through each of [33 JS Concepts](https://github.com/leonardomso/33-js-concepts). This part corresponds to Promises. ## Background JavaScript is a single threaded language, which means it can work on

[Styled Components](https://www.styled-components.com/) happens to be one of my favorite CSS in JS libraries all time and have been part of almost all of my [ReactJS](https://reactjs.org/) projects. As I'm transitioning most of my projects to inclu

As JavaScript developers, NPM is something that we always use and we have a script continously running on the terminal. What if we could save some time using it? ## 1. Open documentation directly from npm What if we could directly jump to the doc

The Advent has officially began and it's time for some advent blog posts. I made a [GatsbyJS theme](https://www.gatsbyjs.org/docs/themes/what-are-gatsby-themes/) to help you get started on the #Trend. Source: https://github.com/agneym/gatsby-theme

[Tailwind CSS](https://tailwindcss.com/) is a utility first CSS framework for building custom web designs. The utility consists of a lot of CSS classes and is usually configured via [PostCSS](https://postcss.org/) to include these class names and s

[Playground](https://github.com/agneym/playground) is a React Component that can be used for demonstrating HTML, CSS and JavaScript code. <Playground initialSnippet={{ markup: `<div id=app />`, css: `h1 { position: absolute; top:

> This post does not have a Yes/No answer, but tries to explain from a begineer standpoint why this hook is part of the official roster. Let us start the story with two components: 1. Parent 2. Child <iframe src="https://stackblitz.com/edit/use

Probably because you are using it wrong. > Find class based version [here](/blog/why-is-my-state-not-getting-updated/) ```js const [value, setValue] = useState(""); function handleChange(newValue) { setValue(newValue); console.log(value); } ``

[Svelte JS](https://svelte.dev/) documentation reads: > Because Svelte's reactivity is triggered by assignments, using array methods like push and splice won't automatically cause updates. For example, clicking the button doesn't do anything. It f

import withOg from "./og-image-with-actions/with-og.png"; import withoutOg from "./og-image-with-actions/without-og.png"; Open graph images are those that show up on your social media card when you share the URL. Here is how to add one: ```html <

Font Awesome's fifth iteration is huge with the company finally moving to SVG icons from their flagship icon fonts. With this change, the company has also published packages like [`react-fontawesome`](https://www.npmjs.com/package/@fortawesome/reac

From series - Today I learned. There is a tag in HTML that helps us highlight stuff just using it. And too many times I have used `span`s with a highlight class, Damn it! Let's look at what the `mark` tag brings in and how to use it. <Playground

import calvinHobbes from "./when-to-skip-alt/calvin-and-hobbes.gif"; Images have `alt` attributes that describe the said image for screen readers. The `alt` tags are also shown by browsers when the image does not load. The question we are looking a

Notifications are now an integral part of the web ecosystem. It increases the user engagement rate and your site can organically have people coming back day after day with fresh content. [Gatsby](https://www.gatsbyjs.org/) is the most popular Blog

import diagram from "./nextjs-on-eb-ci/diagram.png"; > It's a dream combination to have. But like all the things, it's hard to get there. But here is a crash course. PS: This assumes that you already know why you want to use Elastic Beanstalk and

This is part of a series where I try to explain through each of [33 JS Concepts](https://github.com/leonardomso/33-js-concepts). This part corresponds to the Scopes and Closures. ## Scope ### What is scope of a variable? Scope in programming sta

This is part of a series where I try to explain through each of [33 JS Concepts](https://github.com/leonardomso/33-js-concepts). This part corresponds to the Double Equal vs Triple Equal. ### Prerequisites 1. [Type Coercion in JavaScript](/blog/t

This is part of a series where I try to explain through each of [33 JS Concepts](https://github.com/leonardomso/33-js-concepts). This part corresponds to the Type Coercion. First let us take a quick recap on types in JavaScript. > There are gener

> Currently I have written a new component for the same playground concepts and is available for demo [here](/introducing-playground/) Announcing a new JavaScript Playground for the blog. This is a live edit panel so you can edit and come up with

This post talks about overriding your console logs in an iFrame on your own domain where you have access to the code inside the iframe. This might be because you are building a code editor or just executing user code inside an iframe for security r

This is part of a series where I try to explain through each of [33 JS Concepts](https://github.com/leonardomso/33-js-concepts). This part corresponds to the Pass by Value vs Pass by Reference. Before we go into JavaScript of things, let's look at

Moving my blog from Remark to MDX. ## Why? [MDX](https://github.com/mdx-js/mdx) means that you can use JSX components in your markdown. This means that blog posts down the road can have any type of content. Embed tweets, iframes without wandering

import dev from "./call-stack/devtools.gif"; This is part of a series where I try to explain through each of [33 JS Concepts](https://github.com/leonardomso/33-js-concepts). This part corresponds to the JavaScript Call Stack. Let's get started wi

In Javascript world, we are in a chaos of CLIs, using at least two or three on a project basis. Out of the top of my head, there is `create-react-app`, `vue-cli`, `ng-cli`, `express-generator`, `feathers-generator`, `gatsby-cli` and endless possibil

[Carlo](https://github.com/GoogleChromeLabs/carlo) is a headful Node app framework for building desktop applications. ### How is it different from Electron, Proton Native? While these other frameworks, bring their own runtime into the equation, Ca

Inspired from Dan Abramov's [article](https://overreacted.io/things-i-dont-know-as-of-2018/) First of all, there are a lot of things I don't know. There might be techniques whose names I haven't even heard yet. This isn't an attempt to name all tho

Today I would like to walk through the procedure to create a code generating CLI. This is not a step by step tutorial, although we will be looking at the concepts involved. What is a _Code generating CLI_, you ask? You might have surely used one in

This method uses the [Intersection Observer](https://w3c.github.io/IntersectionObserver/) which is relatively the new kid in town, so be sure to check out [Browser Support](https://caniuse.com/#feat=intersectionobserver). Also [polyfill](https://git

Probably because you are using it wrong. If you browse Stackoverflow for React questions, this is one of the most common questions that you will find. Well, it is this or other versions of the same question. All this after Stackoverflow marks quest