Days Until Updated

Days Until has been updated with some of the same better error handling, zebra table, and other features of yesterday’s Days Since update. Current users will automatically get the upgrade over the next few hours (as caches expire). If you see any problems, please comment here!

And you can Add to Google to try this tracker of future events, if you haven’t already.

I tend to use it for tracking birthdays (it automatically handles annual recurrence). It’s also been a neat tool to help teach the kids a sense of time (on the days scale) — my 6 year old has an igoogle page with this and days since on it, and has been surprisingly excited to track things — “uh oh, dad. It’s been 10 days since my last bath!” (days since) or “just 46 days to my birthday!” (days until).

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?

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.

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!