Jblanche.fr blog

Javascript Inheritance and Mixins

2012-03-08T00:00:00+01:00

After my last blogpost about inheritance vs composition/mixins, I was wondering about the best way to implement this in Javascript.
I’m used to the Ruby way, and I really do love to work with both Inheritance and Mixins in Ruby, but I was unable to find anything simple in JS.

You should read again my last blogpost if you don’t know when to use which, but, to sum it up :

Inheritance should be used when A is a kind of B (e.g. an Employee is a kind of Person).
Mixins should be used when C acts like a D-able (e.g. People are comparable to each others).

Moreover, since a few days I had to read plenty of awesome JS articles in my Twitter feed about how to use JS in a good way and how JS Harmony and “Object.create” will make this easier in the future… (e.g. http://www.adobe.com/devnet/html5/articles/javascript-object-creation.html)

So I took the first day available in my schedule (that is today) and wrote some code.
The result is a fork of the Proto.js tiny library that will make it really easy to use Mixins and “Class” like objects in Javascript.

Let’s look at some code :

/* This is a test aiming at creating a simple inheritance + mixin capable JS library using Object.create awesome possibilities. It's using a single library (https://raw.github.com/jblanche/proto-js/master/Proto.js) that is only 609 characters minified, and 310b gzipped. It is heavily based on the original Proto.JS library (https://github.com/rauschma/proto-js). Simply adding to it an easy way to add mixins to our "Classes". */ // This is a Mixin / Module, it can be included by any "Class", whatever the class role. // It's a plain and simple JS litteral object. var Comparable = { // The Only thing this mixin needs is a "compare" method in the Class that includes it. isGreaterThan : function(other){ return this.compare(other) === 1; }, isEqualTo : function(other){ return this.compare(other) === 0; }, isLowerThan : function(other){ return this.compare(other) === -1; }, isLowerOrEqualTo : function(other){ return this.compare(other) <= 0; }, isGreaterOrEqualTo : function(other){ return this.compare(other) >= 0; }, between: function(min, max){ if(this.compare(min) < 0 || this.compare(max) >0){ return false; } return true ; } }; // This is a Simple Particle class with position (x,y) and a radius. // Proto.Extend takes a simple litteral object as its only parameter // Every propertie or method defined in this object will be available on object instances. var Particle = Proto.extend({ // The constructor method is the initializer, it is called automatically when creating an instance constructor: function(options){ //Defining main properties this.x = options.x || 0 ; this.y = options.y || 0 ; this.radius = options.radius || 1 ; }, // this is the Compare method our Comparable mixin will use. // We are defining that particles are compared based on their radius. compare: function(other){ if(this.radius > other.radius) return 1 ; else if(this.radius === other.radius) return 0 ; else return -1 ; }, describe: function(){ return "I'm in "+this.x+ " : " + this.y+" , radius: "+this.radius; } }); // extend Comparable mixin extend(Particle, Comparable); // The ColorParticle is a "SubClass" of Particle "Particle.extend({})" // No need to redefined "compare" here, if compare is called on a ColorParticle "instance" // the Particle "compare" method is in the prototype chain and will be called. var ColorParticle = Particle.extend({ constructor: function(options){ ColorParticle.super.constructor.call(this, options); this.color = options.color || "#FFF" ; }, describe: function(){ return ColorParticle.super.describe.call(this) + " and I'm "+this.color; } }); // This is a Person class, not a lot to share with particles... // But I want People to be comparable too, so lets include comparable there too. var Person = Proto.extend({ constructor: function (name, height) { this.name = name; this.height = height ; }, // Persons are compared based on their height (Yes I know, this is dumb). compare: function(other){ if(this.height > other.height) return 1 ; else if(this.height === other.height) return 0 ; else return -1 ; }, describe: function() { return "Person called "+this.name; } }); // extend Comparable mixin extend(Person, Comparable); // This is the Employee class, SubClass of the Person one. // Employee redefines the Person compare method to use salary instead of height. var Employee = Person.extend({ constructor: function (name, height, salary) { Employee.super.constructor.call(this, name, height); this.salary = salary || 0; }, // Employees are compared based on their salary (Yes I know, this is dumber). compare: function(other){ if(this.salary > other.salary) return 1 ; else if(this.salary === other.salary) return 0 ; else return -1 ; }, describe: function () { return Employee.super.describe.call(this)+" (earns $"+this.salary+" a month)"; } }); // Let's create a few particles and compare them var particule1 = Particle.new({x:2, y:4, radius:5}); var particule2 = ColorParticle.new({x:5, y:8, radius:10, color: '#CCC'}); var particule3 = ColorParticle.new({x:12, y:4, radius:7, color: '#F0F'}); console.log("particule2.isEqualTo(particule1) : ", particule2.isEqualTo(particule1)); // false console.log("particule2.describe() : ", particule2.describe()); // I'm in 5 : 8 , radius: 10 and I'm #CCC console.log("ColorParticle.isPrototypeOf(particule2) : ", ColorParticle.isPrototypeOf(particule2)); // true console.log("ColorParticle.isPrototypeOf(particule1) : ", ColorParticle.isPrototypeOf(particule1)); // false console.log("particule3.between(particule1, particule2) : ", particule3.between(particule1, particule2)); // true // What about persons var person1 = Person.new('Alice', 164); var person2 = Person.new('Bob', 180); console.log("person2.isLowerOrEqualTo(person1)", person2.isLowerOrEqualTo(person1)); // false console.log("person2.describe()", person2.describe()); //Person called Bob // Or employees var employee1 = Employee.new('John', 174, 2000); var employee2 = Employee.new('Jane', 168, 3000); var employee3 = Employee.new('Jill', 170, 4000); console.log("employee2.isGreaterThan(employee1) : ", employee2.isGreaterThan(employee1)); // true console.log("employee2.describe() : ", employee2.describe()); // Person called Jane (earns $3000 a month) console.log("employee3.between(employee1, employee2) : ", employee3.between(employee1, employee2)); // false // I can even apply some behavior to a single instance var Teenable = { describe: function(){return 'LOL XPTDR';} } extend(employee3, Teenable); console.log("employee3.describe() : ", employee3.describe()); // LOL XPTDR // other instances are steal clean console.log("employee2.describe() : ", employee2.describe()); // Person called Jane (earns $3000 a month) // I can augment classes instances after the creation, this will even affect previously created instances ! var Serializable = { serializeToJSON: function(){ return JSON.stringify(this); } } extend(Person, Serializable); console.log("employee3.serializeToJSON() : ", employee3.serializeToJSON()); // {"name":"Jill","height":170,"salary":4000}

As you can see, you don’t have to deal with prototypes anymore, setting an objet prototype to another prototype… the library handles just that for you.

With a few line you can have simple inheritance between Particle and ColorParticle.
Between Person and Employee, plus a few mixins that can be applied to any “Class”.

Please do yourself a favor and hack with it

The possibilities are endless !
You can add as many behaviors (mixins) as needed to every class or instance.
You can augment classes behavior on execution.
You can add custom behavior to specific instances (something like traits).

There’s no compatibility problems that I know of, since the library relies on “Object.create” that is in every recent browser and a shim is available for the old ones.

I hope you’ll find it as useful as I think it is.

Inheritance vs Composition

2012-02-28T00:00:00+01:00

This afternoon, @MonsieurKurt started a “debate” on Twitter about Inheritance vs Composition in object oriented programming.

I’m not used with the term composition but I guess he wanted to talk about some kind of modularization of the behaviors.

140 characters are not a lot to give an answer so I summed up with “Composition #FTW”.

I realised after that it was a little too much opinionated and I wanted to talk a little bit more about this here so here we go.

Lets imagine we’re dealing with football players and their coaches (oh by the way, when I say football I mean the one that you play with your foots and a ball, like in football, not the strange american one…).
We want a small app to make some statistics about our players and coaches (did you saw Moneyball ? ) for the last few years and the ones to come.

Both players and coaches are some kind of Person. In this case Inheritance shines, you can put stuff like dob, sexe, adress, city… in a Person class extended by the Player one and the Coach one.

Ok perfect now, we need to compare our players and coaches.
But the criteria are different, let’s say we want to compare our players by the time spent on the field and our coaches by the number of points earned divided by the time spent on the bench.

We’ll have a few methods that can be shared, like “is_better_than” or “is_worst_than” to compare our “objects”.

So if we don’t want to duplicate code, we may throw them in the Person class.

But what if we’re not confortable with this standing in a Person class (what about player agents, we may need them in our soft later, and we definitely won’t need to compare them, do we ?), then we could create a Comparable class standing between Person and, Players and Coaches.

Something like :

But then we’ll need to do something quite ugly like (that’s pseudo language) in our Comparable class :

def is_better_than(otherPerson) if(this.kind == "Player") # use criteria 1 else if (this.kind == "Coach") # use criteria 2 end end

And suddenly “BOOM”, our superclass needs to know about its subclasses… Believe me, that’s no good !
What if we want a whole new class for the Goalkeeper ? We’ll need to change the superclass… (puke).

We could put this code in each class, but that means we will need to rewrite almost identical methods in both classes… (puke again)

Why so ? Well let’s think again about what we just did ?
Let’s say it out load :
Player and Coaches are some kind of Comparable ?
Does it sounds good ? surely not ?

Imagine this story :
- Hey kiddo what do you want to be when you’ll be 20 ? a coach, a player, a goalkeeper ?
- No sir, I want to be a Comparable ?

So what do we do know ? We need to save this kid !

Well, composition to the rescue !

Let’s keep our simple inheritance, without the comparable class and add one simple thing to our classes(again pseudolanguage, inspired by Ruby)

class Player is_capable_of "comparison" def compare(otherPlayer) if this.time_spent_on_field > otherPlayer.time_spent_on_field { return 1 } else if this.time_spent_on_field == otherPlayer.time_spent_on_field { return 0 } else { return -1 } end end class Coach is_capable_of "comparison" def average this.points_earned / this.time_spent_on_field end def compare(otherCoach) if this.average > otherPlayer.average {return 1} else if this.average == otherPlayer.average {return 0} else {return -1} end end module Comparison def is_better_than(other) return this.compare(other) == 1 end def is_worst_than(other) return this.compare(other) == -1 end def is_equal_to(other) return this.compare(other) == 0 end def is_at_least_as_good_as(other) return this.compare(other) >= 0 end end

Now we can do tests like :

without duplicating or bullshitting our code :)
No code duplication, no strange inheritance, we’re all good. Every modularized method will call the compare method on the correct class depending on the caller.

