February 17, 2009

syncing the time on linux debian

Nikolai Kordulla

0 comments >>

To sync the time on a linux system, with every reboot. Just install ntpdate
>apt-get install ntpdate
>crontab -e
add the following line to the crontab
@reboot ntpdate ntp.ubuntu.com
if you want to sync once a day just add the following line to the crontab via >crontab -e
36 4 * * * ntpdate ntp.ubuntu.com
so every da at 4:36 am the time will be synced.

October 10, 2008

onload event in javascript

Nikolai Kordulla

0 comments >>

You can add a to the body tag. But what, if you want to change the onload event programatically, or if you cant change the body tag? Just use this code (tested on safari, chrom, ie6, ie7 and firefox):
    /* for Mozilla */
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", init, false);
    }

    /* for Internet Explorer */
    /*@cc_on @*/
    /*@if (@_win32)
        document.write("<script defer src='http://coderpeek.com/js/ie_onload.js'><"+"/script>");
    /*@end @*/

    /* for other browsers */
    window.onload = init;

September 30, 2008

Loading javascript with document.write inside at the end of a page

Nikolai Kordulla

0 comments >>

For performance reasons (see YSlow for more), you should always load ad banner, which are loaded by javascript, at the end of your page. But what should you do, if the script inside the ad banner uses document.write, like Google adsense and most of all other ad networks?

Use an ad div at the end, and move it to the position, where the ad banner should be displayed. I use Google Adsense for the example.
<html>
<body>
<div id="before">Text before the ad</div>

<div id="ad_page"></div>

<div id="after">Text after the ad</div>


<div id="ad" style="display:none;">
<script type="text/javascript">
	google_ad_client = "pub-2032116925414797";
        google_ad_slot = "2428663897";
        google_ad_width = 468;
        google_ad_height = 60;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<script type="text/javascript">
// move it to the real ad position	
document.getElementById('ad_page').appendChild(document.getElementById('ad'));
// show it
document.getElementById('ad').style.display = 'block';
</script>

</body>
</html>

July 21, 2008

Google Translate API

Nikolai Kordulla

0 comments >>

Today I implemented a google translate api for protocol buffers. To use this api in php just download google protocol for php, then create the following proto file:
message TranslateRequest
{
  optional string sl = 1 [default = 'en'];
  optional string tl = 2 [default = 'de'];
  optional string text = 3;
}

message TranslateResponse
{
  optional string text = 1;
}
throw it in the parser (it will automatically create the file pb_proto_translate.php)
require_once('../pb/parser/pb_parser.php');
// just create the protoclasses
$parser = new PBParser();
$parser->parse('./translate.proto');
and write the following code to translate the phrase "the night is dark, and the day is bright" to simplified chinese.
// charset utf-8
header('Content-Type: text/html; charset=UTF-8');

// first include pb_message
require_once('../message/pb_message.php');

// include the generated file
require_once('./pb_proto_translate.php');

// set up the translationrequest
$t = new TranslateRequest();
$t->set_sl('en');
$t->set_tl('zh-CN');
$t->set_text('the night is dark, and the day is bright');

$tr = new TranslateResponse();
$t->Send('http://coderpeek.com/api/translate', $tr);

echo 'Translation:';
echo $tr->text();
the following chars will then appear on your screen
Translation:夜是黑暗的,和天是光明的

July 17, 2008

Protocol Buffer for PHP

Nikolai Kordulla

1 comments >>

I implemented a protocol buffer version for php with native parseing of .proto files and php native encoding and decoding of messages. Addressbook represented through a .proto file
message Person
{
  required string name = 1;
  required int32 id = 2;
  optional string email = 3;

  enum PhoneType {
    MOBILE = 0;
    HOME = 1;
    WORK = 2;
  }

  message PhoneNumber {
    required string number = 1;
    optional PhoneType type = 2 [default = HOME];
  }
  // a simple comment
  repeated PhoneNumber phone = 4;
  optional string surname = 5;
}

message AddressBook {
  repeated Person person = 1;
}
and here the php code to create a person and save the complete addressbook to test.pb
$book = new AddressBook();
$person = $book->add_person();
$person->set_name('Kordulla');
$person->set_surname('Nikolai');

$phone_number = $person->add_phone();
$phone_number->set_number('49');
$phone_number->set_type(Person_PhoneType::WORK);

$phone_number = $person->add_phone();
$phone_number->set_number('171');
$phone_number->set_type(Person_PhoneType::MOBILE);

// serialize
$string = $book->SerializeToString();

// write it to disk
file_put_contents('adressbook.pb', $string);

To read the addressbook and the saved person just do this:
$string = file_get_contents('./test.pb');

// Just read it
$book = new AddressBook();
$book->parseFromString($string);

var_dump($book->person_size());
$person = $book->person(0);
var_dump($person->name());
var_dump($person->surname());
var_dump($person->phone(0)->number());
var_dump($person->phone(0)->type());
var_dump($person->phone(1)->number());
var_dump($person->phone(1)->type());

For read further example and code snippet just go to http://code.google.com/p/pb4php/ . You can download the sources with example.

July 15, 2008

ReplaceAll in Javascript

Nikolai Kordulla

0 comments >>

In javascript you only have replace. If you want to use replaceall just do this.
string.replace(/\W+/g, '-');
The g stands for ReplaceAll. So in this case all non word characters will be replaced with '-'.

July 14, 2008

XSLT Transformation with javascript

Nikolai Kordulla

0 comments >>

XSLT - eXtensible Stylesheet Language Transformation - is a very strong stylesheet language. I will show you, how to transform a xmlString via xslt, in javascript.

Javascript
function XSLTHelper(xslt)
{
  this.xmls = null;
  this.processor = null;
  this.xslt = null;
  this.xslt_file = xslt;
  this.src_doc = null;

  this.init = function()
  {
    if (window.ActiveXObject)
    {
      this.xslt = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
      this.xslt.async = false;
      this.xslt.load(this.xslt_file);
      var template = new ActiveXObject("MSXML2.XSLTemplate");
      template.stylesheet = this.xslt;
      this.processor = template.createProcessor();
    }
    else
    {
      this.processor = new XSLTProcessor();
      this.xslt = document.implementation.createDocument("", "", null);
      this.xslt.async = false;
      this.xslt.load(this.xslt_file);
      this.processor.importStylesheet(this.xslt);
      this.src_doc = document.implementation.createDocument("","", null);
      this.src_doc.async = false;
      this.xmls = new XMLSerializer();
    }
  }

  this.init();

  this.transform = function(xmlString)
  {
    if (window.ActiveXObject)
    {
      this.src_doc = new ActiveXObject("Microsoft.XMLDOM");
      this.src_doc.loadXML(xmlString);
      this.processor.input = this.src_doc;
      this.processor.transform();
      var output = this.processor.output;
    }
    else
    {
      var parser = new DOMParser()
      this.src_doc = parser.parseFromString(xmlString, "text/xml")
      result = this.processor.transformToDocument(this.src_doc);
      this.xmls = new XMLSerializer();
      var output = this.xmls.serializeToString(result);
    }

    return output;
  }
}

var test = new XSLTHelper('./example.xsl');
// just alert the output
alert(test.transform('<edit_preview><youtube>viOSJmzYFq0</youtube></edit_preview>'));

Sample XSLT
<?xml version="1.0" encoding="UTF-8"?>
<!-- The main xsl file for the api website -->
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">

<xsl:output method="html" encoding="utf-8" indent="yes" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>

<xsl:template match="edit_preview">
<div lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<xsl:apply-templates/>
</div>
</xsl:template>


<!-- code tag -->
<xsl:template match="code">
<pre class="prettyprint"><xsl:call-template name="cr2br"><xsl:with-param name="text" select="."/></xsl:call-template></pre>
</xsl:template>

<!-- quote tag -->
<xsl:template match="quote">
<q><xsl:call-template name="cr2br"><xsl:with-param name="text" select="."/></xsl:call-template></q>
</xsl:template>

<!-- paragraph tag -->
<xsl:template match="paragraph">
<xsl:apply-templates/>
</xsl:template>

<!-- link tag -->
<xsl:template match="a">
<a href="http://coderpeek.com/xslt/%7B@href%7D"><xsl:apply-templates/></a>
</xsl:template>

<xsl:template match="br">
<br/>
</xsl:template>

<xsl:template match="youtube">
<object width="570" height="461">
<param name="movie" value="http://www.youtube.com/v/{.}&amp;hl=en&amp;fs=1"/>
<param name="allowFullScreen" value="true"/>
<embed width="570" height="461" src="golb-Dateien/a.txt" type="application/x-shockwave-flash" allowfullscreen="true"/></object>
</xsl:template>

<xsl:template match="img">
<img src="golb-Dateien/src.htm" alt="{@alt}" title="{@title}"/>
</xsl:template>

</xsl:transform>

I personally use this function, to make a preview for my articles on this blog.

July 10, 2008

Browser and System independent developing

Nikolai Kordulla

0 comments >>

If you want to write browser independent html and css code, you have sometimes test on different machines, because of all the render bugs which are existing in different engines.

One way is to run virtual machines on your computer. There i found a nice workarround on youtube. The os is Mac OS/X, where two instances of parallel desktop are running (Windows XP and Windows Vista).

So you can test your website on three different systems.

Window Object in Javascript

Nikolai Kordulla

0 comments >>

The window object which you can use in javascript is one of the unestimated things in javascript. You can have access on every function, object with the window object. To call an alert you can use window['alert']('hello').

I personally use the window object often for callback functions like you can see in this simple example:
<script type="text/javascript">
function Show()
{
   this.randomString = 'sdsdsifiifg11fdf';
   window[this.randomString] = this;

   this.doAction = function()
   {
      var call = new Callback();
      call.makeCallback(this.randomString, 'doCallback');
   }

   this.doCallback = function()
   {
      alert('Called');
   }
}

function Callback()
{
   this.makeCallback = function(obj, func)
   {
      window[obj][func]();
   }
}

var test = new Show();
test.doAction();
</script>