{"id":68799,"date":"2025-06-26T03:01:00","date_gmt":"2025-06-25T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=68799"},"modified":"2025-06-26T16:48:35","modified_gmt":"2025-06-26T06:48:35","slug":"css-web-application-external-javascript-programmatical-updates-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-web-application-external-javascript-programmatical-updates-tutorial\/","title":{"rendered":"CSS Web Application External Javascript Programmatical Updates Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"CSS Web Application External Javascript Programmatical Updates Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_webapps_peer_more.gif\" title=\"CSS Web Application External Javascript Programmatical Updates Tutorial\" \/><\/a><p class=\"wp-caption-text\">CSS Web Application External Javascript Programmatical Updates Tutorial<\/p><\/div>\n<p>Two jobs today, moving on from yesterday&#8217;s <a title='CSS Web Application External Javascript Peer to Peer Tutorial' href='#csswaejppt'>CSS Web Application External Javascript Peer to Peer Tutorial<\/a> &#8230;<\/p>\n<ol>\n<li>allow any random backdrop background image, specified by the user, have it&#8217;s content be retained sharing with any email recipient shared with, just concerning <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html----GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html----GETME' rel=\"noopener\">fifth draft<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html' rel=\"noopener\">CSS Backdrop Filter web application<\/a> also <a href='#myyetifagain'>shown below<\/a><\/li>\n<li>arrange it that the software updates itself without manual intervention adding to the array up the top of the external Javascript<\/li>\n<\/ol>\n<p>That second &#8220;peer to peer&#8221; ambition we&#8217;ve attempted in the past, and needed PHP, and for a hour today we deluded ourselves we could achieve &#8220;programmatical updates&#8221; just with &#8230;<\/p>\n<ul>\n<li>external Javascript <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_webapps_peer.js-GETME\" rel=\"noopener\">css_webapps_peer.js<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_webapps_peer.js-GETME\" rel=\"noopener\">changes<\/a> &#8230; with &#8230;<\/li>\n<li>window.localStorage (like HTTP cookie) usage &#8230; but those two only did the full job we were after regarding the &#8220;first instigator&#8221;, not the rest of users ever calling that web application, because non-server ideas cannot &#8220;programmatically update&#8221; the array in the external Javascript code &#8230; whereas &#8230;<\/li>\n<li>introducing &#8220;self contained&#8221; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.php---GETME\" rel=\"noopener\">changes<\/a> in some PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.php---GETME\" rel=\"noopener\">middle_interest.php<\/a> within the same web server folder &#8230;<\/li>\n<\/ul>\n<p> &#8230; completed the job whereby uploaded new web applications to the RJM Programming domain should trigger &#8220;programmatical updates&#8221; to that topmost dropdown of &#8220;the peerage&#8221; of web applications.  The understanding goes &#8230;<\/p>\n<ul>\n<li>&#8220;the peerage&#8221; new member is probably cloned off an older member &#8230; meaning &#8230;<\/li>\n<li>&#8220;the peerage&#8221; new member calls the same external Javascript (introduced yesterday into the mix) &#8230; meaning &#8230;<\/li>\n<li>anyone&#8217;s first call of &#8220;the peerage&#8221; new member (ie. in all likelihood, the programmer creating it) triggers two things &#8230;\n<ol>\n<li>an updated window.localStorage member (which can contribute to anyone&#8217;s topmost dropdown should it be in the correct format) &#8230; and for this &#8220;first instigator&#8221; (only, because of what it does) &#8230;<\/li>\n<li>call of helper PHP with that &#8220;self contained&#8221; server code &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n \/\/ http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/middle_interest.php?htmlparity=&jsname=.\/css_webapps_peer.js&with=document.URL.split('?')[0].split('#')[0]&inthesenseof=mywasel<br \/>\n if (isset($_GET['htmlparity']) && isset($_GET['with']) && isset($_GET['inthesenseof']) && isset($_GET['jsname'])) {<br \/>\n    if (str_replace('+',' ',urldecode($_GET['inthesenseof'])) != 'mywasel' && strpos(str_replace('+',' ',urldecode($_GET['jsname'])), '\/css_webapps_peer.js') !== false) {<br \/>\n       exit;<br \/>\n    } else if (strpos(str_replace('+',' ',urldecode($_GET['jsname'])), '\/css_webapps_peer.js') === false) {<br \/>\n       exit;<br \/>\n    }<br \/>\n    $jscont='';<br \/>\n    $withcont=file_get_contents(str_replace('https:','http:',str_replace('+',' ',urldecode($_GET['jsname']))));<br \/>\n    if ($withcont != '') {<br \/>\n    $jscont=$withcont;<br \/>\n    $wcont=file_get_contents('.\/' . basename(str_replace('https:','http:',str_replace('+',' ',urldecode($_GET['with'])))));<br \/>\n    if ($withcont != '') {<br \/>\n      $wewanttwo=explode('.\/' . basename(str_replace('+',' ',urldecode($_GET['with']))), $withcont);<br \/>\n      if (sizeof($wewanttwo) == 1) {<br \/>\n       $wewantthree=explode(str_replace('+',' ',urldecode($_GET['inthesenseof'])), $wcont);<br \/>\n       if (sizeof($wewantthree) &gt; 1) {<br \/>\n         $jscont=str_replace('\"];', '\",\"' . '.\/' . basename(str_replace('+',' ',urldecode($_GET['with']))) . '\"];', $jscont);<br \/>\n         file_put_contents('.\/' . basename(str_replace('+',' ',urldecode($_GET['jsname']))), $jscont);<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    exit;<br \/>\n }<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; which might add to the external Javascript top array on (web server) disk<\/li>\n<\/ol>\n<p> &#8230; <font color=blue>via (the near to document.body onload event function)<\/font> &#8230;<br \/>\n<code><br \/>\n  var walist=[\".\/background_position_various.html\",\".\/apply_a_mask.html\",\".\/backdrop_filter.html\"];<br \/>\n<br \/>\n  function addtodropdown() {<br \/>\n    var inbv=0, jnbv=0, apptitleis='', ocdone=false, wlsarr=[], iwl=0;<br \/>\n    var wasohis='';<br \/>\n    var appwordsare=[];<br \/>\n    if (document.getElementById('mywasel')) {<br \/>\n      <font color=blue>if (('' + window.localStorage.getItem('css_webapps_peer_more_options')).toLowerCase().replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '') {<br \/>\n         wlsopts=yourdecodeURIComponent('' + window.localStorage.getItem('css_webapps_peer_more_options'));<br \/>\n         wlsarr=wlsopts.split(',');<br \/>\n         for (iwl=0; iwl&lt;wlsarr.length; iwl++) {<br \/>\n             if (walist.indexOf('.\/' + wlsarr[iwl].split('\/')[eval(-1 + wlsarr[iwl].split('\/').length)].split('?')[0].split('#')[0]) == -1) {<br \/>\n               walist.push('.\/' + wlsarr[iwl].split('\/')[eval(-1 + wlsarr[iwl].split('\/').length)].split('?')[0].split('#')[0]);<br \/>\n             }<br \/>\n         }<br \/>\n      }<br \/>\n      if (walist.indexOf('.\/' + document.URL.split('\/')[eval(-1 + document.URL.split('\/').length)].split('?')[0].split('#')[0]) == -1) {<br \/>\n         walist.push('.\/' + document.URL.split('\/')[eval(-1 + document.URL.split('\/').length)].split('?')[0].split('#')[0]);<br \/>\n         if (wlsopts == '') {<br \/>\n           window.localStorage.setItem('css_webapps_peer_more_options', encodeURIComponent('.\/' + document.URL.split('\/')[eval(-1 + document.URL.split('\/').length)].split('?')[0].split('#')[0] + ''));<br \/>\n           wlsopts='.\/' + document.URL.split('\/')[eval(-1 + document.URL.split('\/').length)].split('?')[0].split('#')[0] + '';<br \/>\n         } else {<br \/>\n           window.localStorage.removeItem('css_webapps_peer_more_options');<br \/>\n           window.localStorage.setItem('css_webapps_peer_more_options', encodeURIComponent(wlsopts + ',.\/' + document.URL.split('\/')[eval(-1 + document.URL.split('\/').length)].split('?')[0].split('#')[0] + ''));<br \/>\n           wlsopts+=',.\/' + document.URL.split('\/')[eval(-1 + document.URL.split('\/').length)].split('?')[0].split('#')[0] + '';<br \/>\n         }<br \/>\n         if (document.getElementById('ifbot')) {<br \/>\n           if (('' + document.getElementById('ifbot').src).indexOf('\/About_Us.htm') != -1) {<br \/>\n             document.getElementById('ifbot').src='\/HTMLCSS\/middle_interest.php?htmlparity=&jsname=' + encodeURIComponent('.\/css_webapps_peer.js') + '&with=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0]) + '&inthesenseof=mywasel';<br \/>\n           }<br \/>\n         }<br \/>\n      } <\/font><br \/>\n      wasohis=document.getElementById('mywasel').outerHTML;<br \/>\n      for (inbv=0; inbv&lt;walist.length; inbv++) {<br \/>\n         if (wasohis.indexOf(walist[inbv]) == -1) {<br \/>\n            apptitleis='';<br \/>\n            appwordsare=walist[inbv].split('\/')[eval(-1 + walist[inbv].split('\/').length)].split('.')[0].split('_');<br \/>\n            for (jnbv=0; jnbv&lt;appwordsare.length; jnbv++) {<br \/>\n               if (eval('' + appwordsare[jnbv].length) &lt;= 3) {<br \/>\n                 apptitleis+=' ' + appwordsare[jnbv].toLowerCase();<br \/>\n               } else {<br \/>\n                 apptitleis+=' ' + appwordsare[jnbv].substring(0,1).toUpperCase() + appwordsare[jnbv].substring(1).toLowerCase();<br \/>\n               }<br \/>\n            }<br \/>\n            if (apptitleis != '') {<br \/>\n               document.getElementById('mywasel').innerHTML+='&lt;option value=\"' + walist[inbv] + '\"&gt;' + apptitleis + '&lt;\/option&gt;';<br \/>\n            }<br \/>\n         }<br \/>\n         if (!ocdone && wasohis.indexOf(' onchange=') == -1) {<br \/>\n            ocdone=true;<br \/>\n            document.getElementById('mywasel').onchange=function(event) { if (event.target.value.trim() != '') { location.href=event.target.value; } };<br \/>\n         } else {<br \/>\n            ocdone=true;<br \/>\n         }<br \/>\n      }<br \/>\n    }<br \/>\n  \/\/ blah blah blah<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; meaning non &#8220;first instigator&#8221; users need neither helper above<\/li>\n<\/ul>\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\/css-web-application-external-javascript-programmatical-updates-tutorial\/' rel=\"noopener\">CSS Web Application External Javascript Programmatical Updates Tutorial<\/a>.<\/p-->\n<hr>\n<p id='csswaejppt'>Previous relevant <a target=\"_blank\" title='CSS Web Application External Javascript Peer to Peer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-web-application-external-javascript-peer-to-peer-tutorial\/' rel=\"noopener\">CSS Web Application External Javascript Peer to Peer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"CSS Web Application External Javascript Peer to Peer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_webapps_peer.png\" title=\"CSS Web Application External Javascript Peer to Peer Tutorial\" \/><\/a><p class=\"wp-caption-text\">CSS Web Application External Javascript Peer to Peer Tutorial<\/p><\/div>\n<p>We tackle a few more issues onto yesterday&#8217;s <a title='CSS Web Application Highlighted Text Tutorial' href='#csswahtt'>CSS Web Application Highlighted Text Tutorial<\/a> with &#8230;<\/p>\n<ul>\n<li>peer to peer linking of these 3 (so far) CSS referencing web applications via a new header element dropdown element<\/li>\n<li>some better email functionality when the web application is hosted such as it is with the &#8220;shown below&#8221; links in this blog posting<\/li>\n<li>allow a change of background image to use for the Backdrop Filter web application<\/li>\n<\/ul>\n<p>The first two used for their work the code of a new <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_webapps_peer.js_GETME\" rel=\"noopener\">css_webapps_peer.js<\/a> external Javascript interfacing with &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html---GETME' rel=\"noopener\">highlighted textarea text using<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html---GETME' rel=\"noopener\">fourth draft<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html' rel=\"noopener\">CSS Backdrop Filter web application<\/a> also <a href='#myyetifagain'>shown below<\/a><\/li>\n<li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/apply_a_mask.html---GETME' rel=\"noopener\">highlighted textarea text using<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/apply_a_mask.html---GETME' rel=\"noopener\">fourth draft<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/apply_a_mask.html' rel=\"noopener\">CSS Apply a Mask web application<\/a> also <a href='#myifyetagain'>shown below<\/a><\/li>\n<li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html---GETME' rel=\"noopener\">highlighted textarea text using<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html---GETME' rel=\"noopener\">fourth draft<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html' rel=\"noopener\">CSS Background Position web application<\/a> also <a href='#myifagain'>shown below<\/a><\/li>\n<\/ul>\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\/css-web-application-external-javascript-peer-to-peer-tutorial\/' rel=\"noopener\">CSS Web Application External Javascript Peer to Peer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='csswahtt'>Previous relevant <a target=\"_blank\" title='CSS Web Application Highlighted Text Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-web-application-highlighted-text-tutorial\/' rel=\"noopener\">CSS Web Application Highlighted Text Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"CSS Web Application Highlighted Text Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_highlighting_div_overlay.png\" title=\"CSS Web Application Highlighted Text Tutorial\" \/><\/a><p class=\"wp-caption-text\">CSS Web Application Highlighted Text Tutorial<\/p><\/div>\n<p>You may have been around reading this blog to recall <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/sentence-text-word-underlining-primer-tutorial\/' title='Sentence Text Word Underlining Primer Tutorial' rel=\"noopener\">Sentence Text Word Underlining Primer Tutorial<\/a>&#8216;s discussions regarding the text data talents of HTML element type <i>textarea<\/i> up against <i>div<\/i> and the resultant table reflecting our views on this &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/sentence-text-word-underlining-primer-tutorial\/'>\n<table style=\"width:90%;\" border=\"5\">\n<tbody>\n<tr>\n<th colspan=\"3\">Text Talents of HTML Elements<\/th>\n<\/tr>\n<tr>\n<td>Textarea<\/td>\n<td> \u2026 versus \u2026<\/td>\n<td>Div<\/td>\n<\/tr>\n<tr>\n<th colspan=\"3\">And <a target=\"_blank\" title=\"CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-making-of-interactive-integration-tutorial\/\" rel=\"noopener\">CSS 3D Transformation Matrix Making Of Interactive Integration Tutorial<\/a> set out how we see the pros and cons as \u2026<\/th>\n<\/tr>\n<tr>\n<td colspan=\"3\">\n<blockquote cite=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-3d-transformation-matrix-making-of-interactive-integration-tutorial\/\" title=\" ... welcome to the long hover functionality that shows Blog Post regarding Blockquote Tag CSS\">\n<table border=\"100\">\n<tbody>\n<tr>\n<th>Text Functionality Issue<\/th>\n<th>HTML Element Type<\/th>\n<th>Strength<\/th>\n<th>Weakness (where a \u201cYes\u201d is like \u2026 \u201cOh No!\u201d)\n<\/th>\n<\/tr>\n<tr>\n<td rowspan=\"2\">Display Monocolour Text<\/td>\n<td>Textarea\n<\/td>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Div\n<\/td>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td rowspan=\"2\">Display Editable Text<\/td>\n<td>Textarea\n<\/td>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Div\n<\/td>\n<td><\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<\/tr>\n<tr>\n<td rowspan=\"2\">Display Multicolour Text<\/td>\n<td>Textarea\n<\/td>\n<td><\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>Div\n<\/td>\n<td>Yes<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/blockquote>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/blockquote>\n<p> &#8230; and it&#8217;s assertion that regarding <i>Display Multicolour Text<\/i> the use of <ii>textarea<\/i> elements were not suitable.  Well, today, we do not resile from that view, when you consider a <i>textarea<\/i> element on it&#8217;s own, but what if it gets <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" rel=\"noopener\">&#8220;overlay&#8221;<\/a> type of help from <i>div<\/i> nesting <i>span<\/i> elements (and we have &#8220;reverse corollaries&#8221; here with SVG <i>tspan<\/i> element usage in <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/svg-tspan-element-primer-tutorial\/' title='SVG Tspan Element Primer Tutorial' rel=\"noopener\">SVG Tspan Element Primer Tutorial<\/a>) with background colour and transparent text, leading to capabilities where <i>textarea<\/i> text of relevance can be highlighted.<\/p>\n<p>Sounds good?!  Yes, but it must be said we could have just replaced the <i>textarea<\/i> elements (within our CSS Themed suit of web applications of recent times, talked about with yesterday&#8217;s <a title='CSS Backdrop Filter Recursive Iframe Tutorial' href='#cssbfrit'>CSS Backdrop Filter Recursive Iframe Tutorial<\/a>) with <i>div<\/i> ones where <a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\"><i>contenteditable=true<\/i><\/a> could still allow for interactivity, but for the reasons &#8230;<\/p>\n<ul>\n<li>we wanted to see if highlighting text within a <i>textarea<\/i> could be achieved <font size=1>&#8230; Spoiler Alert: yes, it&#8217;s possible<\/font> &#8230; as well as<\/li>\n<li><i>textarea<\/i> elements have a great resizing &#8220;native&#8221; functionality<\/li>\n<li><i>textarea<\/i> elements feel far more &#8220;the go&#8221; when asking for user interactive entry data that can contain linefeeds<\/li>\n<li>over time we find more and more use for the <i>textarea<\/i> attributes <i>value<\/i> and <i>innerHTML<\/i> as separately useful dual ways of populating the element, especially in the scenario with text data where the latter is useful to initiate with text data containing &lt; and &gt; which gets mapped to &amp;lt; and &amp;gt; respectively once the code looks at that <i>textarea<\/i>&#8216;s <i>value<\/i> attribute <font size=1>&#8230; Cute, huh?!  In fairness, though <i>div<\/i> contenteditable=true also have interesting interplay with <i>innerHTML<\/i> and <i>innerText<\/i> attributes going on in this respect too.<\/font><\/li>\n<\/ul>\n<p> &#8230; we&#8217;re carrying on with <i>textarea<\/i> element interactive entry usage with this current suite of CSS based web applications.<\/p>\n<p>Here&#8217;s the new Javascript function crucial to making this possible &#8230;<\/p>\n<p><code><br \/>\n  function divoverlayclone(ovid, indefst) {<br \/>\n    var tih='', taih=document.getElementById('divhost').innerHTML, nextih='', tbit='', huhs=[], ihuh=0, mss='', ahh=[], ione=1, ihh=0;<br \/>\n    var tarectis=document.getElementById('taidea').getBoundingClientRect();<br \/>\n    if (ovid == '') { ovid='doverlay'; } else {<br \/>\n      mss=ovid.replace('doverlay','');<br \/>\n      for (var iou=0; iou&lt;eval('' + mss); iou++) {<br \/>\n        ahh.push('');<br \/>\n      }<br \/>\n    }<br \/>\n    var defclass=(' ' + mss).slice(-1).trim();<br \/>\n    for (var itih=taih.indexOf('&lt;'); itih&lt;taih.length; itih++) {<br \/>\n      if (taih.substring(itih).substring(0,1) == String.fromCharCode(10)) {<br \/>\n        tih+='&lt;br&gt;';<br \/>\n      } else if (taih.substring(itih).substring(0,1) == '&lt;') {<br \/>\n        tih+='&lt;';<br \/>\n      } else if (taih.substring(itih).substring(0,1) == '&gt;') {<br \/>\n        tih+='&gt;';<br \/>\n      } else {<br \/>\n        tih+=taih.substring(itih).substring(0,1);<br \/>\n      }<br \/>\n    }<br \/>\n    document.getElementById(ovid).style.position='absolute';<br \/>\n    document.getElementById(ovid).style.top='' + tarectis.top + 'px';<br \/>\n    document.getElementById(ovid).style.left='' + tarectis.left + 'px';<br \/>\n    document.getElementById(ovid).style.width='' + tarectis.width + 'px';<br \/>\n    document.getElementById(ovid).style.height='' + tarectis.height + 'px';<br \/>\n    document.getElementById(ovid).style.fontSize = window.getComputedStyle(document.getElementById('taidea'),null).fontSize || document.getElementById('taidea').style.fontSize || document.getElementById('taidea').currentStyle.getCurrentProperty('font-size');<br \/>\n    if (indefst.trim() != '') {<br \/>\n    \/\/alert('0:' + indefst);<br \/>\n    if (document.getElementById('divhost').innerHTML.indexOf(indefst.replace(':',': ')) != -1) {<br \/>\n    \/\/alert('00:' + indefst);<br \/>\n    if (tih.indexOf(indefst.replace(':',': ') + '\"&gt;') != -1) {<br \/>\n    document.getElementById(ovid).innerHTML=tih.replace(indefst.replace(':',': ') + '\"&gt;', '&lt;span id=myspan' + mss + ' class=highlight' + (' ' + mss).slice(-1).trim() + '  title=\"' + indefst.replace(':',': ') + '\"&gt;' + indefst.replace(':',': ') + '&lt;\/span&gt;\"&gt;');<br \/>\n    } else {<br \/>\n    document.getElementById(ovid).innerHTML=tih.replace(indefst.replace(':',': '), '&lt;span id=myspan' + mss + ' class=highlight' + (' ' + mss).slice(-1).trim() + '  title=\"' + indefst.replace(':',': ') + '\"&gt;' + indefst.replace(':',': ') + '&lt;\/span&gt;');<br \/>\n    }<br \/>\n    } else if (document.getElementById('divhost').innerHTML.indexOf(indefst) != -1) {<br \/>\n    \/\/alert('000:' + indefst);<br \/>\n    if (tih.indexOf(indefst + '\"&gt;') != -1) {<br \/>\n    document.getElementById(ovid).innerHTML=tih.replace(indefst + '\"&gt;', '&lt;span id=myspan' + mss + ' class=highlight' + (' ' + mss).slice(-1).trim() + '  title=\"' + indefst + '\"&gt;' + indefst + '&lt;\/span&gt;\"&gt;');<br \/>\n    } else {<br \/>\n    document.getElementById(ovid).innerHTML=tih.replace(indefst, '&lt;span id=myspan' + mss + ' class=highlight' + (' ' + mss).slice(-1).trim() + '  title=\"' + indefst + '\"&gt;' + indefst + '&lt;\/span&gt;');<br \/>\n    }<br \/>\n    } else {<br \/>\n    return '';<br \/>\n    }<br \/>\n    } else {<br \/>\n    \/\/alert(defst);<br \/>\n    if (defst.indexOf(';') == -1) {<br \/>\n    huhs=defst.split(' ');<br \/>\n    \/\/alert('2:' + huhs[0]);<br \/>\n    for (ihuh=0; ihuh&lt;huhs.length; ihuh++) {<br \/>\n     if (document.getElementById('mysel').innerHTML.indexOf(' value=\"' + huhs[ihuh] + '\"&gt;') != -1) {<br \/>\n    \/\/alert('3:' + huhs[0]);<br \/>\n      tbit+=document.getElementById('mysel').innerHTML.split(' value=\"' + huhs[ihuh] + '\"&gt;')[1].split('&lt;')[0];<br \/>\n      ahh.push('doverlay' + ione + '~' + document.getElementById('mysel').innerHTML.split(' value=\"' + huhs[ihuh] + '\"&gt;')[1].split('&lt;')[0]);<br \/>\n      ione++;<br \/>\n     }<br \/>\n    }<br \/>\n    defclass='' + ahh.length;<br \/>\n    \/\/alert('defclass=' + defclass);<br \/>\n    document.getElementById(ovid).innerHTML=tih.replace(defst, '&lt;span id=myspan' + mss + ' class=highlight' + defclass + '  title=\"' + tbit + '\"&gt;' + defst + '&lt;\/span&gt;');<br \/>\n    } else if (document.getElementById('mysel').innerHTML.indexOf(' value=\"' + defst + '\"&gt;') != -1) {<br \/>\n    if (eval('' + tih.split(defst).length) &gt; 2) {<br \/>\n      ahh.push('doverlay' + ione + '~' + document.getElementById('mysel').innerHTML.split(' value=\"' + defst + '\"&gt;')[1].split('&lt;')[0]);<br \/>\n      ione++;<br \/>\n      defclass='' + ahh.length;<br \/>\n    }<br \/>\n    document.getElementById(ovid).innerHTML=tih.replace(defst, '&lt;span id=myspan' + mss + ' class=highlight' + defclass + '  title=\"' + document.getElementById('mysel').innerHTML.split(' value=\"' + defst + '\"&gt;')[1].split('&lt;')[0] + '\"&gt;' + defst + '&lt;\/span&gt;');<br \/>\n    } else {<br \/>\n    \/\/alert(defst + ' in? ' + tih);<br \/>\n    if (eval('' + tih.split(defst).length) &gt; 2 && 1 == 7) {<br \/>\n      ahh.push('doverlay' + ione + '~' + document.getElementById('mysel').innerHTML.split(' value=\"' + defst + '\"&gt;')[1].split('&lt;')[0]);<br \/>\n      ione++;<br \/>\n      defclass='' + ahh.length;<br \/>\n    }<br \/>\n    document.getElementById(ovid).innerHTML=tih.replace(defst, '&lt;span id=myspan' + mss + ' class=highlight' + defclass + '  title=\"\"&gt;' + defst + '&lt;\/span&gt;');<br \/>\n    }<br \/>\n    }<br \/>\n    if (document.getElementById('myspan' + mss)) {<br \/>\n\/\/      document.getElementById('myspan' + mss).className='highlight' + ahh.length;<br \/>\n    \/\/alert('mss=' + mss + ' oh=' + document.getElementById('myspan' + mss).outerHTML);<br \/>\n      nextih=document.getElementById('myspan' + mss).outerHTML;<br \/>\n      tarectis=document.getElementById('myspan' + mss).getBoundingClientRect();<br \/>\n      document.getElementById(ovid).style.position='absolute';<br \/>\n      document.getElementById(ovid).style.top='' + tarectis.top + 'px';<br \/>\n      document.getElementById(ovid).style.left='' + tarectis.left + 'px';<br \/>\n      document.getElementById(ovid).style.width='' + tarectis.width + 'px';<br \/>\n      document.getElementById(ovid).style.height='' + tarectis.height + 'px';<br \/>\n      if (tbit != '') {<br \/>\n      document.getElementById(ovid).title=tbit;<br \/>\n      } else {<br \/>\n      document.getElementById(ovid).title=document.getElementById('myspan' + mss).title;<br \/>\n      }<br \/>\n      \/\/document.getElementById(ovid).className='highlight' + ahh.length;<br \/>\n      document.getElementById(ovid).innerHTML=nextih;<br \/>\n    }<br \/>\n    if (eval('' + ahh.length) &gt; 0) {<br \/>\n    for (ihh=0; ihh&lt;ahh.length; ihh++) {<br \/>\n    if (ahh[ihh].trim() != '') {<br \/>\n    if (document.getElementById('divhost').innerHTML.replace(\/\\:\\ \/g,':').indexOf(ahh[ihh].split('~')[1]) != -1) {<br \/>\n    \/\/alert(ahh[ihh]);<br \/>\n    divoverlayclone(ahh[ihh].split('~')[0], ahh[ihh].split('~')[1]);<br \/>\n    } else {<br \/>\n    document.getElementById(ahh[ihh].split('~')[0]).innerHTML='';<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; now in &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html--GETME' rel=\"noopener\">highlighted textarea text using<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html--GETME' rel=\"noopener\">third draft<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html' rel=\"noopener\">CSS Backdrop Filter web application<\/a> also <a href='#myyetifagain'>shown below<\/a><\/li>\n<li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/apply_a_mask.html--GETME' rel=\"noopener\">highlighted textarea text using<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/apply_a_mask.html--GETME' rel=\"noopener\">third draft<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/apply_a_mask.html' rel=\"noopener\">CSS Apply a Mask web application<\/a> also <a href='#myifyetagain'>shown below<\/a><\/li>\n<li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html--GETME' rel=\"noopener\">highlighted textarea text using<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html--GETME' rel=\"noopener\">third draft<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html' rel=\"noopener\">CSS Background Position web application<\/a> also <a href='#myifagain'>shown below<\/a><\/li>\n<\/ul>\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\/css-web-application-highlighted-text-tutorial\/' rel=\"noopener\">CSS Web Application Highlighted Text Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssbfrit'>Previous relevant <a target=\"_blank\" title='CSS Backdrop Filter Recursive Iframe Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-backdrop-filter-recursive-iframe-tutorial\/' rel=\"noopener\">CSS Backdrop Filter Recursive Iframe Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"CSS Backdrop Filter Recursive Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.png\" title=\"CSS Backdrop Filter Recursive Iframe Tutorial\" \/><\/a><p class=\"wp-caption-text\">CSS Backdrop Filter Recursive Iframe Tutorial<\/p><\/div>\n<p>Today&#8217;s blog posting calls on the previous &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/image-filter-display-tutorial\/' title='Image Filter Display Tutorial' rel=\"noopener\">Image Filter Display Tutorial<\/a> &#8230; and asking the question we had making this tutorial &#8230;<br \/>\n<blockquote><p>\nCan the CSS <i>filter<\/i> property applications to HTML img elements also be applied to any form of &#8220;background&#8221; anything?\n<\/p><\/blockquote>\n<p> &#8230; with an answer &#8230;<\/li>\n<li>\n<blockquote><p>\nSort of &#8230; if by &#8220;background&#8221; we can say &#8220;backdrop&#8221; to a nested, say, HTML div element, with some wording, in turn hosted by a, say, HTML div element that has a &#8220;background&#8221; image going on.\n<\/p><\/blockquote>\n<p> &#8230; via CSS properties like &#8230;<br \/>\n<code><br \/>\nbackdrop-filter: sepia(100%);<br \/>\n<\/code><br \/>\n &#8230; usage<\/li>\n<\/ul>\n<p>Today&#8217;s work clones off a clone (using the work of yesterday&#8217;s <a title='CSS Mask HTML Element Recursive Iframe Tutorial' href='#cssmhtmlerit'>CSS Mask HTML Element Recursive Iframe Tutorial<\/a>) with a new <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html-GETME' rel=\"noopener\">&#8220;how we got there&#8221;<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html-GETME' rel=\"noopener\">initial cloned draft<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html' rel=\"noopener\">web application<\/a> also <a href='#myyetifagain'>shown below<\/a>.<\/p>\n<p><iframe id=myyetifagain src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/backdrop_filter.html' style='width:100%;height:900px;'><\/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\/css-backdrop-filter-recursive-iframe-tutorial\/' rel=\"noopener\">CSS Backdrop Filter Recursive Iframe Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssmhtmlerit'>Previous relevant <a target=\"_blank\" title='CSS Mask HTML Element Recursive Iframe Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-mask-html-element-recursive-iframe-tutorial\/' rel=\"noopener\">CSS Mask HTML Element Recursive Iframe Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/apply_a_mask.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"CSS Mask HTML Element Recursive Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/apply_a_mask.png\" title=\"CSS Mask HTML Element Recursive Iframe Tutorial\" \/><\/a><p class=\"wp-caption-text\">CSS Mask HTML Element Recursive Iframe Tutorial<\/p><\/div>\n<p>Often concept ideas you have for web applications have so much in common with something you&#8217;ve been working on, you&#8217;d be pretty foolish to not heed the adage &#8230;<\/p>\n<ul>\n<li>\n<blockquote><p>\n<a target=\"_blank\" href='https:\/\/www.google.com\/search?q=%22Don%27t+let+the+perfect+become+the+enemy+of+the+good.%22%0D%0A&#038;sca_esv=b634f8350d8f10d0&#038;sxsrf=AE3TifOJ5CJXmGrDpN2_apwRFAdfwdg4zA%3A175047844640a2&#038;ei=bi5WaL6vGOah1e8PpYPzoQI&#038;ved=0ahUKEwi-nvCv0IGOAxXmUPUHHaXBPCQQ4dUDCBA&#038;uact=5&#038;oq=%22Don%27t+let+the+perfect+become+the+enemy+of+the+good.%22%0D%0A&#038;gs_lp=Egxnd3Mtd2l6LXNlcnAiNiJEb24ndCBsZXQgdGhlIHBlcmZlY3QgYmVjb21lIHRoZSBlbmVteSBvZiB0aGUgZ29vZC4iCkgAUABYAHAAeAGQAQCYAQCgAQCqAQC4AQPIAQD4AQL4AQGYAgCgAgCYAwCSBwCgBwCyBwC4BwDCBwDIBwA&#038;sclient=gws-wiz-serp' rel=\"noopener\">Don&#8217;t let the perfect be the enemy of the good.<\/a>\n<\/p><\/blockquote>\n<p> &#8230; and one way we find to help here is &#8230;\n<\/li>\n<li>&#8220;cloning&#8221; web applications on the understanding that what they have in common so far outweighs what the differences are that you push ahead, and wait and see what the issues are, after that initial &#8220;cloning&#8221; (usually) huge saving of development time<\/li>\n<\/ul>\n<p>With that in mind, today, we&#8217;re adding off yesterday&#8217;s <a title='CSS Background Position Revisit Recursive Iframe Tutorial' href='#cssbprrit'>CSS Background Position Revisit Recursive Iframe Tutorial<\/a> efforts, a &#8230;<\/p>\n<p><code><br \/>\nMask an HTML Element via CSS<br \/>\n<\/code><\/p>\n<p> &#8230; clone of it with those &#8220;midstream&#8221; SMS and email recursive iframe smarts (built in) to create a new <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/apply_a_mask.html-GETME' rel=\"noopener\">&#8220;how we got there&#8221;<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/apply_a_mask.html-GETME' rel=\"noopener\">initial cloned draft<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/apply_a_mask.html' rel=\"noopener\">web application<\/a> also <a href='#myifyetagain'>shown below<\/a>.<\/p>\n<p><iframe id=myifyetagain src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/apply_a_mask.html' style='width:100%;height:900px;'><\/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\/css-background-position-revisit-recursive-iframe-tutorial\/' rel=\"noopener\">CSS Background Position Revisit Recursive Iframe Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssbprrit'>Previous relevant <a target=\"_blank\" title='CSS Background Position Revisit Recursive Iframe Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-background-position-revisit-recursive-iframe-tutorial\/' rel=\"noopener\">CSS Background Position Revisit Recursive Iframe Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"CSS Background Position Revisit Recursive Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various_recursive_iframe.gif\" title=\"CSS Background Position Revisit Tutorial\" \/><\/a><p class=\"wp-caption-text\">CSS Background Position Revisit Recursive Iframe Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='CSS Background Position Revisit Tutorial' href='#cssbprt'>CSS Background Position Revisit Tutorial<\/a>, today we&#8217;re offering &#8230;<\/p>\n<ul>\n<li>SMS &#8230; or &#8230;<\/i>\n<li>email<\/li>\n<\/ul>\n<p> &#8230; means of sharing your CSS work, as an interactive user, but on this occasion, we have a big gulf regarding what these two options can achieve, due to data length limits.<\/p>\n<ul>\n<li>SMS &#8230; just the last styling change is transferred to the recipient as what they see &#8230; whereas &#8230;<\/i>\n<li>email &#8230; records all user changes to the blockquote element and presents them to the recipient with the most recent topmost down to the original down the bottom of a stack of HTML iframe elements <i>called recursively<\/i><\/li>\n<\/ul>\n<p>So, what do we mean by &#8220;<i>called recursively<\/i>&#8220;?  Well, like a linked list, our web application always contains an HTML iframe initially &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe frameborder=0 src='\/About_Us.html' id=ifbot style=display:none;width:100%;height:6000px;&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; down the bottom of it&#8217;s body element.  The document.body onload event Javascript logic call as per <i>onl(&#8221;);<\/i> <font color=blue>now includes<\/font> &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>var inta='', startstyle='';<br \/>\n  var intas=[];<br \/>\n  if (document.URL.indexOf('Cjxi') != -1) {<br \/>\n    intas=document.URL.split('Cjxi');<br \/>\n    for (var inm=1; inm&lt;intas.length; inm++) {<br \/>\n      intas[eval(-1 + inm)]=decodeURIComponent(decodeURIComponent(escape(atob('Cjxi' + intas[inm]))));<br \/>\n    }<br \/>\n  }<br \/>\n  inta=(location.search + ('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'')).split('taidea' + eqis)[1] ? ourdecodeURIComponent((location.search + ('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'')).split('taidea' + eqis)[1].split('&')[0]).replace(\/\\+\/g,plus) : '';<br \/>\n  if (inta.indexOf('background') == 0) {<br \/>\n    startstyle=inta;<br \/>\n    inta='';<br \/>\n  }<br \/>\n  var preint='';<br \/>\n  preint=inta.split('blockquote')[0];<br \/>\n  if (eval('' + intas.length) == 0) {<br \/>\n  intas=(inta + ' ').substring(preint.length).split('&lt;blockquote');<br \/>\n  }<br \/>\n  var nextinta='';<\/font><br \/>\n  <br \/>\n  function onl(altta) {<br \/>\n    var outta=inta;<br \/>\n    <font color=blue>if (altta == '' && eval('' + intas.length) &gt; 1) {<br \/>\n      nextinta=inta.replace(preint + intas[0], '');<br \/>\n      document.getElementById('hrbot').style.display='block';<br \/>\n      if (is64) {<br \/>\n      document.getElementById('ifbot').src=document.URL.split('?')[0].split('#')[0] + '?#taidea=' + ourencodeURIComponent(nextinta);<br \/>\n      } else {<br \/>\n      document.getElementById('ifbot').src=document.URL.split('?')[0].split('#')[0] + '?#taidea=' + encodeURIComponent(nextinta);<br \/>\n      }<br \/>\n      document.getElementById('ifbot').style.display='block';<br \/>\n      inta=preint + intas[0];<br \/>\n      outta=inta;<br \/>\n      intas=[];<br \/>\n    }<\/font><br \/>\n    if (altta == '' && inta != '') {<br \/>\n      if (eval('' + inta.split('repeat;').length) &gt; 1) {<br \/>\n        origdefopt=(inta.split('repeat;')[1].split(';')[0].split('\"')[0] + ';').replace(\/^\\;\/g,'');<br \/>\n        document.getElementById('defopt').innerHTML='Styling idea [' + origdefopt + ']';<br \/>\n        defoptit=origdefopt;<br \/>\n      }<br \/>\n    }<br \/>\n    if (altta != '') { outta=altta; }<br \/>\n    if (outta == '') {<br \/>\n      outta=document.getElementById('divhost').innerHTML;<br \/>\n    } else {<br \/>\n      document.getElementById('divhost').innerHTML=outta;<br \/>\n      document.getElementById('taidea').value=document.getElementById('divhost').innerHTML;<br \/>\n      if (altta != '') {<br \/>\n       if (eval('' + altta.split('repeat;').length) &gt; 1) {<br \/>\n        defoptit=(altta.split('repeat;')[1].split(';')[0].split('\"')[0] + ';').replace(\/^\\;\/g,'');<br \/>\n        document.getElementById('defopt').innerHTML='Styling idea [' + defoptit + ']';<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n    if (document.getElementById('taidea').value.indexOf(' data-yourown=\"\"') == -1 && document.getElementById('taidea').value.indexOf(' data-yourown=\"') != -1) {<br \/>\n      var newuns=document.getElementById('taidea').value.split(' data-yourown=\"')[1].split('\"')[0].split(';,');<br \/>\n      for (var inew=0; inew&lt;newuns.length; inew++) {<br \/>\n       if (document.getElementById('mysel').innerHTML.indexOf(newuns[inew].replace(\/\\;$\/g,'') + ';') == -1) {<br \/>\n        document.getElementById('mysel').innerHTML+='&lt;option value=\"' + newuns[inew].replace(\/\\;$\/g,'') + ';\"&gt;' + newuns[inew].replace(\/\\;$\/g,'') + ';&lt;\/option&gt;';<br \/>\n       }<br \/>\n      }<br \/>\n    }<br \/>\n    <font color=blue>if (altta == '') {<br \/>\n      if (startstyle != '') {<br \/>\n        document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(document.getElementById('divhost').innerHTML.split(' style=\"')[1].split('\"')[0], startstyle);<br \/>\n        document.getElementById('taidea').value=document.getElementById('divhost').innerHTML;<br \/>\n      }<br \/>\n      sofares=document.getElementById('divhost').innerHTML;<br \/>\n      setInterval(keeplooking, 5000);<br \/>\n    }<\/font> \/\/else if (sofares.indexOf(document.getElementById('divhost').innerHTML) == -1) {<br \/>\n      \/\/sofares+=document.getElementById('divhost').innerHTML;<br \/>\n    \/\/}<br \/>\n  }<br \/>\n<br \/> <br \/>\n  <font color=blue>function keeplooking() {<br \/>\n    if (sofares.indexOf(document.getElementById('divhost').innerHTML) == -1) {<br \/>\n      var vs=sofares;<br \/>\n      sofares=document.getElementById('divhost').innerHTML + vs;<br \/>\n    }<br \/>\n  }<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; to help make this recursion happen in <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html-GETME' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html-GETME' rel=\"noopener\">&#8220;second draft&#8221;<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html' rel=\"noopener\">web application<\/a> also <a href='#myifagain'>shown 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\/css-background-position-revisit-recursive-iframe-tutorial\/' rel=\"noopener\">CSS Background Position Revisit Recursive Iframe Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cssbprt'>Previous relevant <a target=\"_blank\" title='CSS Background Position Revisit Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-background-position-revisit-tutorial\/' rel=\"noopener\">CSS Background Position Revisit Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"CSS Background Position Revisit Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.png\" title=\"CSS Background Position Revisit Tutorial\" \/><\/a><p class=\"wp-caption-text\">CSS Background Position Revisit Tutorial<\/p><\/div>\n<p>We are great admirers of HTML and CSS regarding the way multiple background images are possible behind an HTML element.<\/p>\n<p>To get to a multiple background image scenario (or even single ones regarding the basis for this blog posting&#8217;s creation), the &#8220;Making Of&#8221; yesterday&#8217;s <a title='AlmaLinux Astronomy via PHP and Python PyEphem Revisit Tutorial' href='#alaphpppert'>AlmaLinux Astronomy via PHP and Python PyEphem Revisit Tutorial<\/a> we thought needed further scrutiny.<\/p>\n<p>It&#8217;s the HTML <a href='#thebq'>blockquote background image<\/a> of <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Android\/NalaLuna.jpg\" rel=\"noopener\">Nala and Luna<\/a> of most interest, at least to us.  It involved the use of CSS &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='CSS background-position-x property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css_pr_background-position-x.php' rel=\"noopener\">background-position-x<\/a>:right;<br \/>\n<\/code><\/p>\n<p> &#8230; property, for our first time, that we can remember <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">that is<\/a>.<\/p>\n<p>The blockquote styling did something to our &#8230;<\/p>\n<ol>\n<li>background-size:contain;<\/li>\n<li>background-repeat:no-repeat;\n<\/ol>\n<p> &#8230; &#8220;dynamic duo&#8221;, <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">again<\/a>, property combination, truncating imagery to the right (where Nala and Luna, the stars of the show, were) for the first time we&#8217;ve ever seen.  We were forced to relook at all the background-position type styling properties, and that&#8217;s when we came across background-position-x:right as a way to get &#8220;the stars&#8221; back into the picture.<\/p>\n<p>From there, we thought it might be good to write a proof of concept textarea based showing of the styling of that blockquote element involved, and allow the user to modify it either &#8230;<\/p>\n<ul>\n<li>within the textarea element, on tabbing out of it &#8230; or via &#8230;<\/li>\n<li>some set dropdown alternative CSS property suggestions &#8230; and in amongst those dropdown options, via &#8230;<\/li>\n<li>enter user CSS properties of interest<\/li>\n<\/ul>\n<p> &#8230; to see, dynamically, what happens to the WordPress styling conditioned blockquote rendition above the form, to confirm what your CSS would do, using <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html_GETME' rel=\"noopener\">our &#8220;first draft&#8221;<\/a> <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html' rel=\"noopener\">web application<\/a> also shown below &#8230;<\/p>\n<p><iframe id=myifagain src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_position_various.html' style='width:100%;height:900px;'><\/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\/new-almalinux-astronomy-via-php-and-python-pyephem-revisit-tutorial\/' rel=\"noopener\">New AlmaLinux Astronomy via PHP and Python PyEphem Revisit Tutorial<\/a>.<\/p-->\n<hr>\n<p id='alaphpppert'>Previous relevant <a target=\"_blank\" title='AlmaLinux Astronomy via PHP and Python PyEphem Revisit Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/almalinux-astronomy-via-php-and-python-pyephem-revisit-tutorial\/' rel=\"noopener\">AlmaLinux Astronomy via PHP and Python PyEphem Revisit 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\/ephem_astronomy.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"AlmaLinux Astronomy via PHP and Python PyEphem Revisit Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/almalinux_astronomy_revisit.gif\" title=\"AlmaLinux Astronomy via PHP and Python PyEphem Revisit Tutorial\" \/><\/a><p class=\"wp-caption-text\">AlmaLinux Astronomy via PHP and Python PyEphem Revisit Tutorial<\/p><\/div>\n<p>Further to <a title='AlmaLinux Astronomy via PHP and Python PyEphemx Tutorial' href='#alaphpppet'>AlmaLinux Astronomy via PHP and Python PyEphem Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>these days RJM Programming is still on AlmaLinux &#8230;<\/li>\n<li>but on a different IP address and web server to that previous blog posting &#8230;<\/li>\n<li>but PHP versions have not changed, or not enough to cause any consternation &#8230; hence the &#8220;relative silence&#8221; on our part about it all<\/li>\n<\/ul>\n<p> &#8230; but, even so, &#8220;things can go wrong&#8221;, and on a revisit to our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ephem_astronomy.php\" rel=\"noopener\">Astronomy<\/a> web application &#8220;things went wrong&#8221; &#8230;<\/p>\n<blockquote id=thebq style=\"background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),url('\/Android\/NalaLuna.jpg');background-size:contain;background-repeat:no-repeat;background-position-x:right;\">\n<p>Who&#8217;d have thought it?!<\/p>\n<\/blockquote>\n<p>One of the potential issues was resolved with <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/code-difference-almalinux-new-webserver-issue-tutorial\/' title='Code Difference AlmaLinux New Webserver Issue Tutorial' rel=\"noopener\">Code Difference AlmaLinux New Webserver Issue Tutorial<\/a> allowing for exec and shell_exec usage, for which we thank our web hosters, <a target=\"_blank\" title='Crazy Domains' href='http:\/\/www.crazydomains.com.au' rel=\"noopener\">Crazy Domains<\/a>.  There are other players in this astronomy web application though, they being &#8230;<\/p>\n<ul>\n<li>Python &#8230; called via PHP exec &#8230; calling &#8230;<\/li>\n<li><a target=\"_blank\" title='PyEphem ... thanks' href='\/\/rhodesmill.org\/pyephem\/' rel=\"noopener\">PyEphem<\/a> module <font size=1>(most importantly)<\/font><\/li>\n<\/ul>\n<p> &#8230; and the investigation should start at <i>Python<\/i> to our mind.  Our initial investigation into <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ephem_astronomy.php---GETME\" rel=\"noopener\">ephem_astronomy.php<\/a> code first looking for a path through to Python at &#8230;<\/p>\n<p><code><br \/>\n\/usr\/bin\/python<br \/>\n<\/code><\/p>\n<p> &#8230; and we saw the difference in Terminal sessions asking three things of our two web servers &#8230;<\/p>\n<table style=vertical-align:top;>\n<tr>\n<th>Web server<\/th>\n<th>The ask &#8230;<\/th>\n<th>The result is &#8230;<\/th>\n<\/tr>\n<tr>\n<td style=vertical-align:top;>Old<\/td>\n<td style=vertical-align:top;>which python<\/td>\n<td>\/bin\/python<\/td>\n<\/tr>\n<tr>\n<td style=vertical-align:top;>New<\/td>\n<td style=vertical-align:top;>which python<\/td>\n<td>\/usr\/bin\/which: no python in ([new web server&#8217;s path for root account])<\/td>\n<\/tr>\n<tr>\n<td style=vertical-align:top;>Old<\/td>\n<td style=vertical-align:top;>which python3<\/td>\n<td>\/bin\/python3<\/td>\n<\/tr>\n<tr>\n<td style=vertical-align:top;>New<\/td>\n<td style=vertical-align:top;>which python3<\/td>\n<td>\/bin\/python3<\/td>\n<\/tr>\n<tr>\n<td style=vertical-align:top;>Old<\/td>\n<td style=vertical-align:top;>ls -la \/usr\/bin\/python*<\/td>\n<td>\n<code><br \/>\nlrwxrwxrwx 1 root root     9 Mar 12 03:06 \/usr\/bin\/python -&gt; .\/python3<br \/>\nlrwxrwxrwx 1 root root     9 Mar 12 03:00 \/usr\/bin\/python3 -&gt; python3.9<br \/>\n-rwxr-xr-x 1 root root 15624 Mar 12 03:00 \/usr\/bin\/python3.9<br \/>\n-rwxr-xr-x 1 root root    61 Mar 12 03:00 \/usr\/bin\/python3.9-config<br \/>\n-rwxr-xr-x 1 root root  3624 Mar 12 02:53 \/usr\/bin\/python3.9-x86_64-config<br \/>\nlrwxrwxrwx 1 root root    16 Mar 12 03:00 \/usr\/bin\/python3-config -&gt; python3.9-config<br \/>\n-rwxr-xr-x 1 root root   980 Mar 26  2022 \/usr\/bin\/python3-html2text<br \/>\nlrwxrwxrwx 1 root root    16 Mar 12 03:00 \/usr\/bin\/python-config -&gt; .\/python3-config<br \/>\nlrwxrwxrwx 1 root root    17 Mar 26  2022 \/usr\/bin\/python-html2text -&gt; python3-html2text<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<td style=vertical-align:top;>New<\/td>\n<td style=vertical-align:top;>ls -la \/usr\/bin\/python*<\/td>\n<td>\n<code style=background-color:yellow;><br \/>\nlrwxrwxrwx 1 root root    16 Mar 12 03:00 \/usr\/bin\/python-config -&gt; .\/python3-config<br \/>\nlrwxrwxrwx 1 root root    17 Mar 26  2022 \/usr\/bin\/python-html2text -&gt; python3-html2text<br \/>\nlrwxrwxrwx 1 root root     9 Mar 12 03:00 \/usr\/bin\/python3 -&gt; python3.9<br \/>\nlrwxrwxrwx 1 root root    16 Mar 12 03:00 \/usr\/bin\/python3-config -&gt; python3.9-config<br \/>\n-rwxr-xr-x 1 root root   980 Mar 26  2022 \/usr\/bin\/python3-html2text<br \/>\n-rwxr-xr-x 1 root root 15624 Mar 12 03:00 \/usr\/bin\/python3.9<br \/>\n-rwxr-xr-x 1 root root    61 Mar 12 03:00 \/usr\/bin\/python3.9-config<br \/>\n-rwxr-xr-x 1 root root  3624 Mar 12 02:53 \/usr\/bin\/python3.9-x86_64-config<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; and so, after doing the research regarding our question &#8230;<\/p>\n<blockquote><p>\n<a target=\"_blank\" title='On linux is there a better way out of alias versus soft link to solve a path based issue?' href='https:\/\/www.google.com\/search?q=On+linux+is+there+a+better+way+out+of+alias+versus+soft+link+to+solve+a+path+based+issue%3F&#038;oq=On+linux+is+there+a+better+way+out+of+alias+versus+soft+link+to+solve+a+path+based+issue%3F&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRiPAjIHCAIQIRiPAtIBCjQ1NzE3ajBqMTWoAgCwAgA&#038;sourceid=chrome&#038;ie=UTF-8#cobssid=s' rel=\"noopener\">On linux is there a better way out of alias versus soft link to solve a path based issue?<\/a>\n<\/p><\/blockquote>\n<p> &#8230; giving the <a target=\"_blank\" title='Google AI Overview information' href='https:\/\/search.google\/ways-to-search\/ai-overviews\/' rel=\"noopener\">Google AI Overview<\/a>, thanks, answer &#8230;<\/p>\n<blockquote><p>\nFor solving path-based issues in Linux, symbolic links are generally better than aliases. Aliases are shell-specific and don&#8217;t offer the same level of system-wide functionality as symbolic links. Symbolic links, or symlinks, act as references to files or directories within the file system, making them a more robust and versatile solution for path-related problems.\n<\/p><\/blockquote>\n<p> &#8230; we think points to <a target=\"_blank\" href='https:\/\/unix.stackexchange.com\/questions\/250034\/equivalent-of-alias-for-a-symbolic-link' title='Equivalent of alias for a symbolic link' rel=\"noopener\">Equivalent of alias for a symbolic link<\/a> and fitting in with our preferences, too, getting us in Terminal on the new web server to go &#8230;<\/p>\n<p><code><br \/>\n$ cd \/usr\/bin<br \/>\n$ ln -s .\/python3.9 .\/python<br \/>\n<\/code><\/p>\n<p> &#8230; to end up with &#8230;<\/p>\n<p><code style=background-color:lightgreen;><br \/>\n$ ls -la \/usr\/bin\/python*<br \/>\nlrwxrwxrwx 1 root root    11 Jun 18 07:54 \/usr\/bin\/python -> .\/python3.9<br \/>\nlrwxrwxrwx 1 root root    16 Mar 12 03:00 \/usr\/bin\/python-config -> .\/python3-config<br \/>\nlrwxrwxrwx 1 root root    17 Mar 26  2022 \/usr\/bin\/python-html2text -> python3-html2text<br \/>\nlrwxrwxrwx 1 root root     9 Mar 12 03:00 \/usr\/bin\/python3 -> python3.9<br \/>\nlrwxrwxrwx 1 root root    16 Mar 12 03:00 \/usr\/bin\/python3-config -> python3.9-config<br \/>\n-rwxr-xr-x 1 root root   980 Mar 26  2022 \/usr\/bin\/python3-html2text<br \/>\n-rwxr-xr-x 1 root root 15624 Mar 12 03:00 \/usr\/bin\/python3.9<br \/>\n-rwxr-xr-x 1 root root    61 Mar 12 03:00 \/usr\/bin\/python3.9-config<br \/>\n-rwxr-xr-x 1 root root  3624 Mar 12 02:53 \/usr\/bin\/python3.9-x86_64-config<br \/>\n$ which python<br \/>\n\/bin\/python<br \/>\n<\/code><\/p>\n<p> &#8230; and a better functioning <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ephem_astronomy.php\" rel=\"noopener\">Astronomy<\/a> web application, as well as the chance other PHP calling Python scenarios being fixed, ahead of (web application and PHP and Python code) revisits, there and then.  However, if all this sounds trepidacious, or impossible (lots of web hosting would not allow you anywhere close to &#8220;underlying Operating System anything&#8221;), or your server does not support Soft (ie. Symbolic) Links (eg. Windows) you could <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/ephem_astronomy.php----GETME\" rel=\"noopener\">change this way<\/a> the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ephem_astronomy.php----GETME\" rel=\"noopener\">ephem_astronomy.php<\/a> PHP code to fit with the original environment ahead of creating that new Soft (ie. Symbolic) Link used in that inhouse <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ephem_astronomy.php\" rel=\"noopener\">Astronomy<\/a> PHP calling Python module 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\/almalinux-astronomy-via-php-and-python-pyephem-revisit-tutorial\/' rel=\"noopener\">AlmaLinux Astronomy via PHP and Python PyEphem Revisit Tutorial<\/a>.<\/p-->\n<hr>\n<p id='alaphpppet'>Previous relevant <a target=\"_blank\" title='AlmaLinux Astronomy via PHP and Python PyEphem Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/almalinux-astronomy-via-php-and-python-pyephem-tutorial\/' rel=\"noopener\">AlmaLinux Astronomy via PHP and Python PyEphem 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\/ephem_astronomy.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"AlmaLinux Astronomy via PHP and Python PyEphem Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/almalinux_astronomy.gif\" title=\"AlmaLinux Astronomy via PHP and Python PyEphem Tutorial\" \/><\/a><p class=\"wp-caption-text\">AlmaLinux Astronomy via PHP and Python PyEphem Tutorial<\/p><\/div>\n<p>You might recall reading the previous <a title='PHP\/Javascript\/HTML and Python PyEphem Moon Angle Tutorial' href='#php\/j\/htmlppemat'>PHP\/Javascript\/HTML and Python PyEphem Moon Angle Tutorial<\/a> below how we got into some Astronomy via &#8230;<\/p>\n<ul>\n<li>PHP &#8230; calling, via <a target=\"_blank\" title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php' rel=\"noopener\">exec<\/a> &#8230;<\/li>\n<li>Python &#8230; (alas, no <a target=\"_blank\" title=\"The Three P's tutorials\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/the-three-ps\/' rel=\"noopener\">3P&#8217;s<\/a> Perl here) &#8230; and it&#8217;s &#8230;<\/li>\n<li><a target=\"_blank\" title='PyEphem ... thanks' href='\/\/rhodesmill.org\/pyephem\/' rel=\"noopener\">PyEphem<\/a> &#8230; module skilled at Astronomy &#8230; installed via &#8230;<\/li>\n<li><a target=\"_blank\" title='Pip package manager information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Pip_(package_manager)' rel=\"noopener\">Pip<\/a> &#8230; (alas, no <a target=\"_blank\" title='?' href='https:\/\/en.wikipedia.org\/wiki\/Pip_(Great_Expectations)#:~:text=At%20around%20the%20age%20of,and%20his%20coarse%2Dseeming%20relatives.' rel=\"noopener\">Estella<\/a>)\n<\/ul>\n<p> &#8230; so from that &#8230; let&#8217;s see &#8230; we get The Four <strike style=color:red;><a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=_d8eFTfGb00' rel=\"noopener\">Tops<\/a><\/strike><strike style=color:orange;><a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=ABTPhL_Ys7Q' rel=\"noopener\">Pips<\/a><\/strike>P&#8217;s <font size=1>(in relation to <a target=\"_blank\" title='?' href='https:\/\/www.barossanursery.com.au\/gardening-old-wives-tales-fact-of-fiction\/#:~:text=%E2%80%9CPeeing%20on%20your%20lemon%20tree,A%20natural%20and%20cheap%20fertiliser!' rel=\"noopener\">lemon trees<\/a> &#8230; tee hee)<\/font>.<\/p>\n<p>Well, to make Moon Angles and Astronomy Helper web applications work on AlmaLinux we needed to attend to a couple of install matters &#8230;<\/p>\n<ul>\n<li>install the Python package manager <a target=\"_blank\" title='Pip package manager information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Pip_(package_manager)' rel=\"noopener\">Pip<\/a> via (the AlmaLinux PHP <i>dnf<\/i> package manager) &#8230;<br \/>\n<code><br \/>\ndnf install python3-pip.noarch<br \/>\n<\/code>\n<\/li>\n<li>install the Python module, helping out with Astronomy matters, called <a target=\"_blank\" title='PyEphem ... thanks' href='\/\/rhodesmill.org\/pyephem\/' rel=\"noopener\">PyEphem<\/a> via &#8230;<br \/>\n<code><br \/>\nsudo pip install pyephem<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; to be in a position to progress, and then add a check for existence of \/usr\/bin\/python (for AlmaLinux) in preference to \/usr\/local\/bin\/python3.3 (for CentOS) as the final measure needed to start getting results back to any PHP overseers &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/MoonAngle\/moon_angle_now_at.php-------GETME\" title=\"Click picture\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/MoonAngle\/moon_angle_now_at.php-------GETME\" title=\"Click picture\" rel=\"noopener\">moon_angle_now_at.php<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/MoonAngle\/moon_angle_now_at.php\" title=\"Click picture\" rel=\"noopener\">Moon Angle live run (old way)<\/a> or <a target=\"_blank\" href=\"https:\/\/65.254.95.247\/PHP\/MoonAngle\/moon_angle_now_at.php\" title=\"Click picture\" rel=\"noopener\">Moon Angle live run (new way)<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/ephem_astronomy.php---GETME\" title=\"Click picture\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ephem_astronomy.php---GETME\" title=\"Click picture\" rel=\"noopener\">ephem_astronomy.php<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/ephem_astronomy.php\" title=\"Click picture\" rel=\"noopener\">Astronomy Helper live run (old way)<\/a> or <a target=\"_blank\" href=\"https:\/\/65.254.95.247\/PHP\/ephem_astronomy.php\" title=\"Click picture\" rel=\"noopener\">Astronomy Helper live run (new way)<\/a><\/li>\n<\/ul>\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\/almalinux-astronomy-via-php-and-python PyEphem-tutorial\/' rel=\"noopener\">AlmaLinux Astronomy via PHP and Python PyEphem Tutorial<\/a>.<\/p-->\n<hr>\n<p id='php\/j\/htmlppemat'>Previous relevant <a target=\"_blank\" title='PHP\/Javascript\/HTML and Python PyEphem Moon Angle Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php\/javascript\/html-and-python-pyephem-moon-angle-tutorial\/' rel=\"noopener\">PHP\/Javascript\/HTML and Python PyEphem Moon Angle 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\/MoonAngle\/moon_angle_now_at.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP\/Javascript\/HTML and Python PyEphem Moon Angle Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/MoonAngle\/MoonAnglePython.jpg\" title=\"PHP\/Javascript\/HTML and Python PyEphem Moon Angle Tutorial\" \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript\/HTML and Python PyEphem Moon Angle Tutorial<\/p><\/div>\n<p>A long time ago now we presented <a title='PHP\/Javascript\/HTML Moon Angle Tutorial' href='#phpjhtmlmat'>PHP\/Javascript\/HTML Moon Angle Tutorial<\/a> but now we feel is a good time for it to get a makeover.  Why is that?  Well, we have the relatively new discovery of the very useful Python <a target=\"_blank\" title='PyEphem ... thanks' href='\/\/rhodesmill.org\/pyephem\/' rel=\"noopener\">PyEphem<\/a> module to thank for that.<\/p>\n<p>As far as the new version goes we now offer a Moon Angle &#8220;time of transit (and relative to now)&#8221; calculation, which we think will be of more use to users.<\/p>\n<p>The Moon Angle at Transit calculations again involve the <a target=\"_blank\" title='Sublunary Point' href='http:\/\/translate.google.com.au\/translate?hl=en&#038;sl=de&#038;u=http:\/\/de.wikipedia.org\/wiki\/Sublunarer_Punkt&#038;prev=\/search%3Fq%3D%2522Sublunarer%2522%2Bwikipedia%26client%3Dfirefox-a%26hs%3D3co%26rls%3Dorg.mozilla:en-US:official%26biw%3D1213%26bih%3D619' rel=\"noopener\">Sublunary Point<\/a> as the position on Earth directly above which is Moon is located.  Add in the Python PyEphem work and some more terminology that may interest you could involve &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Sidereal time information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Sidereal_time' rel=\"noopener\">sidereal time<\/a><\/li>\n<li><a target=\"_blank\" title='UTC information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Coordinated_Universal_Time' rel=\"noopener\">Coordinated Universal Time &#8230; or UTC<\/a><\/li>\n<li><a target=\"_blank\" title='Transit information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Transit_(astronomy)' rel=\"noopener\">transit<\/a><\/li>\n<\/ul>\n<p> &#8230; within the Python of interest, a snapshot of which is shown below, but which changes each time somebody recreates this <a target=\"_blank\" title='sublunarx.py' href='http:\/\/www.rjmprogramming.com.au\/Python\/sublunarx.py' rel=\"noopener\">sublunarx.py<\/a> &#8230;<\/p>\n<p><code><br \/>\nimport ephem<br \/>\nimport math<br \/>\nimport time<br \/>\nfrom datetime import datetime, timedelta<br \/>\ngreenwich = ephem.Observer()<br \/>\ngreenwich.lat = \"0\"<br \/>\ngreenwich.lon = \"0\"<br \/>\ngreenwich.date = datetime.utcnow()<br \/>\nmoon = ephem.Moon(greenwich)<br \/>\nmoon.compute(greenwich.date)<br \/>\nmoon_lon = math.degrees(moon.ra - greenwich.sidereal_time() )<br \/>\nif moon_lon &lt; -180.0 :<br \/>\n  moon_lon = 360.0 + moon_lon<br \/>\nelif moon_lon &gt; 180.0 :<br \/>\n  moon_lon = moon_lon - 360.0<br \/>\nmoon_lat = math.degrees(moon.dec)<br \/>\nd1 = ephem.next_full_moon(greenwich.date)<br \/>\nd2 = ephem.next_new_moon(greenwich.date)<br \/>\ngreenwich.lat = \"151:10.586502000000001\"<br \/>\ngreenwich.lon = \"-33:54.445878\"<br \/>\ngreenwich.date = datetime.utcnow()<br \/>\nmoon = ephem.Moon(greenwich)<br \/>\nmoon.compute(greenwich.date)<br \/>\nbetw = (greenwich.next_transit(moon) - greenwich.date) * 86400.0 \/ 60.0 \/ 60.0<br \/>\ngnt = greenwich.next_transit(moon)<br \/>\ngreenwich.date = gnt<br \/>\nmoon = ephem.Moon(greenwich)<br \/>\nmoon.compute(gnt)<br \/>\nmoon_lon_x = math.degrees(moon.ra - greenwich.sidereal_time() )<br \/>\nif moon_lon_x &lt; -180.0 :<br \/>\n  moon_lon_x = 360.0 + moon_lon_x<br \/>\nelif moon_lon_x &gt; 180.0 :<br \/>\n  moon_lon_x = moon_lon_x - 360.0<br \/>\nmoon_lat_y = math.degrees(moon.dec)<br \/>\nprint('%s %s %s %s %s %s %s %f' % (moon_lon, moon_lat, d1, d2, gnt, moon_lon_x, moon_lat_y, betw))<br \/>\nquit()<br \/>\n<\/code><\/p>\n<p>The Moon Angle web application <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/MoonAngle\/moon_angle_now_at.php\" title=\"Click picture\" rel=\"noopener\">live run<\/a>, which we welcome you to try, has the underlying PHP <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/MoonAngle\/moon_angle_now_at.php------GETME\" itle=\"moon_angle_now_at.php\" rel=\"noopener\">moon_angle_now_at.php<\/a> that supervises the Python exemplied above, and which featured <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/MoonAngle\/moon_angle_now_at.php------GETME\" itle=\"moon_angle_now_at.php\" rel=\"noopener\">these changes<\/a> to make this happen.<\/p>\n<hr>\n<p id='phpjhtmlmat'>Previous relevant <a target=\"_blank\" title='PHP\/Javascript\/HTML Moon Angle Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php\/javascript\/html-moon-angle-tutorial\/' rel=\"noopener\">PHP\/Javascript\/HTML Moon Angle 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\/MoonAngle\/moon_angle_now_at.php\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"PHP\/Javascript\/HTML Moon Angle Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/MoonAngle\/MoonAngle.jpg\" title=\"PHP\/Javascript\/HTML Moon Angle Tutorial\" \/><\/a><p class=\"wp-caption-text\">PHP\/Javascript\/HTML Moon Angle Tutorial<\/p><\/div>\n<p>Here is a tutorial that calculates Noon Moon Angles from Earth via the entry of Latitude and Longitude.  The calculation of noon moon angles uses the concept of Sublunary Point, which is explained in the quote from Wikipedia below.<\/p>\n<blockquote><p>The sublunary point (Latin sub-lunar, under the moon &#8216;, from Latin) is the one place on earth where the moon in exactly the zenith is. He is the point where the line connecting the centers of the Earth and Moon intersects the Earth&#8217;s surface. The point is a common auxiliary point to observe the Moon in the celestial mechanics and astronomical phenomenology , and in particular the theory of the tides , as well as the theory of eclipses .<\/p>\n<p>The calculation of the point corresponding to the determination of the geocentric coordinates of the Moon, it has the same longitude and latitude , as the moon astronomical length and width has &#8211; both are denoted by \u03c6 and \u03b2. <\/p><\/blockquote>\n<p>The Javascript embellishments in this tutorial mainly revolve around:<\/p>\n<ul>\n<li><a target=\"_blank\" title='window.open' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' rel=\"noopener\">window.open<\/a><\/li>\n<\/ul>\n<p>The use of window.open can sometimes be blocked by web browsers depending on their settings and you can read a bit more about such issues <a target=\"_blank\" title='pop-up windows' href='http:\/\/en.wikipedia.org\/wiki\/Pop-up_ad' rel=\"noopener\">here<\/a>.<\/p>\n<p>Useful tutorials that helped, and we give thanks to, were:<\/p>\n<ul>\n<li><a target=\"_blank\" title='Sublunary Point' href='http:\/\/translate.google.com.au\/translate?hl=en&#038;sl=de&#038;u=http:\/\/de.wikipedia.org\/wiki\/Sublunarer_Punkt&#038;prev=\/search%3Fq%3D%2522Sublunarer%2522%2Bwikipedia%26client%3Dfirefox-a%26hs%3D3co%26rls%3Dorg.mozilla:en-US:official%26biw%3D1213%26bih%3D619' rel=\"noopener\">Sublunary Point<\/a> (information from Wikipedia, from where quote above comes)<\/li>\n<li><a target=\"_blank\" title='Sublunary Point calculator helper' href='http:\/\/www.timeanddate.com\/worldclock\/sunearth.html' rel=\"noopener\">Sublunary Point calculator helper<\/a> via <a target=\"_blank\" title='cURL in PHP and command line' href='http:\/\/php.net\/manual\/en\/book.curl.php' rel=\"noopener\">cURL<\/a><\/li>\n<li><a target=\"_blank\" title='Moon Phase calculator helper' href='http:\/\/www.zodiacarts.com\/Calendar.shtml' rel=\"noopener\">Moon Phase calculator helper<\/a> via <a target=\"_blank\" title='cURL in PHP and command line' href='http:\/\/php.net\/manual\/en\/book.curl.php' rel=\"noopener\">cURL<\/a><\/li>\n<li><a target=\"_blank\" title='Sun Angle formulae applied to the case of the Moon Sublunary Point' href='http:\/\/www.google.com.au\/url?sa=t&#038;rct=j&#038;q=&#038;esrc=s&#038;source=web&#038;cd=1&#038;ved=0CC8QFjAA&#038;url=http%3A%2F%2Fgeoalliance.asu.edu%2Fazga_site%2Fsites%2Fdefault%2Ffiles%2FLessonFiles%2FDorn%2FPulse%2FDornPulse.ppt&#038;ei=QTGRUuiXEcGtiAfwlIGICw&#038;usg=AFQjCNEYL6f1yBLg5hdC5qgYnnfWS00nOg&#038;sig2=2kQ25M8OoDltE6baNCRlnQ&#038;bvm=bv.56988011,d.aGc' rel=\"noopener\">Sun Angle formulae applied to the case of the Moon Sublunary Point<\/a><\/li>\n<li><a target=\"_blank\" title='Sydney positioning' href='http:\/\/stutzfamily.com\/mrstutz\/LatLong\/latlonglist.htm#AUSTRALIA' rel=\"noopener\">Sydney positioning<\/a><\/li>\n<li><a target=\"_blank\" title='CSS 2D Transformation Rotations' href='http:\/\/www.w3schools.com\/css\/css3_2dtransforms.asp' rel=\"noopener\">CSS 2D Transformation Rotations<\/a><\/li>\n<\/ul>\n<p>Here is a link to a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/MoonAngle\/moon_angle_now_at.php\" title='Live run' rel=\"noopener\">live run<\/a>.  (The way it changed on 1\/12\/2013 to have a dropdown of placenames as extra functionality will be explained in a tutorial called PHP\/Javascript\/HTML Geographical Placename Integration Tutorial on 3\/12\/2013.)<\/p>\n<p>Here is a link to some downloadable PHP programming source code which you may want to rename to <a target=\"_blank\" title='sun_angle_now_at.php' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/MoonAngle\/moon_angle_now_at.php_GETME\" rel=\"noopener\">moon_angle_now_at.php<\/a><\/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='#d5383' onclick='var dv=document.getElementById(\"d5383\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=59\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5383' 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='#d41167' onclick='var dv=document.getElementById(\"d41167\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pyephem\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d41167' 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='#d64558' onclick='var dv=document.getElementById(\"d64558\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/python\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64558' 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='#d68735' onclick='var dv=document.getElementById(\"d68735\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/python\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68735' 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='#d68745' onclick='var dv=document.getElementById(\"d68745\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/textarea\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68745' 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='#d68764' onclick='var dv=document.getElementById(\"d68764\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/recursion\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68764' 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='#d68776' onclick='var dv=document.getElementById(\"d68776\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/clone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68776' 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='#d68783' onclick='var dv=document.getElementById(\"d68783\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/filter\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68783' 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='#d68788' onclick='var dv=document.getElementById(\"d68788\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68788' 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='#d68796' onclick='var dv=document.getElementById(\"d68796\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/peer\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68796' 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='#d68799' onclick='var dv=document.getElementById(\"d68799\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/server\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d68799' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Two jobs today, moving on from yesterday&#8217;s CSS Web Application External Javascript Peer to Peer Tutorial &#8230; allow any random backdrop background image, specified by the user, have it&#8217;s content be retained sharing with any email recipient shared with, just &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-web-application-external-javascript-programmatical-updates-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":[2,12,14,37],"tags":[5220,5221,126,127,2471,5218,150,184,4658,2503,1604,281,367,1683,380,409,418,431,452,2349,576,587,652,3965,751,2092,1546,2621,2076,894,3440,914,932,997,1761,1034,5112,5222,1866,1122,1137,5219,1159,1262,2324,1319,1341,1411],"class_list":["post-68799","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-tutorials","tag-backdrop","tag-backdrop-filter","tag-background","tag-background-image","tag-background-position","tag-background-position-x","tag-blockquote","tag-canvas","tag-clip-path","tag-clone","tag-collaboration","tag-css","tag-dropdown","tag-dynamic","tag-email","tag-external-javascript","tag-file","tag-filter","tag-form","tag-highlight","tag-html","tag-iframe","tag-javascript","tag-justify","tag-mask","tag-multiple","tag-nested","tag-nesting","tag-order","tag-overlay","tag-peer","tag-peer-to-peer","tag-php","tag-programming","tag-prompt","tag-recursion","tag-recursive","tag-recursive-iframe","tag-select","tag-server","tag-sharing","tag-she","tag-sms","tag-textarea","tag-todataurl","tag-tutorial","tag-update","tag-web-server"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68799"}],"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=68799"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68799\/revisions"}],"predecessor-version":[{"id":68816,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/68799\/revisions\/68816"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=68799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=68799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=68799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}