Archive for the 'web development' Category

Synchronize bookmarks with Delicious & Firefox

Published
by
Jaysen
on 2 May 2009
in web development
. 0 Comments

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.

synchronizing bookamrks between multiple computers and OSes using delicious

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.

delicious.com screenshot

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.

Step 3. Specify “everyday” bookmarks

specifying favourite tagsWe 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.

the 'Delicious Bookmarks Toolbar' extension replaces the Delicious Bookmark labels with favicons (mac & pc)

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.

Ragged CSS: makes life easier

Published
by
Jaysen
on 26 January 2009
in web development
. 2 Comments

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.

Millenium era HTML & CSS ‘Semantic’ era HTML & CSS 
<html>
<head>
<title>'Millenium' era</title>
<style type="text/css">
div.redSubHead {
  color: red;
}
p.greyText {
  color: #666;
}
td.columnHeaderCell {
  font-weight: bold;
}
td.oddRowCell {
  background: #eee;
}
td.evenRowCell {
  background: #ddd;
}
</style>
</head>
<body>

  <div class="redSub">sub 1</div>
  <p class="greyText">blah</p>
  <table>

    <tr>
      <td class="colHeader">A</td>
      <td class="colHeader">B</td>
    </tr>

    <tr>
      <td class="oddRow">1</td>
      <td class="oddRow">2</td>
    </tr>
    <tr>
      <td class="evenRow">3</td>
      <td class="evenRow">4</td>
    </tr>
  </table>

</body>
</html>
 
<html>
<head>
<title>'Semantic' era</title>
<style type="text/css">
.section h2 {
  color: red;
}
.section p {
  color: #666;
}
.section thead th {
  font-weight: bold;
}
.section td {
  background: #ddd;
}
.section tr.odd td  {
  background: #eee;
}
</style>
</head>
<body>
  <div class="section">
    <h2>sub 1</h2>
    <p>blah</p>
    <table>
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
        </tr>
      </thead>
      <tr class="odd">
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>
  </div>
</body>
</html>
  1. document structure inferred
  2. classes describe appearance (volatile)
  3. direct class application bloats html
  4. changing style properties causes headaches (change all instance names or they’ll be out of sync with appearance).
  1. document structure inherent
  2. classes describe content (stable)
  3. ‘container’ classes give context to descendants
  4. 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‘.

‘tall’ CSS ‘ragged’ CSS 
.section h2 {
  color: red;
}
.section p {
  color: #666;
}
.section thead th {
  font-weight: bold;
}
.section td {
  background: #ddd;
}
.section tr.odd td  {
  background: #eee;
}
 
