3

I'm a server-side junkie, and by that I mean I spend time writing code that's not visible to anyone.

I'm interested in rounding out my skillset and becoming more self-sufficient with writing full-stack webapps.

But, I find it difficult to work with the the sort of 'organicity' of client-side html tech.

I know there is no substitute for time and experience, but if an experienced client-side dev was starting over from scratch, what would he read/do?

EDIT: an example of an answer that I'd give for server-side:

Learn the best practices of the language you're working in, eg. for java, read 'effective java'. Learn fundamentals of algorithms, application design concepts that are useful in any language, two good sources are 'design patterns', 'SICP'.

I'm not looking for: 'Learn CSS, HTML and Javascript.'

I am looking for something like:

Intent, rationale, concepts of X are well-explained in Y. Framework Z is a good example and the source-code is enlightening and well-documented.

closed as not constructive by gnat, JB King, Dynamic, GrandmasterB, Robert Harvey Jun 19 '13 at 1:52

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. If this question can be reworded to fit the rules in the help center, please edit the question.

2

CSS and HTML are trivial to learn. A competent programmer can pick up the syntax in 15 minutes and learn the basics of HTML in another 30.

It is very important to know and understand the box model. This is the method that the browser uses to render the DOM. That said, you should probably at the very least read the wikipedia page for the DOM.

Next, learn JavaScript. I would start with JavaScript: The Good Parts. I would also learn to use and understand jQuery - it is the most ubiquitous JavaScript library for a reason. You'll also need to understand the basics of the Module pattern, and understand how RequireJS works and why it is so useful.

Once you know those basics, you'll want to start learning about things like repaints, maybe the canvas tag, etc.

2

Good Read for an Intro to the general DOM thing: DOM Scripting - the code stuff will be a little basic for an experienced programmer but it's worth reading IMO

Best practices worth taking very seriously:

The Separation of Content/Structure, Presentation, and Behavior. Keep your HTML, CSS, and JS separated as much as possible via hooks rather than dumping inline JS into script tags, CSS in style tags and style attributes, and event handlers inline in the HTML. It makes it so much easier to think about and work with.

Semantic HTML - basically use HTML to describe content as much as possible. Avoid pointless wrappers and tags used simply to push layout. Don't kill yourself for this but keeping the HTML minimal and appropriate makes it easier to read and debug. The boon to accessibility and SEO are just nice side-effects compared to ease of development.

Really mastering CSS is actually pretty freaking hard and even a lot of designers never bother to. You probably won't want to take the time unless layout problems or UI work really interests you deeply. But pay close attention to display and position properties and how rooting of absolute parents varies depending on what positioning schemes are set on ancestors (very useful). Learning the crap out of CSS is a major competitive edge in UI. Even when you move on to more UI and JavaScript engineering type roles on the client-side. Being great at it eliminates a ton of JavaScript.

JS itself is very different from most popular languages. It's success and ability to adapt to a wide array of platforms is in large part due to that. If you know something with c-based syntax don't expect it to behave the same. Using first-class functions, closures and learning to adapt to a highly mutable language are critical skills but fortunately it's easy enough to tinker and make things happen that you can pick up basic use of it fairly quickly. jQuery can be very helpful with all the DOM stuff, but don't let it get in the way of understanding how it's done with vanilla JS and the DOM API which is all jQuery uses under the hood.

But if you're looking for "there's only one way to do it right" you'll never find it on the client-side. The problems are too diverse and too complex. You can never stop learning either. The day you do, is the beginning of the week that your skills suddenly became obsolete.

I think there's more value in O'Reilly's definitive guide than the Good Parts personally. I'm sure at least 3 people recommended that by now though. It's not a bad read. It just gets mentioned in any remotely similar question and Crockford's take on JS isn't one I 100% agree with.

  • I wish I could give more upvotes, this is exactly the kind of thing I'm looking for, how to spend my time and what would be a waste to focus on. A couple of questions, what are examples of 'hooks' to separate the concerns with? Also, do you mean inlining styles and event handlers in html is good or bad? And, what do you mean by 'dumping tags'? – gtrak Jun 18 '13 at 18:50
  • Hooks as in IDs and classes. You set event listeners in the JS rather than setting event handler funcs in inline "on" attributes in the HTML. CSS in external files rather than in style tags or inline style attributes. – Erik Reppen Jun 19 '13 at 1:04
  • Not sure what I meant by "dumping tags" so I'll edit that. – Erik Reppen Jun 19 '13 at 1:12
1

I recently got started working with client-side web languages. I had some basic HTML4 and CSS2 experience, but not much beyond that. I started working with Javascript by using http://learn.knockoutjs.com. Knockout.JS is a javascript library that gave me a quick crash-course in Javascript, object-oriented programming, and the Model-View-View-Model design pattern (which lead to Model-View-Controller pattern for a couple of .NET projects). The mini-examples the tutorial runs you through live on their website gave me ideas on how to expand them by adding other libraries for additional features (jQuery) or other languages (C#).

Not the answer you're looking for? Browse other questions tagged or ask your own question.