Jblanche.fr blog

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