Give your Apache file Index a face lift with h5ai

Are you running an Apache server?

If you are then you would have been greeted by that horrible directory page more than once. Isn’t it time to get rid of the old to make way for the new? Give your Index pages a face lift with h5ai.

h5ai makes browsing directories on HTTP web servers more pleasant

h5ai is a modern replacement for the built in Index view for folder listings and it boast plenty of neat features. It is build with HTML5 Boilerplace, jQuery + Modernizr and can be implemented with just a few steps (2 in my case). It has been created by Lars Jung (@lrsjng) and he has a number of other useful libraries and tools, go check him out.

The design of h5ai is nice and minimal and uses CSS3 and sprinkles of JS to get things working. If you have JS turned off though it degrades nicely. There is a built in colorbox that enables you to view images on the fly and to top it all off there is a code syntax view so you can easily read things like JS and XML.

This definitely makes your index views easier to digest and easier to navigate around as there is a built in search and tree view.

There are plenty of optional features and extensions you can enable with h5ai as seen above where you can enable QR Codes on file hover. The whole install sits in one folder at the root of your site and all you need to do is get your server to add its index file to the index file list. Basically just add this line to your .htaccess

1
DirectoryIndex index.html index.php /_h5ai/server/php/index.php

Here are just some of the optional features that are available

  • breadcrumb for the current directory, linked to all parent directories
  • auto refresh
  • custom header and/or footer for each directory
  • select and download multiple files and folders at once, either as tar or zip archive
  • filter function for the displayed files and folders
  • folder sizes
  • localization with a lot of languages already included
  • link hover states between main view, breadcrumb and tree view
  • display HTTP web server details
  • image preview with keyboard support
  • text file preview with Markdown rendering and keyboard support
  • QR codes on hovering files
  • sort files and folders
  • status bar with additional information about files and folders
  • thumbnails for images, pdfs and movies
  • directory tree view
  • display breadcrumb in the browser title

If your not convinced yet then why not head on over to the official page or check out the Github repo.

h5ai demo

Know of any other cool scripts like this? Let me know so I can get them installed and featured on here.

Use LESS in JSFiddle, the easy way

If your like me then you love online ‘tinker tools’ like JSFiddle, they allow you to quickly prototype your ideas and to share them with the world. I have been using it for a while now but one of the things that always bugged me is the lack of LESS support in the panels :-(

I decided to have a play and see if I can get LESS running but somehow still allow me to write my CSS in the correct panel. The quickest way I could think of doing this is with this one liner

1
2
3
<pre>
    (function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); })()
</pre>

It’s a really simple 2 step shim. First find the <Style> tag and change its type to ‘text/less’. Second tell less to refresh the styles on the page. You can see a working version here

Of course this may not be the best way of doing this but its the first thing that came into my head. Got any suggestions for an improvement?

I have emailed Piotr Zalewa to see if there are any plans to implement LESS in the future so I will update here if I get a reply.

Edit: JSFiddle have their docs on GitHub here.

An Issue has already been raised to add LESS support but it has been closed of saying it will be in the Beta release

https://github.com/jsfiddle/jsfiddle-docs-alpha/issues/168

Update: Piotr replied to my email and informed me they are planning on adding a few extra languages to support. Although they state in the above issue that LESS support will in bete he says it might be possible to add it before although there would be no ETA.

Thanks for the reply Piotr and looking forward to future updates ^_^

1 Like no Other Launched

Remember how I posted that Sneak Peek back in September? Well it was for our latest launched website 1 Like no Other! Why not check it out and then come back and read the rest of this article?

I don’t usually do write-ups on the sites that I have worked on but I enjoyed this project so why not.

The homepage for this site has gone through 4 different version that include a CSS3 animated intro, a HTML5 Book where you can click through each page and even a Flash version of the above in hopes that it would be faster to download on slower connections.

1LNO Homepage

The end version the client went for was a subtle parallax effect which works great! It gives you the ability to see all of graphics and illustrations for this seasons clothing. It went through many different revisions and many different layers (9 layers at one point) just goes to show that more is not always better.

1LNO Listing page

The product listing page was also fun to create for this project. The main filter system is pulled in through Ajax to reduce page load and to provide a nicer experience when navigating, who wants a page refresh anyway?

Once an Ajax request is finished all of the products animate to their new locations. This is a great effect and I hadn’t done anything like this before so it was great to learn something new at the same time. Most of the text that is on and around the site in a custom font called Paulson which works really well and is placed on with Cufon.

1LNO Product page

The product page was another nice one to do. I added some subtle animations to the alternate images and to the add to basket just to catch the users eye when they first navigate to it.

We went through a few versions of the carousel at the bottom of the page aswell. This went from a simple left and right carousel, to just one large image in the middle that was more like a zoom of item underneath it. The end version is definitely better and uses the jQuery easing plugin to give the animations a smoother transition.

When the product page was first made we just had a standard zoom on hover effect so that a potential customer could see the detail of the shirts. We found that this didn’t show enough though, instead I created a custom full page zoom to really show them off.

Custom product zoom

Well that’s the main pages of this ecommerce build but I have included more images below for you to look at. Let you know what you think in the comments or even go check out the website for youself and have a look around 😉

CSS Off 2011

I finally got around to uploading my submission for CSSOff 2011 (http://www.unmatchedstyle.com/cssoff/).

I gotta say I’m not happy with it though. It started off really good, but then I got lazy and started putting it off. Next thing I knew I was coding away while Andrew was playing the Rocky theme tune on his phone. The design was really good and everything was meant to be responsive but the bottom half of the site just went wrong. Not through lack of skill, but lack of time.

Have a look for yourself here http://www.validatethis.co.uk/cssoff-2011/

I don’t think the submissions have been marked yet so I don’t know where I came but I will update this when I find out. I’m also going to enter into any other competitions like this so if you know of any then post them in the comments 😉

Sneak Peak

A sneak peak of what I’m working on here at work. I’m having to animate everything but as you can see this has rotations, which are always fun to try and implement into older browsers.



Luckily I found some great plugins for jQuery that make the job a lot easier.

jQuery Transform
https://github.com/heygrady/transform/
This plugin uses CSS3 transforms if they are supported and if not then relies on the matrix filter for IE8 and below meaning it allows you to transform layers all the way down to IE6 and gives you loads of options like


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Go Crazydd
$('#example').transform({
    matrix: [1, 0, 0, 1, 0, 0], //applies a matrix
    reflect: true, //same as rotate(180deg)
    reflectX: true, //mirrored upside down
    reflectXY: true, //same as reflectX + rotate(-90deg)
    reflectY: true, //mirrored
    rotate: '45deg', //rotates 45 degrees
    skew: ['10deg', '10deg'], //skews 10 degrees on the x and y axis
    skewX: '10deg', //skews 10 degrees on the x axis
    skewY: '10deg', //skews 10 degrees on the y axis
    scale: [1.5, 1.5], //scales by 1.5 on the x and y axis
    scaleX: 1.5, //scales by 1.5 on the x axis
    scaleY: 1.5, //scales by 1.5 on the y axis
    translate: ['20px', '20px'], //moves the transformation 20px on the x and y axis
    translateX: '20px', //moves the transformation 20px on the x axis
    translateY: '20px', //moves the transformation 20px on the y axis
    origin: ['20%', '20%'] //changes the transformation origin
});

jQuery Easing
http://gsgd.co.uk/sandbox/jquery/easing/
When animating things its always nice to have more easing options that the standard ‘linear’ or ‘swing’. jQuery Easing gives you around 32 extra easing’s to make your job easier. It also allows you to setup your own custom easings.