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>

Show your Support for First Peoples’ Radio!

Did you glorious nerds know that the fine folks behind APTN are applying to launch radio stations in 5 major urban centres (specifically Ottawa, Toronto, Edmonton, Calgary and Vancouver)? I was delighted to learn this for a number of reasons, not the least of which is that I’m a huge fan of the work APTN does, so I imagine their radio presence will be equally awesome.

In order to be a broadcaster in Canada, though, you need to get a license from the CRTC. Right now, First Peoples’ Radio Inc (FPR) is going through that application process – and we can help them to get a license by taking a sec to send in a message saying that they deserve one. Continue reading “Show your Support for First Peoples’ Radio!”

WTF is SSHing into a server?

uh-oh-thumb

You know that moment when you realize, “Uh oh, I’m in WAY over my head?”

I have a lot of those.

A few years ago, I was asked by a colleague to SSH into a server and grep for a file. At the time, this sounded like total nonsense to me – however, since this person clearly thought I SHOULD know how to do whatever this meant, I just said “You bet!” and just started googling furiously. Here’s what I needed to know in that moment. Continue reading “WTF is SSHing into a server?”

Deploying an App to Heroku (with Git) for Beginners

error

After recently completing a Rails 4 tutorial, I was faced with a frustrating challenge: how the !#$% do I get my new app out in the internet? A former colleague had suggested using Heroku for app hosting while I was in the learning stages. Since the kind of beginner apps I’m creating won’t really take up a lot of space, he said, why bother buying hosting?

An excellent point, but easier said than done. I had built 3/4 of a recipe app on Rails last year, but I was thwarted and eventually gave up when I could not for the life of me figure out how to push my app out on the line. I recently undertook the challenge again though, and finally managed to do it – so for anyone else who needs the beginner’s version to deploying, see below.

Continue reading “Deploying an App to Heroku (with Git) for Beginners”

Setting up jQuery

Oh, the pain of trying to implement a pre-made script from the internet when you don’t understand how it works! I used to go through this all the time –  I’d find someone’s plugin for a sweet jQuery carousel or lightbox or hover effect, but I didn’t understand enough code to figure out what I was doing wrong, and get it working. I didn’t even really get the basics – where does the call for the script go? Do I put all the jQuery right in my markup? Does it go in the header or the footer? And of course, WHY WON”T THIS WORK?!

If you’ve ever experienced this bang-your-head-against-a-wall frustration, I hope I can fill in some of the blanks for you. This  post is intended for beginners, who want to understand the basics of how to set up their (or anyone else’s) scripts. It assumes you are familiar with HTML, CSS, classes and ids.

jquery

Continue reading “Setting up jQuery”

wpyeg November

he

I was lucky enough to be invited to do a beginner level presentation at the recent WordPress Edmonton meetup. I talked about my brief (but really fun!) stint as a Happiness Engineer with Automattic – I got through my training and few days of solo work before realizing that I wouldn’t be happy in a job that require very little code, and bowing out. I’m attaching the slides from my presentation for anyone interested.

Happiness Engineer Slides

Cross Post: Ain’t No Shame in Quitting.

I wanted to link to this post  that I recently wrote about quitting, for the Edmontonian Media Co. website that Jeff and I share. Having worked in agile for about a year and a half, I’m finally learning that half the value in most projects, web or otherwise, comes from seeing what didn’t work.

But! There is also much value in seeing what you were able to accomplish, even if you didn’t cross the finish line. Case in point, I built a Rails app that actually does stuff. It doesn’t do it well, and it isn’t scalable, DRY, or even very attractive, but I made it, by myself, and I learned a whole bunch from it. Just because it doesn’t meet the goal I set for it in my ambitious brain doesn’t mean it was a failure. I’d rather just call it Success Lite.

How to use SimpleWeather.js with WordPress, Pt. 2

As previously mentioned, I had quite the battle implementing SimpleWeather.js into my custom WordPress theme (entirely my own damn fault). I finally got it up and working, though – and I’m going to outline how I did it, and what I needed to debug to get things working as I wanted.

This tutorial is a basic rundown, suitable if you’re just looking to have the weather from your hometown – or any single, static location  – load in your theme. I’ll explain how I was able to use WordPress to pull up dynamic weather info for different cities in a future post.

The Basic Version

First, download the scripts from SimpleWeatherjs.com. There’s going to be a whole sassy buttload of stuff in there, but what we want is jquery.simpleWeather.min.js. Put it into your themes’s JS folder.

