HN Explorer

Ask HN: How to learn Javascript and HTML for devs coming from C++/Java/Python?

60 points by codedivine ↗ HN
I am a programmer who has good knowledge of C++, Java, Python and even some Common Lisp and looking to learning a bit of HTML, CSS and Javascript. What resources will you recommend for learning these to a developer who is experienced in other languages?

53 comments

[ 2.8 ms ] story [ 113 ms ] thread
patorjk
I found the book "JavaScript: The Good Parts" by Douglas Crockford to be very helpful in understanding the language. It's short and covers the main things you'll need to know. It's a good starting place. In fact, he gave a tech talk on the main topics of his book which you can find here: http://www.youtube.com/watch?v=hQVTIJBZook
Legion
This book can not be recommended strongly enough. It was my "a-ha!" moment with JavaScript. Especially for people with programming experience in other languages, it's a gem. It's thin and easy to overlook, but every page is a, "so that's why JS behaves like that!" revelation.
leif
I have a friend who describes it exactly the same way.
sundarurfriend
Is it a good introductory book? That is, is it a good place to start if I knew zero Javascript? Or should I come to it after I've learnt a bit to refine my knowledge?
patorjk
As long as someone has an understanding of another language (basically someone who knows the basics of programming), I think this book would be a good book for them to start out with.
joeld42
Yeah, this book not only explains the "good parts" it gives you a lot of context as to why a lot of the weird stuff in JS is the way it is.
mickeyben
For Javascript, I totally recommend the Mozilla's guides https://developer.mozilla.org/en/JavaScript/Guide. Just a warning some of this code doesn't fully work on all browsers but AFAIK they point it in the guides.

For HTML the w3schools guides are good http://www.w3schools.com/html/default.asp (the javascript one are also ok).

Once you get the basics of Javascript I'll recommend to go with one of this frameworks : JQuery, Prototype/scriptaculous, Mootools, Dojo, Google closure or Yahoo YUI.

There's no better ones, it's a matter of preference, I personally currently use JQuery but for some projects I used Mootools (great piece of code) and Prototype/scriptaculous. I heard a lot of goods for YUI also.

baddox
For client-side Javascript, I started with JQuery and never really "got the basics" before that.
mickeyben
It's true that it can be simpler to directly begin with a framework. I actually began with Prototype.

If you want to build plugins for your Framework of choice (JQuery in your case), then it is also a good idea to understand what is happening behind the scenes.

There are many situations where using a Framework is not really suited. Do you really need to embed your framework of choice (JQuery in your case) if the only thing you need is show or hide a single element of your page ?

I think "begin with a framework or not ?" is a long debate (whatever the language is). I don't have a good answer to this but in the long run knowing the language you use is recommended.

atuladhar
I'd add ExtJS (http://www.sencha.com/products/js/) to that list. It's a got a very larget widget library, an active community and provides adapters to make it easy to work at the same time with other libraries. Plus, some of the new libraries Sencha (the company behind ExtJS) is coming up with to develop JavaScript apps on Touch devices look very promising.
mickeyben
Thanks for adding it to the list, I've always been stopped by the Windows-ish UI (as Google closure) but I read good feedbacks coming from it.

I also forgot GWT if you're coming from Java it could be a simple way to do some web development. I used it a bit at Seesmic and keep a good overall experience.

Of course GWT abstracts lot of things so you'll ended up by having a nice final product but not really understand the roots of html and javascript.

adamesque
I would be really wary of reading through the w3schools JavaScript guides first. You'll learn programming basics (which, as an experienced developer, you won't need), but not much about what makes JavaScript so interesting. And many of the coding practices you'll see at w3schools are painfully outdated and/or just bad practices.

Basically, if you're reading a JavaScript guide and it mentions document.write(), run away.

The MDC guides are much, much better. And Crockford's book is best.

There are also fantastic explanations of the Event model at PPK's Quirksmode site. Start here and read through all of his Event articles:

http://quirksmode.org/js/events_early.html

ronnieCA
Coming from a similar background, I second a lot of the links pointed out so far (w3schools and JQuery have been a huge help in particular). It's a great start. After that, just dive in. I started writing a chess game using canvas (part of HTML5) and javascript. It's just been a matter of figuring it out piece by piece from there. Writing lots of awful code, figuring out why it's awful, tearing it up and doing it again (Javascript: The Good Parts has been a great help).

