Chris Moyer's Ramblings

Fun Presentation on 10 Golden Principles for Successful Web Apps

Wed, 24 Feb 2010 11:09:22 -0500

Fun presentation that Fred Wilson is going to be giving at The Future of Web Apps Conference.

The 10 Golden Principles for Successful Web Apps

View more presentations from fredwilson.

GitHub has an API -- Adding your Repos to Your Site

Thu, 18 Feb 2010 16:40:56 -0500

(This post is pretty old, found it in my tumblr drafts folder, but the code still works.)

So, I was showing Mike Canz my shiny new homepage, and what was his reaction? “How come the list of github projects doesn’t automatically update like twitter and the blog feed?”

“I don’t know,” was my reply.

A bit of reading about the github API and a bit of hacking, and Voila!

I’m not going to claim that this code is beautiful, but it’s a fun snippet for a few minutes work.

Postel's Law -- The Robustness Principle

Wed, 04 Nov 2009 23:25:57 -0500

Postel's Law -- The Robustness Principle:

Be liberal in what you accept, and conservative in what you send

Software should be written to deal with every conceivable error, no matter how unlikely; sooner or later a packet will come in with that particular combination of errors and attributes, and unless the software is prepared, chaos can ensue. In general, it is best to assume that the network is filled with malevolent entities that will send in packets designed to have the worst possible effect. This assumption will lead to suitable protective design, although the most serious problems in the Internet have been caused by unenvisaged mechanisms triggered by low-probability events; mere human malice would never have taken so devious a course!

Not sure why I’ve never seen this before. I guess I never had a call to read the RFC relating to internet host communication layers.

From RFC 1122 section 1.2.2

RubyKnight Gem Released (v0.2.0)

Mon, 02 Nov 2009 23:51:00 -0500

Well that was fun. I made my first ruby gem, learned Jewelcutter and published my gem to gemcutter.

What does this mean? You can gem install rubyknight and then play chess or write some code using a chess board model and engine.

> sudo gem install rubyknight
Successfully installed rubyknight-0.2.0
1 gem installed
Installing ri documentation for rubyknight-0.2.0...
Installing RDoc documentation for rubyknight-0.2.0...

> rubyknight

Enter a move such as e2e4, or a command.
Commands are prefixed with !
  !quit - quit
  !undo - revert a move
  !load  - load game state from a file
  !dump  - dump game state to a file
  !play - tell the computer to start playing the current color
  !reset - start a new game

rnbqkbnr
pppppppp
........
........
........
........
PPPPPPPP
RNBQKBNR

Score: 0
Enter move [White]> e2e4
rnbqkbnr
pppppppp
........
........
....P...
........
PPPP.PPP
RNBQKBNR

Score: -2
Enter move [Black]> !play
rnbqkbnr
.ppppppp
p.......
........
....P...
........
PPPP.PPP
RNBQKBNR

Score: -2
Enter move [White]>

OR

require 'rubygems'
require 'rubyknight'
board = RubyKnight::Board.new

puts board.to_s
print "Enter move: "
$stdin.each do |move|
    move.strip!
    begin
        board.cnotation_move move
    rescue RubyKnight::IllegalMoveException
        print "Enter a real move! #{$!.to_s}\n"
    end 
    puts board.to_s
    print "Enter move: "
end

One Truth About Technology Architecture: Loose Coupling

Sat, 31 Oct 2009 15:57:17 -0400

One Truth About Technology Architecture: Loose Coupling:

I believe loose coupling is so critical that it should be a board level issue for web companies. Whenever I now hear something like, “we can’t implement x until we have rewritten y” or “x is slow because y is overloaded” I start to dig in, because it suggests tight coupling is the culprit.

Great article by Albert Wenger of Union Square Ventures. [via Scott Rafer’s Blog].

Put Tumblr on Your Site via Javascript

Fri, 30 Oct 2009 13:10:00 -0400

Tumblr has an easily accessible API which outputs XML, JSON and JSONP. A bit of searching didn’t drum up a cut-and-paste solution, but I was able to roll my own in a few minutes. I’m documenting it here, so perhaps Google will lead the next person who needs this to my solution. Just post the appropriate parts of this script into various parts of your site, and it should just work. See it in action on my site.

Ramblings Moved to Tumblr

Fri, 30 Oct 2009 01:15:00 -0400

Not exactly sure why. I decided to make the home page of inarow.net something else (which isn’t done yet.) So, I started shopping around for blogging options. I see too much of wordpress on the clock, so I wrote that off. I ended up on tumblr because I liked their API, flexibility and capabilities.

