flipping typical - a way to explore the popular typefaces you have on your computer [via]
milov.nl
Interaction design • webdevelopment • web art • photography
September 2009
July 2008
something new
117.milov.nl - a bit of fun with border-style: dashed;.
Exact rendering depends on browser model and window size. Warning: hypnotizing!
April 2008
February 2007
November 2006
June 2006
May 2006
December 2005
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/))
{
void(window.open(s.replace('.jpg','_o.jpg'),'_self'));
break;
}
}
September 2005
July 2005
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).
May 2005
April 2005
February 2005
January 2005
December 2004
November 2004
(unfinished) code dump
- sparks
- 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.
- bgrotate
- Multiple layers of a simple pattern rotating at different speeds (runs a lot faster in IE than in Firefox).
- slanty
- slanty2
- Trying to do something interesting with css border slants. Update: broken in IE at the moment.
- zllm
- zllm2
- Attempts at a shrinking zoom-effect by applying smaller and smaller relative (%) sizes...
October 2004
August 2004
June 2004
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...
January 2004
A checklist of i.am/bald 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("
javascript:
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
svendtofte.com - 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 paranoidfish.org]
November 2002
ugly :(
document.myForm.myInput.value
document.someImage.src
pretty :)
document.forms['myForm'].elements['myInput'].value
document.images['someImage'].src
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="this.target=event.shiftKey?'_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 scottandrew.com]
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('; '))
{cookies[(cs=C[c].split('='))[0]]=unescape(cs[1]);}Now you can access your cookies like this:alert(cookies['myCookie']);
August 2001
Please don't spawn popup-windows like this:
<a href="javascript:window.open('foo.html');">
or this:
<a href="#" onclick="window.open('foo.html');">
rather, use:
<a href="foo.html" onclick="window.open(this.href);return false;">
benefits:
- 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
Update:
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];