Image for post
Image for post
Photo by Jessica Ruscello on Unsplash

Creating a collection library for continuations

Last week I published an article on continuations in TypeScript. In that article, I mentioned that continuations (unlike promises) act like collections of values that start existing over time. In this article I want to explore this further and see how much your traditional array has in common with continuations.

The big limiting factor when implementing a collection library for continuations is that we don’t know the values the continuation is going to output or even how many. As a result of this not all of the methods that are widely accepted to be standard collection operators can be implemented for continuations. …


Abstracting common patterns in TypeScript

Image for post
Image for post
Photo by Bruno Figueiredo on Unsplash

A major challenge while developing an user interface is dealing with the events that are triggered by user interaction. Not only are there often many possible events that can occur at any given time, the order in which events get triggered is also variable (or they can happen simultaneously). Outside of those events JavaScript applications has to deal with other asynchronous code like handling API calls.

During the decades in which JavaScript evolved to where we are today there have been a multitude of ways to write async code. From the event listeners in html, the callback-hell of JQuery and the onChange property of your React components, to just name a few most people will recognize. …


Five rules for designing great states

Image for post
Image for post
Photo by Daniel McCullough on Unsplash

Type-driven-development is a programming style where you first define types and extract functions from those types. This style is closely connected to functional programming as they share the concept of functions being transformation from data of type A to data of type B and objects just storing data and not logic.

When working with modern libraries like React and Vue we have a state (of a certain type) that gets transformed into a DOM and receives updates when the user interacts with the generated DOM. Here the type of the application’s state is absolutely central to the inner workings of the application. …


Sorted and heap-based priority queues explained

Image for post
Image for post
Photo by Hal Gatewood on Unsplash

Queues and stacks are used in programming to process a collection of items in a certain order. Those data structures work either with a first-in-first-out or last-in-first-out system in which the order of processing is always directly coupled to the order of insertion. However, sometimes you need to have more control over the processing order then offered by the insertion order. The priority of items in the queue can depend on several external factors and some of the items will then have to (partially) skip the queue.

This concept is abstracted into a data structure called the priority queue. A priority queue differs from regular queues that items get inserted with a priority that determines when they will be returned by pop. The interface of a priority queue is very similar to that of a normal queue, only the insert method has gotten a second argument: the priority. The priority is expressed with a number. The convention is that a lower number means a higher priority and the connected item will be processed earlier then an item with a higher number. …


Fuzzy string comparison demystified

Image for post
Image for post
Photo by Jason Dent on Unsplash

Fuzzy string matching is something that has many applications in programming but is not that trivial to implement. There are a lot of different ways two strings can be different while still looking similar to the human eye. One (programmable) way to determine the ‘sameness’ of two strings is to count the amount of single character modifications you need to make to a string to get the to the other string. This is called the Levenshtein distance between two string.

To calculate the Levenshtein distance we determine the minimum amount of edits we need to perform on one string to get to the other string. The allowed modifications are replacing, adding or removing a single character in the string. With this number we can say something about how similar two strings are if we keep the length of the strings in mind. Three edit operations on a string with a length of three is of course a different story then three operations for a string with a length of thirty characters. …


Deal with Lists without dealing with indexes

Image for post
Image for post
Photo by Brandon Mowinkel on Unsplash

Lists are data structures that save a sequence of items in order. Because of this we can work with indexes and modify them to get items with an offset to some index. This is great, but it can lead to code that modifies a lot of integers just to get and set items in the list on a certain position. In this article we look to positional lists, a kind of list that abstracts the concept of indexes and allows us to reason with just the concept of previous and next items.

Positional lists are lists that store items in a Position container. Based on this container you can retrieve the previous and next item(s) from the list without dealing with indexes (however indexes still are an option to get a position). This can help to create more elegant code because we abstract the concept of ‘the next item is at index + 1’ into the data structure. So no more variables like currentIndex and indexLastProcessedItem. It also allows us to easier work with circular data structures because the outside world isn’t anymore making assumptions about indexes. …


Exploring the extended functor family part II

Image for post
Image for post

This is the second installment into the series on lesser-known abstractions in functional programming with TypeScript. The first part can be found here. In this article I will amuse you understand the concept of covariant and contravariant functors, so consider reading the first part before this one if those terms don’t ring a bell.

This time we will look at functors that show up when using type algebra to combine types. Type algebra is an important and common concept in functional programming, as are the functors that exists as a result of it. …


Exploring the extended functor family part I

Image for post
Image for post

Almost every programmer these days has at least heard of functors and monads. Understanding them is often seen as a sign of mastering functional programming. And while they are among the most powerful and versatile abstractions in functional programming, there are many more similar abstractions then just those two. In this series of articles we will tour a variety of lesser-known abstractions and see how they can deal with problems your regular functors and monads just can’t.

Those aren’t the abstractions that get coded in as much as functors and monads, but knowing and understanding them will help you reason about problems in a functional way. Training your brain to think in abstractions that are based on formal logic will make you a better (functional) programmer. If you recognize that your problem looks like one of the abstractions we are about to discuss then you also immediately know which options you have for solving it. …


Image for post
Image for post
Photo by Chris Liverani on Unsplash

List comprehension is a method from mathematics to describe a collection of values in a very compact and elegant way. This notation has been implemented by a lot of languages where it primarily is used to construct and populate a list in a single expression instead of population an empty list with a multitude of loops and if-statements. Because of its connections to mathematics and expression based nature list comprehension works incredibly well within functional programming.

An example of list comprehension in Haskell

It does then not come as a surprise than languages like Haskell and F# come with a rich and complete implementation of this technique, but also languages that are popular by data scientists like Python and R offer list comprehension as a language feature. This because it works really nice when programming mathematical formulas that for example are based on matrices or sets. …


Image for post
Image for post
Photo by Elton Yung on Unsplash

Routing is a fundamental part of every single-page-application. Within the React ecosystem react-router is the most popular package to implement client-side routing. With this library routing is simply done in a elegant and declarative way. But behind the scene there are a lot of advanced concepts going on to make it all work. In this article I will explore some of those and give an example implementation of a routing library for React.

I do have a little confession to make before we start: while the title says ‘from scratch’ I will be referencing two packages from NPM today because rewriting them will be at least an article on its own. But I still think this one fits in with ‘A Web Server From Scratch in TypeScript and Node’ and ‘A Workerpool From Scratch in TypeScript and Node’ (and I will actually only be using one). …

About

Wim Jongeneel

Software Engineer at Hoppinger (Rotterdam, The Netherlands) • Student MSc Software Engineering • Functional programming enthusiast

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