This article is part 2 in that series, in which we write said application in Ruby.

The Interface

You can refer back to the introductory article for all the details, but I’ll reiterate the command-line interface here for easy reference:

• todo – list all incomplete tasks sorted by priority then chronologically
• todo next – list all incomplete tasks that are high priority
• todo done – list all complete tasks chronologically
• todo high “pay bills” – add high priority task called “pay bills”
• todo low “get milk” – add low priority task called “get milk”
• todo finish “pay bills” – complete task called “pay bills”
• todo dont “get milk” – delete task called “get milk”
• todo help – list all commands and their usage

Okay, let’s write this thing!

The Driver

10gen distributes the Ruby driver using Ruby’s most popular package distribution tool, RubyGems. To install the driver on your machine simply execute:

gem install mongo

Our program will need to load in the driver before anything else, and we’ll use RubyGems to do it, so create a new text file called mongo_todo.rb and begin it with the following:

require 'rubygems'
require 'mongo'

The ToDo Class

Ruby is a purely object-oriented language, so our program will employ a single object of a class we’ll write called ToDo. The class will take in the required command-line arguments, connect to the MongoDB collection that stores our todos, and execute the appropriate command on them.

To facilitate these needs, our object will need to take some arguments from the user and store a reference to the MongoDB collection when it is instantiated:

class ToDo
  def initialize(args)
    @args  = args
    @mongo = Mongo::Connection.new.db("todo").collection("todos")
  end
end

In Ruby, the initialize instance method is called when a new object of a class is instantiated, most often using the new class method, like this:

my_todo = ToDo.new

When a new ToDo object is instantiated, our class will store the arguments passed in to it in an instance variable called @args and store a connection to MongoDB in an instance variable called @mongo. Mongo::Connection is a class provided by the mongo gem that we’re using.

Since our class expects some arguments passed in to the initializer, we need to provide them to the new method. The arguments will be read in from the command-line when the program is executed, and Ruby exposes these to our program via the ARGV variable. So, we call new like this instead:

my_todo = ToDo.new(ARGV)

At this point, the entire program should look like this:

require 'rubygems'
require 'mongo'

class Todo
  def initialize(args)
    @args  = args
    @mongo = Mongo::Connection.new.db("todo").collection("todos")
  end
end

ToDo.new(ARGV)

You can execute this program from the command-line, but nothing will happen. Well, stuff will happen but you won’t see it displayed back to you. We still need to implement the bulk of the program, which parses the user’s command-line arguments and acts appropriately.

A Little Help

The first thing we’ll implement is a method that prints usage help for the program. It looks like this:

def help
  abort <<-HELP
  usage: #{__FILE__} <method>

  == Methods ==
  <none>            list all incomplete tasks sorted by priority
  help              show this help
  next              list all incomplete tasks that are high priority
  done              list all complete tasks chronologically
  high "argument"   add high priority task called argument
  low "argument"    add low priority task called argument
  finish "argument" complete task called argument
  dont "argument"   delete unfinished task called argument
  HELP
end

In Ruby, abort is a method you can call which will exit the application and display a string you pass to it. The string we’re passing in shows all the ways the program can be used, which will be displayed back to the user. This will be executed by default if the user doesn’t pass in an argument that we want to handle. More on that in the next section.

Run, Baby, Run

At some point, our application needs to run, so lets create an instance method called run which will handle the program’s flow. In this method we will determine what the user passed in from the command-line and call another method that handles the different use cases. The default action is to list all incomplete tasks, and the catch-all is to execute the help method we implemented above. Here is what run looks like:

def run
  if @args.empty?
    show :complete => false
  else
    case @args.first
    when "help"   then help
    when "high"   then add "high"
    when "low"    then add "low"
    when "next"   then show :complete => false, :level => "high"
    when "done"   then show :complete => true
    when "dont"   then complete false
    when "finish" then complete true
    else
      help
    end
  end
end

ARGV is an Array, so we can call methods like empty? and first on it. The meat of the run method is a Ruby case statement which checks if the first argument passed in by the user matches any of our predetermined keywords and calls other methods, add, show, and complete. These methods are the ones that actually interact with MongoDB and display information back to the user. We’ll implement them next.

Using Mongo

So far we’ve only dealt with setting up our class and parsing user arguments, we’ve barely even touched MongoDB! This is the meat of the application, so let’s get straight to it. First, the show method:

def show(params)
  sort = [["level", Mongo::ASCENDING], ["added", Mongo::ASCENDING]]
  @mongo.find(params, :sort => sort).each { |todo| puts "#{todo["task"]} (#{todo["level"]})" }
end

show takes a hash of params as an argument and passes that hash on directly to the mongo library’s find method, which will return an array of the found items in the collection.

We print each of the todo items returned from find along with the level of the todo. How do those items get in there in the first, place? That is up to the add method, which we will implement next.

def add(level)
  help unless @args.length == 2
  @mongo.insert "task" => @args.last, "level" => level, "complete" => false, "added" => Time.now
  puts "added #{level} level task: #{@args.last}"
end

add takes a single argument, the level of the todo to create (e.g.- “high” or “low”). It then makes sure that the user had passed in two arguments at the command line because it needs the second one for the name of the task. If not, it calls help which aborts the application.

If so, It calls Mongo’s insert method and passes it all the information to be stored in the datastore.

Finally, we need to implement the complete method, which is the most complex of the lot. Like add, it makes sure there were two command-line arguments given. Then it tries to find the todo by the “task” name. If found, it will either “finish” the task or “remove” the task depending on a boolean argument passed in. The method looks like this:

def complete(finish)
  help unless @args.length == 2
  if (document = @mongo.find_one("task" => @args.last, "complete" => false))
    if finish
      document["complete"] = Time.now
      @mongo.save(document)
      puts "finished: #{@args.last}"
    else
      @mongo.remove(document)
      puts "removed: #{@args.last}"
    end
  else
    puts "No ToDo matching #{@args.length} found"
  end
end

The mongo-related calls in the complete method are find_one, save, and remove.

Finishing Up

So, we’ve written our run method which calls the other methods using the user’s passed in arguments. Now all we have to do to get the class going is finish the program by creating a ToDo class object and calling run on it, like this:

ToDo.new(ARGV).run

You can view/download the program in its entirety here. One thing to note is how little code is needed to add CRUD to an application when using MongoDB as a datastore.

Hopefully this article has helped you with Ruby or MongoDB or both. Stay tuned for our next article in the series when we write the exact same application in PHP!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Down & Dirty with MongoDB Part 2: Ruby ToDo

General service announcement: it is written “jQuery” not “Jquery” or “JQuery”… even if it comes first in a sentence!!!! ∞

