/mike

The talk around town is that a couple boys, in some podunk town, wrote some Javascript code that has given them more hits in the last couple days then they could have imagined. Not sure it’s all that fancy though, it still uses tables and that just won’t do.

Even with my busy schedule, I took it upon myself to help these fellows out. There’s no reason that we should be using tables for layout anymore. IE6 is a piece of crap. We all know this. Firefox 3 is getting better — or is the best in some regards, depending who you talk to — and Safari/Webkit is pretty kick ass. So why don’t we pander to the better browsers and give the rest whatever they can handle?

Enter FancyZoom, but edgier. Ok, so the tagline/name is pretty lame but whatever, I’m not a copywriter.

What’s the difference?

The biggest difference is that it uses -border-radius and box-shadow, in the browsers that support them. No more transparent PNGs and tables. The code’s slightly leaner with two divs instead of a whole table.

Don’t fret young padawans, the old way is still there for those that want to use it. In fact, the old way is the default until people start getting a little bolder in their effort to move forward. In order to see the new hotness, you’ll need to add edgy:true as an option to the first new FancyZoom call.

For example:
Prototype:
$$("div.photo a").each(function(el) { new FancyZoom(el, {edgy:true}); }) or new FancyZoom('medium_box_link', {width:300, height:200, edgy:true});.

jQuery:
$('div.photo a').fancyZoom({scaleImage:true, closeOnClick:true, edgy:true}); or $('#medium_box_link').fancyZoom({edgy:true});

Caveats

Keep in mind, when using prototype, the edgy option has to be set in the first FancyZoom call, otherwise you’ll get the old, transparent PNG version. Also remember that once edgy is set, it’s set for all FancyZoom calls on that page.

Why? Because the code for the zoomed box is only inserted once into the HTML document. It’s not inserted on the fly or for each instance of the class. This was probably done by design but adding this edgy option might change that. We’ll see.

When using the jQuery version, edgy has to be set in each call.

Check out the example I ripped made for you.

While I was mulling through my feeds tonight I saw a link to Dave Shea’s CSS Sprites2 article on A List Apart. To be honest, I haven’t actually read it — though I will soon, promise — but seeing the examples put a bug in my brain. Maybe those effects could be done with CSS3 transitions/animations.

So, I threw together a quick little navigation list and went to work putting some basic styles on it — nothing nearly as fancy as Dave did. What I wanted to do is use -webkit-gradient for a background color, then use -webkit-transition to fade or slide in a different color or background.

Unfortunately this version of the test failed. It would seem that there is no way to transition a -webkit-gradient using -webkit-transition. If I’m wrong, please let me know.

Here’s what I did find out:

• background: -webkit-gradient(...); won’t transition to another background: -webkit-gradient(...); (using -webkit-transition: background 0.3s linear;)
• You can transition an element from -webkit-gradient to a background-color (using -webkit-transition: background-color 0.3s linear;)
• You cannot transition an element from background-color to background: -webkit-gradient; (using either -webkit-transition: background 0.3s linear; or -webkit-transition: background-color 0.3s linear;)
• Transitioning multiple properties — at least in this case — background-color and color the long hand of -webkit-transition needs to be used (-webkit-transition-property: background-color, color; -webkit-transition-duration: 0.3s, 0.3s; -webkit-transition-timing-function: linear, linear;)

Check it out for yourself using this code:

<style type="text/css" media="screen">
ul#nav { float: left; list-style: none outside; width: 100%; }
ul#nav li { border-right: 1px solid; float: left; width: 24.75%; }
ul#nav li.last { border: none; }
ul#nav li a {
	/* background-color: #08c; */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(20,50,100,0.6)), to(rgba(40,70,150,0.6)), color-stop(0.5,rgba(30,60,125,0.6)));
	color: #000;
	display: block;
	line-height: 2;
	text-align: center;
	width: 100%;
}
ul#nav li a:hover {
	background-color: #c80;
	/* background: -webkit-gradient(linear, left top, left bottom, from(rgba(40,70,150,1)), to(rgba(20,50,100,1)), color-stop(0.5,rgba(30,60,125,1))); */
	color: #fff;
	-webkit-transition-property: background-color, color;
	-webkit-transition-duration: 0.7s, 0.3s;
	-webkit-transition-timing-function: linear;
}
</style>
<ul id="nav">
	<li id="home"><a href="#">Home</a></li>
	<li id="mac"><a href="#">Mac</a></li>
	<li id="iphone"><a href="#">iPhone</a></li>
	<li id="itunes" class="last"><a href="#">iTunes</a></li>
</ul>

What it looks like (best viewed in the latest version of Webkit or Safari):

• Home
• Projects
• Blog
• Misc

Today I wanted to spruce up a site design with a nicer typeface. I also wanted to stay away from image replacement techniques and sIFR, which makes the job that much harder. Obviously the major problem is what typeface can I use that will be constant on both Windows and Mac — the majority audience is on Windows so I can’t even make a case for degradation or alternates. The solution, Myriad Pro.

Myriad Pro, created and licensed by Adobe, has been on default Mac OS installs for years. After some searching around the internets — read: Wikipedia — I found that Myriad Pro has been bundled with Adobe Reader since version 7. Perfect right? No. Not perfect at all.

After installing Adobe Reader on my vanilla Windows Vista test system, I was still unable to view Myriad Pro on a web page by using the following CSS declaration:

#container h2 { font-family: "Myriad", "Myriad Pro", "MyriadPro", "MyriadPro-Regular", sans-serif; }

Adding in other variations of the name didn’t help. Both Firefox and Internet Explorer would only show the default sans-serif typeface for the headline. I searched for a solution on Google. I even searched for a solution on Live Search. I pinged a few friends. Nobody seemed to have an answer, it should just work.

So I twittered this. Unfortunately there were no new ideas. Needless to say, this frustrated and confused me even more.

I found it weird that Adobe put the Myriad typeface into a different location than the rest of the system fonts but didn’t know how to deduce if that was the problem. Adobe installs Myriad Pro into: Z:\Library\Fonts. As I later found out, this is the problem.

It turns out that software developers can install fonts almost wherever they want, to allow the font to be used by the software being installed. The problem is, the rest of the system cannot access that font, unless it’s put into C:\Windows\Fonts. GAAAHH!!

Seriously Adobe?! Just make the damn font available to the rest of the system. What have you got to lose? Oh darn, people will have more choices for web typography? Heavens to merkatroids, that would be catastrophic wouldn’t it.

Adobe, you suck. Still.

After forcing myself, and being encouraged by others, I’m proud to report that I’ve successfully made it to the gym 8 out of 11 times in the last two weeks. I’d say this is a pretty good start on this portion of my yo-yo trip to a healthier lifestyle.

In case you’re curious, here’s a short list of positive changes/steps I’ve taken so far:

• Working out 6 times/week (3 days of weights, 3 days of cardio)
• Eating smaller meals but eating more often (shooting for 6 small meals a day)
• Taking probiotics to aid digestion and help clean out the gunk
• Eating more vegetables, fish, and chicken (I even bought a veggie steamer!)
• Doing my best to get to bed before midnight

I still haven’t taken any metrics so I can’t tell how much physical progress I’ve made so far but that’s the next step. Mentally I’m feeling much better. I have more energy and I only have muscle soreness about 4 days a week. :)

It seems that I’ve written a decent amount about getting fit or getting healthy over the past couple years. Sometimes I stick with it and give regular updates, other times not so much. Whether that’s procrastination or a problem with motivation, I’m not sure.

As Van Halen once put it so elegantly, here I go again. With a little added pressure from some friends at work and some encouragement from some friends not at work, I’m hoping that it’s going to stick this time around.

And just how am I going to make some healthy changes in my life? Here’s a list. Feel free to call me out if I’m straying from this list around you.

• Eating more fruits and vegetables (with help from spud.com)
• Taking it easy on the drinking (not that this is a problem most of the time)
• Taking antioxidants and/or daily vitamins
• Drinking more water
• Lifting weights 3 times a week
• Doing cardio 3 times a week
• Eating less red meat and more fish
• Eating smaller meals and doing so more often

I’m really looking forward to being more fit, having more energy, and having a better overall outlook on life. Updates about gym routines, exercises, progress, and goals will be coming in the future.