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.
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. …
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 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. …
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.
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. …
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:
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.
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.
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. …
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. …
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.
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
Up until recently, our workflow for building a web application has been the following: