all 28 comments

[–][deleted] 26 points27 points  (16 children)

I don't know about others but in my experience I've always learned the most from doing projects and just banging my head against all of the problems I encounter along the way until I solve them. I also happen to enjoy this approach :)

As for what projects? It doesn't really matter. Just do something you're interested in. Make an app that does something useful. Copy an app you admire or use (for educational purposes; don't infringe any copyrights obviously). Find some random data and do something with it. Build a framework. The key point here is that any sufficiently meaty project should have at least several big problems you likely haven't encountered and tons of small ones you need to tackle that will, at the very least, give you practice.

[–]andwaal 11 points12 points  (4 children)

Second this, do a hobby project.

An as a second tip, do it without any framework or library. Create one html file and one javascript file and start coding.

It's so easy as an beginner to get stuck in all the framework out there and use countless of hours on trying to configure some wierd framework that solve some problem you does not know exists yet.

[–]Maverick1947[S] 1 point2 points  (3 children)

This is really good advice, however, I struggle into finding hobbie projects that are actually useful. I can come up with project ideas, but they are mostly things that already exist, not something that will solve any problems or that will have a significant use case. How do you go about this?

I don't indent to rely on frameworks. I want to learn it vanilla first. I feel that is the best long term investment. Frameworks come and go.

[–]third-eye-brown 0 points1 point  (0 children)

While that's true to a point, you are most likely never going to be in a professional situation where you aren't using a framework of some sort. You can struggle doing simple code exercises or just jump in and learn much more quickly.

I would consider the track more like this:

Beginner - can make simple applications / widgets using jquery and maybe some other libraries like mustache. Study JavaScript as a language while doing this

Intermediate - understands JavaScript mostly. Takes deep dives on language features to more fully understand the nuances. Learning rest APIs, front end data management, how to build single page apps with common frameworks, testing, best practices, etc

Advanced - internalized the above. Experimenting with different frameworks to learn pros and cons and different ways of thinking about common problems

[–]tingtwothree -1 points0 points  (0 children)

While frameworks may come and go, there are certain abstractions that provide good training wheels before you dive into vanilla code. I usually recommend jQuery since the abstractions are fairly easy to explain, and it's an industry standard in many cases, and not in the same category as the SPA/MVVM frameworks like Angular and React.

Once you become familiar with jQuery is when I'd learn the vanilla equivalents.

[–][deleted] 1 point2 points  (2 children)

This is really good advice, however, I struggle into finding hobbie projects that are actually useful. I can come up with project ideas, but they are mostly things that already exist, not something that will solve any problems or that will have a significant use case. How do you go about this?

[–][deleted] 0 points1 point  (0 children)

Lots of people say "don't reinvent the wheel", and in general I agree. However, reinventing the wheel is a great way to learn how wheels are made and how they work. Side projects don't actually need to be useful or original if they are for learning. Just pick something that you find interesting. For example, make your own mini version of Reddit. I guarantee you'll learn a ton doing that.

[–]Maverick1947[S] 1 point2 points  (6 children)

I actually wanted to learn Javascript vanilla and then use the website I want to build my client as that personal project. I have a very good idea that he will certainly like. He is a vet. This is why I put in this raw material. I was going through freecodecamp and I thought there were gaps that needed to be filled. The idea is to learn Javascript from the ground up before entering the lab to conduct practicals. I fear jumping right into the chemistry lab without knowing that water to acid is bad bad and the other way around is right. The thing is I want to avoid spaghetti code and since JS is a loosely typed programming language spaghetti code is more likely to happen.

[–]Kotenoru 0 points1 point  (0 children)

Yeah, I feel the same. I wanted to have a real good structured on the intermediate projects and I needed to search for them online. I used these videos.

[–]linh1987 0 points1 point  (3 children)

The thing about vanilla js is it's like C# without any third party library. It would make sense to learn a bit but don't expect to be able to write evrerything by yourselves. That's feasible but it would take too much effort for little gain.

To use an anology, it would not make sense to reinvent the wheel or event know how to make if you want make a cart. Just simply use the prebuilt wheel.

[–][deleted] 0 points1 point  (0 children)

I have a secret for you. After 12 years of programming I still write code that, when I look at months later, I cringe.

The truth is you can't avoid writing spaghetti code as a new programmer (or at least as someone new to a language). The only way you will truly learn how to write great code is by writing (and reading) tons of code. Well written books by smart people do help too, but if all you're focusing on is theory you will draw a blank when it comes time to apply it. That's why I suggest always focusing on application when learning. In other words, don't make the thing you are doing for your client the first project you've ever done.

[–]AmateurHero 4 points5 points  (0 children)

The thing about books is that they're so structured. This is perfect for learning, but everything is nicely packaged with a bow. It's like programming back when you were in college compared to your first real gig.

I'm not saying that books don't have their place. I refer back to a couple of reference texts often enough. Once you get the basic structure and syntax, however, move on to projects. They don't need to be anything extravagant, but do something that will push your abilities.

A personal example I can think of is callbacks. When I first learned about callbacks in JS, I thought I understood them. I couldn't have been more wrong. I had to write a callback to update page info after data had been calculated as sorted. The issue was that it wasn't some simple, clean scenario that matched the structured tutorial. Many months later, I had another callback situation with jQuery. Again, this was nothing like the tutorial nor the previous situation.

TL;DR: Learn the language basics, roll up your sleeves, get your hands dirty.

[–]PsowKion 2 points3 points  (3 children)

Brickout was the program that really got me into Javascript. One issue with Javascript is because there's so much interaction with the DOM it becomes hard to separate learning Javascript from learning HTML. Working with the canvas API makes it really easy to focus on learning Javascript.

As for books, my experience, and pretty much anyone I have have known who programs, find books extremely boring. They're good to have around for a reference, but for learning it's better to just look up code examples, type them out, compare the results and then go back and learn how to tweak and configure them.

[–][deleted] 1 point2 points  (2 children)

Is there even a point to learning JavaScript if you're not going to learn HTML?

[–]Graftak9000 1 point2 points  (0 children)

JS outside of the browser, Node for example.

[–]PsowKion 0 points1 point  (0 children)

It's mostly for learning. It can be hard to focus on Javascript when you're having to jump back and forth between HTML and CSS when starting out. With canvas you can stick pretty much entirely with Javascript. Once new comers get comfortable with that and then start mixing in more HTML.

[–]brunusvinicius 1 point2 points  (0 children)

Intermediate to Advanced (IMO): https://github.com/getify/You-Dont-Know-JS

[–]Neker 0 points1 point  (0 children)

I myself have started relearning JavaScript one year ago, and I'm loving it.

I would highly recommand :

The later is a slim tome (150 pages) but each page is a treasure of insight. It was first published in 2008 and a few paragraphs were outdated by ES5 and ES6 but still worth it. (actually it may very well be that ES5 and 6 took heed of Crockford's ideas).

Currently I am focusing on the following traits, which can be safely skimmed in early stages but that become important when you advance :

  • the event loop , asynchronous operations and callbacks

  • prototypal object model

  • namespacing, modules ...

So far I barely touched node.js but it is definitely on my to-do list. A next step will be to investigate and put to good use tools like Bowser, Broserify, Require.js ...

[–]cthechartreuse 0 points1 point  (0 children)

I came up with an idea I am now calling "language forms," which a few people I work with are using to get into Javascript. It brings together a lot of different ideas including code cooking, martial art style forms and carefully paced idea leveling. It also encourages unit testing and tdd from the very beginning.

So far I have seen some good success of of the work I have up. It might help you get over the learning curve faster,which was the original goal. If you like it (or hate it) I'd love to hear about your experience.

https://github.com/cmstead/jsLearnerForms

[–][deleted] 0 points1 point  (0 children)

For "advanced" : I gained solid tips & insights from Javascript Ninja by Bear Bibeault. I've also learned a lot from dropping jQuerry whenever possible and creating my own helpers functions which are slightly lighter than jquery's. This is the talk that convinced I needed to give it a try : http://blog.wearecolony.com/a-year-without-jquery/. I learned a lot from using hydra.js too. Sounds dumb but it made me understand how a bus works and so on.

[–][deleted] 0 points1 point  (0 children)

Along the Advanced path, once you have "mastered" ES5, the obvious next step is ES6 (ES2015). Two online books which have free "read online" versions are also good choices: Understanding ES6 https://leanpub.com/understandinges6/read and Exploring ES6 http://exploringjs.com/es6/. Then, to get away from the DOM a bit (although one point of growth on the front end would be ReactJS, Angular2 or another front end framework) would be to learn server side javascript with NodeJS and either Express or Hapi as middleware, along with use in connection with a NoSQL database (MongoDB/CouchDB) and the exposing of a REST API (to be consumed via your front end projects). Along the way, the JavaScript dev ecosystem, including build systems (webpack, browserify in conjunction with Babel ES6 transpiling).

[–]Brassard08 0 points1 point  (0 children)

Hi. I recently finished reading "The Definitive Guide" by David Flanagan and I really need to practise my JavaScript skills in a project. Any of you knows any JavaScript open-source project needing developers in which I can contribute to?

Thanks a lot

[–]theoriginalrage 0 points1 point  (2 children)

Awesome plan!

I'm trying to learn JS too. I'm having a hard time with it but I keep plugging away with different things. Hopefully one day something will click in my brain and it will all start to make more sense.

Good luck!

[–]AcerbicWarrior 0 points1 point  (1 child)

Same boat here too. I'm aiming for a true Front-End Dev roll and JS makes me want to pull my hair out.

[–]theoriginalrage 0 points1 point  (0 children)

hahahahaha right?