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
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.
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 😉
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
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)
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.
Woah, the HTML5 Boilerplate has been updated already and its just got a whole lot more Awesome-er!!
H5BP is brought to us by Paul Irish, Divya Manian, Sichuan and many other people in the open-source community. It has many features and snippets of code that I use myself every time I start a new website so this tool is invaluable to me. If you havn’t checked it out yet then go and have a look at http://html5boilerplate.com
The reason H5BP has just got a whole lot better is because of this
The Boilerplate build script is ready for prime time. You know all those site optimization tricks that Steve Souders tells you is a good idea? You’re four keystrokes away from nailing a 100% on them. Now you can:
Combines and minifies CSS
Optimizes JPGs and PNGs (with jpegtran & optipng), saving 15-50% of page weight
Removes development only code (any remaining console.log files, profiling, test suite)
Basic to aggressive html minification (via htmlcompressor)
Revises the file names of your assets so that you can use heavy caching (1 year expires) without cache conflicts.
Upgrades the .htaccess to use heavier caching
Updates your HTML to reference these new hyper-optimized CSS + JS files
Updates your HTML to use the minified jQuery instead of the development version
Remove unneeded references from HTML (like a root folder favicon)
build according to what environment you want: production, test or development
Together with the server configurations (like the .htaccess), we’ve seen reductions of total page weight from 120k to 30k. We guarantee A-level performance with YSlow and Google PageSpeed when using the build script along with the server configs. (Okay, maybe not “guarantee”, but your parents will be really proud of you. 🙂
So have any of you had a play around with this yet? What are your experiences with it?