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
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.
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 CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"…
💬 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 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. …
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.
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 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.
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:
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 DEV.to: Custom Theme for Angular Material Components Series: Part 3 — Apply Theme
Summary
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:
- Understand theme of
MatToolbar - Apply
MatToolbar’s theme toMatSidenavandMatDialog - Create a different theme for
MatSnackbarand nice styling for different kind of notifications (default, info, success, warning…
