Development

Writing conditionals in CSS: when/else

Writing conditionals in CSS: when/else

  • November 24, 2021

CSS already has had conditionals in the form of @media queries or @support queries to selectively apply styling to the document. But there is a new proposal called when/else which takes it to a different level. At the time of writing this post, the when proposal for when has been...

Retrieving content value of ::after or ::before in JavaScript

Retrieving content value of ::after or ::before in JavaScript

  • November 21, 2021

Let us suppose we had an HTML element which had an ::after property assigned to it. We are going to be retrieving the content value of ::after or ::before of this element using JavaScript. For the following element: If we needed a way of retrieving content value of ::after in...

How to permanently remove a file from Git history

How to permanently remove a file from Git history

  • November 12, 2021

We all make mistakes sometimes. Pushing files that contain some secrets or sensitive information to a Git repository is fairly common. And even if we revert the commit, it would still be present in the Git history of the project. In such cases, where we want to permanently remove a...

Select all text on click using CSS

Select all text on click using CSS

  • October 22, 2021

When a user has to select some text on a website, they have to drag and hold their mouse, or use double-click it. Sometimes, there are some samples that we know that the user is going to copy for sure. A use case for this can be code samples. The...

Detecting element causing CSS overflow

Detecting element causing CSS overflow

  • October 13, 2021

CSS overflows are an annoyance that keep showing up once in a while and are really hard to debug. Unwanted and unexpected scrollbars can lead to hours of inspecting the DOM to figure out what element is causing the issue and clicking random elements in the Chrome dev tools until...

Opening a Browser with DevTools Open by Default

Opening a Browser with DevTools Open by Default

  • October 10, 2021

While automating some parts of my development workflow, I was wondering if there was a way of opening a browser with DevTools open by default. This would save me a few clicks and small tweaks like this are always helpful. And it turns out that it is possible! All I...

How to create a UUID in JavaScript

How to create a UUID in JavaScript

  • September 30, 2021

Creating a globally unique identifier has always been a necessity in all programming languages and for some reason, JavaScript never had a way of doing it in the default spec. But that is changing now with the crypto API. We can now create a UUID in JavaScript. What is UUID/GUID?...

How to convert a React component to an image

How to convert a React component to an image

  • September 27, 2021

Sometimes you want to give the users the ability to download a part of the web application as an image. In that case, you want a way to convert a React component to an image. And it can be straightforward by using a third-party NPM package called html2canvas. Let us...