Unobtrusive JavaScript password strength checker

Fri Apr 25

I’ve added a couple of new functions to Performer - my easy to use JavaScript library. The two new functions allow you to check the strength of a password as it’s typed into a text box, and also check if a password and its confirmation match. Both update a notification element with a suitable message.

But that’s not all. Some of the older functions, such as the AJAX loader and tabbing functions, have got a little love as well. They now add extra classes to the elements they affect so you can style them easily. This stuff isn’t documented yet, but in a nutshell:

  • When loading some data from a remote page using the Loader function the element which is being updated will have the class ‘loaderloading’ while the loading is happening. Phew, a few too many ‘loader’s there.
  • When using the Tabber function to switch the visibility between different elements in a tag group, the link to the selected tab will have an additional class of ‘tabbercurrent’.
  • UPDATE: the Toggler function adds the class ‘toggleropen’ when the toggled element is being shown. That means you can easily do ‘open’ and ‘close’ CSS styles.

I’ve got lots more ideas for Performer, but time is short at the moment. However this little library - and the fantastic prototype library it’s built on - continue to make my life better.

HTML is still where it’s at

Mon Apr 21

I just read a ridiculous thing at NetworkWorld about the “demise” of HTML skills. It’s in the conext of an article discussing “5 IT skills that won’t boost your salary”. I’ll quote the passage and highlight the relevent parts to save your eyeballs from being assailed by their ad-heavy pages:

Technical skills may never die, but areas of expertise wane in importance as technology advances force companies to evolve and IT staff to forsake yesterday’s craft in favor of tomorrow’s must-have talent …

As companies embrace Web 2.0 technologies such AJAX, demand for skills in HTML programming are taking a back seat. According to Foote Partners, pay for skills in technologies such as Ajax and XML increased by 12.5% in the last six months of 2007, while IT managers say they don’t see a demand for technology predecessors such as HTML. “I’m not seeing requirements for general Web 1.0 skills — HTML programming skills,” says Debbie Joy, lead solution architect for CSC in Phoenix.

Is it just me, or does anyone else find that ridicuous? AJAX requires HTML, just like cars need roads, or boats need water. Without HTML skills all the flashy new AJAX development wouldn’t work.

Tell your managers, we need to keep the plain old semantic HTML skills. Without them the web is dead.

HTML, PHP and JavaScript Experiments

Sun Apr 20

I was browsing through some stats for my website tonight and noticed a few people were visiting for my Automatic Image Replacement Engine (AIRE) which I did a long while ago. So I thought I’d do a quick post about some of the other experiments I’ve worked on which are all free for any use (just credit me as the original author).

3hive player - playing the sharing!

A If nifty Greasemonkey script for Firefox which adds a little player for every track found on the excellent 3hive music sharing website. Keep up the good work, boys.

CSS Gantt chart

Show a Gannt chart with just HTML and CSS, no need for images. There’s even fixed-width and fluid-width versions.

Datatable class

A simple datatable class for PHP which will allow you to pass an array of values which will then be displayed as a table. Format cells almost anyhow you like, add optional alternating CSS classes, and lots more options. There’s also a simple explanation of object-oriented programming on that page in case you’ve found it as difficult as me to understand the concept.

Refresher function

Update a part of your webpage with JavaScript the easy way, so now anyone can do that clever AJAX stuff.

Clean URL Capability Checker

If you want to know if your server supports mod_rewrite, the fantastic way to rewrite URLs, then use this little tool.

Zoom Boxes

An experiment with multiple boxes that zoom in and out when clicked. Not much more I can say about that, really.

AIRE - automatic image replacement engine

Fonts are limited on the web, so I wrote this little PHP function that will render single-line text using any font you want as an image. Before you say “but images aren’t accessible!” it writes the images in as backgrouns, leaving accessible text in the HTML. Hoorah.

Confessions of a compulsive view-sourcer

Wed Apr 16

Hi, my name’s Chris and I’m a compulsive view-sourcer. I’ve been a compulsive view-sourcer for several years, but most of the time I keep it to myself and try not to let it affect my family and friends. Sometimes I have a bad episode and then I feel guilty afterwards. Those bad episodes are happening more frequently.

