If you are spending money on advertising you want to know you’re not wasting your money. Or as Google puts it:
Tagging your online ads is an important prerequisite to allowing Google Analytics to show you which marketing activities are really paying off.
from Google Analytics Help - How do I tag my links?
When you ‘tag’ a link you essentially add parameters to the end of the URL. Usually this extension to your links means nothing to your web server or how your website works. Instead it is there purely for the benefit of the Google Analytics JavaScript running in the background. Tracking the comings and goings on your site.
Why is it then, as an infrequent ad clicker, am I seeing these tracking codes in the location bar of my browser everyday?
As someone who still enjoys their RSS feeds the biggest source of URL rubbish is Feedburner. Site authors who see their blogs as a form of advertising use Feedburner to track visits to their site. Click a link in their RSS feed and they get a report item in Google Analytics as they do for tracked banner ad clicks.
The second most common source of Google link cruft is… pretty much everywhere links are shared. Emailed from friends or from Twitter – at least once the URL has finished redirecting through a number of link ‘shortening’ services.
In the good old days, before these link shorteners were in vogue (let alone built into Twitter) it would be necessary to include links in our tweets looking lean and clean. If the URL was too lengthy there would be no space for the accompanying smart arse remark. Around the same time including ‘www.’ in your hrefs was uncool and the appearance of ‘.html’ or ‘.php’ in your links marked you out a dinosaur.
Kids these days either don’t give a damn about URL littering, or are so seduced by the flow of intoxicating information flowing into Google Analytics they don’t notice their once trim links are looking saggy around the edges.
]]>After some sustained breath holding for the follow up release of the full new version of NetNewsWire - Brent’s selling of his baby to Black Pixel has revealed the copious work to be done before we see a fresh release.
Changes to how the styles are loaded in The Mac App Store enabled lite version broke my hacky method for loading JavaScript library files; This together with undocumented changes to the template tags has left Ollicle Reflex non-functioning in what is the newest version of NetNewsWire. It is impossible to know if the full version will share these changes, so time I might spend now working around them would appear premature.
Most NetNewsWire users likely have little reason to consider the possibility of more styles than what come in the box. They are focussed on the delivered content and the shipped styles are more than adequate for that. With bigger problems to solve such as the big bad sync monster and the ever evolving ecosystem of content sharing services to cater to, styles are unlikely be high on the Black Pixel hit list for NetNewsWire 4 and nor should it!
If you disagree don’t waste your energy telling me about it, send Black Pixel a note. In the meanwhile I’m not fussed. NetNewsWire 3.2 works great and I’m in no danger of running out of internet to read.
Hearty congratulations to Brent for having the courage to admit his NetNewsWire family had outgrown his humble home. I’m looking forward to where Black Pixel take them almost as much as I am to seeing what Brent pulls out of the shed now that the ‘kids’ are out from under his feet.
Speaking of children and exciting change, come October, my beautiful and clever fiancé Kerina and I are expecting to be actual non-metaphorical parents.
]]>Recently I completed a short introductory course on SVG. I took Wednesday mornings off work for 5 weeks to complete our set assignments. The last open brief assignment, and a few weekends, resulted in the first version of BlotBot.
Also worth crediting:
Ben Alman’s jquery hashchange plugin that helps keep the blots bookmarkable in a few more browsers.
A stripped down version of Paul Irish and Faruk Ate?’s Modernizr. A feature detection JavaScript library that helps keep BlotBot nice to visitors whose browsers don’t support SVG.
SVG-Edit proved very valuable for creating some of BlotBot’s precise forms.
Follow @blotbot on Twitter, where I hope to continue blotspotting for as long as someone’s interested.
]]>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
]]>