Wednesday 29 February 2012
Facebook StumbleUpon Twitter Google+ Pin It

New debugging dashboard for the Google Content API for Shopping

By Thomas Kotzmann and Paul Brauner, Google Content API for Shopping Team

Cross-posted from the Google Commerce Blog

Today we're announcing the API dashboard in Google Merchant Center, which makes it easier for online merchants who use the Google Content API for Shopping to debug their API requests.

If you’re an API user, you can now view a comprehensive timeline and list of errors that occurred while making requests to the API, sorted by the number of times the errors occurred for faster prioritization. For each error, the dashboard also displays example request and response pairs, making it easier to locate and fix errors in your requests.


API dashboard screen shot

To access the new API dashboard, log into your Google Merchant Center account and click the API Dashboard tab.



Posted by Scott Knaster, Editor

Tuesday 28 February 2012
Facebook StumbleUpon Twitter Google+ Pin It

Introducing Technitone: Showcasing the Web Audio API, multiplayer and live in WebGL

Author Photo
By Paul Irish, Chrome Developer Relations

The Web Audio API, currently available in Chrome, provides a considerable amount of aural power to developers interested in integrating audio into their apps and games. Low latency audio playback, audio generation and realtime effects are available with a sensible API in Chrome stable.

We worked with gskinner.com to develop Technitone, a web audio experience that lets you join other players to plot tones on a grid, construct melodies and modify the output with a robust toolset of effects.


technitone logo

Click on over and poke around.
  • Your tone samples can come from your own recordings, or any of the available samples.
  • The left side Tools panel offers realtime audio filters, like echo reverb and pitch shift.
  • We keep you connected to other players in realtime using WebSockets and Node.js.
  • You can drop into solo mode or invite your friends to join you in a session.
  • Get inspired by others’ audio creations in the gallery.
If you’re interested in the techniques and software behind the project, take a look at the case study with plenty of sample code and demos on HTML5 Rocks: http://www.html5rocks.com/en/tutorials/casestudies/technitone/


Paul Irish helps developers build compelling apps for the web on the Chrome Team. He also works on HTML5 Boilerplate, Modernizr, and many bits and bobs of open source code.

Posted by Scott Knaster, Editor

Google Developers House at SXSW

Author Photo
By Amy Walgenbach, Developer Marketing Team

