In a single page application, you only have one body element and although you can specify the background color of body in a global stylesheet, it's not easy to update the background color dynamically for different pages in your website. I encountered this issue and immediately googled some solutions but…

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. Prerequisite: nodejs should be installed on your system. 1. Installing terser Install terser using yarn or npm. npm i terser -g 2. Creating a script Add the script to package.json…

A react app is a single page application which means that there’s only one document i.e. index.html file which is updated using javascript as per the requirement of the user. In this tutorial, I am going to show you how you can deploy a react app on netlify from an…

Anchors are nothing but id attributes applied to an element to link to it using href attribute internally on the same page. By default, 11ty uses markdown-it library to parse markdown. But, it seems that by default, markdown-it doesn’t support syntax for applying an id to a header element. The…

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. Also, the size of CSS file matters because CSS files can be render blocking so you need to keep a check…

Don’t know what eleventy is? Before you read further, check out this amazing series of articles by Tatiana Mac to know more about eleventy and static site generators in general. Shortcodes are used to invoke a particular function which returns some html or any other data based on the information…

Here are the 5 most useful Visual Studio Code extensions to improve your workflow! 1. Error Lens Error Lens is an extension which allows you to see error, warning and diagnostic messages in line with your code without having to hover or click on anything! …

Vercel is a platform to host frontend applications and static sites but you can also host an express app using serverless functions. In this tutorial, we will see how we can create an express app from scratch and deploy it to vercel. Prerequisites Node.js should be installed on your system. Creating an Express App Run…

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). If you are unaware that property exists or not and you want to avoid the error that’s being thrown, you may want to use…