{"id":51591,"date":"2021-02-04T03:01:24","date_gmt":"2021-02-03T17:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51591"},"modified":"2021-02-04T19:25:26","modified_gmt":"2021-02-04T09:25:26","slug":"css-countdown-emoji-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-countdown-emoji-tutorial\/","title":{"rendered":"CSS Countdown Emoji Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_count_image.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Countdown Reveal Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csscount_image_emoji.gif\" title=\"CSS Countdown Emoji Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Countdown Emoji Tutorial<\/p><\/div>\n<p>A synopsis of the CSS highlights of the web application of yesterday&#8217;s <a title='CSS Countdown Reveal Tutorial' href='#csscrt'>CSS Countdown Reveal Tutorial<\/a> are, so far &#8230;<\/p>\n<ul>\n<li>counter-increment<\/li>\n<li>counter-reset<\/li>\n<li>var <font size=1>(as in content: var(&#8211;tooltip-string);)<\/font> &#8230; and today&#8217;s addition is &#8230;<\/li>\n<li>attr <font size=1>(as in content: attr(data-cnt);)<\/font><\/li>\n<\/ul>\n<p> &#8230; that <a target=_blank title='CSS attr information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/attr()'>&#8220;attr&#8221;<\/a> (standing for attribute) causing an interplay to go on from the HTML (design) back to the CSS (styling) and back out to the HTML (design).<\/p>\n<p>The &#8220;attr&#8221; is also a reminder of the huge wooooorrrrlllllddd of Javascript global data attributes that awaits your imagination here, because though &#8220;attr&#8221; can point at the <i>big<\/i> attributes like &#8220;title&#8221; or &#8220;class&#8221; or &#8220;id&#8221; it can also point at your tailored global data attributes, turning on the intelligence of your HTML to be that little more like XML <font size=1>(invited into all the swankiest establishments, wooooohooo!)<\/font><\/p>\n<p>Today, we&#8217;re going to, as the default, rewrite that kind of awkward ~[counter]~ div element content into emojis such as &#49;&#65039;&#8419; &#8230; &#50;&#65039;&#8419; &#8230; &#51;&#65039;&#8419; etcetera etcetera etcetera.  We do this by populating those div element user designed and introduced &#8220;data-cnt&#8221; global data attributes with the <a target=_blank title='String.fromCodePoint() information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/fromCodePoint'>String.fromCodePoint()<\/a> calls needed to be able to display those emojis via the CSS &#8220;attr&#8221; usage.<\/p>\n<table>\n<tr>\n<th>CSS<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n&lt;style&gt;<br \/>\ndiv::before {<br \/>\n  counter-increment: the-final-countdown -1;<br \/>\n  <font color=blue>\/\/<\/font>content: '~' counter(the-final-countdown) '~';<br \/>\n  <font color=blue>content: attr(data-cnt);<\/font><br \/>\n  background: yellow;<br \/>\n  display: inline-block;<br \/>\n  width: 5rem;<br \/>\n  margin-right: 0.5rem;<br \/>\n  text-align: center;<br \/>\n  color: blue;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>Javascript <br \/>(new onload function)<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n  <font color=blue>function eonl() {<br \/>\n   var divsare=document.getElementsByTagName('div'), thiscontn='', cdatac='', ijk=0, cd='';;<br \/>\n   for (var idivsare=0; idivsare&lt;divsare.length; idivsare++) {<br \/>\n     thiscontn='' + eval(-idivsare + eval(-1 + divsare.length));<br \/>\n     cdatac='';<br \/>\n     for (ijk=0; ijk&lt;thiscontn.length; ijk++) { \/\/ \\000034\\0020e3\\000030\\0020e3<br \/>\n       \/\/cdatac+=cd + String.fromCharCode(92) + ('000' + '000' + thiscontn.substring(ijk, eval(1 + ijk))).slice(-6) + String.fromCharCode(92) + '0020e3';<br \/>\n       if (document.URL.indexOf('noemoji=') != -1 || divsare[idivsare].innerHTML.trim() != divsare[idivsare].innerHTML) {<br \/>\n       cdatac='~' + eval(1 + eval('' + thiscontn)) + '~';<br \/>\n       } else {<br \/>\n       divsare[idivsare].title='Click me for Google search';<br \/>\n       divsare[idivsare].style.cursor='pointer';<br \/>\n       divsare[idivsare].onclick = function(evt){ window.open('\/\/www.google.com\/search?q=' + encodeURIComponent(evt.target.innerHTML), '_blank', 'top=50,left=50,width=600,height=600'); };<br \/>\n       cdatac+=cd + String.fromCodePoint(eval(eval(thiscontn.substring(ijk, eval(1 + ijk))) + 49), 65039, 8419);<br \/>\n       cd=' ';<br \/>\n       }<br \/>\n     }<br \/>\n     \/\/alert(thiscontn);<br \/>\n     divsare[idivsare].setAttribute('data-cnt', cdatac);<br \/>\n   }<br \/>\n  }<\/font><br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p>To, again, see this in action, see <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_count_image.html--GETME\" title=\"css_count_image.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_count_image.html--GETME\" title=\"css_count_image.html\">css_count_image.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_count_image.html\" title=\"Click picture\">live run<\/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-countdown-emoji-tutorial\/'>CSS Countdown Emoji Tutorial<\/a>.<\/p-->\n<hr>\n<p id='csscrt'>Previous relevant <a target=_blank title='CSS Countdown Reveal Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-countdown-reveal-tutorial\/'>CSS Countdown Reveal 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\/css_count_image.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Countdown Reveal Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csscount_image.gif\" title=\"CSS Countdown Reveal Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Countdown Reveal Tutorial<\/p><\/div>\n<p>To improve on yesterday&#8217;s <a title='CSS Countdown Primer Tutorial' href='#csscpt'>CSS Countdown Primer Tutorial<\/a> we thought it would be good to give the user a chance to see as much above the fold as possible, and then <a target=_blank title='Reveal postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>&#8220;reveal&#8221;<\/a> the larger images via <a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a>\/summary element combinations.  We started testing all this out with larger images where the details\/summary helps a lot, but as you will see with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/csscount_image.gif\" title='Tutorial picture'>animated GIF presentation<\/a> even if the user shapes to use a details\/summary (one : colon scenario) for a smaller (like thumbnail) image we <font color=blue>now map that back to the original<\/font> (two colon :: scenario) CSS content method where it displays better.<\/p>\n<p>To know how to &#8220;size&#8221; the details element, we need to know the height and width of the image it will &#8220;house&#8221;, and that can be achieved in &#8220;midair&#8221;, so to speak, via Javascript code like &#8230;<\/p>\n<p><code><br \/>\n function dimgh(selem) {<br \/>\n  var img = document.createElement('img');<br \/>\n  img.onload = function() {<br \/>\n    \/\/alert(('' + img.height).replace('px','') + 'px');<br \/>\n    var hashbits=img.src.split('#');<br \/>\n    if (hashbits.length > 1) {<br \/>\n    if (document.getElementById('ilist')) {<br \/>\n      if (eval(('' + img.height).replace('px','')) <= 100) {\n        <font color=blue>document.getElementById('ilist').value=document.getElementById('ilist').value.replace(':' + img.title, '::' + img.title);<\/font><br \/>\n      }<br \/>\n    }<br \/>\n    hgts[eval(hashbits[1])]=(eval(130 + eval(('' + img.height).replace('px',''))) + 'px');<br \/>\n    } else {<br \/>\n     if (document.getElementById('ilist')) {<br \/>\n       if (eval(('' + img.height).replace('px','')) <= 99) {\n        <font color=blue>document.getElementById('ilist').value=document.getElementById('ilist').value.replace(':' + img.title, '::' + img.title);<\/font><br \/>\n      }<br \/>\n    }<br \/>\n    hgts.push(eval(130 + eval(('' + img.height).replace('px',''))) + 'px');<br \/>\n    }<br \/>\n  };<br \/>\n  if (document.getElementById('ilist')) {<br \/>\n  img.title = selem;<br \/>\n  img.src = selem;<br \/>\n  } else {<br \/>\n  img.title = selem;<br \/>\n  img.src = selem + '#' + eval(-1 + hgts.length);<br \/>\n  }<br \/>\n  return selem;<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; where var<font size=1>iable<\/font> &#8220;selem&#8221; above contains the image&#8217;s &#8220;src&#8221; attribute value.<\/p>\n<p>That image becomes any details element used&#8217;s background image as per resultant HTML such as &#8230;<\/p>\n<p><code><br \/>\n&lt;details id=\"det1\" data-height=\"162px\" onclick=\"depends(this, this.getAttribute('data-height'));\" style=\"background:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),url(MarkItUp\/student.png);background-repeat:no-repeat;background-position:0px 60px;\"&gt;&lt;summary&gt;&lt;div class=\"nested\" style=\"--tooltip-string:url(MarkItUp\/student.png);\"&gt;Student&lt;\/div&gt;&lt;\/summary&gt;&lt;\/details&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; with that pertinent Javascript being &#8230;<\/p>\n<p><code><br \/>\n function depends(deto, bigh) {<br \/>\n   var newb='';<br \/>\n   if (!deto.open) {<br \/>\n     if (deto.outerHTML.indexOf(' data-smallh=') == -1) {<br \/>\n       var rectis=deto.getBoundingClientRect();<br \/>\n       deto.setAttribute('data-smallh', ('' + rectis.height).replace('px','') + 'px');<br \/>\n     }<br \/>\n     deto.style.height=bigh;<br \/>\n     deto.style.minHeight=bigh;<br \/>\n     newb='<font color=purple>linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.1)),<\/font>url(' + ('' + deto.style.background).split('url(')[1];<br \/>\n     deto.style.background=newb;<br \/>\n     deto.style.backgroundRepeat='no-repeat';<br \/>\n     deto.style.backgroundPosition='0px 60px';<br \/>\n   } else {<br \/>\n     deto.style.height=deto.getAttribute('data-smallh');<br \/>\n     deto.style.minHeight=deto.getAttribute('data-smallh');<br \/>\n     newb='<font color=purple>linear-gradient(rgba(255,255,255,0.9),rgba(255,255,255,0.9)),<\/font>url(' + ('' + deto.style.background).split('url(')[1];<br \/>\n     deto.style.background=newb;<br \/>\n     deto.style.backgroundRepeat='no-repeat';<br \/>\n     deto.style.backgroundPosition='0px 60px';<br \/>\n   }<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; where you can see being used <font color=purple>the methodology whereby a background image opacity is independent of any foreground opacity setting<\/font>.<\/p>\n<p>To see this in action see <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_count_image.html-GETME\" title=\"css_count_image.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_count_image.html-GETME\" title=\"css_count_image.html\">css_count_image.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_count_image.html\" title=\"Click picture\">live run<\/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-countdown-reveal-tutorial\/'>CSS Countdown Reveal Tutorial<\/a>.<\/p-->\n<hr>\n<p id='csscpt'>Previous relevant <a target=_blank title='CSS Countdown Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/css-countdown-primer-tutorial\/'>CSS Countdown Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_count_image.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Countdown Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_count_image.gif\" title=\"CSS Countdown Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Countdown Primer Tutorial<\/p><\/div>\n<p>It&#8217;s not normally a talent you associate with CSS, the ability to do any maths, but you can count (or increment\/decrement) with it, with <font color=blue>styling like<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n#myspan {<br \/>\n  counter-reset: the-final-countdown <font color=blue>var(--tooltip-string)<\/font>;<br \/>\n  line-height: 2;<br \/>\n}<br \/>\n<br \/>\ndiv::before {<br \/>\n  <font color=blue>counter-increment: the-final-countdown -1;<\/font><br \/>\n  content: \"~\" counter(the-final-countdown) \"~\";<br \/>\n  background: yellow;<br \/>\n  display: inline-block;<br \/>\n  width: 20rem;<br \/>\n  margin-right: 0.5rem;<br \/>\n  text-align: center;<br \/>\n}<br \/>\n<br \/>\ndiv::after {<br \/>\n  content: <font color=purple>var(--tooltip-string)<\/font>;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>  <\/p>\n<p> &#8230; and did you see above it can work with var<font size=1>iables<\/font> as another Javascript type talent?<\/p>\n<p>As a Javascript coder knows, once you have var<font size=1>iables<\/font> to play with, they can represent other useful things.<\/p>\n<p>Let&#8217;s establish a CSS var<font size=1>iable<\/font> via (HTML like) &#8230;<\/p>\n<p><code><br \/>\n&lt;span id=myspan style=\"<font color=blue>--tooltip-string:12;<\/font>\"&gt;&lt;\/span&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; then that &#8220;12&#8221; gets substituted so that &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n#myspan {<br \/>\n  counter-reset: the-final-countdown <font color=blue>12<\/font>;<br \/>\n  line-height: 2;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and more adventurously we can use Javascript <font color=purple>such as<\/font> &#8230;<\/p>\n<p><code><br \/>\n  function thisdecodeURIComponent(inname, inval) {<br \/>\n   var outval=decodeURIComponent(inval), dwiurl='';<br \/>\n   if (inval != '') {<br \/>\n     icnt=eval(inname.replace('dw',''));<br \/>\n     dwiurl=(location.search.split(inname.replace('dw', 'di') + '=')[1] ? decodeURIComponent(location.search.split(inname.replace('dw', 'di') + '=')[1].split('&')[0]) : '');<br \/>\n     if (dwiurl != '') {<br \/>\n       outval='&lt;div style=\"<font color=purple>--tooltip-string:url(' + dwiurl + ')<\/font>;\"&gt;' + inval + '&lt;\/div&gt;';<br \/>\n     } else {<br \/>\n       outval='&lt;div&gt;' + inval + '&lt;\/div&gt;';<br \/>\n     }<br \/>\n     spanstr=\"&lt;span id=myspan style='--tooltip-string:\" + icnt + \";'&gt;&lt;h1&gt;CSS counter via var&lt;\/h1&gt;&lt;h3&gt;RJM Programming - February, 2021&lt;\/h3&gt;&lt;h4&gt;Thanks to &lt;a target=_blank title='https:\/\/css-tricks.com\/valid-css-content\/' href='https:\/\/css-tricks.com\/valid-css-content\/'&gt;https:\/\/css-tricks.com\/valid-css-content\/&lt;\/a&gt;&lt;\/h4&gt;&lt;\/span&gt;\";<br \/>\n     icnt++;<br \/>\n     while (inval != '') {<br \/>\n        inval=(location.search.split('dw' + icnt + '=')[1] ? decodeURIComponent(location.search.split('dw' + icnt + '=')[1].split('&')[0]) : '');<br \/>\n        if (inval != '') {<br \/>\n          spanstr=\"&lt;span id=myspan style='--tooltip-string:\" + icnt + \";'&gt;&lt;h1&gt;CSS counter via var&lt;\/h1&gt;&lt;h3&gt;RJM Programming - February, 2021&lt;\/h3&gt;&lt;h4&gt;Thanks to &lt;a target=_blank title='https:\/\/css-tricks.com\/valid-css-content\/' href='https:\/\/css-tricks.com\/valid-css-content\/'&gt;https:\/\/css-tricks.com\/valid-css-content\/&lt;\/a&gt;&lt;\/h4&gt;&lt;\/span&gt;\";<br \/>\n          inname='dw' + icnt;<br \/>\n     dwiurl=(location.search.split(inname.replace('dw', 'di') + '=')[1] ? decodeURIComponent(location.search.split(inname.replace('dw', 'di') + '=')[1].split('&')[0]) : '');<br \/>\n     if (dwiurl != '') {<br \/>\n       outval+='&lt;div style=\"<font color=purple>--tooltip-string:url(' + dwiurl + ')<\/font>;\"&gt;' + inval + '&lt;\/div&gt;';<br \/>\n     } else {<br \/>\n       outval+='&lt;div&gt;' + inval + '&lt;\/div&gt;';<br \/>\n     }<br \/>\n        }<br \/>\n        icnt++;<br \/>\n     }<br \/>\n   }<br \/>\n   return outval;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; to get CSS to display an image via a CSS var<font size=1>iable<\/font> associated with a particular &#8220;CSS &#8220;counter&#8221; instance <font size=-1>(if you will)<\/font>.  Cute, huh?!<\/p>\n<p>Thanks to <a target=_blank title='https:\/\/css-tricks.com\/valid-css-content\/' href='https:\/\/css-tricks.com\/valid-css-content\/'>https:\/\/css-tricks.com\/valid-css-content\/<\/a>, see how this can work in practice with today&#8217;s &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_count_image.html_GETME\" title=\"css_count_image.html\">css_count_image.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_count_image.html\" title=\"Click picture\">live run<\/a> &#8230;<\/p>\n<p><iframe style='width:95%;height:600px;' title='Proof of concept' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_count_image.html'><\/iframe><\/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='#d51575' onclick='var dv=document.getElementById(\"d51575\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/counter\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51575' 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='#d51588' onclick='var dv=document.getElementById(\"d51588\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51588' 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='#d51591' onclick='var dv=document.getElementById(\"d51591\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51591' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A synopsis of the CSS highlights of the web application of yesterday&#8217;s CSS Countdown Reveal Tutorial are, so far &#8230; counter-increment counter-reset var (as in content: var(&#8211;tooltip-string);) &#8230; and today&#8217;s addition is &#8230; attr (as in content: attr(data-cnt);) &#8230; that &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-countdown-emoji-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[3556,112,3291,281,2084,2310,385,2258,576,590,3554,652,997,1063,2311,1319,1345,3553,1721,2257,1480],"class_list":["post-51591","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-attr","tag-attribute","tag-counter","tag-css","tag-data-attributes","tag-details","tag-emoji","tag-height","tag-html","tag-image","tag-image-url","tag-javascript","tag-programming","tag-reveal","tag-summary","tag-tutorial","tag-url","tag-var","tag-variable","tag-width","tag-xml"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51591"}],"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=51591"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51591\/revisions"}],"predecessor-version":[{"id":51621,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51591\/revisions\/51621"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}