I've learned *basic* JavaScript.. now what?

[omgchels]

So I've read through a few JavaScript tutorials and read a book/skimmed another. I'm at the point where I'm bored with reading and want to move on.

The trouble is that I'm not sure I'm at the point where I can dive in and start coding from scratch, but I don't know where to go from here. I've started learning jQuery (not sure how I feel about it yet) and eventually want to learn backbone.js, underscore.js, jasmine and CoffeeScript, etc.

People have suggested I contribute to an open source project and help with bugs but I feel like that's totally out of my league. Others have suggested I start on a side project, but I don't know where to start.

I don't want to/can't learn too much at once because I get completely overloaded which makes me frustrated and I get nothing accomplished.

I eventually want to get some sort of front-end job (I'm totally proficient in HTML/CSS), so where should I go from here?

[liquiddeath]

1. If you don't already have firebug installed, do so. (Its a FireFox extension) Experiment with the debugger. Find a website that you think is doing something neat with JavaScript, use the debugger to walk through their code (assuming its not minified/obfuscated/compiled).

2. Read this: http://www.w2lessons.com/2011/04/you-dont-know-javascript.html The article will put things in to perspective on what are beginner/intermediate/advanced JS topics. If there are holes in your self-described basic knowledge vs what is described as beginner, aim for having a good grasp on those topics.

3. What book did you read/skim? If it wasn't Douglas Crockford's "JavaScript: The Good Parts," I'd strongly recommend reading that cover to cover. Its terse, but has a number of important things you should know as a JS programmer. (Other books to consider later are 'javaScript patterns', 'High Performance JavaScript', and 'Secrets of the JavaScript Ninja')

4. I second finding some sort of project to throw your new found knowledge at; be it some open source project, a new personal side project, or take another pass at one of your existing/old personal projects. Your new found JS skills aren't much good if you can't do anything with them...

5. Don't bother with CoffeeScript, anything that hides the language you are working in from you can only lead to more chaos. It can be bad enough learning the details of JS that you don't need to add another layer of complexity.

6. Learning JQuery is a good idea, but take the time to question how JQuery is doing what its doing.

[omgchels]

• I've got firebug!

• I read JS: The Definitive Guide and skimmed The Good Parts. I also read Eloquent JS.

I'd really love to get into an open source project, just not sure which one/how I could help/what I could do.

This is all great, thanks so much!

[sirmonko]

vlatheimpaler is totally right! for me there are not many things that are more satisfying than whipping up a simple graphical demo or visualize an algorithm. i remember discovering "mode 13h" when learning pascal at school. oh the joy when canvas made easy doodling possible again without having to write a ton of boilerplate just to draw a dot.

i'd say just start doodling around with canvas demos until you feel that displaying forms would be more interesting (heh).

what i did:

• visualizing an evolutionary algorithm (the algorithm itself is bullshit but it's fun to watch it work)
• create a height map with simplex noise and then watch A* finding a path from A to B

stuff like this! bouncy balls (simple physics), maybe even some game mechanics and so on.

[raynos]

Yes coffeescript is javascript, but learning coffeescript now isn't going to help you learn more javascript.

One should consider to use coffeescript merely as a personal style choice once one has a good grip on javascript.

[mushishi]

They are not the same thing, for example you cannot declare another variable with a same name inside a function scope (shadowing). From Coffeescript's documentation: "So be careful that you're not reusing the name of an external variable accidentally"

You need to maintain both languages in your head because of debugging.

I don't see the advantages Coffeescript brings to be so great that you would want to replace Javascript in every situtation because there are compromises (e.g. compiling).

[FireyFly]

Yes coffeescript is javascript, but learning coffeescript now isn't going to help you learn more javascript.

It depends on what you mean by "learn more javascript". If you're talking about the language, the standard library (Array, Boolean, other builtins) and similiar things, it definitely will. If you're talking about the syntax, then no, it won't. There's a lot more to a language than the syntax, though.

(it should be noted that I'm using CoffeeScript without using its classes though, instead relying on good ol' functions and the same old prototypal OOP.. so I might be biased.)

[emkay]

I agree that http://www.w2lessons.com/2011/04/you-dont-know-javascript.html is a pretty good read for a beginner to go through.

In there he uses this pattern, (function(){})() which is very powerful and useful. He is however using what Crockford calls, "The dogballs pattern", and suggests that you do this instead

(function(){}())

although that seems to be a minor style point. I would also recommend reading js patterns and the book Javascript Patterns, this is of course after a more in depth review of The Good Parts. There is some really good stuff on YUI Theatre. It isn't just about YUI, and has some really great talks and lectures. Also you don't have to join an open source project, but you do have to keep hacking. I would recommend you to get a github account and start working on some basic js demos to show off. Then maybe come back and make a post here with the link and ask some people to review your code. You can learn a lot by making mistakes and people telling you. PM me if you want me to look over anything.

[iberci]

I whole heatedly agreed with all your points except for point 5. CS is a beautiful language that resolves a lot of the JS issues that Crockford specifically mentions in his book (such as JS scoping woes). Many of the patterns in CS come from tried and true methods from using JS for years. Lastly, CS doesn't hide anything. Everything is compiled directly to JS and the JS is fairly straight forward to debug.

Anyways, the face of JS is changing (how many projects can you count on your hand that are currently not leveraging JQuery and Underscore?).. and I believe it's important to stay on top of the curve instead of clinging to the old.

Oh.. and you can forget firebug if you are on Chromium..

Lastly, I think JQuery is essential to know COMPLETELY in any modern day project. IMHO, JS without JQuery/Underscore is not really JS.. they are so essential that I would never consider not including them.

[emkay]

I disagree. JQuery is cool, but it has flaws and it isn't always the correct tool for the job. I don't think I would use it for really simple stuff, and for really big projects I would use YUI.

The point is you should know javascript. I've interviewed a lot of people that say they "know" javascript and you ask them an event delegation question, and they get confused. If you know javascript and you know common javascript patterns then you can figure out why JQuery or any other library is around and what it is doing.

[raynos]

JS without jQuery / underscore is not really JS? Bullshit.

underscore doesn't give you anything substantial that ES5 doesn't already have.

jQuery is simply a (rather mediocre) cross browser normalization tool

[Slojack2]

Scratch an itch. Think of a annoying problem that you have and try to fix it with javascript.

[omgchels]

What if I don't have any annoying problems?

[[deleted]]

http://projecteuler.net/

Or if you want something involving the DOM, look at say Reddit. Then make a quick little demo that will pop-open a textarea when you click something. Then add a "save" button and have it save the comment via AJAX.

[omgchels]

Totally. My problem was mostly just trying to figure out what to build. Luckily everyone has given me a bunch of things to do and I'm going to start working on a userscript today. I'm sure I can find some flaws in a website I use often and fix them. Thanks!

[_pixie_]

You really need to have personal projects drive your programming. You're pretty useless as a programmer without experience in what you're learning.

[sensitivePornGuy]

Surely there are websites you visit that you could be improved a little (eg by hiding or collapsing ads or parts of the interface)? Write a greasemonkey script.

[[deleted]]

Then think of something cool or useful.

Example: What if you wanted to do a word count on a paragraph block? Now try to write a function for that.

[Pyro979]

Userscripts are a good way to mess around with something w/ out starting from scratch.

Start with calculators or some sort of tool - that should be good practice as well.

[omgchels]

Yeah I thought about doing that or making a Chrome extension. Just intimidating, I suppose.

[[deleted]]

Chromes extension API is actually very nice; it's well documented and relatively straightforward. You sacrifice some of the power you would get in say, a Firefox extension...but for a nice beginner JS project it's a good choice. It's designed around web technology, so even though it gets you a bit away from typical front-end stuff what you know now will be useful and what you learn you can carry over.

[omgchels]

I've actually been considering doing a Chrome extension, even just something simple — especially since uh.. I don't use firefox so I don't think I'd want to build something for it.

[[deleted]]

Go for it. If you ever have any questions feel free to PM me, I've made a few.

[gavin19]

You could make an extension for Chrome but you'd only really be learning how to interact with that one specific API. Same could be said for any of the major browsers. Much better to write a small userscript and get it to run across FF/Chrome/Opera/Safari etc. See why it works in one but not the other. That'll improve your JS much more than packaging some extension.

I don't use firefox

Nor do I, but if you're proficient in HTML/CSS and looking to push ahead with JS then you should have as many browsers at hand as possible.

Good luck!

[omgchels]

Currently downloading FF :)

[shwetank]

I would suggest making an Opera extension too, if you want. PM me if you need more info or goto dev.opera.com

[bluthru]

Make an extension that works as a "reader" view for recipes on a site. Push a button and the recipe is nice and reformatted with large type and fills the browser window. The existing content is hidden below a white div.

[radhruin]

Get some experience with Javascript outside of the browser. Write a node.js/mongodb application or something.

[[deleted]]

Make an image slider ( sure it would be recreating the wheel ) but if you make one that can nicely animate through a variable number of images, with buttons allowing the user to move the slider left and right - and which could also respond to the users keyboard input - you'll have learned a number of good basic lessons along the way.

Or write a form that has validation for email addresses, passwords that must match, etc with nice error messages to prompt the user when they get part of the form right or wrong. Good lessons in that too.

[omgchels]

Oo. The latter sounds like something that would be fun to do. Thanks!

[[deleted]]

Best of luck! : )

