DanSolo’s HQ

FireQuery is a Firefox add-on that extends Firebug with new jQuery-focused features.

It adds extra functions to the HTML tab like showing embedded data elements & event handlers inserted using jQuery.

All the jQuery expressions are presented in Firebug Console + DOM inspector and elements in jQuery collections are highlighted on hover.

Also, the jQueryify bookmarklet is integrated into FireQuery which makes injecting jQuery into any website possible.

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)
Dreamhost $50 Discount Code: WRD
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Website Reachable Alert Firefox Plugin: Mr Uptime
• Wappalyzer: Find Out Apps. Used On A Website
• Test Your Website Design In Different Browsers In Minutes
• Sketching And Prototyping Tool: Pencil Project
• Photoshop Browser Templates

After the success of Vista-like Ajax Calendar, dev.base86 has recently released Calender Eightysix. It is completely built from scratch with pure javascript, making use of some of the superb features the latest MooTools javascript framework has to offer.

Calender Eightysix is an unobtrusive developer friendly javascript calendar and datepicker offering a better user experience for date related functionalities. Calendar Eightysix has a variety of options to style and format the calendar to your needs. This is done by providing options while instantiating the class.

Requirements: Mootools Framework
Demo: http://dev.base86.com/scripts/datepicker_calendar_eightysix.html
License: Creative Commons 3.0 License

Sponsors

Pixmac: Stock Photos, Royalty Free Pictures and Images

The Fluid Grid System is a CSS framework which combines the principals of the typographic & baseline grid into a resolution-independent one.

It has a comprehensive logic. The classes are mentioned like: six_column section or three column which makes it easier to use & understand.

With the simple layout & use of CSS, the Fluid Grid System degrades well in both older web browsers, scales with text nicely & presents content to screen readers in a logical manner as well.

The framework is also great for rapid prototyping besides final production layouts as designers can quickly design complex layouts.

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)
Dreamhost $50 Discount Code: WRD
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• No related posts.

The following is a guest post. If you have something to say to the Ajaxian community, please feel free to either link us to your work, or give us a guest posting that goes into detail! Contact us.

My name is Jerod Venema, and I'm excited to write to you about our new Comet server for the Microsoft stack - WebSync. It is written in 100% managed C#, and uses IIS to reach incredibly high user concurrency. Despite being written in C#, we've made it easy to integrate other languages as well by pre-building client libraries and allowing generic HTTP requests to send messages.

There are many challenges in getting a Comet server to operate efficiently in any language, and the .NET environment delivers its own set of unique challenges. One of the biggest challenges we faced was how to make IIS "play nice" when scaling to tens of thousands of concurrent HTTP connections and message transactions. A great deal of time was spent minimizing the memory footprint (even to the point of lazy object construction), optimizing libraries, and digging through pages of profiler results. Multi-threading reared its ugly (but powerful) head on more than one occasion as we sought to take maximum advantage of multiple CPU cores while keeping locking and concurrency issues to a minimum. We even ended up writing a new lock-free data structure similar to a linked queue that allows us to perform multiple-writer add/remove operations - very helpful when dealing with large lists of clients and messages. Once all was said and done, we tested on a $500 Acer desktop and saw over 30,000 concurrent users and 25,000 messages per second. (We were pretty pumped when we saw some of those numbers coming through!)

Once we were satisfied with the server's performance, we set our sights on a JavaScript client. We had originally been using the Dojo Toolkit, but the overhead was more than what we wanted (it rang in at about 90k after compression, but before gzipping), so we wrote our own library that, when compressed and gzipped, comes across the wire at about 8k total (just over 15k before gzipping). We also ran into a slew of cross-browser issues (of course), in particular when dealing with long-lived HTTP connections. A bit of effort, though, and we can now claim the client to be fully compatible with over a dozen browsers, from IE5.5 all the way to the iPhone and Android browsers. Being fans of open-source technology (even in a Microsoft world), we decided to use the Bayeux transport protocol rather than develop our own, so any Bayeux-compliant client can link in to the server.

We also spent some time on making it easy to integrate into non-browser applications. One of the really neat features is the ability to publish data via a simple GET/POST request, so it can integrate into any application that can make a web request, regardless of the language. If you're writing in PHP or .NET, we've made life even easier by writing publishers that wrap up the creation and invocation of the web request into single method calls.

Oh, and we've got a hosted version too (WebSync On-Demand), so people with smaller sites who don't want the cost of hosting their own Comet server can still get all the benefits of a full Comet solution. For the On-Demand solution we've also implemented request proxing, which allows developers to direct the low-impact publish and subscribe requests to their server first, so they can pre-process any incoming messages (to add authentication, save messages to a database, etc). And again, for PHP or .NET users, it's a one-liner to implement.

Anyway, it's a pretty neat product, easy to get started with, and as I said, we're pretty excited and proud of it, so check it out including demos or tutorials and let us know what you think!

Mu is a JavaScript library for enabling Facebook Connect on any website with ease.

It makes accessing the following possible:

• Identity: the user's name, photo and more
• Social Graph: the user's friends and connections
• Distribution: the Stream, and the ability to communicate
• Integration: publishers, canvas pages, profile boxes & tabs

Mu is lightweight can be used with other libraries with no conflicts.

There is also a console provided for experimenting the Mu APIs.

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)
Dreamhost $50 Discount Code: WRD
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Tooltips Over Images With Tipmage
• Facebook-Like Inputs With jQuery Or MooTools
• Zoom Script With A Smart Interface: TJPzoom
• YUI Slideshow: Customizable And Animated Slideshows
• What You See Is What You Ajax: WaveMaker