Speaking of API, it was about an hour to import all my posts from bloxsom.

Install ruby-tumblr gem
Install RedCloth gem
Whip up a script
Run the script

find blog/entries/ -type f -name ‘*.txt’ | grep -v ‘draft/’ | ruby tumbleit.rb

Look at me, ma, I made a screencast. What’s it About? CouchDB is...

Mon, 26 Jan 2009 22:42:00 -0500

Look at me, ma, I made a screencast.

What’s it About?

CouchDB is a “distributed, fault-tolerant and schema-free document-oriented database.” It features a RESTful API, and a pretty slick way to host apps directly on top of it, without any middleware. A great overview of this concept, CouchDB hosted replicatable apps, can be found on JChris’s blog: My Couch or Yours? Shareable Apps Are The Future.

The screencast walks you through the process of installing couchdb and couchapp (from git), running them, and creating your first app. It then steps through some very rudimentary changes to the default app. I hope it’s helpful to someone besides me. ;)

AutoBlogger Update :: 0.9.4

Fri, 23 Jan 2009 10:51:00 -0500

Version 0.9.4 of AutoBlogger is now available.

This is another quick bugfix release, but includes a patch sent to me by Chris Lewis, who patched it to support sending “>date” attributes from the iPhone mail client. Apparently the iPhone insists on adding whitespace before any line starting with “>”, assuming that it’s an indented reply.

In other news, I’ve moved the main repository to github, as I’m 100% addicted to git.

