On startups pressure manifests itself in lots of ways: cashflow rollercoasters, negative market metrics, failing to meet deadlines, difficulty to find good people to work with, team disagreements, board discussions, investor pressure, etc.

Most of this problems are solved by two main actions:

1. Control communication, do not reveal anxiety or caos, keep your cards for you.
2. Make a fast decision whether to persevere with all your strengths or decisively implement a radical change.

By the time, dealing with extreme tension makes one develop patience, tolerance, diplomacy, self-cheering, optimism and, most specially, means learning to be self-satisfied by your work, not requiring others neither to save your ass nor to recognize your efforts. Unfortunately, for a lot of people it means lots of trouble in their personal life too…

I find specially interesting the case of Richard Moross and MOO.com. They started out by partnering flickr, which made them global right from the early days. At the time, they were sending their fancy boxes and business cards everywhere in the world from their headquarters in London. After some time, they had gathered enough data to analyse what countries were showing greater traction. That seems to me a very Lean approach to internationalization taken by Moross. From their business model perspective, their strong focus on developing key partnerships initially and using their $5M VC money to give away freebies in exchange for critical mass proved to be a successful strategy.

The top 1 country was, indeed, the USA. So, after two years, they established there they second base of operations, at Rhode Island. Today MOO.com is one of the 10 best companies in UK according to the Guardian Newspaper and they have almost a hundred employees.

[talking about types of founders] The big difference between hackers and business guys, at least in the beginning, is that what you need is hackers and not business guys.

When you are young, you finished school, it is the best time to invest. There’s time to cash in later. Do something hard, take a work where you can learn, start a business. Don’t satisfy yourself by doing something you know you can do.

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 { respond_with_bip(@user) }
      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.

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.