Thursday, May 31, 2012

Animating a List with CSS3 Transitions

As I've been exploring all the cool features of CSS3, I've been trying to keep in mind cool ways to put them to use. CSS3 Transitions are so sweet and so easy that they can really make for much richer and interactive web sites with hardly any effort. And when a browser doesn't support it, it's not that big of a deal -- the elements still end up getting the correct properties... the user just doesn't see the animation.

I wanted to see how CSS3 transitions could be used for animating a sortable list. In this case, I've got a leaderboard for a video game competition. Let's see who's winning at the moment...

Wednesday, May 30, 2012

ColdSpring - Including External Files

ColdSpring is basically the boss of Dependency Injection in the ColdFusion world. As faithful Divide & Conquer programmers, it's not unusual to want to split up our monolithic ColdSpring XML file into smaller files.

I, for one, can never seem to remember how to include those smaller files. That's because in the ColdSpring world, it's not called including – it's called importing. And here's how it's done:

And now that I've written a blog post about it, maybe I'll actually remember it – without having to look it up!

Thursday, May 17, 2012

CSS3 Demo - 3D Transforms

CSS3 introduces some awesome 3D transforms that let you position, rotate, and scale your elements in 3D space. It's still in working draft status, and today it's only supported in Firefox and WebKit. IE has plans to support it in version 10.

Now, I'm a bit of a hobbyist when it comes to Flash and After Effects, and I've prototyped a few incomplete 3D games using DirectX. So I felt right at home with the CSS3 transform property. If you haven't worked with 3D transforms before, don't worry. I'll cover the details of it in a later post. For now, check out the demo.

Monday, May 14, 2012

Dead Drop Variables

I've always found the world of espionage intriguing. I'd never actually want to be a spy, mind you. In fact, I'm really bad at lying, and I can't keep a secret. And I'm pretty sure those are prerequisites to get into spy school.

One of the simplest techniques that spies use to communicate intelligence is called a dead drop. In a dead drop, one spy leaves some item in an agreed-upon location, generally somewhere out in public where anyone could find it, but nobody would likely notice it.

Back to the Programming World

In dynamic languages with a global scope, such as JavaScript and ColdFusion, I've noticed a pattern that looks just like those old spy dead drops.

Monday, May 7, 2012

Essential Guide to an Awesome 90's Website!

10. Warn your visitors about the best resolution

Before your visitors enter your cool new website, you'd better be sure they know what resolution works best for your web pages!  Most of them will gladly right-click on their desktop, go to properties, change the resolution, hit OK, close the properties dialog, and switch back to the web browser in order to get the best viewing experience.  After all, it's not very likely that they'd already have their display settings configured to the optimal resolution.

9. Use nothing but Times New Roman font

When visitors come to your website, they want originality. Since there aren't many sites out there using Times New Roman font, you should use that. They'll think, "wow, that's a cool site with a hip font."

8. Use HTML tables

If you have stuff that you can't align any other way, the HTML tables feature is just what you need! Don't change any of the cellspacing or cellpadding values... they're perfect just as they are!

7. Use animated gifs

The way to really one-up printed media is to create what we call "animated gifs".  These are images that actually animate before your very eyes!  Visitors will be so mesmerized by them that they'll surely pay more attention to the content of your cool web page!

6. Use horizontal rule tags everywhere

The visitors of your website have to know when one section of content is different from another section, or they might get confused.  Sometimes paragraph breaks (preferably done using two <br> tags) aren't enough.  Horizontal rules to the rescue!

5. Use the marquee tag

Sometimes the best way to communicate a message is to have it on the screen only part of the time.  For this you should use the marquee tag, which moves the text across the screen horizontally.  It takes longer for your visitors to read the message when it's scrolling, and that means they'll be on your website longer!

4. Limit your fonts to 16 colors

People like to see colors, but their graphics card might only be able to handle the basic 16 EGA colors.  Use the font tag's color attribute to set the color.

And for the images on your site, you can achieve high image quality by ensuring that your images are only 16 colors but use dithering. People will be very impressed, and might even think there are actually more than 16 colors in the image!

3. Use a page hit counter

Put a counter on your page so that people can see how popular your web page is! Try to find one that looks like an odometer, and people will think, "wow, that's clever!" If your web page isn't actually that popular, open it up in a browser and hit F5 until the counter shows a high enough number.

2. Use an "Under Construction" image

You want your visitors coming back frequently, and the best way to get them to do that is by placing a cute image of a construction zone somewhere in your web page.  It can have orange cones, hazard tape, or a stick figure with a hard hat.  You get bonus points if it's an animated gif with dithering!

1. Take credit - be a Webmaster!

After all of your hard work making the perfect web page, you should take credit for your hard work by putting your name on it, and calling yourself a Webmaster!  After all, you are master of the web!

Wednesday, May 2, 2012

Slim Up Your JavaScript with CSS3 - Animation

When I was a kid, every Saturday I'd get my bowl of sweet cereal and plop down in front of the TV, ready for an action packed morning of cartoons! While I won't be using CSS to animate any Saturday morning entertainment, I was delighted to discover some sweetness built into the CSS3 working draft that'll bring those static elements to life!

Last time, I explored some basic animations called Transitions, which we used to get a button to slowly glow. But this time, I'm looking into the more advanced animation capabilities of CSS3, which gives a lot more control!

Profile Picture
Dave Leeds
My Hobbies:
  • Programming
  • Cartooning
  • Music Writing
Full Profile