Blogs

How do we structure a Design System? How do we make sure the architecture allows more people to contribute to it? What if there’s already a Design System in place, but it doesn’t work? During my time at Personio, I participated in the process of re-thinking the existing Design System. I noticed that dissecting the system into layers helped us answer some tricky questions. So, bear with me. How it all starts In my experience, design systems always come after the main Product. Let me explain. A newly founded company focuses on the Product and go-to-market first. Put yourself into the shoes of a founder. You want to launch as soon as possible. Therefore, to speed things up, you may buy a theme for your framework from one of the marketplaces, or you’ll get a ready-made UI kit like Material UI. You need to launch. ...

As we progressed with our mono-repository endeavour, we noticed some weird behaviour. It worked like charm in the apps. But not in our Storybook. Besides, sometimes tests would fail for no obvious reason. Storybook is a de-facto standard tool for developing and demonstrating your components in action in the real environment. We also used Jest for testing. So, naturally, we didn’t want to give them up. Seems like our setup is not finished yet. ...

Let’s talk about CSS files and modules. Unfortunately, they are often treated as if they were a second class entities. We need to fix this situation. Treating CSS dependencies the way we treat other dependencies Let’s talk about the dependencies between UI components. In JS files, we mark dependencies by import-ing or require-ing them. Packages clearly define dependencies in the package.json file. But a package is not only JS files, but also CSS files. ...

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. This setup can function for quite some time. However, it has a few important drawbacks: ...

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. Or an idea in a book that put our past experiences in a new perspective. And that moment, a new idea, a new connection is born between pieces of knowledge in our brains. This moment is beautiful and priceless because it is your*new idea, born in your brain, based on your knowledge and experience. ...

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”. The plan was to complete the project in 2 weeks. It didn’t happen (I’ll explain why a bit later). Now it’s September and there’s still no hot water in our building. Needless to say, nobody is happy about this situation, especially families. ...

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. Very often people become disappointed in the company they joined. Normally, it takes 4-6 months for people to realise how is everything organised. Then the motivation and the excitement of a new job deteriorate. I assume, we have all been there. It often happens that a company gets “sold” to a candidate as an “innovative and disruptive business”, but in reality the only “innovation” there is an idea that top management sells to investors. ...

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: ...