From the Blog:
January 5, 2012 • by
Wes Hatch
We are very fortunate to be hosting an electronics workshop in our studio (a.k.a. the Woodshop). I’ll be running things, while tech whiz Adam Brown will be providing the technical expertise. We’re going to be doing basic soldering techniques as well as showing how to read / understand simple circuitry diagrams. And, to what end? Well, so that participants may assemble their very own futuristic light-controlled frequency oscillator. From the future.
This device will make noise–simple tones and such, and the frequency of the tone will be controlled by light (if all goes well). I’m looking forward to what things people do with these. Maybe we can put our mixer to good use….? Anyhow, our hope is that, at the very least, everyone has fun learning how simple circuits work and has a good time. And they will have a good time.
Electronic Noise photo-controlled oscillator workshop
The Woodshop 5445 de Gaspé #105
Sunday January 15 at 3pm-6pm
https://www.facebook.com/events/292935607419054/
January 3, 2012 • by
Colin Vernon
Lots has happened to the extended Stresslimit family in 2011, and I’m not going to try to summarize but I wanted to share a few thoughts and pictures here. A lot of what we do involves sitting at a laptop clicking & typing away, which is not very photogenic, but I’ve pulled out a few image-worthy moments.
First, a blast from the past above—a group brainstorming and process meeting led by UX lead Francis Raymond [standing up; now Senior UX at Huge Inc in NYC] with [from left to right]: designer Kathryn Dreier [also now back in NYC]; controller Eric Fillion [concentrating on his masters in music and small historical Québec record label Tenzier]; programmer and front-end engineer Wes Hatch [continued core Stresslimit team member and expanding to Node.js for our friends Mouna & Melissa at Daily Tous les jours]; founding partner and former president of Stresslimit Justin Evans; project manager Eric Craven [now director at the Digital Literacy project at Atwater library]; photographer & designer Yannick Grandmont [continuing his freelance work with the New York Times and tons of independent music projects]; the empty chair was mine, Colin Vernon, founding partner and acting president of Stresslimit [also director of independent record label No Weapon].
Below, another great moment from this past spring, we have Joey Kudish setting up our js/css teleprompt system on iPad for the live webcast of Bu sur le web with Aurelia Fillion. We had set up a feedback console for the program manager to read real-time twitter & facebook comments, from which he could choose the most relevent and paste into a field that would show up on the teleprompt. The teleprompt itself was a simple html page which would poll the feed of comments selected by the program manager, and display them using the webkit transform to make them appear mirror image—necessary so that the teleprompter mirror would make them readable again to the host.
Another picture-worthy moment was my wife and super UX/UI designer, strategist and theorist Céline Semaan [or celinecelines in the inter-world] leading a panel conversation at South by Southwest in March on emerging Arab identities in the wake of the then fresh Arab Spring revolutions in North Africa and the Middle East. In this photo we can see the four panelists: Jon Philips or Rejon as he is known, Ayah Bdeir of recent Little Bits fame, CélineCélines with the microphone, and Habib Haddad, entrepreneur and founder of Yamli and YallaStartup and CEO of Wamda. To the right we can see Blue Sponge‘s Fady Atallah and wife Mouna Andraos behind him, and the back of technology and democracy activist and speaker Katherine Maher‘s head. Author and friend Julien Smith showed up but didn’t make it into this shot :)
Now we have a bit of a before & after montage of the new Stresslimit office/atelier space—we moved in August/September. On the right you see the woodshop that was occupying the space before, and at the left is The Woodshop [as we are continuing to call it], cleaned and empty, primed and ready to go.
A few personal notes now. First, taking a place of honour in the Woodshop now is a free piano that Wes hooked us up with from a piano repair shop that has a yearly giveaway. It is a Willis Piano, proudly made here in Montreal—locals can see the paint fading from the brick of an old advertisement at Ste-Catherine and de la Montagne as below; I’ve pulled out a detail so we can really see the old sign.
A bit of frivolity: out with the old, in with the new…. running shoes!
And now the most magical amazing thing for last…. in the early hours on December 31st, the last day of the year, my wife went into labour, and it was just a few hours into 2012 that our first daughter, Selah Grey Vernon was born. Here she is just a few minutes after being born:
And below,a bit later at home. I know the last thing the world needs is another “proud parent” spamming the world with pictures of their baby, but it’s worth it for the news just this once :)
December 21, 2011 • by
celinecelines
I can hardly believe it has been already ONE year since the last Creative Commons Salon in Montreal, on Dec. 21st 2010! ONE YEAR!! So much has happened since then, but unfortunately so little in terms of collecting, organizing, and archiving the content that was produced and presented then… I have uploaded all images captured of the event by my friend Marie-Julie Garneau. That is a first step. I will later on upload all power-point presentations to a CCMTL slideshare and share them. Also we have everything on tape! All the footage from all the talks that I’d love some help to digitalize / edit them, so ping me if interested!
CC Salon Montreal in Retrospect, a year later
continue reading
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.
