It happens in many projects that you start out with a rather simple table to give your client an overview of some entity, say users. When the project evolves, the number of columns changes and at some point, the client requires the table to be sortable, searchable and so on. My first pick for such a table is the neat Datatables plugin.

Image for post
Image for post
These are tables! (photo by Ibrahim Boran on Unsplash)

Datatables requires jQuery and has a very large set of options and capabilities so it may take a while to know how it works exactly. Fortunately, there is a lot of documentation and a helpful support forum.

In a recent project I had to use Datatables to sort a column with dates in the format dd-mm-yyyy (the default date format in the Netherlands). Additionally, the assets are compiled with Webpack and ES6 imports are used in this project. I made it work, but it took me quite some time to find out how to do it. …


Part 3 Component implementation

Since usability becomes more and more important these days, this blog series covers a product configurator for a fictive webshop from concept to implementation.

Our product is a configurable postcard. You can change the text, shape of the card and the paper size. During configuration, the price is updated in real time based on your choices.

In the first part we introduced the concept, sketched a simple design and thought about the component structure. The second part introduced the Vuex store for managing the state.

In this part, we’ll implement the frontend and connect it to the store. I’ll go through all the details step by step. The project is created using @vue/cli and the code is available on Github, release v0.2. …


Part 2: The Vuex store

In this post I’ll describe the setup of the Vuex store for the product configurator that was introduced in part 1. The product configurator is part of a fictive webshop where customers may configure and order personal postcards.

Since usability becomes more and more important these days, this blog series covers a product configurator from concept to implementation.

Image for post
Image for post
Photo by Héctor J. Rivas on Unsplash

Vuex

I’ll use Vuex (with modules) to handle state. Although a product configurator seems to be a relatively small part of a webshop, using Vuex will result in a better maintainable codebase when the app grows and becomes more complex!

Moreover, Vuex is rather opinionated about how you should implement certain features which always gives me a nice handhold when implementing this kind of features. …


Part 1: concept, sketch and component definition

In this blog series I’ll discuss the process of developing a functionality we see a lot these days: a configurator for a custom product. Things that come to mind are mugs with custom text or personalized t-shirts. I’ll build a product configurator for a fictive webshop that sells postcards. An example of a custom postcard is shown below:

Image for post
Image for post

In the configurator of our fictive webshop, a customer should be able to choose and configure the various options and features for the postcard. For example, the shape of the card, the paper quality and the amount.

To implement such a product configurator we’ll use Vue. In this series we won’t bother ourselves with validation or processing of the configured products, we’ll focus on the frontend only. …


Workbox is the workhorse for progressive web apps of today. With only a few lines of code we get precaching, runtime caching and offline mode. In this post I’ll show how to add Workbox to an existing PWA built with @vue/cli and the pwa plugin to obtain a perfect score of 100 in Google’s Lighthouse tool.

Image for post
Image for post

Our current project is using the @vue/cli pwa plugin and already has a service worker. As outlined in the previous post on push notifications, it is the service worker that enables us to send push notifications. However, no precaching, runtime caching or offline mode has been implemented yet. Although it is possible to write all the code for these functionalities in the service worker yourself, it is difficult, tedious and error prone. …


I have been very happy with Sublime Text (v3) for a long time. However, this week I dove into TypeScript for Vue and their docs mentioned the use of Visual Studio Code (or VSCode) as their (free) editor of choice, having syntax highlighting and so on. So I thought it was time to give this editor a try.

Image for post
Image for post
Lately, I ditched Sublime for VS Code

I am very impressed with the intuitive interface and how fast it is (lightweight). With only a handful of extensions and half an hour of intro videos I was ready for my next project!

In this post I’ll describe the setup for VS Code that improved my workflow coming from a Sublime background. Note that because I work a lot with Laravel (PHP) and Vue (JS), my setup and choice of extensions is generally biased in the direction of these languages and frameworks. …


April 8, 2020, Update

Please read the updated version of this post on our blog:

Consider the following situation.

In the morning you turn on your computer, login and spin up your vagrant virtual box. A message in your terminal reads ‘there is an update for the laravel/homestead box. Run vagrant box update to update your box’.

If you are like me and happy that everything is working great without the update, you probably leave this for a couple of days.

Today however, I had some time to take care of this update, and I wrote down the various steps for future reference. Below are the steps to update the vagrant box. Additional explanation on some of the points can be found at the bottom of this post. …


Image for post
Image for post
Photo by Sara Kurfess on Unsplash

Introduction

This is the second post on building progressive web apps (PWA) using the new Vue CLI 3. So far, as a first step towards push notifications, we created a PWA that sends a (normal) notification when a user clicks the button. If you haven’t read this part, it is available here.

In this post push notifications will be introduced. The terminology is a bit difficult because we’ll use notifications, messages and so on, and it’s easy to get lost. Let me try to elaborate a bit more by showing a diagram that visualizes how push notifications work.


Image for post
Image for post
Photo by Jamie Street on Unsplash

Introduction

About a year ago I realized that modern web applications tend to behave like native apps. These apps are called progressive web apps (PWA) and with notifications, offline functionality and the ability to install on the homescreen, they really drive user engagement. Moreover, this meant being able to write my code in familiar programming languages and serve it on all devices: clearly a win-win situation. So I dived into the subject and recently launched my very first PWA for internal use in our company.

In this post I’ll describe my setup to create a very simple PWA. An app is qualified as a (baseline) PWA as it at least meets the following…


Somehow, the draft version of my post got linked to :-(
The correct version (including support for Vue CLI 3) may be found here https://medium.com/plint-sites/deploying-a-vue-single-page-app-on-laravel-forge-c7cb0f12fd2

Image for post
Image for post
Image by Russ Hendricks

Our current workflow

Up until recently, our workflow for building a web application has been the following:

  1. Install a fresh new Laravel project
  2. Use the ‘built in’ approach for adding specific frontend behavior with Vue

This basically means that all routing is performed by Laravel and we apply our Javascript on the html generated by the blade views. You can read more about this setup in our post here. Although this is perfectly fine for Laravel applications needing only a little JS behaviour, this approach does not scale well. …

About

Pim Hooghiemstra

Love to build Laravel + Vue applications! Founder of PLint-sites. https://plint-sites.nl

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