Reflex for NetNewsWire

Posted
8:56 PM 28 November 2006
Updated
8:51 PM 29 May 2011

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.

With white background Default white background.

With black 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!

Further thoughts

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

Comments

  1. Henning Bobzin
    Commented
    8:56 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?

  2. Commented
    8:56 PM 29 November 2006

    I’ll do some tests in NNW lite and get back to you. Thanks for the feedback!

  3. Commented
    8:56 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.

  4. Henning Bobzin
    Commented
    8:56 PM 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?

  5. Commented
    8:56 PM 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.

  6. Commented
    8:56 PM 25 December 2006

    very nice, thanks.

  7. Commented
    8:56 PM 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

  8. Commented
    8:56 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.

  9. Dan
    Commented
    8:56 PM 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.

  10. Commented
    8:56 PM 29 December 2006

    Mmmm… how do you get the black background to work? I must be having a senior moment…

  11. Frank 'viperteq' Young
    Commented
    8:56 PM 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!!!!

  12. Commented
    8:56 PM 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!

  13. Commented
    8:56 PM 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.

  14. Commented
    8:56 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.

  15. Commented
    8:56 PM 30 December 2006

    Thanks, Ollie - I see it now!

    Ta

  16. Commented
    8:56 PM 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.

  17. Commented
    8:56 PM 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.

  18. Commented
    8:56 PM 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.

  19. Commented
    8:56 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.

  20. Commented
    8:56 PM 19 February 2007

    Ollice Reflex doesn’t seem to accept changes in NNW3.0

  21. Commented
    8:56 PM 19 February 2007

    I can’t seem to get changes to take effect in NNW 3.0d

  22. Commented
    8:56 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.

Oliver Boermans is a design geek in Adelaide, South Australia: ollicle.com is a place for Ollie to rant, reflect and share. Feed

Previous entry
17 November 2006
Quick accessibility fix with jQuery
Next entry
25 April 2007
Del.icio.us reflex