Ryan Florence Online

JavaScript dependency management in the browser is terrible. I think we can fix it, here's how.

Michael Ficarra's CoffeeScriptRedux recently shipped support for source mapping in CoffeeScript. Its awesome, check it out.

Which is better: rendering HTML on the server and sending it to the client, or sending JSON to the client and letting it render the HTML? I wanted to know so I made this test, what results do you get?

CoffeeScript is known for removing some of the code in JavaScript that isn't really doing anything, like braces, semi-colons and the crazy boilerplate stuff tend to just accept. Check it out.

CoffeeScript is all the rage in some circles. I'm on the fence, but I've already noticed a few things I dislike about the language in the last few months of using it that I'd like to put out in the open.

A proof-of-concept for the future of MooTools and client-side libraries. I've broken MooTools down to separate modules, published them on npm, and can now build them with ender.

The Element module in MooTools is your gateway to the DOM. In addition to creating, selecting, and manipulating elements, it features element getters, setters, and storage. Also, the Element module, along with Slick, provide a few more of places to put your code.

Events are the communication lines between objects. What's exciting about client-side JavaScript to me is the changing state of a page as the user interacts. Without events, there would be no way to manage the state of all your objects and create a dynamic experience.

Welcome to JavaScript with Class. The Class type in MooTools is one of the defining parts of the framework. The sooner you master Class, the sooner you'll write maintainable, extensible MooTools code. After MooTools Core establishes a few things, nearly every other addition to the framework is a class.

MooTools upgrades the JavaScript environment with dozens of utility methods and functions by extending the native Types. This enhancement sets a foundation, across environments, for the rest of MooTools itself and your application.

You won't get this from the docs. The essence of MooTools in three minutes flat.

Because MooTools is modular, manually including all the different files you need, along with their dependencies, is a pain in the neck. Kamicane's Packager to the rescue! Packager is a PHP class and command-line tool used to build JavaScript files from components.

Nothing new or extraordinary here, but I run across enough jQuery plugins that don't provide options to warrant writing an article about it. You can meet a lot more use cases for your plugin if you provide the developer with some options.

Most plugins ought to provide a way for the developer to interact with it. Think of the holy accordion. Outside of just the click event on the togglers, you should provide a way to show a certain panel arbitrarily. The jQuery.addObject method to the rescue.

Instead of wrapping all the plugin logic inside the $.fn.disables = fn, keep all the logic outside in its own object and just use effin' to add your object to the jQuery API. It allows others to extend your plugin with ease, and allows you to skip the whole jQuery API, if you so desire.

Every plugin gets a namespace on the jQuery prototype. If you keep all of your functions, methods, and variables scoped inside the jQuery.fn function, others can't extend or alter the functionality of your plugin. Instead, take advantage of your block on jQuery street and let other developers take advantage of your plugin.

Every current or aspiring developer, member of a team or work-from-home freelancer, ought to be using source control for their code. It allows you to make mistakes and be experimental without worrying about getting back to an application that once worked.

Because git is "decentralized" we can push and pull to and from several different remote repositories. So why not simply add our web server as a remote repository and push to it when we want to update it? The trick is in using the post-receive hook.

Developing web apps with Ruby on Rails has a lot of conveniences developers are almost smug about. Capistrano, though not a part of rails directly, I think belongs in the category. After using it once to deploy a site, I was sold.

There are a few ways to host git repositories remotely. Some make your life easier than others. Get introduced to tools like Gitolite and services like Github.

A tiny bit of instruction to point you in the right direction.

If you're still using FTP to deploy websites, knock it off. Here's a simple way to use git to deploy web sites and applications.

Here are some resources I have found to be helpful as I've learned (and continue to learn) git.

Server-side JavaScript is all the rage. Here's a practical application of JavaScript that I used today. I needed to populate a bunch of html files with some data so I did it with narwhal and json-template

MooTools 1.2 has a few different ways to animate elements. A friend of mine recently asked what the difference was with each. What adds more to the fun is that MooTools 1.3 has some internal stuff going on that almost makes the differences meaningless!

Creating an animated news feed, or ticker as they are often called, is a snap with SlideShow

It's not just a gallery plugin, this thing can handle any content that shares the same space (tabs, news feeds, etc.) It's now super flexible after I've used it in production on several sites and discovered scenarios I hadn't thought of before.

I've gotten some great response to combining MooTools Class with jQuery, therefore, I've created a site dedicated to the technique.

When Extending and Implementing classes, you can have options specific to each class and they will all be merged nicely together in the final class. Check it out!

Just spoke at jQuery conference, the largest javascript conference to date. Here are my slides.

There are differing opinions on how to support Internet Explorer in all it's flavors. I'm the type that makes the site look and act the same in every browser as similarly as possible most of the time.

I decided to tinker with MooTools and Base64 and see if I could avoid the server altogether to create some CSV out of an html table.

Is your MooTools class centered around an element? Here are three things you ought to be doing with it that you probably aren't.

Almost every class that is centered around an element deserves a few element shortcuts. You've used them plenty of times already but maybe you haven't written one.

If Element and jQuery as a whole are practically the same, what's the big difference? Remove the overlap of the two frameworks and you're left with the inheritance API of MooTools. What happens if you use this API from MooTools and plug in jQuery for everything else? Yep, jQuery as a plugin for MooTools. Or inversely and maybe more appropriate, MooTools Object Oriented Programming for jQuery.

Here's a sort of "best practices" that I follow when creating mootools classes in no particular order whatsoever.

I recently read jQuery 1.4 Released, The 15 New Features you Must Know over at Nettuts and thought it would be interesting to compare the features of MooTools 1.2 to the new features in Jquery 1.4, released 18 months later. Enjoy!

I thought Apple's new 360 degree product viewer was flippin' awesome. So I created a feature light version in mootools last night. I hope to add more (like throwing) and clean up the api a bit, but still, this is sweet.

A simple question

The old demos for mootools 1.11 had a fun little widget that showcased the different transitions available in mootools. I've recreated it here. Just click anywhere in the box to see the transition. Enjoy!

Last time we compartmentalized some code into a nice little MooTools Class called BouncyMenu that we can use anywhere. However, there are some HUGE improvements to be made. In this article we'll be talking about how to make your MooTools Class flexible by using `Implements`, `Options`, and `Events`. We'll also talk about managing events added to elements and some discussion about binding. If you still consider yourself a beginner, understanding this article should be a big deal. Once you master `Class` your javascript will never be the same.

The MooTools forge is awesome. This screencast shows you how to make it more awesome by adding your own mootools plugins to the forge. It features my newest plugin, Fx.Scroll.Carousel, though I wish I could have done this screencast for [SlideShow](http://mootools.net/forge/p/slideshow) instead, since it's my favorite plugin I've made so far. Enjoy!

When I first started working with MooTools I was writing code that was typically a series of functions and a lot of logic inside of my `domready` code. After a while I had a nagging feeling that there was a better way to write code. There is, and it's called `Class`. If MooTools were barbeque, `Class` would be the sauce--and the sauce is the boss.

Event delegation rules the school. Instead of adding events to 300 elements you just add an event to the parent element and it'll delegate the event down to it's children, like every good parent would. The benefits? 1) Efficiency, 2) Set it and forget it, 3) Makes attaching and detaching events in a class easier, 4) Makes you look cool, and that after all, is the point of being a web developer instead of a surfing instructor.

So I did what every good mootools developer would ... extended MooTools to do the same.

MooTools extends a lot of JavaScript natives, like Functions, Strings, Numbers, etc. This article is going touch on a few of the non-dom things I do regularly with MooTools.

I was goofing around in CSSEdit and saw a triangle on the screen and thought "how on earth?" ...

Most of the time the whole point of using mootools is to manipulate an element or collection of elements. (But not always, as you'll see in Part 5.) Now that you know some basics we're going to get more in depth by learning the various ways to select dom elements to manipulate them--traversing the dom, as it were.

Most people's interest in a javascript framework lies in the animation effects. MooTools has the best. This article will not only show you the various ways to use effects, but will also talk a little about the philosophy of mootools.

Ajax and JSON requests can subtly enhance the usability of a site where the user doesn't notice the site thinking as much as all the page loads of yesteryear. After going through this tutorial you'll have a solid foundation to use this powerful feature of the web with mootools.

It seems with every new brochure-type website I worked on I was coming up a with a new slideshow/gallery widget. Finally I made Slideshow, the ultimate slideshow class. It handles all of the basics of a good javascript gallery and nothing else. No skins, no new elements, no navigation, just the slideshow basics, making it a cinch to skin.

In part one we made use of `Element.tween`. A lot of the mootools classes have what I call element shortcuts that look like `$('el').tween()`, `.morph()`, `.load()` etc. Instead of using these shortcuts you can create an instance of these classes in an object and open up a lot more control.

This is basic tutorial to help get you started with mootools. We'll be manipulating elements, adding and removing event listeners, and playing with magic.

To get your comments to display on the home page you have to first force the comments_template to believe there are comments.