Skip to content

Blog

Welcome to Agney's Digital Garden

Stay ahead of the curve in Web Development with my Javascript Every Month Newsletter.

I will deliver a curated selection of articles, tutorials, and resources straight to your inbox once a month.

Read the Archives

Subscribe to JEM Newsletter

No spam, unsubscribe anytime.

Latest Posts

Looking ahead in 2024 by peeking into the past

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

Roasting your Non Accessible Websites - React India 2023

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

Dynamic values in Tailwind

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:

useMemo inside Context API - React

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

twin.macro is my new styling favorite

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

Sequelize Associations - Fetching Associations

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 Associations - Creating Associations

[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

Please don't overuse optional chaining

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

Counting React Children

`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

Writing a Snowpack Community Plugin

[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

Tailwind CSS & Svelte on Snowpack - Preprocess

[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

Everyone is a full stack developer

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

Combining Promises

## 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

Conditionally spread into Object/Array - Javascript

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

Link to any text with Bookmarklet

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

Fastest way to Google Fonts

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

Tailwind CSS on Snowpack

> 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

10k and Reflecting on StackOverflow

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

Effective Remote Communication

![Remote meetings](./effective-meetings/poster.jpg) 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

Toast with Ionic React

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

React - Avatars and Avatar Groups

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

Theming with Styled Components

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

TIL - Grid Blowout

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

Fast Track to Dark Mode with Styled Components

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

Replacing Styled Components with a 1KB alternative Goober

[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

Let's make a Picture in Picture Countdown timer on the Web

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

Hooks of React Router

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

Creating a JAMStack Reader App with React & Netlify Functions

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

Promises - JavaScript concepts

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 & TypeScript - 😍

[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

7 NPM Commands to help you save time.

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

A GatsbyJS Advent Blog Posts Theme

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

Configuring Preact CLI with Tailwind CSS

[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

Introducing Playground - A Frontend Demonstration Component

[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:

When to use useCallback

> 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

Why is my state not getting updated - Hooks version

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); } ``

Immutable Array Operations - JavaScript

[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

OG Images with Github Actions

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 Icons with Pseudo-Elements

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

TIL - mark

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

When can we skip the alt tag? - Accessibility

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

One Signal Notifications on Gatsby

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

NextJS on Elastic Beanstalk with Circle CI

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

Scopes and Closures

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

Double Equal vs Triple Equal

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

Type Coercion - JavaScript Concepts 4

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

JavaScript Playground

> 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

Overriding console in an iFrame

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

Value vs Reference - Javascript Concepts 3

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

Transitioning from Remark to MDX

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

Call Stack - JavaScript Concepts 1

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

Electrojet — CLI as a Service

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 development on a web server

[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

Things I dont know as of 2018

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

Create a Code Generating CLI

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

Detecting if an element is in the viewport - Javascript

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

Why is my state not getting updated - Class version

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