Archive for the ‘Web Code’ Category

Grid Clock – An Experiment

June 29th, 2012

This is a Javascript version of a Grid Clock I had fun making for myself on a train trip home last week. I tried to waste as few characters as possible. The clock is built without using any libraries or external files (you can view the code by just selecting view source).

The clock is inspired by Qlocktwo, but this clock uses the letters in the grid far more efficiently, allowing it to overlap words that share letters (that won’t be displayed at the same time) and display additional information such as noon, midnight, am, pm, just, almost, and past. This clock uses almost for the last three minutes before the hour, and just past for the first three minutes past the hour. Click read more below for Processing/Arduino info.

Read more…

Fun, Web Code

Storytopia launched

April 5th, 2012

After sharing a dozen made up stories with my kids last night, we came up with the idea of storytopia. With graphical help from the amazing Noun Project, we had a working version 20 minutes later… just in time for bed.

  1. Create a story that includes aspects that include all of the squares on the screen (they are randomly chosen from 382 images).
  2. You may reposition the squares onscreen with your mouse (if that helps).
  3. Click the Reload Page button to create a new story.
  4. Try with more or fewer squares

Visit storytopia!

Browsers, Fun, Web Code

Schadenfreude and Internet Explorer 6

August 3rd, 2010

In a few weeks Internet Explorer 6 will be 9 years old, and with its popularity hovering around 17% I’ve noticed an interesting trend among Web developers that’s been growing over the past few years… a shadenfreude surrounding anything that mocks IE users, or diminishes their browsing experience. The Universal IE6 CSS file is a great example of this. It is a stylesheet intended to make a Website look bland and generic, but functional for IE6 users. Its a manifestation of the philosophy of “Design for better browsers, then design alternative solutions to handle IE6 bugs.” Another project, a Javascript library blurs the page intermittently for IE6 browsers, further to encourages this joy we experience from the pain of others who are:

  • naive enough to think that IE6 is an acceptable browser
  • shackled to a corporate IT policy that doesn’t want to retrain their in-house Windows XP experts
  • working under the umbrella of an accounting department that won’t pay to upgrade the 8-year-old IE6-only Web-based expense reporting system

I’ve heard developers relishing every opportunity to use CSS rounded corners, CSS dropshadows, and any other trick that they can dredge up from the When Can I Use Website just to stick another finger in the eye of Internet Explorer 6 (and occasionally IE7) users. The item I came across online that has me thinking about this trend this morning was the following on a Web site promoting a package of beautiful free HTML5 video player code (yellow arrow and box my own):


The site is actually promoting code as being compatible with “Internet Explorer with Chrome Frame installed.” Chrome frame is a further Internet Explorer insult from Google, which is a package of the main functional part of the Google Chrome Web browser distributed as an ActiveX control (think plugin) for Internet Explorer. That’s like saying the Uhaul truck you are driving has air conditioning because the car its towing has air conditioning. This last thought, because of my own schadenfreude, unfortunately has me laughing out loud.

Browsers, Web Code

Using Tables Instead of Images for Emailed Logos

July 29th, 2010

I received an email today from Nike, and couldn’t work out why their logo was visible BEFORE I clicked “Accept Images”. I did a little poking around and someone over there is a genius. I’ve toyed with the idea of using an HTML table with cell background colors in place of simple images, but never actually implemented it in a commercial email. Nike pulled it off and it works like a charm. It took 11,034 characters to create, but that’s not really any more than a moderately sized JPEG. Here’s the HTML table image of the Nike logo:

I recommend poking around with Firebug to see the full glory of it. The outer div, and the <style> tag content is my own, to override the CSS style settings on this page.

For anyone who has absolutely what this is all about… Over half of all emails, when opened, do not display images by default. If you are a company, like Nike, and someone opens your email, you are forced into simply hoping that they will click a button or link labeled with something like “Display Images” in order for them to see the full glory of your emailed promotion, which may be a large photo of your new product, photos of sale items, or inspiring action shot of products in use. Simply having a recognizable (and presumably liked) logo visible when the email is first opened is probably enough to encourage a higher rate of people to select “Display Images”.

My hat is off to Nike’s email folks for this simple, but effective (and ingenious) little HTML hack. It made me click to see the images of the email, but I’m still not ready to pull the trigger and purchase a pair of Vaporjet cleats or a Hypercool athletic shirt.

Browsers, Web Code

Widgets on Skinny Scoop

June 22nd, 2010

Working on updating the SkinnyScoop widget. Below is the current one, next one should be live in a month or so. Thought I’d use as a sample question:

“Do you ever feel guilty about your lifestyle when you think about the people in the world living in poverty?”

Then I realized that my style of question is probably more along the lines of:

Browsers, Web Code, Work

Ansca Corona + Lua = iPhone Application

January 7th, 2010

ansca corona analog clock iphone application

Today I built a nice looking iPhone application (an analog clock) and managed to build it in a language that I had never seen before in just an hour or so. This feat was entirely because of how simple the folks at Ansca have made programming for the iPhone.
Read more…

Fun, Web Code, Work

Using Sprites with XUL

January 6th, 2010

LCD Clock Image Sprite

CSS Sprites are a growing trend, and they can save a lot of time in certain situations. The term sprite when used for video games is slightly different, but in the context of Web graphics, the term refers to a single image file that is cropped onscreen and used for different images that are seen on a page. One sprite, for example, may contain the mouseoff and mouseover states for all tabs and buttons on a site. With CSS, the correct tab or button can be displayed by simply cropping the desired section of the larger image. Amazon is doing it, is doing it,, and others are starting to take the hint. Last night I sat down and tried to apply this technique to a Firefox XUL application.
Read more…

Browsers, Web Code, Work

JSON + Zip Code + $0 = How Much Info?

December 8th, 2009

JSON zipcode data
Armed with a budget of $0, I decided to spend an hour or two last night trying to accumulate as much data as possible using only a zip code, a static HTML page, and some javascript. Not a single dollar was spent, nor a single image created. The page is up here.

I’m sure I’ll add to this project as I find more free data sources, but so far I have:

  • Location Name
  • Lat/Lng of Zip Center
  • Weather Info
  • Forecast Data (4 day)
  • Recent Earthquakes within 100 miles
  • Local Wiki Entries (5)

If you have any XML or JSON data source suggestions that take LAT/LNG or Zip Code as parameters, email me at christopher[ at ] and I’ll add them to the page.

Web Code, Work

New Ant Script for Firefox Add Ons

December 2nd, 2009

apache ant firefox add on
After trying a half dozen different methods for building Firefox add-ons, I have settled on a single ant script I put together. The following ant script (build.xml file) will create a directory, copy all files into it, delete irrelevant files, zip up the file, name it with an .xpi extension, and delete the temporary folder it made to do all of this. Read more…

Browsers, Web Code

AnalogClock now available on the Firefox add on site

November 18th, 2009

AnalogClock Display Styles

At long last, my new open source Firefox add on, AnalogClock, is available for download from the Mozilla site. The clock uses the canvas tag to display an analog clock (with hands) in your browser status bar.

More info on my AnalogClock page.

Fun, Web Code