Below you will find pages that utilize the taxonomy term “Browsersync”

Google Maps API RequireJS Module

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. Source Code Development Environment In order to use the package managers, Gulp task runner, BrowserSync and RequireJS optimizer, you will need to have the following installed.

BrowserSync SSI Recipe

BrowserSync is my Node.js web browser app development server of choice. This gulpfile is a work in progress to address support for server side includes when using a BrowserSync static server. gulpfile.js var gulp = require('gulp'); var browserSync = require('browser-sync').create(); var minimist = require('minimist'); var serverConfig = { site: './src', directory: false, host: 'localhost', ssi: '.inc', index: 'index.html' } // from https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md // seems to make sense since gulp itself uses minimist.

Browserify with Sourcemaps

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. If jQuery has already been loaded by a CDN or otherwise, a Browserify Shim can be used to include global jQuery as a module.

HTML 5 Template

Template with html5.js shiv * <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My Super Site!</title> <meta name="description" content="My Super Site!"> <meta name="author" content="My Name"> <link rel="stylesheet" href="css/styles.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html> * Inspired by HTML5 Boilerplate Emmet If the Emmet plugin is installed in your code editor, you can use the ! alias or html:5 abbreviation then tab to stub out the template.