Class #16

Some Best Practices

The key to writing great JavaScript is knowing when to use CSS instead.

- Tim Wright

Most of you are not to the point of writing JavaScript from scratch. You are most likely implementing some features via jQuery. If so, you are not alone – jQuery is the cool kid everyone wants to eat lunch with. However, there are good reasons to be moderate with your implementation of jQuery and Javascript. For more on this, read Tim Wright’s article on Building a Relationship between CSS and JavaScript.

    Some things to consider and be familiar with:

  • CSS is lighter, faster to load, and more universally-browser compliant. If CSS can do it, you are usually better off using CSS. Just because CSS has been around longer, don’t discount its power. You can do a lot with just CSS, especially if you start looking at incorporating CSS3.
  • Every jQuery plugin comes with a package of code. In many cases, you are only using a part of that code. All that extra baggage can add up. Since you are all early on in your understanding of this stuff, its okay to pack generously. Think of your first camping trip ever. At some point though, you’ll need to know how to pack light – experienced Alpine backpacker style.
  • When JavaScript comes in and mixes up the separation of presentation from structure, you end up with some of the same site maintenance issues as using inline styles or HTML for layout. While this may not be an issue for you now, start preparing for your future by practicing keeping your HTML as clean as possible and only for semantic markup, your CSS for presentation and your JavaScript for logic.
  • One programming principle that can help you code better is, “don’t repeat yourself” (DRY). This principle boils down to being as efficient as possible and not duplicating code. You can start with the suggestions in the linked article, such as grouping selectors, using shorthand properties, nesting selectors and the like. If you want to be really concise, then dig in to SASS or LESS, extensions of CSS that make writing clean CSS simpler (less punctuation necessary!) and more concise (nested rules, variables, mixins, selector inheritance, etc.) Essentially SASS allows you to write CSS with simpler and more flexible rules than traditional CSS. Then, the extension compiles what you’ve written into a CSS file for the browser. It may seem a little scary at first, but if you want to grow your code writing skills, learn about these pre-processors. Here’s a litle youtube explanation if you prefer the spoken word. To install SASS, you’ve got to put on your robot cap and talk straight to the computer. Do this (on a Mac) with Terminal, the command-line application. It’ll open up a window where you can give the necessary commands to install SASS.

Due Next Class:

For Wednesday’s class, each group will present preliminary comps for an in-progress group critique. Although these are not final files by any means, take this critique seriously by presenting (the way it looks AND how you talk about it) as formally as possible. Polish where you can polish – design the presentation. In the real world, you’ll be showing work to clients all along the way, but that doesn’t mean they will get it if you show up with a bunch of disorganized files. The more prepared and organized you look, the stronger your case will be for why the solutions you are proposing are worth their money.

If you need help understanding how to present your in-progress work, flag me down and we’ll talk.

The presentation should be composed of all of your process to this point (your group blog) but in a formal, organized document. In addition to process, each group should have at least 2 (mostly) complete coded pages from each person. The presentation should be compiled in a PDF (you can even add hyperlinks to live pages if you like).

Be prepared to verbalize decisions your group made and why these are strengths. This isn’t a matter of sugar-coating – this is persuasion. Talk about who your audience is (remember those profiles?) and why the visuals and user-experiences you’ve designed speak to them. Refer to information gathered during user testing. Call on your knowledge of design principles, typography and color harmony. Make sure each person in the group has an aspect of the project to talk about during the presentation.

Bring final PDFs on a thumb drive or a shared folder.

For next week, you’ll do another more comprehensive round of user tests. Then, refine, refine, refine! Final on Thursday, December 13th.

Posted in class stuff

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Paula Airth

Assistant Professor of Graphic Design
Find me in Fine Arts 109 or send me a note at