I've managed to learn just enough html/css/javascript to be dangerous, now I'm moving on to server-side programming. What I like to do is this: Take an 11"x17" piece of paper, and write whatever it is I'm trying to learn in the centre and circle it. As I figure out what I don't know know about this technology, but need to, I draw a branch off the centre circle, for that piece of knowledge. And I continue to break it down as I go. This gives me a good visual of things I should start focussing on.

As a more concrete example, I'm using python as the backe end to my current side project. So in the centre of the page is a bubble for python. Off that I have different things I want to explore, so there is a bubble for Security, WSGI, templating engines, and SQLAlchemy. Off of security, there are bubbles for server hardening, XSS, etc..

Best of luck, there's lots of confussing technologies and non-sensical gotchas, but eventually it does start to make sense.

jcfrei
If you're going into some frontend development with javascript make sure you also get familiar with at least one of the common javascript libraries like jquery. they're very powerful.
sandaru1
One of the first things you have to do is installing the firebug extension for Firefox.
[deleted]
(comment deleted)
raganwald
Not a resource, but speaking as someone who is not a Javascript or Python expert, but used to know his way around C++ and java, my suggestion is to ignore everything you think you know about C++ and Java when learning Javascript. Do not be seduced by the ALGOL syntax.

When learning a new language we often think in an existing language and then "translate." Until you start "Thinking in Javascript,' I beg you to "Think in Python," not C++ or Java.

JM2C.

tocomment
Somewhat unrelated: I heard that learning NodeJS(right name?) for the server side is useful because then you can program in JS on both the server and client side.

But I can't imagine any cases where this is useful? Is it just the benefit that you don't have to think in two different languages or is there something more to it?

malandrew
Given that the author is interested in HTML as well, I imagine that he probably is more interested in JS resources that focus on the DOM and not on using JS as a general purpose programming language. However, I may be wrong about this.
codedivine
You are correct. More interested in front-end stuff for now.
malandrew
Given the state of things today, I would definite focus on web standards and semantic HTML. The reason being that any front end HTML you write today is likely to be used both on the desktop and via mobile devices.

Writing good clean semantic HTML will help ensure that you need only write one HTML document that is then styled by one CSS document for the desktop and one for mobile devices. Plus writing semantic HTML will give you basic SEO for free.

I honestly wouldn't worry about the JS frameworks just yet unless you have something specific in mind that you want to build. There's so much other basic stuff to learn. I would tackle javascript after you have a good grasp of HTML and CSS.

grayrest
There are actually a number of server side JS runtimes, but node.js (or nodejs or NodeJS, the naming is semi-inconsistent) has the most buzz/momentum.

I'm confident that you'll see a number of frameworks/libraries that can take advantage of JS running both client and server sdie in time for JSConf in April. The most public has been Yahoo's YUI team, with Dav Glass putting the effort into getting yui3 running in node.

Dav did a video presentation on yui3 in node:

http://www.yuiblog.com/blog/2010/09/29/video-glass-node/

IMO the most useful example/demo in the talk is screen scraping digg:

http://github.com/davglass/nodejs-yui3/blob/master/examples/...

He also provides examples of various yahoo widgets getting rendered as static html, which I think is also in that github repo, but I can't find his demo online.

I'm also working on putting a bunch of pieces together that would allow an app to be client/server agnostic but I've been "working on it" for months now in the background and I'm not finished so I'll just wait until I'm done to talk about it.

malandrew
Read Zeldman's "Designing w/ Web Standards, 3rd Edition". That book will give you direction and save you a lot of time.

The problem with HTML is that it is a pretty loose language and you can do a lot with it without getting your syntax right. On top of that you have a lot of confusion because of HTML 4.01, HTML5 and XHTML 1.0.

Because of all that you will find tons of HTML resources all over the web that may appear decent, but actually teach you bad habits and old hacks that are no longer best practice. Zeldman's book will give you some direction so you don't waste too much time and develop good habits from the beginning. If it's not the first book you read, it should at least be the second book you read.

I haven't read them yet, but Zeldman recommends the following JS books:

DOM Scripting: Web Design with Javascript and the Document Object Model

The Javascript Anthology: 101 Essential Tips, Tricks, and Hacks

For CSS, the best resources are Eric Meyer's "CSS: The Definitive Guide" and "CSS: Pocket Reference"

The current edition of The Definitive Guide is a 2006 edition. I asked Eric about a new edition and although there isn't a date set, he expects a new edition covering CSS3 sometime in 2011.

