JavaScript
Articles
Next.js: The Good, Bad and Ugly
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 couple of months now and this article is the summation of my struggles and *aha!* moments when using Next.js."
console.log like the cool kids
console.log like the cool kidsconsole.log is in every Developer's toolkit. But there's more to it than just the regular log method
Sticky Header using Intersection Observer API
Sticky Header using Intersection Observer APII wanted to have the Table of Contents sync with the scroll position of the page and highlight the current section. In this post, I explain how I used IntersectionObserver to achieve it.
Snippets
Aug 5, 2021
🔖 Vandalize the web with BookmarkletsLet’s say you want to vandalize a website that you don’t own. You want to read The Wall Street Journal in Comic Sans, or you want to highlight the last letter of every paragraph in this post to see if there’s some secret message (spoiler alert: there…
  • Bookmarklet
  • JavaScript
Jul 24, 2021
🐶 Automate linting with HuskyESLint and Prettier are used to enforce a consistent style and follow code standards across JavaScript projects. It can be automated with the help of VSCode extensions (and WebStorm config), when saving a file. The problem I observed was not everyone…
  • ESLint
  • Git
  • Husky
  • JavaScript
  • Prettier
Jun 11, 2021
⏲ Async/Await and handling errorsThe Promise AKA how to write async code in 2021, was a result of callback hell and nested promises. What are those? Well take a look at the examples: Promises, well…promised this: Although, a real world use-case turned out like this: And don’t even…
  • Async Await
  • JavaScript
Jun 10, 2021
⛓ Revisiting Arrays in JavaScriptIn this post, I’ll talk a bit about different ways to create an array in JavaScript and ways to empty an array. Creation To create new array which, you cannot iterate over, you can use array constructor: If you try to use you’ll get . To create…
  • Array
  • JavaScript
Jun 8, 2021
🔎 Syntax Error: Expected Name, found <EOF>When working on a Gastby app, I came across this error when running . Only context I had was that error happened at which is where the call to method was included. I had a hint from the logs that it was a . So I traced back to which query was used…
  • Gatsby
  • GraphQL
  • JavaScript
  • React
Jun 7, 2021
🧲 Using Context with a HoCThe Provider Context API in React enables data sharing between components at different level in the component tree. Consider this example: We have an component that is responsible for rendering a and the content. component is responsible to…
  • Context Providers
  • Higher Order Components
  • JavaScript
  • React
Jun 5, 2021
🛠 JavaScript Utils: Part OnePart One of the JavaScript Utils series where I share code snippets which can be directly used in your projects. All of the snippets on this page are licensed under CC0-1.0, unless mentioned otherwise. Get unique values in an array Remove Empty…
  • JS Utils
  • JavaScript
  • Snippets
Jun 4, 2021
🛰 Analytics using Beacon API and PingHaving some kind of a data tracking mechanism in applications is essential to understand user behaviour and how you can improve your application to provide better experience to your users. From getting information on how a user interacts with a…
  • Analytics
  • JavaScript
  • User Tracking
Jun 3, 2021
🎚 Switch to Object Literalsstatement is one of the things that has been around for ages, and is taught in most programming 101 lessons. It’s has a consise syntax, has a fixed depth, (unlike the nested if-else-if hell), and an optimized implementation may execute faster than…
  • JavaScript
  • Objects
  • Switch Statement
Jun 2, 2021
🏗 Builder Pattern with a Fluent API in JavaScriptImagine a scenario where you want to create a Task object. A Task usually has a title, a due date, maybe a description, in some cases an assignee. The simplest solution is to create a base and extend it to cover all possible combinations of options…
  • Builder Pattern
  • Design Pattern
  • Destructuring
  • JavaScript
Jun 1, 2021
🔥 Efficient workflow with ESLint and PrettierI have a few tools which I use consistently across JavaScript projects I work on. ESLint and Prettier are in the top 5. Whereas Prettier is used to autoformat my code to enforce an opinionated code format, ESLint makes sure to keep my code style in a…
  • Code formatting
  • ESLint
  • JavaScript
  • Prettier
  • React
May 31, 2021
📥 Sharing state in GatsbyIn the last post, I showed how we can create a global layout for an entire app and have it shared between the pages without re-renders. In this post, we’ll go one step further and create a shared state management provider, that wraps the whole Gatsby…
  • Gatsby
  • JavaScript
  • React
May 30, 2021
🌐 Holy Grail layouts in GatsbyWhen we look at most modern web apps, they follow a Holy Grail layout. At its core, the Holy Grail Layout is a page with a header, footer, and three columns. The center column contains the main content, and the left and right columns contain…
  • Gatsby
  • JavaScript
  • React
May 27, 2021
♼ Writing re-usable logic with React HooksReact developers who have used functional components are usually familiar with and . These called Hooks, They let you use state and other React features without writing a class. You can implement your own custom Hook that can be re-used in your…
  • JavaScript
  • React
  • React Hooks
May 26, 2021
‼️ The difference between String.match() and String.matchAll()is a method in JavaScript that returns an array of results matching a string against a regular expression. Returned results depends on the flag. If a flag is used we will get all results but without capturing groups. If we remove the flag from…
  • JavaScript
  • Regular Expression
  • String
May 25, 2021
🍪 Setting Cookies in Next.jsWhen working on a Next.js project, I found this peculiar problem. The client app needed to have an identifier cookie set when a user lands on the page, because certain APIs later in the page depend on this cookie value for some kind of data…
  • Cookies
  • JavaScript
  • Next.js
May 23, 2021
👋🏽 Meet the new Array.at() methodArrays 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. Today we are going to look at the new method. Note that it’s still…
  • Array
  • JavaScript
May 23, 2021
👨🏽‍💻 How to merge Arrays in JavaScriptJavaScript Arrays are list-like objects whose prototype exposes methods to perform traversal and mutation operations. Often times you’d be working with multiple arrays and would want to merge them. In this post, let’s look at some of the ways we can…
  • Array
  • JavaScript
May 22, 2021
🛠 Customize CSS Loader options in Next.jsRecently when working on a project migrating the code from Gatsby to Next.js, I faced a very interesting problem. Next.js supports CSS Modules using the file naming convention. Really cool stuff. I can now import class names using JS syntax like…
  • JavaScript
  • Next.js
  • css-loader