Docking boxes (dbx) adds animated drag 'n' drop, snap-to-grid, and show/hide-contents functionality to any group of elements.

And how could I resist re-creating one of the most iconic interfaces of modern times to show it off!

The script can work with rows, columns, or two-dimensional grids of objects, of any size and shape. And as you've come to expect from brothercake, all the functionality is fully accessible to the keyboard.

First released in March 2006, dbx2 was the first implementation of keyboard-accessible drag 'n' drop ever developed, and remains one of the most robust and elegant solutions on the web.

Version 3 has been more than two years in development, and includes a whole raft of new features, improvements to existing features, and bugfixes from the previous version (2.05). See the Latest update section below for a complete rundown of what's new.

In case you don't follow my other account, here's my new post: Building JavaScript Web Apps With MVC & Spine.js http://bit.ly/itlkID

What? - Put simply, JSend is a specification that lays down some rules for how JSON responses from web servers should be formatted. JSend focuses on application-level (as opposed to protocol- or transport-level) messaging which makes it ideal for use in REST-style applications and APIs.
Why? - There are lots of web services out there providing JSON data, and each has its own way of formatting responses. Also, developers writing for JavaScript? front-ends continually re-invent the wheel on communicating data from their servers. While there are many common patterns for structuring this data, there is no consistency in things like naming or types of responses. Also, this helps promote happiness and unity between backend developers and frontend designers, as everyone can come to expect a common approach to interacting with one another.
Hold on now, aren't there already specs for this kind of thing? - Well... no. While there are a few handy specifications for dealing with JSON data, most notably Douglas Crockford's JSONRequest proposal, there's nothing to address the problems of general application-level messaging. More on this later.
(Why) Should I care? - If you're a library or framework developer, this gives you a consistent format which your users are more likely to already be familiar with, which means they'll already know how to consume and interact with your code. If you're a web app developer, you won't have to think about how to structure the JSON data in your application, and you'll have existing reference implementations to get you up and running quickly.

unbind

A few weeks ago, I demonstrated how to make AJAX requests with raw JavaScript. In today’s screencast, we’ll take things a step further as we use PHP to query a database, convert it to the JSON format, and use Javascript to asynchronously request this information and display it on the page. If you’re just getting started with these sorts of concepts, this is the perfect video for you!

Javascript frameworks have turned simple AJAX functions into one-liners. This is quite incredible, considering the fact that it would require more than twenty to accomplish the same thing with raw Javascript. Nevertheless, it’s important to learn what’s “under the hood”.

TinyMCE is a pretty neat tool for adding some WYSIWYG editing features to standard HTML textarea and div tags. Out of the box it’s pretty easy to install and use, but I ran into some trouble trying to dynamically load and unload editor instances to a textarea that was injected into the DOM via Ajax. Turns out that I was trying to instantiate the editor instance before the textarea tag had been unhidden which caused TinyMCE to choke and die for some reason.

What follows is a quick overview on how to instantiate TinyMCE dynamically.

In the early days (well, about 4 or 5 years ago in web terms) JavaScript was mainly the preserve of the web developer/designer. For all but the most forward thinking, the approach taken when a little client side interactivity was required was to jump on to the web, find a suitable script and copy, paste and hack it to your needs. Then along came Ajax, progressive enhancement and a bunch of libraries and how things have changed. We're now making much more use of JavaScript in complex - often bespoke - ways, in our sites and applications. This new emphasis means more people with a programmer mentality are starting to do more complicated things with JavaScript. We're starting to see talk of JavaScript patterns, meta programming and domain specific languages and prototypal inheritance. All of this just might be too much for the interaction designer who just wants to improve the user experience of the application.

In order to work efficiently in a multi-disciplinary environments, and to create good reusable code, you need to include some well thought out abstractions in your applications. If you're a JavaScript developer this abstraction might take the form of using a library such as Dojo or JQuery. If you're a web designer working with a development team this might mean using JSON for application configuration details, which is what this article is about.

The core idea is to move out of our central code base things that might change depending on the context of use - such as element ids, URLs or image names - and put them in an external configuration declaration. This way the web designer can tell the program what to do without changing (and maybe breaking) it's internals. This also allows the JavaScript programmer to refactor the underlying code as required, as long as it maintains the same interface and variable names. Below I'll quickly run through what JSON is and then go through a short example, to give you a more solid idea of what I'm on about.

