Download and install

Download latest version: Ollicle Reflex

Double-click the unzipped .nnwstyle file and NetNewsWire will copy it to where it needs to be.

~/Library/Application Support/NetNewsWire/StyleSheets/

This style uses JavaScript to do some things CSS alone cannot. Make sure you enable it

• NetNewsWire Preferences
  • Browsing
    • News Items
      • Enable JavaScript

Requirements

I have not tested this style extensively with anything other than the current version of NetNewsWire (3.1.3) and Safari 3 (which determines the version of WebKit NetNewsWire is sporting).

Note: styles for NetNewsWire 3 do not affect the Combined view - only the Traditional and Widescreen views.

Key features

• Simple clean style

  Doesn’t get in the way of your choice of feed reading font and size. New for Version 6: added some simple styling to make data tables easier to read.

• Clever image handling

  Large images are scaled to fit available space. New for Version 6: automatic alignment of smaller images, avoiding awkwardly squashed text.

• Automatic line height

  Optimises line spacing of the feed text to suit your window and font size. More about this: Flex CSS with JavaScript for better reading

• Del.icio.us Tagometer

  The number of del.icio.us bookmarks for the linked webpage is displayed along with the most popular tags they assigned to it. New for Version 6: a little hackery to see through feedburner urls and a more compact and stylish look.

• Tidy diff display for recent feed changes

  With Highlight Differences checked in NetNewsWires general preferences you can toggle between the current and previous version of a changed feed. New for Version 6: feed changes are highlighted in a vertical bar in the left hand column. Hovering the bar with your cursor highlights additions inline, clicking it hides additions and reveals the deleted content.

• A choice of layouts

  Two layouts to choose from: One column (default for NetNewsWires Widescreen layout) with the feed info in the footer, or two column (default for the Traditional layout) with the feed info persistent in the right hand margin. New for Version 6: now possible to set a default irrespective of your choice of NNW layout (see below).

• Dark or light theme

  Choose between the default white background or the image enhancing black background. New for Version 6: changed method for setting black as the default (see below).

• Per feed layout and theme prefs

  Clicking the little button in the top right hand corner of the feed pane toggles the preference pop-up for your currently viewed feed. Cookies NetNewsWire shares with Safari are used to store your selection of layout or theme for any post from that feed. New for Version 6: the preference pop-up now scales nicely when you make the feed text bigger and smaller with Command +/-.

• Customisable defaults

  New for Version 6: If you don’t like my selection of defaults in Ollicle Reflex I have made a few of the prefences more easily configurable. I have removed the unintuitive hack for changing the default theme (adding “Black” to the filename of the the nnwstyle package). Now you will need to roll up your sleeves and launch your text editor.

  Locate the Ollicle Reflex style package ~/Library/Application Support/NetNewsWire/StyleSheets/Ollicle Reflex.nnwstyle reveal it’s contents by right (or control) clicking it and selecting “Show Package Contents”.

  At the top of the contained “javascript.js” you will find values set within the curly brackets of var userPref = {};. To set a default layout you need to first uncomment the line by removing the // from the start of the line. Otherwise make sure you only edit what falls between the colon and the comma, and ensure you leave the quotes around the layout and skin names. Note the last item shouldn’t have a trailing comma.

  To see your changes take effect it is necessary to relaunch NetNewsWire so it can update it’s cache of the style.

  Maybe someday I’ll try my hand at making a small AppleScript app to edit these options in a more friendly manner. If in the meanwhile you manage to break it (the JavaScript elements of the style will stop working), you can always come back here and download the style again.

Screenshots

I’d love to have a screencast to give you a better preview of the style. For now here’s a few screenshots that illustrate the font size and layout flexibility. Although, rather than waste time looking at them, I recommend scrolling back up the top of this page and downloading it.

Widescreen NetNewsWire layout

One column layout by default

Larger font size

Two column—smaller font size

Traditional NetNewsWire layout

Two column layout by default

Larger font size

One column—larger font size

Black background

Scripting image layout is tricky

The logic executed to determine if an image should be scaled, aligned or left inline is much simpler than my initial somewhat ambitious scheme. I was driven crazy trying to get my head around the increasingly complex possibilities that cascaded from attempting to consider how to handle clusters of images such as those often found in the FlickrBlog.

After sufficient frustration I decided to focus on the more common occurrence of individual images of unpredictable dimensions alongside or within a portion of text. In a nutshell, the trade-off is that images that ought to sit nicely alongside each other in the one row are now forced under one another vertically. Very occasionally this looks broken.

Many bloggers continue to use double line breaks instead of regular paragraphs. I’ll give them the benefit of doubt by pointing my accusatory finger at their blogging tools rather than their shoddy HTML. Regardless, this made the task of ensuring associated text and images remained close in the layout particularly challenging. I delayed the release of this style until I came up with a means to get the better of this puzzle.

