Mark Gharibian's blog

OpenAjax Hub 1.0 Approved

Tagged:  

Jon Ferraiolo announced today that the OpenAjax Hub 1.0 Specification was approved by the Interoperability Working Group, the members, and the OpenAjax Alliance Steering Committee. This represents the first approved Specification for OpenAjax Alliance per the terms of the OpenAjax Alliance Members Agreement.

OpenAjax Hub provides standard JavaScript that, when included with an Ajax-powered Web application, promotes the ability for multiple Ajax toolkits to work together on the same page. The central feature of the OpenAjax Hub is its publish/subscribe event manager (the “pub/sub manager”), which enables loose assembly and integration of Ajax components. With the pub/sub manager, one Ajax component can publish (i.e., broadcast) an event to which other Ajax components can subscribe, thereby allowing these components to communicate with each other through the Hub, which acts as an intermediary message bus. The umbrella use case for the OpenAjax Hub is the set of scenarios in which an Ajax developer needs to deploy a single application that uses multiple Ajax libraries simultaneously.

> Read the final approved specification

The next phase is OpenAjax Hub 1.1, which will add secure mashup support and client-server communications. We expect an initial draft specifications and open source to appear in the next few weeks.

If you're unfamilar with The OpenAjax Alliance:

The OpenAjax Alliance is an organization of 80+ vendors, open source initiatives, and Web developers dedicated to the successful adoption of open and interoperable Ajax-based Web technologies. The prime objective is to accelerate customer success with Ajax by promoting the ability to mix and match solutions from Ajax technology providers and by helping to drive the Ajax ecosystem.

Last year, 19 Ajax toolkits participated in the Second OpenAjax InteropFest for the OpenAjax Hub 1.0 spec and passed the test. The toolkits in alphabetical order are:

> Read the full announcement on the OpenAjax Alliance Blog

swfIR - SWF Image Replacement [with style]

The swfIR team over at swfIR.com has put together a handy widget for styling images in your site. The library utilitizes JavaScript and Flash to produce a variety of image effects like shadows, rounded corners (with or without borders), rotation, and borders.

From the swfIR homepage:

swfIR (swf Image Replacement) is here to solve some of the design limitations of the standard HTML image and its widely-accepted associated CSS values, while still supporting standards-based design concepts. Using the dark arts of JavaScript and Flash, swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. Through progressive enhancement, it looks through your page and can easily add some new flavor to standard image styling.

When you start to use swfIR, you’ll need the ability to style it, the same way that you can do with regular images. To get around browser inconsistencies, swfIR adds a with a class of swfir around any image you’re replacing.

The library and its required files are about 11.89 KB.

<script type="text/javascript" src="swfir.js"></script>

Once the library is included you can take advantage of its features:
var borders = new swfir();
borders.specify("border-radius", "15");
borders.swap("#content img");

Here are the properties you have available:

border-radius
border-width
border-color
shadow-offset
shadow-angle
shadow-alpha
shadow-blur
shadow-blur-x
shadow-blur-y
shadow-strength
shadow-color
shadow-quality
shadow-inner
shadow-knockout
shadow-hide
rotate
overflow
link
elasticity

There are some issues with swfIR that the creators make us aware of, and they are:

  • Resizing/zooming in Opera crashes the browser
  • Flash of unstyled content: images load first before JavaScript replaces them
  • alt text is not preserved upon replacement
  • HTML right-click options are disabled
  • Incompatible with other JS libraries like Prototype or MooTools
  • Doesn’t work with hot-linked images because of security restrictions in Flash

Visit the swfIR homepage to view some demos and to download the source

jQuery easyThumb - A PHP / jQuery Thumbnail Generator with Lightbox

The first version of jQuery easyThumb was released today. easyThumb is a plugin that uses both jQuery and PHP to generate thumbnails (to use in galleries etc.) on-the-fly. All you need to do is to make a unsorted list of images. No links or thumbnails are required, the library takes care of this - thumbnails are created automatically and are linked to the full size image. This integrates well with the Lightbox library as is shown in the online demo.

From the author:

jQuery easyThumb is a plugin for jQuery. It turns a list of full-scale images to a list of thumbnails on-the-fly. It uses a php-script to return a thumbnail for each image, and jQuery to generate the list.

Online Demo with Lightbox

Check out the original post to read more about easyThumb and to download the source code.

YUI Based Lightbox [Final] Released

Cuong Tham over at Code Central created a YUI based Lightbox library and has just released the final version. For those of you unfamiliar with Lightbox, check this out.

   

What's New in this release?

The most significant change in this version of the lightbox is that image thumbnails are no longer required for creating lightbox instance. That implies that you can create an image gallery without the presence of image thumbnails. The more exciting aspect of this new feature is that you can virtually grab any image from the internet and include it in your gallery.

Below is the detailed list:

* Ability to view full size and auto-fit version of the image
* Settings for changing background mask opacity and color
* keyboard shortcuts
* Tooltip panel for displaying extra information
* Navigation control toolbar
* Image transition effect
* External stylesheet for styling

Bug Fixes

* Fixed image goes outside of viewport bug
* Removed extra scrollbar when the image can be fit into the viewport

The lightbox has been tested in Firefox 2.0.0.6, IE 7, Opera 9.21.

Check out a demo with thumbnails and without thumbnails [I recommend the black or the white theme as they look best].

One thing to note is that this is a hefty Lightbox implementation, weighing it at around 63KB for all required JavaScript files whereas the original Lightbox library only required about 13KB of JavaScript. That's a high price to pay for a cool gallery. But nevertheless, thanks to Code Central for putting this out, it's nice to see the differences in their implementation. If nothing else, you can download their source and play with it in your sandbox.

