It works flawlessly in IE6 and 7, Firefox, Opera and Safari. It also alleviates some issues the click overlay has within W3Counter’s normal interface due to having to serve the webpage by proxy through the W3Counter domain. Since this widget is running on the actual site, it doesn’t have the cross-domain scripting restrictions browsers impose on the proxied version, so it can show the overlay on an even broader set of sites.

The appearance has also been tweaked to be easier to read, and the “Live View” tab given the feature upgrades the same report in W3Counter got, including browser and country icons, and showing a visitor’s label instead of IP address if it’s known.

Another step closer to being able to push this out to the live site. You can see it in action on any page of this blog by holding Shift+W for 3 seconds (try the homepage, as this post won’t have data since it’s a brand new page).

By the way, can anyone think of a better way to activate it that’s unlikely to interfere with normal webpage usage? All the convenient keyboard combos seem to be taken already in some browser or popular extension.

I hope W3Counter’s users like the widgets. They’re as easy to add to a site as copying a single line of JavaScript, but completely customizable at the same time. Most of them will allow you to customize borders, colors, sizes and fonts with JavaScript variables. A nice interface with some color pickers and sliders should make creating a custom widget easy as copy-and-paste.

I like the idea of putting stats on your site. I’ve already got the “Popular Posts” on the right and the custom counter at the top of this blog powered by W3Counter’s API. There’s a bunch of statistics on other sites of mine in the footer. Now the less technically savvy, and free users that don’t have access to the API, can add stats to their sites and blogs too.

Unlike Google and investment-backed startups in the space, everything I do with W3Counter needs to consider cost. I don’t have the luxury of cash to burn in the name of innovation or just plain bloat. Widespread adoption of the widgets would take a toll on the limited server resources available to the site. At least implementing a cache was dead simple. Symfony saves me time again and again. Cacheing the full output of the widgets for every user with a 5 minute expiration takes exactly this much work:

/apps/w3counter/modules/widgets/cache.yml:
all:
  enabled:     on
  with_layout: true
  lifetime:    300

I build them anyway in hope that they might bring in new users and perhaps some new subscribers. And because I love to build things. That little interactive visitor map was a lot of fun.

I had to derive the formula to convert longitude and latitude to coordinates on a given size map image with an origin in the upper left. Then I had to find a mercator projection map of the world, the type of flat map that keeps latitude and longitude lines at right angles at the sacrifice of distorting the continents, or else a point in California might end up somewhere in the sea. I found one somewhere on a CIA site, and overlaid it to the vector map I wanted to use with 50% opacity and scaled my map until the continents lined up.

Then I wrote out the JavaScript to plot the points and attach mouseover functions to display the location in a partially transparent tooltip. It took a while but now I know how a service like Google Maps knows where to place its markers on a flat map given latitude and longitude.

$x = ($longitude + 180) * ($width / 360);
$y = (($latitude * -1) + 90) * ($height / 180);

PHP UTF-8 Cheatsheet
Writing web applications that deal with multiple languages is a messy process. You can never be sure what encoding is coming in, but you can make a decent attempt at it with UTF-8. This cheatsheet shows you what’s involved in handling UTF-8 data in PHP.

Snoopy: The Web Client Class for PHP
One of my favorite PHP classes. I don’t use it much anymore, but I used to; it makes grabbing webpages, stripping them of HTML, retrieving all the links on pages, submitting forms, sending and receiving cookies, and everything else a browser would do easy in PHP.

Netvibes
My favorite among all the personalized homepage services. It’s quick and responsive even on older computers, I’ve never encountered a bug, and you can make virtually anything into a Netvibes module if there isn’t already one made. I use it to organize my RSS feeds, my Google calendar, check the weather and check my web stats (RSS feeds from W3Counter).

AnyBrowser Screen Size Test
A simple tool which opens a URL in a specific sized browser window. The Web Developer Toolbar for Firefox handles resizing for me, but I still use this to test pages at 800×600 in Internet Explorer, as I have been for almost 7 years now.

Archive.org
Look at previous versions of any webpage going back more than 10 years. Great for checking out a domain you’re interested in buying or advertising on. Also great for verifying you don’t overestimate how many years you’ve been using some site (like AnyBrowser).

Example.com
Mysite.com and yoursite.com get far too many free incoming links from casual forum posts and software documentation. When you’re writing instructions telling someone to provide their website address, use example.com, example.net or example.org as your example. That’s what they’re specifically reserved for.

CSSTYPE v2
Pixel perfect text styles for your website. Change the appearance of the text with the selection and input fields, see the results instantly, and click the CSS link to grab the styles for your own site.