In place editing with Javascript, jQuery and Rails 3

Introduction

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

Read the rest of this entry »

Tags: in-place-editjavascriptjqueryrails 3UX

How I manage the WordPress theme with Git

I thought it might help somebody the way I’m currently managing my WordPress theme. First of all, I have to say it would be better to have an actual WordPress installation in my localhost, so it would be easier trying out changes (on themes and plugins) before committing them. I’m just too lazy for that, so I’d rather have only one running installation of WordPress on my server and a moving git repository for the theme alone. So this is how I do:

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

Tags: gittwo remote repositorieswordpres githubWordpresswordpress theme

Thunderbird crashing on start up

Thunderbird has always been my favourite email reading program, though lately it seems like every time I upgrade to its new version something bad happens. This time the program would not start anymore. The icon shook for a while, the white light lingered some seconds, and then it faded away. Even if I rebooted my computer it wouldn’t work, neither would if I regenerated the preferences file ~/Library/Preferences/org.mozilla.thunderbird.plist.

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.

Tags: mozilla thunderbird bugthunderbird crash

My idea of accessibility

Make stuff accessible! This has become a general dogma in the web. Rightfully so. This is particularly true when working for public institutions, since they are bound by law to be accessible from as long as 2002. And yet, if you do a tour through the websites of councils (Ajuntaments), province administrations (Diputacions), ministries and so on, it will only make you laugh (or cry). It is a law no one knows how to enforce.

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 =)

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Tags: accessibilityread postscreen readerswcag2

Semàntic Podcast

I haven’t been particularly active recently, I’m actually preparing myself for the last exams I (might) ever do in my university. Tough stuff! Nonetheless, I’ll be back on (working, learning and posting) next month! In the meantime, I’d like to present the new podcast in which I happen to participate. It is called Semàntic. Unfortunately for the English reader, it’s only in Catalan (my native language) and can be found in http://semantic.cat.

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!

Tags: catalan podcastComputer Scienceit newssemàntic podcast

Apple’s autosaving software

One of the things I hate the most on software makers is when they treat all users as if they were dumb. This is the case of Apple software. Every time I use iMovie to make a recording I spend some time worrying about where the actual stuff is stored at every point. The program is supposed to be so “smart” that duplicates your videos to the local iMovie library and then it saves the project and your modifications automatically, “magically”. Theoretically without you having to worry about it whatsoever and only having to wow at every new beautiful feature you come across. However, the opposite is true, and factual evidence is easily noticed when searching for “imovie lost project” in Google and finding tons of frustrated folks (i.e: this is one, this is another, and yet another, …).

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.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Tags: apple software policygarage band lost fileimovie lost project

Don’t use Mozy!

Are you looking for an onlike backup system for your Mac computer? Well, let me give you a piece of advise: do not use Mozy! Yesterday I sent this email to their customer service after fighting for a week with their program and their support FAQ.

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 =)

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Tags: mozy problemsonline backup

jQuery and Rails 3: A mini tutorial

As most of Rails developers, recently I’ve been through a process of unlearning all concepts of older versions of Rails and learning again the new ones of 3. But hey! I must admit that so far it’s been more pleasure than pain as things only get simpler and more natural than they used to be!

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.

Tags: ajaxcommentsjqueryrails 3tutorial

Empirical analysis of local search algorithms

Last week in Artificial Intelligence (5th year’s subject in FIB, my university), we worked in a project analysing the empirical differences among some local search algorithms. We were given AIMA, an AI Java framework, and a problem to solve with those algorithms. The problem consisted basically of creating optimal K bus routes in a squared city (called SquareTown) for a randomly generated set of P bus stops. By optimal they meant minimal cover distance including all stops and minimal difference between the distances of every two consecutive stops. The algorithms to be used were Hill Climbing and Simulated Annealing. The full formulation of the problem can be found here (in Spanish).

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.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Tags: artificial intelligencefibhill climbingiajavalocal search algorithmssimulated annealing

Thoughts on virtual value

Over the time, the concept of value in our society has evolved in ways none of the pioneers (from Adam Smith / Ricardo to Karl Marx) would have possibly imagined. Conversely to what Marx argued, value keeps no longer proportion with labor [of production]. At the contrary, now value takes the form of all possible shapes but those related to production. Starting with banks who magically create money as loans. We’ve seen how hedge funds and investment groups make money out of lots of NOTHING by just moving virtual debts around (as mortgages). Others make money just by buying and selling huge amounts of currency among different countries. No real economy here, no goods produced, no value added, and yet money seems to appear from the void.

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.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Tags: free internet servicesit economicsvalue creationvirtual value