You have nearly finished your project, and only one feature is left. You implement the last one, but bugs appear in different parts of the system. You fix them, but another one pops up. You start playing a whack-a-mole game, and after multiple turns, you feel messed up. But there is a solution, a life-saver that can make the project shine again: write tests for the future and already existing features. This guarantees that working features stay bug-free.
In this tutorial, I’ll show you how to write unit, integration and end-to-end tests for Svelte applications.
For more test examples, you can take a look at my Svelte TodoMVC implementation. …
Vuex is an awesome state management library. It’s simple and integrates well with Vue. Why would anyone leave Vuex? The reason could be that the upcoming Vue 3 release exposes the underlying reactivity system and introduces new ways of structuring your application. The new reactivity system is so powerful that it can be used for centralized state management.
There are circumstances when data flow between multiple components becomes so hard that you need centralized state management. These circumstances include:
If none of the cases above are true, it’s easy to determine whether you need it or not. …
The release of Vue 3 is just around the corner. We can expect a faster, smaller, more maintainable version with a lot of new exciting features. Mostly these are additions and improvements over the existing API.
Nothing is stopping you from starting your new applications with Vue 3. In this article, I’ll show you how to get ahead of the curve and start experimenting with the new API by upgrading your application. If you are interested in an upgraded application, take a look at my TodoMVC application written with the Composition API or the playground that includes every new feature.
I highly recommend using the official CLI for Vue projects. …
You have nearly finished your project, and only one feature is left. You implement the last one, but bugs appear in different parts of the system. You fix them, but another one pops up. You start playing a whack-a-mole game, and after multiple turns, you feel messed up. But there is a solution, a life-saver that can make the project shine again: write tests for the future and already existing features. This guarantees that working features stay bug-free.
In this tutorial, I’ll show you how to write unit, integration and end-to-end tests for React applications.
For more test examples, you can take a look at my React TodoMVC or React Hooks TodoMVC implementation. …
Docker is a great tool that helps developers build, deploy, and run applications more efficiently in a standardized way. We can develop in the same environment as the app running in production. You can speed up the debugging or even the prevention of upcoming bugs by having the same setup locally. In the previous post, I’ve written about a simplified way to use Docker for frontend development, and now I’ll show the same for Node.js projects.
As an example, I’ve put together a basic application and tried to keep it as simple as it can be. If you like experimenting on your own, you can clone the repository and start making modifications and see how it does. …
Docker is a great tool that helps developers build, deploy, and run applications more efficiently in a standardized way. For frontend applications, we only need the Docker image for local development, because we deploy it to a static hosting provider. In this case, can we live without a custom Docker image? Can we have the same development experience that we had without Docker? Yes, it is easier than you think.
Assume an application where we only have to press start, and everything is running. This setup can be any application generated by the React, Vue, Angular CLI. …
You have nearly finished your project, and only one feature is left. You implement the last one, but bugs appear in different parts of the system. You fix them, but another one pops up. You start playing a whack-a-mole game, and after multiple turns, you feel messed up. But there is a solution, a life-saver that can make the project shine again: write tests for the future and already existing features. This guarantees that working features stay bug-free.
In this tutorial, I’ll show you how to write unit, integration, and end-to-end tests for Vue applications.
For more test examples, you can take a look at my Vue TodoApp implementation. …
Once upon a time, there was a significant upgrade to the Javascript language called ES6/ES2015. It introduced many different new features. One of them was the three consecutive dots that we can write in front of any compatible container (objects, arrays, strings, sets, maps). These tiny little dots enable us to write more elegant and concise code. I’ll explain how the three dots work and show the most common use-cases.
The three consecutive dots have two meanings: the spread operator and the rest operator.
The spread operator allows an iterable to spread or expand individually inside a receiver. The iterable and the receiver can be anything that can be looped over like arrays, objects, sets, maps. …
There are many functions in JavaScript that do their job. We use them daily, but we don’t know about their extra features. One day, we look at the documentation and realize it has many more features then we have imagined.
The same thing has happened with JSON.stringify
and me. In this short tutorial, I'll show you what I've learned.
The JSON.stringify
method takes a variable and transforms it into its JSON representation.
The problem comes when there’s an element that can’t serialize to JSON.
JSON.stringify
has a second argument — which is called the replacer argument.
You can pass an array of strings that act as a whitelist for properties of the object to be included. …
The very first alpha version of Vue 3 is released! There are a lot of exciting features coming with version 3: Vue exposes its reactivity system behind the new Composition API. If you haven’t heard about it, I recommend reading the RFC describing it. At first, I was a bit skeptical, but looking at React’s Hooks API, which is a bit similar, I decided to give it a shot.
In this article, we will be building a movie search application using the Composition API. We won’t be using object-based components. …
About