Our agents, well, they can inherit from the Person class and not include the Comparison module…

If we add one more method to our Player and Coach classes, explaining how to iterate other the objects in this class, we could even have methods like first, last, all, any, min, max … shared in another module that we could call Enumerable for example.

That’s exactly what Ruby does with its Comparable and Enumerable modules, and believe me, once you tried it, there’s no coming back !

In conclusion, I would say that, in my opinion, we need to say “X” is capable of “Y” way more often than “X” is some kind of “Z” in our code and that’s why I answered “Composition #FTW” but maybe I should have said “Mixins #FTW” !

Retweet counter

2012-01-20T00:00:00+01:00

Retweet Counter is a little website I made in order to know the visibility a tweet can acquire through its retweets (using the Twitter API).

The Back-end is a Sinatra (Ruby) app, and the front-end is simple HTML5 + CSS3.

Lemonde cleaner

2012-01-03T00:00:00+01:00

LeMonde Cleaner is a small experiment (3 lines of Code ! ) I made in order to try the chrome web store addon development.

It’s goal is to remove annoying grammatical conjugation links on lemonde.fr

The smaller, the better :)

Compagnie Alec Barthus

2011-12-02T00:00:00+01:00

I’m currently doing this little website for a theatre company.
On this particular project, I did both the conception, the design and the development.

