Streamlining development

css, development, php, web 2.0 October 8th, 2007

Time management is key in any business position, whether you are a receptionist for a law firm, or a sole-proprietor in a web development company. I’m going to assume that as a constant in any business discussion. There have been hundreds (thousands?) of books written on the topic, and I won’t try to reinvent the wheel. One of my favorites is The One Minute Manager Meets the Monkey. Why am I saying all of this? Because I won’t be talking about it at all. If you don’t have this concept down, you need to stop reading, and go figure out what I’m talking about. Back? Okay, good. Here we go:

1) More desktop space!

Maybe it’s just me, but when I have more space to get work done, i can get more work done. I prefer to have two screens, and when I plop my laptop at my desk, its heaven on earth, let me tell you. Your desktop may not have the ability out of the box to hook up two monitors, but it is a lot less expensive than you may think. At the time of writing this article, I know of at least a few different cards under $75 that support it… In fact it seems almost new cards that are made are supporting dual monitors these days. Grab a couple of 17 inch widescreen monitors at $150 a pop, and you have twice the desktop space than you ever had before. If you want to use a couple of 19 or 20 inch screens, it may run you a bit more, as the value graphics cards don’t tend to like the 1440×900 resolution or higher… I had a bear of a time getting an old GeForce FX card to work properly.

2) Better Desktop Space

So, you don’t have room on your desk for two screens… or you don’t have $400 to blow. Second best option (my home solution) is find a nice, well-priced, clear, crisp, easy-on-the-eyes screen. I found a Samsung 932BW that ran me a few pennies over $200 at best buy. I don’t care if you aren’t “playing games” or “using photoshop” on your computer. Having a lot of easy to look at pixels really improves your desktop stamina. If you have to look away and rub your eyes every 20 minutes, not only are you going to get cataracts, but you lose focus, and thus lose time.

3) Steal code!

What? What? Oh come on. Don’t feel bad about it. If there’s something you need to do, chances are, someone else has already done it. Look: Geeks with Blogs I think the header says it all. Here are some links to some helpful libraries of prewritten code.

There are many more, that a good old Google search can turn up. Try it out!

4) Look away!

If you aren’t taking a break from staring at the screen every now and then, you’re killing yourself, and your productivity. I’ve heard people complaining left and right about smokers, because they take a 7 minute “smoke break” almost every hour it seems. I’d rather have a smoker as an employee… I’m willing to bet they get more done! When you’re in the middle of an intense coding session, and you hit a small hump… most of us stare at the screen and run ideas through our heads. I’ve done it. After a minute or two, if it doesn’t hit me, I walk away.

It’ll rest your eyes and your brain, and let your common sense hop on the thought train. I get laughed at by my girlfriend because I’ll be outside pacing, sucking down a cigarette like its going to disappear if I don’t finish it in 30 seconds, then almost always throw it in the coffee tin outside our house as I run back inside and sit right back down. I got more thinking done in that 2 minutes than I ever could have staring at the screen. You don’t have to be a smoker… just go get some coffee, or splash water in your face, kiss your kids, hit the washroom, buy a candy bar, throw a couple free throws… whatever. Just get away from that screen so you can think!

Tags: , ,

No Comments

CSS Tips and Tricks

css, development September 24th, 2007

I’ve collected a few of my favorite CSS tricks for use on my own site, yet seem to always be on the look out for other implementations. Seems like you can’t just lay out a page anymore… you have to lay it out, then add some conditional formatting for the large amount of people still using IE6, then hope that the spacing difference between IE7 and Firefox isn’t anything hugely substantial. Just thinking about reading that statement out loud makes me out of breath!

Either way, here are a few tips and tricks to style sheet development.

:::

1) Have a plan
How many pages will your site have? Will many of the elements be the same from page to page? Will you have a few pages with their own elements that won’t repeat on other pages?

If you break down your plan for the site and assign each area some sort of identifier before you even insert a <div> tag, you’ll be much more successful in keeping everything straight. It may make sense to break your page into a few smaller pieces. This can be done with classes:

.class1 #UniqueIdForEachElement
{
....
}

2) Don’t discriminate

