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.
The Problem
In general, if we want to change anything in pseudo-elements through JavaScript, we do it in the following way:
- Create CSS classes on an element, which will change pseudo elements’ UI
- Get the element using
querySelector - Modify the classes using
classList
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)…
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
Show off your keyboard shortcuts with style 🦄.
In this article, I will show you how to ⚡ quickly setup ✏️ Ace editor in 🅰️ Angular without any other 3rd party libraries.
✏️ 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.
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.
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-themeCreate 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…
💬 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…
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.
First things first
Open up your 👨💻 terminal and run
npm i -g @angular/cli ng new recursive-child --defaults --minimal --inlineStyleTip: Do not use
--minimaloption 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.
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:
