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

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

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

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

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!

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

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).