TODO app; Vue.js framework example

End Result Demo

Install Vue.js CLI (https://vuejs.org/v2/guide/installation.html#CLI)

$ npm install --global vue-cli

Create new Vue.js Project, skipping defaults

$ vue init webpack todo-project

Run npm install for node_module folders in the project if not done already

$ npm install

Open index.html ; include bootstrap in markup

Open HelloWorld.vue component (dir: src/components/HelloWorld.vue)
- replace script with the following

- replace template for the component with the following
(notice Vue binders syntax including v-on:click - mapping to add() method, v-model, . v-for utilized to display list of todo items)

Run npm run dev to build the project locally on port http://localhost:8080

$ npm run dev

View end result demo in browser
see the code - https://github.com/nickforce/VueJSTodoApp

Preventing focus of first input field and Calendar widget on page load in Salesforce

Sometimes in salesforce visualforce pages, the first input field on the page will automatically be set to focus on page load. This can be very annoying and confusing to a user, sometimes scrolling the page to the far right, halfway down the page, or opening up the calendar widget over your other content by default. This post is first showing how to remove focus from either a input field or the calendar widget, and second showing how easily replicate the Salesforce calendar widget(not a permanent solution as class names and javascript libraries could change at any point in time).

First to remove focus from a normal input field, you can put in a extra input with a type of hidden, and give it a Id. Then write a short bit of javascript to call that hidden field and set focus to it on page load.

see code below