{"id":26298,"date":"2016-11-11T03:01:57","date_gmt":"2016-11-10T17:01:57","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=26298"},"modified":"2016-11-10T18:57:59","modified_gmt":"2016-11-10T08:57:59","slug":"emoji-random-equation-canvas-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-random-equation-canvas-tutorial\/","title":{"rendered":"Emoji Random Equation Canvas Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_equation_game.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Emoji Random Equation Game Canvas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/emoji_equation_game_image.jpg\" title=\"Emoji Random Equation Game Canvas Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Emoji Random Equation Canvas Tutorial<\/p><\/div>\n<p>We haven&#8217;t explored HTML5 to its full potential, and would like to blame the HTML5 <i>canvas<\/i> element for that &#8230; because the dog is out the back &#8230; and because it is so useful we can&#8217;t move on enough to cover all that HTML5 offers &#8230; yet.<\/p>\n<p>In the context of the &#8220;Random Emoji Equation Game&#8221; we started yesterday with <a title='Emoji Random Equation Primer Tutorial' href='#erept'>Emoji Random Equation Primer Tutorial<\/a> as shown below, we thought it would be good in the Body section of the email to have either &#8230;<\/p>\n<ul>\n<li>a link to restart the web application, as we catered for yesterday &#8230; and for today &#8230;<\/li>\n<li>a means by which the Emoji Equation can be represented as an image (to save for yourself &#8230; mascot?! logo?!) that could be copied to the clipboard at the user&#8217;s discretion, and then be pasted into the Body section of the email<\/li>\n<\/ul>\n<p>This all remains &#8220;email&#8221; that involves your &#8220;email client&#8221; software, not server-side PHP or anything, so we are still in the realms of just involving HTML(5) and Javascript for these purposes, and to have more of the readers be capable of doing this for themselves.  And so, ultimately, we still use an HTML <i>a<\/i> <i>mailto:<\/i> href property scenario, and yes, we tried to make the image data small enough to be capable of being a big long URL &#8230; a long running dream for us &#8230; but alas, yet again, even with the small size of image involved the base64 data uri involved overruns probably every web server&#8217;s limit (on Earth, and we daresay Mars) for URL lengths &#8230; oooohhhhh.<\/p>\n<p>Now you may see this as miniscule progress, but we don&#8217;t, and the more you do it &#8230; and we&#8217;ve done it on other occasions &#8230; the more we learn.  For example, today we learn a Javascript <a target=_blank title='Javascript window.open information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp'><i>window.open<\/i><\/a> first URL parameter can be a data URI.  Probably in our heart of hearts this had occurred to us in the past, but today we put it into practice, to effective use.<\/p>\n<p>Now you may read things on the &#8220;net&#8221; about automated Javascript clipboard arrangements, and maybe you can read <a target=_blank href='http:\/\/stackoverflow.com\/questions\/400212\/how-do-i-copy-to-the-clipboard-in-javascript' title='Useful link, thanks'>here<\/a> as a starting point (for your own research), but the fact is, as you can imagine, it amounts to a security risk, and we rely on user interaction to make most of the new functionality be possible for today&#8217;s new work.<\/p>\n<p>What is behind the scenes making all this new functionality feasible?<\/p>\n<ul>\n<li>HTML5 <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element&#8217;s <\/li>\n<li><a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a>() method<\/li>\n<\/ul>\n<p> &#8230; which can turn the content of a canvas element into a <a target=_blank title='Data URL (or Data URI) information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>data URI<\/a>.  Very practical and very useful, we think, regarding web application work.<\/p>\n<p>The HTML code for the new version of the game you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_equation_game.html-GETME\" title=\"emoji_equation_game.htm\">emoji_equation_game.htm<\/a> and you can try it for yourself via this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_equation_game.htm\" title=\"Click picture\">live run<\/a> link.  It changed for this new HTML5 canvas element logic in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/emoji_equation_game.html-GETME\" title=\"emoji_equation_game.htm\">this way<\/a>.<\/p>\n<hr>\n<p id='erept'>Previous relevant <a target=_blank title='Emoji Random Equation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-random-equation-primer-tutorial\/'>Emoji Random Equation 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\/emoji_equation_game.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Emoji Random Equation Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/emoji_equation_game.jpg\" title=\"Emoji Random Equation Game Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Emoji Random Equation Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve turned the &#8220;Random Emoji Slideshow&#8221; project, we last talked about at <a title='Emoji Random Slideshow Category Tutorial' href='#ersctt'>Emoji Random Slideshow Category Tutorial<\/a>, as shown below, into the HTML code needed for a game we&#8217;d like to call &#8220;Random Emoji Equation Game&#8221; today.<\/p>\n<p>The &#8220;looking up&#8221; of Emojis being what it is, we decided with our &#8220;Random Emoji Equation Game&#8221; that the randomosity &#8230; is that a word? &#8230; of that previous approach was the &#8220;way to go&#8221; for today&#8217;s game, as well, and so we used a lot of that previous code, and added new &#8220;bits&#8221; to it.<\/p>\n<p>So what are we doing here with this game?  We&#8217;re giving the user of the game the chance to email off to someone an Emoji Equation they invent themselves.  Hope the one you invent is better than the lame one of the <a target=_blank title='Tutorial picture' href='http:\/\/www.rjmprogramming.com.au\/emoji_equation_game.jpg'>tutorial picture<\/a>, also shown below &#8230;<\/p>\n<p><code>&#129296; + &#009894; = &#128719;<\/code><\/p>\n<p>So do you get the gist?  The HTML code for the game you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_equation_game.html_GETME\" title=\"emoji_equation_game.html\">emoji_equation_game.html<\/a> and you can try it for yourself via this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/emoji_equation_game.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='ersctt'>Previous relevant <a target=_blank title='Emoji Random Slideshow Category Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-random-slideshow-category-tutorial\/'>Emoji Random Slideshow Category 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\/emoji_slideshow.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Emoji Random Slideshow Category Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow_category.jpg\" title=\"Emoji Random Slideshow Category Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Emoji Random Slideshow Category Tutorial<\/p><\/div>\n<p>With the &#8220;Random Emoji Slideshow&#8221; project, we last talked about at <a title='Emoji Random Slideshow Cookie Tutorial' href='#ersct'>Emoji Random Slideshow Cookie Tutorial<\/a>, as shown below, we&#8217;ve decided to &#8220;categorize&#8221; the web application, as a means by which you may target the emoji of interest, perhaps.<\/p>\n<p>So, following the lead of this <a target=_blank title='Useful Wikipedia emoji reference ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Emoji'>useful Wikipedia webpage<\/a>, thanks, we worked out some Codepoint ranges for current and future emoji categories as below &#8230;<\/p>\n<p><select onchange=\" window.open('http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.htm?category=' + this.value.trim(),'_blank'); \" size=8><option value=\" \">Optionally, please choose an emoji category below as a Slideshow &#8230;<\/option><option value=>Any<\/option><option value=emoticon>Emoticon &#128512; to &#128591;<\/option><option value=transport_map>Transport and Map &#128640; to &#128767;<\/option><option value=miscellaneous>Miscellaneous &#9728; to &#9983;<\/option><option value=dingbats>Dingbats &#9984; to &#10175;<\/option><option value=pictographs>Pictographs &#127744; to &#128511;<\/option><option value=supplementary>Supplementary &#129280; to &#129535;<\/option><\/select><\/p>\n<p>In doing this, we opened up the &#8220;Any&#8221; categorization to now include what is in the &#8220;Miscellaneous&#8221; and &#8220;Supplementary&#8221; and &#8220;Dingbats&#8221; categories above, to improve the &#8220;range of randomness&#8221; &#8230; sounds like a good name for a novel or film &#8230; for our web application.<\/p>\n<p>Here&#8217;s a video (that we created using the &#8220;New Screen Recording&#8221; functionality of <a target=_blank title='QuickTime information from Apple' href='https:\/\/support.apple.com\/downloads\/quicktime'>QuickTime Player<\/a> using Mac OS X on a MacBook Pro laptop) we took of a couple of sessions of &#8220;Random Emoji Slideshow&#8221; for an &#8220;Emoticon&#8221; category for &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.htm?category=emoticon\" title='Click picture'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.htm?category=emoticon<\/a> on the right &#8230; and &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emojislideshow.html?category=emoticon\" title='Click picture'>http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emojislideshow.html?category=emoticon<\/a> on the left, adding in the &#8220;Web Application Reporting Tool&#8221; we&#8217;ve been working on<\/li>\n<\/ul>\n<p> &#8230; and using this new  functionality above and yesterday&#8217;s <a target=_blank title='Web Application HTML Reporter Tool Genericization Tutorial ' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/web-application-html-reporter-tool-genericization-tutorial\/'>Web Application HTML Reporter Tool Genericization Tutorial<\/a> new functionality, for you to peruse at your leisure &#8230;<\/p>\n<p><video width=\"100%\" controls=\"true\"><br \/><source src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_category.m4v\"\/><br \/><\/video><\/p>\n<p>So we hope you find the emoji of your dreams, and that we can say &#8220;<strike>Happy<\/strike><strike>Delirious<\/strike>Ecstatic Emoji making&#8221; with our new HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.html---GETME\" title='emoji_slideshow.html'>emoji_slideshow.html<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.html---GETME\" title='emoji_slideshow.html'>this way<\/a>, and its slideshow <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.htm\" title='Click picture'>live run<\/a>.  Again we hope you try it out &#8230; and, when some of the <strike>delirium<\/strike>ecstacy subsides, share your experience!<\/p>\n<hr>\n<p id='ersct'>Previous relevant <a target=_blank title='Emoji Random Slideshow Cookie Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-random-slideshow-cookie-tutorial\/'>Emoji Random Slideshow Cookie 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\/emoji_slideshow.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Emoji Random Slideshow Cookie Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow_cookie.jpg\" title=\"Emoji Random Slideshow Cookie Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Emoji Random Slideshow Cookie Tutorial<\/p><\/div>\n<p><a target=_blank title='Cookie information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp'><i>HTTP Cookies<\/i><\/a> can be a web browser &#8220;intersession&#8221; or &#8220;intrasession&#8221; tool &#8230; <font size=1>in that &#8220;internet&#8221; versus &#8220;intranet&#8221; feeling way<\/font> &#8230; for web applications such as the one we are currently working on, the &#8220;Random Emoji Slideshow&#8221;, which we last talked about, yesterday, with <a title='Emoji Random Slideshow Sharing Tutorial' href='#ersst'>Emoji Random Slideshow Sharing Tutorial<\/a> as shown below.<\/p>\n<p>In that tutorial yesterday we counted under the <i>Accountability<\/i> &#8220;banner&#8221; the idea of &#8220;remembering the random emojis on any given session&#8221; and suggested that &#8230;<\/p>\n<blockquote><p>\nJavascript DOM and\/or HTTP Cookies can usually handle such jobs\n<\/p><\/blockquote>\n<p> &#8230; but, today, we&#8217;re here to tell you that bundling &#8220;HTTP Cookies&#8221; in with &#8220;Javascript DOM&#8221; above is selling &#8220;HTTP Cookies&#8221; short &#8230; <font size=1>mind you, it is confusing to think, that you work HTTP Cookies via Javascript DOM &#8230; but we digress<\/font> &#8230; and the reason is that this &#8220;intrasession&#8221; talk is true for both of those, but the additional use of &#8220;HTTP Cookies&#8221;, as you will see today, we hope, adds that &#8220;intersession&#8221; extra functionality that impresses (or maybe annoys) internet users so much, who shop online, and get hounded back to products they might like on revisiting the online, usually e-commerce, website.  This joy, or annoyance, can be put down to &#8220;HTTP Cookies&#8221;, those web browser information storage repositories.<\/p>\n<p>The bottom line, for us, is that once you &#8230;<\/p>\n<ul>\n<li>deliberately &#8220;snapshot&#8221; a &#8220;Random Emoji Slideshow&#8221; session via a new emoji &#8220;button&#8221; &#128190;&#127850; &#8230; and\/or &#8230;<\/li>\n<li>finish a &#8220;Random Emoji Slideshow&#8221; session<\/li>\n<\/ul>\n<p> &#8230; you have set up the means by which you can &#8220;recall&#8221; a previous session&#8217;s snapshot (in time &#8230; ie. in an &#8220;intersession&#8221; way) or, with that first one of above, even, a reset of the current session to the &#8220;saved&#8221; snapshot session (ie. in an &#8220;intrasession&#8221; way), by using HTTP Cookie functionality.  This is assuming you allow &#8220;HTTP Cookie&#8221; usage on your web browser, of course.  All this being the case our &#8220;Random Emoji Slideshow&#8221; web application reflects this capability by showing you a Javascript DOM dynamically added (at the document.body <i>onload<\/i> event) emoji &#8220;button&#8221; &#128258;&#127850;<\/p>\n<p>Here&#8217;s a video (that we created using the &#8220;New Screen Recording&#8221; functionality of <a target=_blank title='QuickTime information from Apple' href='https:\/\/support.apple.com\/downloads\/quicktime'>QuickTime Player<\/a> using Mac OS X on a MacBook Pro laptop) we took of a couple of sessions of &#8220;Random Emoji Slideshow&#8221; and using this new functionality, for you to peruse at your leisure &#8230;<\/p>\n<p><video width=\"100%\" controls=\"true\"><source src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.m4v\"\/><\/video><\/p>\n<p>So, what&#8217;s the go for trapping the second scenario above, given a user who never clicks the emoji &#8220;button&#8221; &#128190;&#127850;?  The event of use here, for us, is the <a target=_blank title='Javascript event onunload information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/event_onunload.asp'><i>onunload<\/i><\/a> event.<\/p>\n<p>As you can surmise here, &#8220;HTTP Cookies&#8221; can do away with databases (or web server files) if &#8230;<\/p>\n<ol>\n<li>there is not much data to consider &#8230; the limit is like the limit of length to an address bar URL &#8230;<\/li>\n<li>the data is simple, generally &#8230; HTML, for instance, is not ideal &#8230;<\/li>\n<li>you can put up with nullifications outside your control that happen when relevant web browser HTTP Cookies are cleared by the user<\/li>\n<li>you can put up with nullifications inside the control of the writer of the Javascript DOM code, regarding the expiry date that is placed on the HTTP Cookies coded for<\/li>\n<\/ol>\n<p>We get around point 2 above, for instance, by just saving into the HTTP Cookie a Codepoint integer value list, <b>via<\/b> &#8230;<\/p>\n<p><code><br \/>\n<b>var firstemojilist=true;<br \/>\nvar emojisaved=false;<br \/>\nvar startemojilist=null;<br \/>\nvar ouval=\"\";<br \/>\nvar oudelim=\"\";<br \/>\n<\/b><br \/>\nfunction dothis() {<br \/>\n  var postfw, fw=Math.floor((Math.random()*firstbytes.length)+0);<br \/>\n  try {<br \/>\n    postfw = eval(Math.floor((Math.random()*rsize[fw])+0) + (firstbytes[fw] + srangebytes[fw]).codePointAt(0));<br \/>\n  } catch(e) {<br \/>\n    postfw = eval(Math.floor((Math.random()*rsize[fw])+0) + fixedCharCodeAt((firstbytes[fw] + srangebytes[fw]), 0));<br \/>\n  }<br \/>\n  if (bcol != \"YELLOW\") {<br \/>\n  document.getElementById('myh4').innerHTML = '';<br \/>\n  document.getElementById('re').innerHTML = '&amp;nbsp;';<br \/>\n  } else {<br \/>\n  document.getElementById('myh4').innerHTML = 'Codepoint: &lt;a target=_blank title=\"Google search\" href=\"https:\/\/www.google.com.au\/?gfe_rd=cr&ei=X6rxV8GfFqzr8Aeo-5_4AQ&gws_rd=ssl#q=%26%23' + postfw + '\"&gt;' + postfw + '&lt;\/a&gt;';<br \/>\n  document.getElementById('re').innerHTML = '&lt;a style=text-decoration:none; target=_blank title=\"Google search\" href=\"https:\/\/www.google.com.au\/?gfe_rd=cr&ei=X6rxV8GfFqzr8Aeo-5_4AQ&gws_rd=ssl#q=%26%23' + postfw + '\"&gt;' + String.fromCodePoint(postfw) + '&lt;\/a&gt;';<br \/>\n  cnt++;<br \/>\n  if (eval(cnt) > 1200) {<br \/>\n    cnt = 1;<br \/>\n    document.getElementById('sessiontr').innerHTML = \"\";<br \/>\n    <b>ouval=\"\";<br \/>\n    oudelim=\"\";<\/b><br \/>\n  }<br \/>\n  var carr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];<br \/>\n  var ired = Math.floor(Math.random() * 127);<br \/>\n  var igreen = Math.floor(Math.random() * 127);<br \/>\n  var iblue = Math.floor(Math.random() * 127);<br \/>\n  var colhuh = '#f' +  carr[Math.floor(eval(ired) % 16)] + 'f' +  carr[Math.floor(eval(igreen) % 16)] + 'f' +  carr[Math.floor(eval(iblue) % 16)]; \/\/ + carr[Math.floor(derived_sentences[sentencepick].length \/ 16)] +  carr[Math.floor(derived_sentences[sentencepick].length % 16)] + carr[Math.floor(derived_sentences[sentencepick].length \/ 16)] +  carr[Math.floor(derived_sentences[sentencepick].length % 16)]<br \/>\n  document.getElementById('sessiontr').innerHTML += '&lt;td id=td' + cnt + ' style=\"font-size:18px;background-color:' + colhuh + ';\"&gt;' + document.getElementById('myh4').outerHTML + '&lt;br&gt;' + document.getElementById('re').outerHTML + '&lt;\/td&gt;';<br \/>\n  <b>ouval+=oudelim + postfw;<br \/>\n  oudelim=\",\";<\/b><br \/>\n  }<br \/>\n}<br \/>\n<b><br \/>\nfunction saveemoji() {<br \/>\n  var expiredate = new Date();<br \/>\n  expiredate.setYear(expiredate.getFullYear()+1);<br \/>\n  if (!emojisaved) {<br \/>\n    if (document.getElementById('sessiondiv').style.visibility == 'visible') ouval=(ouval + ' ').replace(',', ' ,');<br \/>\n    document.cookie = \"emojilist=\" + ouval + \";expires=\" + expiredate.toGMTString() + ';path=\/';<br \/>\n    startemojilist = cookievalue(\"emojilist\");<br \/>\n  }<br \/>\n  emojisaved=true;<br \/>\n}<br \/>\n<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; rather than try to store the whole <i>document.body.innerHTML<\/i> &#8230; <font size=4>what kind of fool would do that?! <\/font><font size=3>I mean &#8230; <\/font><font size=2>really &#8230;<\/font><font size=1>oops<\/font> &#8230; and then expand on that list to recreate that previous session&#8217;s look via the HTTP Cookie stored &#8220;hints&#8221;.<\/p>\n<p>We reached the point where we can say &#8220;<strike>Happy<\/strike>Delirious Emoji making&#8221; with our new HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.html--GETME\" title='emoji_slideshow.html'>emoji_slideshow.html<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.html--GETME\" title='emoji_slideshow.html'>this way<\/a>, and its slideshow <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.htm\" title='Click picture'>live run<\/a>.  Again we hope you try it out &#8230; and, when some of the delirium subsides, share your experience!<\/p>\n<hr>\n<p id='ersst'>Previous relevant <a target=_blank title='Emoji Random Slideshow Sharing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-random-slideshow-sharing-tutorial\/'>Emoji Random Slideshow Sharing 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\/emoji_slideshow.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Emoji Random Slideshow Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow_email.jpg\" title=\"Emoji Random Slideshow Sharing Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Emoji Random Slideshow Sharing Tutorial<\/p><\/div>\n<p><i>Accountability<\/i> and <i>sharing<\/i> are feature words for our functionality improvements on yesterday&#8217;s Random Emoji Slideshow we presented with <a title='Emoji Random Slideshow Primer Tutorial' href='#erspt'>Emoji Random Slideshow Primer Tutorial<\/a> yesterday.<\/p>\n<ol>\n<li><i>Accountability<\/i> is achieved by remembering the random emojis on any given session should the user be interested, and the means by which this is done in the web application, is by Javascript DOM &#8230; no databases nor server-side code.  If your promise to do with accountability concerns only the session the user is on, then Javascript DOM and\/or HTTP Cookies can usually handle such jobs.  Our Javascript DOM functionality works via &#8230;\n<ul>\n<li>an HTML div element is appended to the HTML body element <a target=_blank title='HTML innerHTML property information' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'><i>innerHTML<\/i><\/a> property is the &#8220;parent&#8221; to &#8220;child&#8221; elements below, that has style properties &#8230;\n<ul>\n<li><i>overflow-x:scroll<\/i> to allow for horizontal scrolling, and you&#8217;ll know if you&#8217;re a regular reader the <i>overflow<\/i> anything CSS property is a favourite of ours regarding that CSS topic &#8220;theme&#8221; of <a target=_blank title='Reveal blog postings at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>&#8220;reveal&#8221;<\/a> we like at this blog<\/li>\n<li><i>-webkit-overflow-scrolling:touch<\/i> to allow for momentum scrolling on mobile devices (as we did with <a target=_blank title='Image in Nine Game Hide and Seek Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/image-in-nine-game-hide-and-seek-tutorial\/'>Image in Nine Game Hide and Seek Tutorial<\/a>)<\/li>\n<li><i>visibility:hidden<\/i> to allow for user controllable visibility of this functionality that occurs by clicking the &#10133;&#10133; emoji &#8220;buttons&#8221;, which uses Javascript DOM to make the HTML div above &#8220;visible&#8221; (and you may want to read <a target=_blank title='Karaoke viaYouTube API in Iframe Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-primer-tutorial\/'>Karaoke via YouTube API in Iframe Primer Tutorial<\/a> regarding the differences between this method versus the setting of the <i>display<\/i> property, alternative approach)<\/li>\n<\/ul>\n<\/li>\n<li>an HTML table element (and, like for <a target=_blank title='Karaoke via YouTube API in Iframe Email Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-email-tutorial\/'>Karaoke via YouTube API in Iframe Email Tutorial<\/a>, channelled some of the thinking regarding HTML table element <a target=_blank title='HTML and CSS table element border attribute information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_table_border.asp'><i>border<\/i><\/a> attributes to be quite big numerical values &#8230; though we, again, tone that down a bit for today&#8217;s purposes &#8230; which we talked about with <a target=_blank title='Holes Web Application Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/holes-web-application-primer-tutorial\/'>Holes Web Application Primer Tutorial<\/a>) with one HTML tbody element with one HTML tr (row) element &#8230; encasing &#8230;<\/li>\n<li>many HTML td cell elements created on the fly, the content coming from a snapshot of the current emoji (using <a target=_blank title='HTML outerHTML property information' href='http:\/\/help.dottoro.com\/ljloliex.php'><i>outerHTML<\/i><\/a> Javascript DOM properties), and the Javascript DOM achieving it by appending that content to the HTML tr (row) element above <i>innerHTML<\/i> property &#8230; as per &#8230;<br \/>\n<code><br \/>\n  document.getElementById('sessiontr').innerHTML += '&lt;td id=td' + cnt + ' style=\"font-size:18px;background-color:' + colhuh + ';\"&gt;' + document.getElementById('myh4').outerHTML + '&lt;br&gt;' + document.getElementById('re').outerHTML + '&lt;\/td&gt;';<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<\/li>\n<li><i>Sharing<\/i> functionality is approached by allowing for emailing snapshots of an Emoji Slideshow session &#8230; via &#8230;\n<ul>\n<li>taking the existing (email via PHP <a target=_blank title='PHP mail method information' href='http:\/\/php.net\/manual\/en\/function.mail.php'>mail<\/a>) functionality we had established after &#8230;<br \/>\n<blockquote cite=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-email-tutorial\/\"><p>\nchild PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.php--GETME\" title='legend_via_map.php'>legend_via_map.php<\/a> changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.php--GETME\" title='legend_via_map.php'>this way<\/a> for email functionality\n<\/p><\/blockquote>\n<p>&#8230; from <a target=_blank title='Karaoke via YouTube API in Iframe Email Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-email-tutorial\/'>Karaoke via YouTube API in Iframe Email Tutorial<\/a> we tweak this PHP coding to be able to manage HTML email attachments via the new child PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.php----GETME\" title='legend_via_map.php'>legend_via_map.php<\/a> changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/legend_via_map.php----GETME\" title='legend_via_map.php'>this new way<\/a> &#8230; where &#8230;<\/li>\n<li>the email client &#8220;branch&#8221; of this functionality is unavailable to us with today&#8217;s work, because a <a target=_blank title='mailto information' href='http:\/\/www.w3schools.com\/tags\/tryit.asp?filename=tryhtml_link_mailto'><i>mailto<\/i><\/a>: HTML <a target=_blank title='a tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_a.asp'><i>a<\/i><\/a> link element cannot feed into a &#8220;text\/html&#8221; email, but rather, only, the default &#8220;text\/plain&#8221; (no attachment) <i>mailto<\/i> usage &#8230; invoked by &#8230;<\/li>\n<li>the clicking of an &#128231; emoji &#8220;button&#8221; to ask for an emailee email address, and then off to the PHP code above via an HTML <i>form<\/i> action via a target pointing at an HTML iframe element, all invisible to the user, very similar to how we did email functionality in the <a target=_blank title='Karaoke via YouTube API in Iframe Email Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-email-tutorial\/'>Karaoke via YouTube API in Iframe Email Tutorial<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>So, again, we say &#8220;Happy Emoji making&#8221; with our new HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.html-GETME\" title='emoji_slideshow.html'>emoji_slideshow.html<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.html-GETME\" title='emoji_slideshow.html'>this way<\/a>, and its slideshow <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.htm\" title='Click picture'>live run<\/a>.  We hope you try it out &#8230; and share your experience!<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Yes, you were right, you who predicted the weakness with the prototype code design above.  What if somebody leaves it running forever?  Yes, the web browser suffers &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=YxBSUA5pUgg'>event-u-ally<\/a>, so we&#8217;ve <b>changed<\/b> (the main Javascript function of use) as below &#8230;<\/p>\n<p><code><br \/>\n  function dothis() {<br \/>\n  var postfw, fw=Math.floor((Math.random()*firstbytes.length)+0);<br \/>\n  try {<br \/>\n    postfw = eval(Math.floor((Math.random()*rsize[fw])+0) + (firstbytes[fw] + srangebytes[fw]).codePointAt(0)); \/\/Math.floor((Math.random()*rsize[fw])+0));<br \/>\n  } catch(e) {<br \/>\n    postfw = eval(Math.floor((Math.random()*rsize[fw])+0) + fixedCharCodeAt((firstbytes[fw] + srangebytes[fw]), 0)); \/\/Math.floor((Math.random()*rsize[fw])+0));<br \/>\n  }<br \/>\n  if (bcol != \"YELLOW\") {<br \/>\n  document.getElementById('myh4').innerHTML = '';<br \/>\n  document.getElementById('re').innerHTML = '&amp;nbsp;';<br \/>\n  } else {<br \/>\n  document.getElementById('myh4').innerHTML = 'Codepoint: &lt;a target=_blank title=\"Google search\" href=\"https:\/\/www.google.com.au\/?gfe_rd=cr&ei=X6rxV8GfFqzr8Aeo-5_4AQ&gws_rd=ssl#q=%26%23' + postfw + '\"&gt;' + postfw + '&lt;\/a&gt;';<br \/>\n  document.getElementById('re').innerHTML = '&lt;a style=text-decoration:none; target=_blank title=\"Google search\" href=\"https:\/\/www.google.com.au\/?gfe_rd=cr&ei=X6rxV8GfFqzr8Aeo-5_4AQ&gws_rd=ssl#q=%26%23' + postfw + '\"&gt;' + String.fromCodePoint(postfw) + '&lt;\/a&gt;';<br \/>\n  cnt++;<br \/>\n  <b>if (eval(cnt) &gt; 1200) {<br \/>\n    cnt = 1;<br \/>\n    document.getElementById('sessiontr').innerHTML = \"\";<br \/>\n  }<\/b><br \/>\n  var carr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];<br \/>\n  var ired = Math.floor(Math.random() * 127);<br \/>\n  var igreen = Math.floor(Math.random() * 127);<br \/>\n  var iblue = Math.floor(Math.random() * 127);<br \/>\n  var colhuh = '#f' +  carr[Math.floor(eval(ired) % 16)] + 'f' +  carr[Math.floor(eval(igreen) % 16)] + 'f' +  carr[Math.floor(eval(iblue) % 16)];<br \/>\n  document.getElementById('sessiontr').innerHTML += '&lt;td id=td' + cnt + ' style=\"font-size:18px;background-color:' + colhuh + ';\"&gt;' + document.getElementById('myh4').outerHTML + '&lt;br&gt;' + document.getElementById('re').outerHTML + '&lt;\/td&gt;';<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; which is called by the document.body <i>onload<\/i> event as per &#8220;setInterval(dothis,3000)&#8221;<\/p>\n<hr>\n<p id='erspt'>Previous relevant <a target=_blank title='Emoji Random Slideshow Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-random-slideshow-primer-tutorial\/'>Emoji Random Slideshow 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\/emoji_slideshow.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Emoji Random Slideshow Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.jpg\" title=\"Emoji Random Slideshow Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Emoji Random Slideshow Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got a Random Emoji Slideshow for you today, a project long in the thinking, and helped out enormously by the great Open Source community on the net, two webpages from which we&#8217;d like to point you towards, regarding this topic &#8230;<\/p>\n<ul>\n<li><a target=_blank title='http:\/\/stackoverflow.com\/questions\/22006218\/replace-emoji-unicode-symbol-using-regexp-in-javascript' href='http:\/\/stackoverflow.com\/questions\/22006218\/replace-emoji-unicode-symbol-using-regexp-in-javascript'>http:\/\/stackoverflow.com\/questions\/22006218\/replace-emoji-unicode-symbol-using-regexp-in-javascript<\/a><\/li>\n<li><a target=_blank title='http:\/\/xahlee.info\/js\/js_unicode_code_point.html' href='http:\/\/xahlee.info\/js\/js_unicode_code_point.html'>http:\/\/xahlee.info\/js\/js_unicode_code_point.html<\/a><\/li>\n<\/ul>\n<p>You may recall from the recent <a target=_blank title='Karaoke via YouTube API in Iframe Emoji Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/karaoke-via-youtube-api-in-iframe-emoji-tutorial\/'>Karaoke via YouTube API in Iframe Emoji Tutorial<\/a> our old approach to finding technically useful information from the net when we said &#8230;<\/p>\n<blockquote>\n<p>How do we find the emojis we want?  Well, at the entry level and exit level we have, respectively &#8230;<\/p>\n<p><b><\/b><\/p>\n<ul>\n<li>searches for relevant words in Google search engine &#8230; eg. <i>&#8220;video game emoji&#8221;<\/i> Google search as per <a target=_blank title='\"video game emoji\"' href='https:\/\/www.google.com.au\/search?q=%22video+game+emoji%22&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;ei=6k7uV9X2OcXu8wfDkayAAg'>this link<\/a><\/li>\n<li>and hope to arrive at the <a target=_blank title='Useful emoji technical details' href='http:\/\/www.fileformat.info\/info\/unicode\/'>http:\/\/www.fileformat.info<\/a> website for the technical details necessary &#8230; eg. <a target=_blank title='Unicode Character 'VIDEO GAME' (U+1F3AE)' href='http:\/\/www.fileformat.info\/info\/unicode\/char\/1f3ae\/index.htm'>Unicode Character &#8216;VIDEO GAME&#8217; (U+1F3AE)<\/a> HTML Entity (decimal) &amp;#127918; is what is useful to us, in HTML coding as a <i>value=<\/i> value for HTML input elements or <i>innerHTML<\/i> property of HTML <i>a<\/i> elements, for instance<\/li>\n<\/ul>\n<p><b><\/b><\/p>\n<p>The steps in between the two above tends to be a bit variable.  For the example above, we ended up at Google&#8217;s first suggestion, which we often end up at, at the domain <i>emojipedia.org<\/i>, specifically <a target=_blank title='emojipedia.org example' href='http:\/\/emojipedia.org\/video-game\/'>this link<\/a> and its &#8220;Codepoints&#8221; section value <i>U+1F3AE<\/i> that when refed back into Google search engine (for us, by literally typing it into the address bar) <a target=_blank title='Google search' href='https:\/\/www.google.com.au\/search?q=U%2B1F3AE&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;ei=CF_uV_DjAdPr8Ae-86aYDw'>you get<\/a> a first result sending you to http:\/\/www.fileformat.info website&#8217;s <a target=_blank title='Unicode Character 'VIDEO GAME' (U+1F3AE)' href='http:\/\/www.fileformat.info\/info\/unicode\/char\/1f3ae\/index.htm'>Unicode Character &#8216;VIDEO GAME&#8217; (U+1F3AE)<\/a> as above.  However, we did not always use <i>emojipedia.org<\/i> as our &#8220;middle guide&#8221; here.  There are many references out there.<\/p>\n<\/blockquote>\n<p> &#8230; but the word we didn&#8217;t hone in on then, that we&#8217;d like to hone in on now &#8230; <font size=1>better late than never<\/font> &#8230; is <a target=_blank title='Codepoint information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Code_point'>Codepoint<\/a>, regarding Character Encoding, quite a big, and at many times, confusing, subject matter in Information Technology.  But you wouldn&#8217;t really expect it to be otherwise, as it is a matter with <a target=_blank title='Internationalization information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Internationalization_and_localization'>Internationalization<\/a> getting us &#8230; <font size=1>all of us non-Martians<\/font> &#8230; together on representing ourselves, with all our different language and symbology methods of communicating, out there on the &#8220;palette&#8221; that the internet is for so many of us &#8230; <font size=1>though, think we should invite any Martians in to Internet cafe sessions over nibbles, don&#8217;t you think?<\/font><\/p>\n<p>For us, the useful technical thing to take away, is, for Emojis &#8230; and other symbology is even easier &#8230; <\/p>\n<p><code><br \/>\n&amp;#[Codepoint]<br \/>\n<\/code><\/p>\n<p> &#8230; is &#8220;lookable uppable&#8221; these days on the search engines, and so our Emoji Slideshow web application today, in which there is nothing for you to do regarding the slideshow, leaves you with spare time to click either &#8230;<\/p>\n<ul>\n<li>the random emoji itself &#8230; or &#8230;<\/li>\n<li>the &#8220;Codepoint&#8221; link<\/li>\n<\/ul>\n<p> &#8230; to start up a Google search regarding that, that we&#8217;ve found, for most emojis, gets you quickly to some good technical information with the links up the top of the search engine results.<\/p>\n<p>Happy Emoji making with our HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.html_GETME\" title='emoji_slideshow.html'>emoji_slideshow.html<\/a> and its slideshow <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emoji_slideshow.html\" title='Click picture'>live run<\/a>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d25455' onclick='var dv=document.getElementById(\"d25455\"); 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='d25455' 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='#d25465' onclick='var dv=document.getElementById(\"d25465\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25465' 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='#d25493' onclick='var dv=document.getElementById(\"d25493\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cookie\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25493' 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='#d25612' onclick='var dv=document.getElementById(\"d25612\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/category\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25612' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<p><\/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='#d26274' onclick='var dv=document.getElementById(\"d26274\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26274' 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='#d26298' onclick='var dv=document.getElementById(\"d26298\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26298' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We haven&#8217;t explored HTML5 to its full potential, and would like to blame the HTML5 canvas element for that &#8230; because the dog is out the back &#8230; and because it is so useful we can&#8217;t move on enough to &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-random-equation-canvas-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,15,37],"tags":[184,214,1654,297,380,381,385,392,476,477,576,578,590,652,739,997,2047,1319],"class_list":["post-26298","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-canvas","tag-clipboard","tag-data-uri","tag-data-url","tag-email","tag-email-client","tag-emoji","tag-equation","tag-game","tag-games-2","tag-html","tag-html5","tag-image","tag-javascript","tag-mailto","tag-programming","tag-random","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26298"}],"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=26298"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26298\/revisions"}],"predecessor-version":[{"id":26309,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26298\/revisions\/26309"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=26298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=26298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=26298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}