This year at SXSW our developer team is putting together an action-packed two days of lightning talks, code labs, developer hangouts, a LEGO Mindstorm hackathon, a mixology event, and fun surprises. Our Google Developers House (#googlesxsw) will be open on March 10th - 11th and is part of the Google Village at SXSW, which is free to all conference attendees.

Come hang out with Google Developer Advocates, Engineers, Product Managers, and other Googlers from across the company. Come for major hacking or just to chill at the Google TV lounge or roast s'mores by the GTUG firepit. If you can’t make it, don’t worry. Our partners at NewTek will be live streaming our lightning talks and the LEGO Mindstorm Rumble on our YouTube channel.


SXSW Google Village logo

Here are a few of the activities you can look forward to at our Google Developers House at SXSW:

Lightning talks

From 11am to 2pm on March 10th we’ll be serving up lunch and fun, demo-loaded, 25-minute lightning talks to learn more about what you can build and design with the latest Google developer products. Check out the schedule to see which talks you won’t want to miss.

Code labs

Following the lightning talks on March 10th, from 3pm to 6pm we are holding interactive programming classes. Choose a code lab, roll up your sleeves, and get waist-deep in code. Learn how to build Google+ hangout apps, upgrade your Android app for tablets, or incorporate high-quality YouTube video playback in your product. Both Google+ and Android code labs are on a first come, first serve basis, but due to space constraints please fill in this form if you’d like to attend the YouTube code lab.

Mixology event co-hosted by Startup Weekend

Love science and cocktails? We do too. That’s why we’re hosting an event combining the artistry of master mixologists shaken with the science behind the craft. Be guided through various techniques, tricks and tastes. This event is co-hosted by Startup Weekend and will take place from 6pm to 8pm on March 10th.

Google Developers LEGO Mindstorm hackathon

The Google Developers LEGO Mindstorm Hackathon returns to SXSW on March 11th in even more epic proportions. Spend the day with a team building LEGO race bots controlled by Android leading up to the ultimate rumble that evening.

Developer Hangouts In Real Life

Need to debug your code? Wondering about the latest SDK release? Sign up for 15 minutes of one-on-one time on March 11th with product experts from the Google Developer Relations teams. Come armed with your code snippets, questions, curiosity, and hang out with the Googlers who know the products best.


Amy Walgenbach leads marketing for the Google+ Platform and developer marketing for games at Google.

Posted by Scott Knaster, Editor

Friday 24 February 2012
Facebook StumbleUpon Twitter Google+ Pin It

Fridaygram: Esperanto translation, preserved forest, sky alignment

Author Photo
By Scott Knaster, Google Developers Blog Editor

Google Translate is designed to help people understand each other regardless of which human language they use. So it’s appropriate that Google Translate now includes Esperanto, which was created more than 100 years ago to further the goal of a universal language. Esperanto is the 64th language supported by Google Translate, which makes it extra-special to nerds because, of course, 64 is 2^6, or 1000000 binary.

Going back before human language (or humans), a research team in China has discovered a forest that was buried in ash 300 million years ago. The team found intact trees and plants preserved just as they were back then. Now they just have to bring in some very large vacuum cleaners to tidy up the place.

Finally, here’s some astronomy fun for your weekend. On Saturday and Sunday, Jupiter, Venus, and the Moon will converge and shine brightly in the night sky.



Go out and take a look!


Hey, glad to see you made it over to our new home on Google Developers Blog! We like it here and hope you do too. As you might know, on Fridays we take a break and do a Fridaygram post just for fun. Each Fridaygram item must pass only one test: it has to be interesting to us nerds. Äœuu vian semajnfinon!

Wednesday 22 February 2012
Facebook StumbleUpon Twitter Google+ Pin It

How to customize the wordpress admin area



WordPress is one of the best CMSs out there — if not the best (but of course, I’m biased because I’m a WordPress fanatic). It has loads of handy features that make site administration a breeze. WordPress is a publishing platform with a comment system, a GUI for creating, editing and managing posts and pages, handy built-in tools like the "Export" feature to back up your content, user roles and permissions, and more.



But how much of these features do we really use? Though already simple and user-friendly by default, we might want to customize the WordPress Admin interface to make it even simpler and more manageable for our clients, our co-authors, and ourselves.

Why Customize the WordPress Admin Interface?


Lately, WordPress has reached phenomenally high usage rates. There are over 25 million publishers[1] who use WordPress, making it a popular publishing platform. This means that its use has been extended outside of just a blogging platform (although it was certainly built for bloggers at the start) to other types of sites such as portfolios, business sites, image galleries, and even e-commerce sites.

Here is the problem, though. A robust publishing platform like WordPress has way more features than a regular user would ever need. Take the "Comments" panel for instance: Not everyone is going to need all the moderation privileges it has. Some sites might not even need commenting capabilities on their content. For example, a static informational site that doesn’t have a blog section might not want people to be able to comment on static pages like their About and Contact Us page.

The following image shows the default WordPress Dashboard — the first page you’ll see when you log into the Admin area. For tech-savvy folks and power users, it’s great. But imagine a person (such as a paying client of yours) who doesn’t need half of the things they see in this screen. All they want to do is publish a post. Maybe edit it if they make a mistake. That’s it. Nothing else.


The Solution


Luckily, WordPress has a solution. A good one. A completely modular and reversible one, in case you want to quickly revert back to the way things were.

The solution is called Hooks, also known as "Filters" and "Actions". These guys allow us to "hook" into the WordPress core without modifying its files so that we can safely make changes without compromising the integrity of our installation.

We are going to use WordPress’s different actions and some of the available filters to remove features we do not need. We will also make some basic customization changes to brand our WordPress Admin area for our clients.

The snippets we will be using are mostly from my site, WP Snippets, a searchable repository of WordPress snippets (check it out when you have the time).

WordPress’s functions.php


Let’s get started. The first thing you need to do is open up functions.php in your theme’s directory. If you don’t have a functions.php file, then just create one using your favorite text editor.

functions.php is the file where we will put all our code in. WordPress automatically checks this file, allowing you to customize just about everything before it’s rendered on the screen.

Sounds fuzzy? Here’s how it works. Try out the following code. Don’t worry; it will only affect the Admin area — so your site visitors won’t see it. However, I do want to advise you to experiment offline by installing WordPress on your computer (it’s easier than you think).
<php
function testing() {
  echo 'Hello World!';
}

add_action( 'admin_head', 'testing' ); 
?>


Explanation


The code should print ‘Hello World!’ inside the <head> tags in the Admin panel, which isn’t valid HTML code and therefore is printed out at the top of the web page.

The testing() function is our code that we want to run. To hook into WordPress core, we use the add_action() function. In this situation, we pass in two parameters. The first parameter is the name of the action you want to hook into ('admin_head'). The second parameter is the name of the function you want to run ('testing').

After you try this code snippet out, be sure to remove this code from your functions.php file (we’re done with it).

Disable Dashboard Widgets


The first thing people will see when logging into the Admin area is the Dashboard. There, you’ll find widgets like "WordPress Blog," "Other WordPress News," and "Incoming Links". Not very interesting for the average user.

We will be using the wp_dashboard_setup action to remove them. In the function we want to execute, we will use the unset() function to remove the Dashboard widgets we don’t want to display. Then all we need to do is call add_action() using 'wp_dashboard_setup' as the first parameter as well as our function, named remove_dashboard_widgets, as the second parameter.
function remove_dashboard_widgets(){
  global$wp_meta_boxes;
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
  unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
  unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']); 
}

add_action('wp_dashboard_setup', 'remove_dashboard_widgets');



Check out the WordPress docs entry on removing dashboard widgets for more information.

Disable Standard Widgets


WordPress comes with 12 standard widgets. Some of these default widgets include Calender (WP_Widget_Calendar), Search (WP_Widget_Search) and Recent Comments (WP_Widget_Recent_Comments).



You might want to disable the widgets that aren’t needed for your WordPress installation, again, to simplify and declutter your publishing platform. For example, you might not need the calendar, or maybe you’ve used a third-party search service such as Google Custom Search for your client’s WordPress installation.

For this one, we will be using widgets_init action. We will name our function simply as remove_some_wp_widgets. In our function, we will use WordPress’s unregister_widget() function using the names of the widgets we don’t want to use as the parameter.

Then, like before, we just call add_action. What you’ll see in this code snippet is a third parameter ('1'). The third parameter is the priority of the action. 10 is the default priority, meaning that if you don’t pass a value for this optional parameter, it will assume the value is 10. The lower the number, the higher the priority. So at 1, this is one of the top priority functions that will be called first no matter what its position is in functions.php.
function remove_some_wp_widgets(){
  unregister_widget('WP_Widget_Calendar');
  unregister_widget('WP_Widget_Search');
  unregister_widget('WP_Widget_Recent_Comments');
}

add_action('widgets_init',remove_some_wp_widgets', 1);

Learn more about the Widgets API to see other cool stuff you can do with it.

Removing Menu Items


You might want to remove menu items in the Admin panel to simplify the interface.

This is how you disable top-level menu items such as "Posts," "Media," "Appearance," and "Tools":
function remove_menu_items() {
  global $menu;
  $restricted = array(__('Links'), __('Comments'), __('Media'),
  __('Plugins'), __('Tools'), __('Users'));
  end ($menu);
  while (prev($menu)){
    $value = explode(' ',$menu[key($menu)][0]);
    if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){
      unset($menu[key($menu)]);}
    }
  }

add_action('admin_menu', 'remove_menu_items');

This is how you would remove submenu items under the top-level navigation (for example, the "Theme" link under "Appearance"):
function remove_submenus() {
  global $submenu;
  unset($submenu['index.php'][10]); // Removes 'Updates'.
  unset($submenu['themes.php'][5]); // Removes 'Themes'.
  unset($submenu['options-general.php'][15]); // Removes 'Writing'.
  unset($submenu['options-general.php'][25]); // Removes 'Discussion'.
  unset($submenu['edit.php'][16]); // Removes 'Tags'.  
}

add_action('admin_menu', 'remove_submenus');

To find what the submenu names are, just go to wp-admin/menu.php and search for the item you want to disable.

Remove the Editor Submenu Item


The Editor link (a submenu item under "Appearance") is a bit tricky to disable. It doesn’t respond to the unset() function used above. Thus, if we wanted to remove it from the menu, we’d have to remove the action that displays it.



We will use the remove_action() function which simply removes the action from our theme.
function remove_editor_menu() {
  remove_action('admin_menu', '_add_themes_utility_last', 101);
}

add_action('_admin_menu', 'remove_editor_menu', 1);

Disable Meta Boxes in the Editing Pages


The "Add New" and "Edit" pages — the GUI for creating and editing posts and pages — is probably the most used feature in the Admin area. This is what you and/or your clients will be most exposed to. It serves us well if we try to clean these pages up by removing things that we do not need.



For example, do you use any Custom fields or do you use the Excerpts field? If not, just remove them from this view.

The following code snippet uses the remove_meta_box() function. The first parameter is the meta box’s HTML ID attribute you want to remove.

To find out the ID, just inspect the source code or use a tool like the Web Developer Toolbar to determine the ID attribute value of the section’s containing <div>. For example, the Custom Fields’ ID is #postcustom, so the parameter we use is 'postcustom'.



The second parameter refers to the page you want to remove the meta box from (it can be either 'post', 'page', or 'link').

We are going to remove the custom field, Trackbacks checkbox (because most of the time, we either enable or disable it in all of our posts), the comments status option, tags (if you don’t tag your posts with keywords, why have this input field?), and so on.
function customize_meta_boxes() {
  /* Removes meta boxes from Posts */
  remove_meta_box('postcustom','post','normal');
  remove_meta_box('trackbacksdiv','post','normal');
  remove_meta_box('commentstatusdiv','post','normal');
  remove_meta_box('commentsdiv','post','normal');
  remove_meta_box('tagsdiv-post_tag','post','normal');
  remove_meta_box('postexcerpt','post','normal');
  /* Removes meta boxes from pages */
  remove_meta_box('postcustom','page','normal');
  remove_meta_box('trackbacksdiv','page','normal');
  remove_meta_box('commentstatusdiv','page','normal');
  remove_meta_box('commentsdiv','page','normal'); 
}

add_action('admin_init','customize_meta_boxes');

Remove Items from the Post and Page Columns


WordPress’s Admin area often has tables that give you a quick overview of a listing of your content. If you wanted to remove columns from these views, you can.



This time, we will use the add_filter() WordPress function to add a filter instead of an action. A filter is simply a function that watches out for data being called from the database. When it sees something that we want to remove (or modify), it executes the filter first before rendering the data on the web page.

In the example below, we will remove the comments count from the Edit Pages and Edit Posts pages.
function custom_post_columns($defaults) {
  unset($defaults['comments']);
  return $defaults;
}

add_filter('manage_posts_columns', 'custom_post_columns');

function custom_pages_columns($defaults) {
  unset($defaults['comments']);
  return $defaults;
}

add_filter('manage_pages_columns', 'custom_pages_columns');

Customize the Favorites Dropdown


Sitting at the top bar of the Admin area is a dropdown called "favorites" that just lists commonly used Admin tasks such as "New Post," "Comments" (which takes you to the comment moderation page), and so on — for easy access.



If we wanted to remove items in this menu, we can easily do so. (Of course, we can also add stuff here too.) We can do this by adding another filter and unsetting the link, which is contained in a PHP array called $actions.
function custom_favorite_actions($actions) {
  unset($actions['edit-comments.php']);
  return $actions;
}

add_filter('favorite_actions', 'custom_favorite_actions');

The Final Stretch: Miscellaneous Modifications


Everything we have done so far is to disable stuff we don’t need. Now we’ll modify a few things.

Customize the Footer


The footer text in WordPress Admin contains links to the Documentation and to WordPress. Let’s change that.

This snippet just prints out some footer text.
function modify_footer_admin () {
  echo 'Created by <a href="http://example.com">Filip</a>.';
  echo 'Powered by<a href="http://WordPress.org">WordPress</a>.';
}

add_filter('admin_footer_text', 'modify_footer_admin');


Change the Logo


This one’s an old trick, but a good one nonetheless. You can change the logo for the login page and the one in the top left located at the WordPress Admin area pages.

The subsequent code snippet just prints out the CSS (that will be printed inside the <head> tags of Admin pages) that hooks into the div of the logo; it has an ID of #header-logo in the admin pages and it is the h1 > a element for the login page.

For the url property of the style rules, we just feed it the image location of our logo. If the image is inside your WordPress theme’s directory, you can simply use the get_bloginfo('template_directory') template tag to get the relative path to it, followed by the location of the images directory (in this case, it’s called "images") and then the file name of your image (in this case, admin_logo.png and login_logo.png).
function custom_logo() {
  echo '<style type="text/css">
    #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/admin_logo.png) !important; }
    </style>';
}

add_action('admin_head', 'custom_logo');

function custom_login_logo() {
  echo '<style type="text/css">
    h1 a { background-image:url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
    </style>';
}

add_action('login_head', 'custom_login_logo');

Hide the Upgrade Notice to Recent Versions


There’s no guarantee that your theme will support the next version of WordPress, so to prevent your clients from updating their website, you can ask WordPress to hide this notification.

First, I have to say that this isn’t advisable. WordPress core developers put this notification there for a huge reason: Security updates. But if you must remove it (or modify it), all you have to do is to add a filter for it.
add_filter( 'pre_site_transient_update_core', create_function( '$a', "return null;" ) );

Customize the WYSIWYG Editor’s CSS


If you wanted to customize the appearance of the WYSIWYG editor (maybe to match the theme of your site), you can create a custom stylesheet for it (you can call it something like editor-style.css) and then study the HTML markup to see how you can hook into the classes and IDs of the editor. Then to add your custom stylesheet, you can use the add_editor_style() function.
add_editor_style('css/editor-style.css');

The reason why you’d want to do this instead of modifying the global.css stylesheet that comes with WordPress is ease of updating the core and modularity. If there’s one major theme to take away in this guide, it’s that you should never modify WordPress core files — there are plenty of ways to hook into them.

The Outcome


Using these snippets of code, you can customize and reduce the Admin area’s features down to just the essentials, permitting us to benefit from the advantages of minimalism and reductionism principles in our work.

This is what I’ve been doing, and my clients love that all the clutter that they don’t need isn’t there.

Here’s a final image of my result (for the "Add New Post" page):




-By Parthiv Patel

10 WordPress dashboard hacks

The dashboard is a very important part of a WordPress blog. In fact, it allows you to control your posts, your blog design, and many more things. When building a site for a client, it is especially important to be able to control WP’s dashboard. In this article, let’s have a look at 10 extremely useful hacks for WordPress’ dashboard.

Remove dashboard menus


When building a WordPress blog for a client, it can be a good idea to remove access to some dashboard menus in order to avoid future problems such as the client “accidentally” deleting the custom theme they paid for.
Paste the following code in the functions.php file from your theme directory. The following example will remove all menus named in the $restricted array.
function remove_menus () {
global $menu;
$restricted = array(__('Dashboard'), __('Posts'), __('Media'), __('Links'), __('Pages'), __('Appearance'), __('Tools'), __('Users'), __('Settings'), __('Comments'), __('Plugins'));
end ($menu);
while (prev($menu)){
$value = explode(' ',$menu[key($menu)][0]);
if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
}
}
add_action('admin_menu', 'remove_menus');


Define your own login logo


Although it doesn’t have any importance for the blog performance or usability, most clients will be very happy to see their own logo on the dashboard login page, instead of the classic WordPress logo.
The Custom admin branding plugin can do that for you, as well as the following hack that you just have to paste in your functions.php file.
function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
</style>';
}
add_action('login_head', 'my_custom_login_logo');


Replace dashboard logo with yours


Just as a client will love to see their own logo on WordPress login page, there’s no doubt that they’ll enjoy viewing it on the dashboard too.
Simply copy the code below and paste it to your functions.php file.
add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
echo '<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }</style>';
}


