Rethinking a Table with Media Queries

June 30, 2010

Filed under: (x)HTML, CSS, Web Development — Tags: , , — Tim @ 10:58 pm

Attending An Event Apart Boston and going through the W3C’s Mobile Web Best Practices course has me looking more closely at how I mark up data.

The main cord that was struck, most directly in Luke Wroblewski’s Mobile First! talk, but echoed by most every speaker in Boston, is to design from the mobile version of your site first. This theme occurs in the Mobile Web course as well.
(more…)

Fisheye Effect via CSS

June 15, 2010

Filed under: CSS — Tags: , , — Tim @ 9:38 pm

On the CSS-d mailing list Gabriele posted a demo titled Pure CSS fisheye menu with icons. It’s a nifty little demo replicating the zooming dock feature you’ll find on Mac and Stardock’s Dock.

I decided to take it one step beyond and utilize CSS 3’s transform properties, resulting in my own Fisheye demo.

I cut out much of Gabriele’s code that handled the zooming and replaced it with Folgers Crystals transition and transform. (Although I kept pretty much everything else she built, including her icons. Thank you Gabriele for the inspiration.)

Specifically, on the navigation anchors we have transition: all .1s ease-in-out. In a nutshell, this says, “All transitions should take .1 seconds to complete and they should do it smoothly.” We also have transform-origin: 50% 0 which moves the center of action to the center top of the anchor box.

It isn’t until we get to the hover/active/focus states that things happen. Here we have transform: scale(1.5), which you’ve no doubt already concluded causes the element to grow by a factor of 1.5. An important thing to note about this, the transform is applied to the anchor element and therefore affect everything inside that anchor, be it a background image, text or foreground image.

Of course it isn’t quite that simple. Because this part of CSS 3 is under development, we need to utilize various vender prefixes. So to see it actually work you’ll need to add -moz-, -webkit- and -o- to the front of all the transform properties. Not surprising there is not support for Internet Explorer, but that’s OK, it doesn’t matter. Anyone using IE won’t know what they are missing. Go see for yourself.

And look for the Easter Egg… .

Image Searching

May 7, 2008

Filed under: Computer, Photography, Web Development — Tim @ 8:05 pm

This shouldn’t come as a surprise: using Yahoo! Image Search, photos from Flickr abound; using Google Image Search, not so much.

For example, a simple search for “Tilley hats” yields two Flickr photos on page 1 in Yahoo and more on every subsequent results page. Missing from the results (at least the first 5 pages) are any images from Picasa Web Albums.

The same search on Google doesn’t yeild a Flickr photo until page 3. The surprising thing is that the first Flickr photo is only two spots behind the first Picasa photo.

(Perhaps the most surprising result of all is the photo in the second row on the first page of Yahoo!s results.)

(Search results are based on a search conducted May 7, 2008.)

Social Networks

October 13, 2007

Filed under: Computer, General, Web Development — Tim @ 10:48 am

I’ve got accounts on various social networks now. Honestly, I’m not sure what or how to use them, and some, like Twitter, I don’t see a lot of value in.

I’ve grabbed accounts though partly to claim my online ID, party to see what all the fuss is about. In fact, I set up a Twitter account just so I can SMS to My Mile Marker.

Here’s were I’m located:

I’ll probably try to set something up in the sidebar. I’d really like to integrate everything together. Facebook, for example, lists the other networks; I’ve got a LibraryThing plug in on this site already, and I’ll probably do the same with Twitter.

Holy Spam!

December 14, 2006

Filed under: General, Web Development — Tim @ 7:42 am

There is a new Spam attack underway and they have managed to get around the usual filters. I’ve had a few, not tons, in my inbox and last week a dozen or so comment spam were held in moderation.

And now Askimet has just proven its mettle — it has stopped 5,000 6,000 comment spam this week. For the record, since I installed the latest version of WordPress several months ago I have had a total of only about 5,000 spam comments. It just doubled in a couple of days.

Way to go Askimet!

Resolution

September 15, 2006

Filed under: Computer, Web Development — Tim @ 8:52 pm

With my new, expanded resolution and reviewing a number of posts* on designing for various resolutions, I decided to chech the stats for this site. According to Analytics, for 2006 only 3.6% of visitors to this site have had a resolution of less than 1024 X 768. That resolution accounts for 49.57%, meaning that 46.83% of visitor have even more screen realestate.

* Sources:

The New Job

September 14, 2006

Filed under: Life and Things, Web Development — Tim @ 11:21 am

Well, I’ve been a full-fledge facaulty member for some 3 weeks now. I’m starting to settle into the new diggs and am beginning to get comfortable with what I’m teaching. (more…)

The Next Adventure

August 16, 2006

Filed under: Life and Things, Web Development — Tim @ 6:01 pm

Today I handed in my resignation at Thomson Gale in order to join the faculty at Washtenaw Community College.

After 9 1/2 years at Gale, it was somewhat difficult to take the leap; but, on the other hand, it was also time for a change. And the opportunity at WCC was too good to pass up.

I am joining the Internet Professionals department and will be teaching XHTML, CSS and all the standards goodness that goes along with it. (Which means I really need to get this site in shape.) I’m really looking forward to getting back in the classroom and helping spread the standards movement to a new generation of coders.

So far, so good

July 28, 2006

Filed under: Web Development — Tim @ 7:25 am

WordPress 2.0, or rather Askimet, is doing it’s job. Since the upgrade, no spam comments have made it to the site and no false-positives caught.

Need to Upgrade Site

June 6, 2006

Filed under: Web Development — Tim @ 5:25 pm

Arg. I really need to get to upgrading this place. I’m getting tons of comment Spam; this is a poorly hacked site setup; and, I just discovered the previous/next functions are working (i.e.: when looking at the archives, only one page of results shows with now options for more entries). I’m not sure when that disappeared.

If only I could spare a few hours. Damn work always getting in the way.

Older Posts »
flickr » DSC_0016