Web Programming

Message

technosaurus · #41 Post by **technosaurus** » Sun 21 Jul 2013, 19:05

Here it is:
contains frequently used functions and examples on how to make google's closure compiler work better for you

technosaurus · #42 Post by **technosaurus** » Thu 19 Sep 2013, 07:21

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>

sc0ttman · #43 Post by **sc0ttman** » Thu 19 Sep 2013, 09:56

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?

technosaurus · #44 Post by **technosaurus** » Fri 20 Sep 2013, 00:18

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.

technosaurus · #45 Post by **technosaurus** » Thu 26 Sep 2013, 22:33

here is a tentative json output patch for sqlite3 shell (for server side database interaction)

technosaurus · #46 Post by **technosaurus** » Sat 19 Oct 2013, 23:47

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>

matiasbatero · #47 Post by **matiasbatero** » Fri 25 Oct 2013, 03:34

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>index of $1directories:<ul><li><a href="../">[parent directory]</a></li>$D</ul>files:<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

technosaurus · #48 Post by **technosaurus** » Thu 14 Nov 2013, 14:50

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>

technosaurus · #49 Post by **technosaurus** » Tue 17 Dec 2013, 06:44

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.

edoc · #50 Post by **edoc** » Tue 17 Dec 2013, 16:14

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.

technosaurus · #51 Post by **technosaurus** » Tue 17 Dec 2013, 17:24

edoc wrote:I will have to read through this thread many times to follow what you are doing

Please don't read too much into it. Many of my posts are a "hey, look what I figured out" notes so I don't forget rather than full on tutorials. That being said a lot more is covered than you will encounter in a run of the mill graduate level web programming course. Most courses will be either client side or server side and cover one aspect (html+css, javascript or server side applications), but not the full integration. Hell my school was still teaching Java + SOAP and I had to get permission from my instructor to replace the SOAP xml request with shell cgi and JSONP (thus the very rudimentary SOAP functions) My classmates had hundreds of lines of code and required a full java environment to run while mine fit on a single page and only needed busybox and sqlite (though it could just as easily used flat files as in my previous note taking example)

I have one other integrated (server and browser client) example that has not been posted because it is alpha quality and requires sqlite... an almost working (but not well tested) rental store app. If anyone is interested in those, I'll try to dig them up.

If anyone has a question about my terse code, please ask. If I(we) can't answer it, I'll put it on stackoverflow.

seaside · #52 Post by **seaside** » Wed 18 Dec 2013, 19:49

technosaurus,

Just tried this out in puppy.
-Setup-

Code: Select all

cd /$HOME
mkdir cgi-bin
#place "a.cgi" in $HOME/cgi-bin, make executable
httpd  # start busybox server

In browser put url line "http://localhost/cgi-bin/a.cgi"

I have one other integrated (server and browser client) example that has not been posted because it is alpha quality and requires sqlite... an almost working (but not well tested) rental store app. If anyone is interested in those, I'll try to dig them up

Yes, that would be quite welcome.

Thanks for posting this clever note taker example.

Regards,
s
(I think "a.cgi" keeps nicely with the "minimalistic" theme)

technosaurus · #53 Post by **technosaurus** » Thu 19 Dec 2013, 01:55

That new line before the quote is necessary for formatting.

Here is an new version with loadable archives:

Code: Select all

#!/bin/sh
TS=`date +%Y%m%d%H%M%S`
echo "
<html><head><head><body><table><tr><td>Notes:</td><td><form action='/cgi-bin/a.cgi'>
<input name='a' size='80' autofocus title='new   : archive notes and start over,
clear : remove current notes,
list  : show a list of archived notes'/></form></td></tr></table><hr /><pre>"
case "$QUERY_STRING" in
	"a=new")cat *.note|gzip -9 > $TS.notes.gz && rm *.note;;
	"a=clear")rm *.note;;
	"a=list")for x in *.notes.gz;do echo "<a href=/cgi-bin/a.cgi?a=load$x>$x</a>";done;;
	"a=load"*)gunzip -c "${QUERY_STRING#*=load}"|tac > $TS.note;;
	"a="*)/usr/sbin/httpd -d "${QUERY_STRING#*=}
"	> $TS.note;;
esac
ls -r1 *.note | xargs cat && echo "</pre><body></html>"

seaside · #54 Post by **seaside** » Thu 19 Dec 2013, 14:34

technosaurus wrote:That new line before the quote is necessary for formatting.

technosaurus,

Yes (I did think all notes in one line was a bit odd

)

Thanks for the new, expanded version. I'll have to check it out later.

Regards,
s

seaside · #55 Post by **seaside** » Fri 20 Dec 2013, 01:24

technosaurus,

The new version with loadable archives is quite slick...

Thanks,
s
(This is sooo unlike usual form html - )