Internet Explorer, Firefox, Opera, Safari, Palm, Smartphones…. the list goes on. Should a website be designed to render the same across all platforms? Absolutely not! That beautiful image of your work that you have your logo floating above in all of it’s Photoshop CS3 glory just completely loses its appeal when viewed on a 2.3″ diagonal screen. The navbar that you have tucked away on the right side of the screen doesn’t even show up until you’ve scrolled allllllll the way past the header, content, and copyright information on somebody’s Samsung cell phone.

<link href="default.css" rel="stylesheet" type="text/css" media="screen,projection" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />

<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />

If your style sheet declarations look something like that… you’re in good shape. Go ahead and skip the rest of this bullet point.

I did a quick browse of the WWW, and the second page I looked at has it all wrong. I’m a fifteen year old, trying to convince my parents to get me a car as soon as I turn 16. Allstate Auto Insurance information is provided on this page. I read some of it… but decide I want to print it because its easier to show them. Lo and behold… Allstate didn’t provide a separate style sheet for printing purposes… and now I have so much junk on this page that I printed that it doesn’t even look legitimate. A really good basic walkthrough of how to do this can be found on Adobe’s Video Workshop. Many of the same rules that apply to styling a page for print can be used for styling a page for mobile use.

Also, if somebody is using a non-english browser, make sure that

@charset "utf-8";

is inserted at the top of your stylesheet. This will ensure proper rendering for those few (growing) individuals.

3) Know your capabilities

I know many a “CSS purist” that will scoff at any designer who inserts the <table> tag into a document. These same people don’t make any money doing web design, and have spent more hours cursing IE6 than they have developing a website. Sometimes you just can’t do what you want to do, and get it working cross-browser with pure CSS… at least not without spending 5 hours on something you could get done in 30 minutes.

Also, are you really optimizing something by creating a new class and ID for a div that you are going to use once?

#thRandomDiv34

{

width:500px;

}

<div id = "thRandomDiv34">

ends up the same as

<table width = "500px">

but… which one loads faster? Could you imagine if all short little tags like that were bloated to the four lines you see above? The internet would crumble and break at the quadrupled amount of data being sent and received. Don’t destroy the internet, please. This brings me to my next point:

4) Optimize

But don’t waste your time optimizing.

Wait… what?

Every time your stylesheet is loaded, it takes time. If you’ve split your stylesheet up into 25 components, more than likely you are loading an extra 10K everytime somebody accesses your page. That might not seem like much…. but thats still 2-3 full seconds to somebody using dial-up, or browsing on a mobile phone. My partner stumbled across this site which takes your CSS file, and combines whatever it can, saving you space. My style.css file went from 4.9K to 1.7K. Now that’s a difference. (and it only took .81 seconds!). Word to the wise on this though: Hold on to your old stylesheet for easy changes in the future. You can always optimize it again!

Also, make sure you don’t have classes defined that aren’t being used on a page! Why are you loading those 9 classes that make up that neat little rounded table you created, if the rounded table doesn’t even make a guest appearance on this page?

So why did I tell you not to waste your time optimizing if I’m just going to give you tips on how to optimize? Everything in moderation. If you spend 3 hours saving half a kilobyte on your page because you shortened the names of all your tags from “thumbnailImage” to “tI”, and calcuated that using tables on two out of five pages saves 34 bytes each time the page loads…. then you’re missing the point.

5) Think CSS First

Yes, I’m almost contradicting myself here (almost!) with what I said before about tables. I am, in fact, not. I’m also offended that you would think that of me.

The reality is, if it has anything to do with layout, style, appearance, color, look, feel, weight, or size, CSS is probably the answer. Such as:

  • The hover subcomponent can give you some flashy menus without using (cumbersome) javascript.
  • Thumbnails of a link can be provided by hiding (and preloading) the images off-screen such as on http://www.whathuhstudios.com
  • The overall layout of a page can be formatted into columns and rows without having <td> and <tr> tags all over your page (in THIS case, it should save you a few bytes of load time, also)

Check back in the future for some more tips. The next two items I want to write about are “psuedo-ajax” (show/hide/update) and some php time savers… I’m not sure which will come first.

Tags: , , , , ,

No Comments