Then Saturday I put out a stronger tweet, and caught some stronger feedback for it:

Test: “If you want jQuery help, which misspelling will greatly hurt your chances: a) Jquery b) JQuery c) jquery d) All of the above. ∞

At the end of the day, does it really matter how someone writes the name “jQuery”? Does it make them a better or worse programmer based on how they type it out?

Let me clarify that I have never failed to answer a question on Stack Overflow (Where I like to hang out and answer jQuery questions) because the asker typed jQuery with incorrect capitalization. I would never fail to respond to an email because the asker wrote it as Jquery or JQuery. I would hate to be that petty an individual, and I think that is the feeling some people were picking up from my tweets.

However, I can say I notice it and it bothers me when people seeking help don’t type out the library name correctly. It really is a small thing, and maybe it shouldn’t bother me, but it does. It got me thinking about things that might negatively affect a request for help, and I came up with a list of six suggestions. I hope these suggestions are helpful when you need to ask for help with open source software.

Asking for Help

If you need help with an open source project, you will often be dealing with people that 1) don’t have a lot of time and 2) must use the time they have wisely. With that in mind, here are few suggestions that might help you get answers easier:

1. Take the time to make sure your question makes sense. Complete sentences, clear code examples, and links to a page demonstrating the problem all go a long way in ensuring a quality answer.
2. Run spell-check before sending your question. There are at least two reasons there would be a lot of spelling errors in a question: 1) English is not the native tongue of the person requesting help 2) The person requesting help didn’t take the time ensure a quality question. Most applications have spell check. If they don’t, you can copy and paste your question to an application that does have spell check. Reason #1 is understandable and should be overlooked; reason #2 is what will stand out most to someone reading your question. It may affect that person’s decision to answer you.
3. Getting back to my original statement regarding Jquery, JQuery and jquery. Some libraries have really weird spelling or capitalizations, some are more straight forward. Write the library/plugin name correctly when asking for help with it! jQuery should be very easy, but so many people get it wrong. It is like the names iPad and iPhone: the first letter is lowercase! For another example, the popular blogging platform is WordPress, not Wordpress or Word Press.
4. At the very least, run a Google/Yahoo/Bing search (pick one) with some of the words from the question you plan on asking. I almost always take time to run a few searches to answer a question myself before asking on Stack Overflow or emailing someone for help. It is just common courtesy to spend some of your time before asking for the time of someone else.
5. If you find the answer yourself after asking for help, be sure to let the person know you no longer need their help. Sometimes emails will sit around until there is time to answer them while in the mean time you find the answer somewhere else. It might reduce your chance of getting future emails answered if the person who takes the time to answer your question finds out they wasted their time.
6. Be respectful and kind. If an open source project is screwing up your project, you have a few choices 1) use a different project 2) pay for help 3) Ask kindly for help from the project. Notice I didn’t put “4) Demand help for free.” On a very positive note, I have to say every request I have gotten for help on the few small projects I maintain have been both respectful and kind. This is really important!

What It All Means

The bottom line is this: If it appears to someone reading your question that you have not put any time into either solving the problem yourself or writing a decent request for help, they will be less likely to put any time into answering it.

Remember, it isn’t always about just getting an answer. Sometimes its about getting the right person to answer your question. For instance, there are tons of programmers answering questions on Stack Overflow, but not all of them have equal qualifications and skill. Put in the effort up front when asking the question. It will be worth it when you get a solid answer!

Do you have any tips to add? If so, please let me know about them in the comments!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Jquery, JQuery and Asking for help

We’ve found the datastore a joy to use and wanted to feature it somehow on FYC. However, there are many, many introductory articles and getting started tutorials for MongoDB (also the information on the project’s website is spectacular), so we would be remiss to provide yet another basic intro.

Instead, we decided to highlight how the datastore is used from a few popular dynamic languages. 10gen – MongoDB’s creator – provides many official client drivers (libraries) and the open-source community has produced a handful of libraries as well. We couldn’t feature them all, so we chose three favorites – Ruby, Python, and PHP – to include in the series.

The Plot

Many demonstrations use throwaway “Hello World” type programs. We thought it would be much cooler to write something that we can actually use, build upon, and maybe derive some value from. With that in mind, we tried to think of an application that had the following characteristics:

1. Real-world use case
2. Few lines of code (~ 100)
3. Simple to understand and implement
4. No 3rd party libraries or frameworks
5. Demonstrate the basic CRUD operations

For better or worse, we chose to write a command-line todo list app as it fit the requirements well.

The Spec

Our todo application is invoked from the command-line and works as follows:

• todo – list all incomplete tasks sorted by priority then chronologically
• todo next – list all incomplete tasks that are high priority
• todo done – list all complete tasks chronologically
• todo high “pay bills” – add high priority task called “pay bills”
• todo low “get milk” – add low priority task called “get milk”
• todo finish “pay bills” – complete task called “pay bills”
• todo dont “get milk” – delete task called “get milk”
• todo help – list all commands and their usage

The only requirement outside of the user interface outlined above is that MongoDB be used to persist the todo list.

The Setup

An identical application will be written in Ruby, Python, and PHP using the official MongoDB drivers. Each language will get its own article in the series. You have the application requirements so feel free to code along in your language of choice. Also, we’d love to see versions in some other languages that we won’t be covering. Show us your skills by submitting them in the comments. We’ll happily tweet them out and link them up in our final article in the series!

Be sure to grab our RSS feed or follow @fuelyourcoding on Twitter so you don’t miss out as we get down & dirty with MongoDB!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Down & Dirty with MongoDB Part 1: the Plot

Without any further ado, here they are listed alphabetically:

Air Display

Price: $9.99
Type: iPad
Version: 1.0.1

Air Display lets you use your iPad as a wireless display for your Mac OS X computer. Why is this great for developers? Because we need screen real estate, baby!

Here’s a pic of Air Display in action as my 3rd monitor. The iPad monitor is perfect size for your Skype windows, API documentation, or a browser session with programming tutorials.

DomainStorm

Price: Free
Type: iPhone
Version: 1.0

When inspiration for that new web application hits you, the first (and most fun) thing to do is buy a great domain name for it.

DomainStorm is a relatively new app from Network Solutions built to help you accomplish just that. It tells you if domains are available, helps you brainstorm name ideas, lets you mark domains as favorites for later purchase, and even provides you WHOIS information so you can contact current domain owners about a purchase. A must have for sure!

Ego

Price: $1.99, $4.99
Type: iPhone, iPad
Version: 2.1

Obsessed with checking your site analytics? There is no better way to get a quick glance at your traffic than the beautifully designed Ego by Garrett Murray.