Disable the “please upgrade now” message


WordPress constantly release new versions. Although for obvious security concerns you should always upgrade; disabling the “Please upgrade now” message on client sites can be a good idea because the client doesn’t necessarily have to know about this, this is a developer’s job.

One more time, nothing hard: paste the code in your functions.php, save it, and it’s all good.
if ( !current_user_can( 'edit_users' ) ) {
add_action( 'init', create_function( '$a', "remove_action( 'init', 'wp_version_check' );" ), 2 );
add_filter( 'pre_option_update_core', create_function( '$a', "return null;" ) );
}


Remove dashboard widgets


Introduced in WordPress 2.7, dashboard widgets can be pretty useful. For example, some can display your Google Analytics stats. Though, sometimes you don’t need it, or at least don’t need some of them.
The code below will allow you to remove WordPress’ dashboard widgets once you paste it in your functions.php file.
function example_remove_dashboard_widgets() {
// Globalize the metaboxes array, this holds all the widgets for wp-admin
global $wp_meta_boxes;
// Remove the incomming links widget
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
// Remove right now
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
}
// Hoook into the 'wp_dashboard_setup' action to register our function
add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );


Add custom widgets to WordPress dashboard


With the previous example, I showed you how easy it is to remove unwanted dashboard widgets. The good news is that creating your own widgets isn’t hard either.
The well-commented code below should be self explanatory. Just insert it in your functions.php, as usual.
function example_dashboard_widget_function() {
// Display whatever it is you want to show
echo "Hello World, I'm a great Dashboard Widget";
}
// Create the function use in the action hook
function example_add_dashboard_widgets() {
wp_add_dashboard_widget('example_dashboard_widget', 'Example Dashboard Widget', 'example_dashboard_widget_function');
}
// Hoook into the 'wp_dashboard_setup' action to register our other functions
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );

Change WordPress dashboard colors


If you ever wanted to be able to change WordPress dashboard colors (as well as font or even display) without having to edit WordPress core files, you’ll like this hack for sure.
The following example features a basic style change (grey header is replaced by a blue one) but you can easily add as many styles as you wish within the <style> and </style> tags.
function custom_colors() {
echo '<style type="text/css">#wphead{background:#069}</style>';
}
add_action('admin_head', 'custom_colors');

Provide help messages


If you’re building a site for a client and they have some problems with some parts of the dashboard, a good idea is to provide contextual help to the client.
The following hack will allow you to add a custom help messages for the blog admin. As usual, you only have to paste the code into your functions.php file.
function my_admin_help($text, $screen) {
// Check we're only on my Settings page
if (strcmp($screen, MY_PAGEHOOK) == 0 ) {
$text = 'Here is some very useful information to help you use this plugin...';
return $text;
}
// Let the default WP Dashboard help stuff through on other Admin pages
return $text;
}
add_action( 'contextual_help', 'my_admin_help' );

Monitor your server in WordPress dashboard


WordPress dashboard API allow you to do many useful things using dashboard widgets. I recently came across this very useful code: a dashboard widget that allows you to monitor your server directly on WordPress’ dashboard.
Paste the code in your functions.php file, and you’re done.
function slt_PHPErrorsWidget() {
$logfile = '/home/path/logs/php-errors.log'; // Enter the server path to your logs file here
$displayErrorsLimit = 100; // The maximum number of errors to display in the widget
$errorLengthLimit = 300; // The maximum number of characters to display for each error
$fileCleared = false;
$userCanClearLog = current_user_can( 'manage_options' );
// Clear file?
if ( $userCanClearLog && isset( $_GET["slt-php-errors"] ) && $_GET["slt-php-errors"]=="clear" ) {
$handle = fopen( $logfile, "w" );
fclose( $handle );
$fileCleared = true;
}
// Read file
if ( file_exists( $logfile ) ) {
$errors = file( $logfile );
$errors = array_reverse( $errors );
if ( $fileCleared ) echo '<p><em>File cleared.</em></p>';
if ( $errors ) {
echo '<p>'.count( $errors ).' error';
if ( $errors != 1 ) echo 's';
echo '.';
if ( $userCanClearLog ) echo ' [ <b><a href="'.get_bloginfo("url").'/wp-admin/?slt-php-errors=clear" onclick="return confirm(\'Are you sure?\');">CLEAR LOG FILE</a></b> ]';
echo '</p>';
echo '<div id="slt-php-errors" style="height:250px;overflow:scroll;padding:2px;background-color:#faf9f7;border:1px solid #ccc;">';
echo '<ol style="padding:0;margin:0;">';
$i = 0;
foreach ( $errors as $error ) {
echo '<li style="padding:2px 4px 6px;border-bottom:1px solid #ececec;">';
$errorOutput = preg_replace( '/\[([^\]]+)\]/', '<b>[$1]</b>', $error, 1 );
if ( strlen( $errorOutput ) > $errorLengthLimit ) {
echo substr( $errorOutput, 0, $errorLengthLimit ).' [...]';
} else {
echo $errorOutput;
}
echo '</li>';
$i++;
if ( $i > $displayErrorsLimit ) {
echo '<li style="padding:2px;border-bottom:2px solid #ccc;"><em>More than '.$displayErrorsLimit.' errors in log...</em></li>';
break;
}
}
echo '</ol></div>';
} else {
echo '<p>No errors currently logged.</p>';
}
} else {
echo '<p><em>There was a problem reading the error log file.</em></p>';
}
}
// Add widgets
function slt_dashboardWidgets() {
wp_add_dashboard_widget( 'slt-php-errors', 'PHP errors', 'slt_PHPErrorsWidget' );
}
add_action( 'wp_dashboard_setup', 'slt_dashboardWidgets' );

