blog

Sometimes, you come upon tools and tricks that are so useful, you wonder how you survived without them in the first place.  Here are some of mine.

1) Keep your CSS styles all on one line

My first tip may seem really trivial - but with all the CSS builds I’ve done, nothing has improved the way I do CSS more than keeping my styles all on one line.  Basically this means writing this:

.style1 { margin-top:6px; font-size:22px}

instead of this:

.style1
{
margin-top:6px;
font-size:22px;
}

This makes a huge improvement in organization and ease of editing. It’s much, much easier to group related CSS items. Since the more spread-out version often separates styles with an additional break between them, your eye simply does not recognize the grouping as a distinct block of styles that belong together. Additionally, whatever comments you have to indicate groups of CSS styles are often off the screen. In contrast, look at a style block like this:

/*  My group of CSS styles */
.style1 { margin-top:6px; font-size:22px}
.style2 { margin-top:0px; font-size:12px}
.style3 { margin-top:525px; font-size:42px}
.style4 { font-size:42px;}
.style5 { padding-top:42px;}
/*  end my group of CSS styles */

In the more spread-out version, this group would probably take up a good portion of your screen - especially if the styles have quite a few rules. Instead, your eye instantly recognizes that the styles belong together and it takes up a whole 7 lines. You no longer have to spend hours scrolling around your 15 page CSS file (2-3 pages is usually what I end up with).

2) Firebug. Get it.

As a web developer, there’s almost no excuse for not having Firebug. It is the most useful front-end development tool that I’m aware of. Among other things, Firebug lets you debug Javascript, change CSS/HTML on the fly, and see all the requests you’re making while browsing.

3) jQuery. Use it.

Want to write extremely easy, concise, beautiful javascript? JQuery is the way to go. Sounds simple, but It’s basically a library that allows you to easily manipulate your HTML and CSS. It includes features like animation, ajax, and a huge library of plugins.

4) “It’s ok to say you don’t know. But you’re fired if you can’t Google it”

I’m not sure where I heard this saying originally, but it rings true in the context of programming and web development. It’s simple, but willingness to Google things can show you who the real problem solvers are. Google is possibly the best problem solving tool ever invented and it takes 10 seconds to consult it. If you have a problem with any aspect of web development, it’s almost guaranteed that others have had the same problem, so why reinvent the wheel?

5) See what others are doing

Smashing Magazine is one great resource, and there are others like it if you look. They often have lists of great development tools and new trends in web development. More than many other programming jobs, web development rewards people who stay current on the latest trends and technologies.

---

» This entry was posted on Wednesday, January 13th, 2010 at 5:12 pm and is filed under General, Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.