12 Must Have Web Developer Bookmarklets

I’ve been reviewing my blog statistics and as expected (from my developer audience) 52% of traffic is from Firefox, Internet Explorer comes in around 27%, Google Chrome takes about 14%, and Safari, etc… take the rest.

Although Google Chrome only has 14%, that is pretty impressive considering that it is a relative newcomer to the browser scene.

Without a mature browser plugin model, it can be limiting when working with Google Chrome when doing web development… unless, that is, you have a great set of bookmarklets!

I have found that these 12 bookmarklets bring Google Chrome into a much more productive browser while doing web development.

Note: You can test out the bookmarklet by clicking the link or you can save it to your browser by dragging it up to your toolbar. Each bookmarklet has a Details link next to it that describes the functionality in further detail. If newer versions of the bookmarks exist, then they probably can be found from the Details link.

01. Firebug Lite (Details)

One of the most frequently used tools for any web developer is Firefox’s Firebug plugin. If you feel that your hands are tied when using another browser, then don’t you fret… Firebug Lite to the rescue! You can use this bookmarklet to simulate many of the features of the full Firebug plugin.


02. jQuerify (Details)

This bookmarklet enables you to inject jQuery into a webpage that didn’t previously have it loaded on startup. If the website already included jQuery, then a message will indicate which version it has loaded.


03. WTFramework (Details)

If you ever have visited a website and was like, “What… that is awesome! I wonder what JavaScript framework they used to developer that awesome website!?!” then this is the bookmarklet for you :) A small rectangle will show up in the upper-right corner of the page indicating if any of the following frameworks were used… (MooTools, Yahoo User Interface, jQuery, Scriptaculous, Dojo Toolkit, Mochikit, etc.)


04. jQuery Plugin Detector (Details)

In the same light as the previous bookmark, you might also wonder which plugins were used when developing a particular website. Instead of digging through the View Source you can just click this bookmarklet to reveal a little window that reveals you all the jQuery plugins loaded for the current page.


05. SelectorGadget (Details)

This bookmarklet is good for either a novice or expert alike. If you are needed some assistance creating a jQuery selector then try out this bookmarklet… it could surprise you with its quick and easy results. Once clicked, the bookmarklet inserts a command prompt at the bottom of your page and you interact with the DOM to help narrow down your selection. For more information, check out the short video exercising the features.


06. 960 Gridder (Details)

If you happen to be using the 960 Grid System, then this plugin can become very helpful when laying out your website. This bookmarklet will overlay a grid layout on top of your page. There are several options you can modify to fit your specific needs.


07. Design (Details)

There comes a time in most web development when you need to measure the dimensions of something on your webpage. This is where this bookmarklet comes in handy. There are several options to measure things in your DOM. It is pretty straightforward. Just click and drag :)


08. BuiltWith (Details)

This is an interesting bookmarklet that redirects the current page to the BuiltWith service that interrogates the page to determine the server information, analytic tools, javascript libraries, frameworks, content delivery networks, aggregators, etc…


09. W3C HTML Validator (Details)

This bookmarklet will redirect the current page to the W3C Markup Validation Service to reveal any errors and/or warnings in the document. As you can tell, it looks like I have a little clean-up work in my templates & blog posts :)


10. W3C CSS Validator (Details)

This bookmarklet will redirect the current page to the W3C CSS Validation Service to reveal any issues that do not conform with the official standards. Again, it appears I have some cleanup work to do on this blog :)


11. PageZipper (Details)

This isn’t exactly a hard-core web development bookmarklet, but I added it because I find that it saves time during the research and development stage. As I’m surfing around Google (or really any website that has a Next link/button) it gets pretty old to click the next button all the time. This bookmarklet will automatically retrieve the next results and load them dynamically into your current page once you have scrolled near the end of the page. It works well with Google, Twitter, and even my blog :)


12. BigTweet (Details)

As I scour the internet in search of the best and newest technology news, tools, plugins, etc… I have found the best tool to extract the title & URL for Twitter distribution is the BigTweet bookmarklet. A recent feature added to BigTweet has been the Delicious integration, which I use frequently. Although I tweet from BigTweet often, I usually just use it as an extraction tool and then transfer the Twitter text to a scheduler program.


Read More »

How to Create Your Own jQuery Plugin

I just gave the following presentation at devLINK on “How to Create Your Own jQuery Plugin”.

SommetGroupjQueryPluginTshirtYou can download the code samples and slides and investigate them in more detail.

I am considering making a screencast or a blog series on the concepts described in my presentation. I find that just posting a bunch of code and slides don’t tell the whole story for those that didn’t actually attend the talk.

At the end of the talk I gave away custom made jQuery Plugin t-shirts for those that asked relevant questions. A huge thanks goes out to my company, Sommet Group, for making such awesome shirts!

Additional thanks go out to the follow resources that I used to help assist me with my presentation

