Reflex for NetNewsWire

Posted at: 8:56 PM 28 November 2006
Updated: 7:44 PM 12 April 2008

Ollicle Reflex in an evolutionary improvement on my last NetNewsWire style - Ollicle Flex.

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!

Posted by: Oliver Boermans

Further thoughts and discussion

29 December 2006

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

Trackbacks

TrackBack URL for this entry:
http://www.ollicle.com/cgi-bin/mt/mt-tb.cgi/75

Comments

- Posted by: Henning Bobzin
- Posted at: 6:45 PM 29 November 2006
I like Ollice Flex very much and Reflex looks quite promising. Unfortunately it doesn’t work in my copy of NNW Lite. So what do you mean with “You will need the full version of NetNewsWire to enjoy it at it’s best.” I don’t even see the buttons to control it as in Flex. Or am I missing something? Any idea?
- Posted by: ollie
- Posted at: 7:04 PM 29 November 2006
I’ll do some tests in NNW lite and get back to you. Thanks for the feedback!
- Posted by: ollie
- Posted at: 10:04 PM 29 November 2006
Hmm strange, no problems with NNW Lite here. In fact you are correct to question my distinction between full and lite, the style works equally well in either (or at least it should!). I’ll make a correction to my entry above. Lite seems to have grown up a little since I visited it last!

So far I have tested it this end with Mac OS 10.3.9 and 10.4.8 (not Intel). I would question whether if you have enabled JavaScript - but if the buttons in Flex work you must have…

Without knowing what could be significantly different on your machine I have nothing to suggest at this point. Perhaps you could post some basic info about your set-up - if someone else has a similar problem we may be able to find a pattern.
- Posted by: Henning Bobzin
- Posted at: 6:25 AM 30 November 2006
I just ditched the preferences file and now it works! - It really is a great update, especially the details, like the header that appears if you scoll down a longer entry.

I just wonder why the preferences button is in some feeds (white theme) green as in the black theme and in others the gray one. Is it just another peculiarity with my copy or is it planned?
- Posted by: ollie
- Posted at: 7:32 AM 30 November 2006
Good stuff Henning! I’m pleased you got it working.

The colour of the preference button is intended to indicate when you have a preference set (your selection is cookied for each feed). Thinking about it now I guess this is redundant with the black background set… Initially I planned to provide a means to set the black background as the default, but after using it for a while I found the contrast against the bright subscriptions and headlines panes made it less than ideal for extended reading.

Maybe it’s an unnecessary distraction to indicate a preference is set? It’s usually self evident. I’ll give it some thought.
- Posted by: Josue Salazar
- Posted at: 8:44 AM 25 December 2006
very nice, thanks.
- Posted by: Steve Wills
- Posted at: 10:29 AM 25 December 2006
Love the style. I notice that things are kinda strange with it with “Highlight differences” enabled in the Prefs (under General, Updated Items). When I the mouse is inside the item pane, deleted sections of text collapse and become just a few pixels wide (at least with the BoingBoing feed). Any ideas?

Thanks, Steve
- Posted by: ollie
- Posted at: 5:57 PM 25 December 2006
Thanks Steve, what you are seeing is a ‘feature’; the idea was to provide a quick way to flip between the before and after versions of the feed. Clearly the implementation could do a little better at communicating what’s going on. It’s on the to-do list.
- Posted by: Dan
- Posted at: 2:35 AM 29 December 2006
I love the way the black layout one looks, but since it is not the default, I need to change it on all my feeds. Is there a global setting to apply this skin to all feeds at once?

Thanks for a great NNW style.
- Posted by: Jonathan
- Posted at: 6:53 AM 29 December 2006
Mmmm… how do you get the black background to work? I must be having a senior moment…
- Posted by: Frank 'viperteq' Young
- Posted at: 8:30 AM 29 December 2006
First, I’d like to say great job. Thank you for putting the time in to make a great stylesheet for NNW.

Second, I think that I’m actually having some problems with the style. Nothing major like crashing or anything like that, lol!!! It’s just that
1. My background isn’t black, it’s white and
2. I don’t see any buttons or a way to access the individual preferences for the style.
Now I do have Javascript enabled as you asked, but I was wondering if it had to do with the version of NNW that I’m using which is 2.0.1; Yeah, I know it’s an older version, but it’s the one that runs best on my Mac: Aluminum PowerBook G4 with 512MB of RAM running 10.4.8; Again, it might have to do with this version and if so, I can accept that. But if the version shouldn’t matter, would you mind checking into this for me? I’d really appreciate it.

