25 June 2010

A GPU-Powered HTML5 Flickr Photo Viewer

Flickr Explorer is written using standard HTML, CSS and JavaScript. It uses AJAX to asynchronously search Flickr based on your search terms and display image results through an interactive and visually compelling experience. You can zoom in, pan around, and open each photo’s Flickr page with by control+clicking.

WebGL - OpenGL ES 2.0 for the Web

WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces.

What's New in C# and .NET 4


Text To Speech in C# (with Talking Browser!)


22 June 2010

OpenLayers: Free Maps for the Web


.NET: String.IsNullOrWhiteSpace Method

Indicates whether a specified string is Nothing, empty, or consists only of white-space characters.
Handy little static method added in .NET 4.0, used in this way:
using System;

public class Example
public static void Main()
string[] values = { null, String.Empty, "ABCDE",
new String(' ', 20), " \t ",
new String('\u2000', 10) };
foreach (string value in values)
// The example displays the following output:
// True
// True
// False
// True
// True
// True

JavaScript: === vs ==


clickoutside jQuery plugin


Change the Viewport, be Ready for the iPhone!


CSS Priority: The Difference Between a.my-class and .my-class


Open Source JavaScript Slider Component

A very cool slider component that is mobile-aware: http://www.webappers.com/2010/06/15/open-source-javascript-slider-component/

Latest Web Design Trends — Afresh Inspiration From the Print


Solution for AnythingSlider and duplicate IDs

