Blog

Read articles about Web Development topics like JavaScript, CSS, TDD and Front-End Architecture. Now and then I write an article about Life in general. Motivation, Investing and Psychology are my favorite subjects besides Web Development.

Building Renderless Components to Handle CRUD Operations in Vue.js

In episode 81 of the Full Stack Radio podcast Adam Wathan and Evan You talked about the possibility of utilizing the power of slot scopes to build components which sole purpose is to fetch data and provide the result via slot scope properties to the markup. In todays article we're going to take this into practice and we even go a little further: we'll build “renderless components” to handle all CRUD operations in a reusable way...

Read more

Goodbye webpack: Building Vue.js Applications Without webpack

First of all, let me say this: webpack is great! Developing JavaScript applications would look quite different if it wasn't for webpack. Having said that, oftentimes it feels pretty foreign to me, having to set up a quite complicated build process to build a rather simple JavaScript app...

Read more

Building Custom Multi-Option Form Components with Vue.js

In my opinion, one of the greatest features of Vue.js, is the ability to build custom form components with ease. Thanks to `v-model` and the straight forward event system, we can build powerful new form components or enhance existing form fields and input types with superpowers...

Read more

Replicating the Twitter Tweet Box with Vue.js

Today we're going to take a look at how to replicate the Twitter Tweet Box (the text area you use to compose new tweets) using Vue.js. At first glance, the Tweet text field might look like a straightforward `<textarea>` element, but it is not. It's certainly much more complicated than that. In this article, we'll find out why the Twitter Tweet Box isn't a simple `<textarea>` element and how the developers of Twitter have solved this problem. Furthermore, we'll explore a more convenient way, of how we can recreate the same functionality in Vue.js...

Read more

Visual Regression Testing with Nightwatch.js and Cucumber.js

As most of my regular readers have probably already noticed, I'm a huge fan of testing all the things. In many of my recent articles, we've already explored multiple techniques for unit testing and acceptance testing. Unit testing ensures, that certain parts (or *units*) of our code do work correctly; with acceptance testing, we can ensure that what we've built does what it should do. Visual regression testing makes it possible, that we can test if our application actually looks the way it's supposed to look...

Read more

Building a Date Input Component with Vue.js

Today we're going to build a custom date input component powered by Vue.js. Although there is a native date input type available in all modern browsers, there are certain situations where the native date input field falls short. So let us take a look at how we can build a custom date input field with Vue.js...

Read more

Crazy Powerful Nightwatch.js Cucumber Step Definitions

Although testing, and especially acceptance testing, seems like a rather boring topic (at least to many developers) in the past few months I acquired an interest in optimizing the test setup and come up with better ways of writing tests. Especially when using Nightwatch.js in combination with Cucumber.js, there is another challenging aspect to it: writing step definitions...

Read more

Setting up a Vue.js Project with webpack 4 and Babel 7

For my previous article about three different ways of how to structure a Vue.js application, I wanted to set up a build system which not only allows for regular JavaScript code splitting, but also CSS code splitting. Thanks to webpack 4 and the mini-css-extract-plugin (which basically is the successor of the extract-text-webpack-plugin), CSS code splitting is finally possible...

Read more

Vue.js Application Structure and CSS Architecture

In recent days, I thought a lot about structuring large scale component based applications. Oftentimes, at the beginning of a project, everything seems to be easy. You build a couple of components, put them together and without too much effort you've implemented the first feature of your application in a reasonable amount of time...

Read more

Route Model Binding with Vue.js and Vuex

I'm currently in the process of refreshing my knowledge about Laravel. I do so by reading the official documentation. Although, I almost exclusively work on the front side of things with Vue.js nowadays, there is a lot to be learned by getting to know techniques outside of your comfort zone...

Read more