Next, in your functions.php, enqueue this script. If that sounds like crazy moonman lingo, there are docs for the wp_enqueue_script function in the codex. The coles notes is that you’re adding

wp_enqueue_script();

into which you’re going to pass a couple of parameters – here’s what you’re doing, conceptually:

wp_enqueue_script('a handle for you to call your script', 'a place for WP to find your script', 'an array of any scripts this script depends on', 'what version is this','whether you want to load it in the header or footer');

In terms of real code, this is an example of what it could look like:

wp_enqueue_script('simple-weather', get_stylesheet_directory_uri() . '/js/jquery.simpleWeather.min.js', array('jquery'), '', true  );

You’re saying “I’m going to refer to this script as ‘simple-weather’; you can find it in my theme’s javascript directory; it requires jQuery to run (which, FYI, comes preloaded in WordPress); this has no real version number, so don’t add one; and yes, i want this script to load in the footer.”

How do I know if it’s loading correctly?

I’m going to have to assume, for brevity’s sake, that your browser of choice is Chrome (though all browsers have some form of browser inspector). In Chrome, right-click, Inspect Element, and look at the markup before the closing body tag. Your script should be loading there.

Screen-Shot-2014-07-02-at-11.37.37-AM
(The blurry part is me just sparing your from the my local directory path)

If it isn’t loading there, check your console for an error (you’ll see a little red circle with an X).

Screen Shot 2014-07-02 at 11.42.35 AM

If you’ve gotten this far, take a moment, congratulate yourself. Then remember that nothing is ever truly done, it’s just due, and get ready to complete the next step – getting the code in to specify exactly what kind of weather details we want.

How do I specify my location etc.?

You’ll probably be able to complete this part very easily, since it’s exactly the same thing that we just did – but this time, we’re going to include a new, blank JS file to put our custom code into. Let’s call our custom file my_weather.js, and put it into the same folder we put our SimpleWeatherJS file into.

Once again, you’re going to:

1) use the wp_enqueue_script function to load your file. Here’s how I did it:

wp_enqueue_script('simple-weather', get_stylesheet_directory_uri() . '/js/jquery.simpleWeather.min.js', array('jquery'), '', true  );
wp_enqueue_script('custom-weather', get_stylesheet_directory_uri() . '/js/my_weather.js', array('jquery'), '', true  );

You’ll notice that I’m loading my new file after the plugin. This is really important, and screws me up a lot of the time – you have to load JS files in the write order to get them to work. First, WordPress loads its included jQuery file; then we load our weather plugin file, and THEN we can load our custom file. This is because the script we’re going to use is dependant on the simple weather plugin. If our custom script loads first, it’s going to look for the simpleweather plugin, which isn’t there.

Once you’ve included this code, you can test whether it’s loading correctly by putting an alert in the blank file (if you want more details, I wrote about troubleshooting your jQuery in a previous post).

In a World where you have successfully set up your files…

SimpleWeatherjs creator James Fleeting makes setting up this plugin this crazy simple, by giving up a ton of snippets on codepen to work with. There is a ton of tweaking you can do, using everything from descriptions of current conditions, to extended future forecasts, but let’s keep it simple (I like battles I can win). Put the following code into your my_weather.js file

 Docs at http://simpleweatherjs.com
jQuery(document).ready(function() {
  jQuery.simpleWeather({
    location: 'Austin, TX', //this is where you can plug in your location
    woeid: '',
    unit: 'f',
    success: function(weather) {
      html = '<p>'+weather.temp+'&deg;'+weather.units.temp+'</p>'; //this is the type of weather information you've selected
  
      jQuery("#weather").html(html); //this is telling you that this code will load on your page in an element with an ID of div
    },
    error: function(error) {
      jQuery("#weather").html('<p>'+error+'</p>');
    }
  });
});

(You may notice that this code is noticeably missing the ubiquitous jQuery dollar signs. That’s because WordPress wants its jQuery in noConflict mode – so instead of using a ‘$’, you just write the word ‘jQuery’.)

Seal the Deal

Finally, we need to add markup where we want our weather details to render. In my case, I want it to show up in the sidebar – so I’m going to open up my sidebar.php file, and add a div with an id of ‘weather’.

<div id="weather"></div>

Screen Shot 2014-07-04 at 2.11.40 PM
Now refresh your page! Congratulations, computer wizard!