An Idiosyncratic Blog

Javascript

Articles
Cover image for Goodbye Gatsby, Hello Next
Next.js

Goodbye Gatsby, Hello Next

Another year, another overhaul. This time I'm moving to Next.js and a controversial CSS framework. Starting with a fairly well built template, this is the story of how I moved from Gatsby to Next.js

Cover image for Next.js: The Good, Bad and Ugly
Next.js

Next.js: The Good, Bad and Ugly

Next.js is a framework for SSG SSR apps. But it is not all sunshine and rainbows. I've been building applications using Next.js for a couple of months now and this article is the summation of my struggles and *aha!* moments when using Next.js.

Cover image for console.log the cool way
JavaScript

console.log the cool way

console.log is in every Developer's toolkit. But there's more to it than just the regular log method

Cover image for Sticky Header using Intersection Observer API
JavaScript

Sticky Header using Intersection Observer API

I wanted to have neat looking Table of Contents for a long article. In this post, I explain how I used IntersectionObserver to build it a Table of Contents that syncs with the scroll position of the page and highlight the current section.

Snippets

🧱 Ditch the long if, use array.includes

JavaScript

Better Ways of Comparing a JavaScript String to Multiple Values

🔖 Vandalize the web with Bookmarklets

JavaScript

Quick intro to bookmarklets and how to create one for life hacks

🐶 Automate linting with Husky

Husky

Using Husky for a git hook to format code on commit and before push

⏲ Async/Await and handling errors

JavaScript

Dealing with async-await hell to write simpler and easy to understand code

⛓ Revisiting Arrays in JavaScript

JavaScript

In this post, I'll talk a bit about different ways to create an array in JavaScript and ways to empty an array.

🔎 Syntax Error: Expected Name, found <EOF>

Gatsby

Solving an error without Googling it first is kind of not time saving.

🧲 Using Context with a HoC

React

How to use Context Provider to avoid props drilling? Bonus, cleaning up multi-context tree hell using a Higher order Component.

🛠 JavaScript Utils: Part One

JavaScript

A set of JavaScript utilities which I found when scraping the internet.

🛰 Analytics using Beacon API and Ping

JavaScript

Alternative methods to fire analytics and logging APIs in JavaScript

🎚 Switch to Object Literals

JavaScript

Is switch statement good? Is there something better out there?

🏗 Builder Pattern with a Fluent API in JavaScript

JavaScript

Exploring builder pattern in JavaScript, taking some hints from Java builder patterns

🔥 Efficient workflow with ESLint and Prettier

Code formatting

How I configure ESLint and Prettier to catch style and code issues early on

📥 Sharing state in Gatsby

Gatsby

Exploring how to create a shared state management system in GatsbyJS using Context Provider API

🌐 Holy Grail layouts in Gatsby

Gatsby

Exploring how to create a shared layout system in GatsbyJS

♼ Writing re-usable logic with React Hooks

JavaScript

extracting reusable logic to a custom hook

‼️ The difference between String.match() and String.matchAll()

JavaScript

match and matchAll can be used to match string using regex. But are they same?

🍪 Setting Cookies in Next.js

Next.js

Snippet showing how to set cookies for a given url in Next.js

👋🏽 Meet the new Array.at() method

JavaScript

Arrays are one of the widely used data structures in JavaScript. You can have objects in an Array. You can have functions in an Array. You can have arrays in an Array. It's bonkers.

👨🏽‍💻 How to merge Arrays in JavaScript

JavaScript

In this post, we look at various ways to merge arrays in JavaScript

🛠 Customize CSS Loader options in Next.js

JavaScript

A snippet showing how to override css-loader options in Next.js