25 June 2010

A GPU-Powered HTML5 Flickr Photo Viewer

http://blogs.msdn.com/b/ie/archive/2010/06/03/a-gpu-powered-html5-flickr-photo-viewer.aspx
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

http://www.khronos.org/webgl/
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

http://www.devsource.com/c/a/Using-VS/ASPNet-4-Enhances-With-New-CLR-and-More-123145/

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

http://www.devsource.com/c/a/Languages/Text-To-Speech-in-C-with-Talking-Browser/

22 June 2010

OpenLayers: Free Maps for the Web

http://openlayers.org/

.NET: String.IsNullOrWhiteSpace Method

http://msdn.microsoft.com/en-us/library/system.string.isnullorwhitespace%28VS.100%29.aspx
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)
Console.WriteLine(String.IsNullOrWhiteSpace(value));
}
}
// The example displays the following output:
// True
// True
// False
// True
// True
// True

JavaScript: === vs ==

http://msmvps.com/blogs/luisabreu/archive/2009/08/25/vs.aspx

clickoutside jQuery plugin

http://www.stoimen.com/blog/2010/02/17/clickoutside-jquery-plugin/

Change the Viewport, be Ready for the iPhone!

http://www.stoimen.com/blog/2010/03/10/change-the-viewport-be-ready-for-the-iphone/

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

http://www.stoimen.com/blog/2010/03/11/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

http://www.webappers.com/2010/06/22/latest-web-design-trends-%e2%80%94-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 () {
$('[id]').each(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

http://processingjs.org/
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.

jQuery.Preload

http://flesler.blogspot.com/2008/01/jquerypreload.html

15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials

http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/

jScrollPane - cool block-level scroller

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

The Top: 12 Best jQuery Image Galleries

http://www.devlounge.net/design/the-top-12-best-jquery-image-galleries

AJAX Image Gallery powered by Slideflow (like Cover Flow)

http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flow/

Convert text to ASCII

http://getyourwebsitehere.com/jswb/text_to_ascii.html

Free Download: 70 Excellent Notepapers and Sticky notes

http://www.psdrockstar.com/collections/free-download-70-excellent-notepapers-and-sticky-notes/

Great and free stock photos

http://www.sxc.hu/

Sticker Edge Peel

http://pshero.com/photoshop-tutorials/graphic-design/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){
el.trigger("click");
// 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

http://javascriptcompressor.com/

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 "4.8.9.12 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()">
....
</video>
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)
break;
}
}
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>
</video>

12 June 2010

Useful Design Tips For Your iPad App

http://www.smashingmagazine.com/2010/04/16/design-tips-for-your-ipad-app/

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

http://www.smashingmagazine.com/2010/04/20/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/

Designing For A Hierarchy Of Needs

http://www.smashingmagazine.com/2010/04/26/designing-for-a-hierarchy-of-needs/

40 Useful jQuery Techniques and Plugins

http://www.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/

Resurrecting User Interface Prototypes (Without Creating Zombies)

http://www.smashingmagazine.com/2010/05/17/resurrecting-user-interface-prototypes-without-creating-zombies/

CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)

http://www.smashingmagazine.com/2010/05/13/css-2-1-and-css-3-help-cheat-sheets-pdf/

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

http://www.smashingmagazine.com/2010/05/20/web-design-trends-2010-real-life-metaphors-and-css3-adaptation/

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

http://www.smashingmagazine.com/2010/05/24/free-designer-s-portfolio-icon-set-12-high-quality-icons/

Web Development For The iPhone And iPad: Getting Started

http://www.smashingmagazine.com/2010/05/28/web-development-for-the-iphone-and-ipad-getting-started/

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

http://www.smashingmagazine.com/2010/06/04/cross-browser-testing-a-detailed-review-of-tools-and-services/

GPS Data panel now available for CS5

http://blogs.adobe.com/jnack/2010/06/gps_data_panel_now_available_for_cs5.html

22 Excellent JQuery and CSS Tutorials

http://skyje.com/2010/06/jquery-and-css/

CS5 enterprise deployment tool now available

http://blogs.adobe.com/jnack/2010/06/cs5_enterprise_deployment_tool_now_available.html

The Principles Of Cross-Browser CSS Coding

http://www.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/

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

http://www.webresourcesdepot.com/10-free-html5-css3-website-templates-to-start-designing-for-tomorrow/

Best HTML5 Media Player Implementations

http://blog.insicdesigns.com/2010/06/best-html5-media-player-implementations/

Best Open Source Free FLV Players

http://www.greepit.com/2009/02/best-open-source-free-flv-players/

Themeable HTML5 Video Player – FlareVideo

http://www.greepit.com/2010/06/themeable-html5-video-player-flarevideo/

30 Inspiring and Well Designed Website Footers

http://designtutorials4u.com/30-inspiring-and-well-designed-website-footers/

04 June 2010

Unobtrusive Inline Javascript Notification

http://www.notifier.addons.32teeth.org/

AJAX Image Gallery powered by Slideflow (like Cover Flow)

http://mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flow/

57+ Free Image Gallery, Slideshow And Lightbox Solutions

http://www.1stwebdesigner.com/resources/57-free-image-gallery-slideshow-and-lightbox-solutions/

Multifaceted Lightbox

http://www.gregphoto.net/lightbox/

30 Scripts For Galleries, Slideshows and Lightboxes

http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/

Weekly Web Design Inspiration #51

http://d-lists.co.uk/2010/05/02/weekly-web-design-inspiration-51/

Weekly Smashing Web Design Inspiration – #14

http://www.smashingshare.com/2010/04/09/weekly-smashing-web-design-inspiration-14/

35 (Really) Incredible Free Icon Sets

http://www.smashingmagazine.com/2008/03/06/35-really-incredible-free-icon-sets/

Navigation Menus: Trends and Examples

http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/

Photoshop Tutorials To Improve Your Modeling and Design Skills

http://www.smashingmagazine.com/2008/11/03/photoshop-tutorials-to-improve-modeling-skills/

10 useful Firefox-based apps

http://www.infoworld.com/d/applications/10-useful-firefox-based-apps-895

The Flash Platform is fueling innovation

http://www.webkitchen.be/2010/06/02/the-flash-platform-is-fueling-innovation/

01 June 2010

Windows7 Like Glossy Popup Windows for Web Sites

http://www.greepit.com/2010/06/windows7-like-glossy-popup-windows-for-web-sites/

Round image corners in Photoshop

http://www.websitemagazine.com/content/blogs/posts/archive/2008/09/03/round-corners-in-photoshop.aspx