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>

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”

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!

Passing a php variable to jQuery OR Why I insist on making everything harder than it needs to be, Pt. 1

modal

This took me 2 days to crack, and it should’ve only taken me an hour. This could also be filed under “How to use SimpleWeather.js with WordPress.”

Currently, I’m working on a project where I’m using WordPress to show a series of travel products, each with unique content like destination cities, product descriptions, price, and more.

The products are presented in a carousel, and when a user clicks on the ‘Learn More’ button, they’ll see a modal with additional information, photos, and location specific data; specifically, I wanted to have the weather show up for each destination city.

carousel
Products post type is queried to create a carousel of hotels, or resorts, or whatever.
modal
A modal opens with details about this product, including a custom weather forecast, based on city.

I opted for James Fleeting’s gloriously elegant simpleWeather.js, which pulls weather info from Yahoo. It’s beautifully documented and very easy to use. Unless you’re me.

My travel products are a custom post type, which I query to create a carousel. So, for instance, on my hotels page, I query all travel product posts with a category of hotel. I put those into a carousel, and show and hide additional data in a modal, which is where I wanted to show the weather. This meant that I would need to pass the destination city into simpleWeather dynamically.

simpleweather var CodePen

Where I got hooked for TWO PAINFUL DAYS was passing a php variable to my jQuery. I was trying wp_localize_script seven ways to Sunday before it eventually occurred to me that, hey, I could probably just go into my modal include, and say:

<script>
var weatherlocation = <?php echo $custom_field['destination']?>;
</script>

Yes, it was that easy. In your file, whether it’s a page template or an include or whatever, just open some JavaScript tags, create a new JS variable and assign it a value of your echoed custom field.

(In my case, getting dynamic weather working in each location-specific modal required a bit more code, which I’ll outline in part two. But as a quick and dirty method to pass variables from php to jQuery, this works just fine).

Day Six

I’ve shifted gears a bit to JavaScript, both to keep myself interested and to get a better handle on programming principles. I’m concerned that my basic understanding of programming principles is too weak for me to really make sense of rails. I’ve been doing a few codeacademy games, some treehouse tutorials and some reading.  I think my previous error has been trying to learn to much passively, through books and videos, instead of trying to make things.

I decided to go back to basics a bit, after a conversation with a co-worker and accomplished Rails programmer today – he said that a common mistake people make is that they try to learn Rails first and Ruby afterwards. So I want a better sense of programming in general before I go plowing ahead.

Day Five

My discovery of the day, from Getting Started with Rails:

2 What is Rails?

Rails is a web application development framework written in the Ruby language. It is designed to make programming web applications easier by making assumptions about what every developer needs to get started. It allows you to write less code while accomplishing more than many other languages and frameworks. Experienced Rails developers also report that it makes web application development more fun.

Rails is opinionated software. It makes the assumption that there is the “best” way to do things, and it’s designed to encourage that way – and in some cases to discourage alternatives. If you learn “The Rails Way” you’ll probably discover a tremendous increase in productivity. If you persist in bringing old habits from other languages to your Rails development, and trying to use patterns you learned elsewhere, you may have a less happy experience.

The Rails philosophy includes two major guiding principles:

  • DRY – “Don’t Repeat Yourself” – suggests that writing the same code over and over again is a bad thing.
  • Convention Over Configuration – means that Rails makes assumptions about what you want to do and how you’re going to do it, rather than requiring you to specify every little thing through endless configuration files.

I kind of get it…BUUUUT i also kind of don’t.

Day Four

Today was all about researching the MVC, or model view controller, framework. Well, I don’t know if it’s a ‘framework’, but it’s a setup for building an app. Basically you separate your app’s code into sections. The model is the data that the app contains, the controller is the guys of the app that pull data from the model and push it to the view, and the view is the markup and front end ui.

I think. At least that’s what it seems like so far.