Wednesday, June 13, 2012

JavaScript split Bugs: Fixed!


The String.prototype.split method is very handy, so it's a shame that if you use a regular expression as its delimiter, the results can be so wildly different cross-browser that odds are you've just introduced bugs into your code (unless you know precisely what kind of data you're working with and are able to avoid the issues). Here's one example of other people venting about the problems. Following are the inconsistencies cross-browser when using regexes with split:
  • Internet Explorer excludes almost all empty values from the resulting array (e.g., when two delimiters appear next to each other in the data, or when a delimiter appears at the start or end of the data). This doesn't make any sense to me, since IE does include empty values when using a string as the delimiter.
  • Internet Explorer and Safari do not splice the values of capturing parentheses into the returned array (this functionality can be useful with simple parsers, etc.)
  • Firefox does not splice undefined values into the returned array as the result of non-participating capturing groups.
  • Internet Explorer, Firefox, and Safari have various additional edge-case bugs where they do not follow the split specification (which is actually quite complex).

Friday, June 8, 2012

Jasmine 1.2 released


Jasmine 1.2 has been available, quietly, for a few weeks now. But consider this the official announcement.
This release is relatively minor, but has a lot of things under the hood that will make it easier for us to continue to improve the project. Some highlights:

Core Fixes & Features

  • New HTML Runner/Reporter (designed by Sean Durham) is now the default
  • An improved toEqual matcher for deep Objects

Gem Fixes & Features

  • Detection and support for the Rails Asset Pipeline
  • All requests served with no-cache headers, helping out when your browser supports them correctly

Development Fixes

  • Catch-up on issues with recent Rubygems and Ruby 1.9.3
  • Fixed bugs when developing for Jasmine on Linux
  • Moved CI to Travis
  • Cleaned up the building/concat of jasmine.js
  • Overall better task code, now tested, for building & testing Jasmine

Friday, May 4, 2012

JavaScript Style Guides And Beautifiers


Recommended JavaScript Style Guides

  1. Idiomatic.js. This is not only highly recommended and very comprehensive, but is also the style guide we've adopted for several of the projects I'm involved in. It includes contributions by jQuery core contributor Rick Waldron, jsPerf contributor Mathias Bynens and many other experienced JS devs in the community. Not all developers agree 100% with the practices it advocates, but that's the great thing about a forkable style guide – it's easy to adapt to your own needs.
  2. jQuery Core Style Guide. Perhaps the most popular style guide modern JS developers are aware of, it is used by the jQuery core team, jQuery UI, QUnit and many other projects. Rick Waldron once again had a hand in this as have Adam Sontag and John Resig, also of jQuery fame.
  3. Google JavaScript Style Guide. Written by former Google JavaScript developers such as Robby Walker (Closure Linter), this contains several readability best practices that those from a particularly traditional software engineering background will appreciate. Further comments on it can be found here.
  4. Dojo Style Guide Another very comprehensive alternative by the people that brought us the excellent dojo toolkit. Interestingly this guide is based on the structure of the Java programming conventions guide. If you like what you see, you might also appreciate dojo's inline documentation sguide, which remains my favorite style of inline commenting in JS.
  5. Aloha Editor JavaScript Style Guide This guide comes from the authors of the relatively non-trivial contentEditable-based Aloha Editor. Whilst it recommends the jQuery style guide, it has some useful (minor) additions such as how they suggest styling AMD modules.
  6. Crock's Code Conventions For JavaScript Another good guide, although perhaps not as detailed example-wise as others. I feel this has been superseded by Idiomatic.js, but if you strongly disagree with it or the jQuery core style guide, this is a much recommended fallback.

JavaScript Primitive Types vs Reference Types

Wednesday, April 25, 2012

HTML5 Offers ‘Scoped’ CSS for Precision Styling

HTML5′s controversial “scoped” style attribute is now supported in the latest Canary builds of Google’s Chrome web browser and Mozilla may eventually add support to Firefox as well.
HTML5 adds an attribute, scoped, to the style element which limits the scope of the styles contained within the tag. Google’s Alex Danilo has a good introduction to scoped over at HTML5Rocks. Essentially scoped allows you to nest styles within HTML and those styles will only apply to any child elements.

Swipe.js


Swipe brings content sliding to the mobile web to preserve space and allow for new types of interaction. Many mobile web sliders currently exist but few embody all the rules a slider like this should follow.

1:1 touch movement

1:1 movement, as described above, is about tracking the position of the touch and moving the content exactly how the touch interacts. This interaction is very common in native apps.

Resistant bounds

When Swipe is at the left-most position, sliding any more left will increase the resistance to slide, making it obvious that you have reached the end. This detection/resistance occurs at both left and right bounds.

Rotation/resize adjustment

When a user rotates their device (in turn resizing the browser window), the slider resets to make sure the sliding elements are the right size. This is only necessary for sliders without declared widths.

Variable width containers

Swipe allows you to set a width to the container, which designates the width of each slide element. This is important if you do not want a full width slider (the default).

Scroll prevention

Scroll prevention is one of the most overlooked pieces of mobile sliders. Swipe detects if you’re trying to scroll down the page or slide content left to right.

Library agnostic

Swipe doesn’t rely on any library. Trust me this is a good thing. All you have to do is pass in the container element, set some parameters, and BOOM goes the dynamite– you're all set. You may choose to pass the element to Swipe with a library, but it’s not necessary.

CREATING A MOBILE-FIRST RESPONSIVE WEB DESIGN


We're going to walk through how to create an adaptive web experience that's designed mobile-first. This article and demo will go over the following:
  • Why we need to create mobile-first, responsive, adaptive experiences
  • How to structure HTML for an adaptive site in order to optimize performance and prioritize flexibility
  • How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units
  • How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation
  • What we could do to further enhance our adaptive experience