Though both their action and inaction in the gulf, BP has changed what we see when we think of their brand. At the same time the accident has demonstrated how dirty this energy source can be.
This is the logo I submitted to Greenpeace UK for their call to redesign BP’s logo.
I read a lot on the web and increasingly it’s becoming a social activity. Links come from all directions: Email, Twitter, RSS feeds, IM, Facebook and surprise surprise, other webpages. These links are the stuff of many of conversations we share, and a great thing about the web is the friction for the conversation to move across the various internet technologies is minimal. The URL breaks all the boundaries. In theory anyway.
On my Mac when I click a button to pass a link from one application to another, it’s up to me to remember where it came from, which conversation it was central to and who and where I should direct my response to regarding it. This mental load heavier on an iPad [or iPod Touch in my case] when you can’t leave the window of the first application visibly open as a reminder.
The popular response to this problem is to design the application around the conversation activity. Build the browser into the feed reader, integrate the twitter posting widget into the photo software, add the email app into the bookmarking do-dad. This approach will bring glee to those who it fits nicely, but tends to become less useful, or worse, heavy and bloated for those with slightly different needs.
The web has an answer to this I would love to see some analogy of on my Mac - the HTTP referrer. When you click a link on a web page, simplistically your browser will send a request for that page to the server hosting it; Along with that request, it carries a note of where the link came from. This information will appear in the visitor logs or Google Analytics reports for that site. It goes a long way to connect the participants of online conversations.
The closest thing to it in practice on my computer is the history in my browser that enables the back button to work. I am web developer so here is my question to those who know about this stuff: Is it possible for the back button escape the browser?
On a Mac maybe something like Choosy could form the basis for the background app that Brent speaks of?
Imagine clicking the normally greyed out back button and have your twitter application launch - displaying the tweet you clicked to load that page. That would fill this particular software user with glee, at least until I quickly forgot there was a time when I couldn’t do such a thing.
]]> 25 May 2010In response to Brent’s post, Rainer Brockerhoff also writes he’s been thinking about a HTTP referrer like approach to this problem: Re: Apps that work together — on iPad
Unlike me, Rainer knows a little about OSX development and goes on to explain how it might be possible, before concluding:
All this needs filing enhancement requests and Apple would have to do the required twiddling inside their code base - or rather, bases, as this would be useful to have both on the iPhone/iPad and the Mac side. It would take a long time, if it’s done at all.
The alternative would be to developers to, informally, establish a convention for incorporating this into the URL itself. So we’d have something like: calledscheme:///the/url/parameters&?REF=callingscheme://some/url/to/return
Probably the second part would have to be suitable encoded/escaped, too. Maybe this would be a good topic for discussion at WWDC?
I have faith that the Mac dev community can get together to make this work.
Daniel Stødle has done some clever work. He has released a working menu bar app that infers the previous application from debugging information already available in Apple events.
Quoting Daniel’s blog post, Universal Back Button released for Mac OS X
By continuously analyzing the output from the console log, UBB can infer which app caused a different app to open a file or link, and thus create a “back relation” to the app.
For instance, when I click a link in iChat, a “GURL” Apple Event is sent to my default web browser (Safari, FIrefox, etc.). UBB notices this, and when you click the universal back button in your menubar, UBB switches you right back to iChat.
Of course, the mechanism has some drawbacks. For instance, there is no association between different windows - the association only exists between different apps. So if you have several windows open in iChat, the UBB won’t necessarily bring you back to the window that sent you to Safari in the first place. But, we have to start somewhere, and this is as good a starting point as any.
This is a bigger step in than I could have imagined possible in such a small time. Daniel includes a link in this blog post to his source code for others to build upon. I’m looking forward to more looking back on my Mac!
Billy Gray adds his support for Brent’s suggestion and expands on the need for a service discovery mechanism.
Such functionality would be an incentive to uninstall apps from our devices to keep the list of apps jostling to accept that URL to a minimum. I have a lot of Twitter apps on my iPod! For example, the number of apps my Mac offers when I hover the ‘Open with’ contextual menu item on a .html file is well out of control. An interesting problem.
]]>The old ollicle.com was powered by an ancient version of Movable Type, held together with discontinued plug-ins and the kind of bits that most people use to hold their bread bags shut.
Upgrading became easier once I had made the tough decision to discard anything that wasn’t straight forward to transfer, or couldn’t wait until another day. I’ve scraped the templates back to the bone for a clean fresh start. The page and folder management offered by the current Movable Type system has proved useful to build some permanent homes for my project pages.
The main navigation is the one part on which I’ve spent some time messing with CSS and jQuery. Even that has a way to go to satisfy me that it’s right. With the big upgrade job out of the way there’s a myriad of design details waiting for attention. The content of this site though, is in greatest need for time investment. Going though the old entries to fix broken links and images made me all the more aware of the need to dust off my neglected projects.
Feels good to blog again.
]]>Many things interest me. As a result, over the last number of years, I have subscribed to feeds from way too many sources. Currently in NetNewsWire I have over two and a half thousand unread items. The only problem with this is the number of highly interesting items that I imagine I miss. They are lost in the crowd of items that are only mildly fascinating.
NetNewsWire provides a tool to help deal with this scenario. By choosing to sort by attention feeds I am more likely to value float to the top.
From the NetNewsWire manual:
How does NetNewsWire figure out attention?
It watches what you do with the items in each feed. If you flag items in a feed, send items via email, post to Delicious, or post to your weblog, it figures this feed is pretty important to you. The more you do those things, the more important is the feed.
After using this feature for some time, the feeds I interact with most frequently have made their way to the top of my subscription list. Trouble is, this system has significant bias towards feeds which carry the highest posting frequency. Although I may only be interested in a small percentage of the items in a particular rapid fire feed, it will likely rate higher than another feed with only sporadic updates; Even if I find most of them invaluable.
Unsubscribing from feeds is a solution, and I have been, but I’d rather do it based on evidence and so far attention score is the best measure I’ve got. For the attention score in NetNewsWire to better represent a feed’s relative value it needs some help from me. I need to penalise the time wasters.
Fortunately NetNewsWire provides a method to influence the attention score of a feed item as described in the Newsgator knowledge base:
How can I change the Attention Score of a feed?
You can adjust the score for a feed using an AppleScript script. Here are the details from the AppleScript dictionary for NetNewsWire:
“scripted attention score (integer) : To affect the calculated attention score, you can change the scripted attention score. The scripted attention score is a component of the calculated attention score (it’s added).”
The scripted attention score is a property of a subscription object. (Tip: to lower a score, make it a negative number.)
So I put together an AppleScript to Reduce Attention Score of the feed of the selected post:
tell application "NetNewsWire"
if exists selectedHeadline then
set thisSubscription to subscription of selectedHeadline
set currentScore to scripted attention score of thisSubscription
set scripted attention score of thisSubscription to currentScore - 1
set growlDescription to "Score reduced to " & calculated attention score of thisSubscription
tell application "GrowlHelperApp"
register as application "NetNewsWireScore" all notifications {"Attention"} default notifications {"Attention"} icon of application "NetNewsWire"
notify with name "Attention" title "Attention" application name "NetNewsWire" description growlDescription icon of application "NetNewsWire"
end tell
tell application "System Events" to keystroke "+"
else if exists selectedSubscription then
tell application "System Events" to keystroke "+"
end if
end tell
Incorportating NetNewsWire’s shortcut (to jump to the next unread item) for efficiency.
To install this script I suggest you copy-paste it into a new script file in Script Editor and save it with a meaningful title into ~/Library/Scripts/Applications/NetNewsWire/.
FastScripts made it easy to a assign a keyboard short-cut to launch the script. I assigned Option-Space, mostly for it’s memorable similarity to hitting the space-bar.
Including a Growl notification reassures me something actually happened when it runs.
While I was at it, I made another to Increase Attention score of the selcted post:
tell application "NetNewsWire"
if exists selectedHeadline then
set thisSubscription to subscription of selectedHeadline
set currentScore to scripted attention score of thisSubscription
set scripted attention score of thisSubscription to currentScore + 1
set growlDescription to "Score increased to " & calculated attention score of thisSubscription
tell application "GrowlHelperApp"
register as application "NetNewsWireScore" all notifications {"Attention"} default notifications {"Attention"} icon of application "NetNewsWire"
notify with name "Attention" title "Attention" application name "NetNewsWire" description growlDescription icon of application "NetNewsWire"
end tell
tell application "System Events" to keystroke "+"
else if exists selectedSubscription then
tell application "System Events" to keystroke "+"
end if
end tell
To trigger this script I chose Command-space. So now when I have finished looking at a post in NetNewsWire I have three choices:
It will be very interesting to see what impact using this technique will make on my subsciption list.
]]> 28 November 2009After noticing an issue with these scripts where it was being triggered multiple times I’ve had a closer look and made some changes to them.
The + key is the proper “Next unread” shortcut to jump to the next unread item in NetNewsWire. Space-bar only does this if there is no more page scroll.
This change also stopped the unwanted looping. Generally I still had the Option key depressed when the space-bar key was evoked by the first version of the script, this re-triggered the script a number of times.
Also some a curiosity satisfying feedback to the Growl notification; The current calculated score of the modified feed.
]]>Download latest version: Ollicle Reflex
Double-click the unzipped .nnwstyle file - NetNewsWire will copy it to where it needs to be:
~/Library/Application Support/NetNewsWire/StyleSheets/
If you are using an old version of Ollicle Reflex already installed you will need to restart NetNewsWire for the new one to load.
This style uses JavaScript to do some things CSS alone cannot. Make sure you enable it:
NetNewsWire Preferences
Browsing
News Items
If you haven’t already you can also select Ollicle Reflex from the Style Sheet menu in the same place or in the right hand end of NetNewsWire’s status bar.
This style has been developed and tested on a PowerPC Mac running NetNewsWire 3.2.3 on Mac OS X 10.5.8 (Leopard for the cat fanciers) with Safari 4 (which determines the version of WebKit NetNewsWire is sporting). I’m interested to know how it works for you.
Note: styles for NetNewsWire do not affect the Combined view – only the Traditional and Widescreen views.
I posted an update of Ollicle Reflex. More recently, a tiny new feature in NetNewsWire 3.2 has got me fired up to make a fresh version.
From Wikipedia:
ISO 8601 is an international standard covering the exchange of date and time-related data.
NetNewsWire now includes the ISO formatted date in UTC as a title attribute on the date (in the meta information of each feed visible in the description pane). Hover over the date there and you’ll see the title appear in a little yellow rectangle. It will read something like this: 2009-09-27T14:37:53Z.
Ugly isn’t it! Dates formatted in this way are not intended for the eyes of humans. So why bother? When the date is formatted in a predicatable manner such as this, it’s much easier possible to write software to make sense of it. Or in this case, use JavaScript in a NetNewsWire style to make the date useful.
Generally when I look at a date of a feed in my feed reader I want to know how long ago it was posted. Not exactly, just a rough idea. To reduce the mental mathematics needed to determine this I’ve made use of timeago a jQuery plugin written specifically for this purpose. Out of the box NetNewsWire shows me the date and time like this “30/10/09 10:47 PM”. With the timeago plugin integrated, Ollicle Reflex uses the new ISO date to dynamically replace this with something friendlier like “about 18 hours ago”.
Clicking the fuzzy date will toggle between it and the orginal.
Twitter has taken a large bite out of the time I spend in my feedreader looking for new and interesting stuff on the web. As a result it’s not unusual for me to have too many old posts from blogs I haven’t clicked on for a while. To reflect the fading relevance of these old posts, Ollicle Reflex will subtely and incrementally alter the background and text colours in a way reminicent of the pages of an old book.
This effect is only visible in the white style and only really begins to be evident once a post is about a month old. The colour continues to brown for a year at which point everything on the web is ancient history.
The remaining improvements are refinements to existing features. These features are designed to go unnoticed which is ultimately the idea of this style.
A few small changes, decisions and bug fixes have made a huge difference to how Ollicle Reflex flows text around floated images. For my use, this is the most significant improvement in this version.
Blockquotes now look more like quotes with the addition of Big Quote Marks™
CSS transistions have made interface animations smoother and more reliable.
The feed preference button now looks more like what it does.
Refined the design of the diff indicators of highlighted feed changes. Whitespace only changes are now ignored.
A bunch of tiny changes only a mother would notice.
Updated to use jQuery 1.3.2
Might be faster - I can’t tell, maybe you can.
Transparent rgba colours were handy for keeping the aging effect simple.
Let me know how it works for you! Although I have added more things to the todo list than were removed making this version. That doesn’t mean I’m not interested in feedback and ideas for what might make version 10 that much better.
]]>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
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.
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.
Large images are scaled to fit available space. New for Version 6: automatic alignment of smaller images, avoiding awkwardly squashed text.
Optimises line spacing of the feed text to suit your window and font size. More about this: Flex CSS with JavaScript for better reading
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.
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.
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).
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).
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 +/-.
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.
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.
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.
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.
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.
]]> 14 March 2008Updated 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).
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:
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>
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.
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.
<a> with CSSWith 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.
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.
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.
]]>Project page: jDefault - NetNewsWire style JavaScript template
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:
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.
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.
]]> 18 August 2007Uploaded 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.
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.
Created a basic project page for the imagefit jQuery plugin.
]]>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.
]]> 10 March 2008Another update with a bunch of improvements: Ollicle Reflex refined
]]>div) in proportion to it’s width, relative to the font size.
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.
Do what you like with this script. Of course, credits and/or links to ollicle.com are always welcome and encouraging!
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.
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.
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.
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.
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 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
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.
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.
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.
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.
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.
]]> 16 June 2007Updated to version 5 to fix an issue with the version of Webkit installed with the Safari 3 beta. Download above.
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 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
Works great with the full version of NetNewsWire or lite.
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.
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.
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.
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.
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.
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!
]]> 29 December 2006A 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:
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.
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.
Another update with a bunch of improvements: Ollicle Reflex refined
]]>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!
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).
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;}
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.
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.
$(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.
To the uninitiated the code above will look arcane. Broken down it’s simple.
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(){
});
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");
});
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>");
});
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>");
});
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!
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.
]]> 21 November 2006Seems 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.
]]>