These are just defaults. You can continue to to use Days Since for all your other good or evil purposes by deleting the items that are just clutter to you, and adding your own. And, remember — it’s totally possible to have several copies of Days Since running on a single iGoogle page. So you can have environmental reminders, separate from household reminders, separate from “breaking habit” tracking (like how many days since i “chewed my fingernails” .. I have to shamefully admit mine hovers near zero).

Thanks to Robin over at Google Spain, who help concoct the list, provided Spanish strings, and who may include Days Since as part of a little upcoming treat …

And if anyone wants to comment with a short list of other earth-preserving “days since” reminders in any other languages, I’ll try to get them in.

Bernie, I’m working on a Disaster Housing project in New Orleans/Gulf Coast. Is there some way for me to permanently code in Days Since Katrina Aug 29 2005 (928 days and counting!)I’d like to embed widget in communications to certain folks who refuse to move any quicker! In a very nice way, mind you!

Would love to say “yes” to this one. But unfortunately the answer is “possibly.”

So I’ll use this as an excuse to at least start the explanation, since Google doesn’t do a good job in their information for users (or their API) to be clear about what gadgets can/can’t do. I’ll talk about Days Since, but this applies to any Google Gadget.

The gadgets I’ve written all happened to be written first and primarily for iGoogle. But gadgets can be used in several different environments, with various limitations.

1. iGoogle
2. Google Desktop
3. Google Sites
4. Open Social sites, like Orkut
5. Any Web Page. Well, on any web page that supports javascript objects (e.g. a WordPress blog like this one, although you have to edit from the “code” tab). Google Pages also works.
6. And (kinda) via email with “Share this Gadget” within iGoogle

Add to Web Page

Here’s an example, created using Google’s Gadget for Webpage Directory and searching for Days Since.

Google gadgets on a webpage are quite noisy — Google adds all kinds of buttons and links, etc. that make them not very attractive.

What to modify this embedded gadget for your own page? Click on Google’s editor here to start where I left off, and edit the reminder and look of this gadget, and get the code to embed in your own page.

First thing you’ll notice is the settings that you normally see in “Edit Settings” have to be entered manually. Here’s where the design of Days Since isn’t really compatible with embedding in the web. You have to enter the “reminders” field by hand — but in raw json format! If you’re comfortable, go for it. Otherwise, you might add a copy of the gadget to your iGoogle page, get all the reminders looking the way you want them, and then go to “Edit Settings”, copy the reminders, and paste them into the “Add Gadget to Webpage” creator.

Share this gadget

If you’d like to set up some reminders and email them to a friend (or set of coworkers) who use iGoogle, that’s easy. Just get the gadget set up like you’d like to share it, and select “Share this Gadget” from the gadget’s standard drop-down menu.

Enter a few email addresses, and make sure to check “Send my settings for this gadget” (this is off by default). Now, your recipients will get the full, working gadget, with all the reminders or other settings you had set up.

Reminding people about Katrina

So for Alyce:

• If you want to do this by having the gadget be embedded in your email/newsletter, it will only work if you have a web page with your newsletter/email on it, have the gadget embedded there, and the actual email is a link to that page. It won’t work to embed the gadget directly in the email, because mail programs rarely allow embedding javascript.
• If you just want to send out a copy of Days Since to other iGoogle users with the “Days Since Katrina” reminder populated, just set that up in your iGoogle page, and “Share this Gadget” (and its settings).

But, for the case you seem to be talking about (reminding the reluctant), I don’t know if either of these methods will achieve the desired effect. I’m sure a little digging might find something better. But maybe the second (sharing the gadget with Days Since Katrina pre-populated) might be a soft enough touch, yet useful enough that the people you’re thinking about will play along.

In any case, best wishes and good luck,

Bernie

• 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!

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 to test.

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

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.

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.

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.

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.

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.

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.

• Switch to an easier-to-understand calendar day (counters turn over at midnight). The widget previously used a 24-hour day for each reminder. But since hours/mins are not visible, that created a guessing game as to when the counters would turn. Refreshing your page at midnight (plus or minus a few leap seconds since 1970) should show incremented counters.
• The widget now has smaller icons and text, to get more reminders in the space (closer to a normal 1 line spacing). This is also more calibrated to other widgets (which tend to select small fonts).
• Get Firefox and IE, at least, to look nearly identical. The main differences affecting this widget are differences in how they render tables, especially with a span inside that has its own padding/margins. Firefox expands the size of the cells to fit, IE needs a little push.
• Fix pluralization on the screenshot, and author’s email in metadata

Did not make any change to detect “enter” in the reminder textbox. You still have to hit the “add” button.

Please let comment here if you see any problems, or have additional feedback on features, etc. Especially cool would be any interesting and/or funny uses for it. The lifehacker thread has a good one…

Here’s what’s planned for an update.

• The widget currently uses a 24-hour day for each reminder. But since hours/mins are not visible, that creates a guessing game as to when the counters will turn. Switch to an easier-to-understand calendar day (counters turn over at midnight).
• Shrink the reset button and counter down, to get more reminders in the space (closer to a normal 1 line spacing).
• Get Firefox and IE, at least, to look nearly identical
• Fix pluralization on the screenshot.
• Look at getting “enter” in the reminder textbox to submit the “add” form
• Fix author’s email, as it currently goes to a black hole — bug or feature?

And I’ve got one call for testing help: Two people reported loosing data when moving the widget.

Because Days Since stores all its data in the widget settings, if you remove it from iGoogle and re-add it, it’s expected to loose any data you have there. But moving the widget on the iGoogle page should be fine (and I’ve and seen no problems in my testing). I’m looking to find out if it’s something expected (like browsers with cookies turned off) or something more insidious (lost data with particular steps or particular browsers). If anyone has used Days Since and lost reminders when you’ve moved it around on the page, please drop a comment with detail on how you got it to happen.

Somewhat separately, as pointed out by SeT over on the lifehacker thread, it also makes sense to have a sister widget with “Days Until”. Basically like Caleb’s existing Countdown widget, but with this codebase — several reminders per widget. Everything needed is there, except fitting calendar date entry into the UI.

• Forget how long it’s been since you actually bathed your little ones?
• Forget to water those poor, thirsty plants?
• Would like to track how long you’ve stayed away from something bad (like caffeine)?

If you’re an iGoogle user, here’s a widget to help you. It’s in beta form right now. Feedback (especially browser compatibility reports or message file translations) are very welcome!

Add Days Since to your own iGoogle page!

The basic idea and usage model behind Days Since has affinity with Getting Things Done and other time management techniques. Get the noise of remembering your recurring todos out of your head, and onto paper — or in this case, your iGoogle dashboard.

Interested? See more at Days Since