JS

NOUN

dot

MWDT

Meetup  #3

8/19/2014

Javascript

Settin' Up

dot

JS

Gotta Mention This Guy...

Yeoman quickly and EASILY gets a project up and running for you.

Start in Terminal with:

If you know you're already going full stack JS...

From the Mean Site:

Up and Running with npm by typing:

  $ sudo npm install -g meanio 
  $ mean init yourNewApp

FRAMER.JS

Stylin' 

dot

JS

Modernizr

Poly-Fill management when a feature isn't supported. 

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

Using Modernizr to test for touch before loading NG-Touch directive for Angular.JS

angular.module('myApp')
	.config(fuction(TouchDeviceProvider){
	if (Modernizr.touch)
  	    TouchDeviceProvider
		.setTouchDevice();
	});

/* Simulated box shadow using borders: */
.box {
   border-bottom: 1px solid #666;
   border-right: 1px solid #777;
}
.boxshadow div.box {
   border: none;
   -webkit-box-shadow: #666 1px 1px 1px;
      -moz-box-shadow: #666 1px 1px 1px;
           box-shadow: #666 1px 1px 1px;
}

Using Modernizr Provided Classes to Progressively Enhance a Site.

If You're already using JQuery...

It might be worth a look.

Conditioner.JS

SHINE

VELOCITY.JS

Experiencin' 

dot

JS

Note: These are only a few tools to improve overall UX. It's also understood that they probably shouldn't be used all together where a more complete framework/library would be a better solution.

FastClick.JS

/

InstantClick

• Removes 200-300ms link delay

• Creates more "native like" web app interactions.

• Both gracefully degrade

• FastClick doesn't attach listeners on desktop browsers.

Headroom.JS

PictureFill.JS

<img sizes="100vw, (min-width: 40em) 80vw"
      srcset="pic-small.png 400w,
      pic-medium.png 800w,
      pic-large.png 1200w" alt="Obama">  

<picture>
  <source srcset="extralarge.jpg, extralarge.jpg 2x" media="(min-width: 1000px)">
  <source srcset="large.jpg, large.jpg 2x" media="(min-width: 800px)">
  <source srcset="medium.jpg">
  <img srcset="medium.jpg" alt="Cambodia Map">
</picture> 

Using srcset:

Using Picture Element

Why PictureFill.js vs. simply in-lining images?

• In-line images (using css and media queries) aren't as accessible.
• Art direction (while possible) isn't as controllable as with custom crops. 
• CSS only isn't as "SEO Friendly"

GARLIC.JS

PARSLEY.JS

• automatically persist form input fields until submitted
• simple attachment through data attributes
• lightweight: 5-25k

• Complete Validation solution

• Simple attachment through data attributes

• includes api for server side validation

• ui agnostic for total customization

GARLIC.JS

<!--[if lte IE 7]>
    <script src="https://raw.github.com/mattpowell/localstorageshim/master/localstorageshim.min.js" type="text/javascript"></script>
<![endif]-->

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="garlic.js"></script>

PARSLEY.JS

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

<form data-parsley-validate>
...
</form>

NOME.JS

HTML5 geolocation and location data. This type of data isn't normally exposed within a user session without signing up to multiple services and installing many large database files locally.

Nome gives direct access to location and weather data from an exposed JavaScript API allowing you to create context driven websites that deliver information relevant to your audience.

Nome.js

<script src="nome-[version].js" type="text/javascript"></script>

nome.ready(function() {
//Get the distance of the user
distance = nome.getDistance(); 
/* Then use another library such as jQuery *	
to maniuplate the DOM with the data */
 $('#somediv').html("<p>" + distance + "</p>"); });

Add the script tag...

Then use the .ready() method to make sure all the data is loaded and available

Buildin' 

dot

JS

Grunt

• Thousands of Available Plugins
• Large support community
• Relatively easy to pick up
• No advanced topics beyond configuring plugins.

Gulp

• Uses Streams for to read and pipe data.
• Thus, less time spent in I/O vs Grunt.
• Only uses plugins to perform small individuals tasks that do things with files.
• Because tasks are just in JS you don't need plugins for most things.

Comparison

Task to convert LESS to CSS with Autoprefixer

grunt.initConfig({
   less: {
      development: {
         files: {
            "build/tmp/app.css": "assets/app.less"
         }
      }
   },

   autoprefixer: {
      options: {
         browsers: ['last 2 version', 'ie 8', 'ie 9']
      },
      multiple_files: {
         expand: true,
         flatten: true,
         src: 'build/tmp/app.css',
         dest: 'build/'
      }
   }
});

grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');

grunt.registerTask('css', ['less', 'autoprefixer']);

var gulp = require('gulp'),
   less = require('gulp-less'),
   autoprefix = require('gulp-autoprefixer');

gulp.task('css', function () {
   gulp.src('assets/app.less')
      .pipe(less())
      .pipe(autoprefix('last 2 version', 'ie 8', 'ie 9'))
      .pipe(gulp.dest('build'));
});

GRUNT

GULP