Murtuzaali Surti

Murtuzaali Surti

Software engineer who loves to write about all things web!

47 Articles

Mac Setup For Developers [2024]

Setting up a new Mac for development can be a daunting task, especially if you are new to MacOS or don't know where to start. In this guide, I'll tell you about some tools, apps and tips which are essential for a decent developer experience on a Mac. [...]

Better - An AI powered Code Reviewer

Code reviews have always been crucial in maintaining a standard and emphasizing on the best practices of code in a project. This is not a post about how developers should review the code, it's more about delegating a part of it to AI. Introducing Better - An AI powered Code Review Tool. [...]

Server Sent Events 101

Server Sent Events (SSE), as the name suggests, are a way to communicate with the client by keeping a persistent connection in which the server sends text messages to the client whenever they are available. [...]

"this" Keyword in Arrow Functions

The "this" keyword in javascript is probably one of the most misunderstood concepts of javascript. In this article, you will see how the "this" reference is different in arrow functions introduced in ES6 as compared to regular function expressions. [...]

5 Newsletters Every Developer Should Read

Newsletters can be hard to follow along, especially when you subscribe to too many of them. That's why, today you will get to know about five newsletters every developer should follow and read. [...]

I tried "window.ai" in Chrome

At the time of this writing, Google Chrome has started shipping experimental AI features such as "built-in AI" in Chrome's Dev/Canary channels. In this tutorial, you will get to know how you can try the built-in AI model in chrome dev. [...]

Create a Node Server using Hono under 10 Lines of Code

Hono, as per the docs, was originally built for Cloudflare Workers. It's an application framework designed to work the best for cloudflare pages and workers as well as javascript runtimes Deno and Bun. Although not built specifically for Node, an adapter can be used to run it in Node. [...]

Running PostgreSQL using Docker

In this quick tutorial, you will get to know how you can run postgresql inside a docker container terminal using "psql" (a terminal interface to interact with postgresql databases). [...]

React 19 - A Brief Look At Form Handling

Forms in React have always been not so easy to handle which often leads to messy React code. Ultimately, folks have to resort to form handling libraries which only add more abstraction in the process. [...]

Static Sites Are Good

For the most part, static-first sites are the go to thing if your application doesn't involve much complexity. However, you are free to choose the right tool for your application — but choose wisely. [...]

Issue With Watching File Changes in Docker

The fix to watching file changes (hot reloading) in docker (Windows) is to use polling. Polling is a way to periodically check for changes. If you want to avoid polling, docker provides a way to watch file changes with the help of "docker compose watch". [...]

Advent Of Code 2023 - Day Four Solution

It felt easier than the previous one to be honest, especially the first part. The puzzle is quite simple. For a given number of scratchcards, there are two lists of numbers [...]

Web Components & Custom Elements

Custom elements in HTML are a way to extend native HTML elements. Javascript frameworks simulate the behavior of components in a web page whereas [...]

Advent Of Code 2023 - Day Two Solution

Just wrapped up solving advent of code's day two challenge. This was a tricky one in terms of the language used to describe the puzzle. I had to take some online help to understand what was the second part of the puzzle trying to say [...]

Completed Advent Of Code: Day One

AOC Day 1 - Overall, it was fun to play with strings and numbers in javascript. Through this challenge I learned about regex more than I could have normally. [...]

App Defaults 2023 — What I use

The other day, I stumbled upon a post by robb about app defaults. Following the spree, here's my list of all the apps I use for the following categories. [...]

Elegant Console Logs With Consola

Creating beautiful and elegant console logs in consola, a console wrapper. Console logs are not always well structured and eye-pleasing. Unpleasant and messy console takes away [...]

Sharing Localhost From VS Code - Port Forwarding

Showing off what you built locally has never been easy. Now, the feature of port forwarding is directly built into VS Code. Does this mean all other services which provide port forwarding or remote tunneling will be obsolete? [...]

Docker — Containerizing a Nextjs Application

Containerization in it's entirety is an incredibly useful concept. From being able to execute applications in isolation, to being able to port them easily with all of their dependencies and configuration is all a developer could ask for. [...]

WebSockets 101

WebSockets implement a full-duplex, bi-directional, TCP-based protocol, denoted by ws(s)://, which enables a persistent connection between the client and the server. Back when websockets weren't a thing [...]

Builder.io's Partytown with 11ty

Exploring builder.io's partytown and integrating it with 11ty! It is nothing but a library which uses web workers to separately execute third party scripts. [...]

Why I love Markdown

I was introduced to it when I started using github for hosting my projects. That was my first encounter with markdown and since then, I never looked back. Here's why. [...]

What is DOM diffing?

DOM, also known as the Document Object Model, is a programmatic representation of the contents of a web page. In other words, the content of a web page is represented in the form of objects and nodes. [...]

Using Fontsource With 11ty

For quite some time, I was searching for a way to self host google fonts because the google fonts API's network request increased the render blocking time more than I expected. [...]

Creating Git Hooks Using Husky

They are used to verify everything is as expected before or after executing a git command or action. Some common applications include formatting the code before committing, performing build step before pushing the code to production, etc. [...]

Setting Background Color of Body Dynamically in React

You can specify the background color of body in a global stylesheet, but it's not easy to update the background color dynamically for different pages in your website. So, I went on to code a hacky but working patch using CSS custom properties. [...]

Minify JavaScript Using Terser

Terser is a javascript compressor and mangler supporting ES6+ specification. In this tutorial, you will get to know how to use terser to minify or compress javascript. [...]

How to vendor prefix and minify CSS?

Writing CSS from scratch along with adding vendor prefixes can be a daunting task if done manually. Vendor-prefixes can be easily added using the autoprefixer plugin of PostCSS. [...]

Eleventy - Shortcode for Embedding Codepen

Shortcodes are used to invoke a particular function which returns some html or any other data based on the information that is passed. They are mainly used to reuse html templates which require some preprocessing. [...]

Optional Chaining in JavaScript

Optional Chaining in JavaScript is used to return undefined for accessing an object property that doesn't exist and whose parent property is nullish (null or undefined). [...]

IIFE in JavaScript

You might be familiar with functions in JavaScript. An IIFE is a special type of function which is invoked implicitly. [...]

Dark mode toggle animation using CSS!

This tutorial will mainly focus on how to use transitions in CSS and make a toggle button for light as well as dark mode using little JavaScript. Let's dive into the world of transitions! [...]

How to create a notification badge with CSS?

Notification badges annoy me most of the times by popping up every now and then and I am pretty sure most of you experience similar thing, but anyways, let's see how we can create a notification badge using CSS. [...]