Yesterday I got an email from a reader that meshes perfectly with what I presented on earlier in the week. Here is his email:
Hi Ray, what would be your advice to CF/PHP developer - if that matters at all) who wants to get properly into HTML5/Javascript/Jquery arena. I have basically used JS/jQuery and a little bit of HTML5 stuff without understanding fully - just using ready made code but I would like to start writing my own code - does that make sense?The first thing I noticed here is that you said you're using code without fully understanding it. Welcome to the club. I run into this a lot. My presentation earlier this week was very much based on the experience of people like you. People who use JavaScript without perhaps understanding what in the heck they are doing. That's "wrong", "bad", etc but it surely happens. Based on the type of questions I get on some of my posts, it actually feels more like the majority.I understand other people's code but I am not able to write my own yet. I also find overwhelming the amount of new libraries that are born every day and I do not know where I should start.
While that is unfortunate, it is at least a good thing that you recognize what you're doing. I know I've done this myself many times in the past but I try to at least flag the respective technology/routine/library/etc for follow up as soon as possible.
In terms of getting a basic understanding of HTML and JavaScript, there are a boat load of resources out there. For me though none can compare to the Mozilla Developer Network. I ignored this site for years because I assumed it was "Firefox-only", but that couldn't be farther from the truth. Their reference materials and guides are well done and should be easy to understand.
While they have numerous topic guides, here is a direct link to their HTML5 and JavaScript guides:
I'm spending time next week working with SVG and their guide will be my primary learning resource.
One more point I'll make here. For me, nothing "sticks" code-wise until I open up an editor and write a quick sample. Hell, I'll even do it for something as simple as document.writeln(new Date()). Just being able to see it run and see the output in my own browser makes it persist a bit better in my brain. I also like having these sample files so that I can experiment with them later and see what happens (i.e. what breaks) when I try new things.
Pro Tip: Before you Google for anything web related, prefix it with "mdn". For example, "mdn array". This will ask Google to focus on MDN resources first. (Which means you will skip the W3Schools site!)
Another resource is WebPlatform.org, spearheaded by my own company and many others. This is still in the growing stages though so for now I'd probably stick to MDN.
Now let's talk about you being overwhelmed. Again, you are not alone. Want to get really scared? Go visit Javascript Territory, which brags about having an index of 1019 JavaScript libraries. Hope you weren't planning on having a free weekend. ;)
I hear this a lot and I always say the same thing. The most important thing you need to remember is that every single one of these libraries is meant to solve a problem. If you don't have a problem, you don't need 'em. If you find yourself developing something and run into an issue, then try to figure out the general category of your issue, let's say date formatting, and then focus your Googling on that. If you see a random Tweet about Cowbell.js (I have no idea if that exists), click on it, read it, see what it concerns, and move on. Just keep a little nugget in the back of your head that "There is a library out that there solves problem X, when I have it, I'll go look more."
Speaking of categories, do check out Javascript Territory as they do a good job of categorizing those 1000+ libraries.
As always, I would love to hear the opinions of others, and since I'm in an airplane all day, today is the perfect day to disagree with me violently as I won't be able to respond. ;)
Archived Comments
I also think that anybody moving to the front end of things should understand how a browser works and why some best practices are the way they are. For that I'd have just about anyone start with "So You Want to be a Front End Engineer" by David Mosher: http://www.youtube.com/watc...
Good point about understanding how the browser works. Using the tools in the browser are -vital- for getting things done as well.
Hi Ray,
I switched to CF a month back from Java. Since then i am regular reader of your blog. It is full of information. This article is also very resourceful. I have learned about few other resources. Although i have one question, "Does W2schools website contains wrong information?". I am new to programming world. I have referred it quite few times. I also would like to know what are the good practices for newbies?
Thanks
Tushar
Check out w3fools.com for some info on why people don't like w3schools.
I definitely agree with "If you don't have a problem, you don't need 'em." Don't worry about all the other stuff at first: if you try to check out even a fraction of the libraries available before you've got some experience with JavaScript, you're likely to end up with conflicts that you won't know how to resolve because you haven't had enough experience with "basic" JS.
JS and jQuery are pretty much like any other languages and tools in that there will always be too much for you to master, no matter how much time you put in. All you need for strong command is working knowledge of the basics plus Google-fu to find libraries when you need them (or sites/blogs that can recommend them). Start with the basics and add in what you need as you go along.
Hi Ray,
Thanks for Reply. I checked out w3fools.com and really surprised to know that W3schools have so many inaccurate information. So sad, I thought it is one of the best resources available online. Anyway Thanks for all the help.
Tushar
Hey, we have 1023 JS libs on Jster. By coincidence I wrote a post today on the same topic. A brief guide for backend developers to get into world of frontend MVC frameworks.
You can point to it. I hope that help
http://jster.net/blog/why-s...
Thanks for sharing that, Davert!