I’ve uploaded a .png screenshot of how the style looks in my NNW to Flickr. You can see it here: Reflex Screenshot

Thanks again for all of your help!!!!
- Posted by: ollie
- Posted at: 8:33 AM 29 December 2006
Dan - yours is not the first request for a default black, and since I initially planned to provide a means for it, I’ll certainly look into it or at least make an alternate style for download.

Jonathan - to open the preference panel for a particular feed try clicking the little round arrow/button thing on the top right hand side. If you’re not seeing this button you may not have JavaScript enabled for feeds.

Thanks for the feedback!
- Posted by: ollie
- Posted at: 10:29 AM 29 December 2006
Cheers Frank - The background is white by default - if only because that’s my preference. Your screenshot shows how the style looks when the JavaScript that enables the preference panel and black as an option is failing or otherwise disabled.

I’ve had a dig and found I have the installer for NNW 2.0.1, so I’ll install it somewhere and give Reflex a test on it sometime soon.
- Posted by: Alan Schmitt
- Posted at: 9:21 PM 29 December 2006
Thank you for the new version with the black default. I’ve been using NNW for a year, but I never explored the styles. Using yours make my news reading a much more pleasant experience.
- Posted by: Jonathan
- Posted at: 12:36 AM 30 December 2006
Thanks, Ollie - I see it now!

Ta
- Posted by: David Chartier
- Posted at: 3:35 AM 30 December 2006
Love the style, it trumped my previous fav (Jon Hick’s Tiger style), though I have a couple requests/questions:

1) Is there any way to set the black background as the default for all feeds? When I chose the style, white is the default, and it seems black only sticks on the individual feeds I set it for.

2) If you plan on updating the style in the future, could you slim down on the white space? There seems to be quite a bit between the first and second columns, and again quite a bit between that second column and the right side of NNW.
- Posted by: ollie
- Posted at: 7:36 AM 30 December 2006
Thanks David, version 3 of the style which I posted yesterday allows you to set the black background by default by changing the file name of the style (see update above).

The cookies used for the per feed options are limited to just that - per feed. To avoid the hassle of maintaining two version of the style I had the bright idea of using JavaScript look at the style name instead.

I can see now this is a little counter intuitive for many - I’ll add an alternative download link with the black version ready to roll.
- Posted by: PJ Cabrera
- Posted at: 11:46 AM 3 January 2007
Oliver,

Happy New Year! Thanks for the style! Also, I wanted to comment that I find the implementation details (“behind the scenes”) interesting.

The round arrow/button for feed preferences doesn’t show in Combined View. Maybe those users that reported they can’t find it, were using Combined View?

The solution is to change to Widescreen or Traditional View and change the per feed preferences, then change back to Combined View.
- Posted by: ollie
- Posted at: 12:38 PM 3 January 2007
Ah, good catch PJ!

The combined view doesn’t appear to use template.html in custom stlye packages such as Ollicle Reflex - only the CSS. As a result any trickiness incorporated in the template such as JavaScript will not have any effect in the combined view.

Thanks for reminder, and a happy new year to you too.
- Posted by: Andy Fragen
- Posted at: 5:46 AM 19 February 2007
Ollice Reflex doesn’t seem to accept changes in NNW3.0
- Posted by: Andy Fragen
- Posted at: 5:48 AM 19 February 2007
I can’t seem to get changes to take effect in NNW 3.0d
- Posted by: ollie
- Posted at: 8:21 PM 25 April 2007
Andy - make sure you have the latest version of the NNW preview. Early versions had a bug which prevented the cookies from working.

Also, as of today, there’s a new version of Ollicle Reflex - try downloading it. It fixes a bug when using the black default.

Post your comment

Thanks for signing in, . Now you can comment. (sign out)

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

About the author

Oliver Boermans works as an interactive media designer in Adelaide, South Australia. This is his web interface — a place for Ollie to rant, reflect and share. Read more about Ollie

ollicle.com

Home

Previous entry:: 17 November 2006; Quick accessibility fix with jQuery

Next entry:: 25 April 2007; Del.icio.us reflex