Scribbler

example

Scribbler is a WordPress plugin that allows you to show an animation of handwritten text on your site. See an example on deschrijfcoacharuba.com

Why use Scribbler?

Handwriting is very personal, this can give a personal touch to your logo, your site, product, app or videos.

How to use Scribbler

  1. Download the plugin  (we’re not on the WordPress directory yet).
  2. Go to your admin section in WordPress and choose Plugins.
  3. Choose ‘upload plugin’
  4. Press ‘choose file’ and then install
    • Alternatively, unzip the plugin. Use FTP to go to your WordPress/wp-content/plugins folder and upload the directory there. Activate the Scribbler plugin
  5. Go to Settings > Scribbler
  6. Enter the text you’d like to see animated on your home page

Options

There is currently only one option: text. This defines what text to show on the page.

Customization

You will probably want to customize the CSS file, which is in the same folder as the plugin. By default the text appears in div#pen, which will be placed right below the content of the post.

Limitations

  • The plugin is programmed to only work on a home page (using is_frontpage), because having a handwriting animation on every page gives bad usability.
  • The speed is fixed to 400 ms per character
  • As already said, it has only one font: ‘Tangerine’ (a Google Font).

Caveats

The plugin hasn’t been tested on every website known to man, and it relies heavily on javascript, in particular the Raphael, jQuery and Cufon libraries.

There is only one font (Tangerine). If you want to use another font, you’ll have to do the preparations yourself: create a cufonized font and modify the default in Scribbler.php.

Known Problems

There are no known problems as of yet.

Contribute

If you want to help me, I’d appreciate to be sent cufonized fonts. I will then implement the use of that font in the plugin.

I want this too on my site!

