It know that this is just sooo 3 years ago, but when I redesigned Jasongraphix, style switching was one of my highest priorities. I’ve been in love with the idea since I was first offered presentation options by “techno-facist” Eric Meyer on his personal site, meyerweb.com.

Those days were the start of revolutionary new techniques, and although CSS Zen Garden level style switching is less common these days, influential folks like Douglas Bowman, and Mike Davidson are definitely keeping the idea alive. Don’t get me wrong, a lot of people effectively use style switching to accomplish simple usability tasks like changing font size and font family, but full design swapping is pretty uncommon.

If you’ve been to this site before, you’ll notice a new little drop-down widget in the sidebar on the homepage. I plan to add more style options as time goes by, but if you have cookies enabled, you might want to try going bucknaked: it’s the stripped down, fluid flavor of this layout. I’ve also added an option for stlyeless as well, which basically does the same thing as the zap stylesheets bookmarklet - but sets a cookie to maintain the sylessness. All this happiness is brought to you by php. Knowing that I wanted to implement style switching, I created an include that contains all of the “linkrel” data for the site. When you select a style from the menu, it sends you to a php page that sets a cookie called stylename. Once you have this cookie, there is a switch statement on the “linkrel” file that changes which stylesheet links that get posted based on your stylename cookie. It ends up looking like this:

<?php 

    switch ($stylename) {

case "1900":

case "":?>

<link rel="stylesheet" type="text/css" href="http://www.jasongraphix.com/css/1900/1900.css" media="all" title="1900" />

<link rel="alternate stylesheet" type="text/css" href="http://www.jasongraphix.com/css/bucknaked/bucknaked.css" media="all" title="bucknaked"/>

<link rel="stylesheet" type="text/css" href="http://www.jasongraphix.com/css/sIFR.css" media="screen" />

<link rel="stylesheet" type="text/css" href="http://www.jasongraphix.com/css/sIFRprint.css" media="print" />

<script src="http://www.jasongraphix.com/includes/sIFR/sifr.js" type="text/javascript"></script>

<?php break;

case "bucknaked":?>

<link rel="stylesheet" type="text/css" href="http://www.jasongraphix.com/css/bucknaked/bucknaked.css" media="all" title="bucknaked"/>

<link rel="alternate stylesheet" type="text/css" href="http://www.jasongraphix.com/css/1900/1900.css" media="all" title="1900" />

<?php break; 

case "styleless":

break; }?>

See, that wasn’t so bad. I do have a headache right now, but really, it wasn’t that difficult.

I feel like I'm much to old to be raving about a random toy I received for Christmas, but I'm really excited about the Blade Runner remote control helicopter that my parents got me. I remember last year around Christmas time, we got a lot of spam here at work advertising The Sky Pioneer RC helicopter, but I believe my mom bought this one at QVC.

My brother got the green 49 MHz model, and mine was the blue 27 MHz one. I say was because I cut the blue and white plastic body off of it this morning exposing the circuitry, battery, gears and motors. This also served to lighten it up a bit and make it more maneuverable. It's so much fun to fly it around the office. Sadly, my helicopter is temporarily grounded as I just broke one of it's rotors on a bad landing. I'm pretty confident that I'll be able to fix it with a little scotch tape. If not...it seems that someone on ebay is already offering Replacement Rotors for a better "buy it now" price than the manufacturer's. Although I haven't posted to it yet, I can see myself getting involved with the Bladerunner RCGroups Discussion Forum on the little gadgets. It seems there are some decent modification ideas for the rear rotor to improve the forward-reverse motion. This is definitely a toy for me.

Over the last few months I’ve been spending most of my work time looking for ways to decrease the customization time and improve the efficiency/usability of our custom ecommerce app, “Gorilla Cart”.

The Programmers just finished adding some new functions and made it more search engine friendly. Part of that upgrade involved creating a sitemap page which dynamically writes a hierarchical set of links to all of the categories and products in the client’s database. This allowed search engines to quickly and efficiently spider the entire site, but really looked pretty crappy.

As you can see from the link above, all it is doing is creating a set of nested divs with an alternating background color and some left-padding. It took a bit of work, but I managed to convince Russ to change the way the sitemap is compiled to use nested lists rather than nested divs. This basically gave me a blank canvas to work with:

All I had to do with the html was add an id to the first <ul> tag. Every nested <ul> could then be styled based on how many <ul>s deep it was. Here’s the html for my example list:

<ul id="nestedlist">

   <li><a href="#">Gadgets and Gizmos</a>

      <ul>

         <li><a href="#">Gadgets</a>

            <ul>

               <li><a href="#">Inspector Gadget </a></li>

               <li><a href="#">Gadget Hackwrench</a></li>

               <li><a href="#">Gadget Galaxy</a></li>

               <li><a href="#">Daily Gadget </a></li>

               <li><a href="#">Cheese Gadgets</a>

                  <ul>

                     <li><a href="#">Bleu</a></li>

                     <li><a href="#">Swiss</a></li>

                     <li><a href="#">Havardi</a></li>

                  </ul>

               </li>

            </ul>

         </li>

         <li><a href="#">Gizmos</a>

            <ul>

               <li><a href="#">Gizmo the Mogwai</a></li>

               <li><a href="#">The Transform Gizmo</a></li>

               <li><a href="#">Gizmondo</a></li>

            </ul>

         </li>

      </ul>

   </li>

</ul>

The first step was to define some universal rules for all <UL>s inside <UL id=”nestedlist”>:

#nestedlist, #nestedlist ul{

    font-family: Verdana, Arial, Helvetica, sans-serif;

    list-style-type: none;

    margin-left:0;

    padding-left:30px;

    text-indent: -4px;}

All I really did there was set my font, clear the bullets, and define how far I wanted each list to indent. The reason for the negative text-indent was to remove some of the space between the bullet images (to be defined later) in Firefox. IE actually had less space between its bullets and text than I really wanted, but luckilly, IE interprets the text-indent to be the space outside the bullet.

The next step was to define the bullet image and font-size of each “layer” of nested lists inside <UL id=”nestedlist”>:

/* UL Layer 1 Rules */
#nestedlist {
    list-style-image:url(/images/nested1.gif);

    font-size: 20px;

    font-weight:bold;}





/* UL Layer 2 Rules */

#nestedlist ul{

    list-style-image:url(/images/nested2.gif);

    font-size: 18px;

    font-weight: normal;

    margin-top: 3px;}





/* UL Layer 3 Rules */

#nestedlist ul ul{

    list-style-image:url(/images/nested3.gif);

    font-size: 16px;}





/* UL 4 Rules */

#nestedlist ul ul ul{

    list-style-image:url(/images/nested4.gif);

    font-size: 14px;}

What I’m defining there is the style of the ul with the id of nestedlist. Then I’m styling any ul within the ul with the id of nestedlist, then any uls within the ul within the ul…well you get the picture. And the result:

Ames and I are hitting the road to Vero for our second ever Christms as a married couple. Having both of our parents in the same town can be very convenient at times, but on holidays it requires precision planning to insure neither family feels Scrooged. Hopefully all will go well…if not, we’ll just threaten to go home and play with our new iMac. :)

There are few people who can inspire as much passionate commenting as Greg Storey. His latest post, Bronze is no exception. Today’s subject is the death of personal web design, or more accurately the lack of originality in personal web design. If you haven’t clicked the link and read the article yet, here’s a teaser:

In many ways I feel like designers, myself included, have dropped the proverbial sketch book and traded it in for Microsoft Word and CSS. We have stopped considering the form and function of a website in leu of focusing solely on content and comments. it used to be that a personal site, or non-commercial, was more free form in expression.

Although I have some issues with a few of Greg’s points, I sincerely agree with the article as a whole. I can see how it could be seen as flame bait for standards nazis, but perhaps the standards crowd has had too much influence on the indie web design scene. Perhaps this is also why Cameron Moll’s Wicked Worn Series has received so much love this year. I take the article for what it is, and as what Jason Santa Maria calls it, a call to arms.

As designers, we need to start looking for new inspiration:

• If you’re into the worn look now, try adapting elements from Flatstock’s gallery of band poster art.
• If you like the simplified modern style, maybe you should check out West Elm, Ikea and read about how the Bauhaus School moved architectural thought from modernism to post-modernism.

I’ll be the first to admit that my main source of design inspiration for website design is other websites, but if that is the only place I am looking, things tend to get bland. I think that is the point Greg is making. Lets get back to the basics of color & graphic design theory, think outside of the box model, and look to alternative sources of design inspiration for 2005.

Note: I slipped a link in there to my article that was posted today at sitepoint: Color for Coders - Color and Design for the Non-Designer. Please take a look and post some feedback. I tried to make it simple enough for “the programmer guys” to understand, but I also tried to pack some real color and design theory in there.

