One of the things I did at the event is sit in on one of the Website Smackdown sessions, which are expert reviews of web sites people in the audience submitted. One of the sites was the following:

What shocked me about it was that it is fairly new, but still uses tables for layout. When I investigated I heard that the reason is simply lack of resources to build web sites in a different manner. This is sad, as nowadays we have resources to build upon readily available on the web that we couldn’t even dream of when I started developing. To prove the point that you can re-do a small info site like this one using semantic markup and CSS without even knowing much about it, I used the YUI grids and created the following in roughly 15 minutes:

You can download the web site demo files and play with them yourself.

I’d be happy to write more, in-depth articles about this kind of structure and redesign if there is interest. The only question I have about it is where to publish them? People that would benefit from these are not likely to read the blogs and magazines I write for. Is there a government web standards publication somewhere?

• The CSS components make sure that creating CSS based layouts and typography are as easy cross-browser as libraries make JavaScript development
• The YUI DOM control allows you to monitor the size of the browser window, the position of the document in the window and the dimensions of any element. You can use this power to control things like fixed positioning and element overlap and even monitor font resizing.
• I explained the concept of Custom Events and how the -debug versions of YUI will notify you as a developer at any moment of execution about the internal happenings.
  * I showed the development tools - the YUI logger, profiler and test suite and how they make your development process much less random.

The slides are available on slideshare and here are the code examples mentioned in the slides for browsing and to download as a zip.

YUI for control freaks - a presentation at The Ajax Experience

Read "YUI for control freaks - a presentation at The Ajax Experience" with Easy SlideShare

Watch "YUI for control freaks - a presentation at The Ajax Experience" right here, right now

• Sign up to the event on upcoming and pencil in information from 6.15 to 8 and then beers in a nearby local.

The Yahoo offices are located bang in the tourist centre of town, 125 Shaftesbury Avenue, WC2H 8AD London, which is next to the cinema on Shaftesbury Avenue. If you come from Leicester Square, just walk up towards Tottenham Court Road and go right when you see the Spamalot musical theatre. The office is on the left of the road right next to the Cafe Milano.

Hope to see you there!

Chris

Both Nicole and Stoyan have been talking about performance of CSS, JavaScript, HTML and also image optimization. Images can be optimized in two ways: visually (what is the quality) and file size. The latter is quite a corker, though as image editing tools leave a lot of information in files that we don’t really need - EXIF information, to be precise. If you open an image in a hex editor you will find a lot of things that can be safely removed without a change in the image quality.

There are a lot of open source tools to optimize images that way - amost one for each image format. Working through all of them can be a drag. This is why Stoyan and Nicole took their knowledge, dedication and all of these tools and built one application that does all the optimizations for you in one go:

You can upload a bunch of images, give it a URL or use it as a Firefox extension or bookmarklet. Smushit will show you how many bytes you can save by removing cruft from the images and gives you all the images as a zip file to replace them on your site. How cool and easy is that?

• Check it out now at Smushit.com

Here’s a video of Stoyan and Nicole presenting Smushit.com at The Ajax Experience in Boston (sorry about the audio):

The idea

I use twitter a lot. Some of what I write is very relevant to the blog here, some is not fit for publication and some is just personal. So publishing all the tweets here would have been disruptive, hence I tried to find a way to filter things down.

What I do is that I end every tweet that I want to show up here with a § symbol, thus giving me a handle to filter out the good ones.

Playing nice with twitter and not summoning the fail whale

As twitter is probably the most hit API out there I didn’t want to go through the API and all the authentication malarkey. Instead I am using the ATOM feed and pipes to get the information and to filter it down.

Yahoo pipes is still full of win when it comes to filtering, mashing and converting data, and the pipe in question that I am using is available here: Useful tweets pipe

It takes the atom feed of a twitter user of a certain ID, removes all tweets but the ones ending in a § and removes the user name of the output.

Using the pipe and displaying the content

In order to display the pipe all you need is a small JavaScript and the right HTML in your page (or in my case WordPress template):

<div id="mytweet" class="user-13567">
  <a href="http://twitter.com/codepo8">My useful twitter updates</a>
</div>
<script type="text/javascript"
 src="http://usefulltweets.googlecode.com/files/chirpchirp.js"></script>

The link means the thing still makes sense when JavaScript is not available and the script does the rest. One thing you need to do to show your useful tweets instead of mine is to change the class on the DIV! You get the number from your twitter page:

• Go to your twitter page, f.e.: http://twitter.com/codepo8
• Click the RSS link at the bottom
• Check the URL of the feed, your ID is the number in between the slash and ‘.rss’, f.e.: http://twitter.com/statuses/user_timeline/13567.rss

The JavaScript for display of the badge is no rocket science whatsoever:

var tweets = function(){
  var x = document.getElementById('mytweet');
  if(x){
    var twitterUserId = x.className.replace('user-','');
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'http://pipes.yahoo.com/pipes/pipe.run?' + 
    '_id=f7229d01b79e508d543fb84e8a0abb0d&_render=json' +
    '&id=' + twitterUserId + '&_callback=tweets.tweet';
    document.getElementsByTagName('head')[0].appendChild(s);
  };
  function tweet(data){
      if(data && data.value && data.value.items){
          if(typeof data.value.items.length !== ‘undefined’){
            var ul = document.createElement(’ul’);
            var all = data.value.items.length;
            var end = all > 5 ? 5 : all;
            for(var i=0;i < end;i++){
              var now = data.value.items[i];
              var li = document.createElement(’li’);
              var a = document.createElement(’a');
              a.href = now.link;
              a.appendChild(document.createTextNode(now.title));
              li.appendChild(a);
              ul.appendChild(li);
            }
            x.appendChild(ul);
        }
      }
    };
  return{
    tweet:tweet
  }
}();

• We check if the element with the ID mytweet exists
• We then extract the user ID from the class name and create a new JavaScript pointing to the JSON output of the pipe. This, once loaded, will call tweets.tweet() and send the data as JSON
• The tweet() method checks if data was retrieved, creates a list of links and appends it to the DIV.

Hope this is useful to someone else, too.