I used the Foundation framework to ensure a good experience for mobile users and the Rails LocomotiveCMS for the back-office.

Eyeka HTML5 player

2011-11-15T00:00:00+01:00

I had to develop a custom HTML5 player for Eyeka.
The player needed to be able to “play” three kind of mediums : pictures, videos, and documents (considered as being a list of pictures), to work on tablets and to go fullscreen.

This was a heavy Javascript project and the first professional one (and probably not the last one) where I used CoffeeScript.

The project is only viewable by eyeka customers.

Canvas + SVG

2011-11-05T00:00:00+01:00

Small experiment with Canvas, SVG, CSS animations, music and nodeJS
I made it as an exercice for my students at Gobelins l’école de l’image.

Live tweets containing the “future” word appears as particles on the screen and some statistics are updated in live on the right.

Node snakes game

2011-10-10T00:00:00+02:00

Snakes experiment made with NodeJS.

It’s a multiplayer game where you have a snake, and you need to grab “apples” without crashing into other snakes.

Stootie

2011-07-07T00:00:00+02:00

Stootie.com development.

My main mission was to develop the website structure and layout with HTML / CSS / JS.

I had to respect the iPhone app principles and to deal with the rails Back-end.

EnjoyReading

2011-04-10T00:00:00+02:00

Enjoy Reading development.

EnjoyReading was a side project I did for fun.
My goal was to discover how to build a browser add on.
It’s goal is to improve the readability of your favorites websites.