Remove dashboard widgets according to user role


If you’re owning a multi-user blog, it may be useful to know how to hide some dashboard widgets to keep confidential information in a safe place.
The following code will remove the postcustom meta box for “author” (role 2). To apply the hack on your own blog, just copy the code below and paste it in your functions.php file.
function customize_meta_boxes() {
//retrieve current user info
global $current_user;
get_currentuserinfo();
//if current user level is less than 3, remove the postcustom meta box
if ($current_user->user_level < 3)
remove_meta_box('postcustom','post','normal');
}
add_action('admin_init','customize_meta_boxes');


-By Parthiv Patel

Google Developers

Author Photo
By Mike Winton, Director of Developer Relations

Last September we announced the Google+ API and introduced our Google Developers site as our planned new home for developer information. Since then, we’ve made steady progress in building developers.google.com - by migrating existing content from code.google.com, and by adding new pages and features to the new site. Our goal with the Google Developers site is to bring together all developer resources, programs, events, tools, and community into one place.

code.google.com wasn’t built in a day (it’s been around for almost 7 years), and it will take some time to make the new Google Developers site at developers.google.com your single destination for all the resources we offer. But we’re working toward that goal every day. Soon, all our information will be on this new Google Developers site, and Google Code will return to its roots as an open source project hosting service.

Google Developers logo

As part of this project, today we’re introducing a new identity, complete with a new look, to unify all of our developer offerings. Our new logo says Google Developers, and that's intentional: it reflects our focus on you, not just the tools we provide.



Another part of this update is the new blog you’re reading right now: Google Developers Blog. We’re going to use this blog to continue to provide you with useful news and updates about new developer tools and technologies, ways to speed up your apps and sites, upcoming events, and of course, fun stuff on Fridays. In addition to the blog, we’ll continue to share and converse on our +Google Developers page.

Thanks for all your support over the years, and welcome to the new Google Developers community!


Mike Winton founded and leads Google's global Developer Relations organization. He also enjoys spending time with his family and DJing electronic music.

Posted by Scott Knaster, Editor

Friday 17 February 2012
Facebook StumbleUpon Twitter Google+ Pin It

Fridaygram: Google Public DNS, lonely black hole, tiny chameleons

Author Photo
By Scott Knaster, Google Code Blog Editor

Google Public DNS is a fast, free DNS service that we introduced a little more than 2 years ago. As the Official Google Blog post aptly puts it, “DNS acts like the phone book of the Internet”, translating from human-readable URLs to all-numeric IP addresses. Google Public DNS started as an experimental service and has now become the most-used public DNS service in the world with over 70 billion requests per day, mostly from outside the U.S. Will the next step be support for users in more distant places? (Probably not there.)

Speaking of faraway places, astronomers using images from the Hubble space telescope have found black hole HLX-1, which appears to be all that’s left of a dwarf galaxy that once contained other stars. The theory is that this late galaxy was torn apart by a nearby spiral galaxy, leaving only HLX-1. The other stars became part of the larger galaxy.

While you’re musing on this supermassive black hole, consider some much tinier creatures: little chameleons, just about one inch long, recently discovered in Madagascar. Scientists think this miniaturization might be an evolutionary response to limited resources.


tiny tiny tiny tiny tiny chameleon
Tiny chameleon: he comes and goes, he comes and goes

Finally, we can’t help but jump on the Linsanity bandwagon. Of course, we’re doing it in a nerdy way by pointing you to this article (interesting even for non-sports fans) about why talent evaluation is so tricky.


On Fridays we take a break and do a Fridaygram post just for fun. Each Fridaygram item must pass only one test: it has to be interesting to us nerds. Special thanks to Wired Science for having many excellent posts this week.

Images: Glaw, F., et al., PLoS ONE

Thursday 16 February 2012
Facebook StumbleUpon Twitter Google+ Pin It

Come learn about Apps Script in Washington, DC

Author Photo
By Jan Kleinert, Developer Relations Team

Google Apps Script is a JavaScript cloud scripting language that provides easy ways to automate tasks across Google products and third party services. If you want to learn more about Google Apps Script, collaborate with other developers, and meet the Apps Script team, here’s your chance! We will be holding an Apps Script hackathon in Washington, DC on Wednesday, March 7 from 2pm - 8pm.

After we cover the basics of Apps Script, you can code along with us as we build a complete script, or you can bring your own ideas and get some help and guidance from the team. There will be food, power, and Apps Script experts available to help throughout the day. Just bring your laptop, ideas, enthusiasm, and basic knowledge of JavaScript. Check out out the details of the event and be sure to RSVP to let us know you’re coming.


Jan Kleinert is a Developer Programs Engineer based in NYC, focusing on helping developers get the most out of Google Apps Script. Prior to Apps Script, she worked on Commerce, helping merchants integrate with Google Checkout and on Chrome, helping developers build great web apps.

Posted by Scott Knaster, Editor

Tech preview of Chromium with Dart engine now available

author photo
Pavel
author photo
Vijay
author photo
Anton

By Anton Muhin, Vijay Menon, and Pavel Podivilov, Software Engineers

Cross-posted with the Chromium Blog

An attractive feature of Web programming is a rapid development cycle. Reloading the application after the source code has changed takes a fraction of a second. We want to offer you that same experience when using Dart, and today we’re making Mac and Linux binaries available that integrate the Dart VM into Chromium.

This technology preview allows you to run your Dart programs directly on the Dart VM in Chromium and avoid a separate compilation step. Over time, these programs will take advantage of the VM’s faster performance and lower startup latency.

Dart has been designed from the start to work with the entire modern web, and we’re simultaneously continuing to improve our fast Dart-to-JavaScript compiler. Both the Dart VM and modern JavaScript engines are first-class targets for Dart.

This release of Chromium with Dart VM integration is a technology preview, and should not be used for day-to-day browsing. After more testing and developer feedback, we plan to eventually include the Dart VM in Chrome.

Today’s release of the Chromium + Dart VM integration is another step forward for the open source "batteries included" Dart platform. Our goal is to help you build complex, high performance apps for the modern web, and we encourage you to try Dart and let us know what you think.


Anton Muhin is an engineer at Google Saint Petersburg who recently worked on making V8 VM and DOM bindings faster and now is working on integrating the Dart VM into Chromium. Before that he worked on the Google Calendar backend.

Vijay Menon is a software engineer at Google Seattle working on integrating the Dart language and runtime into the browser. His background is in compilers, runtime systems, and parallel programming.

Pavel Podivilov is a software engineer at Google Saint Petersburg who worked on Chrome Developer Tools prior to joining the Dartium team.


Posted by Scott Knaster, Editor

Wednesday 15 February 2012
Facebook StumbleUpon Twitter Google+ Pin It

Falling in love with the Google+ API


By Melina Mattos, Program Manager for Google Africa and Bob Aman, Program Manager for Developer Relations

Cross-posted from the Google Africa Blog

Attention developers! Of the 90+ Google APIs, which is your favorite? We know that we fell in love with the Google+ API after we saw the amazing applications built from the Hackathons in South Africa and Kenya. We want to continue spreading the love!

This Valentine’s Day we’re thrilled to announce that we are holding three more Google+ Hackathons with the support of the Google Technology User Groups (GTUGs) in Accra, Kampala, and Lagos.

If you are ready to wow us with your application, please apply for the event using these forms: Kampala on March 10 at the 4th floor of Solis House, Lagos on March 17 at the CCHub Nigeria, and Accra on March 21 at the Meltwater Entrepreneurial School of Technology.

Remember to start today on getting those creative juices flowing! Familiarize yourself with the API and review these resources. Begin gathering ideas and coding a little. Take advantage of the Google+ Platform Office Hours on the 15th of February. If you have any questions, please address them to us in our Google+ Hangout on February 23. Use the Hackathon to perfect your application and win one of the multiple prizes we will be awarding - including a ticket for the overall winning application to Google’s premiere developer event, Google I/O!

Any updates relating to these Hackathons and the Hangout will be posted on Google+ (of course!) using the hashtag #hackgplus. Stay tuned!


Posted by Scott Knaster, Editor

Tuesday 14 February 2012
Facebook StumbleUpon Twitter Google+ Pin It

Building Web Apps? Check out our Field Guide

Author Photo
By Pete LePage, Developer Advocate

