In this article, we’re going to present the full process we went through when we decided to change our main product color palette to make it more accessible and usable. We will list the reasons that got us into this process, the defined goals, the preparations both on the front-end side and the user interface side, and the process itself. We hope both UI designers and FE developers can benefit from our journey of creating a new color palette in an already running and living product in the best possible way, without disrupting other processes in the organization.

Our main…

Standard Angular Two Way Data Binding is by using the [(ngModel)]=”model”.

In this article, I will show how we can create a custom component and using the “BANANA IN A BOX” syntax [()] for Two-Way Data Binding without using the ngModel.

For Example: <my-input [(value)]=”value”></my-input>

What is “BANANA IN A BOX” [🍌]

Banana in a box it just a template syntax for Two-Way Data Binding
and it combines the property binding and the event binding.

So instead of writing it explicitly:
<my-input [text]="val" (textChange)="val=$event"></my-input>

We can leverage the shortened syntax:
<my-input [(text)]="val"></my-input>

Why is it named “BANANA IN A BOX”?

The naming assists us in remembering the order of the brackets of the Two-Way Data…

TL;DR In this article I will show how we can create a toggle button with SCSS.

In this article I will show how we can implement the following Array methods
forEach, map, filter, find and reduce by extend the Array.prototype
just like polyfill


A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

This is naive implementation so we will not check validity of given parameters


The forEach() method executes a provided function once for each array element.

What is Prettier?

Prettier is an opinionated code formatter with support for many languages and integrates with most editors.
It removes all original styling and ensures that all outputted code conforms to a consistent style.

Why you want to use Prettier?

  • You press save and code is formatted
  • No need to discuss style in code review
  • Saves you time and energy
  • Consistent code style

Setup Prettier with Angular CLI & WebStorm

Github Example

Step 1: Install Prettier

First, we want Install the Prettier package to our project.

npm install --save-dev --save-exact prettier

Step 2: Add Configuration File

lets create a new file .prettierrc in the root of our project
Example Configuration

"singleQuote": true,
"semi": true
  • singleQuote: Use single quotes instead of double quotes

ofir fridman

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