With support for Google Analytics, Ember, FeedBurner, Twitter, Mint, Vimeo, Tumblr, and SquareSpace this app has your analytics needs covered. Did I mention it was beautifully designed?

Evernote

Price: Free
Type: Universal
Version: 3.3.5

Evernote is a wonderful way to store all the programming tips, tricks, tutorials and gotchas that we accumulate as we go about our development efforts. The power of Evernote is the universal access to your notes that it provides. They have a web interface, Mac/Windows clients, and mobile apps including a highly polished iOS app.

If you haven’t tried Evernote yet, now is a great time to put all your notes in one highly accessible place. You can even save passwords in Evernote as they provide encrypted strings inside your notes.

iOctocat

Price: $4.99
Type: iPhone
Version: 1.7.1.1

iOctocat is, hands down, the best way to keep up to snuff with open-source development on GitHub from your iPhone.

This app features access to your personal news feed, repositories, individual commits, issues, user profiles and site search. While the app is not free as in beer, it is free as in speech and the source is aptly hosted on GitHub. That makes it a great candidate for learning iOS development as well!

iSSH

Price: $9.99
Type: Universal
Version: 4.2.5

Most developers have found themselves AFK when a very important server is having problems. If you know the feeling, then iSSH is your new best friend.

There are a few remote server control iOS apps available, but this one is the best one that I’ve come across. It allows SSH, telnet, and even VNC connections and boasts many features. The iPad version provides a display size large enough to allow determined coders like myself to fire up vim and get some coding done. The price is a bit steep, but if iSSH saves your butt one time then it has already earned its keep.

iStat

Price: $0.99
Type: iPhone
Version: 1.2

Bjango makes gorgeous and useful software including the OS X system monitoring tool iStat Menus. They also offer a similar app called iStat which displays your iPhone’s system stats.

The beauty of the iStat app for developers is that you can also use it to monitor remote servers running Mac, Linux or Solaris! You simply install a daemon on the server you need monitoring and iStat will show you its CPU, memory, disk, temps, uptime, and tons more information. It feels great to have intimate details about your servers always at your fingertips.

Nezumi

Price: $4.99
Type: iPhone
Version: 1.2

This one is specific to Ruby-using web developers. For those who fit that description, you absolutely need to try deploying an application to Heroku. It is the dead simplest way to get deployed and if you haven’t tried it yet then you don’t know what you’re missing out on.

For those who’ve seen the Heroku light, Nezumi is a must-have companion app for the Heroku service. Nezumi gives you instant access to your Heroku apps from your iPhone so you can add collaborators, manage your dynos, toggle maintenance mode, execute rake/console tasks, and even restart your application on the go. Love it!

So there you have ‘em. Eight great iOS apps for developers. Hopefully you’ll find that one or more of these apps helps you increase your productivity as a developer. I know I’m better off with them than I was without.

If you know of any other iOS apps that did not make my list, please give them a shout out in the comments, so we can all check them out!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Eight Great iOS Apps for Developers

* Or unsurprisingly for those who have followed Microsoft’s ongoing efforts to reach out to the development community and embrace open technology.

A little info from their about page reveals the goal of the site:

By providing solutions-based articles, videos and code samples, developers will be able to have a concise resource to go to for the latest in web application development techniques.

There have already been a number of great articles posted on ScriptJunkie, but here are two to get you started:

• “How to Debug Your jQuery Code” by Elijah Manor
• “Be a CSS Team Player: CSS Best Practices for Team-Based Development” by Emily Lewis

I feel very privileged to have been asked to contribute some articles to ScriptJunkie as well! If you are feeling up to learning about the jQuery UI Widget Factory, I’d love you to check out my first SJ article: “Introduction to Stateful Plugins and the Widget Factory”.

Do we need “another” resource?

In a world where our RSS readers are overflowing with “content,” it becomes difficult to embrace newly launched sites. I think ScriptJunkie is a site that is worth embracing. Though it has just launched, the material already present on the site reflects a wealth of techniques and information for any client side developer. I hope you will take a moment to check it out, and even give some feedback to Microsoft about what you want to see covered on the site.

What do you think? Are you excited to see Microsoft embrace and support the client side development community? Are there topics not yet covered on ScriptJunkie you feel are really important? Be sure to leave a comment with your thoughts!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

ScriptJunkie Launches!

Congratulations to our winners: mojo, Dan, and Dan!! We’ll be contacting you via email with details on claiming your free license. To everybody else, thanks for entering! I’m sure we’ll have more awesome giveaways coming along to help your fuel your coding!

We’re very excited to provide the chance at three (count ‘em, 1, 2, 3) free licenses to the excellent Mockups app by Balsamiq Studios!

I’ve been using Balsamiq Mockups for more than a year and couldn’t be happier with how quickly I can turn an interface idea into something tangible. For example, I mocked up this simplified version of the FYC homepage in about 20 minutes:

The best way to see the power of Mockups is to watch this video wherein iTunes’ interface is mocked up in less than 3 minutes:

Convinced yet? Want a copy you can call your own?

Enter to win by commenting on this post telling us why you need Mockups. Be genuine, be creative, but most of all be persuasive!

We will choose our three favorite comments and announce the winners exactly one week from today (Monday, June 7th 2010).

On your marks. Get Set. Go!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Giveaway: Balsamiq Mockups [Winners Announced!]

If you want to dramatically increase your programming skills you need to be reading other people’s code.

Maybe you believe that, maybe you don’t. You should. And if you’re willing to give it a shot, I believe you will be rewarded greatly for your time.

In this article I will help you choose what to read and give you practical advice on how to go about reading it. If you’re already a code reader you may find a few ways to get more from your efforts. If you aren’t, you absolutely must read on.

What to Read

This is a big decision, and one that is difficult to advise on. I won’t simply point you toward code I think you should read, because it really comes down to what you’re in to. However, I will provide some guidelines which you can follow to help you choose what to read.

» Read Code That You Rely On

A great place to start is with any plugins or libraries that you are already using.

• A WordPress plugin that you really like
• A Ruby gem that you’ve found useful
• A jQuery plugin that you keep going back to

These are all great candidates for learning. You are already familiar with their public APIs so the barrier to understanding their inner workings is lower. Also, as a user of the code you have an opportunity to add documentation, implement a new feature, or generally give back to the project in some way.

» Read Code That Impresses You

I remember the first time I saw 280 Slides and I thought to myself, “Now that is impressive.” I quickly learned that the code driving that site was the open-source Cappuccino project. I tucked that knowledge into the far recesses of my brain and when I eventually came across another impressive app running on Cappuccino I knew I had a project that I could learn a lot from. What have you been impressed by lately? Is it open-source? If so, it’s a great choice for reading since the code is likely to impress you as much as the resulting application.

