In this short article, I will guide you through the decision process for how to decide whether to use type or interface when using TypeScript. For this purpose I have created a table, which clearly shows what the main differences between type and interface are. The table will help you better understand the conclusion on…
In this tutorial, we will create custom reusable Tabs component using best practices and no external libraries. In the end, we should be able to implement our Tabs component in the following way: Create the Context Create a fresh React app: We will use the Context API, in order to avoid prop drilling and make…
Tooltips are an essential part of modern interfaces and most of the popular UI frameworks have such components. However, as is often the case, you might want to create a custom tooltip that is more suitable for your specific needs. I recently came across the react-tooltip library, which I didn’t like at all. It used…
The confirm dialogs are used in almost every application. When working on internal apps, the developers tend to get lazy and use the browser’s ugly built-in confirm dialog. The fact that you’re reading this article suggests that you’re looking to replace it with something more sophisticated. Let’s create a custom confirm dialog, using React Hooks,…
Bootstrap has been around for 10 years and dominates the CSS framework world. However, recently, a new player appeared on the stage – Tailwind.css. It quickly gained popularity and more and more developers ask themselves which framework to use. I’ve never been a fan of flame wars and believe that every tool has its specific…
In this tutorial, we’re going to create a simple and easily customizable Stepper component. For the purpose of showing the Stepper component in action, I will also use the Stepper progress bar from my previous tutorial and wrap it into a Styled component. Let’s create a fresh React application Manage state with useReducer I will…
In this short blog post, I will show you how to create a custom step progress bar with CSS, which can be easily integrated into every application. Let’s first start with the easy part – the HTML. As you see, the stepper-item element has 2 additional classes – active and completed. In our application, you…
It has been more than 4 years since I started using profesionally React. When I look back, I wish I had approached the learning process differently. In this blog post, I will share my experience and advices for everyone just starting his journey into this great library. 1. Make sure you know well JavaScript and…
In this tutorial, I will show you how to create simple dynamically editable fields in your Vue application. For the purpose of this tutorial I’m going to use Vue 2 but the same principles apply to Vue 3 as well. For the sake of simplicity I will first share the code and then add someexplanations…
Micro Frontend is one of the most notable trends in the Frontend world in the last year. The idea is still relatively new but it’s getting traction and has the potential to become a real game-changer. This architecture is being adopted by an increasing number of companies, including Netflix and Soundcloud. In this blog post,…