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