AutoBlogger Site: http://www.inarow.net/entries/projects/one_evening/autoblogger/
Grab it: Download Tarball or Git Clone (git clone git://github.com/cdmoyer/autoblogger.git)

Google's AJAX APIs Playground

Thu, 22 Jan 2009 23:49:00 -0500

Google’s AJAX APIs Playground is an awesome new tool recently released by Google. It allows you to browse through their various APIs and view examples. This is a great way to see what the Google APIs have to offer and get a quick example of each.

Even better, each example can be executed, modified and re-executed right on the page. The final source your create can be copy and pasted, and each API has a link to the documentation.

Definitely head on over and check it out. I follow various Google developer blogs, but I was quite suprised to see the breadth of their API offering. Graphs, maps, search, blogging and more are all included, with great examples and an excellent interface.

As an example, check out this incredily simple way to add a scrolling RSS ticker to a page. This will grab the provided feed, and rotate the articles inside the #content div on the page. You’ll want to check out the full example to see the needed javascript files and provided stylesheet.

google.load('feeds', '1');

function OnLoad() {
var feeds = [{
title: ‘In A Row’,
url: ‘http://inarow.net/index.rss’
}];

var options = {horizontal: true}; new GFdynamicFeedControl(feeds, “content”, options);

}

google.setOnLoadCallback(OnLoad);

Blog Action Day 2008 - Poverty

Wed, 15 Oct 2008 23:53:00 -0400

Many moons ago when I was blogging regularly, I signed up to participate in Blog Action Day. It’s an even where blogger all agree to focus on a single issue for one day, to create awarness and drive conversation. This year’s topic is Poverty.

Unfortunately, I don’t have anything too profound to say, so I thought I’d point to a series of articles by one of my favorite bloggers, real live preacher. He’s a real live preacher (would you imagine?) with a great voice and an interesting point of view. He also puts his time and money where his mouth is. This series of articles details his trip with Edge Outreach, an organization who works to provide safe drinking water in developing countries. Gordon (his real name) took a trip with them, installing water purification systems in the Dominican Republic. Amazingly, to me, they needed to install a system in a hospital of all places, which didn’t have pure water!

It’s truly astonishing how many things can be so easily taken for granted.

Introduction to PEAR

Fri, 11 Jul 2008 00:43:00 -0400

If you’re a PHP programmer, chances are you’ve either run across PEAR or could get some excellent use out of it. PEAR is an acronym for PHP Extension and Application Repository. The creators and maintainers of PEAR encourage you to pronounce it just like the fruit with the same spelling. But you’ll get more than fiber from PEAR, as you’ll learn when you read the rest of this article…

A snippet from my article at codewalkers: The PEAR Package Tour: PEAR Basics.

Link Attack III

Fri, 27 Jun 2008 01:08:00 -0400

How to Get a Lot Done – 7 Tips to Achieve More
This veers a bit from my normal posts, but was a great read. If you have goals, big or small, and feel like you aren’t reaching them, give this a read. The author certainly knows what he’s talking about, being a world-travelling, company-starting, web-designing entrepreneur extraordinaire.

Query String to Object via regex
This is from remy sharp’s blog. This is a great example of the wonderful tidbits he doles out in helpful posts on this blog. Lots of great jQuery, regex and Javascript “magic”.

Sun T2000

Deep Profiling jQuery Apps
John Resig does it again, releasing another awesome project. This adds profiling into the callstack of a page utilizing jQuery. It goes much deeper that the profiling capabilities of firebug, and will be a great help if you have a heavy client-side app using jQuery.

Wide Finder 2
Tim Bray is running a second edition of his Wide Finder project. The basic premise is that taking advantage of the multiple processors available in modern day powerhouse boxes should be easier. He provided a fairly trivial application in ruby (72 lines to process gigs of log files for counts and top visited pages). He then ran it (in 23 hours) for a benchmark on an 8-core, 32-thread Sun T2000.

He’s since given out accounts to a handful of others who had code to test on the box and provided some preliminary results. As you’ll see… OCaml apparently rocks, with results coming in at under 10 minutes and less than twice the code footprint of the original. It’s certainly an interesting project to follow.

A Programmer's Introduction to jQuery

Mon, 16 Jun 2008 10:31:00 -0400

I wrote this up a while ago, I don’t even remember why, but thought some people might enjoy it.

“JavaScript, Ugh.”

For many web developers, JavaScript is one of those subjects they’d rather avoid. Five years ago, the landscape of client-side scripting was pretty bleak. Browser inconsistencies, implementation bugs and numerous target platforms made developing client-side JavaScript a messy endeavor.

And then, much to the chagrin of those developers, “Web 2.0” happened. Overnight, every site on the internet began using AJAX, every feature request for a site involved something dynamic and client-side, and JavaScript development quickly became as important a skill as any server-side technology.

Enter the Libraries

As this trend continued, smart developers began longing for the level of abstraction found in most server-side environments. Just as a PHP developer could call mail() on nearly any platform and expect to have an email message sent, JavaScript developers craved this level of abstraction in their day to day work.

In response to this need, several sharp developers have responded with JavaScript libraries to fill this gap. These libraries seek to provide a uniform interface, across browser and operating system platforms, for the most common tasks that client-side scripting is called on to perform:

DOM Manipulation (moving page elements around, hiding and showing objects)
AJAX and other flavors of client-server interaction that avoid a page refresh
Animation
Rich Interfaces (drag and drop, windowing, tabs, events)
Form manipulation

Each of the popular libraries attempt to provide some or all of these capabilities, packaged in their own API.

On to jQuery

This article focuses on one of theses libraries, jQuery. jQuery design is focused on maintaining a small footprint, cross-browser compliance, and reducing the amount of code which must be written for applications. It provides abstractions for AJAX, DOM manipulation, event handling and animated effects.

Developing with jQuery depends on two basic concepts, CSS selectors and method chaining.

In most vanilla JavaScript code (which does not make use of a library), you will find code like this:

function toggle_element( element_id ) {
        var element = document.getElementById( element_id );
        if ( !element ) {
                return false;
        }

var display = element.style.display; if ( !display || display == ‘block’ ) { element.style.display = ‘none’; } else { element.style.display = ‘block’; } return true;

}

window.onload = function () {
var toggler = document.getElementById( ‘toggle_help’ );
if ( toggler ) {
toggler.onclick = function () { toggle_element( ‘help’ ) }
}
}

The basic idea here, is that when the page is done loading, during the window.onload event, we find the toggle_help element and attach an onclick event to it. When that element is clicked, we find the DOM element with an id of “help”, examine its current display state (the CSS attribute which controls how it is presented in the flow of the page), determine if it is currently hidden or not, and toggle its display state.

The same code, implemented with jQuery looks something like this:

 $(document).ready( function () {
        $('#toggle_help').click( function () { $('#help').toggle(); });
});

As you can see, the code is significantly shorter. Admittedly, to try and compare based on the 22 versus three line count is a bit silly, as one could easily add or subtracts line from either implementation. I think it is clear, though, which version is simpler. jQuery strives to provide an appopriate level of abstraction, simplifying the developer’s task, but not obscuring it behind a heavy API.

An important example of the abstraction jQuery provides is the $(document).ready() construct. This serves as an enhanced version of window.onload. The primary enhancement is that it acts in a cross-platform waym firing as soon as the DOM of the page is ready for manipulation. This is in contrast to window.onload which can be delayed indefinitely if objects on the page load slowly or improperly (images, iframes, scripts, etc.)

CSS Selectors

As shown in the previous example, one core features of jQuery is the use of CSS selectors to find elements within the page. By now, I imagine that most web developers have had exposure to at least basic CSS, which is all you’ll generally need in order to develop very useful jQuery code. The selector engine in jQuery implements CSS2 and CSS3 selectors, as well as adding a few useful extras. The following examples, outline various selectors.

Very concise selectors and code fragments are provided by the use of the $ symbol. This is not a reserved character in JavaScript, and is used in jQuery as an alias for the main jQuery object. This will be seen throughout the examples.

To start, here’s the page we’ll work against for these selector examples:


        
                Test Page
        
        
                
                        Test Page
                
                
                        
                                Read Page
                                Follow Examples
                        
                
                
                        
                                
                                        Fill out this form.

A simple example, find the header and slide it out of view. The # character, in front of a name is used to find an element by its id attribute. An id should be unique in a pages structure. slideUp() is an animation method which decreases the height of an element over time, until it is hidden.

$('#header').slideUp('slow');

Find the title heading of the page, and change its color. In the selector, nested elements are found by simply following one selector with another.

$('#header h1').css('color', 'red');

Remove the second element of a list. The :nth-child() selector is provided by jQuery to facilitate this. remove() takes matched elements out of the DOM.

$('#instructions ul li:nth-child(2)').remove()

Where the CSS selector concept becomes very powerful, is when you want to operate on groups of items. All methods of the jQuery object will operate across all the elements that match a given selector.

Here, we’ll find all the instructions and add a class to them. addClass() is a method which adds a CSS class to the matched elements, useful to quickly change items to match a set style. An important note, regarding addClass() is that an HTML element may have more than once class, even though this is not seen very often. To match all elements which have a given class, the classname is started with a period.

$('.instructions').addClass('warning');

These are some rather simple examples, but they touch on the main principles you’ll use when creating selectors for use with jQuery. Details on all the selectors available are provided in the jQuery Docs.

Method Chaining and ‘this’

One possible disadvantage to using CSS selectors, as outlined above, is that very complex selectors can become a performance bottleneck. They can also result in your code being cluttered with the same selector over and over, as you repeatedly manipulate the same elements. Two facilities help alleviate these issues.

Method Chaining

All methods of the jQuery object return themselves. This will be a familiar concept to many object-oriented programmers, but can look a bit foreign to others. The basic idea being that you need only perform a given selection operation once, and then you perform all necessary operations on that set of results.

$('.intructions').fadeIn('fast')
        .css('border', '1px solid red')
		.addClass('warning');

In this example, we find all the instructions. We cause them to appear, give them a red border and add the warning class. (Apparently, we really, really want our instructions followed) It is important to remember that this is equivalent to the following:

$('.intructions').fadeIn('fast');
$('.intructions').css('border', '1px solid red');
$('.intructions').addClass('warning');

Chaining methods in this manner allows for more concise code and snappier performance, as the selection operation need only be performed once.

‘this’

Another facility provided is the definition of this inside each jQuery method context to reflect the current element being operated on. This becomes important with more advanced concepts, as many of them rely of providing callback functions which are executed in the context of each element matched by the selector.

In this example, we find every element with the class “click_to_hide” and then attach an onclick event to it.

$('.click_to_hide').click( function () {
        $(this).hide();
});

As you can see, we are creating an anonymous function for each element, and when the element is clicked, the element will be hidden. In this instance, we wrap this in the jQuery/$ method so we have access to the hide() method. Before wrapping, this is simply a DOM Element.

AJAX and Event Handling

Two final topics I’ll touch on are AJAX and event handling. jQuery provides nice abstractions for both of these, which are likely to prevent numerous bugs and speed development.

AJAX

The must-have feature for modern web sites, AJAX, is greatly simplified when using the jQuery library. Without using a library, you would be writing complex code to first instantiate a browser-specific XmlHttpRequest object, then initiating a request and writing a callback function to be triggered.

With jQuery, for the most common cases of AJAX usage, you can accomplish this with one simple line:

// Grab the content of url and inject it into #div_to_load_in
$('#div_to_load_in').load(url);

For a more complex case, where you want to manipulate or act on the result, you’ll need to add a bit more code.

var url = '/update_status.php';
$.get(url, {status: $('#status_field').val(}), function (data) {
        if ( data == 'OK' ) {
                alert('Status Updated');
        }
        else {
                alert('Sorry, Status Update Failed. (' + data + ')');
        }
});

Here we’re assuming the existence of a server-side script, “update_status.php”, which takes a “status” GET parameter and returns either “OK” or an error message. In this example, I also utilized the val() jQuery method which abstracts the process of obtaining the value from any form element. This includes finding the value attribute of the selected option in a