Puppy Linux Discussion Forum Forum Index Puppy Linux Discussion Forum
Puppy HOME page : puppylinux.com
"THE" alternative forum : puppylinux.info
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

The time now is Fri 27 Feb 2015, 20:42
All times are UTC - 4
 Forum index » Off-Topic Area » Programming
Web Programming
Post new topic   Reply to topic View previous topic :: View next topic
Page 5 of 5 [68 Posts]   Goto page: Previous 1, 2, 3, 4, 5
Author Message
Ted Dog

Joined: 13 Sep 2005
Posts: 2940
Location: Heart of Texas

PostPosted: Sat 04 Jan 2014, 10:02    Post subject:  

marketing departments minor tax and shipping changes caused a total rewrite of business logic and shopping cart module.. Shocked That they just appended it to an otherwise tiny by programing standards combo ( ALREADY HAD COMBO LOGIC ) combos are just another item code and picture of three items and new price.
Back to top
View user's profile Send private message 

Joined: 18 May 2008
Posts: 4464

PostPosted: Mon 20 Jan 2014, 22:12    Post subject:  

I found free versions of windows images from microsoft for testing with IE

but the images are self extracting .exe so still need windows to create the image.
and probably this helper:

Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 

Joined: 11 Apr 2007
Posts: 888

PostPosted: Sun 09 Feb 2014, 20:48    Post subject: Form_db
Subject description: Create and query html form json database

When technosaurus posted his nifty note-taking html server/client app, I found myself using it quite a bit. Recently it occurred to me that this idea could be expanded to include databases.....

A database seems somewhat complicated - decide on a schema, enter the structure, make up a form for data entry, set up a query operation.

Why not just make up an html form which actually creates and could also query a database?

So here is a simple prototype called "form_db".

Decide on your fields, grab some form html coding (lots of easy on-line form builders and templates available) and just paste the code into Form_db. Now you can just fill in the form and a json database is created and additional entries can be made. To query the database you could have several predefined buttons (each with a "case" statement) to return information based on fields. You could even make a text area to accept a complex query with JQ.

At first I thought I'd have to use Python or maybe Javascript to parse url and read/write json files. But then again, maybe all that could be done in bash and it turns out that it could (although probably lots easier in Python). Now that a Json database has been created, how might it be queried and used in this environment? I then discovered JQ, described as an awk/sed for json here-

Next, how to show the json query return in the open html page?

Handily, there is a javascript widget to display json data. Good, everything we need.

Here's a simple contact form example with a single query button that returns all the contact names.

JQ has extensive ways to return information, including math expressions.

You'll find two scripts which go in $HOME/cgi-bin:
query_string # parses the url and directs action
form_db.cgi # browser form

Also attached is jq below which I compiled in Puppy Precise 5.4.3 and stripped - weighs in at only 247k

To set this up, do the following in a terminal:
mkdir $HOME/cgi-bin
cd $HOME

Install "jq.tar.gz" to /

Place the scripts "query_string" and "form_db.cgi" in $HOME/cgi-bin and make executable.

Then point your browser at url "localhost/cgi-bin/form_db.cgi"

Here's a pic (of course, you could add css styling to make this as decorative as you'd like)


# place script in $HOME/cgi-bin/form_db.cgi
# called by browser "localhost/cgi-bin/form_db.cgi"
# seaside 2/9/2014
# form html code follows:

echo '
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<h2> Contacts </h2>
<form id="contacts-form" action="/cgi-bin/form_db.cgi">
<body bgcolor="#E6E6FA">
<label>First name:</label>
<div class="field"><input type="text" name="first_name" autofocus /></div>
<label>Last name:</label>
<div class="field"><input type="text" name="last_name" /></div>
<div class="field"><input type="text" name="email" /></div>
<input type="radio" name="gender" value="Male" checked> Male
<input type="radio" name="gender" value="Female"> Female
<div class="item button button-default"><br>
<div class="field"><input type="submit" id="contacts-op-save" value="Save" /></div>
<input type="submit" name="id_entry" value="Query All" />

if [ "${QUERY_STRING/id_entry=Query}" = "${QUERY_STRING}" ] ; then
   ./query_string   #  submit item
else    # it's a query

input=`cat /root/cgi-bin/contact.json | jq -c '.'`
echo '<!DOCTYPE html>
<script src="http://metawidget.org/js/3.4/metawidget-core.min.js"></script>
<script type="text/javascript">
var body = '$input'
<div id="metawidget"></div>
<script type="text/javascript">
var mw = new metawidget.Metawidget( document.getElementById( "'metawidget'" ));
mw.toInspect = body;


# place script in $HOME/cgi-bin/query_string
# parses QUERY_STRING from form_db.cgi
# seaside 2/9/2014

[ -z "$QUERY_STRING" ] && exit

QUERY_STRING=$(echo -e $(sed -e 's/%/\\x/g' -e 's/+/ /g' <<<"$QUERY_STRING"))

if [ ! -f $HOME/cgi-bin/contact.json ]; then
   for item in $QUERY_STRING; do
   jstring="$jstring $key:$value,";
   jstring="${jstring%,}}]"  # cut comma, add }]
   echo "$jstring" >$HOME/cgi-bin/contact.json

else    # additional object

   json=`cat $HOME/cgi-bin/contact.json`
   json="${json%]},"    # cut ] add comma
   for item in $QUERY_STRING; do
   json_add="$json_add $key:$value,";
   echo "$json$json_add" >$HOME/cgi-bin/contact.json

 Filesize   15.95 KB
 Viewed   402 Time(s)


Description  jq (json query) compiled and stripped

Filename  jq.tar.gz 
Filesize  94.74 KB 
Downloaded  131 Time(s) 
Back to top
View user's profile Send private message 

Joined: 18 May 2008
Posts: 4464

PostPosted: Wed 09 Jul 2014, 23:56    Post subject:  