Yesterday, the Chrome Developer Relations team launched several new resources, including the Field Guide to Web Applications. It’s a new resource that is designed to help web developers create great web apps. We’ve heard loud and clear from users that they want more and better web apps, and we hope this new field guide will enable you to create those web apps. Our fictitious author Bert Appward guides you through topics like the properties of web applications, design fundamentals, tips for creating great experiences, and a few case studies that put best practices to use. Whether you're building your first web app or are just looking for ways to improve your existing apps, I hope you'll find the field guide useful.




We built the field guide to embody the principles and best practices that it preaches. We stepped away from the normal webpage look, and instead designed the experience around a field guide. We used many CSS3 features like box-shadow, opacity, multiple backgrounds and more to provide a rich, visual experience. To make sure that it worked offline, we used AppCache and other than some URL rewriting techniques, didn't use any server-side code. We used the HTML5 History API to maintain page state even though everything is served from a single HTML page. We've started working on a new case study about the field guide, so check back soon for that!


Pete LePage is a Developer Advocate on the Google Chrome team and works with developers to create great web applications for the Chrome Web Store. He recently helped launch the +Chrome Developers page on Google+.

Posted by Scott Knaster, Editor

Image results now available from the Custom Search API

Author Photo
By Nam Nguyen, Software Engineer

Last year we added image results to Google Custom Search Engines to enable sites to offer image-only results that showcase photos and other digital images. For site owners who want more flexibility in presentation, they are also now available from the Custom Search API.

Read more about accessing Image Results from the Custom Search API or try it out in the Custom Search API Explorer. For billing purposes, image queries will be treated the same as web queries. If you are still using the deprecated Google Image Search API, now’s a great time to switch!

Below is an example of an image search to find small jpeg images of flowers:

https://www.googleapis.com/customsearch/v1?key=YOUR_API_KEY&cx=YOUR_CSE_ID&q=flower&searchType=image&fileType=jpg&imgSize=small&alt=json

With a valid key and cse id, here is a possible json result returned for an image item:
{
"kind": "customsearch#result",
"title": "flower-photo",
"htmlTitle": "\u003cb\u003eflower\u003c/b\u003e-photo",
"link": "http://images.example.com/flowerphoto.jpg",
"displayLink": "images.example.com",
"snippet": "photo of flower",
"htmlSnippet": "photo of \u003cb\u003eflower\u003c/b\u003e",
"mime": "image/jpeg",
"image": {
"contextLink": "http://images.example.com/flowergallery.html",
"height": 100,
"width": 100,
"byteSize": 6104,
"thumbnailLink": "https://encrypted-tbn2.google.com/images?q=tbn:3x4MPL3",
"thumbnailHeight": 82,
"thumbnailWidth": 82
}
}

which you can use to render the image in your own site.

Note that you need to enable image search in your custom search engine control panel for the custom image search to work.


Nam Nguyen works on the JSON/Atom Custom Search API, which lets developers retrieve and display results from Google Custom Search programmatically. He is dedicated to making developers' lives a little easier by providing a simple API.

Posted by Scott Knaster, Editor

Monday 13 February 2012
Facebook StumbleUpon Twitter Google+ Pin It

A fresh new look for HTML5Rocks.com

Author Photo
By Eric Bidelman, Senior Developer Programs Engineer, Google Chrome Team

Over the past year, HTML5Rocks.com has become a top destination for developers craving to learn more about HTML5. Today, we have over 60 articles and tutorials covering the latest HTML5 tech, published by 30 contributors from around the world! We've worked hard to bring great content to the site as quickly as possible, but it's been challenging to consolidate so much information as HTML5 continues to push the web forward and evolve at an accelerated pace.


HTML5 Rocks logo

Today, we're launching an updated HTML5Rocks with better tools for finding content, including an edgy new look and "rocking" logo. As our content expands, finding things becomes more important. To address this, we've created "persona pages" with catered content in 3 different verticals (Games, Business, Mobile). If you're one of those developers, finding content relevant to you should now be a snap. We've also consolidated many of the different components (Updates, Studio, Playground) into the main site and have deeply integrated the HTML5 technology classes to bring a better identity to the content.

All in all, it's a little bit Punk and a little bit Rock and Roll.

Lastly, if you're interested in contributing to the site, it's an open source project and we'd love to have your expertise. See our contributors guide.


Eric Bidelman is a Senior Developer Programs Engineer on the Google Chrome Team and a core contributor to html5rocks.com. He is the author of the book Using the HTML5 Filesystem API.

Posted by Scott Knaster, Editor

See you at the Game Developers Conference

Author Photo
By Amy Walgenbach, Developer Marketing Team

We’re returning to the Game Developers Conference (GDC) in San Francisco this year with 2 Developer Days and a booth on the Expo floor. At the conference we'll be giving a peek at the latest technologies we're developing for games.

Our Developer Days will take place in Room 2020 at Moscone Center. Day 1 (March 5) will focus on web games and Day 2 (March 6) will feature mobile games. From scalable servers, to high-performance code and graphics in web browsers, to porting console games to the web, come learn about how our technologies can help you better create, distribute, promote, and monetize games. We also have several Googlers speaking at other sessions during the conference. In addition, we'll have booth 1901 on the show floor March 7th-9th where you can meet Googlers working on games, demo what's new, meet partners, and get answers to your questions.

For more information on our presence at GDC, including a full list of our talks and speaker details, please visit http://www.google.com/events/gdc. If you stop by, you might even be able to score a pass to Google’s invitation-only GDC party. We look forward to meeting you in person!


Amy Walgenbach leads marketing for the Google+ Platform and developer marketing for games at Google.

Posted by Scott Knaster, Editor

Friday 10 February 2012
Facebook StumbleUpon Twitter Google+ Pin It

Coding An HTML 5 Layout From Scratch

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.

While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.

So today we’re going to experiment a little with these new technologies. At the end of this article you’ll learn how to:

  • Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.

  • Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.

  • Use HTML5 alongside a rising technology: Microformats.

  • Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.

It’d be a good idea to have a read at some of these articles first:

  • HTML5 and The Future of the Web which teaches the very basics of HTML5, introduces new elements and explains some of the advantages of the new markup language.

  • HTML5 enabling script which shows a method that enables HTML5 tags on IE6 to be styled.

  • Understanding aside where the usually misunderstood new tag is explained.

I’ll also assume you know the basics of HTML and CSS. Including all the “old school” tags and the basic selectors and properties.

Before we begin…


There’s a couple of things you have to bear in mind before adventuring on the new markup boat. HTML5 is not for everyone. Therefore, you must be wise and select how and where to use it. Think of all the markup flavours you’ve got available as tools: use the right one for the right job. Therefore, if your website is coded in standards compliant XHTML strict there’s no real need to change to HTML5.

There’s also the fact that by using HTML5 code right now your website gets stuck in some kind of “limbo” since even though your browser will render HTML5, it does not understand it as of yet. This may also apply to other software such as screenreaders and search engines.

Lastly you must consider that HTML5 is still under heavy development, and it’s probably the “most open” project the W3C has ever done. With the immense amount of feedback and all the hype around it, the current draft is bound to change and it’s impossible to predict how much.

So if you’re ready to do the switch, are not afraid of using technology that in the near future will be way more meaningful and can easily change whatever piece of code that might get broken, then keep reading.

A word on Progressive Enhancement and Graceful Degradation


So what are these two terms all about? Graceful Degradation is a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers. We do this on a daily basis: most of us code for Firefox first, then fix Internet Explorer. That is Graceful Degradation in the practice.

Progressive Enhancement refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies. We, too, use this on a daily basis. For example, most of the times we code a website we start with the markup and then apply an external CSS file where we add all the styling. That is Progressive Enhancement in the practice.

Both technologies usually go hand in hand and have been part of the ways we do things for years. It’s just the terms that are not that well-known. And now, both of these practices need to evolve due to the new languages that are approaching. If you want to go deeper into both of these terms, check a related article on accessites.org.

1. The Design


This will be the sample layout we’ll be coding:

Smashing HTML5! template

A very basic layout brilliantly named Smashing HTML5! which covers most of the elements we can start coding using HTML5. Basically: the page’s name and it’s slogan, a menu, a highlighted (featured) area, a post listing, an extras section with some external links, an about box and finally a copyright statement.

2. The markup


As a very basic start to our markup, this is our html file skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>

<link rel="stylesheet" href="css/main.css" type="text/css" />

<!--[if IE]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
 <script src="js/IE8.js" type="text/javascript"></script><![endif]-->
<!--[if lt IE 7]>

 <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>

<body id="index">
</body>
</html>