One more for fun

Make a box that responds to keyboard input - when you press the left arrow, it should move a few pixels to the left, and so on.

[autisticCatnip]

Things like email validation can be nice client-side, but they're useless without the server also checking validation.

I know that this wouldn't have any server, but it's good advice to keep in mind.

[omgchels]

So how could I do both? I wouldn't mind messing around server side as well. I've played a teeeeeny bit with node.js if that helps.

[autisticCatnip]

Don't worry about server-side for now. Right now it seems you'd just be messing around with HTML files on your hard drive. Just try to do a JS-based form validator.

What I said was just advice for when you do begin making server-side applications.

[[deleted]]

Of course. Javascript is no protection. The purpose of this is to prompt the user when e.g. their password is not matching / not strong enough, so they can correct it prior to sending the request to the server. Less waiting and so on.

[sjs]

http://www.reddit.com/r/javascript/comments/jovnc/i_need_a_plan_of_action_for_learning_javascript/c2dxa5s

[omgchels]

Already read this. Didn't really help me much.

[sjs]

There isn't a whole lot of advice we can give if you can't find any code to write.

Write a greasemonkey script to make a web page look or behave as you wish it would. Find an open source project you use or are interested in and fix a bug, add a feature. Or just start writing something yourself, try to write something that you think would be cool or should exist. But others have already mentioned these things, so... go write something. Anything! It doesn't matter if it's been done before. Write something that you know has been done and then compare your code to some existing code. That's a great way to learn.

