In order for your site to be strict XHTML compliant there can’t be any target attributes for links, it isn’t a supported attribute. I can see why this is a good idea but it’s also annoying at the same time. It doesn’t make sense for when you are linking to an external vendor or site for someone to open in a lightbox or within your own site.

There are two ways around this, say f standards and put the target attribute in there anyways or make javascript do it for you.

With the methods below specify rel=”external” on any links you would like to open in a new window or behave like a target=”_blank”.

<a rel="external" href="http://google.com">Google Rocks.</a>

jQuery

$(function(){
  $('a[@rel$='external']').click(function(){
    this.target = "_blank";
  });
});

Prototype

Event.observe(window, 'load', function() {
    $$('a[rel="external"]').each(function(link){
        if(link.readAttribute('href') != '' && link.readAttribute('href') != '#'){
            link.writeAttribute('target','_blank');
        }
    });
});

I use the following code to demonstrate what the content of a web site is going to look like.  This goes over the typical HTML elements within a page, you might need to add more for your specific site but this should get you started.  This code can also be used as a demo to a designer on what styles you need made within the design file before it starts development.

<h1>The H1 tag looks like this</h1>
<p>The paragraph after an H1 looks like this</p>
 
<h2>The H2 tag looks like this</h2>
<p>The paragraph after an H2 looks like this</p>
 
<h3>The H3 tag looks like this</h3>
<p>The paragraph after an H3 looks like this</p>
 
<h4>The H4 tag looks like this</h4>
<p>The paragraph after an H4 looks like this</p>
 
<h5>The H5 tag looks like this</h5>
<p>The paragraph after an H5 looks like this</p>
 
<ol>
<li>This is a normal list element in an ordered list</li>
<li><strong>This is a strong element in an ordered list</strong></li>
<li><em>This is an italic element in an ordered list</em></li>
</ol>
 
<ul>
<li>This is a normal list element in an ordered list</li>
<li><strong>This is a strong element in an ordered list</strong></li>
<li><em>This is an italic element in an ordered list</em></li>
</ul>
 
<blockquote>A blockquote looks like this. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. 
</blockquote>
 
<code>
A code looks like this. Nullam nec dolor. In, A code looks like this. Nullam nec dolor. In
</code>
 
<span>
This is what a span tag looks like
</span>
 
<a href="">A basic link </a>
 
<p>
A long paragraph. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. <a href="">A link in the middle of a paragraph</a> Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.
</p>
 
<p>
Another long paragraph stacked below the one above. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.
</p>

Just watched Ian Hickson’s demo of html 5 and since it’s over an hour thought it would be helpful to just type these out.

Video Tag
It’s been known for a while that there will be a video tag now instead of working with an embed and object tag.  Below is a possible use of using a video tag.  Notice that the keyword “controls” is what puts the controls on the video to control playback.  They aren’t very pretty at the moment but very cool to have video controls already on top of a movie rather than having to skin it with a player.  Another one is the autoplay where previously it would have been autoplay=true it is now just the keyword autoplay.

Another nice addition to the video tag is that once we can stop/start/pause etc a video by just referencing that html element.  See Below.

$('video').play()
$('video').stop()
$('video').pause()

Local Storage
Can save and open data locally. Think of a multipage form where you are normally storing data as you go but it is stored server side typically.  This is a way to store everything client side with easy access to your data.   Data is saved amongst pages, similar to cookies or session data. Local storage is more similar to a cookie while session storage is very similar to session data in that the data only lasts as long as the browser’s session.

localStorage.setItem(key,value);
localStorage.openItem(key);
localStorage.myvar; <!--Accessing directly by key-->

Drag and Drop
Drag and drop is now built into html.  You can utilize functions drag and drop. Ian mentioned that the API wasn’t that great yet but very cool to see this kind of behavior included already.

Actions on hash change
Can fire scripts on hash change. Hash meaning the anchor tag of a link.  So when you click a link that references page.html#first you can now act on it.

Modifications to inputs
There’s now an input type=”range” which gives you a slider bar. You use the oninput attribute to take action on anything that is happening with the slider bar.

There’s also now an input type=date! Once you set this it gives you a calendar date picker. Very similar to all of the javascript date pickers that are currently used. This will be very beneficial when having date fields.

Output tags
You can create output tags and give it a name and print your output to there instead of doing document.getElementById(’output’).  It would be nice to see a $() implementation to access elements to compliment the very archaic document.getElementById();.  It sounded like currently this is only supported within forms.

