In simple procedural programming we used IFs to choose between code blocks operating on data structures.

That’s how a data structure could look:

And this could be a procedure operating on it:

Such a little piece of code was so straightforward that it was possible to understand it even without knowing JavaScript. That was a big plus!

However, experience showed that IFs like the one visible within the body of the makeBigger procedure were repeated multiple times in other areas of the codebase. For instance, in a procedure meant to draw a shape:

This is where object…


Most probably you’ve already heard about TodoMVC. Its purpose is to demonstrate how a to-do list may be implemented in various frameworks and languages.

In this post, we’ll identify verious states of this famous demo app. As it turns out, they are not only helpful to understand the requirements, but may also be used to actually implement the application!

Let’s start!

When there are no items, only the form is visible. But as soon as there’s at least one item, the list and the controls become visible. We can recognize different layouts and components. Here’s what it looks like:

There…


Conditions are hard to implement. Fortunately, nowadays we have multiple ways of telling the computer which piece of code should be used. Some of these techniques are more appealing than the others, because they reflect the way we think about a particular problem.

In this post, I’d like to talk a bit about my favorite ways of picking the proper piece of code. These are the techniques that turned out to be extremely helpful over the course of my career. I’ll focus on runtime polymorphism, that is the decisions made during the execution of a program, as opposed to the…


A function of state and action is a function that takes two arguments: state and action.

Functions like that are very common in the JavaScript ecosystem. For example, the reducer function used to build a Redux store is a function that takes the current state and some action and returns nothing but a new state. The render function from React can also be considered a function of state and an implicit RENDER action that returns a view and doesn't change the state. …


Open web feed standards such as RSS are declining in popularity in favor of centralised social media sites like Facebook, which are no longer just a source of entertainment, but also major content publishing platforms. I strongly believe that their centralised architecture and advertising-based business model are an increasing concern for independent creators and free speech in general.

Due to the fact that what generates profit for all popular social networks is manipulation of public opinion, from adverts to political campaigns, they are built to provide addictive rather than user-friendly experience, in the same way as tobacco products are not…


Photo by Ryoji Iwata on Unsplash

Back in the days when web development was all about server-side applications querying relational databases and outputting HTML, we saw many examples of code like this:

// CAUTION: Bad example!
function popup(msg: string): string {
return "<p class=\"popup\">" + msg + "</p>";
}

or like this:

// CAUTION: Bad example!
function getName(login: string): string {
return "SELECT name FROM users WHERE login = \"" + login + "\"";
}

Since then we learned that there are safer ways to do this.

Template engines and parameter binding are commonly used tools. It’s rare nowadays to see dangerous string concatenation.

In this…


Both ifs and switches are about picking one among few possible pieces of code.

In the case of an expression, the picked piece of code is evaluated and becomes the result of the expression. When it’s a statement, it’s expected to have some side effects, as the code is simply run.

Some languages, like Elm, are very strict. When there’s an if, there must be an else. When there’s a case (the Elm’s name for a switch expression), it must list all of the possible values. Other languages, like JavaScript, don’t require that.

There are also times when switch is…


Key-value pairs and a directed graph

State management is a hot topic in the JavaScript world.

Some libraries promote the use of immutable data structures, while other allow mutations.

Sometimes the whole state is stored in one place, other times it’s distributed among many objects.

Not every state container is about pulling things out of it. There are also Hollywood-like (push) solutions which actually call us.

We have various ways to transform events into state changes as well.

And what’s nice is that it’s not just a theoretical thing. It’s not uncommon to find at least few implementations of each combination of these characteristics!

This wide…


The Rosmaro mascot

To do automata-based programming is to program with states and transitions. States correspond to different behaviors. Transitions are named after events and describe how those behaviors change.

The easiest way to think about this is a directed graph. Here’s an example of a cursed prince:


Since I discovered functional programming, I knew I could build a To-Do app without writing my own variables. I did some tutorials and got a working app.

Since I discovered automata-based programming, I knew I could build a To-Do app without writing my own IFs or booleans. Well, theoretically. I hadn’t done it before.

I started to wonder if I could actually build a To-Do app not only without variables, but also without writing any code resembling the fragments visible below.

if (isDone)
isDone ? ... : ...
value || defaultValue
showIf="model.isDone"
selected === "all"

It turns out that with…

Łukasz Makuch

Find more posts at coder.earth

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