Best way to learn is to look at the best


Most people I’ve worked with don’t like to learn in an ordered manner from a textbook. They enjoy experimentation more than anything, because it allows them to see how things are moving when change is applied.

And because I’ve been working with React lately, I thought it would be a good idea to see an isomorphic application at its best, so I started to dig Facebook’s desktop implementation.

After overcoming the disappointment that they didn’t implement it universally, I did discover some gems in their frontend code.


To be continued.

List all globally installed npm modules

Today I needed to have a look at all the npm modules that were installed globally on my machine. I found that npm has a list command that does just that. But, in order to only see the modules, and not all their dependencies, I needed to specify a depth value of 0:

npm list -g --depth=0

├── ampersand@3.0.5
├── bower@1.4.1
├── brunch@1.8.3
├── grunt-cli@0.1.13
├── gulp@3.9.0
├── http-server@0.8.0
├── javascripting@2.0.3
├── mocha@2.3.0
├── n@2.0.1
├── node-gyp@2.0.2
├── npm@2.11.3
├── phantomas@1.11.0
├── react-native-cli@0.1.4
├── react-tools@0.13.3
├── supervisor@0.7.1

The -g switch is the same one that I used when globally installing each module.

If the name of some package doesn’t immediately ring a bell, replacing list with ll can help:

npm ll -g --depth=0

│ /usr/local/lib
├── ampersand@3.0.5
│   CLI tool for generating single page apps a. la.
│   git+
├── bower@1.4.1
│   The browser package manager
│   git+
├── brunch@1.8.3
│   A lightweight approach to building HTML5 applications with emphasis on elegance and     simplicity
│   git+
├── grunt-cli@0.1.13
│   The grunt command line interface.
│   git://
├── gulp@3.9.0
│   The streaming build system
│   git+
├── http-server@0.8.0
│   A simple zero-configuration command-line http server
│   git://
├── javascripting@2.0.3
├── phantomas@1.11.0
│   PhantomJS-based web performance metrics collector
│   git://
├── react-native-cli@0.1.4
│   The ReactNative cli tools
├── react-tools@0.13.3
│   A set of complementary tools to React, including the JSX transformer.
│   git+
├── supervisor@0.7.1
│   A supervisor program for running nodejs programs
│   git://

Reattach to a screen session

Over the weekend I was working on a small pet project, and I decided to play with a DigitalOcean droplet as I had some spare credit.

As usual, I was using screen to get everything set up. A sysadmin friend first showed me how we could do a server screen sharing with it, and I never looked back eversince. I usually refer to the one-page manual if I forget the keyboard combination.

At some point the internet connection dropped for a few minutes. When I got back online, I was unable to reattach and continue my work.

$ screen -r
There is a screen on:
    28033.pts-0.konf-api    (08/07/15 06:58:36) (Attached)
There is no screen to be resumed.

Somewhere in the man screen instructions I found the magical -D option.

   -d|-D []
        does not start screen, but detaches the elsewhere running screen session. It has the same effect as typing "C-a d" from screen's control-
        ling terminal. -D is the equivalent to the power detach key.  If no session can be detached, this option is ignored. In combination  with
        the -r/-R option more powerful effects can be achieved

Basically it detaches everything else and allows me to reattach right away. Lovely.

So, I went on to execute with that option enabled, and of course magic happened.

$ screen -D -r '28033.pts-0.konf-api'
[detached from 28033.pts-0.konf-api]

Install node.js on Ubuntu servers


Debian-based distros are not particularly friendly with node.js applications. I found this out the hard way, as I tried to

$ apt-get install node

and noticed that there is zero output when trying to check the node.js version with

$ node -v

Nothing. Nada.

I went on to see what was the node command actually executing. Here’s what it said:

$ which node

$ ll /usr/sbin/node
lrwxrwxrwx 1 root root 9 Oct 29  2012 /usr/sbin/node -> ax25-node*

That can’t be good, I wanted to get node.js, not some creepy ax25.

So I started digging around and found out that readme.debian does provide the proper information if one has time to look around. Also, DigitalOcean has a great writeup for getting node.js properly installed in an Ubuntu environment.

One quick way to do it would be to simply symlink current nodejs into /usr/bin, like this:

$ sudo ln -s /usr/bin/nodejs /usr/bin/node

I wanted to not take this route, and rather go back to square one and start over clean.

# Ubuntu names the package nodejs instead of node
$ apt-get install nodejs

# verify version
$ nodejs -v

# install the legacy bridge
$ apt-get install nodejs-legacy

# verify node version
$ node -v

Now that everything is properly linked, I was able to use the pm2 process manager in the way DigitalOcean guide was suggesting.

Developing a Facebook application: set up local environment


Once I have defined my application, I wanted to set up a development-friendly environment that I could use to interact with it, without touching the production version.

Fortunately, Facebook has made it easy by letting developers define test versions, and I added one with the label “localhost” in the end (step 1). It is highly probable that I will need a staging environment as well, so I will just postfix with “staging” when time will come.

Next, I went to my test version of the application, and opened the “Settings” screen.

There are two important changes to be made here:

  • I had to define the application domain to be “localhost” (step 2)
  • I pointed the site URL to my local web server and port values (step 3). The simple steps needed for this are described separately.

After saving changes, I was able to use Facebook login in my localhost application.

Serve static files locally with the http-server nodejs module

