Bits and Bobs (Book Updates, the H5BP Ant Build Script, CanvasJS and My First Six Months at Sapient)

by Rob Larsen

Time to share some random updates.

Mobile Web App in Practice

My Manning book has shifted tracks slightly. It was originally going to be a cookbook. It’s now part of Manning’s In Practice series so the title has changed to reflect that. With that slight adjustment out of the way we’re heading into serious production mode. For what it’s worth, my contribution is about 1/2 done at this point. The other authors are a little bit behind me, but they’ll start to crank soon. I’ll be sure to update once I have some solid dates.

Project Z

I won’t call it Project X since I worked on one of those already and I don’t want to confuse anyone that previously heard me talk about that behemoth. I signed a contract for another book project a few weeks ago. That’s in the planning stage right now. So much so I’m not even sure of the final title just yet. What’s interesting is that it’s a revised edition of a popular title by another author, so once we get the title sorted out and I can talk about it it’s going to be exciting.

I think it’s going to be a great project.

Sapient

Six months in, Sapient is going well. I’m enjoying myself personally and in terms of the big picture things are really starting to fall into place. I’ve got two excellent JavaScript engineers starting on my team in Bangalore this month. We’re really trying to build out a great team in India so it feels good to have found two strong guys to anchor our efforts over there.

What I’m trying to do now is build out the team here in North America. The focus is here in Boston, but I don’t think I’d turn our nose up at someone in New York or Toronto, for example. In Boston I’m looking for both senior and mid level people who are interested in building nutty JavaScript applications using bleeding edge technology. For example, my current project has me hacking away at both Raphael and D3. Fun times. If you’re an experienced front end engineer who’s tired of working on marketing sites and want to expand your horizons with some real application work, lemme know. I’d love to hear from you.

Also, I’m not a bad guy to work for (unless everyone is lying to me.)

CanvasJS

Call this a soft-alpha. I’ve been working (along with Bob Holt and Marc Neuwirth) on a little Canvas helper library called CanvasJS.

There are currently two areas of focus:

  • Chaining any method that doesn’t return an explicit value is chainable.
  • API Enhancements These range from new concepts (getting the boundingBox of the last operation, getting the currentPos (x and y) of the ‘cursor’,) missing methods (circle, rectangle) to convenience methods (canvas properties are now getter/setter methods.)

Additionally, I’m thinking it would be cool to offer polyfills for certain features that might have been missed in implementation or might be new to the specification.

Marc and I have both used it on projects at this point so I feel like it’s probably okay to talk about at this point. I’m going to buckle down and finish up the loose ends for a decent release. That’s basically documentation and a few API loose ends.

Here’s what the code looks like:


var ctx = new Canvas( "ctx" );
ctx.reset();
for ( var i = 0; i<1000; i++ ){
  var color = 'rgb(0,' + Math.floor(255 - i/7) + ',' +  Math.floor(255 - i/100) + ')';
  ctx.beginPath()
     .line({
        x:.4*i,
        y:.4*i,
        angle: i,
        distance:i * .40
      })
     .strokeStyle(color)
     .stroke();
}

And here it is in action.

I think it’s kind of cool.

H5BP Ant Build Script

Finally, we’ve been busy as hell on the Ant Build Script. In just the past couple of weeks we’ve simplified the way we handle concatenation (thanks dholth!) and added Less CSS (thanks Chris Rowe!) support. I’ve been really happy with the project since it’s split from the main HTML5 Boilerplate repo. We’ve got over 400 watchers and over 60 forks, which isn’t too shabby- we’re working our way up the “shell” rankings on github (we’re coming for you wemux). Which isn’t to say we don’t have a lot to do. We do. It’s just fun to watch the progress and feel like the project still has some good traction, even on its own.

My Latest IBM Article is Live: “An introduction to Ajax”

by Rob Larsen

An introduction to Ajax.

Get a technical introduction to Ajax programming, and discover the core JavaScript code and popular library implementations. This article presents a brief history of the technology, then outlines the technical basics of Ajax interactions using core JavaScript coding as well as three popular JavaScript libraries.

Check Out My IBM DeveloperWorks Article on Sandboxed Natives, Fusebox, and FuseJS

by Rob Larsen

Summary: The concept of sandboxed natives, which are native JavaScript objects safely enhanced outside of the global namespace, has been circulating for several years. With Fusebox, we have a new, elegant approach to sandboxed natives—one that serves as the foundation for a new library, FuseJS.

Read the rest:

Sandboxed natives, Fusebox, and FuseJS.

My Intro to HTML5 Boilerplate @ IBM developerWorks + Another Wrinkle on Customizing

by Rob Larsen

I wrote an article about getting started with HTML5 Boilerplate. It’s live at IBM. Check it out:

Kick-start your web development with HTML5 Boilerplate.

I’ve got some more content coming up on IBM over the next few months on some pretty exciting topics. I’m in the middle of a deadline for one right now, actually…

That begs the question- when will I sleep?

Answer: never.


Read the rest of this entry »

Performance Tip: When Linking to JavaScript on the Google Ajax Library CDN, Use a Specific Version Number

by Rob Larsen

I’ve seen this a few times over the past few months:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

What that basically says to Google is “give me the latest 1.* branch version of jQuery and make sure it’s minified.”
Read the rest of this entry »

Starter Assets

by Rob Larsen

I just wanted to point folks to the small project I started on Google code- Starter Assets.

It’s based on some work I did at Cramer to standardize the development process there. The idea was to provide a standard set of files and a standard file/folder structure for people to start with whenever they were initiating a new project. I’ve expanded on it in this case to (eventually) include several doctypes (right now it’s just xHTML strict- HTML5 will follow soon) and links to popular JavaScript libraries on the Google Ajax Library CDN (just jQuery for now.)*

To use, you’d just download or SVN export the folder that corresponds to the doctype/library combination that strikes your fancy and you’re good to go.

I’ve released it in advance of a blog series I mentioned during my JavaScript presentation this past Thursday. It’s a step-by-step tutorial on how I build web sites called, “Building a Modern Web Site.”
Read the rest of this entry »

HTML5 + WordPress Resource Links From my WordCamp Boston Presentation

by Rob Larsen

Me, PResenting at WordCamp Boston

Owing to the contrast on the A/V system, my last slide was illegible, so here are all the links that folks couldn’t see.

The presentation itself:
HTML5 + WordPress

And the resource links:

The working group
http://www.whatwg.org/
Mark Pilgrim’s HTML5 book
Dive into HTML5
The Modernizr library
Modernizr
The outliner
http://gsnedders.html5.org/outliner/
The post talking about Kubrick
I’m Messing Around With an HTML5 Version of the Default WordPress Theme

My other sites:
DrunkenFist.com (art portfolio)
@robreact

I’ll have video of the presentation up shortly (I hope!)

Recent Reading (JavaScript Library CDNs, User-Agent Strings, Hacks, Hacks and Hacks)

by Rob Larsen

Should You Use JavaScript Library CDNs?

Interesting reading. Here’s the salient bit:

Or, more simply: If we use Google’s JavaScript Library CDN, we are asking the majority of our website visitors (who don’t have jQuery already cached) to take a 1/3 of a second penalty (the time to connection to Google’s CDN) to potentially save a minority of our website visitors (those who do have a cached copy of jQuery) 1/3 of a second (the length of time to download jQuery 1.3.2 over a 768kps connection).

That does not make sense. It makes even less sense as the download speed of your visitors increases. Try to avoid serving 20 or 30 kilobytes of content at the cost of using a 3rd party just doesn’t make sense.

We’ve used the Google CDN to serve jQuery at Cramer with no obvious complaints and I heartily recommend using the configurator/CDN option that Yahoo offers (for the unitiated, it builds a “just what you need” package to grab from their CDN, so you don’t have to serve every YUI Module just to do x), but Billy Hoffman’s article definitely makes me rethink the former.

History of the user-agent string

If you didn’t live through it (and I didn’t live through the whole thing), now you can revisit the strange history of the user-agent string in just a few, well-written, minutes.

Comprehensive List of Browser-Specific CSS Hacks

I hate me some browser hacks. But that’s a mighty fine list.

Detecting browsers javascript hacks

We spent about 45 minutes running variations of the one-liners above in the console during a code-review last week. Fun times.

It sounded like this a couple of times:

“Wait, what?”

And finally… are you enjoying the jQuery advent calendar? I’m interested in running jQuery 1.4 against the demo code I build for my library presentation. I expect to be bowled over.

What I Read This Week (jQuery’s live(), algorithms, IE8 + VPN, Chrome )

by Rob Larsen

These are the posts that have kept me engaged during my quiet moments this week.

Demystifying jQuery .live() and why it’s generally faster than .bind()

A short article looking at jQuery’s .live().

List of Algorithms

Just what it says it is- a big-ass list of algorithms. I wish more had source code.

Using a VPN Clobbers IE 8 Performance

The folks at HttpWatch detail the ins and outs of the way that IE8 handles their enhanced connection rules. The browser is set to use 6 open connections, but only when a broadband connection is in use, so there are situations where it can fall back to using just 2.

(down)Loading JavaScript as strings
Steve Souders is a font of performance wisdom. I wish I’d been able to check out the Velocity Online Conference today.

Technically speaking, what makes Google Chrome fast?
Front end engineers can learn much from the people who make browsers. That’s the case here. The video content is excellent.

Computer science in JavaScript: Base64 encoding
This is a great series, moving the discussion of JS beyond the browser and the DOM and into a more primary, and therefore really interesting, realm.