1. If you want to change videos dynamically by loading a new video into an existing player, you must use the Chromeless player (which requires an API key). The loadVideoById() method is only available in the Chromeless player. Whatever you do, don’t try to dynamically destroy and create a new player, this will cause JavaScript errors in Internet Explorer (although not Firefox).
2. CSS properties: When the player has the css display: none applied, it will not play. When the css visibility: hidden is applied, the video will still play, but will not be shown on the screen. If you wanted a headless player, like what the music search engine Songza does, you’d want to take this approach. Word of warning, there’s some tricky shit going on when you try to dynamically change these properties on a player and run commands on the player at the same time (or close to the same). For instance, I got into a sticky situation where I’d try to show the player and load a new video into the player in the same method. I had to separate these with a timeout to get both to run without error.
3. To load, you must play. Unfortunately, I wanted to pre-load the video without actually playing the video. This is unsupported. To handle this, I had to play, then pause after a timeout (using window.setTimeout). Not the prettiest, but it seems to work. Obviously the API in this case has very low cohesion, as the loadVideoById method ALSO plays the video, not simply doing ONLY what the method name suggests.
4. Forcing a global? When the player first loads after you’ve used the SWFObject embedSWF() command, it will call the function onYouTubePlayerReady(), which you can’t customize. It must be that function name, and it must be in the global namespace. Keep in mind that onYouTubePlayerReady() is called every time the player is shown (when it was otherwise hidden using the css display: none)

Unfortunately, there is some voodoo going on here that I don’t fully understand. I’m not a flash guru, nor have I ever claimed to be. But there have been a few bugs in my experience with the API that have led me to believe that it’s not quite there yet. Maybe my use cases were a bit unique, but they weren’t that extreme. I should be able to hide and show the player without error. I should be able to destroy the player without error. I should be able to load a video without playing it.

But hey, it works.

JavaScript

Looking at the source code of the Flickr home page is actually pretty strange. For one, there is only one JavaScript source code file (other than the advertising scripts), a solution for PNG Alpha Transparency in Internet Explorer, included as an HTML Component. The source for the PNG Behavior script (credit to Erik Arvidsson) is unchanged, with the exception of the removal of some extraneous comments, but curiously enough no whitespace removed (a suggestion to save them a few bucks in bandwidth). Looking at their HTML source, they seem to emphasize whitespace and readability over bandwidth savings, which seems fine to me. At least their visitors (you and I) can more easily learn something from their code.

CSS
They've taken the same route as one of the tips from Jonathan Snook, and declared all styles for an element on a single line. They use your standard css to reset to a base starting point, much like YUI's Reset CSS we're all familiar with. One interesting declaration I noticed prominently inside of their CSS was the .Butt css class, declared on their primary Search form button. I'm curious to know the semantic meaning behind that one.

They use the tan hack as well to isolate a CSS declaration for IE browsers:

This is to workaround for an IE limitation to absolutely positioning content at the bottom of a relatively positioned div, in this case the black box containing the credits (or citation, hence the cite tag) inside of the feature image.

Another interesting CSS Hack they've employed involves the line-height for <a> tags containing Unicode characters to select different languages. It starts out like Dustin Diaz's min-height hack, but throws a loop.

I'm not familiar with the /**/ syntax, and would really appreciate any information someone has on what platform this is targeting. A comment would be nice!

HTML

Standard here, and they have some nice meta tags for the I-phone:

All in all, it's short and sweet code for a home page. It's nice to see such clean code with an eye towards standards on a commercially successful site, many props to their programmers. I'm scared to do my next in the series, because I'm 100% sure it won't be as nice of a read as Flickr was.

Technorati Tags: Flickr, CSS, JavaScript, HTML, PNG, Iphone, Meta

The above code poem is released under the BSD license. To use in production environment without error, do not include an element with an id attribute of "theChurch". Obviously I'm kidding, don't use this code. Not even for enterprise software.

Technorati Tags: CSS, poem, code poem

PHING! Party on Wayne. Party on Garth!

