Tag Archives: primer

Journal Emoji Tutorial

Posted on by

Today, it’s a mix of … styling … <?php echo ” <style> * { border-radius: 8px; margin: 5 5 5 5; } button { color: blue; } input[type=\”submit\”] { color: blue; } hr { background-color: red; height: 1px; border: 0; } #ytimestamp { /* background-image: url(\”data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’ width=’20’ height=’20’ viewport=’0 0 100 100′ style=’font-family:Verdana;font-size:18px;’><text y=’80%’>&#128197;</text></svg>\”); */ background-image: url(\”data:image/svg+xml;base64,” . base64_encode(“<svg xmlns=’http://www.w3.org/2000/svg’ width=’20’ height=’20’ viewport=’0 0 100 100′ style=’font-family:Verdana;font-size:18px;’><text y=’80%’>&#128197;</text></svg>”) . “\”) !important; background-position: right; background-repeat: no-repeat; /* background-size: contain; */ height: 30px; } #yname { /* background-image: url(\”data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’ width=’20’ height=’20’ viewport=’0 0 100 100′ style=’font-family:Verdana;font-size:18px;’><text y=’80%’>&#x1F4DB;</text></svg>\”); */ background-image: url(\”data:image/svg+xml;base64,” . base64_encode(“<svg xmlns=’http://www.w3.org/2000/svg’ width=’20’ height=’20’ viewport=’0 0 100 100′ style=’font-family:Verdana;font-size:18px;’><text y=’80%’>&#x1F4DB;</text></svg>”) . “\”) !important; background-position: right; background-repeat: no-repeat; /* background-size: contain; */ /* height: 30px; */ } #ydob { /* background-image: url(\”data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’ width=’20’ height=’20’ viewport=’0 0 100 100′ style=’font-family:Verdana;font-size:18px;’><text y=’80%’>&#x1F382;</text></svg>\”); */ background-image: url(\”data:image/svg+xml;base64,” . base64_encode(“<svg xmlns=’http://www.w3.org/2000/svg’ width=’20’ height=’20’ viewport=’0 0 100 100′ style=’font-family:Verdana;font-size:18px;’><text y=’80%’>&#x1F382;</text></svg>”) . “\”) !important; background-position: right; background-repeat: no-repeat; /* background-size: contain; */ /* height: 30px; */ } #ysecret { /* background-image: url(\”data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’ width=’20’ height=’20’ viewport=’0 0 100 100′ style=’font-family:Verdana;font-size:18px;’><text y=’80%’>&#x3299;&#xFE0F;</text></svg>\”); */ background-image: url(\”data:image/svg+xml;base64,” . base64_encode(“<svg xmlns=’http://www.w3.org/2000/svg’ width=’20’ height=’20’ viewport=’0 0 100 100′ style=’font-family:Verdana;font-size:18px;’><text y=’80%’>&#x3299;&#xFE0F;</text></svg>”) . “\”) !important; background-position: right; background-repeat: no-repeat; /* background-size: contain; */ /* height: 30px; */ } #posting { /* background-image: url(\”data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’ width=’20’ height=’20’ viewport=’0 0 100 100′ style=’font-family:Verdana;font-size:18px;’><text y=’80%’>&#x270D;&#x1F3FC;</text></svg>\”); */ background-image: url(\”data:image/svg+xml;base64,” . base64_encode(“<svg xmlns=’http://www.w3.org/2000/svg’ width=’20’ height=’20’ viewport=’0 0 100 100′ style=’font-family:Verdana;font-size:18px;’><text y=’80%’>&#x270D;&#x1F3FC;</text></svg>”) . “\”) !important; background-position: right top; background-repeat: no-repeat; } .tdleft { /* background-image: url(\”data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’ width=’300′ height=’300′ viewport=’0 0 100 100′ style=’font-family:Verdana;font-size:18px;’><text x=’20%’ y=’80%’ fill=’red’ transform=’rotate(45,200,200)’>Journal &#x1F4D3; goes here ?</text></svg>\”); */ background-image: url(\”data:image/svg+xml;base64,” . base64_encode(“<svg xmlns=’http://www.w3.org/2000/svg’ width=’300′ height=’300′ viewport=’0 0 100 100′ style=’font-family:Verdana;font-size:18px;’><text x=’20%’ y=’80%’ fill=’red’ transform=’rotate(45,200,200)’>Journal &#x1F4D3; goes here ?</text></svg>”) . “\”) !important; background-position: center middle; background-repeat: repeat; background-size: contain; background-color:cyan; padding-right:5px; } .tdnone { background-color:cyan; padding-right:5px; } /* Thanks to https://stackoverflow.com/questions/10813581/can-i-replace-the-expand-icon-of-the-details-element */ details > summary { list-style-type: ‘” . “\u{1F4D3}” . “‘; } details[open] > summary { list-style-type: ‘” . “\u{1F50F}” . “‘; } details.editable[open] > summary { list-style-type: ‘” . “\u{1F3E4}” . “‘; } details { border: 1px solid gray; border-radius: 0.2rem; padding: 0.5rem; } details[open] > summary { margin-bottom: 0.5rem; } </style> “; ?> aesthetics user experience emojis … today to try enhancing the work of yesterday’s Journal Hashtag Tutorial regarding our latest Journal web application. We’ve said it many’s a time, emojis … Continue reading →

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Journal Hashtag Tutorial