Why spend some much time on a simple looking style?

The consistency and convenience of feed reading comes with a price. In the thoughtfully constructed HTML content of a RSS feed I get the author’s words and images. I also get the emphasis and structure of their sentences and also links to their references. I get their meaning. I don’t get their CSS.

Many readers, who consider themselves visually or design literate, appreciate the aesthetic of the original artifact of the authors website. Many web authors are dismayed to see the effort they put into the presentation of their posts wasted to feed readers who never see the intended context of the site itself. These people don’t need help finding each other. For everyone else, there is work that can be done. The decisions that go into CSS in a modern website address more than just aesthetic vision of the author.

CSS is the primary tool for removng the obstacles to easy reading. A website built within a given layout and structure provides enough restrictions to widths and heights that effort put into molding the text to best fit it’s space is worthwhile. Outside of the cushy environment of the homepage, in the diverse wilderness of RSS and Atom consumption, these constraints lose relevance. Therefore, outside of the author’s site, so does the author’s CSS.

A feed reader style like Ollicle Reflex, if it is to to fulfil the needs of a discerning reader, needs to be much smarter than a style for an average blog. Not only is the content presented by a feedreader more varied (and often broken) than any given site, the user of a good feed reader has a great deal more control over how how these feeds are viewed.

These diverse demands, and my curiosity, have driven me to turn to JavaScript in Ollicle Reflex. CSS alone struggles to keep the content looking consistently considered.

Scratching my own back

Like NetNewsWire, Ollicle Reflex is free. I build it chiefly to scratch my own itches. That said, I love to know others are using it so bring on the feedback!

To all of you who have been suffienctly tempted by my words above to click out of your feedreader to load ollicle.com to best appreciate it’s full artistic intent… Lets say I have put a little more effort into Ollicle Reflex than my site in recent years :/ Might have to get back onto that.

Updated the download link above to version seven:

• User preference for line-height now works (Thanks Matt).

• Added user preference (in javascript.js) to hide/show the del.icio.us tagometer (Good suggestion Jonathon).

ollicle-wittrodt1.zip

Installation

Double-clicking the contained Ollicle Wittrodt.nnwstyle package will prompt NetNewsWire to install the style in your Library.

Select Ollicle Wittrodt from your styles menu to use it.

Note: If you haven’t already, you need to enable JavaScript for news items in NetNewsWire’s preferences for this style to do anything remotely special:

• NetNewsWire Preferences
  • Browsing
    • News Items
      • Enable JavaScript

How it works

One line of JavaScript! Despite calling it a stylesheet it does not include a single line of CSS, just a very trim template file:

<div id="newsItemTitle">[[newsitem_title]]</div>
<script type="text/javascript">
    location.replace(document.getElementById('newsItemTitle').firstChild.getAttribute('href'));
</script>

Coming soon

For those of you who prefer their feed reading to be clean, consistent and snappy, I have been working on a slowly evolving and revamped version of Ollicle Reflex. It has some subtle niceties I am very much looking forward to sharing, so keep that browning ollicle.com feed in your list for a little longer yet.

For details you can jump straight to the documentation/demo. The following ramble is a little about why I think the plugin is useful.

Big A

There are a variety of strategies I have used at work to enlarge the ‘hot’ or ‘clickable’ area of a links to something more substantial than the regular familiar text link.

• Resize the <a> with CSS
• Wrap it around an image
• Link more text
• Duplicate the link on multiple elements

With HTML alone there is a significant limitation common to the above. While producing valid code, only inline elements may be included inside the <a> element. As an inline element an <a> can never contain a <p>, <h3>, <li> or any other block element.

Using your ninja-like CSS knowledge you can trick a <span>, <em> or <strong> into looking just like their more important blocky friends and wrap this markup in one big link to make it all clickable. Although the result will be valid code the browser bugs you will uncover can be tricky. Long passages of text in links is an accessibility no-no and can look damn nasty without the supporting CSS.

Time to turn to JavaScript for help.

In the bad old DHTML days you may have seen something like:

<div onclick="window.location='http://tablelayout.com'">Some stuff...</div>

While providing the ‘big link’ I am looking for; This is many flavours of bad. The ideal solution is one that does not influence my HTML markup at all.

Instead we can use the JavaScript to add the desired ‘clickability’ on top of nice semantic HTML. For example should I wish to make clicking anything contained by the <div> be equivalent to clicking the link it contains:

<div>
    <h4>Title of some stuff<h4>
    <p>Introductory description of stuff... </p>
    <p><a href="more-stuff.htm">More</a></p>
</div>

Using JavaScript to add the additional behaviour unobtrusively ensures you site is not broken without it and avoids the error prone redundancy created of duplicating the URL in HTML and JavaScript.