A few highlights:

  • 3 different Conditional comments for IE. First one includes html5 shiv code directly from Google Code for all versions of IE. The second one includes IE8.js for better backwards compatibility for IE7 and below as well as an ie.css file which will sove IE7 and below CSS bugs. Third one is just a CSS file to fix IE6 bugs.

  • The use of an “index” id and a “home” class on the <body> tag. This is just a habit I’ve developed over the past year that has simplified the coding of inner-sections of overly complicated websites.

  • A simplified version of the charset property for better backwards compatibility with legacy browsers.

  • I’m using XHTML 1.0 syntax on a HTML5 document. That’s the way I roll. It’s a habit that I really like and since I can still use it, I will. You can, however, use normal HTML syntax here. That is, uppercase attribute and tag names, unclosed tags and no quotes for wrapping attributes’ values. It’s up to you.

This is a very basic and solid startup for all and any HTML5 projects you might do in the future. With this, we can start assigning tags to the different sections of our layout.

If we had an x-ray machine designed for websites, this would be our page’s skeleton:

Smashing HTML5! template x-rayed

The header


Smashing HTML5! Header block

The layout header is as simple as it gets. The new <header> tag spec reads as follows:
The header element represents a group of introductory or navigational aids.

Thus it is more than logic that we use this to markup our header. We’ll also use the <nav> tag. The spec reads:
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element.

There’s a lot of buzz regarding the spec of the nav element since “major navigation blocks” is not a very helpful description. But this time we’re talking about our main website navigation; it can’t get any major than that. So after a couple of id’s and classes our header ends up like this:
<header id="banner">
 <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>

 <nav><ul>
  <li><a href="#">home</a></li>
  <li><a href="#">portfolio</a></li>

  <li><a href="#">blog</a></li>
  <li><a href="#">contact</a></li>
 </ul></nav>

</header><!-- /#banner -->

Featured block


Smashing HTML5! Featured block

Next is the featured block. This is best marked up as an <aside> since it’s spec says:
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

That pretty much sums up our featured block, so let’s go for it. Now, inside of this block there’s a lot going on. Firstly, this is an article, so alongside the <aside> tag, we should be using <article> right away.

We also have two consecutive headings (‘Featured Article’ and ‘HTML5 in Smashing Magazine!’) so we’ll be using yet another new element: <hgroup>. This is a wonderful tag used for grouping series of <h#> tags which is exactly what we have here. It exist to mask an h2 element (that acts as a secondary title) from the outline algorithm, which will save developers some headaches in the future.

The last element on this block is the Smashing Magazine logo to the right. We have yet another new tag for this element: <figure>. This tag is used to enclose some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document. This tag allows us to use a <legend> tag to add a caption to the elements inside. Sadly, this last feature is broken on some browsers as they try to add a <fieldset> around and it is impossible to override it with simple CSS rules. Therefore, I’d suggest leaving it aside and just use <figure> for the time being.

Featured block code will look like this in the end:
<aside id="featured"><article>
 <figure>
  <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
 </figure>
 <hgroup>

  <h2>Featured Article</h2>
  <h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
 </hgroup>
 <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>

</article></aside><!-- /#featured -->

The layout’s body


Smashing HTML5! Body block

Next is our document’s body, where all the content will be. Since this block represents a generic document section and a section is a thematic grouping of content, this one is without a doubt a <section> tag.

For the posts, we’ll use the old <ol> tag since, well, it’s an ordered list of articles. Each <li> should have an <article> tag and within this, we’ll have a <header> for the post title, a <footer> for the post information and a <div> for the post content. Yes, a <div>.

The reason for using a div is simple: we’ll be using the hAtom 0.1 Microformat and it requires the content entry to be wrapped by an element. Since no other tag applies to this (it is not a section, it is not a full article, it is not a footer, etc.) we’ll use a <div> since it provides no semantic value by itself and keeps the markup as clean as possible.

With all these tags, and the hAtom microformat in place, the code shall look like this:
<section id="content">

 <ol id="posts-list">

  <li><article>
   <header>
    <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
   </header>

   <footer>
    <abbr title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
     10th October 2005
    </abbr>

    <address>
     By <a href="#">Enrique Ramírez</a>

    </address>
   </footer><!-- /.post-info -->

   <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>

   </div><!-- /.entry-content -->
  </article></li>

  <li><article>
   ...
  </article></li>

  <li><article>
   ...
  </article></li>
 </ol><!-- /#posts-list -->

</section><!-- /#content -->

For the mighty ones: yes, I did not use the <time> element. This tag is rather new, and it is not compatible with the current microformat implementations out there. Since I’m indeed using hAtom it made little point to have both an invalid microformat and a yet-incomprehensible tag. If you’re not using a microformat, I’d suggest using <time> instead.

The extras block


Smashing HTML5! Extras block

The extras block is yet another section of our document. You might struggle for a while deciding whether an <aside> or a <section> tag would be best for this section. In the end, this section could not be considered separate from the main content since it contains the blogroll links and some social information of the website. Thus, a <section> element is more appropriate.

Here we’ll also find another use for the <div> tag. For styling needs and grouping’s sake, we may add two divs here: one for the blogroll section and one for the social section.

For the rest of the block there’s nothing much to decide. It’s the everyday <ul> accommodated set of links on both sections, which in the end may look like this:
<section id="extras">
 <div>
  <h2>blogroll</h2>
  <ul>

   <li><a href="#" rel="external">HTML5 Doctor</a></li>
   <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
   <li><a href="#" rel="external">Smashing Magazine</a></li>

   <li><a href="#" rel="external">W3C</a></li>
   <li><a href="#" rel="external">Wordpress</a></li>
   <li><a href="#" rel="external">Wikipedia</a></li>

   <li><a href="#" rel="external">HTML5 Doctor</a></li>
   <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
   <li><a href="#" rel="external">Smashing Magazine</a></li>

   <li><a href="#" rel="external">W3C</a></li>
   <li><a href="#" rel="external">Wordpress</a></li>
   <li><a href="#" rel="external">Wikipedia</a></li>

   <li><a href="#" rel="external">HTML5 Doctor</a></li>
   <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
   <li><a href="#" rel="external">Smashing Magazine</a></li>

   <li><a href="#" rel="external">W3C</a></li>
   <li><a href="#" rel="external">Wordpress</a></li>
   <li><a href="#" rel="external">Wikipedia</a></li>

  </ul>
 </div><!-- /.blogroll -->

 <div>
  <h2>social</h2>
  <ul>

   <li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
   <li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
   <li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>

   <li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
   <li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
   <li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>

  </ul>
 </div><!-- /.social -->
</section><!-- /#extras -->

The About and footer blocks


Smashing HTML5! About and Footer blocks

The footer has no real difficulty. We’ll use the brand new <footer> tag to wrap both the about and the copyright information since the spec reads:
The footer element represents a footer for its nearest ancestor sectioning content. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Since the nearer ancestor of our <footer> tag is the <body> tag, is more than right to wrap both elements here since we’re adding information about the website’s owner (and thus, author).

For the about block we’ll use an <address> tag, which contains contact information for it’s nearest <article> or <body> element ancestor. We’ll also use the hCard Microformat to enhance the semantic value. For the copyright information we’ll go with a simple <p> tag so the code ends like this:
<footer id="contentinfo">
 <address id="about">
  <span>
   <strong><a href="#">Smashing Magazine</a></strong>

   <span>Amazing Magazine</span>
  </span><!-- /.primary -->

  <img src="images/avatar.gif" alt="Smashing Magazine Logo" />
  <span>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>

 </address><!-- /#about -->
 <p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->

Summing it all up


So, after all this mess, the complete code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>

<link rel="stylesheet" href="css/main.css" type="text/css" />

<!--[if IE]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
 <script src="js/IE8.js" type="text/javascript"></script><![endif]-->

<!--[if lt IE 7]>
 <link rel="stylesheet" type="text/css" media="all" href="css/ie6.css"/><![endif]-->
</head>

<body id="index">

<header id="banner">
 <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>

 <nav><ul>
  <li><a href="#">home</a></li>
  <li><a href="#">portfolio</a></li>

  <li><a href="#">blog</a></li>
  <li><a href="#">contact</a></li>
 </ul></nav>

</header><!-- /#banner --> 

<aside id="featured"><article>
 <figure>
  <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
 </figure>
 <hgroup>

  <h2>Featured Article</h2>
  <h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
 </hgroup>
 <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>

</article></aside><!-- /#featured -->

<section id="content">
 <ol id="posts-list">
  <li><article>
   <header>
    <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>

   </header>

   <footer>
    <abbr title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
     10th October 2005
    </abbr>

    <address>

     By <a href="#">Enrique Ramírez</a>
    </address>
   </footer><!-- /.post-info -->

   <div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
   </div><!-- /.entry-content -->
  </article></li>

  <li><article>
   ...
  </article></li>

  <li><article>
   ...
  </article></li>

 </ol><!-- /#posts-list -->
