The web is awesome, but managing URLs is a pain. That pain is magnified if you use multiple machines and made worse if you use multiple operating systems (not to mention home vs. work, desktop vs. phone etc). There are roughly a million ways to handle this problem. Here’s mine.
Step 1. Move bookmarks to delicious.com
About 2 years ago I moved all my bookmarks to delicious.com, a ’social bookmarking’ service which stores your bookmarks and enables you to access, share and organize (via tagging) these bookmarks over the web. Over time it’s become second nature to save anything interesting I find to my delicious account.
Step 2. Install delicious.com browser extension
Whilst delicious (and its ilk) can be used via the web interface, things really get interesting when you install the relevant browser extensions. These give you an experience much like regular browser-based bookmarking, but with synchronization and superior bookmark search.
We all have bookmarks we use everyday. Delicious allows me to group mine together by applying a common tag (I use the tag “me”). I then tell the Delicious Bookmarks extension for firefox that the “me” tag denotes my favourites and viola! All my everyday bookmarks appear in Firefox’s toolbar. Better still, any additions or edits I make to this list of favourite bookmarks are propagated across all my browsers and computers.
Step 4. Bring on the favicons!
Although the Delicious extension for Firefox is great, it pays too much head to Firefox conventions for my liking. Specifically it doesn’t display favicons on mac (firefox doesn’t do toolbar favicons on mac by default) and doesn’t offer the ability to hide toolbar labels (which take up space). Luckily Firefox is highly customizable so I’ve managed to put together a simple Firefox extension which overrides these design decisions (and fix an intermittent “huge favicon” issue on mac Firefox). Behold: my Delicious Bookmarks Toolbar extension.
By the way, if you thought this blog post was written simply as an excuse to link to that simple extension, you’d be right.
Most lay-people see photography as the cut-and-dried act of capturing the world “as it is”. Ironically, the simple and necessary action of framing a photograph instantly renders the result subjective (’un-photogenic’ subjects are typically pushed out-of-frame). This creative choice built into the camera’s design is part of the appeal of photography. However, we occasionally encounter entirely photogenic scenes that we wish to convey in their entirety. Luckily, there is a type of photograph that has no edges at all; the spherical panorama.
This spherical panorama captures the complete scene; from the zenith (above my head) to the complete horizon to the the nadir (under my feet). No photographic paraphernalia (camera, tripod, photographer) distracts the viewer from the scene. What kind of magical camera does this? Well, with the right know-how, software and technique any camera will do. This is because spherical panoramas are simply an amalgamation of many regular photographs. Here’s the kit I used to make my example panorama.
To get started we need a sequence of regular photographs which cover the entire scene. Typically this involves taking several ‘rows’ of images, each containing a constant number of images (columns). The number of rows and columns required depends on the lens used but nevertheless the angle between rows should be consistent, as should that between each column (made easy by using a panoramic tripod head, e.g. Nodal Ninja 5). In addition, a zenith shot (directly up) and two (complimentary) ‘nadir’ shots (directly down) are required. Here’s the sequence of images I used to produce my sample panorama.
zenithsky rowhorizon rowground rownadir (taking two at opposites enables later removal of feet & shadows)
The rest of the spherical panorama creation process is all in software. I plan to cover the details in a future screen-cast, but for now here’s a quick overview:
Ensure ‘consistent colour’ across shots by correcting white-balance discrepancies (tip: remember to lock white-balance, exposure, shutter-speed, focal length and focus while shooting). Also correct any vignetting (dark edges) and chromatic aberration (coloured fringing on detail). For these tasks I use Canon’s bundled DPP software (if Lightroom’s vignetting correction tools were better, I’d use it instead).
Import the corrected images into a stitching tool (after trying a few apps I finally ponied up for a copy of PTGui). By creating control-point pairs (i.e. locating similar features in different photographs) I give PTGui the necessary information to correctly align, warp, composite and blend the all images (except for the zenith and nadir) into a single ’stitched’ equirectilinear result.
In photoshop I work a little magic to combine the two original nadir shots (which both contain my legs and feet) into a single feet-free nadir image
Using PTGui again I produce another equirectilinear image, this time containing only the warped ground (from the composited nadir) and sky (from the zenith shot)
Back in photoshop I combine both equirectilinear images into a single image (’patching’) and apply any necessary retouching (e.g. making horizons dead-level and apply colour-corrections) to produce the pièce de résistance: the final (70+ megapixel) image.
patching the warped nadir and zenith onto the stitched panorama in photoshop
At first glance this appears to be a regular photo, but in fact it covers 360° horizontally and 180° vertically (i.e. the entire scene). So how does it justify the ’spherical’ and ‘edge-less’ tags? Well, the most effective way to present such an image is to wrap the rectangular image around an imaginary sphere and give the viewer control of a virtual camera placed at the orb’s centre. Rotating the camera simulates ‘looking’ in the original scene. There are no limits on where the camera may look and no visible edges or seams.
the distortion in the equirectilinear image disappears when the image is wrapped around a sphere (inside which the viewer’s virtual ‘camera’ rotates)
Spherical panoramas really take on a new dimension when combined with software like the PangeaVR iPhone app I’ve mentioned before. Wherever I am I can show friends exactly what my favourite places are like by handing them the phone and saying “drag the image with your finger”. No other explanation, instruction or intervention is required for me to show friends overseas what the beach I learned to surf at is “really like”. Of course, the panoramas can also be viewed in a web browser. Below are links to a few panoramas I’ve created in the past few months from images taken on my Christmas holiday back home.
Hopefully I’ll have more to add to my panoramas page soon.
The web community is generally coming (or has come) to accept that ’semantic’ class naming conventions (’old school’ elements with classes describing content not appearance) are preferable to the 'boldGreyLink' type conventions popular around the millennium.
changing style properties causes headaches (change all instance names or they’ll be out of sync with appearance).
document structure inherent
classes describe content (stable)
‘container’ classes give context to descendants
appearance (volatile) is abstracted from structure (stable). Redesign is anticipated & therefore easier
One pillar of the ’semantic’ technique is the sparing application of class attributes, primarily to container elements. Elements are ‘caught’ using CSS ‘descendant’ selectors (multi-part) which target hierarchies rather than using simple class selectors which require a directly applied class attribute. Using descendant selectors respects the hierarchical nature of the DOM but makes writing bulk CSS quite tricky. Why? Mainly because CSS stylesheets (and style blocks) are fundamentally rule lists, but the DOM elements which our descendent selectors target are obviously trees. How do we bridge the gap between these fundamentally different structures?
Enter ‘ragged’ CSS
In 2006 I (then a contracting developer) found myself filling the shoes of a fantastic design contractor whose contract was up but sadly not extended (project managers eternally underfund and misunderstand UI). I was the new ‘CSS guy’ for a project with scores of developers, hundreds of pages and crippling compatibility/accessibility requirements. I wasn’t really qualified for the task, but my predecessor gave me a CSS tip that got me through: “don’t sweat the properties, focus on rule hierarchies”.
This rule-centric approach is most clearly evident in the CSS formatting style I picked up on that project and used ever since; a style I call ‘Ragged CSS‘.
It differs from the common ‘tall’ CSS formatting style in only a few (primarily cosmetic) ways:
One line per rule, one rule per lineThere may be hundreds of rules, but each will only have a handful of properties.
Indent CSS rules to represent target element hierarchyA block of markup (e.g. a calendar) will typically involve several rules (perhaps dozens). Indenting rules more clearly indicates how their properties will cascade.
Make rules for ‘landmark’ elements (empty rules if necessary)Adding an empty rule for element’s whose classes are used in subsequent selectors makes indentation hierarchy far clearer (improves readability).
‘namespace’ your rules to avoid conflictClass names may be repeated on large projects unintentionally. Target ‘abc’ class elements inside ‘xyz’ class elements using a ‘.xyz .abc’ selector rather than a global ‘.abc’ selector to avoid tainting someone else’s unrelated ‘abc’ class.
Avoid element prefixes sparingly in your selectorsDon’t use a 'span.content' selector where a plain '.content' selector will do. Dogmatic prefixing (i.e. increasing specificity unnecessarily) makes your rules unnecessarily vulnerable to otherwise inconsequential markup changes (changing the span to a div for instance).
I’ve been using this formatting style for a few years now and it’s made complex CSS development a snap (browser quirks aside). If you’re writing ‘tall’ CSS (or using a tool which generates it), give ragged CSS a go on your next project. Your future self (and/or your successor) will thank you for it!
Recently an American friend of mine was asking about the basics of Australia’s geography over lunch. When I couldn’t make my points clearly using condiments and cutlery I turned to the Google Earth iPhone app (also worth a look is Earthscape). I find myself reaching for the iPhone mid-conversation quite frequently these days. Though awkward (or rude) in a 2 person chat, I find judicious interrogation of the inter-tubes dramatically elevates casual debates, planning sessions and meandering conversations between 3+ people (which this was).
Anyway, the conversation inevitably turned to questions about ‘the outback’, the facet of Australian life which seems to intrigue other nationalities most. Questions typically follow the “Did you live in the outback?” “Have you been there?” “What is it?” “Pet kangaroo?” line (No, not sure, umm, dog person). My difficulty in answering ‘outback’ related questions is that, like most Aussies I know (other South-East Queensland types), I have no firm definition of ‘the outback’ to go on. I’ve camped in some arid and desolate spots (by European and American standards) in Australia (technically not ‘outback’ due to their proximity to the coast), but I’ve never been close to or ‘beyond the black stump‘, let alone into the ‘Never Never‘.
Living in a a disconcertingly rainy country has made me think about the Australia’s arid interior more and more. To keep my hands busy during a skype chat this morning, I fired up the Google Earth desktop client to check out Google’s satellite imagery resolution for the Australian interior. Not bad as it turns out, particularly in areas in the many stripes of 60cm DigitalGlobe imagery (red-tinged for some reason). Even in areas covered by the lower resolution CNES Spot satellite images, the novelty of being able to make out individual trees soon gives way to wonder at the strange patterns visible from space.
Wind, water, sand, salt, erosion and fire have all shaped the interior with scant evidence of human existence. In particular, note that the Nullarbor shot above covers an area roughly 112km x 63km with no buildings, rivers, lakes or hills. Now that’s desolation!
Whilst assembling the above screen-grabs I noticed that Google Maps seems to use a different database of satellite imagery than Google Earth at zoom levels below 13. This leads to a slightly odd disconnect when viewing Uluru in google maps at zoom level 12 and then zooming once to view Uluru at zoom level 13.
True to form, the wordpress team had managed to release several point releases since my last post, making this the 3rd post in a row preceded by a wordpress upgrade. My goal is to have the next post up before WordPress 2.7 hits. I’m doomed.
After my fourth month of constant hard-drive space scavenging (in both OS X and boot-camped Vista) I finally bit the bullet and initiated the oft-delayed drive upgrade. It also seemed like the least irritating time to do the similarly deferred Tiger-to-Leopard upgrade too (hitherto postponed due to space and enthusiasm scarcity).
At this point you really hope the rest of the upgrade guide is up to scratch
Everything went pretty smoothly (except for a last minute scramble to find a size 00 philips screwdriver). ExtremeTech’s Upgrade your macbook pro’s hard-drive came in very handy, with only a few deviations necessary to effect the switcheroo.
Here’s a quick list of the necessary bits and pieces I ended up using:
Having the guide on the iPhone proved very handy, and luckily I had a size 0 phillips screwdriver to hand (the recommended size 00 didn’t seem right for the job). Now I’m cruising along nicely with fresh Tiger/Vista installs and throwing RAW files around without a care (hard-drive rationing is like solitary confinement, it warps the mind).
We all have bookmarks we use everyday. Delicious allows me to group mine together by applying a common tag (I use the tag “me”). I then tell the Delicious Bookmarks extension for firefox that the “me” tag denotes my favourites and viola! All my everyday bookmarks appear in Firefox’s toolbar. Better still, any additions or edits I make to this list of favourite bookmarks are propagated across all my browsers and computers.
zenith
sky row
horizon row
ground row
nadir (taking two at opposites enables later removal of feet & shadows)
Ensure ‘consistent colour’ across shots by correcting white-balance discrepancies (tip: remember to lock white-balance, exposure, shutter-speed, focal length and focus while shooting). Also correct any 
Import the corrected images into a stitching tool (after trying a few apps I finally ponied up for a copy of 
Back in photoshop I combine both equirectilinear images into a single image (’patching’) and apply any necessary retouching (e.g. making horizons dead-level and apply colour-corrections) to produce the pièce de résistance: the final (70+ megapixel) image.
