Sign in

Alexander Inkin
Passionate Angular dev, musician and OSS author 🌲 taiga-ui.dev ··· 🎹 jamigo.app

When I first heard about compliant mechanisms I was very impressed. Even though they surround us in our daily lives — we barely ever think about what they are conceptually.

These are things like backpack latches, mouse buttons, shampoo caps. In short, a compliant mechanism uses deformation to achieve its technical characteristics. In traditional engineering, flexibility is usually a disadvantage of the material. Compliant mechanisms on the contrary use it to transfer force and movement, instead of passing it through multiple moving parts as rigid body mechanisms do.


AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

When you’re building a reusable components library, API is very important. On one hand, you want a tidy, reliable solution, on the other — you need to take care of lots of specific use cases. And it’s not just about working with diverse data. Your components must be flexible visually. Besides, it has to be easy to update and deliver across projects.

These components must be customizable like no other. And it shouldn’t be hard to do…


When I first started using RxJS I was rather scared to write new Observable. Probably most developers start by combining and manipulating streams and underlying mechanisms of creating new Observables might be obscure to them. Let’s try to dive into Observable constructor to create our own frames-per-second meter!

Breaking down the task

To get our FPS meter we need to go through several steps:

  1. Turn native requestAnimationFrame function to Observable
  2. Get duration of each frame
  3. Average out the value over some period of time

RxJS has several way to get intervals emitted based on requestAnimationFrame but we want to write our own because we…


Developing OnPush components that operate with content children might be tricky. Let’s consider the following example. We have a tabs component and we want to give user full control of those tabs. So we make a wrapping component and allow defining tabs in its content. We also want to be able to arrange them differently. Maybe we have a separator template, or we hide extra tabs into «More» dropdown.


When you load data you never know how long it would take. It’s annoying for the user to see spinner for just a fraction of a second when data loads very fast. Let’s try to create a pattern that we would call “non-flicker loader”. Here are the requirements:

  1. If loading took less than 1 second — we will not show loader at all
  2. If loading took more than a second — we start showing loader and keep it on the screen for at least 1 second

For example our data took 1.2 seconds to load. For the second we do…


You might have noticed that when you click a button and it receives focus — it doesn’t show you the outline. It appears for buttons and some other elements only on keyboard focus. It is also not uncommon to see outline: none in styles to remove native outline since you cannot change its appearance. But how would keyboard users know where the focus is at?

:focus-visible is finally getting support by all major browsers which is the solution to the issue above!

Generally speaking, it might be important to know what initiated the focus. That’s why Angular CDK has a…


There’s a common UI pattern among mobile apps — to shrink header as you scroll down. It sticks to the top of the screen but proportionally scales to allow for more screen estate. Let’s make an RxJS stream inside a directive so we can reuse it!

Understanding the task

First, we need to make our header sticky with top: 0. Once we do it, it would always remain on top of the screen fully visible. To do our task we need to emit a number from 0 to 1. …


This time we have a toast notification. It’s a widespread pattern to show some complementary information in a small alert that disappears after some time. We are going to improve the UX by making them stick while user hovers over the message with a cursor. Let’s go!

Making a stream in 3 steps

You can try to solve this puzzle yourself using this StackBlitz boilerplate first.

1 Since we need to close a notification in a given time, it’s natural to start with timer function. Without a second argument it would just emit once after set delay and complete.

2 We need to break this timer…


This challenge is based on my Angular karaoke app Jamigo. When a player sings a song two lines of the lyrics are shown simultaneously: the current and the upcoming one. Let’s see how we can do it and explore a higher order Observable operator. But before we start, check it out in action by clicking Sing🎤 on the link below!

Making the stream

Our data model is rather basic. It’s an array of objects each containing a string and duration (number in milliseconds). We will use concatMap to spread it into a timed stream:

Note that we broke the line into words…


In JavaScript we often use entities, such as window, navigator, requestAnimationFrame or location. Some of these objects have been there forever, some are parts of the ever-growing Web APIs feature set. You might have seen Location class or DOCUMENT token used in Angular. Let's discuss why they exist and what we can learn from them to make our apps cleaner and more flexible.

DOCUMENT

DOCUMENT is a built-in Angular token. Here's how you can use it. Instead of this:

You can write this:

In the first code snippet we accessed global variable directly. In the second example we injected…

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