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

Prior to deciding which movie rental service to use, I googled to find the main competitors. Apparently they are:

• CinemaNow
• Movielink
• iTunes Movies (Ugh, what a name)
• Amazon Unbox
• Netflix (Barely)

As of right now, I am not concerned with playing these movies on my television or any portable device. All I want to do is save myself a trip to the video store. Upon going to the CinemaNow and Movielink websites, they were both advertising the movie I wanted to rent on their home pages: Bourne Ultimatum. iTunes Movies didn't even have the title -- it would appear that they're severely lacking in library quantity right now. But after a little bit more review reading, I finally found Amazon Unbox. Of course, I gravitated towards this service since I already had a consumer relationship with Amazon, and don't want to spread my credit information all over the web. And it appeared that they had what I needed -- the Bourne Ultimatum, the PC viewing experience, and an non-exorbitant price tag, at $3.99. More than ideal, but tonight I considered the trade off between not having to leave my house and letting Amazon use my bandwidth fair enough (although in a normal state, I would not consider $3.99 to be a fair price when the rental price is the same at the brick and mortar store, which should by all means include the cost of the building and the purchase of the actual DVD title I was carrying out of the store).

So, considering my past dealings with Amazon, I went with their service. They already had all my information and renting the DVD was almost too easy (I don't like the one click purchasing). To my surprise and disappointment, however, I have yet to start watching my movie 35 minutes after renting it. That's, in fact, why I am here writing this review. I'm killing time. I realized upon launching the client is that it requires a download time of 90 minutes at 240 KB/s (average)! What??? What year is this? That's almost 1.2 GB of movie! This isn't P2P, this is an actual product that I spent money on. CinemaNow, MovieLink, and iTunes movies all claim to have pseudo-instant-play, which allows you to start watching the movie immediately after purchase (with a little bit of buffering, of course). Even Netflix has pseudo-instant-play, with it's online viewable library of pre-1990's classics (and not much else - let me tell you; Netflix definitely wants you to rent their DVDs in the mail, their online library is pathetic).

So, if you're sitting at home by yourself, with at least $4 on your credit card, a broadband internet connection at your fingertips, Windows XP or Vista on your computer browsing with Internet Explorer and the willingness to download and install a proprietary client, and you don't mind giving away your dignity and any self respect you have going against the ideals of capitalism and the reward a good product should receive by creating usable and non-eye-gougable value for the consumer in the form of a good trade off between hard earned money and the warm friendly glow of an entertaining movie, I would say that renting movies online is a great way to spend an evening. However, if you're capable of sensing the least amount of dripping sarcasm from a well intentioned but entirely too wordy sentence, you'd be like me and wish you'd saved your money, because I still have 30 minutes to wait until my damn movie starts.

Technorati Tags: Amazon, Unbox, Netflix, Movielink, CinemaNow, iTunes, Movies

Obviously there are some accessibility issues with Captcha images, in that they are useless to those that are vision impaired. Some sites provide an alternate link to an audio file that speaks a random word that you must then enter into the form.

One of the easiest ways to implement a Captcha on your site is to use the reCAPTCHA plugin. But that's not what I'm going to talk about here. What I want to talk about is these new methods being introduced.

The first that was recently linked was a method that involved drag and drop to authenticate the user. Obviously this method is flawed, especially if the automated robot has access to fire JavaScript events. It does nothing but introduce a different door that the spammer may not have seen before. When this method gains any sort of popularity, or if a spammer decides to attack the site implementing this method specifically, it would not be difficult to bypass the Captcha. This is referred to in the computer world as "Security through Obscurity". This is not good practice.

The next post I read was regarding an implementation that presented the user with 8 boxes, with one of those boxes colored differently with an invitation to find and click on the differently colored box. The was implemented by Passpack (a password hosting service -- should be focused on security, right?). Correctly me if I'm wrong, but how is this difficult for the Spammer at all? The whole point of a Captcha is to distort the text inside the image so much that the image can't be read by an Optical Character Recognition (OCR) program. Basically, they've simplified it down to a one pixel image, which is an infinitely easier optical recognition problem. You don't even have to recognize characters, you can just see if the pixel is a 1 or a 0. Forgive me for asking, but is that problem NP complete?

I am all for having more friendly humane methods of Spam Bot detection. Just be wary of the methods you're using. Are they actually secure, or are they just obscure?

Technorati Tags: Security, Captcha

Ever open up your RSS reader only to be greeted with a collection of posts that feels like an episode of prepubescent Survivor (Sorry to international readers, that is an American TV reference). Whining, name calling, immaturity are all the rage nowadays, especially from so-called "professional" bloggers that seem more interested in their analytics package than providing decent content. Here's a few rules that I use for pruning my subscriptions that others might find useful:

1. If you're blog is named after yourself, that's one strike. Having a domain name named after yourself is fine (exempt myself?), but a blog should be about a subject, and unless you're posting about your dating life and the consistency of your cat's shit in the litter box (which may or may not overlap each other), your blog title should suggest a subject as well.
2. If you've posted about a meaningless internet pissing match (a trivial contest in which a group of people stand in a line and see who's urine can travel the most in-air distance), that's big strike number two. You're polluting my subset of the internet. You know what I'm talking about because we've all read those train wrecks.
3. If you're constantly plugging something that is not interesting, say goodbye. I don't mind it if you're talking about something that actually has value. I love reading Ask the Wizard, because he's actually writing about something useful, not just plugging FeedBurner (not that he'd need to).

Now take a moment to consider which blogs in your feed reader might match these criteria. Then indulge yourself and consider what actual value these blogs provide. If you like the entertainment of a good cat fight, by all means, keep reading. But if you're like me and find yourself with the conclusion that these blogs don't provide a wrinkle to the gray matter between your ears, I would encourage you to go into your feed reader and unsubscribe. The best thing you can do with a troll is to ignore them completely.

What blogs do you stay away from? (Titles only please, no links)

Technorati Tags: bloggers, blogging, rss, techmeme, techmeme-leaderboard, web-3.0

Originally coming from the YUI Library (a strictly namespaced, well organized package), and then learning jQuery (a language with object chaining, a more object oriented approach, and a much larger community), the Mootools package definitely caught me off guard.

My first surprise was that it put functions EVERYWHERE! The Core file puts approximately ten functions in the global namespace, with the only indicator that they belong to Mootools being that they had a dollar sign prefix (e.g. $extend). Couldn't these go into one global Mootools object? $E, $ES? These are given shortcuts with the normal $ and $$ functions. It just seems all over the place.

That being said, there is a lot of good functionality in the base Mootools distribution. A built in class to do Json communication (something YUI is lacking, although I'm sure it wouldn't be too hard to port it in from Captain Crockford's Code on his website), a class to Scroll to elements with nice transitions. It seems like everytime I would hit a "functional" snag in my project, I could find the exact code I needed already included in the core file.

I love their download page! Autopackaged code using Dean Edwards' Packer. One small complaint is that there is no option to disable automatic include of dependencies. They want you to package Mootools into one single file everytime (which is unwieldy, considering I have to maintain my own text file of which packages I put into the source code, if I don't want everything), and don't let you download just a certain package for separate inclusion. But when the whole thing weighs in at 40KB, why does it even matter? I would recommend just downloading all the Components together and just not worrying about it.

All in all, I'm quite happy with my Mootools experience. I've definitely found that their SmoothScroll class and easy Color fading techniques are used pretty heavily by developers using Mootools, which gives you a sixth sense that the page you're viewing is using the Mootools library. Sometimes I can just tell without even looking at the source files, which in this case is a good thing, given that we're talking about animation techniques and not raw widget style. But I plan on writing more about my pet peeves with framework widget styles later on.

If you've been using one framework for a really long time, I would recommend checking out Mootools. Or any other framework. The more frameworks that you've tried, the better your perspective is on JavaScript in general, and what your framework's strengths and weaknesses are. Mix it up!

Technorati Tags: Mootools, JavaScript

Broadcasting Text (HTML and Websites) -> Music (Shoutcast and Internet Radio, Podcasts) -> Video from a Home Computer (Youtube)
Reading Text (Ebooks, Sony Ebook Reader) -> Listening to Music (I-Pod) -> Watching Video (I-Pod, Portable DVD players) on a Mobile Device anywhere you go
Broadcasting Text (Twitter) -> Music (Zune?) -> Video (Justin.tv for everyone?) from a Mobile Device anywhere you go

But they really need to adjust their robots.txt files to stop spiders from crawling the status of every one of their users. Today I did a search for YUI DataSource and got the following Google Link headline:

Twitter / Lee Shepherd: just finished extending YUI...

What sort of value is this going to provide to anyone?

Technorati Tags: twitter

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