reven

HTML5, CSS3 and Modernizr

reven — Sun, 24 Oct 2010 21:31:22 +0000

The newest internet buzz is HTML5 and CSS3. But not all browsers support it, that’s where Modernizr comes in.

HTML5 comes with a whole bunch of changes and updates to HTML4. Most of them are just new elements to better format your webpages, for example article, header, footer, nav etc. But if Internet Explorer doesn’t know about an element, it simple will ignore it. So if you place your menu inside a nav element, by default Internet Explorer will not show your menu. But with a little piece of Javascript you can tell IE about these new element types and they will magically appear

document.createElement("nav");

Doing this for all the HTML5 element types would be tedious and you may miss a few, so by using modernizr this is done for you.

So now you can begin to use HTML5 syntax and elements in your web site designs.

This is the web page skeleton code I’m currently using on my web sites






  
	
		Page Title
		
		
	
	
		
			
				Site Name
				
					
				
			
			
				
					left content, eg menu
				
				
					the main site content
				
			
			
				Copyright information

You’ll notice I’m still using div elements, you will still need them. But I’m using aside, footer, header, nav where I can. This will help Search Engine Optimisation (SEO) as it will structure your content better and search bots will better understand it. You may also notice I’m still using a ul for the menu inside the nav, this is because nav is basically just the container, you still need the ul to list your menu items. Also I’m using Paul Irish’s trick to tell my CSS if the client is IE and if so what version it is, this removes the need for CSS hacks and will always work even if Javascript is disabled. The “no-js” class is the default class you add for modernizr, which will be removed once it’s run. It basically lets your CSS know if Javascript is disabled in the browser, and if it is you may format your document differently.

Modernizr won’t magically make a web browser support the new elements like video or canvas, but it will add classes to your document html tag so you can easily tell what works and what doesn’t work. This is really helpful in your CSS and Javascript. You can create custom rules for supported or non-supported features. Modernizr also will detect if the browser supports most of the CSS3 features. For example here is what your head may look like after modernizr has run.

As you can see this particular browser supports canvas, geolocation, border radius, box shadow, opacity, video, RGBA and it does not support css transitions, 3d transforms and reflections among others. These are extremely helpful to your CSS and your Javascript since all you need to do is check if the class is added to the html element to see if a feature you want to use is supported.

So in your CSS you may have

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

And in your Javascript you may have

if($("html.canvas")) {
// do something with a canvas
} else {
// fallback to another method of drawing
}

Like I said, modernizr doesn’t magically make a browser support HTML5 or CSS3, but it will make a browser render most of the elements (it won’t do canvas or video etc) and it will help you test in your CSS and Javascript if a feature is available in the browser.

The only problem I have come across with modernizr, is when it’s working out if fonts are supported, it will make my webpage about 100px taller and my bottom background doesn’t stretch for a few seconds, once that is done, the document is shrunk again and my website looks fine. Just a small problem.

For a 5KB download you really should start using this in your web site designs as the benefits clearly out way the small download.

Do more with LESS

reven — Wed, 20 Oct 2010 05:57:58 +0000

LESS extends CSS with variables, mixins, methods and nested rules. In short, it makes CSS a lot easier to work with, and speeds up your web design.

CSS is a neat little language, but its pretty basic, and is missing a lot. With browsers using different syntax for selectors, you often find yourself repeating code, for example

.roundedelement
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
}
.otherroundedelement
{
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
}

Mixins

Each time you want to add a border radius to an element, you have to specify all variations for maximum browser support. But with LESS you can create a mixin to do this for you.

.rounded_corners(@borderradius: 5px)
{
    border-radius: @borderradius;
    -moz-border-radius: @borderradius;
    -webkit-border-radius:@borderradius;
    -khtml-border-radius:@borderradius;
}
.roundedelement
{
    .rounded_corners;
}
.otherroundedelement
{
    .rounded_corners(10px);
}

So we have basically added a method “rounded_corners” with a default radius of “5px” which we can then use by calling “.rounded_corners”. No repeating the border radius code. If that was the only feature, that would be enough of a reason to use LESS.

