To do that, I wanted to think of a general solution, one that could be applied to my other projects. Even a framework agnostic solution. I decided I would write it completely in Javascript and communicate with the server in a conventional RESTful way. Doing a bit of research before starting out, I ran across the project of Jan Varwig called Rest In Place which did precisely the same thing. So I examined carefully his code, fixed some stuff and extended it to support all usage cases I wanted to cover, this is how BestInPlace is born.

Basically, BestInPlace makes possible to tag (via HTML classes and HTML5 data* attributes) any field that is going to be user-editable so that the script automatically converts it to an form input when the user clicks on it, with no further muss or fuss for the developer.  Of course, this field can take the form of a one-line text input, a textarea for longer texts, a select dropdown that will populate with your custom collection of options or boolean sort of data that works the same way a checkbox would, and allows value customization as well. Additionally, the script will trim and sanitize all user input, display server errors in case the format is not proper, it will also allow you to provide an external handler to activate the input.

Before getting into details.

SEE THE DEMO | SEE THE CODE

Installation

Simply copy and load the files from the folder the following JS files in your application (in the same order):

• jquery-1.4.2.js
• jquery.purr.js
• best_in_place.js

Add the following line to your onLoad block:

$(document).ready(function() {
/* Activating Best In Place */
jQuery(".best_in_place").best_in_place()
});

Installation of the Rails 3 Gem

Only add the folloging line to your application’s Gemfile and run bundle install:

gem "best_in_place"

You still need to load the onLoad block, jQuery.js and jquery.purr.js in your application, but you can use the generator to copy (and update when necessary) the best_in_place.js script:

rails g best_in_place:setup

Usage

First of all, you should write your controllers in a RESTful way and make sure they respond properly to a json request. Here you can see an example of how a standard update action should look like in a Rails app:

  def update
    @user = User.find(params[:id])

    respond_to do |format|
      if @user.update_attributes(params[:user])
        format.html { redirect_to(@user, :notice => 'User was successfully updated.') }
        format.json { head :ok }
      else
        format.html { render :action => "edit" }
        format.json  { render :json => @user.errors, :status => :unprocessable_entity }
      end
    end
  end

At the same time, if you want to perform server-side validations so that errors are displayed when users introduce invalid data, then the models should look something like this:

    class User < ActiveRecord::Base
      validates :name,
        :length => { :minimum => 2, :maximum => 24, :message => "has invalid length"},
        :presence => {:message => "can't be blank"}
      validates :last_name,
        :length => { :minimum => 2, :maximum => 24, :message => "has invalid length"},
        :presence => {:message => "can't be blank"}
      validates :address,
        :length => { :minimum => 5, :message => "too short length"},
        :presence => {:message => "can't be blank"}
      validates :email,
        :presence => {:message => "can't be blank"},
        :format => {:with => /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i,
                                :message => "has wrong email format"}
      validates :zip, :numericality => true, :length => { :minimum => 5 }
    end

Now all defined messages will be shown to the user if he introduces invalid data and the field will remain unchanged. Notice that messages will be displayed in a jquery.purr pop up. Take time to style it the way you prefer.

Options / Parameters

Best in Place will be wrapped into an html object (div/span preferred) with the following attributes:

• class = “best_in_place”
• data-url = Object Path
• data-object = Object name
• data-attribute = Object field
• data-type = “input”, “textarea”, “select”, “checkbox” (defaults to input)
• data-collection = “[[key, 'value'], [key, 'value'],…]” (a structured JSON containing all possible values in the collection in case of the select or a couple of values in case of a checkbox ["falsevalue", "truevalue"].
• data-activator = “#DOM-OBJECT”.Dom object that will convert the text into an input. In case it is not specified it will work by clicking on the text.

Beware: All attributes are assigned underscore strings.

If you are using the Rails 3 Gem, you only need to tag user in-place editable fields like this:

best_in_place object, field, OPTIONS

Params:

• object (Mandatory): The Object parameter represents the object itself you are about to modify
• field (Mandatory): The field (passed as symbol) is the attribute of the Object you are going to display/edit.

Options:

• :type It can be only [:input, :textarea, :select, :checkbox] or if undefined it defaults to :input.
• :collection: In case you are using the :select type then you must specify the collection of values it takes. In case you are using the :checkbox type you can specify the two values it can take, or otherwise they will default to Yes and No.
• :path: URL to which the updating action will be sent. If not defined it defaults to the :object path.
• :nil: The nil param defines the content displayed in case no value is defined for that field. It can be something like “click me to edit”. If not defined it will show “-”.
• :activator: Is the DOM object that can activate the field. If not defined the user will making editable by clicking on it.
• :sanitize: True by default. If set to false it will allow users to introduce html tags to the input/textarea.

Let’s  see now how to create user-editable fields by some examples. We’ll use a generic User show action, as I did in the Test Application.

Inputs

In regular HTML:

<span class='best_in_place' id='best_in_place_user_name' data-url='/users/4' data-object='user'
data-attribute='name' data-type='input'>Dominic</span>

Using the Rails 3 gem:

<%= best_in_place @user, :name, :type => :input %>
<%= best_in_place @user, :name, :type => :input, :nil => "Click me to add content!" %>
<%= best_in_place @user, :name, :activator => "#activator" %>

Textarea

In regular HTML:

<span class='best_in_place' id='best_in_place_user_description' data-url='/users/4'
data-object='user'data-attribute='description' data-type='textarea'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a lectus et lacus
ultrices auctor. Morbi aliquet convallis tincidunt. Praesent enim libero, iaculis at
commodo nec, fermentum a dolor. Quisque eget eros id felis lacinia faucibus feugiat et ante.
</span>

Using the Rails 3 gem:

<%= best_in_place @user, :description, :type => :textarea %>

Allowing html tags:

<%= best_in_place @user, :description, :type => :textarea, :sanitize => false %>

Select dropdowns

In regular HTML:

<span class='best_in_place' id='best_in_place_user_country' data-url='/users/4'
data-object='user' data-collection='[[1,"Spain"],[2,"Italy"],[3,"Germany"],[4,"France"]]'
data-attribute='country' data-type='select'>Germany</span>

Using the Rails 3 gem:

<%= best_in_place @user, :country, :type => :select, :collection => [[1, "Spain"], [2, "Italy"],
[3, "Germany"], [4, "France"]] %>

Checkbox values

In regular HTML:

<span class='best_in_place' id='best_in_place_user_receive_email' data-url='/users/4'
data-object='user' data-collection='["No thanks","Yes of course"]'
data-attribute='receive_email' data-type='checkbox'
>Yes of course</span>

Using the Rails 3 gem:

<%= best_in_place @user, :receive_emails, :type => :checkbox, :collection => ["No, thanks", "Yes, of course!"] %>

Wrapping up

Best In Place will make easier your application interfaces by letting users modify in-line every content. At the same time, it will control user input and display errors. Let me know if there’s something you would do different or don’t hesitate to give me a pull request if you contribute anyhow.

1. I have a Github public repository to share my theme (not like anyone is interested anyway)
2. I have another private repository in my server to store all the changes of the theme and actually update it.
3. I have a local repository in my computer for the theme.
4. The theme is actually stored at my_server_root/my_wordpress_path/wp-content/themes/bernatfarrero/

Let’s start out creating the local repository in your local computer:

mkdir bftheme && cd bftheme
scp -r my_server_root/my_wordpress_path/wp-content/themes/bftheme .
git init #We initialize the local repository
git commit -a -m "Initial commit" # And we make the first commit

We’ve just made a local copy of our theme and we’ve set up a local Git repository. Now let’s synchronize it with our server’s repository. In my server I have a special directory for all my repositories called repo. So, now I have to login via ssh to my server and do the following:

cd my_server_root/repo #this is were I store my repositories
mkdir bftheme.git && cd bftheme.git
git init --bare
git config core.worktree my_server_root/my_wordpress_path/wp-content/themes/bftheme
git config core.bare false
git config receive.denycurrentbranch ignore
vim hooks/post-receive #Open this file with your favorite editor and write inside it:

#!/bin/sh
git checkout -f

#Save it and close it
chmod +x hooks/post-receive #Give it running permissions

The denycurrentbranch set to ignore (or warn) basically makes the server not complain for having uncommitted changes on the remote repository. Even so, as we only want it to mirror our local changes, we don’t care. We’ve set the post-receive hook so it resets our repository to the latest changes received by our last push. Now in our local computer, we have to tell our repository who will be the remote:

git remote add origin username@host.com:repo/bftheme.git
git push origin master

And that’s it. We’ve established the connection between our local repository and the actual changes made public in our blog. In order to deploy your changes just do:

git push

And you should see them right away. If you do not, there will be some problem with the paths, or make sure you don’t have any caching plugin (like Super Cache) activated at the moment. If you are like me and want to push every now and then the changes to Github, you can do (in your local computer):

git remote add public git@github.com:bernat/blog.bernatfarrero.git #In my case
git push public master

You can do that every once in a while. In case you don’t want to push all commits to Github because you are shy to show a zillion of irrellevant changes, what you can do is set the Github repository as origin and the other as, say, deploy. Every 10 commits or so, you can do (in your local computer):

git rebase -i master~10

pick A
pick B
pick C
pick D

replace all the pick by squash (except for the first one) and then give it a nice message name. This way you assemble one big commit with the changes of your last ten commits. Then, to push it to Github, you can do:

git push origin master #In case you set Github remote as origin

This way you will push a bigger and more controlled set of changes to Github and only after a while. In the meantime, to see your changes in your actual blog you would just go

git push deploy master

This is how I fixed it, in case it is useful to someone else. I’m running MacOS Snow Leopard 10.6.4 on a Macbook Pro:

First I created another profile for Thunderbird. The profile manager is launched by this command [you must type this in your terminal]:

/Applications/Thunderbird.app/Contents/MacOS/thunderbird-bin -profilemanager

Now starting with the other profile it worked just fine, so I figured it must have been something on my profile that got corrupted in the upgrading process. What I did next was to copy all the files in my old profile folder to the new one. Remember that the profiles are stored in the folder ~/Library/Thunderbird/Profiles/ [the ~means the home directory]. In this process I realised what was the problem: the file compreg.dat.

Usually this file regenerates itself with the new configuration, but for some reason this time did not. So all I did to fix the problem was to replace this file for the new one of the new profile. And that was it, it worked again! You can also copy all your folders and files of the old profile to the new one except for this single file. Be aware to make backups of the folders before trying anything, or you will loose all your mail data.

Impaired/disabled people, users accessing through different architectures, platforms or reading software, machines trying to classify your webs, spiders, search bots, they are usually denied access to most websites content. I find it to be specially outraging for impaired people, since they are no less citizens nor content consumers than others and yet they’ve got no other alternative of access.

Sadly enough, if you are just a normal content creator and try to understand what the WCAG2 regulations are about, you will probably end up crazy. In my real life, I try to tackle accessibility as a philosophy for doing stuff. Most of the principles are the same my parents told me when I was a kid: Tidy stuff up, be organized, be clear,… If I create some content, I’ll try first to express it clearly and organize it (index, sitemaps, categories, tags, clear titles, beautiful permalinks). When that’s done, I’ll try to give as many ways of access to it as possible (HTML Standards, RSS feed, MP3 reading, etc.). Of course, I’ll take it into account in all details I code, for example if I insert an image I’ll provide it with an alternative description (in case someone can’t see it, or it is not rendered). If I post a link, I’ll provide it with a title (so it displays a tooltip indicator of where I’m taking the user). If I insert a script, I’ll wonder and handle the usage-case in which the user can’t interpret it. All of this should not be considered once I finishing my work, but right away while I’m doing it. As my mother used to tell me, stuff is extremely easy and simple when you address it right away and you make it become a habit, if you leave it for later, it will pile up and be an unbearable burden.

All this thoughts came to me today while I was thinking of the nice and clean design of Marcelino Llano’s website (he is a user experience engineer). Why not all blogs give the possibility to listen to the posts instead of reading them? After all, it takes nothing to read the post after writing it, you do it anyway to check your spelling… I’ll start with my own =)

