Archive for the ‘Ajax’ Category

File Under: Ajax, UI/UX
Jul
21
2010

Beautify Broken Links With Catch404

By

The 404 error is one of the bitter realities of the web.

“The page you’ve requested does not exist.” So cold and unforgiving. Unlike a bad database connection or an unresponsive server, the 404 Page Not Found error has a finality to it — this link is dead and it’s never coming back.

But now we have Catch404 by Addy Osmani, a jQuery plug in that handles broken links with style. Deploy Catch404 on your site, and instead of seeing a page reporting a broken link, the user is presented with an Ajax modal window (also called a hop-up, or a lightbox) informing them the linked page isn’t there. The windows also offers some alternate destinations they might want to check out.

We’ve been trying to make 404s go down a little easier for years now. The custom 404 page is a popular solution. It’s available on just about every web CMS out there. You can do it yourself, too. Browsers are also taking it upon themselves to beautify the broken link with custom pages, offering suggestions or inviting users to search for the page using a built-in search box.

Catch404 takes both of those ideas — the custom alert and the suggestions of what to do next — and places them into the user experience before the link is even loaded. The plugin, which requires the jQuery framework, sends the link off to Yahoo’s YQL engine to check to make sure it’s alive. It only performs this check for external URLs; local URLs don’t require the check. The check is performed behind the scenes, using an Ajax request. If all is good, the user goes about his or her way. If the check results in a 404, the user sees the modal window.

Here’s a demo.

You’ll notice one obvious downside, which is that your users will have to wait an extra half-second or so while the YQL call completes. So why use it?

When a user is browsing your site and clicks on a link you’ve provided, then sees a 404 error, it’s your problem whether you’re responsible or not. Linking to dead pages makes you look like a sloppy curator, and the user will place some, if not all, of the blame for that error on you. Catch404 is more helpful than an impersonal error.

If the speed hit from the cross-site link checking bothers you, consider adding Catch404 only to legacy content — those years-old pages filled with links that may or may not still be alive.

Activating Catch404 is simply a matter of assigning a class to the link, so you can invoke it only where it makes sense.

[via Delicious]

See Also:

Tags: , , ,
File Under: Ajax, JavaScript, Web Apps
Jun
3
2010

Beautiful Websites: Slippy for Presentations

By

Jordi Boggiano has created Slippy, a lightweight library for building animated, browser-based slideshow presentations. Slippy is very simple — check out a short demo and view the source code. Grab the code from github.

It’s written in HTML and it uses JQuery for the interactions (touch the space bar, use the arrow keys, or click the mouse to go to the next slide). It also uses Syntax Highlighter, a bit of JavaScript that pretties up snippets of code — we use Syntax Highlighter for tutorials here on Webmonkey — so it’s especially useful for presentations where you’re showing code examples. Jordi points out that Slippy can run your scripts in pretty alert() boxes (rather than the standard, boring browser alerts) to show your examples in action.

Composing a presentation is simple. Just hack a basic HTML file. Each slide is in its own <div>, and all the markup beyond that is standard HTML. Bravo!

See Also:

Tags: , ,
File Under: Ajax
Feb
16
2010

Ajax for Beginners

By

JavaScript has had the XMLHttpRequest object for almost a decade now, but it really only started getting wide attention in 2004. All this attention was mostly due to some showoff web applications that made every developer who saw them think, “I want my site to do that!” But it also has to do with the spiffy, spiffy name given to it by the folks at AdaptivePath, who named this asynchronized application Ajax. Maybe you’ve heard of it?

A few high-profile Google applications in particular made a splash with Ajax: Maps and Gmail were first. It also powers some of the core functionality in the user interface of the ever-so-popular photo sharing site Flickr. By now, Ajax has become integral to the fabric of the web, especially in the era of real-time applications like Twitter, Buzz and Wave (all of which use Ajax extensively in their webapp front ends, for the record). Ajax may also lay claim to being the first JavaScript object with its own fan website. Date.com doesn’t count, although I did have a scintillating chat with a lady there once about the getTimeZoneoffset method.

Continue Reading “Ajax for Beginners” »
Tags: ,
File Under: Ajax
Feb
15
2010

Ajax Essay Grader

By

This automatic essay grader is a simple example of an Ajax (XMLHttprequest) interaction from Paul Adams’ Ajax for Beginners tutorial on Webmonkey.


Continue Reading “Ajax Essay Grader” »

Tags:
File Under: Ajax
Feb
15
2010

Ajax Drop-down Menu

By

This code, which was written by Adam Duvander, will create a simple Ajax drop-down menu.


