A small post to show how wave animation can take your emoji to next level!

We all use wave 👋 emoji a lot in web apps!

Next time when you use it, try to add a simple wave animation to it…

@keyframes wave-animation {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(14deg);
}
20% {
transform: rotate(-8deg);
}
30% {
transform: rotate(14deg);
}
40% {
transform: rotate(-4deg);
}
50% {
transform: rotate(10deg);
}
60% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.wave {
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-name: wave-animation;
display: inline-block;
transform-origin: 70% 70%;
}

I have also created a codepen for it:


In this article, we will understand why reduced motion support is needed. We will also understand the media query and its various usages. And at last, we will see how to disable animations in Angular.

If you’re simply interested in the main code, head over to Disable Animations. There we’re going to create a service, which will help us identify user’s preferences for reduced motion. Or take a look at the code directly.

Animation

Animations can be used in all kinds of web pages. Oftentimes they’re used to provide feedback to the user to indicate that an action is received and…


A schematic is a code generator, which follows a set of instructions and transforms your project by adding or modifying the code.

The schematic collection can be a powerful tool for creating, modifying, and maintaining any angular project. You might use schematics, for example, to generate commonly-used UI patterns or specific components, using predefined templates or layouts. You can use schematics to enforce architectural rules and conventions, making your projects consistent and inter-operative.

Sometimes we need to run other existing schematics from the same or external collection. Let’s see when you might need this.

Use Cases

Following are some of use cases…


Overall idea behind this article to explain and demonstrate the usage of ControlValueAccessor and interfaces. The former is used to bind together a FormControl from Forms package and native DOM elements. The latter is used to implement validation logic. They can exist independently of each other, but in this article we'll implement both using a single directive. Our directive will add the following functionality to the application:

  1. Conversion between input value and control value
  2. Validation for invalid date

If you’re using ControlValueAccessor for the first time, I would recommend going through this article first: Never again be confused when implementing…


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:

  1. Create CSS classes on an element, which will change pseudo elements’ UI
  2. Get the element using querySelector
  3. 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


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
ng…


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.

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…

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