Posted on by

If you look at the data for the Journals created and maintained by our new inhouse web application talked about at yesterday’s Journal Associations Tutorial you can see … the user entered text data is stored in a web server flat file outside of view of public internet users … and the work of yesterday allowed for, within that user entered text data … Text words we can map as … YouTube video YouTube playlist Spotify playlist Email “a” “mailto:” SMS “a” “sms:” Link to an http: or https: protocol web browser address bar URL … and add to that with today’s work … media data URI … to link while today we allow those Text words to be coded for so that the logic can add functionality understanding hashtag suffixing as per … Journal text goes here where hashtags #qrcode and #play and #display and #listen and #embed and #show and #background are hashtag media effect options along with an understanding of data URI media entries … as a whole new layer of data enhancement, potentially augmenting those original Text words hugely … via significantly changed … <?php echo ” function inline_linking(xname) { var oklast=[‘A’,’E’,’I’,’M’,’Q’,’U’,’Y’,’c’,’g’,’k’,’o’,’s’,’w’,’0′,’4′,’8′]; var pword=”, origxname=xname, thiss=”, thiscp=”, xsuffix=”, durl=”; xname=(xname + ‘ ‘).replace(/\#qrcode\ /g,’ QrCoDe ‘).replace(/\#qrcode/g,’ QrCoDe’).replace(/\#play\ /g,’ PlAy ‘).replace(/\#display\ /g,’ DiSpLaY ‘).replace(/\#listen\ /g,’ LiStEn ‘).replace(/\#embed\ /g,’ EmBeD ‘).replace(/\#show\ /g,’ ShOw ‘).replace(/\#background\ /g,’ BaCkGrOuNd ‘).replace(/\ $/g,”); xname=(xname + ‘ ‘).replace(/\#qrcode/g,’ QrCoDe’).replace(/\#play/g,’ PlAy’).replace(/\#display/g,’ DiSpLaY’).replace(/\#listen/g,’ LiStEn’).replace(/\#embed/g,’ EmBeD’).replace(/\#show/g,’ ShOw’).replace(/\#background/g,’ BaCkGrOuNd’).replace(/\ $/g,”); var htes=xname.split(‘&#’); for (ih=1; ih<htes.length; ih++) { if (ih < htes.length) { thiss=’&#’; thiscp=\”xname=xname.replace(‘&#’,String.fromCodePoint()); htes=xname.split(‘&#’); \”; thiscp=thiscp.replace(\”‘,\”, (xname.substring(2 + xname.indexOf(‘&#’)) + ‘ ‘).split(‘; ‘)[0] + \”;’,\”); thiscp=thiscp.replace(\”()\”, ‘(‘ + (xname.substring(2 + xname.indexOf(‘&#’)) + ‘ ‘).split(‘; ‘)[0].replace(/^x/g,’0x’).replace(/\;\&\#x/g,’,0x’).replace(/\;\&\#/g,’,’) + \”)\”); eval(thiscp); //alert(thiscp); } } var xxname=xname; var delim=’ ‘, pdelim=’ ‘; while (xxname.indexOf(String.fromCharCode(10)) != -1) { xxname=xxname.replace(String.fromCharCode(10), ‘ ‘); } while (xxname.indexOf(‘<br>’) != -1) { xxname=xxname.replace(‘<br>’, ‘ ‘); } var thewords=xxname.split(‘ ‘); thewords.push(”); thewords.push(”); for (var jw=0; jw<thewords.length; jw++) { xsuffix=”; pword=thewords[jw].replace(/PlAy/g,”).replace(/DiSpLaY/g,”).replace(/LiStEn/g,”).replace(/EmBeD/g,”).replace(/ShOw/g,”).replace(/BaCkGrOuNd/g,”).replace(/QrCoDe/g,”); if (pword != ”) { pdelim=”; durl=”; if (xname.indexOf(‘ ‘ + pword) != -1) { pdelim=’ ‘; } if (xname.indexOf(String.fromCharCode(10) + pword) != -1) { pdelim=String.fromCharCode(10); } if (xname.indexOf(‘<br>’ + pword) != -1) { pdelim='<br>’; } delim=”; if (xname.indexOf(pdelim + pword + ‘ ‘) != -1) { delim=’ ‘; } if (xname.indexOf(pdelim + pword + String.fromCharCode(10)) != -1) { delim=String.fromCharCode(10); } if (xname.indexOf(pdelim + pword + ‘<br>’) != -1) { delim='<br>’; } if (pword.indexOf(‘data:’) == 0) { durl='<details … Continue reading →

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Journal Associations Tutorial

