Diskotek: Second Iteration

second iteration of diskotek development will be bigger than the first.
I am currently working on a scripting language called beeScript.
Thought behind beeScript is to have an automation language for the debugger like some modern debuggers have.

Currently it looks something like this(as development goes on it may change):

def doThat()
variable=5
def doThis()
variable=3
place = 0x80000000
memory.place = 'nop'
variable = memory.place
if variable == 3
doThat()
else
doThis()
while variable
variable=variable-1

I plan to add something like this:

memory.headers.elfHeader
fImage.headers.elfHeader
fImage.headers.relocations

Also plan to integrate Ace editor in main page.
BeeScript implementation is in CoffeeScript it has compiler in CoffeeScript that produces something
that might be called “code”, it’s a stack of functions.
That generated content is then turned over to simple stack machine runner that runs those functions one by one.

Besides scripting togetherJS is half integrated on page it needs more work.
x86 support is added.
It has support for editing of raw bytes when user selects rows and then presses shift+enter. ctrl+enter will open instruction editing that does not work now.
It opens up editbox where one can enter new bytes. If they do not fit it is error.
That is all located in development branch.

CoffeeWatch flickering

if you use https://github.com/kchmck/vim-coffee-script and CoffeeWatch feature causes screen to flicker
here is the alternative

add this to vimrc
“make coffeescripts auto compile on save
autocmd BufWritePost *.coffee silent make!
“make buffer autorelaod on disk change
:set autoread

1. compile a coffeescript script
2. open the compiled script in for example vertical window
now on save the compiled script will be autoreloaded in vertical window

bacon socket io plugin

Here is the plugin for baconjs to support socket.io https://github.com/NikolaMandic/baconjs-socketio-plugin use it like this

<code>

var socket = io.connect(address);
var stream = socket.asEventStream(“news”);

stream.onValue(function(v){
console.log(v);
});

</code>

Web development resources

a way of keeping yourself up to date:

http://www.smashingmagazine.com/
good magazine about web dev. Lots of links on what is going on, what people are using.

http://webplatformdaily.org/
gives news on various topics like news/posts/methodology/tools
they have feed so one can subscribe to it.

http://tech.pro/
they have a newsletter where one can subscribe

http://sitepoint.com
well known web resource.

http://webdesign.tutsplus.com/
has quality authors working on releasing tutorials. Also tutsplus.com has more subdomains

http://alistapart.com/
web related

http://www.echojs.com/
js news. Keeps you up to date on what’s up in js world

http://uptodate.frontendrescue.org/
bunch of links. It has a lot of experts on twitter, they have blogs worth looking etc. I looked at that list long ago when it was just started and then there were people not on that list that are worth following and a way to get to them may be in looking publication authors in newsletters/tutorials, authors of libraries etc. or looking who is followed by the people on the list 😀 😀 and so on

http://lanyrd.com/
often has web dev related conferences with videos.

then there are newsletters:
web design weekly
html5 weekly
The Modern Web Observer
JavaScript weekly
Kale Davis @hackernewsletter.com

Nice way to manage all this is to find a replacement for the google reader and subscribe to all the links so that it will all be lumped in one place.

The stuff that can not be managed this way can be read trough email or twitter/deck. Some of the content sources that can be found trough these links can be found on various social media for example google+ and youtube. Once you subscribe/follow a few of them there will be suggestions :-D.

also a not soon to expire resource : http://jsbooks.revolunet.com/#

and if the software you find for lumping content sources you chose to read does not have options to bookmark you might use something like evernote
here are two google reader replacements :
http://theoldreader.com
or the one I found latter : http://goodnoows.com/

diskotek: ui for gdb and binary utilities in JavaScript

If you ever tried debugging a binary in linux for example arm binary in elf format for your homework study etc. you might have ended up struggling with command line gdb interface. You remember all kind of goodness IDA pro has and yet you are stepping trough instructions with ni, typing info register commands and then something breaks 😀

Gdb is a great tool and it’s everywhere. This project is a try to make an UI for gdb that makes debugging with it a nicer, shinier experience.

this ui uses not just gdb but objdump and readelf utilities. Here is a overview of basic project features in this first alpha version :

there are two views:
debug view
debug shows basic disassembly of current surrounding of instruction executed + registry view. And it has command windows that allow execution of gdb commands. Widgets can be resized and moved.
there are basic run/step trough/step into controls. Breakpoints can be set by clicking on a address.

a

disassembly view
disassembly view shows a file starting with graphical representation of it’s headers.Field size corresponds to width of a block drawed. There are 16 byte, DWORD , WORD fields.

qb
Other file parts like sections follow headers.

qa

They are layed out just like they are in file on disk and can be shown in different views like disassembly view, hex dump and graphical representation that shows basic blocks of a section.

qq

github page

using d3 and Raphaël together

using d3 with Raphaël for rendering

d3 library is described as set of functions that helps you make better use of the standards.

The idea is you know for example svg and you have some data and you use d3 to make it easier to create and mess around with svg elements depending on the data. D3 can mess around not just with svg it helps setting attributes on for example html.

Or it can let you call your own JavaScript function.But if you write something for svg it may not work on a browser that does not support it.On the other hand there is Raphaël a library that has api for manipulating vector graphics across browsers.

So here is hello world example on how to use d3 with Raphaël with no extra code. D3 will be used for its data functions and Raphaël will be used to render it all.

Instead of using data and d3 to create svg elements, data and d3 can be used with Raphaël to render what is needed.

var r = Raphael('holder',1500,2000);
d3.select("#holder").select(function(){
return ; //this is needed so that first data element would not bind to holder
}).data([
{exampleText:'text2'},
{exampleText:'text1'},
]).enter().call(function(ii){
//ii[0] array of elements
_.each(ii[0],function(i){
// for each element render it with Raphaël
///this is just some code that uses Raphaël to render elements
var el = i.__data__;
r.setStart();
rect = r.rect(rx,ry,uW*elW,height).attr({
fill:Raphael.getColor(),
stroke:Raphael.getColor(),
'fill-opacity':0,
'stroke-width':2
});
rect.attr({title:el.comment});
var tel=r.text(rx+1+uW*elW/2,ry+1+fH/2,el.exampleText);
if(rx>=16*uW){
rx=10;
ry+=51;
}
r.setFinish();
///end of just some code that used Raphaël to render elements
});

});

javascript trivial tricks

Recently I’ve been developing an app that relies heavily on socket.io to do it’s work. So when one needs to debug such an app there is an option to:

write all at once and hope it works do little changes etc. something like waterfall model 🙂

or

reload, click trough your use case and inspect over and over

or

hack something up to enable messing around with code with more speed.

people that talk about performance say that if search time of google drops then people tend to search less.

So maybe hacking something up will in the end give better code 😀

One can fire up console in chrome devtools and do something like this:

if(!window.callbackSet){

    socket.on(‘news’,function(data){window.callback(data);});

}

window.callbackSet=1;

socket.emit(‘exec’,{});

window.callback=function (data){

    debugger; // breakpoint

}

Then listener will be set on news event only first time, while callback function can be changed over and over. Devtools console enables multi line editing with Shift+Enter

This is a trivial trick but it changed the way I develop my socket.io app since app has to do bunch of work parsing the response it offers speedy debuggable solution. You can set a breakpoint if you put “debugger;” somewhere. Now I develop entire socket.io feature in console and then just integrate it in app.

also on setting comments :

function(){

some code here;

//*/ //this line changes nothing just stands here

}

but now if you add /* like this everything is commented out 😀

function(){

/*

some code here;

//*/ //this line changes nothing just stands here

}

Hash function

Hash functions are often used to map a range of values to a smaller range
for example: you have bunch of pointers/integers/keys and you want to put them in a small array.
So what should a computer do to find out at what spot in array to put a key if there is only room for  100 keys?

there are many methods for doing that
simple one is to calculate key mod 100
here is a description of another one that uses floating point number format

code in C:

union{
float f;
int i;
}u;
u.i=key;
uf.i=uf.i&0x3f7fffff;
uf.i=uf.i|0x3f000000;
return uf.f*100

now how this works :
if we look at the 32 bit value of a key as a number in floating point format that C uses
this line
uf.i=uf.i&0x3f7fffff
will make the sign bit, first and last exponent bits 0 while keeping all other bits as they were
this line
uf.i=uf.i|0x3f000000;
will set to 1 exponent bits between first and the last while keeping all other bits the same
so it will convert this integer/pointer  to a number between 0 and 1
that is nice since the bits manipulated were the upper bits and if a pointer is hashed they usually stay the same while the lower bits change because memory is allocated in one memory area called heap

now all that’s left is to multiply that floating point number with length of array to get its place in array

return uf.f*100

What it may be useful for? Maybe implementing a hash table for a new programming language 😀 but there are many other solutions so maybe it’s better to try a bunch of them out and do some benchmarking 🙂

assemble arm/x86 instruction

My first blog post ^^

here is command line to assemble one arm instruction to get it’s memory representation

echo "sub pc,pc,pc" > /tmp/aa.txt ; arm-linux-gnueabi-as /tmp/aa.txt -o/tmp/a.o; arm-linux-gnueabi-objdump -d /tmp/a.o | sed -rn "s/.*\s+([a-f0-9]{8})\s+.*/\1/p"

what it might be useful for? maybe patching arm binary in memory or on disk

Update:

this is the x86 version

echo "call 0xffffffff" > /tmp/aa.txt ; as /tmp/aa.txt -o/tmp/a.o; objdump -d /tmp/a.o | sed -rn "s/.*[0-9]+:\s+(([a-f0-9]+\s+)+)\s+.*/\1/p"