Pim Hooghiemstra

Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel!

About Pim Hooghiemstra

Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel!

Laravel-mix and the spread operator

Posted in Quick tips on November 17, 2017

Out of the box, the excellent Laravel-mix package does not support the use of the ES6 object spread operator. Here is a quick tip which enables it in your project. Very usefull in combination with Vuex/ Redux implementations in which you often want to quickly clone an object.

Read more

Our Vue starter pack

Posted in Javascript on October 26, 2017

With vue-cli you can scaffold a new Vue app quickly. There are various templates out there you can use. Just typing vue init template-name, installing and running is all it takes. However, we tweaked the standard webpack template a little to incorporate Vuex and to have two pages using VueRouter. Just a simple starter for our own projects.

Read more

Spicing up a Laravel webapp with Vue

Posted in Javascript on October 20, 2017

Improving an old codebase by adding Vue to it. Yeah! Although only partly visible in the frontend of the webapp, we completely changed our client side code. We ditched jQuery and used Vue in our administration app.

Read more

Testing Vue components in an isolated way using Storybook

Posted in Javascript on October 12, 2017

Testing your components in Vue is a good idea. You can use unit tests or end-to-end tests. However, testing the look and feel of your components is also possible by simply watching how they render in the page for a specific state of the UI. In this post I’ll discuss two approaches for isolated testing of your Vue components inside a Laravel project.

Read more

Did js-beautify break the internet?

Posted in Javascript on September 19, 2017

Monday september 18th, the Vue world is in shock: the vue-cli doesn’t work anymore. A new release of the js-beautify package breaks the npm install command. An issue on Github quickly gets a lot of comments. People are yelling that they can not work and can not ship app X to customer Y. A breakdown of what went wrong.

Read more

Why and when do you apply Vuex in your project?

Posted in Javascript on September 18, 2017

In this post we will look into the why and when of applying Vuex to a Vue project. Not a detailed, code-heavy tutorial, we rather focus on a simple example in which it becomes apparent that Vuex is a solution to keep the codebase tidy and maintainable.

Read more

Coupling Redux to React

Posted in Javascript on November 28, 2016

In the first part of this introduction to Redux we talked about specific Redux things like actions, reducers and the store. So far we just applied these abstract things to our Silly App you probably know by now. However, nothing has been said about coupling Redux to React which is in fact the fun part since this will make the application do something.

Read more

Introduction to Redux without todo example

Posted in Javascript on November 22, 2016

When building apps with React managing the state can be hard, especially when the app grows and becomes more complex. Redux was built to make it easy to split the state of your React application from the views. With Redux your React components become even more reusable as they don’t need to be aware of the state no more. The one way flow in Redux as we will discuss in this post makes reasoning about the app also much easier. Combining React with Redux makes way for well designed and structured apps that can easily scale. Let’s go!

Read more

A React app inside a Laravel project

Posted in Javascript on August 30, 2016

Suppose you have a Laravel 5 installation that needs some heavy user driven JS on a specific page. The current JS solution does not yet use a JS framework but for this new piece it is definitely needed. Furthermore, assume we choose React to build this new piece of code. How to incorporate this stand alone React app in the Laravel project? We investigated this issue and today we describe our setup.

Read more

React router and the lifecycle methods

Posted in on August 15, 2016

In my previous post React Router was introduced to handle URL changes on the client side. We created a Silly app to show how it worked. In today’s post we extend the Silly app with some very useful functions 😉

Firstly we like to use the URL to update the styling of the Clickable component we constructed earlier. Secondly we want to display the number of clicks on the button. The first is quite easy as it is described in the React Router docs, for the latter we have to use React’s lifecycle methods.

Read more