Learn more in your spare time with iTunes University

Do you find yourself listening to your ipod while commuting to work or school? Make that time more productive by subscribing to the feeds in iTunes University. Today’s lecture for me was the Future of the Internet, by Stanford professor Ramesh Johari. I haven’t found any that discuss the nitty gritty of coding, but it is great to get the background information on architecture, policies, history, decisions, and more.

Other participating universities include

  • M.I.T.
  • Duke
  • Yale
  • Vanderbilt
  • A.S.U.

Use a content delivery network for dirt cheap


The Yahoo! exceptional performance team has released a series of best practice rules for making your site perform significantly faster. Fortunately, the majority of fixes can be handled by any developer. #2 however seems a bit outside the budget of most developers… until now

2: Use a Content Delivery Network

Let’s say you have a small site that has a very local audience. Sally down the street doesn’t notice any problems with slow images. But what if your site is more global? Will the Sally equivalent in Europe, Asia, India, or the other side of the country have the same experience? Probably not. This is why large sites use the Akamai servers. They can cache images and files closer to the user.

The #2 rule by the exceptional performance team tells us to use one of these distributed asset servers.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen.

Some large Internet companies own their own CDN, but it’s cost-effective to use a CDN service provider, such as Akamai Technologies, Mirror Image Internet, or Limelight Networks. For start-up companies and private web sites, the cost of a CDN service can be prohibitive, but as your target audience grows larger and becomes more global, a CDN is necessary to achieve fast response times. At Yahoo!, properties that moved static content off their application web servers to a CDN improved end-user response times by 20% or more. Switching to a CDN is a relatively easy code change that will dramatically improve the speed of your web site.
Best Practices for Speeding Up Your Web Site

Doing this cheaply with Amazon

Amazon’s Web Services give you this functionality for a very low cost. There S3 service costs most people less than $5/month. This gives you easy acces to your private database and storage. You pay by the size of your files and the total traffic.

You can further increase your site’s performance by taking advantage of the hosted Yahoo! YUI CSS and JavaScript libraries.

Creating a static home page and dynamic blog page in WordPress 2.3

I’m having issues right now with WordPress. The problem isn’t lack of documentation, it’s the lack of current and consistent information that is driving me crazy.

WordPress 2.2x introduced functionality to choose a page as the static home page. This feature fixed the need for several plugins and hacks.

  1. Create a page in your WordPress Admin with your preferred home page info
  2. Go to the options –> Reading submenu and select “Front page displays:”. For the front page, choose the page you just created
  3. Check your tabs, do you have duplicate home page tabs? I had a custom topnav and had to add logic to not display the new page in the top nav
  4. You may want to re-arrange the tabs to put your new home page in first place. Here’s a great plugin: mypageorder.

Static home page is complete

So, that was fairly easy. You now have a static home page, but those great blog posts you’ve been writing are missing. The static home page does not activate the Loop, the code that handles blog posts, archives, etc. So now you need to create a new section for your blog posts.

This is where it gets confusing. There are as many suggestions as conflicts. For every version, there is a reference to conflicts with this page, this version, this etc… The following are some of the twiki suggestions

Setting up your blog in a different subroot

This twiki section describes how to set up your blog post outside the root. However, notice the comments toward the end about conflicts. I’ve tried this method and couldn’t get it to work in WordPress 2.3.1.

Suppose you have WordPress running at http://example.com/. Suppose further that you want your blog to be located at http://example.com/blog/ and that you want other pages to be available at http://example.com/page1/.

The first thing you will want to do is to create a home page. You can do this by creating home.php in your theme directory. Next, create a blog template. The easiest way to do this is to create a file named blog.php with the following contents in your theme directory:



Log into WordPress and create a page named “Blog” with template “blog”. You’re done. The one last thing you will want to do is to update your permalinks structure to begin with “/blog/”, ie, “/blog/%year%/%monthnum%/%postname%/”. Now you have a WordPress-managed CMS with a unique front page and logically-structured blog content.

If you’re using the <!– more –> quicktag to place things below the fold in your posts, you’ll want to include the global variable $more and set it to zero (as shown in the code above). Otherwise, the entire post will print out on your blog’s main page.

As noted above, the home.php file is not needed in versions 2.1+. If both the blog.php and home.php files are deployed in 2.1+ they will conflict and cause the blog.php templated page to appear blank. [emphasis – TED]

Making your blog appear in a non-root folder

The outdated resource page

WordPress has a page in its twiki specifically for static pages: Creating a Static Home Page. However, it’s filled with warnings about conflicts and doesn’t solve the lack of blog pages.

UPDATE: With the release of WordPress Version 2.1, the option to set your own front page can be accomplished via your Administration > Options > Reading panel. However unlike the old explanation that follows, you must NOT name your home page template file “home.php”. If you do, this will cause a conflict with the WordPress 2.1 system. The approach that follows on this page is no longer necessary with WordPress 2.1 or newer
Creating a Static Home Page

Reading Options Subpanel

The Reading Options Subpanel twiki tells you how to select a page to be your new blog index. It just doesn’t tell you how to create that page.

…A static page (select below) – select this option to cause a “static” Page to be displayed as your blog’s front page. At the same time, choose the Page that will display your actual Posts. The Front page and Posts page cannot be the same value.

  • Front page – in the pull down box, select the actual Page that you want displayed as your front page. If you do not select a choice here, then effectively your blog will show your posts on both the blog’s front page and on the Posts page you specify. If you would like to create a static home page template file, do not name it home.php, otherwise you will encounter problems when you try to view the “blog”/”posts” section of your site. To get around this, just name it anything else, example: myhome.php
  • Posts page – in the pull down box, select the name of the Page that will now contain your Posts. If you do not select an option here, then your Posts will only be accessible via other navigation features such as category, calendar, or archive links.

Reading Options Subpanel twiki

Turbocharged option

Turbocharged CMS has a variation on the static home page, but references the builtin WP 2.1 option. It works by creating a home.php file and then setting a filter to display the home page or the blog page

How it works

It’s rather simple. When home.php exists, it’s automatically loaded in lieu of index.php when someone visits the front page of your blog.

This version of home.php does one clever trick: it redirects visitors on your main URL to your static page. But the story doesn’t end here — otherwise you’d be left without a way for readers to read your blog front page.

To perform the redirection accurately, home.php first examines the WordPress engine to look for query arguments:

* If the front page is visited with no arguments, then the reader is redirected to the designated static home page
* Otherwise, the standard arguments are processed like usual, and index.php is called on to perform the display of the requested posts
Creating a static front page on your WordPress blog

This sounds good until you remember the WordPress twiki page warning not to use home.php and blog.php at the same time.

So what is the solution?

What is the best method to create the blog index page once you’ve added a static home page? I’ve created the new blog template for the blog section as described in the previously mentioned twiki. I created a new page: blogs and set that page to use this new template. I have gone into the reading options panel and selected this page to be the posts page index. The result? A 404 page. Sigh.

Have you found a fix for this?

Storyboard your DHTML interactions

Bill Scott - AJAX GodBill Scott gave an interesting lecture today at Yahoo! about AJAX design patterns. He explained how good AJAX designs keep the user’s attention on the page, remove roadblocks, and increase stickiness to a site.

Patterns of successful AJAX behaviors are beginning to appear (Netflix, 37Signals, Yahoo!). There are subtle, and sometimes not so subtle, changes that can occur to let a user know that an action has happened.

storyboard for AJAX interactionsDownload the drag and drop storyboard design package

For instance, he pointed out an interaction on the recently departed Yahoo! Photos site. A user could select multiple photos and then drag them to special collection folders. The page generated several panels to let the user know that the move would go to the preferred folder (hit yes), wait for the action to finish, and then a final congratulations panel (hit yes). These panels and the two required clicks could have been avoided if the folder changed when the photos were dropped into it. This could be a simple glow and maybe the number of photos in the folder is increased.

Plan your entire sequence in advance

Eric Miraglia coined the phrase Interesting Moments to describe the multiple changes that occur during an AJAX/DHTML action.

In most cases, Drag and Drop requires that you write code to respond to the interesting moments in the interaction: when the drag event starts, when the dragged object enters another object, and so on.
Yahoo! UI Library: Drag & Drop – Interesting Moments

Your user will have a much more pleasant experience if these are considered in the beginning of production. The Yahoo User Interface library includes a storyboard template (.zip) for planning these interactions effectively. This story board concept also works well for forms (especially form validation actions) and Flash components.

Update

The YUI blog has posted a video of Bill’s lecture: YUI Theater — Bill Scott: “Designing the Rich Web Experience: Principals and Patterns for Rich Interaction Design on the Web”. This is a great opportunity to learn from one of the finest developers around.

