The following is the 1^st of a 3 part series entitled CSS Underwear. If you haven’t yet, you should go back and read the intro.

When I said I was snooping around the css of some of the web’s most high-profile bloggers, it should come as no surprise that I would be checking the link rel’s of zeldman and meyerweb dot com. These are the guys many of us owe our interest and satisfaction in web standards too. In many ways Jeffrey Zeldman and Eric Meyer really are the godfathers of css. Both have contributed selflessly to making standards-based website design a reality and have authored several books to spread their message outside the sphere of the internet.

With all the attention and notoriety associated with these trailblazers, I wouldn’t be surprised if they get hundreds of visitors a day looking behind the curtains of their personal websites to learn a thing or two about css. I say this because at some time or another during the years of existence these sites have seen, I know that I’ve been there. Now that I’m a little more educated in the zen arts, their css files are not nearly as intimidating, but there’s still a lot to learn from Mr. Zeldman and Mr. Meyer.

Eric Meyer - http://www.meyerweb.com

Eric’s site has a total of 7 stylesheets linked to from the homepage (if you count skel.css which is imported). The bulk of his css is located in new.css so I’ll spend a little time here to point out how he is organizing. With no commented titles or dividers on this page, the organization is not all that apparent. It looks like he has his classes and divs mixed together with no alphabetical sorting. At closer inspection, he has all of his generic rules at the top. Below that everything is grouped into blocks and ordered how it is applied on the page. He precedes every selector in each grouping by the groups containing block so that the rules are only applied within said block. Like so:

#main blockquote {font-style: normal; margin: 1em 1em 1em 2em;}

This to me seems like it could lead to some confusion, and redundancy if, say you wanted to use the same definition of blockquote in multiple places. I guess if that were the case, he would include it at the top of the css file as a generic rule. Regardless, I am just making observations on organization patterns for CSS files and Eric’s method seems to work well for him. To each his own bag.

In contrast to Eric Meyer’s stack of linked stylesheets, Zeldman’s css is mainly confined to 1 css file simply titled 04.css with two variants (darker.css and lighter.css). No proliferation of sock hats here, just a simple title, a disclaimer, and off we go into his css.

/* Zeldman.com layout  */

/* You may adapt elements of this CSS in your own projects, but
 the unique combination of images, colors, sizes, typography, and
 positioning ("the design") is copyright 2004 Jeffrey Zeldman and
 Happy Cog Studios and may not be reproduced. */

Fair enough… Jeffrey’s css itself is grouped into some creatively insane category names. Category names that make me eager to meet Mr. Zeldman someday.

/* Primary layout divisions */

/* Typography     */

/* Purely decorative, redolent of spring */

/* Forms follow function */

/* List frippery */

/* Haxies */

…and my personal favorite, “Cover one’s butt” complete with a buttski id and a butt class:

    /* Cover one's butt */



form#buttski    {

    text-align: center;

    padding: 0;

    margin: 10px auto;

    }



.butt {

    color: #441; 

    background: #eed; 

    padding: 2px;

    }

Beyond the categories, all selectors in Zeldman’s css are further organized by what appears to be the order in which they appear on his site.

Lessons learned from Eric Meyer and Jeffrey Zeldman: Keep it simple and wear them loose. Organization is definitely a priority, but there’s no reason to keep your code in class 4 lockdown. In addition, there’s no reason not to add a little personal flare to your personal css.

My opinions expressed via MSPaint:

Hands down, no doubt about it! FileYeti is a much better name for a file management app than SumoFile or BrontoFile. A yeti can kick some sumo @S$ and eat brontosaurus for lunch.

This following is an intro to a 3 part series:

1. The Godfathers' Boxers
2. Beanies to Speedos
3. CSS Under Where?

Before all the recent buzz about design and copy theft, I began snooping into various high-profile bloggers' css files looking for the most common application and organization of css files. Although I wasn't there to steal anything, it made me feel...almost dirty. As if I was looking through these people's underwear drawers. Although posting my findings may feel like telling you who wears boxers and who wears briefs, I refuse to fall into this frame of mind. It's in the name of discovery, and in the spirit of exploration, that I go where no man had gone before.

This actually all began with a discussion at work about frustrations with css and tableless layouts. I've been trying to organize some of our sites for search engine optimization so that the title and content info shows up as the first thing in the html and that header elements and top menus fall in below. CSS has made this task an easy one, and compositionally I feel this should be a standard. The main argument is that it's hard to tell when editing the layouts what goes where and how to edit the individual page elements. Rather than focusing on the idea of pushing content to the top of a layout, we began talking about how tableless layouts made the css so long that it becomes unmanageable.

