Clean Markup with Chrome Extension I18n

Having written both an IE extension and a Chrome extension, I must say that writing the Chrome extension was a far, far better experience. Let’s just say that I really don’t want to ever write an IE extension again.

For the IE extension, you have conflicting forum posts and MSDN articles from years ago that only partially apply to the current version of IE, and there isn’t any real documentation or developer’s guide to speak of. You can write the IE extension in C#, but there is no guidance on how to do so, and the prevailing advice is to write the extension in C++.

Chrome, however, provides a great developer’s guide, tutorials, and a wide collection of sample extensions. The Chrome extension is written completely in Javascript, CSS, and HTML, languages which web developers are already familiar with.

Now that I’ve finished my rant, let’s leave IE behind and focus on Chrome.

Today, we’ll be looking at adding internationalization (i18n) support to a Chrome Extension. We’ll also look at a pattern that uses the data-* attribute in HTML5 to provide clean markup that gets internationalized.

Read More

Knockout binding for onbeforeunload

While continuing on my knockoutjs adventure, we recently had a need to prompt the user when they were leaving the page. A common use case for this is when the user is editing something and navigates away from the page before saving any changes. The navigation can be done by using the back button, a link on the page, or closing the browser or tab. Javascript provides a helpful event, the onbeforeunload event.

The typical pattern for using this event is as follows:

1
2
3
4
5
window.onbeforeunload = confirmExit;
function confirmExit()
{

return "You have not saved your work."
}

You set onbeforeunload to a function that returns a string. The string will show up in a dialog box like this when navigating away:

This has been around for a while. But I wanted to be able to do this in a way that used the MVVM pattern in Knockout. I wanted to have this controlled by data binding between my markup and viewmodel.

Read More