Modern web applications almost all make use of AJAX to enhance their user appeal. However, AJAX can be hard to debug, especially when all the traditional tools do little to help. When doing standard PHP coding CodeIgniter (CI) offers a profiler which will be appended to the bottom of generated pages. This gives you information on the request that was recently processed, including any POST or GET values passed to the script, how long execution took and how long any SQL queries took as well as what those queries actually were. During development I find this information indispensable to make sure my SQL queries are correct and things are working as I want.

However, when coding up AJAX aspects of the application this doesn’t work very well, any page fragments fed back to the JavaScript will have the profiler stuck at the bottom, and since these fragments are usually inserted inside DIVs the profiler cannot be read in it’s entirety, or it breaks the layout, or more likely, both of the above. Therefore I set out to find a way of making it AJAX compatible, so that it would always end up at the bottom of the page, even when it was originally returned appended to a page fragment. In the end this turned out easier than anticipated.

With the AJAX Language API, you can translate and detect the language of blocks of text within a webpage using only Javascript. In addition, you can enable transliteration on any textfield or textarea in your web page. For example, if you were transliterating to Hindi, this API will allow users to phonetically spell out Hindi words using English and have them appear in the Hindi script.

The language API is designed to be simple and easy to use to translate and detect languages on the fly when offline translations are not available. We plan on adding more exciting capabilities to the AJAX Language API in the future, so stay tuned.

So what is the difference between Translation and Transliteration? Transliteration is the process of phonetically converting a word written in one script into another. Transliteration should not be confused with translation, which involves a change in language while preserving meaning. With transliteration, it is the sound of the words that are converted from one alphabet to the other.

With the Feed API, you can download any public Atom, RSS, or Media RSS feed using only JavaScript, so you can easily mash up feeds with your content and other APIs like the Google Maps API.

The Google AJAX Feed API takes the pain out of developing mashups in JavaScript because you can now mash up feeds using only a few lines of JavaScript, rather than dealing with complex server-side proxies. This makes it easy to quickly integrate feeds on your website, as shown below.

31 jQuery Snippets That Will Help Make You A JavaScript Pro

3362 ♻ Retweet
11,858
Delicous: 601
Buzz it

Posted on April 7, 2010 in: Web Development|Jump To Comments

Hey guys. Hopefully if you’re reading this you’ve discovered some of the true power jQuery has to offer and you’re now looking for ways to improve your JavaScript skills even further.

There was such a huge response to my last post on jQuery Snippets that I thought it only right to follow up with a fresh list that focuses on some of the more recent features introduced in jQuery 1.4.x. Because it’s always useful to have a second pair of eyes look over your code, I asked Paul Irish from the jQuery Team to take a look at all of today’s snippets and he’s included some useful optimizations to a few of the snippets which I’ve intregated.

Now, if I only we could fit Paul into a useful Browser plugin, all my articles would be just as sensible ;) The snippets from today can be applied to a wide range of projects so remember to bookmark the post if you find it useful so you can easily come back to it anytime you want. So without further adieu, I give you today’s 31 Snippets that will help make you a JavaScript Pro.

AJAX improves user experience by moving more code to the browser. Frameworks accelerate development, but lead to opaque application behavior and new performance issues.
dynaTrace AJAX Edition aims to solve these issues:

* Understand performance as real users experience it
* Differentiate between browser or server bottlenecks
* Trace asynchronous JavaScript executions for the full round-trip
* Analyze JavaScript, AJAX remoting, network and rendering performance in real-time
* Save performance data for interactive offline analysis
* Transform Selenium/Watir tests into performance tests and integrate them with your CI environment

Enter a regular expression in the top text area; matching occurs immediately. Double-click in this bottom area to enter target input to match. As soon as you tab, [esc], or click out of the bottom area, matching will begin. You can choose between Perl/PHP-like or Java regular expression syntax, and whether the target text is highlighted to show matches, edits, replacements, or splits. The 'animate' option lets you watch the regex engine at work. Creating a 'matchmark' sends your browser to a bookmarkable URI that will reproduce the current regex pattern, settings, and target text.