Image for post
Image for post

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


Reactivity in Vue 3 introduces new ways to structure your app

Image for post
Image for post
Photo by the author.

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.

Do You Need a Shared State?

There are circumstances when data flow between multiple components becomes so hard that you need centralized state management. These circumstances include:

  • Multiple components using the same data.
  • Multiple roots with data access.
  • Deep nesting of components.

If none of the cases above are true, it’s easy to determine whether you need it or not. …


Image for post
Image for post
Byte-sized Vue 3

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.

Using the CLI

I highly recommend using the official CLI for Vue projects. …


Image for post
Image for post

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


Image for post
Image for post

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.

The application

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


Image for post
Image for post

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.

Requirements

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


Image for post
Image for post

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


Image for post
Image for post

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.

Spread 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’s more to it than meets the eye

Image for post
Image for post

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.

Basics

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.

The Second Argument

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


Image for post
Image for post

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

Gábor Soós

I’m a full-stack Javascript enthusiast, who loves to fiddle with new things and share them. Open for consulting/contracting.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store