.section { }
  .section h2 { color: red; }
  .section p { color: #666; }
  .section table { }
    .section thead th { font-weight: bold; }
    .section td { background: #ddd; }
      .section tr.odd td { background: #eee; }

It differs from the common ‘tall’ CSS formatting style in only a few (primarily cosmetic) ways:

  1. One line per rule, one rule per lineThere may be hundreds of rules, but each will only have a handful of properties.
  2. 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.

  3. 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).
  4. ‘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.
  5. 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!

Pico redux

Published
by
Jaysen
on 30 July 2007
in web development
. 0 Comments

Recently, I created an IM icon for a friend. It’s a fairly straight-forward appropriation of the classic Che Guevara icon, which normally I’d avoid but the Simon’s surname is pronounced ‘Che’, so my hands were tied.

an IM icon created for a friend
an IM icon created for a friend (whose name is a homonym for che’s)

In the process I decided to adorn my IM profiles with the mighty ‘Pico’ icon, something that had slipped my mind for years.

Pico icon 
My new IM icon (based on my Pico character)

The original artwork dates is from the flash-based pico game I made for a uni assignment at Hong Kong University in 2002. As I spent all my free (and a fair chunk of my uni) time exploring Hong Kong with my friends, the assignment was developed in a marathon 48 hour cram session in the HKU multimedia labs. 

jaysen writing pico game in HKU CS labs
The game wasn’t always called Pico 

The game itself is a pretty basic affair, but still makes me laugh when I see the artwork and animations. As a bonus, it’s fiendishly difficult (being alone in a CS lab at 4am does tend to warp a coder’s mind). Give it a go, it’s a great cure for apathy.

 
Hong Kong Island (including HKU) is an festival of stairs and elevators

The whole 2-day stint was surreal; the deadlines, the long walk along pok fu lam road, the long hours, the great music, the septuagenarian tai-chi club which trained (complete with weapons) right outside the labs at dawn (their existence was unknown to me previously and seems unreal still).

 
Pok Fu Lam road, connecting HKU campus to the halls

Hue City

Published
by
Jaysen
on 17 June 2007
in photography and web development
. 0 Comments

A project that I’ve been working on forever has, among other features, a ‘search images by colour‘ feature. This is one that I’d been excited about for a long time and had tackled on several occasions but it had never quite come together. Until now.

My previous attempts had all involved reducing each image to a weighted list of ‘popular’ colours. The search UI let the user pick from the web (216) palette, with only images possessing a healthy portion of that colour being returned in the results. At one time I even allowed users to select a secondary colour along with RGB/HSV/CMYK (synchronised) sliders, but that was as complicated to use as it sounds, so I let it go. The problem was that this ‘popular colours’ approach ignored the fundamental truth that people just don’t search for drab browns, faded yellowy-greens or most of the other colours which make up these palettes. From a colour-space perspective, when people say ‘colour’, they mean ‘hue‘.

So earlier this week (on the train) I set about re-writing the whole colour search feature to actually be a hue-based search feature (the word colour remains because ‘hue search’ just doesn’t light up anyone’s eyes, not even mine). After a few train trips and most of Saturday I had the hue-parsing algorithm implemented and had written a console app which re-indexed all the existing images in the library. I also updated the relevant portions of the batch uploading tool and the admin web site to be hue-aware. Things were going well, but I had only a vague idea of how the actual search UI would work.

Initially I thought another slider would be the best approach, but decided it was overkill after looking around at existing html slider implementations (yahoo UI library as a nice slider, but I didn’t want the added dependency for what is essentially a minor feature). Eventually I set about rolling my own control for the job. I think the hue picker widget and the hue search feature as a whole turned out really well, and will continue to improve as the number of images in the library grows.

Now I’m thinking of packaging up the  Hue Picker for free distribution. You know, just for kicks.

QuintonMarais.com launched tonight

Published
by
Jaysen
on 13 June 2007
in photography and web development
. 0 Comments

After several weeks’ work, quintonmarais.com launched this evening.

Hi-lights include

  1. .Net 1.1 to .Net 2.0 upgrade (long live the MasterPage)
  2. Amazon S3 for all image storage (dramatically reduced bandwidth and hosting costs)
  3. Google map-based location search.
  4. Creation of “Pusher”, a fire-and-forget image watermarking, batch uploading and data-entry smart client app (to create the 12+ thumbnail and preview versions of each image).
  5. Creation of “S3 Viewer”, a smart client app for viewing/maintaining the thousands of S3 items and buckets which support the site.
  6. ‘New Images’ atom feed (surprisingly easy to get going).
  7. SQL Server 2000 to SQL Server 2005 upgrade (Common Table Expressions are the goods).
  8. GeoRSS feed to (hopefully) ensure photographs appear in search results as geo-tagged objects.
  9. Tag-clouds for hierarchical image categories.
  10. Colour search (still beta, currently rewriting the search algorithm to favour colour coverage rather than colour fidelity).
  11. Cleaner UI design.
  12. Xhtml transitional doc type with vastly improved markup validity (flash still causing some issues here). Some tables remain, to be slowly phased out when I have time.
  13. Flash 9 homepage scroller (flash cs3 didn’t play nice with my old flash 6 swfs).
  14. Self installed and configured SSL.
  15. New hosting provider (discountasp.net, very impressed so far)

All told the upgrade took about 3 months’ worth of train trips, nights and weekends (around my day job). It’s meant an overall reduction in sleep, but ultimately worth it. Now I have just to force myself to stop tinkering with it.