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.

How to Create Your Own jQuery Plugin

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

You 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

• A Plugin Deveopment Pattern by Mike Alsup
• How to Develop a jQuery Plugin by Craig Buckler
• You Still Can’t Create a jQuery Plugin? by Jeffrey Way

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.

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()
        {
            base.Init();
            exceptionModule.Init(this);
        }
    }
}

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

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

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

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.

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…
   • RT @elijahmanor: Sign me up for the #telerik RadConrols for ASP.NET AJAX #giveaway http://bit.ly/telerikgiveaway
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 ;)

Easily Share Code with these 8 Online Tools

I got the following tweet yesterday…

  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…

  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

Snipt.org

HTML pastebin

Friendpaste

Snipt

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

CodePaste.NET

Pastie

Snipplr

textsnip

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.