Interaction design • webdevelopment • web art • photography

September 2009

flipping typical - a way to explore the popular typefaces you have on your computer [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]

April 2008

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

February 2007

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

November 2006

New in JavaScript 1.7 - Mozilla Developer Center

June 2006

Dean Edwards - Levels of JavaScript Knowledge [via]

May 2006

Mozilla Developer Center - Canvas tutorial [via]

December 2005

reflection.js demo - nice use of Firefox 1.5's CANVAS feature [related] [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/))

LiveMarks - live view of additions, sort of [via]

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

July 2005

DOM Scripting Task Force [via]

June 2005

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 »

May 2005

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

Sets in Javascript [via]

Dive Into Greasemonkey [via]

April 2005

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

February 2005 [via]

January 2005

Bookmarklet Crunchinator [via]

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

December 2004

Shadow of the Beast - arcade scroller in 20 lines of javascript, by P01 [related] [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

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

read more »

Unobtrusive Javascript [via]

naar voren - structuur in de chaos

jslint: The JavaScript Verifier [via]

August 2004 tutorials [via]

June 2004

IE -> Mozilla Guide for Web Application Developers [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

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]

October 2003

The Javascript Raytracer has been expanded quite a bit since we last saw it... now you can even use it to build your own custom scenes (see the extensive Help-section).

September 2003 - max-width in Internet Explorer - using the IE expression() syntax to simulate the css max-width property, which works in Mozilla/Opera but not in IE.

August 2003

DHTML Lemmings - Whaaa... Amazing entry for the GoT DHTML Contest. [via 2lmc spool]

Digital Web Magazine - Keep Javascript Simple - Peter-Paul Koch argues against external Javascript libraries, which often needlessly replace already quite compact-and-compatible DOM statements.

I could've probably moved a lot of iambald-code into a single DHTML library, but never really felt the need--more so after I gave up trying to support Netscape 4. Plus, I like the fact that visitors can simply View Source a page and see the whole code without having to go searching through separate .js files. [via]

November 2002

ugly :(

pretty :)

gamebutton arcade - tiny playable Javascript games contained within html form buttons! [via Boing Boing]

September 2002

dhtml asciifire (IE4+) [by mados] - wow, check out the seemingly simple sourcecode. I like his trick for generating a custom array of characters:

char=' .:*sS#$'.split('');
instead of
char=new Array(' ','.',':','*','s','S','#','$');

I just added a little extra javascript for Internet Explorer users, to apply some handy filters to any photo featured on this page:

- Shift-click a photo: Rotate 90°, 180°, 270°;
- Ctrl-click a photo: Desaturate (remove colours);
- Alt-click a photo: Invert colours.

Try it with some of the photos below! You can even combine filters. All this by setting one global document.onclick event (no need to add specific tags to each <img>-tag). View Source to see how it's done.

February 2002

How to extend the convenience of being able to shift-click links and open them in a new window to forms:

<form onsubmit="'_blank':'_self'">

Try it with the search-form (bottom of menu column): holding shift while submitting will open the search results in a new window.

Optimizing Javascript for speed - detailing some clever and interestingly named techniques: Loop Unrolling, Reverse Loop Counting, Loop Flipping and something called Duff's Device. [via]

Wow, creating something interesting in under 256 bytes (for the 256b.htm compo) isn't easy... Here's one of the things I had to scrap: a random inkblot generator, way too big at 384 bytes... ;)

This one uses the XBM img src technique to generate a 2-bit image at run-time (example 1, 2). Could try rendering it with divs instead, but that'll probably cause quite the browser-freeze.

January 2002

Another new thing: comments are now loaded by Javascript and appear inline in the current page. So you don't have to leave the page to read the comments for a particular entry (IE-only, right now).
Reference: PPK's Import XML Document tutorial.

December 2001

Impressive self-sorting DHTML table by svendtofte.

Include the following at the top of your Javascript:

  cookies = [];
  for (c in C=document.cookie.split('; '))
Now you can access your cookies like this:

August 2001

Please don't spawn popup-windows like this:
<a href="'foo.html');">

or this:
<a href="#" onclick="'foo.html');">

rather, use:
<a href="foo.html" onclick=";return false;">

- statusbar still indicates where you're going
- non-js users (and search-engines) still end up at the correct page
- current page doesn't jump to top (faux-anchor '#' evil)
- shift- and right-click options still open the correct page

Apparently using return false; in the href can mess up some browser's popup-blocking, so watch out if you care about that (haven't noticed it myself, but then again, I almost never use popups). [via]

Shortest syntax for preloading images in Javascript (in answer to a question by Wouterd yesterday):

for(i in ['larry.gif','moe.gif',
'curly.gif'])(new Image()).src=M[i];