In essence this is what jquery.biggerlink does. Additionally it adds some classes to help you add some CSS to provide some link-like feedback to your newly fattened links, such as hover or focus.

Have a look at the documentation - it incorporates a simple demo at the bottom of the page.

I wrote this plugin for use at work. It is the product of a few Friday afternoons. During this time my employer, Fusion, allows me and my fellow Fusionites to work on the internal projects that interest us most.

What next

Suggestions that might improve the usefulness or efficiency of this code are very welcome. It would be a great way for me to directly demonstrate to my employer one of the benefits of sharing work our work in this way.

Download: jdefault2.zip

Image resizing in an existing NetNewsWire style in a snap

jDefault is a bare-bones NetNewsWire style that loads my image resizing JavaScript, and the jQuery library it uses, into the default NetNewsWire template. To ‘enable’ any existing style built without a custom template.html file, simply replace the contained stylesheet.css with the corresponding file from your selected style.

To expose the contents of the package, right (or control) click on jDefault.nnwstyle in the Finder and select ‘Show Package Contents’. Your existing NetNewsWire styles can be found in your user Library directory:

~/Library/Application Support/NetNewsWire/StyleSheets/

Double-click your custom .nnwstyle file and NetNewsWire will install it by making a copy of it into this directory. If you are editing a style that is already installed you may need to restart NetNewsWire for the changes to take effect.

A reminder: if you haven’t already, you need to enable JavaScript for news items in NetNewsWire’s preferences for this style to do anything remotely special:

• NetNewsWire Preferences
  • Browsing
    • News Items
      • Enable JavaScript

Building your own JavaScript enabled nnwstyle with jDefault

Of course if you are feeling more adventurous, you may wish to go further and use this template as a mere platform for a fresh custom style. Rename the .nnwstyle file to a name that takes your fancy. Replace my details in the contained Info.plist and share it with the world! I’d love to see what you come up with, and while you are in a sharing mood I’m sure Brent would too.

If you are making frequent changes it is worth making a static version of a feed to test in Safari. Right (or control) click in the feed display pane in NetNewsWire and select ‘Copy HTML Source’ is the easiest way to grab the HTML you need. You will need to change the path to the imported stylesheet to suit your set-up.

More on the imageFit jQuery plugin

The contained jquery.imagefit.js is a complete rewrite of the JavaScript used in my previous NNW styles. For general tidiness and simple reuse it is written as a jQuery plugin. In a small way this is a sneak peek at the upcoming version of Ollicle Reflex.

It strikes me with all the web based feed aggregators popping up, this script may have a use on the web itself to keep unruly syndicated images under control. I am yet to test it in non-webkit browsers. In theory at least it ought to work in Firefox - but in it’s current form it won’t work in browsers that don’t support the CSS property max-width. Certainly not IE 6.

Please let me know if you give jquery.imagefit.js a spin elsewhere. If it holds up I’d like to add it at some point to the growing selection of jQuery plugins.

Uploaded version 2 of jDefault. The updated package includes a slightly modification to jquery.imagefit.js.

Although I hadn’t seen problems with the previous version in NetNewsWire, the small change fixed an issue in Safari that became clear when I put up the demo page for jquery.imagefit.js earlier today.

18 November 2007

Chris Messina has stepped up and adapted my imageFit plugin for use as a WordPress plugin. WP-Imagefit proportionally resizes images to fit your blog template.

So if you’re not chained to Movable Type like me (rebuilding this blog in MT 4 is hurting…) and are fond of occasionally posting overly wide images to your WordPress driven blog give it a go.

The good news is amending this only requires a small JavaScript amendment. I’ve updated Ollicle Reflex (version 5) to include this fix (no other changes).

I’m looking forward to experimenting with the Webkit update in my NetNewsWire styling endeavors. I expect to find many of the old frustrating bugs squashed. Fingers crossed too for poor old Brent, that some of the crashing bugs that have been plaguing NetNewsWire 3 combined view are resolved. Although, sadly, it will be some time before the version of Webkit bundled with Safari 2 can be disregarded.

Another update with a bunch of improvements: Ollicle Reflex refined

Demo of jquery.autolineheight.

This is a rework of a script I wrote a while ago to do the same thing. You can read more about it and its purpose in the original post.

Download

• jquery.autolineheight.js version 0.1

Do what you like with this script. Of course, credits and/or links to ollicle.com are always welcome and encouraging!

Requirements

• jQuery version 1.1.2

• jQEm version 0.2

That original script didn’t require a JavaScript library to work. As a jQuery plugin this version obviously does, but with significant advantages as a result. My code for determining the relative font size has been discarded it favour of another jQuery plugin jQEm. My plugin inherits the ability of Dave Cardwell’s clever code to respond to changes in font size.

Usage

