The only interstitial popup I’ve ever liked

interstitial popup

This is the only interstitial popup I’ve ever liked. When visiting a UX company’s website, the contact page presented this:

interstitial popup

Why do I like this one? It makes me feel like I am talking directly to the company, and that they care why I am here. This pop-up is not trying to sell me something. It’s not (yet again) asking me sign up for your stupid email list. It is simply asking a question, and I am most likely to answer.

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

Case Study of Schema Proper Markup

schema example

While checking the NAP (Name Address Phone) details on my clients location in Google Maps, I saw a clear case study for implementing Schema data with proper markup code. No other work was done for the local business on Google maps, but we can clearly see a link to it’s menu. When this website was published some years ago, I implemented the markup on just the menu items to denote them as “menu”.  This markup is used to better index information for findability purposes.  Because every item on the menu page is designated as “menu”, Google knows that this is the menu page for this establishment, and has conveniently added a link to the menu page. This was done organically, meaning we didn’t directly tell Google to put that link there, but Google put that link there on it’s own.

schema example

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

Footer Idea

website footer idea

I always liked this type of footer, with the support people lined up to show the real human faces behind the support team or help desk.  I wonder if these are the real employees or models? If it were a staged photo,  it seems like the models would have been more diverse. At least they have the token (one) woman.

So my idea from this is to have my own footer with the many faces of “Sandy”.  A conglomeration of separate photos of me in different outfits, with different duties or aspects of my life. It would range from a baseball hat, pigtails, Burning Man outfit, to a full-on business suit, and every variation in-between. This would allow me to get creative with my persona’s.