JQuery, the crown king of JavaScript. Image: Roberto Verzo/Flickr.

JQuery greatly simplifies working with JavaScript, particularly for newcomers, and that has long made it a favorite with developers — roughly half of all sites on the web are using it. However, while jQuery itself simplifies things, finding plugins on the site has always been a huge pain.

In an effort to clean up and simplify the process of finding the perfect jQuery plugin, the jQuery project is launching a new site, the jQuery Plugin Registry. In a blog post announcing the new registry site, developer Adam Sontag says that the goal is to “reduce the… obstacles for plugin developers and consumers.”

Based on what’s currently available, the jQuery project has done a good job of building better back end tools for developers, but finding a plugin isn’t much easier than it was before.

Most of what’s new about the jQuery Plugin Registry is for plugin developers — namely Git support and very nice integration with GitHub. Developers can now publish their code to GitHub and the jQuery Plugin Registry will automatically be updated.

Unfortunately for those trying to find the perfect plugin to use on their sites the new Registry site has little in the way of new tools.

As with the old, much-neglected plugin site, each plugin gets a basic page that offers a download link as well as a link to past versions, documentation, the issue tracker, and the source code repository. However, actually browse through the site and you’ll discover that much of that info is often missing. Most jQuery plugins offer little in the way of documentation and the site still lacks any kind of preview images (if available there will be a link to a demo page).

The new site also ignores what could be helpful social tools — there are no user ratings, download counts, likes or anything else to indicate whether or not people actually like using a plugin. Of course now that the plugin registry code is on GitHub, it’s easy to see that issues regarding the site search and lack of screenshots have already been filed. When, or even if, they’ll ever make it to the site remains to be seen. For now the new site remains rough around the edges.

Size matters. Image: Screenshot/Webmonkey

Nothing grabs a user’s attention like a big, full-window video on a landing page. For example, check out Path.com. However, with all the various screens potentially connecting to your site these days, making sure your movie plays full-window on all of them can be tricky.

That’s where BigVideo.js comes in. Developer John Polacek‘s BigVideo is a jQuery plugin for adding big background videos to your site. The plugin makes it easy to drop in a single video URL and get fit-to-fill background video that takes up the whole window. The script will fall back to displaying an image on devices where video doesn’t work.

BigVideo can also handle playlists, serving up a series of videos, as well as a very cool feature to play videos without the sound. And yes, you can (and should) add a button to allow users to turn the video off altogether. That said, I left BigVideo open, running in a background tab for several days and it didn’t have a noticeable impact on performance.

For more info, head over to the GitHub page where you can see BigVideo in action, get a full list of features and grab the code for your own site.

CSS 3 adds some awesome new tools to web designers’ toolkit — the ability to rotate, transform and tweak elements means complex layouts can be done with nothing more than some style sheet rules.

Combine that with some of the fancy new fonts available through web services like Typekit and Fonts.com and you’re well on your way to replicating the kind of fine-tuned typography control print designers have long enjoyed. However, targeting individual letters and words can still be tricky.

That’s where Lettering.js comes in. The JQuery plugin can wrap your text with span tags, allowing you to target CSS rules to individual letters, words or sentences.

If you wondered how the designers behind the Lost World’s Fairs CSS experiment did it, well, look no further than Lettering.js. The other showcase examples on the Lettering.js website are no less impressive.

The library, which requires JQuery, can be downloaded from Github. Using it is as simple as selecting the element you want to target and applying the appropriate function — basically, whether to wrap the letters, words or lines of your target element.

One thing to note, the developers recommend putting Lettering.js in your head tags to avoid the unsightly flash of unstyled content that can occur if you include it at the bottom of your page.

See Also:

• Typekit Teams Up With Adobe to Offer More Web Fonts
• Typekit Gets an API
• A Guide to Internet Explorer 9′s HTML5/CSS 3 Support
• Review: Typekit Delivers Custom Web Fonts to the Masses

One of the things that’s always on our minds here at Webmonkey and Wired is the wired.com news stream. We produce a huge number of posts every day, and our curated front door only shows the crème de la crème. The rest gets dumped in a river, which is informative, but not that exciting to look at. So we see it as a challenge: how to keep it visually interesting and still show a good mix of stories, all with a minimal amount of fuss and busywork.

Tumblr is a good solution, and one that several other news organizations are using. I happened across the Scaffold theme, and I like how it organizes posts not on a strict grid, but on a fluid grid where elements fill in the gaps around each other. It looks like a Tetris board.

The secret sauce is jQuery Masonry, a plug-in for the popular library by David Desandro.

“Think of it as the flip side of CSS floats,” he writes. “Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.”

You can grab the code from Desandro or check out the development version on GitHub. Just like jQuery, it’s distributed under an MIT license.

A particularly nice use of it in the wild is Zander Martineau’s Rather Splendid blog.

See also:

• New JQuery Release Adds JSLint Support
• jQuery Celebrates 4 Years on the Web With New Release
• Get Started With jQuery

The popular jQuery JavaScript library has released an update to its current 1.4 release. The latest version, jQuery 1.4.3, is relatively minor update, but includes some speed improvements and several welcome new features including support for JSLint, HTML 5 data- attributes and a major rewrite of the css() module.

If you’d like to update to the latest release and test your code against jQuery 1.4.3, you can download it here (or here, minified). As always you can also load the code directly from Google’s CDN.

Perhaps the most important part of this release is the JSLint support. While Douglas Crockford’s JSLint tool — which is designed to find a multitude of JavaScript problems in your code — proudly proclaims it will “hurt your feelings” (and it will), it’s also a great way to debug your code.

According to a blog post announcing jQuery 1.4.3, the jQuery team will be using JSLint to prevent regressions in future releases. Of course, it also means that you can use JSLint in your own jQuery-based scripts without having to wade through jQuery errors.

One thing we should note though is that the jQuery team has made a few minor changes to JSLint to suit the “particular development style” of jQuery code. Most of the changes are minor, and you can read the full details in the jQuery style guide.

Here’s a video of jQuery creator John Resig showing off the power of the library, including an overview the latest enhancements (and those still to come) at the Future of Web Apps conference earlier this month in London. The video comes courtesy of the conference’s producers at Carsonified. Check out their Future of Web Design conference in New York next month.

John Resig – The Future Of JavaScript & jQuery 2010 from legacye on Vimeo.

See Also:

• jQuery Celebrates 4 Years on the Web With New Release
• Video: jQuery Gurus Talk About Mobile, the Future
• Get Started With jQuery

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:

• Get Started With JQuery
• JQuery Celebrates 4 Years on the Web With New Release
• The Solar System, Rendered in CSS and HTML

One of the most-cited advancements in HTML5 the new syntax for embedding videos on web pages without the use of plugins.

Rather than load up a Silverlight or Flash player, you can just wrap a file URL in <video> tags and the video will play natively in the most recent crop of browsers — including Mobile Safari on the iPhone and iPad, where Flash and Silverlight aren’t allowed.

The design of default controls are left up to the browser vendor, but they are usually rather spartan, so the user experience is a little lacking. But since native web playback is all done with web standards, you can create fancy players in JavaScript and CSS that wrap around your video and make playing, controlling and navigating video content much more elegant.

We’ve previously told you about some great standards-based players from Sublime Video, Kaltura and Video for Everybody. Here are a few more.

[Via insicdesigns]

See Also:

• Chrome Shows Off Some Fancy HTML5 Tricks
• YouTube Launches New HTML5 Mobile Site
• Major Browser Vendors Launch WebM Free Open Video Project

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:

• Beautiful Websites: Former Apple Designer’s Amazing Photo Gallery
• Get Started With JQuery
• NYT Shows Off Real-Time Tweet Tracker During Stevenote