The best thing about packaging a reusable piece of JavaScript as a jQuery plugin is how easy it becomes to reuse it. With jQuery, jQEm and jquery.autolineheight all linked into the HEAD of your HTML page, very little further code is required to assign the behaviour to the desired element or elements in your page.

For example:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqem.js"></script>
<script type="text/javascript" src="jquery.autolineheight.js"></script>
<script type="text/javascript">
     $(function(){
        $('#flexme').autolineheight();
     });
</script>

Where ‘flexme’ is the id of an element in your page whose contained text is to be fine tuned.

Settings

The above code will adjust the line-height based on a few sensible, easy reading, defaults written into the plugin for convenience. You may adjust these values to your taste and circumstance when you assign the behaviour to an element, for example:

$('#flexme').autolineheight({minWidth:16,minLineHeight:1.2,ratio:.03});

Note the separating commas and the extra set of curly brackets.

minWidth and minLineHeight combine to define the ‘tightest’ end of the scale. These are the default values:

minWidth: 15
minLineHeight: 1.4

If the assigned element has a width less than or equal to the minWidth (in ems) the value of minLineHeight is assigned as the line-height. If the element has a width greater than minWidth the line-height is increased with a multiplier:

ratio: .02

The larger the value of ratio the ‘faster’ the line-height will increase as the element is widened.

Inheriting CSS

It’s worth highlighting that this script will only override the line-height of elements it is explicitly assigned to. Contained elements will only inherit their parent’s line-height if they don’t have a line-height of their own set. For example with this CSS:

body {line-height: 1.5}
p {line-height: 1}

And this HTML, where the autolineheight script has set the line-height of the div to 1

<body>
    <div id="flexme" style="line-height:2">
        <p>Some text</p>
        <p>Some more text</p>
    </div>
</body>

The paragraphs will have a line-height of 1 as set in the CSS. Overruling both the line-height of the body and its parent div. If I was remove the CSS assigning the line-height to the ps they would inherit their line-height value from the next closest parent - in this case the div.

You can apply autolineheight to the ps directly with $('p').autolineheight(); but that is less effecient than having the text elements inherit their line-heights from a containing div.

My decision to set unitless line-heights (rather than using % or px) is best explained by Eric Meyer.

Where from here

I look forward to feedback from people actually using jquery.autolineheight in real projects. In the meantime I’m incubating a few more ideas for plugins that help with the presentation of content in ‘flexible’ layouts and re-reading Functional Javascript once (or twice) more.

If you are not already familiar with what Ollicle Reflex has to offer NetNewsWire check out the features detailed on my previous post. Otherwise download it and find out for yourself.

Download and install (Updated see: Ollicle Reflex refined.)

Download latest version: Ollicle Reflex

I have removed the link to Ollicle Reflex Black. There is a new method for setting Black as the default background.

Double-click the unzipped .nnwstyle file and NetNewsWire will copy it to where it needs to be.

~/Library/Application Support/NetNewsWire/StyleSheets/

Like the original release, this style uses JavaScript to do some things CSS alone cannot. Make sure you enable it

• NetNewsWire Preferences
  • Browsing
    • News Items
      • Enable JavaScript

Requires at least NetNewsWire version 2.1 (lite or full). The JavaScript driven magic of the style fails in NetNewsWire 2.0.1 - I have not spent the time to figure out why. Although, it does work nicely in the lovely NetNewsWire 3 Sneak Peak Release.

Changes

Fixes

• Cookied skin selections we’re failing to ‘stick’ when using the style file name (e.g. ‘Ollicle Reflex black.nnwstyle’) to set the black skin by default.

• Removed a poorly implemented ‘feature’ which toggled the display of highlighted differences in feed content with cursor position. More on this below.

New features

• Displays a del.icio.us Tagometer Badge for each viewed news item. This shows you how many del.icio.us users have tagged the news item you are viewing and the top ten tags they used.

• When NewNewsWires Highlight differences option is checked, items of deleted content are indicated with an inline ▲. Clicking each triangle toggles the display of that particular item of deleted content individually.

Some back story

Perseverance rewarded with tags

Having recently worked out how to load jQuery into a NetNewsWire style, when I read about the introduction of the del.icio.us JSON API, I saw the potential for integrating it into a NNW style immediately. Figuring out the technical details to make it happen took me a lot longer. PPK on JavaScript helped me fill the necessary holes in my patchy JavaScript knowledge. It’s a wonderfully practical book I recommend to anyone struggling with the basics of JavaScript.

My perseverance was rewarded. The del.icio.us tags are particularly informative when viewing some del.icio.us generated feeds that are often lacking a useful descriptions. The top tags often tell me whether the bookmarked web page is one I wish investigate further or ignore.

