Sometimes we’d like to split third-party external styles or legacy styles into a separate CSS bundle on building our angular application. This can be done quite easily. Keep reading to know more.

Including External Styles

As commonly known, we can include any external styles in our angular application by adding it to the styles array in our angular.json file:

"styles": [
  "styles/bootstrap.scss",
  "styles/app.scss",
  "styles/some-other-style.scss"
]

This would generate a single CSS file after the ng-cli build goes through (ng build) :

dist/styles.<some-random-hash>.css

In Production build, angular generates a random hash in for browser cache busting purposes. If something changes in our bundle, a new hash is generated and added to the file name, by doing so we invalidate a previously cached file and force the browser to retrieve the new file from our server. …

Books are wormholes to wonderland. Without reading, life would be a mistake. But reading and not remembering what you read is worse. It is time wasted!

I used to find myself reading an amazing book and then miserably failing to articulate the ideas of the book while telling a friend about it. Here are some tips to read better and remember what you read.

Read What You Love

Pick a book that interests you. Read the blurb and decide if it resonates with you. Not everyone would find Sapiens by Yuval Noah Harari “Thrilling And Breath Taking”. If you don’t like non-fiction, read fiction. If you like poetry, read poetry. …

Simpler, succinct code is always better than complex and quirky solutions. It can be a challenge to find the right balance between short and readable solutions. Here are some tips to help you write JavaScript more productively.

1. Optional Chaining

The optional chaining operator (?.) allows us to do nested property lookups in an object without having to perform multiple null checks.

2. Nullish Coalescence

Inspired by C#, Nullish Coalescence made it to ES2020. It is a really handy binary operator that returns the first defined value.

You must be familiar with using the || operator to perform default value assignments like so:

But the trouble is, || is not safe to use with `falsey` values. …

Hi friend, hope you’re well!

Here are some articles that I think would be worth your time:

1. Iterables in JavaScript: Custom Iterables

Wouldn’t it be great if we could use the for…of loop to iterate over our own data structures? In this article, we will learn how to do this…
Read more

2. Truly Reactive Forms in Angular: A Unique Approach

Reactive forms are not reactive enough in Angular. Especially when dealing with async observable data to pre-populate a form. Having to subscribe and call methods like setValue and patchValue seems very imperative and can be a recipe for data races and memory leaks. It can especially get messy when bulk editing an array of domain models. In this article we explore a different approach to reactive forms. Keep reading to know more

Observable of Forms!

That’s right! We can think of forms as a stream of UI input elements. Since forms can be thought of reactive setters that a user uses to set the data model of the view layer. As the data model itself is a stream, the form elements can be thought of as a stream of UI elements mapped from the underlying data stream. …

If you are lazy like me, you know it can get a little annoying having to type the issue number in every commit message. We can easily automate this using the git prepare-commit-message hook which can prepend commit messages with JIRA issue number to the commit message extracted from the git branch name (and get the benefits of Smart Commits). You can use this trick for any issue tracker you might use. Read more to know how to do this.

TICKET-123 — a useful commit message

Naming your git branches

For this technique to work, you need to make sure that you include the issue number in the name of the git branch. You can use the git flow naming convention as long as the ticket number is in the branch name. …

Sometimes, we need to extend third party library reducers and add additive features on top of it. This can be done easily with the help of a simple trick.

NGRX is a reactive implementation of Redux architecture where reducers act as reactive setters to add data to our application’s Observable Store on listening to Actions.

Reducing Reducers

Alliteration Alert! (see what I did there)

Since we need to extend an existing reducer by adding additive features to it, we need to essentially concatenate the reducers. …

TypeScript gives us the ability to improve the architecture of our JavaScript application with type safety and code documentation. However, it doesn’t turn on `strict mode` by default in order to keep the barrier to entry low for new adapters. Angular takes the same approach. It does not turn the strict mode when generating a new Angular Application unless explicitly specified. This can hinder us from taking full advantage of TypeScripts strongly typed nature which allows us to detect a whole class of bugs at compile time.

There is a way to reap the benefits of the strict mode immediately even if you have an existing application with hundreds or thousands of TypeScript files. …