Ricodigo's blog

We write delicious code.

New Release of AngularJS Scaffold

AngularJS Scaffold is a ruby gem that makes it possible to use the traditional rails scaffold scripts to build a 100% AngularJS app automatically using Twitter Bootstrap to make the app look good by default. Read more here.

This new release 0.0.23 brings support for coffeescript thanks to Ken Burgett, updates to the latest angularjs, twitter bootstrap and underscorejs libs thanks to Ezequiel and many bug fixes.

Just run:

gem install angularjs_scaffold

Or fork away here.

Happy hacking!

French Government to Vote Law Banning Linking to Press Articles

The press has been fighting Google for years in France. What they demand is getting paid to be indexed by Google even though most of them already get paid through Google Adsense and other exclusive ads. Given that they lost their battle to make Google pay, they now want to create a new kind of copyright called Lex Google or “droit voisin pour les éditeurs de presse” that would make it illegal to link to their articles without paying for each of them.

Google replied that this law would kill the internet and how any search engine work, if search engines had to pay for every single link they index, they couldn’t exist at all. So, if this law passes, Google warned that they would stop indexing sites that want to be paid. This outraged the French press who called Google acting like ”multinational feodalism” (yes, really).

A voice of reason from slate.fr did agree with Google though: ”This is a total aberration: sites spend fortunes to be better indexed by Google, and they would like Google to pay them? It’s a rethoric that doesn’t make any sense. Or it could just be typical lobbying.

The last thing this country needs is more copyright laws and more state restriction on businesses. Here’s hoping this law doesn’t pass.

Discussion on HN

/via Owni.fr in French

Announcing the Release of AngularJS Scaffold

If you’re a rails dev interested in using AngularJS on the client than this gem is for you. Basically, it makes your rails app return only JSON. Just put all your templates in assets/templates/controller_name and enjoy. The app also takes care of CSRF and other stuff to get you going with rails.

Last but not least, it comes with bootstrap and font-awesome so your app looks beautiful by default (or not horrible by default ;)).

To get going, just add angularjs_scaffold to your Gemfile or install the gem:

gem install angularjs_scaffold

Second set it up, this will add angularjs, bootstrap and fontawesome (there’s an option to only install AngularJS):

rails g angularjs:install

Run your usual scaffold command:

rails g scaffold Post title:string body:string
rake db:migrate

Now run the angularjs command and it will rewrite everything the AngularJS way:

rails g angularjs:scaffold Posts

Get it fresh here.

I gave a presentation at this month’s ParisRB greatly inspired by the one given by Igor, you can check the slides here. People seemed to like it in general, but there were two critics.

One by Ori Pekelman about the use of the ng-* attributes, you can still use data-ng-* and that’s what I do in my own code usually, I used the ng-* attribute for brievity during the presentation but I guess I could switch to data next time.

The other critic by Paul Chavard (a self-confessed EmberJS troll) was the use of attributes such as ng-click=”archive()” which is mixing html with app logic. Well you don’t have to use those, you can just create a directive such as ngArchive where you describe the kind of event it should listen to and then use it as a simple attribute. So instead of:

<a ng-click="archive()">archive</a>

You can do:

<a data-ng-archive>archive</a>

Then you just have to define your directive in your JS code. I used the ng-click attribute during the presentation for brievity, AngularJS is also awesome for writing quick prototypes but it shines for building huge apps too (thanks to directives among others). And there you go, no logic in your HTML! Even less so than Mustache which comes with if statements and each loops all around (just trolling EmberJS here).

It was a fun event in general and thanks to Ori for it.

Simple Bookmarklet to Debug Your Rails Assets and Sprockets Apps

Rails assets pipeline is a really conveniant way to manage your assets. However, the problem is that it doesn’t make it easy to debug your Javascript as it packs all files together. You can get errors such as “error at line 4225” and that doesn’t help much. The workaround is to pass the debug option to your javascript include tag so that your js files aren’t packed together:

<%= javascript_include_tag "application", 
    :debug => Rails.env.development? %> 

However, if like me you include many js files in your rails app, your app will take ages to load in your browser so you may not always want to load all your js files one by one in dev mode especially when you’re not trying to debug your js code. So a quick hack is to add a check for a param such as ‘jsdebug’ in your include tag such as:

<%= javascript_include_tag "application", 
    :debug => Rails.env.development? && params[:jsdebug]  %> 

So now you just need to add ?jsdebug to your location and hit refresh.

In fact, you can get rid of the development check so that you can debug your js even in prod, just make sure to make the param name longer and not easily guessable.

Finally, if you don’t want to type the params manually everytime you want to debug your app’s js, just drag and drop this bookmarlet: js debug.

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.