If you ever use the JW Player inside the AnythingSlider, and you place a video in the last panel of your UL list, you'll run into a pesky and non-trivial headache: The AnythingSlider automatically duplicates the last "panel" -- so it duplicates the video tag. This code fixes it by looking for the duplicate ID of my video tag (all my video tags start with "vid-") and renaming the ID to something random:
$(window).load(function () {
var ids = $('[id='+this.id+']');
if(ids.length>1 && ids[0]==this){
if (this.id.indexOf("vid-") != -1){
this.id = this.id + "_" + Math.floor(Math.random()*11);
console.warn('Multiple ID #'+this.id);
All the browsers that will need to use the Flash fallback player will now work correctly. Of course, you'd need to change the "vid-" to the start of whatever ID you've given your video tag. This issue may also manifest itself in other situations where duplicate IDs are not desirable.

HTML5 Canvas tag JavaScript library

Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.



15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials


jScrollPane - cool block-level scroller


The Top: 12 Best jQuery Image Galleries


AJAX Image Gallery powered by Slideflow (like Cover Flow)


Convert text to ASCII


Free Download: 70 Excellent Notepapers and Sticky notes


Great and free stock photos


Sticker Edge Peel


21 June 2010

How to stop AnythingSlider from code

I covered this as part of a post on HTML5 video, but wanted to give it its own article here because a lot of folks have run into the issue: How do you stop the AnythingSlider by using JavaScript? The answer isn't as intuitive as it should be.

A somewhat related question on StackOverflow.com provided a part of the answer:
$("div.anythingSlider a#start-stop").trigger("click");
However, that solution toggles the current state of the "start-stop" by triggering the click action. Here's a complete solution. Assuming that the startText has been set to "Go", this function will stop the AnythingSlider:
function stopSlider(){
// This is a way to "cache" the element and not have
// to fetch it again and again.
var el = $("div.anythingSlider a#start-stop");
// Loop while triggering the click action on the element.
while (1 == 1){
// If the HTML of the element contains "Go", then
// it's stopped and we can break out of the loop.
if (el.html().indexOf("Go") != -1) break;
The code triggers the "click" on the "start-stop" element, checking after each click to see if the HTML of the element contains the word "Go"; if it does, it break out of the loop. Of course, you'll have to modify it if you're using text other than "Go" on the "start-stop" anchor tag.

18 June 2010

Online JavaScript compressor


Event handler for HTML5 video

I'm using the HTML5 video tag inside the AnythingSlider. An interesting problem arose: How do you stop the AnythingSlider when the user starts playing the video? You don't want the slider to keep going in this situation.

Well, here's a solution. The HTML5 video events are described in the " Event summary" section of the W3C document. At first, you'd guess that you'd use the onPlay event handler. Nope. That only works when you play the video the first time; on the second play, it won't call the function. The event handler to use is onPlaying.

But how do you stop the AnythingSlider programmatically? The good folks on StackOverflow.com provided the answer.

So here's the video tag:
<video controls preload onPlaying="stopSlider()">
And here's the function to stop the AnythingSlider:
function stopSlider(){
while (1 == 1){
$("div.anythingSlider a#start-stop").trigger("click");
if ($("div.anythingSlider a#start-stop").html().indexOf("Go") != -1)
Note what appears to be an infinite while loop: Actually, the code is designed to stop the AnythingSlider. It triggers the "click" on the "start-stop" element, checking after each click to see if the HTML of the element contains the word "Go"; if it does, it break out of the loop. Of course, you'll have to modify it if you're using text other than "Go" on the "start-stop" anchor tag.

15 June 2010

OGV/OGG and the HTML5 player in Firefox

I tried playing an OGV video on Firefox using the new HTML5 video tag; the video played fine in the latest versions of Opera, Chrome, and Safari. But Firefox 3.6.3 would only show a big "X" -- no errors, nothing.

Some research revealed the answer: The video is being served as application/octet-stream. The other browsers can detect the type from the extension; Firefox, following good standards, is checking the mime type. The same issue existed on my localhost, with IIS running.

Solution is to add the OGV/OGG mime type to the server; different servers have different ways of doing this. For IIS, it's pretty simple. Follow the linked article, and simply replace the "Extension" with .ogg and the "MIME type" with application/ogg and restart IIS. Additional information on Firefox and mime type configuration can be found here. I recommend the OGG file extension and application/ogg mime type because they're included on Apache servers by default -- so no need to update configuration files and restart your production server.

But there's more to it. The type attribute on the source has to be shorter (this is a known Firefox bug). In addition, the OGG file has to be encoded correctly for it to work in all the browsers supporting the HTML5 video tag. The best encoding tool I've found thus far is FireFogg. It created the OGV that works like a charm on all the appropriate browsers (I just renamed the extension to OGG).

One last gotcha: IE doesn't like the source tag not being closed and will throw JavaScript errors; the other browsers don't care. So simply add a closing tag to the source tag and IE is happy. Now, why use a video tag in IE, when IE doesn't support that yet? Simple: The html5media library automatically replaces the video tag in unsupported browsers, such as IE, with the Flowplayer Flash player.

The final result is this; note the closing source tags; also, the MP4 source has to come first for it to work correctly on the iPhone/iPad:
<video id="vid" width="372" height="209" poster="global/vid/historydetectives-poster.jpg" controls preload>
<source src="global/vid/historydetectives.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
<source src="global/vid/historydetectives.ogg" type='application/ogg'> </source>

12 June 2010

Useful Design Tips For Your iPad App


Seven JavaScript Things I Wish I Knew Much Earlier In My Career


Designing For A Hierarchy Of Needs


40 Useful jQuery Techniques and Plugins


Resurrecting User Interface Prototypes (Without Creating Zombies)


CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)


Web Design Trends 2010: Real-Life Metaphors and CSS3 Adaptation


Free Designer’s Portfolio Icon Set (12 High Quality Icons)


Web Development For The iPhone And iPad: Getting Started


Cross-Browser Testing: A Detailed Review Of Tools And Services


GPS Data panel now available for CS5


22 Excellent JQuery and CSS Tutorials


CS5 enterprise deployment tool now available


The Principles Of Cross-Browser CSS Coding


10+ Free HTML5-CSS3 Website Templates (To Start Designing For Tomorrow)


Best HTML5 Media Player Implementations


Best Open Source Free FLV Players


Themeable HTML5 Video Player – FlareVideo


30 Inspiring and Well Designed Website Footers


04 June 2010

Unobtrusive Inline Javascript Notification


AJAX Image Gallery powered by Slideflow (like Cover Flow)


57+ Free Image Gallery, Slideshow And Lightbox Solutions


Multifaceted Lightbox


30 Scripts For Galleries, Slideshows and Lightboxes


Weekly Web Design Inspiration #51


Weekly Smashing Web Design Inspiration – #14


35 (Really) Incredible Free Icon Sets


Navigation Menus: Trends and Examples


Photoshop Tutorials To Improve Your Modeling and Design Skills


10 useful Firefox-based apps


The Flash Platform is fueling innovation


01 June 2010

Windows7 Like Glossy Popup Windows for Web Sites


Round image corners in Photoshop