Web Programming

For discussions about programming, programming questions/advice, and projects that don't really have anything to do with Puppy.
Message
Author
User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#31 Post by technosaurus »

an example using the (now deprecated) twitter search api

Code: Select all

<html><head><title>Twitter Search</title>
<style>
.box{width:25%;top:65px;height:75%;overflow:auto}.sbox,.box{position:absolute;border:5px solid gray;padding:5px}.sbox,#l{left:5%}#c{left:35%}#r{left:65%}
</style>
<script>
var termsl,termsc,termsr
function foo(data){var term=document.getElementById("term").value
var l=document.getElementById("l"),c=document.getElementById("c"),r=document.getElementById("r")
if((termsc != term)&&(termsl != term)){termsr=termsc
r.innerHTML=c.innerHTML}if(termsl != term){termsc=termsl
c.innerHTML=l.innerHTML}termsl=term
l.innerHTML=term+"<br><hr>"
for (var i=0;i<data.results.length;i++){var result=data.results[i]
l.innerHTML+='<span><a href="http://twitter.com/#!/'+result.from_user+'/status/'+result.id_str+'"> <img width="24" height="24" src="'+result.profile_image_url+'"> '+result.from_user+'<a>: '+result.text+'</span><br>'}}
srch=function(){var term=document.getElementById("term").value,script=document.createElement("script");
script.src="http://search.twitter.com/search.json?q="+term+"&callback=foo"
document.body.appendChild(script)}
</script>
</head>
<body><form class="sbox" action="javascript:srch()">
<input id="term" name="term" type="textbox"/><input type="submit" value="Twitter Search"/></form>
<div id="l" class="box"></div><div id="c" class="box"></div><div id="r" class="box"></div>
</body></html>
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
L18L
Posts: 3479
Joined: Sat 19 Jun 2010, 18:56
Location: www.eussenheim.de/

#32 Post by L18L »

technosaurus wrote:an example using the (now deprecated) twitter search api
technosaurus out now :?:
Attachments
twitter.png
(49.58 KiB) Downloaded 1990 times

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#33 Post by technosaurus »

Here is a drag and drop example:

(tested on IE 5.5, 6, 8 & 9 using IETester and Seamonkey-2.14 - so should verify for Firefox too, as well as Chrome and Opera, but drag/drop is broken in safari-5.1.7 for windows/wine, so use 5.0.6 - I think apple intentionally broke things for the windows client)

here are functions

Code: Select all

function drag(ev){ //we will just store the inner html of our drag tag - it could be id, class or something else
	ev.dataTransfer.setData("Text",ev.target?ev.target.innerHTML:event.srcElement.innerHTML) //IE needs "Text" and others are fine with it
}
function drop(ev){
	if(ev.preventDefault){ev.preventDefault();  //or mozilla will navigate to the url.com of the text
		ev.target.innerHTML=ev.dataTransfer.getData("Text") //we are replacing the inner html of our drop with our drag
	}else{event.returnValue=false //ie workaround does not have preventDefault or target
		event.srcElement.style.backgroundColor=ev.dataTransfer.getData("Text")
	}
}
Notes on the html:
older versions of _some_ browsers only support dragging "a" or link tags, so use it with a blank href
we need to set draggable to true for the items we want to be able to drag
we also need to get the draggable, so we set ondragstart to our drag function and pass it the event
we also need to override the default function of ondragover - return false will do this nicely (or you _could_ use a function to preventDefault, but it is not browser independent)
and finally we need to do something with our drop event, so we set ondrop to pass the drop event to our drop function

Code: Select all

<a href="#" id="dragme" draggable="true" ondragstart="drag(event)">content to drag</a>
<div id="drophere" ondrop="drop(event)" ondragover="return false">a place to drop</div>
but since we used <a> tags, it will look like a link, so we need to add some css to fix that

Code: Select all

#dragme,#drophere{text-decoration:none;color:black}
note the link is href="#", a non-existent nav point, so that clicking on it instead of dragging doesn't cause a page reload (as href="" would)

All of the above css and html can be created dynamically in your script, but I split out as much as possible to show the basic principals


