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.

Targeting Multiple HTML Files in the HTML5 Boilerplate Build Script

by Rob Larsen

This came up in a comment here, so I thought I’d bubble this little tip to the top.

To target multiple files for URL rewriting in the HTML5 Boilerplate build script (as of version 0.95) use the fileset element instead of the file argument in the “html” target:

<target name="html" depends="">
    <echo message="Clean up the html..."/>
    <!-- style.css replacement handled as a replacetoken above -->
    <replaceregexp match="&lt;!-- scripts concatenated [\d\w\s\W]*?!-- end concatenated and minified scripts--&gt;"
    	replace="&lt;script src='${dir.js}/scripts-${build.number}.min.js\'&gt;&lt;/script&gt;" flags="m">	
        <!-- grab everything html -->
       <fileset dir="./${dir.publish}/" includes="**/*.html"/>
    </replaceregexp>
    <replaceregexp match="&lt;!-- yui profiler[\d\w\s\W]*?end profiling code --&gt;" replace=" " flags="m">
        <!-- grab everything html -->
        <fileset dir="./${dir.publish}/" includes="**/*.html"/>
    </replaceregexp>
    <!--[! use comments like this one to avoid having them get minified -->
</target>

You then need to expand the fileset element in the next three targets (htmlbuildkit, htmlclean, htmlcompress) to include subfolders.

Replace

<fileset dir="./${dir.publish}/" includes="*.html"/>

with

<fileset dir="./${dir.publish}/" includes="**/*.html"/>

And that should do it.

Ant. Ant? Really?

by Rob Larsen

Quick, if you were to guess a technology I’d be making commits on an open source project using, would Apache Ant be at the top of the list? I didn’t think so. But yet, here I am committing an Ant Build script to Paul’s excellent HTML5 Boilerplate project. It makes sense since I’ve done work on concatenation, minification and other performance enhancements using Ant, but it’s still a weird technology to be contributing to such a cool project with…

Read the rest of this entry »

An Ant Task to Comment Out console.log Calls from JavaScript Files

by Rob Larsen

As someone who started out doing JavaScript in the 1990s, I’ve been through the dark ages of debugging. Alerts, logging application data into DOM elements, etc. After having been through all that doom, I’m clearly a fan of console.log. I use it all the time. I bet you do too. It’s super useful.

The one downside? Leaving calls to console.log into code that’s being tested (as in, QA) or is destined for production (as in, emergency bug fix.) With Firebug or a similar tool running, you’re fine. Without it?

"console" is not defined.

I’ve seen this more times recently than I care to admit.
Read the rest of this entry »