» Read Code Written By Somebody You Respect

If you’ve been coding with open-source software for more than a little while, there are probably other programmers who have earned your respect. I can think of a few developers off the top of my head whose code is downright enviable.

If you don’t have a respected developer in mind, it’s easy to find one. He or she has probably authored some code in one of the previous two sections (code you rely upon, or that impresses you).

» Read Code That You Can Actually Grok

If you’re the adventurous type you may be considering diving into a large project like Ruby on Rails, Drupal, or jQuery. I suggest avoiding projects like these for now unless you are an experienced code reader.

Large projects have a lot more moving pieces, and you may end up struggling too much with the concepts to learn anything of immediate value. Confusion leads to discouragement, and larger projects more likely to confuse and discourage you in your reading. The advantage of picking a small project to read is that you can hold the entire program logic in your head at once. This leaves you with just the details to discover and learn from.

How to Read

Now that you’ve chosen some code to read, what is the best way to go about reading it? I’ve read a lot of code in my days, and I can suggest a few ways to maximize your ROI.

» See the Big Picture

I’m going to assume that you at least know at a macro level what the code you’re reading accomplishes. If not, I suggest reading the project’s website, tutorials, documentation, and anything else you can get your hands on except the code.

Okay, with that cleared I suggest your first step is to wrap your head around the project’s structure. This is a variable amount of work depending on the size of the codebase you’ve chosen, but anything larger than one file will require a little bit of time.

First, note the file structure. This step is aided by an editor that has a folder hierarchy view like TextMate. For example, here is a nice overview of the Twitter Ruby gem:

The goal with this step is to just get familiar with the source. Find out which files include/require/load other files, where the bulk of the code is, the namespaces used if any, and things of this nature. Once you’ve got the big picture you’ll be ready to dig into the details.

» Document Your Findings

Reading code should not be a passive activity. I encourage you to add comments as you go, documenting your assumptions and your conclusions as you begin to understand the program flow. When you first get started your comments will probably look something like:

# I think this function is called after 'initialize'

# What does this equation even do?

# Pretty sure this variable loses scope after line 17

As your understanding progresses you can remove the little breadcrumb comments you left yourself and perhaps write more meaningful and authoritative comments that could possibly be committed back to the project.

» Use the Tests, Luke

Hopefully the project you’ve chosen has a test suite. If not, you can skip this section altogether (or find one that does).

Tests are a great place to start whenever you read somebody else’s code because they document what the code is supposed to accomplish. Some tests are more informative than others, but no matter how well written, you’ll often find the programmer’s intent in the tests much more easily than you’ll find it in the implementation. While you’re reading, try to get the test suite to run successfully. This will make sure your development environment is configured properly and will make you more confident when making changes.

» Execute, Change Stuff, Execute

Who said reading code had to be hands off? You’ll really start to understand things once you’ve broken everything and put it back together again. Remember those tests you got passing? Make them fail, add some more, or try changing the implementation without breaking them. Try adding a small feature that you think is cool, or setup project-wide logging so you can print output at various stages of the code. Is this still reading? Absolutely, but at this point its more of a choose your own adventure than a mystery novel. And that’s a good thing!

» Rinse and Repeat

Once you finish reading one codebase, pick another one and start the process over again. The more code you read, the better you get at reading it and the more you get out of it in less time. I think you’ll find that the ROI increases quite quickly and that it’s actually a very enjoyable way to learn.

Where To Start

The single most influential factor in my code reading is GitHub. The site makes it so easy to find new projects and great coders that you’re doing yourself a disservice if you’re not leveraging it. I suggest starting on GitHub and reading code right on the site until you find a project you know you can learn from. Then git clone that baby and get to reading!

How about you? Do you read code as a learning tool? Which projects would you recommend to others? Read any good code lately?

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

One Sure-Fire Way to Improve Your Coding

The Proposition

As a WordPress developer/designer, how would you like if URLs on your WordPress site were automatically shortened as soon as you publish? This would mean instantly available shortened URLs for sharing/posting AND statistics of your links!

Here’s How

We are going to build the Auto URL Shortening feature within your WordPress theme using the bit.ly API. Let’s start with the functions.php file found within your theme.

The functions.php file is included in most WordPress themes as a place to drop custom functions to be used from the theme. If this file doesn’t exist in the theme you are using, go ahead and create it.

Add 3 functions within the functions.php file

function makeshorturl()
{

}

function shorturl_metabox()
{

}

function showshorturlbox()
{

}

The first function, makeshorturl(), as the name suggests will be creating a short URL for us. The second and the third functions will work together to show us the short URL in the admin editor.

Shortening the link

function makeshorturl()
{
    global $post;

    $short_url = json_decode(file_get_contents('http://api.bit.ly/v3/shorten?login=[username]&apiKey=[apikey]&longURL='.urlencode(get_permalink($post->ID)).'&format=json'));

    if($short_url->status_code=="200")
    {
         $short_url = $short_url->data->url;
    }
    else
    {
        $short_url = "Bit.ly Error! ".$short_url->status_txt;
    }

    do_action('makeshorturl');

    return $short_url;
}

The first line in this function declares WordPress’s global $post variable which holds all the data for the current post. We extract the permalink of the current post using the get_permalink() function and supplying the current post’s id. We then take the permalink and pass it on to bit.ly’s API which returns us a short URL within a JSON object. Next we extract the short URL. If an error occurs we simply return the error.

The do_action() method in WordPress makes this function hookable with other functions/hooks and the function can be used within theme using the hook – makeshorturl().

Want to know more about do_action() and wordpress hooks?

Lets look at the api call in more detail

http://api.bit.ly/v3/shorten?login=[username]&apiKey=[apikey]&longURL='.urlencode(get_permalink($post->ID)).'&format=json

It’s really quite simple.

The login parameter would expect your login over at bit.ly (don’t have one? create one here). The apiKey parameter accepts the API key given to each bit.ly account. If you already have an account you can find the API key here. The longURL parameter expects an encoded long URL string that needs to be shortened, and this is where our custom permalinks get passed. The format parameter expects one of the three values – json, xml or text; depending on the format value specified, the API returns the shortened url (and more data) as JSON, XML or text respectively. By default, if format is not specified, it returns a JSON object. For more info on the bit.ly API, refer the API documentation. Once the bit.ly API sends the JSON object back, we use PHP’s json_decode function to decode the JSON object into a PHP5 object.

Adding the shortened URL to the admin editor

Once the permalink has been shortened, we need to make it available in the backend. To do this, we use the two functions as outlined below.

