Main menu

Tag Archives: CSS

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

I have just been watching this talk about the Shadow Dom by +Angelina Fabbro and although it is for things that I have read about and played with before something seems to have just clicked in my head (where else would it click?).

I love the idea of making re-usable components but always thought that scoped JS and CSS would be enough, why add on this layer of complexity with the Shadow Dom? I looked at it as just another way to hide spam content. A way to display something without Google being able to see it so you can market a page the best way possible but when you visit it you just seem spam, everywhere >_>

I have just stopped this video at 8:49, the thing that has clicked for me is that the Shadow Root is then placed into the Host Node… The rendering of the Shadow Node was done by the Shadow Root!

I’m sure I mentioned this to +Paul Irish or +Addy Osmani before but I always thought it would be neat to give Front-end devs a way to do what Flash devs have been doing for a while… cacheAsBitmap…. Tell the browser that this section shouldn’t be updated, no matter what.

Am I right in thinking that each Shadow Dom could be rendered and cached this way and hence save on Render times? keeping the FPS down and only having to render when its Child Nodes become *dirty*…

There may not be a way to get the browser to cache this just yet, but having an attribute we can change for this would be most useful. Having the browser *cough*chrome*cough* cache these automatically would be useful too. Who knows the structure of our pages better than us right? Why can’t we say when to and not to update a frame?

Either way that has just made Components a lot more tempting in my books.

Late last week I was skipping over the latest tweets for jsfiddle just to see if there was anything interesting. I came across a fiddle by Joshua Hibbert where he asked people to guess how he had made this image with only 1 element.

I had no idea at first but after seeing him working fiddle I decided to take it one step further and get some animation in there.

Pretty cool right? The effect is really simple to do as it is just multiple box-shadows! Here is the sample code for the smaller question box.

As you can imagine, creating this effect takes a little time and creating multiple sizes takes even longer. Just getting the coordinates and the colors in the right place is a real pain. As I was looking around through the list of #jsfiddle tweets this one also popped.

I immediately forked it so unfortunately I can’t remember the name of the original creator.

Jesper had used SASS to make the coordinate creation a lot easier to deal with. This was a great idea so I decided to base my version off his (or her) work.

My aim was to get all of this working in 1 fiddle but unfortunately SASS doesn’t compile correctly when using the @-webkit-keyframe. Instead I had to generate 4 separate fiddles and then merge my work together.

After I had all my frames I just needed to put them in keyframes and set the timing. The end effect is pretty cool but they are currently fading between each keyframe (is there any way to stop that? Update: Thanks to Harry Roberts for -webkit-animation-timing-function:step-start; works great)

Final thoughts

Although this effect is pretty cool, I can’t see it kicking off.

At first I was thinking about creating a Github project and maybe converting some popular emoticon sets to pure CSS. This would have taken forever though as having to create these 1 pixel at a time is just too much work.

Next I though maybe I should create the tool that can generate these? Maybe have it drag and drop and then some canvas element and JS could read out the pixel coords and colours and create the end CSS. Great idea so I started thinking about it a little more…

In my day job I’m all for front end speed and making sure the end users experience of a site is as good as it can be so naturally the next thing I thought about was, is it actually worth the effort? We use sprite sheets instead of separate images to minimize the data and HTTP requests so this seemed as though it ticked all the box’s but there was another thought that kept jumping in my head.

When I have created games for any device in the past it is generally best to use sprites instead of getting the device to generate any sort of effect. The generation time of custom effects is outweighed by the speed of just displaying an image. To generate the above 4 framed demo the browser has to draw 1,008 separate box-shadows (252 per slide). That’s a lot of shadows and obviously would be slower than just displaying an image.

The final nail in the coffin for this example is the end file size. For just the base CSS to create the class and the keyframes for 1 browser is around 24kb. If you include all of the vendor prefixes then this number jumps to 64kb. The below GIF file is just 3.64kb or 4kb on disk, its a no brainer for size. But what about the extra HTTP request again?

Well in this case I would just say to convert the image into a data uri and store it directly in the CSS file. This gets the base CSS down to 4.96kb or 8kb on disk.

In closing, great to show off what can be done with web technologies but not practical. Of course I am open to opinions and any other ideas or thoughts you may have on this so drop me a comment and please share

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 😉

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 😉