The PHP WTF
milov.nl
Interaction design • webdevelopment • web art • photography
Interaction design • webdevelopment • web art • photography
The PHP WTF
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.
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.)
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...
POVRay Short Code Contest - scene files of 256 bytes or less for the POVRay raytracer. [via Metafilter]
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.
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]
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.
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]
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... :)
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.
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:
include_once("init.php"); to point to the original dir: include_once("../protected_dir/init.php")is_writable( "cache" ) to is_writable( dirname(__FILE__)."/cache" )
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]
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!]
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]
<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]
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]
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]
Ned Batchelder: Deleting Code - most interesting suggestion: "Don't comment out a piece of code without saying why (in the comment)"
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]
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]]