I had the idea of creating this podcast after being repeatedly disappointed by the little choice of podcasting we have in Catalunya. I’m kind of addicted to many American and British podcasts and I always thought I’d like to have some of those in my own language… so what the hell, I talked with some colleagues, Jordi and Masumi, and they (surprisingly) found the idea interesting, so that’s how Semàntic was born, in our uni’s bar. We’ve only recorded 4 episodes but it has already shown some success. People in and out of our university is subscribed and follows our episodes. We got our feet wet quite unprofessionally, but we’re improving over time, and we hope to do a lot more!

Of course, we have a Rails3 website, a Sinatra Wiki (ingeniously built by Jordi), we coordinate ourselves through Talker and record with the help of some Samson unexpensive condenser microphones.  So if you’re interested in technology and computer science, and you understand Catalan of course, don’t hesitate to subscribe to Semàntic Podcast!

Same stuff happens with GarageBand. Today we recorded a 40minutes podcast episode with GB and when we were done, happy and satisfied with the episode, preparing stuff to get back home, we happened to go “Save as” and, wow, all the “magic behind the scenes” of Apple slapped in our faces and the .aif file of the recording got deleted forever. Now, if there’s any notion any software engineering or user experience engineer should ever have clear from the start is interface metaphors are meant to be accurate. That is, when a user click “Save”, she is probably not looking forward to delete the whole damn thing. Have a look at the endless thread for this problem at Apple’s Garageband forum.

