My little Codelog » Codebits

March 10th, 2009 at 5:29 pm

JavaScript printf()

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:

var printf = function(string)
{
if (arguments.length <2) { return string; }
for (var i=1; i<arguments.length; i++)
{ string = string.replace(/%s/, arguments[i]); }
return string;
}

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

PLAIN TEXT

JAVASCRIPT:

var pagination = '';
var numpages = 5;
for (var page=1; page<=numpages; page++)
{
pagination += printf('Page %s of %s', page, numpages);
}

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

0 Categories: Codebits Tags: JavaScript, printf()

February 24th, 2009 at 8:48 pm

Implementing PHP functions in JavaScript

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:

function explode(delim, val_to_split)
{
return (val_to_split.indexOf(delim))
? val_to_split.split(delim)
: [val_to_split];
}
function in_array(needle, haystack)
{
hlength = haystack.length;
for (var i=0; i<length; i++)
{ if (needle == haystack[i])
{ return true; } }
return false;
}

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.

0 Categories: Codebits Tags: JavaScript, PHP

December 17th, 2008 at 12:32 pm

Unclutter array definitions in PHP

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:

// currently
$data = compact( array( 'post_author', 'post_date', 'post_date_gmt',
'post_content', 'post_content_filtered', 'post_title', 'post_excerpt',
'post_status', 'post_type', 'comment_status', 'ping_status',
'post_password', 'post_name', 'to_ping', 'pinged', 'post_modified',
'post_modified_gmt', 'post_parent', 'menu_order', 'guid' ) );
// equals
$data = compact( explode('|', 'post_author|post_date|post_date_gmt|post_content|'.
'post_content_filtered|post_title|post_excerpt|post_status|post_type|'.
'comment_status|ping_status|post_password|post_name|to_ping|pinged|'.
'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.

0 Categories: Codebits Tags: array, explode, PHP

December 11th, 2008 at 10:28 am

Lightweight JSON fetcher (3rd party capable!)

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:

/*
XssJsonFetch
(C) 2008 Alex Günsche
Available under the MIT license
based on XssHttpRequest (c) 2005 Jeffrey Sambells <info@jeffreysambells.com>
see info and terms of use: http://jeffreysambells.com/posts/2006/03/06/centralized_ajax_services/
*/
var XhrCount = 0;
var XhrWatchList = [];
reqjson = [];
var Xhr = function() {
this.ins = ++XhrCount;
this.u;
this.so;
this.w;
this.wc = 0;
this.to = 5;
this.responseText = null;
this.status = null;
this.readyState = 0;
};
Xhr.prototype.onerror = function() {};
Xhr.prototype.onload = function() {};
Xhr.prototype.srs = function(a) {
if (this.readyState <a || a == 0) {
this.readyState = a;
if (this.readyState == 2)
{
this.srs(3);
if(typeof reqjson[this.ins] != 'undefined')
{
var re = reqjson[this.ins];
// this is more secure, but sometimes fails on complex objects
//re = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test( re.replace(/"(\\.|[^"\\])*"/g, ''))) && re || false;
re = re || false;
this.responseText = re;
this.status = (re) ? 'ok' : 'string error';
}
else
{
this.status = 'noresult';
this.onerror();
}
this.so.parentNode.removeChild(this.so);
reqjson = [];
this.srs(4);
this.onload();
}
}
};
Xhr.prototype.load = function(u)
{
this.u = u;
this.so = document.createElement('script');
this.so.id = 'reqjson'+this.ins;
this.so.charset = 'utf-8';
this.srs(1);
this.so.type = 'text/javascript';
this.so.src = this.u + (this.u.indexOf('?') != -1 ? '&': '?') + 'jsonvar=reqjson' + this.ins;
this.so = document.getElementsByTagName('head')[0].appendChild(this.so);
XhrWatchList[this.ins] = this;
this.w = setInterval('XhrWatchList[' + this.ins + '].wl()', 50);
};
Xhr.prototype.wl = function()
{
this.wc++;
if (typeof reqjson[this.ins] != 'undefined')
{
clearInterval(this.w);
this.srs(2);
}
else if ( this.wc>= (this.to*20) )
{
clearInterval(this.w);
this.status = 'timeout';
this.onerror();
}
};

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:

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

... 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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="request.js"></script>
<style type='text/css'>
#main { border: 1px solid #888; padding: 10px; margin: 50px auto; width: 30em; }
#dynfield { color: #090; }
#button { border: 1px outset #888; padding: 3px; background: #eee; cursor: pointer; }
</style>
<script type='text/javascript'>/* <![CDATA[ */
window.onload = function()
{
var $ = function(el) { return document.getElementById(el); };
// the event to trigger the request
$('button').onclick = function()
{
// if you use an indicator, make it appear here
// any URL, relative or absolute, with parameters or without, even from a third-party server
var url = "ajax.php";
var http = new Xhr;
http.load(url);
http.onload = function()
{
// hide your indicator
// here happens everything you need to perform with your fetched JSON
var serverdate = http.responseText;
if (serverdate) { $('dynfield').firstChild.data = serverdate; }
};
http.onerror = function() {
// some error handling (and hide indicator)
alert('Error: ' + http.status);
};
};
};
/* ]]> */</script>
<title>AJAX demo</title>
</head>
<body>
<div id='main'>
<p>The server date is: <strong id="dynfield"> </strong></p>
<p><span id="button">retrieve</span></p>
</div>
</body>
</html>

0 Categories: Codebits Tags: AJAX, Cross Site Scripting, JSON, XMLHttpRequest

November 19th, 2008 at 12:29 pm

Lightweight password generator

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:

<?php
function passgen($length=8, $reqsets='uln', $noconfusing='true')
{
$length = (int)$length;
if ($length> 20 || $length <3) $length = 8;
// some characters look alike. let's optionally exclude them.
$confusing = ($noconfusing === 'true') ? 'O01Il' : '';
$randchars = $token = '';
$sets = array(
'u' => 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
'l' => 'abcdefghijklmnopqrstuvwxyz',
'n' => '0123456789'
// you can even add an own set
);
if ($reqsets)
{
$reqsets = str_split($reqsets);
foreach ( array_keys($sets) as $availset )
if ( in_array($availset, $reqsets) )
$randchars .= $sets[$availset];
}
if (!$randchars)
$randchars = implode($sets);
for ($i=0; $i<=$length; $i++)
{
do
{
$lpos = mt_rand( 0, strlen($randchars)-1 );
$letter = substr($randchars, $lpos, 1);
}
while ( in_array($letter, str_split($confusing) ) );
$token .= $letter;
}
return $token;
}
echo passgen($_GET['length'], $_GET['sets'], $_GET['noconfusing']);
?>

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

0 Categories: Codebits Tags: generator, password, PHP

June 11th, 2008 at 11:03 am

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:

#!/bin/bash
MYSQL_LOGIN='-u root --password=YOURPASSWORD'
for db in $(echo "SHOW DATABASES;" | mysql $MYSQL_LOGIN | grep -v -e "Database" -e "information_schema")
do
TABLES=$(echo "USE $db; SHOW TABLES;" | mysql $MYSQL_LOGIN | grep -v Tables_in_)
echo "Switching to database $db"
for table in $TABLES
do
echo -n " * Optimizing table $table ... "
echo "USE $db; OPTIMIZE TABLE $table" | mysql $MYSQL_LOGIN >/dev/null
echo "done."
done
done

1 Categories: Codebits Tags: MySQL, OPTIMIZE TABLE, shell

April 16th, 2008 at 11:20 am

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:

function nl_clear_select(element)
{
var opt_length = document.getElementById(element).options.length;
for (var i = 0; i <opt_length; i++)
document.getElementById(element).options[i].selected = false;
}

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

Clear selection

Neat, eh?

0 Categories: Codebits Tags: JavaScript, multiple, select, size

April 10th, 2008 at 12:14 pm

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:

function getRadioValue(elementName)
{
var element = document.getElementsByName(elementName);
var bt_count = element.length; // can't use element.length in the loop, as it would decrement
for (var i = 0; i <bt_count; i++)
if (element[i].checked == true)
return element[i].value;
}

0 Categories: Codebits Tags: JavaScript, radio buttons

April 3rd, 2008 at 12:06 pm

Calculate interest rates with a shell script

If you put your cash to a bank account, you will want to know how much money you get with a certain amount at a given rate within a given period. Save the following Bash script as /usr/local/bin/loancalc (or something like that), make it executable, and you will be able to calculate the return on your investments with a single one-liner.

PLAIN TEXT

CODE:

#!/bin/bash
function calc()
{
return $(echo "scale=$2; $1" | bc)
}
if [ "$1" == "-h" ] || [ "$1" == "--help" ]; then
echo "$0 calculates the interest loan of a given amount with a given rate for a given duration."
echo "Usage: $0 AMOUNT RATE DURATION"
exit 0
fi
if [ -z "$3" ]; then
echo "Please enter the amount, the rate and the duration (in this order)."
exit 1
fi
AMOUNT=$1
ZINS=$2
DURATION=$3
echo "Investment: $AMOUNT bucks at a rate of $ZINS% for $DURATION years."
echo " Loan Total"
for i in $(seq 1 $DURATION); do
INTERESTLOAN=$(echo "scale=10; ($AMOUNT/100)*$ZINS" | bc)
AMOUNT=$(echo "scale=10; $AMOUNT+$INTERESTLOAN" | bc)
printf "Year ${i} %8.2f " $INTERESTLOAN; printf " %14.2f\n" $AMOUNT;
done
printf "Final amount: %1.2f bucks.\n" $AMOUNT

For example:

PLAIN TEXT

CODE:

you@yourmachine ~ $ loancalc 3000 3.5 5
Investment: 3000 bucks at a rate of 3.5% for 5 years.
Loan Total
Year 1 105.00 3105.00
Year 2 108.68 3213.68
Year 3 112.48 3326.15
Year 4 116.42 3442.57
Year 5 120.49 3563.06
Final amount: 3563.06 bucks.

0 Categories: Codebits Tags: bank, bash, duration, loan

December 18th, 2007 at 10:07 am

Improve loading speed of webpages by compressing HTML

Here's a simple HTML "compressor" in PHP, which will reduce the size of HTML served to the client by 10 to 20 percent, depending on your indentation style and commenting. If many of your readers have lousy bandwidth, the slight overhead of this method is worth it.

PLAIN TEXT

PHP:

<?php
function compress($content)
{
$content = preg_replace('/[\n\t\s]+/s', ' ', $content);
$content = preg_replace('//s', '', $content);
return $content;
}
ob_start();
require "/var/www/htdocs/somefile.php";
$content = ob_get_contents();
ob_end_clean();
echo compress($content);
?>

By the way, if you have a rather hungry dynamic application (e.g. WordPress with certain plugins) on a rather weak server, consider using a caching solution like 1 Blog Cacher, so you don't have to regenerate the pages everytime somebody retrieves them. And, of course, consider using output gzip compression -- be it via webserver modules such as mod_gzip/mod_deflate or based on your web application.

0 Categories: Codebits, Tips Tags: Compression, HTML, Loading Speed, PHP

Archive for the category “Codebits”

JavaScript printf()

Implementing PHP functions in JavaScript

Unclutter array definitions in PHP

Lightweight JSON fetcher (3rd party capable!)

The client side

The server side

... and a demo

Lightweight password generator

Shell script to optimize all tables in all databases (MySQL)

Clear a sized select field

Get radio button value in JavaScript

Calculate interest rates with a shell script

Improve loading speed of webpages by compressing HTML

Categories

Archive

Pages

Meta

Archive for the category “Codebits”

The client side

The server side

... and a demo

Search

Categories

Archive

Pages

Meta