Sergey Chikuyonok gets his Philips Ambilight foo on as he created a HTML5 video + canvas sample that mimics the TV effect.

As the video runs, a snapshot is sent over to JavaScript land where colors are worked out:

Then, two canvas objects are placed, one on each side, of the video itself.

Paul Irish and Jonathan Neal have created a fun example of various CSS tweaks that you can make, and see the results instantly.

CSS3, Please! lets you play with fancy new rules such as:

• border-radius
• box shadow
• gradients
• rgba support in backgrounds
• transforms
• font-face

Really nice way to make tweaks inline in the page..... nicely done. Hope to see some other examples out there :)

Anthony Calzadilla has a fun Friday example for us. He has a tutorial on how he animated an AT AT using CSS.

He goes over the different areas and how he uses animation and transforms.

For example, the head of the beast:

See addmap.js in action below - all the content in the green box is generated from the paragraph of text above it. You can try it out for yourself by clicking the screenshot.

Using addmap.js is easy - sign up for a Google Maps Key and provide it as a configuration parameter. Then call the analyse function with the ID of the element to analyse as the parameter:

The script uses YQL and Yahoo PlaceMaker under the hood, for more info and updates on this, check the blog.

And what about @zacharyjohnson? He put snow all over the network via its Winternetizer, the first snow proxy I have ever seen.

Am I missing anybody? ... sure, me!

Above FX is dedicated to all Ajaxian readers and created via some CSS3 rule handled via JavaScript for a partial cross browser implementation. WebKit based browsers, included Android and iPhone, plus Firefox 3.6, should render properly, while the most interesting thing, snow a part, is that for the first time rather than browser sniffing, I have implemented a sort of "screen resolution to power computation" sniff:

Probably not perfect, the aim is to avoid same number of flakes in mobile devices, netbooks, or desktop PCs.
I guess one day we'll have exposed CPU model and RAM amount as read only userAgent properties, so that all new effects could avoid stress for web surfers.
Something like System namespace in ActionScript, with capabilities for audio and video and extra info about the current navigator ... maybe just an AS to JS bridge 'till that day? We'll see, today the important thing is simply one: Have Fun!

Guillermo Esteves presented a piece of history translated for tomorrows browsers:  the Star Wars Episode IV opening crawl in HTML and CSS:

Unfortunately, the live experiment is not suitable for all browsers and the ideal target seems to be only OSX 10.6 and its latest Safari browser but it partially worked via Google Chrome as well.

Something To Learn About

We are moving complex computations into our favorite "decoration layer": CSS
We also want as much control as possible, and the above concept is brilliant to understand how to tame CSS transitions.
This example includes new and different techniques. Here is what I found interesting:

@font-face

OK, this is not new at all, but in this case I could not find a single valid reason to avoid the original font: a must! The only point here is that the author could have saved a bit of bandwidth via pre-deflated or gzipped fonts rather than serving them without any apparent optimization.

It's a shame there is not the real STAR WARS font as well but just an image ... anyway, let's move into more concrete stuff ...

Perspective

The stage is the block element where the magic happens. The perspective property is able to give us a "deep space" 3D feeling making closer objects look larger than further ones. Via origin modification we can decide where things should disappear, in this case a bit higher point than a central 400px, to create a similar atmosphere respecting the movie choice (and I guess to make content readable as well).

Iteration-count and Custom transitions

Far far away is the initial text. As we can see with other browsers as well this appears and disappear in 6 seconds.
This fade-in-out happens just once, so at the end of the effect, unless we won't modify the node class, the element won't be displayed anymore. This is what the animation-iteration-count property does while next snippet is the fade-in-out customization:

Via keyframes <transition_name> we can blend FX linearity deciding the amount of opacity, or other properties, at certain moments.
A generic normal linear fade-in-out would be visible 100% only in the middle of the transition while in this case it is forced to be visible for 68% of the time, making fade in and out still homogeneous but controlling the full opacity for longer.
We could have used an ease-in-out effect over opacity property to obtain a similar result but I find definitively more interesting this kind of approach.

Warp Speed: Action!

Thanks to Z axis transitions the initial STAR WARS image can appear and disappear using again a customized FX:

Above mix of webkit properties suggests me that new JavaScript libraries will use run-time actions to CSS transformations soon, rather than hard and manual JS computations over computed styles or similar expensive operations.
We can control delays, we can stop FXs removing classes or simply overwriting existent directives and, moreover, we can split the CSS itself into logical parts as the same @gesteves did, putting custom animations all together: good hint!

