Ramblings

14 May, 2009

SSL Joys

Posted by: Matt Williams In: gotchas| howto| tips

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!

Enhanced by Zemanta

10 Apr, 2009

After long silence

Posted by: Matt Williams In: Uncategorized

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.

13 Feb, 2009

New Ruby Blog

Posted by: Matt Williams In: administrivia

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

11 Feb, 2009

Javascript with CSS Sprites Animation

Posted by: Matt Williams In: Uncategorized| css| javascript| web| web design

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

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 &gt;= 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

06 Feb, 2009

Chibi gets an upgrade

Posted by: Matt Williams In: Uncategorized

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.

05 Feb, 2009

Web Based Portable mysql tool suite

Posted by: Matt Williams In: glassfish| jruby| mysql| php| tools| utilities| web

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

Prawn’d by Scruffy, Gruff

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
    1. Write the file
    2. 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

SSL and Java Keystores

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

JBoss and Sesame Street’s Count

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.

02 Dec, 2008

The “A” stands for Asynchronous

Posted by: Matt Williams In: javascript| web

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.

Categories

DrakNet Web Hosting

Flickr PhotoStream

    layout_newm3headerTerrain Testa

About

Matt Williams is a geekly jack of all trades residing in Columbus, OH, USA.

Recommend Me


Adopt a Dragon from Dragcave
Adopt one today!Adopt one today!Adopt one today!Adopt one today! Adopt one today! Adopt one today!Adopt one today! Adopt one today! Adopt one today! Adopt one today!