Web Wisdom

Checkout this post that leads to Mootools scripts & goodness

http://web-kreation.com/index.php/articles/48-incredible-mootools-sripts/

A fun little script to figure out if an element hasLayout:

Javascript: element.currentStyle.hasLayout

Fab article on page optimization: sqeezin’ the extras out of your files:

http://www.thewojogroup.com/2008/10/10-easy-steps-to-great-website-optimization/

New kind of conference -wooo hoooooo!

Check out head conference - a blinding array of speakers across the world, so that folks can globally share best practice at minimum cost.  Virtual ways of attending the conference.  This week.  Beautiful =)

http://www.headconference.com/

Check out Firefox Lite - cross browser goodness! http://getfirebug.com/lite.html

Other addons that I enjoy.  These things combine to make my world a better place =)

The CSS:

.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}

.b1h {height:1px; background:#939393; margin:0 5px;}

.b2h, .b2bh {height:1px; background:#7FB539; border-right:2px solid #939393; border-left:2px solid #939393; margin:0 3px;}

.b3h, .b3bh {height:1px; background:#7FB539; border-right:1px solid #939393; border-left:1px solid #939393; margin:0 2px;}

.b4h, .b4bh {height:2px; background:#7FB539; border-right:1px solid #939393; border-left:1px solid #939393; margin:0 1px;}

.b2bh, .b3bh, .b4bh {background: #FFFFFF;}

.headh {background: #7FB539; border-right:1px solid #939393; border-left:1px solid #939393;}

.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}

.contenth {background: #FFFFFF; border-right:1px solid #939393; border-left:1px solid #939393; border-top:1px solid #939393;}

.contenth div {margin-left: 12px; padding-top: 5px;}

The HTML:

<b class=”b1h”></b><b class=”b2h”></b><b class=”b3h”></b><b class=”b4h”></b>

<div class=”headh”>

<h3>Header Goes Here</h3>

</div>

<div class=”contenth”>

<div>Content Goes Here</div>

</div>

<b class=”b4bh”></b><b class=”b3bh”></b><b class=”b2bh”></b><b class=”b1h”></b>

The source:

http://blog.yosle.com/2007/09/20/css-round-corners/

I just attended Web Design World in Seattle this past July. The outstanding takeaways for me were Lance Loveday’s talk on how businesses are only starting to realize the potential ROI of their web sites, and Joe Marini’s ideas on JavaScript best practice.  Here are my other favorite parts/notes:

Shepherding Passionate Communities - Heather Champ, Flickr

The gems that I hand-picked:

People hate change - not the change itself: but the fact that there is a change at all.

People take possession of sites that they use: and they are very vocal about it.  Enjoy this, and be a part of the conversation: don’t dominate it.

Flickr offer ‘zeitgeist’s  - badges that sample your/other peoples’ pics.  Cool!

 Reaching Stylesheet nirvana - Dan Rubin

Group CSS by function: containers, headings, then nav for instance.

When a site is large enough, have separate style sheets - layout, typography, colors.

Don’t use inline styles - use a script and a class on the element to access it if you absolutely need to access an element.

To use resets in your CSS, put them in a separate file and access them from the master css file using this code: @import url(reset.css);

Flag your CSS file by using unusual characters in the comments that you use to indicate sections, for instance: /* ========[ ~ header section ~ ]======== */ indicates the header section, and when you search for the ~ character, you can jump from section header to section header.

Vischeck - see a page as a color blind person would.

 Web design for ROI - Lance Loveday

Shopping carts are some of the most important pages online.  People are getting better at designing shopping carts: 52% of shopping carts were abadoned tis year, compared with 59% last year.  If it’s a single page checkout, it’s only a drop off of 40%.

As to how people view the ROI they get from their site,  he sees the percentage of ads on TV going from 35% in 1980 to 15% this year: and 21% of media consumption being the internet, but only 7% of company spending going on internet ads, so there’s plenty of room for growth ;-).

Professional Front-End Engineering - Nate Koechley, Yahoo  nate.koechley.com/blog/

 Many pearls of wisdom: here’ what stood out for me: use more tags from the W3 spec, for instance: label, cite, <ins datetime=”">

Effective JavaScript Programming - Joe Marini, www.joemarini.com

Use Hungarian notation for values in scripts: for instance iNumber, sName - it makes it easier to remember the type of value stored in it.

Use namespaces to segregate your code.

Use built-in functions such as sort(), reverse(), push() & pop - it’s quicker. regular expressions can utilize a test() function, for instance.

Use ‘continue‘ and ‘for … in‘ - they are useful tools.  Don’t use ‘with’: it makes the scope too big.

When using timeouts, pass a function into the timeout, not a string: that’s a performance issue.

When building a string/integer, use += to add the values: it gives better performance than adding the values and passing them into the variable.

When working with a high-level DOM object (for instance the body tag), use ‘original.cloneNode(true)’ to work with it.   This means that you work on a copy, and it’s less of a server hit.  This is because you work on a copy that is then referenced later.

Keep variables as local as possible to minimize performance issues - the more local the variable, the less time the engine has to spend looking for its value.