Listing all posts tagged code

Tweets for June 4th 2013

Tweets for January 21st 2013

December 1st 2012

June 13th 2012

A friend of mine asked if I could put together a piece of software that would allow him to have a video playlist and live video in the same screen, for use in a performance art piece. I said sure and started to dust off whatever little knowledge I had of Processing.

As usual, once I got over the usual hurdles (ex. the GSVideo library won’t accept DV capture over Firewire, so I had to use the flaky video library bundled with Processing for that, but then GSVideo 1.0 — much, much better for the video playlist part — would crash when used together with it so I had to settle for a prerelease version of GSVideo… and etecetera) I finally proceeded to pimp the code and throw everything I could think of at it: a dialog to choose the folder where the videos are and a routine to check for valid video file extensions, the ability to swap the video/live feed sides, the ability to switch between multiple cameras (ex. webcam, firewire camera, screen capture driver, etc.), the ability to correct the cameras’ aspect ratio, a fullscreen mode, the ability to reposition the images on the screen, a cool ‘swooshy’ effect for the live feed, the ability to pause or advance the playlist at random.

I’ve been using GitHub for version control, finally getting the hang of it thanks to their friendly Windows client (sorry if this makes me uncool — I had previous struggles with Git which made me wait for this sort of desktop client). I think it’s incredibly cool there’s this record of the changes I made to my code as I went along. Here’s my repository of Processing sketches.

P.S.: If you’re looking at the code in picture and wondering, I know perfectly well Java/Processing variables don’t need to start with a dollar sign ($). I just use that as a notation for global variables.

Tweets for June 8th 2012

November 3rd 2011

Little details: the menu bar

One of the things I find most satisfying while designing/developing a website is implementing those small, almost imperceptible details that can mean Quality, the Web equivalent of sophisticated stitching in clothing, and which to me feels like a particularly nice click must feel to a master watchmaker. So today, as I made a few small tweaks to this website (meaning this one, Tumblr-folk) — including better-looking YouTube embeds, fixing lightbox weirdness in pages containing embedded videos, etc — I started thinking how proud I was of the site’s navigation bar. Granted, is not as if I invented the wheel or something, and you can see the same kind of navigation in lots of other places out there. But still, I’m really pleased with the result — and with the implementation, which I think is rather clever:

As you can see, scrolling down the page will summon a fixed navigation bar, and scrolling to the very top will make it disappear under the site’s heading (which also contains navigation links). The real trick here is that everything is done with CSS, no Javascript is required to render the fixed navigation bar once you scroll past some Y coordinate:

header { display: block; position: relative; background: url("header-bg.png") repeat-x; width: 980px; height: 150px; z-index: 100; } #header_fixed { display: block; position: fixed; background: url("header-fixed-bg.png") no-repeat; width: 100%; z-index: 50; top: 0; left: 0; }

I do cut some corners in the above code, but you’re free to figure it out on your own or View Source. The gist of it is that the fixed header element (#header_fixed) is sandwhiched between the main page div and its header (which I wrote using the HTML5 element of the same name): just look at their z-index! As you scroll past the header, the fixed element is revealed underneath. Some clever PNG transparencies and you get the ‘dissolve’ effect you can see here. I found that a clean transparency gradient made that transition a bit weird so I made use of some stripes.

Another detail I added to the fixed navigation bar is that it’ll scroll you back to the top of the page if you click on it, à lá Google+. For that, I did need some simple jQuery:

$('#header_fixed').click(function(ev) { $('html,body').animate({scrollTop: 0}, 800); }); $('#header_fixed a').click(function(ev) { ev.stopPropagation(); });

The only subtlety to it is that you don’t want any scrolling to happen when the visitor actually clicked a link in the navigation bar, and that’s where that stopPropagation() event method comes in: it’ll block the event from being activated further up in the DOM, effectively overriding that first function. A useful thing that’s good to know.

July 19th 2011

jQuery Enhanced Lightbox

Do you like the ‘lightbox’ I use to display big images on my website? Now you too can download and use it. It’s free! And it is marginally superior to other lightbox scripts, which is why I made the effort:

  • You can add titles and descriptions to images;
  • Images automatically resize to fit in the browser window (but you can set an attribute to disable this).

I’ve also started a new code scrapbook, in which I’ll post more useful scripts in the future.