Robert James Metcalfe Blog

WordPress Bold for Strong Deprecation Tutorial

Posted on January 23, 2025 by admin

WordPress Bold for Strong Deprecation Tutorial

Let’s face it, this blog posting‘s original premise has been waiting in the wings, for publication. Things move on, and it is published now, pushed up the priority list as we discovered …

issues, resulting in transparent text, regarding code elements when hosting b_old and/or strong elements, that had several line breaks in them, as so we added a new document.body onload calling Javascript function into the workings of good ol’ TwentyTen theme header.php logic, as per …
<?php echo ”
function precalpass() { var cdes=document.getElementsByTagName('code'); var blinearrs=[], jit=0, blrecs=[], wasblr='', toblr='', kit=0, delimx=String.fromCharCode(10); for (var itdzs=0; itdzs<cdes.length; itdzs++) { // thanks to https://stackoverflow.com/questions/784539/how-do-i-replace-all-line-breaks-in-a-string-with-br-elements if (('' + cdes[itdzs].innerHTML + ' ').substring(0,2) == (String.fromCharCode(13) + String.fromCharCode(10))) { cdes[itdzs].innerHTML='<br>' + cdes[itdzs].innerHTML.substring(2); } if (('' + cdes[itdzs].innerHTML + ' ').substring(0,1) == (String.fromCharCode(10))) { cdes[itdzs].innerHTML=' <br>' + String.fromCharCode(10) + cdes[itdzs].innerHTML.substring(1); } if (cdes[itdzs].innerHTML.replace(/(?:\r\n|\r|\n)/g, '<br>') != cdes[itdzs].innerHTML) { cdes[itdzs].innerHTML=cdes[itdzs].innerHTML.replace(/(?:\r\n|\r|\n)/g, '<br>'); } while (cdes[itdzs].innerHTML.indexOf(String.fromCharCode(13) + String.fromCharCode(10) + String.fromCharCode(13) + String.fromCharCode(10)) != -1) { cdes[itdzs].innerHTML=cdes[itdzs].innerHTML.replace(String.fromCharCode(13) + String.fromCharCode(10) + String.fromCharCode(13) + String.fromCharCode(10), String.fromCharCode(13) + String.fromCharCode(10) + '<br>' + String.fromCharCode(13) + String.fromCharCode(10)); } blinearrs=cdes[itdzs].innerHTML.split('<b>'); for (jit=eval(-1 + eval('' + blinearrs.length)); jit>=0; jit--) { delimx='<br>'; if (eval('' + blinearrs[jit].split('</b>')[0].split(delimx).length) > 6) { blrecs=blinearrs[jit].split('</b>')[0].split(delimx); wasblr='<b>' + blinearrs[jit].split('</b>')[0] + '</b>'; toblr=wasblr; for (kit=1; kit<blrecs.length; kit++) { if (blrecs[kit].replace(String.fromCharCode(13),'').trim() != '') { toblr=toblr.replace(blrecs[kit], '</b><b>' + blrecs[kit]); } } if (cdes[itdzs].innerHTML.indexOf(wasblr) != -1) { cdes[itdzs].innerHTML=cdes[itdzs].innerHTML.replace(wasblr, toblr); } } } blinearrs=cdes[itdzs].innerHTML.split('<strong>'); for (jit=eval(-1 + eval('' + blinearrs.length)); jit>=0; jit--) { if (eval('' + blinearrs[jit].split('</strong>')[0].split(delimx).length) > 6) { blrecs=blinearrs[jit].split('</strong>')[0].split(delimx); wasblr='<strong>' + blinearrs[jit].split('</strong>')[0] + '</strong>'; toblr=wasblr; for (kit=1; kit<blrecs.length; kit++) { if (blrecs[kit].replace(String.fromCharCode(13),'').trim() != '') { toblr=toblr.replace(blrecs[kit], '</strong><strong>' + blrecs[kit]); } } if (cdes[itdzs].innerHTML.indexOf(wasblr) != -1) { cdes[itdzs].innerHTML=cdes[itdzs].innerHTML.replace(wasblr, toblr); } } } if (cdes[itdzs].innerHTML.trim() == '') { cdes[itdzs].style.display='none'; } } }
?>

… to remedy this issue …

… and to add to …
We’ve reached the time when measures to counteract our “deprecation bound” penchant for using the b HTML element in WordPress blogs has come home to bite us! Do you remember our first steps with WordPress Bold for Strong Tutorial regarding b elements that spanned several lines of text? Well, we need to be more pre-emptive here, because …
- b elements are being deprecated (in favour of strong usage) and we “face the music” …
- our logic, then, was inadequate when an adjusted b element contained any attributes
Luckily, in our WordPress Blog (you are reading) TwentyTen theme’s (good ol’) header.php (predominantly “codex”) PHP code potentially offending user produced HTML is encapsulated via …

$post->post_content

… which takes a front seat, as a really appropriate serverside intervention point, ahead of any clientside Javascript (would have been much harder and more awkward) solution, with our more pre-emptive …

<?php
if (isset($post->post_content)) { // Bold to STRONG perhaps $bolds=explode('</' . 'b' . '>', $post->post_content); $worryb=false; if (strpos($post->post_content, "") !== false) { $worryb=true; } for ($ichb=0; $ichb<(-1 + sizeof($bolds)); $ichb++) { if (strpos($bolds[$ichb], '<' . 'b' . '>') !== false) { $bcontent=explode('<' . 'b' . '>', $bolds[$ichb])[-1 + sizeof(explode('<' . 'b' . '>', $bolds[$ichb]))]; $crlflines=explode("\n", $bcontent); if (sizeof($crlflines) > 4) { $worryb=true; } } } if ($worryb) { $post->post_content=str_replace('<' . 'b' . '>', '<' . 'str' . 'ong' . '>', str_replace('<' . 'b' . ' ', '<' . 'str' . 'ong' . ' ', str_replace('</' . 'b' . '>', '</' . 'str' . 'ong' . '>', $post->post_content))); } }
?>

… as well as “the cloning of b concerning CSS to strong” as per the added …

<?php echo ”
<style>
/* Thanks to https://cssgradient.io/blog/css-gradient-text/ below */ /* b:not(.dyk) { background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } code b { background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } */ /* strong:not(.dyk) { background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } */ code strong { background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
</style>
“; ?>

… to better address this issue. Testing our adjusted PHP header.php code had us going to heavily affected WordPress User Header Section Border Primer Tutorial both before and after the changes to verify the improvement, we hope you can see in today’s animated GIF tutorial picture.

And …

Did you know?

Our Did you know_? and Stop Press sections use Javascript assistance for CSS styling purposes and so started avoiding strings containing <b> and </b> while appending “strong” based code snippets in header.php …

<?php echo ”
function checkonl() { var bisi=[-1], iisi=[-1], pisi=[-1], jbisi=0, jiisi=0, jpisi=0, iourps; var ourps=document.getElementsByTagName("b"); for (iourps=0; iourps<ourps.length; iourps++) { if (ourps[iourps].innerHTML.replace(/\<p\>/g,"").replace(/\<i\>/g,"").replace(/\<b\>/g,"").replace(/\<\/p\>/g,"").replace(/\<\/i\>/g,"").replace(/\<\/b\>/g,"").replace(/\<\/strong\>/g,"").replace(/\<strong\>/g,"") == "Did you know?") { bisi[jbisi]=iourps; jbisi++; bisi[jbisi]=-1; } else if (ourps[iourps].innerHTML.replace(/\<p\>/g,"").replace(/\<i\>/g,"").replace(/\<b\>/g,"").replace(/\<\/p\>/g,"").replace(/\<\/i\>/g,"").replace(/\<\/b\>/g,"").replace(/\<\/strong\>/g,"").replace(/\<strong\>/g,"") == "Stop Press") { bisi[jbisi]=iourps; jbisi++; bisi[jbisi]=-1; } } ourps=document.getElementsByTagName("i"); for (iourps=0; iourps<ourps.length; iourps++) { if (ourps[iourps].innerHTML.replace(/\<p\>/g,"").replace(/\<i\>/g,"").replace(/\<b\>/g,"").replace(/\<\/p\>/g,"").replace(/\<\/i\>/g,"").replace(/\<\/b\>/g,"").replace(/\<\/strong\>/g,"").replace(/\<strong\>/g,"") == "Did you know?") { iisi[jiisi]=iourps; jiisi++; iisi[jiisi]=-1; } else if (ourps[iourps].innerHTML.replace(/\<p\>/g,"").replace(/\<i\>/g,"").replace(/\<b\>/g,"").replace(/\<\/p\>/g,"").replace(/\<\/i\>/g,"").replace(/\<\/b\>/g,"").replace(/\<\/strong\>/g,"").replace(/\<strong\>/g,"") == "Stop Press") { iisi[jiisi]=iourps; jiisi++; iisi[jiisi]=-1; } } ourps=document.getElementsByTagName("p"); for (iourps=0; iourps<ourps.length; iourps++) { if (ourps[iourps].innerHTML.replace(/\<p\>/g,"").replace(/\<i\>/g,"").replace(/\<b\>/g,"").replace(/\<\/p\>/g,"").replace(/\<\/i\>/g,"").replace(/\<\/b\>/g,"").replace(/\<\/strong\>/g,"").replace(/\<strong\>/g,"") == "Did you know?") { pisi[jpisi]=iourps; jpisi++; pisi[jpisi]=-1; } else if (ourps[iourps].innerHTML.replace(/\<p\>/g,"").replace(/\<i\>/g,"").replace(/\<b\>/g,"").replace(/\<\/p\>/g,"").replace(/\<\/i\>/g,"").replace(/\<\/b\>/g,"").replace(/\<\/strong\>/g,"").replace(/\<strong\>/g,"") == "Stop Press") { pisi[jpisi]=iourps; pisi[jpisi]=iourps; jpisi++; pisi[jpisi]=-1; } else if (ourps[iourps].innerHTML.toUpperCase().indexOf("ISBN:") != -1) { var isbnis='', jisbn=0, okays="-0123456789", preis=[]; if (ourps[iourps].innerHTML.toUpperCase().indexOf("ISBN: ") != -1) { //document.title+=' !'; preis=ourps[iourps].textContent.replace(/\"/g,'').replace(/\'/g,"").replace(/\<b\>/g,'').replace(/\<\/b\>/g,'').replace(/\<i\>/g,'').replace(/\<\/i\>/g,'').split("ISBN: "); if (preis.length > 1 && preis[0].indexOf("(") != -1) preis=preis[0].split("("); while (okays.indexOf(ourps[iourps].innerHTML.toUpperCase().split("ISBN: ")[1].substring(jisbn, eval(jisbn + 1))) != -1) { isbnis+=ourps[iourps].innerHTML.toUpperCase().split("ISBN: ")[1].substring(jisbn, eval(jisbn + 1)); jisbn++; } } else if (ourps[iourps].innerHTML.toUpperCase().indexOf("ISBN:&NBSP;") != -1) { //document.title+=' !!'; preis=ourps[iourps].textContent.replace(/\"/g,'').replace(/\'/g,"").replace(/\<b\>/g,'').replace(/\<\/b\>/g,'').replace(/\<i\>/g,'').replace(/\<\/i\>/g,'').split("ISBN: "); if (preis.length > 1 && preis[0].indexOf("(") != -1) preis=preis[0].split("("); while (okays.indexOf(ourps[iourps].innerHTML.toUpperCase().split("ISBN:&NBSP;")[1].substring(jisbn, eval(jisbn + 1))) != -1) { isbnis+=ourps[iourps].innerHTML.toUpperCase().split("ISBN:&NBSP;")[1].substring(jisbn, eval(jisbn + 1)); jisbn++; } } else { //document.title+=' !!!'; preis=ourps[iourps].textContent.replace(/\"/g,'').replace(/\'/g,"").replace(/\<b\>/g,'').replace(/\<\/b\>/g,'').replace(/\<i\>/g,'').replace(/\<\/i\>/g,'').split("ISBN:"); if (preis.length > 1 && preis[0].indexOf("(") != -1) preis=preis[0].split("("); while (okays.indexOf(ourps[iourps].innerHTML.toUpperCase().split("ISBN:")[1].substring(jisbn, eval(jisbn + 1))) != -1) { isbnis+=ourps[iourps].innerHTML.toUpperCase().split("ISBN:")[1].substring(jisbn, eval(jisbn + 1)); jisbn++; } } if (isbnis != '') { //ourps[iourps].innerHTML=ourps[iourps].innerHTML.replace(isbnis, "<a target=_blank title='ISBN lookup' href='https://isbnsearch.org/isbn/" + isbnis.replace(/\-/g,'') + "'>" + isbnis + "</a>"); //if (ourps[iourps].innerHTML.indexOf(": " + isbnis) != -1) { //ourps[iourps].innerHTML=ourps[iourps].innerHTML.replace(": " + isbnis, "<a target=_blank title='ISBN lookup' href='HTTP://www.lookupbyisbn.com/Search/Book/" + isbnis.replace(/\-/g,'') + "/1'>: " + isbnis.replace(/\-/g,'').substring(0,1) + '-' + isbnis.replace(/\-/g,'').substring(1,8) + '-' + isbnis.replace(/\-/g,'').substring(8,9) + '-' + isbnis.replace(/\-/g,'').substring(9) + "</a>"); //} else { ourps[iourps].innerHTML=ourps[iourps].innerHTML.replace(isbnis, " <a target=_blank title='ISBN lookup' href='HTTP://www.lookupbyisbn.com/Search/Book/" + isbnis.replace(/\-/g,'') + "/1'>" + isbnis + "</a>"); //} if (document.URL.indexOf('?why=') != -1) alert(' -'); //document.title+=' -'; if (preis.length > 1) { document.title+=' ='; isbnis=''; jisbn=0; okays=""; var authoris='', authord=''; // /search?s=How+English+Works if (preis[0].indexOf(' by ') != -1 && preis[0].indexOf('hanks to ') != -1) { isbnis=preis[0].split('hanks to ')[eval(-1 + preis[0].split('hanks to ').length)].split(' by ')[0]; //.split(' '); preis=preis[0].split('hanks to ')[eval(-1 + preis[0].split('hanks to ').length)].split(' by ')[1].trim().split(' '); if (preis.length > 1) { for (jisbn=0; jisbn<preis.length; jisbn++) { if (preis[jisbn].substring(0,1) == preis[jisbn].substring(0,1).toUpperCase() || preis[jisbn].length <= 2) { authoris+=(authord + preis[jisbn]); authord=' '; } else if (authoris != '') { ourps[iourps].innerHTML=ourps[iourps].innerHTML.replace(authoris, "<a target=_blank title='ISBN lookup' href='https://isbnsearch.org/search?s=" + authoris.replace(/\&\;/g,'and').replace(/\&/g,'and').replace(/\ /g,'+') + "'>" + authoris + "</a>"); authoris=''; authord=''; } } if (authoris != '') { //document.title+=' ' + authoris; ourps[iourps].innerHTML=ourps[iourps].innerHTML.replace(authoris, "<a target=_blank title='ISBN lookup' href='https://isbnsearch.org/search?s=" + authoris.replace(/\&\;/g,'and').replace(/\&/g,'and').replace(/\ /g,'+') + "'>" + authoris + "</a>"); //document.title+=' ' + authoris; } } } else if (preis[0].indexOf(' by ') != -1 && preis[0].indexOf('hank ') != -1) { isbnis=preis[0].split('hank ')[eval(-1 + preis[0].split('hank ').length)].split(' by ')[0]; //.split(' '); preis=preis[0].split('hank ')[eval(-1 + preis[0].split('hank ').length)].split(' by ')[1].trim().split(' '); if (preis.length > 1) { for (jisbn=0; jisbn<preis.length; jisbn++) { if (preis[jisbn].substring(0,1) == preis[jisbn].substring(0,1).toUpperCase() || preis[jisbn].length <= 2) { authoris+=(authord + preis[jisbn]); authord=' '; } else if (authoris != '') { ourps[iourps].innerHTML=ourps[iourps].innerHTML.replace(authoris, "<a target=_blank title='ISBN lookup' href='https://isbnsearch.org/search?s=" + authoris.replace(/\&\;/g,'and').replace(/\&/g,'and').replace(/\ /g,'+') + "'>" + authoris + "</a>"); authoris=''; authord=''; } } if (authoris != '') { //document.title+=' ...' + authoris; ourps[iourps].innerHTML=ourps[iourps].innerHTML.replace(authoris, "<a target=_blank title='ISBN lookup' href='https://isbnsearch.org/search?s=" + authoris.replace(/\&\;/g,'and').replace(/\&/g,'and').replace(/\ /g,'+') + "'>" + authoris + "</a>"); //document.title+=' ...' + authoris; } } } else if (preis[0].indexOf('hanks to ') != -1) { isbnis=preis[0].trim().split('hanks to ')[eval(-1 + preis[0].split('hanks to ').length)]; //.split(' '); } else if (preis[0].indexOf('hank ') != -1) { isbnis=preis[0].trim().split('hank ')[eval(-1 + preis[0].split('hank ').length)]; //.split(' '); } if (isbnis != '') { okays=""; jisbn=0; preis=isbnis.split(' '); while (okays == "" && jisbn < preis.length && preis[jisbn].substring(0,1) == preis[jisbn].substring(0,1).toLowerCase()) { if (okays == "" && isbnis.indexOf(preis[jisbn] + " ") != -1) { isbnis=isbnis.replace(preis[jisbn] + " ",""); jisbn++; } else { okays="n"; jisbn++; } } if (isbnis != '') { //document.title+=' +++' + isbnis; if (ourps[iourps].innerHTML.indexOf(isbnis) != -1) { //document.title+=' +++' + isbnis; //ourps[iourps].innerHTML=ourps[iourps].innerHTML.replace(isbnis, "<a target=_blank title='ISBN lookup' href='https://isbnsearch.org/search?s=" + isbnis.replace(/\&\;/g,'and').replace(/\&/g,'and').replace(/\ /g,'+') + "'>" + isbnis + "</a>"); ourps[iourps].innerHTML=ourps[iourps].innerHTML.replace(isbnis, " .. <a target=_blank title='ISBN lookup' href='HTTP://www.lookupbyisbn.com/Search/Book/" + isbnis.replace(/\&\;/g,'and').replace(/\&/g,'and').replace(/\ /g,'+') + "/1'><label>" + isbnis + "</label></a>"); //document.title+=' +++' + isbnis; } } } } } } } jbisi=0; jiisi=0; jpisi=0; if (bisi[jbisi] != -1) { ourps=document.getElementsByTagName("strong"); // ourps=document.getElementsByTagName("b"); for (iourps=0; iourps<ourps.length; iourps++) { if (iourps == bisi[jbisi]) { ourps[iourps].className = "dyk dykstrong"; // "dyk dykb"; jbisi++; } } } if (iisi[jiisi] != -1) { ourps=document.getElementsByTagName("i"); for (iourps=0; iourps<ourps.length; iourps++) { if (iourps == iisi[jiisi]) { ourps[iourps].className = "dyk dyki"; jiisi++; } } } if (pisi[jpisi] != -1) { ourps=document.getElementsByTagName("p"); for (iourps=0; iourps<ourps.length; iourps++) { if (iourps == pisi[jpisi]) { ourps[iourps].className = "dyk dykp"; jpisi++; } } } } function lookforbincode() { var cdsis, bsis, icdsa, jcdsa, xbsis, repwith='', kdsis, vparts; if (navigator.userAgent.match(/Android|BlackBerry|iPad|iPhone|iPod|Opera Mini|IEMobile/i)) { // it is a mobile device cdsis=document.getElementsByTagName('code'); //alert(cdsis.length); for (icdsa=0; icdsa<cdsis.length; icdsa++) { bsis=cdsis[icdsa].innerHTML.split('</' + 'b>'); for (jcdsa=0; jcdsa<eval(-1 + bsis.length); jcdsa++) { //alert(bsis[jcdsa]); vparts=bsis[jcdsa].split('<b'+ '>'); if (vparts[eval(-1 + vparts.length)].indexOf(String.fromCharCode(10)) != -1) { xbsis=vparts[eval(-1 + vparts.length)].split(String.fromCharCode(10)); repwith=""; if (xbsis.length > 2) { for (kdsis=0; kdsis<xbsis.length; kdsis++) { repwith+=xbsis[kdsis] + '</' + 'b>' + String.fromCharCode(10) + '<' + 'b>'; } if (repwith != '') { //cdsis[icdsa].innerHTML=cdsis[icdsa].innerHTML.replace('<b>' + vparts[eval(-1 + vparts.length)] + '</b>', '<b>' + repwith + '</b>'); //if (cdsis[icdsa].innerHTML.indexOf('<b>' + vparts[eval(-1 + vparts.length)] + '</b>') != -1) { alert(repwith); } else { alert('0:' + repwith); } cdsis[icdsa].innerHTML=cdsis[icdsa].innerHTML.replace('<' + 'b>' + vparts[eval(-1 + vparts.length)] + '</' + 'b>', '<st' + 'rong>' + vparts[eval(-1 + vparts.length)] + '</str' + 'ong>'); } } //} else { // alert('why'); } } } } }
“; ?>

… needed consideration too.

Previous relevant WordPress Bold for Strong Tutorial is shown below.

WordPress Bold for Strong Tutorial

It pans out the CSS styling changes introduced for this WordPress Blog outlined in WordPress Bold Within Code Styling Primer Tutorial work a lot of the time but not always. It is when the <b> … </b> “…” bits have more than about four lines worth of data. So, rather than ditch that CSS …

<style>
/* Thanks to https://cssgradient.io/blog/css-gradient-text/ below */

b:not(.dyk) {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
code b {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

… we settled on an alternative idea. Being as the “b” tag faces threats of deprecation from the web browser renderers (who’d rather see you use CSS “font-weight” instead), why not …

detect the scenario of what causes the problem …
1. in good ol’ WordPress Blog TwentyTen theme’s header.php PHP identify all <b> … </b> “…” bits
2. count the number of lines in said <b> … </b> “…” bits
3. if the number of lines if greater than four in any such piece of HTML “b” content …
4. change all <b> … </b> “…” bits to <strong> … </strong> “…” throughout the content …
as per …
<?php
if (isset($post->post_content)) { // Bold to STRONG perhaps $bolds=explode('</' . 'b' . '>', $post->post_content); $worryb=false; for ($ichb=0; $ichb<(-1 + sizeof($bolds)); $ichb++) { if (strpos($bolds[$ichb], '<' . 'b' . '>') !== false) { $bcontent=explode('<' . 'b' . '>', $bolds[$ichb])[-1 + sizeof(explode('<' . 'b' . '>', $bolds[$ichb]))]; $crlflines=explode("\n", $bcontent); if (sizeof($crlflines) > 4) { $worryb=true; } } } if ($worryb) { $post->post_content=str_replace('<' . 'b' . '>', '<' . 'str' . 'ong' . '>', str_replace('</' . 'b' . '>', '</' . 'str' . 'ong' . '>', $post->post_content)); } }
?>

The colour coding we have been preferring these days such as <font color=blue> … </font> “…” or <font color=red> … </font> “…” is unaffected by this new logic, and remains an alternative alternative.

Previous relevant WordPress Bold Within Code Styling Primer Tutorial is shown below.

WordPress Bold Within Code Styling Primer Tutorial

Can’t remember when it happened, but the HTML <b> bold text </b> is under threat of deprecation, and this has affected how it no longer “packs a punch”, in WordPress blog styling, within a <code> code tag text </code> as it used to.

This has been annoying news for us trying to link a concept with a code snippet. But all is not lost, as we can try flagging the link in another way, independent of text line thickness (by the way, the <strong> </strong> HTML is an alternative to <b> </b>, here). We read about the concept of Text Gradient at this useful link, thanks, and applied it to our WordPress TwentyTen themed header.php file as per the CSS (code) snippet (within the PHP) …

<style> /* Thanks to https://cssgradient.io/blog/css-gradient-text/ below */ b:not(.dyk) { background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } code b { background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style>

… the result of the deployment of which shows you this very affect, to look above (as our golden retriever, Nala, is apt to do …
Nala
).

Notice the use of a CSS Combinator “code b” (ie. the “descendant selector”, specifically “Selects all <b> elements inside <code> elements”)
…

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

… CSS Selector above, as a tool for that more forensic CSS styling on your webpages!

Stop Press

We found with mobile platforms, that within code elements, when a bold (ie. b element tag) had multiple lines to it, the CSS above caused it to only show the first line, so in TwentyTen theme’s header.php we had to add onload=” lookforbincode(); ” code as per …

… changing b tags into strong tags in this mobile platform “b within code” scenario.

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged blog, codex, deprecated, Did you know, element, header.php, HTML, PHP, programming, serverside, strong, tutorial, TwentyTen, TwentyTen theme, Wordpress, wordpress blog | Leave a comment

Pandoc on AlmaLinux Conversion Guises Tutorial

Posted on January 22, 2025 by admin

Pandoc on AlmaLinux Conversion Guises Tutorial

It pans out yesterday’s Pandoc on AlmaLinux Conversions Primer Tutorial revisit start to our …

Pandoc document conversion

… interfacing PHP web application involves more than a two day job. Today, before any PDF input or any new format thinking, we took an interest in the way a user may want to use the output formats …

html
txt … which Pandoc knows as plain

… as we found “talents” for each, those being …

html … is better when there are UTF-8 characters involved in the converted data
txt … which Pandoc knows as plain … is useful in a pair of guises …
1. with line feeds
2. without line feeds

… depending on what use the user sees with this data, and because we want to restrict the user to internal use only data displays, we wanted to have a means by which these three “guises” were available to the user in an HTML div element (which is more flexible than a textarea element) to serve these purposes, as well as popup window HTML presentations where those UTF-8 characters can be more easily controlled.

The day gets quickly used up with issues like this, we find, regarding the changed macos_textutil_convert.php PHP web application you can also try below.

Previous relevant Pandoc on AlmaLinux Conversions Primer Tutorial is shown below.

Pandoc on AlmaLinux Conversions Primer Tutorial

Yesterday’s Word to HTML to CSV Delimitation Primer Tutorial offered a timely reminder that not only …

LibreOffice and Microsoft Office software applications offer exports of document formats to HTML … but, also, open source gives us …
(what is now possible to offer in a public sense because of the recent AlmaLinux installation (you can read more about at Pandoc Install and Public Face Tutorial) of) Pandoc command line application we can use to convert input document formats such as *.doc* and *.html and *.txt to others … and down the track …
tomorrow’s job can involve the interfacing of another inhouse “open source using” web application so that input *.pdf is possible here too

For security purposes we restrict where output files end up to …

/tmp/

… as you might surmise would be a wise move. The user ends up relying on the changed macos_textutil_convert.php PHP web application itself, that way, to display the outputted data (created via command line Pandoc commands performed on the RJM Programming AlmaLinux web server via PHP exec calls) for them.

In making this happen, exporting to PDF, we found that we additionally had to install to the AlmaLinux web server …

dnf install texlive

… the best “heads up” for this after reading the Pandoc error message being this useful webpage, thanks.

Previous relevant Word to HTML to CSV Delimitation Primer Tutorial is shown below.

Word to HTML to CSV Delimitation Primer Tutorial

The modern document applications allow conversion to HTML. What happens during that process, exactly? Well, that’s “under the hood” stuff. A little background, though, and context …

Why would you want to convert, say a Word file, to HTML (using, perhaps, LibreOffice, in our case, or Microsoft Word)? … well, as a mere mortal programmer …
(any form of) text is easier to deal with for “mere mortal programmer” languages we might want to use like …
PHP … is very good at the delimiter processing bits that allow the programmer be useful …
converting … the data into other guises, the one that interested us being …
CSV (comma separated value) data … to be fed into spreadsheet applications like Excel or LibreOffice’s one … and then create charts

… and to do useful delimiter work in PHP you need to know, or suss out, “what happens”, or evidence of that … think hex dumps (where $dr is a PHP variable containing an HTML file record) …

<?php
echo bin2hex($dr) . "\n"; // ... gave, in our case, output such as ... // c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020c2a020546f74616c207c20c2a020c2a02036302c30333220c2a020c2a020c2a03130302e3030
?>

And so we line up all the useful contributors …

CP3O
C2A0
R2D2
… … …

Hang on?! What’s with C2A0? And for that matter, the pitiful “am typing” simulation “… … … “?!

Well, we asked around, and got to this useful link telling us these are non-ascii characters describing a …

Non-breaking space

… scenario programmers of HTML will know can be those …

 

… HTML entities in your webpage content. Well, now, at least to us, that all makes sense. But, for our job, that could be the tip of the “UTF-8 headache” situation! We know we’re only interested in ascii data characters for the conversion job we are trying to do. Is there a way to simplify this “middleperson” HTML data content? Well, this other useful link … got us to use …

<?php
$dr=preg_replace('/[\x7F-\xFF]/ui', '', $dr);
?>

… helped us with …

sanity
simplification

… as far as the PHP delimitation logic went. This was an inhouse job, but we’ll show you a skeletal of how we used …

input Word report … we are calling from_word_to_html.html … say …
containing spreadsheet_able data …
we wanted to extract into …
individual CSV files … ready to …
open as useful spreadsheets … and perhaps onto some chart production …
processing via command line command …
php dostuff.php
… where that PHP is (very informally) …
dostuff.php

… in case these ideas interest you?!

If this was interesting you may be interested in this too.

Posted in eLearning, Operating System, Tutorials | Tagged AlmaLinux, application, command, command line, conversion, decoding, document.open source, encoding, exec, export, format, guise, HTML, line feed, operating system, output, output format, pandoc, PHP, programming, public, switch, text, tutorial, utf-8, web server, word | Leave a comment

Pandoc on AlmaLinux Conversions Primer Tutorial

Posted on January 21, 2025 by admin

Pandoc on AlmaLinux Conversions Primer Tutorial

Yesterday’s Word to HTML to CSV Delimitation Primer Tutorial offered a timely reminder that not only …

LibreOffice and Microsoft Office software applications offer exports of document formats to HTML … but, also, open source gives us …
(what is now possible to offer in a public sense because of the recent AlmaLinux installation (you can read more about at Pandoc Install and Public Face Tutorial) of) Pandoc command line application we can use to convert input document formats such as *.doc* and *.html and *.txt to others … and down the track …
tomorrow’s job can involve the interfacing of another inhouse “open source using” web application so that input *.pdf is possible here too

For security purposes we restrict where output files end up to …

/tmp/

In making this happen, exporting to PDF, we found that we additionally had to install to the AlmaLinux web server …

dnf install texlive

… the best “heads up” for this after reading the Pandoc error message being this useful webpage, thanks.

Previous relevant Word to HTML to CSV Delimitation Primer Tutorial is shown below.

Word to HTML to CSV Delimitation Primer Tutorial

The modern document applications allow conversion to HTML. What happens during that process, exactly? Well, that’s “under the hood” stuff. A little background, though, and context …

Why would you want to convert, say a Word file, to HTML (using, perhaps, LibreOffice, in our case, or Microsoft Word)? … well, as a mere mortal programmer …
(any form of) text is easier to deal with for “mere mortal programmer” languages we might want to use like …
PHP … is very good at the delimiter processing bits that allow the programmer be useful …
converting … the data into other guises, the one that interested us being …
CSV (comma separated value) data … to be fed into spreadsheet applications like Excel or LibreOffice’s one … and then create charts

And so we line up all the useful contributors …

CP3O
C2A0
R2D2
… … …

Hang on?! What’s with C2A0? And for that matter, the pitiful “am typing” simulation “… … … “?!

Well, we asked around, and got to this useful link telling us these are non-ascii characters describing a …

Non-breaking space

… scenario programmers of HTML will know can be those …

 

<?php
$dr=preg_replace('/[\x7F-\xFF]/ui', '', $dr);
?>

… helped us with …

sanity
simplification

… as far as the PHP delimitation logic went. This was an inhouse job, but we’ll show you a skeletal of how we used …

input Word report … we are calling from_word_to_html.html … say …
containing spreadsheet_able data …
we wanted to extract into …
individual CSV files … ready to …
open as useful spreadsheets … and perhaps onto some chart production …
processing via command line command …
php dostuff.php
… where that PHP is (very informally) …
dostuff.php

… in case these ideas interest you?!

If this was interesting you may be interested in this too.

Posted in eLearning, Operating System, Tutorials | Tagged AlmaLinux, application, command, command line, conversion, document.open source, exec, export, HTML, operating system, pandoc, PHP, programming, public, tutorial, web server, word | Leave a comment

Word to HTML to CSV Delimitation Primer Tutorial

Posted on January 20, 2025 by admin

Word to HTML to CSV Delimitation Primer Tutorial

The modern document applications allow conversion to HTML. What happens during that process, exactly? Well, that’s “under the hood” stuff. A little background, though, and context …

Why would you want to convert, say a Word file, to HTML (using, perhaps, LibreOffice, in our case, or Microsoft Word)? … well, as a mere mortal programmer …
(any form of) text is easier to deal with for “mere mortal programmer” languages we might want to use like …
PHP … is very good at the delimiter processing bits that allow the programmer be useful …
converting … the data into other guises, the one that interested us being …
CSV (comma separated value) data … to be fed into spreadsheet applications like Excel or LibreOffice’s one … and then create charts

And so we line up all the useful contributors …

CP3O
C2A0
R2D2
… … …

Hang on?! What’s with C2A0? And for that matter, the pitiful “am typing” simulation “… … … “?!

Well, we asked around, and got to this useful link telling us these are non-ascii characters describing a …

Non-breaking space

… scenario programmers of HTML will know can be those …

 

<?php
$dr=preg_replace('/[\x7F-\xFF]/ui', '', $dr);
?>

… helped us with …

sanity
simplification

… as far as the PHP delimitation logic went. This was an inhouse job, but we’ll show you a skeletal of how we used …

input Word report … we are calling from_word_to_html.html … say …
containing spreadsheet_able data …
we wanted to extract into …
individual CSV files … ready to …
open as useful spreadsheets … and perhaps onto some chart production …
processing via command line command …
php dostuff.php
… where that PHP is (very informally) …
dostuff.php

… in case these ideas interest you?!

If this was interesting you may be interested in this too.

Posted in eLearning, Operating System, Tutorials | Tagged ascii, bin2hex, chart, CLI, comma separated value, command line, conversion, CSV, data, delimitation, delimiter, document, Excel, export, hex, hex dump, HTML, LibreOffice, Microsoft, Microsoft Word, PHP, preg_replace, spreadsheet, text, utf-8, word | Leave a comment

WordPress Blog Comments URL Right Click Popup Check Tutorial

Posted on January 19, 2025 by admin

WordPress Blog Data URI in Post Plugin Tutorial

WordPress Blog Comments URL Right Click Popup Check Tutorial

In the past we have only mildly changed the administration section of our TwentyTen themed WordPress_.org blog (you are currently reading) here at RJM Programming, and some of that involved new WordPress plugins, as you can read a bit about with WordPress Blog Data URI in Post Plugin Tutorial.

We maintain that blog within an “admin” part of the WordPress blog, and any changes we’d put in a “dessert island wish list” usually just absorb and move on, but we thought we’d improve on …

WordPress comment moderation

… by allowing myself (well, thanks awfully, I don’t really know what to say) the chance to …

on any comments webpage …
right click on “a” links whose domain is neither wordpress.org nor rjmprogramming.com.au and … in so doing …
be able to see a small popup window to the top right of the screen

… because, even if we wanted to argue with the great Akismet _{(we use and are very happy with around here)} calling it spam, one of the steps we’d want to investigate would be to rule out a potential “broken link”, and this is a way to check for that.

Now, what we discovered marrying “a wish” with “an action plan” was that …

in parallel to the TwentyTen non-admin parts being manageable largely via changes to good ol’ header.php … we found …
the easy approach to changes in the admin parts could be achieved by changes to good new admin-header.php

… with our action plan moving to “deployment” via PHP (writes Javascript) admin-header.php modified code …

<?php
<script type="text/javascript"> document.body.className = document.body.className.replace('no-js','js'); setTimeout(function(){ if (document.body.innerHTML.indexOf('Comments</h1>') != -1) { var als=document.getElementsByTagName('a'); for (var ials=0; ials<als.length; ials++) { if (('' + als[ials].href).indexOf('http') == 0 && ('' + als[ials].href).replace('wordpress.org','rjmprogramming.com.au').indexOf('rjmprogramming.com.au') == -1) { als[ials].oncontextmenu=function(evt){ window.open(evt.target.href, '_blank', 'left=' + eval(-500 + eval('' + screen.width)) + ',top=0,width=500,height=200'); }; } } } }, 6000); </script>
?>

Pretty straightforward really, and perhaps of interest to some WordPress_.org comment moderators out there!

Previous relevant WordPress Blog Data URI in Post Plugin Tutorial is shown below.

WordPress Blog Data URI in Post Plugin Tutorial

Today, we’ve got another WordPress plugin to suit the TwentyTen themed blog you are reading, adding onto those described at WordPress Blog Collaborative Annotated Email FormData Post Tutorial.

This plugin suits the Content Editor creating the posts in the administration end of the WordPress TwentyTen themed blog, when they desire to add a data URI, rather than an absolute URL or relative URL (which would probably involve an upload). To use data URIs will make your blog posts independent of web server file arrangements, but if you are looking for this to save (web server) diskspace, this might be a mute point. The diskspace could still be used up by the MySql database storing the data URI in its base64 encoding.

What does our PHP plugin call on to do its ~~thang~~thing?

plugin actions (similar to other plugins talked about in postings below) …
1. add_action( ‘admin_notices’, ‘rjmprogramming_Data_URI_Helper’ ); // for Javascript adding HTML to webpage dynamically
2. add_action( ‘admin_footer’, ‘rjmprogramming_data_uri_helper_css’ ); // for CSS
File API and its FileReader.readAsDataURL() method to browse for local device files
highlighted text (within the blog posting, where we rely on TwentyTen “id”s and “className”s to identify user intent) that gets substituted by the data URI if successful … when the user clicks/touches the newly introduced …
“Data URI Highlighted Text Replacer” a link

And so we have for you today rjmprogramming-data-uri-helper.php PHP source code that goes into this plugin should you want to write your own version for a theme that isn’t the WordPress TwentyTen theme (looking for those TwentyTen “id”s and “className”s as changepoints), and/or view us using it with today’s animated GIF presentation.

Previous relevant WordPress Blog Collaborative Annotated Email FormData Post Tutorial is shown below.

WordPress Blog Collaborative Annotated Email FormData Post Tutorial

Yesterday’s WordPress Blog Collaborative Annotated Email User Experience Tutorial helped with practicalities regarding user experience with this WordPress Blog highlighting of text accumulated into the body (as HTML attachment) and subject (as text) of an Annotated Email form of collaborative communication.

The “subject” extension here makes it all the more important to try to look out for long email URLs that will exceed the web server limit here. When too long, that …

previous GET method of navigation … needs to be converted to a …
POST method of navigation

… and today we do not write out any discrete HTML form element to do this (when required), but instead resort to the wonderfully powerful combination of …

Ajax XMLHttpRequest object … as the conduit for …
FormData object

… to be used by the new dynamic thinking Javascript function as below …

… called in that different calling arrangement as per …

document.getElementById('hfloater').innerHTML+='<b>Annotated Email <a class="hlclass" style="inline-block;cursor:pointer;text-decoration:none;" onclick="iftoolongpost(this.title, encodeURIComponent((this.innerText || this.contentWindow || this.contentDocument)), encodeURIComponent(this.innerHTML.substring(this.innerHTML.indexOf(String.fromCharCode(60)))));" data-href="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(document.title.split('|')[0]) + '%20%28' + encodeURIComponent(document.URL) + '%29%0a&body=" title="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php?to=&subject=Re%3a%20' + encodeURIComponent(document.title.split('|')[0]) + '%20%28%20' + encodeURIComponent(document.URL) + '%20%29%0a&body=" target=aeciframe onmouseover="this.title=emaileeis(this.title);" ontouchstart="this.title=emaileeis(this.title);" id=b_hfloater_annotated_email>' + aec + '</a></b><iframe id=aeciframe name=aeciframe style=display:none; src=#></iframe><br>';

… featuring in changed PHP rjmprogramming-multi-lookup.php plugin and/or changed TwentyTen theme header.php file.

Previous relevant WordPress Blog Collaborative Annotated Email User Experience Tutorial is shown below.

WordPress Blog Collaborative Annotated Email User Experience Tutorial

Did you try yesterday’s WordPress Blog Collaborative Annotated Email Tutorial highlighting of text Annotated Email functionality? If you did, you might have found a “hair trigger” timed user experience. You had a very small amount of time to decide on any amendments “by hand” to your email.

On this, did you notice how we relied on a Javascript prompt window to garner an email address off the user? There is method in this “kludginess”. We wanted the highlighting not to be destroyed by a change of focus. The downside though, is that the whole time you spend answering contributes to any setTimeout based timing we have going before we automatically make the highlighting functionality menu disappear. Today, we control that, waiting an extra 10 seconds or so after that for the user to start entering their own Annotated Email content, should they wish, and the HTML div contenteditable=true is reminded by a new onchange replenishment of the delay that the user is still writing … a bit like with SMSes and those blinking dots telling you the other SMSer is writing something (but not as cute here, looks wise, alas).

Again, into the WordPress (changed PHP rjmprogramming-multi-lookup.php) plugin or header.php the changed (header.php) code involves new Javascript (that dynamically creates HTML) as per …

Some email clients baulk at downloading HTML attachments, so the other change today is to append the wording of the email’s inherent HTML to the email subject, so if an emailee is unlucky in this way, they can still get “second prize” … but no cigar!

Previous relevant WordPress Blog Collaborative Annotated Email Tutorial is shown below.

WordPress Blog Collaborative Annotated Email Tutorial

Further to WordPress Plugin Primer Tutorial of recent times, we’re adding to that “highlighting of blog text” (dynamic menu) the options …

Email (that highlighted text) via the email client application via a “mailto:” “a” link
SMS (that highlighted text) via the email client application via a “sms:” “a” link
Annotated Email of the highlighted text converted to mark (marked up) text, accumulated onto for the whole WordPress blog session,and emailed off via PHP’s mail function, as an HTML email attachment (downloaded at the emailee end)

… and we think the last of these has good scope for collaborative thoughts and usages. Want to try it out? You’re here, ready. Just highlight some text to get started.

Into the WordPress (changed PHP rjmprogramming-multi-lookup.php) plugin or header.php the changed (header.php) code involves new Javascript (that dynamically creates HTML) as per …

Previous relevant WordPress Plugin Primer Tutorial is shown below.

WordPress Plugin Primer Tutorial

Normally we make changes to this TwentyTen themed WordPress blog by changing that theme’s wp-content/themes/twentyten/header.php file. But today we show you how to write the PHP code needed to write a WordPress.org admin login plugin to create a hyperlink to a Wikipedia page regarding any text you have highlighted on your WordPress admin area webpage.

We thank …

… and we think you should read …

For us, with our very simple rjmprogramming-wikipedia-lookup.php plugin, we only needed the one piece of PHP to sit in the current WordPress wp-content/plugins directory, and then immediately be accessible to the WordPress blog admin area’s Plugins -> Activate option …

<?php /** * @package Rjmprogramming_Wikipedia_Lookup * @version 1.6 */ /* Plugin Name: Rjmprogramming Wikipedia Lookup Description: Float a Wikipedia lookup link for highlighted text of an admin webpage. Author: Robert James Metcalfe Version: 1.6 Author URI: http://www.rjmprogramming.com.au/ */ // This creates the Wikipedia lookup hyperlink function rjmprogramming_wikipedia_lookup() { $wikipedia_page = "Wikipedia Main Page"; echo '<a target="_blank" title="Wikipedia lookup of ..." onmouseover="var xsel=' . "''" . '; xsel=window.getSelection().toString(); if (xsel.length == 0) {' . ' xsel=document.selection.createRange().htmlText;' . ' } if (xsel.length != 0) { this.innerHTML=xsel; this.href=' . "'" . '//wikipedia.org/wiki/' . "'" . ' + xsel.replace(/\ /g,' . "'" . '_' . "'" . '); } " ontouchstart="var xsel=' . '; xsel=window.getSelection().toString(); if (xsel.length == 0) {' . ' xsel=document.selection.createRange().htmlText; }' . ' if (xsel.length != 0) { this.innerHTML=xsel; this.href=' . "'" . '//wikipedia.org/wiki/' . "'" . ' + xsel.replace(/\ /g,' . "'" . '_' . "'" . '); } " id="rjmprogramming_wikipedia_lookup"' . ' href="//wikipedia.org/wiki/Main_Page">' . $wikipedia_page . '</a>'; } // Now we set that function up to execute when the admin_notices action is called add_action( 'admin_notices', 'rjmprogramming_wikipedia_lookup' ); // We need some CSS to position the hyperlink function rjmprogramming_wikipedia_css() { // This makes sure that the positioning is also good for right-to-left languages $x = is_rtl() ? 'left' : 'right'; echo " <style type='text/css'> #rjmprogramming_wikipedia_lookup { float: $x; padding-$x: 15px; padding-top: 5px; margin: 0; font-size: 11px; } </style> "; } add_action( 'admin_footer', 'rjmprogramming_wikipedia_css' ); ?>

We hope this is of interest to you.

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged admin, admin-header.php, Administration, adminstration user, blog, broken link, check, CMS, comment, comments, Content Management System, domain, event, Javascript, link, moderation, oncontentmenu, PHP, popup, programming, right click, sanity check, spam, tutorial, TwentyTen theme, url, user, webpage, Wordpress, wordpress.org | Leave a comment

USB Based Tethering of MacBook Air to iPhone Tutorial

Posted on January 18, 2025 by admin

USB Based Tethering of MacBook to iPhone Tutorial

USB Based Tethering of MacBook Air to iPhone Tutorial

Another day, another 24 hours with no WiFi here. The (different broadband) service provider (ie. ISP) communication tower got damaged in the storm the other day. Small bikkies on the world stage of problems.

What it did do for us was twofold by nature in noting …

How good and convenient is WiFi working with a broadband network? … versus …
How, let’s say, “interesting” is “online” life via Personal HotSpots for more than a day?

If you paid really close attention to yesterday’s Bluetooth Based Tethering of iPad to iPhone Tutorial …

shunning, not working, WiFi Personal HotSpot “conduit” usage … in favour of …
Bluetooth Personal HotSpot “conduit” usage for an iPad connecting to the Personal HotSpot iPhone … and today we try …
USB Personal HotSpot “conduit” usage for a MacBook Air via Apple white lightning lead connection to the Personal HotSpot iPhone

… and yes, there are, albeit mild, improvements involving a real hardware means of connection here. That improvement relates to the procedure to reconnect the Personal HotSpot after inadvertently losing it … alas, dead easy to “achieve”?!

With that Bluetooth “conduit”, you will not see the, in our case, “Robert’s iPhone” Personal HotSpot connection in the WiFi list for the “helped out” device should the iPhone not be awake at the Personal HotSpot screen. What are the chances of that?! But with the Apple Lead USB connection “conduit” methodology, no such restriction happens. Mind you, as far as the MacBook Air and iPhone Personal Hotspot connection relationship maintainence goes, you have the length of the Apple White Lead length “freedom”, while with Bluetooth you have several meters “freedom”.

Can Bluetooth and USB Personal HotSpot connections for, say …
iPhone … Personal Hotspot host … with Bluetooth arranged and the Apple White Lightning Connector Lead heading off to the …
MacBook Air … USB port … and …
iPad … using Bluetooth arrangement above …
… all be happy and connected at the same time with no functional WiFi?

Yes! Yay!! But Mobile Data quotas suffer?!

Previous relevant Bluetooth Based Tethering of iPad to iPhone Tutorial is shown below.

Bluetooth Based Tethering of iPad to iPhone Tutorial

Today we have an outage regarding the WiFi to our office, and wanted to …

do some online work on an iPad with no SIM card … and …
we do have access to an iPhone with Mobile Data on and a connection to a Service Provider

What can be achieved with Bluetooth only (other than Spotify, which worked fine with our Bluetooth only Sonos speaker and the Spotify app)?

how about tethering iPad to iPhone …
via an iPhone HotSpot (like talked about with Making of Automated Tethering of iPhone to iPad Tutorial) …
Bluetooth based …
connection

? Other than eating more into your Mobile Data quota, it sounds good to us … and was!

Previous relevant Making of Automated Tethering of iPhone to iPad Tutorial is shown below.

Making of Automated Tethering of iPhone to iPad Tutorial

The animated GIF presentation featuring in yesterday’s Automated Tethering of iPhone to iPad Tutorial featured …

iPad control-command-shift-3 generated screenshot images making their way to Photos app … and …
iPhone control-command-shift-3 generated screenshot images making their way to Photos app … and …
coalescing back at Photos app so as to be able to Mail share in a zip file download (iPad ones getting named in the range IMG_1631.PNG to IMG_1639.PNG and iPhone ones in the range IMG_2777.PNG to IMG_2781.PNG) …
at this MacBook Air … so as to …
browse for these images as the source for that animated GIF’s contents …

… but in order to tell the story of that blog posting well, what order (because we captured the “story’s images” involving interplay that had us jumping from one device to the other and back)?

Well, at macOS operating systems you get (downloaded) image file …

datetime created
datetime added
datetime modified

… but after downloading, these all end up indistinguishable. What we need is …

datetime image captured

… to make the job easier (albeit, and we did as well, you could load them all into a PDF and use application like macOS Preview to reorder them appropriately (hopefully soon after) from memory)? Oops! Or, is the image metadata going to help us here? These are PNG images and Exif is best with JPEG images, but still, we remember looking into this when we presented the PHP Exif Image Information Revisit Tutorial blog posting that resulted in the PHP (“first draft”) “Exif Information” web application (as the basis for better “Exif Information” web application later on).

We ran this on our local MAMP Apache/PHP/MySql web server …

… and there was enough there to go on to help out getting the order better (where you’ll see us using …

iPhone Notes app …

… to write down image identifier and capture datetimes … marrying that up when …
choosing order of images when constructing animated GIF … and sanity checking via …
macOS Preview application approach that is so good at shaping to (or really) rearranging slide image orders

). Phew!

Previous relevant Automated Tethering of iPhone to iPad Tutorial is shown below.

Automated Tethering of iPhone to iPad Tutorial

Thinking on yesterday’s Automated Tethering of iPhone to Mac Tutorial, the next day …

Was in the car doing a bit of work on the iPad (iOS (8th generation) Version 16.3.1), unconnected at the time, the other day, when we didn’t ~~got~~ get a surprise. ~~Lo and behold, a~~ To infinity and beyond, we looked, but no notification style dialog box came up.

But we went looking in …

Settings -> Wi-Fi -> Auto Join Hotspot

… and discovered the setting was set to “Ask to Join” while we think a better setting to get the ball rolling, here, would be “Automatic” (rather than “Never”). And so it came to pass.

And though we had to adjust Personal Hotspot settings on the iPhone to allow others to connect (automatically, now), Wi-Fi connections on the iPad became automated, and we did get connected to the big wide online connected wooooorrrrrllllldddd on the iPad via the iPhone’s Personal Hotspot this way! Yayyyyyy!

Previous relevant Automated Tethering of iPhone to Mac Tutorial is shown below.

Automated Tethering of iPhone to Mac Tutorial

Was in the car doing a bit of work on the MacBook Air (macOS Sonoma Version 14.5), unconnected at the time, the other day, when we got a surprise. Lo and behold, a notification style dialog box came up …

Personal Hotspot Available
Do you want to join “Robert’s iPhone”?

… presumably because we had our iPhone in the car (and had invoked its Personal Hotspot functionality in the past, as you can read about with Troubleshooting Retethering Windows 10 to iPhone Tutorial) and then, on hovering over it (it took me a day to tweak to) came up with …

Personal Hotspot Available
Do you want to join “Robert’s iPhone”?

… that on clicking the Join button had us connected to the big wide online connected wooooorrrrrllllldddd without needing to do anything on the iPhone! Great integration!

We looked up with Google’s Image search via …

Personal Hotspot Available

… in “full FOMO horror”, getting us to read this webpage, thanks, to see that some people even expect more?! Impressive enough, and stop there, we’d say.

Previous relevant Troubleshooting Retethering Windows 10 to iPhone Tutorial is shown below.

Troubleshooting Retethering Windows 10 to iPhone Tutorial

You might say today’s “Troubleshooting Retethering Windows 10 to iPhone Tutorial” is missing a “Tethering Windows 10 to iPhone Primer Tutorial” on top of the Tethering MacBook Pro to iPhone Primer Tutorial involving the macOS wooooooorrrrrrllllllddd, but sometimes we can intimate the positives during an explanation of the negatives (… and after all that’s what it’s all about).

And yes, things go wrong in I.T.? Who’d believe it? And so, today, we had just such a disconnect re-rehearsing a way to have a Windows 10 laptop be connected to the Internet away from a WiFi router scenario offsite, but taking along the “lassooable” iPhone 6 (you guessed it … as had been done successfully in the past). Well, another whole consideration is “why would the iPhone 6 Personal Hotspot (turned on) not appear in the Windows 10 WiFi connection list” but today’s troubleshooting theme goes past that onto the practicalities of Forgetting the whY ~~and adding the MCA~~and concentrating on the “how” of “how to fix this”, which via good ol’ Google …

windows 10 will not connect to iphone 6 personal hotspot

… leading us to today’s star turn link (thanks) …

1 Press Windows Key + I shortcut to quickly open the Settings app.
2 When Settings app opens, navigate to Network & Internet section
3 From the menu on the left select Wi-Fi. Now click on Manage known networks.
4 List of memorized Wi-Fi networks will appear. Select your Wi-Fi network and click the Forget button.
5 Then connect to your hotspot network again.

… curiously precursored by a presumption we do not believe to have been true surmising that the hotspot password had changed. No worries, though, because the advice helped, that being to first …

Forget the network (on Windows 10 laptop)
Retry the reopened Personal Hotspot network (on iPhone 6)
Back at same place you “Forgot”, suddenly “remember” via Properties set “Connect Automatically When in Range” on (on Windows 10 laptop) … perhaps needing the iPhone 6 Personal Hotspot password

… that last step above an “addendum” to the great advice quoted above, and summarized via today’s animated GIF presentation.

Voila! Connection for Windows 10 in a scenario where there is no WiFi router but an iPhone 6 Personal Hotspot is available. We have to say, though, two things …

the iPhone needs Mobile Data to be on, and to get a signal to its ISP here … and that …
this is likely to cost you more in cold hard cash than your home WiFi arrangements would, in all probability, for the time it takes to get the work done, in this Personal Hotspot way (and for people called “Personal Hotspot” … My way)

We hope you never have this issue, and thank the contributors to troubleshooting advice, who have, and by sharing online, thereby getting answers out of people we’d like to thank, too … Dzięki.

Previous relevant Tethering MacBook Pro to iPhone Primer Tutorial is shown below.

Tethering MacBook Pro to iPhone Primer Tutorial

Today we talk about a networking topic, regarding the idea if you are out and about, out of reach of WiFi connections, with your laptop, notebook or MacBook Pro, but you have available to you a device such as an Android or iPhone or iPad or tablet with inbuilt SIM card network connector, that networks via a mobile network (eg. here in Australia a 4G (soon to go to 5G) network) you (and we) can, perhaps …

“tether” your laptop, notebook or MacBook Pro (Robert’s MacBook Pro) … to that …
Android or iPhone (Robert’s iPhone) or iPad or tablet with inbuilt SIM card network connector accessing its mobile network (such as, here in Australia, 4G (soon to become 5G))

No, our MacBook Pro is not Mister Ed, but we do form a “stable” connection … chortle, chortle.

The clue to all this is, for us, in the iPhone’s …

Settings -> Personal Hotspot -> switch on

… and there you will see three modes of “hotspotting” …

WiFi
Bluetooth … enable on both and “Pair” on both
USB … we use in Xcode running and testing mobile applications on iPhone (or iPad)

… the first of which is great with that scenario we talked about at the top of the article.

be on iPhone and touch Settings icon
touch Personal Hotspot
touch to be On
over at MacBook Pro and click Settings icon
click WiFi
pick Robert’s iPhone (or equivalent) in the list and it will have that “tethering” icon (two linked ellipses)
voila! … you can surf the net, read your emails and do any of those other “online” activities … but be aware that this arrangement usually costs more in service charges

You can take a look at our PDF slideshow presentation of some of these concepts.

If this was interesting you may be interested in this too.

Posted in eLearning, Hardware, Networking, Tutorials | Tagged Apple, apple white lead, bluetooth, connection, hardware, hotspot, iPad, iPhone, lead, mobile, mobile data, network, online, service provider, sonos, tether, tutorial, USB, white lead, WiFi | Leave a comment

Bluetooth Based Tethering of iPad to iPhone Tutorial

Posted on January 17, 2025 by admin

Bluetooth Based Tethering of iPad to iPhone Tutorial

Today we have an outage regarding the WiFi to our office, and wanted to …

do some online work on an iPad with no SIM card … and …
we do have access to an iPhone with Mobile Data on and a connection to a Service Provider

What can be achieved with Bluetooth only (other than Spotify, which worked fine with our Bluetooth only Sonos speaker and the Spotify app)?

how about tethering iPad to iPhone …
via an iPhone HotSpot (like talked about with Making of Automated Tethering of iPhone to iPad Tutorial) …
Bluetooth based …
connection

? Other than eating more into your Mobile Data quota, it sounds good to us … and was!

Previous relevant Making of Automated Tethering of iPhone to iPad Tutorial is shown below.

Making of Automated Tethering of iPhone to iPad Tutorial

The animated GIF presentation featuring in yesterday’s Automated Tethering of iPhone to iPad Tutorial featured …

iPad control-command-shift-3 generated screenshot images making their way to Photos app … and …
iPhone control-command-shift-3 generated screenshot images making their way to Photos app … and …
coalescing back at Photos app so as to be able to Mail share in a zip file download (iPad ones getting named in the range IMG_1631.PNG to IMG_1639.PNG and iPhone ones in the range IMG_2777.PNG to IMG_2781.PNG) …
at this MacBook Air … so as to …
browse for these images as the source for that animated GIF’s contents …

Well, at macOS operating systems you get (downloaded) image file …

datetime created
datetime added
datetime modified

… but after downloading, these all end up indistinguishable. What we need is …

datetime image captured

We ran this on our local MAMP Apache/PHP/MySql web server …

… and there was enough there to go on to help out getting the order better (where you’ll see us using …

iPhone Notes app …

… to write down image identifier and capture datetimes … marrying that up when …
choosing order of images when constructing animated GIF … and sanity checking via …
macOS Preview application approach that is so good at shaping to (or really) rearranging slide image orders

). Phew!

Previous relevant Automated Tethering of iPhone to iPad Tutorial is shown below.

Automated Tethering of iPhone to iPad Tutorial

Thinking on yesterday’s Automated Tethering of iPhone to Mac Tutorial, the next day …

Was in the car doing a bit of work on the iPad (iOS (8th generation) Version 16.3.1), unconnected at the time, the other day, when we didn’t ~~got~~ get a surprise. ~~Lo and behold, a~~ To infinity and beyond, we looked, but no notification style dialog box came up.

But we went looking in …

Settings -> Wi-Fi -> Auto Join Hotspot

… and discovered the setting was set to “Ask to Join” while we think a better setting to get the ball rolling, here, would be “Automatic” (rather than “Never”). And so it came to pass.

Previous relevant Automated Tethering of iPhone to Mac Tutorial is shown below.

Automated Tethering of iPhone to Mac Tutorial

Personal Hotspot Available
Do you want to join “Robert’s iPhone”?

… that on clicking the Join button had us connected to the big wide online connected wooooorrrrrllllldddd without needing to do anything on the iPhone! Great integration!

We looked up with Google’s Image search via …

Personal Hotspot Available

… in “full FOMO horror”, getting us to read this webpage, thanks, to see that some people even expect more?! Impressive enough, and stop there, we’d say.

Previous relevant Troubleshooting Retethering Windows 10 to iPhone Tutorial is shown below.

Troubleshooting Retethering Windows 10 to iPhone Tutorial

windows 10 will not connect to iphone 6 personal hotspot

… leading us to today’s star turn link (thanks) …

1 Press Windows Key + I shortcut to quickly open the Settings app.
2 When Settings app opens, navigate to Network & Internet section
3 From the menu on the left select Wi-Fi. Now click on Manage known networks.
4 List of memorized Wi-Fi networks will appear. Select your Wi-Fi network and click the Forget button.
5 Then connect to your hotspot network again.

… curiously precursored by a presumption we do not believe to have been true surmising that the hotspot password had changed. No worries, though, because the advice helped, that being to first …

Forget the network (on Windows 10 laptop)
Retry the reopened Personal Hotspot network (on iPhone 6)
Back at same place you “Forgot”, suddenly “remember” via Properties set “Connect Automatically When in Range” on (on Windows 10 laptop) … perhaps needing the iPhone 6 Personal Hotspot password

… that last step above an “addendum” to the great advice quoted above, and summarized via today’s animated GIF presentation.

Voila! Connection for Windows 10 in a scenario where there is no WiFi router but an iPhone 6 Personal Hotspot is available. We have to say, though, two things …

the iPhone needs Mobile Data to be on, and to get a signal to its ISP here … and that …
this is likely to cost you more in cold hard cash than your home WiFi arrangements would, in all probability, for the time it takes to get the work done, in this Personal Hotspot way (and for people called “Personal Hotspot” … My way)

We hope you never have this issue, and thank the contributors to troubleshooting advice, who have, and by sharing online, thereby getting answers out of people we’d like to thank, too … Dzięki.

Previous relevant Tethering MacBook Pro to iPhone Primer Tutorial is shown below.

Tethering MacBook Pro to iPhone Primer Tutorial

“tether” your laptop, notebook or MacBook Pro (Robert’s MacBook Pro) … to that …
Android or iPhone (Robert’s iPhone) or iPad or tablet with inbuilt SIM card network connector accessing its mobile network (such as, here in Australia, 4G (soon to become 5G))

No, our MacBook Pro is not Mister Ed, but we do form a “stable” connection … chortle, chortle.

The clue to all this is, for us, in the iPhone’s …

Settings -> Personal Hotspot -> switch on

… and there you will see three modes of “hotspotting” …

WiFi
Bluetooth … enable on both and “Pair” on both
USB … we use in Xcode running and testing mobile applications on iPhone (or iPad)

… the first of which is great with that scenario we talked about at the top of the article.

be on iPhone and touch Settings icon
touch Personal Hotspot
touch to be On
over at MacBook Pro and click Settings icon
click WiFi
pick Robert’s iPhone (or equivalent) in the list and it will have that “tethering” icon (two linked ellipses)
voila! … you can surf the net, read your emails and do any of those other “online” activities … but be aware that this arrangement usually costs more in service charges

You can take a look at our PDF slideshow presentation of some of these concepts.

If this was interesting you may be interested in this too.

Posted in eLearning, Hardware, Networking, Tutorials | Tagged bluetooth, connection, hardware, hotspot, iPad, iPhone, mobile, mobile data, network, online, service provider, sonos, tether, tutorial, WiFi | Leave a comment

YouTube Video API Event Playlist Generations Tutorial

Posted on January 16, 2025 by admin

YouTube Video API Event Playlist Generations Tutorial

Recently, on this current YouTube API interfacing Song Playing web application, further to the recent YouTube Video API Event Playlist User Settings Tutorial, we’ve been referring a lot to …

top.document.title

… as a place to store settings in which all three generational layers we’ve got going, can share information, and function calls like …

var a_js_var = top.getlasttitleclicked();

This has all worked okay until you consider, “iframe hereditary wise” …

greatgrandparent … WordPress blog (you are reading) uses an iframe to host all below, via that “here” link below …
grandparent … tweaked esp_ornot_esp.html YouTube API Interfacing web application (you can try out for yourself here) … calls on …
parents … tweaked karaoke_youtube_api.htm inhouse YouTube video interfacer … helped out by …
grandchildren … tweaked stop_start_youtube.html YouTube API caller

What happens? Well …

top.document.title

… refers to this WordPress blog webpage, whereas we originally coded it with the intention that it would refer to the “grandparent” level webpage in the list above. For the “title” scenario this can be remedied by code at the grandparent level checking for this scenario and being agile (as per some example code below) …

But ideas like …

var a_js_var = top.getlasttitleclicked();

… are another matter entirely. We’re not going around shoving irrelevant Javascript functions into the makeup of our WordPress Blog webpages! And that is the situation that made us try, for the first time we can remember …

var a_js_var = parent.parent.getlasttitleclicked();

… huh?! Yes, you can go back through the generations to an exact generation of interest, that way, and the Javascript function called exists, and according to the codeline above, if the code is in the grandchild level the called Javascript function is in a grandparent level. Cute, huh?!

Previous relevant YouTube Video API Event Playlist User Settings Tutorial is shown below.

YouTube Video API Event Playlist User Settings Tutorial

We’re happy to be talking about three new pieces of functionality to add to our recent YouTube API interfacing Song Playing web application last talked about with the recent YouTube Video API Event Playlist Background Image Tutorial, those being …

📹 ( 📹 ) means by which a user can choose to suppress the video aspects (but not the controls) to the YouTube video “parent” level webpage(s) we display
📜 ( 📜 ) scroll emoji allowing the Radio playing web application aspects push the relevant video playing parts to the top of the screen
colour picker can allow user tailoring of the background colour to the “parent” level webpages supervising the “grandchild” players of the YouTube videos

These all rely on document.title settings …

Codewise, it was all of the “the three amigos”, at it again …

grandparent … tweaked esp_ornot_esp.html YouTube API Interfacing web application (you can try out for yourself here) … calls on …
parents … tweaked karaoke_youtube_api.htm inhouse YouTube video interfacer … helped out by …
grandchildren … tweaked stop_start_youtube.html YouTube API caller

… that got involved.

Previous relevant YouTube Video API Event Playlist Background Image Tutorial is shown below.

YouTube Video API Event Playlist Background Image Tutorial

Our current project last talked about with YouTube Video API Event Playlist Shuffle and Loop Tutorial started as a …

“proof of concept” one to allow for user testing of event.stopPropagation() Javascript event bubbling control usage … and yet, is also a …
player of YouTube videos using the YouTube API inhouse interfacing here

… and it is the second functionality we want to emphasize. In such scenarios, we sometimes apply an apt Background Image (we’re applying to all document.body) via …

<style> td { vertical-align: top; } select { background-color: lightblue; } option:not(:checked) { background-color: yellow; opacity: 0.5; } textarea { background-color: #f0f0f0; } body { background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL('/retro-music-concept-with-headphones-space.jpg'); background-size:cover; background-repeat:no-repeat; } * { border-radius:10px; border-color:magenta; } </style>

… and regarding /retro-music-concept-with-headphones-space.jpg we have Freepik to thank for the free headphones background image we found there and downloaded then uploaded into place.

While we’re talking styling another CSS measure we often use to change the aesthetics of a webpage look is to soften some squared off borders via the application of a border-radius.

The meta viewport tag came in handy for this project, as another layer, for mobile platforms, of allowing mobile gestures to genuinely improve the video viewing, for the user …

<meta id='myviewport' name='viewport' content='width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes' >

Another matter with mobile usage and a personalized playlist play scenario was that the use of the Mute and Unmute checkboxes at the “grandparent” level did not amount to a real click at the “grandchild” level, and so we started involving Javascript confirm box querying of users here, and this satisfied as a real user click for mobile platform media play purposes.

Codewise, all of the “the three amigos”, at it again …

grandparent … tweaked esp_ornot_esp.html YouTube API Interfacing web application (you can try out for yourself here) … calls on …
parents … tweaked karaoke_youtube_api.htm inhouse YouTube video interfacer … helped out by …
grandchildren … tweaked stop_start_youtube.html YouTube API caller

… got involved.

Previous relevant YouTube Video API Event Playlist Shuffle and Loop Tutorial is shown below.

YouTube Video API Event Playlist Shuffle and Loop Tutorial

We left our Song Playing web application in YouTube Video API Event Playlist Save and Recall Tutorial …

on mobile, needing a lot of “user tap maintenance” to keep the “personalized playlist” (consisting of YouTube ID video) music rolling … hence our …

And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API (their) playlists … no guarantees, as you’d imagine!

… from a preceeding tutorial … well … we still allow that mode of use, but add to that, the possibility of …
on mobile or non-mobile, we now offer the referencing of …
1. YouTube Playlist IDs (34 characters) … or …
2. Spotify Playlist IDs (22 characters)
… so that shuffling and, in the case of YouTube Playlists using the YouTube App (if on mobile), looping can be part of the mix in your Song Plays (now appearing in the web application title … doh!! … yay!!!!)

The way to access this new functionality, above, is via the “now always appearing” 🍪 ( 🍪 Cookie button ) new prompt window arrangement …

… that is possible when no personalized playlist hashtag data is in the mix. If it is, well, that opens another whole story all the way through to allowing the user to (email) request the creation of their personalized list of YouTube video IDs becoming a public facing YouTube Playlist hosted on the RJM Programming YouTube Channel, whereby we moderate, here, and if all passes muster, we return a 34 character YouTube Playlist ID the user can save from then on as a playlist on mobile or non-mobile capable of shuffling and looping (if the YouTube App is invoked, on mobile).

We’ve allowed those YouTube search results to “linger longer” too, by replicating them at the “grandparent level” at the point of time we wipe them from the “parent level”, the latest set appearing just below those top three options we now have going for both non-mobile and mobile platforms.

Codewise, two of the “the three amigos” were at it again …

grandparent … tweaked esp_ornot_esp.html YouTube API Interfacing web application (you can try out for yourself here) … calls on …
parents … tweaked karaoke_youtube_api.htm inhouse YouTube video interfacer … helped out by …
grandchildren … stop_start_youtube.html YouTube API caller obviously not progressing at school, or not changing, often enough, like, if you know what we mean … tut, tut!

Previous relevant YouTube Video API Event Playlist Save and Recall Tutorial is shown below.

YouTube Video API Event Playlist Save and Recall Tutorial

Meanwhile, back at the wishlist, with our recent YouTube API interfacing web application project …

st*_st* way to set mute straight away via $_GET[‘mute’] and/or blanks in duration get and a hashtag way to temporarily mute
Save a playlist for later via window.localStorage
Share a playlist
Radio and Oneatatime with a straight hashtag URL
Mute and unmute dynamically
Turn “-” into a reset link
Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)

… it is the olive ideas we’ve made a start on today. We say “we’ve made a start on” only because, when it comes to programming, it doesn’t pay to close off alternate ideas as you go about looking for solutions. Take “Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)” (for some reason we’re nicknaming “innerHTML” … who wrote this script) …

… well, yes, that would be nice, but, more to the point, we started involving top.document.title in solution making but then, along the way, started incorporating just plain and simple Javascript get/set function_ality …

var ajaxs_ih=''; function get_ajaxs_ih() { return ajaxs_ih; } function set_ajaxs_ih(wht) { ajaxs_ih=wht; }

… parent.get_ajaxs_ih() and parent.set_ajaxs_ih(strIn) references from the “parent” level referencing the “grandparent” level (of code above) and being able to populate those YouTube search dropdowns more efficiently. This get/set paradigm is “a classic” method_ology in a lot of OOP work, further to the recent YouTube Video API Event Radio Play Sharing Tutorial.

Codewise, again, “the three amigos” were at it again …

grandparent … tweaked esp_ornot_esp.html YouTube API Interfacing web application (you can try out for yourself here) … calls on …
parents … tweaked karaoke_youtube_api.htm inhouse YouTube video interfacer … helped out by …
grandchildren … tweaked stop_start_youtube.html YouTube API caller

Previous relevant YouTube Video API Event Radio Play Sharing Tutorial is shown below.

YouTube Video API Event Radio Play Sharing Tutorial

Wishful thinking with today’s tasklist regarding our current YouTube Video API Event Radio Play Idea Tutorial YouTube API interfacing web application project, where the blue ideas were started …

st*_st* way to set mute straight away via $_GET[‘mute’] and/or blanks in duration get and a hashtag way to temporarily mute
Save a playlist for later via window.localStorage
Share a playlist
Radio and Oneatatime with a straight hashtag URL
Mute and unmute dynamically
Turn “-” into a reset link
Amalgamate entries searched for into IP address and raw character sets (perhaps collected in top.document.title)

… further to yesterday’s YouTube Video API Event Radio Play Idea Tutorial …

And yes, we want to try to get a mobile Radio scenario working for mobile, perhaps, by researching YouTube API (their) playlists … no guarantees, as you’d imagine!

Of interest, here, might be the “emoji means” and top.document.title means by which we tackle the Mute and unmute dynamically issue. Why use top.document.title here? Well, a grandchild of the grandparent is best placed to …

tell the grandparent the non-muted volume (which seems to always be 100, as you control what 100 means with the actual volume you have for your speakers) … as well as …
obey a grandparent edict to either …
1. mute
2. unmute
… the volume as our way to say “keep playing the radio but shush while I take this phone call” in certain scenarios that might happen

… meaning that all the grandparent has to do, effectively “broadcasting” to any “grandchildren YouTube video players”, is “the emoji flagging work” and adjusting (what it knows as) document.title to perform this functionality for the two new input type=checkboxes (appended by an empty span element and nested in a span id=smute element) we add into the HTML design mix via onchange event function Javascript …

It is this complex because (we found out) input type=checkbox CSS styling, as a subject, is a “bit of a closed book” matter!

Codewise, also regarding email and SMS (radio) playlist sharing functionality, amongst other changes, involved …

grandparent … tweaked esp_ornot_esp.html YouTube API Interfacing web application (you can try out for yourself here) … calls on …
parents … tweaked karaoke_youtube_api.htm inhouse YouTube video interfacer … helped out by …
grandchildren … tweaked stop_start_youtube.html YouTube API caller

Previous relevant YouTube Video API Event Stop Propagation Idea Tutorial is shown below.

YouTube Video API Event Stop Propagation Idea Tutorial

We’re back using the YouTube API video playing themes of YouTube Video API Interfacer Audio Play Tutorial as a means to setting up a web application that may help explain …

event.stopPropagation();

… Javascript event control of it’s “bubbling” (up through an element hierarchy), in other words, depending where you place this, stopping it’s “bubbling up” at that element concerned …

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent propagation to other event-handlers of the current element. If you want to stop those, see stopImmediatePropagation().

We find, around here, we don’t know we’ve created a need for event.stopPropagation() usage until we’ve stumbled onto it, most of the time, so trying to get in ahead of it with today’s proof of concept to event.stopPropagation() or not to event.stopPropagation() web application feels a bit novel to us, in a good way.

This means by which to toggle that mode of use was more straightforward than “data control” with our musical YouTube API video functionality allowing a user to choose and slot in their own video ideas via either …

YouTube video ID … 11 characters long … or …
search string to try to select a video, via a programmatically populated dropdown, with an 11 character long YouTube video ID

… asking us to do a fair bit of tweaking to our inhouse interfacing …

tweaked karaoke_youtube_api.htm inhouse YouTube video interfacer … helped out by …
tweaked stop_start_youtube.html YouTube API caller

… you might want to try out, yourself, to see what we’re getting at here, below …

Previous relevant YouTube Video API Interfacer Audio Play Tutorial is shown below.

YouTube Video API Interfacer Audio Play Tutorial

The recent Making Of Earth Scanner Legs Tutorial set us to thinking about how to offer a toggling arrangement between our inhouse YouTube Embedded Iframe API playing of …

video … with an incarnation of this that plays …
audio … “sort of” only (but able to be toggled back to video playing)

… and it got us wondering how to “dull out” a video. We chose the CSS …

If you want a “complete dull out” try filter: invert(50%); … but we wanted to see controls down the bottom, still useful for audio _only playing.

You can try this all out in the changed karaoke_youtube_api.htm inhouse YouTube video interfacer.

If this was interesting you may be interested in this too.

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged audio, background colour, background image, border-radius, broadcast, broadcasting, bubble, bubbling, button, click, colour, confirm, continous, cookie, CSS, DOM, email, emoji, emoji button, event, event.stopPropagation, generation, gesture, grandchild, grandparent, greatgrandparent, hash, hashtag, hierarchy, HTML, IFRAME, inheritance, intersessional, iOS, iPad, Javascript, localStorage, loop, media, meta, mobile, music, mute, parent, play, playing, playlist, programming, radio, recall, scroll, scrolling, share, sharing, shuffle, SMS, song, Spotify, stopPropagatin, store, top, transistor, transistor radio, tutorial, Tutorials API, url, user preference, video, viewport, volume, YouTube, YouTube API | Leave a comment

Your Numbers Game
Get clue	Your answer	Your Score
Clue?		Score 0/0

Search for:
Recent Posts
Categories
- Ajax
- Android
- Animation
- Anything You Like
- Code::Blocks
- Coding
- Colour Matching
- Data Integration
- Database
- Delphi
- Eclipse
- eLearning
- ESL
- Event-Driven Programming
- Games
- GIMP
- GUI
- Hardware
- Installers
- iOS
- Land Surveying
- Moodle
- Music Poll
- NetBeans
- Networking
- News
- Not Categorised
- OOP
- Operating System
- Photography
- Projects
- Signage Poll
- Software
- SpectroPhotometer
- Tiki Wiki
- Trips
- Tutorials
- Uncategorized
- Visual Studio
- Xcode
July 2025

S M T W T F S

1 2 3 4 5

6 7 8 9 10 11 12

13 14 15 16 17 18 19

20 21 22 23 24 25 26

27 28 29 30 31

« Jun
Meta
Tags
Ajax animation background button canvas command line CSS Did you know div DOM dropdown email emoji event form game games Google Google chart HTML IFRAME image iOS iPad Javascript MAMP map mobile navigation onclick overlay PHP programming select share sharing SMS SVG table textarea tutorial url video web browser webpage
Your Background Image
OnTopList

WordPress Bold for Strong Deprecation Tutorial

Pandoc on AlmaLinux Conversion Guises Tutorial

Pandoc on AlmaLinux Conversions Primer Tutorial

Word to HTML to CSV Delimitation Primer Tutorial

USB Based Tethering of MacBook Air to iPhone Tutorial

Bluetooth Based Tethering of iPad to iPhone Tutorial

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Your Background Image

OnTopList

Recent Comments

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Tags

Your Background Image

OnTopList