codedivine
Thank you! Ordered the "Designing w/Web Standards" book first.
malandrew
You'll enjoy it. It may be over 400 pages long but it's a really quick read. You should be able to read it all in 1-3 days.

Zeldman makes tons of link references throughout to a bunch of excellent resources, oftentimes the original sources explaining a new idea in web design. Make sure to check those links out, they add a lot of value and context, especially the A List Apart references.

The last chapter in the book ties everything together and walks you through building the Agenda from NY Mag in HTML and CSS first and then using JQuery to add behavior:

http://nymag.com/agenda/?f=agenda

HiroshiSan
Wonderful book recommendation, I am half way through, knowing nothing about web-design. Reading this book puts a huge smile on my face, it is funny and an easy read!
codedivine
Thanks for all the responses so far! Any recommendations about CSS? And recommendations for good books apart from "Javascript the good parts" mentioned so far?
malandrew
Eric Meyer is the go to guy for CSS.

Also check out "Handcrafted CSS" by Dan Cederholm. The only part of that book that is no longer a best practice is his .after float hack, which today has been replaced by the overflow:auto hack.

grayrest
CSS is actually the tweakiest part of the frontend triumvirate. The syntax isn't hard (selector + bag of key/value pairs) but putting it together so it reliably renders on all browsers takes weeks/months.

I'd recommend doing sass/compass instead which both provides an abstraction layer and a library of working code. If you're starting from nothing, the SASS syntax will probably be easier to work with than the default SCSS syntax. You can dig into the libraries if you really care about how things work, but it's always easier to start from something that works than to try to figure out stuff from scratch.

malandrew
I second this suggestion to work with Compass/SASS. I use SASS and HAML together.

Avoid the desire to work with one of popular grid frameworks like Blueprint or 960.gs unless you are sure that your project really needs something like that.

adamesque
If you're going to read Designing w/Web Standards, you'll get a very very good head start with CSS. You may be able to get by for a while just using what that book teaches.

But, I actually really recommend at least skimming through parts the CSS2 spec. There are more human-readable passages than you might expect. Specifically:

http://www.w3.org/TR/CSS2/cascade.html

Most beginner CSS devs don't really understand how inheritance and the cascade work (it isn't necessarily last-rule-wins, it's based on selector specificity). This part of the spec spells it all out.

http://www.w3.org/TR/CSS2/box.html

http://www.w3.org/TR/CSS2/visuren.html

These are easily the two most important pages of the spec. If you understand these, you'll be able to take away 90% of the mystery and guesswork that can go into laying out a page. Nearly every time I've seen a developer struggling with CSS issues, it's turned out that they've had an imperfect understanding of the basic concepts that are spelled out here.

And for a technical spec, these pages are amazingly readable and understandable.

rimantas
You cannot go wrong with these which will teach you how to do things "the right way“, not some outdated stuff:

CSS Mastery: http://www.cssmastery.com/

Bulletproof Web Design http://astore.amazon.com/simplebits-20/detail/0321509021

Web Standards Solutions: The Markup and Style Handbook http://astore.amazon.com/simplebits-20/detail/1430219203

Handcrafted CSS http://handcraftedcss.com/

It would be worth to check out some about HTML5:

Brief but good introduction: http://books.alistapart.com/products/html5-for-web-designers

Also: http://introducinghtml5.com/ and http://diveintohtml5.org/

sahillavingia
Man, I'm the complete opposite way. How would you recommend learning Python?
malandrew
I've heard good things about Zed Shaw's new book http://learnpythonthehardway.org/

I've also heard great things about Allen Downey's books on Python, but I am not sure which one is best to start with.

twymer
Might not be exactly what you're looking for in terms of learning Javascript, but I found the Javascript Koans to be pretty cool.. github.com/mrdavidlaing/functional-koans
[dead] stiggz
Forget about everything you know. Javascript, CSS, and HTML are all best learned on a clean slate. Grab a handbook about each, so you know the rules, then go immediately to http://www.csszengarden.com/ and make a few solid css sheets to build up your css skills (this'll put you in the top 10% of css designers immediately). HTML and Javacsript are pretty similiar, grab a book on the DOM, and you'll learn pretty quickly. HTML defines the DOM, and Javascript modifies it (AJAX (jQuery) does so without page reloading- you're at an advantage to learn AJAX (jQuery) right off the bat- JS will seem easy as pie after you have a grasp on that.) Most of all, good luck! Don't forget about http://www.w3schools.com/ for everything, it's a solid resource (and pretty much the 'lucky' result everytime you'll do an html, css, or js search)
erikig
I'd suggest approaching this from a slightly different perspective.