Related articles

Take the pain out of CSS-based layouts

I hate dealing with CSS-based layouts. Don’t get me wrong, I’m not saying I’d rather use tables. It’s just that I don’t relish the idea of fussing with the hacks, negative margins, floats, and more to get the page looking good in all browsers.

This problem was solved a few years ago by a series of layouts donated to the greater good by wonderful developers. This gave me the ability to ignore layouts and concentrate on semantic, structural markup and using CSS to turn this into a great set of modules on the page. This is the stuff that makes web development fun for me.

Over the years, new layouts came and went and cross-browser layouts developed to a science. It’s now even easier for you to build a web site layout that is predictable, flexible, and lightweight.

The YUI-Grid

Just because I work at Yahoo!, doesn’t mean I immediately jumped onto the YUI-Grid when it was released. I’ve built several sites without it since its launch. A developer becomes comfortable with a solution and change hurts. However, I recently began working on a very simple, small gallery site and gave this tool a try.

First, a bit of an explanation on some of the nomenclature. The YUI has laid down the law on some naming conventions, and while it may seem a bit bloated, the resulting hooks allow a site to easily incorporate the YUI JavaScript and CSS.

Each main container div has three children, class=”hd” for the header, class=”bd” for the body, and class=”ft” for the footer. You can delete the hd or ft if they are not needed, but you need to at least have the body element. The main portions of the page use the same naming conventions, although with id instead of class. The header has id=”hd”, the body container: id=”bd”, and finally the footer has id=”ft”.

YUI flexibility

Nate Koechley, the man behind the grids, has created a series of rules that let you change the width of your grid, the number of columns, position of columns, and how nested columns divide the avialable space by simply changing a few classes on the parent containers.

It’s a very powerful set of controls. Here’s an example of how the classes change the widths of nested divs.

YUI Grid demonstration
The standard grid-unit interplay always divides space in two, evenly. To create layouts of more than two units (e.g., three), and to create layouts divided unevenly (e.g., 66% and 33% or 75% and 25%), we employ special grid holders. While “yui-g” tells the two children each take up half the space each, “yui-gc” tells the first unit to take up two-thirds of the space, and the other unit to take up one-third of the space. Everything else remains the same: units live within grids, and the first of a set must be indicated.
Nate Koechley – Yahoo! UI Library: Grids CSS

Help?

Now, if you are like me, your head has begun throbbing after reading the YUI Grid CSS page several times, making notes on how it works, and reading it a few more times before figuring out how to start. The package is complex and yet easy to work with once you dive in.

However, it’s easy to skip most of the headaches and begin building your site immediately. Dav Glass, also of the YUI team, created a great Grid Builder that makes it sinfully easy to build your complicated layout. Not only does it generate the HTML for your basic page, it also incorporates the full YUI CSS library.

This means you also get the YUI Base CSS, YUI Reset CSS, as well as the excellent YUI Fonts CSS. All of these are combined into one CSS file that has been akamized for faster downloads. This means your final site CSS can focus solely on the things that make it unique. You’ll be surprised how small your custom files will be when all of these issues have already been dealt with.

Take it one step further

I was prompted to write this post after seeing the latest extension of the Grid CSS from the outside. Christian Heilmann just published a simple javascript, Enhancing YUI grids with equal height columns, that builds on the established nomenclature of the Grid CSS. It’s a demonstration of the power afforded by a standardized class and id naming convention.

Christian’s javascript also utilizes the basic YUI Javascript library to take all of your nested divs and make them the same height. So, with the addition of one more js script, you now have complete control of your grid layout and your nested divs are all the same height.

Here’s how Christian describes the simplicity.

All you need to do is to add YAHOO, YAHOO Dom and YAHOO Event (easiest with the collated yahoo-dom-event package) and the script in the bottom of your document’s body. The script automatically equals all columns in nested grids. If you don’t want all of them to be equal, define only those that need fixing by adding a “columnfix”CSS class.
Christian Heilmann – Enhancing YUI grids with equal height columns

Future flexibility

This powerful package of YUI CSS and standardized nomenclature for establishing the building blocks and the YUI JavaScript library for building interactions will allow developers to spend more time creating the elements that make their site unique and reduce the cross-browser issues caused by individual mistakes. We’ll see more extensions from within and outside the YUI developers as the usage becomes more universal. They YUI libraries are not doing the work for me, they’re just making it a lot more fun and productive.