{"id":36295,"date":"2018-05-26T03:01:10","date_gmt":"2018-05-25T17:01:10","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=36295"},"modified":"2019-11-09T18:20:26","modified_gmt":"2019-11-09T08:20:26","slug":"emoji-analogue-clock-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-analogue-clock-primer-tutorial\/","title":{"rendered":"Emoji Analogue Clock Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock_to_nearest_five.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Analogue Clock Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock_to_nearest_five.jpg\" title=\"Emoji Analogue Clock Timezone Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Analogue Clock Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve written a previous Analogue Clock web application when we presented <a title='Analogue Clock Timezone Tutorial' href='#actt'>Analogue Clock Timezone Tutorial<\/a>, but today we&#8217;re simplifying the issue in another version of an Analogue Clock, this time &#8230;<\/p>\n<ul>\n<li>our graphics are Emojis like &#128336; (is 1 o&#8217;clock) and &#128348; (is 1:30) and &#128347; (is (12 o&#8217;clock) and &#128359; (is 12:30)<\/li>\n<li>the graphics show the Analogue Clock time to nearest five minutes<\/li>\n<li>the user can enter the time they want to show or let the user&#8217;s current time be the basis for the display<\/li>\n<\/ul>\n<p> &#8230; the go, being, with the Emoji set of clockfaces there are clockfaces for all the &#8220;exact hours&#8221; and &#8220;exact half hours&#8221; meaning that with the additional tools of Javascript <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> timers and CSS (Transform) <a target=_blank title='CSS Transforms information from w3schools' href='https:\/\/www.w3schools.com\/css\/css3_2dtransforms.asp'>Rotations<\/a>, we can show, ignoring those subtle hour hand creeps of a real analogue clock, times for any five minute definition.<\/p>\n<p>Even though this project appears to be a regression, it is a different, and faster way, of doing a job here, and the other way also had trouble showing those subtle hour hand creeps also.  And who knows, somebody into the future may produce Emojis for the <a target=_blank title='?' href='https:\/\/www.google.com.au\/search?q=in-betweeners+youtube&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;dcr=0&#038;ei=uB6KWvrxEYTp8wfIgbLwAQ'>in-betweeners<\/a>.<\/p>\n<p>Feel free to compare and contrast the older <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.htm\" title=\"analogue_clock.htm\">analogue clock<\/a> with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock_to_nearest_five.html\">Emoji analogue clock<\/a> that has underlying it the HTML and Javascript as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock_to_nearest_five.html_GETME\" title=\"analogue_clock_to_nearest_five.html\">analogue_clock_to_nearest_five.html<\/a> link, ready to download.<\/p>\n<hr>\n<p id='actt'>Previous relevant <a target=_blank title='Analogue Clock Timezone Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/analogue-clock-timezone-tutorial\/'>Analogue Clock Timezone 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\/analogue_clock.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Analogue Clock Timezone Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.gif\" title=\"Analogue Clock Timezone Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Analogue Clock Timezone Tutorial<\/p><\/div>\n<p>It&#8217;s good to be involved with the 4th dimension of <a target=_blank title='Time information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Time'><i>time<\/i><\/a> and a web application regarding the &#8220;when&#8221; of life with the current project on the go, to create an Analogue Clock web application that we started with <a title='Analogue Clock Primer Tutorial' href='#acpt'>Analogue Clock Primer Tutorial<\/a> as shown below.<\/p>\n<p>The improvements we&#8217;ve made today involve &#8230;<\/p>\n<ul>\n<li>adding hour &#8220;markers&#8221; to the analogue clock, basically resorting to static CSS to do this, but with a more or less white colour for AM times and a more or less black colour for PM times via Javascript DOM as per <font color=red>(and please see the &#8220;Stop Press&#8221; below)<\/font> &#8230;<br \/>\n<code><br \/>\n  var ids=['sliver12_6','sliver9_3','sliver1_7','sliver2_8','sliver4_10','sliver5_11'];<br \/>\n  for (var jids=0; jids&lt;ids.length; jids++) {<br \/>\n    if (<font color=red>(<\/font>lastone &lt;= 11<font color=red> &amp;&amp; nutcDate.indexOf(' pm') == -1)<\/font> || nutcDate.indexOf(' am') != -1) {<br \/>\n      document.getElementById(ids[jids]).style.backgroundColor='#f0f0f0';<br \/>\n    } else {<br \/>\n      document.getElementById(ids[jids]).style.backgroundColor='#0f0f0f';<br \/>\n    }<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<li>add an analogue clock backing colour via HTML <a target=_blank title='HTML SVG circle element information from w3schools' href='http:\/\/www.w3schools.com\/svg\/svg_circle.asp'>SVG circle<\/a> element as per &#8230;<br \/>\n<code><br \/>\n&lt;svg style='position:absolute; z-index: 10; top:0px; left:0px;  opacity:0.6; ' id=\"svgelem\" height=300 xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;<br \/>\n&lt;circle id=\"lightgraycircle\" cx=\"175\" cy=\"175\" r=\"120\" fill=\"#979797\" \/&gt;<br \/>\n&lt;\/svg&gt;<br \/>\n<\/code>\n<\/li>\n<li>cater for Earth timezones and local time<\/li>\n<li>open up HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> showing similarly timezoned places, that we did when we presented the blog posting series ending, so far, with <a target=_blank title='HTML\/PHP Timezone Feed Function Keys Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmlphp-timezone-feed-function-keys-tutorial\/'>HTML\/PHP Timezone Feed Function Keys Tutorial<\/a>, some time ago<\/li>\n<\/ul>\n<p>Regarding those analogue clock markers we kept our word of still only involving that one outside media source to this web application.  So, given that, what approaches to drawing analogue clock hour markers could be done with just CSS, as you&#8217;ll remember we are avoiding the use of the HTML canvas element as well?  We suggest a couple of choices below &#8230;<\/p>\n<ul>\n<li>use SVG elements that we discuss quite a bit here at this <a target=_blank title='SVG blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg'>blog<\/a> &#8230; but simpler, and what we&#8217;ve plumped for, is &#8230;<\/li>\n<li>use HTML <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a> elements in an &#8220;overlay&#8221; way, still involving our &#8220;overlay&#8221; usual suspects of &#8230;\n<ol>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<li><a target=_blank title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a><\/li>\n<\/ol>\n<p> &#8230; but setting them to have a higher <i>z-index<\/i> value than the rest, in order to be seen<\/li>\n<\/ul>\n<p>Timezones are simple concepts in principle, but into the &#8220;nitty gritty&#8221; and local &#8220;rules&#8221; make it a thing you should, unless you involve a server side language like PHP (which, by the way, we&#8217;ve decided not to use directly, for our analogue clock), step back from and only involve yourself in what you can control.  What do we mean by this?  Well, timezones all involve half hour periods at the most, so why not design a user usable dropdown (HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> element) that the user specifies the number of hours (and half hours) they differ from Greenwich Mean Time that they want their analogue clock to represent?  <font size=1>This wasn&#8217;t originally meant to be rhetorical, but if you&#8217;re going to play it like that &#8230; let&#8217;s just say it was a rhetorical question &#8230; and leave it at that &#8230; shall we??!!<\/font><\/p>\n<p>With the <i>numerical<\/i> timezone differences collected off the dropdown, how do we apply this to a real time?  Try <font color=red>(see the &#8220;Stop Press&#8221; below)<\/font> &#8230;<\/p>\n<p><code><br \/>\n  var nutcDate, zone=document.getElementById('mysel').value;<br \/>\n  var ndt = new Date();<br \/>\n  if (zone == 'Local') {<br \/>\n    nutcDate = ndt.toLocaleDateString() + ' ' + ndt.toLocaleTimeString();<br \/>\n  } else if (zone == 'GMT') {<br \/>\n    nutcDate = ndt.toUTCString();<br \/>\n  } else {<br \/>\n    ndt.setHours(ndt.getHours() - eval(tzo) + eval(zone));<br \/>\n<font color=red><br \/>\nvar offset=0.0;<br \/>\nif (eval(zone - Math.round(zone)) != 0) {<br \/>\nif (ndt.getMinutes() &gt;= 30) {<br \/>\n ndt.setMinutes(ndt.getMinutes() - 30);<br \/>\n offset = 0.5;<br \/>\n} else {<br \/>\n ndt.setMinutes(ndt.getMinutes() + 30);<br \/>\n offset = -0.5;<br \/>\n}<br \/>\nndt.setHours(ndt.getHours() + eval(offset + eval(eval(zone - Math.round(zone)))));<br \/>\n}<br \/>\n<\/font><br \/>\n    nutcDate = ndt.toLocaleDateString() + ' ' + ndt.toLocaleTimeString().replace(tzname.replace('am','').replace('pm','').replace('AM','').replace('PM',''),'');<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; the ideas for which were gleaned by additional views of <a target=_blank title='Javascript Date object information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_obj_date.asp'>Javascript Date object information<\/a> and by the reading of this <a target=_blank title='Very useful link' href='http:\/\/stackoverflow.com\/questions\/1050720\/adding-hours-to-javascript-date-object'>very useful link<\/a> &#8230; thanks.<\/p>\n<p>So here is the revised HTML and CSS and Javascript programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.html-GETME\" title=\"analogue_clock.html\">analogue_clock.html<\/a>, changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.html-GETME\" title=\"analogue_clock.html\">this way<\/a>, that goes with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>About Tue, 23 Aug 2016 01:00:00 GMT &#8230; <a target=_blank title='snaps' href='https:\/\/www.youtube.com\/watch?v=KcRTYTaVCuc'>snaps<\/a> for how hard working we are?!<br \/>\n<font color=red><br \/>\nApologies to early morning Antipodean risers and other fellow world readers (who may have picked up the HTML code earlier on) &#8230; welcome, all &#8230; but our unit testing was a bit slack for a dropdown &#8220;half hour&#8221; timezone test, but fixed now, we hope, as in red above.<br \/>\n<\/font><\/p>\n<hr>\n<p id='acpt'>Previous relevant <a target=_blank title='Analogue Clock Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/analogue-clock-primer-tutorial'>Analogue Clock 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\/analogue_clock.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Analogue Clock Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.jpg\" title=\"Analogue Clock Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Analogue Clock Primer Tutorial<\/p><\/div>\n<p>Today we&#8217;re writing a web application with HTML and CSS3 and Javascript DOM functionality to write a fairly minimalist Greenwich Mean Time (GMT) analogue clock.  It&#8217;s early days with this project, and today&#8217;s work is just a &#8220;first draft&#8221;.<\/p>\n<p>Although we could, we decide against using the HTML5 <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element for this job, showing you a fairly pared down HTML solution relying on <a target=_blank title='Javascript DOM style.transform usage of CSS3 transform property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_style_transform.asp'>Javascript DOM<\/a> dynamic application of the principles of CSS3 <a target=_blank title='CSS3 transform property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_transform.asp'>transform<\/a> property.<\/p>\n<p>This is one of those ironic situations where a computer program is more involved, with presenting an analogue view of something, rather than a digital view, which does not involve much more than the rearrangement of the characters of what the Javascript Date&#8217;s objects <a target=_blank title='Javascript Date object method toUTCString information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_toutcstring.asp'>toUTCString<\/a> method returns to you.  In fact, in today&#8217;s code we go &#8220;through&#8221; this toUTCString method&#8217;s return value, and work with that to derive the angle required for the &#8220;ourbrg&#8221; variable of the Javascript (DOM) code snippet below &#8230;<\/p>\n<p><code><br \/>\n    try { document.getElementById('compass_needle' + hands[i]).style.webkitTransform = (\" rotate(\" + (ourbrg) + \"deg)\"); } catch(e10) { } \/\/translate(\" + tx + \",\" + ty + \"); \"); } catch(e10) { } \/\/<br \/>\n    try { document.getElementById('compass_needle' + hands[i]).style.MozTransform = (\" rotate(\" + (ourbrg) + \"deg)\"); } catch(e10) { } \/\/translate(\" + tx + \",\" + ty + \"); \"); } catch(e1000) { }<br \/>\n    try { document.getElementById('compass_needle' + hands[i]).style.msTransform = (\" rotate(\" + (ourbrg) + \"deg)\"); } catch(e10) { } \/\/translate(\" + tx + \",\" + ty + \"); \"); } catch(e100) { }<br \/>\n    try { document.getElementById('compass_needle' + hands[i]).style.OTransform = (\" rotate(\" + (ourbrg) + \"deg)\"); } catch(e10) { } \/\/translate(\" + tx + \",\" + ty + \"); \"); } catch(e10000) { }<br \/>\n    try { document.getElementById('compass_needle' + hands[i]).style.transform = (\" rotate(\" + (ourbrg) + \"deg)\"); } catch(e10) { } \/\/translate(\" + tx + \",\" + ty + \"); \"); } catch(e1) { }<br \/>\n<\/code><\/p>\n<p>The rest of what makes the analogue clock tick &#8230; <font size=1>chortle, chortle<\/font> &#8230; channels what we so often channel around here at this blog relating to <a target=_blank title='Overlay blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> principles, and the usual list of &#8220;suspects&#8221;, shall we say, being &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<li><a target=_blank title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a><\/li>\n<\/ul>\n<p> &#8230; with that last opacity one even being brought into play to differentiate the hour from the minute from the second hand.  Why do that?  Well, we&#8217;ve determined for this job to only use the one media resource, an image for a compass needle &#8230; <br \/><img title='Thanks to this compass needle image resource ... http:\/\/marylandlearninglinks.org\/wp-content\/themes\/learning-links\/img\/compass-needle.png' src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/compass-needle.png'><\/img><!--img title='Compass Needle' src='http:\/\/marylandlearninglinks.org\/wp-content\/themes\/learning-links\/img\/compass-needle.png'><\/img--><br \/> &#8230; we first started using with <a target=_blank title='HTML5 Device Orientation Events Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-device-orientation-events-game-tutorial\/'>HTML5 Device Orientation Events Game Tutorial<\/a>.<\/p>\n<p>We use it for everything and use the very useful CSS <a target=_blank title=\"CSS overflow:hidden idea information from w3schools ... thanks\" href=\"http:\/\/www.w3schools.com\/cssref\/pr_pos_overflow.asp\">overflow: hidden<\/a> style property that we find very helpful here and at a few other places too &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Trip Mobile Device Usage Clock Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/trip-mobile-device-usage-clock-tutorial'>Trip Mobile Device Usage Clock Tutorial<\/a><\/li>\n<li><a target=_blank title='HTML\/Javascript\/CSS Reveal Top Left to Bottom Right Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptcss-reveal-top-left-to-bottom-right-tutorial'>HTML\/Javascript\/CSS Reveal Top Left to Bottom Right Tutorial<\/a><\/li>\n<li><a target=_blank title='HTML\/Javascript\/CSS Reveal Left to Right Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptcss-reveal-left-to-right-primer-tutorial'>HTML\/Javascript\/CSS Reveal Left to Right Primer Tutorial<\/a><\/li>\n<li><a target=_blank title='HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptcss-reveal-top-to-bottom-primer-tutorial'>HTML\/Javascript\/CSS Reveal Top to Bottom Primer Tutorial<\/a><\/li>\n<\/ul>\n<p>So here is the HTML and CSS and Javascript programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.html_GETME\" title=\"analogue_clock.html\">analogue_clock.html<\/a> that goes with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.html\" title=\"Click picture\">live run<\/a> link.<\/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='#d24223' onclick='var dv=document.getElementById(\"d24223\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/time\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24223' 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='#d24246' onclick='var dv=document.getElementById(\"d24246\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/timezone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d24246' 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='#d36295' onclick='var dv=document.getElementById(\"d36295\"); 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='d36295' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve written a previous Analogue Clock web application when we presented Analogue Clock Timezone Tutorial, but today we&#8217;re simplifying the issue in another version of an Analogue Clock, this time &#8230; our graphics are Emojis like &#128336; (is 1 o&#8217;clock) &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-analogue-clock-primer-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,37],"tags":[2481,1933,281,385,576,652,997,1072,1126,1279,1282,1319],"class_list":["post-36295","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-analogue","tag-clock","tag-css","tag-emoji","tag-html","tag-javascript","tag-programming","tag-rotation","tag-settimeout","tag-time","tag-timer","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36295"}],"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=36295"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36295\/revisions"}],"predecessor-version":[{"id":47124,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36295\/revisions\/47124"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=36295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=36295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=36295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}