114.milov.nl - a starry mouse-driven snowflake generator of sorts, made with Processing. Simply drag your mouse over the applet and watch the patterns form. (But don't stare at it for too long or you'll see it every second you close your eyes; believe me, I know.)
I'm so used to thinking in layers (dhtml mindset) that it's always a nice surprise to be able to move thousands of pixels around in a Java environment.
November 2003 (continued)
Pixel Snow at db-db.com - a real-time video tracking program coded on the Processing environment to create a simulation of snowing.
[via Low]
bookmarklets voor webdesigners
Naar Voren - bookmarklets voor webdesigners - my second Naar Voren article has been published! (the first one being de kunst van minimaal coderen, which coincided with the 5K contest last year.) Those of you that can't read Dutch might want to scroll down a couple of pages, where you'll find a big list of handy bookmarklets.
I quickly thought up a new bookmarklet to use as an example in the article; as it turns out, it's pretty handy:
count used tags (drag to Links-bar)
The other article in the current edition is Breng detail aan in je markup by Anne van Kesteren. Coincidentally we both refer to Simon Willison in our articles... :)
October 2003
the house that css built
3D Border Demo 2 - LEGOish drawing of a house, built entirely using css borders. Impressive! Made by Design Detector. [via DeWalick.com]
Speaking of stylish <ul> listings, check out IF THEN ELSE (who also caught the redesign bug this week)'s take on it; scroll down a bit and hover over the leftside menus. By already showing a tiny border in the default link state, and increasing the border size on hover, it looks like LEDs lighting up. Pretty colours!
Update: check out his newly added HOW-TO.
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.
Listamatic - css examples for styling basic <ul> lists. I like this trick where a fat border-left is used to create a neat hover effect. [via kottke.org]
Here's a quick (and probably incomplete) how-to on making public your feed on feeds view script while still hiding your admin scripts in a protected dir:
- copy view.php to an unprotected dir
- in the copied view.php, change
include_once("init.php");to point to the original dir:include_once("../protected_dir/init.php") - in init.php, change
is_writable( "cache" )tois_writable( dirname(__FILE__)."/cache" ) - (optional) strip all the admin links and options from the copied view.php
- read your feeds via the copied view.php script so people don't get login prompts when following their referrers :)
August 2003
milov.nl/feeds/
This is a custom view script I wrote for my feed on feeds [2252] install, removing a bunch of details/options I don't need. Most importantly: I have no desire to read people's weblog entries in anything other than the original design, so descriptions are out.
It's still basically a flat listing of recent items sorted by date, except I made it so adjacent items are grouped together in one block if they happen to be from the same feed; resulting in something that would look quite nice in a narrow side frame or searchpane (IE-users can click here to open it in theirs--can't wait for Firebird to support this).
Source (script, template and stylesheet):
view-mv.php
view-mv.inc.html
view-mv.css
(Update: I have since totally changed the look of my /feeds/ page so don't be surprised if these templates make it look rather different)
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]
July 2003
Creating slanted edges with CSS borders - neato; there's even an animated example of a vector-like pattern: by overlaying the "slant" with a slightly offset slant of similar size but coloured like the background, it's possible to create lines of any angle or length in regular DHTML -- without having to resort to IE-only VML code. [via Arthur is verweg!]
May 2003
Captain Cursor and His Cursor Styles - from this Webmonkey article dated 23 Sep 1997.
Simon Willison has been posting a couple of interesting CSS tutorials lately. [via web-graphics.com]
April 2003
<object>-tag Conformance Test - "An image marked up <img> can have replacement text, but an image marked up with <object> can have replacement markup." [via Dive Into Mark]
March 2003
PCRE: Perl Compatible Regular Expressions tutorials - to educate and hopefully not confuse you even more. positive/negative lookaheads/lookbehinds, whoa..
Ferdy Christant Blog - User intelligence detection mechanism - or, faking a progress bar with an animated gif. [via Ned Batchelder]
January 2003
The Fishbowl: HTTP Conditional Get for RSS Hackers - Advice on sending out/checking for Last-Modified and If-Modified-Since HTTP headers. I'll probably try this (even though the effect of my tiny RSS feeds on total bandwidth is negligible considering the 100KB of inline photos usually visible on my frontpage). [via Anil Dash]
December 2002
Ned Batchelder: Deleting Code - most interesting suggestion: "Don't comment out a piece of code without saying why (in the comment)"
November 2002
Here are some recent attempts at new iambald numbers that I got bored with and didn't finish. Moz/IE5+ req. as usual:
- 112-dashedspotlight.html
- 112-dragmulti.html (drag paths with mouse)
- 112-twoletters.html
- blockslide.html
Update:
Pleasant surprise, they even work in the new Opera 7 beta. Object-detection DOM-complient coding (rather than browser-agent-detection) pays off...
Two Liners Art Gallery - minimal coding on the MSX.
ugly :(
document.myForm.myInput.value
document.someImage.src
pretty :)
document.forms['myForm'].elements['myInput'].value
document.images['someImage'].src
The source code of this weblog is actually its own rss feed, meaning no need for separate html/xml output. [via Keith Devens]
P01.org - 3D Tomb II Engine Demo and more Javascript trickery at OZONE Asylum.
gamebutton arcade - tiny playable Javascript games contained within html form buttons! [via Boing Boing]
October 2002
Beta of new W3C HTML Validator - looks like this one actually does check for self-closed <meta />, <link /> and <input /> tags. [via New Architect [via Eend]]
Oh yeah... youngpup.net - How to Create Pop-up Windows
Related weblog entry: 474 [via fragment.nl and others]
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','#','$');
window.resizeTo = window.moveTo = 'sucks';
256b.htm Compo results
Whoa, poi wins again, managing to end up in 1st, 2nd and 4th place! At least I prevented him from taking 3rd, hehe...
Related entry: 1516
(note to self) Remember to rate the 256b.htm Compo entries; today's the voting deadline.
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.
The 256b.htm Compo entries have been released!
The 256b.htm compo list of entries has been released but you can't view 'em yet, and since I can't wait to show them here are links to local copies of my entries:
- Entropy [source] (249 bytes, IE-only)
Non-interactive animation using css dashed borders.
- Snowflake Generator [source] (245 bytes, IE/Mozilla)
Infinite variety of random snowflakes. Refresh for more.
- Multiplayer Keyboard Racer [source] (256 bytes, IE-only)
Find some friends, have each one select a key and start bashing on the keyboard. The player whose bar first reaches the other side of the window wins.
August 2002
256b.htm minimal coding compo deadline is sunday night... time to finish those entries!
A Teenage Apple IIgs Hacker's Notebook - sketchy notebooks are cool. [via glenmurphy.com]
kijk 's... naar voren » de kunst van minimaal coderen
the5k.org: 2002 winners have been announced!
Based on the judges' ratings, my entry Reflection got positions #6 Overall, #4 Function, #4 Aesthetic Appeal, #7 Concept & Originality. Yay!
Quick links to the entries in the Top 10 Overall list:
#1 frutiger toy
#2 OZONE color CUBE
#3 flagellate
#4 ABC Kaleidoscope
#5 Night Waltz
#6 Reflection
#7 Pixel Ninja
#8 Wolfenstein 5K
#9 b ã k í ô - mono
#10 window pong
Note: the Flash v. DHTML ratio is exactly 5:5.
Subject: enlightenment in 5k
"Reflection is wonderful..I'm a zen buddhist and I totally appreciate what this is about..at least, I find meaning in it for myself. This is wonderful."
Since lots of people end up on my forum via Google, I made it so that an "(x replies)" indicator appears at the end of the <title> whenever Googlebot requests a page, which makes the link stand out somewhat from the other results.
Still no the5k.org results but in the mean time it's nice to notice people are still rating entries (albeit less frequently), and Reflection's score jumping from 4.03 to 4.04 (ooh).
I might even try and make some sort of sequel to Reflection for the new 256b.htm Compo. Within 1/20th of the original size, of course.
Still no the5k.org final results... but, the second round of the 256b.htm Compo has started! (The Round One entries are still accessible here.)
July 2002
the5k.org announces delay of announcement. Ogh!
ntk.net on Yahoo's automatic replacing of 'dangerous' words in HTML mail messages.
Mados made a the5k.org Rank Finder bookmarklet.
June 2002
'THE 2002 5K "ANYTHING GOES" ENTRIES!' are online!
Lots of cool stuff in there, so check it out and rate 'em.
Mine's here.
Also, more interesting things to find by visiting authors' sites:
- ARSEiam
- Lim->0
- halo.gen
- ...
OZONE Asylum: some background info on that Javascript Raytracer I linked on 020620.
Check out Peterned for some more DHTML gaming fun. Cool stuff.
The Webby Awards: 2002 Nominees - 150 javascript: links. [via Low]
'Reflection'
4830 bytes
control: cursor keys or 2,4,6,8.
requires IE5+ or Mozilla/Netscape 6.
the5k.org will probably open up all entries real soon, but for those that can't wait, here's a local copy of mine.
Phew. 4830 bytes submitted.
Remember to submit your 5k entries, kids.
Color cube - interesting 3D color picker idea: a rotatable cube (drag with mouse). From kuutio.manilasites.com.
The Web Standards Project is back, in nice weblog format. [via Karma Universe en anderen]
May 2002
the5k.org minimalistic webdesign compo - year three
One month 'till deadline... get busy. 5120 bytes seems very roomy now, after coding for the 256 byte compo ;)
Related: 'hungry little frog', my 5k entry from two years ago.
April 2002
π
March 2002
drububu - don't touch the mousetrap - dhtml window/mousemove trick. [via mados]
WildMag 256b.html Compo results are up... With online viewable entries this time. I finished 4th, 6th, 15th, 18th and 27th :)
WildMag 256b.htm Compo entries are up! Click 'download all entries'. Lots of good stuff in there...
Direct links to my five entries (local copy):
- evil twin
- noise
- spike
- the fly
- wavular (thnx Paul Sowden for the name :)
February 2002
Working on my final entry (of 5) for the 256b.htm Compo. Deadline is tomorrow night. It's insane the tricks one resorts to when trying to fit something in 256 bytes. A little sample:
onmousemove="e='.style.border=event.client';eval
('a'+e+'X%200+(d=\' '+['dashed','groove','dotted'][b.s
%3]+' #666\');b'+e+'Y%200+d')"
brentashley has an interesting, downloadable DHTML chat thing going on. These things are as much fun to build as they are to use! (built one myself for a school project a year ago). [via Glish]
February :: 13thparallel :: edition, on Standards, Maths & DHTML. [via prolific.org]
Some (age-old) tags I just used for the first time: <dl>, <dt>, <dd> - to make so-called 'Definition Lists'. Handy... and fun to style with css.
And while reading the XHTML 1.0 DTD I came across even more tags I never used (or noticed) before: <del>, <ins>, <kbd>
i.am/bald 100 - digital clock using css borders (IE5/IE6/NS6)
So I was planning on making nr. 100 into this whole retrospective thing, showing thumbnails and detailed descriptions of nr. 1-99, but that felt like too much work and would've been kinda weird anyway, so I decided to just see it as another number, forego the whole looking-back thing, and get on with making the next 100 entries. But feel free to celebrate this momentous occasion in your own way...
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
WildMag 256b.htm Compo - oh yeah! a web-art compo in 256 bytes or less! That's 1/16 the size of the web4096 compo limit and 1/20 of the 5K compo. Quite the challenge...
i.am/bald 99
Anybody up for a game of 755 byte Pong? (IE5.5+ required)
How to make playing Pong interesting for 1 player: use vertical mouse motion to control the right paddle, and horizontal motion to control the left. Also, the longer you play, the faster the dot moves.
And yes, i.am/bald 100 is going to be something special...
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.
WDVL: Optimizing MySQL Queries and Indexes
[via php.weblogs.com - triple referrer bonus!!]
:: 13thparallel :: - interesting DHTML 'zine. [via idontsmoke.co.uk]
"BLOGGER - How to use includes in a blog"
Aha, so that's why there are so many weblogs using easily exploitable php include() commands: it's featured on this Blogger tutorial page. Argh... Include() is dangerous, people!