It’s worth noting that feeds served up with feedburner-redirected urls do not work. Because no one bookmarks feedburner urls on del.icio.us they will appear as ‘untagged’ in Ollicle Reflex.

When a feature becomes a bug

NetNewsWire has a nifty feature named Highlight differences by its preference checkbox. Additions and deletions in the content of updated a posts are marked up with ins and del tags respectively. Although it’s often useful and interesting to see how an author has edited their posts - the red and green can be quite distracting to normal reading.

Reflex (and my previous styles) included a feature to hide and show these differences by moving your cursor over the body of the post. This confused many people who had not ‘read the manual’ and understandably interpreted the occasionally frantic flickering as a bug.

Ultimately my implentation of this feature was too subtle; And the difference between a subtle feature and a bug is a fine one indeed. I have read advice to this affect from a number of software developers who have learnt this lesson the hard way. It’s enlightening to experience the problems caused by poorly advertised features first hand.

This version of Ollicle Reflex does away with the cursor over the body technique to instead require a directed mouse click from the user to display each deletion. Hopefully people will find this behaviour less mysterious.

Updated to version 5 to fix an issue with the version of Webkit installed with the Safari 3 beta. Download above.

10 March 2008

Another update with a bunch of improvements: Ollicle Reflex refined

This style is designed to maximise legibility rather than add distracting ‘style’ to your feed reading. Those who like a bit of colour and visual impact in their feed reading will appreciate it’s smart handling of full size photographs and comics.

Default white background.

Optional black background.

Download and install (Updated see: Ollicle Reflex refined.)

Download latest version: Ollicle Reflex

I have removed the link to Ollicle Reflex Black. There is a new method.) for setting black as the default background.

Double-click the unzipped .nnwstyle file and NetNewsWire will copy it to where it needs to be.

~/Library/Application Support/NetNewsWire/StyleSheets/

Like my previous release, this style uses JavaScript to do some things CSS alone cannot. Make sure you enable it

• NetNewsWire Preferences
  • Browsing
    • News Items
      • Enable JavaScript

Works great with the full version of NetNewsWire or lite.

Key features

Carried over from Flex (with improvements!)

• Auto line-height to suit your selection of window layout (the loading ‘jump’ has been minimised).
• Images scale to fit window width (padding related stretching bug fixed).
• Choice of two layouts (selection saved per feed).
• Doesn’t interfere with your choice of font and text size.

Reflex introduces

• A new preference ‘UI’.
• Optional black background (nice for images).
• Inline feed styles stripped for consistent feed legibility.
• Some small tweaks to the display of images.
• Fixed position news title now only appears when you scroll down the page.

Mostly I continue to work on styles for NetNewsWire to please myself. Regardless, I am interested to hear your ideas on improving your reading experience.

Behind the scenes

Timely challenge

Initially one of my big struggles with introducing JavaScript into my NetNewsWire style was controlling when (if at all!) the script would fire. The Flex style does not perform any JavaScript until the content of the feed is loaded completely. I have a pretty quick internet connection, so it was rarely a matter of patience; Rather it was the ‘jump’ after the images loaded that bothered me. At the time the only reliable techniques that worked for Safari/Webkit, that I could find, involved a timed delay to ensure the page would be ready to be manipulated by JavaScript. The text would still noticeably jump when the calculated line-height was applied.

Finding the path

Eventually a solution came to light that worked, but there was a problem applying the method to a NetNewsWire style. The technique relied on the JavaScript being linked into the head of the page as an external file. Simple when you are putting together a web page, but the style template NetNewsWire uses is limited to the contents of the body of the page.

I had a existing script to dynamically add an external file into a page, and it is a no-brainer to drop my JavaScript into its own file inside the .nnwstyle package. The tricky bit was finding the path to this file - the simple relative link doesn’t work and I couldn’t determine the full path without knowing the name of the user directory where the style package lives in advance.

Frustrated potential

The prospect of finding a means to load an external file was tantalising. It could provide a way to load a JavaScript library to make DOM scripting a bit more fun. I don’t enjoy wrestling JavaScript but I love getting things to work. JQuery in particular makes DOM scripting fun and also provided a solution to my initial script launching challenge. Too good to be true? It was until I found a way to load the file in the first place.

Seeing the obvious

It took awhile for my subconscious to get through to me and point to the answer under my nose. NetNewsWire was already determining the path to an external file residing in every style package - the CSS file! Two lines of JavaScript to read the content of the generated style tag and replace stylesheet.css with javascript.js and the path to the file was complete.

Until next time

My JavaScript is still a bit of a mess. I have not spent the time to rewrite my code as a showcase of the beauty jQuery can bring. I had to resist a strong temptation to put off sharing the style until I had polished it a little. Release early and often they say - so I figure I’ll release a shiny version next time - one day, maybe.

In the meantime it’s working for me - I hope it works for you!

New feature - Black skin default

