Hi, I'm Jonathan :)

My adventures as I become a web developer

LESS - The pattern to better design

If you’re a Ruby developer and you havn’t read Sandi Metz’s book POODR, shame on you. If you havn’t heard of her… well shame on you, but trust me, now you know her, you’re life is already happier!

Whomever you are, you definitely should read her book. I even told my grand mother to read it, and she said, I quote:

This shit’s crazy, totally changed my life!

So yesterday, Sandi Metz gave a talk about her book at Parisoma. We went with a good chunk of DevBootcamp, and it was nice. First, well, like every meetups in San Francisco, free beer and pizza. I mean, who doesn’t like it? I sincerely think that you literally can eat for free every-single-night in San Francisco.

Then, I love that kind of ambiance where you get to a meetup and there is no private room or whatever. Sandi was simply drinking beer and eating pizza with us, and she came to me to talk about DevBootcamp. She stopped the conversation after a few minutes saying she was trying to talk to everyone. That’s awesome.

After an hour of meeting new people, eating 9, yes 9 slices of pizza and a few beers, we finally sat and Sandi started her presentation.

Here it is; Or at least, what I was able to note down; If you read the book, it will sound familiar; It’s never bad to refresh your mind about those principles


Everyone has his own definition of Design. So let’s agree on the definition that will support the coming statements; One important thing about code is that

  1. it needs to work now
  2. it needs to be easy to change.

Why those 2 assumptions? Because

The purpose of Design is to reduce the cost of change.

Nothing else. Design is here to reduce costs. And this is a whole hypothesis OO is based on. Easy to reuse, easy to change, so as opposed to procedural code, you end up reusing a lot of the code you already wrote, instead writing the same things over and over again.

Diagnostic - TRUE code

  • Transparent Consequences of change are visible and predictable
  • Reasonable Cost of a new feature should be proportionate to its value
  • Usable If it’s already written, it can be easily reused anywhere else
  • Exemplary Is your code good the app or does it make your coworkers hate you?

Why following this TRUE principles?

Because as Antoine de Saint-Exupery said,

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

And he is french, so he must be right!

So following the TRUE principles might not help you know when it’s perfect, but it will certainly help you know when to stop. And it’s when it’s good enough.

Balance between abstraction and function

  • abstraction in the code makes it really easy to change, but harder to understand.
  • functional code, in the opposite, is really easy to read and understand, like a story, but is almost impossible to change.

Someone in the audience asked the question, so how to make the balance between both, and how to do you it’s good enough?

Programming is an art. Some people don’t agree with that statement, but it is. And programmers are artists. So don’t be scared of your feelings. The brain is really smart, and most of it is unconsciously working. Which makes it even smarter. You don’t have to be aware that it’s doing something for it to do so. The problem is, that unconscious part of the brain can’t talk. To communicate, it send you feelings. Good feelings or bad feelings. Listen to those feelings. And the more you practice, the more you’ll be able to feel that your code is good enough.

It’s not about what’s going in each objects, it’s about the space between objects. Objects need space to function correctly. The less information each object has about others, the easier it will be to reuse those object outside of the scope in which they were written.

So when you refactor your code, to add abstractions, just do one refactor less that you want to. And there will be the perfect balance between abstraction for easy change and functional for easy understanding.

Sandi Metz’s book, Practical Object-Oriented Design in Ruby, is a must read. Go buy it now, and read it.

