Dynamic animated countdown clock gif

On stack overflow, user1857868 asked:

I recently received an emailer from Onnit Labs that included a Countdown Module Timer inside the emailer using a gif image. The emailer can be viewed here: https://www.onnit.com/emails/lastchance-historic/

I looked into it, and it seems you can keep sending new frames to an animated GIF using gifsockets, as a GIF doesn’t specify how many frames it has when loaded in the browser. Here it is on github: http://github.com/videlalvaro/gifsockets

I thought this was pretty interesting and a cool effect indeed. Does anyone have any other insights on how this could be accomplished? It seems as though the one they’re using at Onnit seems to change the countdown according to date appended at the end of URL or image.

I’m trying to accomplish the same thing to send in an email, but I am a little stumped.

My initial thought was that it couldn’t be too complicated because most email clients and older browsers don’t support sockets, so that was discounted almost immediately. I looked at the network tab in chrome, that seemed to confirm it, and when I saw it loop back to the start after 60 seconds I have a pretty good idea how it was being done. The answer it that it loops 60 frames and hopes that the user isn’t enthralled by the clock, or that they read too quickly for the animation to loop. No gifsockets, no magic, just a server generated gif like this one:

Here is all the code that it required, there isn’t too much magic to it (other than the gif layer creator). You can see all the code here: on github. Or here on my test page: which is a bit prettier and also has a link to the font and the background image.

This doesn’t have to be a full countdown clock, with a few modifications it could count the number of days until Christmas or New Years instead.

Here is the code (minus the php 5.2 hack and the gif layering class):

 

Sidenote: Holy cow the guy who wrote the class to create animated gif sucks at formatting his code and also commenting it and naming the variables.

flattr this!

Screw you Bob

Hi Sean,

Tracking for your site was recently disabled on Clicky because you have not logged in to your account for at least 60 days. We disable inactive non-paying accounts to save on resources. You can re-enable tracking for no charge by logging into your account and clicking the appropriate link on this site’s dashboard: [redacted]

If you do not plan on using Clicky going forward, please remove the tracking code from your HTML so we no longer receive traffic from it. Otherwise, you will continue to receive this message in the future.

— Your friends at Clicky :)

http://getclicky.com

Note: This is an automated message. Please do not reply, as this email address is not monitored. If you wish to contact us, please go to our contact page via the link above.

The problem is that people have actually saved the web pages that they are getting hits from on their desktops, and they would see that if they looked at the source of the traffic… it would be something like C:\User\Bob\Desktop\webpage.html . Thanks a lot Bob for setting me up to get spam forever.

That is why I set up a rule to delete the emails as they come in.

flattr this!

It is like driving a new car off a cliff

So… This was fun…

Welcome to GatorChat!

You are being connected to a representative in our Technical Support department right now.

For immediate answers to your questions, check out our knowledge base and video tutorials at http://support.hostgator.com.

Your Chat ID is 3333053.

Your question is, “My primary domain is seanja.com. mod_security”

(10:03:41 PM) System: There are currently 3 people in front of you and 86 chat technicians assisting customers.
(10:04:10 PM) System: There are currently 3 people in front of you and 86 chat technicians assisting customers.
(10:04:41 PM) System: There are currently 1 people in front of you and 86 chat technicians assisting customers.
(10:05:11 PM) System: There are currently 0 people in front of you and 87 chat technicians assisting customers.
(10:05:12 PM) Gator Tech Support: has entered the chat.
(10:05:18 PM) Gator Tech Support: Hello, welcome to HostGator Live Chat.
(10:05:32 PM) SeanJA: hi
(10:05:44 PM) Gator Tech Support: How may I assist you today?
(10:06:40 PM) SeanJA: I keep getting a 403 error when trying to use piwik as a tracking server… I have also run into this problem with drupal’s ‘shurly’ module and the oauth login module as well… I believe that it would be related to mod_security?
(10:07:55 PM) Gator Tech Support: It really depends
(10:07:55 PM) SeanJA: I got around the one for oauth and shurly (a bit of hackery in drupal core that I would have liked to avoid…) but the one for piwik seems to be a bit more difficult to get around…
(10:08:07 PM) SeanJA: http://stats.seanja.com/piwik.php?idsite=1&rec=1&rand=0.11890891543589532&h=0&m=7&s=23&url=http%3A%2F%2Fseanja.com%2F&urlref=&res=1920×1200&cookie=1&pdf=1&qt=1&realp=0&wma=0&dir=0&fla=1&java=1&gears=1&ag=0&action_name=seanja.com
(10:08:11 PM) Gator Tech Support: Here is the mod security http://support.hostgator.com/articles/employees/daily-tasks/mod-sec-and-you
(10:08:20 PM) SeanJA: this is the url giving me the 403 error
(10:08:46 PM) Gator Tech Support: I am seeing a 500 error
(10:09:46 PM) SeanJA: odd… I am seeing that now too
(10:10:13 PM) SeanJA: oh… the 500 error is for the ErrorDocument
(10:10:19 PM) Gator Tech Support: here is everything I have on mod_security:

(10:10:45 PM) SeanJA: I keep getting bounced out to support.hostgator.com
(10:11:05 PM) Gator Tech Support: Yes, all I would be able to do is create a ticket that goes to them.
(10:11:14 PM) SeanJA: http://support.hostgator.com/articles/pre-sales-policies/secfilterengine-and-secfilterscanpost
(10:11:41 PM) SeanJA: this is what prompted me to contact you
(10:12:37 PM) Gator Tech Support: Right, but I see a 500 error
(10:13:52 PM) SeanJA: ok… but that is for the Error Document, the title of the page is “Error 403″
(10:14:24 PM) Gator Tech Support: Right
(10:14:47 PM) Gator Tech Support: Those two are very different errors
(10:14:51 PM) SeanJA: http://forums.hostgator.com/mod-security-and-403-errors-t71394.html
(10:16:09 PM) Gator Tech Support: I understand, a 403, is very different then a 500.
(10:16:54 PM) Gator Tech Support: http://support.hostgator.com/articles/cpanel/internal-server-error-help-500-error
(10:17:30 PM) SeanJA: what I see is:

Error 403 Forbidden,

Also a 500 error was thrown when trying to use ErrorDocument to handle the request
(10:17:58 PM) Gator Tech Support: I am getting:Forbidden

You don’t have permission to access /piwik.php on this server.

Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request.
(10:18:29 PM) Gator Tech Support: That would just need the pwiik.php permissions changed to 644
(10:19:33 PM) SeanJA: if you go to http://stats.seanja.com/piwik.php you actually get a result though
(10:19:42 PM) Gator Tech Support: Piwik is a free open source web analytics alternative to Google analytics.
(10:20:09 PM) SeanJA: as soon as you add ?url=http://test.com to the url it fails to work because the http:// is caught as “bad”
(10:20:49 PM) Gator Tech Support: I am getting a page with the following text
(10:20:53 PM) Gator Tech Support: Piwik is a free open source web analytics alternative to Google analytics.
(10:21:00 PM) SeanJA: yep
(10:21:09 PM) Gator Tech Support: Piwik is highlighted and so is web analytics
(10:21:14 PM) SeanJA: and the permissions are set to 664
(10:21:29 PM) SeanJA: well.. 0664
(10:22:32 PM) Gator Tech Support: Right, it is working for me
(10:22:38 PM) Gator Tech Support: Have you cleared your cache?
(10:24:00 PM) SeanJA: hitting the page without and url parameters works fine for me
(10:26:23 PM) Gator Tech Support: Is there anything else I can help you with today?
(10:27:11 PM) SeanJA: is there anyway that you could pass me on to someone that can help me with whitelisting stats.seanja.com/piwik.php from mod_security?
(10:28:11 PM) Gator Tech Support: If you tried to change that, you will cause your site to go down, but I can do that for you if you like
(10:28:27 PM) SeanJA: it will go down?
(10:28:35 PM) Gator Tech Support: It is like driving a new car off a cliff
(10:28:49 PM) Gator Tech Support: If it is not broken you dont want to try and fix it
(10:28:57 PM) SeanJA: it is broken though…?
(10:29:20 PM) Gator Tech Support: I do not show that
(10:29:48 PM) SeanJA: it has a blanket ignore urls with http:// in them
(10:30:00 PM) Gator Tech Support: A
(10:30:08 PM) Gator Tech Support: Are you trying to show this: http://stats.seanja.com/
(10:31:24 PM) Gator Tech Support: Hello?
(10:31:28 PM) SeanJA: nope… what /piwik.php does it log a hit to my site
(10:31:53 PM) Gator Tech Support: Ok, what is the php supposed to do?
(10:32:22 PM) SeanJA: on this page: http://seanja.com/tools/unlab-minecraft/
if you look at the net panel in firebug, or the error console in chrome, you will see a 404 for the call to piwik.php?[…]
(10:32:59 PM) Gator Tech Support: I see a picture of a post with yes written on it with graphics of 1996
(10:34:07 PM) SeanJA: yes, but in the error console there is a 403 forbidden error (if you are using chrome: ctrl+shift+i , or firebug F12 in the Net tab (it has to be active on page load though) )
(10:34:23 PM) SeanJA: which means that the hit is not being logged
(10:34:49 PM) Gator Tech Support: I am using firefox
(10:34:58 PM) Gator Tech Support: I will try IE
(10:35:39 PM) SeanJA: probably won’t show up in IE
(10:35:47 PM) Gator Tech Support: is unlabe a mincraft, yes
(10:36:05 PM) Gator Tech Support: is unlab mincraft up
(10:36:06 PM) Gator Tech Support: yes
(10:37:05 PM) SeanJA: I mean the error in the console (IE’s console isn’t great, nor does it exist in IE6/7)
(10:37:29 PM) Gator Tech Support: No, Firefox is fine though.
(10:37:55 PM) SeanJA: do you have firebug installed in firefox?
(10:38:36 PM) Gator Tech Support: Yes
(10:39:20 PM) SeanJA: if you pull it up, and open up the ‘Net’ tab, then reload the page you will see the 403 Forbidden error that I am talking about
(10:39:36 PM) Gator Tech Support: I dont see it.
(10:40:07 PM) SeanJA: is the Net tab actually active?
(10:41:25 PM) SeanJA: I think they disabled it by default in recent releases as it slows down page loads considerably on larger sites
(10:41:53 PM) Gator Tech Support: It may be a bug issue but if you just want that mod sec changed I can do that
(10:43:04 PM) SeanJA: I think I have found another way around it… I will just do what I did to drupal:

// © by Andriy Gerasika from GerixSoft, Ltd.
if (is_int($return) && $return == MENU_NOT_FOUND) {
$uri = $_SERVER['REQUEST_URI'];
$uri = str_replace('http://', urlencode('http://'), $uri);
$path = parse_url($uri, PHP_URL_PATH);
//FIX: SeanJA don't use ereg, use preg_match
$paths = array('/shurly/api/shorten', '/openid/authenticate');
if (in_array($path, $paths) || preg_match('/^\/user\/[0-9]+\/openid$/', $path)!=0) {
$path = substr($path, 1);
$query = 'q=' . $path . '&' . parse_url($uri, PHP_URL_QUERY);
$_SERVER['QUERY_STRING'] = $query;
parse_str($query, $_REQUEST);
parse_str($query, $_GET);
$return = menu_execute_active_handler();
}
}

(10:43:26 PM) SeanJA: basically refill the $_GET and $_REQUEST variables before they are checked
(10:44:08 PM) Gator Tech Support: I see
(10:44:09 PM) Gator Tech Support: Is there anything else I can help you with today?
(10:44:14 PM) SeanJA: nope
(10:44:28 PM) Gator Tech Support: Ok, let us know if you have any further questions
(10:44:31 PM) Gator Tech Support: Thank you for using HostGator Live Chat. If you could take a minute to rate your experience with HostGator as well as my overall performance, that would help us to improve our customer service. To do that, just click the button that says Rate and Exit in the upper right hand corner. The survey takes less than a minute to fill out.

In the end, I didn’t trust him not to screw up my site… so now I have to do a bunch of hackery to get it to work…

1 star

flattr this!

Daily Digest for December 8th

twitter (feed #2)
twitter (feed #2)
Just bought offsets for 10 lines of bad code (not for my code obviously…) http://codeoffsets.com/ [SeanJA]
twitter (feed #2)
twitter (feed #2)
RT @Spl0it: 56 newspapers, 20 languages, one editorial – Fourteen days to seal history’s judgment on this generation – http://bit.ly/89f8ap [SeanJA]
googlereader (feed #5)
twitter (feed #2)
New blog post: Daily Digest for December 7th http://blog.seanja.com/2009/12/daily-digest-for-december-7th/ [SeanJA]
twitter (feed #2)
twitter (feed #2)
By ‘limis’, I obviously meant ‘limos’ and ‘abd’ was supposed to be ‘and’… [SeanJA]
twitter (feed #2)
1200 limos and140 private jets?!?! #Copenhagen #wtf #fail [SeanJA]
twitter (feed #2)
RT @gavinblair: Global Warming Skeptics vs. The Scientific Consensus http://ow.ly/JztQ Interesting read! (via @infobeautiful) [SeanJA]
twitter (feed #2)
Awesome RT @gavinblair What am I drinking? Oh ya http://ow.ly/JzVv [SeanJA]
twitter (feed #2)
Just because my car has a few scuff marks on the side does not make it ok to add other ones *&^*&^%&^ [SeanJA]
twitter (feed #2)
Hello, Dexter Morgan…. #UhOh [SeanJA]
twitter (feed #2)
@lyndzrokz and I are going to see @TheBandFromTV when they roll through town :D [SeanJA]
twitter (feed #2)
@kthrnmllr21 Or because you are that witch in Hansel and Gretel… [SeanJA]
twitter (feed #2)
Mmmm… Pizza Lasagna [SeanJA]
twitter (feed #2)
#protip Don’t sit in alien chairs [SeanJA]
twitter (feed #2)
Time to die zombies! [SeanJA]
generic (feed #13)
twitter (feed #2)
Faster than a speed of bullets! <a href="http://www.blogcdn.com/www.comicsalliance.com/media/2009/11/returntosupermans.jpg“>http://www.blogcdn.com/www.comicsalliance.com/media/2009/11/returntosupermans.jpg [SeanJA]
twitter (feed #2)
Oh no! Spiderman? What happened to you? http://www.youtube.com/watch?v=UhHhXukovMU [SeanJA]
twitter (feed #2)
Oh no… no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no no http://bit.ly/8N5ka [SeanJA]

flattr this!