function shorturl_metabox()
{
    if(is_admin())
    {
        add_meta_box('bitlyurl',__('Short URL','short-url'),'showshorturlbox','post','side');
        add_meta_box('bitlyurl',__('Short URL','short-url'),'showshorturlbox','page','side');
    }
}

The shorturl_metabox will first check if the user is within the admin section of the wordpress based site/blog. Then we add a meta box to the admin page.

A Meta box in WordPress basically is a box which sets and gets meta information about a post. Default meta boxes include Post Tags, Discussions and so forth.

More on meta boxes.

The add_meta_box function takes five parameters:

1. the HTML id of the box
2. the label/title of the box
3. the callback function which would render the box contents
4. the type of write screen – post or a page
5. the position or context where the box would be located – Normal, Advanced or Side.

More on add_meta_box().

As you can see, that when the function “adds” the meta box to the admin view, it calls the showshorturlbox function which renders the contents of the meta box, as shown below.

function showshorturlbox()
{
    echo '<label for="bitlyurl">'.__('Shortened URL','short-url-label').': '.makeshorturl().'</label><br/><br/>';
}

The function echoes the short URL in a label, thus making it available to be shared by the authors of the post/page. We are calling makeshorturl() which fetches or generates the shortened URL via the bitly API.

Bringing it together

Finally we use the following three lines which attach our makeshorturl() function to the publish_post and publish_page hooks and attaches shorturl_metabox to the do_meta_boxes hook that generates the meta boxes.

add_action('publish_post','makeshorturl');
add_action('publish_page','makeshorturl');
add_action('do_meta_boxes','shorturl_metabox');

Complete Code within functions.php

function makeshorturl()
{
global $post;

$short_url = json_decode(file_get_contents('http://api.bit.ly/v3/shorten?login=[username]&apiKey=[apikey]&longURL='.urlencode(get_permalink($post->ID)).'&format=json'));

if($short_url->status_code=="200")
    {
         $short_url = $short_url->data->url;
    }
    else
    {
        $short_url = "Bit.ly Error! ".$short_url->status_txt;
    }
    do_action('makeshorturl');
    return $short_url;
}

function shorturl_metabox()
{
    if(is_admin())
    {
        add_meta_box('bitlyurl',__('Short URL','short-url'),'showshorturlbox','post','side');
        add_meta_box('bitlyurl',__('Short URL','short-url'),'showshorturlbox','page','side');
    }
}

function showshorturlbox()
{
    echo '<label for="bitlyurl">'.__('Shortened URL','short-url-label').': '.makeshorturl().'</label><br/><br/>';
}

add_action('publish_post','makeshorturl');
add_action('publish_page','makeshorturl');
add_action('do_meta_boxes','shorturl_metabox');

Usage

If you did like to show off the shortened URL to your users simply insert this code where you want the short URL to show up:

<?php echo makeshorturl(); ?>

BONUS

Want a ready-to-use solution? Here’s the plugin version of the above code that will generate the shortened URLs on the fly for you to share. If you did like to call the functions from within the theme template, you can do so by using:

<?php echo wps_hook(); ?>

Note: Above tag is for the plugin only.

PS: The plugin can also show number of clicks on a shortened link :) per shortened URL

Download it!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

WordPress: Auto URL Shortening

Two example links of this simple functionality in action are:

1. http://www.meghantelpner.com/shop/?c=books

2. http://www.elmwoodspa.com/shop/

In the first example, you can click on one of Meghan’s books to see more information before deciding to purchase. If you click on “buy now”, you will be taken to her e-junkie store. Additionally, if you click on a specific book to see more information, you get a small navigation block at the top of the article that allows you to quickly browse the next and previous products. You may notice that if you click on one of the other submenus within her store, such as the Books/DVDs/Audio, that you will be taken directly to the Amazon affiliate link for that product. The client has the capacity to choose whether or not to link the product to an external link (Amazon, e-junkie, paypal) or whether or not to link to the full product page itself first, with a “buy now” button.

In the second example, you can click to see details/shop online which takes you immediately to Elmwood Spa’s online store.

I will be using the first example as a basis for the tutorial.

Plugins used: cbs_category_list, zem_nth (both optional) and upm_image

First you’ll want to set up some custom fields, depending on how you want your shop to function. For Meghan’s shop, there are instances where she links to external products via a buy now button. Other times, she’ll want to link to an external site without the buy now button. So I have created 2 custom fields, “link to this site” and “buynow.” If you link exclusively to Paypal links, you could name it paypal, or whatever is easy for you to remember. (As long as you adjust it accordingly in the article forms)

Now let’s take a look at one of the product pages inside textpattern:

1. The title that will appear on the shop landing page

2. The description that will appear only one the item is clicked on

3. This is the link that the thumbnail and title will link to if you put a link (full url) here, otherwise:

4. A buy now button will appear and will link to the full url pasted here (if a link is not placed in either field, the title and thumbnail will merely link to the full article page automatically)

5. Place the image id number here that you want to associate with the article (the thumbnail version of this image will appear on the shop landing page, while the full image size will show on the individual article page.)

6. Choose the appropriate section for your article, in this instance, “shop.”

7. Select the appropriate categoryfor the article (if applicable. You may not have a need for categories)

8. IF USING THE BUY NOW FIELD you must use the override form named shop_listing2 (I’ll explain below)

SAVE your article!

shop subnav

In the actual page template for the shop, the code that calls the shop submenu (books and guides, etc) looks like this:

<txp:cbs_category_list parent="shop" wraptag="ul" break="li" class="subnav" section="shop" showcount="false" class="subnav" activeclass="active"/>

Using the plugin cbs_category_list, this pulls a list of all of the categories with a parent category of “shop”, wraps each category in a list tag, wraps the whole thing in an unordered list with a class of subnav, and assigns a class of active on list items when they are active. Handy dandy! You don’t necessarily need to use this plugin if your shop does not need this type of subnav.

Ok, so how do we pull all of our shop items into the page? The article tag in our shop page template looks like this:

<txp:article listform="shop_listing" form="shop" limit="99" sort="posted asc"/>

So this tag basically says: on the landing page (or listform version of the page), display the articles using the form of “shop_listing”. If you’re looking at an individual article page, (i.e. an individual product page) display the article using the form “shop”. Limit the amount of articles shown to 99, and sort them by date of Posted Ascending.

The “shop_listing” form looks like this:

<div class="shop-item">  <a href="<txp:permlink  />"><txp:upm_article_image type="thumbnail"  class="shopimg"/></a>  <h3><txp:permlink><txp:title  /></txp:permlink></h3>  <span><a href="<txp:custom_field  name="buynow" />">BUY NOW</a></span>  </div>