Nettus has published a tutorial: Learn how to Create a Retro Animated Flip-Down Clock. In the tutorial, we will create an animated flip down clock inspired by the 70’s. Using the Mootools framework, we are trying to replicate the flip action of the pads and make it as lifelike as possible. With it’s retro styling, it could be a really neat thing to add to your website.

The clock is composed of three groups of images: hours, minutes and seconds, which are split in an upper part and a lower part so we can obtain the “flip” effect. The main animation consists of reducing the height of the upper part from 100% to 0%, then increasing the height of the lower part from 0% to 100% for each group in which a digit changes.

Requirements: Mootools Framework
Demo: http://nettuts.s3.amazonaws.com/470_clock/Source/index.html
License: License Free

Sponsors

Dreamhost: Get $50 Off with Coupon Code: WEBAPPERS

conjoon is a web-based open source application, built with the Zend Framework, that focuses on message exchanging.

Currently, it is a full-featured webmail & RSS reader client with contacts management. But the upcoming releases show that it will also have an integrated Twitter client with multiple accounts support.

Thanks to Ext JS, the application has a slick desktop-like interface with tabs, drag'n drops & more.

It comes with a web-based installer & requires PHP/MySQL to run.

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)
Dreamhost $50 Discount Code: WRD
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Wiki-Like Project Management Tool: Streber
• Web-Based MySQL Management With Only 1 File: Adminer
• Web Server That Runs On CD-Rom: Server2Go
• Web Based Task Manager: TaskFreak!
• Voice Enabled Powerful Web Chat Software: Ajax Chat

Caja is one of the most promising attempts to deliver secure web applications not prone to the attacks that normal JavaScript solutions sadly enough allow for. Let's face it - the concept of global variables and the lack of sandboxed environments in addition to the fun that is browser security holes makes the web as it stands now quite hard to secure.

The problem with Caja is that it is quite troublesome to get your head around. Caja pre-processes web content (HTML, CSS and JavaScript) and converts it to something really unreadable but very secure. Practices that are insecure but have become quite common use rightfully are being flagged up as errors and fail to compile. This reminds me of Netscape 4.x rightfully not rendering tables that weren't closed or Netscape 6 not supporting document.all any more - the response from developers was outrage as we are happy to write "convenient" code.

The way around a lot of browser bugs and implementation funnies (see John Resig's talk the DOM is a mess for a deep-dive on that) is libraries. All the different JavaScript libraries - Dojo, MooTools, jQuery, YUI... first and foremost want to make our lives easier by making browsers behave. That's cool and all, but the problem is that the libraries themselves are not Caja compliant.

As Yahoo's new application platform YAP that allows you to run small apps in My Yahoo and the Yahoo homepage uses Caja there was an immediate need to make YUI work. The YUI team and the YAP engineers put their heads down and now announced that YUI has been cleaned up and made compatible.

As Caja doesn't allow for script with a src inside a container this restriction has been lifted for the official YUI locations. Read more details about the changes to YUI on the YDN blog and here are the links to the docs and the forum where I'd encourage you to report any bugs you find:

• YUI on YAP documentation
• YUI on YAP developer forum

This is a great step towards secure apps that can be built easily. There were a few earlier attempts to "fix" prototype to become Caja compliant and I would love that to come to fruition. Furthermore, a Caja compliant jQuery and Mootools would rock, too. The official whitelisted endpoint for inclusion could be the Google Ajax Libraries API.

I am right now part of the Stackoverflow DevDays conference tour introducing the attendees to the things Yahoo has to offer for developers. One of the things is YQL as an easy way to use web services. When talking to the Stackoverflow developers they wondered how to make it easier for people to tag their questions. I've taken on the challenge and whipped up a GreaseMonkey script that enhances the Stackoverflow question form to automatically add tags to the question using the Yahoo Term Extractor API. You can see a screencast of the pimped StackOverflow or install the GreaseMonkey Script.

The next logical step was to clean up the script a bit and make it work without Greasemonkey. Now you can simply embed it into any document. See it in action on YouTube:

As shown in the demo page, all you need to do is to point to the script and call the init() method with the two field IDs as parameters.

There are some ways to customise the script and its behaviour, all of which are described on GitHub. Download the script and read the docs there.

Thomas Fuchs has been working with Nokia on their multi-touch API for Qt/WebKit:

scripty2 supports multiple API vendors for Multitouch events, and even provides a desktop emulation (click+drag to pan, shift+click+drag to scale and rotate)– so you can try this out even without having multitouch hardware at your disposal.

Currently the scripty2 API abstraction event supports Desktop emulation, Nokia Starlight and Apple iPhone Mobile Safari. With just one API, you can now multi-touch enable any web application easily, just check out the demos.

In a recent update to scripty2, I’ve also introduced automatic support for WebKit CSS transitions, so whenever scripty2 effects are used and CSS transitions are available, the effects engine will automatically do the right thing for you.

All in all, using this in your web sites or apps boils down to just a couple of lines of code:

PLAIN TEXT

JAVASCRIPT:

1.  
2. $('element').observe('manipulate:update', function(event){
3.   $('element').transform(event.memo).setStyle({
4.      left: event.memo.panX+'px', top: event.memo.panY+'px'
5.   });
6. });
7.