That was the first line of an email we received titled, “Your Apple Store Order”. Yes, we’ve shot the moon, gone for broke, and thrown caution to the wind. In a more literal sense, we just purchased a new 20-inch G5 iMac.

OK, so we didn’t follow our plan at all, but our new iMac order is in processing and is due to be shipped on or before December 21st, 2004. We really did intend to wait on making this purchase, but after selling my old laptop and receiving (& returning) an Averatec laptop from BestBuy.com with a bad pixel in the middle of the screen, we were ready to stop playing around and get what we really wanted to begin with.

The specs for our new dream-machine are:

• 512MB DDR400 SDRAM - 1 DIMM (We plan to upgrade this to 1GB with another 512MB DIMM from crucial when we can afford it.)
• 160GB Serial ATA drive
• Standard Keyboard and Mouse (We opted not to get the bluetooth keyboard and mouse after hearing a few bad reviews including this one from Andy Budd.)
• <drool>20-inch widescreen LCD</drool>
• 1.8GHz PowerPC G5 Processor
• SuperDrive (DVD-R/CD-RW)
• NVIDIA GeForce FX 5200 Ultra w/64MB video memory

The following is an email from the VP of Accelerated Data Works, the company I work for. This is the kind of company policy that makes me wish I could stay here forever:

Kent Tambling, purveyor of truth and protector of the company gruntle.

OK, this trend of disgruntled former employees, band members or whatever showing up and rudely machine gunning ex-associates is out of control.

To insure the safety of our company, the following is to be considered company policy:

If you feel you are about to become disgruntled, please talk to me immediately. I will help keep your gruntle at an acceptable level. If you feel your gruntle is becoming lost, I'll help find it. If necessary, I will touch your gruntle and help you grow it back. Maybe share some of my gruntle with you. We should all share our gruntle. Gruntle is a special thing we often fail to cherish as much as we should. If some morning you are thinking, "I'm becoming disgruntled", you should stop, drop and roll in some regruntling fluid. I have plenty at home, safe from insurgents, in my garage. UNDER NO CIRCUMSTANCES should you come to the office, or my home, while you are experiencing a gruntle deficit. STAY WHERE YOU ARE, we will come to you. Gruntle is a terrible thing to waste. Stay in school, drink your gruntle. Just say no to disgruntling. From here on out, think of me as the gruntle candy-man. I'm all about your gruntle. Make gruntle, not war. And in this holiday season, be thankful for family, and plentiful gruntle for all.

Its because we care.

While perusing through the countless design/development blogs out there I came across Pointless Existence, and a very easy to implement method for reducing bandwidth usage for sites with Apache/PHP servers.

Basically, the following code is placed at the top of your PHP pages:

<?php ob_start("ob_gzhandler"); ?>

When the page is requested, the server will remove whitespace and compress the document to the tune of 25-75% depending on the density of the code. Inspired by this post, I did some Googling and found “The Definitive Post on Gzipping your CSS” at Fifty Four Eleven from June 13th. How did I not know about this before? In the spirit of the ongoing inside joke in our office - “Hello, and Welcome to LAST WEEK!”

She graduates on Friday the 17th, but today is quite possibly the most important day in my wife’s undergraduate ChemE degree. She and her group are turning in their report and giving their final presentation for Senior Design. The past few weeks have been non-stop for us (more so for her) with late nights and early mornings. She spent last night assembling most of her groups work into a final report and powerpoint presentation. At about 1am she decided to get to get some sleep and wake up at 6 to finalize everything and take the textbook-thick report in to work early to get it bound.

That probably would have worked out great but somehow, something didn’t work out between when I set the alarm last night and when it was supposed to go off. I’m usually the first one up if the alarm doesn’t go off, but this morning we were both in bed till Ames woke up at 7:45. She was supposed to be at work by 8…so as you can probably guess, it wasn’t the best of mornings. From what I’ve seen of the report and presentation so far, I know it’s going to go fine, but I still feel bad about whatever happened to the alarm.

I’ve posted the first of a series of “Turn of the Century” wallpapers in the artwork section of my site. I’ll try to produce one per week and all will be based on the postcards and turn of the century nostalgia that inspired this redesign. My motivation comes partly from my desire to share my inspiration, but also because I am always looking for new wallpapers.

Ever since I installed the BGChanger that Russ wrote, I’ve been on a constant quest for more images to put in my backgrounds folder. Some of my favorite wallpaper sources include dlanham.com, veer.com, vladstudio.com, shiftedreality.com, savinoff.com, pushby.com, goodbrush.com, and bearskinrug.co.uk.