Translation: the thumbnail version of the article’s image is being pulled from the “Article image” field in the article, and assigned the class of “shopimg” for styling purposes. Both the title and thumbnail are linked to the permanent link to the article (which will show the body/description of the product. The Buy Now button links to whatever gets put into the custom field named “buynow.” The shop-item css looks something like: .shop-item {float:left; margin:20px 25px 10px 0; width:175px; }

Alternately, if you want to get really nerdy, you could use the plugin zem_nth to tell every third (or whatever number) post to display with different class. I use it to apply “shop-item-last” (which has a margin-right of zero) to every third item , so the last item in every row doesn’t have any extra margin space on the right. You can choose to do your layouts with or without zem_nth. This is what my shop_listing article form really looks like:

<txp:zem_nth step="1" of="3"><div class="shop-item"></txp:zem_nth><txp:zem_nth step="2" of="3" ><div class="shop-item"></txp:zem_nth><txp:zem_nth step="3" of="3" ><div class="shop-item-last"></txp:zem_nth><a href="<txp:permlink />"><txp:upm_article_image type="thumbnail" class="shopimg"/></a><h3><txp:permlink><txp:title /></txp:permlink></h3><span class="register"><a href="<txp:custom_field name="buynow" />">BUY NOW</a></span></div><txp:zem_nth step="3" of="3" ><hr class="space" /></txp:zem_nth>

The “shop_listing2″ form (for products without a buy now button, linking externally) looks like this:

<div class="shop-item">
 <a href="<txp:custom_field name="link to this site" />"  rel="external"><txp:upm_article_image type="thumbnail"  class="shopimg"/></a>
 <h3><a href="<txp:custom_field name="link to this site"  />"><txp:title /></a></h3>
 </div>

This tells the title and thumbnail on the listing page to link directly (in a new window/tab) to the link that is found in the “link to this site” field shown in the image above, #3. You could also include the <txp:excerpt /> tag if you wanted to include an excerpt. If you want the article to appear this way (without the buy now button), you need to ensure that you are using the override_form in the article named “shop_listing2″.

Now that we have set up what the listing page looks like for product pages, let’s look at how the individual product pages look. If you will recall the article form we used:

<txp:article listform="shop_listing" form="shop" limit="99"  sort="posted asc"/>

We need to create a form called “shop” that will determine how the individual pages look once you click on the thumbnail/title.

The “shop” article form looks like this:

<p><a href="/shop">Back to Shop</a> |  <txp:link_to_prev>Previous Product</txp:link_to_prev> |  <txp:link_to_next>Next Product</txp:link_to_next></p>
 <div class="right"><txp:upm_article_image/><br /><span  class="register" ><a href='<txp:custom_field  name="buynow"/>' >BUY NOW</a></span></div><txp:body />

Translation: The tags inside the paragraphs set up a small subnav which allows the user to click through to the next/previous products. Then it puts the full version of the article image in a div labelled “right” (which I float right in my css), below that place a Buy Now button which links to the url provided in the “buynow” custom field. Then display the body of the article. You could of course format the tags however you want. (image on top with text below, etc). Individual product page pictured below:

individual product page

Using custom fields is a great way to allow the client (who doesn’t know how to code) to be able to add new items to the shop easily without having to see any textpattern or html tags, and avoid them forgetting to close link tags and add things like rel=”external”. Yay!

This tutorial assumes that you have textpattern installed and ready to go, and have a good grasp of the tags.

( Download the latest version of Textpattern here: http://textpattern.com/download )

Did I miss anything? If you need any more clarity or have any questions, please feel free to put them in the comments, and I will do my best to help.

Happy Coding!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Create a simple “shop” page in Textpattern

After a number of comments, and a trip to random.org, we finally have a winner! A big congratulations goes out to Cristalia Garcia as the winner of the Voices That Matter Giveaway! If you didn’t win, all is not lost! The Early Bird Special discount has been extended until May 21. That means if you register on or before May 21, and use the special FYC reader discount code (WBNBLGA), you will save a total of $250 off the ticket price!

Original Post:

The kind folks at New Rider have offered FYC readers a chance at a free pass to their upcoming Voices that Matter: Web Design 2010 conference!

What’s this conference all about? In their own words:

New Riders’ Voices That Matter: Web Design Conference, now in its fourth consecutive year, will take place June 28-29 in San Francisco and the timing couldn’t be better! Web design is undergoing an historic transformation: while the basics of HTML, CSS, and JavaScript haven’t changed, the new and evolving functionality in the HTML5 and CSS3 specs, the number of new ways in which people access the Web, and the rise of social media mean that Web designers need to know more than ever.

Don’t miss this opportunity to meet face-to-face with industry greats and discuss Web design’s most critical topics! We’ll open with a keynote address from Jesse James Garrett, author of The Elements of User Experience: User-Centered Design for the Web and close with a keynote address delivered by Steve Krug, author of the well known book Don’t Make Me Think and the brand new book Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems. From start to finish this conference will blow you away.

Enter to win a free pass (a $595 value) to the conference by commenting on this post (just say anything you like!) and we’ll pick one lucky commenter at random one week from today (Friday, May 14th)!

Bonus: Special Savings

All FYC readers can save $150 off the conference fee by providing priority code WBNBLGA when registering. Register before May 14th and save $250 as this $100 discount is combined with the early bird pricing!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Giveaway: Voices That Matter Web Design Conference Pass [Winner Announced!]

• No tricky mail server configuration
• Google’s spam filtering is excellent
• Free archive/backup of your email history
• Easy manual administration when necessary

Any language with IMAP capabilities in its core, standard library, or 3rd party ecosystem can connect to Gmail for email processing. If that language happens to be Ruby, it’s even easier thanks the the ruby-gmail gem by Daniel Parker. Check it out.

Installing

Easy peasy.

gem install ruby-gmail

Connecting to Gmail

Connecting up is quite easy, and there are two options for how to proceed. First, you can perform all your activities inside a block. The advantage of this is the library will automatically log you out at the end of the block:

require 'gmail'

Gmail.new(username, password) do |gmail|
  # send commands
end
# logged out

Second, you can store the connection in a variable and logout it explicitly when done:

require 'gmail'

gmail = Gmail.new(username, password)
# send commands
gmail.logout
# logged out

Managing Email

The mailbox method takes a label as an argument and returns an object which has access to email with the given label.

inbox  = gmail.mailbox('inbox')
urgent = gmail.mailbox('urgent')

Since inbox is such a common label to access, there’s a handy shortcut method:

inbox = gmail.inbox

Now that you have a mailbox object in hand, you can access its emails or get counts:

inbox.emails #  an array of all emails in mailbox
inbox.emails(:unread) # an array of unread emails
inbox.emails(:from => "phb@work.com") # an array of emails from PHB

inbox.count # how many emails in the mailbox
inbox.count(:unread) # how many unread
inbox.count(:from => "phb@work.com") # how many from PHB

You can also perform many tasks on an individual email:

email = inbox.emails.first

email.mark(:read)
email.archive!
email.delete!
email.label('urgent')
email.move_to('followup')

Sending Email

Creating and sending emails is also a breeze. Just like connecting you can use the idiomatic Ruby block method, or the more object-oriented approach:

# with a block
gmail.deliver do
  to "phb@work.com"
  subject "Not feeling well"
  text_part do
    body "I won't be coming in today."
  end
  html_part do
    body "<p>I <em>won't</em> be coming in today.</p>"
  end
end

# or generate message and send it later
email = gmail.generate_message do
  to "phb@work.com"
  subject "Not feeling well"
  body "I won't be coming in today."
end

email.deliver!

The library will take care of sending it out your Gmail account and even set the “From” header for you. Nice!

Try It

If you’re already using Ruby to build an application and you need it to send or receive email, there is little excuse not to let Ruby-Gmail do the heavy lifting for you. Give it a try!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Emailify Your App with Gmail and Ruby

Lifestreaming is the aggregation of all of your actions throughout the web in one place to present a complete picture of your digital life. There are several lifestreaming applications out there, and Storytlr was one of the first.

Storytlr was originally a closed source, hosted web application started by Laurent Eschenauer and Alard Weisscher in 2008. In October 2009 they decided to close the service and in December they open sourced the code.

Considerable community development has occurred since the project was open sourced, including many new plugins, bug fixes and features.

Installing Storytlr

Storytlr is written in PHP and based around the Zend framework. It is usually run on Apache, but works fine on lighttpd and Nginx. The current stable release is 0.9.2, although there is an RC 0.9.3 that works well. Additionally you can use the bleeding edge code on GitHub. I currently maintain my own version of 0.9.3 that has a few more features and plugins you won’t find in the core. You can find it here.

Since it’s coming out of a close source system, expect some rough edges and thin documentation. This is improving all the time with the growing wiki and the issues board. Installation is still one of those rough edges, but it’s fairly easy anyway.

For simplicity I’ll be using the 0.9.2 release from the Google Code site, but these instructions can be easily adapted to other versions. I’ll be doing just about everything from the command line, so if you don’t have shell access, be prepared to tweak things a bit.

Requirements

First, let’s make sure our server is compatible. 0.9.2 has the following requirements:

• PHP 5
• mcrypt
• PDO
• Tidy
• MySQL
• Zend Framework

An easy way to check compatibility is to use this script.

Most hosts have these extensions. The rarest one is Tidy.  For instance, Dreamhost does not run Tidy. If your host doesn’t have Tidy, you can work around it by using a different version with the htmLawed patch.

If you are missing Zend, that can be downloaded here. Make sure to put it in your PHP include path.

Getting Started

Now that you’ve got the requirements met, download the 0.9.2 file and unpack it into your root web directory.

jmhobbs@katya:/var/www/lifestream$ wget http://storytlr.googlecode.com/files/storytlr-0.9.2.tgz
--2010-05-07 13:33:05--  http://storytlr.googlecode.com/files/storytlr-0.9.2.tgz
Resolving storytlr.googlecode.com... 74.125.45.82
Connecting to storytlr.googlecode.com|74.125.45.82|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 8748114 (8.3M) [application/x-gzip]
Saving to: “storytlr-0.9.2.tgz”

100%[============================================>] 8,748,114    233K/s   in 36s

2010-05-07 13:33:41 (239 KB/s) - “storytlr-0.9.2.tgz” saved [8748114/8748114]

jmhobbs@katya:/var/www/lifestream$ tar -zxf storytlr-0.9.2.tgz
jmhobbs@katya:/var/www/lifestream$ ls -a
.  ..  feeds  flash  friendconnect  .htaccess  images  index.php  INSTALL  js  LICENSE  protected  storytlr-0.9.2.tgz  style  themes
jmhobbs@katya:/var/www/lifestream$

The Database

Now you need to load the database schema. The schema files is located at protected/install/database.sql. If you don’t have a database or user set up, now is the time to do that as well.

jmhobbs@katya:/var/www/lifestream$ cd protected/install/
jmhobbs@katya:/var/www/lifestream/protected/install$ mysql -u root -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 5515
Server version: 5.0.81-1 (Debian)

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> create database lifestream;
Query OK, 1 row affected (0.05 sec)

mysql> grant all on lifestream.* to lifestream@localhost identified by 'supersecretpassword';
Query OK, 0 rows affected (0.11 sec)

mysql> flush privileges;
Query OK, 0 rows affected (0.08 sec)

mysql> use lifestream;
Database changed
mysql> source database.sql
Query OK, 0 rows affected (0.00 sec)

(Lines Removed For Brevity)

Query OK, 0 rows affected (0.00 sec)

mysql> Bye
jmhobbs@katya:/var/www/lifestream/protected/install$

Configuration

Your last major step is the configuration file, which goes at protected/config/config.ini. Storytlr provides an example file with good defaults, so we’ll edit that. The key settings to change are:

• db.username
• db.password
• db.dbname
• security.cookie
• web.host
• web.timezone

jmhobbs@katya:/var/www/lifestream$ cd protected/config/
jmhobbs@katya:/var/www/lifestream/protected/config$ ls
config.ini.sample
jmhobbs@katya:/var/www/lifestream/protected/config$ cp config.ini.sample config.ini
jmhobbs@katya:/var/www/lifestream/protected/config$ vim config.ini

[general]

;Database connection settings
db.adapter=PDO_MYSQL
db.host=localhost
db.username=lifestream
db.password=supersecretpassword
db.dbname=lifestream

;Security
security.cookie = kg89y6gbval

;Caching
;cache.content = 1
;cache.metadata = 1
;cache.path = /tmp/cache/

;Web deployment settings
web.host=lifestream.velvetcache.org
web.path=/
web.redirect = 1
web.timezone=America/Chicago
jmhobbs@katya:/var/www/lifestream/protected/config$

The Fruits of Our Labor

At this point your lifestream should be working, open a browser and take a look.

Now we need to change our password, so go to the admin page http://www.example.com/admin and log in. The default username and password are admin and storytlr respectively. You can find that under Configure » Password.

There are lots of options to browse through, and I won’t cover them all, but I’d like to run through setting up a source. Sources are the core of lifestreaming, and there are lots of options to choose from. In the admin interface go to Sources and click Add next to a source you want to add, I’ll use Delicious in my example.

This should present you with a form asking for some information. Each source is going to be slightly different, but all should be pretty easy to understand. Fill that out and it should import what it can from that source.

There you have it! Add some more sources until your lifestream really fleshes out.

Keeping Current

The very last step, which is often overlooked, is updating your sources. The primary means for this is the PHP script protected/tools/update.php. This must be run from the command line with the name of the user to update. Here’s an example:

jmhobbs@katya:/var/www/lifestream$ php5 protected/tools/update.php admin
Memory usage on startup: 4997940
Memory: 5351904
Memory: 5351904
Updating source delicious for user admin [0/2] (5).... found 0 items
Updated 1 out of 2 sources in 1 seconds.
jmhobbs@katya:/var/www/lifestream$

It’s common to set up a cron job to handle these updates. It’s often important to put in full paths for your cron jobs. This example will update my sources every 10 minutes. You can learn more about cron here.

jmhobbs@katya:/var/www/lifestream$ crontab -e
MAILTO=jmhobbs@towncommons.com
# m h  dom mon dow   command
*/10 * * * * /usr/bin/php5 /var/www/lifestream/protected/tools/update.php admin
jmhobbs@katya:/var/www/lifestream$

Storytlr has lots more features and configuration options, I would encourage you to browse around and make your installation suit your taste. To see an example of a fully customized Storytlr installation, you can visit mine at http://lifestream.velvetcache.org/

Going Further

Storytlr is rich with opportunities to contribute. It’s fairly young and has lots of finicky little things to figure out, and it can always use one more plugin. Lots of stuff is in the works, including a much simpler installer which will make most of this article obsolete!

Documentation is in need of some TLC, and more eyes on the bug reports would be great.

To get involved visit the Storytlr Google Code site or hop onto Github and fork the project. Finally, you can also join us on Freenode IRC in #storytlr.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Meet Storytlr

To get started, register an @Anywhere application and get an API key. Then plug this snippet into your page:

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>

Now you can begin using any of the following features:

Auto-linkification of Twitter usernames

This is a convenient way to link Twitter usernames on your site to the appropriate user’s profile page on Twitter. The most basic usage looks like this:

<script type="text/javascript">

  twttr.anywhere(function (T) {
    T.linkifyUsers();
  });

</script>

Hovercards

A Hovercard is a small, context-aware tooltip that provides access to data about a particular Twitter user. It looks like this:

To enable hovercards on a page:

<script type="text/javascript">

  twttr.anywhere(function (T) {
    T.hovercards();
  });

</script>

Follow buttons

The feature name pretty much says it all. Let people follow Twitter users from your page. To enable it for user sant0sk1 inside a span with id of `follow-me`:

<span id="follow-me"></span>
<script type="text/javascript">

  twttr.anywhere(function (T) {
    T('#follow-mei').followButton("sant0sk1");
  });

</script>

The buttons look like this:

Tweet Box

Let Twitter users tweet from inside your webpage or web application. An example of using this on a div with id of `tweetbox`:

<div id="tbox"></div>
<script type="text/javascript">

  twttr.anywhere(function (T) {
    T("#tbox").tweetBox();
  });
</script>

User login & signup

This feature allows users to perform some of the authentication-required activities like following users and tweeting from your page. It uses OAuth and provides authComplete and signOut callbacks that you can hook into. It’s more complicated than the others so we won’t provide an example here.

Try it!

@Anywhere looks like a solid API that can provide immediate advantages over other solutions. If you need quick, easy and official Twitter integration on your site we highly recommend trying it out. Start with the official documentation from which we derived much of this overview. Then you can move on to the full API documentation which is (at the time of posting) in a preview state. Enjoy!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

A Brief Overview of Twitter’s New @Anywhere API

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery’s tux.

Underscore.js provides collection functions like each, map, include, and reduce. It makes arrays more powerful by adding flatten, uniq, and intersect. It extends objects with many useful functions like keys, values, functions, isNaN, and many more.

A few examples to whet your appetite:

Using the each function to write each array value to the console:

// object-oriented way
_(['John', 'Paul', 'George', 'Ringo']).each(function(beatle) {
    console.log(beatle);
});
// functional way
_.each(['John', 'Paul', 'George', 'Ringo'], function(beatle) {
    console.log(beatle);
});

Using the reduce method to round three numbers down and sum the results:

_.reduce([1.5,2,3.7], 0, function(memo, num) { return memo + Math.floor(num) });
// => 6

Using the pluck method to to extract just the names from an array of objects:

var beatles = [
  {name: 'John', dead: true},
  {name: 'Paul', dead: false},
  {name: 'Ringo', dead: false},
  {name: 'George', dead: true}
]

_.pluck(beatles, 'name');
// => ["John", "Paul", "Ringo", "George"]

The library weighs in at just 2.5kb once packed and gzipped, so there is little excuse not to take advantage of its offerings. There are over 60 functions included, the documentation on how to use each function is great, the source code is freely available on GitHub, and the library is completely DOM-free which means you can use it server-side as well.

Thanks to Jeremy Ashkenas and the folks at DocumentCloud for a great open-source library that we can all benefit from!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Open-Source Spotlight: Underscore.js

From the release post:

Now it’s even easier to build your own widgets or extend ours, whether you use the jQuery UI Widget Factory, the jQuery UI CSS Framework, or both. This release is a collective effort spanning more than 9 months with contributions from hundreds of developers, designers, testers and users.

Top Additions:

Though the release signifies the completion of major milestones, optimizations and additions, two things in this release really have me the most excited:

Autocomplete

For anyone who has tried to use one for the many autocomplete variants, they know just how annoying and/or difficult they were to work with. It seemed I always had to hack the plugin I was using just to get it to cooperate. Because of my experiences, I am super excited to see the jQuery UI team bring on, rebuild and fully support the Autocomplete plugin as one of the core UI plugins.

Widget Factory

I love working with jQuery Plugins and I extensively structure my websites by building little (or large) plugins to handle abstracted functionality. The issue that always came up was the idea of a plugin maintaining state, and having that state able to be altered at any time. The reworked Widget Factory has been abstracted into its own file, with no dependency on the jquery.ui.core.js file. This means plugin developers now have a design pattern they can follow to build stateful plugins for their projects.

I hope the release of the updated Widget Factory pushes jQuery plugin development further in a big way!

Congratulations

I want to wish a big congratulations to the jQuery UI team for all their hard work in bringing 1.8 to a releasable state.

Be sure to head on over to jQuery UI to download the latest version. Remember, it requires jQuery 1.4.2!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

jQuery UI 1.8 Released!