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
ng new ace-angular --defaults…

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


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">
<!-- Required meta tags -->
<meta charset="utf-8" />
content="width=device-width, initial-scale=1, shrink-to-fit=no"
<!-- Bootstrap CSS -->

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]( 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 believe me, it’s not just only for other developers, it’s for future yourself, too. After looking at our own code after a couple of months, even we sometimes are not sure why we wrote that piece at the first place. …

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

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 initial setup. You’ve done a lot today. What a 🌄 day. You should take a 🛌 rest. Go 😴 nap or get a 🍲 snack. Continue once you’re 😀 awake. …

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


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 which will look like below:

This is a fictional story based on some facts, characters & incidents from other fictional stories and subject, given: “In the year 2710 AD Earth has united and launched a space ship to Proxima Centuri. The Crew flies for 2 years and then hibernates for 100 years. The problem is in 2716 AD someone invented FTL travel. They reach Proxima Centuri before the original ship. Write down the conversation the old ship has with the new colony that’s already there waiting for them to arrive.”

Year 2710 — Lyndon B. Johnson Space Center, Houston, Earth

Kirk and his crew are waving off the crowd, as their adventurous journey is going to begin. Kirk is also giving a message ‘Love, from dad’ on front and an autograph, ‘With love, Kirk, 2710’, on the back of a toy replica of an astronaut for his son, Jim. …

Apply Theme to Angular Material and its different Components. 😎

👉 Update: This article was written for Angular v8, if you want this in Angular v9, please visit my article on Custom Theme for Angular Material Components Series: Part 3 — Apply Theme

Image for post
Image for post


This is third article of Custom Theme for Angular Material Components Series. In previous article, we understood how Angular Material’s and its components themes work. In this article we will proceed to modify default theme of components. Below is what we will be doing:

  1. Understand theme of MatToolbar
  2. Apply MatToolbar’s theme to MatSidenav and MatDialog
  3. Create a different theme for MatSnackbar and nice styling for different kind of notifications (default, info, success, warning…

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