technosaurus · #56 Post by **technosaurus** » Fri 20 Dec 2013, 04:33

I set that up to be keyboard friendly, but if you want mouse click to submit with a full textarea, here is an alternative:

Code: Select all

#!/bin/sh
TS=`date +%Y%m%d%H%M%S`
echo "
<html><head><style>table{width:100%;border-width:0 0 1 0;border-bottom:thick solid #ff0000} textarea{width:100%}</style><head>
<body><form action='/cgi-bin/a.cgi'><table><tr><td width='70px'><input type='submit' value='Save
Note' /></td><td width='100%'><textarea name='a' rows='10' width='100%' autofocus
title='new	: archive notes and start over,
clear : remove current notes,
list  : show a list of archived notes' ></textarea></td></tr></table></form><pre>"
case "$QUERY_STRING" in
	"a=new")ls -r1 *.note | xargs cat|gzip -9 > $TS.notes.gz && rm *.note;;
	"a=clear")rm *.note;;
	"a=list")for x in *.notes.gz;do echo "<a href=/cgi-bin/a.cgi?a=load$x>$x</a>";done;;
	"a=load"*)gunzip -c "${QUERY_STRING#*=load}" > $TS.note;;
	"a="*)/usr/sbin/httpd -d "${QUERY_STRING#*=}<hr>"	> $TS.note;;
esac
ls -r1 *.note | xargs cat && echo "</pre><body></html>"

This is an example of a "flat file database".
You can see that this could be extended to store additional data in subdirectories or with different file extensions, such that your "SELECT" statements are simple filesystem operations (I had some code for a genericized flat file db at one point ... I should dig it up)

seaside · #57 Post by **seaside** » Fri 20 Dec 2013, 17:08

technosaurus,

This is a nice and spunky interface.
I especially like the red seperator and underline of each note.

Thanks and Regards,
s
(I actually feel like writing a note when presented with such terse simplicity)

technosaurus · #58 Post by **technosaurus** » Thu 02 Jan 2014, 03:32

Matt Kruse has some nice little snippets that I may eventually incorporate.

Ted Dog · #59 Post by **Ted Dog** » Thu 02 Jan 2014, 22:02

technosaurus wrote:
edoc wrote:I will have to read through this thread many times to follow what you are doing
Please don't read too much into it. Many of my posts are a "hey, look what I figured out" notes so I don't forget rather than full on tutorials. That being said a lot more is covered than you will encounter in a run of the mill graduate level web programming course. Most courses will be either client side or server side and cover one aspect (html+css, javascript or server side applications), but not the full integration. Hell my school was still teaching Java + SOAP and I had to get permission from my instructor to replace the SOAP xml request with shell cgi and JSONP (thus the very rudimentary SOAP functions) My classmates had hundreds of lines of code and required a full java environment to run while mine fit on a single page and only needed busybox and sqlite (though it could just as easily used flat files as in my previous note taking example)

I have one other integrated (server and browser client) example that has not been posted because it is alpha quality and requires sqlite... an almost working (but not well tested) rental store app. If anyone is interested in those, I'll try to dig them up.

If anyone has a question about my terse code, please ask. If I(we) can't answer it, I'll put it on stackoverflow.

lol reminds me of taking over my companies website maintaining after highly paid contractors took a year. I was so confused on the minor changes to tax calcs and shipping rules that the marketing department added to a SIMPLE combo special addition. In order to have the requirements better explained I screen scraped site and made a simple flat file of all products around 7000 items. And wrote both methods of calcs and combo offers, while at home sick (could not access code base on machine remotely ) it was a dead ringer for the company site but ran on a laptop with sub second performance.
I gave the marketing web manger a copy of throw together site and He quickly reused methods to help communicate desires. Win Win for both of us. You can do just about everything with flat file databases even when its just a string lookup and a pipe delimited line of txt.

technosaurus · #60 Post by **technosaurus** » Thu 02 Jan 2014, 23:45

Ted Dog wrote:In order to have the requirements better explained I screen scraped site and made a simple flat file of all products around 7000 items. And wrote both methods of calcs and combo offers, while at home sick (could not access code base on machine remotely ) it was a dead ringer for the company site but ran on a laptop with sub second performance.

I wrote a little bit about flat file db in the death to spreadsheets thread but for web programming, JSON would be just as easy these days with libsee-shell, spidermonkey or v8/nodejs. I don't think anyone is useing libsee or the older, smaller C version of spidermonkey for this, but they are both under half a MB if built statically against musl-libc, so they could be used in embedded systems like routers and set top boxes (libsee is MIT licensed BTW, so its a good choice for commercial products).

(old)Puppy Linux Discussion Forum

(old)Puppy Linux Discussion Forum

Web Programming

Poor man's blog

poor man's blog