If you’re not technically inclined I can customize it for you on your site. Just leave a comment or contact me (http://about.me/michiel) and we can agree on a price.

Download

Or, do it yourself.

Source

Download

Advertisements

sIFR reloaded

 

sIFR
sIFR

sIFR (scalable inman flash replacement for the outsiders) is a technique to embed custom fonts in a webpage. You know, traditionally web pages can only show a couple of fonts reliably – the ubiquitous Arial, Times, and a couple of others.

 

When sIFR was introduced I was pretty psyched out about it. Showing any font, and still accessible, selectable, etc. However, it’s giving me nothing but headaches. Let’s recap some of those:

  • sIFR needs Flash. At a certain point there was a security issue and I had to disable Flash. No more sIFR.
  • Lots of people block Flash, because of the ads. 
  • Special characters weren’t showing. It appeared my font didn’t even have these defined. Well that’s not sIFR to blame, but still
  • It’s almost doing a good job presenting the CSS correctly. Almost.
  • Documentation? Don’t get me started. Besides a collection of pages on several blogs, that are badly maintained, there’s absolutely nothing.
  • Every time you install a new version you have to recreate your font files. Now that’s annoying!

Here are some alternatives I found today

TrueFontFamily

trademarks: JS, PHP, CSS, commercial. 

Server side generating is of course a good idea, but I can’t see if the textimages are cached, it looks like not.

Facelift

trademarks: JS, PHP, hosted, commercial

This one seems very good, but a bit too commercial. Hosted? No thank you.

TypeFace

trademarks: JS, SVG/VML, free

Typeface is a diamond among these, so it seems, if it doesn’t suffer from the lack of documentation that is. But if it’s really good it doesn’t need documentation.

How to create a Class

It’s three articles (1 2) now, it’s almost a book! Here’s how to create a class in my three favorite languages:

PHP

Method 1: standard

The advantage of this method is it’s obvious portability to other (e.g. compiled) languages. If you add getters and setters the link to java is easily made.

class Cube {
  var $colors;
  var $size;
  var $brand;
}
$c->colors = 'red,green,blue,yellow,white,orange';
$c->size = 4;
$c->brand = 'rubiks';

foreach (get_object_vars($c) as $property=>$value)
	print_r($property . ' = ' . $value . ', ');
?>

Method 2: instant class

The advantage of this method is the fact that properties (any method or attribute) can me created on the fly, even using variables, e.g. ‘price’, ‘new’ . ‘price’ or even ‘new’ . ‘price’ . $date. So in the example below we are defining the class, but not even giving it any properties (though it could have some of course).

class Cube {}
$c = new Cube;

$prop = $colors;
$c->$prop = 'red,green,blue,yellow,white,orange';

$prop = 'size';
$c->$prop = 4;

$prop = 'brand';
$c->$prop = 'rubiks';

foreach (get_object_vars($c) as $property=>$value)
	print_r($property . ' = ' . $value . '
');
?>

Method 3: instant object

The advantage of this method is that the object doesn’t actually have a class. Because of that properties can be invented at will, and they don’t have to be variables, shortening the code to a form that looks like the class actually was defined. Be careful with this though, other people who read your code will frantically look for the class definition and won’t find it if they don’t know about the use of stdClass. An equivalent, but not as nice looking, is to cast null to an object, as in “$c = (object) null;”

$c = new stdClass();
$c->colors = 'red,green,blue,yellow,white,orange';
$c->size = 4;
$c->brand = 'rubiks';

foreach (get_object_vars($c) as $property=>$value)
	print_r($property . ' = ' . $value . '
');
?>

JavaScript

In javascript there are plenty of possibilities for creating objects. Classes however do not exist (not in a practical sense anyway). Any object you create is a ‘class’ in itself, and can be copied or extended on the fly.

Note how javascript’s for..in actually iterates over all property names (not the values as you might expect).

var c = new Object;
c.colors = 'red,green,blue,yellow,white,orange';
c.size = 4;
c.brand = 'rubiks';

for (property in c)
	alert(property + "=" + c[property]);

Though it is correct that arrays and functions are both objects, and it seems an easy way of providing php’s foreach construct, the for..in is not suitable for this. An array with 10 elements, with index 0..9 cannot be iterated this way, since the array is also a ‘Class’ and all its properties, e.g. the length property, will also be iterated. In the example below, if we added a method ‘show’, we would see the definition of the function, converted to a string. That’s right, the full source code of the method.

r = Array('red','green','blue');
r.show = function() { alert(this); }
for (property in r)
    alert(property + "=" + r[property]);

(Visual) Basic

I will not consider VB.Net, since in .NET every program is object oriented (supposedly) and thus classes are at the base of the language. Anyway, it’s not more difficult than choosing “add item > class”, and almost all the code is created for you.

In Visual Basic it gets more interesting, since it’s not an OO language in itself. Again, just like in JavaScript, objects are more considered ‘containers for variables and functions’. The concept of subclassing does not exist in VB. OK, here it goes. I am assuming you have created a Standard Exe project. First, choose Project > Add Class Module. You’ll see a new module created named ‘Class1’. You can just rename that in the properties pane to Cube. Now add the code:

' method 1: public members
Public colors As String
Public size As Integer
Public brand As String

This is not the preferred way, we should actually create getters and setters for these. This is easy using Tools > Add Procedure. Name it colors e.g. and you will get the following code

Public Property Get colors() As Variant
End Property
Public Property Let colors(ByVal vNewValue As Variant)
End Property

To this you’d still have to add a private variable, such as m_colors, which would be used in your Get and Let methods. You can create a new Cube object from within a form or a module using “set c=new Cube”.

In VBA (Visual Basic for Applications) the procedure is exactly the same, though you don’t have to create a new executable. You can start by e.g. pressing ALT+F11 in Excel and you will be able to add a class module.

Finally, in VBScript you could either create a class definition as in VB (without the type names though)… or use the ExecuteGlobal method to evaluate code and, again, generate classes on the fly.

How to find out if a variable has been defined

It’s two articles now, it must be a series! Here’s how to find the out if a variable has been defined in my three favorite languages:

PHP

/* v has not been declared */
if (isset($v))
  echo "v has been defined";
else
  echo "v has _not_ been defined";

JavaScript

Please note that in javascript a runtime error would be generated when trying to access a variable that has not been defined. However, any variable that you create will automatically become a property of the window object. Therefor, checking if the variable has been added to the scope of window will result in a condition that can be checked. Also note that this will only work in a browser, which of course is how most people experience javascript anyway.

As an example: “window.doesnotexist==null” results in true. Be careful not to overwrite stuff that already does exist in the window.

/* v has not been declared */
if (window.v)
  alert("v has been defined");
else
  alert("v has _not_ been defined");

(Visual) Basic

In Visual Basic you will only be able to use this code if “option explicit” is off, meaning in VBScript, VBA and VB6.0 there should not be a line on the top which says “Option Explicit”. In the .NET environment there is a setting for this in the options dialog (project properties). In the case Option Explicit is on, variables will always be assigned a default value, so you can never check e.g. if an integer variable has been assigned a value of 0.

You can either check using the typename function or using the isEmpty function.

As an example: Debug.Print TypeName(doesnotexist)=”Empty” shows True

if isempty(v) then
  debug.print "v has been defined"
else
  debug.print "v has _not_ been defined"
end if

Source code

Rubik’s CubeImageCube is a program written by Lars Vandenbergh to show images of Rubik’s cube where you define what stickers to show.

I wrote a version of ImageCube that can also be used as a model of the Rubik’s Cube. I decided to give away the code, because that’s how cool I am. If you’re only into cubing and not into programming at all, you should just check out what I did with it at the algorithm database or my Rubik’s cube site.

And now for the source. If you have any comments, feel free to leave them here.

<?
/*
Cube object

Copyright (C) 2007 Michiel van der Blonk - <a href="mailto:blonkm@gmail.com">blonkm@gmail.com</a> - All Rights Reserved
Based on C++ code by Joël van Noort

This software is licensed as per the MIT License below:
MIT License: <a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

/*
 * To generate the imagecube sticker codes, this program first simulates the
 * cube, using a  string that represents the cube state. Every elementarty move
 * (UDLRFB) is then executed as five 4-cycles of stickers. Example: the
 * sticker permutations corresponding with the move U are:
 *
 * U: (53, 51, 45, 47) (50, 52, 48, 46) (2, 38, 29, 11)
 *     (1, 37, 28, 10,) (0, 36, 27, 9)
 */

// just for debugging
class Debug
{
 function out($s)
 {
  echo '<div class="debug">';
  print_r($s);
  echo '</div>';
 }
}

// post, get
class Page
{
 function get($s)
 {
  if (isset($_GET[$s]))
   return $_GET[$s];
  if (isset($_POST[$s]))
   return $_POST[$s];
 }
}

// handy functions
class Util
{
 //swaps two elements in an array
 function  swap(&amp;$var, $a, $b){

  $temp = $var[$a];
  $var[$a] = $var[$b];
  $var[$b] = $temp;
 }
}

// model of a Rubik's cube
class Cube
{
 var $stickers;
 var $mode;

 // constructor
 function Cube()
 {
  // initialize stickers
  $this->stickers = "rrrrrrrrrgggggggggwwwwwwwwwooooooooobbbbbbbbbyyyyyyyyy";
 }

 //this function uses swap function 3 times to make a 4-cycles of stickers:
 function execute_permutation($a, $b, $c, $d){
  Util::swap($this->stickers, $a, $b);
  Util::swap($this->stickers, $a, $c);
  Util::swap($this->stickers, $a, $d);
 }

 // perform a move and update stickers member variable
 // for multiple moves in the string $token the moves are done one by one
 function move($token)
 {
  $moveTransforms = array('u'=>'UEEE', 'd'=>'DE', 'f'=>'FS', 'b'=>'BSSS', 'l'=>'LM', 'r'=>'RMMM', 'x'=>'rLLL', 'y'=>'uDDD', 'z'=>'fBBB');

  // recursive calls to walk through the translated lowercase moves
  if (strlen($token) > 1)
   foreach (str_split($token) as $ch)
    $this->move($ch);

  switch($token)
  {
    case 'U':
    //one of the elementary move functions. Uses the execute_permutation function
    //five times to make five 4-cycles of stickers:
    $this->execute_permutation(53, 51, 45, 47); // top layer
    $this->execute_permutation(50, 52, 48, 46);
    $this->execute_permutation(2, 38, 29, 11);
    $this->execute_permutation(1, 37, 28, 10);
    $this->execute_permutation(0, 36, 27, 9);
    break;
    case 'D':
    $this->execute_permutation(20, 26, 24, 18);
    $this->execute_permutation(23, 25, 21, 19);
    $this->execute_permutation(8, 17, 35, 44);
    $this->execute_permutation(7, 16, 34, 43);
    $this->execute_permutation(6, 15, 33, 42);
    break;
    case 'F':
    $this->execute_permutation(2, 8, 6, 0);
    $this->execute_permutation(5, 7, 3, 1);
    $this->execute_permutation(9, 20, 44, 51);
    $this->execute_permutation(12, 19, 41, 52);
    $this->execute_permutation(15, 18, 38, 53);
    break;
    case 'B':
    $this->execute_permutation(29, 35, 33, 27);
    $this->execute_permutation(32, 34, 30, 28);
    $this->execute_permutation(47, 36, 24, 17);
    $this->execute_permutation(46, 39, 25, 14);
    $this->execute_permutation(45, 42, 26, 11);
    break;
    case 'R':
    $this->execute_permutation(11, 17, 15, 9);
    $this->execute_permutation(14, 16, 12, 10);
    $this->execute_permutation(2, 47, 33, 20);
    $this->execute_permutation(5, 50, 30, 23);
    $this->execute_permutation(8, 53, 27, 26);
    break;
    case 'L':
    $this->execute_permutation(38, 44, 42, 36);
    $this->execute_permutation(41, 43, 39, 37);
    $this->execute_permutation(0, 18, 35, 45);
    $this->execute_permutation(3, 21, 32, 48);
    $this->execute_permutation(6, 24, 29, 51);
    break;
   case 'M':
    $this->execute_permutation(4, 22, 31, 49 );
    $this->execute_permutation(1, 19, 34, 46 );
    $this->execute_permutation(7, 25, 28, 52 );
    break;
   case 'E':
    $this->execute_permutation(4, 13, 31, 40);
    $this->execute_permutation(5, 14, 32, 41);
    $this->execute_permutation(3, 12, 30, 39);
    break;
   case 'S':
    $this->execute_permutation(49, 13, 22, 40);
    $this->execute_permutation(50, 16, 21, 37);
    $this->execute_permutation(48, 10, 23, 43);
    break;
   case '':
    break;
   default:
    // u,d,f,b,l,r,x,y,z
    $this->move($moveTransforms[$token]);
  }
 }

 // clean from certain tokens
 // note: only cleans up space, minus, quote
  function clean($input)
  {
  if ($input=='')
   return $input;

  $tokens = " ()-\\'";
  $input_clean = '';
  $prevCh = '';
  // delete magic quotes
  $input = str_replace("\\\\", '', $input);
  foreach (str_split($input) as $ch)
  {
   if (!strpos($tokens, $ch))
       $input_clean .= $ch;

   // only add prime when right after a move token, e.g. R'
   // so skip R2' (becomes R2)
   if ($ch=='\\'' &amp;&amp; $prevCh!='2')
    $input_clean .= $ch;
   $prevCh = $ch;
  }
  return $input_clean;
 }

 // normalize algorithm
 // e.g. R2L'FD' becomes R2L3F1D3
 function normalize($input_clean){
  $temp = str_replace('\\'', '3', $input_clean);
  foreach (str_split($temp) as $ch)
  {
   // when both ch and prev are moves, insert a 1 between them
   // RL becomes R1L
   if (preg_match("/\\D/", $prevCh) &amp;&amp; preg_match("/\\D/", $ch))
    $alg_normal .= '1';
   $alg_normal .= $ch;
   $prevCh = $ch;
  }
  if (preg_match("/\\D/", $ch))
   $alg_normal .= '1';
  return $alg_normal;
 }

 // reverse moves
 // used to show an algorithm that solves a cube
 function  inverse($alg_normal){
  // split into separate moves
  $moves = str_split($alg_normal, 2);
  // reverse those
  $moves_inverse = array_reverse($moves);
  // back to string
  $alg_inverse = implode("", $moves_inverse);
  // inverse quantifiers
  $alg_inverse = str_replace('1', '#', $alg_inverse); // temp ch for 3
  $alg_inverse = str_replace('3', '1', $alg_inverse);
  $alg_inverse = str_replace('#', '3', $alg_inverse);

  return $alg_inverse;
 }

 // several predefined sticker modes
 function setMode($mode='')
 {
  if ($mode!='')
   $this->mode = $mode;

  switch (strtoupper($this->mode))
  {
   case "F2L":
    $this->stickers =  "xxxrrrrrrxxxggggggwwwwwwwwwxxxooooooxxxbbbbbbxxxxyxxxx";
    break;
   case "SHORTCUT":
    $this->stickers = "xxxxrrxrrxxxggxggxxwwwwwxwxxxxxoxxoxxxxxbxxbxxxxxyxxxx";
    break;
   case "OLL":
    $this->stickers = "xxxrrrrrrxxxggggggwwwwwwwwwxxxooooooxxxbbbbbbyyyyyyyyy";
    break;
   case "PLL":
    $this->stickers = "rrrrrrrrrgggggggggwwwwwwwwwooooooooobbbbbbbbbyyyyyyyyy";
    break;
  }
 }

 // execute an algorithm
 function  execute($alg, $mode='')
 {
  // prepare with a certain mode if given
  if ($preset!='')
   $this->setMode($mode);

  // walk through all moves in a normalized alg
  for ($i=0; $i < strlen($alg); $i+=2)
  {
   // define operation (move) and quantifier
   $op = $alg[$i];
   $q = $alg[$i+1];
   // move a face n times
   foreach (range(1, $q) as $value)
    $this->move($op);
  }
  return $this->stickers;
 }

 // applet sticker for RubikPlayer are
 // the same as the stickers member variable
 function toAppletStickers()
 {
  return $this->stickers;
 }

 // return only visible faces for imagecube
 // i.e. U, F, R
 function toImageCubeStickers()
 {
  // split into 9 faces
  $faces = str_split($this->stickers, 9);

  // create string for up, right, front
  $upFace = $faces[5];
  $frontFace = $faces[0];
  $rightFace = $faces[1];
  $imageStickers = $upFace . $frontFace . $rightFace;

  return $imageStickers ;
 }

 // perform an algorithm given
 // done in the steps
 // 1. clean up
 // 2. normalize (add quantifiers)
 // 3. optionally inverse
 // 4. execute
 function performAlg($input, $inverse = false)
 {
    $input_clean = "";
    $alg_normal = "";
    $alg_inverse = "";

  // clean input leaves only the moves
  $alg = $this->clean($input);

  // process to get normalized alg (e.g. R2F1L3)
  $alg = $this->normalize($alg);

  // process inverse of alg
  if ($inverse)
   $alg = $this->inverse($alg);

  // perform inverse on the stickers
  $this->stickers = $this->execute($alg);
 }
}
?>

Fighting spam

Everybody is spam-spam-fighting, yeah! And so am I. Not on this blog though, with it’s awesome akismet software. But at work on our servers, spam is a regularly visiting enemy. It’s difficult to explain to customers why we cannot stop spam. But, it seems so simple. Until you learn how smart the automated spam-software actually is, and that there are actual real living people who make it their job to enter spam in web site contact forms.

This week we saw on a server that usually had 100 visitors a month a rate of over 2000 visitors. And a large percentage of that was (just) one spambot.

Every time I thought of a new trick and implemented it, the spambot immediately adapted itself to it’s new environment. I felt like Neo fighting an agent. But, they haven’t beaten me, and since I am the one, I will have my victory!!!