Welcome to the first instalment of the series dedicated to the re-architecture of a UI library. I helped my company to transition from the monolithic setup to a mono-repository by leading this project. This is all very familiar It seems like this is a common topic these days: Deprecate monoliths and move toward micro-frontend/micro-service architecture. However, many UI libraries start as a monolith. Meaning, there’s a single distribution for the whole library....

TL;DR: keep track of your thoughts and ideas. In our lives, we consume tons of information, have heaps of various experiences and, generally, learn a lot. We read books, watch videos, attend lectures, listen to podcasts, etc. In other words, we consume the ideas and thoughts of other people. Mine vs others' However, sometimes, we make our own discoveries. It could happen during a conversation with your colleague about a book we’re reading....

One morning, taking a cold shower (against my will) a thought crossed my mind. I realised how complaining about the absence of hot water due to my landlord’s decisions is similar to what I have been hearing from software engineers. (Yes, ideas come during taking shower) It all started in July 2021. I received an email from my landlord saying something along the lines of “I decided to replace the hearing system so that we all benefit from less emission and less costs”....

There’s a class of problems that deal with subsets, permutations and so on. Let’s find a way to generate a power set of a set with distinct elements. This is a problem #78 on LeetCode. What is backtracking? According to Wikipedia, backtracking is a general algorithm (or an idea) of searching all the solutions by reducing the search space. It’s really close to brute force, try all the options. But at some point we need to take a step back (backtrack) if we cannot proceed....

Sometimes, we need to create a component that serves multiple use-cases. As such, depending on some key attribute, the set of all others might differ. One example is a date picker component. Let’s see how we can implement it. Imagine our date picker should allow a consumer to select a single date of a range of dates. Let’s try to visualise such use-cases: <DatePicker onChange={handleOnChange} theDate={someDate} /> <DatePicker mode="range" onStartDateChange={handleStartDateChange} onEndDateChange={handleEndDateChange} startDate={someStartDate} endDate={someEndDate} /> We can describe such behaviour in types like this:...

An interview is a bidirectional process, ideally. However, most of the time, companies spend as much time as they consider necessary questioning candidates while giving a few-minutes-long opportunity for a candidate to find out more about the company or the culture or a team the candidate might be working with. I believe this is unfair. This approach may also introduce problems in the future after the candidate has become an employee....

There are countless articles that aim to describe what monads are. Sure, I can’t resist writing another one of my own. Stepping into contexts In order to understand what monad is, however, we should start with a Functor. The classical analogy for a functor is a box. The value sits inside that box. The only way to interact with that value is to use map function. Here is the signature for map:...

Often we need to perform certain actions as a feedback to the input from the keyboard. For example, when we need to navigate within a list up and down or perform an action when the meta key (alt or shift) is pressed. Binding messages to keys The most natural and convenient way to specify which action must be performed when a key is pressed is to use a dictionary. We going to use a list of tuples of key codes plus messages....

In this note, I would like to present my implementation of the function that performs function composition. We’re going to use spread operator and fat-arrow functions. First of all, it is not about writing shorter code or hacking around so that nobody understands it afterwards. If you are not familiar with this new syntax, you might find these two articles useful: fat-arrow functions and spread syntax. I’ll start with the initial, “old-school” implementation of comp function:...

There are lots of implementations of it: jQuery based, vanilla-js based, heavy and lightweight. Some even claim that their solution is the only one you might ever need. However, there will always be a situation when the existing solution simply doesn’t work. Here, at AutoScout24 we just had such situation and we decided to implement our own Carousel. We called it showcar-carousel. Please, do not hesitate to check the code out on GitHub repo for showcar-carousel....