Angle meter

Just released one more just-for-fun project.
Angle meter online

Measure angles on the web.

Convert image to base64

It is extremely simple, and  without server-side:

<script>
    function convertToBase64(event) {
        var file = event.target.files[0];
        var reader = new FileReader();
        reader.onload = function (event) {
            document.getElementById('text').value = event.target.result;
            document.getElementById('text').select();
        };
        reader.readAsDataURL(file);
    }
</script>

<input id="file" type="file" onchange="convertToBase64(event)">
<textarea id="text"> </textarea>

You may use it at: ImageToBase64 or directly from here:


See this project on GitHub

Enable disabled menu in browser

Execute this from the address line:
javascript: (function(){document.oncontextmenu=function(){return true;}})()
or
javascript: (function(){function test(){return true;}; document.oncontextmenu=test;document.onselectstart=test;document.oncontextmenu=test;})()

Get browser language via JavaScript

This is simple cross-browser solution:

var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || 'en').substr(0, 2).toLowerCase();


And usage example:

var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || 'en').substr(0, 2).toLowerCase();
if (lang == 'ru') {
    document.write('Specific Russian text');
} else {
    document.write('Common English text');
}


PHP-reference

I'm happy to introduce one more my project: PHP-reference.

This is the interactive engine for PHP documentation: the client side is implemented with ExtJS/JavaScript, and PHP for server side.
It uses original PHP documentation (processed via regexps and colored with CSS styles) as a data source.

I've tried to create it as usable as possible... any requests, ideas welcome!

Eclipse icons

How to extract icons from Eclipse


I've created it in few steps:

1. Downloaded and unzipped eclipse


2. Extracted all images from eclipse directories, subdirectories, zips and jars*


3. Filtered only unique files*


4. Sorted images by dimension (16x16, 24x24, 32x32, etc.)*


5. Removed large images (that not look like icon)


6. Created html pages (via PHP script)

* Via my shell scripts.

This is one script from this project:

#!/bin/bash

#Find and copy only unique files (with same size and checksums) from $SOURCE directory to $OUTPUT.

SOURCE=output
OUTPUT=images

rm -rf $OUTPUT
mkdir -p $OUTPUT

uniqProcess() {

echo >xqx_unique.idx
while read; do
echo -ne \\r$REPLY
echo $REPLY $(stat -c%s $REPLY)+$(md5sum $REPLY|cut -f 1 -d ' ')+$(cksum $REPLY|cut -f 1 -d ' ')>>xqx_unique.idx
done
sort -k 2 xqx_unique.idx|uniq -f 1|cut -f 1 -d ' '|xargs -I '{}' cp '{}' $OUTPUT
}

find $SOURCE -type f |uniqProcess

MD5 online decryption service

Last week I released new online service: MD5 Online.

It provides online encryption and decryption functionality of MD5 hashes.

HowTo override and substitute document.write function in JavaScript (sample)

It is pretty simple to wrap document.write function in JavaScript.

For example - using closures:

<script id="source" type="text/javascript">
    function wrapString(str) {
        return "(" + str + ")";
    }
    
    document.write = function(w) {
        return function(s) {
            w.call(this, wrapString(s));
        }
    }(document.write);

    document.write("Hello");
    document.write("world");
</script>

This "advanced piece of engineering" prints string: (Hello)(world)

How do you like it?

Xml elements and attributes in the ExtJS table

Ext JS - JavaScript Library is pretty powerful JavaScript/AJAX framework for building of Rich Internet Applications.

I've used it in my last public web project: Ubuntu index.


ExtJS has set of useful UI controls, internal components and strong AJAX, XML and JSON support.

E.g. you can present this XML file:

items.xml

<?xml version="1.0"?>

<items>

    <item id="alien-arena">
        <name>Alien Arena</name>
    </item>

    <item id="nexuiz">
        <name>Nexuiz</name>
    </item>

    <item id="openarena">
        <name>OpenArena</name>
    </item>

</items>

as a table via this HTML + JavaScript code:

table.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>ExtJS Table Sample</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
</head>
<body>

<script type="text/javascript">
    Ext.onReady(function() {
        var reader = new Ext.data.XmlReader({record: "item"},
                [{name: "id", mapping:"@id"}, "name"]);

        var store = new Ext.data.Store({url: "items.xml", reader: reader});

        var columnModel = new Ext.grid.ColumnModel([
        {header: "Id", dataIndex: "id"},
        {header: "Name", dataIndex: "name"}]);

        var table = new Ext.grid.GridPanel({
            store: store,
            height: 200,
            cm: columnModel,
            renderTo: "table"
        });
        store.load();
    });
</script>

<div id="table" style="width:300px; height:200px;"></div>
</body>
</html>

HTML Encoder

I've released new online service: HTML Encoder
It replaces ampersands, tabs, less/greater braces and prepares source code for posting into blog.

If you prefer shell scripts, you may use this:

sed -e 's/\x26/\&/g;s/\x3c/\</g;s/\x3e/\>/g' sourcefile.txt | expand -t 4 >sourcefile.blog

See this project on GitHub

Javascript injection

There is the way to include javascript into any html pages via 'javascript:' protocol. Internet Explorer and FireFox support this.
Just open web page and replace site's URL with some javascript e.g.: javascript: alert('WOW!');

I've released online tool for web developers that based on this feature - Hyperbox. Developers can use it for design tasks.

It is simple to use:

• Open any site (e.g.: google.com).
  
• Replace site's URL with this string:
  
  
javascript:(function(){var s=document.createElement('script'); s.src='http://xantorohara.jino-net.ru/hyperbox/hyperbox.js'; s.type='text/javascript'; document.getElementsByTagName('head')[0].appendChild(s); })();

  
  
• Move it, resize, change color and borders, measure.
  
  

This javascript tool is absolutely free for using and modifying.
Everybody may download the script from my site and investigate it.

Interleaved table

Every time I hear question: "How to paint odd and even rows in html table in different colors".



Here is the example how to do it simple:

<html>
<head>

    <style type="text/css">

        .odd {background-color: #eee;}
        .even {background-color: #fff;}

    </style>

    <script type="text/javascript">

        function zebra(tableId)
        {
            var table=document.getElementById(tableId);
            if (table)
            {
                var rows = table.getElementsByTagName("tr");

                for (var i = 0; rows.length > i; i++)
                {
                    rows[i].className = ((i % 2) == 0 ? "odd" : "even");
                }
            }
        }

    </script>
</head>

<body>

<table id="irregular">
    <tr>
        <td>break</td>
        <td>broke</td>
        <td>broken</td>
    </tr>
    <tr>
        <td>buy</td>
        <td>bought</td>
        <td>bought</td>
    </tr>
    <tr>
        <td>catch</td>
        <td>caught</td>
        <td>caught</td>
    </tr>
    <tr>
        <td>forget</td>
        <td>forgot</td>
        <td>forgotten</td>        
    </tr>
</table>


<script type="text/javascript">
    zebra("irregular");
</script>

</body>
</html>

HowTo move objects within the html page via JavaScript

For one of my web projects I created universal JavaScript for moving any objects within the page. This is my simple Drag and Drop implementation.
I'm publishing this source. I think, it will be illustrative and useful example.


This screenshot shows how to this script works.

<html>

<body>

<style type="text/css">
    .movable {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: yellow;
        cursor:pointer;
        border:solid 1px gray;
    }
</style>

<script type="text/javascript">

    var posx;
    var posy;
    var zMax = 0;
    var obj;

    function drag_start(itemToMove, e)
    {
        itemToMove.style.zIndex = ++window.zMax;
        if (!e) e = window.event;
        obj = itemToMove;
        posx = e.clientX - parseInt(obj.style.left);
        posy = e.clientY - parseInt(obj.style.top);
        itemToMove.style.cursor="move";
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
    }

    function drag_stop(e)
    {
        if (obj) {
            obj.style.cursor="pointer";            
            obj = null;
        }
    }

    function drag(e)
    {
        if (!obj) return;

        if (!e) e = window.event;

        var height, width;
        if (document.all)
        {
            height = document.body.offsetHeight;
            width = document.body.offsetWidth;
        }
        else if (document.layers)
        {
            height = window.innerHeight;
            width = window.innerWidth;
        }
        var newX = e.clientX - posx;
        var newY = e.clientY - posy;
        if (newX < -obj.clientWidth / 2)
        {
            newX = -obj.clientWidth / 2;
            posx = e.clientX - parseInt(obj.style.left);
        }
        if (newY < -obj.clientHeight / 2)
        {
            newY = -obj.clientHeight / 2;
            posy = e.clientY - parseInt(obj.style.top);
        }

        obj.style.left = newX;
        obj.style.top = newY;

        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
    }

    document.onmousemove = drag;
    document.onmouseup = drag_stop;

    document.ondragstart = function()
    {
        return false;
    }
    document.onselectstart = function()
    {
        return false;
    }
</script>

<div class="movable" style="left:100px; top:100px;" onmousedown="drag_start(this,event)"></div>
<div class="movable" style="left:200px; top:200px;" onmousedown="drag_start(this,event)"></div>
</body>
</html>

E.g.: I used this script in my Online Ruler.
You may see how it works, see in action.