Making DKIM/SPF work with cPanel add-on domains

Over the last month, I’ve begun receiving complaints from folks that emails I send are getting filtered into spam.

It seems that the evolution of the internet had passed me by, and I have failed to properly set up my email with DKIM and SPF records/kets/what have you.

Long story short, many message boards told me that this should be as simple as flipping a switch in cPanel under Email Authentication. But this didn’t work for me. Joel, the very nice fellow who answered my support ticket explained that if you’re using shared hosting for multiple sites, you have to flip the switch for the primary domain, and THEN ensure that any add-on domains are pointed at the account’s original nameservers. In my case, I’ve been with the same host a long time, so I have several name server options – and once I pointed the domains in question back at the original ones, my email was rescued from the spam folder.

Also, Big ups to protodave.com’s DKIM Checker. Saved me a lot of time.

DKIM Key Checker

 

Me vs. A Minor Edit in Squarespace – Episode 1

I was recently tasked with creating one of those ‘back to top’ scrolly buttons in a Squarespace site. I built a vanilla HTML prototype, which worked across all browsers, within like an hour.
However, upon migrating my little script to Squarespace, I found myself cursing a blue streak when I could get it to work in Chrome, but nowhere else. For anyone who encounters the same fate – it turns out the problem was how I was calling the scrollTop function – Firefox & IE do not like $(‘body’), document.body or document.documentElement on Squarespace (please tweet at me if you have found exceptions to this, or know why it happened).
In the end, here’s what worked for me, cross-browser. First, use the header code injection block to include a jQuery CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

JS (injected into the footer):

window.onload = function(){ 
  window.onscroll = function() {scrollFunction()}; //fires the animation on scroll
    function scrollFunction() {
       if (document.body.scrollTop &gt; 200) { //button appears once you scroll down 200px. To alter the appearance point, change the #
       $('#backToTop').addClass('button-visible'); //toggles the class that holds the CSS animations
       } else {
         $('#backToTop').removeClass('button-visible');
       }
     }
     var backToTop = $('#backToTop'); //button
     backToTop.on('click', function(){
        //on click, animates to the top of the page
         $('html').animate({ scrollTop: 0 }, 'fast'); //so the scroll works in firefox
         $('body').animate({ scrollTop: 0 }, 'fast'); //so the scroll works in webkit
          return false;
      });
  };  

CSS(injected into the header):

.backToTop{ 
        opacity: 0;
        -webkit-transition: opacity 0.25s ease-in;
        position: fixed;
        right: 0px;
        bottom: 30px;
        font-size: 2em;  
    }
    .backToTop::before {
        position: fixed;
        content:"\2191";
        opacity: 1;
        color: #9b1408;
        margin-left: 20px;
    }
    .backToTop::after {
        content:"";
        background-color: #aaa;
        opacity: 0.4;
        z-index:-999999;
        padding: 10px 30px;
    }
    .button-visible{
        opacity: 1;
        -webkit-transition: opacity 0.25s ease-in;
        transition: opacity 0.25s ease-in;
    }

HTML (which I put in a code block in the footer):

<span id="backToTop" class="backToTop"></span>