The promise of CSS

After seeing a demo from Codrops, I realized it was possible to recreate the counter with CSS, and used that demo as a template. The end result is a counter that uses zero images and has buttery smooth digit animations. Because it is styled entirely with CSS you can easily change colors, gradients, shadows, fonts, etc. without having to touch an image editor. Because it is based on my old counter script, it has all the same methods and functionality (add, step, smart increment, etc).

Limitations

It sounds great, but there is a major limitation: CSS 3D animations have very poor browser support. Currently it only works in Chrome, and curiously has issues in Safari. Non-webkit browsers see a static version. It is just a proof of concept, not ready for prime-time.

Demo

You can test it out yourself below. I’ve included 4 sample styles for the counter: default, light, small, and huge. Switching between them changes a single CSS class name, that’s it… Oh the joy of only using CSS.

CSS Flip-Counter Experiment

This was just for fun, so don’t use it on a production site unless you really know what you’re doing.

Inside the Disqus plugin folder, open comments.php. Scroll down to the JavaScript, and look for:

var disqus_config = function () {
   var config = this; // Access to the config object

Inside this config function, paste this snippet:

config.callbacks.onNewComment.push(function(){
   clicky.log(window.location.pathname + '#post-comment', 'Post Comment');
   clicky.goal('Post Comment');
});

Here I’ve added “#post-comment” to the end of the current page URL. This is because Clicky only allows one title per URL, and the current URL is already matched with whatever the title of your page is. Since I want this action to show up with the title “Post Comment”, I have to make the URL unique. For me, appending “#post-comment” makes it unique, but if you use that hash for something else on the page, change it. The point is to make it something unique for the purpose of logging comments.

I also log a dynamic goal named “Post Comment”. Since I’m using Clicky Monitor, I get a nice desktop notification when someone leaves a comment.

This concept of adding a callback function for new comments can be applied however you use Disqus, it doesn’t need to be with WordPress. This example is specific for Disqus + WordPress plugin. If you’re including the Disqus JavaScript yourself without a plugin, the syntax is slightly different.

If you have a question or comment, please leave it below.

Slider interactions

There are two different interactions with the slider: clicking anywhere on the slider, and dragging the slide head. When clicking on the slider you want the slide head and content to smoothly animate to the clicked position. When dragging, you want the content to match the slide head position 1:1. Here’s an example of both:

Scrolling content example.

Simple setup

The HTML is very simple. Inside a parent container is the scroll content and the slider, and the content is an unordered list:

<div class="scroll-container"> 
    <div class="scroll-content"> 
        <ul> 
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul> 
    </div> 
    <div class="scroll-slider"></div> 
</div>

The JavaScript for the slider:

// Variable to hold scroll type
var slideDrag,
// Width of .scroll-content ul
slideWidth = 330,
// Speed of animation in ms
slideSpeed = 400;
 
// Initialize sliders
$(".scroll-slider").slider({
    animate: slideSpeed,
    start: checkType,
    slide: doSlide,
    max: slideWidth 
});
 
 
function checkType(e){
    slideDrag = $(e.originalEvent.target).hasClass("ui-slider-handle");
}
 
function doSlide(e, ui){
    var target = $(e.target).prev(".scroll-content"),
    // If sliders were above the content instead of below, we'd use:
    // target = $(e.target).next(".scroll-content")
    maxScroll = target.attr("scrollWidth") - target.width();
 
    // Was it a click or drag?
    if (slideDrag == true){
        // User dragged slider head, match position
        target.attr({scrollLeft: ui.value * (maxScroll / slideWidth) });
    }
    else{
        // User clicked on slider itself, animate to position
        target.stop().animate({
            scrollLeft: ui.value * (maxScroll / slideWidth)
        }, slideSpeed);
    }
}

When the slider is clicked, the function checkType() is executed, which determines if the handle or the slider was clicked. This determines which type of animation to do.

The other benefit of setting the code up like this is that I can have multiple sliders on the page that are all controlled with this single function. The piece that makes that possible is var target = $(e.target).prev(".scroll-content"), which says we’re going to animate the content directly above the active slider in the DOM.

Scrollable content demo

The demo has six scrollable content divs, all controlled by the JavaScript above:

View scrollable content demo

If you have a question or comment, please leave it below.

Apple’s new slide-menu.

Guts of the menu

At its heart, this isn’t a very complicated menu. You have a few hidden unordered lists that you scroll into view one item at a time, the animations have a slight easing to give the bouncy appearance, and the direction of the entrance and exit animations depend on the order you navigate through the menu (nice attention to detail).

How I set it up

The menu is made up of unordered lists inside the parent container:

<div id="menu-container">
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</div>

The lists and list items are positioned absolutely so they pile up on top of one another, and when it’s time to animate I pull out the appropriate list’s items one at a time and position them with some simple math. Here’s what the framework looks like:

Menu framework.

The controls for the menu are simple as well:

<div id="menu-controls">
    <a href="#" data-target="0">List 1</a>
    <a href="#" data-target="1">List 2</a>
    <a href="#" data-target="2">List 3</a>
</div>

The data-target attribute determines which list to animate when clicked. This target refers to the index of the list items. So target 0 refers to list 1, 1 to 2, etc. The script will add class="active" to the selected menu button’s <a> tag, so you can style accordingly.

Once the basics were down I firmed up the logic, added some animation easing, and made every piece of it customizable. The one thing I didn’t do was add the animated menu indicator (a triangle in Apple’s menu) that slowly animates to the active menu button. I consider that a flourish that goes along with the entire design of the Apple’s site. I left my demo on the simple side so the active button just gets bolded on mine.

Demo time

I created a demo page with a sample menu for four separate categories:

Slide Menu Demo

The HTML is commented enough to explain all the options, and you can get the code here at bitbucket.

Update: 3/10/11

1. A switchTo(index) method has been added so you can easily manipulate the menu. It takes one parameter, the index of the <ul> you want to switch to. Note: The default controller click handlers won’t start a new animation until the previous one finishes, so frantic clicking on the menu controls will not mess anything up. There is no such restriction on the switchTo method, so use smartly.
2. By default, the menu will now wait for all images in the first list to load before animating in. There is also a configuration option preloadAll which will make it load all menu images before starting when set to true.
3. If you want to use a loading graphic, you can tell the menu where it is so it will hide it for you once all the images are loaded and ready to go.
4. Updated the easing method used in transitions so looks a little smoother.

View demo source for more explanation.

Leave a comment if you have a question or something else to say.

Skip to demo

Linear sucks

The biggest problem I had with the original counter was that it was restricted to counting in a linear fashion. The background graphic was a massively long image in which we would drop from frame to frame until it hit the bottom and then we’d start back at the top. You had to animate in numerical order (1 -> 2 -> 3 -> 4) or else the animation would jump around and look bad. All you could do was say what number you want to start at, and how fast you want to count. That’s it. I found that very limiting—it needed to be able to animate to and from any digit.

Non-linear bliss

In order to animate freely between digits, I needed to break each digit into separate top and bottom pieces, and animate each independently:

Top zero states.

Bottom zero states.

So now instead of one huge 35KB graphic, we have two smaller graphics totaling 23KB at the expense of an added HTTP request. I’m OK with that trade-off.

More complicated animation

Naturally, having two separate pieces for each digit makes the background image animations more interesting. For example, lets see how the script animates from 0 to 3 (red), and then from 3 to 7 (blue).

The left graphic is the top half of the digit, and the animation sequence is fairly simple. The starting position for each digit is the first slot in each row. Once the top of the digit finishes, we animate the bottom half—which you can see in the graphic on the right.

The bottom animation jumps around a bit more, because I wanted the starting position for each bottom to also be in the first slot of each row. In slot 2 there is a shadow to indicate the top half of the digit is halfway through its fall, perpendicular to the screen and invisible. We then jump to the appropriate slot 3, which is the first you can see of the new digit falling into place, followed by the last two jumps to finish the animation.

So the three red jumps would happen first for the top, followed by the four red jumps for the bottom of the digit. Then it would start over for the blue jumps. It is only more complicated conceptually, but in practice only creates one extra background animation action.

The same effect could also be accomplished if all digits were in one long column like they were in my original script, and just shift it up and down rapidly into the correct position. Or you could just join the top and bottom graphics into one large sprite and handle the offsets accordingly in the animation. However, the logic controlling the background-position animations would be more complicated that way, so I broke it into two separate graphics for simplicity’s sake.

Added functionality

With my original script, there wasn’t much you could actually do with the counter. Its functionality was limited to a “set it and forget it” setup. There was no easy way to manipulate the counter once created. Lets start with that… creating a new counter:

var myCounter = new flipCounter(div, options);

div

ID of the div that will hold the counter, entered without the ‘#’.

options

Object with the following properties:

1. value [int]: Initial value of the counter. Default: 0
2. inc [int]: Increment of the counter. Default: 1
3. pace [int]: Pace of the counting in milliseconds. Default: 1000 (1 second)
4. auto [bool]: Should the counter auto-increment? Default: TRUE
5. tFH [int]: Top frame height. Default: 39
6. bFH [int]: Bottom frame height. Default: 64
7. fW [int]: Frame width. Default: 53
8. bOffset [int]: Bottom sprite offset. As of v0.5.2 I combined the top and bottom digit sprites into one. The sprites didn’t change at all, I just stacked them to create one long sprite. The script expects the top half sprite to be right on top of the bottom one, and bOffset tells it how many pixels down before the bottom sprite starts. If you want to continue using the two separate sprites, just set this to zero. Default: 390

If you change any frame dimensions, be sure to update the CSS with correct width and heights.

Frame dimensions guide.

Sample HTML:

<div id="counter" class="flip-counter"></div>

That’s all you need for a counter. The ID can be whatever you’d like, but every counter needs the class “flip-counter”, because that is what the CSS uses to style the counters.

Sample JavaScript:

var myCounter = new flipCounter("counter", {inc: 23, pace: 500});

The above code creates a counter inside the div with the ID “counter”, starting from 0 (default), incrementing by 23, every 500ms, automatically (default).

Methods

Now that we have an easier way to set up the counter, there needed to be easy ways to manipulate it, so I created the following methods:

setValue(val)

Sets the value of the counter and animates the digits to new value. You can change the value of the counter we just created like so: myCounter.setValue(12345);

Parameters
val [int]: New value for counter.

setIncrement(inc)

Sets the increment of the counter without animating any digits. Example: myCounter.setIncrement(123);

Parameters
inc [int]: New increment value.

setPace(num)

Sets the pace of the counter. Only visibly affects counters with auto-increment set to true. Example: myCounter.setPace(800);

Parameters
pace [int]: New pace value in milliseconds.

setAuto(auto)

Sets counter to auto-incrememnt (true) or not (false). Example: myCounter.setAuto(false);

Parameters
auto [bool]: True or false.

step()

Manually step through increments when auto-increment is off. Example: myCounter.step();

add(num)

Adds a number to the counter value, not affecting the ‘inc’ or ‘pace’ of the counter. Example: myCounter.add(456);

Parameters
num [int]: Number to add to counter.

subtract(num)

Subtracts a number from the counter value, not affecting the ‘inc’ or ‘pace’ of the counter. Note: The counter does not handle negative numbers. Any subtraction operation that results in a negative number will return zero. Example: myCounter.subtract(456);

Parameters
num [int]: Number to subtract from counter.

getValue() *new*

Returns the current value of the counter. Example: var value = myCounter.getValue();

This method is not chainable.

stop() *new*

Stops the counter if it is in the process of incrementing to a value using either incrementTo or smartIncrementTo, which are explained below. Example: myCounter.stop();

incrementTo(num, time, pace) *new*

Increments to a given number either by using the currently set pace and inc values, or by using a “smart” increment technique that determines optimal values for you.

To use the simple technique, all you need to supply is the target number: myCounter.incrementTo(12345); This will increment to 12,345 using the current pace and inc values.

To use the smart method, supply the time in seconds you want the increment process to last, and a desired pace: myCounter.incrementTo(12345, 10, 400); This will increment to 12,345 as well, but the increment process will take 10 seconds to complete. The counter will determine the optimal values to use. In the example I’ve set a desired pace of 400, which the counter will try and stay as close to as possible when finding the optimal values.

This method is not chainable.

Parameters
num [int]: Number to increment to.
time [int] optional: Duration, in seconds, the increment process should take. When set, the counter will use a smart increment technique to optimize the animation.
pace [int] optional: Desired pace for animation when using the smart increment option. This number may increase as needed for optimal timing.

Chaining

Most methods are chainable, unless specifically mentioned above, so the following example works fine:

myCounter.setIncrement(55).setPace(750).setAuto(true);

Demo

I’ve created a demo page with the help of jQueryUI that lets you manipulate the counter using all of the built-in methods. Go play with it:

New Apple-Style Flip Counter Demo

Get the code

You can get everything you need here at Bitbucket, where you will always be able to find the latest version of the script. If you use the script for something cool, I’d love to hear about it.

Update: 11/27/10

• Added 4 new methods: getValue, stop, incrementTo (thanks nerdynick), smartIncrementTo.
• Updated demo page for incrementTo and smartIncrementTo.
• Other various bugfixes.

Update: 12/5/10

• Combined the incrementTo and smartIncrementTo methods for simplicity’s sake.
• Updated the methods documentation to reflect changes.

Update: 2/7/11

Updated to work with jQuery 1.5, older versions will not work with v1.5. Animation technique changed.

Update: 4/13/11 – v0.5

I finally added a version number to keep track of changes. Major changes:

• Removed jQuery dependency, the counter runs on plain JavaScript now. I’m still using jQuery and jQueryUI for the demo controls, but it is no longer required for the counter itself.
• Added frame dimensions to configuration options, which will make it easier to use custom graphics (not sure why I didn’t have it this way before).

Update: 4/19/11 – v0.5.2

• Combined top and bottom sprites into one long sprite.
• Added bOffset parameter, explained in the configuration options.

Update: 5/7/11 – v0.5.3

• Changed default counter ID to “flip-counter”.
• All counters now need a class of “flip-counter”. This is what the CSS uses for styling, so having multiple counters doesn’t require adding each new ID to the CSS.
• idPre parameter removed because was pointless. Each counter needs a unique ID to begin with, so that can be used as the prefix for the digits.
• Comma now added to digits sprite, so counter only uses one image.

Code is up to date on Bitbucket and demo page.

Please note, I do not have a good source template for the digits. All I did was cut and manipulate the original source graphic from Apple. If you want to change digit colors or transparency, you have to create new sprites from scratch. If you do, and would like to include it as a template here for others to use, please email me.

CSS Experiment

Here’s a peek at my progress with removing images from the counter entirely.

—

If you have any questions, comments or suggestions; please comment or email me.

The situation

I’ve got hundreds of products that each have unique attributes, e.g. a laptop would have attributes such as: processor, memory, drives, ports, etc. In the new database schema, the attributes are normalized so that they can be used to sort and filter the products. You’re ready to start importing the data but there’s one big problem—in the old database, attributes are stored as HTML in one big text field.

After some obligatory cursing, you take a close look at what you have to work with:

<strong><span style="FONT-SIZE: 8.5pt; FONT-FAMILY: Arial; mso-fareast-font-family: Times New Roman; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA">Processor:</span></strong><span style="FONT-SIZE: 8.5pt; FONT-FAMILY: Arial; mso-fareast-font-family: Times New Roman; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA"> 2.4Ghz Pentium IV,<strong> Memory:</strong> 256MB DDR SDRAM Expandable to 1GB, <strong>Display:</strong> 15" TFT Active Matrix, <strong>Video:</strong> ATI Mobility Radeon, 16MB VRAM, <strong>Sound:</strong> 16Bit Sound Blaster Pro, <strong>Battery:</strong> Rechargeable Li-ION 2 Hrs Run, 3 Hrs Charge,<strong> Drives:</strong> 3.5" Diskette, 40GB Hard Disk, 8X DVD, 24X CDRW, <strong>Ports:</strong> PS/2 (1), External VGA (1), S-Video, USB (2), 10/100 LAN, <font></font><strong>Size:</strong> 12.96" X 10.72" x 1.73" (WxDxH), <strong>Weight:</strong>7.69lbs, <strong>Security:</strong> Kensington</span>

Not pretty. It’s got HTML tags strewn about with an assortment of Microsoft “mso-” garbage. We need to take this and turn it into nice key => value associations, like “Processsor” => “2.4Ghz Pentium IV”. You can just tough it out and do some hardcore copy and paste, which would be the easiest option if you only had a few items to go through. But that isn’t practical when dealing with hundreds, plus it is more fun to try and solve the problem with regular expressions.

Plan of attack

In order to use regex to strip out the attributes and their values, you first need to look for patterns in the data. Notice how each attribute is enclosed in <strong> tags? Using that pattern, we can write some pseudo-regex that will help us later on:

Attributes: Always preceded by <strong> and followed by </strong>.
Values: Always preceded by </strong> and followed by <strong> or the end of the data.

Step 1: Filter

Since all we need to get our data are the <strong> tags, the first step is to get rid of all other tags:

$fix = preg_replace('/<(?!strong|\/strong)([^>]*)>/i', '', $original);

This regular expression says to look for the character <, and then any text that is not “strong” or “/strong” until it finds >, and replace it all with '' (deleting it). Explain regex in detail.

This gets rid of all opening and closing tags that aren’t <strong> or </strong>, and saves that new string to the variable $fix. Our data already looks a lot cleaner:

<strong>Processor:</strong> 2.4Ghz Pentium IV,<strong> Memory:</strong> 256MB DDR SDRAM Expandable to 1GB, <strong>Display:</strong> 15" TFT Active Matrix, <strong>Video:</strong> ATI Mobility Radeon, 16MB VRAM, <strong>Sound:</strong> 16Bit Sound Blaster Pro, <strong>Battery:</strong> Rechargeable Li-ION 2 Hrs Run, 3 Hrs Charge,<strong> Drives:</strong> 3.5" Diskette, 40GB Hard Disk, 8X DVD, 24X CDRW, <strong>Ports:</strong> PS/2 (1), External VGA (1), S-Video, USB (2), 10/100 LAN, <strong>Size:</strong> 12.96" X 10.72" x 1.73" (WxDxH), <strong>Weight:</strong>7.69lbs, <strong>Security:</strong> Kensington

Step 2: Extract

Now we can extract the individual attribute names and their values. First we’ll get the attributes:

preg_match_all('/<strong>([^<]*)<\/strong>/i', $fix, $attributes);

Here we look for the string <strong> and then capture everything that isn’t a <, until we match the string </strong>. This repeats until the end of the data and sends all matches to an array called $attributes. Explain regex in detail.

Now we’ll pull out the attribute values:

preg_match_all('/<\/strong>([^<]*)(?:<[^>]*>|$)/i', $fix, $values);

This looks for a </strong> tag and captures anything that is not a <, until we match any tag or the end of the string. This repeats until the end of the data and sends all matches to an array called $values. Explain regex in detail.

We now have our attribute names and their values in seperate arrays, lets see what the array for attribute names looks like:

(
    [0] => Array
        (
            [0] => <strong>Processor:</strong> 
            [1] => <strong> Memory:</strong> 
            [2] => <strong>Display:</strong> 
            [3] => <strong>Video:</strong> 
            [4] => <strong>Sound:</strong> 
            [5] => <strong>Battery:</strong> 
            [6] => <strong> Drives:</strong> 
            [7] => <strong>Ports:</strong> 
            [8] => <strong>Size:</strong> 
            [9] => <strong>Weight:</strong> 
            [10] => <strong>Security:</strong> 
        )
    [1] => Array
        (
            [0] => Processor:
            [1] =>  Memory:
            [2] => Display:
            [3] => Video:
            [4] => Sound:
            [5] => Battery:
            [6] =>  Drives:
            [7] => Ports:
            [8] => Size:
            [9] => Weight:
            [10] => Security:
        )
)

You can see that preg_match_all creates a multidimensional array, the first sub-array contains the original strings that matched the regular expression, and the second contains the data we told it to extract. So, $attributes[1] and $values[1] has all the information we want.

Step 3: Clean

Or data is riddled with commas, colons and spaces at their beginning and ends, so lets clean them up:

preg_replace('/(^[,:\s]*|[,:\s]*$)/', '', $data);

Explain regex in detail.

Here’s an example of how to loop through each array, clean the data, and combine it all:

for ($i = 0; $i < count($attributes[1]); $i++){
    $clean_att = clean_me($attributes[1][$i]);
    $clean_val = clean_me($values[1][$i]);
    $all_done[$clean_att] = $clean_val;
}
 
function clean_me($data){
    return preg_replace('/(^[,:\s]*|[,:\s]*$)/', '', $data);		
}

We now have the array $all_done that contains all our extracted attributes and their values:

Array
(
    [Processor] => 2.4Ghz Pentium IV
    [Memory] => 256MB DDR SDRAM Expandable to 1GB
    [Display] => 15" TFT Active Matrix
    [Video] => ATI Mobility Radeon, 16MB VRAM
    [Sound] => 16Bit Sound Blaster Pro
    [Battery] => Rechargeable Li-ION 2 Hrs Run, 3 Hrs Charge
    [Drives] => 3.5" Diskette, 40GB Hard Disk, 8X DVD, 24X CDRW
    [Ports] => PS/2 (1), External VGA (1), S-Video, USB (2), 10/100 LAN
    [Size] => 12.96" X 10.72" x 1.73" (WxDxH)
    [Weight] => 7.69lbs
    [Security] => Kensington
)

Using a few regular expressions, we’ve taken some sloppy HTML and extracted all the data we needed for our new database. Regex is one powerful tool to have in your arsenal.

—

If you have any questions, comments or suggestions; please comment or email me.

By monitoring the player’s state changes, I made some headway with logging user actions. There were still some major problems, which I’ll go over in a bit, and after the bid fell through I stopped working on it. After revisiting it this week, I can now reliably log the following:

• Where a user starts watching
• Pause and resume times
• Start and end times when scrubbing
• When a user changes the video quality
• When it needs to pause for buffering
• If it plays through to the end
• Where in the video does someone leave the page

Demo

YouTube Event Logging Demo

Interact with the video and watch the log on the right.

Applications

I had Clicky in mind when I started working on this. It already provided detailed information on each visitor action and manual logging for in-page events, so being able to see what people were doing within the video would be voyeuristic delight.

Event logging in Clicky

Method

The key to everything is the onStateChange event, which alerts you to every state change in the player. Possible values are unstarted (-1), ended (0), playing (1), paused (2), buffering (3), and video cued (5). Combined with player.getCurrentTime(), you can figure out what a user is doing, and when they are doing it. Keeping track of what the previous event was lets you determine whether a state of 1 is the player starting, resuming, or scrubbing.

Problem

This was all well and good in theory, but getting the exact time of the actions proved to be very difficult at first. For example, when I scrub a video to some future point in the timeline, the state changes from 1-2-3-1: playing, pause, buffer, play. Capturing the start time of the scrub is simple, but even though the last state will be ‘playing’, the video will not actually play until the browser has downloaded enough to resume the stream. So a state of 1 ends up meaning ‘trying to play’ and not necessarily ‘playing’. Depending on network speeds and video quality, the player might sit on a state of 1 anywhere from 1 – 20 seconds before the video really is playing, and the video has to start playing again in order to capture the end scrub time.

I first tried to fix this problem with timers… Wait 5 seconds after last ‘play’ state to grab the time, subtract 2.5, and IF the video was in fact playing by then, I’d have a time to use that was accurate +/- 2.5 seconds. Yeah, that didn’t work very well. Higher quality streams and unpredictable network conditions made a timer-based solution terribly undependable.

Solution

The only way to reliably capture action timing was to monitor the video quality of the stream, and how much was loaded, via player.getPlaybackQuality() and player.getVideoBytesLoaded(). Playback quality will return either Small, Medium, Large, HD720, or HD1080. Based on quality, I determine when a video is playing based on rules of how much should be loaded. For example: If the stream is ‘Large’, video will play after 300KB is loaded, if ‘HD720′, 800KB. If you seek to a position in the timeline that has already loaded, there is no problem – video plays immediately. If seeking to a position that had not loaded yet, then ‘bytes loaded’ resets and starts loading video at the new position, and once it crosses the threshold, it SHOULD be playing and I capture the time.

Caveats

I said SHOULD because it isn’t always perfect. For one thing, all streams are not created equal. One ‘Medium’ video might start playing after 100KB loaded, another might be 300KB. I’ve done some testing on each quality level, and the limits I’ve set are on the conservative side. It might start playing at 100KB, but the script will be waiting for 300KB, so the time will be off by a few seconds.

The opposite holds true as well. The video might not start playing at 300KB, but rather 400KB, and misfire the player.getCurrentTime() call. In that instance the start and end times of the scrub will be the same. The conservative limits I’ve set should prevent this from happening, but you never know. The function that controls this is setByteMeter(), so tweak it if you wish.

This would have been a lot easier if returning a state of ‘playing’ really meant that, and not that it was thinking about it.

Introspection

Once again I’ve solved a problem that no longer exists, as I have no practical use for this right now. If anyone has ideas for improving it, please let me know in the comments or via email.

Update

Clicky ended up using this code as a base for the YouTube portion of their video analytics service. I’m happy it was put to real use, not just sitting here as another time-waster idea.

Clicky is an amazing web analytics service. Its killer feature is the ability see data in real-time, allowing you to watch your visitors as they browse your site.

I love Clicky, and I love their API. Because the analytics data is available immediately, I found myself wishing I could have a constant notification of how many visitors were on my site without having to leave a tab or window open all the time.

I also love Google Chrome. As soon as LastPass made an extension for it, Chrome became my default browser. After reading a little about Chrome extensions and how they were just HTML and JavaScript, I knew what my next project would be… ClickyChrome.

Update: A year after releasing ClickyChrome, I’m changing the name to Clicky Monitor to comply with Google’s new branding guidelines.

Version 2.0.3

Released: 3/19/2011

Download Clicky Monitor v2.0.3

Changelog

v2.0.3 – 3/19/2011

• Changed name to Clicky Monitor to make Google happy. I liked the alliteration :(

v2.0.2 – 3/8/2011

• Fixed bug where desktop notification links would open inside of notification itself instead of new tab.

v2.0.1 – 12/11/2010

• Fix for http://crbug.com/61370.

v2.0 – 9/8/2010

• Completely re-written, will be easier to add new features in the future.
• Added desktop goal notifications.
• Added context menu integration.
• Badge text can now display either number of visitors online, visitors today, or goals completed.
• Custom visitor names (if defined) appear in visitor list instead of IP.
• Visitors who have completed goals are flagged as such in the visitors list.
• Sites can now be reordered in the options page, updates site dropdown menu.
• Added ability to import all your sites from Clicky automatically.

v1.3.6 – 7/13/2010

• Minor update to reflect a change in Clicky’s API.

v1.3.5 – 6/8/2010

• Added pie chart of top browsers over past 30 days.

v1.3 – 6/6/2010

• Added Charts tab to display visitors and actions over past 30 days.

v1.2.1 – 5/26/2010

• Removed Google Analytics from extension because it was causing crashes for Mac users. See bug 43400 and 44941.

v1.2 – 4/16/2010

• Added Visitors tab to display today’s last 5 visitors.

v1.1.5 – 4/1/2010

• On options page, made badge color graphics field labels so clicking on image selects that option.
• Added Google Analytics tracking for the extension. This will give me a better idea of how people are using ClickyChrome and will help guide any future development. It doesn’t log any information about you or the sites you are using with the extension. Read more below.

v1.1.3 – 3/18/2010

• Restored accidentally-removed validation for Name field.
• Fixed potential problems with editing data for the currently active site.
• Added links back to Clicky for visitors and actions.

v1.1 – 3/17/2010

• Visitors Online counter adjusts refresh rate according to browser’s idle time to give Clicky’s API a little relief.
• Better form validation to prevent ID and Key entry errors.
• Five badge color options.
• Added data wipe option if you are having problems and would like to just start fresh.

v1.0 – 3/14/2010

• Initial release.

Features

Easily add all of your Clicky sites

You can import all your sites automatically from Clicky, or add them manually if you prefer. Select which one you’d like to actively monitor from the site dropdown menu in the ClickyChrome popup.

Chose a metric you want to monitor

The ClickyChrome toolbar icon will display either the number of visitors currently online, total number of visitors today, or total number of completed goals today. The data is refreshed every minute so you’ll always be up to speed.

Quickly browse through stats

From within the ClickyChrome popup, you can view basic site stats for various date ranges, see comprehensive information about your site’s last 5 visitors, and display graphs for visitors, actions and top browsers over the past 30 days.

Be notified on your desktop when a visitor completes a goal

Using HTML5 desktop notifications, you can chose to be alerted whenever a visitor completes a goal on the site you’re currently monitoring. You’ll be notified via a popup in the corner of your screen with the following information: Which goals the visitor completed, the total value of the completed goals, their geolocation as well as IP or custom username you have assigned, and the start time of their visit.

One click access to stats from any page of your site

If you provide domains for your sites, ClickyChrome will add an item to your context menu (right-click) while you are viewing any page within those domains. If you are browsing your site and would like to see the stats for that particular page, just right-click and select “View page stats”, and that will take you to the Clicky stats page for the URL you are currently viewing.

All your data is local

Your site information is stored locally in your Chrome browser and is used to make API requests to Clicky. If you uninstall the extension, that data is deleted. At no time is your data sent anywhere else.

Screenshots

ClickyChrome on the toolbar with online notification

Basic information

Last 5 visitors

Visitors over last 30 days

Top browsers over last 30 days

Desktop goal notification

One-click access to your analytics

Questions

Why can I see visitors online via Spy, but they aren’t appearing on ClickyChrome?

Spy data is not currently available via the API, and the ‘visitors-online’ field that ClickyChrome uses is delayed 1-2 minutes. This is why visitors you see in Spy won’t be immediately visible on ClickyChrome.

Why does it warn me about browsing history and private data when installing ClickyChrome?

ClickyChrome has access to Chrome’s tabs because it needs to open a new tab for the options page on first run and any time you want to edit your sites—and for this reason you get a warning about browsing history because that would enable the extension to see the names of your open tabs. The warning about private data is telling you that ClickyChrome will be interacting with api.getclicky.com, which is kind of obvious, but sounds scary in the warning.

What kind of data are you gathering with Google Analytics (GA)?

Analytics are disabled as of v1.2.1.

Think of the extension like a mini two-page website, one page is the background process that updates your online count, and the second is the pop-up. With GA, I can see how many people are using ClickyChrome, and how they are using it. For example, these are the event categories that I keep track of:
External Link: How often do people go to Clicky via the extension?
Site Select: How many times do people change the site they are monitoring?
Date Select: Do people change the date range often, and if so what is the most popular range?
Options: How many times do people open the options page?
Tabs: How often do people switch between the Basics and Visitors tab?

Keep in mind, all I see are number totals—I do not ever see the names of your sites. Besides satisfying my own curiosity, the GA reports are proving invaluable when it comes to troubleshooting. For example, I can see that the most popular version of Chrome using my extension is Mac 5.0.342.7 Beta, and when someone with a Mac emails me to say it isn’t working right, I know that it works fine on a Mac, and that it is probably because they are using the latest Dev release that might be unstable. I don’t own a Mac to test on, so having this information is a big help.

Why isn’t it working for me?!

Email me and tell me your OS and version of Chrome you are running—we’ll figure it out.

Help

If you run into any problems or have questions/concerns, post a comment or email me.

Source code

View source code at http://bitbucket.org/cnanney/clickychrome/.

Apple’s 10 billion song countdown.

Update: November 15, 2010: New version available

My first instinct was to use Chrome’s developer tools to inspect the page and check out the JavaScript for the counter to get some clues as to how to go about re-creating it. After a few seconds of looking at Apple’s minified code, I knew I’d get no help there. After grabbing the digits and comma graphic they used, I set out to avoid the work I was supposed to be doing to create a counter from scratch using these two images and jQuery.

Here it is

I’ll give a brief overview of the steps taken to reproduce the counter, but for those that want to cut to the chase, here it is. The code is commented enough so that anyone interested can view the source and see what’s going on.

View my Apple-style counter

Note: This counter did not actually track the number of iTunes downloads, but is an example of how to create a similar counter for your own purposes.

Be sure to read all the way down for more demos.

Basics

Looking at the image closely, we can see that each frame is 103px in height, with five frames of animation between digits, leaving 618px of space between each digit. So, digit zero would have a background position of '0 0', one would be '0 -608px', two would be '0 -1236px', etc. My plan was to use an unordered list to hold the digits and use jQuery to animate the background position of each list item.

<ul>
    <li id="d9"></li>
    <li class="seperator"></li>
    <li id="d8"></li>
    <li id="d7"></li>
    <li id="d6"></li>
    <li class="seperator"></li>
    <li id="d5"></li>
    <li id="d4"></li>
    <li id="d3"></li>
    <li class="seperator"></li>
    <li id="d2"></li>
    <li id="d1"></li>
    <li id="d0"></li>
</ul>

And the CSS:

*{
    margin:0;
    padding:0;
}
ul{
    list-style-type:none;
    width:566px;
    margin:50px auto;
}
li{
    float:left;
    background:url(filmstrip.png) 0 0 no-repeat;
    width:53px;
    height:103px;
}
li.seperator{
    background:url(comma.png) 2px 75px no-repeat;
    width:12px;
}

That’s it for HTML and CSS, the rest is JavaScript.

Making it work

It took no time to get a simple counter running, but the hairy part was triggering a five-frame animation for each digit that needed to change. Because I wanted to mimic the functionality of the counter on Apple’s site, it needed to look like it was counting at a very fast increment, with variable animation speeds depending on the digit.

After incrementing the value, the first step is to see which digits need to be animated:

function digitCheck(x,y){
    var digitsOld = splitToArray(x),
    digitsNew = splitToArray(y);
    for (var i = 0, c = digitsNew.length; i < c; i++){
        if (digitsNew[i] != digitsOld[i]){
            animateDigit(i, digitsOld[i], digitsNew[i]);
        }
    }
}

This takes inputs x (pre-increment value) and y (post-increment value), and sends them to a helper function I wrote called splitToArray, which breaks each value into an array of individual digits. It then compares each digit, and if there is a change, passes the info on to animateDigit.

Inside animateDigit, the most difficult part was getting the animations for each digit cued up correctly. Inside the loop that controls the animation, I needed to slide the background position down five times with a specific delay, and my first solution was using setTimeout, and the statement:

setTimeout(doAnimate, timeOut, n, pos);

This worked great in Chrome and FF, and I thought I was done... until I checked it in IE. I had forgotten you can't pass parameters to functions with setTimeout in this way, so you need to use a closure:

setTimeout(function(){doAnimate(n,pos)}, timeOut);

Simple enough, I thought, but that made the animation choke up in every browser. No good.

I slept on it, then this morning thought about using jQuery's new delay method added in version 1.4. Boom! I was able to do away with the doAnimate function all together, and kill it all with one pass:

$("#d" + n).delay(speed).animate({'background-position': '0 ' + pos + 'px'}, 0);

I now had cross-browser harmony, and had once again spent time away from paying projects to build something I have absolutely no use for :)

Customizing

When making this demo, I chose to use the same Apple graphics so when it was finished, I could look at the two side-by-side and see if I got the functionality correct. This post is just me sharing my learning process with you, so if in the future you ever have the need for a count down/up graphic, maybe this will help. The impression shouldn't be "how to rip-off Apple's look", but rather "how to have the same functionality in my own projects."

Customizing this to your own graphics is very easy. All you need is a consistent spacing between your animation frames, and be able to add. You can see a hastily-made custom example here. In it, my frames are 50 x 80px and I too have 5 animation frames between digits. Most of the customization happens at the beginning of the JavaScript:

// Array to hold each digit's starting background-position Y value
var initialPos = [0, -480, -960, -1440, -1920, -2400, -2880, -3360, -3840, -4320];
// Amination frames
var animationFrames = 5;
// Frame shift
var frameShift = 80;

The initialPos array holds the starting Y value of each digit, in increments of 480 (80px per frame x 6 frames per digit). animationFrames says there are 5 animation frames between digits, and frameShift is the frame height. Those are the only changes needed to make it function properly (besides updating the CSS), and further animation tweaking can be done in the function animateDigit.

Update 1

Here is another example demonstrating how to make a clock using the same animation technique.

Update 2

My original demo was based on counting to 10 billion, so had a strict number of digits. I realize that is not the most practical application, so I made a dynamic counter example where the JavaScript takes care of HTML for each digit, as well as commas when necessary. You can set whatever number you want via the URL query string (set n = number), or view the page by itself to just generate a random number. View the source to see different ways of setting a start number for the counter to use.

Update 3

Example with zero-filled numbers.

Update 4

As per many requests, and the help of a visitor who made three new digit graphics, I have yet another example of this animation technique in action. This time it is not counting up, but rather down—to any date in the future, in 'days : hours : minutes : seconds' format. It handles all HTML and formatting itself, all you need to do is plug in a date.

View countdown demo

Warning: Don't use the countdown script in a live site, because the jQuery animation technique used will not work properly in Chrome, see bug here.

It's set to countdown to Christmas of this year, but you can quickly test different dates by adding a date to the URL in this format: '?date=M/D/YY', e.g. '?date=6/1/11'. It uses the @font-face font kit BD Cartoon Shout from Font Squirrel. As usual, code is commented if you're curious. Here is everything for the countdown in a zip file.

Update: November 15, 2010

I've rewritten entire script and added lots of new functionality:

View revisited counter

Update: February 7, 2011

This script will not work properly with jQuery 1.5, and will no longer be maintained. Think of this post as a first draft of me trying to get the animation working; the code is outdated. If you want to use this type of counter please use the newer version of the script, which will be maintained:

View revisited counter

Warning: Don't use the countdown script in a live site, because the jQuery animation technique used will not work properly in Chrome, see bug here.

—

If you have any questions, comments or suggestions; please comment or email me.

If you search for “TV episode renamer”, you’ll find many utilities that can take care of this in some shape or form, butI didn’t want to install anything, and I knew it would be more fun to write it myself. I wanted something that would scan the video files, determine the season and episode number of each file, retrieve the title from IMDB and rename accordingly.

After a few hours, I had a script running on my local server that took three inputs:

1. Path to files on my PC
2. Desired series title for the files (i.e. “The Office”)
3. IMDB series code (i.e. tt0386676)

And produced clean file names, such as “The Office – S02E04 – The Fire.avi”

This post has to do with the first part of the solution—retrieving episode info from IMDB. After looking at the source for their episode list pages, I saw the pattern to which they display each episode’s information, so it only required a few lines of PHP and Regex to strip out the stuff I wanted and create an array with all seasons and episode titles for a given series.

View demo

View source

Perhaps I’ll write another post dealing with the processing and renaming of the files locally. If you find this script useful, I’d like to hear about it!