Join me during my amazing adventures: Damien tries to become a freelancer !

I recently started taking freelancing seriously. A lot more seriously than I did in the past. I’m at a point where I’m considering becoming a freelancer full-time, as my primary (only) occupation. So, I decided to write about it. It will probably help me getting through the struggles I face more easily. Or maybe some of you considering making a move into the freelancer world will find some comfort in my words.


Anyway, a few things triggered this attraction to the freelancing world:
– the freedom the freelancer has (Yay!)
– the current difficulty I have to find a job in my area (not cool)
– my very own brother asked me to build an e-commerce website for him (that’s nice)


With that in mind, I talked myself into becoming a freelancer. But, because I’m also the type of person that can spend months researching and planning without doing anything, I decided to just go for it. I believe this is the best plan, even if I know I will fuck things up (I even already did… sort of).


So, one thing you might hear about freelancing is the importance of networks. Well, my brother is giving me my first gig after all. But, to be honest, my network is limited to my family. I don’t have any head start here. This means, I have to spend some time on online job boards to look for gigs.


I started with Upwork, and i saw a blog post on Medium. You may have read it. It really freaked me out. So, I crossed Upward for good. I am currently on PeoplePerHour, and it’s going good so far.


Okay, I know you are all waiting for the story where I fuck things up. Here it is. The very first job that I find, and so far the only one, was about adding some functionality on the EspoCRM. I never heard of it before, but the job talked about javascript and json. I thought, well this is for me. Oh boy was I wrong. The man was really nice, patient, took the time to explain to me what I needed to do.


I understood the requirements, the thing is, I never touched such a platform before. Now, that might not be so bad. So, I spent a few hours trying to wrap my head around a plausible solution. Nothing, no-thing. So, I tell the client that the job is a lot more difficult than I thought (urgh…). So, we talk to each other on teamviewer, explain it again, very patiently. And he even gives me other possible solutions that would work for me (!!!) . One of those seems doable, so he gives me two hours to tell him if I can do it or not.


I got further than the last try… But, I couldn’t get the functionality to work properly… What a awful feeling that somebody trust you to solve a problem, and you just can’t do it. So, I just told him he should probably find a freelancer more qualified than me. Yeah, not good..
The feeling is pretty terrible … But, I can get a few lessons from that adventure.


– Be honest. If I realised I couldn’t do it. I won’t lie to the client. Own it. Apologise for wasting their time and move on. It may happen again, but there is no excuse for lying about the abilities. I thought I could, I was wrong. I’m really sorry. Moving on to my next mistake.


– Be careful about what you are working with. I’m sure this will not be the last time I will deal with a platform, library or software I’m not used to, but I have to be realistic about what I can achieve with my current knowledge. I like the lesson in humility though. Be careful not confuse this with a feeling of worthlessness. It’s not true, and it really doesn’t help you. Dismiss this feeling.


– Don’t feel bad for too long about this. The client may yell at you, but upset, even give you a bad recommendation. Unfortunately, I think those things are part of the journey, at the beginning.


This is the end of my first chapter. I will keep learning about this freelancing stuff. I will keep learning about programming. I will learn how to get the right clients, clients whose problems I can solve with my skill set.


As always, feel free to share and comment.
Have a nice day.
Read more

For a very long time, I’ve always admired people who found their calling. People that just says ‘Well, I just do what I always wanted to do.’ . I was jealous of that. Knowing what is right for you from the start. The headaches you must save yourself if you are that lucky person. So, because I didn’t have that chance, I just though something was wrong with me.

Right? ​NO!

​Nothing is wrong with me. There is simple explanation to this: Passions are not born, they are cultivated. Nobody wakes up one morning with the perfect career choice in their mind. The path that will be just right for them. Impossible. Some may find the right career path on their first time. But the environment around us defines a lot of things about what we do.
It is the good old nature vs nurture debate. Our genes against what surrounds us.


​​The​ assumption that I had before I started reading literature about the subject was: we must have control about our environment (nurture) and close to no control on our genes (nature). Well, that’s actually the opposite. We do not fully control our environment. I am an avid reader, I love it. Why? My mom used to read a lot too. The people, the culture that surrounds us are very likely to shape who we are as human beings. It makes sense. We, as children, must learn from people we interact with. At first, our parents. Then, our teachers and classmates. We are a product of the people we spend time with.
So, when you start playing the piano at 5, become a very good player at 13, and gives breathtaking concerts at 18, what’s going on? We must look at the environment. Are mom and dad musicians? Most likely. Mozart father was a composer that forced him to practice hours on end.

B-Picking the passion

When I look back at my life, nothing tells me that my environment pushed my towards programming. So, how do I explain the fact that I sticked with it?
In the George Leonard’s book Mastery, the author takes about three kinds of people in their path to mastery. The Dabbler, the Obsessive and the Hacker.

The Dabbler loves new things. He is very excited about trying a new sport, a new job, a new career. Getting the fancy stuff to get started. The first lessons are amazing, this IS the right thing for him. Then, he hits a plateau, the excitement fades, and disappear. The Dabbler looks for something new to get excited about.

The Obsessive is different in the way he sees the first plateau or falloff he hits. He doesn’t accept it, he can’t accept it. So he works harder, he must get everything right, right from the start. He stays longer at the office, ignore advice and just keep pushing. He manages to keep the fire alive in short spurts, pushing just one more time. Until he just quits.

Finally, the Hacker is very different. He is perfectly fine is the plateau that he hits. The Hacker gets by, doesn’t have a strong desire to improve. He gets the hang of one thing, and just think that’s all he needs. Every break he can get, he takes. He is fine with other Hackers around him. But if the people around start improving, ouch!

I am a Dabbler. i love trying new things. I tried a LOT of things. I buy the instrument, the books, sign up for that app. Yeah, this is my thing now. I envision myself being an expert at whatever new thing I picked up. I improve! Oh my God, this is it! I found my calling, finally!
Then, the plateau. The initial excitement is no longer here. And I just find something new to do.

