front-end

It seems that these days, at times of React (and similar frameworks), CSS receives less attention. However, I remember a not-so-distant past, perhaps, five years ago, when using CSS for simple UI elements was the desired approach. True, it has its limitations. But I don’t think we can discard CSS completely and rely on JavaScript driving even the most trivial elements of UI. By applying (or at least trying to apply) the CSS-first approach, we can achieve some great results without necessarily relying on JavaScript....

In the ever-evolving landscape of web development, the choice of tools and technologies can have a profound impact on the flexibility, scalability, and longevity of a code base. One critical decision that developers often face is whether to use a framework or embrace more framework-agnostic solutions like Web Components when building a UI library. In this post, we’ll explore why opting for Web Components can offer unparalleled advantages when it comes to ensuring flexibility and avoiding lock-in....

Tailwind provides a solid base level, sort of a starting point for your application. The library is a set of utility CSS classes that use Custom CSS properties (a.k.a CSS variables). Some of these variables abstract away a default set of design tokens. As such, it is easy to create a dark theme (should a user prefer dark mode) or take some accessibility aspect into account (like reduced animations). I only described the tip of the iceberg....

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

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