DevBootcamp Day - no just kidding :(

Here we go. The moment nobody was waiting for is finally here. DBC is gone. YES GONE.

It ended just like if we were running, and BAM, out of nowhere, we fall off a cliff. AND THEN YOU’RE DEAD.

The pace stayed intense until the end; Thursday morning was filled with last minute polishing of our group projects. Then the afternoon was the presentations. I was pretty surprised with the quality of every single app made by each group. It is pretty impressive how 50 people were able to become so good at programming in such a short amount of time.
We definitely proved the haters that IT IS possible to achieve what DevBootcamp is promising. And that’s badass.

Then, no time to rest, Friday was hiring day. About 30 companies came to greet and meet us, and I have to say, it was draining. I didn’t have the chance to meet all of them, but got to meet who I wanted to. I ended up meeting easily 20+ people. It drained me.

What is amazing is that some employers sent follow up emails to some of us just a few hours later, the same night. And Saturday too. Which is cool. I already have a few interviews scheduled with companies I am really interested in, which is amazing.

I was NOT expecting such a quick response from anyone, so it’s just amazing to look at my calendar and see more interview next week than I ever had in my whole life!
And it’s not only opportunities in SF; I also have interviews for New York, Colombia and back in Canada. 

Pretty crazy!

Later friday we had a quick and intense graduation where we were given dog tags and then the graduation party. Which was amazing. At least until 11pm, when I left to go to bed, due to intense fatigue.

And now what? It’s all done. Not really…

We were again at the office Saturday morning, and this morning too. Not a break yet. We have to get ready for those interview. I’m leaving in a week, so it’s not the time to slow down. Not yet.

I spent the week end working on an app that an employer (one of my top choice for sure) already asked me to build to have some code to discuss about during an interview next week.

Yea, it’s moving fucking fast. And that’s how I like it.

One Minute Before Three O'Clock: DBC F12 Demo Day


This past Thursday December 6th, 2012 ten teams showed off their elegantly crafted final projects. After eight weeks of intense learning and two weeks of development the verdict is in: our formal learning institutions are wildly inefficient and alternatives like Dev Bootcamp are changing how we do…

DevBootcamp Day 63

Sometimes, for some reason, when an image or something else is broken or missing, it brakes you whole app. Instead of printing that little broken image icon, it raises some strange error like “precompile error”.

Having something not working is embarrassing, but having your whole application broken, with that infamous Rails’ “We’re sorry, but something went wrong.” is FRIGHTFUL (yes I google translated that).

So here is a little trick I like to use to avoid things to brake when I think there is a slight possibility that shit actually happens.

When I was developing Twitchr, I ran into one of those error. Everything was working perfectly in development, but in production, it randomly broke. Sometimes it was the games index, sometimes it was the streams index, and sometime, BOTH. MY MY MY. 

And when it broke, it was throwing some “precompile error” in the middle of my html. The fact that it was working well in development put me crazy, and really didn’t help to debug.

So Robert helped me and discovered what happened; When I’m importing streams/games from Twitch’s API, I import an image. And it seems like some streams/games don’t have that image available. So my data gets saved to the database with a NIL image. 
For some reason, in development I had the pleasure to see a broken image (that little icon I was talking about), but in development, BIM, “We’re sorry, but something went wrong.”.

That’s embarrassing when you’re proudly showing your baby to people and “oops yea it broke I’m not really sure what’s happening, but it’s cool anyway, trust me!”.

To avoid that, you need a placeholder, in that case an image to be put, IN CASE there is no image.
Different solutions are available to you, some people say having a default value directly on the database schema is better, some other prefer to rewrite the model’s method. I’ll show you here how to rewrite the model’s method to add some intelligence in it.

Let’s say we have a User model,
=> User(id: integer, name: string, email: string, picture: string)

You want, for example, to call @user.picture and be sure that it won’t brake if picture is nil. RIGHT?

So, you simply can go to your models/user.rb, and write a new picture method;

So you got the idea, we check if @user.picture is nil, and if it is, we return a default image.

But let me refactor here and introduce super.

So the idea here, first the code looks way more pro. And you want to look like a pro so you get respect from your peers.

Then more importantly, by calling super, you are not erasing the original method. You are EXTENDING it.
You call SUPER || something.
SUPER is just the original method. And if something f*cks up and returns nil, it will call what you added after ||.

You remember how || works right? RIGHT? Ok a little reminder for the guy in the back.
a || b means call a, and ONLY IF a == nil, call b.

Here, you’re a bit smarter now :) Naaaa, my pleasure! 

DevBootcamp Week-End - 9

Last week, and then that whole journey is over.
Or maybe it’s when everything really starts. I’m sure what’s waiting for me is even more exciting, but right now, all I know is that, in a week, I’m officially unemployed. AH SUCH A PESSIMIST VIEW, I KNOW! BUT IT’S TRUE!

I should have some good opportunities coming to me, or at least I hope so, it’s what Shereef is trying to make us believe, so all I do now is doing my best to keep focusing on learning and practicing.

Writing as much code as I can.

For example, today, I wrote a ruby gem. Just like that, because. YES BECAUSE.

Writing swiv.co, I had trouble finding out how thetvdb.com database’s API was working. And how to use it, and make the best of it.
Then once I understood what to do, I had to write my own module, because the only gem I found didn’t work.

So now I got everything working for swiv, I decided that it was time to give back to the community the way I could with the little skills I have today;

So I took the module I wrote for swiv.co (yeah I know, third shameless link), and made it a gem; The tvdb_ruby gem. Here is the rubygem page, and the github with documentation and source.

