When I started working with JavaScript late last year, I dived head first into a whole new world. As soon as I came back up for air, I realized I needed to stop watching videos, and truly learn the language. In my article Learning JavaScript: Filling In the Gaps So You Learn Effectively, I talk about some great places to learn the language as well as how much I enjoyed Team Treehouse for doing such myself. Unfortunately such places unconsciously give you a false sense of accomplishment with a language. In that article I push the need to really focus on the need for applied knowledge, and in this article I want to mention some great resources and software to accomplish this task.

Getting Started: Treehouse Revisited

If you have ever been a member of Treehouse, you know that they offer quizzes where you have to write code to pass. While it’s an amazing place to start learning programming, or a new language, unless you pay for a Techdegree membership which is now a $200 minimum, applying knowledge is not happening unless you create your own project with each course. Let’s be honest though, with programs like this it’s a race to the finish, and filling all of those precious dots! Do not get me wrong, I still recommend this site for getting started, and if you can afford the Techdegree, why not? Having the ability to talk to professionals in Slack, while working on their hands-on coding courses is great too.

No matter what, if you are not already creating your own projects, what’s to say you are really learning the problem solving you need effectively? Should you go to a workshop then? What about another learning site? Absolutely not!

What to do?

This is where you have to cross the line, and remind yourself that learning from more videos is completely and totally redundant. You may know the language, but you still need to be able to apply that knowledge; taste that code before it flows from your fingers. The whole problem is getting to that point in your career. Everything is most likely stuck in your head, but you haven’t seen enough from the community, or successful programmers to really know. So now that we have a general idea of what we want, where do we find it?

First and foremost let’s cover the obvious, creating your own projects of course! It doesn’t matter how big or little, just give yourself something. A project to constantly think about, one to drive you, and one to push you. Even if it’s not that intense, create more and more to answer the questions you ask. “What would happen if I wanted this data to go to a database?”, “How does this library work?”, “What happens when I use these two frameworks together?”. Remember that you are learning problem solving more than anything, and how to fix that problem in code.  At the same time think about sharing your code on GitHub, and while you’re there look at how projects you enjoy are written. You’ll notice a lot of people write code much differently.

Resources

Let’s now look at some other resources to help you out! These services are so amazing I wanted to write an entire article on them, and this is pretty much it! All of these services make up my morning routine to exercise my brain, learn new coding methods, as well as give myself something to stand on when I jump into that job market.

Enki

I believe this is iOS-only for now, but it is a great daily workout application, where you can choose one of multiple topics to cover each day (JavaScript, CSS, Python, Linux, Git, etc), and learn some pretty awesome topics organized in sub-topics like Functions, Generators, Positioning, Animation, Node.js, Express, React, TDD (Python, CSS, JavaScript sub-topics).  What you learn are not the usual points you find anywhere else, and they give examples you can apply to your projects fairly quickly.

To make things even better, they offer some great mini-games which put you against the clock to debug code, or choose if the falling keyword is part of option A, or option B, all to test your knowledge of the topic. These are great games that had me reviewing the answers to drop into my REPL, simply to see how some of the code given even worked! From what I’ve seen, the whole point is to point out the more obscure features, and show a great use for each. Since it’s still in beta, they are constantly adding more content each day, including more topics, as well as making the app better each time. While it may seem much different when it’s released, it has proven to be a great resource to have at your side.

CodeWars

CodeWars
The CodeWars Katas, or Challenges. This is where to up your game for many languages, and see the many ways others complete the same problem.

What can I say but “OMFGWTFBBQ”! Seriously, this site is absolutely amazing as it gives you the ability to try many different challenges made by the community, and allowing you to spend days working on an answer, while seeing the different ways to solve various common and uncommon programming issues. As you level up, you can even create your own challenges to offer the community, and see how others accomplish the same task in your Language or even others. Keep in mind you must be able to provide a working solution, so you cannot submit broken challenges to simply receive an answer. The best part is that the site has it’s own built-in IDE, and TDD environment, so you can work 100% on the site.

This site… no, this community, is absolutely perfect for new programmers already aware of the language they are working on. It also supports 20 different languages, with more in the works. Even though it’s great for new coders, it is also great for veterans as well. This is because the best part of finishing a challenge, is seeing how hundreds if not thousands of others finished the same challenge, and vote on which is the “best practice” or simply “clever“. What many people say is, “I can’t wait to finish a challenge, so I can feel inadequate again“. Of course this is usually said jokingly, but simply pointing out the fact that there is some amazing code seen after finishing any challenge. I have yet to not see code that didn’t pique my interest, and I have even watched this code influence my own habits as I progressed to bigger and better solutions.

