jQuery Tetris

Posted on by

jQuery Tetris

Following in the footsteps of the excellent Yahoo! UI Tetris by Dustin Diaz comes jQuery Tetris.

This Javascript implementation of Tetris, written by Franck Marcia, comes in at only about 5.8kb, compared to Dustin’s 30kb for YUI Tetris. This is a great example of the short code that’s possible using jQuery, while still making something that’s quite cool.

SVN Access to jQuery

Posted on by

I’ve slowly been moving jQuery over to SVN during the past month, with the move being nearly complete now. So, if you wish to keep track of jQuery through Subversion (and make sure you always have the latest code), you can do so via:

  • The jQuery SVN Web Interface (This will probably soon change to a Trac-based installation.)
  • Or checking the code out manually using:
    svn co svn://jquery.com/jquery

The biggest changes left to come to the repository is the creation of branches to keep track of the different versions of code, along with some solid, reliable, versioning for the main code base. I’ll have more specific news about that update, soon. If you have any questions concerning the code in the repository, or if you’d like to be able to commit, be sure to drop the the mailing list.

Repository of jQuery Examples

Posted on by

Mark Constable has created an excellent, and well-documented, resource for some interesting advanced jQuery Examples.

The examples range from the simple (such as fading text in and out) to the complex (such as live searching or input field focusing). All of the examples are fully documented, which makes this a great place to learn some new techniques from.

Also, Mark provides a simple format for submitting new examples, so I imagine that this repository will only grow in size (it’s already up to 10 entries). So check it out and be sure to thank Mark for all his hard work!

jQuery under the MIT License

Posted on by

jQuery is now available, exclusively, under the MIT License. This license is much more open than the previous Creative Commons license used (and much better suited to software development). In a nutshell, for those not familiar with the MIT License, it’s about as free as you can get without actually putting something in the public domain. The only stipulation is that you keep the copyright along with the source code, and everything will be a-ok. Choosing this license was the result of a long discussion on the mailing list, figuring out what was best for everyone, including all the corporations that wanted to use it. If you have any questions as to how this might effect you (note: It probably won’t), just drop a note to the mailing list and we can help to set you straight.

15 Days of jQuery

Posted on by

An amazing new jQuery resource has just arrived: 15 Days of jQuery. It’s a new site run by Jack Born, devoted to providing simple tutorials for getting you started using jQuery. Jack created this site after using jQuery in his projects:

I consider [jQuery] the Swiss Army knife of Javascript – it’s small, versatile, and has almost zero learning curve… If you’re not a black belt in advanced javascript code by the end of these tutorials then you get 110% of your money back.

So far he has four tutorials up for you to browse but he’s planning on going up to the whole 15, during these next two weeks. After that, Jack is going to continue exploring and making posts – so you should subscribe now while it’s still young!

This is absolutely a phenomenal resource for anyone new to jQuery, or Javascript programming. I especially liked the Zebra Striping tutorial, it walks you through how to perform a common activity easily and simply with jQuery.

Event Selector Showdown

Posted on by

Simple Challenge: Find all the LI elements underneath two different elements (using their #ID as reference) and bind a click handler which changes the color of the LI’s text. Here is how you would do that in all of the popular event/selector libraries.

Behaviour + Prototype

Behaviour.register({
  '#item li': function(element) {
    Event.observe(element, 'click', function(event) {
      Event.element(element).setStyle({color: '#c00'});
    });
  },
    
  '#otheritem li': function(element) {
    Event.observe(element, 'click', function(event) {
      Event.element(element).setStyle({color: '#c00'});
    });
  }
});

Prototype 1.5.0

$$('#item li, #otheritem li').each(function(li){
  Event.observe(li, 'click', function(event) {
    Event.element(li).setStyle({color: '#c00'});
  });
});

event:Selectors

EventSelectors.start({
  '#item li:click, #otheritem li:click': function(){
    this.setStyle({'color': '#c00'});
  }
});

jQuery

$("#item li, #otheritem li").click(function(){
  $(this).css('color', '#c00');
});

I like to think that the code speaks for itself, as to which one is the easiest to use and understand. I find it interesting how Prototype is migrating closer to what jQuery has now – while jQuery itself is blasting away with some very cool new stuff. Definitely keep your eyes peeled for new releases, as they’ll be coming soon.

Plazes Redesign

Posted on by

Recently Plazes (a popular geolocation web application) put up a redesign of their service. If you take a peek at how it’s doing it’s cool effects, underneath the hood, you’ll see that it’s making good use of jQuery.

The best place to see it in action is on the Plazes People page. The purpose of the page is to allow you to browse around and see what other people are connected and where they’re currently located. This page has a number of cool features that you can play around with:

  • Try moving/zooming the map – the list of people on the left-hand side of the screen will dynamically change and reload.
  • In the input box at the top of the map, enter in part of a city name and it will auto-complete it with the most relevant name.
  • Clicking a user in the left-hand menu will take you to where they’re located on the map.

All in all, it’s a great example of what’s possible with jQuery, Google Maps, and a great dev team to tie it all together.

Firebug Debugger

Posted on by

Joe Hewitt is working on updating his excellent Firebug Firefox extension. If you’re not familiar with it, you should be. It provides detailed per-page error tracking, XMLHTTPRequest tracking, DOM Navigation – everything that a Javascript developer needs.

The new version of Firebug is adding one more feature: Javascript debugging. This will allow you to set break points in your code, pause the application, restart it, and all sorts of cool stuff. If this sounds interesting to you, you should contact Joe, as he needs testers to help him get this off the ground.

Thickbox

Posted on by

Cody Lindley just released a brand new version of Lightbox/Greybox called Thickbox. This release offers some great, added, functionality over the other libraries. Specifically, this release is completely unobtrusive – it uses the natural href, src, and title attributes to seed the box, when it pops up. Even if you don’t have Javascript enabled, it still behaves naturally. It is also capable of dynamically loading blocks of html and displaying it in the overlay. In all, it’s a great release, not the least of which is the fact that it uses jQuery to pull it all together. So check it out, play with it, and let Cody know what you think of it!

jQuery Visual Map

Posted on by

Jeffery Chiang recently submitted an excellent visual representation of the jQuery library, to the jQuery mailing list. It shows all the different plugins and what methods/features they support (borrowed from the jQuery Documentation). Similar diagrams have been done for the Prototype library – but none of them have the cool Devo hat of jQuery to go along with it. If anyone is feeling adventurous, using the styles of this map would make for an awesome redesign of the documentation page.