{"id":71749,"date":"2026-01-21T03:01:00","date_gmt":"2026-01-20T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=71749"},"modified":"2026-01-20T15:21:59","modified_gmt":"2026-01-20T05:21:59","slug":"journal-editing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/journal-editing-tutorial\/","title":{"rendered":"Journal Editing Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Journal Editing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal_editing.gif\" title=\"Journal Editing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Journal Editing Tutorial<\/p><\/div>\n<p>You may think, further to testerday&#8217;s <a title='Journal Content Tutorial' href='#jct'>Journal Content Tutorial<\/a>&#8216;s &#8220;consideration list&#8221; &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/journal-content-tutorial\/'>\n<ul>\n<li>format<\/li>\n<li>display<\/li>\n<li>styling<\/li>\n<li>usability<\/li>\n<li>navigation<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; if we were to add to that &#8220;consideration list&#8221; &#8230;<\/p>\n<ul>\n<li>editability<\/li>\n<\/ul>\n<p> &#8230; we&#8217;d want to reinvoke interest in our <i>textarea<\/i> &#8220;underlay&#8221; to be an &#8220;overlay&#8221; here, it being a more natural text editing HTML element than an HTML <i>div<\/i> element?  Well, HTML5 gave us the wonderful <a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=true where the onblur event of a div element can perform this functionality for us, and we, then, need no <font size=1>(no doubt, kind of &#8220;kludgy&#8221; feeling)<\/font> <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=zOvyRjVQLjE' rel=\"noopener\">&#8220;underlay, overlay&#8221;<\/a> thinking, then, using &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function sedit(spano) {<br \/>\n    if (spano.innerText != decodeURIComponent(('' + spano.getAttribute('data-oit')).replace(\/^null\/g,'').replace(\/^undefined\/g,''))) {<br \/>\n      try {<br \/>\n      document.getElementById('nearby').value=window.btoa(('' + spano.getAttribute('data-ts')).replace(\/^null\/g,'').replace(\/^undefined\/g,'').replace(\/\\_\/g, ' '));<br \/>\n      } catch(hy) {<br \/>\n      document.getElementById('nearby').value=('' + spano.getAttribute('data-ts')).replace(\/^null\/g,'').replace(\/^undefined\/g,'').replace(\/\\_\/g, ' ');<br \/>\n      }<br \/>\n      try {<br \/>\n      document.getElementById('wascont').value=window.btoa(decodeURIComponent(('' + spano.getAttribute('data-oit')).replace(\/^null\/g,'').replace(\/^undefined\/g,'')));<br \/>\n  \/\/alert('0:' + document.getElementById('wascont').value);<br \/>\n      } catch(hdfy) {<br \/>\n      document.getElementById('wascont').value=decodeURIComponent(('' + spano.getAttribute('data-oit')).replace(\/^null\/g,'').replace(\/^undefined\/g,''));<br \/>\n  \/\/alert('10:' + document.getElementById('wascont').value);<br \/>\n      }<br \/>\n      spano.setAttribute('data-oit', encodeURIComponent(spano.innerText));<br \/>\n      try {<br \/>\n      document.getElementById('nowcont').value=window.btoa(spano.innerText);<br \/>\n      } catch(hdy) {<br \/>\n      document.getElementById('nowcont').value=spano.innerText;<br \/>\n      }<br \/>\n      spanolast=spano;<br \/>\n      document.getElementById('editsub').click();<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; new Javascript, which only ever gets invoked should the Journal be accessed at the Journal originator&#8217;s &#8220;device place&#8221;, and building on the new HTML &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n&lt;form id=editf style=display:none; action='.\/journal.php' method=POST target=jjcont&gt;<br \/>\n&lt;input type=hidden name=nearby id=nearby value=''&gt;&lt;\/input&gt;<br \/>\n&lt;input type=hidden name=wascont id=wascont value=''&gt;&lt;\/input&gt;<br \/>\n&lt;input type=hidden name=nowcont id=nowcont value=''&gt;&lt;\/input&gt;<br \/>\n&lt;input type=hidden name=relfile id=relfile value='\" . $jtitle . \"'&gt;&lt;\/input&gt;<br \/>\n&lt;input type=submit id=editsub style=display:none; value='Submit'&gt;&lt;\/input&gt;<br \/>\n&lt;\/form&gt;<br \/>\n&lt;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;'&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; and calling on new PHP &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nif (isset($_POST['nearby']) && isset($_POST['wascont']) && isset($_POST['nowcont']) && isset($_POST['relfile'])) {<br \/>\n  if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . str_replace(' ','_',str_replace('+',' ', urldecode($_POST['relfile'])) . '.html'))) {<br \/>\n    $origcont=file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . str_replace(' ','_',str_replace('+',' ', urldecode($_POST['relfile'])) . '.html'));<br \/>\n    $ocont=$origcont;<br \/>\n    $tsis=str_replace('+',' ',urldecode($_POST['nearby']));<br \/>\n    if (strpos($tsis, ' ') === false) {<br \/>\n    $tsis=base64_decode($_POST['nearby']);<br \/>\n    $wasc=base64_decode($_POST['wascont']);<br \/>\n    $nowc=base64_decode($_POST['nowcont']);<br \/>\n    } else {<br \/>\n    $wasc=str_replace('+',' ',urldecode($_POST['wascont']));<br \/>\n    $nowc=str_replace('+',' ',urldecode($_POST['nowcont']));<br \/>\n    }<br \/>\n    \/\/file_put_contents('xa.xa', $tsis . \"\\n\" . $wasc . \"\\n\" . $nowc . \"\\n\" . $origcont . \"\\n\" . urlencode($wasc) . \"\\n\" . urlencode($nowc) . \"\\n\" . urlencode($origcont));<br \/>\n    if (strpos($origcont, $tsis) !== false) {<br \/>\n      $relcont=$tsis . explode($tsis, $origcont)[1];<br \/>\n            if (strpos($origcont, trim($relcont)) !== false) {<br \/>\n    \/\/file_put_contents('xa.xa2z', $relcont . \"\\nvs\\n\" . $wasc);<br \/>\n            }<br \/>\n      \/\/$relcont=explode($tsis, $origcont)[1];<br \/>\n    \/\/file_put_contents('xa.xa2', $relcont . \"\\nvs\\n\" . $wasc);<br \/>\n    if (9 == 9) {<br \/>\n      if (strpos(trim($relcont), trim($wasc)) === false || (strpos($relcont, explode(\"\\n\",$wasc)[0]) !== false && strpos($relcont, $wasc) === false)) {<br \/>\n    \/\/file_put_contents('xa.xa2g', $relcont . \"\\nvs\\n\" . $wasc);<br \/>\n        $wsc=''; \/\/explode(\"\\n\",$wasc)[0];<br \/>\n    \/\/file_put_contents('xa.xa2h', $relcont . \"\\nvs\\n\" . $wasc);<br \/>\n        $afterrel=explode($tsis . $wsc, $origcont)[-1 + sizeof(explode($tsis . $wsc, $origcont))]; \/\/$relcont)[1];<br \/>\n    \/\/file_put_contents('xa.xa2j', $afterrel);<br \/>\n        $tsl=strlen($tsis);<br \/>\n    \/\/file_put_contents('xa.xa2k', $tsl);<br \/>\n        $tslws=explode(' ',$tsis);<br \/>\n    \/\/file_put_contents('xa.xa2m', sizeof($tslws));<br \/>\n        $afs=explode(\"\\n\", $afterrel);<br \/>\n    \/\/file_put_contents('xa.xa2n', sizeof($afs));<br \/>\n        $ndone=false;<br \/>\n        for ($jj=0; $jj&lt;sizeof($afs); $jj++) {<br \/>\n          if (!$ndone && (strlen($tsl) != strlen($afs[$jj]) || sizeof($tslws) != sizeof(explode(' ',$afs[$jj])))) {<br \/>\n            $wsc.=$afs[$jj] . \"\\n\";<br \/>\n          } else if (strlen($tsl) == strlen($afs[$jj]) && sizeof($tslws) == sizeof(explode(' ',$afs[$jj]))) {<br \/>\n            $ndone=true;<br \/>\n          }<br \/>\n        }<br \/>\n    \/\/file_put_contents('xa.xa2p', $relcont . \"\\nvs\\n\" . $wasc);<br \/>\n        $wasc=trim($wsc);<br \/>\n    \/\/file_put_contents('xa.xa2aa', $relcont . \"\\nvs\\n\" . $wasc);<br \/>\n      }<br \/>\n      }<br \/>\n      \/\/if (strpos($relcont, explode(\"\\n\",$wasc)[0]) !== false) {<br \/>\n      if (strpos($origcont, trim($wasc)) !== false && strpos(trim($relcont), trim($wasc)) === false) {<br \/>\n        $relcont=$origcont;<br \/>\n      }<br \/>\n      if (strpos(trim($relcont), trim($wasc)) !== false) {<br \/>\n    \/\/file_put_contents('xa.xa2a', $relcont);<br \/>\n        if (strpos($origcont, trim($wasc) . \"\\n\") !== false && strpos($origcont, trim($relcont) . \"\\n\") !== false) {<br \/>\n    \/\/file_put_contents('xa.xa2y', $relcont);<br \/>\n        $origcont=str_replace(trim($relcont) . \"\\n\", str_replace(trim($wasc) . \"\\n\",trim($nowc) . \"\\n\",trim($relcont) . \"\\n\"), $origcont);<br \/>\n        } else {<br \/>\n        $origcont=str_replace(trim($relcont), str_replace(trim($wasc),trim($nowc),trim($relcont)), $origcont);<br \/>\n        }<br \/>\n            if (strpos($relcont, trim($wasc)) !== false) {<br \/>\n    \/\/file_put_contents('xa.xa3z', $relcont . \"\\nvs\\n\" . $wasc);<br \/>\n            }<br \/>\n    \/\/file_put_contents('xa.xa3', $relcont);<br \/>\n        if ($origcont != $ocont) {<br \/>\n    \/\/file_put_contents('xa.xa4', $relcont);<br \/>\n         file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . '..' . DIRECTORY_SEPARATOR . str_replace(' ','_',str_replace('+',' ', urldecode($_POST['relfile'])) . '.html'), $origcont);<br \/>\n         echo \"&lt;html&gt;&lt;body&gt;&lt;p&gt;Did change&lt;\/p&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n         exit;<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  echo \"&lt;html&gt;&lt;body&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n  exit;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php---GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php---GETME\" rel=\"noopener\">journal.php<\/a> PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application you can try for yourself Journal web application, which, with content, may look something like &#8230;<\/p>\n<p><code><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' href='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454<\/a># which can be Bookmarked or be added to Favourites in your web browser<\/code><\/p>\n<p> &#8230; and which <a href='#ifx'>you can also try below.<\/a><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-editing-tutorial\/' rel=\"noopener\">Journal Editing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jct'>Previous relevant <a target=\"_blank\" title='Journal Content Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-content-tutorial\/' rel=\"noopener\">Journal Content Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Journal Content Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal_content.gif\" title=\"Journal Content Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Journal Content Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Journal Privacy Tutorial' href='#jpt'>Journal Privacy Tutorial<\/a> we&#8217;re up to issues with &#8220;content&#8221; that involve &#8230;<\/p>\n<ul>\n<li>format<\/li>\n<li>display<\/li>\n<li>styling<\/li>\n<li>usability<\/li>\n<li>navigation<\/li>\n<\/ul>\n<p> &#8230; a lot of which do not suit yesterday&#8217;s content&#8217;s <i>textarea<\/i> format nearly as much as today&#8217;s <i>overlaying<\/i> nested <i>div<\/i> format.  As you will know using <i>textarea<\/i> textual data there are really no easy ways towards any &#8220;smart&#8221; navigation functionality possibilities, but an HTML div with the content (and now navigational dropdowns and &#8220;breadcrumb&#8221; buttons) hosted by another div with <i>display:flex<\/i> <font size=1>(and thanks, here, to the advice from <a target=\"_blank\" title='great advice, thanks' href='https:\/\/stackoverflow.com\/questions\/36130760\/use-justify-content-flex-end-and-to-have-vertical-scrollbar' rel=\"noopener\">this great link<\/a>)<\/font> and <i>absolute &#8220;overlaying&#8221; positioning<\/i> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function wbt(taow,tao) {<br \/>\n    \/\/alert(tao.value);<br \/>\n    if (acontod && tao) {<br \/>\n     if (!divelem) {<br \/>\n     document.getElementById('helpout').style.backgroundColor='yellow';<br \/>\n     document.getElementById('dcont').style.backgroundColor='yellow';<br \/>\n     divelem = acontod.getElementById('djc');<br \/>\n     gtao=tao;<br \/>\n     var recto = tao.getBoundingClientRect();<br \/>\n     if (divelem) { \/\/ thanks to ideas off http:\/\/stackoverflow.com\/questions\/12266320\/copy-div-content-to-textarea-or-text-with-the-same-font-family-style<br \/>\n      divelem.style.display='flex';<br \/>\n    \/\/divelem.style.alignItems='flex-end';<br \/>\n      divelem.style.overflowY='scroll';<br \/>\n      \/\/divelem.style.flexFlow='column nowrap';<br \/>\n      divelem.style.flexDirection='column-reverse';<br \/>\n      divelem.style.fontFamily = window.getComputedStyle(tao,null).fontFamily || tao.style.fontFamily || tao.currentStyle.getCurrentProperty('font-family');<br \/>\n      divelem.style.fontSize = window.getComputedStyle(tao,null).fontSize || tao.style.fontSize || tao.currentStyle.getCurrentProperty('font-size');<br \/>\n      divelem.style.border = window.getComputedStyle(tao,null).border || tao.style.border || tao.currentStyle.getCurrentProperty('border');<br \/>\n      divelem.style.padding = window.getComputedStyle(tao,null).padding || tao.style.padding || tao.currentStyle.getCurrentProperty('padding');<br \/>\n      divelem.style.margin = window.getComputedStyle(tao,null).margin || tao.style.margin || tao.currentStyle.getCurrentProperty('margin');<br \/>\n      divelem.style.overflow = window.getComputedStyle(tao,null).overflow || tao.style.overflow || tao.currentStyle.getCurrentProperty('overflow');<br \/>\n      divelem.style.position='absolute';<br \/>\n      divelem.style.left='' + recto.left + 'px';<br \/>\n      divelem.style.width='' + eval(0 + recto.width) + 'px';<br \/>\n      divelem.style.height='' + recto.height + 'px';<br \/>\n      divelem.style.top='' + eval(-12 + recto.top) + 'px';<br \/>\n      \/\/alert('' + recto.top + ' ' + recto.height + ' ' + ' ... ' + 'eval(-12 + recto.top + recto.height)=' + eval(-12 + recto.top + recto.height));<br \/>\n      \/\/divelem.style.bottom='' + eval(-12 + recto.top + recto.height) + 'px';<br \/>\n      divelem.style.zIndex='999';<br \/>\n      divelem.scrollTop=divelem.scrollHeight;<br \/>\n      tao.style.color='transparent';<br \/>\n     }<br \/>\n     }<br \/>\n     var taovalue=tao.value.replace(\/\\&lt;\/g,'&amp;lt;').replace(\/\\&gt;\/g,'&amp;gt;');<br \/>\n     while (taovalue.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n      taovalue=taovalue.replace(String.fromCharCode(10),'&lt;br&gt;');<br \/>\n     }<br \/>\n     acontod.getElementById('djc').innerHTML='&lt;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;\\\"&gt;' + massage(taovalue) + '&lt;\/div&gt;';<br \/>\n    }<br \/>\n    return '';<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; 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 <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php--GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php--GETME\" rel=\"noopener\">journal.php<\/a> PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application you can try for yourself Journal web application, which, with content, may look something like &#8230;<\/p>\n<p><code><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' href='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454<\/a># which can be Bookmarked or be added to Favourites in your web browser<\/code><\/p>\n<p><iframe id=ifx src='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' style='width:100%;height:700px;'><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-content-tutorial\/' rel=\"noopener\">Journal Content Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jpt'>Previous relevant <a target=\"_blank\" title='Journal Privacy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-privacy-tutorial\/' rel=\"noopener\">Journal Privacy Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Journal Privacy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal_privacy.gif\" title=\"Journal Privacy Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Journal Privacy Tutorial<\/p><\/div>\n<p>We&#8217;ve managed to almost keep up the brevity &#8230; regarding blog posting titles, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a><sup> given a character here or there<\/sup>?!<\/p>\n<p>Drilling down on the changed word, to &#8220;Privacy&#8221;, further to yesterday&#8217;s <a title='Journal Primer Tutorial' href='#jxxpt'>Journal Primer Tutorial<\/a> more loose privacy, what are we getting at?<\/p>\n<ul>\n<li>\n<blockquote><p>\nPrivacy is a subjective term\n<\/p><\/blockquote>\n<p> &#8230; what goes as &#8220;private&#8221; for one user can be a completely different set of standards to another user &#8230;<\/li>\n<li>take, on the clientside of the &#8220;privacy and security equation&#8221; of online considerations, it is really hard as a programmer to arrange &#8220;sensible levels&#8221; of security to a user using web browser web inspectors to their full functionality &#8230; but as programmers &#8230;<\/li>\n<li>we can attempt to make it &#8220;beyond the patience of those users&#8221; regarding the &#8220;privacy and security equation&#8221; &#8230; and in the case of our Journal web application &#8230;<\/li>\n<li>it interfaces on the clientside to a unique combination of &#8230;\n<ol>\n<li>device<\/li>\n<li>web browser<\/li>\n<\/ol>\n<p> &#8230; with our Journal web application via window.<a target=\"_blank\" title='window.localStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp' rel=\"noopener\">localStorage<\/a> means to construct those right hand button or dropdown Recall<sup>ing<\/sup> HTML element &#8220;aids&#8221; &#8230; and those users could get to that information via most modern web browser web inspectors &#8230; <font size=1 id=usbt>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&#8217;s web inspector&#8217;s functionality and copies two encrypted strings onto &#8230; it is the &#8220;wonderful USB&#8221; scene &#8230; presumably with a progress bar showing as they are just about to be discovered &#8230; and go away to decrypt at their leisure &#8230; <span><a class=audioytplay href='https:\/\/www.youtube.com\/watch?v=zROIlspgOjM'>Pina Colada<\/a><\/span>, anyone<sup>?<\/sup><\/font> &#8230; but &#8230;<\/li>\n<li>we can annoy such activity, perhaps, by encrypting both the window.<a target=\"_blank\" title='window.localStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp' rel=\"noopener\">localStorage<\/a> relevant record content and key &#8230; which we&#8217;re starting to do today<\/li>\n<\/ul>\n<p>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 &#8230;<\/p>\n<p><code><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' href='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454<\/a># which can be Bookmarked or be added to Favourites in your web browser<\/code><\/p>\n<p> &#8230; well, everybody knows everything by then <font size=1>(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 <a href=#usbt>&#8220;USB thief&#8221;<\/a>)<\/font>, and that is why we could share that link with you all.  If we went too far regarding privacy and security the whole web application loses all friendliness!<\/p>\n<p>Also regarding <i>Recall<\/i> thoughts, users who use Name and Date of Birth access to a Journal may also be asked for a Secret Number, as well, as of today, depending on where they are when they access the Journal web application.<\/p>\n<p>What is another privacy thing we had going, even as of yesterday?  Would you believe it if we say the Journal data exists on a web server in it&#8217;s own non encrypted form in a file, but barring using <sup>s<\/sup>ftp or some other way to get to the RJM Programming web server in a Terminal session, or such like, the general public can not get to that file, and specify it in some web browser address bar URL, in that we&#8217;ve stored it outside that (for Apache web server, up the web server folder tree from <i>public_html<\/i> &#8220;Document Root&#8221; folder) public access place.  Keen programmers could also encrypt this data within the file, or use a database perhaps, or some other level of privacy\/security, but again, we are not going to that level of security with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php-GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php-GETME\" rel=\"noopener\">journal.php<\/a> PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application you can try for yourself Journal web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-privacy-tutorial\/' rel=\"noopener\">Journal Privacy Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jxxpt'>Previous relevant <a target=\"_blank\" title='Journal Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/journal-primer-tutorial\/' rel=\"noopener\">Journal Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Journal Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.gif\" title=\"Journal Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Journal Primer Tutorial<\/p><\/div>\n<blockquote><p>\nIt&#8217;s a new project day &#8230;. yay!!!\n<\/p><\/blockquote>\n<blockquote><p>\nIt&#8217;s a candidate for shortest blog posting title hereabouts <sub><font siz=1> day<\/font><\/sub> &#8230;. yay!!!\n<\/p><\/blockquote>\n<p>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 <a href='#post-71684' onclick=\"setInterval(function(){ var ia='post-71684'; if (document.getElementById(ia).innerHTML.indexOf(String.fromCharCode(62) + 'Jou' + 'rnal') != -1) { document.getElementById(ia).innerHTML=document.getElementById(ia).innerHTML.replace(String.fromCharCode(62) + 'Jou' + 'rnal',String.fromCharCode(62) + 'PH' + 'P Jou' + 'rnal').replace('String.fromCharCode(62) + Dia' + 'ry',String.fromCharCode(62) + 'PH' + 'P Dia' + 'ry').replace(String.fromCharCode(62) + 'Jou' + 'rnal',String.fromCharCode(62) + 'PH' + 'P Jou' + 'rnal').replace('String.fromCharCode(62) + Dia' + 'ry',String.fromCharCode(62) + 'PH' + 'P Dia' + 'ry'); } else { document.getElementById(ia).innerHTML=document.getElementById(ia).innerHTML.replace(String.fromCharCode(62) + 'PH' + 'P Jou' + 'rnal',String.fromCharCode(62) + 'Jou' + 'rnal').replace(String.fromCharCode(62) + 'PH' + 'P Dia' + 'ry',String.fromCharCode(62) + 'Dia' + 'ry').replace(String.fromCharCode(62) + 'PH' + 'P Jou' + 'rnal',String.fromCharCode(62) + 'Jou' + 'rnal').replace(String.fromCharCode(62) + 'PH' + 'P Dia' + 'ry',String.fromCharCode(62) + 'Dia' + 'ry'); } }, 3765);\" href='#'>toggle the title<\/a> for you here!?<\/p>\n<p>Am sure our vagueness about any differences between a personal &#8220;journal&#8221; and a personal &#8220;diary&#8221; may grate on some &#8230;  <a href='#post-71684' onclick=\"setInterval(function(){ var iia='post-71684'; if (document.getElementById(iia).innerHTML.indexOf('Dia' + 'ry Primer') == -1) { document.getElementById(iia).innerHTML=document.getElementById(iia).innerHTML.replace('Jou' + 'rnal Primer ','Dia' + 'ry Primer ').replace('Jou' + 'rnal Primer ','Dia' + 'ry Primer '); } else { document.getElementById(iia).innerHTML=document.getElementById(iia).innerHTML.replace('Dia' + 'ry Primer ','Journ' + 'al Primer ').replace('Dia' + 'ry Primer ','Jou' + 'rnal Primer ');   } }, 7000);\" href='#'><font size=1>and all because you asked for it<\/font><\/a>!?<\/p>\n<p>Anyway, the concept is &#8230;<\/p>\n<ol>\n<li>Identification &#8230;\n<ul>\n<li>user enters their name<\/li>\n<li>user enters their 8 digit date of birth ( eg. 20041231 ) &#8230; then to round off on the &#8220;identification section&#8221; if you will the web application assigns a &#8230;<\/li>\n<li>6 digit secret number<\/li>\n<\/ul>\n<\/li>\n<li>Posting &#8230;\n<ul>\n<li>web application assigns a default Journal Entry timestamp &#8230; you can change along with a textarea means of entering that time snapshot&#8217;s &#8230;<\/li>\n<li>journal entry content &#8230; so far just text and 5000 character limit on this first draft<\/li>\n<li>user clicks\/taps the &#8220;Post to Journal&#8221; button to display the latest Journal version to the top left above<\/li>\n<\/ul>\n<\/li>\n<li>Recounting &#8230;\n<ul>\n<li>even just completing an Identification that will be remembered as a button or dropdown displayed to the right for the user refiring up the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application indicates a name of relevance onto which a click\/tap\/selection brings about &#8230;<\/li>\n<li>a validation of either the 8 digit date of birth or 6 digit secret number &#8230; allowing access and display to the relevant Journal at the top left of the web application &#8230; or if you know the Journal filename &#8230; for example &#8230;<\/li>\n<li><a target=\"_blank\" title='https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' href='\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/PHP\/journal.php?fjname=Robert_Metcalfe-19590829-161454<\/a># which can be Bookmarked or be added to Favourites in your web browser<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Pretty straightforward in concept, but the security aspects to protect data privacy, add to the complication somewhat in the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php_GETME\" rel=\"noopener\">journal.php<\/a> PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/journal.php\" rel=\"noopener\">Journal<\/a> web application you can try yourself.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d71684' onclick='var dv=document.getElementById(\"d71684\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/journal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71684' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d71711' onclick='var dv=document.getElementById(\"d71711\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/privacy\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71711' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d71732' onclick='var dv=document.getElementById(\"d71732\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/navigation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71732' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d71749' onclick='var dv=document.getElementById(\"d71749\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/contenteditable\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71749' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>You may think, further to testerday&#8217;s Journal Content Tutorial&#8216;s &#8220;consideration list&#8221; &#8230; format display styling usability navigation &#8230; if we were to add to that &#8220;consideration list&#8221; &#8230; editability &#8230; we&#8217;d want to reinvoke interest in our textarea &#8220;underlay&#8221; to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/journal-editing-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,29,37],"tags":[2824,5401,174,257,2442,281,342,367,2570,2457,5301,386,418,429,430,5398,2137,3033,2342,672,2415,830,1546,860,894,932,1988,4702,2976,997,1986,1917,1107,1114,3716,1209,1212,1254,1262,5399,1341,5400,2099,1411,3551],"class_list":["post-71749","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-operating-system","category-tutorials","tag-absolute","tag-bredcrumb","tag-button","tag-content","tag-contenteditable","tag-css","tag-div","tag-dropdown","tag-edit","tag-editing","tag-encrypt","tag-encryption","tag-file","tag-file_get_contents","tag-file_put_contents","tag-first-draft","tag-flat-file","tag-flex","tag-journal","tag-key","tag-localstorage","tag-navigation","tag-nested","tag-onblur","tag-overlay","tag-php","tag-position","tag-primer","tag-privacy","tag-programming","tag-proof-of-concept","tag-scroll","tag-scrolling","tag-security","tag-serverside","tag-style","tag-styling","tag-text","tag-textarea","tag-tutoriial","tag-update","tag-web-browser-address-bar","tag-web-inspector","tag-web-server","tag-window-localstorage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/71749"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=71749"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/71749\/revisions"}],"predecessor-version":[{"id":71757,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/71749\/revisions\/71757"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=71749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=71749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=71749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}