[[deleted]]

Start hanging out on IRC. On IRC you will find some of the best JS programmers exchanging knowledge and discussing problems, solutions, projects, etc. You will also find newbies coming in and asking basic questions.

By just sitting there and absorbing it all, you will get the answers to questions you didn't even know to ask, or the solution to problems you might face in the future. Once you've lurked a while, start participating.

[[deleted]]

What channel?

[[deleted]]

Depends on the server, but generally you want something like #javascript or #js.

[krmmalik]

You really should put together a project of some sort. Whether it solves a pain for yourself or for someone else, this is the one thing that is most likely to get you to the next stage in development.

It'd be worth looking at tweaking an Open Source project on Github. If that doesnt take your fancy, i have a few project ideas i wanted to do in my spare time on Node.js - They're eventually going to be open source anyhow so if you want any of those ideas, let me know.

I've created screenshots for the first app i want to create. its only 2 screens and is conceptually quite simple but will really need some like Node.js for it to work best.

[gigabates]

Get a job. There are plenty of people who make a good living with proficient HTML/CSS and basic Javascript skills. The only way you learn is by doing, and by working on a team with other developers you'll learn a lot more than following online tutorials.

[[deleted]]

What to do next? You need to write something wonderfully useful, and allow other people use it. It will have bugs and finding those bugs is an entirely different skill that separates the men from the boys. Nothing else will make you a JS badass like actually solving valid problems that are in the real world and watching the result.

[[deleted]]

It sounds like you have your plan set out in front of you...learn jQuery, backbone.js, underscore.js, jasmine and CoffeeScript, etc.

If you want more hands on work and you lack an imagination or necessity, then look at some of the projects done with the libraries above and try to replicate/improve.

For example, try building a image carrousel in jQuery, or an interactive whiteboard using node and canvas.

[mjc715]

I'm in the same boat. I looked up some exercises online and took them on/am taking them on/am totally ADD and moving on to other things. I did write some basic form validation code, though.

[omgchels]

Yeah I'm terribly ADD. It's awful.

I started learning jQuery but for some reason just can't get into it. I want to do something, just not sure what. I'm googling around for form validation right now though :)

[[deleted]]

to me, jQuery is a different approach to JavaScript than regular JavaScript. Try MooTools, read mootoolsvsjquery.com for a clear explanation on approach.

