I never thought I would be enjoying a cup of Starbucks coffee in a Microsoft branded cup while sitting at Microsoft’s Mountain View compound. Why am I here, you ask? For the first annual west coast jQuery conference!

P.S. I am posting this on my Android phone so please ignore any glitches.

• include multiple methods for contacting me
• incorporate microformats
• use clean, modern code that is flexible enough for quick styling
• use progressive enhancement
• create a strong design and organize intelligently
• share a little something about myself

It took me all day last Saturday to design and code, but I finished in time to enjoy a beer or two and watch a movie. Please take a look and and post your feedback. Be sure to dig under the hood as well if UI design is your sort of thing.

Please view the page at www.erikphipps.com.

My new business card, front.

My new business card, back.

I plan on using the new logo design and colors on my blog some time in the near future after I wrap up a freelance project.

Here is my setup:

Physical PC

• IE8 RC1
• FireFox 3

Physical Mac

• FireFox 3
• FireFox 2 (to run multiple versions of FireFox on OSX)
• Safari 3

IE6 Virtual machine

• IE6 (comes installed on Virtual Machine)
• Google Chrome
• Safari
• Opera
• FireFox 2 (be sure to install with DOM Inspector enabled)
• Flock

IE7 Virtual machine

• IE7 (comes installed on Virtual Machine)

Notes:

Why IE7 virtual machine? IE8 RC1 has both IE7 and IE8 rendering engines but some differences do exist between the way IE7 renders and the way the IE7 engine embedded in IE8 renders. Therefore, the IE7 Virtual Machine is necessitated.

Virtual machine hosts file. For the virtual machines, you’ll need to add any local development sites to the virtual machine’s hosts file.

192.168.1.103 dev.myblog.com
192.168.1.103 dev.favoriteclient.com
192.168.1.103 dev.someothersite.org

The physical machine’s IP can be found by running ipconfig /all at the command prompt.

IE7 server error. I also had to disable the IE7 add-on named Diagnose Connection Problems in order to hit certain sites in my development environment.

Linked Out – A case that threatens the right of Web sites to link freely.

Slate, Via The Consumerist

I started running the causes through my head; position is relative, IE 7, target layer opens below event element…and then it hit me! Simply position the layer above the event triggering element! It worked because everything above the relative container was rendered before it in the source html. It was like manually reversing the z-index with jQuery except, since it was going in reverse, the browser had stacked the items correctly! Luckily the component I was working on had both the space and design to accomodate such a solution.

1. Create raw html code with only the most basic tags and high level block divisions. This step is important to finish first so that anytime after it is done, the markup can be passed on to a developer. Don’t add ANY CSS until you are done!
2. Start applying structural styles first to get the basic layout worked out.
3. Apply any background images on the high level structural elements and/or body.
4. Apply non-color styles such as padding, margins, font-size, to block level elements, then inline elements if necessary.
5. Apply final colors and finish any fine-tuning

Also, don’t forget to test in all supported browsers after each step.
]]> http://www.thetransient.com/build-htmlcss-pages-or-components-from-the-ground-up/221/feed/ 0 http://www.thetransient.com/plastic-food-containers-are-the-socks-of-kitchen-items/216/ http://www.thetransient.com/plastic-food-containers-are-the-socks-of-kitchen-items/216/#comments Tue, 03 Feb 2009 04:54:17 +0000 Erik Phipps http://www.thetransient.com/?p=216 The title of this post says it all, but I’ll explain further. I was doing dishes while Naomi was struggle to find some plastic food containers to put our lunches in. She continued searching, all-the-while complaining that we had too many miss-matched pieces, and that was when it struck me. She makes the same exact complaint when sorting her socks!

I know what you are thinking, that JavaScript sniffers are outdated and go against all that is web standards. I agree. However, as IE6 fades into the past, isn’t it time we started ignoring instead of bending over backwards for its lack of standards support? This is where a JavaScript browser sniffer comes in!

Others have probably used this technique and expanded it to other versions of Internet Explorer as well. For this post, I am just going to discuss the IE6 version since it is very simple to expand it to all other versions of IE.

Drop this javascript snippet in a script tag in the head of your document:

var browserSniffer = {isIE6 : false}

Then, inside an IE conditional comment targeted at IE6, change the value of isIE6 to “true”. Like this:

browserSniffer = {isIE6 : true}

What you end up with is a non-global variable that is always equal to false unless the browser is IE6, then it is true. You can then easily dis-invite IE6 to the web standards party!

if (browserSniffer.isIE6 == true) {
	// fix some bug in IE6
}
else {
	// Do something sweet in other browsers
}

Standalone example – IE6 conditional comment javascript browser sniffer