Help Wanted: Please Test the New @h5bp Ant Build Script Image Optimization Flow

I reworked the way images are optimized in the Ant Build Script. After all the work I’d done to get it to 1.0 I discovered that a lot of the features we added to the image optimization process, coupled with a few hacks I threw in there myself, had made the image optimization tasks wonky on the Mac and on Linux. To that end, I reworked them, making them much simpler logically. I think the new changes are pretty foolproof (me, being the fool) but I need as many people as possible to test it to make sure I’ve really solved the problem. With these image issues fixed, I would release 1.1.0 and then sit back and see how things go. I’m really looking at getting the project to a nice stable place where I can just let it chill out and do its thing without me worrying about having stupid open bugs staring me in the face.

Which is where I am now.

Anyway, the branch is new-image-optimization.

To test you need some PNGs and JPGs in the img folder in an HTML5 Boilerplate structured project. Importantly, you need to test your version of OptiPNG. If it’s less than 0.7.0 and you can’t upgrade for some reason* you need to uncomment line 189 in your project.properties. If it’s above, just run ant and holler if your images aren’t getting optimized.

This is the issue to track issues with the new flow.

If this works, I can close like 6 bugs and release the patch** version. Which is the bee’s knees.

* This is some Mac thing. I’ve never quite understood why people just can’t upgrade their tools, but apparently something about the Mac stops you from being able to update a stupid little utility.
** I’m wondering if this should be a minor version since there’s a lot of “private” code rewritten to change the image optimization flow. 1.1.0? Maybe.

I’m Not Dead. I’m Just Resting. Actually, I’m Not Resting. I’m Just Busy.

Hi. Remember me?

Me neither.

Sorry. I’ve been busy. I’ve got a big project at work that’s taken up a bunch of my time and a new book project has kicked off at the exact same time. Holy cow.


Some news. My book with Manning has been canceled. The project had some unforeseen hiccups and some scheduling issues and we ended up canceling the contract. I’m bummed that it didn’t work out because I think writing about the mobile space would have been a lot of fun.

I’ll see if I can reuse some of the material here.

This new book is more than enough to make up for that one. Hopefully I’ll be able to give you full details sooner rather than later.


I’m still hiring like crazy. If you’re a serious JavaScript developer in Boston, New York City, Bangalore or Gurgaon/Noida, then I’m the guy you need to talk to.

On that front, we now have 11 guys, only 2 of which were there when I started last October. If I’m lucky we’ll be up to 15 or 20 by the end of the year. That’s pretty cool.


I’m looking for help updating the documentation on the ant build script. I started to build out some of the docs myself, but I’d love some help building out some of the content to make sure people with less experience on the infrastructure side are able to get up and running smoothly.


more, soon.

Hopefully.

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

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

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?

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…

Continue reading “Ant. Ant? Really?”