</section><!-- /#content -->

<section id="extras">
 <div>
  <h2>blogroll</h2>

  <ul>
   <li><a href="#" rel="external">HTML5 Doctor</a></li>
   <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

   <li><a href="#" rel="external">Smashing Magazine</a></li>
   <li><a href="#" rel="external">W3C</a></li>
   <li><a href="#" rel="external">Wordpress</a></li>

   <li><a href="#" rel="external">Wikipedia</a></li>
   <li><a href="#" rel="external">HTML5 Doctor</a></li>
   <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

   <li><a href="#" rel="external">Smashing Magazine</a></li>
   <li><a href="#" rel="external">W3C</a></li>
   <li><a href="#" rel="external">Wordpress</a></li>

   <li><a href="#" rel="external">Wikipedia</a></li>
   <li><a href="#" rel="external">HTML5 Doctor</a></li>
   <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>

   <li><a href="#" rel="external">Smashing Magazine</a></li>
   <li><a href="#" rel="external">W3C</a></li>
   <li><a href="#" rel="external">Wordpress</a></li>

   <li><a href="#" rel="external">Wikipedia</a></li>
  </ul>
 </div><!-- /.blogroll -->

 <div>

  <h2>social</h2>
  <ul>
   <li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
   <li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>

   <li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
   <li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
   <li><a href="http://website.com/feed/" rel="alternate">rss</a></li>

   <li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
  </ul>
 </div><!-- /.social -->
</section><!-- /#extras -->

<footer id="contentinfo">
 <address id="about">
  <span>
   <strong><a href="#">Smashing Magazine</a></strong>

   <span>Amazing Magazine</span>
  </span><!-- /.primary -->

  <img src="images/avatar.gif" alt="Smashing Magazine Logo" />
  <span>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>

 </address><!-- /#about -->
 <p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->

</body>
</html>

Say, isn’t that readable? It’s also way more semantic than a bunch of <div>s all over the place.

3. The CSS


Just like our markup, the CSS will also have a very basic start. Call this a frameworks of sorts which I’ve been using for a long time and works fairly well. Here’s the code for our main.css file:
/*
 Name: Smashing HTML5
 Date: July 2009
 Description: Sample layout for HTML5 and CSS3 goodness.
 Version: 1.0
 Author: Enrique Ramírez
 Autor URI: http://enrique-ramirez.com
*/

/* Imports */
@import url("reset.css");
@import url("global-forms.css");

/***** Global *****/
/* Body */
 body {
  background: #F5F4EF url('../images/bg.png');
  color: #000305;
  font-size: 87.5%; /* Base font size: 14px */
  font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  line-height: 1.429;
  margin: 0;
  padding: 0;
  text-align: left;
 }

/* Headings */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */

h2, h3, h4, h5, h6 {
 font-weight: 400;
 line-height: 1.1;
 margin-bottom: .8em;
}

/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
 color: #C74350;
 padding: 0 1px;
 text-decoration: underline;
}
a:hover, a:active {
 background-color: #C74350;
 color: #fff;
 text-decoration: none;
 text-shadow: 1px 1px 1px #333;
}

/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}

/* Lists */
ul {
 list-style: outside disc;
 margin: 1em 0 1.5em 1.5em;
}

ol {
 list-style: outside decimal;
 margin: 1em 0 1.5em 1.5em;
}

dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}

/* Quotes */
blockquote {font-style: italic;}
cite {}

q {}

/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}

 /* Thead */
 thead th {padding: .5em .4em; text-align: left;}
 thead td {}

 /* Tbody */
 tbody td {padding: .5em .4em;}
 tbody th {}

 tbody .alt td {}
 tbody .alt th {}

 /* Tfoot */
 tfoot th {}
 tfoot td {}

This is our first step into getting the layout together. We can style most of the basic elements from here, so feel free to do so. Here’s a few highlights:

  • For optimum coding, a few basic information on the .css file is at the top in comments form.

  • 2 imports at the beginning of the file. The first one is Eric Meyer’s CSS reset file. Second one is a personalized global forms file which I’ll discuss more deeply later on.

  • Very basic styling for the default tags.

Explaining some properties


For this very part, there’s little to be mentioned. Firstly there’s the text-shadow CSS3 property. To explain it, here’s a sample:
 text-shadow: 1px 5px 2px #333;

This will give us a #333 shadow on our text that’s 1px to the right, 5px down and with a 2px blur. Simple, right? You can use hex and rgba values plus any CSS unit (except %) here.

We also have this little baby:
 * p:last-child {margin-bottom: 0;}

This line will remove the margin bottom of any <p> tag that’s the last child of it’s parent. Useful when using boxes (like we’re doing) to avoid large vertical gaps.

Lastly, we have a couple of selectors:
 ::-moz-selection {background: #F6CF74; color: #fff;}
 ::selection {background: #F6CF74; color: #fff;}

::selection is a CSS3 selector that lets us style how the text selection looks. It only allows color and background CSS properties, so keep it simple. ::-moz-selection needs to go here since Mozilla haven’t implemented the ::selection selector.

Enabling HTML5 elements


Now, as I’ve stated before, browsers do not understand HTML5 as of yet. And since HTML5 is still in development, little has been discussed about the default styling the new elements will have. Thus, being tags that do not exist for the browser, it does not display any styling in them.

Perhaps it’s fair to assume that most browsers apply something like display: inline for all unknown tags that they might encounter. This is not what we want for some of them, such as <section>, so we need to tell explicitly to the browser how to display these elements:
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
 display: block;
}

There! Now we can magically style our tags as if they were <div>s!

Limiting our blocks


Some of you might have noticed how I added the class="body" attribute to the major sections of the layout in the markup. This is because we want the body of my website to be for a certain width (800px), and I’ve never been a fan of the big wrapping <div> to do that. So we’ll use the basic block centering technique using margins for this. I’m also adding a couple of generic classes to this section that might be used for a post side content.
/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}

Header styling


We’ll begin with our header. This one is fairly easy. We just want a couple of spacing and a few text styling here and there. Nothing we haven’t done before.
/*
 Header
*****************/
#banner {
 margin: 0 auto;
 padding: 2.5em 0 0 0;
}

 /* Banner */
 #banner h1 {font-size: 3.571em; line-height: .6;}
 #banner h1 a:link, #banner h1 a:visited {
  color: #000305;
  display: block;
  font-weight: bold;
  margin: 0 0 .6em .2em;
  text-decoration: none;
  width: 427px;
 }
 #banner h1 a:hover, #banner h1 a:active {
  background: none;
  color: #C74350;
  text-shadow: none;
 }

 #banner h1 strong {font-size: 0.36em; font-weight: normal;}

We now pass on to the navigation. Pretty much the same as before, nothing really new here. The regular horizontal list, a couple of colour edits. Nothing fancy.
 /* Main Nav */
 #banner nav {
  background: #000305;
  font-size: 1.143em;
  height: 40px;
  line-height: 30px;
  margin: 0 auto 2em auto;
  padding: 0;
  text-align: center;
  width: 800px;

  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
 }

 #banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
 #banner nav li {float: left; display: inline; margin: 0;}

 #banner nav a:link, #banner nav a:visited {
  color: #fff;
  display: inline-block;
  height: 30px;
  padding: 5px 1.5em;
  text-decoration: none;
 }
 #banner nav a:hover, #banner nav a:active,
 #banner nav .active a:link, #banner nav .active a:visited {
  background: #C74451;
  color: #fff;
  text-shadow: none !important;
 }

 #banner nav li:first-child a {
  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;
 }

We’re using another CSS3 property here: border-radius. This new CSS3 property lets us add rounded borders to our blocks without the need of unnecessary, non-semantic tags that will clutter our code or a million of images and clever background-positioning. No, that’s all a thing of the past. With this we just need to set the radius of our border and that’s it.

Of course, border-radius is not widely adopted yet, and thus, we need to use the equivalent properties for Mozilla- and Webkit-browsers. There are a lot of variations to this property, and can make your code a little big, but if you want rounded corners on most of the current browsers, you might as well add them.

You might as well notice the use of !important. This is basically to override the default styles (text-shadow) without complex specificity selectors. In this example it’s here mostly for educational purposes.

Featured block and Body styling


Here’s the CSS code for both blocks. Note that this is not the styling for the posts’ list. Just the major content block. As both of these blocks have no real special CSS properties, I’ll let you guys figure it out.
/*
 Featured
*****************/
#featured {
 background: #fff;
 margin-bottom: 2em;
 overflow: hidden;
 padding: 20px;
 width: 760px;

 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