It’s really simple and doesn’t do much. But if I had this one to start swiv.com, it would have helped a lot. So I just hope one hacker, one day, will be glad to find it :)


Now second thing. I fucking love eSports. And this week-end was the main event for IGN Pro League 5. And all I want to say is that it was AMAZING. On the sports side. And on the technology side.

On the sports side (YES IM SAYING SPORTS), LoL offered really nice moves, seriously. And Stephano, no comment. Rarely seen a play of that level, especially vs Life, MC, Seed and DRG. Even Tastosis couldn’t believe themselves and were saying Steph should go to Code S. 

Now on the technology side. First, it might be the first time a major tournament has a usable website, with easy to find brakets, a good schedule and a good quality stream  (I’m looking at you MLG).
Let’s talk about that stream.

That stream was just technologically fantastic. Not only fluid, loading quickly and a good quality even for the free access, it saved the video LIVE. So you could go back the whole day if you missed a match, and come back live anytime. More than 50 hours of video, instantly rewindable. No need to wait an undefined amount of time for the VODs to show up on youtube! Props to that. I know it was made already, but not as well as IGN.

Also, prop to twitch. For a faster easier way to watch the live, I loved their new event page, making all the IPL videos accessible on a single page. So going from SC to LoL was quick and easy, without changing page.
And you want to talk about scalability? They had more than 175 000 viewers live on the LoL finals. 175 000. I’m not mistyping a 0. It’s more than cable TV.
So yeah. Rails scale. 

Ahhhh it’s nice to see how things got better in the 10 weeks I was busy missing out ;)

And all that, in Las Vegas at the Metropolitan. Not bad.

DevBootcamp Day 57

Planning the day with the group. Always interesting!

Ok, so today I had the pleasure to discover the infinitely powerful API of Google Maps! Really, it’s crazy, you literally can do WHATEVER you want with google maps… as soon as you know Javascript!

The API is really tricky at the beginning, especially when you’re neither confortable with API, nor Javascript… yet!

I had some difficulties to implement it correctly, but now I understand a little better how the Directions works (yeah because it’s like 2% of what you can do), here is how I did, with 3 easy steps to follow.

  1. Include the GMaps API’s library into your application.
    Into app/views/layouts/application.html.erb
    <%= javascript_include_tag “https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false” %>

  2.  Add the div which is going to include the maps
    The default div is <div id=”map_canvas”></div>.
    You put that where you want the map to appear on your page. NOWHERE ELSE!
    This is the default id for the div, you can use whatever you want, but I recommend to just use this id, so you’re sure you’re not forgetting to change it anywhere else in the script!

  3. The actual script itself.

So let me explain all that.

First, the script;
The script has 3 parts;

  1. Initialize() is the function allowing to build the map and center it where you want, with the zoom you want, and insert it into the #map_canvas div.
  2. calcRoute() is another function, building on top of the built map the directions route with the options given.
  3. The jQuery $(‘window’).load… which calls the 2 functions as soon as the page is loaded.

In Rails, you usually put all your scripts into app/assets/javascript. Any .js file in that directory is automatically loaded because of ”//= require_tree .” into application.js.

That’s a cool feature, but that’s exactly what you DON’T want to do with that script. You just want it to load on pages with that maps.
There are multiple ways to do it, but here is how I did. 

I put my div#map_canvas and my script into a partial;
So in my page with the map, where I want the map to appear, I have
<%= render ‘google_map_directions’ %>
which call my _google_map_directions.html.erb partial in which I have my div, and call my script.
In the case you wanted to call the script on every page, just remove the <script> tag and put the JS in a .js file inside the app/assets/javascript/ folder.

Here, hope it helps next time you want to implement a maps with different directions set dynamically! In our case, we want to show the direction between DevBootcamp’s offices and the address of the House we are showing. 

DevBootcamp Day 56

Blogging has been a bit slow recently, and I am sorry about that I KNOW YOU CAN’T LIVE WITHOUT IT, but it’s like that, so stop crying like a baby. Life is unfair, deal with it.

Monday we finally did the groups for the final projects, and I couldn’t get happier! I got a good group with people I trust and I get along with, so no drama expected. Cool. The two first days have already been almost flawless, and the group is getting organized like a pro.

Basecamp, Github, branches pull request, pairing, fulfilled objectives, all, is, good!