But it all comes from the same principle of Apple, the principle of they controlling everything and users just wowing at the company’s wonders and playing their sheep role, doing baby-like limited options and sticking to them forever. We developers are given a couple of more options and a thousand of more rules to follow but that’s it. This is Steve Job’s concept of freedom.

Well, it turns out I don’t need anyone to manage my work, I want to write my software and give it, or sell it the way I want. I want to use programs and save the stuff when and where I feel like. I’d rather stick to my old-looking but reliable interfaces.

Dear Madame/Sir

I subscribed to your service of online backup approximately one week from now and since then I haven’t been able to perform a single backup yet. I have to say that the program you offer for MacOS is one of the worst pieces of software I’ve dealt with recently. It is not usable and it is not smart. It is painfully obtrusive, it slows down my computer, it eats up more than 9Gb of space from my disk leaving my system out of temporal and virtual memory. And it offers almost no options for customization… Instead of dealing with the files to backup in small quantities, and according to the bandwidth and the ability to send them to your servers, it tries to deal with them all from the start, encrypting the full stack and leaving the computer utterly KO.

I’ve used other online backup services before (such as Dropxbox), and they offer software way more efficient and smart for dealing with backups. Coming from EMC I thought Mozy would be trustworthy, it turns out I was wrong. I request the cancellation of my account and the refund of my payment. I hope that at least customer service proves satisfactory.

Yours faithfully,

Bernat Farrero.-

The answer to this was: Go to your panel, complete the questionnaire and cancel your account. No word about the refund. So don’t be misled by their low prices, it will make you waste your time and money.

Update: At the end, two weeks later, I did receive the refund. I lost 1,10€ in the transaction, but I’m satisfied enough =)

Here I’d like to talk about how simple it has become to integrate unobtrusive jQuery to a Rails app. Let’s use as an example a system of comments. I’ll create a simple app to create YouTube like comments:

Start typing in your teminal:

rails myCommentsApp
rails g resource Comment name:string body:text
rake db:migrate

Then we have to include the jQuery library and the jQuery driver file and place it inside /public/javascripts/ (or grab the helpers generator of Code Officer and do it automatically if you wish).  Now remove the  javascript_include_tag :defaults in the layout and add the following includes:
/app/views/layouts/application.html.erb

javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"
javascript_include_tag "jquery-rails.js"

Now let’s add some logic to our program.  We’ll start out with an index action that will get all the comments:
/app/controllers/comments_controller.rb

def index
    @comments = Comment.all
    respond_to do |format|
      format.html # index.html.erb
      format.rss
    end
  end

And the views for the index will look like this:
/app/views/comments/index.html.erb

<span id="comments_count"><%= pluralize(@comments.count, "Comment") %></span>
<div id="comments">
  <%= render :partial => @comments, :locals => { :list => true } %>
</div>

<hr />

<div id="comment-notice"></div>

<h2>Say something!</h2>
<% form_for Comment.new, :remote => true do |f| %>
	<%= f.label :name, "Your name" %><br />
	<%= f.text_field :name %><br />
	<%= f.label :body, "Comment" %><br />
	<%= f.text_area :body, :rows => 8 %><br />
	<%= f.submit "Add comment" %>
<% end %>

Notice that the new attribute remote is all we need to worry about when creating a form that will submit with Ajax. Rails 3 works with HTML5 attributes, so it only adds the attribute data-remote=”true” to the form and that’s it, the jQuery driver will handle the rest.
We’ll create a partial for the comments:
/app/views/comments/_comment.html.erb

<%= div_for comment do %>
  <span class="dateandoptions">
    Posted <%=time_ago_in_words(comment.created_at)%> ago<br />
    <%= link_to 'Delete', comment_path(comment), :method => :delete, :class => "delete", :remote => true  %>
  </span>
	<p><b><%= comment.name %></b> wrote:</p>
	<br />
  <%= content_tag(:p, comment.body, :class => "comment-body") %>
<% end %>

So now let’s add the fireworks! That is, the asynchronous creation and deletion of comments along with some trendy effects. We come back to the CommentsController and add the actions:
/app/controllers/comments_controller.rb

 def create
    @comment = Comment.create!(params[:comment])
    flash[:notice] = "Thanks for commenting!"
    respond_to do |format|
      format.html { redirect_to comments_path }
      format.js
    end
  end

  def destroy
     @comment = Comment.find(params[:id])
     @comment.destroy
     respond_to do |format|
       format.html { redirect_to comments_path }
       format.js
     end
   end

