{"id":13601,"date":"2015-03-22T05:06:43","date_gmt":"2015-03-21T18:06:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13601"},"modified":"2025-06-15T20:49:09","modified_gmt":"2025-06-15T10:49:09","slug":"wordpress-blog-php-mod_deflate-speed-improvement-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-php-mod_deflate-speed-improvement-tutorial\/","title":{"rendered":"WordPress Blog PHP mod_deflate Speed Improvement Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Apache\/mod_deflate\/\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"WordPress Blog PHP mod_deflate Speed Improvement Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Apache\/mod_deflate\/ModDeflate.jpg\" title=\"WordPress Blog PHP mod_deflate Speed Improvement Tutorial\"   \/><\/a><p class=\"wp-caption-text\">WordPress Blog PHP mod_deflate Speed Improvement Tutorial<\/p><\/div>\n<p>Our &#8220;quest&#8221; for speed continues, <strike>man<\/strike> person.  This WordPress Blog (from <a target=\"_blank\" title='WordPress.org' href='http:\/\/wordpress.org' rel=\"noopener\">WordPress.org<\/a> (not <a target=\"_blank\" title='WordPress.com' href='http:\/\/wordpress.com' rel=\"noopener\">WordPress.com<\/a>)) is now using the PHP mod_deflate module to zip up the traffic going out on the web, in exchange for a higher CPU load for our web server here at the www.rjmprogramming.com.au domain.<\/p>\n<p>And how do we know?  We put it through the sanity check gzip checker website <a target=\"_blank\" href='http:\/\/www.feedthebot.com\/tools\/gzip\/' title='gzip checker' rel=\"noopener\">here<\/a>.<\/p>\n<p>And what methods can implement this functionality? &#8230;<\/p>\n<ul>\n<li>fix http.conf as the configuration file of an Apache\/PHP\/MySql web server &#8230; for advice here read <a target=\"_blank\" title='useful link' href='http:\/\/httpd.apache.org\/docs\/2.2\/mod\/mod_deflate.html' rel=\"noopener\">here<\/a><\/li>\n<li>fix the document root .htaccess file &#8230; for advice here read <a target=\"_blank\" href='http:\/\/samaxes.com\/2011\/05\/improving-web-performance-with-apache-and-htaccess\/' title='useful link' rel=\"noopener\">here<\/a><\/li>\n<li>as applicable fix the .htaccess file at the root directory of the website of interest<\/li>\n<li>add (the <b>bold<\/b> bit)<br \/>\n<code>&lt;?php<br \/>\n<b> ob_start('ob_gzhandler');  <\/b> <br \/>\/\/ rest of code ...<br \/>\/\/ ... <br \/>\/\/ ... end of rest of code<br \/>?&gt;<\/code> \/\/ at top of the root directory index.php of the PHP website of interest &#8230; read more about this from WordPress <a target=\"_blank\" title='WordPress advice' href='http:\/\/codex.wordpress.org\/Output_Compression' rel=\"noopener\">here<\/a><\/li>\n<\/ul>\n<p>We&#8217;ve decided to use that last method, and you can see how simple this is <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Apache\/mod_deflate\/\" title='click picture' rel=\"noopener\">here<\/a>.  This tutorial also shows the improvement reflected with a speed test at <a target=\"_blank\" title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights' rel=\"noopener\">Google Page Speed<\/a>.  Our &#8220;quest&#8221; continues.   To see where we have come from, take a look at <a target=\"_blank\" title='EasyApache in cPanel Primer Tutorial' href='#eicpt' rel=\"noopener\">EasyApache in cPanel Primer Tutorial<\/a> as shown below.  Hope to see you again soon.<\/p>\n<hr \/>\n<p id='eicpt'>Previous relevant <a target=\"_blank\" title='EasyApache in cPanel Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13583' rel=\"noopener\">EasyApache in cPanel 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\/Apache\/EasyApache\/\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"EasyApache in cPanel Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Apache\/EasyApache\/EasyApache-37of.jpg\" title=\"EasyApache in cPanel Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">EasyApache in cPanel Primer Tutorial<\/p><\/div>\n<p>This is not a Monty Python skit (though<a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=kQFKtI6gn9Y' rel=\"noopener\">?<\/a>) and there is a thought process to say that the previous relevant <a target=\"_blank\" title='Google Page Speed Image Optimization Follow Up Tutorial' href='#gpsiofut' rel=\"noopener\">Google Page Speed Image Optimization Follow Up Tutorial<\/a> as shown below is relevant to &#8220;EasyApache on cPanel Primer Tutorial&#8221; &#8230; but I&#8217;m hoping that if you run an Apache\/PHP\/MySql domain you may be more advanced than we were here, seeking a <a target=\"_blank\" title='gzip information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Gzip' rel=\"noopener\">&#8220;gzip&#8221;<\/a> solution to speeding our website up.<\/p>\n<p>These days (actually for some time) a &#8220;gzip&#8221; solution is now referred to as a &#8220;deflate&#8221; solution, and requires, on an Apache\/PHP\/MySql CentOS web hosting arrangement, the installation into your Apache of the module <a target=\"_blank\" title='mod_deflate information from Apache' href='http:\/\/httpd.apache.org\/docs\/2.2\/mod\/mod_deflate.html' rel=\"noopener\">&#8220;mod_deflate&#8221;<\/a> &#8230; it is FAR from deflating <font size=1>chortle,<\/font> <font size=4>chortle<\/font>.<\/p>\n<p>Your first question regarding this, for yourself, might be &#8230; &#8220;How can I tell if <i>gzip<\/i> and\/or <i>mod_deflate<\/i> is already making things faster on a URL of interest?&#8221; &#8230; use this testing <a target=\"_blank\" title='Gzip compression testing tool ... thanks' href='http:\/\/www.feedthebot.com\/tools\/gzip\/' rel=\"noopener\">website<\/a> (thanks <strike>man<\/strike> <strike>peepholes<\/strike> people).  If the answer is no, as it was for <a target=\"_blank\" title='this blog' href='http:\/\/www.rjmprogramming.com.au\/wordpress' rel=\"noopener\">this WordPress blog<\/a>, please read on.<\/p>\n<p>So what is <a target=\"_blank\" href='http:\/\/en.wikipedia.org\/wiki\/CPanel' title='cPanel information from Wikipedia ... thanks' rel=\"noopener\">cPanel<\/a>?<\/p>\n<p>So what is <a target=\"_blank\" href='http:\/\/en.wikipedia.org\/wiki\/CentOS%E2%80%8E' title='CentOS information from Wikipedia ... thanks' rel=\"noopener\">CentOS<\/a>?  So what is <a target=\"_blank\" href='http:\/\/en.wikipedia.org\/wiki\/CPanel#WHM_.28Web_Host_Manager.29' title='WHM information from Wikipedia ... thanks' rel=\"noopener\">WHM<\/a>?   So what is <a target=\"_blank\" href='http:\/\/en.wikipedia.org\/wiki\/Virtual_private_server%E2%80%8E' title='VPS information from Wikiedia ... thanks' rel=\"noopener\">vps<\/a>?  We had a tutorial called  <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=3491' title='Web Server Primer Tutorial' rel=\"noopener\">Web Server Primer Tutorial<\/a> where you can look up more.<\/p>\n<p>So what is <a target=\"_blank\" href='https:\/\/www.youtube.com\/watch?v=bkFN62drZP8' title='EasyApache YouTube tutorial' rel=\"noopener\">EasyApache<\/a> (in cPanel)?<\/p>\n<p>Finished reading &#8230; okay, so EasyApache is a means by which, on our Linux web server we can rebuild Apache and PHP (we go to PHP 5.4 from PHP 5.3 &#8230; and there are some repercussions to talk about another time) and MySql, and with the rebuild we make sure &#8220;mod_deflate&#8221; is selected this time.<\/p>\n<p>If you are undertaking this, may I say it is good to, before you start &#8230;<\/p>\n<ul>\n<li>backup the webserver &#8230; (though my first run did have an issue (see &#8220;cPanel gurus&#8221; below) and it reverted to a working Apache correctly, and, by the by, doesn&#8217;t stop your website working as it builds (for about 30 minutes))<\/li>\n<li>&#8220;cPanel gurus&#8221; &#8230; know that if the whole thing sounds trepidatious, there is a great support website for <a target=\"_blank\" href='https:\/\/cpanel.net\/' title='cPanel landing page' rel=\"noopener\">cPanel<\/a> with great experts at the ready, and if there is an issue, at least with my CentOS WHM vps arrangement any issue hooks into cPanel support (with an email) should you want some advice, and perhaps give <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Apache\/EasyApache\/EasyApache-39of.jpg\" title='cPanel Feedback' rel=\"noopener\">feedback<\/a><\/li>\n<\/ul>\n<p>Enjoy today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Apache\/EasyApache\/\" title='click picture' rel=\"noopener\">tutorial<\/a>.<\/p>\n<p>Tomorrow we show making the &#8220;gzip&#8221; solution happen via &#8220;mod_deflate&#8221; for WordPress PHP website in a generic approach applicable to many other PHP website scenarios.<\/p>\n<hr \/>\n<p id='gpsiofut'>Previous relevant <a target=\"_blank\" title='Google Page Speed Image Optimization Follow Up Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13568' rel=\"noopener\">Google Page Speed Image Optimization Follow Up 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\/GooglePageSpeed\/\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Google Page Speed Image Optimization Follow Up Tutorial\"\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/GooglePageSpeed\/GooglePageSpeed_FollowUp-98of.jpg\" title=\"Google Page Speed Image Optimization Follow Up Tutorial\"\"   \/><\/a><p class=\"wp-caption-text\">Google Page Speed Image Optimization Follow Up Tutorial<\/p><\/div>\n<p>Do you remember a few days back talking about the <a target=\"_blank\" title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights' rel=\"noopener\">Google Page Speed<\/a> functionality with <a target=\"_blank\" title='FFmpeg Image Optimization Primer Tutorial' href='#fiopt' rel=\"noopener\">FFmpeg Image Optimization Primer Tutorial<\/a>, as shown below, and also with <a target=\"_blank\" title='Google PageSpeed and Firebug Mobile Friendly Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13187' rel=\"noopener\">Google PageSpeed and Firebug Mobile Friendly Primer Tutorial<\/a> earlier on?  We talked about image optimization &#8230; well, today, we are going to do some more &#8230; it is one of those jobs you could probably keep visiting &#8230; and practice helps, methinks.  Why is image optimization important?  It helps you win SEO &#8220;brownie points&#8221; with the search engines.<\/p>\n<p>On the WordPress <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/wordpress' title='WordPress blog' rel=\"noopener\">blog<\/a> you are reading at the moment there is no doubt that some image optimization could be done, so we do this today, concentrating on content above the fold, using a desktop Mac application Paintbrush (and saving as a jpeg with about 25% quality as per <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/GooglePageSpeed\/GooglePageSpeed_FollowUp-93of.jpg\" rel=\"noopener\">this example<\/a>), though we could have used <a target=\"_blank\" href='http:\/\/www.nchsoftware.com\/imageconverter\/' title='Pixillion' rel=\"noopener\">Pixillion<\/a> or Gimp (see <a target=\"_blank\" title='Gimp Batch Image Manipulation Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=7981' rel=\"noopener\">Gimp Batch Image Manipulation Primer Tutorial<\/a>) to do this job.  The Paintbrush method is used because it is not every file I want to change whereas the other methods suit a &#8220;do-all-folder&#8221; approach.<\/p>\n<p>You&#8217;ll see with the <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/GooglePageSpeed\/\" title=\"Click picture\" rel=\"noopener\">tutorial<\/a> lots of (s)ftp transferring using the Firefox web browser with its brilliant <a target=\"_blank\" title='FireFTP Firefox add-on' href='http:\/\/fireftp.net\/' rel=\"noopener\">FireFTP<\/a> add-on, and you&#8217;ll see <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/GooglePageSpeed\/GooglePageSpeed_FollowUp-94of.jpg\" rel=\"noopener\">reduced file sizes<\/a> and that the Google PageSpeed results improve as a result.<\/p>\n<p>You may be surprised what tomorrow brings, consolidating the thoughts of today, to continue on our &#8220;quest&#8221; to speed up this WordPress blog.  Hope you can join us then.<\/p>\n<hr \/>\n<p id='fiopt'>Previous relevant <a target=\"_blank\" title='FFmpeg Image Optimization Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13264' rel=\"noopener\">FFmpeg Image Optimization 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\/image_optimization.jpg\" rel=\"noopener\"><img decoding=\"async\" id='ffmpegi' style=\"float:left;border: 15px solid pink;\" alt=\"FFmpeg Image Optimization Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_optimization-51of.jpg\" title=\"FFmpeg Image Optimization Primer Tutorial\" onmouseover=\" this.src=this.src.replace('-50of.jpg','-51of.xjpg').replace('-51of.jpg','-50of.xjpg').replace('.x','.');   \"  \/><\/a><p class=\"wp-caption-text\">FFmpeg Image Optimization Primer Tutorial<\/p><\/div>\n<p>The Linux <a target=\"_blank\" title='FFmpeg download' href='https:\/\/www.ffmpeg.org\/' rel=\"noopener\">FFmpeg<\/a> command is so useful, and so modest.   In its &#8220;man ffmpeg&#8221; it just describes itself as a video converter, but it does (eg. <a target=\"_blank\" href='https:\/\/trac.ffmpeg.org\/wiki\/Scaling%20%28resizing%29%20with%20ffmpeg' title='FFmpeg image scaling' rel=\"noopener\">scaling<\/a>) images as well &#8230;. guess the modesty could be that it thinks of one image as a very short video &#8230; <a target=\"_blank\" title='subliminal ad' href='https:\/\/www.youtube.com\/watch?v=amnZX-jjBD8' rel=\"noopener\">subliminal advertising<\/a> perhaps?!  We found it invaluable in the &#8220;end game&#8221; part of the creation of our &#8220;Make Your Own Charts&#8221; iOS (iPad) mobile application, and you can read more about this <a target=\"_blank\" title='FFmpeg video converter' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=ffmpeg' rel=\"noopener\">here<\/a>.<\/p>\n<p>Do you remember a few days back talking about <a target=\"_blank\" title='Google PageSpeed and Firebug Mobile Friendly Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13187' rel=\"noopener\">Google PageSpeed and Firebug Mobile Friendly Primer Tutorial<\/a> when we said? &#8230;<\/p>\n<blockquote>\n<p>The Google PageSpeed Insight tools not only measure a webpage&#8217;s speed but can also give a report on the Mobile (or Desktop, for that matter) friendliness of that webpage, giving a score out of 100.<\/p>\n<\/blockquote>\n<p> &#8230; well, today, we turn our attention to the <a target=\"_blank\" title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights' rel=\"noopener\">Google PageSpeed<\/a> talent for showing you how to speed up your webpages, and so, get in the better books with the search engines, and your users, probably.  The use of Google PageSpeed on the Landing Page <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Welcome.html\" rel=\"noopener\">clone<\/a> pointed out the speed savings that could be achieved by some image optimization (preferably <a target=\"_blank\" title='Lossless compression information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Lossless_compression' rel=\"noopener\">lossless compression<\/a>) and there is a pretty obvious one here &#8230; let&#8217;s make these images 105px wide (at least for when they just load &#8220;above the fold&#8221;).<\/p>\n<p>So, in relation to <a target=\"_blank\" title='Wordpress Recent Post Landing Page Tutorial' href='#wrplpt' rel=\"noopener\">WordPress Recent Post Landing Page Tutorial<\/a> as shown below, that&#8217;s where we get a new &#8230; <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php--GETME' title='recent-posts-2.php' rel=\"noopener\">recent-posts-2.php<\/a> &#8230; and the changes to code &#8230; <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php--GETME' title='recent-posts-2.php' rel=\"noopener\">here<\/a>.<\/p>\n<p>In that code you&#8217;ll see the major PHP <a target=\"_blank\" title='PHP exec' href='http:\/\/php.net\/manual\/en\/function.exec.php' rel=\"noopener\">&#8220;exec&#8221;<\/a> code line of change as &#8230;<\/p>\n<p><code><br \/>\n      exec(\"ffmpeg -i \" . dirname(__FILE__) . \"\/\" . $narray[$thisij] . \".jpg  -vf scale=105:-1 \" . dirname(__FILE__) . \"\/\" . $narray[$thisij] . \".jpeg\");<br \/>\n<\/code><\/p>\n<p>That leaves a good <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/zero.html' title='zero.html' rel=\"noopener\">zero.html<\/a> arrangement.<\/p>\n<p>You&#8217;ll see that this is only a minor improvement from 33 to 34 score with Google PageSpeed, but has moved the Optimizing Images out of the critical section.  Obviously there is such a lot to do in this area, as an ongoing project.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>There are quite a few things to like about the Jpeg image file format, and one of the most pleasing one to implement is its peculiarity that a file extension of .jpg is totally equivalent to a file extension of .jpeg as far as the understanding of web browsers, and their rendering rules, goes.  This gives a lot of scope to programmers to be able to have unusual arrangements with Jpeg files with their dual extension possibilities (the same data can have two operating system &#8220;guises&#8221;) &#8230; here we use the ability to have two different image sizes and Javascript DOM can handle the <i>onmouseover<\/i> event nonetheless by reverting to the bigger (size) version when a zooming operation is required, but none of this impacts the &#8220;above the fold&#8221; initial loading with the smaller (size) version.<\/p>\n<p>Jpeg allows percentage file filtering when saving in various image editors &#8230; does one have to go on and on and on and on &#8230; or do you give up now?!<\/p>\n<hr \/>\n<p id='wrplpt'>Previous relevant <a target=\"_blank\" title='Wordpress Recent Post Landing Page Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11388' rel=\"noopener\">WordPress Recent Post Landing Page 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\/zero_html_change.jpg\" rel=\"noopener\"><img decoding=\"async\" id=\"qqqqqfghjspt\" style=\"float:left;border: 15px solid pink;\" alt=\"Wordpress Recent Post Landing Page Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zero_html_change.jpg\" title=\"Wordpress Recent Post Landing Page Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Wordpress Recent Post Landing Page Tutorial<\/p><\/div>\n<p>A few days back we decided to revisit (<a target=\"_blank\" href='#wrpifut' title='Wordpress Recent Post Image Follow Up Tutorial' rel=\"noopener\">WordPress Recent Post Image Follow Up Tutorial<\/a>) in order to (software) integrate it with the www.rjmprogramming.com.au domain&#8217;s Landing Page.   We did this for two reasons.  It was probably a good visual cue for users, who may be more inclined to click an icon, than a link, these days (&#8230; am not sure yet &#8230;) and because support for <a target=\"_blank\" title='Adobe Flash information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Adobe_Flash' rel=\"noopener\">Flash<\/a> is becoming too difficult with the Flash we had going on the Landing Page.<\/p>\n<p>As such we decided to replace the contents within the <a target=\"_blank\" title='iWeb web design' href='https:\/\/www.apple.com\/au\/support\/iweb\/\n' rel=\"noopener\">iWeb<\/a> <a target=\"_blank\" title='CSS Position information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_positioning.asp' rel=\"noopener\">position:absolute<\/a> <a target=\"_blank\" title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp' rel=\"noopener\">div<\/a> (that iWeb loves to use) that had Flash with new home-grown HTML <a target=\"_blank\" title='HTML iframe information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp' rel=\"noopener\">iframe<\/a> webpage that shows those latest 8 recent posts as referred to below.<\/p>\n<p>The change did pan out to involve the &#8220;few times a day code&#8221;.  Do you remember, below &#8230;<\/p>\n<blockquote>\n<p>Why would this job have &#8220;a few times a day&#8221; functionality? &#8230; Well, the images change when a blog posting goes live, and at this blog this happens once a day, so there is no need to slow functionality down getting these images together more often than during that time the new blog posting is scheduled.  So this &#8220;a few times a day&#8221; functionality uses (the web server Linux) crontab\/curl &#8230; what a team &#8230; and we wrote <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php_GETME' title='recent-posts-2.php' rel=\"noopener\">recent-posts-2.php<\/a> to be the PHP run with a curl &#8230; chortle, chortle.<\/p>\n<\/blockquote>\n<p>&#8230; well, all that still applies, but what if we were to intervene in that code to write out HTML that suits that proposed iframe we talked about, above.<\/p>\n<p>So that&#8217;s where we get &#8230; <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php-GETME' title='recent-posts-2.php' rel=\"noopener\">recent-posts-2.php<\/a> &#8230; and the changes to code &#8230; <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php-GETME' title='recent-posts-2.php' rel=\"noopener\">here<\/a>.<\/p>\n<p>That leaves a good <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/zero.html' title='zero.html' rel=\"noopener\">zero.html<\/a> arrangement that is dynamic with those &#8220;few times a day&#8221; arrangements we already had in place, and which you can read more about below, as you wish.  Alas, one speaks too soon, as there is something else needed for zero.html to be user-friendly enough for mobile usage &#8230; the scrolling is not as &#8220;truncaty&#8221; (is this a word?) on mobile devices as on non-mobile devices and we have decided here to just show the two most recent icons where the platform is mobile &#8230; and how was this done?   After reading this brilliant <a target=\"_blank\" title='Great cross-platform advice' href='http:\/\/www.abeautifulsite.net\/detecting-mobile-devices-with-javascript\/' rel=\"noopener\">advice<\/a> &#8230; thanks &#8230;  we did some Javascript onload functionality (in zero.html) as below &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt; var one_o_five=600; function ol() { if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { one_o_five=105; for (var j=3; j&lt;=8; j++) { document.getElementById(j).style.display='none';  } } } &lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p>All that is left is to wipe out the iWeb div Landing Page functionality that was Flash and put in, instead &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe style=\"width:264px;\" title=\"Recent Blog Posts\" src=\"PHP\/zero.html\"&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p>&#8230; all okay?  You can see it at the www.rjmprogramming.com.au <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/' title='Landing Page' rel=\"noopener\">Landing Page<\/a> a little bit down at the left hand edge of (usual) functionality.<\/p>\n<hr \/>\n<p id='wrpifut'>Previous relevant <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11008' title='Wordpress Recent Post Image Follow Up Tutorial' rel=\"noopener\">WordPress Recent Post Image Follow Up Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/RecentPostImage_FollowUp.jpg\" rel=\"noopener\"><img decoding=\"async\" id=\"qqqqfghjspt\" style=\"float:left;border: 15px solid pink;\" alt=\"Wordpress Recent Post Image Follow Up Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/RecentPostImage_FollowUp.jpg\" title=\"Wordpress Recent Post Image Follow Up Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Wordpress Recent Post Image Follow Up Tutorial<\/p><\/div>\n<p>A couple of days back (<a target=\"_blank\" href='#wrpipt' title='Wordpress Recent Post Image Primer Tutorial' rel=\"noopener\">WordPress Recent Post Image Primer Tutorial<\/a>) we did some functionality work on this WordPress Blog&#8217;s Recent Posts menu, and left it more functional for sure and very much &#8220;okay&#8221; &#8230; but is &#8220;okay&#8221; okay? &#8230; well, OK, it might be &#8220;okay&#8221; for a while, but think we seek more functionality:<\/p>\n<ul>\n<li>think quite often users expect that an image on a website will have some underlying functionality, so think that would be an improvement<\/li>\n<li>would like to include online contextual Ajax help for these newly included images<\/li>\n<\/ul>\n<p>To move forward from where we were regarding these improvements we could proceed on 3 logic fronts methinks:<\/p>\n<ul>\n<li>use the <i>ul<\/i>-&gt;<i>li<\/i> hierarchy to do one thing with the new images and other blog posting specific things for all the links &#8230; this may be possible, but it didn&#8217;t work (after some time) so &#8230;<\/li>\n<li>change the logic so that those new CSS created background-url images are turned into real images &#8230; but we prefer to try &#8230;<\/li>\n<li>add a real image superimposed over the new background-url images with a higher <a target=\"_blank\" href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' title='CSS z-index information from w3schools' rel=\"noopener\">z-index<\/a> but totally <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/transparent.png\" title=\"transparent png image\" rel=\"noopener\">transparent<\/a> (via techniques of <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9389' title='Gimp Transparency Primer Tutorial' rel=\"noopener\">Gimp Transparency Primer Tutorial<\/a>) and add event logic to these, separate to the link event logics &#8230; this worked, and simplified code ideas as well<\/li>\n<\/ul>\n<p>Our old favourite WordPress blog PHP header.php changed as in bold below:<\/p>\n<p><code><br \/>\nfunction rptwo() {<br \/>\n  var tworp=document.getElementById('recent-posts-2');<br \/>\n  if (tworp != null) {<br \/>\n    if (tworp.innerHTML.indexOf('&lt;u' + 'l&gt;') != -1) {<br \/>\n      tworp.innerHTML = tworp.innerHTML.replace('&lt;u' + 'l&gt;', '&lt;u' + 'l class=\"iconlist\"&gt;');<br \/>\n      <b><br \/>\n      var eight=new Array(\"one\", \"two\", \"three\", \"four\", \"five\", \"six\", \"seven\", \"eight\");<br \/>\n      var ieight;<br \/>\n      tworp.innerHTML = tworp.innerHTML.replace(\/&lt;\/a&gt;\/g, \"&lt;\/a&gt;&lt;img class='iiconlist' src='http:\/\/www.rjmprogramming.com.au\/wordpress\/transparent.png' style='z-index:3;margin-left:0px;margin-top:0px;opacity:0.2;width:140px;height:100px;box-shadow:rgba(0,0,255,0.2) 2px 2px 2px 2px inset;' onmouseover='getRpnow();' onmouseout='yehbut();' ontouchstart='getRpnow();' ontouchend='yehbut();' title=' ... welcome to the long hover functionality that shows Blog Post regarding Recent Post images'&gt;\");<br \/>\n      <\/b><br \/>\n      for (ieight=0; ieight&lt;eight.length; ieight++) {<br \/>\n        tworp.innerHTML = tworp.innerHTML.replace(\"&lt;li&gt;\", \"&lt;li class='\" + eight[ieight] + \"'&gt;\");<br \/>\n        <b><br \/>\n         tworp.innerHTML = tworp.innerHTML.replace(\"&lt;img class=\", \"&lt;img onclick=\"clickaid('a\" + eight[ieight] + \"');\" class=\").replace(\"&lt;img title=\" \", \"&lt;img onclick=\"clickaid('a\" + eight[ieight] + \"');\" title=\"\");<br \/>\n        <\/b><br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Our contextual help Javascript source code can be downloaded by <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js-----GETME' title='wajax.js' rel=\"noopener\">wajax.js<\/a> which changed as per <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js-----GETME' title='wajax.js' rel=\"noopener\">wajax.js<\/a> for these changes today.<\/p>\n<p>Hope you enjoy today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/RecentPostImage_FollowUp.jpg\" title=\"Click picture\" rel=\"noopener\">tutorial<\/a>.<\/a><\/p>\n<hr \/>\n<p id=\"wrpipt\">Previous relevant <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10985' title='Wordpress Recent Post Image Primer Tutorial' rel=\"noopener\">WordPress Recent Post Image 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\/wordpress\/RecentPostImage.jpg\" rel=\"noopener\"><img decoding=\"async\" id=\"qqfghjspt\" style=\"float:left;border: 15px solid pink;\" alt=\"Wordpress Recent Post Image Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/RecentPostImage.jpg\" title=\"Wordpress Recent Post Image Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Wordpress Recent Post Image Primer Tutorial<\/p><\/div>\n<p>Sometimes CSS meets Javascript meets &#8220;a few times a day&#8221; functionality, to get a job done, in this case a CSS styling job on this WordPress blog (continuing on with tutorials like <a target=\"_blank\" href='#wbctcpt' title='Wordpress Blog Code Tag CSS Primer Tutorial' rel=\"noopener\">WordPress Blog Code Tag CSS Primer Tutorial<\/a> as shown below).   The job is to put small images below the links in the Recent Posts menu on this WordPress blog.  Figure this would help &#8230; and it is good to have a reason &#8230; it would add images or pictures to content below the field of vision &#8230; this makes the blog more user-friendly we think &#8230; but, again, as with many styling issues, this is subjective.<\/p>\n<p>Why would this job have &#8220;a few times a day&#8221; functionality? &#8230; Well, the images change when a blog posting goes live, and at this blog this happens once a day, so there is no need to slow functionality down getting these images together more often than during that time the new blog posting is scheduled.  So this &#8220;a few times a day&#8221; functionality uses (the web server Linux) crontab\/curl &#8230; what a team &#8230; and we wrote <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php_GETME' title='recent-posts-2.php' rel=\"noopener\">recent-posts-2.php<\/a> to be the PHP run with a curl &#8230; chortle, chortle.<\/p>\n<p>Then our old favourite WordPress PHP header.php gets modified as with the bold code below for CSS (part 1 change of 2) &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n.mypclass { color:rgb(185,127,206); }<br \/>\n#mypid { color:rgb(185,127,206); }<br \/>\n.mypclass2 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n.mypclass22 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n#mypid2 {  background-color:rgb(185,127,206); color:'black';  }<\/p>\n<p>#ahomeis {<br \/>\n    color: #ffffff;<br \/>\n    font: 24pt Arial;<br \/>\n    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);<br \/>\n}<\/p>\n<p>code {<br \/>\n    width:90%;<br \/>\n    background-color:#F9F9F9;<br \/>\n    margin-top: 10px;<br \/>\n    margin-bottom: 10px;<br \/>\n    padding:20px 20px;<br \/>\n    border:1px dashed blue;<br \/>\n    display: inline-block;<br \/>\n    text-overflow: ellipsis;<br \/>\n    white-space: pre-wrap;       \/* css-3 *\/<br \/>\n    white-space: -moz-pre-wrap;  \/* Mozilla, since 1999 *\/<br \/>\n    white-space: -pre-wrap;      \/* Opera 4-6 *\/<br \/>\n    white-space: -o-pre-wrap;    \/* Opera 7 *\/<br \/>\n    word-wrap: break-word;       \/* Internet Explorer 5.5+ *\/<br \/>\n}\u200b<\/p>\n<p><b><br \/>\n.iconlist<br \/>\n{<br \/>\nlist-style: none;<br \/>\nmargin: 0;<br \/>\npadding: 0;<br \/>\n}<\/p>\n<p>li.one {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/one.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.two {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/two.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.three {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/three.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.four {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/four.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.five {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/five.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.six {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/six.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.seven {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/seven.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.eight {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/eight.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p><\/b><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>&#8230; and then our old favourite WordPress PHP header.php gets modified as with the bold code below for Javascript (part 2 change of 2) &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction rptwo() {<br \/>\n  var tworp=document.getElementById('recent-posts-2');<br \/>\n  if (tworp != null) {<br \/>\n    if (tworp.innerHTML.indexOf('&lt;u' + 'l&gt;') != -1) {<br \/>\n      tworp.innerHTML = tworp.innerHTML.replace('&lt;u' + 'l&gt;', '&lt;u' + 'l class=\"iconlist\"&gt;');<br \/>\n      var eight=new Array(\"one\", \"two\", \"three\", \"four\", \"five\", \"six\", \"seven\", \"eight\");<br \/>\n      var ieight;<br \/>\n      for (ieight=0; ieight&lt;eight.length; ieight++) {<br \/>\n        tworp.innerHTML = tworp.innerHTML.replace(\"&lt;li&gt;\", \"&lt;li class='\" + eight[ieight] + \"'&gt;\");<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/b><br \/>\nfunction courseCookies() {<br \/>\n<b><br \/>\n  rptwo();  \/\/ Recent Post images<br \/>\n<\/b><br \/>\n  winit();  \/\/ Ajax functionality 26\/11\/2014 ... slow hover ... not for mobile<br \/>\n<\/code><\/p>\n<p>&#8230; and if no Course Design functionality call at the <code>&lt;body onload='rptwo();'&gt;<\/code><\/p>\n<p>A live run is where you are now but you can see it again with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/\" title='Live run' rel=\"noopener\">this<\/a>.<\/p>\n<p>Hope this helps you out in some way shape or form.<\/p>\n<hr \/>\n<p id='wbctcpt'>Previous relevant <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10939' title='Wordpress Blog Code Tag CSS Primer Tutorial' rel=\"noopener\">WordPress Blog Code Tag CSS 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\/wordpress\/Code_Tag_CSS.jpg\" rel=\"noopener\"><img decoding=\"async\" id=\"fghjspt\" style=\"float:left;border: 15px solid pink;\" alt=\"Wordpress Blog Code Tag CSS Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/Code_Tag_CSS.jpg\" title=\"Wordpress Blog Code Tag CSS Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Wordpress Blog Code Tag CSS Primer Tutorial<\/p><\/div>\n<p>Explanations of software code are so many and varied these days because there are so many platforms and programming languages to get your head around, that it would be advantageous, (lazy me finally admits), that as you scan down a blog posting in that fast scan we do as we surf the net, something stands out recognizably as <i>&#8220;a piece of code&#8221;<\/i>, apart from the default WordPress theme TwentyTen styling of the <i>&lt;code&gt;<\/i> tag used in our blog here (use <i>&lt;blockquote&gt;<\/i> for non-code quotes &#8230; by the by, all this is subjective).<\/p>\n<p><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/Code_Tag_CSS.jpg\" title=\"Click picture\" rel=\"noopener\">Today<\/a> we settle on a CSS <i>&lt;code&gt;<\/i> tag styling definition that mixes a few ideas:<\/p>\n<ul>\n<li>it is important &#8220;code&#8221; line breaks where the writer of the &#8220;code&#8221; said it should<\/li>\n<li> &#8230; conflictingly (is this a word?) sometimes, you want to see everything, so allow line breaking if the line overshoots at the right hand side<\/li>\n<li>use a background colour to make the &#8220;code&#8221; text stand out differently<\/li>\n<li>use an unusual dashed border to catch the user&#8217;s scanning eye<\/li>\n<li>don&#8217;t scare the living daylights (out of the living day lights &#8230; chortle, chortle) &#8230; make the border a non-jittery colour &#8230; like &#8230; blue<\/li>\n<\/ul>\n<p>So let&#8217;s see what made this happen (for itself) with our old favourite <i>header.php<\/i> (what would we do without it!) in bold:<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n.mypclass { color:rgb(185,127,206); }<br \/>\n#mypid { color:rgb(185,127,206); }<br \/>\n.mypclass2 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n.mypclass22 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n#mypid2 {  background-color:rgb(185,127,206); color:'black';  }<\/p>\n<p>#ahomeis {<br \/>\n    color: #ffffff;<br \/>\n    font: 24pt Arial;<br \/>\n    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);<br \/>\n}<\/p>\n<p><b><br \/>\ncode {<br \/>\n    width:90%;<br \/>\n    background-color:#F9F9F9;<br \/>\n    margin-top: 10px;<br \/>\n    margin-bottom: 10px;<br \/>\n    padding:20px 20px;<br \/>\n    border:1px dashed blue;<br \/>\n    display: inline-block;<br \/>\n    text-overflow: ellipsis;<br \/>\n    white-space: pre-wrap;       \/* css-3 *\/<br \/>\n    white-space: -moz-pre-wrap;  \/* Mozilla, since 1999 *\/<br \/>\n    white-space: -pre-wrap;      \/* Opera 4-6 *\/<br \/>\n    white-space: -o-pre-wrap;    \/* Opera 7 *\/<br \/>\n    word-wrap: break-word;       \/* Internet Explorer 5.5+ *\/<br \/>\n}\u200b<br \/>\n<\/b><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>All the following links helped, so, thanks <a target=\"_blank\" title='Good CSS code tag CSS advice' href='http:\/\/stackoverflow.com\/questions\/13119441\/code-tags-css-like-wikipedia' rel=\"noopener\">Code Tags CSS like Wikipedia<\/a>, <a target=\"_blank\" title='Good CSS code tag CSS advice' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_text-wrap.asp' rel=\"noopener\">CSS3 PR Text<\/a>, <a target=\"_blank\" title='Good CSS code tag CSS advice' href='http:\/\/stackoverflow.com\/questions\/15372568\/word-wrap-break-word-not-breaking-the-code-code-tag' rel=\"noopener\">Word Wrap Break Not Breaking &#8211; The Code Tag<\/a>, <a target=\"_blank\" title='Good CSS code tag CSS advice' href='http:\/\/davidwalsh.name\/code-tags' rel=\"noopener\">David Walsh Code CSS<\/a>, <a target=\"_blank\" title='Good CSS code tag CSS advice' href='http:\/\/css-tricks.com\/snippets\/css\/make-pre-text-wrap\/' rel=\"noopener\">Make Pre Text Wrap<\/a>.<\/p>\n<p>Finally, as far as Ajax contextual help goes, the recent <i>wajax.js<\/i> changed as per the bold code below, last talked about with <a target=\"_blank\" title='' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10819' rel=\"noopener\">WordPress Ajax Mobile Friendly Primer Tutorial<\/a>:<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction getCode(evt) {<br \/>\n   bpost = 10939;<br \/>\n   if ((wisiPad || wisTouch)) {<br \/>\n   if (mtimer) clearInterval(mtimer);<br \/>\n   tickcnt = 0;<br \/>\n   mtimer = setInterval(mchecker, 1000);<br \/>\n   } else {<br \/>\n   setTimeout(xget, 4000);<br \/>\n   }<br \/>\n}<br \/>\n<\/b><br \/>\nfunction winit() {<br \/>\n      var allPs;<br \/>\n      zhr = null;<br \/>\n      zok = 1;<br \/>\n      if ((wisiPad || wisTouch) || 1 == 1) {<br \/>\n        var mybased = document.getElementById('site-description');<br \/>\n        if (mybased.innerHTML.indexOf(\"Long \") == -1) {<br \/>\n        if ((wisiPad || wisTouch)) {<br \/>\n        mybased.innerHTML = mybased.innerHTML.replace(\")\", \") &lt;br&gt;&lt;a onclick=' alert(wadvice); ' href='#' title='Long touch contextual help'&gt;Long touch help available.&lt;\/a&gt;\");<br \/>\n        } else {<br \/>\n        mybased.innerHTML = mybased.innerHTML.replace(\")\", \") &lt;br&gt;&lt;a onclick=' alert(wadvice.replace(\"touch on\",\"hover over\")); ' href='#' title='Long hover contextual help'&gt;Long hover help available.&lt;\/a&gt;\");<br \/>\n        }<br \/>\n        }<br \/>\n      }<br \/>\n<b><br \/>\n      if (navigator.userAgent.toLowerCase().indexOf(\"ie\") != (0 - 1)) {<br \/>\n       allPs = document.getElementsByTagName('code');<br \/>\n      } else {<br \/>\n       allPs= document.getElementsByTagName('code');<br \/>\n      }<br \/>\n      for (var j=0; j &lt; allPs.length; j++) {<br \/>\n           if ((wisiPad || wisTouch)) {<br \/>\n           allPs[j].ontouchstart = getCode;<br \/>\n           allPs[j].ontouchend = yehBut;<br \/>\n           } else {<br \/>\n           allPs[j].onmouseover = getCode; \/\/ 10939<br \/>\n           if (allPs[j].title.indexOf(\" ...\") == -1) {<br \/>\n             allPs[j].title = allPs[j].title + \" ... welcome to the long hover functionality that shows Blog Post regarding Code Tag CSS\";<br \/>\n           }<br \/>\n           allPs[j].onmouseout = yehBut;<br \/>\n           }<br \/>\n      }<br \/>\n<\/b><br \/>\n<\/code><\/p>\n<p>&#8230; to become <a target=\"_blank\" title='wajax.js' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js----GETME' rel=\"noopener\">wajax.js<\/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='#10939' onclick='var dv=document.getElementById(\"d10939\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10939' 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='#10985' onclick='var dv=document.getElementById(\"d10985\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10985' 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='#11008' onclick='var dv=document.getElementById(\"d11008\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11008' 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='#11388' onclick='var dv=document.getElementById(\"d11388\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11388' 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='#13264' onclick='var dv=document.getElementById(\"d13264\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d13264' 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='#13568' onclick='var dv=document.getElementById(\"d13568\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=google-page-speed\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d13568' 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='#13583' onclick='var dv=document.getElementById(\"d13583\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=apache\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d13583' 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='#13601' onclick='var dv=document.getElementById(\"d13601\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=ob_start\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d13601' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Our &#8220;quest&#8221; for speed continues, man person. This WordPress Blog (from WordPress.org (not WordPress.com)) is now using the PHP mod_deflate module to zip up the traffic going out on the web, in exchange for a higher CPU load for our &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-php-mod_deflate-speed-improvement-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":[85,151,513,528,529,551,803,853,932,997,1120,1121,1181,1319,1408,1411],"class_list":["post-13601","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-apache","tag-blog","tag-google","tag-google-page-speed","tag-google-pagespeed","tag-gzip","tag-mod_deflate","tag-ob_start","tag-php","tag-programming","tag-seo","tag-serach-engine","tag-speed","tag-tutorial","tag-web-hosting","tag-web-server"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13601"}],"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=13601"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13601\/revisions"}],"predecessor-version":[{"id":68706,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13601\/revisions\/68706"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=13601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=13601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=13601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}