E-Scribe News : a programmer’s blog

About Me

PBX I'm Paul Bissex, and e-scribe.com is my consulting business. I build web applications using open source software, especially Django. In the '90s I did graphic design for newspapers and magazines. Then I wrote technology commentary and reviews for Wired, Salon.com, Chicago Tribune, and lots of little places you've never heard of. Feel free to email me.

Book

Python Web Development with Django I'm co-author of "Python Web Development with Django", an excellent guide to my favorite web framework. Published by Addison-Wesley, it is available from Amazon and your favorite technical bookstore as well.

Colophon

Built using Django, served by Apache and mod_wsgi. The database is SQLite. The operating system is FreeBSD, on a VPS hosted at Johncompanies.com. Comment-spam protection by Akismet. Vintage topo imagery from the Maptech archive. The markup engine is Markdown.

Pile o'Tags

Stuff I Use

Akismet, del.icio.us, Django, dpaste.com, Emacs, FreeBSD, Freenode, jQuery, LaunchBar, MacPorts, Markdown, Mercurial, OS X, Postfix, Python, SQLite, Subversion, TextMate, Trac, Ubuntu Linux, wmii

Spam Report

At least 71062 pieces of comment spam killed since January 2008, mostly via Akismet.

Web Inspector, a DOM inspector for WebKit

Very cool feature from the WebKit team, coming soon to a Safari near you -- the Web Inspector:

The Web Inspector highlights the node on the page as it is selected in the hierarchy. You can also search for nodes by node name, id and CSS class name.

One of the unique features of the inspector is the ability to root the DOM hierarchy by double clicking a node to dig deeper. This lets you easily manage large nested pages and only focus on a particular sub-tree with minimal indentation.

Just like the "Hoist" feature of many outliners.

Under the Style pane we show all the CSS rules that apply to the focused node. These rules are listed in cascade order with overridden properties striked-out -- letting you truly see how cascading stylesheets affect the page layout. All shorthand properties have a disclosure-triangle to show and hide the expanded properties created by the shorthand.

A good DOM inspector is useful for picking through other people's code, and for debugging, but it's also a great learning tool. Imagine a CSS lesson that builds from the basics up through complicated cascading examples, backed up by the visual evidence of something like Web Inspector.

Top make it work, just:

  1. Download a recent nightly build
  2. Turn it on: defaults write com.apple.Safari WebKitDeveloperExtras -bool true
  3. Launch WebKit.app
  4. Ctrl-click on any element and choose "Inspect Element" to bring up the Inspector.

Very cool!

(I could be wrong, but I don't imagine that this kind of excellent but geeky functionality would have ever made its way into Safari if WebKit wasn't an open source project.)

Friday, January 20th, 2006
+ + +

Post a comment

Thanks for reading! Please note: Your comment will not appear until approved, which may take a few hours or more. Spammers will be torpedoed.


(Will not be shared)

(Optional)