{"id":46806,"date":"2019-10-16T03:01:21","date_gmt":"2019-10-15T17:01:21","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=46806"},"modified":"2019-10-15T19:48:58","modified_gmt":"2019-10-15T09:48:58","slug":"viewport-and-css-calc-intersection-resize-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-intersection-resize-tutorial\/","title":{"rendered":"Viewport and CSS Calc Intersection Resize Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Viewport and CSS Calc Intersection Resize Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc_resize.jpg\" title=\"Viewport and CSS Calc Intersection Resize Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Viewport and CSS Calc Intersection Resize Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Viewport and CSS Calc Intersection Algorithm Tutorial' href='#vcssciat'>Viewport and CSS Calc Intersection Algorithm Tutorial<\/a> showed no issues with &#8230;<\/p>\n<ul>\n<li>mobile &#8220;pinch&#8221; and &#8220;spread&#8221; gestures &#8230; no issues surprisingly &#8230; but there were with &#8230;<\/li>\n<li>non-mobile <a target=_blank title='Events information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp'>&#8220;onresize&#8221;<\/a> (of window) created issue of a misplaced yellow intersection HTML div<\/li>\n<\/ul>\n<p>Fixing this bug was interesting.  At first we thought that yesterday&#8217;s &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-intersection-algorithm-tutorial\/'><p>\n &#8230; we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in px specified) to represent the intersection of Polygon 5 and 6.\n<\/p><\/blockquote>\n<p> &#8230; should be arranged to be &#8230;<\/p>\n<p><code><br \/>\n ... we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in % specified) to represent the intersection of Polygon 5 and 6.<br \/>\n<\/code><\/p>\n<p> &#8230; but found that that (idea that &#8220;W% = (WpxValue * 100.0 \/ screen.width)&#8221;) was not really the silver bullet here.<\/p>\n<p>What was better was to create a bit of a &#8220;rubber band&#8221; feel (for 1\/20 of a second of flexibility) to <b>onresize<\/b> events as per &#8230;<\/p>\n<p><code><br \/>\n\/\/ HTML<br \/>\n&lt;body onload='dbih=document.body.innerHTML; divpolys();'<b> onresize='if (!rdone) { rdone=true; setTimeout(reloadit, 50); divpolys(); } else { divpolys(); }'<\/b>&gt;<br \/>\n\/\/ Javascript<br \/>\nvar rdone=false;<br \/>\nfunction reloadit() {<br \/>\n   location.href=document.URL;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Yet again, take a look at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html--GETME\" title=\"viewport_poc.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html--GETME\" title=\"viewport_poc.htm\">viewport_poc.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.htm\" title=\"Click picture\">live run<\/a> link &#8230;<\/p>\n<table style='width:100%'>\n<tr>\n<th><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.htm\" title=\"Click picture\">Now<\/a><\/th>\n<\/tr>\n<tr>\n<td><iframe src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.htm\" style=\"width:100%;height:800px;\"><\/iframe><\/td>\n<\/tr>\n<tr>\n<th><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html\" title=\"Click picture\">Was<\/a><\/th>\n<\/tr>\n<tr>\n<td><iframe src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\" style=\"width:100%;height:800px;\"><\/iframe><\/td>\n<\/table>\n<hr>\n<p id='vcssciat'>Previous relevant <a target=_blank title='Viewport and CSS Calc Intersection Algorithm Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-intersection-algorithm-tutorial\/'>Viewport and CSS Calc Intersection Algorithm 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\/viewport_poc.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Viewport and CSS Calc Intersection Algorithm Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc_intersection.jpg\" title=\"Viewport and CSS Calc Intersection Algorithm Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Viewport and CSS Calc Intersection Algorithm Tutorial<\/p><\/div>\n<p>Do you eat &#8220;separatist style&#8221;?  I used to, leaving the good stuff until last, until one day a grandparent kindly taught me the weakness with this system, quietly pinching the best stuff during the prelude period.  The recent <a title='Viewport and CSS Calc Primer Tutorial' href='#vcsscpt'>Viewport and CSS Calc Primer Tutorial<\/a> has set us on a &#8220;separatist course&#8221; (<font size=1>which we hope does not lead to any tears at bedtime<\/font>) &#8230;<\/p>\n<ul>\n<li>initially talking just HTML and CSS (and no Javascript) with that first incarnation of the &#8220;Viewport and CSS Calc&#8221; proof of concept web application as above &#8230; and now today &#8230;<\/li>\n<li>we add Javascript (that dynamically creates its own HTML and CSS via two conduit helpers &#8230; those being &#8230;\n<ol>\n<li>\n<code><br \/>\n&lt;body<b> onload='divpolys();'<\/b>&gt;<br \/>\n<\/code>\n<\/li>\n<li>\n<code><br \/>\nfunction divpolys() {<br \/>\n  var divsii;<br \/>\n  divs=document.getElementsByTagName('div');<br \/>\n  for (var ii=0; ii&lt;divs.length; ii++) {<br \/>\n    <b>divsii=divs[ii].getBoundingClientRect();     \/\/ the way CSS proportionate styling can become co-ordinate reality<\/b><br \/>\n    \/\/ co-ordinate finding processing continues<br \/>\n  }<br \/>\n  \/\/ More work here<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; helping us show, in another &#8220;proof of concept&#8221; that will get nuanced and genericized (we hope) to show &#8220;Two Convex Polygon Intersections&#8221;)\n<\/li>\n<\/ul>\n<p>&#8220;Nuanced and genericized&#8221;?  Yes, as our case is even simpler (because in our case the polygons are always rectangles) than the premise of our muse for today&#8217;s work, the wonderful algorithmic ideas for <a target=_blank href='https:\/\/www.swtestacademy.com\/intersection-convex-polygons-algorithm\/' title='Intersection of Convex Polygons Algorithm'>Intersection of Convex Polygons Algorithm<\/a> (and also helped out by the great <a target=_blank href='https:\/\/wrf.ecse.rpi.edu\/\/Research\/Short_Notes\/pnpoly.html' title='PNPOLY - Point Inclusion in Polygon Test'>PNPOLY &#8211; Point Inclusion in Polygon Test<\/a>) but we plump for an array of structures data arrangement (rather than classes) reminiscent of our book web application discussion at <a target=_blank title='Javascript Array of Structures Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-array-of-structures-primer-tutorial\/'>Javascript Array of Structures Primer Tutorial<\/a> (and also see <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mysql-polygon-spatial-relations-via-image-map-tutorial\/' title='MySql Polygon Spatial Relations via Image Map Tutorial'>MySql Polygon Spatial Relations via Image Map Tutorial<\/a> for GIS MySql Spatial functions regarding some of this same line of thinking).  And so, being that simple, we can just create overlayed HTML div elements (position:absolute; opacity:0.7; z-index:11; top and left and width and height in px specified) to represent the intersection of Polygon 5 and 6.<\/p>\n<p>Again, take a look at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html-GETME\" title=\"viewport_poc.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html-GETME\" title=\"viewport_poc.html\">viewport_poc.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.html\" title=\"Click picture\">live run<\/a> link &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\" style=\"width:100%;height:800px;\"><\/iframe><\/p>\n<p> &#8230; or HTML iframe supervision to see what we are getting at here.<\/p>\n<hr>\n<p id='vcsscpt'>Previous relevant <a target=_blank title='Viewport and CSS Calc Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-primer-tutorial\/'>Viewport and CSS Calc 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\/viewport_poc.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Viewport and CSS Calc Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/viewport_poc.jpg\" title=\"Viewport and CSS Calc Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Viewport and CSS Calc Primer Tutorial<\/p><\/div>\n<p>Keeping on with some themes of yesterday&#8217;s <a title='Responsive Design Viewport Width Considerations Tutorial' href='#rdvwct'>Responsive Design Viewport Width Considerations Tutorial<\/a>, today, we combine ideas around &#8230;<\/p>\n<ul>\n<li>(meta) <a target=_blank title='Responsive Web Design' href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp'>viewport<\/a> &#8230; and &#8230;<\/li>\n<li>(CSS) <a target=_blank title='CSS3 calc information' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html'>calc<\/a><\/li>\n<\/ul>\n<p> &#8230; in a &#8220;proof of concept&#8221; web application we are using to explore ideas from the ground up <font size=1> &#8230; hello, wormies!<\/font><\/p>\n<p>This is <b>p<\/b>recise <b>p<\/b>ixel <b>p<\/b>lacement 101, bringing us to a division of concept with webpage design &#8230;<\/p>\n<table style=width:100%>\n<tr>\n<th><\/th>\n<th>Screen<\/th>\n<th>Viewport<\/th>\n<\/tr>\n<tr>\n<td>Width and Height Unitary Units<\/td>\n<td>px<\/td>\n<td>px<\/td>\n<\/tr>\n<tr>\n<td>Width Proportionate Units<\/td>\n<td>%<\/td>\n<td>vx<\/td>\n<\/tr>\n<tr>\n<td>Height Proportionate Units<\/td>\n<td>%<\/td>\n<td>vh<\/td>\n<\/tr>\n<tr>\n<td>Width (or Left) Calc-friendly<\/td>\n<td>%,px<\/td>\n<td>%,px,100vx<\/td>\n<\/tr>\n<tr>\n<td>Height (or Top) Calc-friendly<\/td>\n<td>%,px<\/td>\n<td>%,px,vh,100vh<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; where our &#8220;proof of concept&#8221; findings (on Safari, Firefox, Chrome, Opera and Safari simulations of Edge and Internet Explorer) so far make us believe the Viewport <i>width: calc(100vx &#8211; 60px);<\/i> CSS definition type of syntax that sounds great on paper does not appear to work in practice.<\/p>\n<p>So take a look at our very symmetric <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html_GETME\" title=\"viewport_poc.html\">viewport_poc.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\" title=\"Click picture\">live run<\/a> link &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/\/HTMLCSS\/viewport_poc.html\" style=\"width:100%;height:800px;\"><\/iframe><\/p>\n<p> &#8230; or HTML iframe supervision to see what we are getting at here.<\/p>\n<hr>\n<p id='rdvwct'>Previous relevant <a target=_blank title='Responsive Design Viewport Width Considerations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/responsive-design-viewport-width-considerations-tutorial\/'>Responsive Design Viewport Width Considerations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Responsive Design Viewport Width Considerations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/responsive_design_viewport_width.jpg\" title=\"Responsive Design Viewport Width Considerations Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Responsive Design Viewport Width Considerations Tutorial<\/p><\/div>\n<p>Regarding our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/index.htm\" title=\"Click picture\">Landing Page<\/a> series of HTML\/Javascript\/CSS webpages here at RJM Programming, we&#8217;re streamlining our device width (<a target=_blank title='Responsive Web Design' href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp'>Responsive Web Design<\/a>) considerations of &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-friendly-meta-viewport-tag-zoom-tutorial\/'>Mobile Friendly Meta Viewport Tag Zoom Tutorial<\/a> by now going with &#8230;<br \/>\n<table>\n<tr>\n<th>Was ..<\/th>\n<th><b>Now is<\/b> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n&lt;meta id=\u201dmyviewport\u201d name=\u201dviewport\u201d content=\u201dwidth=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes\u201d \/&gt;<br \/>\n<\/code>\n<\/td>\n<td>\n<code><br \/>\n<b>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/b><br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/google-pagespeed-and-firebug-mobile-friendly-primer-tutorial\/' title='Google PageSpeed and Firebug Mobile Friendly Primer Tutorial'>Google PageSpeed and Firebug Mobile Friendly Primer Tutorial<\/a> by now going with &#8230;<br \/>\n<table>\n<tr>\n<th>Was ..<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nfunction widthfix() {  \/\/<br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   document.getElementById('body_content').style.width='100%';<br \/>\n   document.getElementById('nav_layer').style.width='100%';<br \/>\n   document.getElementById('widget0').style.width='100%';<br \/>\n }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th><b>Now is<\/b> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nfunction widthfix() {  \/\/<br \/>\n if (<b>1 == 7 && <\/b>navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device<br \/>\n   document.getElementById('body_content').style.width='100%';<br \/>\n   document.getElementById('nav_layer').style.width='100%';<br \/>\n   document.getElementById('widget0').style.width='100%';<br \/>\n }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ul>\n<p>Why?<\/p>\n<ul>\n<li>viewport advice of W3School&#8217;s <a target=_blank href='https:\/\/www.w3schools.com\/css\/css_rwd_viewport.asp' title='Responsive Web Design - The Viewport'>Responsive Web Design &#8211; The Viewport<\/a> useful link, thanks &#8230; to keep it simple &#8230;<br \/>\n<code><br \/>\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<br \/>\n<\/code>\n<\/li>\n<li>we were able to use Safari (web browser) Develop Menu &#8220;Responsive Design Mode&#8221; functionality (as per <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/safari-develop-menu-responsive-design-primer-tutorial\/' title='Safari Develop Menu Responsive Design Primer Tutorial'>Safari Develop Menu Responsive Design Primer Tutorial<\/a>) to see for ourselves the improvement where our previous width based Javascript logic amendments had been interfering with the meta viewport suggestions better in keeping with Responsive Design thoughts<\/li>\n<\/ul>\n<p>Food for thought, we hope, for those chipping away at responsive design amalgamations!<\/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='#d46756' onclick='var dv=document.getElementById(\"d46756\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46756' 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='#d46778' onclick='var dv=document.getElementById(\"d46778\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pixel\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46778' 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='#d46793' onclick='var dv=document.getElementById(\"d46793\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/algorithm\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46793' 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='#d46806' onclick='var dv=document.getElementById(\"d46806\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onresize\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46806' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Viewport and CSS Calc Intersection Algorithm Tutorial showed no issues with &#8230; mobile &#8220;pinch&#8221; and &#8220;spread&#8221; gestures &#8230; no issues surprisingly &#8230; but there were with &#8230; non-mobile &#8220;onresize&#8221; (of window) created issue of a misplaced yellow intersection HTML &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/viewport-and-css-calc-intersection-resize-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":[1788,2422,281,2507,400,2653,2258,576,3111,652,776,1578,876,894,2255,1918,962,1988,997,1986,2932,1319,1373,2257,1496],"class_list":["post-46806","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-algorithm","tag-calc","tag-css","tag-dimension","tag-event","tag-gis","tag-height","tag-html","tag-intersection","tag-javascript","tag-meta","tag-onresize","tag-opacity","tag-overlay","tag-percentage","tag-pixel","tag-polygon","tag-position","tag-programming","tag-proof-of-concept","tag-spatial","tag-tutorial","tag-viewport","tag-width","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46806"}],"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=46806"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46806\/revisions"}],"predecessor-version":[{"id":46813,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/46806\/revisions\/46813"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=46806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=46806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=46806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}