Ricodigo's blog

We write delicious code.

Is Facebook Turning Into the New Biggest Content Farm?

Lately, if like me you do a lot of searches on Google, you’ve probably stumbled upon top results pointing to Facebook and that are nothing but short replicas of a Wikipedia article. As a simple example, a search for French aviator Louis Paulhan will return the wikipedia page first and then in position 4 or 5 will appear the Facebook page about Louis Paulhan:

There are many more examples, just try any Wikipedia article title and you’ll get a meaningless result pointing to Facebook. I say meaningless because these are just short blurbs of Wikipedia article with no additional information or comments. It’s a complete waste of time to click on these results and to add insult to injury, these Facebook pages are sometimes plastered with ads.

Can you imagine if Google were doing the same thing? Content farming Wikipedia articles and positioning them on top with ads? Why should Facebook get away with it? I’ve always been annoyed by this issue but didn’t think anything could be done about this problem (except waiting for googlers to fix it).

Yesterday, I got some hopes when I saw Matt Cutts replying to @wycats here:

Let’s hope they can act on it. Funny thing is that if they don’t do anything they’ll be accused of being easily gamed and if they do act on it they’ll be accused of censuring Facebook results on their webpage…

An Alternative to Attr_accessible to Keep Updates Safe

If you’ve read the news today on HN, someone has been pushing commits to the rails repo by using a mass assignment trick. The problem is now fixed although the drama is still ongoing.

There’s been a great proposal by wycatz posted here. We do it another way using mongoid_ext’s safe_update method that you can check here, this is how it looks like:

module MongoidExt
  module Update
    def safe_update(white_list, values)
      white_list.each do |key|
        send("#{key}=", values[key]) if values.has_key?(key)
      end
    end
  end
end

It’s just simple white-listing but it’s very explicit and straight forward to use. This is what goes into the update method in shapado for example:

 @question.updated_by = current_user
 @question.safe_update(%w[title body language], params[:question])

So only the params specified in safe_update are being saved. If I add a new field to the model, I have to explicitely add it to the safe_update method, otherwise it won’t get saved. It requires a bit of extra work but the good thing is that I know at all time what’s being sent and updated everytime I look at that method and it forces me to maintain it correctly. It’s not incompatible with scaffolding as it could still add the default fields to safe_update on generating the controller methods.

Update: As reported in the comments and on Twitter by DHH himself, using slice on update_attributes would have the same effect. So you could just do:

@question.update_attributes(params[:question].slice(:title, :body, :language))

Easy Tooltips With jQuery UI

There are tons of fancy tooltips plugins available. However, thanks to the position method of jQuery UI, you may not need any of these (if you’re already using jQuery UI) as I’ve found out while adding tooltips to the next Shapado.

One of the ways to do this it to just add a div that will contain the text of your tooltip, in this case we’ll just give it the class ‘tooltip’.

<p>Show me that cool <a class='special'>tooltip</a>.</p>
<div class='tooltip'>
  <div class=arrow>▲</div>
  <div class=text>This is so cool</div>
</div>

And then add some JS:

$(document).ready(function(){
  $('.special').hover(function(){
  $(this).next('.tooltip').show();
  $(this).next('.tooltip').
    position({at: 'bottom center', of: $(this), my: 'top'})
});

What we’re doing here is that when the user hovers over the link, we show the tooltip div and position it at the bottom of the link using the jQuery UI position method.

$('.special').mouseleave(function(){
  $('.tooltip').hide();
});

And then we just hide it when the mouse leaves the link. You could also set a timer to close it or add a button inside the tooltip to close it manually, this is useful if the tooltip contains some medias such as a youtube video or links.

Now we just add a bit of styling and that’s it!

.tooltip{
  text-align: center;
  color: black;
  display: none;
  position: absolute;
}
.tooltip .text{
  background-color: black;
  color:white;
  margin-top: -15px;
}
.tooltip .arrow {margin-bottom: 8px;margin-top: -5px;}
You can obviously add more or less styling to your liking.
Now show me that cool TOOLTIP!
This is so cool

You can read more about jQuery UI position here

A Preview of the Next Shapado and What’s to Come

Lots have happened since our latest release in September that included a complete redesign and other cool features such as “reply by email”, CSS custom themes, mobile UI and more.

This time, for the new 4.1 release that is to come, we’ve focused on fixing bugs, polishing the UI and added a few new features that we will discribe in various blog posts.

For now, I’ll show you a few screenshots of the new index page, it isn’t set in stone yet but it already looks much more polished than it used to.

Full Size

One thing we want to improve is usability. To that end, we are going to add more documentation in general directly in the user interface. For starters, we’ll be using fancy tooltips that show information about various UI elements. As you can see in this screenshot, when you hover over a tag, you will see a description of that tag, an icon (if it has one) and a link to follow all questions with that tag.

Full Size

We’ve added tooltips to users links too so you can quickly get an idea of who a user is and follow that user in a single click.

Full Size

Finally, we’ve also added new icons and improved the overall style of the app. For example, this is what the new badge widget looks like.

Full Size

In other news, we are now officially incorporated as a US company, so Ricodigo Inc is now a reality! We’re also working on the payment system with Stripe.com to make sure we offer the best paying experience possible.

That’s it for now, but we will keep blogging about all the new improvements that will come with the new release (including an awesome new styling system that will allow users to completely redesign their group, including the HTML, CSS and JS!). In the meantime, scroll down this page, move your mouse and let your creativity flow :) (Courtesy Paul Irish and Mr Doob)

Shapado 4.0 Released!

We are very happy to announce today the new release and deploy of Shapado 4. We know it’s been a long time since our latest feature release but do know we’ve put a lot of hard work and dedication into our craft to make Shapado the best Q&A platform around.

As you may have noticed, we’ve done a complete overhaul of the design and added many new features. It is hard to decide when exactly to release such a big version change, there are always more bugs to fix and more features to add. For now, Shapado hosting will remain entirely free until all the outstanding bugs we haven’t catched so far are fixed. Rest assure though that we will always have a free hosting offer and that Shapado as a software will always remain Free and Open Source for all.

The design: Now let’s get to the meat, what’s new in this version? Well first, the new design done by @dgfrancisco. We don’t want Shapado to be a clone of anything but to be its own software, with its own personality and style. We want it to be unique in design and unique in features. We hope you like it as much as we do. We’ve also made it flexible enough so you can have a two column layout instead of three or do your own theme without even knowing CSS.

The features: On the features side, we added many of them and we will blog separately about each. That being said, let me introduce you to the biggest features of this release. First and foremost, Shapado now has a real-time UI, this means new answers and questions will appear automatically on your browser with no need to refresh. Making the site more fun to browse, more instant and more interactive. We also have added the ability to answer questions directly from your email client so you don’t have to sign in to Shapado. Each user will also get personal feeds of questions that are of interest to them in order to make their experience on the site more interesting and curated.

Here is a list of the most important changes:

  • WebSocket: Shapado now has a live UI that updates itself automatically as questions, answers and comments get added
  • Bounties: Offer karma points in exchange for an answer to your question.
  • CSS themes: Easy interface to modify each css property
  • Connect/merge social accounts: Merge your facebook, twitter and other social accounts.
  • Facebook app: Embed shapado inside your facebook page.
  • Invitations: Invite your friends.
  • Complex search: Search by author, tag, date and more.
  • Activities: See a list of latest activities.
  • Save favorite answers: Find your favorite answers quickly
  • Follow ups: Create new questions out of an answer or even a question.
  • Personal feed: Curated list of questions, personal feeds will only show question you follow.
  • Friend suggestion widget: Get suggestions to follow users you may know or tags you may be interested in.
  • External widgets: Show widgets on your blog so that your users will ask questions from your blog.
  • Custom html widget: Show custom html in your widgets.
  • For admins: Post activities to twitter, for example all activities of this site are posted on this account.
  • Reply by email: Users can now answer questions directly by mail.
  • Custom access: Pick what user can use to sign in (email, openid, facebook, twitter etc)
  • Redesign: Read above.
  • Mobile ui: shapado.com/mobile
  • Save search: When you search for something, you can save that search so that it will appear down your personal feeds.
  • Attachments: Attach files to questions and answers.
  • https: Surf Shapado securely.

Last but not least, Shapado is now localized in English, German, Dutch, French, Spanish, Portuguese, Macedonian, Malay, Italian, Interlingua, Finnish, Galician, Belarusian, Russian, Danish, Persian, Tagalog, Simplified Chinese and more to come. You can contribute to the translation effort thanks to translatewiki here.

Here are some nerd stats of all the changes that went into this release:

 $ git diff --shortstat 3.x..master
 1800 files changed, 43721 insertions(+), 41472 deletions(-)
 $ git log 3.x..master --oneline | wc -l
 1956

We hope you like it and, as usual, report bugs on shapado.com and get the source on gitorious.