and the example:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><title>dragable colors</title><meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
#drop{left:15%;width:70%;top:65px;height:75%;overflow:auto}
#drop,#y,#r,#b{position:absolute;border:5px solid gray;padding:5px}
#r{left:35%;color:red}#b{left:45%;color:blue}#y{left:55%;color:yellow}
#r,#y,#b{width:5%;text-align:center;background:lightgray;text-decoration:none}
</style>

<script>
function allowDrag(event){
	if(event.preventDefault){
		event.preventDefault();
	}else{
		event.returnValue=false;
	}
	return false
}
function drag(ev){
	ev.dataTransfer.setData("Text",ev.target?ev.target.innerHTML:event.srcElement.innerHTML)
}
function drop(ev){alert;
	if(ev.preventDefault){ev.preventDefault();
		ev.target.style.backgroundColor=ev.dataTransfer.getData("Text")
	}else{event.returnValue=false //ie workaround
		event.srcElement.style.backgroundColor=ev.dataTransfer.getData("Text")
	}
}
</script>

</head>

<body>
<a href="#" id="y" draggable="true" ondragstart="drag(event)">yellow</a>
<a href="#" id="r" draggable="true" ondragstart="drag(event)">red</a>
<a href="#" id="b" draggable="true" ondragstart="drag(event)">blue</a>
<div id="drop" ondrop="drop(event)" ondragover="allowDrag(event)">drag a color to this box</div>
</body>

</html>
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#34 Post by technosaurus »

I've been thinking about writing my own javascript library designed for "static" compiles, but though I was pretty certain it is needed, I figured I would scope out the top libraries and see how they compared with fully optimized compiles.

I did my little bloat comparison of javascript libraries to see how well they "statically" compile using the closure compiler service at http://closure-compiler.appspot.com/home

My method:
include 1 and only 1 javascript library and a simple hello world alert function that doesn't use any code from the library and build with full optimization

turns out they really are horrible for dead code elimination, except google's base.js (which is horrible for other reasons)

The library that I am working on (a.js... a reference to static archives) compiles down to zero if the code isn't used. The idea is to only add functions that aren't so complex that they prevent optimization (for example no functions that take a function as an argument)
Attachments
comparison.png
(5.7 KiB) Downloaded 1460 times
Book1.html.gz
(771 Bytes) Downloaded 729 times
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#35 Post by technosaurus »

for debugging:

Code: Select all

/*@const*/
DEBUG=2
if(DEBUG){

/*@const @constructor*/
Object.defineProperty(window,'__stack__',{get:function(){
	try{_ფ_()}catch(e){return e.stack.split(":")}
}})

/*@const @constructor*/
Object.defineProperty(window,'__file__',{get:function(){
	var s=__stack__,l=s.length
	return (isNaN(s[l-2]))?s[l-2]:s[l-3]
}})

/*@const @constructor*/
Object.defineProperty(window,'__line__',{get:function(){
	var s=__stack__,l=s.length
	return (isNaN(s[l-2]))?s[l-1]:s[l-2]
}})

/*@const @constructor*/
Object.defineProperty(window,'__col__',{get:function(){
	var s=__stack__,l=s.length
	return (isNaN(s[l-2]))?"NA":s[l-1]
}})

/*@const @constructor*/
Object.defineProperty(window,'LOG',{
	get:function(){return out},
	set:function(msg){if(DEBUG>1)out=msg+"\t-\t"+__stack__
		else out=msg+" in file:"+__file__+" @ Line:"+__line__+", Column:"+__col__
		console.log(out)}
})
}//end if(DEBUG)
usage:
LOG="hello world"

or:
alert("my message at line:"+__line__)
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#36 Post by technosaurus »

this is some server side javascript for node.js, it takes any url and wraps the response in a callback. In other words it is a helper that converts JSON to JSONP for cross site scripting.

example that will get imdb json and wrap it in a callback called hello
localhost:8080/?callback=hello&host=www.imdb.com&path=/xml/find?json=1&nr=1&nm=on&q=jackson

Code: Select all

var http = require('http');
http.createServer(function (req, res) {
	res.writeHead(200, {'Content-Type': 'application/javascript'});
	var q=req.url.split('?'),p,i,h,f
	if(q.length>1)p=q[1].split('&'),i=p.length;else return;
	
	while(i--){
		if(p[i].split('=')[0]=="callback"){res.write(p[i].split('=')[1]+'(')}
		if(p[i].split('=')[0]=="host"){h=p[i].split('=')[1]}
		if(p[i].split('=')[0]=="path"){f=p[i].split('=')[1]}
	}
	if(h&&f&&q[2])http.get({host:h,port:80,path:f+'?'+q[2]},function(r){
		r.on('data', function(d){res.write(d.toString())})
		r.on('end', function(){res.write(')');res.end()})
	}).on('error',function(e){console.log(e.stack)})
}).listen(8080, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8080/');
Oh, what the hell, here is a simple puppy-ish alternative that can run with only busybox.

Code: Select all

#!/bin/sh
CB="${QUERY_STRING%%&*}"
case "$CB" in
	callback=*)
		printf "Content-type: application/javascript

${CB##*=}("
		wget -O - ${QUERY_STRING#*&}
		printf ")"
	;;
	*)
		exit
	;;
esac
Note: busybox would need to be configured to enable httpd with cgi support, wget and either ash or hush (should be ~100kb binary)

Edit: I made the shell version output gzipped data

Code: Select all

#!/bin/sh
CB="${QUERY_STRING%%&*}"
case "$CB" in
	callback=*)
		printf "Content-Encoding: gzip
Content-type: application/javascript

" #todo clean up this while loop hack
		while ([ ! "$ONCE" ]);	do
			printf "${CB##*=}("
			wget -O - ${QUERY_STRING#*&}
			printf ")"
			ONCE=1
		done | gzip -9c
	;;
	*)
		exit
	;;
esac
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

accessing web services with busybox ash shell + nc (netcat)

#37 Post by technosaurus »

accessing web services with busybox ash shell and nc (aka netcat)

Code: Select all

#!/bin/ash

# line to get the wsdl, but instead use:
# http://soapclient.com/soaptest.html instead
# you can use it to get the proper requests - hint: view source
#echo -e "GET /hosps?wsdl HTTP/1.1\r\n\r\n" | nc 192.168.0.102 8888
newline="
"

#you'll need your outside IP address if the web service is on your PC
get_ip(){
IP=`echo -e "GET / HTTP/1.1\r
host: myip.dnsd.me

" | nc myip.dnsd.me 80`
echo ${IP##*$newline}
}
# get_ip(){ #bash only version no nc dep, but /dev/tcp may not be compiled in
# exec 3<>/dev/tcp/myip.dnsdynamic.org/80
# echo -e "GET / HTTP/1.1\r\nhost: myip.dnsd.me\r\n\r\n" >&3
# IP=`cat <&3`
# echo ${IP##*
# }


SOAP(){ # $1=url $2=port $3=namespace $4=endpoint $5=action $6=parameter
#ex. SOAP localhost 8888 "http://patient.ch01/" "/hosps" "getHosps" "some name"

A='<?xml version="1.0"?>
<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/">
	<SOAP-ENV:Body>
		<mns1:'"$5"' xmlns:mns1="'"$3"'">
			'"$6"'
		</mns1:'"$5"'>
	</SOAP-ENV:Body>
</SOAP-ENV:Envelope>
'
echo -e "POST $4 HTTP/1.1\r
Content-Type: text/xml
Content-Length: ${#A}

$A"  | nc "$1" "$2"
}

SOAP 192.168.0.102 8888 "http://patient.ch01/" "/hosps" "getHosps"

here's an example of it in use:

Code: Select all

#!/bin/ash

SOAP(){ # $1=url $2=port $3=namespace $4=endpoint $5=action $6=parameter
#ex. SOAP localhost 8888 "http://patient.ch01/" "/hosps" "getHosps" "some name"
A='<?xml version="1.0"?>
<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/">
	<SOAP-ENV:Body>
		<mns1:'"$5"' xmlns:mns1="'"$3"'">
			'"$6"'
		</mns1:'"$5"'>
	</SOAP-ENV:Body>
</SOAP-ENV:Envelope>
'
echo -e "POST $4 HTTP/1.1\r
Content-Type: text/xml
Content-Length: ${#A}

$A"  | nc "$1" "$2"
}

D(){ echo $2 $3
echo "$1" | awk '
	BEGIN{RS="<return><name>"}
	(tolower($0) ~/'"${2}"'/ && tolower($0) ~/'"${3}"'/){
		gsub(/<[^>]*>/,"\t");
		print "\nDr. "$1" "$2 " has " $NF " patients."
		print "\tAge  First Name      Last Name"
		for (i=3;i<NF;i+=3){printf "\t%-4s %-15s %s\n",$i,$(i+1),$(i+2)}
	}'
}

P(){ echo $2 $3
echo "$1" | awk 'BEGIN{RS="<return><name>"}
tolower($0) ~/'"${2}"'/{
	gsub(/<[^>]*>/,"\t");
	for (i=3;i<NF;i+=3){
		age=i;
		first=i+1;
		last=i+2;
		if(tolower($first) ~/'"${2}"'/)
			if(tolower($last) ~/'"${3}"'/)
				print $first, $last,"is age",$age,"and is a patient of Dr.",$1,$2
	}
}'
}

soap=`SOAP 192.168.0.102 80 "http://patient.ch01/" "/hosps" "getHosps"`
while read -p "
Enter a name followed by a D for doctor or P for patient:

" first last func; do
first=`echo $first|tr [A-Z] [a-z]`
last=`echo $last|tr [A-Z] [a-z]`
case $func in
	D)D "$soap" "$first" "$last";;
	P)P "$soap" "$first" "$last";;
	*)echo "no D/P selected, exiting.";exit;;