A quick look into the Jasongraphix sourcecode will reveal the messy underwear drawer that is my css folder. For the most part though, I have a 2 stylesheets for each theme of my website (if you can call them themes at this point). The 1900s css exists within the "/css/1900" folder. There you will find 1900.css and 1900layout.css. I use the main stylesheet to establish some basic text-formatting, link, and body rules, and to import the layout stylesheet. This keeps me from having to deal with the bastardized browsers who do not support css imports, and coincidentally also tend to eat css layouts like beer nuts. Within my layout stylesheet, I've become accustomed to separating my rules by predefined html entities, IDs, and classes. I try to arrange each item within those categories alphabetically. I apply these same rules to css files I create at work. But I began to wonder if this is really the norm.

Rather than Googling for the most widely accepted methods, I began my quest through the personal site css files of my favorite website designers. I know that personal sites are probably not the best indicator of work practices, but the results were an interesting look into the minds of genius. I'll be posting my finds on Monday, Wednesday, and Friday of next week.

I DESPISE comment spam, referrer spam, and any other type of Spam that doesn't come in a can. ...and I'm not so found of the canned stuff either. I have to admit that MT Blacklist has made my life a little easier. Adding some filters on my .htaccess file has also helped to alleviate my referrer spam issues. After employing these two simple fixes, I'm down to just a few small bites of spam per week. As I started to investigate the referrer spam that was making it in, I noticed something peculiar, a lot of "Account Terminated" pages that look strikingly similar. All that was changing was the way they worded the fact that the account was terminated and the colors on the page.