Css Text Animation

2011-01-05T00:00:00+01:00

Jblanche.fr is the website
of a passionated web-developer.
From the back-end development to the front-end device optimisation.
I love my job. Welcome !

<section id="css-text" class="lab"> Jblanche.fr is the website of a passionated web-developer. From the back-end development to the front-end device optimisation. I love my job. Welcome ! </section>

.lab#css-text { font-family: "QuicksandBook", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 2.2em; } .lab#css-text p { line-height: 1.4em; margin-left: 20px; opacity: 0; color: #555; -webkit-font-smoothing: subpixel-antialiased; -webkit-animation: openingTextIntro 1s ease-out 1s 1 normal forwards; } .lab#css-text p span.typo { color: #cccccc; text-decoration: none; opacity: 0; position: relative; } .lab#css-text p #site-name { top: -1000px; -webkit-animation: showLink1 1s ease-out 3s 1 normal forwards; } .lab#css-text p #work { right: -1000px; -webkit-animation: showLink2 1s ease-out 4s 1 normal forwards; } .lab#css-text p #passionate { -webkit-animation: showLink3 1s ease-out 5s 1 normal forwards; } .lab#css-text p #welcome { bottom: -1000px; -webkit-animation: showLink4 1s ease-out 6s 1 normal forwards; } /* Texte */ @-webkit-keyframes openingTextIntro { 0% { opacity: 0; -webkit-transform: scale(10); } 100% { opacity: 1; } } /* Links */ @-webkit-keyframes showLink1 { 0% { opacity: 0; } 100% { color: #2fc2ef; opacity: 1; top: 0; } } @-webkit-keyframes showLink2 { 0% { opacity: 0; } 100% { color: #2fc2ef; opacity: 1; right: 0; } } @-webkit-keyframes showLink3 { 0% { opacity: 0; } 100% { color: #2fc2ef; opacity: 1; } } @-webkit-keyframes showLink4 { 0% { opacity: 0; } 100% { color: #2fc2ef; opacity: 1; bottom: 0; } }

Fanfan2

2010-12-10T00:00:00+01:00

fanfan2.fr development and integration.

My main mission was to develop the website structure and layout with HTML / CSS / JS.

I had to use and modify the rails Back-end to fit my needs.

Floweroscope

2010-10-10T00:00:00+02:00

Floweroscope was a project made for
La Surprise and Microsoft.

I worked with Kikko and we had to develop a fun project with a heavy use of canvas to show how powerfull Microsoft Internet Explorer 9 hardware graphics acceleration was at this moment.

Unfortunately, this project is no longer online.

Paris Web 2010

2010-07-15T00:00:00+02:00

I love when a day starts with a good news.
This morning, for example, my favorite twitter client (Twitterrific for iPad if you want to know) announced me that the ParisWeb 2010 speakers list was announced.

And even if I knew I will be part of it for a few days, I must admit seeing my name next to Christian Heilmann, Dave Shea, Christophe Porteneuve, Eric Daspet, makes be quite proud of myself.

So that I’ve been a jerk for a day but I’ll promise I’ll stop tomorow.

Finally, I’ll be giving a workshop the satuday on the “real time web”.
To know more, please read the description in the official website page.

Before this, I’ll have 2 months to prepare this workshop (an hour and a half) while you just have to buy to tickets

One month

2010-07-12T00:00:00+02:00

It’s already been a month that I’m a freelancer now and there are way more pros than cons (if only there were no adminstrative forms…)

Being a Freelancer, I find it easier to attend conferences and stuff like that. So I tried a few in the last week.

The Drumbeat Paris by Mozilla
was a great event where the goal is to lower the level needed to participate in mozilla projects.
A good way to talk about the future of the web,current Mozilla projects and discover fun stuff like Graffiti Analysis or Tatoeba.

Two days later, I went to the WebWorkersCamp, still at la Cantine.
NodeJS, NoSQL, Message queue, asynchronous languages, WebSockets… There were a lot to discover.

Ryan Dahl from Joyent, author of Node.js, one of the greatest project of the moment was there.
Richard Kreuter from 10gen, creators of MongoDB were there too to talk about NoSQL and MongoDB.
Paul Rouget made a talk on the newest features of Firefox like Canvas, SVG, WebGL…

Finaly, I went on saterday to a course on Git organised by Christophe Porteneuve.
The only paid event in those three.
But 75 euros for this kind of course will make you save a lot more latter on !
A really heavy program and a lot of stuff to memorize but I know Git":http://git-scm.com/ a lot better now.