Since I left full-time LAMP development behind me, Apache and MySql servers are turned off by default on my Mac. I only start them when they are needed. I then noticed I didn’t want to deal with Apache for quick prototyping or doing local development on static files.

So I went shopping for a very small web server, and found a nodejs module that fits the bill perfectly. I liked http-server, and it took me literally 5 minutes to start using it.

First, I performed a global install, so I can use it in multiple projects.

$ npm install http-server -g

Then I navigated to the folder that I wanted to play with, and started it on a non-standard port:

$ http-server --cors -p 9879

Loading up http://localhost:9879/ in a browser proved it was working perfectly.

The other available options can be seen when executing $ http-server --help, and they are very handy. For example, one can enable https if needed, or can use a certain certificate file.

Easy upgrade the node.js version using n


I hadn’t used node.js for about half a year, and when I got a new project lined up, I decided to update it today. At the beginning of the process, my current version was 0.12.0, as checked with:

$ node -v

My working environment is OSX, where I previously attempted to use nvm and had troubles with it. This time I found an excellent node version manager, with a clean and friendly UI: n.

The update steps were very simple, and straightforward, I detailed below each one.

Clean the npm cache

This step is optional, but as a developer I really enjoy having full control over what is going on. With this, I made sure everything was clean before I began.

$ sudo npm cache clean -f
npm WARN using --force I sure hope you know what you are doing.

Install n

I performed a global install of n, the node version manager I found earlier.

$ sudo npm install -g n
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
n@2.0.1 /usr/local/lib/node_modules/n

Install the desired node version and switch to it

I then asked n to install the latest stable node version.

$ sudo n stable

  install : node-v0.12.7
    mkdir : /usr/local/n/versions/node/0.12.7
    fetch :
installed : v0.12.7

This also made the switch to the installed version.


Checking the currently running version shows I’m running the latest one indeed:

$ node -v

Other usage scenarios

n can also be used to switch to a specific node version. Let’s say I wanted 0.12.5, all I would need to do would be to specify that as an input parameter: $ sudo n 0.12.5

Discovering Brackets, or how I improved my development flow in a few hours


Plain text editor versus full-fledged IDE

At the beginning of my journey as a software developer, someone told me to try a plain text editor to focus on the basics. It turned out later to be a great advice, as it came with two immediate benefits. First of all, I learned to type faster because there was no IDE autocomplete to help me. Secondly, after looking each PHP function in the online manual, I soon knew most of them by heart. On the long run both brought a great boost to my day-to-day productivity.

After a few years, I gave up Gedit in favor of Zend Studio, which was not Eclipse-based back then, and worked much faster. It taught me to appreciate the debugger when dealing with obscure application issues. Later, PhpStorm convinced me with the price tag, and I used it for a couple of years. Unfortunately, its latest releases started to eat system resources for breakfast.

The quest for a simple, modern editor

Then I came across Brackets and decided to give it a try. I downloaded it from the official website, and was happy to it worked on ElCapitan 10.11 Beta. I immediately liked the minimal interface at my disposal, and was even happier when noticing that there can be only one project open at a given time. Focus, baby!

When I discovered the Live Preview feature I was hooked. No more edits in the clumsy Chrome Web Inspector edits and copying them over to the editor! Plus, code completion was there, nothing to install. See for yourself in Lisa’s video.

Useful Brackets extensions

For developers, using version control is a no-brainer. So Brackets Git was the first extension I added. Easy to use even for git beginners, it offers immediate feedback on the status.

As I found I was increasingly using Markdown in my daily tasks, Markdown Preview was a quick win.

Soon after, I came across the excellent Brackets Icons, which allows to spot file types in the navigation pane. It saved me a few wrong clicks already.

For those who need to edit files on a remote server there’s a handy SFTP extension for you. Please do yourself a favor and start using a proper deployment flow instead!

Next steps

I plan on trying the responsive mode soon, as my current projects are not needing it.

While writing down these notes, I came across the Todo extension that I want to try. It allows grouping of all project todo items into one handy pane.

Brackets also seems to come with built-in node.js awesomeness, and I will definitely give that a go very soon. Watching the videos made by the Brackets team might teach me a few more tricks as well.

The Software Craftsmanship Pyramid


Oftentimes I have been called a web developer, because I entered the software world from PHP. I had another burden as well: as a girl, I was taken less seriously than my colleagues, having to work much harder. But I liked what I was doing, and I wanted to do it better, smarter, more efficient. Many colleagues have helped me become better, and showed me a lot of helpful tricks. I learned first-hand about the hurdles which make a software developer’s journey to craftsmanship tedious, and about the strength and perseverance needed to continue. Although there are many paths that can be followed to producing high-quality, easy to maintain software, none of them can actually be viewed as standard.

Some people, myself included, are better learning things following a structured approach, like a book, and I tried hard to find one that would be less about the tricks of the trade and more about the various aspects of what is means to be a software developer, and what that role means in the greater scheme of things.

As today’s world calls for more programmers than are available, it is my intention to summarize the steps I have followed successfully, parts of which I have advertised to colleagues we have onboarded, and which I believe can be inspiring others searching for their way.

Everyone can enter the development world, and it’s great to work in a profession so rewarding. Most people get hooked very soon, and want to continue, but find it difficult to pick their next step. They need help, and I believe structuring the dissipated available information will help them tremendously.

In the past, I found it easy to present things using a pyramid model, so today I am simply introducing it, and a more detailed explanation of each stage will follow separately, to allow for a better understanding of it.