You see, other people might favour crack or LSD, I prefer HTML. It gives me a real high to get some quality semantic HTML - I’m happy for hours. But there’s a lot of bad stuff out there that will just give you a headache; dirty HTML with all sorts of other crud added to it. I try to stay away from dirty code but it’s so much easier to find than the clean stuff.

Take last week. A website I used to be a regular visitor to relaunched with a new design. I went to have a look, but before I knew what I was doing I had right-clicked and viewed the source. Bad mistake. It was HTML, but only barely. Full of tables for layout, spacer GIFs, all the worst additives. I know I shouldn’t have done it, I just couldn’t stop myself.

I felt so dirty and guilty, not to mention ashamed. I had to do something about it, so I cleaned up the HTML. You can see the original version here, and my cleaned up version here.

This is where my compulsion to view sourcing gets hard to handle. I mean, it’s not enough that I see bad code, I just have to do something about it. The website I rewrote is now over 60% lighter when you count code and images, and has a clean and semantic HTML structure. If they get 250,000 visitors a month (but I think they get a lot more than that) with their old dirty homepage HTML that would be 59.6 gigabytes of data transferred. With the new clean HTML it’s cut down to 22.9 gigabytes.

But that doesn’t matter, because I’m never satisfied. I’ll always need another hit of HTML, and while the clean stuff is great, it’s the dirty stuff that’s much easier to find. Still, I suppose the first step is realising I have a problem.

If you’ve been affected by any of the issues raised by Chris’ confession there is help available. Visit one of the excellent online support groups and get involved. Together we can stop the supply of dirty HTML to our screens.

Web capital = social capital

Sun Apr 6

We all know that “social capital” is a phrase used to describe the influence, reputation and connections a person has in a particular social context. Like money, it’s something that’s hard to come by but easy to lose. Tara Hunt, a person with greater than average insight into the social web, explores this area in ‘Social Capital and the Influence of Social Networks‘. I suggest you read it as it will help you to understand my slant on this subject. I’ll wait.

Back? Good. It appears to me after reading that, and much more written about the rise of social networks and the blogosphere, that we’re not talking about anything new. In fact this stuff is as old as Google itself. Why? Here’s why:

Social Capital is … complex and includes … the Social Capital of those who you have relationships with

So if you have a relationship with someone of high social capital (related trivia: my second ever subscriber on FriendFeed was Hugh Macleod) that raises your social capital. Where have we heard that before? Oh yes, search engines.

Search engines, at least the traditional ones such as Google, have a fairly simple method of working out how important you are. Let’s say someone searched for the word “trombone”. If you have the word “trombone” then you’re almost certainly going to appear somewhere in the search results. How high up depends on how important and relevent you are - your “web capital”, if you will. Let’s look at both these parts.

Relevance

The relevence is dependent on a) the searched words appearing on your web page and b) how often the appear and c) where they appear. Actually it’s a lot more complex than that, but for this simple illustration it’s enough. And I want to move onto the more important topic:

Importance

On the web not all websites are created equal. Those which have few links going to them are, to put it bluntly, less important than those to which many people have linked. So sites such as BBC and Amazon are massively important, as they have been linked by so many people. A link to a website is like a vote of confidence in that site - it translates almost directly into pure importance. OK, it’s more complex than that, but you get the idea.

So if you’re a little unimportant site, and you get linked from an important site, it has a positive effect. Suddenly Google says “Well, I thought that little site was unimportant, but look who has just linked to it! I’d better push it up the search results a bit.” And a few links from a few high-profile sites is like a Hollywood A-lister calling round your house and saying “Hey, come on, I’m taking you out drinking with my A-lister buddies”. It has a positive effect.

So what has this to do with social networks? A lot, as it’s exactly how social networks operate as well. The more people you have as “friends” and have you as a “friend” the more important you are. Great, fame and fortune awaits.

Except it’s all bullshiitake (to borrow a phrase from Guy). For more information on that see my recent post about social engineering.