Development

How To Fix Spacing Between Text Blocks When Using Tailwind CSS

Did you ever encounter the problem that the space between a text block and some other element does not seem right? For example, although we've added the same `mt-4` to a text block and some images, the space between text and image looks much larger than the space between two images. So instead of `mt-4` we try `mt-3`, but it just doesn't work out. This is because the same margin can look visually different if it separates text from some other element or two none text elements because the line height of the text block adds additional spacing...

Read more

Using Testing Library jest-dom with Vitest

Vite brought super fast bundling and hot reloading to our regular dev workflow, and Vitest is doing the same for our testing workflow. So I'm mostly transitioning away from Jest in favor of Vitest. But there are a lot of amazing tools in the Jest ecosystem, and not of them can be easily replaced. Luckily, the Vitest API is mostly compatible with the Jest API...

Read more

Using Mock Service Worker with Vitest and fetch

The JavaScript ecosystem has a lot to offer when it comes to testing. With the recent addition of Vitest we get the performance and convenience features of Vite for testing too. Mock Service Worker is an excellent mocking solution for mocking network requests in the browser and Node.js...

Read more

Manual testing, E2E testing, unit testing – how to decide which testing strategy to use?

When we first start to dip our toes into the deep waters of automated software testing, all those different kinds of tests can feel intimidating. In this article, I give you a quick overview of the most crucial testing strategies. After reading this tutorial, you should have a much clearer picture of the strengths and weaknesses of the different kinds of testing methodologies...

Read more

Vue Project Directory Structure: Keep It Flat or Group by Domain

When starting a new project or refactoring an existing one, the question often arises: how to set up the project's directory structure. My first advice is to keep the folder hierarchy as flat as possible for as long as possible. But depending on the size of our project, there might be a time where we feel the need to add additional folders to organize our Vue components and other files...

Read more

Vue Composition API: VueUse Composable Library

The Composition API makes it very easy to share code between components in our codebase or even across projects via npm packages. I recently stumbled upon the excellent VueUse library that provides us with a ton of valuable composables. In this article, we take a closer look at some of the most interesting ones...

Read more