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

Bookmarklets gone Awry in Firefox

Bookmarklets are simple, right? You put a snippet of javascript into a bookmark prepended by ‘javascript:’, and then you can click your bookmark to do some javascript magic on your page. For example, if you create a bookmark with this URL (Basic Bookmarklet Demo):

1
javascript:alert('Hello World');

You will see a ‘Hello World’ alert when you click the bookmark (don’t forget to turn on your bookmark toolbar in your web browser so you have a place to put your bookmarklets).

There are all sorts of interesting bookmarklets out there. You can have bookmarklets that help you analyze your DOM, clean up a page to make it more readable, or even share on Facebook.

However, as with all things related to web development, things don’t always work the same on all web browsers. I was recently working with a bookmarklet that needed to wait until the page was finished loading before it did anything, so I used the setTimeout method, like this (Broken Bookmarklet Demo{alert( “Demo for Broken Bookmarklet - drag to bookmarks bar to test”)):

Read More

Cookies and IFrames Don't Mix

I’m not a fan of IFrames. Let’s just get that out on the table to start with. Every time I use one, it’s against my will and I always feel like it’s a kludge. There - I said it.

Why am I upset with IFrames today? I was trying to set some cookies in a IFrame, where the IFrame was loaded from a different domain from the main page, and the cookies refused to set. I was using the jQuery Cookie plugin, and my code looked like this:

1
2
$.cookie('myCookie', 'Chocolate Chip');
alert($.cookie('myCookie');

And this is what I saw:

I was expecting to have ‘Chocolate Chip’ be shown in the alert. No such luck - my cookie was eaten by the browser.

Read More

What's the Protocol?

On a recent project, @austegard recommended I look into using protocol-less URLs to load jQuery. My initial reaction was that of ignorance - “what is a protocol-less URL?” I quickly found an example:

//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

When I saw it, I thought, “That doesn’t look right. It won’t work.” But I was wrong. Sure, it’s missing an ‘http:’ or ‘https:’ prefix, but it works just fine. Look at the source for this page, and you’ll see that there is no ‘http’ or ‘https’ in the link above. But if you click on it, it loads jQuery without any trouble.

Is this the best way?

Protocolless URLs are interesting, but what’s the point? And what are the other options?

Suppose you have a website, such as contoso.com, and your website is available on both HTTP and HTTPS - at http://www.contoso.com and https://www.contoso.com. Next, suppose you want to load a javascript library from a different server, such as loading jQuery from the CDN link above on the ajax.googleapis.com server.

How can you add a script tag that loads jQuery?

Read More

The 7 Types of Estimates

I’m sure we’ve all estimated tasks. It’s usually not a fun exercise. I can’t make the estimating process any more fun, but hopefully you can have some fun reading about these 7 estimation techniques.

I only like to use the last 2 techniques, but you need the right client and project manager for them to be effective. Hopefully you can avoid the other techniques, but sometimes you are forced to use them.

Feet-To-The-Fire Estimate

This is a commitment, not an estimate. The person asking for the estimate wants the ability to exert pressure on you if you go over this amount. This results in significant overestimation to avoid the pressure.

Read More