DanSolo’s HQ

When I talked about some snow related CSS3 experiment, I could not imagine @Natbat was already preparing something like snowflakes, an almost fully CSS3 featured snow FX created for clearleft, specially suited for Chrome and Safari.

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!

Want to show how to use your layout library? Why not mimic a well known layout and show how easy it is? That is what Volodya Kolesnikov has done with his Google Wave layout in 100 lines of code sample.

It is powered by uki (shorted from "ui kit") and Volodya told us more about it:

UKI is a fast and simple JavaScript user interface toolkit for desktop-like web applications. It comes with rich view-component library ranging from Slider to List and SplitPane. Here are some examples:

Simple example:

PLAIN TEXT

JAVASCRIPT:

1.  
2. uki({
3.        view: 'Button', text: 'Click me',
4.        rect: '10 10 100 24' , anchors: 'top left'
5. }).attachTo( document.getElementById('container') );
6.  
7. uki('Button[text^=Click]').click(function() { alert(this.text()); });
8.  

Here is a more complex example:

PLAIN TEXT

JAVASCRIPT:

1.  
2. uki(
3. {   // create a split pane...
4.    view: 'SplitPane', rect: '1000 600', anchors: 'left top right bottom',
5.    handlePosition: 300, leftMin: 200, rightMin: 300,
6.    // ...with button on the left
7.    leftChildViews: { view: 'Button', rect: '10 10 280 24', anchors: 'top left right', text: 'Clear text field' },
8.    // ...and a vertical split pane on the right...
9.    rightChildViews: [
10.       { view: 'SplitPane', rect: '693 600', anchors: 'left top right bottom', vertical: true,
11.           // ...with text field in the top part
12.           topChildViews: { view: 'TextField', rect: '10 10 280 24', anchors: 'top left', value: '0', id: 'field' },
13.           // ...and a slider in the bottom
14.           bottomChildViews: { view: 'Slider', rect: '10 10 673 24', anchors: 'top right left' }
15.       }
16.   ]
17. }).attachTo( window, '1000 600' );
18.  
19. // on slider change update text field
20. uki('SplitPane Slider').bind('change', function() {
21.    uki('TextField').value(this.value())
22. });
23.  
24. // on button click clear the text field
25. uki('Button[text~="Clear"]').bind('click', function() {
26.    uki('#field').value('') // find by id
27. });
28.  

Uki works with IE6+, Opera 9+, FF 2+, Safari 3+, Chrome. And it looks the same on any of them.

Uki is still in its infancy. There may be bugs. No docs available. Certain features like disabled are still missing. Nevertheless it is already capable of build complex layouts in hours.

Several months ago, a post at WRD (CSS Tooltips Pointers With No Images) was sharing a technique which e as

As elements in HTML are square/rectangle shaped, creating a triangle using pure HTML/CSS may not seem to be possible.

However, as browsers draw borders at angles, it is possible to create an illusion which Jon Rohan is sharing in detail.

The technique simply uses a colored border with large pixels for one side of an element with leaving other sides transparent.

As expected, IE6 doesn't support this trick by default but Jon Rohan shows how to "hack" this with few CSS rules.

P.S. You may also want to check CSS Tooltips Pointers With No Images post at WRD which uses a similar technique.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• No related posts.

As web developers, we spend precious time laying out our pages, using every UI concept in the book to conserve space, while trying to maintain a user’s focus on the task at hand. There are many techniques to use Lightbox, Carousel and Tabs to name a few – and recently Scott Robbin has offered up another: jQuery pageSlide.

jQuery pageSlide was inspired by the UI work of Aza Raskin. Aza introduced the idea of sliding content aside to reveal a secondary content pane. This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript.

By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

Requirements: jQuery Framework
Demo: http://srobbin.com/blog/jquery-pageslide/
License: GPL License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

The WebKit Inspector tool has a new tab, the Audits panel which aims to be like Google PageSpeed and YSlow! built right in.

A little crude, but good to see:

Uki is a fast and simple JavaScript user interface toolkit for desktop-like web applications. It comes with a rich view-component library ranging from Slider to List and SplitPane. Google wave layout can be coded in 100 lines using uki code.

Uki doesn’t want to be a Jack-of-all-trades. It only does layout but it does it well. You won’t find any ajax or data storage layer code here. Uki uses progressive rendering and can render 30k+ lists and tables most instantly. Uki works with IE6+, Opera 9+, FF 2+, Safari 3+, Chrome. And it looks exactly the same in all of them.

Requirements: -
Demo: http://ukijs.org/functional/wave.html
License: MIT License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

rsslounge is an open source, full-featured & web-based RSS feed reader application that is built with PHP-MySQL.

It allows you to read your feeds, categorize or filter them, set priorities & more from an Ajax-based slick interface.

Besides the standard feed items, rsslounge supports images & photoblogs.

For periodically fetching content from feeds, it offers 2 options: cron job or Ajax-based requests (that work while the application is running).

The application makes switching feed readers so easy with the OPML export/import functionality.

Also, rsslounge is a guide-like application for jQuery fans as it makes use of this library fully with the Ajax requests, accordions, sliders, modal boxes & more..

P.S. It works perfectly in all major browsers except IE.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• TestSwarm: Continious & Distributed JS Testing
• PHP Shoutbox Script: wTag
• Open Source Tool To Create Web-Based Back-Office Applications: nuBuilder
• Display MySQL Data In Google Maps Using DrasticMap
• Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP

CoolTips is an object-oriented, unobtrusive & lightweight class based on Prototype JS + script.aculo.us frameworks for creating good looking tooltips.

It doesn't need any inline JavaScript coding. Using the title attribute of elements is enough and CoolTips will convert them.

The tooltips can be customized using a bunch of parameters or by CSS:

Besides the colors of background, borders & text, it is possible to set the opacity, appear/hide durations or enabling/disabling mouse follow effect.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Zoom Script With A Smart Interface: TJPzoom
• YUI Slideshow: Customizable And Animated Slideshows
• Wrap Content Around Images: jQSlickWrap
• What You See Is What You Ajax: WaveMaker
• wForms: Easy JavaScript Form Controls

Steve Hanov has produced a Canvas-based drawing tool with a hand-drawn look. Lines can be drawn with a "sloppiness" option, with possible values "Draftsman", "Artist", "Cartoonist", "Child", and - perfect for this time of year - "Drunk" :). The FG Virgil font, applied to text elements, adds to the cartoon vibe.

The techniques are used in a C library for WebSequenceDiagrams, which Steve explained in an older blog post, but here he's done it with Javascript and Canvas.

Jeremy Ashkenas is experimenting with a new language that translates down to JavaScript. The language is CoffeeScript and I kinda like the syntax.

Jeremy told us:

I've been working on a little language with a Ruby/Potion-esque syntax that compiles into JavaScript. It tries to enforce "the good parts", convert statements into expressions automatically, and adds some extra goodies like array comprehensions and conditional assignment.

Think of it as JavaScript's less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it's just another way of saying it.

The code looks like this:

I particularly find interesting the JSON style elements (assigment, etc) and how well the code reads without function() all over the damn place. There are nice examples of easy reading in general... for example: launch() if ignition is on.

Nice work Jeremy!