<output name=”main”></output>
main.value = “my new value”;

Validation
input type=email can now be automatically validated as an email address.  The css style :validated can used to style what invalid input looks like such as a red background or border. It uses active validation too so as you type it validates the email and lets the user know when it is valid.  Typically we have to code this in js and attach an observer to the field for this same behavior.

To validate a required field in a form the keyword required just needs to be specified within the input tag. The autofocus keyword is also used to focus on load, this is put in the input tag.

DataLists
New input type <datalist> lets you set predefined values that the user can select from but the user can then also enter their own value.  The field displays as a textbox and upon click or typing it shows the available options, if the user doesn’t want to use those then they can type their own option.

• ondrop, ondrag, ondragover added as event handler for objects. Some of those have been supported previously in safari and IE.
• URL fields pull urls straight from your history.
• The script and style tag no longer needs language or type.  Not a huge improvement but nice to get rid of it.
• Can interact with content within frames such as passing variables and other actions needed.

Open this file ‘/app/code/core/Mage/Reports/Totals.php’

Remove all of the extra space before the opening php tag.

Not sure how Magento could f that up but they did.

Remember the Milk has all of their keyboard shortcuts listed on their site but not in a visual form.  I went ahead and created a very basic keyboard shortcut cheat sheet with the commands on top of task panel in rememeber the milk.

Digsby just released a new version today that adds facebook chat to the program and it is amazing. It’s nice to be able to chat on facebook without a browser and it is much more robust than the online facebook version. Digsby is also nice because it puts all of my chat networks and social updates feeds into one slick program. Download the new Digsby with Facebook chat today.

addthis.com has an amazing social bookmarking widget that integrates every possible social bookmarking site such as digg, stumbleupon, browser bookmarks, reddit, and sooo many more. While they offer some documentation on their widget there are additional features which you can tweak with the widget besides what is mentioned. Basically they are settings within the javascript file.

social bookmarking widget addthis.com specify url
By default the widget uses the current browser url, but if you are on the the main page of your blog and want the widget to specify the actual article the widget is next to you can specify the variable ‘addthis_url’ just like you do the other variables.

specify default title
‘addthis_title’ - Swaps out what’s in the title tag with a title that you specify.

specify caption share
addthis_caption_share - specify a different title besides the default “Bookmark and Share” on the dropdown.

specify custom css file
addthis_css - takes a reference to a css file.

put your brand on the addthis widget
addthis_brand = “Megatech”;

only enable certain sites
addthis_options = ‘facebook, email, twitter, more’;

position/move the addthis flyout menu
addthis_offset_top = 100;
addthis_offset_left = 30;

add a delay to the addthis flyout bookmark
addthis_hover_delay = 200;

Another site that does the same thing just a slightly different look is ShareThis

What is it? It is an all around chat client (AIM, MSN, Gtalk, Jabber/XMPP, ICQ, &Yahoo) that also supports integration with social networking sites such as facebook, twitter, myspace(myspace sucks anyways) and also has integration with email (Gmail, Yahoo, Hotmail, POP, IMAP, AOL/email).

Download Digsby for Windows | Digsby Home

Key Features

• Update your status for twitter/facebook/myspace all through the application
• View your news feeds for twitter/facebook/myspace in a fancy little panel either in your toolbar or in the actual application.
• Email directly from an account to anyone without having to use an external mail program or web based mail program. e.g. if you are talking to someone on gmail and want to send them an email about something you just click the email tab and type your message and send. No wasting time of using another application unless you need to write up an email containing any html such as bulleted lists or bold headers.
• Provides notifications for all new email messages and social networking updates.
• Make digsby widgets that you can post on any site such as facebook or your own personal blog site. Once the widget is placed on your site anyone that visits your site can IM you, kind of like instant support for a site…

Cons

• Currently only windows supported, mac and linux are on their way. Use these links if you want to be notified when digsby for mac comes out or when digsby for linux. comes out
• Couldn’t think of any other ones at the time, if I find some then I will post them.

Useful links

• Digsby Screenshots - IM themes are very similar to adium for mac if anyone uses that.
• Download Digsby for Windows - Mac and linux versions are supposed to be on their way.
• Digsby facebook application - you can put a box on your profile so people can im you or just use it to integrate with your desktop app.
• Full list of Digsby Features
• Pidgin - Another multi-client chat application that is what I was using before I switched to Digsby. Has a great following and is an amazing application.