JS

NOUN

dot

MWDT

Meetup  #3

8/19/2014

Javascript

Settin' Up

dot

JS

Gotta Mention This Guy...

Yeoman Is home to opionionated workflow stacks that encourage "best practices" in front end develoment. 

It's really a one-stop-shop almost any front end project you can concieve of thanks to a large community of "Generator" developers. 

It pretty much ROCKS...

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

npm install -g yo
npm install -g generator-webapp
mkdir my-yo-project
cd my-yo-project

Start in Terminal with:

Off and running with one more line:

yo webapp

MEAN is an opinionated fullstack javascript framework - 
which simplifies and accelerates web application development.

MEAN.IO

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

Use PS or Sketch assets in REAL UI Prototyping with Coffeescript. 

Stylin' 

dot

JS

Modernizr

...is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

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.

It's a Responsive Design Framework...but in JS

Wait... What?

If You're already using JQuery...

It might be worth a look.

Neatly Breaks up your styling into Viewport Specific stylesheets and juggles automatically. 

Also has useful api to check for touch as well as browser version and other features.

Conditioner.JS

ConditionerJS tells your JavaScript when to act up and when to tune down" 

-Rick Schennink, Smashing Magazine.com ,4/3/14

<a href="http://maps.google.com/?ll=51.741,3.822"
   data-module="ui/Map"
   data-conditions="media:{(min-width:30em)} and element:{seen}"> … </a>

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>
<form data-persist="garlic" method="POST">

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

Thanks 

dot

JS

Slides Immidiately Available for review on Slides.com . Links to discussed tools will be added to index as well as in post on G+ page. 

 

Thanks for Coming!

If you're seeing this online please feel free to share and comment.

 

Mark Santiago @msantiago508

HIT DOWN FOR INDEX

Index

Meetup #3 Noun Dot JS

By Mark Santiago

Meetup #3 Noun Dot JS

An overview of some of the JS based tools making waves in modern web development.

  • 588
Loading comments...

More from Mark Santiago