If you've never used Phing, it's an automation tool for PHP that is a port of Java's ANT Build tool. But it's not just for building (obviously, that'd be silly). You can hook all kinds of tasks into Phing: unit tests for your PHP code (you're doing test driven development, aren't you?), building your documentation, etc. But today, let's look at automation of my favorite front end development tasks: packing (minimizing) our JavaScript and CSS.

To do this, I'm going to hook you up with two Filters for Phing that will use the PHP port of Dean Edwards JavaScript Packer, and the PHP class CSSTidy.

Here's what you'll be responsible for:

1. Download both CSSTidy and the PHP port of Packer using the links above.
2. Download Phing if you don't already have it, and install it. Note the following change I had to make to my Phing \bin\phing.bat file to get it working: Change set PHP_CLASSPATH="%PHING_HOME%\classes" to remove the quotes: set PHP_CLASSPATH=%PHING_HOME%\classes
3. Download the two Filters I made for Phing: JSPackerFilter.phps and CssTidyFilter.phps, change the extensions to .php and copy into your phing directory \classes\phing\filters\
4. Change the path in the include_once declaration at the top of each of the files to point to the csstidy and packer libraries you downloaded above:
   include_once "C:\Lib\packer.php-1.0\class.JavaScriptPacker.php";
   include_once "C:\Lib\csstidy-1.3\class.csstidy.php";

5. Get a working build file set up to point the directories your project is using. Here is a sample I made:
   <?xml version="1.0"?>
   <project name="testProject" default="pack-all">
       <target name="pack-all" depends="pack-javascript,pack-css"/>
       <target name="pack-javascript">
           <copy todir="./Web/js" overwrite="true">
               <fileset dir="../Web/js">
                   <include name="*.js" />
               </fileset>

               <filterchain>
                   <filterreader classname="phing.filters.JSPackerFilter">
                     <param name="encoding" value="62"/><!-- 0,10,62,95 or 'None', 'Numeric', 'Normal', 'High ASCII'. -->
                     <param name="fastDecode" value="true"/><!-- include the fast decoder in the packed result -->
                     <param name="specialCharacters" value="false"/><!-- have you flagged your private and local variables in the script -->
                   </filterreader>
               </filterchain>
           </copy>
       </target>
       <target name="pack-css">
           <copy todir="./Web/css" overwrite="true">
               <fileset dir="../Web/css">
                   <include name="*.css" />
               </fileset>

               <filterchain>
                   <filterreader classname="phing.filters.CssTidyFilter">
                       <param name="remove_last_;" value="true"/>
                       <param name="preserveCss" value="false"/>
                       <param name="template" value="high_compression"/>
                   </filterreader>
               </filterchain>
           </copy>
       </target>
   </project>

   Templates for CssTidy include: low_compression, default, high_compression (declarations are limited to one line apiece), highest_compression (everything is put on one line).

   The above build file is set up to work with the following directory structure:

   • Build
     • Web
       • css
       • js
     • build.xml
   • Web
     • css
     • js

   Files are copied from the source in /Web to the /Build/Web directory. I hope that you can see from the build.xml file above that the target directory is specified in the copy tag, todir attribute.

   <copy todir="./Web/js" overwrite="true">

   and the source directory is specified in the fileset tag, dir attribute.

   <fileset dir="../Web/css">
       <include name="*.css" />
   </fileset>

And then, all you need to do is navigate to the directory holding your build.xml and run the phing command (if you have phing in your path. If not, you can use an absolute link to phing, for example c:\software\phing\bin\phing). Your minimized javascript and css will be in the Build directory!

Technorati Tags: Phing, Packer, csstidy, JavaScript, CSS, PHP

Do you want to fit more content onto your DataTable, but don't know how? Do you wish that you had fewer columns, or more horizontal screen-estate? Well now you can enlarge your table easily with these simple functions! Instead of adding more information into additional columns, we have used our patented method of not actually patenting anything to bring you a secret formula that will allow you to dynamically insert rows into your table, designed for holding additional, non-constrained customizable content!

Do you mean to tell me that your formula will give that special lady in your life the DataTable that she has always wanted?

Of course! In fact, we guarantee this DataTable to satisfy all of the women you know and don't know in the world or we'll give you a full refund of the purchase price!

Wow! How does it work?

When you click on a row in the DataTable, it inserts a child row beneath the row with an HTML string passed in to populate the dynamic content. When you click on the parent row or the new row that was inserted, the content disappears! It's that easy! You don't have to apply any gross awful smelling creams, or take any large horse-sized pills for this to work! You literally only use the following code to do it:

Usage Code:

Library Code:

Customize the CSS, if desired.

You might even want to put a little + and - into the first column of each row to give a visual cue that there is more information for display available on click.

Technorati Tags: YUI, DataTable, Grid, YUI DataTable

Earlier I published an article entitled Problems with the YUI DataTable. Now we're going to work out those problems together, through better communication and more effective problem solving techniques. We're going to save your marriage.

Earlier I had stated that there were a few problems with the DataTable, in its current form. Let's review (but not play the blame game).

• Bug #1: Table headers weren't lining up correctly in Firefox (personal ignorance on Box Models)
• Bug #2: Single Select bug where multiple rows were being selected when column was sorted (All browsers, Sortable and SingleSelect Tables)
• Bug #3: Header displayed out of document flow when the window was resized (IE6, Scrollable Tables)
• Bug #4: Content was being displayed approximately 60-70 pixels inside the bottom table boundary. (Firefox, Scrollable Tables) Note the position of the 'Top' links in the test document below.
• Bug #5: More of a limitation than a bug, the DataTable does not allow a fixed width table with horizontal overflow. Say you have a table that you have fixed column widths for, but if the width of the real estate available for the table is less than this minimum, the table should overflow with a scroll bar, but at the same time showing the column headers if you scroll vertically. A picture is better:
  

See the following test document for relevant table tests. (Note that for the purposes of testing, I've decided to test all combinations of the Top 3 DataTable features: scrolling, nested table headers, and sorting)

Just like your favorite professor, now I'm going to post the Solutions:

Bug #1: What is your Box Model?

Use the following JavaScript code to tell if you're in Standards Mode or Quirks Mode:

Standards mode forces your document into using the W3C Box Model, which is currently the standard. The W3C Box Model means any width declarations you make in your CSS code will not include padding, border, or margins. So if you put padding on your table cells and headers, it will need to be added on separately to the total width of your table.

Bug #2: Someone has posted the solution on the Sourceforge Bug Tracker here. (This is included in the DataTable javascript file below)

Bug #3, #4, and #5: I have produced an alternate DataTable file that fixes these bugs using JavaScript code. All lines that were added or changed are commented with //ADDED or //CHANGED

Developed in and last tested with YUI version 2.2.2.

Download it here:
Full (169 KB): ymod-datatable-beta.js
Minimized using JSMIN (67 KB): ymod-datatable-beta-min.js

The original and minimized YUI DataTable files are 166 KB and 66 KB respectively.

See the fluid width DataTables in action here.

A few notes on doing a fixed width DataTable using the code provided above. The total width of the table body must be 16px less than the width of the header, if you have vertical scrolling (to account for the scrollbar). So, if the total width of your header is 800px, the total width of your body must be 784px (put the last table cell as 16px smaller).

Here's the CSS to go along with a horizontal scrolling DataTable:

Technorati Tags: JennyHanDonnelly, YUI, DataTable

Typically, when creating an I-Frame shim, you're going to create the i-frame dynamically using document.createElement. Let's start out with some successful code.

Now for some caveats you might have encountered with code not matching the above:

I-Frame frameBorder attribute
Are you trying to get rid of that nasty i-frame border in Internet Explorer 6 (IE6)? Tried CSS properties? Tried setting the frameBorder attribute? It turns out that when setting the frameBorder attribute, the name of the attribute is case sensitive. Using frameborder will not work correctly, but using frameBorder (with a capital B) will give the desired result. [Source: FlashApe]

HTTPS and I-Frame src attribute
Is your page hosted on a secure domain (https instead of just http)? Is the dynamically created iframe causing the following error message in Internet Explorer?

This page contains both secure and nonsecure items. Do you want to display the nonsecure items?

Some have suggested that changing the src attribute to point to a blank html page with no content is the solution, but that's an extra http request on your page that is unnecessary. Others have suggested that that changing the src attribute to javascript:false works. It does, in fact, but writes the text 'false' to your iframe content. Others have suggested javascript:void(0) as your src attribute value [Source: ewbi.develops], but some Internet Explorer clients still have secure and nonsecure items alert popup. I have not figured out the factors that separate these Internet Explorer clients.

Update: The correct solution is in face setting "javascript:false;document.write(”");" as your src value, as I found in the jQuery BlockUI plugin. This is a silver bullet fix that will avoid all the problems I have encountered.

This code includes identical Class names taken from the Yahoo User Interface library Grids CSS component. Here is the source in the grids.css file from Yahoo (truncated for simplicity).

Obviously, it's the same code, with a few minor differences.

The interesting thing to note is that the YUI Grids CSS source code is licensed under a BSD license, which includes the following provisions:

Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.

The copyright notice they're referring to is not included anywhere on the Google Personalized Homepage (and would seem to be a violation of the license). Now this may seem like a small infraction when we're just talking about 4 lines of CSS code. But really, if they think the code is good enough that they will use it in such a prominent way and not write it from scratch using their own means, they should follow the licensing agreements stipulated.

Update
Google has added the BSD license statement and attribution to Yahoo in their CSS file (ig.css):

Sorry to everyone visiting the page for the extra millisecond or two it will take to load these comments.

Technorati Tags: YUI, Grids, CSS, Licensing, Google, Yahoo

Minimum Feature Set:

• Client-Side Sorting: I don't want it to do an XMLHttpRequest to sort the data, I want it to be done all clientside.
• Simple inline editing: Edit a field in the table right there on the table. I hadn't established what types of data I would need to edit yet.
• Data Sources: load from a native JavaScript array or a XMLHttpRequest returning XML or JSON.
• Data Type Sort Algorithms: at the very minimum different sorting algorithms for numeric columns and string columns.
• Hierarchical Columns: group column headers together under a parent header.
• Easily customizable: must be able to customize the look and feel of the grid easily using CSS and not by editing Javascript.
• Header Freeze: If I have overflow on my table vertically causing a scroll bar, I want the table headers to remain shown at the top of the table while I scroll from top to bottom.
• Custom Cell Rendering: I have the data I'm loading, but I want to change how it looks when it is rendered to the table. Common for date formatting.

Luxury Feature Set:

• Resizeable Columns: change the width of a column by dragging on the column header's right border.
• Movable Columns: dragging a column will cause it to be moved on the table (TIBCO General Interface supports this).
• Custom Sort Algorithm: write my own algorithm to specify how data is sorted, or provide a way to do multi-column sorting (sort within one column, ties are sorted by another column, and so on).
• Dynamic Paging (don't make me click numbered links, load the data automatically when I scroll) both on the client (dynamically insert only what I'm looking at and remove what I've scrolled past) and using the server (load more data through an XMLHttpRequest)
• Column Freeze: if the table is going to scroll horizontally, allow the developer to freeze a column or multiple columns so that they are shown when scrolling from left to right.

Evaluation of Options: How does the YUI DataTable stack up?

Basic Items: Client-Side Sorting, Simple inline editing, Data Sources, Data Type Sort Algorithms (stock types not yet implemented out of the box), Hierarchical Columns, Header Freeze (buggy), Custom Cell Rendering, and is easily customizable with CSS.

Luxury Items: Resizeable Columns, Movable Columns (not supported), Custom Sort Algorithms are supported (you can right your own Data Type Sort Algorithms with this feature), Dynamic Paging (manually, not dynamic), Column Freeze (not supported)

Problems:

• Any sort of fixed width table is going to be problematic. Putting a fixed width on the table causes the table headers to be misaligned with the associated table data. It's a mess. The only viable option here is to let the table do it's own width calculations. You can't even set the column widths manually using the {width} variable as suggested when using a fixed width table.
• Data Type Sort Algorithms supposedly work from the column type, but this feature is documented in the code as being a TODO. All columns are sorted by a string datatype, meaning that if your column is numeric and you had the following rows: { 3, 7, 40 }, the sort result would be { 3, 40, 7 }.
• Header Freeze was problematic. Implementing the {scrollable=true} feature as recommended by the documentation causes the table headers to be misaligned with the data in a fixed width table.
• Paging uses the old school numbers method. This wasn't a deal breaker, since I classified this feature as a luxury item.

Granted, the DataTable in it's current form is a beta component, but that 0.5 MB ExtJS hit is looking pretty nice right now.

Minor Update: to do a fixed width table that will overflow horizontally, this is the method you can use:

Technorati Tags: YUI, DataTable, Grid