Continue Reading “Ajax Drop-down Menu” »

Tags:
File Under: Ajax
Feb
15
2010

Google Ajax Search

By

Here is some code you can use to add Google’s search functionality to your website. You can add both a standard Google search box that will search the web at large (the first example) or a site-specific search box that will search only pages within a specific URL (the second example). If you want to restrict searches to your own site, use the second example and provide your site’s URL as the searchable domain.
Continue Reading “Google Ajax Search” »

Tags:
File Under: Ajax, JavaScript
Feb
15
2010

Build Ajax Components With Spry

By

Apparently, the pro-developer guiding principles of Macromedia continue to survive under the direction of Adobe. Ever since they acquired Macromedia, Adobe, the company that was previously all about PDFs and PSDs, has been releasing a healthy serving of web tools via Adobe Labs. The Adobe Labs site is quickly becoming a vital meeting place on the web where developers can share ideas and experiment with new technologies.

Adobe’s Flash-meets-Ajax framework lets developers create dynamic interfaces and UI elements. Now they’ve unveiled a preview release of their new Ajax framework, Spry.

In this article, I’ll walk you through making a very simple Spry application. I hesitate to even call it an application, because most of the heavy lifting is done in the framework itself. The code we’ll be writing will look an awful lot like HTML and CSS.
Continue Reading “Build Ajax Components With Spry” »

Tags: ,
File Under: Ajax
Feb
15
2010

Build an Ajax Dropdown Menu

By

If you hang out with designers and developers at all, then you’ve probably heard the term “Ajax” by now. It’s the official buzzword of Web 2.0. But it’s also an extremely useful web development technique.

In the course of this tutorial, we’re going to look at what Ajax can do. Then we’ll use a JavaScript class to simplify your first steps toward the ultimate in speedy user interactivity.

First, what is Ajax? It stands for Asynchronous JavaScript And XML. In simple speak, Ajax allows us to use JavaScript to grab an XML file (or any other text) without reloading the whole web page.

Ajax has been used for a lot of things, but it is most impressive when many small updates are needed in a short period. Think streaming stock quotes or draggable maps.

Continue Reading “Build an Ajax Dropdown Menu” »
Tags: , ,
File Under: Ajax, JavaScript, Programming
Feb
15
2010

Building With Ajax and Rails

By


So, since the last time you brushed your teeth, Ruby on Rails has only grown in popularity. The list of web applications using the exciting new web framework has grown to such an enormous size, it has exceeded the 50K per page limit of the wiki used to host it. Lesser languages like Java and PHP are copying the stylish efficiency of Rails with their own frameworks like Trails, Trax and Cake.

In the tutorial Ruby on Rails for Beginners, we went over the very basic basics of Ruby and Rails:what it is, why it’s so mindblowingly cool, which celebrities are using it, and so forth. As soon as the article went live, letters flooded in, offering me book contracts, movie deals and exotic snacks — I haven’t gotten so much attention since my Ajax for Beginners article. In fact, this poll from the redoubtable Lifehacker.com says that Ruby on Rails and Ajax are among the two most popular things in the world, and plainly it pays to follow the trends, so what if we combined the two of them? No, that would be excessive. You don’t want to read about that. You do? Hmmmm, OK, I suppose we can take a quick look.

Continue Reading “Building With Ajax and Rails” »
Tags: , , ,
File Under: Ajax, Frameworks, JavaScript
Jan
19
2010

JQuery Celebrates 4 Years on the Web With New Release

By
Popular Ajax library jQuery is celebrating its fourth birthday with a major new release — JQuery 1.4. JQuery has long had a devoted following among interface designers. Proponents tout its speed and lightweight structure which make it easy to integrate complex effects with only a few lines of code. Google, Microsoft, Amazon and independent web developers everywhere have turned to jQuery to handle Ajax, JavaScript animations and other hallmarks of the modern web. The latest version of jQuery boasts some impressive speed gains and represents a ground up refactoring of much of jQuery’s underlying code. According the jQuery’s developers this release is significantly faster across browsers and eliminates much of the redundancy in jQuery’s internal functions. Other nice changes in this release include support for HTML5 elements in serialization calls, the ability to test for specific rendering engines (for example, target WebKit with jQuery.browser.webkit) and support for per-property easing in your animations. For full details on everything that’s new, check out the jQuery blog post and be sure to look over the backwards-incompatible changes before you attempt to upgrade any of your jQuery projects. As always you can grab both the minified and full source versions of jQuery from the download page or simply include the Google hosted version in your projects by including the URL, http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js, in your projects. See Also:
Tags: ,
« OLDER POSTS