December 9, 2011 • by
Wes Hatch
Here’s a nifty trick to impress your geek friends at nerd school: encode your icons as base64 data and save them right inside your stylesheet.
Why would you want to do this?
Well, for starters it speeds up your site by minimizing HTTP requests. Much of the end-user response time is spent on downloading a page’s assets; minimize these requests and you can dramatically speed up page load times (see http://developer.yahoo.com/performance/rules.html for a good overview on this).
Also, I like the idea of having icons and simple graphics directly attached to a particular class or id in my stylesheet.
Oh, and also, it’s cool.
So how do we do it? First, we need to actually encode an image as base64 data. The easiest way to do this is to use an online form (here’s one), but you could also use php:
function encode_image( $filename=string, $filetype=string ) {
if ($filename) {
$img = fread(fopen($filename, "r"), filesize($filename));
return 'data:image/' . $filetype . ';base64,' . base64_encode($img);
}
}
You’ll note that at the beginning of the string you get back, you have: data:{mime-type};base64. This mime-type tells the parser how to deal with the data, and will usually be one of: image/gif, image/jpg, or image/png. Using this base64-encoded string, we can now do all sorts of wacky stuff, like:
background:url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAMCAYAAAC0qUeeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYxJREFUeNp0kM9LwmAYx59tbk5QgqA6iDJYUAcP4RakXoKOsVPd9Cie8tI/4D+Rp8A/wEtEBM6LSB0EPXVqGjoZsTzoGNbU6bDnFRQJemDs+fF93/fzfShFUWArjlzXVWaz2TEp/H7/O8dxT5hqpPYtl0ugKIrkZyi8EQRhR5bl1clWq3Wg6/oJHrjDssnEYjHwPG9/PB7fxuPxvUKhAKlUCjCHZDIJnU6HN03zkKbpH6ZWq+1GIhHZtu2LXC4H0Wh0wxQIBCAcDkO9Xg9NJhOOQgwB++f4XW0hbQL5IZPJwHA4/KIHg4FdqVQ+8/k8tNtt+Bu9Xg8WiwUwDGMw3W532mg0HMMwTi3LCiUSCWBZdiV0HAeKxSLgzESTKiOKInn6GwsLnUtolpUkaSUulUpQrVYdXOE9al58a0b8v/I8L6qqet3v94Hwa5oG2HsmM6Kht/lwPW+4Qshms5BOp2E0GpFecz33/fEzJbx4O8znc3KrRxbyn/gDXT+Uy+VLfNoNBoOPiKOvh78CDADFaaRpj7fVSAAAAABJRU5ErkJggg==) 0 50% no-repeat;
Instead of linking to an external image, we put it right in the css. For example, that particular bit of css will put a lightbulb into the background of an element, as seen here: 
If you used the php snippet above and you’re serving your css with php, you could save the step of having to paste in the base64 string, and instead encode it directly like this:
background: url("<?php echo encode_image ('lightbulb.png','png'); ?>") no-repeat;
Neat! Cool! Blammo! So, there you go. Yes, you could go: background:url(‘image/boring.gif’); but, why? This little trick will speed up your site by reducing HTTP requests, and make your server happy.
November 25, 2011 • by
Colin Vernon
We’ve heard a lot about HTML5 in the past year or so, and from the great [unrealized] promises of HTML5 video, we’ve seen some neat multimedia-type interactive presentations, notably from the Arcade fire and Ok Go chrome experiments. But we’ve barely heard anything about another new HTML5 tag, <audio>
At the basis it should work about the same as <video> — you give a src file, and the browser handles playing the media natively without the help of a plugin. And the best part, we can interact directly with the tag using javascript.
We found a neat simple HTML5 audio javascript library called Buzz, and used it to track markup-based timestamps to audio events. Meaning, as the audio plays, the script checks if there is supposed to be something happening as the “playhead” reaches the given timestamp. We’ve used the HTML5 data- attribute to label the timestamps, so the sequencing is actually embedded in the markup. We could very well have kept the markup clean, and used a separate, javascript-based sequencer-type description, but that’s not how we wanted to do it :)
<p>the <span class="offering" data-stamp="00:03">offering</span> of images as a spiritual activity<br>
<span data-stamp="00:04">replaces</span> the impulse to find a personal vision, an icon<br>
as a spiritual activity it <span data-stamp="00:07">distracts</span> the individual<br>
from finding and recognizing a singular <span data-stamp="00:10">true path</span></p>
In this example, we’re playing a very powerful piece [ie, ripe with deep meaning] by modern experimental opera composer Robert Ashley, and using javascript to meaningfully highlight words as they are echoed by the background chorus voice in the music. The javascript is very simple but effective, and the song is worth a close listen while reading the though-provoking words.
November 18, 2011 • by
Wes Hatch
Well, always one to give credit where credit’s due, I must say that I just spent 20 minutes geeking out over some of the CSS found at Sorenson media’s nice site. Specifically, I am quite impressed with the particular usage of the ::before and ::after pseudoelements to create a subtle curled shadow underneath an element. (I should say I’ve since seen this technique in a few places, so I’m not sure who deserves the original credit for it).
Allow me to explain what’s going on. First off, I’m not talking about a simple box-shadow; the technique presented herein produces a non-uniform shadow, which gives the impression of depth from a curled, page-like element. There are no background images, and it’s entirely in CSS. Very nice.
How is this done? Let’s start with a div, and give it class .pagecurl. Next, we populate it with a few styles to get us started:
.pagecurl {
padding: 24px 3%;
margin-bottom: 24px;
background-color: #F1F2EA;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ECEEE3), to(#EFF1E8));
-webkit-box-shadow: 0px 0px 1px #D1D6BB;
border: 1px solid #E8EADF;
position:relative;
}
So, nothing special yet. This gives us a simple div with a background colour (or a gradient if you’re on webkit). Note the “position:relative”–it’s needed for the next step.
Now, the magic:
.pagecurl::before, .pagecurl::after {
-webkit-box-shadow: 0 15px 10px rgba(209, 214, 187, 0.7);
-moz-box-shadow: 0 15px 10px rgba(209, 214, 187, 0.7);
-o-box-shadow: 0 15px 10px rgba(209, 214, 187, 0.7);
box-shadow: 0 15px 10px rgba(209, 214, 187, 0.7);
position: absolute;
bottom: 15px;
z-index: -1;
width: 50%;
height: 30%;
content: "";
background: rgba(209, 214, 187, 0.3);
}
This creates two elements attached to the .pagecurl div, ::before and ::after. In fact, these are pseudoelements. Note that they are half the width of the .pagecurl div and 30% of its height, and they are both absolutely positioned 15px up from the bottom (relative to the .pagecurl div). We’ll put them either on the left- or right-hand side in a moment. At this point they are also not visible because their z-index is negative–meaning they’ll be behind everything in the div. Note, though, that each one of the ::before and ::after pseudoelements has quite a bit of box-shadow on it (a 15px vertical offset with a blur radius of 10px, to be precise). Now, let’s make that bit of shadow visible:
.pagecurl::before {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
right: auto;
left: 7px;
}
.pagecurl::after {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
transform: rotate(4deg);
right: auto;
left: 7px;
}
What this does is to subtly rotate each pseudoelement and to place it on its respective side. The parts that have been rotated down are now visible, poking out of the bottom of the .pagecurl div. And, lo and behold, with the ::before element slightly rotated counterclockwise and the ::after clockwise, it creates the uncanny effect of a shadow thrown from a slightly curled page. This is quite an original yet appropriate usage of ::before and ::after. Until now, I’ve only seen pseudoelements used as clearing hacks (think: clearing floated elements without extra markup), but this is a clever implementation highlighting the types of things we can achieve with these rarely used and oft forgotten properties.
Colour me impressed.
November 14, 2011 • by
Colin Vernon
I love this stuff—hearing back from the “real world” about things that we’ve made for our clients.
My wife’s younger brother has graduated from McGill in Engineering, and after doing a work term in the middle east with Booz & Co. based in Dubai, he has now taken a full-time position with this international management consulting outfit.
We were very excited when he texted a photograph and an incredulous note asking, “Someone at Booz suggested I read this book, is this the same STRESSLIMITDESIGN?!?!”
Short answer is yes.
Longer answer is that in 2007 our long-time client and friend David Maister wanted to publish a new book of material from his more recent articles and blog, but was less confident in the relevance of the mainstream publishing industry as a mechanism. We dove in with full force; designed the cover and entire book layout, searched and chose on-demand publishing providers, set a schedule and release strategy for the hardcover and softcover versions for early 2008. The book outsold all his previous books except for his original classic, Managing the Professional Service Firm.
And the conclusion is: David Maister’s thinking and strategies for professional service firms are still relevant and still influencing top management consultants at a global level—we’re just glad to have been able to help.
October 12, 2011 • by
Colin Vernon
The last 10 years
We’ve made so many amazing things over the past 10 years! I love to think back with pride at some of our first projects as stresslimitdesign in the early 2000′s — interactive training software for postpartum moms, a European chamber orchestra, lots of other small businesses [robotics parts manufacturer, process improvement consultants, electric supply company, etc]. For this era we had this placeholder site.
Technical highlights include pre-AJAX XMLHTTPRequest using iframes, pre-javascript framework library [yes I mean before prototype.js existed], pre-WordPress blogging platform, all home-engineered. I love the advances in open source since then, it means so much less engineering by us, and more engineering by tons of people everywhere.
continue reading
