My little Codelog http://www.codelog.net Code snippets, tutorials and reviews for whom they might be useful. Wed, 08 Apr 2009 10:11:22 +0000 http://wordpress.org/?v=2.6 en JavaScript printf() http://www.codelog.net/codebits/javascript-printf http://www.codelog.net/codebits/javascript-printf#comments Tue, 10 Mar 2009 16:29:46 +0000 Alex http://www.codelog.net/?p=40 The printf function is known in many programming languages. It allows to replace a certain pattern in a string with other strings.

Here's a little printf() for JavaScript. It can't do very much; in fact, it only can replace the placeholder %s multiple times.

PLAIN TEXT
JAVASCRIPT:
  1. var printf = function(string)
  2. {
  3.     if (arguments.length <2) { return string; }
  4.         for (var i=1; i<arguments.length; i++)
  5.         { string = string.replace(/%s/, arguments[i]); }
  6.     return string;
  7. }

Although it's not too advanced, it can be helpful if want to produce something as a pagination:

PLAIN TEXT
JAVASCRIPT:
  1. var pagination = '';
  2. var numpages = 5;
  3.  
  4. for (var page=1; page<=numpages; page++)
  5. {
  6.     pagination += printf('Page %s of %s', page, numpages);
  7. }

Update 08.04.09, 12:11: Found a better solution.)

]]> http://www.codelog.net/codebits/javascript-printf/feed Implementing PHP functions in JavaScript http://www.codelog.net/codebits/implementing-php-functions-in-javascript http://www.codelog.net/codebits/implementing-php-functions-in-javascript#comments Tue, 24 Feb 2009 19:48:06 +0000 Alex http://www.codelog.net/?p=38 There are some handy functions in PHP you would sometimes like to have in JavaScript, too. Why not reimplement them? It's not hard. Take for example in_array() and explode():

PLAIN TEXT
JAVASCRIPT:
  1. function explode(delim, val_to_split)
  2. {
  3.     return (val_to_split.indexOf(delim))
  4.         ? val_to_split.split(delim)
  5.         : [val_to_split];
  6. }
  7.  
  8. function in_array(needle, haystack)
  9. {
  10.     hlength = haystack.length;
  11.     for (var i=0; i<length; i++)
  12.         { if (needle == haystack[i])
  13.             { return true; } }
  14.     return false;
  15. }

Hint: On many pages of PHP functions, there are comments which describe how to reimplement a function (e.g. PHP 4 implementations of PHP 5 functions) -- in PHP though, but it's easy to adapt them for JavaScript.

]]> http://www.codelog.net/codebits/implementing-php-functions-in-javascript/feed Unclutter array definitions in PHP http://www.codelog.net/codebits/unclutter-array-definitions-in-php http://www.codelog.net/codebits/unclutter-array-definitions-in-php#comments Wed, 17 Dec 2008 11:32:08 +0000 Alex http://www.codelog.net/?p=33 Here's a little trick how to print definitions of large arrays in a more beatiful way. Instead of passing a set of strings to the array() function, pass only one string to the explode() function!

For example, consider a section in the WordPress code (/wp-includes/post.php):

PLAIN TEXT
PHP:
  1. // currently
  2. $data = compact( array( 'post_author', 'post_date', 'post_date_gmt',
  3.     'post_content', 'post_content_filtered', 'post_title', 'post_excerpt',
  4.     'post_status', 'post_type', 'comment_status', 'ping_status',
  5.     'post_password', 'post_name', 'to_ping', 'pinged', 'post_modified',
  6.     'post_modified_gmt', 'post_parent', 'menu_order', 'guid' ) );
  7.  
  8. // equals
  9. $data = compact( explode('|', 'post_author|post_date|post_date_gmt|post_content|'.
  10.     'post_content_filtered|post_title|post_excerpt|post_status|post_type|'.
  11.     'comment_status|ping_status|post_password|post_name|to_ping|pinged|'.
  12.     'post_modified|post_modified_gmt|post_parent|menu_order|guid' ) );