I will create another blog post on some of the helpful bookmarklets & plugins that I find useful when developing in jQuery, but I did want to mention one website that is helpful when starting a jQuery Plugin from scratch.

It is called Starter: jumptstart Your jQuery Plugins and you just provide the new jQuery Plugin name, optional namespace, parameters, options, etc… and then you are on your way focusing on the guts of your Plugin.


Read More »

Registering Custom HttpModule in IIS7 Web.config

I’ve been writing an Error Hander HttpModule for a current ASP.NET WebForm project and things were going well until my last merge with TFS. All of a sudden, my HttpModule wouldn’t register anymore.

For the life of me I couldn't’ figure out what had changed. I spent half the day trying to figure out what in the world was going on.

Here is the chain of events that I tried before finding the actual solution. If you want, you can just skip to the end to find the answer :)

First, I decided to strongly sign the assembly with the HttpModule (even thought it wasn’t necessary previously)…

So, I created a new Strong Name Key from the properties window of my HttpModule project from Visual Studio 2008


Then, in order for me to get the Public Key Token to decorate the HttpModule entry in the web.config, I used the following command line tool
sn –T ErrorFramework.dll

Note: You might consider integrating this command into a Get Public Key Token External Tool in Visual Studio 2008.

Here is what my original web.config entry looked like before:


and after all of the above steps I was able to update my web.config to the following:


However, to my dismay the HttpModule still did not register!

Secondly, I tried dynamically registering my HttpModule in the Global.asax instead of relying upon the web.config.

namespace ErrorFramework
public class Global : System.Web.HttpApplication
public static ExceptionModule errorModule = new ExceptionModule();

public override void Init()

This thankfully worked fine, but I really wanted the web.config option to work so that I could add or remove the HttpModule at will without having to change and recompile code.

Thirdly, I decided to use Visual Studio’s internal webserver (Cassini).

To my surprise the HttpModule started to work again! Although, I was excited that it worked… I was also very confused because I thought it should work through IIS7 as well. So, back to the drawing board.

Fourthly, I finally found the answer I was looking for.

Apparently, IIS7 looks in the system.webSever/modules section of the web.config and not in the system.web/httpModules section like IIS5 & IIS6. It turns out that the web.config that our project has both sections defined in the config file!

So, instead of this…

I needed to do this…

Note: If you want it to work both on IIS7 and through Cassini, then you’ll need to define it in both places ;)

Read More »

Telerik RadControls for ASP.NET AJAX Giveaway

In case you haven’t noticed, I’ve recently switched from using Blogger to using dasBlog hosted on ORCS Web and in an effort to help the transition I thought it would be fun to have a giveaway.

telerikLogo-web-1124x449px Telerik has graciously accepted to offer a Developer’s License (with Subscription and Priority Support) to their RadControls for ASP.NET AJAX valued at $999.

The contest will start today and last 7 days concluding on July 31st, 2009 11:59PM. At that point I will pick the winner and announce the results on August 1st, 2009.

So, what do you need to do to sign-up? I’m glad you asked :)

In order to signup for the giveaway you need to do 3 things…

  1. Follow @elijahmanor on Twitter
  2. Tweet the following…
  3. Add a comment to this blog including your Twitter username

At the end of the contest I will pick a random comment from this blog entry and then make sure the comment author tweeted the above RT. At that point I will Direct Message the winner (which is why you need to follow @elijahmanor) with further instructions to receive the Telerik RadControls.

So, what are you waiting for… start tweeting now :)

Note: You may only add one comment per Twitter account in order to qualify.

Winner Announced…

Congratulations to Jason Farrell (comment # 36) for winning the Telerik RadControls for ASP.NET AJAX giveaway! Someone from Telerik will be contacting you shortly with instructions.

Thanks to everyone for participating. It looks as if I will be getting some other prizes to giveaway in the near future. So stayed tuned ;)

Read More »

Easily Share Code with these 8 Online Tools

I got the following tweet yesterday…

twitterED_normal  damanlovett: @elijahmanor You seem like a #jquery guru. ? 4 U, is it possible to use a dialog box to submit form data

And as it turned out, I had just had issues with submitting form data with the jQuery BlockUI Plugin the previous day & was able to find a work around (as I blogged hours after he asked me).

Although I blogged about a workaround hours later, I thought he might need a quicker answer so I went on the lookout for an online code sharing website to post and share the code with him.

I’ve used one or two of these services in the past, but at the time I was drawing a blank so I tweeted the question…

DSCN8389_normal  elijahmanor: I'm having a brain freeze... what is that service where you can post a snippet of code online & get a URL to share w/ others?

Moments later I was flooded with lots of different online options to share code.

Here are 8 online services that I received via twitter replies or that I found separately…

Note: Click the image to redirect to the actual hosted code snippet



HTML pastebin





Note: You have to either create an account or use an OpenId










Which of the above services do you like best? Did I miss your favorite online code sharing service? If so, leave a comment with your favorite or suggestion.

Read More »