Tero Piirainen has created a new package of jQuery Tools.
This library contains six of the most useful JavaScript tools available for today’s website. The beauty of this library is that all of these tools can be used together, extended, configured and styled. In the end, you can have hundreds of different widgets and new personal ways of using the library.
This library is open source and dual licensed under MIT and GPL 2+ licenses.
Normally when you see a title like jQuery vs. MooTools you get ready for the flame bait. You would expect it even more so if you found out that someone from one of the frameworks wrote the post!
Well, Aaron Newton did just that, and I think he did a very good job at trying to keep as unbiased as possible. He can never be perfect since he has a certain viewpoint, and in fact in some ways when you come from that view you can easily under-share your points.
This isn’t a rushed piece. Aaron has been thinking about these things for quite some time, and has really pondered it.
Media Players seem to be a hot topic right now. After the upgrades to Scott Schiller’s SoundManager, Paul Bakaus of the jQuery UI team now puts a firm stake into the ground with the uberplayer.
The uberplayer takes a leaf out of the book of the UI of standalone media players. Instead of cluttering the interface with all kind of controls it only shows what is needed on demand. The different menus slide in and out as needed, there is a coverflow menu with video previews and very useful keyboard shortcuts.
Check it out - I love the amount of detail that went into it and how smooth the overall experience is.
A jQuery plug-in to provide support for the CSS Template Layout Module. For those of you unfamiliar with this specification, it provides a relatively easy way to make a table-like layout using CSS. Until recently it was known as the “CSS Advanced Layout Module”.
It's a complete re-write of the old plug-in and works on Firefox, IE, and Safari. Here's the feature list:
* No dependencies
* Optional use of easing plugin (still some work needed)
* Close and open content one after the other
* Close and open at the same time
* Choose trigger (mouseover, click ...)
* Easily control through external calls
* Open content on load
* Open content through hash tags in the url (#tab1, #tab2...)
* Position of handle (left, right)
* Mixed handle positions - 2 left , 2 right ...
* Cycle through content by interval
* Events when animations starts and ends
* Hide content until all has been assembled
There are a few CSS features that Microsoft pioneered and has had available to developers in Internet Explorer for a long time now. One of those features is the text-overflow property, which is now in CSS3 and has implementations in Safari, and Opera. Firefox still does not support this feature, but I have heard that it will in Firefox 3.1.
Here is a rundown of what the property does. When text overflows an element’s box, the text-overflow property helps leave a visual hint to the user that there is more text. When a value of ellipsis is used, three dots will be shown before the text is clipped by overflow: hidden.
Lorem ipsum dolor sit amet, c…
I wanted to be able to use this feature in all browsers, so I wrote a small jQuery plugin in order to support Firefox. To use, just call ellipsis() on a jQuery object. For example:
Riccardo Degni has created GX, his latest animation framework. He actually created moo.rd in the past, and this time he is playing on top of jQuery:
I’ve developed GX keeping in mind mainly two Design Patterns:
the “Write Less, Do More” Pattern picked from the jQuery Library. With GX you’ll always write as less code as possible to get the best results.
the DRY (Don’t Repeat Yourself) Pattern. If a GX’s functionality is needed more than once, it will be internally reused with no duplicate.
GX respects the Strict Standards and doesn’t generate CSS/Javscript warnings. Moreover it prevents possible Memory Leaks because it will always use the same instance for a determinate element (say goodbye to “flickering”) to avoid either memory leaks and flickering issues. This technique allows you to always keep track of your animation’s state.
Although GX is completely cross-browser, it doesn’t contain any Browser sniffing: it’s 100% pure Javascript engine.
Paul Chiu, author of Passbook, has written up his thoughts on reuse for widgets in large Ajax applications.
The solution?
For Passbook I decided to solve this problem once and for all. The solution I believe is in objectifying page elements as a block so that a panel with an edit and delete button can be duplicated quickly without having the Javascript code keep track of which panel on the page was clicked and trying to modify that page element. An object oriented approach would mean the page object could edit or delete it self because it knows what it is and what it represents.
While there are some existing solutions that use custom methods to streamline the object oriented process and work around Javascript's event target scoping of "this". I believe a better method existed that did not require so much prototype modification and was more self contained and flexible. My solution is to use jQuery's plugin model to control on page elements, or widgets.
To see the basic pattern it is easiest to first checkout the functional demo. The demo contains two main elements: a widgets container where an add action exists, and a widget controller that offers the user the ability to submit it or remove it. The demo shows the widget manipulating it self, its parent, as well as using a basic ajax callback within it self.
Paul then walks through an example, that ends up with the following code.
Howard Rauscher has wrapped up a little script to test the users browser for a particular font support. fontAvailable is a jQuery plugin, but can easily be tweaked to be independent:
// get the width of element after applying a fake font
width = element
.css('font-family', '__FAKEFONT__')
.width();
element.css('font-family', fontName);
return(width !== element.width());
}
})(jQuery);
Howard told us about the library:
The company I work for has been using Tahoma as the default font for about two years now. A couple of months ago I wanted to figure out approximately how many users actually support this font. I decided to convert this code into a jQuery plugin. It is a pretty simple solution and does not require any swf files like other methods I found. I attach an invisible span to the bottom of a document and apply a fake font to the element. I get the width of the element and then compare it to the width of the element after I apply the given font name. If the widths are different, then the font is available.
Allan Jardine has updated his popular DataTables rich data grid control. Allan told us what his aims were for this 1.4.1 release:
Being fairly happy with the options that DataTables presents to the end user, I've focused this release on providing tools for the developer. A plug-in API, non-destructive DOM manipulation (the biggest weak point of the old versions) and documentation are the major new features.
If you take a look at the new rich API you will see that can manipulate the data in the table, build filters, fetch remote data, and more.
The jQuery UI team has announced today, the release of v1.7 of their effects and UI controls framework. The development took awhile going through some bumps in the road and even a major overhaul of how the library was structured. In addition, the team became much more organized adding new team members which greatly enhanced the development process as well as opening up greater communication with the community via the new development wiki.
There’s a ton of new stuff in 1.7. We’ve fixed hundreds of bugs since 1.5.3 and are introducing many new features, a better core architecture, and major theming improvements.
The introduction of the new ThemeRoller-ready CSS framework is especially important as it not only allows for easy theming of included jQuery UI but also allows plugin developers to create their own extensions that can take advantage of ThemeRoller's visual theming capabilities. Scott Jehl, lead architect of the CSS framework had this to say:
jQuery UI includes a robust CSS Framework (http://docs.jquery.com/UI/Theming/API) designed specifically for building custom jQuery widgets and user interface components. The framework includes classes and helpers that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. Although the framework is used by all of jQuery UI's widgets, it is designed to be used in standalone plugin development as well - it'll even work with code that isn't running jQuery UI (or even any JavaScript at all!). By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.
As a bonus for framework users, we've also created a bookmarklet (http://jqueryui.com/themeroller/developertool/) that allows you to pull ThemeRoller into any page on the web! Just drag it to your Firefox toolbar and you can style away on any page using the jQuery UI CSS Framework. The tool also allows you to download a theme based on your design.
jQuery UI team member Richard Worth commented on this new release:
The jQuery UI Team and the unequaled community that supports it has come together and produced something really awesome in jQuery UI 1.7. This release represents not only where we've come today, but gives us a clear vision for where this library is headed. We want to make Rich Internet Applications as easy as jQuery has made Ajax, and that's really starting to happen.
This new release is immediately available for download and the team has provided a Getting Started with jQuery UI page to help get new users up to speed quickly.
Disclosure: I am a member of the jQuery project team
Run this method after you've run console.profile(); and console.profileEnd(); to get a full dump of the profiling information. For example, given the following profile run:
You'll get the following JavaScript object returned from fireunit.getProfile():
The second method added to FireUnit provides an easy way to execute and profile a single function. Roughly, this method starts the profiler, executes the function, stops the profiler, and then returns the results from getProfile(). Additionally, it watches for any exceptions that might be thrown and makes sure that the profiler is cleanly turned off anyway (a frequent frustration of mine).
John then setup a test page and found out some interesting bottlenecks in jQuery, including the current implementation of remove. He has already submitted a patch that cleans it up.
This is great stuff. We used Firebug's profiling for Bespin but found it a little hard to extrapolate on the data, and we ended up using Shark on the Mac to get more detail on the application as a whole (not just JavaScript).
, jQuery