esac
done
edit temp code

Code: Select all

#!/bin/sh

#global variables ... will eventually go to external file to be modified/sourced
MIN_PW_LEN=6

createUser(){ #input: $1=UserLogin, $2=UserPassword, $3=UserDisplayName
	#output: int (0-no errors, 1+ error)
	#todo (makes sure UserLogin does not already exist)
	[ "$1" ] || return 1 #empty UserLogin
	[ `userExists $UserLogin` ] && return 2 #UserLogin exists
	[ ${#2} -lt ${MIN_PW_LEN} ]  && return 3 #UserPasword too short
	echo 'insert into _Users(UserLogin, UserPassword, UserDisplayName, UserDeleted) values("'${1}'","'${2}'","'$3'",0);.quit;'
}

checkUserPassword(){ #input: $1=UserLogin, $2=UserPassword (both clear text for now)
	#output: int (0-no errors, 1+ error)
}

deleteUser(){ #input: UserLogin
	#output: int (0-no errors, 1+ error)
	
}

getAllUsers(){ #output: List of UserLogin

}

getUserDisplayName(){ #input: $1=UserLogin
	#output: UserDisplayName
}

initDB(){
#create table _Users(UserUID INTEGER PRIMARY KEY ASC, UserLogin VARCHAR(32) UNIQUE NOT NULL, UserPassword VARCHAR(32),UserDisplayName VARCHAR(64), UserDeleted BOOL );
#note INTEGER PRIMARY KEY ASC is redundant to row id?
}


sendHeader(){
printf "Content-type: application/javascript\r\n\r\n"
}

sendResponse(){
}

splitQueryString(){ #not used
	OLDIFS="$IFS"
	IFS="&"
	for param in $1; do
		case "$param" in
			*=*)echo $param;;
		esac
	done
	IFS="$OLDIFS"
}


updateUser(){ #input: $1=UserLogin, $2=UserPassword, $3=UserDisplayName
	# output: int (0-no errors, 1+ error)
	# (makes sure UserLogin does exist updattes UserPassword, UserDisplayName, sets UserDelete to false)
	[ "$1" ] || return 1 #empty UserLogin
	[ `userExists $UserLogin` ] && return 4 #UserLogin does not exist
	[ ${#2} -lt ${MIN_PW_LEN} ]  && return 3 #UserPasword too short
}

userExists(){
}

`splitQueryString`

case "$action" in
	checkUserPassword)checkUserPassword "$UserLogin" "$UserPassword";;
	createUser)createUser "$UserLogin" "$UserPassword" "$UserDisplayName";;
	deletUser)deleteUser "$UserLogin";;
	getAllUsers)getAllUsers;;
	getUserDisplayName)getUserDisplayName "$UserLogin";;
	updateUser)updateUser "$UserLogin" "$UserPassword" "$UserDisplayName";;
esac
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#38 Post by technosaurus »

I patched the sqlite3 shell to output json for use in web services (you could get away with using its csv output + sed, but this is a pretty small patch)

