{"id":55569,"date":"2022-05-02T03:01:49","date_gmt":"2022-05-01T17:01:49","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55569"},"modified":"2022-04-30T22:13:42","modified_gmt":"2022-04-30T12:13:42","slug":"simple-emoji-border-card-sharing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-sharing-tutorial\/","title":{"rendered":"Simple Emoji Border Card Sharing Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Simple Emoji Border Card Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card_sharing.jpg\" title=\"Simple Emoji Border Card Sharing Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Simple Emoji Border Card Sharing Tutorial<\/p><\/div>\n<p>A web application such as yesterday&#8217;s <a title='Simple Emoji Border Card Client Tutorial' href='#sebcct'>Simple Emoji Border Card Client Tutorial<\/a>&#8216;s &#8220;Simple Emoji Border Card&#8221; creator lacks a bit of accountability if its end product, which is HTML, cannot be shared within the web application.  And so, today, we offer two sharing conduits &#8230;<\/p>\n<ul>\n<li>email (via &#8220;a&#8221; &#8220;mailto:&#8221; links to your default email client application) containing URL link<\/li>\n<li>SMS (via &#8220;a&#8221; &#8220;sms:&#8221; links to your default messages client application, as possible) containing URL link<\/li>\n<\/ul>\n<p> &#8230; but these methods being based on URLs are limited in size, and yet the CSS styling can be quite large in size?!  Quite so, but we do not expect you to change much about the CSS, and if that is the case, the bulk of this &#8220;sharing navigational data&#8221; can be shrunk down to contain &#8230;<\/p>\n<ul>\n<li>card wording &#8230; and &#8230;<\/li>\n<li>a <a target=_blank title='Linux or unix or macOS diff' href='https:\/\/man7.org\/linux\/man-pages\/man1\/diff.1.html'>diff<\/a><font size=1>erence<\/font> report between the &#8220;default CSS&#8221; and &#8220;user entered CSS&#8221;<\/li>\n<\/ul>\n<p> &#8230; because the <a target=_blank title='Linux or unix or macOS diff' href='https:\/\/man7.org\/linux\/man-pages\/man1\/diff.1.html'>diff<\/a> command we can reach via PHP <a target=_blank title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'>exec<\/a> can &#8230;<\/p>\n<table>\n<tr>\n<th>Write out a &#8220;diff&#8221; difference report ( where &#8220;default CSS&#8221; is in \/tmp\/simple_card.before and &#8220;user entered CSS&#8221; is in \/tmp\/simple_card.after ) &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;?php<br \/>\n<code><br \/>\n    exec('diff --strip-trailing-cr -b -e \/tmp\/simple_card.before \/tmp\/simple_card.after &gt; \/tmp\/simple_card.diff');<br \/>\n    file_put_contents('\/tmp\/simple_card.diff', str_replace(\"\\r\",\"\",file_get_contents('\/tmp\/simple_card.diff')) . \"w\\n\");<br \/>\n<\/code><br \/>\n?&gt;\n<\/td>\n<\/tr>\n<tr>\n<th> &#8230; to help in piecing together the URLs above &#8230; and back the other way after the emailee clicks on that URL in the sent email &#8230;<\/th>\n<\/tr>\n<tr>\n<th>Use a &#8220;diff&#8221; difference report along with &#8220;default CSS&#8221; (initially in $cssstyle variable below) to reconstruct the &#8220;user entered CSS&#8221; &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;?php<br \/>\n<code><br \/>\n    $r=str_replace(\"+\",\" \",urldecode($_GET['reconstruct']));<br \/>\n    if (strpos($r, \"~!@\") !== false) {<br \/>\n      $prewords=explode(\"~!@\", $r)[0];<br \/>\n      $r=substr($r, strlen($prewords . \"~!@\"));<br \/>\n      $words=str_replace(\"\\n + \",\"\\n\",str_replace(\"\\n + \",\"\\n\",str_replace(\"\\n + \",\"\\n\",str_replace(\"   \",\" + \",str_replace(\"svg xml,\",\"svg+xml,\",$prewords)))));<br \/>\n    }<br \/>\n    file_put_contents('\/tmp\/simple_card.after', $cssstyle);<br \/>\n    file_put_contents('\/tmp\/simple_card.diff', str_replace(\"\\n + \",\"\\n\",str_replace(\"\\n + \",\"\\n\",str_replace(\"\\n + \",\"\\n\",str_replace(\"   \",\" + \",str_replace(\"svg xml,\",\"svg+xml,\",$r))))));<br \/>\n    exec('ed - \/tmp\/simple_card.after &lt; \/tmp\/simple_card.diff');<br \/>\n    $cssstyle=file_get_contents('\/tmp\/simple_card.after');<br \/>\n<\/code><br \/>\n?&gt;\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; thanks to <a target=_blank title='Great advice at computerhope' href='https:\/\/www.computerhope.com\/unix\/udiff.htm'>great advice up at computerhope<\/a>, so that <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php--GETME\" title=\"simple_card.php\">our changed PHP<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php--GETME\" title=\"simple_card.php\">simple_card.php<\/a> (Server) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php\" title=\"Click picture\">PHP web application redirecting to HTML<\/a> (or even <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php?words=Hello\" title=\"Click picture\">PHP web application not redirecting to HTML<\/a>) can live with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.html-GETME\" title=\"simple_card.htm\">our changed HTML<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.html-GETME\" title=\"simple_card.htm\">simple_card.htm<\/a> (Client) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.htm\" title=\"Click picture\">HTML web application<\/a> with some email and SMS sharing capabilities.<\/li>\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\/simple-emoji-border-card-sharing-tutorial\/'>New Simple Emoji Border Card Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sebcct'>Previous relevant <a target=_blank title='Simple Emoji Border Card Client Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-client-tutorial\/'>Simple Emoji Border Card Client Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Simple Emoji Border Card Client Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card_html.jpg\" title=\"Simple Emoji Border Card Client Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Simple Emoji Border Card Client Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Simple Emoji Border Card Primer Tutorial' href='#sebcpt'>Simple Emoji Border Card Primer Tutorial<\/a> could well have been called either of &#8230;<\/p>\n<ul>\n<li>Simple Emoji Border Card Server Tutorial<\/li>\n<li>Simple Emoji Border Card PHP Tutorial<\/li>\n<\/ul>\n<p> &#8230; and a lot of users would <a target=_blank title='Client\/Server Google image search' href='https:\/\/www.google.com\/search?q=client\/server&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=ALiCzsZvIiLyyNY9EspU4hwDoJ2lqlhmYQ:1651206382571&#038;source=lnms&#038;tbm=isch&#038;sa=X&#038;sqi=2&#038;ved=2ahUKEwjw9oiPt7j3AhWwB7kGHVv6B7MQ_AUoAXoECAIQAw&#038;biw=1440&#038;bih=743&#038;dpr=1'>&#8220;get the gist&#8221;<\/a> relative to today&#8217;s <i>Simple Emoji Border Card Client Tutorial<\/i> (or could have been called <i>Simple Emoji Border Card HTML Tutorial<\/i>).  Yes, when thinking &#8220;web applications&#8221; &#8230;<\/p>\n<blockquote><p>\nThink Server, think PHP<br \/>\nThink Client, think HTML\n<\/p><\/blockquote>\n<p> &#8230; as far as what you write your code in when your environment is an Apache\/PHP\/MySql web server based one.  Add in, if you like, that <i>Javascript scripting and\/or CSS styling<\/i> can hang off either idea.  Why did we have our <i>Primer Tutorial<\/i> web application written in (Server side) PHP in the first place?  As is quite often the case it is to do with &#8230;<\/p>\n<ul>\n<li>large amounts of data needed to transfer at a certain point of proceedings &#8230; and we are navigating at this point via &#8230;<\/li>\n<li>form &#8230;<\/li>\n<li>method=POST &#8230; needs at the receiving end (specified via form <i>action<\/i> attribute value), only (out of client HTML versus server PHP) &#8230;<\/li>\n<li>PHP<\/li>\n<\/ul>\n<p>We like PHP a lot personally, but realize there are &#8230;<\/p>\n<ul>\n<li>people not set up for PHP coding &#8230;<\/li>\n<li>people who would prefer pared down &#8220;just HTML (and Javascript and CSS)&#8221; (simplified) thinking<\/li>\n<\/ul>\n<p>We can see the attraction of this second thought, even if you are set up for PHP coding, and so, we looked into this for our recent &#8220;Simple Emoji Border Card&#8221; web application and concluded &#8230;<\/p>\n<ul>\n<li>yes <font size=1><strike>we have no bananas<\/strike><\/font> we can replace the need for that &#8220;Post&#8221; form submit button featuring in the PHP (that sends loads of data via a form method=POST conduit back to the same PHP code basis) with &#8230;<\/li>\n<li>\n<ol>\n<li>no (to) new webpage (navigation) &#8230; in favour of &#8230;<\/li>\n<li>new HTML (and Javascript and CSS) code (reconfiguration) &#8230; where &#8230;<\/li>\n<li>the all encompassing table element is given an <i>id<\/i> attribute of &#8220;toptable&#8221; &#8230; and we &#8230;<\/li>\n<li>append just before &lt;\/body&gt; &#8230;<br \/>\n<code><br \/>\n&lt;iframe name=ifp id=ifp style=display:none; src=''&gt;&lt;\/iframe&gt;<br \/>\n&lt;div id=spares style=display:none;&gt;&lt;\/div&gt;<br \/>\n<\/code><br \/>\n &#8230; and &#8230;\n<\/li>\n<li>added &#8220;onblur&#8221; event logic (see where onblur=&#8221; <font color=purple>iframeit(this);<\/font> &#8221; below) for that &#8220;CSS&#8221; textarea with the large amounts of data &#8230; whose Javascript functionality &#8230;<\/li>\n<li>overlays a totally fitting and covering HTML iframe hosted incarnation of same HTML (and Javascript and CSS) code which <font color=blue>now features<\/font> <i>&lt;body<font color=blue> onload=&#8221; checkforparent(); &#8220;<\/font>&gt;<\/i> call of Javascript &#8230;<br \/>\n<code><br \/>\n  var dho='';<br \/>\n<br \/>\n  <font color=purple>function iframeit(tao) {<br \/>\n    document.getElementById('toptable').style.opacity='0.0';<br \/>\n    document.getElementById('ifp').src=document.URL.split('#')[0].split('?')[0] + '?rand=' + Math.floor(Math.random() * 19876564);<br \/>\n    document.getElementById('ifp').style.display='block';<br \/>\n    document.getElementById('ifp').style.position='absolute';<br \/>\n    document.getElementById('ifp').style.top='0px';<br \/>\n    document.getElementById('ifp').style.left='0px';<br \/>\n    document.getElementById('ifp').style.width='100%';<br \/>\n    document.getElementById('ifp').style.height='100vh';<br \/>\n    document.getElementById('ifp').style.zIndex='99';<br \/>\n  }<\/font><br \/>\n<br \/>\n  <font color=blue>function checkforparent() {<br \/>\n    if (window.parent != window) {<br \/>\n      dho=document.head.outerHTML.replace('&lt;style' + document.head.outerHTML.split('&lt;style')[1].split('&lt;\/style&gt;')[0] + '&lt;\/style&gt;', parent.document.getElementById('css').value);<br \/>\n      document.getElementById('spares').innerHTML=parent.document.getElementById('css').value;<br \/>\n      document.getElementById('css').value=parent.document.getElementById('css').value;<br \/>\n      document.getElementById('words').value=parent.document.getElementById('words').value;<br \/>\n      document.getElementById('box').innerHTML=parent.document.getElementById('box').innerHTML;<br \/>\n    }<br \/>\n  }<\/font><br \/>\n<\/code><br \/>\n &#8230; as its means to get around the need for form method=POST &#8220;large amounts of data&#8221; (Server) thinking in a reconfigured (Client) way\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Meaning, there are a few ways our <i>Simple Emoji Border Card<\/i> web application can now be used &#8230;<\/p>\n<ul>\n<li>via our new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.html_GETME\" title=\"simple_card.htm\">simple_card.htm<\/a> (Client) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.htm\" title=\"Click picture\">HTML web application<\/a> &#8230;<\/li>\n<li>via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php-GETME\" title=\"simple_card.php\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php-GETME\" title=\"simple_card.php\">simple_card.php<\/a> (Server) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php\" title=\"Click picture\">PHP web application redirecting to HTML<\/a> (or even <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php?words=Hello\" title=\"Click picture\">PHP web application not redirecting to HTML<\/a>)<\/li>\n<\/ul>\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\/simple-emoji-border-card-client-tutorial\/'>Simple Emoji Border Card Client Tutorial<\/a>.<\/p-->\n<hr>\n<p id='sebcpt'>Previous relevant <a target=_blank title='Simple Emoji Border Card Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-primer-tutorial\/'>Simple Emoji Border Card 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\/PHP\/simple_card.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Simple Emoji Border Card Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.jpg\" title=\"Simple Emoji Border Card Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Simple Emoji Border Card Primer Tutorial<\/p><\/div>\n<p>We were really happy to stumble upon <a target=_blank href='https:\/\/stackoverflow.com' title='StackOverflow'>StackOverflow<\/a>&#8216;s excellent <a target=_blank href='https:\/\/stackoverflow.com\/questions\/41199841\/use-emoji-as-css-border' title='Use Emoji as CSS Border'>Use Emoji as CSS Border<\/a> webpage <font size=1>(of dreams and ideas)<\/font> the other day, and immediately want to &#8230;<\/p>\n<ul>\n<li>start <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php_GETME\" title=\"simple_card.php\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/simple_card.php\" title=\"Click picture\">Simple Emoji Border Card<\/a> creating today &#8230; ready for &#8230;<\/li>\n<li>whatever the future may hold, into the future, because we smell a <i>tool<\/i> coming on<\/li>\n<\/ul>\n<p>We break the &#8220;user controllable&#8221; components of the card into &#8230;<\/p>\n<ol>\n<li>wording of the card<\/li>\n<li>emoji <font size=1>(maybe)<\/font> border of card CSS styling<\/li>\n<\/ol>\n<p> &#8230; used by the user via some HTML textarea content they could edit to click a &#8220;Post&#8221; button creating their tailored (left hand table cell containing) HTML div element, that if double clicked (or just clicked within the surrounding table cell below the HTML &#8220;card&#8221; div) opens the user&#8217;s created card, alone, in a new window.<\/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='#d55541' onclick='var dv=document.getElementById(\"d55541\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/card\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55541' 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='#d55551' onclick='var dv=document.getElementById(\"d55551\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/client\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55551' 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='#d55569' onclick='var dv=document.getElementById(\"d55569\"); 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='d55569' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A web application such as yesterday&#8217;s Simple Emoji Border Card Client Tutorial&#8216;s &#8220;Simple Emoji Border Card&#8221; creator lacks a bit of accountability if its end product, which is HTML, cannot be shared within the web application. And so, today, we &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/simple-emoji-border-card-sharing-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":[3028,85,161,3095,212,281,328,342,380,385,405,430,452,576,587,652,739,1830,830,860,876,894,970,997,1122,1159,1226,1262,1319,1411,1418,1583,2308,1622,1496],"class_list":["post-55569","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-action","tag-apache","tag-border","tag-card","tag-client","tag-css","tag-diff","tag-div","tag-email","tag-emoji","tag-exec","tag-file_put_contents","tag-form","tag-html","tag-iframe","tag-javascript","tag-mailto","tag-method","tag-navigation","tag-onblur","tag-opacity","tag-overlay","tag-post","tag-programming","tag-server","tag-sms","tag-svg","tag-textarea","tag-tutorial","tag-web-server","tag-webpage","tag-window","tag-wording","tag-words","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55569"}],"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=55569"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55569\/revisions"}],"predecessor-version":[{"id":55578,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55569\/revisions\/55578"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=55569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=55569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=55569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}