coaching_001_main

Coaching project 001

As part of my professional promotion in my company I have to develop a project to fill the gap between my expected level for the next pathway and my current level. To get this done I’ve prepared along with my coach a github repo where all the development phases can be found.

For this first session I’ve work around 8 hours. What I have accomplished so far is:

  • Setting up my work space at home
  • Setting up a github repo with a readme file in md language
  • Install html5 boilerplate
  • Install some Atom packages to improve my workflow
  • Install gulp and some node packages
  • Created a gulp task for linting with ESLint

Do you want to know more?

Setting up a github repo with a readme file in md language

coaching_github

Time: 30 min

This is quite an easy step. Just go to your GitHub account (or create one if you don’t have it) and create a new repo. When creating it accept the check box that prompts you for a default readme.md file. And to modify it you just have to follow this markdown styleguide to set the contents of the file which, by the way, is the same used in Atlassian Jira and Stash products.

Install html5 boilerplate

coaching_html5boilerplate

Time: 15 min

Html5 Boilerplate is a template for an html project that has nothing as content but has all the minimum requirements to start developing. The reason I installed this is because we agreed to work on raw html and css for a phase of the project and this boilerplate seemed like the easiest to fulfill the requirements and the less sophisticated to start working. Nothing really fancy about it, download and copy on the working folder.

Install some Atom packages to improve my workflow

coaching_atom

Time: 2 hours (and counting)

This will take some extra time in the future. Atom comes completely empty of extra functionalities. It’s a super standard editor that you can customize at your own will installing the appropriate packages. Understanding this itself took a while as I was expecting to be going through preferences and configuration files and it seems that the community side of Atom is the one that is making it so popular.

The packages I installed so far are:

Linting is a way to check syntax and code style in real time. Originally the preferences were JSHint for syntax check and JSCS for code style. After some feedback form a workmate and reading this article I switch to ESLint as it seems to be the most configurable and future proof option.

Modern editors like atom look in the project root for a file with the set of rules to apply to check the code syntax and code style. For ESLint this file is called:

This was difficult to understand at the beginning because if you try to create the file with ESLint itself the set of rules it creates are a minimal part of the whole list. So, what this means if that whatever is not set in the rule file it will be falling back to the defaults that I can assure most of the time is not what you want.

I looked for a template with all the rules (to lazy to do it myself). You can add and remove all of this through the command line but for me it looks way more easier to directly edit the file in json format. I found out that in that very file there are some new rules missing, you have to compare and go to the full list to see what kind of rule you need and its value.

You will find my config on my repo at GitHub but for now I have only changed:

  • Require or disallow spaces before function parenthesis
  • Enforce Semicolons
  • Require or Disallow One Variable Declaration per Scope

And I confess that I’m super influenced by my company style guide so I will be adjusting it now on until I get something like what I have at work. Overall I think this is a great way to set the rules for code analysis. You just need the proper configuration and the IDE just will let you know how you should fix typos and prevent errors, way more flexible than JSHint for sure.

Install gulp and some node packages

coaching_gulp

Time: 2 hours

This is one of the feature I want to implement the most. Right now at my current project we are working with a script that is doing all the stuff correctly but I’m not sure what is doing for sure. This is the reason I watched delightfully the course on Pluralsight by John Papa about Build automation with Gulp.

I’ve followed along the course so I get to:

In the end this process on linting via gulp is not necessary as we are already liting on real time while coding but as I put a halt on error command. Compilation will stop if we ever find a syntax or code style issue.

One issue that arise here was if I should install ESLint as a global package or a project dependency. I think both are good options but I prefer this way:

  • To keep my global space as clean as possible and
  • To pack all what is needed for the project to run in the project itself

Note: This is not totally correct as the reason to install locally is because ESLinter package from Atom was not able to find the global npm package so I had to install the local one. In any case this arises an interesting topic if it’s better to use gulp pulgins or the npm raw version of the package. I’ll discuss about this on the next post.

Created a gulp task for linting with ESLint

coaching_gulptask

Time: 1 hour

Basically I was just following the course but had to stop to setup Atom and changing workflow from JSHint and JSCS to ESLint. This is the final gulp file this far:

Part of the code was found in the npm packages pages. And this is the console result:

coaching_001_001

All tasks were done in parallel so time is not really accurate as I was switching from one to the other but in the end I think is a good approximation to how much time took me to get all done and understood.

That’s all for now, I’ll keep informing =)

Un comentario en “Coaching project 001”

  1. Great article David, very inspiring!!
    When I get a chance I will love to run through the entire tutorial, keep up the good work

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *