HTML + CSS + JavaScript

Targeting Multiple HTML Files in the HTML5 Boilerplate Build Script

Posted on January 17, 2011October 8, 2014 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.

The Front End Engineering Spectrum- The Three Generic Types of Front End Engineers

Posted on January 9, 2011October 8, 2014 by Rob Larsen

As both a hiring manager and as a potential employee, I’ve seen both sides of the interview/hiring process and have noticed some definite categories when it comes to the type of people filling the roles and the roles themselves. This post deals with the types of people. I’ll follow up with a post outlining the types of roles and who (of the following) you should be looking hire if you’re looking to fill one of those specific roles.

The Three Types of Front End Engineers

Clearly, there are people that fall somewhere in between these broad categories. Still, I think these are pretty solid as general buckets.
Continue reading “The Front End Engineering Spectrum- The Three Generic Types of Front End Engineers” →

Using CSS zoom and CSS Transforms For a Better “Increase Text Size” Button

Posted on December 15, 2010October 8, 2014 by Rob Larsen

So… the site I’m working on has one of those “increase text size” controls. On this project it’s turned out to be one of those features that shows up in comps and somehow falls through the cracks until later on in the project cycle. Situation normal, really, as it isn’t a big feature. It’s just one of those things that needs to be buttoned up before the site can go live.

Anyway, I was thinking about how to do implement it the other day. I haven’t done one of these in a long time and the only other time I did one it involved crafting separate, albeit small, style sheets for the larger text sizes. I didn’t want to go that way again. Basically, I just didn’t want to write new style sheets- even small ones.

What’s a fella to do?

zoom

So, thinking about it a little bit, I seized upon using the non-standard CSS zoom property. Supported in Internet Explorer (zoom:1 is often used for a hasLayout toggle) and Webkit browsers, it would represent a simple (1 line!) CSS solution to this problem. It’s also one that I like better aesthetically as the site looks the same, just bigger. I figure there’s a reason all browsers have moved to this behavior when hitting ctrl+.

The problem was figuring out an equivalent for FireFox and Opera which don’t support zoom

Enter CSS 2D Transform

A little searching and experimenting later I came up with the idea of using CSS Transforms and the scale value to approximate zoom in browsers that lack support.

Let’s see how I did it.

As you go through the following keep in mind this hasn’t actually gone through testing yet so something weird could yet shake out. I just wrote this code yesterday, so you guys can be my sanity check.

Also, is anyone else doing this?

Continue reading “Using CSS zoom and CSS Transforms For a Better “Increase Text Size” Button” →

A New Site I Worked On is Live (officially)

Posted on November 30, 2010October 8, 2014 by Rob Larsen

We finally launched the new Isobar North America site. It had been in a soft-launch phase for several weeks as we worked out the kinks. Now it’s official.

I worked on it and, amazingly enough for an internal project I’m happy with it.
Continue reading “A New Site I Worked On is Live (officially)” →