Checking on DNS

LeafDNS

Recently I had to check on a DNS problem at work, and the support person said “the DNS isn’t even pointed at us (the hosting)”.  I asked him how he could see that, and the response I received was:

Hey Sandy,

I rely on a Chrome extension that tells me what the IP address is for the particular page I’m on. Everybody has their own way of digging into this.

You can also use a tool like http://leafdns.com/ to get a view of the DNS records for a given parent domain.

Cheers!

I checked the leafdns website and I could see the nameserver error and the IP’s pointed at the domain in question (of course not the correct ones).  Filing this here for the next time I need to diagnose / troubleshoot DNS problems.

LeafDNS

Affix a class on scroll

Code Snippet

Bootstrap’s data-spy functionality was working, but then it started getting hung-up and not loading.  This site had the possibility of caching from 3 different sources (Bootstrap CDN, hosting caching, and Cloudflare CDN) and I think it was not allowing resources to load correctly.  I eliminated the data-spy option, and went straight to executing with just JavaScript, which seemed to eliminate the erratic behavior.

//caches a jQuery object containing the header element
var bumperredcon = $(".noBumper");
//the data-spy functionality for bootstrap stopped working, prob conflict with caching. Disable dataspy, rely only on this JS to add/remove the .affix class.
var bumperwhitepart = $(".noaffix");
$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 100) {
bumperredcon.removeClass('noBumper').addClass("navBumper");
bumperwhitepart.removeClass('noaffix').addClass("affix");
} else {
bumperredcon.removeClass("navBumper").addClass('noBumper');
bumperwhitepart.removeClass("affix").addClass('noaffix');
}
});

The bumperredcon and bumperwhitepart are just some variables I have to declare so the script can continue to look for the actual named classes to remove (and then add). So unlike CSS or other coding techniques, it’s not actually looking for #bumperredcon nor #bumperwhitepart, those do not exist in my DOM.  It’s like I had to create a “car” and that car looks around the DOM for the specified classes it is supposed to add and remove.  Additionally, I had to add “noaffix” as the default class so the car had something to look for to get to replacing.

This was a bit of a hard concept for me to understand.

Improving Google PageSpeed in WordPress

Google PageSpeed 100

I set out to improve my Google PageSpeed score to 100. Through many trial & errors, I finally dumped my current theme and used just the default 2016 WordPress theme. Technically I should create a child theme if I was going to put it into production, but I just needed some insight so I ripped into the parent theme.

The end results for making 2016 theme score 100 is:

  1. Remove the external stylesheet style.css, minify it, and place it in the head.
  2. Remove references to Genericons and specialty fonts out of the functions.php file
  3. Minify the functions.js file
  4. Add this to functions.php to move the jquery scripts to the footer:
add_action('wp_enqueue_scripts', 'rudr_move_jquery_to_footer');  
 
function rudr_move_jquery_to_footer() {  
 	// unregister the jQuery at first
        wp_deregister_script('jquery');  
 
        // register to footer (the last function argument should be true)
        wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);  
 
        wp_enqueue_script('jquery');  
}

This last step got me past the dreaded “remove render-blocking js”.

Practicality?

While this theme is now technically scoring 100, getting a site ready for production will be a little harder. As plugins are added and dependencies appear, the score will decline, but at least I now have a basis to start from (start a new theme) and can work on the score each step of the way.

Bookmark: Function found here:

https://rudrastyh.com/wordpress/render-blocking-javascript-css.html

 

Google PageSpeed 100

Removing p tags from WordPress

WordPress logo

Does this really work? Need to test it.  Yes, it removes the p tags, but does it allow the javascript snippet in the post to run?

//Removes the p tags when code is placed inside these 2 tags inside post
//but does it do it in time for the js code to actually run?
// <!– noformat on –> <!– noformat off –>

function newautop($text)
{
$newtext = “”;
$pos = 0;

$tags = array(‘<!– noformat on –>’, ‘<!– noformat off –>’);
$status = 0;

while (!(($newpos = strpos($text, $tags[$status], $pos)) === FALSE))
{
$sub = substr($text, $pos, $newpos-$pos);

if ($status)
$newtext .= $sub;
else
$newtext .= convert_chars(wptexturize(wpautop($sub))); //Apply both functions (faster)

$pos = $newpos+strlen($tags[$status]);

$status = $status?0:1;
}

$sub = substr($text, $pos, strlen($text)-$pos);

if ($status)
$newtext .= $sub;
else
$newtext .= convert_chars(wptexturize(wpautop($sub))); //Apply both functions (faster)

//To remove the tags
$newtext = str_replace($tags[0], “”, $newtext);
$newtext = str_replace($tags[1], “”, $newtext);

return $newtext;
}

function newtexturize($text)
{
return $text;
}

function new_convert_chars($text)
{
return $text;
}

