Sorting and Highlighting added to Days Since iGoogle Gadget

Days Since Add to Google has gotten a bunch of refinements — fixes and features — that are based on feedback from the 1300 or so people who use it regularly. If you use the main version (added from the link to the left), you’ll get these updates automatically. Thanks especially to Ping Zou, who took the time to prototype some of the ideas in his “days since plus” gadget.

  • Average days since are now tracked. As you reset your reminders, Days Since is keeping track of the number of times you’ve done the task, and how long it’s been on average between times.
  • Items sorted by how close to “due” they are. Reminders are now sorted by how close they are to the average time they’ve taken in the past.
  • Overdue reminders shown in red. If it’s been longer than average for an item, the text color is red. Note there’s no UI to explicitly set an expected period or anything — it’s all based on the running average. This has the benefit of making everything completely transparent to current users of Days Since, automatic for everyone, and it keeps the UI simple. But for people who are more control freaks (or bipolar undisciplined/disciplined like myself) — it has the downside of keeping “overdue” as more of a flexible, historical based metric, rather than a hard deadline. It’s likely to stay this way because it matches the philosophy of Days Since a bit better, but any feedback on wanting another alternative is welcome.
  • Fixes for two major cases where data could be lost or hidden.. Days Since has gotten a lot of great feedback since being listed this spring. Several reports came in of lost data when adding a larger number items .. usually when hitting 30 to 40 range. Also, very long words in the description could cause the reset/delete buttons on the right to become hidden for all items. These reports were driving me nuts, since nothing is more sacred than user-entered data. Days Since now has much better handling of the iGoogle and browser limitations that created these problems. For the curious or other gadget developers, there will be follow-on posts here on these items. See the Gadget API Group for related discussions.
  • Localized in more languages. In addition to Chinese translations by Ping, Google got in touch and provided Spanish and Portugese. Thanks to Natalie there at Google.
  • Feedback when reminder limit is hit (iGoogle preference limit). If you reach the limit of what iGoogle’s preferences can store, you’ll get immediate feedback in the form of a message on the gadget. Depending on your reminder description length, you should be able to fit around 20-30 reminders in the gadget. If you hit the limit, just add another copy of Days Since to your page to add more.
  • UI enhancements. Including “Zebra”-style highlighting of every other line for easier reading on long lists; Font style better matching Google’s default gadgets (the much-maligned font size=-1); more consistency and compatibility across Firefox, IE, Opera, and Safari browsers; and if anything goes wrong with formatting (e.g. long words on Opera) or Google’s dynamic resizing, scrollbars now come up so at least you can see and get to all the gadget content in a pinch.
  • New storage format. This is more of a geeky feature, but you’ve always been able to go to “Edit Settings” for the gadget and see/backup/edit the JSON string that stores all your reminders. The format of that string is now updated, and the gadget automatically detects the old format and upgrades it to the new when you run the new version of the gadget. This kind of auto-upgrade is somewhat tricky, so if you see any problems with the upgrade, please comment here. The benefits of the new format are: 1. Date is now slightly more human readable (ISO format). 2. Fewer overhead characters, so more reminders can fit within the iGoogle storage limit.
  • Visible version number. If you “Edit Settings” you’ll now see a version number of the gadget code which is updated every time you save a preference. If you find a bug or have any feedback, please also note the gadget version, browser (firefox, ie, etc.) & browser version with the feedback. The version will also be used for any future schema upgrades. Thanks!
  • Internal refactoring. Internally, the Days Since code got a lot of cleanup, including clean javascript namespacing. It’s not essential when running in an IFRAME, but still nice for the future.

Remaining limitations:

  • Can’t add days since reminders that are older than 1970. (Javascript date object limitation)
  • Data appears to be lost if items are added, then gadget is moved around on igoogle page. Workaround: refresh your page to get data back (iGoogle bug)
  • Limit on # of reminders: ~2K chars for all preferences (iGoogle/browser limitation)
  • Only works on iGoogle - not Google desktop or elsewhere (Google only supports saving preferences on iGoogle)

As Google’s caches update, the new Days Since will reach you. A port of similar updates to Days Until and Feedsparks will be coming. If you see any problems or have any other ideas, feedback is welcome!

Breaking up long words in HTML with Javascript/CSS