Code: Select all

--- shell.c~	2013-03-29 22:07:49.000000000 +0800
+++ shell.c	2013-04-07 02:27:33.792883620 +0800
@@ -453,6 +453,7 @@ struct callback_data {
 #define MODE_Tcl      6  /* Generate ANSI-C or TCL quoted elements */
 #define MODE_Csv      7  /* Quote strings, numbers are plain */
 #define MODE_Explain  8  /* Like MODE_Column, but do not truncate data */
+#define MODE_Json     9  /* Like MODE_Column, but do not truncate data */
 
 static const char *modeDescr[] = {
   "line",
@@ -464,6 +465,7 @@ static const char *modeDescr[] = {
   "tcl",
   "csv",
   "explain",
+  "json",
 };
 
 /*
@@ -826,6 +828,21 @@ static int shell_callback(void *pArg, in
       fprintf(p->out,"\n");
       break;
     }
+    case MODE_Json: {
+      if( p->cnt++==0 && p->showHeader ){
+      fprintf(p->out,(nArg==1)?"":"[");
+        for(i=0; i<nArg; i++){
+          fprintf(p->out,"\"%s\"%s",azCol[i], (i==nArg-1) ? (nArg==1)?",":"]," : ",");
+        }
+      }
+      if( azArg==0 ) break;
+      fprintf(p->out,(nArg==1)?"":"[");
+      for(i=0; i<nArg; i++){
+        output_csv(p, azArg[i], i<nArg-1);
+        if (i==nArg-1) fprintf(p->out,"%s", (nArg==1)?",":"],");
+      }
+      break;
+    }
     case MODE_Insert: {
       p->cnt++;
       if( azArg==0 ) break;
@@ -2066,6 +2083,9 @@ static int do_meta_command(char *zLine,
     }else if( n2==3 && strncmp(azArg[1],"csv",n2)==0 ){
       p->mode = MODE_Csv;
       sqlite3_snprintf(sizeof(p->separator), p->separator, ",");
+    }else if( n2==3 && strncmp(azArg[1],"json",n2)==0 ){
+      p->mode = MODE_Json;
+      sqlite3_snprintf(sizeof(p->separator), p->separator, ",");
     }else if( n2==4 && strncmp(azArg[1],"tabs",n2)==0 ){
       p->mode = MODE_List;
       sqlite3_snprintf(sizeof(p->separator), p->separator, "\t");
@@ -3086,6 +3106,9 @@ int main(int argc, char **argv){
     }else if( strcmp(z,"-csv")==0 ){
       data.mode = MODE_Csv;
       memcpy(data.separator,",",2);
+    }else if( strcmp(z,"-json")==0 ){
+      data.mode = MODE_Json;
+      memcpy(data.separator,",",2);
     }else if( strcmp(z,"-separator")==0 ){
       sqlite3_snprintf(sizeof(data.separator), data.separator,
                        "%s",cmdline_option_value(argc,argv,++i));
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#39 Post by technosaurus »

here is an example for using busybox's cgi-bin to host a puppy package database (hard coded for now, but could use the query string to select quirky/wary/racy/...)

Code: Select all

#!/bin/sh
printf "Content-encoding: gzip
Content-type: application/javascript

"
awk 'BEGIN{FS="|";OFS="\",\"";ORS="\"],\n";printf "petCallback([\n"}
{print "\t[\""$1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,$13,$14}
END{printf "])\n"}' /root/.packages/Packages-puppy-quirky-official |gzip -9c
and a crappy test page that puts it in an unformatted table

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title></title></head>
<body>
<table id="pets"></table>

<script>
	function petCallback(data){
		var row,cell,text,table = document.getElementById("pets")
		for (var i = 0,rows=data.length,cols=data[0].length; i < rows; i++) {
			row = document.createElement("tr");
			for (var j = 0; j < cols; j++) {
				cell = document.createElement("td");
				text = document.createTextNode(data[i][j]);
				cell.appendChild(text);
				row.appendChild(cell);
			}
		table.appendChild(row);
		}
	}
	var script=document.createElement('script'),head=document.getElementsByTagName("head")[0]
	script.src="http://localhost/cgi-bin/pets?"+(new Date()/1) //prevent cacheing
	head.insertBefore(script, head.firstChild);
</script>
</body>
</html>
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#40 Post by technosaurus »

I have the beginning of a statically compilable js library (targeted to the closure compiler) let me know if there are any requests.
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#41 Post by technosaurus »

Here it is:
contains frequently used functions and examples on how to make google's closure compiler work better for you
Attachments
liba.js.tar.gz
(37.67 KiB) Downloaded 610 times
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#42 Post by technosaurus »

In case I ever want to use a device's dpi to select icon sizes (stupid iphones)

Code: Select all

<script>
function dpi(){
	var res={},div=document.createElement("div")
	div.style.position="absolute"
	div.style.width="1in"
	div.style.height="1in"
	div.style.left="-100%"
	div.style.top="-100%"
	document.getElementsByTagName('body')[0].appendChild(div)
	res["xdpi"]=div.offsetWidth
	res["ydpi"]=div.offsetHeight
	div=""
	return res
}
alert("xdpi="+dpi().xdpi+", ydpi="+dpi().ydpi)
</script>
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
sc0ttman
Posts: 2812
Joined: Wed 16 Sep 2009, 05:44
Location: UK

#43 Post by sc0ttman »

I'm sure this stuff is probably awesome... what is it?

What's the end game? Or we anywhere in the realm of some sort of better JS stuff that can be compiled into other stuff? ..elinks?

Or is this all for producing web frontends? Does this all need a webserver?

what could you do with sqlite patched to produce JSON? A simple db backend for websites via json+ajax? could it simply replace the standard sqlite and function as normal?
[b][url=https://bit.ly/2KjtxoD]Pkg[/url], [url=https://bit.ly/2U6dzxV]mdsh[/url], [url=https://bit.ly/2G49OE8]Woofy[/url], [url=http://goo.gl/bzBU1]Akita[/url], [url=http://goo.gl/SO5ug]VLC-GTK[/url], [url=https://tiny.cc/c2hnfz]Search[/url][/b]

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#44 Post by technosaurus »

The liba.js is for traditional web programming - just a clean room implementation of the most commonly used extras. Maybe I'm a bit conceited, but I felt I could do better than all of the contributors to jquery, google-closure and the other popular js libs out there when it comes to compiled code size and ease of use. The existing kits either require you to remember to either add dependency info into your code to work and compile down (google's) or just doesn't reduce much at all over the minified version (jquery, yui,...). My library is designed for people who want their site to load as fast as possible or to be obfuscated as much as possible without restrictive licensing concerns.

Currently it would need a server for saved states and interaction, but I've actually made a json patch for sqlite, however it was an uninformed hack... I need to redo it to simply query the data type (its only ~10 lines, 8 of which are cut-n-paste). I would like to figure out a way to do it with html5's local storage.

My if-I-had-all-the-time-in-the-world project would be a complete webpage optimizer that parsed html, css, svg, js and extensions and optimized them all into a single zopfli compressed page while generating optimized sprite sheets from img tags and separating out any browser specific workarounds to be loaded automatically (and provide related warning info along with possible workarounds) On the plus side of this, the same parser/lexer could be used for a browser or user interface. Netsurf's MIT licensed libs would be a good starting point to parse it all to a DOM tree then use that to render a page/interface... and rather than caching pages, cache an optimized DOM tree

btw I did build optipng-zopfli (useful in devx) ... it gives ~5% smaller optimized pngs than standard optipng, but it takes for-ev-er.
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#45 Post by technosaurus »

here is a tentative json output patch for sqlite3 shell (for server side database interaction)
Attachments
sqlite3-json_shell.patch.gz
(1.33 KiB) Downloaded 524 times
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#46 Post by technosaurus »

more drag and drop:

Code: Select all

<html>
<head>
<style>
#bg {position:absolute;width:100%;height:100%;background-color:gray}
.drag {position:absolute;left:100px;top:150px;background-color:red}
</style>
<script>
var dragObj={};
function drag(n,ev){
	dragObj.n=n;
	dragObj.x=ev.pageX;
	dragObj.y=ev.pageY;
}
function drop(n,ev){
	var ob=dragObj,
	x=parseInt(getComputedStyle(ob.n,null).getPropertyValue("left"),10),
	y=parseInt(getComputedStyle(ob.n,null).getPropertyValue("top"),10);
	ob.n.style.top=y+ev.pageY-ob.y+"px";
	ob.n.style.left=x+ev.pageX-ob.x+"px";
	return !1;
}
</script>
<title></title>
</head>
<body>
<div id="bg" ondragover="return !!0" ondrop="drop(this,event);return !!0;" />
<div class="drag" ondragstart="drag(this,event)">hello</div>
</body>

</html>
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
matiasbatero
Posts: 60
Joined: Fri 12 Oct 2012, 01:27
Location: Mar del Plata, Argentina

#47 Post by matiasbatero »

technosaurus wrote:Here is a script that will generate an html index of directories and files.

Code: Select all

#!/bin/sh
# $1 is a directory to index as html
cd $1;
for x in *; do [ -d "$x" ] && D=$D"<li><a href="$x/">$x/</a></li>" || F=$F"<li><a href="$x">$x</a></li>"; done
echo "<html><head><title>index of $1</title></head><body><p><b>index of $1</b></p><p>directories:</p><ul><li><a href="../">[parent directory]</a></li>$D</ul><p>files:</p><ul>$F</ul></body></html>" >$1/index.html
there is a C version of this script here:
http://www.mathopd.org/dist/dir_cgi.c.txt
hahaha... powerfull compactation. C analogous is hell in comparison..
Bash rules

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#48 Post by technosaurus »

This version drags the entire object during the drag.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
#bg {position:absolute;width:100%;height:100%;background-color:gray}
.drag {position:absolute;left:100px;top:150px;text-align:center;}
</style>
<script>
var dragObj={}, dragIcon = document.createElement('img');

function drag(n,ev){
	dragObj.n=n;
	dragObj.x=ev.pageX-parseInt(getComputedStyle(dragObj.n,null).getPropertyValue("left"),10);
	dragObj.y=ev.pageY-parseInt(getComputedStyle(dragObj.n,null).getPropertyValue("top"),10);
	return !1;
}
function dragging(ev){
	dragObj.n.style.left=ev.pageX-dragObj.x+"px";
	dragObj.n.style.top=ev.pageY-dragObj.y+"px";
	return !1;
}
function drop(ev){
	return !1;
}
</script>
<title></title>
</head>
<body>
<div id="bg" onselectstart="return !!0" ondragover="return dragging(event)" ondrop="return drop(event)" />
<div class="drag" draggable="true" ondragstart="drag(this,event)">
<img src="osmo.png" alt="Smiley face" /><br>
hello world
</div>
</body>
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#49 Post by technosaurus »

here is a shell only note taker (aka poor mans blog) designed to run on local network only (no advanced security precautions implemented) ... it runs in cgi-bin/a.cgi ( ... not a very clever name)

Code: Select all

#!/bin/sh
tstamp=`date +%Y%m%d%H%M%S`
[ "$QUERY_STRING" ] && /usr/sbin/httpd -d "${QUERY_STRING#*=}
" > $tstamp.note
[ "$QUERY_STRING" == "a=new" ] && tar -czf $tstamp.tar.gz *.note && rm *.note
echo "
<html><head><head><body>Enter something here:
<form action='/cgi-bin/a.cgi'><input name='a' autofocus /></form>
<hr /><pre>"
ls -r1 *.note | xargs cat
echo "</pre><body></html>"
Just enter any text or html into the input box and it appears at the top of the list. When you want a new list just type new in the box and it will archive your current notes and start again.
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

User avatar
edoc
Posts: 4729
Joined: Sun 07 Aug 2005, 20:16
Location: Southeast Georgia, USA
Contact:

#50 Post by edoc »

I will have to read through this thread many times to follow what you are doing - I'm just too long out of coding (and never that good to begin with) to get it the first time.

I'm challenging our 1st year IT major son to study this and to explain it to his old daddy.

He's supposed to be updating my pre-HTML 4 Web sites so maybe he can take advantage of some of this during that process.

I really appreciate you sharing this as both a learning experience and as valuable tools.
[b]Thanks! David[/b]
[i]Home page: [/i][url]http://nevils-station.com[/url]
[i]Don't google[/i] [b]Search![/b] [url]http://duckduckgo.com[/url]
TahrPup64 & Lighthouse64-b602 & JL64-603

Post Reply