This description of the Dabbler hits home for me. And I realised it was not sustainable. So I read more books about talent, finding your calling, having the right path, happiness. One day, I started to teach myself how to code. And I sticked with it. Why?

C-Having something to show

My first attempt at learning how to code was with C. I read that many languages derived from C, it is like the latin of programming languages. I thought, well I must start here. It will give me all the tools necessary to become awesome. So, I picked up Learning C for Dummies. Want to take a wild guess at what happened?

Yeah, I quit after a few weeks. I read about compilation, about the loops, the if-else…
I saw the stuff printed in my terminal… So boring…
Then, I discovered Treehouse and I signed up for the 14 days free trial. And I got into it. A year later, I’m still into it. Why? Because I built something right away.
You see, now, a lot of courses online make you write code right away. And this is so important. You are engaged, you are not drowning in the technical terms. You just do something of value, you feel useful. I made an HTML page! Now that I look back at it, it was nothing. A few tags, a header… But it was all me! I made it work!

Then, we added CSS, a bit of Javascript. An image here. And soon, my very own website was online. I still remember the feeling of wonder and amazement I had when it went live. I couldn’t believe I did this. I couldn’t believe of the road I had travelled. Sure, it was just a website, but it was mine. It wasn’t much, but that little thing was my baby.

This is what you must look for when finding a passion. Look for a teacher, or a course that will engage you in the task. Make you feel useful. Not just bore you with endless theories.

Make sure you build something, even the smallest thing possible!

As always, feel free to share and ask questions!
Have a nice day!

Read more


In this article, we will make a very simple API (Application Programming Interface) with Express and Mongoose. We will create a program that will talk to a database. What we do with the database will be defined by the routes and the method we enter. An API is only on the back-end side of the application. We will not take care of connecting this API to the front-end (but you could do it without a problem).

To achieve this, we will use Express, Mongoose and Postman. Mongoose is an ODM (Object Document Mapper).It makes it easier to connect and interact with a mongodb database.
Postman is a tool that allows you to test and run your APIs. It’s a really great tool that can be found here.

A- Database and model

First let’s start by installing the packages we’ll need to interact with the database. In order to install MongoDB and use it on the command line, you can follow the tutorials here.

When this is done, create a new directory and add two files: model.js and index.js.
First things first, let’s install our dependencies, with this command:

npm install express mongoose body-parser

In model.js, we will create a Schema. A Schema represents the data you want to store in your database. A Schema takes a JSON Object. Like this:

const mongoose = require('mongoose');
let Schema = mongoose.Schema;

