React Golf Scorecard application updated to show Greens in Regulation (GIR). For this we needed figure out how to trigger an on change event when the input value for GIR is updated dynamically when strokes and putts are entered. It is recommended that you read Part 1 which contains the information on how to install and build this application locally.

You can view a demo of the app here

This tutorial demonstrates how to create a React application that is used in a great many golf apps, a way to display and edit golf course scorecard data. You can view a demo of the app here

Prerequisite Node.js will need to be installed. This include the npm CLI. Pro Tips: Use nvm for Node.js installation. If running Windows, use WSL2 with Windows Terminal. Getting Started Here are a couple of options for creating a React application. 1. Create React App The create-react-app CLI released by facebook in July 2016 is an easy way to spin up a zero configuration React app. Install the create-react-app CLI globally using npm.

Prerequisite Node.js will need to be installed. This include the npm CLI. Pro Tips: Use nvm for Node.js installation. If running Windows, use WSL2 with Windows Terminal. Getting Started The most common practice for creating a Vue.js application is done using the Vue CLI. Install Vue CLI npm install -g @vue/cli For more information, refer to the official Vue CLI Installation Guide. vue create myvueapp cd myvueapp Frameworks Of the various Vue.

Basic querySelector examples including iteration of DOM NodeList returned by querySelectorAll using either Array.from or [].slice.call.

Designs typically require more than the out of the box demos provide, which is understandable. The slick carousel demos will get you most of the way there and provide examples for various settings. This post is an example of how to dynamically update the slick slidesToShow value as the viewport is resized, demo.

How to create a WordPress custom shortcode to display photos from flickr. This post documents using the Slick Lazy Load Photo Grid along with the flickr API to render photo albums in Wordpress Posts wherever the shortcode is entered. Webpack 4, autoprefixer, and babel are included for building the JS and CSS.

This post documents how to create a fully responsive flexbox content layout that contains a pure CSS open/close toggle for the left and right sidebars. The CSS is built from Sass using Webpack with Autoprefixer. For development, a Webpack Dev Server is included.

Sass Install the loaders to preprocess the Sass files. SASS Loader compiles Sass to CSS, also requires node-sass. npm install --save-dev sass-loader node-sass PostCSS Loader processes CSS with PostCSS. npm install --save-dev postcss-loader CSS Loader resolves import at-rules and url functions in the CSS. npm install --save-dev css-loader Style Loader inlines <style></style> in the DOM. npm install --save-dev style-loader URL Loader and Resolve URL Loader handle relative paths.

This follow up to the basic Webpack 3 Sass preprocessor workflow I wrote about here includes how to handle processing of relative URLs in the Sass for things like fonts and images. Ken Wheeler’s popular Slick carousel contains these asset types in its Sass, so let’s use that for this exercise. Getting Started Prerequisite: Node.js with npm. Navigate to the project root in your CLI, such as Terminal, Cygwin or PowerShell.

How to layout and lazy load images in a flexible grid similar to how facebook displays them in a post. Selected images open a lightbox for previewing within a carousel. Image alt text is converted into a caption below the image. YouTube Video

Google Map application that uses a draggable location marker to set address, longitude and latitude geocode inputs. This post covers some of the Webpack tools for both a local development environment and production build of the app constructed of a few JavaScript modules and css.

This post documents how to add Ajax form validation to Laravel User Authentication that is generated by the Artisan console.

Design patterns are reusable solutions to commonly occurring problems in software design.

– Addy Osmani

This post documents how to use local JavaScript modules with Browserify and the Google Maps JavaScript API. In this example, the Google Map contains a marker that can be dragged to reset the browser form with the marker position location data. Additionally, Browserify shim is used to require jQuery since it is already being loaded from a CDN.

After discovering yet another interesting Javascript framework recently for web application development (Vue.js), I decided to put together this short list of some the emerging and more popular frameworks out there today for building user interfaces.

This post documents how to create a RequireJS module that loads the Google Maps JavaScript API and is used by a web page to populate form inputs with location data. The Google Map contains a marker that can be dragged to reset the form with the marker position location data.

Browserify lets you write modular JavaScript in node.js style. At the beginning of each module you write, the respective dependencies are added using require statements. Then Browserify compiles the modules along with all of the dependencies into an optimized JavaScript file for use in the browser.

At ng-conf 2015 last month it was announced that AngularJS 1.X will continue to reside at angularjs.org and Angular 2.0 will be hosted at angular.io. The new version of Angular is not a major update, it is a complete rewrite. In February, Brad Green announced that Angular 2 was officially Alpha in this First look at App Development in Angular2 video.

Here are a few Best Practices to follow when coding in JavaScript.

Javascript templating is a technique to render JSON data in HTML markup with JavaScript.

This post shows how to combine and minify multiple javascript files in a Wordpress theme into one javascript file. The benefit is a single request to a javascript file that has been compressed by minification instead of multiple request to larger javascript files.

Various helper functions are included on this page. See DOM Helpers to look for document object helpers.

This tutorial describes how to setup and use the Grunt JavaScript task runner to automate repetitive tasks such as minification and compilation. Grunt is installed using npm, the Node.js package manager. You will also need Git to work with the tagged source code. This makes it easy to reset and compare your working copy of the code at each step. I discovered commit tags while using the AngularJS tutorial.

Window The window object represents the browser window or frame and also inherits all of the global JavaScript core properties History Location Navigator Screen Articles & Resources Document - Web API reference | MDN ES6 Modules in Depth Global Objects - JavaScript | MDN JavaScript | MDN History × The history object represents the browsers URL history.

The Document object represents the root node of the HTML document. The nodes are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects.

During module development, to see all of the js and css files in firebug or your favorite client debugging tool of choice, turn off the file combination provider. In this section at or near the bottom of your web.config, set the provider enableCompositeFiles attributes from true to false as shown in the example below.

Useful JavaScript for converting an iso DateTime string into a JavaScript Date object. The Date.prototype.setISO8601 function is from dansnetwork.com/javascript-iso8601rfc3339-date-parser/