Posted on by

Yesterday’s Journal Editing Tutorial had us interested in … contenteditable=true … usage, which begs the question … Do you ever need to get interested in … contenteditable=false ? Yes, we’ve had interest a couple of times now. It happens, at least for us, with a contenteditable=true element, for some reason, for a part of that element’s content it is better to revert back to normal onclick ways clicking on that bit of the content. And we come across that today, as we add to the potential intelligence of our textual data, allowing programmed for logic which transforms particular hardcoded words into … YouTube video pointing link YouTube playlist pointing link Spotify playlist pointing link Email “a” “mailto:” link SMS “a” “sms:” link Link to an http: or https: protocol web browser address bar URL … and for these created links it is better to apply contenteditable=false to them so that clicking them is not to say “focus on this” but rather “take me to this” as per how your usual “a” elements behave. Also, today, emoji textual input works okay when posting, and sometimes when contenteditable=true editing (but our advice is to Post your emoji textual data entries). A lot of all this functionality appears in our new Javascript function … <?php echo ” function inline_linking(xname) { var oklast=[‘A’,’E’,’I’,’M’,’Q’,’U’,’Y’,’c’,’g’,’k’,’o’,’s’,’w’,’0′,’4′,’8′]; var pword=”, origxname=xname, thiss=”, thiscp=”; var htes=xname.split(‘&#’); for (ih=1; ih<htes.length; ih++) { if (ih < htes.length) { thiss=’&#’; thiscp=\”xname=xname.replace(‘&#’,String.fromCodePoint()); htes=xname.split(‘&#’); \”; thiscp=thiscp.replace(\”‘,\”, (xname.substring(2 + xname.indexOf(‘&#’)) + ‘ ‘).split(‘; ‘)[0] + \”;’,\”); thiscp=thiscp.replace(\”()\”, ‘(‘ + (xname.substring(2 + xname.indexOf(‘&#’)) + ‘ ‘).split(‘; ‘)[0].replace(/^x/g,’0x’).replace(/\;\&\#x/g,’,0x’).replace(/\;\&\#/g,’,’) + \”)\”); eval(thiscp); //alert(thiscp); } } var xxname=xname; var delim=’ ‘, pdelim=’ ‘; while (xxname.indexOf(String.fromCharCode(10)) != -1) { xxname=xxname.replace(String.fromCharCode(10), ‘ ‘); } while (xxname.indexOf(‘<br>’) != -1) { xxname=xxname.replace(‘<br>’, ‘ ‘); } var thewords=xxname.split(‘ ‘); for (var jw=0; jw<thewords.length; jw++) { pword=thewords[jw]; if (pword != ”) { pdelim=”; if (xname.indexOf(‘ ‘ + pword) != -1) { pdelim=’ ‘; } if (xname.indexOf(String.fromCharCode(10) + pword) != -1) { pdelim=String.fromCharCode(10); } if (xname.indexOf(‘<br>’ + pword) != -1) { pdelim='<br>’; } delim=”; if (xname.indexOf(pdelim + pword + ‘ ‘) != -1) { delim=’ ‘; } if (xname.indexOf(pdelim + pword + String.fromCharCode(10)) != -1) { delim=String.fromCharCode(10); } if (xname.indexOf(pdelim + pword + ‘<br>’) != -1) { delim='<br>’; } if (pword.replace(/\@$/g,”).indexOf(‘@’) > 0 && pword.indexOf(‘.’) != -1 && eval(” + pword.split(‘@’).length) >= 2) { xname=xname.replace(pdelim + pword + delim,pdelim + ‘<a title=\”Email to\” contenteditable=false target=_top href=\”mailto:’ + … Continue reading →

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Journal Editing Tutorial

Posted on by

You may think, further to testerday’s Journal Content Tutorial‘s “consideration list” … format display styling usability navigation … if we were to add to that “consideration list” … editability … we’d want to reinvoke interest in our textarea “underlay” to be an “overlay” here, it being a more natural text editing HTML element than an HTML div element? Well, HTML5 gave us the wonderful contenteditable=true where the onblur event of a div element can perform this functionality for us, and we, then, need no (no doubt, kind of “kludgy” feeling) “underlay, overlay” thinking, then, using … <?php echo ” function sedit(spano) { if (spano.innerText != decodeURIComponent((” + spano.getAttribute(‘data-oit’)).replace(/^null/g,”).replace(/^undefined/g,”))) { try { document.getElementById(‘nearby’).value=window.btoa((” + spano.getAttribute(‘data-ts’)).replace(/^null/g,”).replace(/^undefined/g,”).replace(/\_/g, ‘ ‘)); } catch(hy) { document.getElementById(‘nearby’).value=(” + spano.getAttribute(‘data-ts’)).replace(/^null/g,”).replace(/^undefined/g,”).replace(/\_/g, ‘ ‘); } try { document.getElementById(‘wascont’).value=window.btoa(decodeURIComponent((” + spano.getAttribute(‘data-oit’)).replace(/^null/g,”).replace(/^undefined/g,”))); //alert(‘0:’ + document.getElementById(‘wascont’).value); } catch(hdfy) { document.getElementById(‘wascont’).value=decodeURIComponent((” + spano.getAttribute(‘data-oit’)).replace(/^null/g,”).replace(/^undefined/g,”)); //alert(’10:’ + document.getElementById(‘wascont’).value); } spano.setAttribute(‘data-oit’, encodeURIComponent(spano.innerText)); try { document.getElementById(‘nowcont’).value=window.btoa(spano.innerText); } catch(hdy) { document.getElementById(‘nowcont’).value=spano.innerText; } spanolast=spano; document.getElementById(‘editsub’).click(); } } “; ?> … new Javascript, which only ever gets invoked should the Journal be accessed at the Journal originator’s “device place”, and building on the new HTML … <?php echo ” <form id=editf style=display:none; action=’./journal.php’ method=POST target=jjcont> <input type=hidden name=nearby id=nearby value=”></input> <input type=hidden name=wascont id=wascont value=”></input> <input type=hidden name=nowcont id=nowcont value=”></input> <input type=hidden name=relfile id=relfile value='” . $jtitle . “‘></input> <input type=submit id=editsub style=display:none; value=’Submit’></input> </form> <iframe onload=\”if (!notfirsttime) { if (4 == 5) { setTimeout(function(){ location.href=’./journal.php?fjname=” . $jtitle . “‘; }, 20000); } } notfirsttime=false;\” src=’/About_Us.html’ id=jjcont name=jjcont style=’display:none;’></iframe> “; ?> … and calling on new PHP … <?php if (isset($_POST[‘nearby’]) && isset($_POST[‘wascont’]) && isset($_POST[‘nowcont’]) && isset($_POST[‘relfile’])) { if (file_exists($_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . ‘..’ . DIRECTORY_SEPARATOR . str_replace(‘ ‘,’_’,str_replace(‘+’,’ ‘, urldecode($_POST[‘relfile’])) . ‘.html’))) { $origcont=file_get_contents($_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR . ‘..’ . DIRECTORY_SEPARATOR . str_replace(‘ ‘,’_’,str_replace(‘+’,’ ‘, urldecode($_POST[‘relfile’])) . ‘.html’)); $ocont=$origcont; $tsis=str_replace(‘+’,’ ‘,urldecode($_POST[‘nearby’])); if (strpos($tsis, ‘ ‘) === false) { $tsis=base64_decode($_POST[‘nearby’]); $wasc=base64_decode($_POST[‘wascont’]); $nowc=base64_decode($_POST[‘nowcont’]); } else { $wasc=str_replace(‘+’,’ ‘,urldecode($_POST[‘wascont’])); $nowc=str_replace(‘+’,’ ‘,urldecode($_POST[‘nowcont’])); } //file_put_contents(‘xa.xa’, $tsis . “\n” . $wasc . “\n” . $nowc . “\n” . $origcont . “\n” . urlencode($wasc) . “\n” . urlencode($nowc) . “\n” . urlencode($origcont)); if (strpos($origcont, $tsis) !== false) { $relcont=$tsis . explode($tsis, $origcont)[1]; if (strpos($origcont, trim($relcont)) !== false) { //file_put_contents(‘xa.xa2z’, $relcont . “\nvs\n” . $wasc); } //$relcont=explode($tsis, $origcont)[1]; //file_put_contents(‘xa.xa2’, $relcont . “\nvs\n” . $wasc); if (9 == 9) { if (strpos(trim($relcont), trim($wasc)) === false || (strpos($relcont, explode(“\n”,$wasc)[0]) !== false && strpos($relcont, $wasc) === false)) { //file_put_contents(‘xa.xa2g’, $relcont . “\nvs\n” … Continue reading →

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Journal Content Tutorial

Posted on by

Further to yesterday’s Journal Privacy Tutorial we’re up to issues with “content” that involve … format display styling usability navigation … a lot of which do not suit yesterday’s content’s textarea format nearly as much as today’s overlaying nested div format. As you will know using textarea textual data there are really no easy ways towards any “smart” navigation functionality possibilities, but an HTML div with the content (and now navigational dropdowns and “breadcrumb” buttons) hosted by another div with display:flex (and thanks, here, to the advice from this great link) and absolute “overlaying” positioning … <?php echo ” function wbt(taow,tao) { //alert(tao.value); if (acontod && tao) { if (!divelem) { document.getElementById(‘helpout’).style.backgroundColor=’yellow’; document.getElementById(‘dcont’).style.backgroundColor=’yellow’; divelem = acontod.getElementById(‘djc’); gtao=tao; var recto = tao.getBoundingClientRect(); if (divelem) { // thanks to ideas off http://stackoverflow.com/questions/12266320/copy-div-content-to-textarea-or-text-with-the-same-font-family-style divelem.style.display=’flex’; //divelem.style.alignItems=’flex-end’; divelem.style.overflowY=’scroll’; //divelem.style.flexFlow=’column nowrap’; divelem.style.flexDirection=’column-reverse’; divelem.style.fontFamily = window.getComputedStyle(tao,null).fontFamily || tao.style.fontFamily || tao.currentStyle.getCurrentProperty(‘font-family’); divelem.style.fontSize = window.getComputedStyle(tao,null).fontSize || tao.style.fontSize || tao.currentStyle.getCurrentProperty(‘font-size’); divelem.style.border = window.getComputedStyle(tao,null).border || tao.style.border || tao.currentStyle.getCurrentProperty(‘border’); divelem.style.padding = window.getComputedStyle(tao,null).padding || tao.style.padding || tao.currentStyle.getCurrentProperty(‘padding’); divelem.style.margin = window.getComputedStyle(tao,null).margin || tao.style.margin || tao.currentStyle.getCurrentProperty(‘margin’); divelem.style.overflow = window.getComputedStyle(tao,null).overflow || tao.style.overflow || tao.currentStyle.getCurrentProperty(‘overflow’); divelem.style.position=’absolute’; divelem.style.left=” + recto.left + ‘px’; divelem.style.width=” + eval(0 + recto.width) + ‘px’; divelem.style.height=” + recto.height + ‘px’; divelem.style.top=” + eval(-12 + recto.top) + ‘px’; //alert(” + recto.top + ‘ ‘ + recto.height + ‘ ‘ + ‘ … ‘ + ‘eval(-12 + recto.top + recto.height)=’ + eval(-12 + recto.top + recto.height)); //divelem.style.bottom=” + eval(-12 + recto.top + recto.height) + ‘px’; divelem.style.zIndex=’999′; divelem.scrollTop=divelem.scrollHeight; tao.style.color=’transparent’; } } var taovalue=tao.value.replace(/\</g,’&lt;’).replace(/\>/g,’&gt;’); while (taovalue.indexOf(String.fromCharCode(10)) != -1) { taovalue=taovalue.replace(String.fromCharCode(10),'<br>’); } acontod.getElementById(‘djc’).innerHTML='<div id=indiv title=\”Journal\” style=\”text-shadow:-0.5px 0.5px 0.5px #ff0000;background: linear-gradient(to right, #e0eafc, #ffffff);margin-top: auto !important;\”>’ + massage(taovalue) + ‘</div>’; } return ”; } “; ?> … allows the div to look almost the same as the textarea but with the smarts and we leave a sliver of bottom textarea showing underneath to allow for a bit of resizing logic as well, here, today, in our changed journal.php PHP Journal web application you can try for yourself Journal web application, which, with content, may look something like … https://www.rjmprogramming.com.au/PHP/journal.php?fjname=Robert_Metcalfe-19590829-161454# which can be Bookmarked or be added to Favourites in your web browser Previous relevant Journal Privacy Tutorial is shown below. We’ve managed to almost keep up the brevity … regarding blog posting titles, that is given a character here or there?! Drilling down on the changed word, to “Privacy”, further to yesterday’s Journal Primer Tutorial more loose privacy, what are … Continue reading →

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Journal Privacy Tutorial

Posted on by

We’ve managed to almost keep up the brevity … regarding blog posting titles, that is given a character here or there?! Drilling down on the changed word, to “Privacy”, further to yesterday’s Journal Primer Tutorial more loose privacy, what are we getting at? Privacy is a subjective term … what goes as “private” for one user can be a completely different set of standards to another user … take, on the clientside of the “privacy and security equation” of online considerations, it is really hard as a programmer to arrange “sensible levels” of security to a user using web browser web inspectors to their full functionality … but as programmers … we can attempt to make it “beyond the patience of those users” regarding the “privacy and security equation” … and in the case of our Journal web application … it interfaces on the clientside to a unique combination of … device web browser … with our Journal web application via window.localStorage means to construct those right hand button or dropdown Recalling HTML element “aids” … and those users could get to that information via most modern web browser web inspectors … given, movie style, they quickly sneak onto the computer of the user just having used the Journal web application, presumably before the sleep manager kicks in, and gets to the relevant web browser’s web inspector’s functionality and copies two encrypted strings onto … it is the “wonderful USB” scene … presumably with a progress bar showing as they are just about to be discovered … and go away to decrypt at their leisure … Pina Colada, anyone? … but … we can annoy such activity, perhaps, by encrypting both the window.localStorage relevant record content and key … which we’re starting to do today We could go a stage further, and just work it within PHP but it is pointless to go too far along these lines because once the Journal link becomes like … https://www.rjmprogramming.com.au/PHP/journal.php?fjname=Robert_Metcalfe-19590829-161454# which can be Bookmarked or be added to Favourites in your web browser … well, everybody knows everything by then (to which end, as of today, there is less address bar argument usage going on as a user creates their content, because we now POST it rather than GET it, perhaps making it that wee bit harder for our “USB thief”), and that is why we could share that link with you all. … Continue reading →

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Journal Primer Tutorial

Posted on by

It’s a new project day …. yay!!! It’s a candidate for shortest blog posting title hereabouts day …. yay!!! And so, with the brevity, we must explain that PHP serverside language is needed here, because writing to the RJM Programming web server, into files, is required for this project. If you do not like brevity though, we can toggle the title for you here!? Am sure our vagueness about any differences between a personal “journal” and a personal “diary” may grate on some … and all because you asked for it!? Anyway, the concept is … Identification … user enters their name user enters their 8 digit date of birth ( eg. 20041231 ) … then to round off on the “identification section” if you will the web application assigns a … 6 digit secret number Posting … web application assigns a default Journal Entry timestamp … you can change along with a textarea means of entering that time snapshot’s … journal entry content … so far just text and 5000 character limit on this first draft user clicks/taps the “Post to Journal” button to display the latest Journal version to the top left above Recounting … even just completing an Identification that will be remembered as a button or dropdown displayed to the right for the user refiring up the Journal web application indicates a name of relevance onto which a click/tap/selection brings about … a validation of either the 8 digit date of birth or 6 digit secret number … allowing access and display to the relevant Journal at the top left of the web application … or if you know the Journal filename … for example … https://www.rjmprogramming.com.au/PHP/journal.php?fjname=Robert_Metcalfe-19590829-161454# which can be Bookmarked or be added to Favourites in your web browser Pretty straightforward in concept, but the security aspects to protect data privacy, add to the complication somewhat in the journal.php PHP Journal web application you can try yourself. If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , | Leave a comment

Linked Sentence Story Sharing Tutorial

Posted on by

Today’s work, adding some sharing functionality, onto yesterday’s Linked Sentence Story Primer Tutorial‘s “proof of concept” work with our new “Linked Sentence Creator” web application was made that much easier now that … “mailto:” emailing “a” links … and … “sms:” SMS “a” links … can incorporate hashtagging methodologies, with our “midair feeling” code … function doemail() { var azx=document.getElementById(‘aemail’); if (!azx) { azx=document.createElement(“a”); } document.body.appendChild(azx); azx.style = “display: none”; azx.id = ‘aemail’; azx.href = ‘mailto:’ + inidea + ‘?subject=’ + encodeURIComponent(‘My Linked Sentence Story’) + ‘&body=’ + encodeURIComponent(document.URL.split(‘?’)[0].split(‘#’)[0] + ‘#span=’ + encodeURIComponent(document.getElementById(‘span0’).innerHTML)); azx.click(); return ”; } function dosms() { snum=(” + prompt(‘Please enter SMS number to send to.’, snum)).replace(/^null/g,”); if (snum.indexOf(‘@’) != -1) { return doemail(snum); } else if (snum.trim() != ”) { var azx=document.getElementById(‘asms’); if (!azx) { azx=document.createElement(“a”); } document.body.appendChild(azx); azx.id = ‘asms’; azx.href = ‘sms:’ + snum + ‘&body=’ + encodeURIComponent(document.URL.split(‘?’)[0].split(‘#’)[0] + ‘#span=’ + encodeURIComponent(document.getElementById(‘span0’).innerHTML)); azx.click(); } return ”; } … so that even if there is a long Linked Sentence Story (perhaps) created we have … less to worry about this sharing functionality working … as well as … not needing to involve PHP (mail server) functionality … as well as … the email actually sent by the emailer (with their email address) explicitly (the opposite being one of the symptoms of Phishing) A few nuances with the link processing, for non-mobile, add an improvement … function analyze(athis) { var retval=true, wincont=”; if ((” + athis.href + ‘#’).substring(0,1) != ‘#’) { athisih=athis.innerHTML; if (!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && (” + location.hash).indexOf(‘=’) != -1) { var arect=athis.getBoundingClientRect(); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } var proposedw=eval(eval(” + screen.width) – eval(” + arect.right)); var proposedh=eval(eval(” + screen.height) – eval(” + arect.bottom)); //alert(” + proposedw + ‘,’ + proposedh + ‘ for ‘ + athis.href + ‘ … ‘ + (‘top=’ + arect.bottom).split(‘.’)[0] + (‘,left=’ + arect.right).split(‘.’)[0] + (‘,width=’ + proposedw).split(‘.’)[0] + (‘,height=’ + proposedh).split(‘.’)[0]); //try { if (proposedw > 0 && proposedh > 0 && 5 == 5) { //wo=window.open(athis.href,’_blank’, (‘top=’ + arect.bottom).split(‘.’)[0] + (‘,left=’ + arect.right).split(‘.’)[0] + (‘,width=’ + proposedw).split(‘.’)[0] + (‘,height=’ + proposedh).split(‘.’)[0]); thirdparam=(‘top=’ + arect.bottom).split(‘.’)[0] + (‘,left=’ + arect.right).split(‘.’)[0] + (‘,width=’ + proposedw).split(‘.’)[0] + (‘,height=’ + proposedh).split(‘.’)[0]; } else if (proposedw > 0 && 5 == 5) { //wo=window.open(athis.href,’_blank’, (‘top=’ + arect.bottom).split(‘.’)[0] + (‘,left=’ + arect.right).split(‘.’)[0] + (‘,width=’ + proposedw).split(‘.’)[0]); thirdparam=(‘top=’ + arect.bottom).split(‘.’)[0] + (‘,left=’ + arect.right).split(‘.’)[0] + (‘,width=’ + proposedw).split(‘.’)[0]; } else if … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment