Photo by engin akyurt on Unsplash


Yes, you! I’ve got something to tell you!

How do I know? Well if you’re reading this article then one of your coworkers must’ve sent you here!

And guess what! Your coworker is right!

Don’t try to argue! I don’t trust your opinion anyway! How could I ever trust a developer whose commit messages suck?!

And don’t even think about complaining to your boss about intellectual harassment! Your coworker only wants to help you become better!

But before you can be helped, you must admit you have a problem!

So repeat after me:

My commit messages suck

Ok, good.

Photo by Debby Hudson on Unsplash

Recently, TypeScript 4.1 was released, and with it template literal types.

Template literal types give developers the opportunity not only to declare that a certain variable should be of type string, but it further allows developer to declare format of the string as well.

If you’re asking yourself the above question, you’re in luck! This article is meant to showcase one such example! Behold; Type Safe Date Strings!

So let’s go ahead and take a look at a possible implementation of how this can be done.

Let’s assume first that our application has two base date strings, DateYMString and DateYMDString…

Photo by Antoine Dautry on Unsplash

switch(true) is pretty much the Psyduck of Javascript; the first time you encounter it in the wild, it immediately confuses you; and it’s super effective!

But why!?

is probably what you thought when you figured out what it was doing, opting instead to use if-else clauses. I agree that it’s probably a usually better idea, but I’d like to introduce one case that definitely fits better with switch(true):

So this technique can be used to update the state according to action type patterns rather than matching the action type string to set values!

But why!?

is probably what you’re thinking…

Photo by Jase Bloor on Unsplash

Earlier this year, I moved from Norway to work as a web developer in the land of the rising sun 🇯🇵 . Having lived here for a few years a a student, I was already familiar with the country, but working as a web developer in a Japanese-speaking environment posed quite a few new challenges. Some concerning workplace manners, some concerning different approaches to web development best-practices, but most concerning using Japanese as a working language (web development can get quite tricky even in my native language!).

Having struggled through most of my first year, I figured I’d share common…

Photo by bruce mars on Unsplash

While RxJs is an excellent tool for solving asynchronous events, it is easy to overlook the powers of its operators and write, quite frankly, vulgar code. The prime example that many developers new to RxJs tend to do is to simply create a pipe consisting of a single map operator with it’s “mapping function” being dozens or hundreds of lines of code. That is NOT the RxJs way of solving problems and should be strongly discouraged.

But instead of telling developers what not to do, it’s better to demonstrate the power of RxJs and its flexibility for manipulating data using…

Photo by Blake Weyland on Unsplash

Understanding which flavor of Observable to use can sometimes be a bit tricky when getting used to RxJs. Today we’re going to focus purely on UI components and which flavor you should use for what kind of behavior.

Note that while there are other flavors of Observables available, such as RelaySubject, AsyncSubject and ReplaySubject, I’ve found that Observable, Subject and BehaviorSubject make up close to all observable streams used in UI components, so I’m going to focus on these three.

Let’s start with a short introduction of each type. Since we’re here looking at the practical usage we’re not going…

Photo by Nik Shuliahin on Unsplash

After learning the basics of RxJs you’re gonna run into the concept of switching streams and using emissions from inner observables sooner or later. In general there are four operators used for substituting in the emissions of an inner observable in the outer pipe.

  1. flatMap/mergeMap (same operator under two names)
  2. switchMap
  3. concatMap
  4. exhaustMap

How these actually behave can be a bit tricky to explain only using words, so we’re going to supplement with a visual representation made on StackBlitz. Here’s the final project, with an explanation following below:

I’ve used the following set-up to demonstrate the differences:

  • this.numberTicker$ is…

Photo by Linda Perez Johannessen on Unsplash

So you’ve created a bunch of observable streams that have a limited lifespan, and you want to output for how long they were active until they completed. This can be useful both for testing and demonstrating pipe functionality. Of course, you can edit your pipes with taps that store the time in external variables etc., but we want to solve this elegantly with clever RxJs plumbing. So how do we do this?

Today, I’m going to show you a custom operator that can be used for exactly this purpose. When using it we create a new stream that pipes a…

Photo by Alexandre Debiève on Unsplash

Operators are the bread and butter of RxJs. Take an observable, pipe it through a handful of operators, and suddenly you have written a precise and exact reactive procedure. After all, reactive programming is all about writing reactions to events.

Although it’s possible to learn operators by going through each one of them and reading the documentation, I’ve found that with developers fresh to RxJs the first step really should be to have a clearer idea of what an operator can and can’t be. …

Lars Holdaas

Web developer working in Tokyo. Passionate about clever RxJs usage and finding creative pipes to solve problems elegantly. Currently developing

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