I’d like to share with you a low-effort technique to get the perfect white space every single time.

Let’s start from the very beginning.

This is the workspace where we are going to build components.

Image for post
Image for post

And this is our first component. It’s a button.


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 oriented programming came to the rescue. It provided a dispatch mechanism that associated procedures with data structures. …


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:

Image for post
Image for post

There are two…


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 compile time polymorphism, that is the decisions made by the compiler or any other tool before the program is run. …


Image for post
Image for post

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 user-friendly diet supplements. They successfully created an illusion of freedom to follow whoever you want, while the reality is that their feeds are carefully curated and users’ subscriptions are nothing for them but loose hints upon how to achieve their marketing goals. Some users may not be aware that their friends’ personal data, including names and pictures, is used to generate personalised adverts which are hard to distinguish from content that actually comes from them. …


Image for post
Image for post
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 post I’d like to share my observation on injection attacks. It seems they are still a problem in JavaScript!


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 faster than if. …


Image for post
Image for post
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 choice of state management techniques gives us the possibility to pick the one we feel comfortable with. If there’s a tool which helps us turn business requirements into working software without too much struggle, it’s a good tool. It doesn’t necessary need to be the exact same thing other people use. …


Image for post
Image for post
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:

About

Łukasz Makuch

Find more posts at lukaszmakuch.pl

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