Interaction design • webdevelopment • web art • photography

December 2009

24 ways - the advent calendar for web geeks [via]

November 2009

Why do we have an IMG element? [dive into mark] [via]

September 2009

Blog templates: a case study in using HTML5's sectioning elements [via]

December 2008 - Java games in 4KB or less [via]

July 2008

something new - a bit of fun with border-style: dashed;.
Exact rendering depends on browser model and window size. Warning: hypnotizing!

ContextFree.js & Algorithm Ink: Making Art with Javascript [via]

May 2008

iRi - What Every Programmer Needs To Know About Encoding [more]

April 2008

Twinkle - split screen, nice bit of JS <canvas> hackery by P01 [related] [more]

DadHacker - Donkey Kong and Me [more] [via]

White Glove Tracking - isolating Michael Jackson's white glove in all 10,060 frames of his nationally televised landmark performance of Billy Jean - and then visualizing the data in fun ways! [via]

March 2008 Single character code block commenting [via]

PixelMachine - Building a Ray-Tracing 3D Renderer from Scratch Over a Weekend [via] Awards - Nominees [via]

February 2008

POVRay Short Code Contest #5 - The animation round!
[related] [related] [via]

Game Mod - graphic design students tweak the output of the game Breakout, using Processing [related] [via]

October 2007

Naar Voren over Schaalbaarheid van PHP-applicaties

April 2007

Blobular: an SVG experiment [info]

February 2007

tecznotes - polite loops in Javascript using setTimeout() [via]

December 2006

Beyond3D - an investigation into the origin of Quake 3's fast InvSqrt() [via]

November 2006

New in JavaScript 1.7 - Mozilla Developer Center

Naar Voren - Aan de slag met .htaccess [via]

October 2006

Coding Horror: CAPTCHA effectiveness [via]

June 2006

Slashdot - Håkon Responds to Questions About CSS and... [via]

Dean Edwards - Levels of JavaScript Knowledge [via]

May 2006

Mozilla Developer Center - Canvas tutorial [via]

Starmerj's Perl RegExp Crib Sheet [via]

December 2005

reflection.js demo - nice use of Firefox 1.5's CANVAS feature [related] [via]

Dear Computer, [via]

November 2005

spot the html errors in this Google Analytics example screenshot [via]

Position is Everything - In search of the One True Layout [via]

October 2005

Flickr view big bookmarklet

I wrote this little bookmarklet to help me instantly grab the large/original version of any Flickr photo. Funnily enough, because of Flickr's consistent filenaming scheme, it also works for photos where the See different sizes option normally remains hidden:

view big (gets 1024px version; should work for most photos)

view original (gets full version as uploaded; works for photos pre-March 2007)

Drag the link above to your Bookmarks Toolbar (or right click, Add to Favorites), then click it when viewing a single Flickr photo page.

Here's the formatted source code, if you're into that sorta thing:

for (m in M=document.getElementsByTagName('img'))
  s = M[m].src;
  if (s && s.match(/static/) && !s.match(/_s|buddy/))

September 2005 - The window.onload Problem - Solved! [via]

CSS Table Gallery [via]

Code Snippets: Store, sort and share source code, with tag goodness [via]

July 2005

DOM Scripting Task Force [via]

Simon Willison: Dissecting the Google Firefox Toolbar

June 2005

Thiemo Mättig: PHP imagesharpen() [related] [via]

New bookmarklet: counters
(drag to Links-bar or right-click to Add to Favorites)

Tested in IE6 and Firefox. For every mouseclick, a small [1], [2], [3] incrementing counter will appear. Handy if you want to easily count the number of times something occurs on a page, such as the number of films you've seen of a specific IMDb actor/director (which prompted this idea in my case).

read more »

photographic favicons

Tee hee, each photo entry on this site now gets as a unique favicon a 16x16 version of the photo itself. Looks kinda neat when you open a bunch of them in tabs (try it out by middle-clicking some of the id numbers of the entries below).

I love it when ideas go from thought to successful implementation in less than 10 minutes.

Update: adding a photo to this entry so you can see it in action right here...

read more »

new feeds view

I'm having a lot of fun styling my new simple and lean feeds view. Check it out in a browser that supports modern CSS (i.e. not IE) and observe li:hover, ::after and content: attr(href) in action...

Well, it seems is offline for a bit after being sold to some unknown party, so the feeds view might not get updated for quite some time. Anybody know any other good centralized weblog update trackers? I tried BlogRolling for a while but it only seemed to indicate one new updated weblog per day.

Update 2: is back, yay! Turns out it's been acquired by Yahoo!.

PHP is 10 years old today! [via]

May 2005

Joel on Software - Making Wrong Code Look Wrong [via]

position:fixed comment form (scroll down to see the effect) [related] [via]

mod_rewrite Cheat Sheet [via]

Sets in Javascript [via]

Dive Into Greasemonkey [via]

Google Web Accelerator and web app 'delete' hrefs are a dangerous combination [related] [via]

April 2005

Processing 1.0 (BETA) [via]

