Today I’ll teach you about a millenary training technique I learned while watching a japanese series named “Hunter x Hunter”, which I’m using to assign my study time between different developer topics and improve my skills.

##The Basics of Nen

First of all, Hunter x Hunter is a japanese animated series (Anime) about people that fight a lot and have superpowers, and that’s all you need to know about it. What’s important to us is the theory behind their superpowers, which I’m sure they copied from some ancient chinese tradition, as they always do.

In the series, the (Nen) (energy) users can train 6 types of abilities depending mainly on their natural talents. These types are represented in the hexagonal chart above and you can get a general idea of what each type does.

Also, in the series, they propose that opposite types in the chart can’t be mastered, but learning them will greatly benefit your main skill. It also proposes that types next to each other are more closely related and will be easier to get to a similar level.

What happens if we apply the concepts to developer training?

##Enter Coder’s Nen


 Following the concepts from the previous chart, I made a coder’s version covering what I think are the core skills for becoming a good developer. In this version, however, you are not limited to mastering a single concept, but I tried to place the topics in the best way possible so the closest ones (connecting lines) are more related and the opposite ones are topics that don’t depend on each other.

Now, how does this work?

##Area and High Skills

If you place a point between the center of the hexagon and the type of skill being measured, with center representing 0% (you don’t know anything about that) and 100% being the point in the hexagon, and then you connect all the points, you get a polygon (or line) with the area representing your “core” value as developer.

In the chart above, I put what I think represents my current status as developer. It doesn’t seem much, but if you consider that 100% in Computer Science would be Donald Knuth and 100% in Software Engineering would be Bill Gates, then it might be even less.

Another way to achieve mastery is focusing only in a main topic and the next ones to it. That would make you a specialist, guru or teacher in certain topic, without necessarily making you lose value because the lesser area being covered.

For the purpose of “becoming a software developer” though, the area approach is better.

Now… How do I use this as a guide?

##Chart as a Guide for Improving your Skills

When you ask yourself, “What should I learn next?” Just draw the chart, assign values representing at what level you think you are in certain topic and see what skill you want to learn that will also maximizes the chart area being covered.

In my case, looking at the chart shows I’m kind of weak in “Computer Science” as I studied Electronics Engineering (which also improves my Programming Languages score), so I’m going through some nice books and resources on Algorithms and Data Structures. Note that improving “Computer Science” just a little has a big impact in the area being covered, and will also help with “Programming languages” and “DevOps”, as much of it has to do with data structures, reasoning and algorithms.

Having a good knowledge in all the chart areas will greatly improve your overall value as developer and (in my opinion) employability.

##Final thoughts

To finish this entry, the last chart reflects my projections for when I “graduate” from FreeCodeCamp, which would also reflect at least the knowledge needed (in total chart area) for a junior-to-mid level developer position (that’s the idea of a Bootcamp right?).

So… what will you learn today? Draw the chart and improve your Coder’s Nen!! (I should really make an app).

This week, I hit a milestone in my journey as we finished our first nonprofit project at FCC. So, until the next project arrives the study goes on, and here’s a recap of what I’ve learned this past two weeks.

##Focus Switch

Since I’ve been getting a little more confident with my JavaScript skills, I started moving from a 100% pure JavaScript approach to learning some practical skills alongside JS. Nonetheless, it’s still about 40% pure JS and 60% other things including frameworks, which are (mostly) 100% JS, so JS is still a big part of my daily study. I’ve also started doing some personal projects: there’s a small static site I’m building for a family member (which in turn helped me streamline my frontend workflow) and another small CRUD project using React and Backbone.

##Resources ahoy!

To keep the post short, here’s a compilation of the best resources I’ve read and watched this past 2 weeks:

####Books

• You Don’t Know JS: Scope & Closures This book series is awesome and I’m looking forward to reading the rest of the series.
• Developing Backbone.js Applications This book by Addy Osmani is very good to start learning Backbone, and also free online.
• Backbone.js Blueprints free with a Tutsplus subscription, it’s also very good since it guides you through many projects using Backbone.
• Functional JavaScript a small book with good content about functional JavaScript.