I was thinking about how so many webpages have virtually 90% of the same content on every page and 10% is the actual content that changes... unfortunately bots don't evaluate javascript, so you have to use cached pages for the bots... here is a simple example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><meta name="fragment" content="!">
<body>menus and stuff here - no content<div id="content"><div></body><script>
var h=XMLHttpRequest();
try{ h['open']('GET',u,false);
   if(h['status']!=404) document.getElementById("content")['innerHTML']=h['responseText'];
}catch(e){ alert("exception");}
and an example server using netcat (specifically busybox's nc)
##do not use this _as-is_, It is really unsafe #!../../etc/passwd
nc -ll -p 80 -e sh -c '
while read A B DUMMY; do
   case "$A" in
      case "$B" in
      echo -e "HTTP/1.1 200 OK\r\nContent-Length: `stat -c %s ${FILENAME}`\r\n\r\n"
      cat ${FILENAME}
... so the contents will be loaded based on the #!filename.html
(it's contents will go int <div id="content">) because both the bot and our javascript access the content via the ?_escaped_fragment_= version and the #! simply tries to go to a marked spot on the page (which doesn't exist)

... next up navigation by our #!content links with an event handler

Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 

Joined: 18 May 2008
Posts: 4464

PostPosted: Sun 20 Jul 2014, 06:32    Post subject:  

working on bottom menus:
#menu *{color:#000;list-style-type:none;margin:0;padding:0}
#menu a{display:block;text-decoration:none;position:relative;transition:background-color .5s}
#menu li{background:#9a7;float:left;position:relative}
#menu ul li{font-weight:700;width:140px}
#menu>ul li a{padding-bottom:3px;width:140px}
#menu>ul>li>ul{bottom:0;z-index:1;transition:bottom .2s}
#menu ul li ul li{padding:3px;z-index:2}
#menu ul li ul li a:hover{border-left:solid 1px #000;background-color:rgba(222,222,222,.5)}
#menu ul li ul,#menu:hover ul li ul,#menu:hover ul li:hover ul li ul{position:absolute;visibility:hidden;width:140px}
#menu:hover ul,#menu:hover ul li:hover ul,#menu:hover ul li:hover ul li:hover ul{visibility:visible}
#menu:hover ul li:hover ul li:hover ul{margin-left:140px;margin-top:-48px;position:absolute}
#menu:hover ul li:hover ul{position:absolute}
<div id="menu">
         <a href="http://technosaurus.github.io">Menu</a>
               <a href="#">Projects</a>
                  <li><a href="#">Amaya gtk1</a></li>
                  <li><a href="#" title="Shell scripts designed to show off jwm and make configuration easy.">Jwm Tools</a></li>
                  <li><a href="#" title="A small replacement C library for building minimized static apps.">Libc embedded</a></li>
                  <li><a href="#" title="A javascript library designed to be minimized by Google's Closure Compiler." >Liba.js</a></li>
                  <li><a href="#" title="A tiny public domain ogg player.">PDVorbis</a></li>
                  <li><a href="#">Pupngo</a></li>
                  <li><a href="#">Simple Icon Tray</a></li>
                  <li><a href="#">Web Desktop</a></li>
            <li><a href="#">License</a></li>
            <li><a href="#">FAQ</a> </li>
            <li><a href="#">Disclaimer</a></li>
            <li><a href="#">About Me</a></li>
         <a href="#">Resources</a>
            <li><a href="#">Helpful Links</a></li>
               <a href="#">Affiliates &rsaquo;</a>
                  <li><a href="#">X</a></li>
                  <li><a href="#">X</a></li>
         <a href="#">News &amp; Events</a>
            <li><a href="#">Press Articles</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Blog</a></li>
         <a href="#">Espanol</a>
            <li><a href="#">X</a></li>

Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 

Joined: 18 May 2008
Posts: 4464

PostPosted: Fri 08 Aug 2014, 22:58    Post subject: sub pixel fonts in javascript
Subject description: check it out and see if you can read it

I read an article on the smallest "readable" font (1px wide by 5px high) but I didn't like the rainbow colors, so I created a 2x5 sub-pixel font in javascript in a classic green on black terminal style color scheme - 1st method is html5 canvas, 2nd is using plain old tables with css
.cbox,tr,td {
   border-spacing: 0px;
   border-collapse:collapse !important;
canvas, table{display:block}
td {width:1px;height:1px}
<div id="a"></div>
<div id="b"></div>

var glyphstiny={
' ':'000000000000000',
var glyphsmedium={
' ':'000000000000000000000000000000',

var canvas,ctx,d,id,putPixel,glyphs;

function putPixelBox(x,y,r,g,b,a){
   ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
   ctx.fillRect(x,y,1,1); // fill in the pixel at (10,10)
function putPixelData(x,y,r,g,b,a){
   d[0]   = r;
   d[1]   = g;
   d[2]   = b;
   d[3]   = a;
   ctx.putImageData( id, x, y );

function tinyPrintCanvas(s){
   var i,j,k,r,g,b,dx=4,dy=4,h=5+2*dy,fw=glyphs['0'].length/15|0,w=fw*(dx+s.length);
   canvas=document.createElement("canvas"); canvas.width=w; canvas.height=h;
   ctx.imageSmoothingEnabled = false;
   d = id.data;
   for (i=0;i<s.length;i++){
      for (j=0;j<5;j++){
         for (k=0;k<fw;k++){
            putPixel( dx+i*fw+k, dy+j ,'0x'+r+r|0,'0x'+g+g|0,'0x'+b+b|0,199);

function tinyPrintTable(s){
   var tbl,tr=[],td,img,r,g,b,i,j,k,fw=glyphs['0'].length/15|0;
   for (i=0;i<s.length;i++){
      for (j=0;j<5;j++){
         for (k=0;k<fw;k++){
            td.setAttribute("bgcolor","#"+  glyphs[letter].substr(j*6+k*3,3) );
   for (i=0;i<5;i++)

tinyPrintCanvas("hello world")
tinyPrintTable("hello world")

It looks better when you run it than the screen shots show, the image loses quality and gets anti-aliased... but here is a (cruddy) shot anyhow.
 Description   using just tables and css properties
 Filesize   160 Bytes
 Viewed   122 Time(s)


 Description   html5 canvas version
 Filesize   160 Bytes
 Viewed   119 Time(s)


Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 

Joined: 18 May 2008
Posts: 4464

PostPosted: Mon 15 Dec 2014, 08:42    Post subject:  

Ok, I've already shown a lot of how-tos. How about some links for how-not-tos?

answers.com has got to be the worst website I have seen:
The layout is atrocious, with top, right and left sides packed with garbage (I think there may be some kind of navigation menu in there somewhere, but there is no real way to distinguish it from more ads).
But that isn't the worst part: rather than putting the _actual_content_ into a scrollable div so that the browser only hast to re-render that portion, they use floating css so the browser has to re-render everything on every single scroll

cnet.com ... I won't even post a click-able link to it. It runs so much garbage in the background that my CPU almost overheats. It auto-redirects to so many pages that the page you navigated from may not even show up in your drop down history list ... and navigating to the last in the list just increases its size so you have to type a new address into the nav bar just to leave. They don't keep permalinks to any articles so there is only a slim chance that anything linking there will actually still be there. ... on the plus side, a year or so ago their page layouts were as bad as answers.com

And just to give an example of an open source project that has a horrible UI: https://launchpad.net/ Have fun trying to navigate that mess. Everything is spread out such that it is difficult to find what you are looking for unless you are a speed

The best commentary I fount was at:

But why reinvent the wheel:

But by far the funniest examples:

Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 

Joined: 18 May 2008
Posts: 4464

PostPosted: Today, at 05:31    Post subject:  

Maybe it is time to consider using a simple web interface for system configureation like: http://hg.slitaz.org/tazpanel

Though tazpanel is useful, the pages seem pretty scant for an entire webpage, so I threw together some code for adding "icons" and draggable "windows" to contain these tools. Each icon can open a separate webpage in an emulated window that supports minimize, maximize, closing and even dragging (no resizing yet)

This means that we can add the previous "menu" code to get a working desktop

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
body, iframe {background-color:#eee}
.ico {text-align:center;float:left;padding:8px;}
.win {left:25%;top:25%;border:solid 1px;position:absolute;}
.tbar {background-color:rgba(100,100,255,0.7);}
<body id="bg" onselectstart="return !!0" ondragover="return dragging(event)" ondrop="return drop(event)" >
var dragObj={}, dragIcon = document.createElement('img'), zIndex=99;

function appendHTML(html){

function drag(n,ev){
   ev.dataTransfer.setData('Text',n.id); //mozilla hack
   return !1;

function dragging(ev){
   if (dragObj.n){
   return !1;

function drop(ev){
   if (dragObj.n.classList.contains('win')) raise(dragObj.n);
   return !1;

function getDraggable(n){
   while (n && !n.draggable) n = n.parentNode;
   return n;

function maximize(n){
   var p=getDraggable(n), a=[['+','25%','auto'],['#','0%','100%']], i=(n.innerHTML == "#")?0:1;

function minimize(n){
   var p=getDraggable(n), a=[['&ndash;','block'],['#','none']], i=(n.innerHTML == "#")?0:1;
   n.innerHTML = a[i][0];
   p.querySelector("iframe").style.display = a[i][1];

function raise(n){
   if (n.style.zIndex < zIndex) n.style.zIndex = ++zIndex + "";

function removeNode(n){

function removeDraggable(n){

function newIcon(title,url,img){
   var html = '<div class="ico" onclick=\'newWin("' + title + '", "' +
   url + '")\'><img src="' + img + '" alt="' + title + '" /><br>' +
   title + '</div>'

function newWin(title,url){
   var html = '<div onclick="raise(this)" class="drag win" ' +
      'draggable="true" ondragstart="drag(this,event)">' +
      '<div class="tbar"> &nbsp; ' +
         '<button onclick="removeDraggable(this)">X</button>' +
         '<button onclick="maximize(this)">+</button>' +
         '<button onclick="minimize(this)">&ndash;</button>' +
         title + '&nbsp;' +
      '</div>' +
      '<iframe src="' + url + '" onmouseenter="raise(getDraggable(this))"></iframe>' +



Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
Display posts from previous:   Sort by:   
Page 5 of 5 [68 Posts]   Goto page: Previous 1, 2, 3, 4, 5
Post new topic   Reply to topic View previous topic :: View next topic
 Forum index » Off-Topic Area » Programming
Jump to:  

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum

Powered by phpBB © 2001, 2005 phpBB Group
[ Time: 0.1550s ][ Queries: 12 (0.0061s) ][ GZIP on ]