If you want to know more about DVCS, you should attend the next event and follow the blog git-attitude.

Here it is for the recent events I attend.
During this time, I’m still enjoying my new professional life and everything is going well.

P.S. : I’ll have another good news soon but I need to tease a little bit more before telling you!

DailyNews_#14

2010-05-27T00:00:00+02:00

The surprising truth about what motivates us – Great demo about what motivates us
Rails Dispatch – Great website with resources for an easy Rails3 migration
Rails 2.3.8 before Rails3…
Media Queries – Great “A list appart” article on media queries
Google Webfonts – Google makes @font-face usage easier.
Real-Life Metaphors and CSS3 Adaptation – Cools CSS3 usage examples
CSS 3 – Connecting The Dots – Discover newest CSS3 features
Video JS – A new player in the land of HTML5 video player.
Audio Experiments – New experiments with Firefox Audio API.
Darkroom – A photoshop lite with HTML5+JS
Detect Everything – How to know if your browser supports an HTML5 feature
Microdata – A new actor in the semantic world

The lab

2010-05-21T00:00:00+02:00

A new Lab category appears in the blog where I will make some funny experimentations :

Two experimentations to start :

CSS animations : The firsts use the newest Webkit CSS animations features.

Websockets : The second uses another HTML5 feature called websockets to display live tweets about ruby, html5, css3…

Both of these experimentations require a recent browser, but Graceful Degradation should produce readable pages for older browsers.

DailyNews_#13

2010-04-30T00:00:00+02:00

Ruby / Rails news:
Rails3 Beta 3 – Last beta before the first Rails3 RC ?
Jruby 1.5.0 RC2 – JRuby 1.5 is in Release Candidate
IronRuby 1.0 – Iron Ruby (.Net) is stable !
Non Blocking Active Record – Why we are waiting for Rails3 + Ruby1.9 !
Grease your test suite – Accelerate your tests.

Sass is changing:
Selector inheritance in SASS – Sass is getting better and better.
Sass RC1 – And version 3 is in Release Candidate.

Some talks on Facebook Open Graph Protocol:
Facebook is the private beta of semantic Web – A positive advice on the Open Graph Protocol
Why F8 was good for the open web – Another one
Facebook Open Graph Protocol from a developper perspective – and a last one.

A lot of pros but there are cons too. But the articles I read were not convincing.

The Web future :
Aves Engine – Full platform game made with the open web stack (CANVAS+JS+HTML+CSS).
WebGL demo – Promising !
Mozilla Flexible box model – Here is how we will use CSS positionning in a few years.
Understanding Node.js Great Node.js introduction.
Steve Jobs thoughts on Flash – Good arguments but clearly not enought to forbid Flash on iOS devices.

And :
Ipad multitouch interactions – Ipad surface allows for a lot of new multitouch interactions.
Ubuntu Lucid Linx – The latest Ubuntu is out.

DailyNews_#12

2010-04-15T00:00:00+02:00

Rails users are having fun before Rails3 :

Rails Dispatch – How to use Bundler with Rails3
awesome_print – Clean your IRB.
ExceptionHub | JavaScript Error Tracking – Maybe a professional solution for JS testing.
cookiestack: some handy rack-rewrite rules – rack-rewrite usage examples
Cucumber, Tags and Continuous Integration – Cool Cucumber tags usage
JavaScript Testing with Cucumber and Capybara – How to test your pages Javascript

Let’s play with HTML5 :

Starfield – a HTML5 cool demo
Ball Pool – and another one (Say bye bye to Flash…)

Or with WebGL :
WebGL – Collada Animation and Skinning – Just incredible !

Let’s talk about design :

Know When to Stop Designing – Interesting design techniques
CSS generated content techniques – How and when to use the css : ‘content’ property
Nivo Slider – Cool Jquery gallery
Web Safe Font Cheat Sheet –
Which font and which usage for the web

or development :

TextMate Bundle Browser – a textmate bundles list
Prototype 1.7 RC1 – New Prototype version incoming but who is still using it ?
Apple’s secret iPad web framework? – What if native Ipad app were build with web technologies…
Git Cheat Sheet – Keep this at your disposal.
More Web Inspector Updates – Webkit Web
Inspector is getting better and better…

DailyNews_#11

2010-04-01T00:00:00+02:00

A lot of Ruby related stuff today :
Another Bundler tutorial – How to use Bundler and RVM for more efficiency.
Bundler: best way to manage Ruby applications – Some doc you should read if you’re having issues with Bundler
Ruby Shortcuts – Usefull shortcuts I always forgot.
Ruby Summer of Code – A GSoC for Ruby !
On-the-fly image handling – Another way to generate thumbnails in your rails app.
Evented Code with Ruby Fibers – Evented Code made easy thanks to Ruby1.9
ubiquo – Another Rails CMS
The Lowdown on Routes in Rails 3 – Great blogpost about rails3 routing DSL

HAML/SASS 3 are coming :
FireSass Bridges the Gap Between Sass and Firebug – That’s really good news !
Haml/Sass 3 Beta Released – Writing HTML an the CSS the easy way, is easier than ever…

Everything else :
Typography quick tips – Some good things to know about web typography !
High Scalability – Justin.tv – Yes Rails can scale, but you need the right tools next to it !
nateware’s redis-objects – Something that could ease the transition to Redis

DailyNews_#10

2010-03-18T00:00:00+01:00

It’s been a few days without post, but believe me, they were interesting days.
A lot of things came thought, I’ll have to talk about this in a while!

Before that let’s see what happened during those days:

I tried to learn about Redis :

IntroductionToRedisDataTypes – More stuff about Redis
Redis: Data Cheeseburgers – Redis made easy by the thoughtbot guys

I read a few ruby related blog posts:

Show your objects baby! – Plataformatec guys strike again with a library to easily display every attribute of an object.
Timing Ruby Code – Benchmark ruby code
Ruby Best Practices – A free ebook for better ruby code

A few Javascript related ones:

Speks for Node.js – Rspec derivative for Node.js
humbleFinance – Another data visualization Javascript plugin
jQuery Masonry – Great Jquery library for hacking CSS floating model
harmony at master – GitHub – Javascript testing made easy

And a few others:

Setting rather than Resetting Default Styling – Another good start for your stylesheets, I should give it a try!
Online Identity Concept Series – Mozilla enters the online identity discussions.
Designing for the Web – Web Design has its own set of rules, here they are…

DailyNews_#9

2010-03-03T00:00:00+01:00

Ruby / Rails

Rails 3.0 Setup using rvm & Ruby 1.9.2 – A good way to start working with Rails3 and Ruby 1.9.2
jnunemaker’s canable – Simple permissions solution for rails
Unobtrusive JS in Rails3 – Interesting way to handle unobtrusive javascript
delorean – Delorean lets you travel in time with Ruby by mocking Time.now
Rapid prototyping with HAML, SASS and Ruby – Some thoughts about HAML and SASS

Javascript

How To Node – Latest news from node.js
How NodeJS saved my web application – Why you should learn NodeJs
subtleGradient’s – Essential Tools for developing Javascript in TextMate – Read more

Other stuff

Open letter to Google about video – Free VP8, and use it on YouTube, come on guys, don’t be evil ! Let’s do that !
Life Below 600px – Repeat after me : Don’t mind the fold !
Mad Libs Style Form Increases Conversion – A new way to style your forms

DailyNews_#8

2010-02-19T00:00:00+01:00

Rails :
Rails 3 Generators – How they work
Happy Birthday Devise – The best authentication solution for rails gets new features.
Rails Metrics – Know what is happening inside your Rails 3 application

And everything else :
How to install MongoDB on OS X – A quick and well done tutorial.
BBC’s redesign – A great story about the new global visual language for the BBC’s digital services
MongoTips – A great place to follow things about Mongo
I Can’t Believe It’s Not Flash! – Slides from Thomas Fuchs presentation at Webstock 2010. I want to see the video.

DailyNews_#7

2010-02-15T00:00:00+01:00

Javascript Objects – An interesting Object Oriented Javascript example.
MongoDb is fast – I realy should try one of these NoSql in a project.
REE, nginx and Passenger – Setup Ruby Enterprise Edition, Nginx and Passenger on a server.
SublimeVideo – A cool video player using HTML5 video support
Uniform – Sexy forms with jQuery, not sure I really need this but I’ll give it a try.
Cardmagic – A good interface to import email contacts from various providers
Clean rails3 environment – How to set up a clean Rails3 environment on your mac
jQuery Quicksand – Reorder and filter items with a nice shuffling animation.

DailyNews_#6

2010-02-09T00:00:00+01:00

Some Rails3 links :

Rails Plugins – Find out if your plugin is compatible with Rails3
Rails 3 Upgrade – A free PeepCode screencast to upgrade your app to Rails3
The Rails Initialization Process – This guide explains how the initialization process in Rails works as of Rails 3.

And some othe stuff :

10 Privacy Settings Every Facebook User Should Know – Protect your privacy on Facebook
The iPhone obsession – Why Iphone-only websites is an insane idea.
Haml Sucks for Content – When not to use Haml
Stomp on Web Sockets – Interesting way to combine stomp and websockets.

DailyNews_#5

2010-02-01T00:00:00+01:00

A lot of stuff after a short holiday week :

About Rails 3 :

Rails 3 Upgrade – A free PeepCode screencast to upgrade tour app to Rails3
SafeBuffers – Rails3 will add XSS protection by default, here is how.
Bundler 0.9 – How Bundler will make dependency resolution so much easier.
rails_upgrade – A plugin that adds a few rake tasks to make the switch to rails3 a lot easier.

About the Ipad / Adobe / Google :

I really don’t know what to think about the IPad, I can imagine a lot of people using it (my parents, my sister…), but I hate the store system, and it lacks a Webcam and USB.

Apple + iPad + Huxley = Orwellian nightmare – Another story about the Ipad and how apple will try to “trap” us.
Thoughts and Observations Regarding the iPad – A interesting review of the Ipad
Stop crashing my Browser – Another complain about the flash plugin. Again, and again, and again…
Jobs about Google and Adobe – The world is moving to HTML5 ! If Jobs says so…

About browsers :

Firefox for Mobile Now Available – Firefox mobile is ready for the N900 (Maemo). Give it a try !
Multi-Process Plugins for Firefox – Firefox newest nightly builds puts plugins in a separate process. Flash should no longer crash Firefox !
Modern browsers for modern applications – Google shoot one more bullet in the IE6 chest

The everything else :

NoSQL Week in Review 9 – A good catch up of the NoSQL movement
Multiple Backgrounds and CSS Gradients – Combine CSS3 features…
Nine Things Developers Want More Than Money – Here is how to make a developer happy !
Steps towards building an accessible site – Learn the basics of building accessible websites
Facebook rewrites PHP runtime – Facebook will release a new OpenSource PHP runtime.

DailyNews_#4

2010-01-26T00:00:00+01:00

Rails 3 first beta is approching :

New ActionMailer API – Why sending email will be painless with Rails3
Rspec 2.0 – What to expects about Rspec 2.0

The future of the browsers :

Elevating JavaScript Performance Through GPU Power – The future of Javascript on Firefox
The Flash Player’s Uncertain Future – Is Flash dead ?
HTML5 video and H.264 – Why Mozilla is right about not implementing H.264 for videos.

DailyNews_#3

2010-01-21T00:00:00+01:00

Small day today, but the 2 first links are realy great news :

Firefox 3.6 is out – Check out the cool new stuff you should use (CSS gradients, Woff, JavaScript file APIs…)
REE 1.8.7-2010.01 – Phusion guys just release the new version of their Ruby interpreter
BumpTop Mac – You might want to try this, It’s kinda fun.
configure block – Another great use of Ruby blocks
Rails 3 Migration – Some stuff you should know if you plan to migrate some of your Rails app

The Rails ecosystem and community

2010-01-21T00:00:00+01:00

I love the Rails framework, I immediately liked it the first time I tried to build a small app, with the good old Rails 1.1.1 (if my memory don’t betrays me on this one).

But 5 years later, I have to admit that more than Rails itself, I love working with Rails because of the rails Ecosystem.

Learning Rails, I learned about so much thing about the Web itself, server administration and all a lot of other web related stuff.

Let’s make a quick tour of that :

The first thing I discovered with Rails was the MVC architectural pattern, like many (if not all) things I gonna talk about in this blog post, I could have learn it in another way, and I can use it outside of Rails (and believe me, I will), but the fact is I needed Rails at this moment to discover the MVC pattern. 1

Well since MVC is good for writing web applications, let’s take it part by part and see what I learnt for each one.

ORM was a great discovery, when I finally realized I could write plain old ruby code instead of writing ugly sql, dealing with SQL injections …
Of course you have to know what’s gonna happen behind this ruby code, but your studying years should have told you that, and believe me, you’ll be happy not to write this stuff anymore !
After a few years (3 I guess), of ActiveRecord happiness, I discovered Datamapper, and again, the Ruby/Rails community make me dig into this brand new and shinny stuff with interest.