####Courses

• Introduction to TypeScript Free from Microsoft, why not?
• MongoDB for Node.js Developers Very good, verified and free. A must for new JS developers
• Getting Started with Backbone.js the most updated introductory course to Backbone.js. A bit condensed but great after reading Addy’s book.
• Getting Started with React.js A very good intro to React.js

####Blog posts

• The Symmetry of JavaScript Functions by Ragan Wald. No need to say anything else.
• Web Development & Design Tools Nice post by our fellow “senior camper” Danny Fritz. Went through all the links, some really nice finds!
• Avoid Side Effects with Immutable Data Structures The title says it all. Recommended reading.
• Building Apps with PureScript and React by a fellow camper, I’m really looking forward to see the rest of this series.
• Enough With the Salts: Updates on Secure Password Schemes Good read on password schemes.
• Shipping Node.js Applications with Docker and Codeship

####Backbone.js Resources

This last week was all about Backbone, and here’s the best resources I’ve found (plus the books and Tutsplus courses)

• Backbone React Sortable Table
• From Backbone Views to React
• Moving from Backbone to React See a pattern?
• Why Backbone Resources seem to be outdated? A question I posted in HN
• What is Backbone.js?
• Learn Backbone.js completely a bit outdated but good reference.
• Zombies! RUN! Managing Page Transitions In Backbone Apps
• Backbone Resources Mother lode of Backbone resources
• Relieving Backbone Pain with Flux & React

####Finding a Job

My last batch of resources is about finding a job. It’s a hard process and harder if you are planning on moving to another country or finding a remote job.

• Top JavaScript (ES5) Interview Question
• Best Sources To Find A Remote Job As A Software Developer
• 5 Signs Your Resume Isn’t Ready for Today’s Job Search
• Big-O Cheat Sheet not only to cheat, but also to learn.
• Web Developer Salaries
• The best (and cheapest) places in the world for coworking
• Cost of living calculator Good to compare an equivalent salary between different states.

####More Resources

If you are looking for more JavaScript learning resources, check my Road So Far

That’s it for this week, happy easter and happy learning!

A few days ago, we marked our first nonprofit project at FreeCodeCamp as shipped. It was a big milestone (for us and FCC as its first delivered project) and I feel very happy for being able to deliver a working piece of software, but also because the experience has been great and a first on my career. Kopernik has opened my eyes about how technology, even in its simplest forms, can impact the lives of thousands of people, and how we can be part of it.

##FreeCodeCamp

First, I’ll do a very, very short review of what FreeCodeCamp does:

FCC is a free, online bootcamp for aspiring web developers, focused on the MEAN stack, and the curriculum has two parts. The first being different free courses found all over the web (soon to be in-house), corresponding to roughly 100 hours, and the second part is making real world projects for nonprofits, which accounts for, also roughly, 900 hours. This way, both campers and nonprofits benefit from the projects, and there’s no money involved in the process. It’s a win/win for everyone.

##Kopernik, Serving the Last Mile


 After finishing the challenges (FreeCodeCamp’s curriculum) I got assigned to a project (yay!) along with other fellow camper, Alex. Our project was for a nonprofit called Kopernik, with operations in many countries of Asia, but in this case it was for the Indonesian branch. What Kopernik does is to bring clean technologies to very poor and remote regions of eastern Indonesia, helping women and their families improve their lives and empower them with a business. You can find more watching this video.

####The problem

For Kopernik to measure the impact of this project and improve our project methodology, we need to record sales data from our agents as well as some data about the end users of the technologies. Later, we interview end users to determine to what extent the technology has improved their lives.

However, our sales agents and area coordinators work in regions where access to the internet is limited, unreliable and slow. Users generally have minimal experience with computers and devices. Sales data is gathered from our agents using paper receipts, but getting that data into a format that Kopernik can use create meaningful reports is a complicated process.

