Name CSS Classes More Descriptive

October 30th, 2008 by Aaron

One thing I remember being pounded into my head is to not create CSS classes after their physical attributes. So, for example, if your error text is red, do not call the class red. Instead, be more descriptive of the content.

BAD!

1

.red { color: red }

1

<span class="red">There was an error!</span>

Instead, I was always encouraged to give the class something more descriptive, such as ‘error’.

GOOD!

1

.error { color: red; }

1

<span class="error">There was an error!</span>

Well, that seems pretty cut-n-dry for a simple example like that. However, in my most recent design, I’ve come across some more complex situations. For example, when you’re visiting the webpage, the background of an element might be a really dark grey. When you’re an authenticated user, however, I need it to be a medium grey (hey don’t ask - just wait for WhereIsTheBand.com to be done!).

Of course, during design, I went to the dark side right away:

BAD!

1
2

.darkGrey { color: #101011 }
.mediumGrey { color: #212122 }

Now, I know I should come up with some descriptive name, perhaps something like “userLoggedIn” or something, but I plan on using these classes in different areas as well. They might not be dependent on the user being logged in - just might look better that way. I didn’t want to make a lot of duplicate CSS code either.

The compromise: be semi descriptive.

COMPROMISE!

1
2

.lowContrastBackground { color: #101011 }
.mediumContractBackground { color: #212122 }

Not perfect, but seems like a better alternative.

Firebug for IE?

October 20th, 2008 by Aaron

Now you can start accessing some of FireBug’s great features in other browsers, like Internet Explorer.

Check out FireBug Lite.

DIRECTORY_SEPARATOR is Useless!

October 14th, 2008 by Aaron

The predefined PHP constant DIRECTORY_SEPARATOR is useless.

When evaluated, the constant is as follows:
*nix: /
win: \

So, to the casual observer, there seems to be a real need for this constant - especially with those who favor the php command getcwd(). However, for the most part, it is just wasteful - and potentially error prone to have around.

For the slashes, Windows will work with / (even though its constant return is \ - and the backslash is used normally throughout the filesystem). Windows will also work with c:\blah\blah/additionalblah/moreblah.php (note the mixed slashes, just in case you happen to mix a call to something like getcwd() and your hardset path with the forward slash). *nix will not (you cannot do /usr\bin/funstuff)

I also ran across a case one time where - through some strange fate of mangled programming, the DIRECTORY_SEPARATOR on windows encased in a string started escaping certain characters of the filename.

One final note - someone on the PHP.net manual page suggested this function - if you really MUST use getcwd() - and in the case you’re using ‘explode()’ to figure out something about the path:

1

return gstr_replace('\\', '/', getcwd());

How desktop.ini saved me from myself

October 7th, 2008 by Aaron

When working at “the triangle” we used junction points on windows to link to repositories that we needed to run the code base - but weren’t necessary for the project. (see creating junction points on windows with linkd.exe.)

The problem I ran into was thinking I could delete my whole folder with all of the repositories after the project was done. Unfortunately, because they were junction points, they would also delete the source of the links.

Next, I decided that I should delete each folder individually. However, I kept forgetting which were junction points and which were real folders. Unfortunately, windows did not automatically distinguish real folders from junction points.

Finally, I found out about desktop.ini - and how I could use it to my advantage. I ended up creating a desktop.ini file inside of each of my real folders and changing the icons to something else. This way, I would know that they were real folders and not junction points. This worked great and kept me from deleting junction points ever again.

Microsoft is pretty close lipped on their msdn link above - so I found this to be a better resource: Peatsoft desktop.ini reference.

array_merge is useful - but with a caveat

October 7th, 2008 by Aaron

So, the other day, I saw a horrible thing. I saw two PHP associative arrays that needed to be combined into one, and the worst example of NOT using PHP’s built in functions to combine them. They weren’t using array_merge - instead they were looping through each value.

That’s what I thought until I did some testing. There is a legitimate difference in the looping method vs the array_merge method. This could be by design in your application, so don’t get over-eager optimizing. Lets take a look:

Example Arrays

1
2

$ar1 = array('a'=>'ay', 'b'=>'bee', 'c'=>'see');
$ar2 = array('d'=>'dee', 'e'=>'ee', 'f'=>'ef');

Well, first off, lets try my way - with array_merge:

1
2

$ar2 = array_merge($ar1, $ar2);
var_dump($ar2);

array(6) { ["a"]=>  string(2) "ay" ["b"]=>  string(3) "bee"
["c"]=>  string(3) "see" ["d"]=>  string(3) "dee"
["e"]=>  string(2) "ee" ["f"]=>  string(2) "ef" }

Ok - decent. Now lets try it their way:

1
2
3
4

foreach ($ar1 as $k=>$v) {
    $ar2[$k]=$v;
}
var_dump($ar2);

array(6) { ["d"]=>  string(3) "dee" ["e"]=>  string(2) "ee"
["f"]=>  string(2) "ef" ["a"]=>  string(2) "ay"
["b"]=>  string(3) "bee" ["c"]=>  string(3) "see" }

The array is in a different order.

Special Thanks to Sjan and James for commenting on my original version of this story and explaining that I was totally running in circles!

Ode to a MySpace Layout

October 4th, 2008 by Aaron

*sigh* Things change… and so does MySpace.

I had once written an article about how to create a great MySpace Layout - but it is somewhat out of date. I’m not sure if there is any interest in an updated article. In case there isn’t, and I decide to just remove it, I have a picture of what the original design of mine was here…