DHTML and Javascript
On Tuesday, the Mozilla Foundation and Adobe announced the Tamarin project, an open-source ECMAScript virtual machine based on the ActionScript engine used by Flash Player 9.
Frank Hecker's overvie...
@media 2006 was a blast. Great talks, great people and some of the highest production values I've ever seen at a conference (check out the bags!).
I sat on the JavaScript Libraries: Friend or Foe? ...
I gave my talk on the Yahoo! User Interface Library here at XTech on Tuesday. There's so much great stuff in the library that cramming it all in to 45 minutes proved impossible, so I ended up focusing...
I've been doing a fair amount of public speaking recently, based on the principle that the only way to get good at it is to get a lot of practise. My last two talks were a session on Django and Web Ap...
I gave a three hour JavaScript tutorial at ETech this morning, aimed at people with previous programming experience who hadn't yet dived deep in to JavaScript as a programming language. It seemed to g...
The Yahoo! Developer Network was updated yesterday with a veritable gold-mine of Exciting New Stuff, coinciding with the launch of the brand new Yahoo! User Interface Blog.
Here are some of the hig...
JavaScript's support for regular expressions is generally pretty good, but there is one notable omission: an escaping mechanism for literal strings. Say for example you need to create a regular expres...
I had the pleasure yesterday of seeing Douglas Crockford speak about JSON, the ultra-simple data interchange format he has been promoting as an alternative to XML. JSON is a subset of JavaScript, base...
Jesse Andrews (of Book Burro and userscripts.org fame) has built some awesome canvas demos for users of Safari or Firefox 1.5. He has a bar chart and some animated rectangles, but the real gem is the ...
Cory Doctorow points to America from the Great Depression to World War II: Color Photographs from the FSA-OWI, 1939-1945, with the following observation:
Unfortunately, the organizational back-end ...
Firefox 1.5 Beta 1 is out, and is the most exciting browser release in a very long time. It comes with the Gecko 1.8 rendering engine, which includes a ton of interesting new features. New in this ver...
If you have any version of Greasemonkey installed prior to 0.3.5, which was released a few hours ago, or if you are running any of the 0.4 alphas, you need to go and upgrade right now. All versions of...
Does anyone know why Wikipedia displays a redirected page at the same URL rather than using a proper HTTP redirect? Case in point: Topics in human-computer interaction actually displays the content fr...
I meant to mention this earlier, but Stuart's book, DHTML Utopia:
Modern Web Design Using JavaScript & DOM, has been published.
I worked as a technical editor on the book, and I'm proud to ha...
In Greasemonkey FUD, I highlighted the importance of Greasemonkey as a tool for fixing interface problems in "enterprise" web applications. DJ Adams has done exactly that for OSS Notes, part of the SA...
Software design patterns are useful mainly because they provide a shared vocabulary: rather than discussing the intimate details of a three layered application architecture, we say "MVC". Rather than ...
Wow, that didn't take long. Via the Greasemonkey mailing list, Forrester Research have released a report entitled Greasemonkey Primes Firefox For Embarrassment. I have no intention of paying the $49 a...
In Meme tracking with Greasemonkey, Jon Udell introduces a userscript which grabs the number of references from del.icio.us and bloglines and appends that information to the top of every page you visi...
One of my favourite panels at SxSW this year was the Flash vs. HTML Game Show, in which a team of HTML/JavaScript gurus took on a team of Flash gurus showing off pre-prepared solutions to tasks set fo...
In The architecture of intermediation, Jon Udell discusses the need for a mechanism for a high-level tool for adding custom features to web applications. In Jon's case, he wants to add a private bookm...
I'll probably write more on this later, but it seems that Google Maps is using XSL. I spotted it loading the following pages while sniffing its activity with LiveHTTPHeaders:
homepanel.xsl
loc...
Site specific browser customisations have been a a recurring theme on this site over the past six months. Thanks to the ever inventive Aaron Boodman that problem is pretty much solved. Greasemonkey is...
Forget about Google Suggest; if you want to see some really impressive dynamic web content go and have a play with map.search.ch. It uses XMLHttpRequest and a bunch of other tricks to let you smoothly...
Just a quick note: the . character in a JavaScript regular expression will never match a newline character. If you want to match any character including newlines you can use the [\s\S] character class...
Anyone who makes heavy use of the internet has run in to the password problem: dozens of user accounts on sites with varying degrees of trustability, leading to an unmanageable proliferation of userna...
Via Tim Bray, I came across the concept of Purple Numbers. In a nutshell these are permalinks attached to every paragraph on a page which, to paraphrase Tim, make every paragraph on a page a first-cla...
Peter-Paul Koch recently wrote:
In my opinion, recent advances in JavaScript theory call for the removal of the event handlers that some Web developers-and all WYSIWYG editors-deploy in large masse...
I've never had the opportunity nor the inclination to do anything with .NET; at work we use open source tools for all of our web development, and I prefer open source tools for my own personal experim...
Anyone know if it would be possible to create a bookmarklet that emulates an EyeDropper style application: as you move it around the page it shows you the hex colour code for the pixel directly under ...
It's hard to avoid the legions of custom markup systems out there these days. Every Wiki has it's own syntactical quirks, while packages like Markdown, Textile, BBCode (in dozens of variants), reStruc...
I continue to try to improve my writing. "Omit needless words" is all well and good, but identifying needless words can be a difficult task for the untrained eye. Paul Ford's Passivator bookmarklet hi...
I've just updated my SitePoint blog with a tale of Javascript debugging woe. To cut a long story short, Internet Explorer for both Mac and Windows automatically converts sane line endings in to the pl...
What can I say - the lure of the mighty dollar proved too much. I've just made my first post to my new client-side scripting blog over at SitePoint, as a paid columnist.
I'll answer the most obviou...
My second article for SitePoint has been published: Simple tricks for more usable forms. It examines a whole bunch of CSS and Javascript tricks for improving the usability of web based forms without i...
In a way I'm disappointed to see python-spidermonkey released. It's a Python wrapper around the Mozilla project's SpiderMonkey Javascript engine which allows Python scripts to execute Javascript code ...
I've been debugging Javascript today. I like Javascript as a language, but I doubt anyone would disagree that it's a horrible, horrible language to debug across multiple browsers. Firebird at least ha...
Andy's latest Javascript experiment is over a week old now but I managed to miss it the first time round. It's an interesting twist on the sortable tables idea, allowing table data to be grouped as we...
Enhancing Structural Markup with JavaScript is my first published article for SitePoint, a web development portal that is also home to some of the best web design forums on the web. I've been a big fa...
PHP.net has a new feature on their search page - a really nice implementation of an auto complete text widget in Javascript. Even better, the search page is valid XHTML 1.0 Strict and uses CSS for the...
Dunstan Orchard's great looking blog has had a whole bunch of upgrades, and some of them are pretty interesting. Firstly, he's taken my blockquote citations script and modified it to handle citations ...
I've been working on a new inobtrusive DHTML effect: easytoggle, which is an inobtrusive implementation of the common effect where links or tabs can be clicked to reveal part of a page while hiding th...
Stuart Langridge has released a couple of very neat new Javascript experiments. sorttable makes any data table on a page "sortable" by clicking the table headers. I've seen this effect used to demonst...
Peter-Paul Koch has unveiled his new site, QuirksMode.org, which features over 150 pages of cross browser CSS and javascript tips and tricks. Five months in the making, there's just too much good stuf...
Now this is cool: The joy of flush() shows how PHP's flush() function can be used to send data to the browser before a page has finished rendering. Check out Ben's demo page to see the trick in action...
Travis Beckham's podLob features 56 experiments in Flash and 19 in Javascript/DHTML. I particularly liked the Flash image transitions. I'd probably complain bitterly I came across that kind of effect ...
The CreativityGoblin dropped in on me today, and as a result I've been tackling the challenge of entering dates in to a web application. In the past, I've used DHTML calendar widgets for this purpose ...
There's a great new article up on Sitepoint describing a technique for adding auto-complete functionality to normal HTML text input fields using Javascript. The code uses a whole bunch of browser-spec...
Jesse Ruderman's Blogidate bookmarklets cycle through all of the textareas on the current page and submit their contents for validation. I suggested an alternative approach, and to my great delight ha...
I'm addicted to tabs. Several times a day, I scan down my blogroll looking for blogs that have updated since I last checked, then middle click each one to open it up in a new tab in the background. I ...
Andy Arikawa has a nice demonstration showing how multi page forms can be served up as a single page using some simple Javascript, resulting in a clearer form without loading times in between each pag...
I've lost count of the number of Javascript scripts I've seen floating around that include the equivalent of the following code snippet:
if (document.all) {
element = document.all[id];
else {
...
I couldn't resist this. Hixie has released a new version of his data: URI kitchen, to celebrate the addition of data: URI support to the latest Opera beta. In the spirit of recursion, I present this r...
I've long been a proponent of flexible web pages rather than restricting sites to a hard coded width in pixels, but now that I've started surfing at 1280x1024 I'm beginning to realise how true the sta...
I'm completely stuck on this one. When serving XHTML documents to Mozilla as application/xml+xhtml, the available DOM is for an XML document rather than an HTML document. This means it's missing the d...
I've talked about unobtrusive DHTML before, and here's a superb example of it in practise from Chris Casciano. His zeitgeist is enhanced by some clever javascript which hides and reveals tables of dat...
Via Web Graphics, ScriptyGoddess' Get ALT Info bookmarklet, which displays a list of all of the images on a page along with their alt attributes; great for testing a page to make sure you haven't miss...
One of the side-effects of switching my blog to serving pages as application/xhtml+xml to browsers that support it (mainly Gecko engine browsers) was that my blockquote citations script simply stopped...
I'm in the middle of a whole bunch of exams at the moment, but here's a quick tip that should make experimenting with and learning CSS a great deal easier. It involves bookmarklets. If you haven't see...
If you were curious enough to dig around the source code of yesterday's CSS tutorial, you may have noticed a couple of classes that didn't appear to be doing anything:
<pre><code class="cs...
By jove I think they've cracked it: Show applicable styles from Stuart and List computed (cascaded) styles from Pixy. Talk about being spoiled for choice :)...
My rambling post on CSS yesterday has had some excellent feedback, including some insightful comments on the weaknesses of CSS layouts. My call for a new bookmarklet drew responses (and implementation...
One of the things that has always bugged me about creating login forms for web based applications is that the password is passed in clear text when the user logs in. Even if you then set a session coo...
Via Eric Meyer, the best bookmarklets collection on the web. Make a bee line for the Web Development Bookmarklets and grab test styles and shell (both Netscape / Mozilla only) - shell brings up a java...
On gazingus.org, Flexible Node Retrieval introduces a new addition to the getElementsBy* family of javascript functions, getNodesByType. This general purpose function uses a callback function to "filt...
Adrian Holovaty demonstrates how standards compliant code and effectively written javascript can decimate the size of a clunky navigation interface, and make it more usable and accessible to boot: Web...
Marek Prokop has a cunning way of getting Internet Explorer to style <abbr> elements (IE, for reasons unknown, usually ignores their existence both as stylable elements and through the DOM). A c...
Spotted on paranoidfish.org/links, JavaScript: The World's Most Misunderstood Programming Language dispells some myths about Javascript and shows how it is actually a very powerful and expressive lang...
Andy has rewritten getElementsByClassName, resulting in much cleaner code and a method which can be called on any DOM element, not just the document object....
Clearing out some more tabs:
Common HTTP Implementation Problems is a W3C Note describing a whole bunch of best practises for serving up documents and designing URIs.
Iraq-O-Meter and Iraq Body ...
This Ruler bookmarklet is really cool - it shows the current coordinates of the cursor within the browser window and allows you to draw boxes and see how large they are in pixels - invaluable for twea...
I've updated document.getElementsBySelector to support CSS2 and CSS3 attribute selectors, as described here. Attribute selectors allow you to match elements based on any attribute using a variety or d...
First observation of the day: IE 5 for Windows doesn't understand element.getElementsByTagName('*') to retrieve all descendants of an element in the DOM. element.all has the desired effect for that br...
Inspired by Andy, I decided to have a crack at something I've been thinking about trying for a long time. document.getElementsBySelector is a javascript function which takes a standard CSS style selec...
More handy javascript from Andy: document.getElementsByClassName....
Dithered.com's DOM Scripts follow an interesting philosophy:
One thing that always bothered me about DHTML APIs in particular is that you introduce a whole set of non-standard properties and meth...
Andrew Hayward (a friend from Uni who has recently started blogging) has been playing with javascript's prototypes. prototype is a value related to a particular class from which all instances of that ...
Via Zeldman, Ian Lloyd (who has recently re-launched his personal blog) has released a pair of invaluable bookmarklets for dissecting the structure of properly marked up pages: Show and label divs wit...
Last week I commented that Sam Ruby's spell checking feature could be made even funkier with the addition of a javascript powered "corrections" menu. I spent a few hours this afternoon playing with th...
Sam Ruby has enabled spell checking for the preview comment tool on his blog. I wonder how it works... I've lost track of the scripting language Sam uses for Intertwingly (PHP? Python? Perl?) but I kn...
Eric Meyer's Color Blender is an incredibly useful tool for picking colours for a web site. Give it two different hexadecimal colour codes and it will calculuate and display between 1 and 10 "midpoint...
Boris Zbarsky offered a fix for my image drag bookmarklet's problems in Strict doctype pages. The problem was due to Mozilla, when operating in strict mode, refusing to absolutely position elements th...
Stuart has posted yet another inobtrusive DHTML gem - Nice Titles, inspired by a thread on web graphics....
I got a good response to yesterday's call for help on finding an HTML element's co-ordinates on a page. I ended up using PPK's findPos functions which seemed to do the trick just fine.
Here's the r...
Does anyone know if it is possible to find an HTML element's exact position on the page (in terms of pixels-from-the-top and pixels-from-the-left) using javascript? The element I have in mind is an im...
Via Leonard Lin, a nice demonstration of an enhanced HTML text area (with buttons to add tags) that works in IE, Mozilla and Phoenix. Until recently this had not been possible thanks to a long standin...
Here's a novel use of a stylesheet switcher: Providing a "work safe" edition of a weblog....
PPK's ever excellent JavaScript Section now features updated DOM compatibility tables for W3C Core and W3C HTML. The tables contain detailed descriptions of suport for DOM features in IE 5 and 6 for W...
And here's Daniel Nolan's standards compliant rollover script, which uses a different approach (based on rollover images using a standard naming convention with a suffix attached to the name of the or...
When browsing through other site's source code, some of the ugliest HTML occurs when the site uses one of the most basic javascript effects: The image rollover. There are a myriad of these scripts ava...
Mark Pilgrim is unhappy with XHTML 2.0. Since the rest of the blogging community has already provided mass commentary on his post, I'll make an observation concerning his further reading feature inste...
Craig Saila notes that the W3C have released DOM Level 2 as a recommendation and simultaneously recommended against its use in an article on News.com. Scripts should be used sparingly as they are less...
Lots of people said it couldn't be done (myself included), but evidently we were wrong. Joe Gillespie shows how to achieve vertical centering with CSS in the latest edition of WPDFD. Via Craig Saila, ...
Inspired by Adrian Holovaty, I spent an hour this morning getting dirty with the DOM in an effort to replicate his funky CSS blockquote citations effect but with links that you can actually click on. ...
Deep in to coursework now, but I just spent more time than I care to mention struggling with what should have been a very simple task; removing all of the items from an HTML select box using Javascrip...
Create Pop-Up Notes with DHTML is a disappointing new article on SitePoint which describes a technique for having a yellow Post-It style note appear when a link is clicked. The example given is for a ...
Via Stuart, Tantek has an intriguing new (valid) hack for adding HTML documentation to an external javascript file. The hack uses some clever multi-language comments to hide the HTML in the file from ...
Handy bookmark for bloggers who wish to validate: cleanURL. It gives you the URL of the current page with all &s replaced with &, ready to be posted in to a blog entry. Unescaped ampersand...
I've added Dave Lindquist's Javascript XML parser to my blog entry form using the code he posted in the discussion on webgraphics. It works an absolute treat - it even pops up an alert message telling...
Stuart has released aqTree3, an upgrade to previous aqTree versions which takes in to account some of the best ideas from both Eric Meyer's pure CSS menus and Dave Lindquist's recently released drop-d...
Spotted in my referrals today: ReadingEd.com. A promising new blog, well worth checking out for the innovative "Outside Reading" panel which uses the DOM and some very funky javascript to pull in the ...
The trend for DHTML using structural markup and the DOM continues with Using Lists for DHTML Menus. Dave Lindquist uses identical XHTML markup combined with two different sets of JavaScript and CSS to...
Javascript form button games (via CamWorld). These have to be seen to be believed....
Apple have an excellent site called Internet Developer, with articles covering a wide range of web development topics from HTML and CSS right through to Using SOAP with PHP....
ContentEditable for Mozilla is a hot topic at the moment. The main focus of the debate is this bug on Bugzilla, which gets pretty heated. Blogzilla has a good explanation of the principles behind the ...
Dynamic HTML, 2nd edition is out (via Joel on Software). I want it....
Eric Meyer now has permalinks! Now if he would only start pinging weblogs.com when he updated I (and many others) could add him to their blo.gs-powered blogroll.
The other day I complained about KP...
Scott Andrew: XML Transformations with CSS and DOM. Forget about XSLT, Scott demonstrates how CSS can be used to visually style XML documents while a bit of Javascript can add additional behaviour suc...
A handy bookmarklet courtesy of Rick on the MACCAWS mailing list:
0){cs=!document.styleSheets[0].disabled;for(i=0;i<document.styleSheets.length;i++) document.styleSheets[i].disabled=cs;};void(cs...
Spotted on youngpup: Labels.js: A Re-Introduction to DHTML (from December 2001).
Although simple, Labels.js is an example of my ideal DHTML script, and an example of what I believe the W3C had in min...
Hixie has a brilliant solution to the time zone problem in the form of a clever piece of XBL by Nicolás Lichtmier. The small script can be bound to an element containing a date in UTC and will ...
Stuart has outdone himself with his latest piece of javascript wizzardry. searchhi will highlight search terms when someone visits your page from a link on Google - all using the DOM and all without y...
Scott wants a rich text editor for Mozilla. What's more, he's willing to put his money where his mouth is and organise a fund drive to give developers a real incentive to do a good job.
At Incutio we...
Scott Johnson (and others) has been waging war against Font Bitches, aka people who use fixed (pixel) fonts on their sites making the text unresizable in Internet Explorer. Here's a new bookmarklet th...
youngpup's DOM-drag is a cross browser library for creating draggable interfaces in DHTML. I had previously been looking at using Glen Murphy's dragdiv for this kind of thing but DOM-Drag looks like a...
A thread on SitePoint lead me to these two excellent tutorials: Javascript Optimisation and Tackling JavaScript strict warnings....
Glen Murphy has released the source code to his innovative dChat PHP/DHTML chat system. I've been playing around with it this morning and it's a very nice piece of software. dChat uses an interesting ...
Stuart has updated aqTree, his excellent unordered-list-to-dynamic-tree script. The script is a clever piece of Javascript that uses the DOM to turn a nested unordered list in to a Windows Explorer st...
I've seen a few questions on various forums and mailing lists asking if there is a way of using target="blank" on links in XHTML Strict without running in to a validation error. I've put together an e...
I spent a while today over at Brent Ashley's blog chatting away on BlogChat. BlogChat is Brent's impressive DHTML chat system (backend in PHP, front end via JSRS) which allows anyone visiting his blog...
webgraphics have a new bookmarklet which measures the "weight" of a page (the combined size of the page and its graphics) and displays it along with an estimate of download times over different connec...
Stuart has added an extra innovation to his blogroll. Clicking on a link there now sets a cookie (via javascript) recording your visit - these are then used to display a 'new' icon if a blog has been ...
Using the XML HTTP Request object (via techno weenie) is an excellent tutorial covering remote XML loading capabilities in both IE and Mozilla, along with instructions on how to make SOAP requests usi...
I linked to the 5k entry Wolfenstein 5K the other day. Lee Semel, the author of the entry, has written an article describing how the impressive Javascript first person shooter works. The principle met...
Day 13: Using Real Links (or why you shouldn't use javascript:). I'm ahead on this one - Scott Andrew convinced me of the dangers of javascript: a month ago and I designed my comments system with this...
The 5k is an annual competition in which entrants must create the most impressive web site in 5k or less. This year's competition entries are now online and the quality of the entries is even higher t...
Via thelist: Javascript Selectbox Functions. Extremely useful demonstrations of how multi-line selectboxes can be used to create advanced user interface widgets with javascript, including tools to alt...
Brent Ashley: JSRS2.1 Released (from June 10th). JSRS is Javascript Remote Scripting, an incredibly powerful javascript library that allows DHTML pages to communicate with a web server without having ...
The amazing tree generator (via webgraphics, who in turn got it from CSS Discuss). This is just the kind of DHTML I really like. Place a simple nested unordered list in your document and this external...