In CSS, the ‘position’ property is used to set the position in the viewport for the HTML element. It can have values such as ‘fixed’, ‘sticky’, ‘static’, ‘absolute’, ‘relative’, etc. In this tutorial, we will learn the difference between the ‘position: fixed’ and ‘position: sticky’. What is Position: Fixed in CSS? The ‘fixed’ value for the position property is used to set any element at the fixed position in the HTML viewport. Whenever we set the fixed position for any HTML element, it comes out from the document flow. It sets the position based on the viewport, even if we ... Read More

In CSS, media queries play an important role in creating a responsive web design, and nowadays responsive design is one of the important things every website requires to attract visitors. In general, we can write media queries using the @media CSS rule. However, we can use the different conditions and keywords in a media query to target different devices. For example, mobile devices, desktop devices, printer screens, etc. In this tutorial, we will learn the difference between the ‘screen’ and ‘only screen’ in media queries. What is a Screen in Media Queries? In CSS, we use the ‘screen’ keyword inside ... Read More

In the text input of the HTML, you can observe the marker showing at the editing position in the text, called the text input caret. Also, it is known as a text input cursor. In this tutorial, we will learn to style the text input caret. However, we can only change the color of the text input caret as changing shape is not supported by modern browsers. Syntax Users can follow the syntax below to use the ‘caret-color’ CSS property to change the color of the text input caret. caret-color: color; In the above input, ‘color’ can be the ... Read More

Developers can use CSS to add animation to the HTML element. Here, we will use CSS to add a wavy effect inside the text. It will look like a real wave in text Here, we have three approaches to add a wavy effect to the text. We will take a look at all approaches one by one. Syntax Users can follow the syntax below to add a wavy effect to the text. @keyframes wavey { 0%, 100% { /* add initial clip-path */ } ... Read More

A contact form is a great way to allow users to reach out to you directly through your website. Contact forms are a crucial aspect of any website, as they allow visitors to get in touch with the website owner. A contact form on website provides an easy way for visitors to ask questions, make inquiries, or provide feedback. In this tutorial, we will be discussing how to create a simple contact form using HTML, CSS, and PHP. Step 1: Create the HTML Form The first step in creating a contact form is to create its structure using HTML. In ... Read More

What is Tree Shaking? If you are an experienced JavaScript developer, you may hear about tree shaking. It is a common technique to remove unused codes from the application and also, and it removes unused imports from the application. Here, the ‘Tree shaking’ term is introduced by shaking a tree, removing unnecessary branches of the code, and keeping the required code in the final bundle. Basically, tree shaking is used to eliminate the dead or unused code. Why do we Require Tree Shaking? As we have seen in the above part of the tutorial, tree shaking is used to remove ... Read More

What is Server-sent Events in JavaScript? In JavaScript, server-sent events (SSE) enable the server to send data to the client. The client require to establish a connection with the server to get data from the server. The server-sent events are similar to the WebSocket as it also establishes a connection between the client and server, and it is useful to send data on both sides. But server-sent events allow unidirectional communication, which means the server can send data to the client, but the client can’t send data to the server. Let’s build a real-time React and Node application to use ... Read More

The server-sent events allow developers to open a connection between the server and the client and send data from the server to the client. Basically, it is a one-way communication, which means we can send data from the server to the client but not from the client to the server. Here, we will discuss all events available for the server-sent events in JavaScript. Events Available for Server-sent Events in JavaScript There is a total of 4 different events available for server-sent events in JavaScript. ‘onopen’ − The ‘open’ event fires when the connection between the client and server is ... Read More

Nowadays, the audiobook is more preferred by readers to reading books as they can grab knowledge while doing any work by listening to it. Also, some website adds the audio of the article in every article, so if users don’t want to read the article, they can listne to it. To convert normal text to voice, we require to use the web speech api of Google Chrome. In this tutorial, we will learn to use the web speech API of Google Chrome to convert text to voice. Syntax Users can follow the syntax below to use the web speech API ... Read More

Problem Statement − We have given two integer numbers and need to check whether the two numbers are bit rotations of each other. In JavaScript, every integer is a 32-bit binary number which is a representation of 0 and 1. Here, we need to check if we rotate the 32-bit string of the first number; we can achieve the 32-bit string of the second number or not out of a total of 32 rotations of the first number. Use the ToString() Method to Check if two Numbers are bit Rotations of Each Other The toString() method is used to convert ... Read More