The Pragmatic Craftsman :: Simplicity from complexity : by Stanley Kubasek ::

Over the past couple of weeks I have digged into learning Javascript on a deeper level. I have learned a great deal. Along the way, I’ve come across some very good Javascript resources. Listed below are links to the best I’ve found.

Douglas Crockford articles – Javascript guru

JavaScript core skills — list of very good articles on Javascript by Opera developers

JavaScript Programming Patterns – an excellent articles about OO programming in Javascript

Professional Javascript Development — excellent Javascript book

I’m reading an excellent book on CSS – Stylin’ with CSS (highly recommended). I finished reading roughly half of it and I’d like to summarize some of the things I learned.

CSS LayoutsI am used to creating page layouts with HTML tables. It’s easy to do and you can get any layout you want. But doing it that way is no longer recommended, and it’s an ugly way of doing layouts. The “new” way of doing layouts is with pure CSS. It’s cleaner and more concise. However, it’s more complicated for a novice html guy like me. To really get this, you need to have some experience.

So how do you do it? Let’s look an an actual example first.

<div id="main_wrapper"><div id="header"><div id="header_inner">Header</div></div><div id="nav"><div id="nav_inner">Left nav</div></div><div id="content"><div id="content_inner">Main content...</div></div></div>

and here’s the style for it:

<style>#main_wrapper {width: 840px;}#header {
}#nav {width: 20%;float: left;}#content {width: 80%;float: left;}#footer {clear: both;}</style>

Nice and simple. With this technique you can put together any layout you want.

Why the inner divs? Because CSS is weird. Even though you have a div with a certain size, by adding padding, margins, and border, the width actually changes! So, sure,you can go with just a top-level div, but you have to keep in mind that the size will change when you add those settings. How do you get around that? By using an inner div. The outer div controls the sizing and floating. Inside the inner div, you can then add padding, margins and border and the size of the outer div will not change: this is really how it should work. By using an inner div, you actually simplify your life!

ReferenceStylin’ with CSS: A Designer’s Guide, Charles Wyke-Smith

If you’re trying to learn CSS, or if you want a good reference, like me, CssBasics.com looks very good. It is a tutorial that is simple, well laid out, and has a very good rating on digg.com. Check it out.

Various CSS design templateshttp://www.intensivstation.ch/en/templates/

Nice array of searchable templateshttp://tools.i-use.it/

Find more design stuff — ideas — at digg.com/design. (I’m really enjoying digg.com so far.)

Related500+ Colorshttp://cloford.com/resources/colours/500col.htm