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. [...]
Murtuzaali Surti
Software engineer who loves to write about all things web!
Articles
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. [...]
Deploying React App to Netlify
In this tutorial, I am going to show you how you can deploy a react app on netlify from an existing git repository of yours. [...]
Adding Custom Anchors to Headings in Markdown - Eleventy
Anchors are nothing but id attributes applied to an element to link to it using href attribute internally on the same page. [...]
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. [...]
5 Most Useful Visual Studio Code Extensions
Here are the 5 most useful Visual Studio Code extensions to improve your workflow! [...]
How to create and deploy an Express.js app to Vercel?
Vercel is a platform to host frontend applications and static sites but you can also host an express app using serverless functions. [...]
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). [...]
How to compile SASS into CSS and watch for changes?
SASS extends CSS which means that you can have all the features of CSS plus the features of SASS just like a cherry on top of a cake! [...]
IIFE in JavaScript
You might be familiar with functions in JavaScript. An IIFE is a special type of function which is invoked implicitly. [...]
How to make a QR Code generator using JavaScript?
While you can generate QR codes for URLs in browsers such as Chrome, it's always interesting to learn how you can make your own version of a simple QR code generator. So, here we go. [...]
Skeleton Loading for Social Media Embeds using CSS and JavaScript 🔥
Social media embeds take some time to load and render, hence the user experience is not so good! Here's an example of twitter embeds.. [...]
How to create Google's Material Design Text Input Field using CSS and JavaScript?
In this tutorial, we are trying to recreate Google's text input field animation and design from scratch with the help of CSS as well as JavaScript. [...]
How to create an HTML generator with JavaScript?
Ever tired of writing multiple lines of similar HTML? If you are, then you can automate the process by using template literals in JavaScript. Let's see how we can do that. [...]
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. [...]