HN Books @HNBooksMonth

If you're just getting started with Javascript, I'd say learn Javascript and jQuery. Here are two good books:

    http://www.amazon.com/dp/0596517742
    http://www.amazon.com/jQuery-Action-Second-Bear-Bibeault/dp/1935182323

If you want to use Javascript/Ajax in a Rails application, this is a good introduction to how Rails' "remote" forms/links work in a jQuery context:

    http://www.alfajango.com/blog/rails-3-remote-links-and-forms/
    http://www.alfajango.com/blog/rails-3-remote-links-and-forms-data-type-with-jquery/

I would get to the point where you understand all that before tackling Angular, Ember, or Node.

1. Learn JavaScript (the language)

http://eloquentjavascript.net/ http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockfor...

2. Learn jQuery (a JavaScript library)

http://jquery.com/ http://www.amazon.com/jQuery-Action-Second-Bear-Bibeault/dp/...

3. Learn SQL (the language)

http://www.amazon.com/Sams-Teach-Yourself-SQL-Minutes/dp/067...

4. Pick an implementation

MySQL, PostgreSQL, SQL Server, Oracle

----------------------------------

After that, most application development languages are just syntax. Pick what feels best.

Learn how to use Ajax to tie client-side requests to server-side requests and you're marketable.

⬐ charliepark

Agreed on points 1 and 2, but for front-end development, 3 and 4 are unnecessary and will pull you away from more relevant lessons, or (even more important), applying what you've learned to new problems.

I'm not sure I know exactly what you mean by web design. So lets start there.

a. The look: the graphic design of the page.

b. The interaction: Usability and UX

c. Designing and coding with good software design principles.

d. Some thing else?

I can point you to some good books for b. or c., however a. is the holy grail. I have never found a good book on web design from a graphic design perspective. That said Ill share with you what I would consider the closest I have found.

----------------------------------------------------------

a. (Web site Graphic Design)

* The non Designer's design book - http://www.amazon.com/Non-Designers-Design-Book-Robin-Willia...

* Visual Language for Designers - http://www.amazon.com/Visual-Language-Designers-Principles-U...

* Tuft's Envisioning Information - http://www.amazon.com/Envisioning-Information-Edward-R-Tufte...

* I have found some good online articles http://delicious.com/csmeder/ux

----------------------------------------------------------

b. (Usability and UX)

* Web Form Design: Filling in the Blanks - http://www.lukew.com/resources/web_form_design.asp

* The Design of Sites: Patterns for Creating Winning Web Sites - http://www.amazon.com/Design-Sites-Patterns-Creating-Winning...

* And again Tuft's Envisioning Information - http://www.amazon.com/Envisioning-Information-Edward-R-Tufte...

* Information Design Workbook http://www.amazon.com/Information-Design-Workbook-approaches...

----------------------------------------------------------

c. (software design and coding)

* Bulletproof Web Design - http://www.amazon.com/Bulletproof-Web-Design-flexibility-pro...

* Handcrafted CSS - http://www.amazon.com/Handcrafted-CSS-More-Bulletproof-Desig...

* jQuery in Action - http://www.amazon.com/jQuery-Action-Second-Bear-Bibeault/dp/...

⬐ ewoodh2o

I found the SitePoint book "The Principles of Beautiful Web Design" (http://www.amazon.com/Principles-Beautiful-Web-Design/dp/097...) to be very informative as well. It's a great introduction to a lot of different aspects of design that programmers generally don't think about when trying to mimic more professionally-designed sites. I read it two years ago, and it was a bit easier to digest at the time because most of the designs presented still felt current.

However, keep in mind that while the designs presented in many of these resources may look outdated, the principles behind them are solid. Tastes and trends may change, but running through a few Photoshop tutorials will get you up to speed on the execution of the latest styles. More importantly though, design basics such as readability, whitespace, proximity, alignment, proportion, color, texture, etc are timeless. If you can distill those important aspects from the materials you're reading, you'll be much better off in the long run than if you just try to copy techniques from whatever the most modern resource currently is.

⬐ jamesbritt

(a) is quite the tough one. Large part of the problem is taste. You need it, as does the author of any guidelines, and you and the author need to be in sync.

Worth looking into are grid layouts, and CSS frameworks that making working with grids easier. I'm a fan of 960gs, but there are a few good ones.

http://www.thegridsystem.org/

http://delicious.com/jamesbritt/Grid

⬐ DenisM

I suggest you read the non-designers design book. A lot of it is pure math - colors, alignment, contrast, repetition, and proximity. Even if you won't learn how to design you will learn to tell good design from bad, and what makes it so.

Stay away from Kindle version though - in a twist of irony the book's layout has been severely corrupted, serving more as an anti-example to its own content.

⬐ daleharvey

great list, thanks

I wrote a blog post the went very briefly about design tips for programmers

http://arandomurl.com/2010/07/07/design-tips-for-programmers...

there is also a few linked resources from there, the video and the book at the end are really good.

⬐ csmeder

Ha, yes I liked it. In fact your actually part of the list above under:

I have found some good online articles http://delicious.com/csmeder/ux

⬐ barmstrong

Added yours to this list (with some voting) in case anyone is interested:

http://buyersvote.com/categories/the-best-books-to-learn-gra...

⬐ caffeine

Excellent! What a helpful list. This is one of my major stumbling blocks as a programmer trying to build usable apps.

⬐ irondavycole

For (a) I would recommend Mark Boulton's book, Designing for the Web, which is available free online:

http://designingfortheweb.co.uk/book/index.php

It has really competent sections dedicated to aesthetics: typography, color, and layout. That he made it free is unbelievable. It's a resource I always recommend to the developers I work with (I'm a designer) who want to understand more about design.

⬐ photon_off

Here are some other related websites that might interest you:

http://www.moreofit.com/similar-to/?url=http%3A%2F%2Fdesigni...