Drawing lines in JavaScript | (check out the examples linked at the bottom)

March 2005

Killing referrer spam at the Apache level

February 2005

a maze puzzle written entirely in css [via]

Introduction to PHP Image Functions [via]

January 2005

Bookmarklet Crunchinator [via]

S5: A Simple Standards-Based Slide Show System [via]

How to display <ul> elements as a flat comma-separated list (now in effect in the main menu and links list in the left-hand column):

ul.links { list-style: none; margin: 0; padding: 0; }
ul.links li { display: inline; }
ul.links li:after { content: ","; } 
ul.links li:last-child:after { content: ""; }

The advantage of this is that changing the default separator from a comma to | or - or whatever now means only having to change one character in the stylesheet.

Note: Internet Explorer doesn't support the css content attribute or :after and :last-child pseudo-classes, so the commas won't appear in IE.

SQL Injection Attacks by Example [via]

December 2004

Shadow of the Beast - arcade scroller in 20 lines of javascript, by P01 [related] [via]

There's an INSERT INTO ... SET ... syntax? I had no idea.

read more »

PHP function for getting Favatars [via]

November 2004

(unfinished) code dump

Drag a pattern with left mouse button to make "sparks" appear. Animation is created by cropping, moving and fading one single .gif circle.
sen9 aka three-letter-poet
Mouse movements generate random three-letter-strings. When it hits an actual existing english three-letter-word, the word is added to the main sentence (click to start a new sentence).
sticky drag blocks
Drag-and-drop collision-detection experiment.
Multiple layers of a simple pattern rotating at different speeds (runs a lot faster in IE than in Firefox).
Trying to do something interesting with css border slants. Update: broken in IE at the moment.
Attempts at a shrinking zoom-effect by applying smaller and smaller relative (%) sizes...


Onload image fades without Flash [related] [via]

October 2004

(De)normalized data discussion at [via]

Zooiblog - Scrolling Drop Shadows [via]

fixing DHTML drag-and-drop after applying latest IE security update

read more »

Unobtrusive Javascript [via]

naar voren - structuur in de chaos

Negative(!) text-indent is in effect in the quicklinks list (over there on the left of the front page). Handy... applying a style like padding-left: 10px; text-indent: -10px; to an element makes all lines of that element appear indented except the first one.

September 2004

PHP/SWF Charts [via]

Wikipedia: Hello world program [via]

Funny Things Seen In Source Code And Documentation [via [via]]

Unpolluted - Tests for RSS Scalability (req. Python) [via]

Web development mistakes [via]

August 2004 tutorials [via]

July 2004

The Daily WTF: Curious Perversions In Information Technology [via]

fixed width font in Gmail

Does Gmail have a setting somewhere to make message text appear in a fixed width font? 'Cause if it does, I sure can't find it...

To force it to use a fixed width font anyway, I added the following to userContent.css in my Firefox profile:

div.msg div.mb {
  font-family: monospace !important;
  font-size: 12px !important;
(Firefox's 'View Selection Source' came in real handy trying to figure out these classnames; regular View Source is a pain on Gmail because the whole thing's Javascript-generated.)

using text-overflow: ellipsis [via]

How to write Firefox extensions [via]

June 2004

PHP, XML, and Character Encodings with regard to Feed on Feeds [via]

IE -> Mozilla Guide for Web Application Developers [via]

new 5K compo deadline is July 14th [via]

ODYSSEY - Universele kleurenklok [via]

Formatting SQL Statements [via] Bending the Matrix [via]

May 2004

using :visited and expression() to detect any visited link

There's been some talk (see Anne, CollyLogic) about it being possible to use the :visited pseudo-class and background-image urls to detect if a user has visited a particular link.

Luckily for Internet Explorer users, they are unaffected because IE doesn't support the [href=] selector. Unfortunately, there's another method that does work in IE and is even more dangerous...

read more »

Son of Suckerfish Dropdowns, a css dropdown menu with minimal use of js

March 2004

POVRay Short Code Contest - scene files of 256 bytes or less for the POVRay raytracer. [via Metafilter]

January 2004

A checklist of numbers I really should update since they don't work or no longer work in Mozilla Firebird (my default browser for over a year now):

10, 14, 20, 23, 25, 26, 28, 30, 31, 33, 34, 35, 36, 37, 39, 40, 42, 44, 45, 46, 49, 50, 51, 55, 56, 57, 62, 65, 66, 67, 69, 71, 72, 73, 74, 77, 79, 90, 92, 94, 95, 96, 97, 98, 99, 102, 108, 109, 112, 113.

integrating javascript into stylesheets

Ben Nolan's non-link element hovering trick for Internet Explorer (that normally only allows :hover styles on links) is pretty handy, but what really impressed me about it is his way of integrating arbitrary Javascript functions into the stylesheet itself:

body {
  background: url("
      document.body.onload = function(){
        ...custom js here...
By specifying a rule like this in the browser's user stylesheet, it might even be possible to run a custom set of Javascript commands on opening of any visited website. (Although my brief attempt at making this work proved unsuccessful.) [via webgraphics]

Older posts…