A significant number of you have politely requested a means to use the black skin by default. So I’ve spent a some of my hard earned holiday time to post a new version (3) of Ollicle Reflex with a trick up it’s sleeve.

You may change the default skin by changing the name of the unzipped file:

• for white use ‘Ollicle Reflex.nnwstyle’
• for black use exactly ‘Ollicle Reflex black.nnwstyle’.

Double-click the file to install it and you’re done!

Note: JavaScript must be enabled for this bit of magic to work - see above.

Also note: if you have a previous version of Reflex installed - installing the new version with the altered name will leave the older version in place. To remove NetNewsWire styles you can delete (or move) them from:

~/Library/Application Support/NewNewsWire/StyleSheets/

If you make changes to files directly in this folder you will need to restart NetNewsWire to see the result.

25 April 2007

To thank everyone who spent the time to send me feedback on this style I’ve updated it. The new version fixes a couple of popular problems and introduces some del.icio.us love.

10 March 2008

Another update with a bunch of improvements: Ollicle Reflex refined

The accessibility problem

By using a keyboard I mean tapping the tab key to move from link to link through a web page. This method works well to get until you want to skip some of the content by following a link to an anchor that is within the content of the page. The page will scroll down appropriately to the location of the anchor, but tapping tab once more to keep moving doesn’t always do what you may expect. Instead of moving the focus to the next link after the anchor it will move to a different link somewhere near the top of the page - often scrolling the page back up without regard for where you thought you were at in the page. This is disorienting to me - imagine what it is like for someone reliant on a screen reader to tell them what is happening on the screen!

Two kinds of anchor

The true nature of this problem seems to be obscured by the complexity of it’s triggers. Rather than attempt to figure it out definitively I’ll just stick to the problem I was experiencing. There are two kinds of destinations for same page anchors in my project:

• div elements which appear on every page to divide the page into meaningful chunks such as (navigation vs. content): <div id='templatesection'>... (these work fine);

• And inline anchors which our client enters in throughout long pages of content to make it quicker to navigate <a id='contentsection'></a> (uh oh, trouble).

The workaround

To cut a longer story short you can fix it by wrapping a span around each inline anchor;

<span class='anchor'><a id='contentsection'></a></span>

and add a line to your CSS:

.anchor {display:absolute;}

Markup baggage

Unfortunately the site I am working on has many hundreds of these anchors peppered through it’s content. Each one has been individually inserted by our client with the link tool sported by WYSIWYG toolbar of the site’s CMS. Even if we hacked the code of the toolbar to change the mark-up it produced when inserting anchors. It would be necessary to reinsert every one.

Using jQuery to add the markup

I was considering pestering one of our developers to do a bit of database search and replace monkeying when I realised how easy it would be to add the extra code with some jQuery driven JavaScript.

If you are like me - HTML and CSS savvy, but not quite up with the pack in the JavaScript department - jQuery is the shit when it comes to DOM scripting JavaScript libraries. I hope this little example helps communicate my enthusiasm for it.

The code

$(document).ready(function(){
    $("a[@id]").not("[@href]").wrap("<span class='anchor'></span>");
});

That’s it! With the (pleasantly trim) jQuery library loaded, this script will find all the anchors in the page that have an id but no href and enclose each of them in a span with a class.

Links in the chain

To the uninitiated the code above will look arcane. Broken down it’s simple.

1. This code ensures that any functions it contains are not fired until the DOM is ready - generally well before all the content (especially images) of the page is loaded.

   $(document).ready(function(){
   
   
   });
   

2. Firstly I need to specify which elements in the document I wish to modify. Let’s start with the most basic expression before narrowing it down. This tells jQuery (represented by the ‘$’) to find every <a> in the document. Just as in CSS where a{}; refers to every <a>.

   $(document).ready(function(){
       $("a");
   });
   

3. With a ‘selector’ defined I can simply add to the chain to manipulate each of those elements. This will add a span around every <a>:

   $(document).ready(function(){
       $("a").wrap("<span class='anchor'></span>");
   });
   

4. Of course I don’t want to do that! This would do crazy things to the regular links in my page. To discriminate between the links and anchors I need to be more specific.

   My anchors each have an id assigned which I’m pretty sure the regular navigation links don’t have. So I can use that to refine the selector expression for jQuery. Adding the square brackets immediately after the ‘a’ in the expression provides a context to check something about this element in particular. Inside which, the @ refers to an attribute of that element, in this case it’s id attribute. All up a[@id] selects every <a> with any id:

   $(document).ready(function(){
       $("a[@id]").wrap("<span class='anchor'></span>");
   });
   

