Most used functional programming design pattern

The problem

Given a comma separated values string, aka “.csv”, with numbers in decimal system — base 10. Get a parsed array of integers.

Sounds like a good Interview question!

const input = '1, 2, 3, 4, 5'

const output = [1, 2, 3, 4, 5]

A common solution

  1. Split csv input string, into an array of strings.
  2. Parse each string from the array.
  3. Return an array with the parsed numbers.

Interview score: not bad…

This is one of the most used…


An accurate next-page navigation prediction using alz-predictor.

predictive prefetching magic crystal ball
predictive prefetching magic crystal ball

It’s 2021, isn’t time to power front-end with AI?
Well, in this article we’re gonna predict next-page user most probably want to visit, and prefetch the data by calling its API. This way next user visit will load instantly, which is a great improvement to the overall UX.

While this might sound complicated, actually ALZ Predictor makes it simple to train and predict events in pure JavaScript, without any machine learning or AI previous knowledge!

What is ALZ predictor?

alz-predictor takes a sequence of events — modeled as character symbols, one at a time, and gives prediction probability for each event.

Unlike Guess.js, alz-predictor…


Capture, transform and place in the correct place.

First let’s capture user’s click to move a square on a non-rotated container. For this we’ll build a very basic vanilla JavaScript app which consists of two parts:

  1. Rendering the elements, red rectangle and a small blue square.
  2. Using event listener to capture user click and move the square.

Now let’s rotate the red rectangle/container and see what happens!

Note: we’re setting the transformation origin to left, top to make further calculation simpler, and we’re moving/translating Y to move the container to the original position (#1).

We expected it to work out of the box right? …


A new way for bi-directional communication between react components.

Given two react components Parent and Child, we want to find a way to communicate from the child to the parent and vice-versa.

Child to parent

This is pretty forward, we could simply pass an event handler/function from the parent to the child and let the child trigger it when needed:

Parent to child

Unlike the previous case, this one is a little bit cumbersome, to trigger child event from…

Mudafar E.

Frontend AI evangelist

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