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

My Summer Reading List

I’m an idea junkie and a pretty high-level book hoarder. My tendency is to go on reading benders, tearing through a half-dozen books in a row and then slow down, going through phases where I grab a book, read a few chapters, get excited about an idea, and then get distracted from finishing the whole thing. This pattern has resulted in me having a to-read list that is pretty much impossible to complete.

The list below is not every book in my collection (I have pared it down to a combination of the ones I already started at some point and the ones I most urgently want to read). I’ve made the list to try and stop myself from accruing any more books. I need to take a dent out of this list before I start adding anything else to my collection.

Books: Things A Little Bird Told Me

assumptions

I’ve been reading a whole lot lately, and I just finished Biz Stone’s new book “Things a Little Bird Told Me: Confessions of the Creative Mind.”

It’s an interesting read for a number of reasons – hearing about Stone’s ascent to the height of startup rock stardom is genuinely compelling – but I was absolutely bowled over by the heart he puts into his work. I highlighted so much of this book I probably threw the Kindle stats way off for everyone else.

“We make assumptions all day long about the world we live in and the people who inhabit it. The guy who cut you off on the highway entrance ramp is an asshole. The colleague who didn’t deliver what she promised is incompetent….

“If we probe what’s behind our assumptions, what we find isn’t knowledge or wisdom. It’s fear. We’re afraid that other people’s ideas will make us look less than.

“We should always seek knowledge, even in the face of fear. And so I gave the Twitter employees a set of assumptions that I hopes would replace their fears, reminding them to keep their minds open, pursue knowledge, and see the bigger picture.”

I took those assumptions and made myself a graphic I could hang over my desk. Click on it above to download.

Get the Kindle version that I probably ruined for everybody here.

Mobilizing Web Sites

 

Recently, my work team was lucky enough to participate in a virtual user experience workshop (User experience, or, as it’s more commonly known, ‘UX’, is a term commonly used to encompass planning and designing for interactive properties. Official definition here.). We saw several presentations from well-known designers, developers and content strategists like Karen McGrane, Luke Wroblewski and Jared Spool. They all talked about different ways to help improve the experience of users on your website or application.

One book that was referenced repeatedly is “Mobilizing Web Sites“, by Kristofer Layon. I recently finished reading and enjoyed it tremendously.

Layon, a former architect, draws a lot of interesting comparisons between designing for the web and designing actual buildings. He perfectly articulates a common frustration web designers face:

“Among other factors, the allure of creating something new is what drives many of us into the field of web design. Images, text, and code: the thrill of an empty browser window with a new interactive design that we have created is exciting and satisfying. So when we are instead face with incremental updates or improvements to existing web properties, it can feel more mundane. Where are the creative opportunities in that?”

But, as he points out, this is the case not just for web designers, but for all creative professionals. The key, he says, is not necessarily to create more things from scratch, but to re-examine how we look at renovation or update projects.

“A renovation or reuse project isn’t really just an old project with a new layer. It is a new project with a different set of constraints, and a unique set of existing conditions and context.”

Layon then uses the remainder of the book to walk us through updating a fixed-width site for mobile, through layout, navigation, images, text, forms and more. Published in 2011, some of the technology is already out of date, but the core of the book is incredibly valuable – there are no small projects, if we look at them the right way.

Kristofer Layon’s website

Get the book on Amazon

 

 

 

Wraith CSS Testing Tool

5471a0f4f50fc005269aa56743ef8676

I discovered a very cool new application from the BBC today​. It’s called Wraith, is built in Rails, and lets you select two urls to compare the interface between. It scans both sites at multiple resolutions, takes screen caps, and then creates thumbnails for you to review.

This is really handy for front end developers, because it lets us see at a glance if new CSS or HTML we’ve written has broken something on a page in the live site we hadn’t expected – without us having to scan through a bunch of​ pages manually.

Github repo here​.

8 months later…

…YES, I fell off blogging pretty hard – but I did keep coding! Since my last post, I’ve done a few things:

I’ve also been a frequent volunteer at Ladies Learning Code events ( I was lucky enough to lead their recent session on Photoshop and Illustrator, slides here), have real reputation points on Stack Overflow (which again, makes me feel mad legit) and was part of the team that built the new, WordPress-based AMA Website.

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.