As you can see, this project posed many challenges, including inexperienced end-users and adverse conditions for a web app. Ultimately, this problem translated into a data capture app that was able to work offline with automatic uploading when a connection was available, since in the regions described it can go out for weeks. This had us researching a few days before we decided to go with a Chrome extension, so we could leverage Chrome local storage and have background services running. We also chose it because a web browser is a familiar interface and enabled us to do automatic updates using the app store. Once this was decided, we were ready to start coding.

##Amber, our MVP Stakeholder

Our biggest advantage while doing the project was having Amber (@amberau at Gitter) as our stakeholder. For starters, she was super excited with the project and offered us all the help we needed. She was prompt to get us all the fonts, graphics, requirements, translations and accounts needed as we were making progress. Also, she was very proactive in promoting the project to her colleagues, so we could get as much feedback as possible.

Additionally, Amber is a web/software developer with many years of experience, and she was very quick to pinpoint bugs and usability problems. This helped us move forward and ultimately deliver a better app. Furthermore, she always made us feel like a part of Kopernik itself, and we were really happy knowing that this project was going to help their cause. It made me really hope I could work for a nonprofit like this full-time in the future.

##Challenges and Teachings

Of course, one of the ideas of doing a real world project is to have the opportunity of learning and put to practice all the things learned while doing the challenges. On this context, it helped me a lot improving my HTML and CSS skills, since the form itself is very custom in its format. Trying to get the layout right wasn’t so easy as we thought initially. It also helped me a lot understanding some UX concepts, as we added many visual features and and did many modifications while the project moved forward. Some evenings were spent just reading docs, but the rewards are worth it.

About the challenges we faced, I’d say that more than code-related problems that happen all the time on every project, the big challenge was getting in sync with my partner, as some tasks were interdependent and doing git merge sometimes didn’t have the expected result. I also missed pairing a bit more, to be more aligned about what we were doing. But I think that experience also helped us define in a better way the tasks that were being assigned and segment the code so it was easier to work in parallel, a real need in every project in which more than 1 developer is involved.

##The Project

The project consisted of two sub-projects: a frontend app, in the form of a Chrome extension, and a Backend app, which exposes an API endpoint for receiving data sent from the form app.

On the frontend side, there’s the form, using normal HTML and CSS (no pre-processors), a script for handling network status and transmission of the data, another script for handling storage functions using Chrome local storage API and another script for handling form interactivity and validation. The only dependency used was jQuery 2.1.3 for handling selectors, visual feedback and Ajax.

Also, there is a build step using Gulp that minifies HTML, CSS and JavaScript files, and optimizes images and fonts. The final size of the extension once packed was 85KB including jQuery.

On the backend side, the app uses Node.js (0.12.1) with Express for the API endpoint. Received data is validated with an API key (for security) and stored into a remote MongoDB database using Mongoose. A process then retrieves the stored data and converts it into a .csv file, which in turn is uploaded to a remote sFTP server. In a future, it will have a tighter integration with a CRM system.

The app itself runs on Heroku, and the deployment is handled by Wercker, which adds test capabilities (not used yet) to the build and decouples the source repo with Heroku app repo. An additional tool used was adding New Relic (free tier) for performance and downtime monitoring.

The source code will be available soon once we make sure no references to the production servers are found in the code.

TL;DR we used all the things in bold in our project.

##Final Thoughts

It really fills me with joy being able to be this far with the project and with FreeCodeCamp. Working with Kopernik has been one of my best experience doing a project and I really hope it can help the foundation improve their logistics and reach. Certainly, I want to keep improving the app and adding more features as needed, though I know I’m not required to do so.

I also want to thank Michael and Quincy for giving us the opportunity of doing projects like this and making FCC better everyday. Lastly, I think that doing projects like this will, undoubtedly, help anyone pursuing a career in web development improve their chances of landing a job in the future, and made me reaffirm I’m on a good path too being a part of this bootcamp. Now, on to the next project.