And since a few month, the new hype are NoSQL DBMS (MongoDB, CouchDB…), again, this can be used outside of Rails, but it’s really good to see a lot of ruby/rails related resources talking about this stuff 2.

Well, in fact ORM where for a long time the first reason I gave to the guys asking me about why I did the PHP/Rails switch.
Is there anything interesting aside from the DB related stuff in rails ?

The answer is YES ! For sure :

Rails made me a HTTP fan. What but wait, HTTP is just a protocol, in PHP you get $_GET an $_POST, what would you like more ?
Well, with Rails, I discovered the REST software architecture.
I discovered there was not 2 HTTP actions but 8 ! Yes 8 !
OK Rails may not use all of them, but the RESTful hype made me understand a lot of thing about the HTTP protocol itself, and made my code a lot cleaner than before.

Learning Rails, I also discovered a lot about HTTP caching (expire header, etag) …

Hey, that looks interesting but at the very end, you still have to write plain old HTML / CSS / Javascript stuff, and that’s the most time consuming part of my web developer job.

Know what, you don’t :

Of course you can write plain old HTML, CSS stuff, but if you don’t like it, you can use the HAML / SASS couple and makes it a lot easier to write.
Not enough ? Go on, use Compass, you’ll be able to use all the goodness of CSS frameworks without polluting your HTML code with design related class names everywhere.
Still not enough, learn to love forms, use formtastic, your forms have never been this easy to write and style !

That’s all for HTML/CSS, but the Rails community also had great debates about Javascript.
LowPro , one of the first Behavioral Javascript Library was “Rails related”.
Rails 3 will be javascript framework agnostic and will allow you to write great pieces of software without polluting your HTML code with behavioral related JS (using HTML “data-” attributes 3 )

You get the idea, learning Rails, you’ll learn about a lot of Web related stuff you can reuse in any other project, in PHP, with Symfony for example, in Python, with Django …
And that’s why, after 5 years coding Rails applications, including 2 as a job, I’m still not pissed off about my job, and wake up every working day knowing I’m going to learn some new stuff during the day !

Even outside of the Web related stuff, I became a better network administrator during these years, learning stuff about caching mechanism (memcache ),
Message Queuing servers (Starling and then Kestrel with all the “Twitter and Rails” love or hate story), or background jobs handling(Resque ) with the recent Github migration.
Oh Speaking of Github, Git is again something else I discovered thanks to the rails community !

Whoa, that’s king of a lot of thing !
If there is something to remeber of this blogpost it would be “Don’t be a Rails-Django-Symfony-Spring developer”, just code with the language you like, the one that makes you look at your code and say “Cool, that’s a good looking piece of code” , but even more important, be AWARE (like JC Van Damme would say 4 ) of the community and ecosystem of your favorite language, you’ll learn a lot !

1 Note to the PHP guys, I know I could write pretty stuff with PHP, with good ORM… I just didn’t know at that time !
2 Like there and there and there.
3 Like here JavaScript in Rails 3.
4 This is for my french readers.

Photo Credits :
Model
Controller
View
Server

DailyNews_#2

2010-01-20T00:00:00+01:00

Some Git related stuff :
Git for the real world – Some useful tips for a better use of Git
More real-world git – Even more tips for a perfect use of Git
Successful Git branching – Description of a successful development model using Git

Some Browsers and Javascript :
Germany is switching browsers – The warning issued by a German security agency convince people to switch
Firebug is 1.5.0 – Get the brand new version of Firebug with a ton of improvements
JavaScript grid editor – Great review of ‘want to be’ Excel plugins for HTML tables.
jQuery Lint – A library to get rid of incorrect usage of Jquery, this will make your JS code even prettier !

And a small bag of links :
low-fidelity prototyping – Why low-fidelity prototyping kicks butt for customer-driven design
Code Blocks – Great Review of blocks usage in Ruby
rock-n-code – Easily render static pages with Sinatra

DailyNews_#1

2010-01-19T00:00:00+01:00

Facebook offline – Use facebook offline_access with facebooker
lovely-layouts – Some usefull helper for your rails layouts
Rails 3 Templates – A great set of templates for Rails3
jQuery Easing Plugin – Looks like a very cool Jquery easing plugin !
Rails 3 generators – Great blogpost about the new rails generators to come in Rails3. This is awesome !
Dynamic CSS – Good article explaining the benefits of using tools like SASS in place of plain CSS in your projects.
MondoDB ressources – How to use MongoDB, one of the new NoSQL hype technology, with Rails.
Capistrano Recipe Book – make your own gem to standardize Capistrano deployments