And we are done with the logic part! A few javascript lines will end the work:
/app/views/comments/create.js.erb

/* Insert a notice between the last comment and the comment form */
$("#comment-notice").html('<div class="flash notice"><%= escape_javascript(flash.delete(:notice)) %></div>');

/* Replace the count of comments */
$("#comments_count").html("<%= pluralize(Comment.count, 'Comment') %>");

/* Add the new comment to the bottom of the comments list */
$("#comments").append("<%= escape_javascript(render(@comment)) %>");

/* Highlight the new comment */
$("#comment_<%= @comment.id %>").effect("highlight", {}, 3000);

/* Reset the comment form */
$("#new_comment")[0].reset();

/app/views/comments/destroy.js.erb

/* Eliminate the comment by fading it out */
$('#comment_<%= @comment.id %>').fadeOut();
/* Replace the count of comments */
$("#comments_count").html("<%= pluralize(Comment.count, 'Comentari') %>");

Finish! That’s all the effort you need nowadays to a create a Web 2.0 fashionable feature such as this one. Of course, you need some styling with CSS, and you would need tons of more things in the real world (such as antispam, authentication, something to comment about…) but that’s the part I chose to talk about today!

I pushed myCommentsApp to Github in case you want to have a closer look (or download the zip version).

You might be interested in checking out my script for letting user in-place edit your application contents.

Our findings were quite interesting, and I will sum them up in the following points:

Our code (of Jordi and I) is now public in Github and can be used by anyone (read the REAME). The important files are SquareTown.java, where we implement the whole problem and Main.java, where we execute the experimentation (pay no attention to the code of the Main,  due to the last-minute policy of coding projects for university, it is quite filthy). The project’s final documentation can be found here (in Catalan).

Update: We got a 8/10 for the project.

However, money does not appear from the void, there must always be a loosing part. And that’s the point of my article. As the ways of value creation change, society should change with it or at least understand what the change is all about if people do not want to be fooled. The current economic meltdown is nothing but us not understanding the model of value creation. Now as ever, our ignorance is their allowance to do it.

IT is my field, and it is clear to me the role information is taking in value creation. Information is crucial for competition, and I’m not talking about market’s information (that is obvious), but also the information of every step of any firm’s value chain. Take, for instance, logistics. The fact of controlling where your trucks are, how they move, organize the routes, the deliveries through information systems have improved dramatically the business efficiency and reduced final costs (See Virtual Value Chain). To the point that it intrinsically determinates who takes the markets. It’s fun to see how the classic value chain model of a firm is getting covered by so many transversal layers that, at the end, it makes no sense whatsoever. Someone could just think of changing the model, though getting stuff simple and readable has never been the aim of Economics.

Of course, in recent years this revolution of the way firms learned to use information took place, precisely, within the business sector, away from normal people. Business actors learned all ways to gather information of their own processes and activities and obtain value from it. Indeed, it couldn’t take long ’til someone realized this same technique could be applied on people.

Thus were born the “free” services delivered over the Internet. Basically, we’re given a new way to perform our normal activities, all through their services. Google probably deserves the first place in this new ranking of  business, fully devoted on gathering huge amounts of personal data, studying and transforming it to valuable information. Facebook is just another simple example (over $10 billion worth of stock value) of a company fully devoted to it. One could think these companies were a bit lost in the beginning, as Twitter has proved over the past years (though listen to Gary Vaynerchuck), they knew all of this data would proof profitable and valuable somehow in the future but didn’t quite know how. Now they surely do.

Marx couldn’t think of this new era of value creation, though his principles remain the same. Some people still take profit of others ignorance and “alienation” to make money out of it. Most people still don’t understand the value of information, and would fill out or answer any survey without knowing how valuable are those minutes to a company. At the same time, people use Internet services happily thinking everything is free and naively give up all their personal data that will be acquired after by all sorts of companies with all possible aims. In other words, privacy is no longer a fundamental personal right, but also a tradeable commodity that people is selling out for FREE.

Information has already become the exchange unit of value nowadays. The specific description of the way we go to the toilet is worth money and if we make it public to one of these companies I promise they’ll find someone interested in buying it. If you are prepared to give out all this information for free, it’s up to you, though just be aware of it, and think businesses are out there to increase their profits, not give stuff for free.