[update 10/17: The substitution has been updated to cover more browsers. This should work on every major modern browser, EXCEPT Safari -- I can find no solution for that browser. If you find a solution for Safari, or a browser this doesn't work on, please comment. Thanks!]

Long words can create a significant layout problem, especially for widgets which have to live in a small amount of screen space.

DaysSince and DaysUntil were both having a problem where very long words in the reminder description could push the “delete item” icon and other content off the right of the widget, make the text unreadable — and unreachable, so you can no longer delete the offending item.

What would be nice is to break up long words, but what’s the easiest way to do that, given that you don’t have a knowable fixed width to display in?

For a Javascript widget, this combination of regular expression and CSS hacks might get you what you need.

First, break up your strings with non-breaking spaces (nbsp), wrapped in a span that lets us make them invisible. If x holds the string with potentially long words, this regex will return this result (splitting every 9 characters).

x.replace(/(\S{8,}?)/g, "$1<wbr/><span class='break'> </span>")

In the regex,

  • ? is to make the match not greedy — that is, it will stop after just 8+1 characters.
  • /g is to match all 8+1 character or longer sets of non-whitespace characters
  • $1 returns the matched characters, to which we add a non-breaking space within a span that we’ll format below

Next, add a new selector to your CSS for the spans you just inserted, to make them invisible (credit to Martin Kliehm for this hack).

.break {
font-size: 1px;
line-height: 1px;
float:right !important;
float: none;
}

All the styles are essential — the two apparently conflicting float styles are to set different values for IE6 vs. other browsers.

Days Since and Days Until have been updated with this fix (it may take some time for Google’s caches to update — so use a new copy Add to Google to test.

Any refinements we can make to this solution? Anyone see any problems with specific browser versions?

New Feedsparks Supports Free FeedBurner TotalStats Pro

Feedsparks screenshotYesterday, FeedBurner announced that their previously TotalStats package is now free.

This morning, the Feedsparks widget has gotten support for some of that FeedBurner Pro data, particularly the new “reach” statistic.

Here’s what you need to get it working

  1. Install Feedsparks Add to Google.
    There is an old version (hosted on Google Pages) that has a widget titlebar of “FeedBurner Trends”. Yours should be the newer version (hosted on Google Code), that simply has the title “Feedsparks”
  2. Get Feedsparks working on your feeds — see the Feedsparks page, which describes enabling FeedBurner’s Awareness API or providing a login for your feeds
  3. Enable TotalStats Pro, per yesterday’s FeedBurner annoucement.
  4. In the “Edit Settings” page for the widget on iGoogle, select “reach” instead of “circulation”

You’ll need to give FeedBurner time to collect some days of additional historical data. For example, since I just enabled Pro last night and wrote these updates to Feedsparks this morning, Leancode.com currently has a “reach” of 1 reader. Woo-hoo. :)

First month of widget growth stats

On one Saturday in May (the 19th), we were in the car talking about kids baths or something, and my wife said “you know that widget you talked about writing — the one that tracks how many days since we did something? I want it. You should write it.” Well, when any of my kooky ideas get even a little bit of validation, it’s great. And a command from the wife is certainly over the top.

So the widget was roughly done by the next evening. On Monday night, I emailed lifehacker, not really expecting much. Here are some charts with the usage patterns over the first 30 days since then.

Days Since Pageviews Chart

This is a chart of pageviews for the widget. You can see the huge jump on Tuesday May 22nd, when I was luckly enough to have lifehacker post an article about the widget that morning. It basically set the level of use moving forward.

Days Since Statistics

This adds up to a lot of pageviews in a month. If these were hitting one of my servers, it would be enough load that I’d be worrying a bit about spikes of traffic and slowness. Fortunately, one of the design goals these widgets have is to use no server resources of my own: all code runs in the browser, and all data is stored in the settings of the widget itself — Google’s servers. So these could grow to 10 or 100 times the traffic, and I wouldn’t loose sleep at night. You can also see that for these iGoogle widgets, unique views tend to run about half the pageview rate.

This is a good rate of usage, but still not yet quite enough to qualify for Google’s new Gadget Ventures program, which offers seed funding for selected widgets with over 250,000 page views per week. With a little more press or an increase in organic growth, it’s possible it could hit that level.

One of the requests that came in early was “how about the same kind of thing for counting down the days until a future event?”. There were already many countdown timers, but not one that tracked several, with easy UI for add/remove and annual recurrence. Starting from the Days Since code, two weeks later the Days Until widget was written. But what would the conversion rate be, if this widget didn’t get the same level of press on a site like Lifehacker? Here is a 30-day graph over the same timeperiod as the one above.

Days Until Pageviews Chart
Around June 10th, I added a mini-message to Days Since, advertising the Days Until widget. I didn’t know what kind of conversion ratio would happen — but these are clearly related and complementary things, so it turned out to be surprisingly high — today, it appears that approx 25% of Days Since users became users of the Days Until widget.
Days Until Statistics

Between Days Since and Days Until, there has been about 13,000 unique users of the two widgets so far in this first month. Some startups would kill for that level of unique users, but it’s just getting interesting here for the widget world.

So where does this go from here? The level of usage so far makes me feel good that the relatively small investment of time is delivering value to the world — a few thousand people are finding it useful, and there’s been some really kind comments on the blog and in email.

From a business model perspective, there isn’t a direct one yet. By showing what’s possible, and what Leancode is capable of, it could generate some leads (particularly from companies which want to create a closer connection with customers by providing widgets that tie into their products or services). And you could imagine creating a portfolio of time management widgets, some of which are higher-value and could have premium versions.

But, for now, this is just a fun and interesting experiment.

Knowing when it’s been too many Days Since

[update: These ideas have evolved into the latest mainline version of Days Since. Here's an update.]

One of the early feature requests for the Days Since widget (which is getting over 400K page views/month now — more on that later) was the ability to get reminded when it’s been too long since one of your repetitive tasks was done. When you think about it, this kind of feature saves you a lot mental energy — instead of having to scan the whole list, you just look at those that have been flagged (or those turned red, etc.).

But does this mean there’s another field to enter (days until “overdue”)? Should you enter one number for days, or perhaps a full date upon which it’s due?

Every additional field and option is another bit of complexity which can turn people off. And one of the things good web apps have taught us is using the smarts of the machine to figure out some stuff for us humans is a big win. Things like a single search box that doesn’t ask lots of questions (what are you searching for? where? which category of stuff?) or a “quick add” button for a calendar that takes the whole event as a free-form string.

In the case of Days Since, we want to (1) Not add UI which might turn off current users (who don’t care about a concept of overdue) with clutter and extra complexity. (2) Try to have the widget do some of our work for us. (3) Not add much code & complexity to the widget itself.

One of the users of Days Since, Ping Zou, was looking for just this kind of functionality and decided to work with the Days Since code and add it. We’ve been tossing ideas and code and back forth, and have gotten Ping added as a first additional project member of the Days Since subversion repository on Google Code.

At the moment, Ping is a PHD student with the Electronic and Electrical Engineering Department, University of Sheffield. He has a blog (in Chinese), which you can see at http://sg71cherub.spaces.live.com/.

Ping has also generously done a translation of the strings for the main Days Since widget to Simplified Chinese — which is great, as Days Since has been lacking non-English translations. And for the the new features, we’re doing on a very small scale what many large projects (like Linux) do — have a “development branch” where new features and ideas are played with, and a “stable branch” where all our regular users are and changes are done carefully.

If you’re interested in getting the development branch (possibly bugs and all), you can add and play with the version of days since here.

And for everyone else, please keep any requests you have coming (in comments or in email). In time, the ones that provide value without getting in the way of current users will make their way to the stable, production-version Days Since widget.

New Widget: Days Until Countdown

When Days Since was released last week, one of the first pieces of feedback was that it’d be great to have the same thing, but as a countdown for future events on a specific date. There are existing widgets that do this, but none that I’ve seen where it’s easy to add/remove items and have a number of counters in one widget.

Building on Days Since, it took about 10 hours or so to create Days Until. Most of that was spent on trying UI alternatives for entering the date, and writing the docs. Hit the “add to Google” button below to give it a try.

screenshot
Add to Google

Please head over to the Days Until page for more information, and please feel free to leave any thoughts, suggestions, or comments there. Thanks!

Feedsparks gains caching and flexibility

Feedsparks, a widget for tracking your FeedBurner subscribers, has gotten some updates and a move to a new, better-hosted location. These improve performance and formatting, especially for embedding in web pages, like what you see on the right sidebar of leancode.com.

 

New Features:

  • Supports dynamic height resizing (when used on iGoogle)
  • Uses new Google Gadgets image caching features to speed loading of sparklines and icons. This helps take a load off Joe’s awesome sparklines service, which this widget uses.
  • You can now choose a display name that’s different from Feedburner’s id. For example, “Leancodecom,Leancode” grabs the data for the Leancodecom feed from FeedBurner, but displays it in the widget simply as “Leancode”.
  • You can choose how many characters to include in the name, before it gets truncated with an ellipsis ….
  • Code now hosted on Google Code with a MIT License.

You can grab this new version here Add to Google. Eventually, users of the old version will be “aliased” to the new version.

Feedsparks, while not in the same league as dayssince, has gotten good use with 45,000 page views and 25,000 visits from 12,000 or so users in the past month. About 30% of that is from iGoogle, the rest from the widget embedded directly on people’s web pages to publicize their feed subscriber counts. Definitely worth the time to create it — most of the initial coding was done in a 11pm-4am geek session, with probably 30 hours invested in refinement and bloggi .. I mean, documentation, since then.

Current users — please let me know if anything is amiss (or just missed). Everyone’s ideas and feedback are welcome in the comments. Thanks!