E-Scribe : a programmer’s blog

About Me

PBX I'm Paul Bissex. I build web applications using open source software, especially Django. Started my career doing graphic design for newspapers and magazines in the '90s. Then wrote tech commentary and reviews for Wired, Salon, Chicago Tribune, and others you never heard of. Then I built operations software at a photography school. Then I helped big media serve 40 million pages a day. Then I worked on a translation services API doing millions of dollars of business. Now I'm building the core platform of a global startup accelerator. Feel free to email me.

Book

I co-wrote "Python Web Development with Django". It was the first book to cover the long-awaited Django 1.0. Published by Addison-Wesley and still in print!

Colophon

Built using Django, served with gunicorn and nginx. The database is SQLite. Hosted on a FreeBSD VPS at Johncompanies.com. Comment-spam protection by Akismet.

Elsewhere

Pile o'Tags

Stuff I Use

Bitbucket, Debian Linux, Django, Emacs, FreeBSD, Git, jQuery, LaunchBar, macOS, Markdown, Mercurial, Python, S3, SQLite, Sublime Text, xmonad

Spam Report

At least 236562 pieces of comment spam killed since 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
+ + +

Comments are closed for this post. But I welcome questions/comments via email or Twitter.