5. Now my list of <a> elements in the page only includes those that have an id. I’m pretty sure I don’t have any regular links with ids… To be absolutely sure it would be a good idea to remove all the elements from this list that have a href.

   This isn’t done by further refining the expression like I have done so far. Instead I am adding a not() to the chain - between the $() and the wrap(). This whittles down the list of elements found by the initial expression - removing any that match this further check before the list is passed along down the chain for ‘wrapping’. The ‘not’ expression should look familiar now - except this time we are checking for href instead of id. Also notice there is no need to include the a in this expression. The list of elements is already limited to those that have passed the first test:

   $(document).ready(function(){
       $("a[@id]").not("[@href]").wrap("<span class='anchor'></span>");
   });
   

Perhaps my explanation has puzzled your curiosity sufficiently to look at jQuery for yourself. Check out the official site. It has excellent documentation and astounding plugins. Even AJAX looks easy with jQuery!

Medicine. but not a cure

This coding cleverness doesn’t resolve the keyboard navigation problem for those of us unlucky enough to need to use Internet Explorer without JavaScript. Nor does it solve the same problem for Safari users - with or without JavaScript! Misuse has earned JavaScript a bad reputation when it comes to web accessibility. I hope this does a little to demonstrate it can be a power for good too.

Seems this script breaks some anchors altogether in IE 6. So much for enhancing accessibility! I’ll be sure to post something here when I get to the bottom of it.

That night, after a quiet day, upon connecting the firewire, I was startled by a loud click and a series of ominous icons, fatally concluded with the graphic of a sad face of an iPod.

I’m missing my daily dose from the Escape Pod back catalog, and keeping up with the Science Show is a little more difficult; So it won’t be long before I start thinking seriously about a replacement. It’s funny to think for the price I payed for my first generation iPod I could now buy a 60GB and a couple of 1GB shuffles with the change. Even so, I’m still hesitant to replace my friend before it’s clear what Apple has up their sleeve for the next generation.

It took me a while to get going while I wrestled with a number of different database and software solutions. Eventually I was struck by the most obvious and straight forward way to do it - a wiki. The approach I settled upon, and the system I have spent hours transcribing names and dates into, have together produced a wonderfully simple, elegant solution to the problem of presenting an online family tree.

Aaron Swartz’s greatly underrated Infogami is the core tool that brought the key elements together. A bare bones wiki that uses the equally clean Markdown syntax for structuring text. I have used the built in blog to document my progress with the project so far. In keeping with the theme of simplicity I have structured the tree with something closely resembling the technically named, but beautifully elegant, Hypertext Indented Narrative advocated by Mark Humphrys. There is of course still plenty to do before I start worrying about customising the templates or making it pretty - Infogami provides plenty of scope for me to address such niceties later.

My hope is the simplicity of Infogami and Markdown will make it easy for other members of the extended Boermans family to correct my typos, as well the errors and omissions in the printed documents I have copied.

These features are far too sensible and obvious for me to attempt to take any credit for them, regardless if you are a Mac user with too many bookmarks I highly recommend you check this application out.

My last rant on the subject of a dream del.icio.us client concluded with a musing on how I would like to see a tag browsing interface used as an aid for assigning tags, rather than just browsing. After using happily bookmarking with WebnoteHappy for a couple of weeks I had an idea of how that could possibly be done.

In a nutshell I’d like to see the tag browser and webnote listing to update as I edit the tags for a given bookmark. The purpose being to provide valuable information that is likely to influence my selection of tags:

1. Which other bookmarks (if any) share the same tags as the bookmark I’m editing?
2. What other tags have I already assigned to potentially related bookmarks?

Some will disregard these concerns as problems with categories not tags. Personally I’d like to know how unique my tagging of a particular website is. Tags becomes less useful as a tool for filtering my links if I have hundreds of sites tagged with the same tags. Similarly, if I fail to tag two sites of related subject matter with common tags, my tags will be not be useful for grouping my links. The current official browser based pop-up window for posting to del.icio.us does this to a degree by suggesting the most popular tags for a given link that is already in the database. What I’m suggesting doesn’t leverage the power of the ‘group mind’, but it ought to provide another valuable context - my existing collection of links and tags.

I’ve attempted to demonstrate this idea with a series screenshots of WebnoteHappy. I made a few clicks between each frame to roughly replicate what I envisage happening automatically.

Check out WebnoteHappier.

If there are any del.icio.us posting interfaces out there that already do this I’d love to hear about them!

On the side I’m working on some ideas for an update to Ollicle Flex. I’m interested to hear your feedback, so give it a go and please let me know.

More ollicle maintenance. There’s now a projects tab in the main navigation and a project index page at the end of it. While I was at it I removed the broken site search. I suspect a database glitch is the cause; Feeling too lazy to figure it out right now.

If you’re not particularly interested in the details of why and how just download Ollicle Flex and try it for yourself. Remember to enable JavaScript for News Items to enable the new features. Read on for the nitty gritty.

