Changing the UI of pseudo-elements through JavaScript can become difficult sometimes. Let’s see how we can make it easy with help from CSS Custom Properties.

How to Change Look & Feel of Pseudo Elements using JavaScript and CSS Custom Properties
How to Change Look & Feel of Pseudo Elements using JavaScript and CSS Custom Properties

The Problem

In general, if we want to change anything in pseudo-elements through JavaScript, we do it in the following way:

The above approach works fine. But, if we need more customizations in pseudo-elements, we will end-up creating many classes to handle all scenarios.

CSS Custom Properties to the rescue

Custom properties (sometimes referred to as CSS variables or cascading variables)…


Image for post
Image for post

A few weeks ago Netanel Basal came up with an idea to create react-hot-toast like library for Angular community.

And I am really glad that we ended up creating the best Angular toast in town, announcing…

🎉 Angular Hot Toast — The Best Angular Toast in Town


In this article, I will show you how to ⚡ quickly setup ✏️ Ace editor in 🅰️ Angular without any other 3rd party libraries.

Image for post
Image for post

✏️ Ace Editor

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.

Both Cloud9 IDE and Mozilla are actively developing and maintaining Ace.

👨‍💻 Let’s talk Coding

📁 Create a workspace

Open up your terminal and:

npm i -g @angular/cli…


If you’re starting a new open-source project, keep this list of must-haves in it. That will not only help in building better quality code, but will also help in maintaining issues, documents, etc.

Image for post
Image for post

Open-source

When a project is open-source, that means anybody is free to use, study, modify, and distribute your project for any purpose.

Open source is powerful because it lowers the barriers to adoption and collaboration, allowing people to spread and improve projects quickly. Also because it gives users the potential to control their own computing, relative to closed source. …


In this article, we will learn how we can easily toggle between light and dark themes.

Toggle light and dark themes in Bootstrap
Toggle light and dark themes in Bootstrap

Themes in Bootstrap

While theming in Bootstrap can be done through its built-in SASS variables, for this article we are going to use provided CSS stylesheets.

Bootswatch has some great themes, we’re going to use its Cyborg theme for darker variant. And for light, we are going to use Bootstrap’s default theme.

So, let’s get started.

Create a project folder and index.html file

mkdir toggle-bootstrap-theme
cd toggle-bootstrap-theme

Create the index.html file in it:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap…

Image for post
Image for post

💬 Comments

In computer programming, a comment is a programmer-readable explanation or annotation in the source code of a computer program.

In this article, we will learn some of the known ways of writing comments, their usages, best practices, and more.

Although all of the examples in this article are in JavaScript and it will be according to [jsdoc](https://jsdoc.app/) format, the overall idea remains the same for any programming language.

🛎️ Importance

We all know that reading and understanding programs is much more difficult than writing them. And that’s why comments are always very useful when it comes to understanding another developer’s code.

And…


Image for post
Image for post
Photo by Harpal Singh on Unsplash

In this article we will compare usage of Google's Material Design Icons, as font and SVG. And we will also see how we can use SVG sprites in an Angular application.

Material Icons

Material Icons are Google's official icon pack. They are carefully designed following Material Design Guidelines. It's one of the most widely used icon sets for both, web and mobile applications. It has got around 40k+ ⭐️ on github.

The easiest way to include the material icons is to use material icon font. All the material icons are packaged into a single font.

You just need to add single line…


Many times, we face a situation, where we need some kind of architecture that helps us achieve recursive occurrence of child elements within same child elements. For example, replies or comments of in a discussion. Each reply has same functionality and UI and there can be many replies under one reply.

Image for post
Image for post

First things first

Open up your 👨‍💻 terminal and run

npm i -g @angular/cli ng new recursive-child --defaults --minimal --inlineStyle

Tip: Do not use --minimal option in actual app. We are using it here only for learning purpose. You can learn more about CLI Options here.

Great 👍. We have completed the…


In this article, I will show you how we can change look and feel of checkboxes and radio buttons very easily using SCSS variables and functions.

Image for post
Image for post
Credit: https://undraw.co/

TL;DR

I have created a repo called bootstrap-checkbox. You can simply get started from that, files to check for are: src\styles\abstracts\_functions.scss, src\styles\abstracts\_variables.scss, src\styles\components\_checkbox.scss and src\styles\components\_radio.scss.

You can see the final output at https://shhdharmen.github.io/bootstrap-checkbox/ which will look like below:

Dharmen Shah

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store