We have been working on the user’s model with Alan since yesterday; We first implemented omniauth with Twitter because we knew it would work with not much trouble (we both used it already). Took us the afternoon. Not so bad.
Then, because we wanted more information than what Twitter provides, we pivoted on a Facebook login. That was the plan. And it worked (well Alan should be fixing a little details right now…! Go Alan, I believe in you!).
So it’s good, we get all we need now.

OH I FORGOT TO TELL YOU. We are working on Andrew’s idea, which he has been talking about since this summer; Hang Your Boots. It’s an app to allow the next boots to be able to easily find housing to share. We are all in that situation; We are 6 sharing a 2 bedroom, so we know exactly the struggles we had doing that with complete strangers (we didn’t know each other at that time!) and now realize how fun it is and no one regrets.
So we just want to make that process easier and with less risk for the next ones!

This is keeping me really busy, so not much time to work on Swiv!… but I keep features in mind and this will be perfect to keep my hands dirty during the Christmas holidays!

Last but not least, today, a lot of mentors came to the office to train us doing mock interviews. I got a good technical one, which actually was super interesting, since I got to learn something!
The interviewer started by asking me if I had heard about Linked Lists. Obviously, I had NOT. So obviously, he made me write methods about them!
Simply put, a linked list is a data structure consisting of a group of nodes which together represent a sequence. (THANK YOU WIKIPEDIA).

So as you can see, you have pairs. Each pair has 2 elements. Let’s say A and B.
A is an actual data you wanna store, and B is kept empty. So anytime you want to add data to the same structure, you add that data inside the empty B, as a pair with a new A being your data, and B being empty again. Allowing unlimited chaining!

Yeah I know. Well it was interesting to learn about them by writing an actual LinkedList Class, and methods to find the length of a LinkedClass… all that in the stress of an interview, with a pen and paper. Eh… who still uses computers?!

I finally have an interesting story to count to my grand-children!

I’ld like to end with a quote form Phil, former summer boot who interview Daniel (I’ll let him talk about his technical interview, it was an interesting problem!).

Who the fuck cares if you don’t know shit? It’s a temporary thing!

Introducing: Dinner-Table Tennis


A bootcamp-style education cultivates creative and innovative solutions to all sorts of problems. Four-dozen brilliant student minds collaborating. And now I present to you: dinner-table tennis. 

Jonathan de Pepinski - the reigning champion, hailing from Montreal, Quebec, CA. Also known as “Jauny”. 

Note his kung-fu-like Karate-kid-style forehand. Brilliant form. 

(via bootedup-deactivated20131225)

DevBootcamp Week-End - 8

I’M SOOOO TIIIRREEEDDDD I feel like I won’t be rested again. I’m cursed to be tired until the rest of my LIFE!

Such a long week-end. Thanksgiving. I didn’t know it was such a big deal in the US. Was my first real thanksgiving. I almost died out of not 1, but 2 turkey overdoses. Was amazing tho. 

Some had the chance to go back home with Family, or to L.A. (YES I’M TALKING ABOUT YOU GUYS), but my roommates and I just stayed here, and despite 2 big TG diners, we still showed up at the office, and worked. Because you know, we do what we have to do!
But I’m starting to be missing the family. Even more my lovely girlfriend.

I won’t lie tho, for me, it was a slow, long week end. Didn’t do so much. I refactored some of my code from swiv!, learning more about RSpec and Capybara. I wrote more tests to learn about them. I also just refactored some of my code, moved some intel from the controller to the model, and that kind of things, allowing me to get to know better what is the real structure of Rails. It was nice to do, and the big picture of that huge, magical framework seems to be clearer now.

I also worked on my Javascript. Because I still sucks. I still hate those parenthesis and curly brackets. But yeah, I can so the POWER of JS, front like back-end, and learn to enjoy it despite the horrible syntax.
I went through code-school’s CoffeeScript class and it made me happy. Answered exactly what I wanted to; It’s like the power of JS, into the syntax of Python. Pretty nice.

And then I worked on Node.js, and trust me, when you see something like that, you really wanna be master AND enjoying Javascript, because it IS powerful! (what are you saying? Meteor? :) Ah yeah!)

I still feel like I wanna learn more core CS basics. After building a web server in Ruby with my mentor (You know, Steve), and another one in Node.js, using socket.io and all that, I really feel like my understand about it is OK, but not deep enough. 

8th week end. That means only 2 more weeks. 

So tomorrow we will be pitching ideas and assigned to groups to work on the best ones. Until the end of the program. 2 weeks. This means 20% of the program.
You better end up in a good team.