Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

Visits in the Night

January 8th, 2012  · stk

A ClustrMap|NASA Mashup

Twas the night before Christmas and all through the house, not a creature was stirring - except Scott, who was playing with PhotoShop! Sorry, but "Visits in the Night" isn't about Santa Claus coming down our chimney. It's about creating a "night-time" display using a satellite image from NASA, merged with our worldwide website visitors tracked on ClustrMaps.

Ever since November 2005, we've been tracking the locations of many of our randsco.com visitors by using an application developed by Marc Eisenstadt, called "ClustrMaps". (Hover the globe in "Site Tools" section of the sidebar, for the regular map thumbnail - like the one that also shows here). Since that time, we've logged over 2 million visitors!

When you click the globe in the sidebar (or the thumbnail above) you'll be directed to the ClustrMap website, which shows a much larger visitor map for our website (clicking on country regions shows even greater detail). Since inception, Marc and the ClustrMap team have been continually adding features to their service and they recently won "Best Free Web Tool" in the 2011 Edublog Awards.

Not long ago, when I clicked on the globe and went to the larger, world-wide map, I noticed that the dots showed first and that it took a few seconds for the underlying "map" to reveal itself. I thought, "The dots by themselves, make an interesting display." They reminded me of a NASA image I once saw, showing urban lights across the world at night. (The image below. Click it for an even larger version).

NASA Composite Satellite Image of World Lights at Night

Earth at Night: Lights from urbanized areas show up clearly on this NASA image (a composite of hundreds of images taken by orbiting DMSP satellites).

Our ClustrMap at Night

(Permalink)
Views: 31440 views
2 Comments · GuestBook
default pin-it button
Updated: 8-Jan-2012
Web View Count: 31440 viewsLast Web Update: 8-Jan-2012

eBay ebay Pure-CSS Photo Gallery

August 6th, 2010  · stk

What's more fun for a developer than to show up a huge online company like eBay? How about getting PAID to do it! Here's the write-up from my one, fun summertime web project - a pure CSS eBay photo gallery. (Oh and just for grins, it's displayed in another "Arti-zine" web design). I miss having time to write more blog articles!!

This summer, I have concentrated on work around the house and property (living the real life, as opposed to a virtual life). It keeps my wife happy(er), but it means a lot fewer web projects and contributions to this website.

One of the web projects that I did take on, however, was a fun one. A British web developer and programmer, had a client that wanted a photo gallery "like the eBay photo gallery" for his online auction site. The rub? They wanted a pure-CSS version.

Because it's fun to show a well-known online powerhouse how the web should work - and because there was development funding - I dived into the project enthusiastically. (Ahem - only after my daily, real life chores were complete).

The result - A pure CSS photo gallery that looks identical to the eBay gallery and which has significant improvements:

  • It's completely accessible,
  • doesn't rely on JavaScript,
  • is cross-browser compatible and
  • contains error-free, web-standard XHTML and CSS code.

In short - it rocks!

eBay Pure-CSS Photo Gallery Demo

(Permalink)
Views: 19770 views
5 Comments · GuestBook
default pin-it button
Updated: 9-Aug-2010
Web View Count: 19770 viewsLast Web Update: 9-Aug-2010
Filed in:CSS
Web Dev·The Web

Better @font-face Syntax

September 4th, 2009  · stk

I recently published an article about cross-browser font embedding, using the @font-face CSS selector. It turns out that the code I put forth causes a 404 look-up in Internet Explorer. A reader has suggested some superior code, which I put to the test

Paul Irish Sets My Morning Schedule

Funny how a single comment can change the direction of my day!

Paul proposes two concepts - new to me - in his recent article, "Bulletproof Font Face Implementation":

  • Internet Explorer tries and fails to download the TTF file (with 2-selector syntax) even though the 2nd @font-face selector includes a "format" declaration.
  • He proposes a single @font-face selector, which satisfies all browsers (obviating the need for two selectors), searches the local computer for the font first and eliminates the Internet Explorer "file not found" problem.

Okay ... this is techie, geeky cool and - for sure - not everyone is going to want to read about this, so here is where you should get off the geek train (if you haven't already).

If you're all aboard, heading for geekdom and want to be cool, then read on brave web-font enthusiasts ...

I'm a Geek, I want More

(Permalink)
Views: 55440 views
10 Comments · GuestBook
default pin-it button
Updated: 23-Aug-2010
Web View Count: 55440 viewsLast Web Update: 23-Aug-2010
Filed in:CSS
Web Dev·The Web

Improving a Lightbox Effect

August 31st, 2009  · stk

There's a spiffy-looking CSS Technique that's been getting a lot of play in the web-design and web-development social circles lately. Unfortunately, it's not a CSS technique and even as a JavaScript technique, it's crap! Did you spot it?

"Innovative CSS Technique" Making Rounds is NOT a CSS Technique

Even as a JavaScript Technique, it's Crap

This article, authored by Emanuele Feronato, has been getting some attention within the web-design and development social network recently. I've seen it Tweeted, FaceBook'd, Blogged, Digg'd and included in various "Totally Amazing CSS Techniques" lists.

On his website, Emanuele bills himself as an "Italian Geek & Programmer". Unfortunately, his article demonstrates he knows very little about web-standards, W3C validation, pure-CSS, graceful degradation, cross-browser compatibility, accessibility or white-hat SEO. He says his LightBox-like effect is "100% CSS-based" and that it's made "only with CSS - no JavaScript needed".

No JavaScript needed? What a pile of hooey!

The article is the most popular article on his blog, sporting over 252 comments and it's currently being shot across the design social circuit like it was the newest communications satellite. While some of the commentary points out the shortcomings, most (who don't know better) are lapping up this code - using it on commercial sites and passing it on.

At first blush, the technique seems very cool, but it's not code we would use and you shouldn't either. In a nutshell, out-of-the box it's crap. (Are you a web-developer, designer or programmer? Can you spot the problems?")

To learn more about why this code is crap (and to get an improved version) ... carry on ...

Turning Crapola into Shinola

(Permalink)
Views: 22251 views
8 Comments · GuestBook
default pin-it button
Updated: 13-Feb-2011
Web View Count: 22251 viewsLast Web Update: 13-Feb-2011
Filed in:CSS
Web Dev·The Web

xBrowser Fonts

July 4th, 2009  · stk

For years, web designers and bloggers have been limited to a select number of "web-safe" fonts. With the Jun 30th release of FireFox 3.5, it's now possible for cross-browser font embedding using the CSS3 @font-face selector. Here's a tutorial to show you how

@font-face font hell

Expand Your Font Palette Using CSS3

In a tale involving proprietary font formats and a week-old release of FireFox, I'm here to say that using the CSS @font-face selector to spice up your website typography is an easy, light-weight, valid and cross-browser solution. Finally, fancy fonts for the masses!

Can this be true? You bet your sweet bippy! Read on.

 

Fancy Fonts For All

(Permalink)
Views: 809758 views
237 Comments · GuestBook
default pin-it button
Updated: 12-Jul-2011
Web View Count: 809758 viewsLast Web Update: 12-Jul-2011