Friday, July 3rd, 2009
Alex MacCaw has released Machsend, a Yahoo! Browser Plus plugin that enables P2P file transfers from inside the browser.
It showcases what can be done with a BP plugin, leaving you wish cross browser functionality.
I guess it is kinda fun to hack the browser :)
Thursday, July 2nd, 2009
Category: Component
, GWT, Library
John Gunther has released GChart 2.5, a client-side library that adds a new canvas-rendering option for sharper, better looking, alpha-transparent, pie, line, and area charts.
John told us:
Canvas-rendering corrects GChart’s most serious visual quality limitations (including the most often mentioned problem by its users: the banded-filled pie slice).
Coupled with its existing feature set and ease of GWT integration, the canvas-rendering option makes GChart an excellent choice for those who want to add basic charts to a GWT application without a lot of fuss.
To access these features, you’ll need to plug an external canvas library into GChart (GWTCanvas in the gwt-incubator is reccommended) as described in detail in the setCanvasFactory method.
With the external canvas in place, the next step is to tell GChart you want a curve to be “continuously filled” by invoking setFillSpacing(0).
With each such continuously filled curve, GChart automatically exploits your external canvas library to improved the quality and speed of that curve’s rendering. Specifically, banded-filled pie slices become solid filled, dotted connecting lines become continuously connected, and (the biggest stretch) bar charts become area charts. See the setFillSpacing method’s javadocs for a detailed description of how each existing symbol type implements this new “continuously-filled”, canvas-powered, rendering option.
Note that GChart’s previous HTML-only rendering is still available, and is the default rendering mode if you don’t bother to plug in an external canvas.
Check out the demo
Tuesday, June 23rd, 2009
Category: Component, Prototype
ProtoFish is an advanced hover menu based on Prototype, written by Peter Slagter. You can easily add a delay to your menu (on mouseout) and choose your own hover class. All ProtoFish menu's will respond to users who use the TAB-key to navigate through your page.
It is trivial to use. Once you load up the script (requires Prototype 1.6+) you can:
where the four parameters are:
Friday, April 24th, 2009
Category: Atlas, Cappuccino, Component, Design, Video
Francisco Tolmasky presented on the latest goodies from 280North at JSConf. In the past we've given the 280North guys a bad time for talking about 280Slides and their other stuff using... Keynote. I don't know if he used Keynote at JSConf, but Francisco published the slides using the 280Slides web-based presentation viewer, which is also embeddable:
(We like the embedded viewer, but did they have to make it swallow common keystrokes? On Firefox OS X, once we embed this IFrame, APPLE-W makes the slide turn white. 10 points for a cool feature, -100 points for hijacking the browser in this context.)
The slides make for a good review of Cappuccino but just include brief mentions of the other interesting bits, such as the new Aristo theme designed by SOFA and the amazing Atlas.
Fortunately, there is a recent video of a talk by Francisco on March 30 to the CocoaHeads user group:
Enjoy!
Friday, April 10th, 2009
Over at devthought, Guillermo Ranch has rewritten his clone of Facebook's "TextboxList" component:
It’s been some time since TextboxList got some attention. It is undoubtedly one of the my most popular JavaScript projects, along with the famous Fancy Menu (MorphList) and its slideshow sibling, BarackSlideshow.
TextboxList has been rewritten from scratch, and it’s more solid than ever. The first time around, elegance was not one of the goals. I focused on releasing the first open source script that reproduced the Facebook’s tokenizer.
Changes include:
* Compatible with MooTools 1.2.x
* New options, such as addOnEnter, which adds boxes upon pressing enter (useful for tags or categories widgets).
* More events, which gives the developer more power to extend it.
* Each element is now identified by an id, a plain value and a HTML value.
* Use of control, alt, meta keys no longer interfere with the elements keyboard navigation.
* Bugs with text selection fixed.
* Improved API, even more extensible.
* Plugins support
It also includes an autocomplete plug-in, which has its own feature list:
* Flexible. It does not depend on a specific data source (XHR, Json). Instead, the developer supplies the data which can come from anywhere.
* Binary search for maximum performance
* Simpler CSS with comments for non-experienced developers.
Guillermo tells us that a Dojo version is in the works, and Ajaxian reader Thomas Aylott adds "This thing is seriously awesome." Check it out!
Thursday, February 19th, 2009
Category: Component, JavaScript, Prototype, Rails
The team at Nextpoint has released the open source project Growl4Rails, a component providing Growl-like functionality in Rails web applications.
Nextpoint's e-discovery product deals with many very large documents. Indexing, imaging and PDF-ing of those documents can take a bit of time, which requires us to execute these tasks asynchronously. Background processing demands a solid way of notifying users when that process has completed. We're a Mac shop, and one of the first things most Mac users install is Growl. We thought that Growl's interface could really be successful on the web and provide a great way of notifying our users when this background processing has completed.
Read more about how Nextpoint is using Growl4Rails.
Growl4Rails is available as a Rails plugin on Github. It requires Prototype 1.6 and Scriptaculous 1.7, and it has been tested on FF, IE 6-8, Safari, Opera and Chrome.
Friday, February 6th, 2009
So, you want to create a button that you have full control over, and you want it to work well cross browser. Shouldn't be hard right? Wrong.
Doug Bowmanepines about the job of doing just this, which is something he kicked off at Google, and we see the result in apps such as Sites and recently Gmail:
Doug does a really nice job at explaining the history of this work, and then detailing the issues at hand and various iterations of the work where he had some a-ha moments such as:
My 3.0 attempt relied on treating the buttons and everything inside them as inline elements. The top/bottom borders still needed to be rendered separately from the left/right borders to get 1px-notched corners. The left/right borders were rendered on the outer element. The top/bottom borders were rendered on the inner element. Because borders don’t compound and add to the width or height of an inline element, we get the 1px notches in each corner. I ran into a lot of frustration with this inline approach until I remembered display: inline-block. That seemed to solve everything at once.
And how he got rid of the gradient image and instead uses CSS:
A really nice read. It works pretty well for me. The only real issue that I saw was that the drop down in Gmail for "More Actions" can be greyed out when you don't have something selected. The type is subtle so at first I wondered why hover/click weren't doing anything.
Oh, hey, would be nice to open source this kind of stuff good Google UX guys ;)
Tuesday, January 20th, 2009
I thought that sexy curls were not related to technology, but Elliott Kember packaged a nice and easy page curl plugin using jQuery.
All you need to do is:
Thursday, January 8th, 2009
Category: Component, Examples, jQuery
Scott Robbin (Songza co-founder) has created a very cool jQuery plugin for pageSlide, an interaction based off of Aza's prototypes for Firefox Mobile and Ubiquity mouse gestures. The plugin wraps body content into a container and shifts it off of the page whenever a click event is fired, revealing a secondary interaction 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.
HTML:
For some reason I enjoy thinking of my desktop as a virtual area that I can shift around.... so this can suite me well.
Wednesday, January 7th, 2009
Category: Component
Sébastein Gruhier has released a new address component that integrated a map with the address that you are filling. The UX is interesting as when you first get typing it doesn't really narrow down the address so you are seeing maps of bizarre places.
As well as a basic version, you can also tie in auto complete.
Features include:
Thursday, December 11th, 2008
Category: Component
Joseph Woods of PHPCow sent us a note about SmartMarkUP, a "universal markup editor":
SmartMarkUP is a lightweight and powerful JavaScript library that allows you to turn any textarea into a fancy markup editor. HTML, CSS, XML, Wiki syntax, BBCode or any other desired markup language can be implemented and/or adjusted to your preferences and business needs. SmartMarkUP doesn't depend on any other JavaScript library and can be integrated with any already existing JavaScript library or code.
Although SmartMarkUP is stand-alone, they've created a jQuery plug-in wrapper for it. The documentation is quite extensive and includes detailed notes on how to use the editor to edit your own markup.
While the editor has buttons and such to make it easier to manipulate the markup (a la Wordpress' own code editor) the editor itself doesn't have any kind of syntax highlighting or auto-indent / auto-complete features.
Still, it's a pretty neat little package:
* SmartMarkUP is completely free and open source
* SmartMarkUP is a small script, compressed version weights only 10kb
* SmartMarkUP is completely skin-able you can fit it's design with your applications easily
* SmartMarkUP can be used from any other script
* SmartMarkUP is self contained and doesn't depend on any third party scripts. You can use it with Prototype, jQuery, Mootools or any other JavaScript libraries.
* SmartMarkUP doesn't requires changing of already existing markup or code infrastructure.
* SmartMarkUP degrades gracefully, that means your application will continue working in browsers with disabled JavaScript.
What do you think?
Thursday, November 13th, 2008
Several months ago, we covered jsTree, a promising new tree component built on top of jQuery. It's since gained its own website and is nearing a 1.0 release. There have been a few changes since we last wrote about it:
* A lot of focus on the JSON data source
* Native async support (meaning correct data loading, event handling, etc).
* In the last public version there is a simple instance manager.
* The instance manager enabled full multitree support - node dragging between trees, with language cleanup (if languages differ), and also and most important - the receiving tree's dragrules are respected.
* There have been a lot of bugfixes, optimizations, enhancements.
It's coming along nicely since the initial story; give it another look and pass on bug reports and feedback to Ivan at his blog prior to the 1.0 release.
Thursday, September 25th, 2008
Category: Browsers, Component, Firefox, HTML, Mozilla
There are a substantial number of iPhone apps that tie into the builtin native components such as the camera.
Brad Lassey has been hacking on Fennec (the Mozilla mobile browser) as well as Firefox itself to integrate with camera phones and Webcams alike:
I wrapped a video tag, image and a few buttons in xbl and bound it to <input type=”camera” />. When a user hits a website using this tag, he or she currently will see a live video preview and a “take photo” button. When the user clicks the button, the photo is grabbed from the camera and shown to the user in the image element. The image element and video element are in a deck element so only one is shown at a time. After the photo is taken, there is a button that reads “Take another photo,” in case the user doesn’t like the one they just took. Once the user is satisfied, this element works like any other form element and the file can be uploaded to a web service.
After talking to a few people this should actually be bound to <input type=”file” accept=”image/png”/>. Also, it needs some UI design both for what it looks like in content and for a configuration dialog. Finally, we’ll need to think about security and make sure no one can snap a photo of you when you’re not looking your best.
I kinda like having an input type="camera" myself, to be more explicit. It would be cool if you can get access to the image as data (e.g. the value is data:......). I love it.
Monday, August 4th, 2008
Category: Component, JavaScript
The NoGray Time Picker is a component that lets you add a time picker that is visual. The clock shows up, and you move the hands to wherever you need to be. All via a simple:
Or a more complex version that tracks the changes:
After all that though, is it easier than asking to put in the time?
Friday, July 11th, 2008
Category: Component, JavaScript, Library, Yahoo!
Kent Johnson has released YPulse a simple open source wrapper for the YUI Animation library that makes creating highlight fades and pulsing button glows a bit easier.
You pulse away with something like:
Friday, June 27th, 2008
Category: Component, JavaScript
Dan Vanderkam has announced a new component dragtable:
Over the past several years, Stuart Langridge’s sorttable Javascript library has found widespread use. It’s easy to see why. Just add class=sortable to a table tag and its column headers automatically support click to sort. Pretty slick.
But sometimes sorting just isn’t enough. What if you want to focus on just one or two of the columns in a table? In a client-side application you could drag the columns you care about next to each other. Why not in a web application?
Enter dragtable. Like sorttable, it teaches HTML tables a new trick through a simple class attribute.
Once you have the JavaScript in place, you can simply add a class="draggable", and you can even work with both via class="draggable sortable"
Take a peak at a test bed, and the open source project.
Keep up to date on Ajax content via Twitter or FriendFeed
In Episode 25, we chat about IE 8, standards, Acid3, server side JavaScript, and more.
Who are the ajaxians? Find out.
Please contact us at . We would love to hear about any news that we could put up here.
We have individual blogs too:
