Last night whilst waiting for the NASA Curiosity landing, one of my friends was showing me his progress on his new CV / Portfolio Site, at the top of the page he had a banner of repeating coloured rectangles. It looked awesome, and he was even kind enough to link me the image.
It got me to thinking though, why use an image? It’s a simple enough effect, why not do it in HTML? And so at 5am I set to work on CSSDeck to see what I could do.
Before I show you the Code you can see running demos of project on CSSDeck
Here is what I came up with. Very simple HTML markup that allows you to either hard code a couple of elements or run the little JQuery function generate the markup for you for n elements.
It works very nicely and fills the whole width of the screen during resizes, but it is a little bulky for my liking. And essentially all we’re doing is drawing some simple colours… Surely this is a job for HTML Canvas? Right?
I finally got sick enough of how Reddit opens Title links in the same tab to do something about it. I always took it as a given in Web Design that internal links opened in the same tab unless specified otherwise, and that external links always loaded in a new tab, so as to protect any possible progress the user may have had within your site/page against being lost… Which with Reddit, it is.
With Vanilla Reddit clicking a link opens it in the current tab, and backing up back to Reddit via the ‘back’ button does not take you to the same place in the page you left.
With the Reddit Enhancement Suite plugin, which features continuous scrolling the affect of this misalignment becomes much more frustrating. It is easy to have scrolled 30 virtual pages through Reddit, only to click a link without thinking and backup to find you are back on page 0. And that auto load images has been turned off.
Shift – X btw if anyone doesn’t know; it’s the same as clicking the Show/Hide Images button at the top of the page.
Anyway, I finally got sick of it and in 2 minutes I whipped up this handy little plugin for Google Chrome.
On page load it simply registers an event for whenever the page is altered. When this happens it sets a ‘timeout’ function to run in 100 milliseconds time.
Why in 100ms time? Because the event fires whenever the page is altered we don’t want it to fire for every little thing when lot of stuff happens. By waiting 100ms we are effectively saying…
If the page has changed, possibly multiple times, and now has become stable for 100ms then fix the page…