The nice thing about standards is that there are so many of them to choose from. Andrew S. Tanenbaum
I’ve been working with a Apache proxy to force SSL and https. Well, I haven’t had any control over the certificates. And they can come in so many versions, especially given that Microsoft wants to do things its own way and the Apache web server instance is sitting on a windows virtual instance.
I’ve gotten the private key in two different formats, .pfx and .pvk.
.pfx can be converted to the pem file format which Apache is expecting via the following:
openssl pkcs12 -nodes -in infile.pfx -out out.pem
You then need to edit it, stripping out everything but the private key. Once that’s accomplished you’re good to go.
.pvk, however, isn’t supported in openssl until version 1.0. Joy!
The hiatus has been due to me having been really sick with a weird neurological disorder. I didn’t do any coding at all for over 2 months. I’m starting to feel better, but I still have my good days and bad. So, there will be updates. Hopefully before not too much longer.
I’ve started a new ruby blog. Whereas this one tends to longer posts (and not just ruby), the other is intended for short, tight pieces which focus on a single idea. In general they will be in the format of “mini sagas“. I’m shooting for daily updates on it.
Ruby Blender
One of the issues with gif animations is being able to stop and start them at will. This post examines a method of using javascript to control CSS Sprites for Animation.
We’re going to show how one can create the following animation using javascript and sprites and what benefits you might receive:

Animated Gif
The gist of this method is to use css background images, which are swapped out via javascript to show and control the animation. In a filesize test using an animation with 9 frames, the sprites actually require less memory than a comparable animated gif:
| File |
Size |
Description |
| Individual frames as separate PNG’s |
95421 |
Baseline — this is the sum of the sizes of the 9 frame files. |
| anim.gif |
43463 |
Animated gif version |
| knot.png |
81701 |
24 bit PNG, sprites. Notice that this is smaller than the sum of the 9 files, but quite larger than the animated gif. |
| knot-grey.png |
49708 |
Greyscale version of the png sprites. This is much smaller and approaches the size of the gif animation. |
| knot.gif |
40853 |
Gif version of the sprites. This is smaller than the anmated version. |
| knot-idx.png |
38281 |
Indexed version of the png sprites. Smallest yet. |
I think that between the added control, decreased number of files to download (a single file containing sprites can be used in many places), and the potential for reduced file size, that this is a viable method for producing animations.
The javascript code is library agnostic. Had I tied it to one library or another, I could have made it shorter, but I think that the benefits of being agnostic outweigh the potential byte savings.
// Except as otherwise noted, the following code is copyright 2008, 2009
// by Matthew Williams
//
// Usage and description of the script may be found at:
// http://matthewkwilliams.com/
//
// In order to use it, you need the following:
// + A sprite file
// + CSS entries for the locations of the sprites.
// These are named FOO-frame-n where foo is the name of the animation,
// and n is the frame.
// + A block entity in which the animation will be placed.
// This entity needs the following css rules since we're using the css
// background trick:
// + width
// + height
//
// + A sample use would be as follows:
// <script src="sprite-animator.js" type="text/javascript"><!--mce:0--></script>
//
// <script type="text/javascript"><!--mce:1--></script>
// <button onclick="gearanim.start(); return false;">Start</button>
// <button onclick="gearanim.stop(); return false;">Stop</button>
// This object does the updating of the sprite animation
function SpriteUpdater(instance)
{
var obj = instance;
this.updateSprite = function()
{
var elem = document.getElementById(obj.id + '-sprite-container');
var a = elem.className.split('-');
var num = parseInt(a[a.length - 1]);
var newNum = num;
if (num >= obj.numFrames) {
newNum = obj.loop ? 1 : obj.numFrames;
} else {
newNum = newNum + 1;
}
if(newNum != num)
elem.className = obj.id + '-frame-' + newNum;
else
clearInterval(obj.intervalID);
};
}
// This object handles the animation
// + id = the id of the block
// + file = the file which contains the sprites
// + loop = true/false whether it loops or not
// + delay = what is the delay between frames?
function SpriteAnimator(id, file, loop, delay) {
// this function and the next are from css-toolbox.js
// created by Patrick Hunlock :: http://www.hunlock.com
// and originally found at the JavaScript Source:
// http://javascript.internet.com
function getCSSRule(ruleName, deleteFlag) {
if (document.styleSheets) {
for (var i=0; i
';
element.innerHTML = insertion + element.innerHTML;
};
// add css rules for the sprite container
this.updateCSS = function()
{
var rule = addCSSRule('#' + this.id + '-sprite-container');
rule.style.backgroundImage = 'url("' + file + '")';
rule.style.backgroundRepeat = 'none';
rule.style.padding = '0';
rule.style.margin = '0';
rule.style.width = '100%';
rule.style.height = '100%';
};
// stop the animation
this.stop = function() {
if (this.intervalID != false)
{
clearInterval(this.intervalID);
}
};
// start the animation
this.start = function(){
updater = new SpriteUpdater(this);
this.intervalID = setInterval(updater.updateSprite,this.delay);
};
this.id = id;
this.file = file;
this.loop = loop;
this.delay = delay;
this.updateHTML();
this.updateCSS();
this.numFrames = this.countFrames();
this.intervalID = false;
}
Sample CSS looks like this:
.knot-frame-1{background-position: 0px 0px;}
.knot-frame-2{background-position: -138px 0px;}
.knot-frame-3{background-position: -276px 0px;}
.knot-frame-4{background-position: -414px 0px;}
.knot-frame-5{background-position: -552px 0px;}
.knot-frame-6{background-position: -690px 0px;}
.knot-frame-7{background-position: -828px 0px;}
.knot-frame-8{background-position: -966px 0px;}
.knot-frame-9{background-position: -1104px 0px;}
Here’s the javascript source file:
sprite-animator
I’m going to have to send my “big” laptop off for servicing, so I upgraded chibi, or as my daughter calls it, “Baby yaptop”. I upgraded the ram to 2gb — it was only $27 with tax. I had held off on this because I didn’t want to “void the warranty”. I found out today that increasing the ram wouldn’t do so, which was good because I was going to do it anyway. I also replaced the 2gb sd card with an 8gb one. I’d recently put eeebuntu on it — I’ve really been enjoying it.
However, since I added the extra ram, it’s running a *lot* faster. I’m thinking that Linux is doing a lot less behind the scenes in terms of juggling memory & is able to cache a lot better than it had. Things that might take a second or more previously take almost no time at all.
I should have done this a long time ago.
The end result is that I’ve got a very usable system now, even if it’s “only” got a 900mhz processor.
Are you limited in what software you can use at work? This article details how to have a web based tool suite for mysql. It currently has the following tools:
So you’ve noticed that both a php and a ruby application are included. Pretty spiffy, eh?
The magick partly lies in the container — I’m using GlassFish v3 prelude. Another piece is Quercus, a Java implementation of PHP 5. JRuby is used for ruby.
Read the rest of this entry »
23 Jan, 2009
Posted by: Matt Williams In: jruby| ruby
I’ve been putting together an automated report for my team, and decided to give prawn and scruffy a try. I ended up using Gruff, but here are some of the lessons along the way:
- Scruffy has issues with bar charts and values from 1-3 (actual values were
[1,3,1]). I was able to get around this by setting a minimum value of 0 and a maximum of (datapoints.max + 1)
- Scruffy failed, miserably, when I just had one column.
- Prawn has issues, potentially, with png’s generated by gruff (It’s actually a rmagick issue). The easy way to get around this is to generate a jpg.
- I’d seen indications that you could use
to_blob to generate the jpg, and yes, you can, but it won’t
- Write the file
- If you attempt multiple generation types in sequence, it creates multiple copies of text in the resultant graph, and they don’t always line up.
Right now I’m working on packaging with rawr. Once that’s done, I’ll publish my results.
14 Jan, 2009
Posted by: Matt Williams In: gotchas| tips
If you happen to change a machine’s name, be sure to delete the previous definition from the keystore. Otherwise it will complain mightily and, indeed, fail when you attempt to add in the pem file.
17 Dec, 2008
Posted by: Matt Williams In: jboss| tips
One, One database record!
Two, Two database record!
Muahahaha!
By default, when using datasources with JBoss, it does a count to validate a connection, both on creation and when it is requested from the connection pool. It looks something like:
select count(*) from x
Now, this can take take a while when working with tables containing 1.8 million rows and growing. That said, the datasource config file has two properties which can be set:
- new-connection-sql
- check-valid-connection-sql
These allow you to specify something like
count 1 from x
which runs a good bit faster.
So, I have a piece of code which goes out and updates a list. I’m using Ajax.Updater from Prototype.js, to get data back from the server. In my javascript, however, I’m immediately after kicking off the Ajax.Updater, doing processing based on the results from the update. And they’re out of sync, of course.
It just so happens that Ajax.Updater is not recognizing onSuccess. So I have to rewrite — not a big deal, more amused with myself for forgetting the ‘A’.
So, I need to use Ajax.Request.