The process of creating this style didn’t start with my hands in the cookie jar - these tiny bits of saved information turned a solution to a problem into a feature.

The problem with large images

A kind commenter highlighted an issue (thanks Dean), with an earlier version of Ollicle Flex, where wide images are overlapped by the info text block on the right. There’s some CSS that ensures you can read the text if you hold your cursor above the info, but this background colour change does nothing to prevent the distraction to the image itself. Beyond that (until recently) I had thrown this particular problem into the too-hard basket. Most feeds I regularly read keep their images within a manageable size.

Even without the distraction of text overlapping them, even regular styles will obviously crop large images.

DOM scripting to the rescue

Armed with a copy of the wonderful DOMscripting I decided to tackle this problem from a different angle. Perhaps the images could scale to fit the available space. This would fit nicely into my vision for Ollicle Flex. Making this happen within a flexible layout proved tricky, I suspect I may have stumbled across a webkit bug or two. I’ll leave the tedious details and workarounds for a another post, maybe. In the long run I got it to work nicely!

When using Ollicle Flex large images are scaled to fit the width of the column.

All I need now is a handy way to view the images at the larger size, should I want to.

Considering Lightbox

Originally I planned to adapt the Lightbox JS technique. Clicking on a scaled down image would ‘pop’ it up to a maximised size overlaying the feed. Seemed doable in theory, but considering the scenario of clicking on a large image that was already linked made my head hurt.

I decided that Lightbox, as cool as it is, was overkill for this problem and ultimately not really ‘flex’. I’ll leave the Lightbox for NetNewsWire style for someone else to wrestle with.

Width control and layout options

Something reminded me that I already had an ‘alternative’ layout which positioned the meta information out of the way of wide feed content. Setting NetNewsWire’s layout to the Widescreen View when using Ollicle Flex (or Crisp) reconfigures the columns to a more conventional single column arrangement where the meta information appears after the content of the feed. The widescreen layout best suits a narrower HTML pane - when including a second column is too tight.

Switching to the single column layout provides more space for optimal image width.

What the single column layout is also really good for is ensuring the content is as wide as it can be in a given window width. In the typical NetNewsWire window arrangement I see the length of text lines which span the full width of the HTML pane as an obstacle to easy reading. Ollicle Flex makes these long measures of text bearable by adding space between the lines (line-height) as you widen the window.

Text line-height is adjusted in response to changes in column (and window) width.

Regardless I knew it would be nice to have the option to switch between a wide, single-column, view and a more comfortable to read double-column. The question was how to make this switch painless. Changing NetNewsWire’s view from Traditional to Widescreen to do this is stupid; Toggling between two styles with NetNewsWire’s style menu is too fiddly; The answer required a simple flip between these layouts with a single click.

Adding some buttons

Access to the HTML template, combined with the power afforded by JavaScript to further manipulate the markup, means that adding clickable bits within the feed reading pane is really easy. This doesn’t make it a good idea to go button crazy! Brent has worked hard to keep NetNewsWire’s interface beautifully clean - I’m aiming for a seamless extension of that.

With this in mind I fashioned a pair of buttons that when clicked, change the ID on the BODY element within the displayed HTML. From here CSS takes the reins and the change is reflected in the layout. Sweet! Two styles for the price of one.

Subtle buttons on the Ollicle Flex title bar.

With some road testing I discovered that it was common to want to view every item of a particular feed with the same alternative layout. For example, every entry in a cartoon feed is likely to have a wider than normal image, and as the view is refreshed each time a new one is selected; It would be necessary to click the button for each individual item in the feed.

At this point I was ready to throw in the towel. All that clicking would quickly get very tedious. Without a means to make the layout selection persistent my hard work was as good as scrap.

Eureka! Cookies!

When the idea of setting a cookie in the webkit driven news item view occurred to me I was dubious. Why would Brent enable such a feature? Then again, why would he bother disabling it? I tried it and it worked! No only does it work, the cookies are stored exclusively per feed. Perfect! This means when a cookie is used to store a layout preference it is only reflected in the display of that particular feed.

The next step

Although I’m looking forward trying a few more ideas that make use of JavaScript in a NetNewsWire style, I really can’t wait to see what people smarter than me come up with. Which reminds me; Brent, it would be nice to have an independent javascript file in the NetNewsWire style package. We have template.html and stylesheet.css perhaps behaviour.js would complete the family?

If you like Ollicle Flex be sure to check out the newer, flexier Ollicle Reflex.

The new templates and styles are up. Of course the work is never done:

• Atom feed is not validating
• Some icon alignment issues (especially cross browser)

My huge to-do list is just that little bit shorter - it feels good. Of course this new structure is just a foundation - there is a healthy number of tweaks I’d still like to make - given time some of them might happen. Before that there is much testing to be done.