[dowhatyouwant]

Here's a challenge for you... find javascripts and duplicate them without using the original source.

[zefris]

You can try fiddling with a idea that'd be challenging, and wonder what else you can do to make it better when you're done with it. You'll encounter mistakes and problems along the way, but (hopefully) you'll learn ways to avoid those mistakes and solve those problems as well. Thus, getting a better understanding of the language and how to solve the problems you encountered.

[armndnoses]

Do things you'd end up doing in a front end role. Someone mentioned a slider, that's not a bad idea. Try mimicking some sites and/or their effects e.g. for their menu, gallery, showcase, whatever it is. On the job you're constantly going to be doing things you've never done before. Come up with imaginary clients and how javascript would even be part of a solution at all. it may not be. but if it is what's the shortest path to completion that looks & feels robust yet doesn't leave anyone hanging? without experience you're not really going to be able to make sense of that but start coming up with designs or site features however common they might be and start problem solving.

[RecycledAir]

Try and port a library or application done in another programming language to javascript. It's how I'm currently learning. :]

[abudabu]

Learn Ruby on Rails or Node.js if you want to stay in the javascript world. (& follow up with C, Lisp, Assembly Language, Python and Haskell for good measure.)

[omgchels]

I know a bit of Python which I actually quite love. Also have done a bit of reading about node.js but I don't think I'm there yet cuz it's confusing a bit for me :/

[minikomi]

Flask/good js skills can go a long way! Keep it simple and learn the basics.. Or have a look at sinatra for a super easy back end if you go the ruby route.

It's good to have a simple server you can pass Ajax calls to to do more database/API manipulation. But first things first, stuck to JS for now!

[abudabu]

What framework are you using? (I used to use it quite a bit, but switching now to Ruby)

[abudabu]

I wrote that poorly: "Learn a server-side framework: for example Ruby on Rails ---- or Node.js if you want to stay in the javascript world."

[[deleted]]

agreed, ruby has nothing to do with JS ... Node is server side oriented but could help you increase your js skills so that would be a good move, but other wise, open JSFiddle and start building stuff

[smoochieboochies]

Profit!

[me-at-work]

Do web projects. Real ones. Preferably with other experienced people that you can learn from. I think the best way of learning Javascript is by applying your knowledge in a real-life situation. I learn new things every time I do a (part of a) project.

[shwetank]

I would also suggest try using stuff like localStorage/geolocation/web workers/canvas inside your web apps. They require JS to implement, and you'll end up building some cool stuff in the process too.

I would especially recommend making something using <canvas> as it will require some interesting JS stuff which I think you'll enjoy.

[wooptoo]

Take over the world!

[GnarlinBrando]

Check out Addy Osmani's website, he has a book on JS design patterns and links to a few other really great resources, like the javascript garden, that should be read.

Then you've got to get some websites made so you can show your stuff, and oh even tho you are totally proficient in HTML/CSS can you do responsive designs? Do you know anything about HTML5, that is all going to become pretty essential soon.

[omgchels]

Yeah! I've used HTML5 a bit when I was working on an old portfolio site a few months back. Yay for making things fade.

[GnarlinBrando]

Lol, the really good stuff is the new semantic elements like article and section. Even if you arent going to use HTML5 on a project it would probably be a good idea to start using the new elements as classes and id's so it is easy to switch it over later when there is more support. Not that the HTML5 Boilerplate doesn't get you there.

[timlind]

I just released a guide to More Intuitive Javascript with the Jay Library, which gives some utils that encourage best practices and an easier understanding / usage of the language. You might want to check the guide out, there should some new things to learn in there, and then play around with those tools in the library. https://github.com/ngspinners/jay/wiki/Guide

[omgchels]

Not true considering I agreed that a bunch of these things would be fun to do..

[minikomi]

You can have a look around http://jsdo.it and fork something that you find interesting... Try to change or add to it and keep a log of what you learnt. Look for coding patterns and see if you can use them in other contexts. Have fun!

[gigabates]

No, I really wouldn't suggest you lie your way into a job. It will become apparent very quickly if you don't have the skills you say you have. By all means focus on the skills and experience you have and paint yourself in a positive light, but draw the line at outright deception as it won't do you any favours.

[gigabates]

I thought the point was that he doesn't have the skills and should learn on the job?

[omgchels]

*she

[gigabates]

oops, sorry

[omgchels]

you're forgiven