Know of any others that I should include in my list?

As I reported yesterday, Amy and I are selling our laptop on ebay in order to pay for a smaller, more portable one. It doesn’t have any bids yet, but I’ve been getting seller questions that feel a lot like email spam:

Q: Hello,I want to get your Laptop.I want to get it for my Son who just got a job in an InfoTech firm.I got 1 for him but got Broken.since yours is kindda cheap and also like the same specification of the one that got broken.So I need to get the laptop before he resumes work on thursday.please i’ll want immediate transaction of this Laptop computer,can i go ahead with buy it now? I’ll make payment by Western Union Bidpay cause currently i dont run a Paypal #.Pls kindly send your Address so i can forward the money order to you immediately,and i will want the package shipped as soon as you confirm your money from Western Union Bidpay cause i need to have the item fisrt thing thursday morning,Pls i really need this urgently.I Have a fedex # for a pick-up or if you can overnight it to me by any means you can with your courier, i will pay you your total due,just give me the shipping cost with the price of the item ,i’ll make all the due payment ASAP I get a go ahead from u.Portland,IN 47371
A: I understand your situation is urgent, but I did not place a “buy now” option on this auction. There are two reasons why I cannot fullfill your request. One, I would expect to get more than the starting bid for this laptop as it is worth much more. And Two, it is unfair to others who are willing to bid - this IS ebay. Also, I will only accept paypal.

Q: hello, im very interested in your laptop. i think this is perfect as a gift to my stepson in philippines whose birthday will be on friday next week. anyway, can you be able to ship to philippines? im willing to end the deal as soon as possible and will cover all the shipping charges. pls reply asap.. thanks
A: I am NOT willing to end the auction prematurely, but I will consider shipping outside the US to the winning bidder if all shipping charges are paid in advance. Shipping prices outside the US will be based on whatever it costs to ship from my local UPS Store. PLEASE do not bid on this item if you do not agree to these terms as I do not want to get stuck with the ebay charges for a winner who will not pay.

Q: DEAR SELLER,I HAVE A STORE IN UNITED STATES AND AFRICA WHERE I SELL LAPTOPS AND ELECTRONICS,BUT THE DEMAND FOR THIS ITEM IN MY STORE IN AFRICA IS HIGH.SINCE YOU DO NOT SHIP TO AFRICA,I INTEND PAYING YOU VIA WESTERN UNION AUCTION PAYMENT(BIDPAY).JUST TELL ME THE AMOUNT AS A MATTER OF FACT,I SHALL BE RESPONSIBLE FOR THE SHIPPMENT OF THIS ITEM FROM YOUR LOCATION DOWN TO MY STORE IN AFRICA,THIS IS RISK FREE,DOESNT TAKE MUCH TIME.THIS IS HOW BIDPAY WORKS,THEY WILL SEND YOU AN EMAIL AS SOON AS I MAKE PAYMENT SAYING ORDER APPROVED ,AND THEY WILL SEND YOU ANOTHER EMAIL AFTER 24 HOURS SAYING ORDER APPROVED,THEN A MONEY ORDER WILL BE SENT TO YOUR NAME AND ADDRESS 7-10 BUSINESS DAYS AFTER PAYMENT GETS APPROVED.SINCE THIS ITEM IS NEEDED WITH URGENCY,I WOULD WANT YOU TO PROMISE ME THAT ONCE YOU RECIEVE THE CONFIRMA TION AND APPROVAL MAIL FROM WESTERN UNION,YOU WOULD RELEASE THIS ITEM FOR SHIPPMENT TO AFRICA.I AM READY TO OFFER YOU ANY AMOUNT AS IT IS URGENT
A: First, read the other questions that I have answered. Second, PLEASE do not type in all caps. I will only accept paypal payment. I will not end the auction early. If you want this item shipped outside the US, I will consider it if it is possible through UPS and the shipping is prepaid via paypal. Thank You.

Maybe I’m being a bit pensive, but I don’t believe a single one of these half-baked requests. Are these sleazy ebay scum who are trying to get my laptop for a low price to turn around and re-sell it? Why do 2 of them want to use “Western Union Bidpay”? Why do they ALL need this item URGENTLY? It’s a laptop for crying out loud, and the auction ends in less than a week. If you need it urgently, then DON’T BUY IT ONLINE! Sheeesh. The only other possibility I can think of is that they’re email phishing. That seems like a lot of work to get an email though. Any ideas?