let AlbumSchema = new Schema({
	title: String,
	year_release: Number,
	artist: String,
	genre: String

let Album = mongoose.model('Album', AlbumSchema);

module.exports = Album;

We require the mongoose package. Then, I create a variable Schema that will allow me to instantiate a new Schema. this application will store albums, so I give my Schema the name AlbumSchema. As you can see, my schema takes a JSON object with 4 keys. Each key has a value that corresponds to its data types. You can find more information on the mongoose data types here. For this example, three keys are String, one is Number.
The mongoose Schema needs to be stored into a model. We do this by calling the model() method. It takes two arguments, the first is a string and defines the name of your model. The second argument is the schema concerned. Finally, I export this model.
Great, now let’s move on to our routes

B- Database Connection And Routes

Let’s open our index.js and require our dependencies:

const mongoose = require('mongoose');
const Album = require('./model');
const express = require('express');
const jsonParser = require('body-parser').json;

const app = express();

app.listen(3000, () => {
	console.log('Listening on port 3000');

Nothing crazy here. I require mongoose, my Album model, express and body-parser. We use the body-parser to transform our requests bodies to JSON. It makes it a lot easier to work with data. Next, I instantiate a new Express application and use our parser in the middleware. Finally, I tell the app to listen to the port 3000.

Next, let’s connect to our database. We are going to use the local machine. Here is what it will look like. Add this to your index.js

//connect to db
const db = mongoose.connection;

db.on('open', () => {
	console.log('You are new connected to the database');

db.on('error', (err) => {
	console.log('An error occured!', err);

The mongoose.connect() takes the url of the database. On your local machine, it will have this form mongodb://localhost/ . Then, you enter the name of your database. Here, I chose mongoose-test.
To be able to interact with your database, you need to start the mongo deamon. It is included with the MongoDB installation that you did earlier. All you need to do is open a new terminal window and enter the command:


Now, if you start your app with node index.js(in a different terminal window). You will see:

Listening on port 3000
You are new connected to the database

Let’s create our routes!
Here is what I chose to do: Two GET routes, one to get all the albums of the database and an other one to get an album based on its id. There is one POST route to create a new album and a DELETE route to delete an album based on its id. You can of course create more if you wish. Here is what it looks like for me.


// GET all albums in database
app.get('/', (req, res) => {
	Album.find({}, (err, albums) => {
		if(err) return next(err);

//GET album by id
app.get('/album/:id', (req, res, next) => {
	let id =;
	Album.findById(id, (err, album) => {
		if(err) return next(err);
			res.json({message: 'No album with this ID in the DB!'});

//POST new album'/album', (req, res) => {
	let album = new Album({
		title: req.body.title,
		artist: req.body.artist,
		year_release: req.body.year_release,
		genre: req.body.genre
	res.end('The album ' + req.body.title + ' has been saved');

//DELETE album by id
app.delete('/album/:id', (req, res, next) => {
	let id =;
	Album.findById(id, (err, album) => {
		if(err) return next(err);
			res.end('No Album with this ID!');
		res.end('Album has been deleted');

As you can see, we use the findById method on the model to find a particular document. The id is automatically added by mongoose, you do not have to take care of that. To find all documents, we give the find method an empty object. To get the id from the url, we use the express req.params property.
Let’s see this in action! Launch Postman.
At the top, you can find the url bar and the method. In our case, the URL will be http://localhost:3000/ .
You can start by adding an album of your choice by choosing the POST method and the url http://localhost:3000/album. Then, select Body in the sub-menu. Pick raw in the radio boxes and choose application/json in the dropdown. Now, enter a JSON object with the properties specified in our model (year, title, artist, genre) and press Send. Our API will process and add this document to the database.
If you choose GET method and the ‘/’ path, you will be able to see all the albums you add.
Note:the id you specify to see a certain album or delete must be the one added by the MongoDB database. It’s the value you see in the key _id. It has this form :

"_id": "5822fd543990280b9cfded04"

Well, there you have it! A very simple API that should get you started with mongoose.
Feel free to ask questions and tell me what you think.
Have a nice day!

Read more


In the world we live in today, a person looking for a job is no longer restricted by the location he lives in. The state of communications makes it a lot easier to work from home, for a company on the other side of the planet. Entrepreneurship allows individuals to look for work all by themselves, without having to rely on a company to do it for them. Many people choose this way of making money, taking care of every step along the way. It is an ode to freedom, having the responsibility to market its skills, and choose who you want to work with.
I currently am looking for a job. So, because the prospect of freedom is appealing, I decided to look a bit deeper at the possibilities in front of me. In this blog post, I will list the things I found in my researches.

The employee

Let’s start by the most common, being an employee. Surely the safest way to make money each month. As long as I am employed, I get my check at the end of the month. Depending of your country, you will get different advantages with it. We can distinguish, in my opinion, two sorts of employees. The first one will be the ‘Go to the office everyday’, probably the only one our parents are aware of. But, in the industry of technology, a second kind of employee was born: the work-from-home employee. The remote position. The freedom of working from home, while having a safe check at the end of each month. Pretty appealing.

My take: Jobs involving Node.JS around my area are very rare. As of now, I am more looking for remote positions. Even if I am not extremely please with it, I might have to consider moving closer to a larger city where I will have more options.

The freelancer

The second option I considered was to become a freelancer. The freelancer is responsible for finding is own clients. He has to market himself, convince potential clients, do the work. This option probably embodies the idea of freedom the most. No boss, no colleagues. You choose the work you want to do (assuming you have enough work to be picky). It is also less safe than the employee. Since you are in charge of finding your own work, your income is not always guaranteed. Especially when you are starting out. How can you convince people that you will do a good job, if you’ve never done a job before?

My take: I am currently starting to freelance. It will allow me to have more experience and make some money on the side while I keep looking for a job. Of course, I don’t close the door to becoming a full-time freelancer, but it simply isn’t a priority right now.

The entrepreneur

I kept the most difficult option for last. The entrepreneur. The ‘let’s create my own startup king-of-guy’. I would be lying if I said I never entertained the idea. The entrepreneur is for sure the path that will be the most rewarding in terms of money and recognition. But it most certainly is a complicated route to follow. Creating a product, marketing, selling… It looks really attractive, and some of you are probably ready for this, but not me, not now.

My take: Preparation is key. I simply didn’t prepare for this possibility yet. Maybe in a few years when I am more certain about my career.


For me, the plan is as follows: Find a job, become an employee. It seems like the logical first step in a career. Like I said, I am currently looking for remote position while considering a possible relocation in the near future. On the side, I am starting to do some freelancing, for the experience and of course a bit of money. It will also force me to learn how to market myself to potential employers.

As always, let me know what you think.
Feel free to share and comment!
Have a nice day!

Read more


Node.Js offers us only a few modules to get started, but they are extremely useful. When you build a platform like Node.Js, your goal is to have components that make it easy to build on top. In my learning journey in Node.Js, I like to study a little bit deeper the source code of those modules. So, for the purpose of this article, I chose to look at the querystring module. You can find the documentation here and the source code here.

The Query String module

The query string module is a small one. 413 lines (with all the comments). If you look at the docs, there are only 4 main functions. escape, unescape, stringify and parse.
As its name indicates, this module works on the query part of an URL. Let’s use the URL module to get the details of an URL. Let’s create a file:

const url = require('url');

let urlStr = '';

In this example, we want the details of the google’s homepage URL. To achieve this, we use the url.parse() function.
When you run this file, here is what your console will print:

Url {
  protocol: 'https:',
  slashes: true,
  auth: null,
  host: '',
  port: null,
  hostname: '',
  hash: null,
  search: '?gfe_rd=cr&ei=CK0ZWOmGJoqg8wfUjIGYCw',
  query: 'gfe_rd=cr&ei=CK0ZWOmGJoqg8wfUjIGYCw',
  pathname: '/',
  path: '/?gfe_rd=cr&ei=CK0ZWOmGJoqg8wfUjIGYCw',
  href: '' }

Here are the details of this URL. We get a URL object back. In this object, you can see a query key. This is what the query string module works on. It is everything after the protocol, host and pathname.
Great, now we know the scope of our module. Let’s see the functions it offers us.

A- parse()

We will start we the parse function.It takes one mandatory parameter, a string. If we keep the previous example with the google’s homepage, let’s parse the query of the URL like this:

const qs = require('querystring');
let urlQuery = 'gfe_rd=cr&ei=CK0ZWOmGJoqg8wfUjIGYCw';

After running this, the console returns:

{ gfe_rd: 'cr', ei: 'CK0ZWOmGJoqg8wfUjIGYCw' }

We can see a pattern here. The ‘&’ sign acts as a separator between key:value pairs, and the ‘=’ acts as the separator between each key and value. This two signs are the defaults signs. You can change them. The parse function takes 3 optional parameters. The first one defaults to ‘&’, in order to delimit key and value pairs in the query string. The second one defaults to ‘=’, in order to delimit keys and values. Let’s try to change them in our query string and our function:

const qs = require('querystring');
let urlQuery = 'gfe_rd:cr!ei:CK0ZWOmGJoqg8wfUjIGYCw';
console.log(qs.parse(urlQuery, '!', ':'));

We replaced the ‘&’ by ‘!’ and the ‘=’ by ‘:’. If we run this, we will get the exact same result than before.
Note: If you do not specify the right separators in your functions, you will just get your query string as an empty key. Most URLs use the ‘&’ and ‘=’ as separators, this is why they are the defaults.

The third optional parameters takes a object. This object has two keys by default. The first one (decodeURIComponent) takes the function querystring.unescape() as a value. We will see this function later in this article. this is the place where you specify how to deal with percent encoded characters (such as %20 for spaces). The second key is maxKeys, and it defaults to 1000. It specifies the number of keys to parse. It allows you to have more control over really long URLs. Give it 0 if you wish to remove any kind of limitations.

Let’s move on to stringify.

B- stringify

The stringify function is the opposite of parse. It takes one mandatory parameter, an object. It transforms it into a query string. Like this:

const qs = require('querystring');
let queryObj = { gfe_rd: 'cr', ei: 'CK0ZWOmGJoqg8wfUjIGYCw' };

We take the object the parse function returned last section and call it as the stringify argument.
In our console, here is what we get back:


We find the same query string than before. However, just like the parse function, the stringify function takes 3 optional parameters. The first two are the same, they define the separators. Let’s change them:

const qs = require('querystring');
let queryObj = { gfe_rd: 'cr', ei: 'CK0ZWOmGJoqg8wfUjIGYCw' };
console.log(qs.stringify(queryObj, '!', ':'));

We change the parameters to equal ‘!’ and ‘:’. Here is the result:


We get back the query string with the separators we specified.
The third optional parameter is different than the one in parse. It only takes the encodeURIComponent key. It takes the default function, querystring.escape().
Let’s take a look at this escape function now.

C- escape

The escape function is fairly straightforward. It takes one parameter, a string. URLs have a specification that makes certain characters unsafe. The escape function makes sure that the query strings are escaped with percent-encoding. Here is what it gives us with a random query string:

const qs = require('querystring');
let queryToEscape = 'this could be&areally cool!String=to,escape?Is it_éven$~possißle??';

Here is how this query looks like when it’s escaped:


The ‘&’, ‘=’, ‘?’, ‘é’, ‘ß’, ‘,’ , ‘$’ and spaces are all percent-encoded now. As we saw earlier, this function is used by stringify. You will probably rarely use it yourself.
Let’s see the last function, unescape.

D- unescape

As we might have guessed, the unescape function does the opposite of escape. It decodes percent-encoded character into a normal string. Like this:

const qs = require('querystring');
let queryToDecode = 'this%20could%20be%26areally%20cool!String%3Dto%2Cescape%3FIs%20it_%C3%A9ven%24~possi%C3%9Fle%3F%3F';

We use the result we got from the escape example and decode it. Without a surprise, we get the original string with the spaces and all the special characters back. As you saw, this function is used in the parse function. Just like the escape, this function will probably rarely be used directly. Nice little thing to note, this function uses the built-in Javascript function decodeURIComponent. You can find more information about it here.


I wrote this article as part of a learning process. I believe it is very good to dig into the source code of a project to learn more about it. The Query String module gave me a relatively simple starting point. It is very short and pretty easy to grasp. I encourage you to read the module’s code on GitHub and see how they implemented those functions. I didn’t understand everything, but it’s always a good idea to expose yourself to other people’s code. I did learn a few things during the process, and will most certainly try it again sometime soon.

As always, feel free to share and comment.
Have a nice day!

Read more

What is Express?

Express is a web framework. It provides a very minimalist structure to build web applications. Express shares the same spirit as NodeJs. Express is unopinionated, fast and small. This framework doesn’t force you down a certain path. It only gives you a solid foundation to build upon. This is why Express is a very popular tool in the community. In this article, I will show you a extremely simple Express application. Nothing crazy. It will contain a single file that will help you have something up and running in no time. Then, I will show you the Express generator that creates a full skeleton of a Express application. Let’s get started.

Install and Run

Let’s create a directory called simple-express-app. In this directory, create a single file called index.js.
The first thing we want to do is install Express globally. To do so, open your terminal and enter this command:

npm install -g express

Note: you may have to use sudo for this command.

Great, now open your index.js:

Explanation: we import express in the first line. Then, we instantiate a new Express application and store it in the variable app. This new Express instance allow us to use a lot of amazing methods on it. Here, because this is a simple example. We use the get method. This handles the HTTP GET requests to the specified path.
On line 4, we tell Express how to handle the GET requests made for our index page (‘/’). The callback function takes three parameters, a request, a response and next. You will often times see this abbreviated as req, res, next. We can access the request object thanks to req and control the way our response will be with the res object. The next function tells Express to call the next matching route. We will see it in use a bit later when we will use middlewares.
So, our index page is going to end the response by sending the string ‘Hey Home’.
On line 9, we handle the GET request at the /about path. This time, we decide to send a JSON response. Then, we need to tell our application which port it should listen to.
So if we run this application with:

node index.js

and then visit our http://localhost:3000/ , we see => ‘Hey Home’. If we go to http://localhost:3000/about , we get => {message: ‘About Page’} . Awesome!

Now, let’s go a bit deeper and use something called a middleware. As its name indicates, a middleware is something that is used in the middle. Let me show you a quick example by changing our index.js file like this:

We use middlewares in Express with the use method. Every time our application receives a request, but before we give control back to our other routes, we will run the middleware at line 4 (in the middle remember?). This way, we have a lot more control over our application and it prevents duplicate code. In this example, we log a string with the URL, the hostname and the method. Then, we tell our response object to display HTML in the browser when the status code is 200 (meaning everything is OK). I do not have to tell each route how to display its content, nor do I have to write the console.log statement everytime. Let’s run this file now.

If you visit the homepage or the about page, you will see the corresponding HTML and the log in the console. But, if you go to a path that we do not handle, /contact for example, you will still have the log in you console. Remember, the middleware is called before the response is emitted. Then, we call next(). Earlier, I said that next passes control to the next matching route. So, if I visit /about, when next() is called in our middleware, we run app.get(‘/about’ …. But, if I visit a page that we do not handle, our server will just hang … We could add a little piece of code after our routes like this one :

app.use('*', (req, res, next) => {
    res.end('Page not found');

If our server can’t find a matching route, we will just print out ‘Page not found’. Our first middleware will log our string and pass control to this new middleware if no path matches. The ‘*’ is a shortcut for all the routes.
Note: Make sure to add this middleware after all the other routes. Otherwise, you will always see ‘Page not found’.

Ok, we have a very simple Express application that allows you to understand a little bit what Express is about. We only scratch the surface here and it would be impossible to explore every Express possibility in one blog post. In the last section, we will see how the Express executable work.

Express Generator

The Express executable does a lot of good things for you. It creates a skeleton for your app and allows you to choose a template engine. Express provides support for a variety of different template engines. Those engines let’s you pass data to your view. It’s pretty much HTML on steroids. You can pass markup, data, add some logic … But, this is outside the scope of this article. You can have more info about the executable by tying the command:

 express --help

  Usage: express [options] [dir]


    -h, --help          output usage information
    -V, --version       output the version number
    -e, --ejs           add ejs engine support (defaults to jade)
        --hbs           add handlebars engine support
    -H, --hogan         add hogan.js engine support
    -c, --css   add stylesheet  support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

In addition, you could specify a CSS preprocessor using the –css option, or enable session middleware with –sessions.
Ok, let’s just see what this thing does. I’ll just create a application called myApp and use the hogan template engine.

express -H myApp

And here is the result:

express -H myApp

   create : myApp
   create : myApp/package.json
   create : myApp/app.js
   create : myApp/public
   create : myApp/public/javascripts
   create : myApp/public/images
   create : myApp/public/stylesheets
   create : myApp/public/stylesheets/style.css
   create : myApp/routes
   create : myApp/routes/index.js
   create : myApp/routes/users.js
   create : myApp/views
   create : myApp/views/index.hjs
   create : myApp/views/error.hjs
   create : myApp/bin
   create : myApp/bin/www

   install dependencies:
     $ cd myApp && npm install

   run the app:
     $ DEBUG=myApp:* npm start

As you can now see, you have a shiny new directory with a nice application skeleton. You have to install the few dependencies that were generated and you are good to go! We won’t cover everything, but let’s just take a look at our entry point: app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hjs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}

module.exports = app;

Alright, let’s break this down a bit. The first lines import all the dependencies. Then, we require the files responsible for our routes. you can use a Router with Express, to make it simpler to handle your routes. You can get more information here. Then, with the two app.set lines. We tell our application where our views are and which template engine we use (I chose Hogan for this). The next block serves as a configuration for our app. The bodyParser will allow your application to parse the request bodies for example. The logger will log friendly output in your console. The express.static middleware tells Express where to find your static files. Here, we will look in the public directory.
You can run this application with

npm start

and visit localhost:3000 .

Congratulations, you have now a solid skeleton for your future web applications! I highly encourage you to play around with the Express generator and see what each part does. Remember that this framework really doesn’t force you on any path. The generator only gives you some tools to improve your development process and a Router. You still have complete control over the tools you want to implement and the path you want to take.
Express is a really great tool to learn and explore all the possibilities of web development.

Have fun.
As always, feel free to share and ask questions.
Have a great day!

Read more


In this article, I will give you a quick overview of Webpack. As you may know, JavaScript is everywhere, so the number of tools created by the community increases as a consequence. It is most certainly the sign of a very healthy environment. We, as developers, are trying to improve our workflow, make better products, and make them available for a wide variety of users. But, when you are in a learning process, it is extremely easy to become overwhelmed by all the possible things you can learn. You may have read a few articles about ‘JavaScript Fatigue’ like this one or this one.

As I keep trying to improve my skills as a developer, I can start to recognize a pattern in the most popular tools, libraries and frameworks. React is becoming ( or has become already? ) a very popular library. But, with React, you may have heard about a tool called Webpack. Webpack is a very powerful tool. I’ll try my best to make it as understandable as possible. Here is what I will cover in the article:

  • What problems do Webpack solves?
  • A quick start with Webpack
  • Adding the webpack.config.js
  • Webpack with React

Let’s jump right in!

1) What problems do Webpack solves?

If you are familiar with JavaScript, you may already know about modules. Modules allow us to separate our code into small files to make it more readable and modular. Then, we can export and import those modules in other files when we need them. It makes our code DRY(don’t repeat yourself), easier to test, debug… Well, it’s just awesome.
Node.js use a module conventions called CommonJS. You can find more information about it here. Basically, you use require() to import modules from other file, and the module.exports object to export them. Something like this:


const hello = function(){
    console.log('Hello World');
module.exports = hello;


const helloFunc = require('./hello.js');
helloFunc(); // Hello World

Now, all of this works great in the Node.js environment. The CommonJS modules are the default mechanism and ES6 syntax is supported, because the engine that runs Node.js keeps up with the JavaScript standards. The problem comes with the browser space. The browsers have a very fragmented way to support modules. Some browsers have a environment that supports CommonJS modules, just like Node.js. But other browsers might support a environment based on AMD (Asynchronous Module Definition) loader (RequireJS for example). And some browsers don’t even have a module system at all, meaning that they use globals to access other modules.

So, how do I make sure that the I can use the modules I write in every browser? Enter Webpack. Webpack is a module bundler. It allows us to write modules just like you would do it in Node.js. Webpack will then scan your require() statements and resolves the references modules into a bundle. Webpack goes through a compilation step and creates a bundle(single file) that you can easily include in a web page. If this sounds a little complicated, don’t worry, I’ll show you some examples!

2)A quick start with Webpack

Let’s see a real example of Webpack in action.
First, you need to install Webpack. Go to your terminal and type:

npm install -g webpack

Note: you may have to sudo for this.
Now, let’s create three files: main.js, sayHello.js and index.html.

In main.js, let’s write a simple module:

module.exports.sayHello = function(name){
	return 'Hello ' + name ;

Nothing crazy, we populate the module.exports object with a sayHello method. this method is a anonymous function that takes a name parameter a return string with that name. As you can see, we are using the CommonJS module pattern with module.exports (just like in Node.js).

Next, let’s write our browser code in sayHello.js :

var sayHello = require('./main.js').sayHello;
var hello = sayHello('My Dear Browser');
var body = document.getElementsByTagName('body')[0];
body.innerHTML = hello;

Here, we import the module with require(). Then, we use vanilla JavaScript to call the function, get the body element, and insert our string inside of it.

Now, here comes the magical step. In your terminal, run this command:

webpack sayHello.js bundle.js

We tell webpack to compile the sayHello module and bundle all the required dependencies inside a single file called bundle.js. Now, we can use this in the browser.
To use it in our index.html, add a script with the src attribute equal to bundle.js.

That is all we need to run our code. Open your index.html file in your browser and tadaaaa !
Cool, right? But this is just the tip of the iceberg. Webpack has many other advantages:
-Webpack can generate bundles for different modules
-We can use third-party loaders and plugins for almost everything: ES2015, CoffeeScript, TypeScript …
-Webpack can pre-process our stylesheets, images, fonts …
-Can be runned from task managers such a grunt or gulp
-Webpack has a watch mode, meaning we don’t have to run the command from the terminal after each change.
And many many more…

3) Adding the webpack.config.js file

To go a little bit deeper with Webpack, we will use a configuration file called webpack.config.js. This file exports a configuration object that will be read by Webpack when we invoke it without any arguments in the terminal.
Let’s say that, in our previous example, we wanted to use ES2015 (ES6) syntax. Well, we can configure this in our webpack.config.js file. But first, for clarity, let’s move our main.js and sayHello.js files into a src/ folder. Let’s change those files with some ES6 syntax.


module.exports.sayHello = (name)=>{
	return 'Hello ' + name;

We use the arrow function syntax here.


const sayHello = require('./main.js').sayHello;

const hello = sayHello('My Dear Browser');
let body = document.getElementsByTagName('body')[0];
body.innerHTML = hello;

Here, we use const and let keywords.
Let’s create webpack.config.js in the root of our directory (not in the src folder!) and type:

const path = require('path');

module.exports = {
	entry: path.join(__dirname, 'src', 'sayHello.js'),
	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'bundle.js'
	module: {
		loaders: [
				loader: 'babel-loader',
				query: {
					presets: ['es2015']

Ok, let me explain. The entry defines the entry point, and the output defines the destination of our bundle file. In the previous examples, those were the first and second arguments we gave after the webpack command in our terminal. Next, in the module object, we define the loaders. We know that we need to compile our ES2015 (or ES6) syntax back to ES5 where every single browser can read it. So we use Babel for this. The loaders is an array of objects that defines each loader. For this example, we only use one, but we can use a lot more.

Before running this: we need to install Babel and the ES2015 preset:

npm install babel-core babel-loader babel-preset-es2015

Great, last thing, don’t forget to change the path of your bundle in your index.html as dist/bundle.js. As you can see in the output of our file, the destination is in the dist folder now. It is considered good practice to keep your source files and your bundles separated. Now, you can simply run:


And, now, you have a new folder dist that contains our bundle. And every browser can understand our syntax thanks to Webpack and Babel. Yay!

Note, to launch the watch mode, you can run: webpack -w

4) Webpack with React

A lot of people are drawn to Webpack because of React (at least I was). So, in this section, we will talk about configuring your Webpack to work with React. Compared to the last section, there is not that much configuration required. What is the difference between the code we wrote before and React? Well, you most likely write you code in JSX, the JavaScript superset that makes React easier to work with. So, we need to tell our Babel loader to compile JSX into ES5 code. We just need to add ‘react’ in the presets array like this:

        loader: 'babel-loader',
        query: {
            presets: ['es2015', 'react']

Let’s create a new folder. Create two files, webpack.config.js and index.html. Then, create a src folder. Inside this one, create two files, main.js and greetings.js. Our Webpack configuration file will look like this.


const path = require('path');

module.exports = {
	entry: path.join(__dirname, 'src', 'main.js'),
	output: {
		path: path.join(__dirname, 'dist'),
		filename: 'bundle.js'
	module: {
		loaders: [
				test: path.join(__dirname, 'src'),
				loader: 'babel-loader',
				query: {
					cacheDirectory: 'babel-cache',
					presets: ['es2015', 'react']

The only change is in the presets array.
Note: We are NOT in the same folder than the last section! But I use the same folder names here. You can change them as you please.
Let’s write some React in our greetings.js :

Nothing crazy. Import React and create a component that iterates through the names array. Let’s write our entry file, main.js:


const React = require('react');
const ReactDOM = require('react-dom');
const Greetings = require('./greetings');

ReactDOM.render(, document.getElementById('main'));

This file imports the component Greetings and renders it inside the index.html.

Now, you need to run this command into your terminal to get all the necessary dependencies:

npm install webpack babel-core babel-loader babel-preset-es2015 react react-dom babel-preset-react

Compared to the last section, we added the react, react-dom and babel-preset-react dependencies.
Now you can run webpack in your terminal and open your index.html and you can see your magnificent component in your browser. Awesome!

Webpack is a very powerful tool that will become more and more useful as your applications grow. This article only describe a small portion of what Webpack is able to do. I believe it should be enough to be able to play around with it.
You can find more information on the Webpack documentation here.

As always, feel free to share, ask questions or correct me if I made a mistake.
Have a nice day!

Read more

About me

When it comes to programming, I’m a self-taught. No college, no coding bootcamp… I’m just a random French guy, in his room, in front of his laptop, trying to make sense of all this. I love it. I love learning new things, I love Javascript and NodeJS.
My journey began about a year ago, and now I’m looking for a job in this industry. Programming really changed my life. It changed the way I think and see the world. It’s not just a body of knowledge, but a way of thinking.

My proudest moment in this journey so far came when I completed the three FreeCodeCamp certifications. It felt amazing to achieve such a milestone, and it taught me a lot. But the most important thing I learned is not about programming. So, let me tell you a little story about my FreeCodeCamp experience.

My FreeCodeCamp Story

FreeCodeCamp is an open source community . The concept is simple. You complete a curriculum based on Javascript. You learn to work with jQuery, NodeJS, D3, React… You complete different challenges in order to claim three certificates (Front-End, Back-End, Data Visualization).
Once you do this, you are eligible to code for nonprofits. I discovered FreeCodeCamp about 9 months ago. The curriculum is long (1200 hours) and hard. It took me a while to get all three certifications and I hit many obstacles. The FCC curriculum, in my opinion, is as much about the skills you learn as it is about the mindset you must have. Because I had some experience working with Javascript and Jquery, the first challenges were just things I already knew how to do. I wasn’t learning anything new.

Then, It started to become more complicated. And when it does, that little voice in your head becomes louder:

‘Really? You thought you were good enough for this? No degree, no prior experience, stop hurting yourself, this is not for you.’

The first few times, I was able to complete the challenges, to keep pushing. But at one point, the challenges are not just complicated because of their logic, you also need to learn a library or a framework (looking at you React). What did I do when I couldn’t prove that little voice in my head wrong? Well, I started to doubt myself. I procrastinated. I stopped doing things out of my comfort zone because I wanted to feel better about myself and my abilities.

To me, this feeling was the strongest when I was trying to complete the Game of Life challenge. You can find the challenge here. Now, I struggled for the previous React challenges, but this one was just scary to me. It looked complicated. All those cells doing things by themselves? I can’t do that. No way. It took me a while to get around this. Everything felt impossible about this challenge. From the way to display the cells to how I was supposed to make them interact with one another… How do you quiet the little voice and just move forward?

Just learn enough

The first thing I did was to learn more about React. I realized that my lack of basic understanding of the library was a real problem. So I learned a little bit more. Not too much, just enough to start playing around. I think this is important, you just have to understand enough to mess around. Don’t drown in the technical terms at first. In this case, I just needed to understand a little about props and state. It started very innocently, I just wanted to click a cell and toggle its state, from dead to alive. Just a simple click event. No big deal. Then, I added a setTimeout function. Again, nothing extraordinary. But, very few steps at a time, I completed a user story, then an other one. And one day, I looked at my browser and saw this.

Yeah, I made it. All me. Wow! Is the code perfect? I’m pretty sure it’s not. Is there a better way to show the board? I would not be shocked if it was the case. I’m a 100% sure that a few weeks or months from now, I will come back to this pen and find the code ugly. But when I completed that challenge, this is not what was on my mind.

At that moment, I just learned something way more important than React or any kind of technology the programming industry has ever invented or will ever come up with. I understood how to work around my own limitations and lack of knowledge at a given moment.

I read countless of articles about programming, saying that everybody can become a developer and you don’t need a certain kind of brain. Well, now, I know it is true. I’m not a good developer yet. I don’t write good code yet. A lot of things about React and NodeJS are mysteries to me for now.
I don’t have a programming job yet. That’s the developer I am in October 2016. This developer won’t be the same next month, next year or the next decade. But my limitations today don’t define the kind of developer or person I can become. The mindset you have and the ability to learn by yourself defines what you will become.

When is a flower perfect?

This is the main thing I got from the FreeCodeCamp curriculum. I understood a lot of technical concepts. But more importantly, I understood how to be comfortable with my own lack of knowledge and expertise. I truly believe this is worth more than any programming concept. I will end this article with a quote from ‘The Practicing Mind’ by Thomas M. Sterner that gave the title of this post:

At what point in a flower’s life, from seed to full bloom, does it reach perfection?

By now, I’m sure you can guess that the answer is:
The flower is always perfect.

So, FreeCodeCamp, Thank you for this !

As always, let me know what you think. And feel free to share.
Have a nice day.

Read more

In this article, we will build together a simple command-line application using NodeJS.

We will make a very original (not really) ToDo application. In this application, you will be able to create a todo, update todos and remove todos. We will use a file-based storage, meaning our todos will be stored in a file. Considering the size of the project, I believe a database is not necessary.

What do we need?

We will only use the tools that NodeJS provides us out of the box. No packages, no npm to worry about.

We won’t need much actually. To interact with the command-line, we will use the process object. It is a global object that allows us to read and control the current NodeJS process. You can find more information about this here : Node Process Docs .
Process is a global, meaning it’s always available, no need to require() it.

Next, because we will implement a file-based storage, we need to read and write to a file. NodeJS gives us the filesystem module, known as ‘fs’. We do need to require it.

And, that’s all we need. The rest of the logic will be handle by regular Javascript, let’s get started!

1) Files

First, let’s create a directory. Go to your terminal and type

mkdir <nameOfYourNewFolder>

and press enter. Now, type

cd <nameOfYourNewFolder>

and then:

touch server.js todos.txt

Great, we have our files now.
Let’s open our text editor and create some todos in our todos.txt.

Here is my todos.txt:

Buy clothes|Feed the cat

Note: To differentiate each todo, I chose to separate them with a pipe character. This choice is totally up to you, choose whatever character you feel is appropriate.

2) Read Todos from file

Awesome, now how do we read those todos from our todos.txt and display them in the terminal?
Open server.js and type this.

const fs = require('fs');

//Read todo from file and display them
let todos = getTodosFromFile();

function getTodosFromFile(){
    let todos = fs.readFileSync('todos.txt', {encoding: 'utf-8'});
    return todos.split('|');

function displayTodos(todosArray){
    console.log('\n\nHere are your todos: \n\n');
    for(let i = 0; i < todosArray.length; i++){
    console.log(i + ') ' + todosArray[i]);


function displayInstructions(){
    console.log('Type quit to exit. Type create <todo> to add a new todo.\n',
    'Type update <index> <todo> to update a todo.\n',
    'Type delete <index> to delete a todo.');

Let me explain: the first line sets the encoding for the terminal, here utf-8(in this case, stdin is our terminal).
Next, we require our fs module.

Next, we have a few functions.

The first function getTodosFromFile retrieves the content of our todos.txt. To achieve this, we use the fs.readFileSync function. It takes 2 parameters, the path of the file we want to read, and an object of options. The file is in the same directory as server.js, so we just type ‘todos.txt’. For the options, I specified the encoding {encoding: ‘utf-8’}. Now, this fs.readFileSync returns a string. But, I decide to split this array with the ‘|’ character. That allows me to know where a todo string stops and starts.

Note: If you use a different character than ‘|’ , you’ll have to replace the appropriate character in the split method.

Awesome, we are now in possession of an array of todos. Let’s show them with the displayTodos function. As you can see, this function takes the array of todos and iterate through them. I added a few newlines characters (\n) for clarity.

The displayInstructions function gives the user informations about how to interact with the application.

Amazing, so let’s see how this works.
Go to your terminal and type

node server.js

And here you see your todos:

Here are your todos:
0) Buy clothes
1) Feed the cat

Type quit to exit. Type create <todo> to add a new todo.
Type update <index> <todo> to update a todo.
Type delete <index> to delete a todo.

Now, let’s add the different commands to create, update and delete todos.
We’ll start with creating.

3) Create todo

Right now, if you tried to type something in the console, nothing happens. You can only kill the process with Control + C. Why? Because we need to tell our process.stdin (terminal) what to do when we enter data.
In our displayInstructions function, you can see that we have 4 words that will be used as commands: quit, create, update and delete. Again, those are totally arbitrary.

So, our program needs to identify when the user enters data to the terminal, then our program needs to know if the text entered contains a special command. If the answer is yes, it triggers some actions depending on the command.

First things first, making our terminal listens to the data we type. To do this, we add this code:

process.stdin.on('data', (text)=>{
// our logic will go here

Each time we send data to the terminal, meaning each time we press Enter, the program will run the callback. The text parameter will be the string that you typed in the terminal. It will be a string because we set the encoding to ‘utf-8’ on the first line, remember?

Now, we need to now if the first word of the text is in fact a command. If we use a split method on the string and a switch statement, we can handle this problem like this:

process.stdin.on('data', (text)=>{
//split the string at the spaces
let textAsArray = text.split(' ');
let command = textAsArray[0];

    case 'create':
        //create Todo
    case 'update':
        //update Todo
    case 'delete':
        //delete Todo
    case 'quit\n':
        //exit program
        console.log('Unknown command.');

Each command has its own logic. If the command is not create, update, delete or quit, we use the displayInstructions function to help the user.

Note: You may notice the newline(\n) character after ‘quit’. When you type enter, the terminal seems to add this character automatically. Because the other commands needs additional input to their logic, if you just type ‘create’ or ‘delete’ or ‘update’, it will trigger the default case (because the terminal will add the newline character by default).

Very well, let’s write our logic for creating a Todo. The ‘create’ case will look like this:

case 'create':
    // Get todo text and update todos.txt
    let todoText = textAsArray.slice(1).join(' ');
    fs.appendFileSync('todos.txt', '|' + todoText);
    let todos = getTodosFromFile();

First, we take away the command from the text. Remember, we split the string before the switch statement. So everything after the command is the body of our Todo. So we join the rest of the array with spaces.
Now, here is the fun part. We have our Todo as a string. We need to add it to our file todos.txt. To achieve this, we use fs.appendFileSync. It takes 2 parameters, the path of the file we want to write to, and the text we want to write. Notice that I add the ‘|’ character before the text of the Todo to help use differentiate todos in the future. After that, we use two functions that we already wrote earlier, getTodosFromFile and displayTodos. Now, after running this program, you will see your todos.txt updated and your new todo added in your terminal.

Note: Careful with the function you use to write to a file. Certain functions like fs.writeFileSync will replace the content of the file and not append. You can get more informations about the fs functions here: Node fs Docs

4)Update Todo

Awesome, now we can add todos to our little program. Let’s move on to updating.
If you read the instructions, you saw that the update command needs to be followed by the index of the todo you want to update, then by the new text of the todo. This means that we have to slice our array a bit more to retrieve the index. Here is how we could put this in place:

Add this inside the ‘update’ case:

case 'update':
    let indexUpdate = textAsArray[1];
    let newTodoText = textAsArray.slice(2).join(' ');
        console.log('You must enter the index of the todo you want to update.');
        updateTodo(indexUpdate, newTodoText);

And here is the updateTodo function:

function updateTodo(index, todo){
    let todos = getTodosFromFile();
    if(index > todos.length -1 || index < 0){
        console.log('Index out of range');
    todos[index] = todo;
    let updatedTodos = todos.join('|');
    fs.writeFileSync('todos.txt', updatedTodos);
    console.log('\nTodo Updated! \n ');

Alright, let me break this down a bit. So we know the index is going to be at the second position in the textAsArray. This means everything after the index is the body of the updated Todo. We need to make sure the index is actually a number. If it is, we run the updateTodo function.
This function retrieves the todos first so we are up-to-date with the file. Next, we control that the index is in range. If it is, we update the correct todo. Then, as we did before with create, we write the new todos in our file. Finally, we display the new set of todos.

5)Delete Todo

We’re almost there! We now need to implement a way to delete a todo. To do this, we use the delete command followed by the index of the todo. Here is how the ‘delete’ case will look like:

case 'delete:
    let indexDelete = textAsArray[1];
        console.log('You must enter the index of the todo you want to delete.');

And here is the deleteTodo function:

function deleteTodo(index){
    let todos = getTodosFromFile();
    if(index > todos.length -1 || index < 0){
        console.log('Index out of range');
    todos.splice(index, 1);
    let updatedTodos = todos.join('|');
    fs.writeFileSync('todos.txt', updatedTodos);
    console.log('\nTodo Deleted!\n');

Just like the update case, we retrieve the index and make sure it is a number. Then we call the deleteTodo function. We get up-to-date with the current todos and we make sure the index is not out of range. Then, a classic splice method on the todos array deletes the targeted todo. We join the array with our pipe ‘|’ character and write it to our file. Finally, we can display our todos.

6) Exit the program

Yeah! We can add, delete and update todos. We just need one more little thing: a way to exit the program. Now, if you know how to use the terminal, you will do control + C.But, our users may not know this trick. So we added the quit command. To do this, we add this logic to the ‘quit\n’ case:

case 'quit\n':
    console.log('Good Bye!');

As you might have guessed, process.exit() kills the current process.

And there it is. We have a fun command-line application. You can run it with node server.js in your terminal.
You can get the full code here :
Code on GitHub

I hope everything was clear. Feel free to ask questions and share!
Have a nice day!

Read more