It’s an absolute snap to implement, with the addition of one simple class to the top-level HTML5 nav element a fully styled and accessible navigation menu will be produced. The menu also utilises the jQuery JavaScript library for it’s animation and the addition of some unobtrusive presentational elements.

There’s more detail on how to use the menu contained on the demo page. But in essence, it is as simple as creating a series of nested unordered lists. No more than that.

As always, if you have any questions or problems please leave a response here and I’ll be happy to help. You can also fork this project on github if you want to tinker with it or make some improvements.

It’s been tested in all modern browsers and functions perfectly. It does degrade relatively nicely in IE7, but don’t expect unicorns and rainbows. No IE6 support, because frankly: fuck IE6.

P.S. It’s available in four snazzy colours!

I’ve been using Notepad++ for a few years now, but had always been frustrated by it’s productivity stifling lack of a good snippet plugin; until I discovered QuickText . This awesome little plugin by João Moreno perfectly and elegantly fills the hole I had been feeling for so long.

It’s very simple to use: simply enter a keyword; hit Ctrl+Enter and it automagically expands into your predefined text snippet. You can obviously add as many snippets as you’d like via the Options panel (Plugins > QuickText > Options…).

My only quibble with this little gem is the way it uses the $ character to denote initial cursor position. Once your snippet has been added to your document the cursor is placed at the first $ character in your snippet. Fair enough you might say, that’s a nice way of jumping to the relevant portion of a function, but it results in a problem: JavaScript (among others) uses this character in several important ways, so QuickText removing them all from your snippet (as it does) means a not inconsiderable pain in the ass adding them again.

Note: Myself and several other people have had initial problems getting QuickText to actually replace the keywords with the snippet (Ctrl+Enter did nothing). The problem is that a recent Notepad++ update also uses that keyboard shortcut, so there is a conflict which needs to be resolved before QuickText will work. What you do is go Settings > Shortcut mapper, then click on the Plugin Commands tab and scroll to near the bottom. You’re looking for ‘Replace Tag’, once you’ve found it define a new shortcut (I use Alt+Enter) and restart Notepad++. Everything should now be fully functional.

As you probably already know CSS3 support isn’t exactly ubiquitous at this stage (especially for things like linear gradients I used here) so these buttons are going to degrade in older browsers (I’m looking at you IE). Whether that stops you putting them into production is obviously up to you, they look okay when degraded (and I could probably have made them look better if I had a need to) but for the purpose they were created for there was really no need.

What this little exercise did throw up however is exactly how poor the support for CSS3 is in IE9. How Microsoft can justify their attempt to develop a ‘standards compliant’ browser and do it so poorly is beyond my understanding.

So here it is, version one of the Client Questionaire. If you have any suggestions or questions about it, I’m happy to help.

Also included is a downloadable and printable HTML5 powered version, which can use used and styled as you should choose. It being based on the kick ass HTML5 Boilerplate by Paul Irish et al.

‘Multicolr’ image search via Idée Inc.

The great tool from the creators of the indispensable Tineye, is a prototype tool that allows you to search Flickr for photos based on a user selected set of colours. Unlike a lot of these tools it seems to work really well, as it’s based on their great Piximilar image search technology (that also powers Tineye).

Git Immersion from EdgeCase

This great introduction to the Git version control system from Edgecase is a great introduction to what some people can find a really intimidating tool. It’s lucidly written and really straightforward, I really recommend it.

Considering the apparent complexity of Orman’s design, this implementation came out relatively light-weight; I used sprites for the nav links and pager and we’re obviously using Google’s CDN to serve jQuery.

It’s been manually tested in all modern browsers (although it’s kinda borked in IE6, but frankly I stopped caring about IE6 quite a while ago now). But if you run unto any problems let me know in the comments and I’m happy to help.

At the following links you can find the demo, and the download link.

As with all my freebies, it’s distributed under the Creative Commons Attribution 3.0 Unported License.

In short, removing any style to focus’d elements is really bad when it comes to the accessibility of your pages. People who can’t use conventional methods of navigating pages (like a mouse) are prone to using the tab key navigate links on a page, removing the main method of determining which link that currently has focus is therefore obviously not a good idea.

If we look at the Web Content Accessibility Guidelines (as published by W3C) we can see that it includes a relevant passage about the focus property:

2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Now, there are a lot of people who respond to being told this with a resounding: ‘BUT IT LOOKS SO BAAD!’. The truth is, in it’s default state in most browsers they’re right. But that doesn’t mean we can’t style it ourselves with some simple CSS.

If you take a look at demo, you can see a couple of different methods of using the :focus property to help the accessibility of your pages without a detrimental effect on your design.

In photography, the golden hour (sometimes known as magic hour, especially in cinematography) is the first and last hour of sunlight during the day,when a specific photographic effect is achieved due to the quality of the light. – Wikipedia

A really useful tool I strongly recommend you check out (the UI could use a little work however).

The link: The Twilight Calculator

Using both serverside PHP and client-side input validation (powered by Jorn Zaefferer’s great jQuery Validation Plugin) this form is developed using ARIA accessibility standards, making it one of the most accessible and reliable contact forms available.

Usage

In order to get the form working, all you need to do is open up index.php in your favourite text editor and replace the pre-configured sample email address with your own. That’s it. It’s as simple as that.

As you’ll notice, both jQuery and the validate plugin are served via CDN (Google and Microsoft respectively) so all you need is the core PHP script and the dependent presentational files (images and CSS).

The form has been tested in all major browsers and works great, but as there are a couple of very minor CSS3 presentational things it might not look quite as great in non-compliant browsers (I’m looking at you <IE8) but even then I doubt users will really notice.

See the demo or download the contact form.

License

As with all my freebies, this is distributed under the Creative Commons Attribution 3.0 Unported License.

There are several ways in which you can display the contents of an RSS feed within another page: doing it only with built-in PHP functions on page-load; using external classes or by using JavaScript itself to grab and parse a feed using a PHP proxy. All of which have their distinct advantages and disadvantages.

The method I’m using is a combination of the two, using PHP to grab and parse the feed and then JavaScript (via jQuery) to load the data into the page and auto-update it every 10 seconds (or by whatever period you’d wish). The PHP is based on Gary White’s very effective RSSReader.

Usage

The address of the feed to be displayed is determined in rssfeed.php (contained within archive provided below), you can edit it as you see fit. Once this edit has taken place the demo should function perfectly, displaying the most recent entry from the specified feed.

However, if you wish to install the feed syndicator on another page (and let’s face it, you probably will) it’s simply a matter of copying the JavaScript marked and contained with the header of index.html (included in the download) into the desired page and adding id=”rssUpdater” to the div where you’d like the feed to be displayed.

Note: When installing the script, be aware that you need to keep rssfeed.php and rssreader.php within the same directory, and that the path to rssfeed.php needs to be accurately determined in the JavaScript.

If you’s like to alter the length of time between auto updating the data, it can be set up changing the value used by the JavaScript: this is set to 10000 milliseconds in the demo (10 seconds, obviously( but can be pretty much anything you like.

At following links you’ll find the demo and a link to download the zip file.

As always, if you have any questions feel free to ask in the comments.