Using Vue without a build step

Background I would like to share my experience using Vue 2 without a build step in my project and factors using this approach. I started experimenting with Vue.js (Vue 2) back in 2020. One of the nice feature of Vue is the ability to use the framework directly into HTML page without a build tool (compilation). This particular feature is the deciding factor why I selected this framework in migrating a jQuery based web application....

October 25, 2023 · John Pili

Start a React project without using CRA

Let’s start a React project without using create-react-app (CRA). CRA is a good project starter but for those who wants a complete control over the building process, we will have to use bundler tools like webpack or yarn. Prerequisites React.js knowledge Installed and configures NodeJS Installed node package manager (npm) Steps Using the command-line, let us follow the following steps: Create directories and files mkdir webapp cd webapp Let us continue with our src folder and placeholder files...

May 30, 2023 · John Pili
Bus Seat Reservation UI Concept

Bus Seat Reservation User Interface Concept using Vue.js

In response to this facebook post. I created a simple bus seat reservation user interface using Vue.js and SVG. I started by preparing an SVG image of the bus seat and then render the SVG elements using Javascript (VueJS). You can use a raster image (sprite) for this but I prefer to use vector graphics (SVG) because it allows me to control the stroke and background color programmatically. The bus seat vector image looks like this...

May 27, 2020 · John Pili

HTML drop-down placeholder

Do you ever wanted to have an HTML drop-down with default selected value (placeholder) that the user cannot re-select once they selected any valid value options? It can be done easily by adding selected and disabled attributes on the option element. Code Snippet <select> <option value="" selected="selected" disabled="disabled">-- SELECT --</option> <option value="ACTIVE">ACTIVE</option> <option value="INACTIVE">INACTIVE</option> </select> Try it! -- SELECT -- ACTIVE INACTIVE

April 15, 2020 · John Pili