Skip to content

jQueryTO 2013: Day 2

03-Mar-13

the state of query ui
Learn.jqueryui
Touch support
Multi pointer support
JQuery ui date picker
Spinner

client and server
Nodejs.org
Require.js
Common.js

angular.jus as a MVC framework
Karma-laboratory.com
Angular is what the web browser would’ve been
Codehuddle.org
Yeoman
Sublime text2
Egghead.io for tutorials

the Dev process

angular directives
iTerm
Angular directives to load jquery plugins
Egghead.io
Angular UI – collection of directives
Angular w PHP?
Angular w MySQL?

optimizing jQuery
Theyoungastronauts.com
Creative engineer
Namespaces in js
Var app = {}

fixing broken windows
1. Mixed spaces and tabs, trailing white spaces
2. Not having or following a style guide
Idiomatic.Js
jshint
3. Know thy version control system
3.5 doing it live. Don’t.
4. Avoid monolithic files
5. Modules
Common JS
Real winner – require jus and amd
6. Leave $.fn alone unless you really mean it
6.5 prefer simple dependencies over complex ones
7. Dead code
8. Writing testable code
Structure applications around an object
9. Don’t retest jquery
10. No build step
Minification has its limits
11. Always use the latest query
11.5 multiple doc ready. The doc is definitely ready
Modifying natives. Don’t do it
UA sniffing. Stop
Ajax async, no
One less jpg

developing with grunt js
Npm.is
Grunt-Dev tools
Uglify

frontend disapora
Paul Irish
– requestAutocomplete();
Uncommongoods.com
Form field auto complete html tags
– Scrolling performance
Always monitor scrolling performance
Always serve images at native size
Watch for heavy paints
Full page repaints is a problem
Cmd e shortcut to timeline
Fixed position causes repaint
WebKit transform translate z(0) to force GPU
Html5rocks.com
Remote debugging
Aerotwist about translate3d
– mobile tooling
Touch emulations
Paul Irish.com/demo/multi
Settings > overrides > touch events
Device metrics simulation
Geo location spoofing
connection testing
Network Link conditioner on Mac
Charles
Fiddler on windows
Multi device testing
BrowserStack
Opendevicelab
Perfecto mobile
Device anywhere has a free service
Google Dev tools – code school
Runtime optimization
Unminify!
Layout thrashing
Snippets
About:flags
Experiments
Canvas draw
Back to snippets
Console.log(Navigator)
Yayquery.com

JS – Validate Phone Numbers

02-Mar-13
var regexObj = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;

if (regexObj.test(subjectString)) {
    var formattedPhoneNumber =
        subjectString.replace(regexObj, "($1) $2-$3");
} else {
    // Invalid phone number
}

jQueryTO 2013: Day 1

02-Mar-13

state of jquery
Apigee?
Github.com/jquery
1.9 vs 2.0
Do not hotlink jquery latest.js
Jquery migrate
X-ua-compatible
Parsejson(“”) or null
Jquerymobile
Custom build jquery – bookmarklet

hardware access and device apis w js and html5
Wesbos.com – github/wesbos
“Independent”
Sublime text
HackerYou
Ruby motion
Speedometer
Navigator.geolocation.getcurrentposition()
File input and file reader
Input type=”file”
Accelerometer
Device orientation, mozorientation devicemotion
Webkitcompassheading
Jamesgpearce/compios5
Webrtc
Getusermedia
Node.js and socket.io

jquery and css3
.one(webkittransitionend..), function
Modernizr.prefixed
$.One(Webkitanimationend), function
Translate3D for GPU performance
Impressivewebs.com
Text shadows, box shadows, display none, position absolute, position fixed, outlines, transform offsets (scale, skew, rotate, translate) do not cause reflow
Position relative offsets – space still taken
Jankfree.com
Ariya hidayat, fluid user interface w hardware acceleration
Tinyurl/jquery-Toronto
Mobile hover state?

state of jquery mobile
Jquerymobile/gbs
Jquerymobile webapps
PhoneGap
Width=device-width
Jquery core and jquery mobile compatible versions
Data-role, buttons
Jqmgallery.com
Jquerymobile/Resources/
Codiqa.com
Speakerdeck/rwhitbeck