Click here to read the full article and download the source code.

Rapping about Ajax, JavaScript, Flex, YouTube, Apple, Social Networking and others...

Tagged:  

Just when you thought you've heard everything, here's a reason to go buy that expensive car stereo system you've always wanted, you can blast this as you cruise.

I'm so sick, ajax, JavaScript
Flex power when I point my pen

This is a hip hop / rap song about all things IT, web 2.0, computer software, you name it... Must be one-of-a-kind, although this song may start a revolution and change the face of hip hop.

Voices That Matter: GWT - Conversation with Josh Bloch

Video of the "Conversation with Josh Bloch" from Pearson Education's Voices That Matter: Google Web Toolkit 2007 conference.

Josh Bloch is the Chief Java Architect at Google. Previously he was a Distinguished Engineer at Sun Microsystems and a Senior Systems Designer at Transarc. He led the design and implementation of numerous Java platform features, including the JDK 5.0 language enhancements and the Java Collections Framework. He holds a Ph.D. in Computer Science from Carnegie-Mellon University and a B.S. in Computer Science from Columbia University.

Check out more session videos and presentation slides from the conference.

script.aculo.us v1.8.1 released

Tagged:  

New today from script.aculo.us:

This is a bugfix release that bumps script.aculo.us to version 1.8.1. Also included in this release is Prototype 1.6.0.1 beta.

Mainly, this release contains some important bug fixes and optimizations in Prototype, fixes cursor keys in autocompleting text fields for IE and Safari plus fixes an issue with Effect.Morph on IE.

In case you haven't heard of script.aculo.us, it's a JavaScript library built on the Prototype JavaScript Framework, providing dynamic visual effects and user interface elements via the Document Object Model. script.aculo.us includes an animation framework, drag and drop, Ajax controls, DOM utilities, and unit testing.

You can download this latest release at http://script.aculo.us/downloads

Ajax Pagination Script

Tagged:  

The folks over at Dynamic Drive have put together a nice ajax based pagination script that lets you draw content from multiple pages and display them on demand, using Ajax. Pagination links are automatically created, with each page downloaded only when requested (speeding up delivery and saving on bandwidth. An overview of this script now:

  • The pagination interface for each Ajax Pagination instance is "free floating", meaning it can be positioned
    anywhere on the page and repeated multiple times as well.
  • Each page within the paginated content is fetched individually and only
    when requested for sake of efficiency.
  • The settings for each Ajax Pagination instance is stored neatly in a
    variable object for ease of portability. This variable can be manually
    defined or easily dynamically written out based on information returned from
    the sever, such as via PHP/ MySQL.
  • The entire paginated content can be refreshed with new data on demand,
    with the pagination links updated automatically as well.

This script is ideal for showing multi-page content such as
"user comments" without reloading the rest of the page each time a
comment page is requested.

Click here to visit the site and to download the script.

Dynamic Drive also has a Virtual Pagination Script that lets you "transform long content on your page into a series of virtual pages, browseable via pagination links. The broken up content pieces are separated simply via arbitrary DIVs (or another block level element of your choice) with a shared class name." Read the full post on the Virtual Pagination Script

Let us know your experience with the Ajax Pagination Script or with any other pagination script you've worked with.

JavaScript Motion Tween - A JavaScript Animation Engine

Tagged:  

Philippe Maegerman has created a JavaScript animation engine for motion tweening similar to what's available in Flash through Actionscript. The library includes the following classes:

  • Tween class
    Tween.js is the base animation class
  • ColorTween class
    ColorTween.js extends the Tween.js class, its purpose is to manage transitions between two colors.
  • OpacityTween class
    OpacityTween.js extends the Tween.js class, its purpose is to manage opacity transitions on visual objects.
  • TextTween class
    TextTween.js extends the Tween.js class, its purpose is to manage text effects.
  • Sequence class
    The sequence.js class allows you to chain Tweens, it means that the Tweens that have been added via the 'addChild()' method will be executed in the sequence they have been added.

His blog includes documentation as well as working examples and sample code displaying the functionality of the library, including the Webber 2.0 Dock Menu Tutorial.

Full source code is also made available for download on the site.

If you're looking for something a little more heavy duty that comes with features other than just animation, then you probably want to check out one of the major JavaScript Frameworks that include animation support:

Please share your comments and experiences with JavaScript animation, these frameworks, or another framework with animation support not listed here.

John Resig Announces Plans for Second JavaScript Book

Tagged:  

On his blog yesterday, John Resig - creator of jQuery - announced plans to begin work on a new JavaScript book. His last book, titled Pro JavaScript Techniques, was a success and is available online at Amazon.

The content of the book has not yet been solidified, but John has posted a question to the readers of his blog requesting some assistance. He's asking: "What are the greatest untold secrets of JavaScript programming that you wish were thoroughly debunked and explained?"

John already has some of his own answers to this question, and they are:

  • What is (function(){ })() and why is it so fundamentally important to modern JavaScript development?
  • What does with(){...} do and why is it so useful?
  • How can arguments.callee change how I work with JavaScript code?
  • How exactly do timers work and how can I best use them?
  • How do I identify and tackle memory leaks in web applications?
  • How do I write a cross browser way of...
    • Getting/setting attributes.
    • Injecting HTML strings.
    • Getting/setting computed css values.
    • Managing DOM events.
    • Writing a CSS selector engine.
    • Doing smooth animations.
  • How can I use verification tools (like JSLint) to my advantage - and write my own?
  • What's the best way to transmit JavaScript files?
  • How do I write my own JavaScript compressor (like Packer)?

If you have any suggestions for questions to be answered in John's new book or would like to give him a word of encouragement, you can leave him some feedback on his related blog post.

Syndicate content