remove_filter(‘the_content’, ‘wpautop’);
add_filter(‘the_content’, ‘newautop’);

remove_filter(‘the_content’, ‘wptexturize’);
add_filter(‘the_content’, ‘newtexturize’);

remove_filter(‘the_content’, ‘convert_chars’);
add_filter(‘the_content’, ‘new_convert_chars’);

AMP Accelerated Mobile Pages

Lightning bolt symbols AMP compliant

Accelerated Mobile Pages is an open source project aimed to make news pages load faster on the web. It dictates how the page resources are loaded, primarily Javascript, because JS can be a resource hog that does not allow the rest of the page to load until it finished loading all it’s JS first. This is called render-blocking JS. It also requires knowing the dimensions of your assets so it can take control of your page layout. In other words, it knows the final dimensions of assets in the page, so it won’t half load the content, allow the user to start reading, and then have content “jump” around because it’s still loading content. This is a particularly painful point around ads, because this is what a slow-loading ad does to the user experience. Additionally, users are turning to “ad blockers” to mitigate the poor user experience. The AMP project is finding a solution that benefits not only the user experience, but a better solution for monetized publishers also. The hope of the project is to have content, and ads, load so fast that utilizing a 3rd party ad blocker will be the slower experience, thus eliminating the need for the blocker.

To load fast, there are certain rules a developer must follow when implementing the website. Most of these rules are centered around loading all JS files async, portion-sizing the CSS down to what is needed at just the page level, concentrate on loading above-the-fold content immediately, and limiting CPU usage.

WordPress is adopting the AMP methods so we might see this baked-into core WordPress in the future. Right now there are a couple of plugins available. I downloaded and tried the AMP plugin on this blog and observed what it is doing.

AMP research
Comparing the website with and without the AMP plugin for WordPress.
  • To see the AMP styling, you have to append “/amp” to the end of your URL.
  • It adds the appropriate js framework needed to make the page AMP compliant.
  • It adds “async” to javascript files so they are not render-blocking.
  • It added it’s own CSS to the head of the page, including @font-face definitions for custom fonts
  • It removed the main navigation and sidebar
  • Images are replaced with amp-img so the SRCSET is baked right into the solution.
  • Speed test shows the AMP page scores an 88 for the speed test, while non AMP page scores 32.

You don’t get to choose which version of the page the user sees, that is handled by the Google Cache System.

Plugins are only able to AMP the POSTS, not pages and not the archives.

The key strength of AMP isn’t just that it makes your pages fast, but that it makes your pages fast in a way that can be validated.” So I guess this is the advantage AMP has over using just a CDN to deliver speed.

See that Lightning Bolt?

At first I thought this was a sign of AMP compliant pages, but it is instead a symbol of Facebook’s Instant Articles:

AMP in the wild
AMP in the wild: on Facebook

I clicked it to see what it looks like, and it really was “lightning” fast, and this is what the article looked like:

AMP article found in the wild

This article has 3 sponsored ads in it that I scrolled right on by… but the ads were just as fast as the content delivery so as a user, I really didn’t mind them being there because they did not hinder my experience.  This article also has an embedded video that auto played as I scrolled over it.  I wasn’t too thrilled about the sound coming from my phone (since I was at work) but even the video, sound, and ads never slowed down my browsing experience.

Notice the URL for this ends in .html.

 

Jquery code for Analytics Event


var url = window.location.href;
url=url.split(".");
var subdomain = url[0];
console.log (subdomain);

$("form").submit(function(){
ga('send', 'event', 'FormSubmission', 'ClickedSubmit', subdoman);
});

Resources for Me and My Team

I am keeping this reference for myself! I am sure I will come back to it.

Short URLs on WordPress: http://premium.wpmudev.org/blog/shortened-links-like-bit-ly/?utm_campaign=Roost&utm_source=Roost&utm_medium=push

http://www.usertesting.com/blog/2013/11/07/10-tools-every-user-experience-pro-should-know-about/?utm_source=twitter&utm_medium=social&utm_content=Edgar&utm_campaign=10+tools

and

http://blog.invisionapp.com/7-free-resources-every-product-designer-needs/

http://blog.invisionapp.com/14-design-podcasts-to-put-in-your-ears/

 

jQuery FIND

When trying to traverse downward in the DOM (this), utilize the FIND. I knew I was close, but I wasn’t sure how to say “find it only in THIS element only”, not all elements with this name.

jQuery(‘.call’).hover(

function(){ jQuery(this).find(“span.calltitle”).addClass(‘calltitlehover’);
},

//jQuery(“span.calltitle:first”).addClass(‘calltitlehover’) }, <!– WHAT I WAS TRYING TO DO, TARGETS ALL ELEMENTS ACROSS THE BOARD –>
function(){ jQuery(this).find(“span.calltitle”).removeClass(‘calltitlehover’) }
)