documenting interfaces
Polarmobile
Ember.js
Bootstrap
Foundation/zurb
Backbone
DSS
Grunt.js – dss is a plugin for it

build an experience, not another framework
Less
Sass, CSS pre processor
Jquery mobile custom widgets
Bit.ly/Jqmbb10
Apache Cordova
Ringmark test, rng.io

the anatomy of a jquery uu widget
Widget factory
ToggleClass w a Boolean instead of if statements
ToggleClass w two classes specified
Widget bridge
Ajpiano.com/widgetfactory

promises
Deferreds
Dan Heberden
Bocoup.com
$.when, done..
Promise/A
_.deferreds
To avoid nested Ajax calls

gone in 60 frames per second
Minimize jank
Take advantage of GPU
Translate-z 0 hack
Hover and scrolling, set timeout
Box-shadow is very expensive for FPS
offsetTop is bad, relayout
Avoid heavy on.scroll
Heavy paint times
Avoid image resizes
Long image decodes
Web workers
rAF
Expensive CSS – border radius, transforms, linear gradients, box-shadow, fixed backgrounds
GPUifying a layer
Continuous painting mode
Inception explained
Incognito mode for performance profiling
Telemetry, scriptable tool
Canary google chrome version
Addyosmani

20130302-180442.jpg

20130302-180429.jpg

JS – IE7 – Console.log Error

04-Jan-13
if ( ! window.console ) {

    (function() {
      var names = ["log", "debug", "info", "warn", "error",
          "assert", "dir", "dirxml", "group", "groupEnd", "time",
          "timeEnd", "count", "trace", "profile", "profileEnd"],
          i, l = names.length;

      window.console = {};

      for ( i = 0; i < l; i++ ) {
        window.console[ names[i] ] = function() {};
      }
    }());

}

source

PHP – Add and Remove variables from URL String

04-Jan-13
  function add_querystring_var($url, $key, $value) {
    $url = preg_replace('/(.*)(?|&)' . $key . '=[^&]+?(&)(.*)/i', '$1$2$4', $url . '&');
    $url = substr($url, 0, -1);
    if (strpos($url, '?') === false) {
        return ($url . '?' . $key . '=' . $value);
    } else {
        return ($url . '&' . $key . '=' . $value);
    }
  }
  
  function remove_querystring_var($url, $key) {
    $url = preg_replace('/(.*)(?|&)' . $key . '=[^&]+?(&)(.*)/i', '$1$2$4', $url . '&');
    $url = substr($url, 0, -1);
    return ($url);
  }

source

jQuery – Reset Form

22-Dec-12
$('form')[0].reset();

PHP – Resolve CDN Province from Postal Code

17-Dec-12
function getProvinceCode($postalCode) {
  switch( strtoupper(substr($postalCode, 0, 1))) {
    case "A": return "NL"; // Newfoundland and Labrador
    case "B": return "NS"; // Nova Scotia
    case "C": return "PE"; // Prince Edward Island
    case "E": return "NB"; // New Brunswick
    case "G":  // Eastern Quebec
    case "H":  // Metropolitan Montreal
    case "J": return "QC"; // Western Quebec
    case "K": // Eastern Ontario
    case "L": // Central Ontario
    case "M": // Metropolitan Toronto
    case "N": // Southwestern Ontario
    case "P": return "ON"; // Northern Ontario
    case "R": return "MB"; // Manitoba
    case "S": return "SK"; // Saskatchewan
    case "T": return "AB"; // Alberta
    case "V": return "BC"; // British Columbia
    case "X": return "NT,NU"; // Northwest Territories and Nunavut
    case "Y": return "YT"; // Yukon Territory

    default : return "";
  }
}

source

JS – Extract Background-Image URL

14-Dec-12
(function ($) {
	$.fn.backgroundImageUrl = function(options) {
		if (options){
			return this.each(function(){
				$(this).css('backgroundImage','url:('+options+')');
			});
		}else {
			var pattern = /url\(|\)|"|'/g;
			return $(this).css('backgroundImage').replace(pattern,"");
		}
	};
})(jQuery);

source

JS – Select Child if has Parent

07-Nov-12
$('.parent > .children').unwrap();

Ruby – rmagick on mac

06-Nov-12

http://www.macports.org/install.php
http://bcaccinolo.wordpress.com/2010/10/29/install-rmagick-on-mac-os-x/