Adding combo-box style dropdowns to your web page

Announcing the Improved Dropdown jQuery plugin!

I’m happy to announce that I’ve released a new jQuery plugin today that will enable web page authors to create a richer user experience than is offered by the standard implementation of the SELECT element in poplar browser platforms. The plugin will supercharge the dropdown controls into combo-box style controls that allow filtering the selection list based on keyboard input.

The following two screen shots tell the story of this plugin better than a 100 words ever could.

An Improved Dropdown demonstrating groups and disabling items

Headings and disabled items are fully supported.

Filtering down to the potential matches based on keyboard input.

This list is filtered to only matching items as the user types.

Another auto-complete plugin? Why?

Okay. I am fully aware that there exist a number of freely available jQuery plugins with similar functionality. However, none of them seemed to fit exactly what I needed on one of my development projects so I built ImprovedDropDown originally for my own use, and later decided it was worth sharing with the developer community.

Key differences between ImprovedDropdown and the typical auto-complete plugin:

  1. It allows free-text entry to filter the list, but forces the user to pick an item that is in the list.
  2. When filtering/suggesting items it uses open-ended contains logic, not begins-with logic.
  3. It pulls the suggestion list from plain-old client side HTML rather than requiring an AJAX call for suggestions.
  4. It supports non-selectable group headers in the list similar to an OPTGROUP tag in a SELECT control.

Item #3 at first glance may look like a step back since AJAX is a cool way to serve up suggestions for a long list of choices. However, I was looking for a super simple way to add functionality to a dropdown without adding the additional complexity of  extra server-side code.

For small to medium sized lists it seemed overkill to implement AJAX handlers on the server all the time. As a bonus, this control will work just fine for static web-sites where the hosting provider doesn’t make available a server-side scripting capabilities.

Do I have to pay for it?

Nope. I’m releasing this project as open-source freeware as a thank you to all the other developers that have contributed greatly to many of my development projects by  contributing their own code to the community. I’ve licensed it under the Apache 2.0 License, which is fairly liberal in terms of what you can do with the code either in commercial or non-commercial software.

Although it isn’t mandated by the license, the one thing I ask in return for using the software is to let me know that you are using it. A shout-out on twitter (@JohnFx), an e-mail, blog post, or comment somewhere on this blog will suffice.  You don’t have to tell me any specifics of your project, unless you just want to brag on it. Primarily, I am just using this request as a way to gauge how much use it is actually getting in the wild.

Is it complicated to use?

If you are new to jQuery, there is a small learning curve there, but even if you don’t know jQuery you can pretty much just copy the included examples to get up and running.

Step 1: Copy the files to your site (jQuery + the 3 ImprovedDropdown files)

Step 2: Add a few references to the HEAD section of the page where you want the control.

Step 3: In the $(document).ready event, call the improveDropdown method to upgrade one or more controls on that page.

Example code (steps 2-3) to upgrade all SELECT elements on the  page to Improved Dropdowns:


<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/improvedDropDown.js"></script>
<link rel="StyleSheet" href="css/improvedDropdown.css" type="text/css" />

    <script type="text/javascript">
       $(document).ready(function () {
            $("select").improveDropDown();
       });
    </script>

</head>

Sounds Great. Where can I get it?

You can download all the files you need to get started from the Improved Dropdown project page at BitBucket (Go Mercurial!) in case you’d like to contribute, follow the project, or just laugh at all the bug-fix changesets that it took to get to the 1.x version.

What do you think?

I put considerable thought into making  the integration of this functionality into existing web pages super quick and easy. I hope that you will find it easy to work with and your users will like the functionality it offers. If you have any comments, complaints, or suggestions for improvement I would love to hear them. Just post a comment somewhere on the blog or drop me an e-mail (see “About” tab for my address).

FogBugz News Network (FNN) Plugin Version 1.2.1 Released

This update has been in the works for a lot longer than I would have liked, buried under a bunch of higher priority projects. However, I finally found enough spare time to clear the backlog of feature requests and publish a really significant update to my popular FNN plug-in for FogBugz, a project management tool for software development. Thanks to everyone who submitted bug or feature reports.

Where can I get it?

If you are hosting your own install of FogBugz, you can download the new version immediately from the FNN page on the FogBugz PlugIn Gallery.

For those of you using FogBugz On Demand, it will be a bit longer before you can get your hands on it. It has to go through an extended Fog Creek plug-in approval process and be scheduled for inclusion the next available maintenance cycle. If all goes well, it should make it up to the FBOD site in the next month or so.  I’ll update the status in this blog post as things progress.

What’s New?

Despite the minor tick on the version number (1.1.6 -> 1.2.1), there is really quite a bit in the new version, so I encourage you to check it out if you are a FogBugz user.

New Feature: Activity Report

One of the most requested features for the next update of FNN was to enable the specification of a custom date range on the Recent Events Report in addition to the current functionality of showing the last X events that met the other filter critera. I considered adding a toggle, but it just looked too cluttered in all my prototypes, so I decided to split this off as a separate report, the Activity Report, which is now also available from the Extras menu in FogBugz.

FNN Activity Report

New Feature:  Subscriptions Report (and Management Tool)

This screen is also new to FNN, and is used to get an overview of who is subscribing to various items (Cases, Wiki Articles, Discussion Topics). Like the other reporting screens it can also be filtered by person and/or project. You can also remove a subscription from this screen for items where you are the subscriber or you are a site admin.

New Feature:  Auto-Updating Recent Events Report

The popular Recent Events Report has a new feature that was requested by someone on the Fog Creek team at the StackOverflow Dev Days event in Austin last year. By checking the new “Auto-Update” checkbox on the report, it will give you a live feed of the what is going on in your FogBugz database. New updates will be inserted at the top of the report roughly every 5 seconds so you are always looking at the most recent X items, without having to continually refresh. Perfect for the micro-manager in all of us, right?

FNN Recent Events Report

I also made some other minor tweaks to this screen, including:

Feature-ette: You can now display up to the last 1,000 most recent items instead of the paltry 100 allowed by the old version.
Tweak: The description column was empty more often than I liked, so I made it fall back on another location to fill this column if the primary source was blank.
Fix: There were a few scenarios when cases would not be displayed on this screen, when indeed they should have.

What does it cost?

Nada. It’s still freeware. I haven’t attached any licensing terms to it yet, but am okay with you doing whatever you want with it so long as you don’t steal my work and claim it as your own. I developed this and the other plugins mentioned on this site principally for my own use as a FogBugz user, but didn’t want to Bogart these useful utilities all to myself.

Also, since some have asked. It’s not open source at this time. I’m considering it, but want to sheppard it along a little longer on my own before I let other cooks in the kitchen.

Feedback is Appreciated

If you have any complaints, comments, ideas, etc., please either drop me a line using the e-mail link next to the plug-in on the FogBugz PlugIns Admin Page, or just throw a comment up on this post. I also follow the FogBugz StackExchange site semi-regularly, so you can also post ideas/comments there if you want to give other users a chance to vote on them or add to them. Now that the backlog is almost empty on this project, I should be able to get to new requests pretty quickly.

Mad Computer Scientists at VMWare Introduce Zombie IE6

I’ll admit to being somewhat of a Microsoft apologist, but as a web developer, I couldn’t help being a little giddy about the idea that the venerable Internet Explorer 6 finally seemed to be on the ropes thanks to the one-two punch of Google officially dropping support for the 10+ year old browser and Microsoft’s finally releasing an upgrade to Windows that was conceivably worth the effort to ditch XP. Unlike previous quixotic attempts to kill it, I think this time it might take.

Maybe it is a little premature to give the eulogy considering that by some reports IE6 still is still the second most used browser as recently as last month, but considering its accelerating decline in market share over the last two years, one can only hope.

In fact, one of the biggest IE6 holdouts on my company’s client list finally took the plunge and upgraded…to IE7. Hey, it’s at least it is progress, right?

Then I saw this little news nugget on the VMWare ThinApp blog and it gave me pause.