Not only is the second part shorter, but it is also easier to edit and to overview. Of course this always depends on how many elements your array has; it's rather ridiculous with small arrays.

]]> http://www.codelog.net/codebits/unclutter-array-definitions-in-php/feed Lightweight JSON fetcher (3rd party capable!) http://www.codelog.net/codebits/lightweight-json-fetcher-3rd-party-capable http://www.codelog.net/codebits/lightweight-json-fetcher-3rd-party-capable#comments Thu, 11 Dec 2008 09:28:51 +0000 Alex http://www.codelog.net/?p=28 JSON is a great data transfer format, especially for AJAX style applications (much better than XML for that purpose). Fetching JSON from your server is usually not a big deal these days, since all common browsers provide the XMLHttpRequest.

But: It can be a big problem to fetch data from a third party server, due to the Same Origin Policy. Imagine you want to provide a service where people simply need to include a JS file from your server to make great things happen on their own sites. Fetching JSON with your script via XMLHttpRequest (even from your own server) will not work.

However, there's a great workaround, which I first saw at Jeffrey Sambells' site. His solution is more generic, as it's able to load any JavaScript (not only JSON data) dynamically. Also, it's compatible with the XMLHttpRequest functions. I just needed something to fetch my JSON, and I don't need all of the XMLHttpRequest. Yet I do want to use AJAX indicators and error handling. So I used his code and taylored a lightweight JSON fetcher. If compressed with a JavaScript packer, it is as tiny as 1.4 kB.

The client side

Here's the code for the fetcher. Save it as request.js or something and have it loaded with your other JS. You can also insert into other JS files.

PLAIN TEXT
JAVASCRIPT:
  1. /*
  2.     XssJsonFetch
  3.     (C) 2008 Alex Günsche
  4.     Available under the MIT license
  6.     based on XssHttpRequest (c) 2005 Jeffrey Sambells <info@jeffreysambells.com>
  7.     see info and terms of use: http://jeffreysambells.com/posts/2006/03/06/centralized_ajax_services/
  8. */
  9.  
  10. var XhrCount = 0;
  11. var XhrWatchList = [];
  12. reqjson = [];
  13.  
  14. var Xhr = function() {
  15.     this.ins = ++XhrCount;
  16.     this.u;
  17.     this.so;
  18.     this.w;
  19.     this.wc = 0;
  20.     this.to = 5;
  21.     this.responseText = null;
  22.     this.status = null;
  23.     this.readyState = 0;
  24. };
  25.  
  26. Xhr.prototype.onerror = function() {};
  27. Xhr.prototype.onload = function() {};
  28.  
  29. Xhr.prototype.srs = function(a) {
  30.     if (this.readyState <a || a == 0) {
  31.         this.readyState = a;
  32.  
  33.         if (this.readyState == 2)
  34.         {
  35.             this.srs(3);
  36.             if(typeof reqjson[this.ins] != 'undefined')
  37.             {
  38.                 var re = reqjson[this.ins];
  39.  
  40.                 // this is more secure, but sometimes fails on complex objects
  41.                 //re = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test( re.replace(/"(\\.|[^"\\])*"/g, ''))) && re || false;
  42.  
  43.                 re = re || false;
  44.  
  45.                 this.responseText = re;
  46.                 this.status = (re) ? 'ok' : 'string error';
  47.       }
  48.             else
  49.             {
  50.                 this.status = 'noresult';
  51.                 this.onerror();
  52.             }
  53.  
  54.             this.so.parentNode.removeChild(this.so);
  55.             reqjson = [];
  56.             this.srs(4);
  57.             this.onload();
  58.         }
  59.     }
  60. };
  61.  
  62. Xhr.prototype.load = function(u)
  63. {
  64.     this.u = u;
  65.     this.so = document.createElement('script');
  66.     this.so.id = 'reqjson'+this.ins;
  67.     this.so.charset = 'utf-8';
  68.  
  69.     this.srs(1);
  70.     this.so.type = 'text/javascript';
  71.     this.so.src = this.u + (this.u.indexOf('?') != -1 ? '&': '?') + 'jsonvar=reqjson' + this.ins;
  72.     this.so = document.getElementsByTagName('head')[0].appendChild(this.so);
  73.     XhrWatchList[this.ins] = this;
  74.     this.w = setInterval('XhrWatchList[' + this.ins + '].wl()', 50);
  75. };
  76.  
  77. Xhr.prototype.wl = function()
  78. {
  79.     this.wc++;
  80.     if (typeof reqjson[this.ins] != 'undefined')
  81.     {
  82.         clearInterval(this.w);
  83.         this.srs(2);
  84.     }
  85.     else if ( this.wc>= (this.to*20) )
  86.     {
  87.         clearInterval(this.w);
  88.         this.status = 'timeout';
  89.         this.onerror();
  90.     }
  91. };

The server side

Of course, you need a part on the server to generate the dynamic parts. In this example, we simply output the date, but it can be any data that is expressible with a JSON string (and that's a lot). Save it as ajax.php in the same directory on the server.

PLAIN TEXT
PHP:
  1. <?php
  2.     header("Expires: Mon, 01 Jan 2000 05:00:00 GMT");
  3.     header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
  4.     header("Cache-Control: no-cache, must-revalidate");
  5.     header("Pragma: no-cache");
  6.     header("Content-Type: text/javascript");
  7.  
  8.     // $results could as well be an array or any type of a scalar
  9.     // if you use an array, be sure that the keys and structure match what your JS expects
  10.     $results = date('d.m.Y H:i:s');
  11.  
  12.     $json = json_encode($results);
  13.  
  14.     $reqvar = preg_match('|^reqjson[0-9]+$|', $_GET['jsonvar'])
  15.         ? 'reqjson['.str_replace('reqjson', '', $_GET['jsonvar']).']'
  16.         : 'reqjson[0]';
  17.  
  18.     echo "$reqvar = $json;";
  19. ?>

... and a demo

A little demo to show you the integration into your own project. Save it as demo.html in the same directory as the other two, then load it in your browser.

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5.     <script type="text/javascript" src="request.js"></script>
  6.     <style type='text/css'>
  7.         #main { border: 1px solid #888; padding: 10px; margin: 50px auto; width: 30em; }
  8.         #dynfield { color: #090; }
  9.         #button { border: 1px outset #888; padding: 3px; background: #eee; cursor: pointer; }
  10.     </style>
  11.     <script type='text/javascript'>/* <![CDATA[ */
  12.     window.onload = function()
  13.     {
  14.         var $ = function(el) { return document.getElementById(el); };
  15.  
  16.         // the event to trigger the request
  17.         $('button').onclick = function()
  18.         {
  19.             // if you use an indicator, make it appear here
  20.  
  21.             // any URL, relative or absolute, with parameters or without, even from a third-party server
  22.             var url = "ajax.php";
  23.  
  24.             var http = new Xhr;
  25.             http.load(url);
  26.  
  27.             http.onload = function()
  28.             {
  29.                 // hide your indicator
  30.                
  31.                 // here happens everything you need to perform with your fetched JSON
  32.                 var serverdate = http.responseText;
  33.                 if (serverdate) { $('dynfield').firstChild.data = serverdate; }
  34.             };
  35.  
  36.             http.onerror = function() {
  37.                 // some error handling (and hide indicator)
  38.                 alert('Error: ' + http.status);
  39.             };
  40.         };
  41.     };
  42.     /* ]]> */</script>
  43.     <title>AJAX demo</title>
  44. </head>
  46.     <div id='main'>
  47.         <p>The server date is: <strong id="dynfield"> </strong></p>
  48.         <p><span id="button">retrieve</span></p>
  49.     </div>
  50. </body>
  51. </html>

]]> http://www.codelog.net/codebits/lightweight-json-fetcher-3rd-party-capable/feed Dynamic variables http://www.codelog.net/various/dynamic-variables http://www.codelog.net/various/dynamic-variables#comments Thu, 27 Nov 2008 11:53:27 +0000 Alex http://www.codelog.net/?p=26 What is a dynamic variable, or a variable variable, as they are sometimes called? When you create a variable, you give it a name. Consider this PHP example:

PLAIN TEXT
PHP:
  1. <?php
  2.    $foo = 'test';
  3.    echo $foo;
  4. ?>

The first line will create the variable $foo and assign the string value 'test' to it. In the second line, the content of the variable $foo will be printed. So far, nothing exciting. But now consider this:

PLAIN TEXT
PHP:
  1. <?php
  2.    $bar = 'foo';
  3.    $$bar = 'test';
  4.    echo $foo.$bar;
  5. ?>

(Note the double $ sign at the beginning of the second line.) What happens here? First, the value 'foo' is assigned to the variable bar. In the second line, a variable is created, and this variable's name will be the content of the variable $bar. This means, the variable $foo is created. Hence, the third line will output testfoo. You can also have dynamic variables in arrays and objects, even as function aliases:

PLAIN TEXT
PHP:
  1. <?php
  2.    $foobar = $foo[$bar];
  3.    $foobar = $foo->$bar;
  4.    
  5.    // want to match case sensitive or not?
  6.    $stripos_func = ($casesensitive) ? 'strpos' : 'stripos';
  7.    var_dump( $stripos_func('ABC', 'ab') ); // true if $casesensitive==false
  8. ?>

]]> http://www.codelog.net/various/dynamic-variables/feed Lightweight password generator http://www.codelog.net/codebits/lightweight-password-generator http://www.codelog.net/codebits/lightweight-password-generator#comments Wed, 19 Nov 2008 11:29:17 +0000 Alex http://www.codelog.net/?p=20 Here's a snippet of PHP code that can create passwords. It can create passwords of different lengths, it can use different sets (uppercase and lowercase letters as well as numbers), and it can be told to exclude potentially confusing characters.

PLAIN TEXT
PHP:
  1. <?php
  2. function passgen($length=8, $reqsets='uln', $noconfusing='true')
  3. {
  4.     $length = (int)$length;
  5.     if ($length> 20 || $length <3) $length = 8;
  6.  
  7.     // some characters look alike. let's optionally exclude them.
  8.     $confusing = ($noconfusing === 'true') ? 'O01Il' : '';
  9.  
  10.     $randchars = $token = '';
  11.  
  12.     $sets = array(
  13.         'u' => 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  14.         'l' => 'abcdefghijklmnopqrstuvwxyz',
  15.         'n' => '0123456789'
  16.         // you can even add an own set
  17.     );
  18.  
  19.     if ($reqsets)
  20.     {
  21.         $reqsets = str_split($reqsets);
  22.         foreach ( array_keys($sets) as $availset )
  23.             if ( in_array($availset, $reqsets) )
  24.                 $randchars .= $sets[$availset];
  25.     }
  26.  
  27.     if (!$randchars)
  28.         $randchars = implode($sets);
  29.  
  30.     for ($i=0; $i<=$length; $i++)
  31.     {
  32.         do
  33.         {
  34.             $lpos = mt_rand( 0, strlen($randchars)-1 );
  35.             $letter = substr($randchars, $lpos, 1);
  36.         }
  37.         while ( in_array($letter, str_split($confusing) ) );
  38.  
  39.         $token .= $letter;
  40.     }
  41.     return $token;
  42. }
  43.  
  44. echo passgen($_GET['length'], $_GET['sets'], $_GET['noconfusing']);
  45. ?>

If you intend to use this in a script, please keep in mind that mt_rand() needs to be seeded/initialized properly.

]]> http://www.codelog.net/codebits/lightweight-password-generator/feed Restore SSH Public Key http://www.codelog.net/tips/restore-ssh-public-key http://www.codelog.net/tips/restore-ssh-public-key#comments Tue, 17 Jun 2008 10:58:19 +0000 Alex http://www.codelog.net/tips/restore-ssh-public-key Today I did something stupid: I overwrote an SSH public key with a file from a different machine:

PLAIN TEXT
CODE:
  1. scp id_rsa.pub user@example.org:~/.ssh

Obviously, I wanted to place the Public Key for the account from one machine on the other one to append it to the authorized_keys file of the target account. Unfortunately, I didn't bear in mind that I already had a public key file (id_rsa.pub) in this directory. So I had to re-create the Public Key file from the Private Key. This is quite easy, it appears that the SSH developers already thought of this situation. The following code will restore the Public Key file from the Private Key (example for an RSA key):

