Render Monaco Editor as a single line text editor like a native HTML text input

Single line Monaco Editor

Here is a little trick to use the Extract utility type in Typescript to pull out members of a union type by the type of a property of theirs

Pick a member of a union type in Typescript

Using the browser window frame as the event bus

The browser as the event bus

Stream events from external sources into statecharts

useConstant or a singleton reference hook

usecases for `raise`ed events in XState

sending events to the same statechart in XState

Run Javascript promises sequentially

Defer events sent to an interpreter in XState

use mutable methods on a list data structure that is reactive by nature

An opinionated approach to managing lists in React

A utility to create React context with a custom hook on top

In this post, we'll see how the traditional definiton of application state is different than how we define state in the world of state machines and statecharts

State !== State

If you have a blog post layout for example, you usually want a few pixels of padding around your content. For convenience, we usually add this padding to the content container and keep all the content at the same distance from the edges of the page. This is super cool until you decide a few elements need to stretch to the edges. We'll see how we can achieve that using 2 different approaches

Force elements to stretch to full container width in a padded container

DOM event handlers work with a strange interface if you ask me. The fact that you need to keep the reference to the event handler to be able to clear it is not practical especially if you're trying to handle more than a single event handler.

A simpler approach to registering and clearing DOM event handlers

Javascript is missing a standard pattern matching feature. In this post, we'll see how using a plain object can simulate a pattern matching feature

Semi-Pattern matching using plain objects

Deferring in processing events in XState interpreter

Statecharts modeling makes feature growth linear

Simple Statechart

There are a few reasons why a statechart sending an event to itself a great idea.


Sending self events in statecharts is underrated

Many cases exist in which we'd want to perform part of a scenario in the server or client and resume it on the other side.
Games come to mind for example. Imagine a game that's been started in the server and now needs to be continued ont the client side.


Rehydrating scenatios between server and client using statecharts

Statecharts are a powerful tool for building complex, dynamic user interfaces.
But they can also be used to build more complicated query parameter combinations
In this article, we will explore how to use statecharts to parse query parameter
combinations, and how to use them to build a complex query parameter parser


Parse complicated query parameter combinations using Statecharts

Model DOM events with Statecharts

Model DOM event handlers using invoked callbacks

Model a draggable element with statecharts

Model a carousel with statecharts

An article on how some problems might look different but could be solved using the same or similar statecharts modeling

Different problems in disguise

Supercharge native fetch with timeout and cancelation

When Javascript arrays contain primitive values (strings, numbers, undefined, null, booleans and Symbols), there might be cases in which you're willing to detect if the array contains any duplicated elements. in other words, you would want to determine if elements in the array are unique

Detecting unique arrays in Javascript

React hooks help with carrying stateful logic and keeping their lifecycle separate from the view layer lifecycle. They've been around since React v16.8 and since people have been avoiding class components in favor of hooks

useBackButton hook to handle back button behavior in React Native

Not all the components you write for your React application can be divided into Stateful and Stateless (dumb) categories. There is a 3rd advanced type of component in React called a higher-order component. A higher-order component is a function that takes a component as an argument and returns another component. Check out my other article to see how higher-order components are used in the real world

Unit Testing Higher Order Components with Enzyme and Jest

The first way that could cross a developer’s mind is to deeply iterate through source object’s properties and copy them one by one on the target object. As it may seem good at the beginning, it is not a performance friendly solution and a potential bottleneck when it comes to large and deep objects

3 Ways to clone objects in Javascript

There are many cases iframe would be good solution to use. Although they are kind of dead to HTML and not a lot of developers use it, It could come up to you as a solution to a complicated problem some day