For those that didn’t follow that link, or didn’t make it past the odd “Web Apps are the new DLL Hell” prologue,  here’s the terrifying part:

I’m happy to report we have now have IE6 fully virtualized and working perfectly on Windows 7 32bit and 64bit.

Although getting IE6 to work “perfectly” on any version of Windows is a noteworthy accomplishment, my initial reaction to this information was not unlike what I’d expect to feel if I heard that someone cloning technology had been developed and Hitler was picked as the prototype.

"Sometimes Dead is Bettah"

Don’t get me wrong. I’m a big fan of application virtualization, and VMWare ThinApp has been instrumental in solving deployment problems for some of my applications in environments with rigorous security controls on employee workstations.

Despite how difficult it is to get someone on the phone at VMWare that has heard of ThinApp even though it has been almost two years since they acquired it, it really is a solid and easy to use virtualization platform.

You want technical support for thin what?
Are you sure you dialed the right number?

I suppose I can’t blame them for facilitating such an abomination. Keeping legacy apps alive for those who can’t bear to give up on them is, after all, a key use-case for an application virtualization platform. Like poor old Dr. Frankenstein, you have to give  mad-props for creating such an elegant workaround for  mortality, even if that workaround did maul a few villagers or their web-pages.

In fact, the ability to associate web-pages with different virtualized browser versions seems like a really cool trick… A really cool massively kludgey trick.

I just wish they didn’t sound quite so gleeful in their announcement. Can’t a fellow enjoy his schadenfreude in peace?

At least they could have made it difficult to accomplish. Even Doc Frank didn’t create an “Easy Button” for re-animating corpses, and he was allegedly almost as insane as James Carville.

Currently the process for creating a ThinApp IE6 package is a little complex…We know this is popular use case, so we’ve turned the process of capturing IE6 into a few clicks.

Sigh.

On the other hand, maybe I need a more optimistic perspective. I suppose an argument could be made that the availability of this technology could promote the use of modern browsers at curmudgeonly organizations.

For example, you could argue that it is safe to upgrade everyone’s browser because of application virtualization for those ancient internal apps that no one has budget to update.

Selling it to management shouldn’t be too difficult…

“Application Virtualization?” I’ve never used that buzzword before, and now that my grandmother has heard of “Cloud Computing” I need something snappier to put on my PowerPoint slides. That should just fit if I take out the cloud-with-a-dollar-sign-on-it clip-art.  Let’s do it!

Someone at HughesNet must be reading my blog

Apologies in advance for another off-topic post on the Blog, but  just had to share this update on some of the complaints I leveled against HughesNet back in my May article “The end of HughesNet as we know it, and I feel fine)”, mostly regarding their FAP policy for controlling bandwidth usage and the poor implementation thereof.

If I didn’t know any better, I’d swear someone over there must have read what I posted and did something about it. Amazing.  Granted, the invitation did appear to be mass mailing, but given how closely the new program lined up with my complaints and suggestions I still have to wonder.

So here’s the skinny…

Background (if you didn’t read the first article):

If you go over your daily allotment of 200-400MB/day, depending on how “premium” your individual plan is, HughesNet puts you in FAP (Fair Access Policy) mode that throttles your bandwidth for 24 hours. My testing indicates that the throttled speed varies somewhat, but is in the neighborhood of a 14.4K modem speeds. That is pretty much useless given the average size of a just about anything on the Net worth looking at. No appeals, sorry Charlie!

Complaint 1: After quite a bit of backlash, they finally provided a way to check if you were in penalty mode, but made it impossible to determine how close you were hitting the threshold. By being secretive  about the exact calculation for what puts you in FAP, the only way to know what you have left is to go over. Then it is too late.

Response?

hughesmeter

Looks like definite progress. The fine print elsewhere on the beta site indicates, however, that the initial version is only going to tell you if you are in FAP or not, which you can already find out if you know what you are doing. Also, it looks like the planned versions that tells you how close you are to the limit will only be available on HN9000 modems. But don’t take my word for it…

And, with an upcoming software update, HN9000 users will be able to see their remaining allowance in real-time, so you’ll always know exactly how much data you have left.

