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.
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!
To get our FPS meter we need to go through several steps:
RxJS has several way to get intervals emitted based on
requestAnimationFrame but we want to write our own because we…
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:
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!
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!
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!
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!
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…
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 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…