Find a simple problem - say and ajax driven to do list for instance - and mock up a simple HTML front end preferably from scratch, hand-coding the HTML. Reference sites abound but I keep finding myself at w3schools.com which was previously mentioned. As you solve individual UX problems you'll quickly get the hang of how HTML does its thing. Pay attention to standards and validate you code using the W3 validator. A good HTML editor like Dreamweaver (free trial available from Adobe) will do you wonders.

For user interactivity (alerts, browser validation, submitting data asynchronously etc) you roll out some Javascript and try solving the problem with plain vanilla javascript and then with a library like jQuery or ExtJS. I think this is the only way to grasp the utility of these libraries.

Then on the server end a web dev framework (Django if you love Python...) will get you done. Again, try solving the problem without the framework and then phase it in.

A couple of weekends later you can add "Web Developer" to you resume : )

tworats
I'm shocked nobody's recommended Douglas Crockford's ... well ... everything:

http://javascript.crockford.com/

Watch the "Javascript: The Good Parts" presentation:

http://yuiblog.com/blog/2007/06/08/video-crockford-goodstuff...

Also check out Dustin Diaz's stuff:

http://www.dustindiaz.com/

I found his screencasts where you watch him program to be incredibly helpful:

http://www.dustindiaz.com/screencast-episode-01/

Start your javascript programming with jQuery. Good javascript style is not at all like Java, so forget everything you know about Java and see how jQuery does it.

thetylerhayes
Absolutely Douglas Crockford. His live presentations are the single most helpful and, more importantly, realistic/down-to-earth description of Javascript out there.
shubber
I've had serious reservations about content from w3schools, to the point where I now skip them entirely when they come up in a Google search. They seem like a collection of all the bathroom-wall code ever: MySQL or SQLServer specific code presented as "SQL", things that only work in one browser or another presented as the best way to do things, etc. I usually know enough to know that their approaches are misleading, and I shudder to think how many devs take them at face value.
d0m
Been there, done that. The most useful tip I could give you is to have trust in your guts that you can do it and just start.

Don't get me wrong, the world wide web is a totally different beast.. however, the basic stuff still stay the same :)

shubber
I'd actual advise you to "Think in Lisp" while learning Javascript - I'd just read "The Structure and Interpretation of Computer Programs" when I started getting deeper in the JS, and it made a world of difference. The Javascript type system is a little like Python and a little insane - check out "http://www.slideshare.net/SlexAxton/superclassy-inheritance-...

The Mozilla HTML reference is very good: https://developer.mozilla.org/en/HTML/Element and between it and just viewing the source on decent websites you can learn a lot - coming from Java, you must know XML pretty well already :)

As for CSS, I've always just used the W3's reference: http://www.w3.org/TR/CSS21/ which is a little dense but followable. (The W3 for HTML isn't bad either, but they will use the schema definitions for everything, which are slightly opaque.)

Finally, http://www.alistapart.com/ is a great reference for the pragmatic state of web design. Lots of great articles, especially going back a bit.

redraven
I started javascript programming just a few months back, and I think a really quickly picked it up due to my relatively good programming background as yourself. I've primarily written in Java and Perl before.

Javascript is dynamic language, and I think a lot of it will have some familiarity of python (...well, I think so - I do not know python...). I would recommend to start with "Object Oriented Javascript" (Stefanov) from Packt Publishing, rather than the Javascript brick from Oreilly. You get through this book relatively quickly. One quirk of JS is the use of the "this" keyword, which you might find being used in a bit oddly ways.

HTML will you understand relatively easily as well. You might need to pick up some CSS layout techniques which I sometimes finds a bit baffling from time to time.

ibejoeb
I have a similar background, and I found these two excellent reads removed a lot of the ambiguity that I think comes with JavaScript. For me, I was constantly having an internal argument around designing functionally--encapsulation and messaging via closures--vs designing in an object-oriented paradigm.

http://eloquentjavascript.net/

http://javascript.crockford.com/private.html

Also, I'd recommend making this the way you start writing software with JavaScript.

http://www.adequatelygood.com/2010/3/JavaScript-Module-Patte...

kilian
Skip w3schools (seriously). Skip websites on specific stuff. There is, right now, really only one good resource to get your started:

The Opera Web Standards Curriculum. It is the only thing that takes you from A to Z with 100% up to date correct information.

http://dev.opera.com/articles/wsc/