PLAIN TEXT
CODE:
  1. cd ~/.ssh; echo "id_rsa" | ssh-keygen -y> id_rsa.pub 2>/dev/null

]]> http://www.codelog.net/tips/restore-ssh-public-key/feed Shell script to optimize all tables in all databases (MySQL) http://www.codelog.net/codebits/shell-script-to-optimize-all-tables-in-all-databases-mysql http://www.codelog.net/codebits/shell-script-to-optimize-all-tables-in-all-databases-mysql#comments Wed, 11 Jun 2008 10:03:22 +0000 Alex http://www.codelog.net/codebits/shell-script-to-optimize-all-tables-in-all-databases-mysql If you have many databases with many write operations, it may be that the table overhead takes a good amount of space. (This is due to the fact that MySQL doesn't free the space of deleted entries.) With "optimizing" the tables, you can free that space.

Save the following script as /usr/local/sbin/optimizealltables.sh, make it chmod 700 (very important!), then replace YOURPASSWORD with your root MySQL password.

PLAIN TEXT
CODE:
  1. #!/bin/bash
  2.  
  3. MYSQL_LOGIN='-u root --password=YOURPASSWORD'
  4.  
  5. for db in $(echo "SHOW DATABASES;" | mysql $MYSQL_LOGIN | grep -v -e "Database" -e "information_schema")
  6. do
  7.         TABLES=$(echo "USE $db; SHOW TABLES;" | mysql $MYSQL_LOGIN |  grep -v Tables_in_)
  8.         echo "Switching to database $db"
  9.         for table in $TABLES
  10.         do
  11.                 echo -n " * Optimizing table $table ... "
  12.                 echo "USE $db; OPTIMIZE TABLE $table" | mysql $MYSQL_LOGIN >/dev/null
  13.                 echo "done."
  14.         done
  15. done

]]> http://www.codelog.net/codebits/shell-script-to-optimize-all-tables-in-all-databases-mysql/feed Clear a sized select field http://www.codelog.net/codebits/clear-a-sized-select-field http://www.codelog.net/codebits/clear-a-sized-select-field#comments Wed, 16 Apr 2008 10:20:06 +0000 Alex http://www.codelog.net/codebits/clear-a-sized-select-field If you have have a select form element with a size attribute, one common option for the user is to leave it empty (especially in combination with multiple). The problem is, as soon as one or more options are selected, it is quite impossible in most browsers, to not select anything at all. And even if there is a way, it is not easy to accomplish. Try for yourself to deselect all items:

With a little JavaScript magic, we can offer a button to clear the select field:

PLAIN TEXT
JavaScript:
  1. function nl_clear_select(element)
  2. {
  3.     var opt_length = document.getElementById(element).options.length;
  4.     for (var i = 0; i <opt_length; i++)
  5.         document.getElementById(element).options[i].selected = false;
  6. }

Now try again to clear the select field. Hint: clicking on "Clear selection" will help a lot. ;)

Clear selection

Neat, eh?

]]> http://www.codelog.net/codebits/clear-a-sized-select-field/feed Get radio button value in JavaScript http://www.codelog.net/codebits/get-radio-button-value-in-javascript http://www.codelog.net/codebits/get-radio-button-value-in-javascript#comments Thu, 10 Apr 2008 11:14:28 +0000 Alex http://www.codelog.net/codebits/get-radio-button-value-in-javascript Here's how to get the currently checked value of radio button section. The parameter elementName is the name attribute of the radio input.

PLAIN TEXT
JavaScript:
  1. function getRadioValue(elementName)
  2. {
  3.     var element = document.getElementsByName(elementName);
  4.     var bt_count = element.length; // can't use element.length in the loop, as it would decrement
  5.  
  6.     for (var i = 0; i <bt_count; i++)
  7.         if (element[i].checked == true)
  8.             return element[i].value;
  9. }

]]> http://www.codelog.net/codebits/get-radio-button-value-in-javascript/feed