Needless to say this is my main go-to when I want to level-up my ability. There is no need to worry about cost, as it is always free with the site’s money-maker Qualified.io at the helm of finance, allowing businesses to use a similar interface in their company to test their applicants, and observe their coding habits.

FreeCodeCamp (JavaScript/CSS)

This site I only recently learned about, but what a cool website! It not only teaches new users how to program for front-ends, but also back-end, data visualization, and after all three full-stack development. Similar to CodeWars it offers everything in code, giving a complete hands-on approach, as well as offering a built-in tutorial for HTML, CSS, jQuery, JavaScript, and many more to come. As you pass each section you are given a certificate, and when you complete all three, you are given the ability to complete the full-stack certificate. Each one requires a certain amount of code, as well as non-profit project completions.

FreeCodeCamp
The FreeCodeCamp IDE, with a glimpse of the DataVis section on the map shown on the right.

To make things even better, it has an extremely strong community, with Gitter chat rooms, a forum, and so much more so you can work with others to complete projects. There are also Facebook groups based on the area you live in, so you can meet and work with other students in your area. Even better is that the organization itself is seen as a school to many, so you can use it as an actual formal education for programming. It’s a great place to not only learn, but to push yourself to completion in a great way, as well as give yourself a great recommendation for any job out there.  While you would think something like this would cost a substantial amount of money, it is completely self-funded, and absolutely free. There is only one option to pay a monthly fee, and that is to go towards a non-profit organization. This is definitely the epitome of learning for the masses, and I know I’m on the road towards the full-stack cert!

Software

While the above sites are great, sometimes the browser IDE just isn’t what you want. It was because of this that I had to start looking into something that better suited my needs. With that, I want to share these great apps.

Jupyter/iPython Notebook (Python, JavaScript, Scala, PHP, Haskell, Ruby…)

Jupyter Notebook
Jupyter Notebook, showing how it can show off data in the notebook itself

If you have ever worked with Python, you are most likely aware of iPython, and probably iPython Notebook, renamed Jupyter. This is definitely one of those interpreters to have on hand, as it allows you to test your script before it ever hits your actual code. The great part is when you create a single block of code, even after it has been declared, you can go back and change it, and declare it again. This is the whole point of a notebook style interpreter, and allowing you to save each and every one of your sessions.

While Jupyter comes ready for Python by default, there is an entire collection of kernels for the software to allow you to use many different languages. It is not my favorite for JavaScript, but it’s always nice to have a Jupyter on the side for Python as well as many other languages. It is definitely a must-have for many.

Mancy (JavaScript, LiveScript, TypeScript, CoffeeScript, ClojureScript)

JavaScript Mancy
The amazing Mancy REPL, showing off with auto-complete, and expanding data down to the core.

So even with all of these awesome services, places like FreeCodeCamp do not have the best IDE; at least I have yet to really find a good way to so error stack traces, instead of a single line. I’m simply not happy with the many browser IDE’s, and wanted so much more. I found this absolutely amazing JavaScript, LiveScript, TypeScript, CoffeeScript, and ClojureScript REPL called Mancy. Made by what seems to be single MIT dev with some contribution from others, and even with very little exposure this REPL IS absolutely F@#KING AMAZING! If you have ever worked with iPython/Jupyter, think of that mashed up with babel-node, after it finished devouring an IDE.

Mancy has a lot of great IDE-like comforts, as well as a Notebook mode similar to Jupyter Notebook (iPython Notebook). While Notebook Mode is in Beta, the only issue I’ve found is that it doesn’t work well on Windows, but on Linux and OSX it’s like butter! You can also see every single bit of data going through this REPL, and can switch back and forth between REPL and Notebook as you please. The input box has many IDE-like capabilities, and makes for an amazing code-testing environment on the side when you want to test your logic. This is definitely one of my must-have apps, and the fact that it loves ES6, just makes it that much better!

Pineapple

I’m not going to write a whole lot about this one. If you are like me you want a iPython Notebook for your desktop, similar to Mancy, but for your Python needs. That’s exactly where Pineapple fits in! Unfortunately it’s only for OSX, but it is still a great little application.

Summary

Looking back just over the past couple months, I can truly say that all of the above has contributed so much to my own coding habits, and how I think about moving forward with learning. Using these practices and sites really help you understand what’s important. Where video sites are really there to help you skim the surface of technologies new to you, they are not a replacement for the need of raw coding practice.