Complaint 2: The policy is supposed to be about stopping bandwidth hogs, but the limits are so low that even casual users are likely to trip them. Once it is tripped, you are going to wait the 24 hours with no recourse. Tech support told me on more than one occasion that they didn’t have the capability to reset the meter for anyone. Even if the FAP was accidentally triggered by something like a virus or accidental Windows update running early they were powerless to help you. Once in a fit of desperation I even offered to upgrade to a higher plan if they would remove the throttle early, but no can do. Even if you buy the super premium plan, more than 500MB a day is ain’t gonna happen.

Response?

hughestokens

It looks HughesNet users will soon be able to get their hands on indulgences in the form of tokens that get you out of the penalty mode immediately. According to the beta announcement each user will get one of these free every month as a get out of jail free card for accidental bandwidth “excesses.” For more chronic offenders, like myself, more will be available for purchase. These tokens can be redeemed to reset your cap for the day and get you out of FAP, if necessary. Additional tokens are going priced according to your service plan as follows:

Plan Price per Token
Home $5.00
Pro $7.50
ProPlus $10.50
Elite $12.50
ElitePlus $12.50
ElitePremium $12.50

The next time I have an urgent work project and hit the FAP limit this will definitely be a preferable to scouting out a coffee shop with Wi-fi. Again, in their own words…

By redeeming a Restore Token, your Daily Allowance is immediately reset, returning you to full speed. Your Download Allowance is not changed by purchasing a Token, and this fresh Download Allowance does not roll over into the next 24-hour period.

Other Items

There are a few other announcements in the e-mail that sound mostly like re-packaging of what they already offered, including a FAP-Free window from 2am-7am where your usage doesn’t count against your daily limits. However, they are providing their own branded download manager to help you schedule big downloads for that window, which also ameliorates the situation somewhat.

The Bottom line

These are very positive steps and show that maybe Hughes has finally decided that they care about keeping customers, or at least are worried about the types of things I predicted in my previous article on the topic. In any case, it sounds like it will make things a little more tolerable for those of forced to use satellite Internet.

Ultimately however, they are going to have to find a way to raise the bandwidth caps by at least an order of magnitude if they hope to compete anywhere except the captive market they have now, i.e. rural customers with no other option.

If you go over your daily allotment (200-400MB/day depending on how “premium” your individual plan is), HughesNet puts you in FAP (Fair Access Policy) mode that throttles your bandwidth for 24 hours to around 14.4 K modem speeds (based on my own testing). The

New FogBugz Plugin Released (FNN)

Just a note to let everyone know that I’ve just released my second FogBugz plugin, which is now available on the FogBugz Plugin Gallery under the name FNN.

This plugin, also known as “FogBugz News Network” adds some functionality to a FogBugz installation to provide a more real-time glimpse into what is going on for the projects managed in the system.

FB On Demand Users: FNN was submitted to FogCreek for approval on the FBOD installations earlier this week, so it should be available for you in the near future.

Recent Events Report

Available from the “Extras” pull-down menu, this report enables you to see what is going on in FogBugz. It shows a listing of recent case updates, for example resolving a case or assigning it to someone else.  This report can be filtered down to a specific person or project.

FNN Recent Events Report

Work in Progress Report

Also available from the extras menu, this report provides a centralized place to see what everyone is currently working on based on what they have marked with the “Working On” built-in FogBugz feature accessible from the upper right hand of the screen.

FNN - Work In Progress Report

Working on Indicator

Another feature included in FNN is a new status indicator displayed at the top of a case that indicates which user(s)  are working on the case, again according to their “Working on” settings.

Although the assignment features of FogBugz provide a good way to prevent two people from working on the same case, it isn’t uncommon for team leads to re-assign cases from one developer/tester to another to re-balance the workload.

Prior to this feature, we just used a custom FogBugz status called “Work in progress” that alerted everyone not to re-assign the case because work had already started. This status indicator effectively serves the same purpose without the need for a separate case status code.

FNN - Working On Indicator

Bug Reports, Comments, Suggestions

If you have any trouble with the plug-in, have ideas to improve it, or just want to tell me what you think of it, I’m happy to listen. You can e-mail me directly using the link provided in the Author column of the FogBugz plug-in administration page.

Sloppy Journalism Gives Sloppy Developers a Pass

I heard this story on the news earlier this week and later saw a very similar version on the Web, so I assume it all is regurgitated AP ignorance.

Here is the quote that got me charged up about the story (emphasis added):

130 MILLION Credit Cards Compromised In Data Breach

…In a two-count indictment alleging conspiracy and conspiracy to engage in wire fraud, Gonzales, AKA “segvec,” “soupnazi” and “j4guar17,” is charged, along with two unnamed co-conspirators, with using a sophisticated hacking technique called an “SQL injection attack,” which seeks to exploit computer networks by finding a way around the network’s firewall to steal credit and debit card information….

The journalist clearly is clueless about computer security, yet still managed to get his story on the wire without a fact-checker in sight. I can almost visualize the guy nodding along to the computer person who tried to explain what happened and munging together several parts of the conversation into this nonsense.  If this person had done the bare minimum research with Google they would have at least found the Wikipedia article on SQL Injection and got their facts straight.

But alas, it is all too common for journalist’s own ignorance of computers to creep into the news and make anything beyond MS Word seem like a mysterious art practiced by super-geniuses. The part that really bakes my broccoli is the way it unfairly portrays all the characters involved in this story.

dumb-techieThe Developers

The slapdash developers responsible for the site come out of this story completely clean, but bear most of the responsibility for the breach.  Calling SQL Injection a “sophisticated hacking technique” would be good material for an XKCD comic strip.

Developing a site that is vulnerable to a SQL injection attack is a lot like securing a vault by tying a string around the handle and putting a sign on the door:

Warning: String is fragile. Don’t pull too hard!

SQL Injection is talked about so frequently in developer circles that no competent programmer should be able to plead ignorance on this with a straight face. Also, unlike more sophisticated security issues, preventing SQL Injection is pretty much a solved problem.

These developers are not victims, they are conspirators (perhaps the two unnamed ones from the article)!

encyclopediaboyThe Hackers

When my mother and 90% of the other less-technically inclined people read this article, they are imagining the people who stole the credit card numbers as the whiz kid from the old Encyclopedia Brittanica  commercials.

Don’t even get me started on this.  I felt about as outraged as when I heard that Al Gore won a Nobel prize for being able to drone on about the weather despite the fact that he probably needs a consultant to operate a thermometer.

I’m not taking the side of these  criminals who stole the credit card numbers, but if they got these programmers fired at least some good came out of the situation.

The IT Guys

These guys get unfairly dragged into the problem with the journalist ignorantly characterizes a SQL Injection attack as “finding a way around the network firewall.”

Umm. No.

Breaking News!

For any journalists who happen to find this blog and want to scoop your peers, let me help you out on the next hot story.

I’m pre-announcing that I, a super hacker, plan to use an advanced hacking technique whereby I penetrate my credit card company’s firewall using the HTTP protocol.

Through advanced computer science techniques involving using a Joystick to navigate mathematical equations I have determined that they have unsuspectingly left ports 80 and 443 open on their firewall.

I plan to use this information and a little known “backdoor” called TCP/IP to access financial data unless they meet my demands and provide me with a free toaster by noon tomorrow!

hackers15

Hacking Attempt in Progress

FB Scratchout 2.1 Released

Just a quick heads up that I released the 2.1 version of my FogBugz scratchout plug-in, which you can download from the plug-in Gallery.

Customizable Scratch-out display format

New Feature: Customizable Scratch-out display format

Enable Scratching out by project

Feature: Optionally Enable/Disable Scratching out separately for each project.

Improved UI with 75% less clutter.

Scratch-out/restore buttons now only appear when you mouse over an event.

New mouse-over UI reduces clutter of scratch-out/restore buttons.

Tracking/Display of Scratcher

Not Pictured.


For more information on this plug-in see “New FogBugz plug-in enables you to erase history”