Variables

Variables are simply variables you can use in your LESS files, for example

@pageWidth = 720px;
.main
{
    width: @pageWidth;
}

Nested Rules

I really like this feature, it gives more structure to your css. But you must be careful, if you overuse it you risk creating slow css selectors. Which will have a big performance impact on your web site. So remember when you are designing a website not to over use this, or make deeply nested rules.

#header
{
    a
    {
        color:red;
        :hover
        {
            color:orange;
        }
    }
}
#footer
{
    .copyright
    {
        a
        {
            color:#d3d3d3;
            text-decoration:none;
            :hover
            {
                color:#fff;
                text-decoration:underline;
            }
        }
    }
}

Which you can easily see groups things a lot better, and you don’t have to create long rules like

#footer .copyright a
{
    color:#d3d3d3;
    text-decoration:none;
}
#footer .copyright a:hover
{
    color:#fff;
    text-decoration:underline;
}

I found using nested rules I was able to simplify my rules and remove some redundant and duplicate ones. Being able to easily add :hover to the nested rule is a really neat feature.

Operations

This feature is nice, but not one I would use often. But the fact you can do operations on colours makes it useful. You can easily create a colour scheme from a single theme colour.

@basecolor = #ff9900;
.main
{
    color:@basecolor * 3;
    border: 1px solid @basecolor * 2;
    background-color: (@basecolor + #333) * 1.5;
}

As you can see the operations can be quite complex, but not something you would use on a daily basis.

Getting LESS

There are a few ways you can start using this on your web sites:

Compile your LESS files in production and deploying the compiled .css file
- Solutions
  - less the homepage for LESS. Download the offical Ruby gem from here.
  - less.app a Mac OS X application for compiling your LESS files.
- Pros
  - Quickest delivery to client since it is already precompiled.
  - No need to install any extra software on server.
  - Guaranteed to produced desired CSS since testing will be done before deployment.
- Cons
  - You may run into problems update the file, what if someone changes the .css file without changing the master LESS file? All those changes will be lost when you recompile.
  - Each change needs a manual recompile and deploy.
Compile on the server side
- Solutions
  - lessphp a PHP port of the LESS engine as a single includable class. This is the one I use
  - LESS.php a PHP port of the LESS engine, split into 3 different files.
  - WP-LESS a WordPress plugin for LESS.
- Pros
  - Easy to update and maintain, since there are no CSS files that may mistakenly be updated.
  - Quick delivery, with caching after the first compile of the LESS it will be just as quick as the precompiled solution.
- Cons
  - Requires software on the server, or code behind to do the compiling.
  - LESS might be incorrectly compiled and produced an invalid CSS file.
Compile on the client side
- Solutions
  - LESS.js is a Javascript port of the LESS engine.
- Pros
  - Easy to update and maintain, since there are no CSS files that may mistakenly be updated.
  - Nothing required on the server, so will work on any host.
- Cons
  - Slowest solution, as the client needs to first download the LESS files and then compile on their machine in Javascript
  - Can’t guarantee compiled CSS will be expected CSS, unless you test every single browser under every single environment.
  - Dependent on Javascript, so if Javascript is disabled on the client your website won’t be rendered with CSS

My favourite method is 2, compiling on server side, with caching to maximise speed. I’ve implemented a custom WordPress plugin using lessphp to cache and compile my LESS code on the fly, only recompiling when a change to a LESS file is detected. Also I combine all my LESS files into one, before compiling, and I have a global.less file which contains my main functions and variables.

In reality when your are designing a web site you might find yourself at times writing more code using LESS, but you will be repeating yourself less.

Go try it out, I’ve started using LESS in all my web development.

jQuery Mobile Alpha Review

reven — Mon, 18 Oct 2010 05:07:24 +0000

jQuery Mobile Alpha was released last week, and I just had to have a play. In short, it’s really amazing.

I eagerly awaiting this release, in fact I was checking jQueryMobile.com every hour to see if it was online . When I finally saw it online, I just had to play with it. It’s very similar to jqTouch, some parts are actually based on the work done in jqTouch, which I’ve used before, but a lot easier too use.

First, you don’t need to use any jQuery to use it. It’s all based on the data attribute. For example to make a toolbar, all you need to do is create a div with the attribute data-role=”header”.

...

That’s it. No jQuery anywhere. That is nice, and simple, really simple.

To start using it all you need to do is include the CDN hosted JavaScript and CSS files. Remember you are creating a HTML5 document as well, so your header should look like this



	
	Page Title

The base HTML code you need to create your page is



	
	Page Title
	
	
	


	
		
			Page Title
		

		
			Page content goes here.
		

		
			Page Footer

Which will produce a basic web page you can work from.

As you can see so far, its fairly basic and empty. But It doesn’t take a lot to bring it to life.



	
	Page Title
	
	
	


	
		
			Cancel
			Super Heroes
			Save
		

		
			
				Batman12
				Superman2
				Wonder Woman6
				Robin12
				Flash2
				Green Lantern6
			
		

		
			Remove
			Add
			Up
			Down

Which will create a basic list with a count bubble and buttons in the header and footer.

And with a little bit more work, it took me about 30 minutes to whip this up (and that included learning time, so once skilled this could take you less than 10 minutes).

Demo jQuery Mobile Mail App

Compose Mail
Refresh
Settings

Folders

Inbox 12
Outbox 0
Drafts 4
Sent 328
Trash 62

Forward

Delete

Message 1 of 12

Message title
October 18, 2010
11:31 a.m.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Sample web app, nothing works but looks pretty good

Bar

I'm first in the source order so I'm shown as the page.
Back to foo

Page Footer

Also the alpha comes with 4 themes, a, b, c, d. Each theme looks the same, exact the colour scheme is different. And all you have to do to use these themes is to add attribute to your html element called data-theme. For example


    Cancel
    Edit Contact
    Save


    Cancel
    Edit Contact
    Save


    Cancel
    Edit Contact
    Save


    Cancel
    Edit Contact
    Save

Will produce the following

And you can easily mix and match the themes between elements


    Cancel
    Edit Contact
    Save

Which results in

So although its the first alpha release, its really polished and I’m really impressed by it. It’s missing too many key components for me to start using it, but I suspect the beta will be complete enough to start using.

Can’t wait too see what they bring us next.

Migrating to WordPress

reven — Sun, 17 Oct 2010 03:43:46 +0000

A recap of my trials and tribulations, troubles with tribbles?, moving reven.co.nz to a WordPress site.

I decided to switch from a custom written website based on CodeIgniter, which I love and is my favourite PHP framework, to a full CMS. I was having too much trouble trying to get my custom blog API working with all the editing software that was out there.

First I had issues with MarsEdit, and I basically had to trick it into thinking my site was a WordPress site, which it wasn’t at the time. Then I had issues with a Blog writer iPad app, it just wouldn’t work. For the life of me I just kept having issues with Code blocks in the my blog posts, formatting was forever screwed, and I was writing too much backend code to fix the editor issues.

So I began looking for a PHP CMS, Content Management Systems.

Joomla
I had used Joomla a few years ago for reven.co.nz and I was happy with it, integrated forums, easy editing, and back then version 1.5 was in beta, I think this was back in 2006/2007. So I was excited to see what they had been doing in the past few years. And to my surprise, all they seem to have done was release 1.5, and stopped. Sure it might be really good, but it hasn’t progressed, this gave me the impression it lost its driving force, and future updates would be slow and far between.
WordPress
I wasn’t keen on WordPress at first, I wasn’t impressed with the file system, too many files in the root folder, very little folder structuring going on. And the default theme is ugly. Also I found it hard to think of it as a CMS, it’s always been a Blog, so I played with it a little and moved on.
Drupal
Now I was impressed with Drupal, it was a mature product, at version 6 with 7 coming along nicely. Nice admin interface and slick features. I spent a few weeks researching this and trying it out. But version 6 was using an old version of jQuery and I didn’t want to use alpha software, most plugins didn’t work with it. I was really interesting in the multisite feature, where you can run many sites off the one install of Drupal, but this wasn’t ready for real use. Too many issues to actual sell this onto clients. I do have custom CMS solution that is a multisite CMS, where all the sites run from the one install/database, and each site is basically a theme. I wanted that. Sadly Drupal multisite wasn’t this.
ExpressionEngine
This looked slick, written in CodeIgniter, great interface, regular updates, multisite which looked like it provided exactly what I wanted. But the price, boy the price is expensive. If I switched too this I would have to raise my rates to included licenses for ExpressionEngine. As I wanted to learn one CMS, learn it really well, and be able to sell sites built on that so my clients could have an affordable and fully functional CMS.

I thought all was lost, I couldn’t find anything I wanted, and was about to give up. But I decided to give WordPress another shot, really try it out as a CMS.

I had some really strict requirements

It had to be fast
I wanted all my performance tweaks I had learnt over the years to be available. That meant combing and minify the JavaScript and CSS easily. I couldn’t find any plugin that did this how I liked it, lots of security issues with the plugins available. So I wrote a plugin, called it Jay Garrick (the original Flash, as my plugin made your website fast ). And boom goes the dynamite, all my CSS and JavaScript files combined and minified on the fly into 2 files.
Look the same as CodeIgniter Site
I wanted it to look the same as my current site, I love my site design, with the animated backgrounds, day/sunset/sunrise/night themes. The animated “me” on the services page. So I had to write a WordPress theme. Made the theme HTML5, still needs a few improvements here, added Paul Irish’s class trick to my head
Add some fancy CSS3 effects, make sure you checkout my site in IE9, Chrome, Safari or Firefox.
Downloads and Demos for Posts
I wanted to easily attach downloads and demos to posts. I often blog about code and jQuery plugins. So I wanted to attach demo that you could launch and downloads for you too…. err download. The downloads are done, but I’m still working on the demos, but I’m confident I can achieve this, just researching the best way to do it. Any tips would be welcomed
SEOed
I needed to make sure that the new site still had full Search Engine Optimization. I spent a long time getting my on site SEO rank up to the 98th percentile and I didn’t want to lose this. As today, October 17th 2010, I have it in the 90th percentile. So I need to do some more work, but it’s achievable.
jQuery
I use a lot of jQuery, and I really don’t want to have to use an old version of it. I must use the latest, and it must be served from a CDN. On Drupal I couldn’t get it from a CDN. CDNs, Content Delivery Networks, have huge site performance impact and take the hosting of commonly used libraries, like jQuery, off your site and onto theirs. For example Google and Microsoft both host jQuery. By using a CDN you can deliver the resource from a server usually much closer to the user than your host, and they are likely to have already downloaded the resource from a different website. So they won’t have to download it again.

After running WordPress through its paces, I found it met all my goals. It’s a mature and open platform, with commercial backing, and get’s regular updates. My only grip is the plugins, searching for them can be difficult and its hard to sort out the good ones from the crap. But all and all I’m happy with it, and expect to see some plugins appearing on this blog.

Whatever happened to xmlTVNZ?

reven — Sun, 17 Oct 2010 03:01:15 +0000

Wondering where xmlTVNZ has gone? What happened to reven.co.nz?

I won’t go into all the gory details, but a long story short, I had to take xmlTVNZ down. Sky Television New Zealand went on a rampage and served everyone providing a free EPG/TV Guide, and some who weren’t provide one at all (Sub from GB-PVR), a take down order.

At first I tried to fight them on this, stating that xmlTVNZ wasn’t actually breaking any terms and conditions and wasn’t doing anything illegal. In fact it wasn’t even doing anything with www.skytv.co.nz. But they kept coming back through their big scary lawyers saying we will take legal action against you if you don’t take it down. So in the end, I tucked my tail between my legs and backed down. At the end of the day, I couldn’t afford to pursue this, lawyers are expensive you know. I was also 6 weeks away from getting married, which are also expensive.

xmlTVNZ days were always numbered, not because of a take down order, but because of Freeview, and the fact you can now just fetch the EPG directly from that. But if you’re a Mac user, you’re out of luck.

There was a lengthy discussion about it over at GeekZone, and I received great support from the community. So thanks for everyone who supported me over the years and helped out with feedback and bug testing, but xmlTVNZ is gone and it’s not coming back. Well I won’t be supporting it, or developing it. The source code was online for a couple of weeks at Google code, so a few people might still have it.

Thanks for coming.

P.S. If you need a web designer/developer, I’m available

IE9 Beta Impressions

reven — Fri, 17 Sep 2010 07:54:53 +0000

So I’ve been playing with IE9 Beta for a day now and thought I’d share my thoughts on it, what I like and dislike etc.

The first thing I noticed was the redesigned address bar and the tab location. As a heavy tab user, the first thing I thought was there wasn’t much room for the tabs. But according to Microsoft 97% of IE sessions have fewer than 5 tabs open at any one time. But you can shrink the address bar to give your tabs more room.

The new icon, IE loves to change it’s icon, is very toyish. It looks like it’s trying to be web 2.0 but it just doesn’t look write in the Windows taskbar. I don’t mind it by itself, but once it’s in that taskbar, it kind of blurs into the background and I find it hard to see.

CSS3 seems to be fairly well implement, but there are some key features missing including background gradients, which I use a lot. Also I can’t get the gradient filter to work correctly for some reason, forcing IE9 users to download a gradient image for this effect on my website.

HTML5 seems to coming along but they don’t support the new form elements, only Opera do this, and if IE doesn’t support these this will hang up the web and these won’t be used for years. But I suppose its better they leave these out than implement them poorly.

The ability to pin a webpage to your taskbar in Windows 7 is a really nice touch. It also will take the colours from your favico and use those in the back/forward button.

You just have to make sure your favico has a 32×32 or 48×48 ico image otherwise your 16×16 won’t look very good.

Speed wise it seems fast, on par with Chrome. The tests over at Microsoft really show off the performance gain of hardware acceleration. But until all the other browsers start supporting this, I don’t think you will be seeing too many sites take advantage of this. Firefox 4 Beta has implemented hardware acceleration and it is a lot faster than Chrome 6, but still a great deal behind IE9.

IE9 has a score of 95% on the ACID3 test, which is good, but I am hoping the final gets 100%.

Over at html5test.com IE9 Beta 1 only got a 96 out of 300. Chrome 6 on the over hand gets a 217 and Opera 10.6 gets 159.

My worst complaint is the alert popup, that appears on the bottom of the screen. Its very subtle and most of the time I miss it and it takes me a while to realise IE is trying to tell me something. Chrome also place this on the bottom, but its a Blue and animated, which makes it stand out.

But overall I’m impressed with IE9, it’s the best IE beta I’ve tried (IE7 and IE8 constantly crashed, IE9 hasn’t crashed once). And I would recommend IE fans to upgrade to it now, really there is no reason not too. Just hope they implement more CSS3 features into the final release.

Rewarding Modern Browsers

reven — Fri, 17 Sep 2010 06:55:07 +0000

It takes a lot of work to make a web site look good/the same in every brower. Most of the time it will look the same in Firefox, Safari, Chrome and Opera. But IE is a problem.

It takes a lot of work to make a web site look good/the same in every browser. Most of the time it will look the same in Firefox, Safari, Chrome, and some extent Opera. But Internet Explorer is a problem, a real problem. As web developers/designers or my new favourite term “devigner” we have all had to deal with the devil that is IE. It has gotten better over the years, but it still can’t handle CSS3 (IE9 will change this, it’s just not clear yet by how much).

As it takes so much extra work to make a site work in IE, especially in the hated IE6, I have a proposal, let’s punish those little bastards (insert evil laugh).

This is what I’ve started doing, well from the different perspective, rewarding the users of modern browsers. CSS3 brings us a whole slew of improvements, including background gradients, rounded corners, better selectors etc. Combined with HTML5’s new elements the web is becoming more powerful.

So instead of requiring users to download a gradient background or a rounded corners image, use CSS3 backgrounds and border radius; instead of a javascript date picker, use the HTML5 date form input etc. And only deliver the backup images and javascript if their browser can’t handle the jandal. Your users will still be experiencing basically the same web site, our goal is to still try and make web sites look the same across browsers, but just make them faster in modern browsers. Sites are already faster in modern browsers due to the improvements in the JavaScript engines, but this approach also improves the download time of a page.

This might seem passive aggressive, it is, but if users are experiencing a slower web they might be more inclined to upgrade. People are stilling hanging onto IE6 with dear life, sure a lot of those are business users who can’t upgrade due to company policy, or they are people still using Windows XP who don’t know how to upgrade, but there are still quite a few people (20% of users in some countries) that are using IE6.

Imagine a world without IE, ok that’s not going to happen. How about a world were IE isn’t the top browser, thats actually very likely, it keeps loosing ground to Chrome and Firefox. This may be a reality in the next 5 years. So as web developers/designers/devigners we should be doing all we can to speed up this process, it will make the web a better place.

The tools you can use to help with this I’ll cover in another blog post, but the primary one is a little JavaScript file by the name of Modernizr. Also if they have JavaScript disabled just serve them the non-css3 version, punish those who turn JavaScript off as well, really there is no need to in a modern browser.

I’d be interested to hear your thoughts on this matter.

NZ TechEd 2010 HTML5 and CSS3

reven — Fri, 03 Sep 2010 07:02:25 +0000

A quick overview of what I learnt at TechEd 2010 New Zealand and what I found interesting.
Mostly around HTML5 and CSS with a few tips and tricks I picked up.

This year was the first time I attended TechEd. I loved it. Sure there were a few boring talks, but on a whole I learnt a lot, met some interesting people and got a bunch of free shirts .

The most fun I had was during the “Future of Web Apps” panel. Basically since it was a panel and not a presentation, there were no slides, and no demos. So they decided to put Twitter up on the big screen. About 2 minutes into the Twitter fail whale appeared on screen. Big laugh.

Then they put up a Twitter client and followed #tenz (the TechEd hash tag). About 10 of us were twittering all together, and about 5 were tweeting jokes. Imagine 5 geeks trying to get a room of 300+ nerds laughing. It was actually really simple. A lot of Flash mocking. I kept mocking Silverlight and praising Apple, fan boy and all.

My favourite speaker was Darren Wood. He’s a self proclaimed “Standards Nerd”. Big supporter of HTML5 and CSS3, hence my like of him. He did a really good overview of whats new in HTML5 and CSS3 and how we can use it now. The key to it basically is a little JavaScript script (is that redundant?) called Modernizr. What Modernizr does it creates the elements for IE6 so the new HTML5 elements are displayed (IE6 will ignore any elements it doesn’t know and not show them), and it also adds classes to the element of a document saying what this browser supports and doesn’t. For example

So with that you can then make your CSS show one thing if support and a fail safe if not. For example

.multiplebgs div p{  /* properties for browsers which support multiple backgrounds */ }
.no-multiplebgs div p {  /* properties for browsers which don’t support multiple backgrounds */ }

Also Darren talked about the new HTML5 inputs such as datetime, datetime-local, url, range, number, email etc.

The really useful ones will be datetime, number and range. As a datetime shows a Date Time picker and will correctly set the Time Zone, Range is a slider, Number is a spinner control. Email will be less useful since the validation error I’ve seen on this is extremely ugly. Currently only Opera and nightly builds of Webkit supports these. But with Modernizr you can do a simple check before creating your own jQuery controls.

if (!Modernizr.inputtypes.date) {  createDatepicker(); }

The new layout elements for HTML

My “No Flash” Rant

reven — Tue, 08 Jun 2010 07:20:01 +0000

This is my rant about why I don’t believe Flash should be used on the majority of websites and definitely not a means to add a “wow” factor.

Ok so it’s time for me to do my “I hate Flash” rant.

Truth is, I don’t actually hate it. Flash does have it’s place. I do believe that HTML5 will replace it, but I know that won’t happen any time soon. So for now, its here, and it’s not going anywhere.

Its a great platform for videos on the web, e.g. YouTube (even though they now have a HTML5 player). It can be used to make some fantastic file upload controls.

But for the most part, you don’t actually need it. And more importantly you shouldn’t use it.

Load Times.
Flash needs to be completely downloaded before it will run, and people are still using dial up internet, and by using a large Flash animation as the main content of you webpage will likely drive off these potential customers. With HTML, CSS and JavaScript, which are all text files, they can be compressed and downloaded quickly loading your website much faster.
Printing with Flash.
Most of the time you can’t print it. If you do want to print it, you need a “Print” button inside the Flash application. Breaking the browser standard Print button. Now you might think the same with HTML, you sometimes seen “Printer Friendly” buttons on a website, but those are just poorly coded. CSS has a “media” attribute, which means you can apply a “Printer Friendly” style to all pages of your website and hide this from the end user. So when a user does print from their browser, what gets printed out is specially formatted for the printer.
Breaks Browser Behaviour
Flash does not work as a normal webpage should. It doesn’t use the history of your browser. You cannot directly link to a page within Flash, only to the main Flash page. And you can not use the browsers built in “Find” function with Flash. It simple won’t find anything in it and it become pretty useless. Also the browser can’t adjust the text size for visually impaired users.
Search Engines
Search engines don’t know how to crawl and index Flash.
Not a standard and it’s not open
Adobe own it, its not an standard, and it’s not open source. Now not being open source isn’t really a bad thing, but the fact its not a standard and people have to download a player (and update it as well) can annoy users. Albeit most people already would have Flash installed, for those few users that don’t it’s annoying they have to download and install something to view your website.

Now for the most part, people don’t want full Flash websites, so not all these problems apply. But if all you want to add some “wow” factor to your site and want a “pretty” animation. You can do this with some JavaScript and CSS. In fact by doing this with JavaScript and CSS you will be dramatically reducing page loads time and improving your sites performance.

I should mention this goes the same for SIlverlight. But I do prefer SIlverlight, the fact its using the .NET Framework gives it some impressive power. It so far doesn’t appear to be as misused as Flash (most likely due to popularity) it could easily become so.

So here’s were my little rant ends, Flash does have it place, I’ll still use it for videos on the internet, and maybe for a file upload control but that’s about it. Everything else you can achieve faster and better with a little JavaScript and CSS.

jQuery Portfolio Plugin

reven — Tue, 08 Jun 2010 07:11:17 +0000

A jQuery plugin for displaying a portfolio in a grid. Can mouse over elements to show a larger preview and a detailed description of the item inside the grid.

Download

I saw this nifty little portfolio and thought I’d like to use that. So I coded it.

Step 1 – HTML

First you need to make a

For example

Each

needs the following

title attribute – this is the Title that will be displayed in the rollover description
description attribute – this is the detailed Description that will be displayed in the rollover
preview attribute – this is the larger image that will be shown during a rollover
a child img – this is the thumbnail you will rollover

Step 2 – The CSS

ul.portfolio
{
	margin:10px 20px;
	padding:0px;
	position:relative;
}
ul.portfolio > li
{
	width:208px;
	height:144px;
	clear:none;
	float:left;
	margin:0px;
	list-style:none;
}
ul.portfolio > li > img
{
	border:1px solid #d3d3d3;
}
ul.portfolio > li, ul.portfolio div.description
{
	padding:4px;
}
ul.portfolio div.description
{
	border:solid 1px #d3d3d3;
	background:#333;
	opacity:0.90;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	color:White;
	font-size:small;
}
ul.portfolio div.description label
{
	display:block;
	clear:both;
	font-weight:bold;
}
ul.portfolio div.description-right
{
	border-top-left-radius:5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
}
ul.portfolio div.description-left
{
	border-top-right-radius:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
}
ul.portfolio div.preview-right
{
	border-top-right-radius:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
}
ul.portfolio div.preview-left
{
	border-top-left-radius:5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
}
ul.portfolio div.preview-down
{
	border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
}
ul.portfolio div.preview-up
{
	border-top-left-radius:5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	border-top-right-radius:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
}
ul.portfolio div.preview
{
	border:solid 1px #d3d3d3;
	background:#333;
	opacity:0.90;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
}
ul.portfolio div.preview img
{
	margin:12px;
}

Step 3 – The JQuery.

The JQuery required, is pretty simple. It just attaches a hover event to each li, and fades in/out the description.

$.fn.portfolio = function (cfg) {
    // support mutltiple elements
    if (this.length > 1) {
        this.each(function () {
            $(this).portfolio(cfg)
        });
        return this;
    }
    var defaults = {
        columns: 4,
        rows: 0
    };
    var cfg = $.extend(defaults, cfg);
    var ul = $(this);
    ul.css({
        position: 'relative'
    });
    cfg.rows = ul.children('li').length / cfg.columns;
    var li = ul.children('li:first');
    var li2nd = ul.children('li:first');
    var liNextRow = ul.children('li:nth(' + cfg.columns + ')');
    var liWidth = li.width();
    var liHeight = li.height();
    var previewwidth = li.outerWidth(true) * 2;
    var previewheight = li.outerHeight(true) * 2;
    ul.children('li').css({
        position: 'relative'
    });
    ul.hover(function () {
        $(this).find('li > img').fadeTo(500, 0.5);
    }, function () {
        $(this).find('li > img').fadeTo(500, 1);
    });
    var left = liWidth;
    var top = 0;
    $.each($(this).children('li'), function (i, ele) {
        var row = i / cfg.columns;
        var col = i % cfg.columns;
        var $ele = $(ele);
        $ele.append('
' + $ele.attr('title') + '' + $ele.attr('description') + '

');
        ul.prepend('


');
        var divDescription = $ele.find('div.description[portfolio=' + i + ']');
        var pos = $ele.position();
        divDescription.css({
            top: '0px',
            left: '0px',
            width: liWidth,
            height: liHeight
        });
        var divPreview = ul.find('div.preview[portfolio=' + i + ']');
        divPreview.css({
            top: top,
            height: previewheight + 'px',
            width: previewwidth + 'px'
        });
        var elePosition = $ele.position();
        if ((col / (cfg.columns / 2)) % 2 < 1) {
            divPreview.css({
                left: (elePosition.left + $ele.outerWidth(true)) + 'px'
            });
            divDescription.css({
                borderRight: 'none'
            });
            divPreview.addClass('preview-right');
            divDescription.addClass('description-right');
        }
        else {
            divPreview.css({
                left: (elePosition.left - divPreview.outerWidth(true) + 1)
            });
            divDescription.css({
                borderLeft: 'none'
            });
            divPreview.addClass('preview-left');
            divDescription.addClass('description-left');
        }
        if (row < cfg.rows - 1) // show the preview going downwards         {             divPreview.css({                 top: elePosition.top             });             divPreview.addClass('preview-down');             divDescription.addClass('description-down');         }         else // show the preview spanning upwards         {             divPreview.css({                 top: (elePosition.top - $ele.outerHeight(true)) + 'px'             });             divPreview.addClass('preview-up');             divDescription.addClass('description-up');         }         $ele.hover(function () {             // hover in             divDescription.css({                 zIndex: 11             }).fadeIn();             divPreview.css({                 zIndex: 10             }).fadeIn();         }, function () {             // hover out / blur             divDescription.css({                 zIndex: 9             }).fadeOut();             divPreview.css({                 zIndex: 8             }).fadeOut();         });         left += liWidth;         if (left >= (cfg.columns / 2) * liWidth) left -= liWidth;
        if (left < 0) left = 0;
        if ((i + 1) % cfg.columns == 0) top += liHeight;
    });
    return this;
};

The only configuration is how many columns there are (rows is automatically calculated).

To use the plugin just run this code

And there you have it.