#featured figure {
 border: 2px solid #eee;
 float: right;
 margin: 0.786em 2em 0 5em;
 width: 248px;
}
#featured figure img {display: block; float: right;}

#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}

#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}

/*
 Body
*****************/
#content {
 background: #fff;
 margin-bottom: 2em;
 overflow: hidden;
 padding: 20px 20px;
 width: 760px;

 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

Again, this is our everyday coding style. Backgrounds, margins, colours and text styles we’ve been using for years. Perfect example of how styling HTML5 is not that different from current markup languages. It’s just as easy to style as it’s always been.

Extras block styling


Here things begin to get interesting. We’ll begin with basic styling for the block itself:
/*
 Extras
*****************/
#extras {margin: 0 auto 3em auto; overflow: hidden;}

#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
 color: #C74350;
 font-size: 1.429em;
 margin-bottom: .25em;
 padding: 0 3px;
}

#extras a:link, #extras a:visited {
 color: #444;
 display: block;
 border-bottom: 1px solid #F4E3E3;
 text-decoration: none;
 padding: .3em .25em;
}

 /* Blogroll */
 #extras .blogroll {
  float: left;
  width: 615px;
 }

 #extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}

 /* Social */
 #extras .social {
  float: right;
  width: 175px;
 }

As you can see, I’m doing a 3 column layout for the blogroll block by floating the <li>s and a 1 column layout for the social block by merely changing its width. This already works very well by itself, but there’s one thing that bothers me. The borders I’ve added for separating each of the links:

Smashing HTML5! Extras block border issue

The highlighted row is the one troubling me. The borders I’ve added are actually on two elements. Each <li> and <a> tag have a border-bottom of 1px, which I don’t want on the last row. So we’ll remove the borders for the last 3 elements on blogroll, and the last element on social.

First we’ll remove the borders on the last <li> of each block. By using the CSS3 :last-child selector, we can target the last <li> of it’s parent <ul>.
 #extras li:last-child, /* last <li>*/
 #extras li:last-child a /* <a> of last <li> */
 {border: 0}

That will remove the border from the last link on both of our blocks. Now we have a new problem. How are we going to remove the border on the other two elements on the blogroll block?

Smashing HTML5! Extras block border second issue

Well, meet :nth-last-child().
#extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}

Phew! Looks pretty hard, uh? Not really. This basically targets the second (2) and third (3) elements starting from the end. Exactly the ones I want to remove the border from.

As expected, this will not work on IE, though IE8.js does support :last-child, it does not support :nth-last-child, thus, borders will appear on IE. This is NOT a major design problem, information is still accessible, thus it is pointless to try to achieve the same effect on IE.

Adding icons to social


Now we’ll spice things up a little. We all love how little icons look besides each link. We’ve seen that design technique everywhere. There’s a million ways of applying them, but we’ll use some advanced CSS3 selectors to do this.

Let’s begin with a little introduction. a[n='b'] will target all <a> that has an n attribute value of b. So, for example, if we use this: a[href='picture.jpg'] we’ll be targeting an element like <a href="picture.jpg">. This is great, but not exactly what we want, since the follow-ups of the URL might have a different value. Here’s a couple of other selectors that might come in handy:

  • a[n] will target all <a> that has an n attribute, regardless of its value.

  • a[n='b'] will target all <a> that has an n attribute value of b.

  • a[n~='b'] will target all <a> that has an n attribute which one of its space-separated values is b.

  • a[n^='b'] will target all <a> that has an n attribute that starts with b.

  • a[n*='b'] will target all <a> that has an n attribute that has b somewhere within its value.

Note that neither of these is restricted to the <a> tag. This last one fits us perfectly. So we’ll search for an <a> tag that has a piece of text somewhere within its URL. So this is our code:
#extras div[class='social'] a {
 background-repeat: no-repeat;
 background-position: 3px 6px;
 padding-left: 25px;
}

/* Icons */
.social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
.social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
.social a[href*='last.fm'], .social a[href*='lastfm'] {background-image: url('../images/icons/lastfm.png');}
.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}
.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}

The first bit lets us add a padding to the social links, where the icon will be. It’ll also set the default background settings so we don’t have to repeat ourselves. You might be wondering why I’m using div[class='social'] rather than the normal div.social. Simply because, for the browsers that don’t support this kind of selectors (*cough* IE *Cough*), we don’t want a white gap on the left of our links. Thus, using the same selector used for the background icons will keep me safe. IE won’t have a padding nor a background image, while the rest will do.

The second section uses the selector explained above to target each social network and add the proper icon.

This CSS technique is nothing new, and as powerful as it might be, it is not widely used (I’ve even seen JavaScript used to achieve this same thing). Yet another CSS feature that goes unnoticed and shouldn’t be.

Footer Styling


Lastly, we have our footer. As other examples above, this has just basic styling here and there. Besides the border-radius property, there’s nothing new in here.
/*
 About
*****************/
#about {
 background: #fff;
 font-style: normal;
 margin-bottom: 2em;
 overflow: hidden;
 padding: 20px;
 text-align: left;
 width: 760px;

 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}

#about .url:link, #about .url:visited {text-decoration: none;}

#about .bio {float: right; width: 500px;}

/*
 Footer
*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}

The Posts List


There’s only one last element to style. Once again, basic styling here, but this time, we’ll add a quick effect for when the user hovers over the post.
/* Blog */
.hentry {
 border-bottom: 1px solid #eee;
 padding: 1.5em 0;
}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}

.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}

.hentry .post-info * {font-style: normal;}

 /* Content */
 .hentry footer {margin-bottom: 2em;}
 .hentry footer address {display: inline;}
 #posts-list footer address {display: block;}

 /* Blog Index */
 #posts-list {list-style: none; margin: 0;}
 #posts-list .hentry {padding-left: 200px; position: relative;}
 #posts-list footer {
  left: 10px;
  position: absolute;
  top: 1.5em;
  width: 190px;
 }

Some basics. I’m removing all margin and padding for the last post entry (so I don’t end up with a big gap at the bottom of my box). I’m also using the > selector which basically targets a direct child. For example, #content > .hentry will target a .hentry element that’s directly inside the #content. If the .hentry is inside, let’s say, an ordered list, this rule will not apply since it’s a grandchild and not a direct child of #content. This is to target the single post view once we get onto that.

Continuing with our code, we’ll get this:
#posts-list .hentry:hover {
 background: #C64350;
 color: #fff;
}
#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {
 color: #F6CF74;
 text-shadow: 1px 1px 1px #333;
}

This code will change the <li> background color, text color and its <a> color when the mouse is directly above the <li>. This is nothing new and has been possible since forever, but we’re adding it for a simple reason.

HTML5 lets users wrap block-level elements with <a> tags to create block linking areas. Basically, we’ll be able to wrap the entire <hentry> contents with an anchor and have it behave as a proper link. However, after some testing, I’ve figured that Firefox 3.5.1 is not ready for this. Perhaps because of the non-understandable new elements inside of each .hentry, everytime I added an anchor to wrap the contents, everything inside started to behave in weird manners. Safari, Opera and even IE6 work properly. Take a look at the test page. Below are a couple of screenshots for all of you single-browser users.

Opera 9.64:

Opera block level anchors render

Safari 4.0.2:

Safari block level anchors render

Internet Explorer 6:

IE6 block level anchors render

Firefox 3.5.1:

Firefox block level anchors render

So block level anchors are really broken on Firefox, yet we can add a nice :hover effect to the <li>. So we can enhance our user experience visually, though not from the accessibility point of view.

Fixing IE6


Finally, we need to do some fixing for IE6. Below is the complete ie.css and ie6.css file. Each line has a comment on its right side or on the top explaining what it’s fixing. Pretty straightforward. This is ie.css:
#banner h1 {line-height: 1;} /* Fixes Logo overlapping */

And this is ie6.css file:
#featured figure {display: inline;} /* Double margin fix */
#posts-list footer {left: -190px;} /* Positioning fix */

/* Smaller width for Social block
so it won't jump to next line */
#extras .social {width: 165px;}

4. The aftermath


So, how does everything look now? Take a look at the final product here. It has been tested on IE6, Firefox 3, Firefox 3.5, Opera 9.64 and Safari 4.0.2. They all behave properly. Below are a series of screenshots of every browser.

Final Version Safari Screenshot
Final Version Firefox Screenshot
Final Version Opera Screenshot
Final Version Internet Explorer 6 Screenshot

It is now safe to say that you can achieve an HTML5/CSS3 layout today that will work on past, current and future browsers without a problem. We are still far away from the time we can fully implement much of HTML5′s coolest features, but we can begin using it today.