The Crawl

Last piece to check out is the text plus its title.

The Mythical Song

Well, this demo could not miss a proper audio element:

Apparently the used compression is truly good and the sound loud and clear. But who is in charge to start above song?

JavaScript

Quite hilarious all this demo does not basically need JavaScript at all except for an audio delay forced via interval:

If we have a good broadband connection and we are sure in 12 seconds we have buffered enough audio, the synchronization between JavaScript and the transition delay is almost perfect and the demo experience unique.

It is great to see this work, and I look forward to seeing what he comes up with next. It feels that with HTML5, CSS3, and the Web.Next we will be able to be much more creative. Finally, it's December, I can already imagine a CSS3 based snow effect for our pages ... no?

The post is complete with examples and explanation over PHP, CSS, jQuery, and finally jQuery UI.
So what is the problem? The title: An Awesome CSS3 Lightbox Gallery With jQuery

At the end of the day, the total size of the demo is massive, compared with what it offers, plus the only piece of CSS3 in the stylesheet is a box-shadow and a rotation via -webkit-transform.

Is That It?

If we can define awesome a basic usage of CSS3 requiring both jQuery and jQuery UI to create a Gallery, included a server side language, how can we define my latest experiment realized in half an hour and without using JavaScript, PHP, or whatever programming language at all?

The answer is simple: CSS3 and we can read how I did it via the not-minified and hopefully well commented css file.
OK, agreed my page is dynamically fake and a proof of concept, but honestly, which title would consider appropriate for above example?
Thanks in any case to Tutorialzine for the interesting step by step explanation and to let me try above experiment which works with latest WebKit, Chrome, Safari, and somehow with Firefox, I've not tried the nightly, and Opera as well but in latter cases without transitions.

P.S. for those with poor computation performances like me, here there is a fluid concept variation ;-)

Elias Klughammer has implemented the Juggernaut push server in a Cappuccino app.

Always nice to have an open source bare bones sample app for a marriage like this. Nothing beats looking at the source.

This becomes disastrous when a company tries to reach developers with their product. Normal marketing and PR stunts normally fail to get us excited. To work around this issue, clever companies allow developers to move into a role of developer evangelists.

A developer evangelist is a spokesperson, mediator and translator between a company and both its technical staff and outside developers.

This is my job at the moment, and I was asked by people I trained if there is a handbook about the skills needed to do this job, so I wrote one.

Check out the The Developer Evangelist handbook

The handbook explains several things:

The handbook is Creative Commons and free to use. I am working on getting a printed version out, too.

Brian Arnold created a fun sample drum machine simulator using HTML5 <audio>.

That's not all Brian is working on:

I'm also working on something like the ToneMatrix or Tenori-on (Flash and actual devices, respectively) in pure HTML/JS. It works too, but the sounds aren't exactly designed to be great together (it's currently working on a C scale) and so if you're careful, you can get some decent sound but otherwise, it'll hurt your ears.

Zach Johnson is at it again, this time giving us a fun Friday treat with CSS text shadow, all via:

Christopher Blizzard and his team are doing great write-ups on hacks.mozilla.org as they celebrate 35 days of Open Web goodness.

They just posted on the work of Alistair MacDonald who used his Burst engine to demonstrate taking SVG and having Burst load it and convert it all to JavaScript objects that are rendered inside of a canvas.

To get a feel for the code, view source:

and then watch the tutorial that shows how you can take Inkscape and quickly get animating.

View the Ogg or mp4 versions.

Also check out the other items:

• stylish text with text-shadow
• add some ambiance to your videos
• geolocation in Firefox 3.5
• content aware image resizing
• Pushing pixels with Canvas

Natalie Downe has written up a piece on styling HTML buttons as links which means that you can somewhat get the same effect. It shows how you can use an inline span to get the hover effect, taking:

and styling it with:

You can see the simple example in action.

You can check out the Processing code that does the work:

A fairly new web service that does this for us is Yahoo's Placemaker. What it does is analyze a text (or the document defined by an HTML or feed URL) and give you back all the geographical locations that are mentioned in it. Pretty awesome, but the problem is that the API only allows for POST values and has either XML or RSS output. This means you can't do it in simple XHR because of the cross-domain problem and you can't use generated script nodes as there is no JSON output. You'd have to use a server-side proxy service. This is pretty easy with PHP and cURL as explained in this blog post but can be annoying, too.

That's why I wrote a small wrapper in JavaScript that allows JS access to the Placemaker service called JS-Placemaker. I am not hosting a proxy for you, all you need to do is get your own application ID for Placemaker and use the JavaScript which you can host yourself if you wanted to.

Analyzing a text using JS-Placemaker is as easy as this:

The console output is an object or an array of places the service returned from the text:

The first parameter is the text you want to analyze (this could be a pointer to the innerHTML of a DOM element, for example), the second is the callback function and the third the locale of the text - the demo page shows that Placemaker groks several languages.

Under the hood, JS-Placemaker uses YQL to work around the issue of proxying the request. YQL allows you to define your own data tables and even allows for doing JavaScript conversion of data on the server-side before sending it on. YQL has JSON output, so I was able to use that to access Placemaker in JavaScript.

The geo.placemaker Open Table was built by Balaji Narayanan and Tom Hughes-Croucher and can be used in YQL directly. Say you want to get the geo location data from the Slashdot Homepage in JavaScript, you can do this with the following statement in YQL.

You can choose JSON as the output and you get the data a a nice object.. Define a callback method and you could use it directly in a script node.

Have a Play with the YQL console using the Open Table, but better get your own AppID, before this one exceeds the daily limits.

Try it out here and you see what I mean.

The next step of this interface was to open it out to the public. You can define an "Open Table" as a simple XML schema and bring your own API into this interface with that.

One thing that's been burning on my tongue to tell the world about has been finally released now: YQL execute. Instead of making the YQL language itself much more complex (and thus running in circles) we now allow you to embed JavaScript in the Open Table XML that will run on the YQL server and allow you to access other web services, authenticate and scrape HTML with JavaScript and E4X. As Simon Willison put it:

This is nuts (in a good way). Yahoo!’s intriguing universal SQL-style XML/JSONP web service interface now supports JavaScript as a kind of stored procedure language, meaning you can use JavaScript and E4X to screen-scrape web pages, then query the results with YQL.

Using this, you can augment the original functionality of YQL to whatever you need. For example, you can scrape HTML with YQL using XPATH, but there was no way to use CSS selectors. Using an open table that invokes James Padolsey's css2xpath JavaScript on the server side, this is now possible.

Run this query in YQL

The data table is pretty easy:

Check the official Yahoo Developer Network blog post on YQL execute for more examples, including authentication examples for flickr and netflix.

Notice the Firefox logo in between the two phones with bright screens? That is injected into the world thanks to Canvas.

How did Paul do this? He told us:

Obviously, I use the <video/> tag.
But what you see is not the video element (display: none;), but a
<canvas/> tag.
All the patterns you see on the top right are regular <img/>,
<video/> and <canvas/> elements. The play/pause button is
a <svg/> element
(position: absolute;) on the top of the main <canvas/> element.

A canvas element provides a method named drawImage which let you
inject the content of a DOM element in the canvas (like a screenshot). It works
with three kinds of elements: <img/>, <canvas/> and
<video/>.

When you click on the <svg/> button, the Javascript code launches the
main video. Then, the main javascript loop is executed each 10
milliseconds.

Here are key things that occur during the main loop:

• first, the content of the video is injected in the main canvas. That's why
  the canvas element looks like a video element;
• second, the position of the 2 brighter areas of the canvas are computed
  (you have access to all pixels values);
• third, the required transformation is computed (rotation, scale,
  translation);
• fourth, the content of the selected pattern is injected in the main canvas
  following the transformation.

A little drawing:

Check out the demo in a bleeding edge Firefox browser, or watch the video:

Crazy cool stuff :)

Paul Hayes is off doing more fun things, this time creating an auto scrolling parallax effect with CSS, specifically using multiple background images on a single element and the -webkit-transition property to provide the auto-scrolling.

All with a bit o' CSS:

It thus seems appropriate that Paul Hayes of London has created an interesting experiment that shows how you can create an analogue clock using just CSS and JavaScript is only used to get the current time.

The real magic is in CSS transitions such as:

Nice work Paul!

(The screenshot doesn't do it justice; go check it out.)

But that's only half the story. They've got a much-better-named service called "Vizeddit" that displays the same data with much richer graphics and animations:

Once again, you really need to go see it. The numbers along the bottom represent stories, and they grow and swap places over time, new ones are inserted, and so forth. You see the votes drop down in real-time, and new comments float in as well.

All brought to you with the Moo.