I did some Googling and there is a lot of buzz about these pages out there. The one sure thing is that no account was terminated. These domains were generated for this very purpose, to be link to our blogs and get linked back to. I'm sure that these nimnods are up to something. It's probably a scam to find blogs for which referrer links are posted. By doing this, they can better focus their spamming techniques. Because "Account Terminated" is so generic a term though, and because the rest of the text on the page is formatted so oddly (sometimes it's not even really english), it's hard to get search results on... Until now. Hopefully a lot of you reading this are coming from search engines wondering the same things I was. If you have any more information regarding this referrer spam, please post comments. Now...for the search engines, here's a listing of domains with their messages. I've also pinged the domains for their IP, and did a whois so I could provide you with a name to blame. Notice any patterns here? Time for some good ole IP blocking.

http://www.mor-lite.org/
This entire detail is now cancellation - Due to miss-proper use of the hosting account
ACCOUNT TERMINATED !
Domain Registered by: Sarahi Calista
IP: 161.58.59.8

http://www.stories-on-cd.org/
The log is now being canceled - Due to miss-proper use of the hosting account
ACCOUNT TERMINATED !
Domain Registered by: Sarahi Calista
IP: 161.58.59.8

http://www.tecrep-inc.org/
The entire legend is now in shutdown - Due to miss-proper use of the hosting account
ACCOUNT TERMINATED !
Domain Registered by: Sarahi Calista
IP: 161.58.59.8

http://www.atlanta2000.org/

This Following report is under TOS closing - Due to miss-proper use of the hosting account

ACCOUNT TERMINATED !

Domain Registered by: Sarahi Calista

IP: 161.58.59.8

http://www.psychexams.org/

The component is currently being closed - Due to miss-proper use of the hosting account

ACCOUNT TERMINATED !

Domain Registered by: Sarahi Calista

IP: 161.58.59.8

http://www.twinky.org/
The index is in closing order - Due to miss-proper use of the hosting account
ACCOUNT TERMINATED !
Domain Registered by: Sarahi Calista
IP: 161.58.59.8

This Post says that fidelityfunding.net had the same type of page up. Fidelityfunding.net though is registered to:
Administrative Contact:
Reece, Thomas (NIC-21871)
contact100@team-support-24x7.net
Thomas Reece
249 W 89 Street
NY, US 10024
Phone: 2128732251

Update (2/10/06) - In the last few weeks I've been getting a lot more spam. Not on my entire site, but on this one post. The content of this spam has been very typical, but the domains have been mostly subdomains of some of the "free website" services. I rarely get people commenting on my site that feel a need to post their links to theirdomain.blogspirit.com or msn or google groups...so I started blocking the entire domains. As I close the comments on this post, I thought I'd share a list of the domains I've blocked since this started happening. -Enjoy

• angelcities.com
• graffiti.net
• webspawner.com
• homepagez.com
• melbart.com
• mediamonitors.org
• freecities.com
• envy.nu
• bizhat.com
• free30.com
• questh.com
• galaxy99.net
• 1website.net
• freespaces.com
• createdollz.com
• blogspirit.com
• cyberturf.com
• zoomshare.com
• freehostltd.com
• 741.com
• myblog.de
• hostdepartment.com
• uk.groups.yahoo.com
• cybcity.com
• tollfreepage.com
• oddworldz.com
• groups.google.com
• ibnsites.com
• megaone.com
• 5u.com
• friendpages.com
• haywired.com
• kogaryu.com
• hostingisus.com
• cafe150.com
• myblog.com
• 100free.com
• bebto.com
• jamieweb.com
• blogs.ihola.net
• spaces.msn.com
• psend.com
• domaindx.com
• speedsurf.to
• webspace-kostenios.com
• xmail.net
• goto-site.net
• 10mbweb.com

You're probably here looking for a Magnetix I-Coaster...
In that case, you'd want to click on the link below.

Or, while you're here, perhaps you'd like to buy your kids a nice
book about website design principles?
Hey, it was worth a try, right?

Thanks,
Jason Beaird
Toy Peddler and Webdesign Author Extraordinaire


Now on to the original blog post...

The most affordable Mac ever.

With a starting price of only $499 this 6.5" x 6.5" x 2" box of G4 mac goodness is a great deal. With the size and power of this little mac, I can see hooking into into the entertainment system as a music/video server, taking it on the go (as it's smaller than some portable hard drives), or just replacing the old PC desktop.

Update: No longer trying to win an iMac though FreeMiniMacs.com...

I've seen the ads of people claiming that you could get a free ipod from freeipods.com for a while and didn't believe it...till people started saying they just got their ipod in the mail. Well, the people that put together freeipods.com have launched FreeMiniMacs.com, and it's just as Legitimate.

If you want to get your own Free Mini Mac (er...iCoaster), all you have to do is go to http://www.FreeMiniMacs.com/?r=13923856, sign up for an "offer", and get 10 people to do the same. Among the "offers" are Blockbuster, Rhapsody, Credit Cards, and all sorts of other services. I personally signed up for the Platinum Discover card since it was completely free and gave me a way to use a credit card at Sams Club (they don't take Visa or Mastercard). A few of the guys at work are doing the same and paid $9.95 to try out a first month of unlimited Blockbuster rentals, and said it was well worth it even if it were not for the free mini mac.

P.S. - The URL above with the ?r=13923656 is my referrer link. As soon as I get the 10 people signed up that I need, I will take it down and post a list of the the referrer links of the 10 people who completed offers on my referral. This is only fair since I can only get one iCoaster,and I'd like to help those that help me.

I know there are a few tools like this out there for both mac and pc that let you do this, but here at work I use a program called Samurize to display system data, email status, and other information. The program itself is all about the information you want to display and not how it looks, but it can be configured to look any way you want. The screenshot on the right is what mine looks like right now. There's a lot of information on this thing, but for now I wanted to point out the little image on the bottom. In the image is a live view of the heart of Pisa, Italy - looking down from the clock tower upon the Arno river which winds through the city. Since I took that screenshot though, that same square is now showing a view of the street outside a window of the Fashion Institute in Milan. The views are actually provided via a plugin for Samurize called FetchImage that randomly grabs an image every so many minutes from a list of URLS in an XML document.

I actually installed the plugin a few weeks ago, but after seeing all the talk out there on BoingBoing and various other weblogs about about finding unsecured axis webcams via google by simply searching for inurl:"ViewerFrame?Mode=", inurl:"view/index.shtml" or inurl:"MultiCameraFrame?Mode=", I thought people would want a good way to display their new found webcams about:

• Building Houses


• Making Glass


• Model Trains


• Computer Labs


• Laundromats


• Suberb Streets


• and Card Tables

Today, my wife Amy turns 23 but that’s not all she has to celebrate. She just took the GRE today (yes, on her birthday - it was the first available date for January) and scored a 770 out of 800 on the math. In order to get into the Chemical Engineering PhD programs at most schools you need a 700 or perhaps a 750 to be considered. She just graduated in December from UF’s ChemE Undergraduate Program and is currently applying to the graduate programs at North Carolina State, University of South Carolina, Rice University, Georgia Tech, and the University of Houston for the Fall of 2005. If anybody reading this works in the graduate admissions office of any of those schools, you should admit her. She’s the smartest person I ever knowed.