How Often Do You Try New Things?

Web design in complicated and requires a lot of time and knowledge — and patience. It's no longer just embedded text background images and slices; it's interactivity and dynamic content, it's HTML5 and mobile development, it's JSON objects and Local Storage.


No, I’m not talking about trying base jumping, I’m talking about how often you try new things in web design. Recently, Louis Lazaris of Impressive Webs wrote an article titled “Skills for Front-End Developers”  where he compiled a long list of “things” that a front-end developer (or web designer in my eyes) should know. There were forty-three items on this list, ranging from jQuery to the Canvas API. It may be a daunting list of subjects and technologies to know, and you may think that he’s completely off base in compiling this list. But he’s actually not too far off.
Web design in complicated and requires a lot of time and knowledge — and patience. It’s no longer just embedded text background images and slices; it’s interactivity and dynamic content, it’s HTML5 and mobile development, it’s JSON objects and Local Storage.

But beyond the many technologies to know and love, web design is also moving target. It changes all the time, month to month and week to week so if you’re not learning the new trends and technologies you’ll get left behind really quickly. Staying ahead of the game means you have to try and learn new things quickly. It’s an arms race. A race to better, more efficient designs, a race to embrace new technologies and methods before the next guy. It’s a huge messy world of languages, grids, typography, fonts, management systems and platforms — most designers tend to get really proficient at a few aspects of the web and neglect the rest. But while perfecting one or two aspects is great, what happens when the web changes tomorrow and those technologies are left behind?
I’ve compiled a little list of my own, a list of ways you can begin to try new things — not really a list of things to try, but a list of resources and ways to try them. I’ll go into detail on each one of them below but here’s the quick list of items:

• Follow Design Magazines
• Write About Stuff
• Give Up One Hour a Day to Learn
• Take an Online Class
• Work on a Side Project with a Buddy
• Join a User Group or Two
• Become Bilingual
• Do Something Other than Web Design

Read Design Magazines

Fifty percent of the web is made up of design mags. Okay, not really, but it sure seems like it. There are literally thousands of really great design blogs on the interwebs that publish regular if not daily content on design subjects of all kinds. I think my Reader is up to three hundred different magazines that I glance at on a regular basis and no I don’t read them all… that’s why catchy headlines are important.
If you don’t have a few favorite design blogs by now you need to find a couple. May I suggest Codrops.com? I started with Smashing Magazine just like everybody else, I call it the gateway mag for web design. Just start somewhere and find those that interest you the most. Regardless of subject matter, most blogs publish so often that they can’t help but stay up to date on trends. Reading and participating in these design blogs will also bring you into the vast, open and friendly design community and making you a part of it.

Write About It

I started writing about web design about a year and a half ago. I started a weird little blog and just started to write about stuff I knew. Then I realized that one of the best ways for me to learn new things was to write an article about it. It forced me to research the topic, learn the technology, and digest what I learned via writing. It’s a great way to learn and try new things without all the pressure of project deadlines or a boss breathing down your neck.
Starting your blog is a great first step into exploring new things, plus, managing your own site can be an education in itself. But also consider writing guest posts for other magazines. Most magazine love guest writers and contributors because they can bring another perspective and tone their magazine as well as fill some empty publishing spots. Just hit up some of you favorite magazines and shoot them a few article ideas that you’d like to write about, I know they would be happy to have you contribute to their community.

Devote One Hour A Day

With so many design blogs and tutorials on the web just take an hour everyday to go through one of these online tutorials. Most online tutorials are an hour or so, they don’t generally require to much time on your part and they are a great way to learn new methods and tricks from other web professionals.
There are a ton of online tutorials written by industries professionals, but here are a few of my favorite places:

• LearningJquery (jQuery Obviously)
• Codrops (jQuery tutorials)
• NetTuts (everything web dev tuts)
• PSDTuts (awesome photoshop tuts)
• VectorTuts (Vector graphic tutorials)
• Script-Tutorials (Web development tuts)
• Tutorialzine (tuts for anything interwebs)

Take a Structured Online Class

Online tutorials are a great way to learn new things but they generally only provide small pieces for you to chew on. Sometimes is nice or even necessary to dig deeper into a subject or language. But for most of us full-timers auditing a college course or going back for a Master’s just isn’t in the cards. That’s where a structured online course can fill the gap. Most colleges and universities offer either online course auditing or continuing education courses, continuing education courses are generally cheaper and most of them are aimed at the working professional, so most of the courses are shorter.
iTunes University also offers a lot of great college level tech courses via Stanford University, MIT, ETSU, UC Davis and more. In some cases these tech courses are free to download and are the same courses taught on campus — minus the bookstore.
If you’re not into the whole college course thing, sites like TreeHouse and Lynda.com provide video-based courses and differing member ship packages so that you can customize your education. Both sites provide excellent courses written and taught by industry professionals who really know and practice what they preach. Most of these video classes are self-paced but still offer the structure and deep theory that you would get from a college course.
Not to brag, but more to illustrate, I actually just enrolled in an online AJAX class through my local community college’s continuing education program. It’s a six week, professor lead online course that was surprisingly inexpensive — 95 bones. It doesn’t start until the first of the year so I’ll let you know how it goes, but it looks very promising.

Start a Project with a Buddy

So you’ve just gone through a bunch of jQuery and HTML5 tutorials online and you’ve implemented a few things on your work related stuff, but your boss isn’t really hip to new tech yet so you’re fairly limited. I’ve found that one of the best ways to learn/apply new knowledge is to work on a side project — build something for yourself. Build a new web app for mobile or a funny website, but build something that you care about.
It’s also nice to find a buddy and build something together. Chances are your buddy knows more than you about most things, so it’s a good opportunity to learn from them. I have learned a great deal of stuff just working on even small projects with friends, they all have their levels of expertise on stuff so it’s nice to pick it up from them. Plus, it’s a good way to stay busy, maintaining friendships and apply the new tech knowledge that your boss refuse to believe in.

Join a Group

If the friends you know aren’t into the same stuff as you, or just being pricks about not wanting to work with you on your latest Internet scheme, I bet if you did a little bit of research right now, you’d be able to find a user group in your area on pretty much anything form WordPress to design to Javascript. User groups are great places to meet people, find jobs and just learn more about a particular technology or interest. I prefer the live meet up groups versus the online discussion groups just for the sheer interaction level, but online groups are also a great way to learn and meet people in the community.
Groups and communities can provide you with a lot of benefits and opportunities.You can learn from presentations and classes, you can meet people in your same area of interest, you can network with others to find jobs or freelance opportunities and in some case you can win free stuff! The WordCamp community is basically how I got excited and learned about WordPress. I’ve learned an awful lot form attending WordCamp events, met really good people who have furthered my education and even gotten a freelance job or two.

Learn a New Language

You’ve probably seen a developer at work wearing his new “I Ride the Rails” t-shirt from his priceless collection of ‘I’m smarter than you’ t-shirts collection, but you probably didn’t realize it had something to do with the web — maybe just a new gaming meme. Learning a new web language can be challenging if you’re like me, but in the age of web design it’s a great way to keep up. I’m generally only fluent in HTML and CSS, but I can speak a little PHP and Javascript — even a few dialects like jQuery and Prototype.
Learning even the basic syntax of other languages not only teaches you to be aware that they are out there, but they also expand your knowledge of web programming in general. Learning new languages can actually be pretty fun once you get past that awkward phase where everything is flying over your head, but once you enter the bull shitting realm you’ll be able to use what you know to write and share your own snippets. Oh, and if you still don’t know what Rails is, then might I suggest Rails For Zombies.

Get Outside the Box

Since the web can sometimes be this super overwhelming place of intertwined media and technologies where once a month a new technology is king, it’s important to get out and remember why you started designing web sites and apps in the first place. It’s good to get outside the web and learn something else every once in a while. Go buy an oil painting book and learn to paint. Try your hand at comic book illustration, or go take a class in woodworking at your community college.
These types of outside learning experiences may not seem to apply to the web at all, but they actually do three things: add more design knowledge to your brain, give you a different perspective on design, and allow you to re-kindle your passion for design and creativity. Doing other design related things like drawing or painting allow you to refocus on core compositional principles and help you see things in web design that you haven’t noticed before and be able to apply them.
For me, one of the hardest things was finding creativity when coding. Writing code can seem like such a task, just a necessary evil of reproducing your brilliant designs, but I’ve actually discovered that writing code is just another medium for creation, just like painting or sculpting. It’s only been through recent study of architecture and industrial design that I have found the technical side of the web to be creative. Learning new things outside of the the web design world allows you to see it differently or even from a new perspective.

How often do you try new things?

As web creators there is a lot to learn out there and there have been specific lines drawn in the past as to who knew what. Previously the web consisted of graphics designers, developers, user experience specialist and project managers. But today those lines are becoming more and more blurry day by day. Users demand more interaction and this means that we, the creators, must interact more as well. Try new things often, if not daily, even if this means you’ll never become proficient at any one thing you try, even a small experience with one thing can make a huge impact.

Featured image credit: http://buzzaurus.com

Checklist: Things You MUST DO Before Changing WordPress Themes

If you have used WordPress, then you have probably switched themes at least once in your life. If you haven’t, and this is your first time, then it is even better. The beauty of WordPress is that it makes it very easy for users to change themes. It is literally few clicks away. But changing themes is much more than simply clicking activate. In this article, we will provide you with a checklist of things that you MUST do before changing WordPress themes. These steps are critical to make sure the process goes smoothly otherwise you can end up losing elements that you did not mean to lose.

1. Take Notes on Your Current Theme

Many WordPress users surf the web to find solutions to their problems. Often they find those solutions in form of snippets that they add manually in their theme such as the functions.php or another file. Because these changes were made once, people have a tendency of not remembering them. Go through your theme files and note down all additional code that you added. You also want to check your current theme’s load time because this way you can compare the two. Go to a site like Pingdom Tools or use YSlow to test out different pages (Yes different pages, not just the homepage).

2. Be cautious of the Sidebars

You must make sure that your new theme is widget-ready. Sidebar widgets are really easy to use therefore a lot of users use it to customize it. We notice that sidebars are probably the most user-customized area of WordPress sites. People make tons of changes such as adding custom texts, images, links, advertisement, and other widgets. If you are using a widget-enabled theme, and you switch to a theme that is not widget-ready, then you will lose all of that. If you are using a widget-enabled WordPress theme, then this is not an issue.
Also anything that you modify in sidebar.php file of your old theme, will be overwritten. So make sure that you add those codes in the new theme sidebar.

3. Don’t lose tracking

Most bloggers use some sort of analytics whether it be Google Analytics, or one of the other services. A lot of us don’t use plugins to add the tracking codes. Some of us open the footer.php file and modify the codes. Some of our themes have a spot to place the adsense code. Whichever one is your case, you want to make sure that you copy and paste your tracking code to your new theme. This is one of the things that is very commonly overlooked by users. Because it is so simple, most of us forget about it.

4. The Good ‘ol RSS are you working?

A lot of us use FeedBurner for our WordPress RSS Feeds. One of the parts of integrating FeedBurner into WordPress is pointing your default feeds to FeedBurner this way you can have analytics on your feed subscribers. A lot of themes like Genesis, Headway Theme, Standard Theme, and others allow you to integrate FeedBurner from their settings panel. You need to make sure that you keep the feed directed to FeedBurner otherwise there will be two RSS feeds for your blog. The main WordPress one, and the FeedBurner one which is taking the info from your WordPress RSS Feed. Except, you will lose count of a lot of the subscriber that you had because they were subscribed using the /feed/ url which no longer points to FeedBurner. Again, this does not mean you lose them, it just means that you can’t see them in the FeedBurner count.

5. Backup!!

You never have anything to lose by creating a backup. As a precautionary measure, you should backup all of your theme files, plugins, and the database. Although nothing should happen, but you can never be to safe. You can use BackupBuddy to create a full-site Backup for you.

6. Maintenance Mode

You probably don’t want your users to see while you are making the switch because they will end up seeing a broken site or such. It is best to turn on Maintenance mode for 15 – 20 minutes that it may take you to make sure that everything is working properly. Once you have setup Maintenance mode, you are good to go ahead and activate the new theme.

7. Testing all functionality and plugins

Once you have the new theme activated, you need to make sure that you retain all the functionality and plugins still work. Remember that good ol’ notes list that you created in step 1. This is the time where that can come handy. Go back and add any and all functionality that you want to bring from the old theme into the new theme if you haven’t done so already. Try out all the features including but not limited to the commenting process, single post pages, search, 404 page, archive page, contact page etc. Make sure all of your widgets are still there and are working.
On the plugin front, you just want to make sure that the formatting is still the same. A lot of plugins utilize your existing styles to display their output. So you probably want to make sure that they still look good with the new theme.

8. Cross Browser Compatibility

Test your site in all browsers you have access to. Browsers have a tendency of rendering things differently. Specially Internet Explorer. You want to make sure that your design looks good in major browsers. Some pretty looking themes have a tendency of breaking in various browsers. So if a lot of your audience is using Internet Explorer, then you want to make sure that it is still accessible to them.

9. Make those Third Party Items look pretty

If you are using Google Adsense or another ad company that allows you to format them, then your best bet is to customize them. For example, you previous site was orange, so you had orange links for Google Adsense. Now if it is blue, then you probably want to take that into account.
Same goes for twitter widget, facebook like buttons etc. Adjust those with your new color scheme. If you are going from a light to a dark design, or vice-versa, then you need to make those changes.

10. Let your Users Know

Turn off maintenance mode, and write a quick blog post to let the users know. Notice, you only spent like 15 – 20 minutes on checking things. There is no way that you could’ve catch all the bugs. By letting your users know, you can expect to get bug reports.  Ask your audience via twitter, facebook etc to see if the site looks good in their browser. If they say YES, then its good news. If they say NO, then ask them to please take a screenshot of the issue. You can take a look at the issue and try to fix it. If you can’t fix it, then kindly ask the developer of the theme to fix it. Notice: unless you paid for the theme, these developers are NOT required to fix those issues for FREE.
People have all sort of browsers, screen resolutions, etc, so getting their opinion is important. Don’t forget to remind your RSS readers to visit the site as well, so they can see the goodies.

11. Pruning plugins

Themes are now coming pre-loaded with a lot of features. For example, if you are using Genesis or another theme that has BreadCrumbs, then you can get rid of Breadcrumb plugin of yours. The concept is simple. Get rid of things that you don’t need. One thing you should make sure though is often plugins can do the job better. For example a lot of themes are coming with tons of SEO features. Genesis, Thesis, Headway, Standard Theme, and all others boast their SEO features. We’d rather use other much more powerful plugin like WordPress SEO by Yoast. Make your choices wisely.

12. Take Baby Steps when Changing

You are working with a new theme here, so it is probably best that you make changes carefully. Change smaller elements to make sure that it behaves properly in all browsers. Then once you are comfortable enough, then you can make drastic changes. It’s important to learn the structure and semantics of the new theme before you make huge changes. This will allow you to detect the problem right away.

13. Test Loading Time

Take the load time numbers that you had on your old theme (from item 1 of this checklist), and compare the two. See what you can do to improve load time.

14. Monitor Bounce Rate

After switching themes, you want to make sure that you are monitoring bounce rate. Some themes are just more friendlier than others when it comes to navigating the readers around your site. If your bounce rate has increased compared to the previous theme, then you should probably work on that. Add related posts widgets, popular posts widgets, or simply have a better call-to-action for new readers.

15. Listen to your readers, and IMPROVE

When a new design comes out, users always have suggestions. They either love a specific feature, or hate a specific feature. Communicate with your audience using surveys or Facebook Polls. See what they would like to see improved, and then work on getting that done.
Do you have a checklist of your own when changing WordPress themes? would love to hear it if we missed something.

How to Install and Setup Simple Facebook Connect for WordPress

This article cover the installation and setup of Simple Facebook Connect plugin for WordPress. For those who do not know, Simple Facebook Connect is a plugin created by Otto (@otto42) to make it easy for your site to use Facebook social plugins. This plugin works in a series of sub-systems that lets you add any sort of Facebook functionality (facebook logins, comments etc) you like to your WordPress blog. By far this is the most complete WordPress plugin for facebook features however the installation process may seem a bit difficult for beginners. In this article, we will show you how to install and setup Simple Facebook Connect for WordPress.

Features

Before we go ahead with the setup instructions, lets take a look at full features that Simple Facebook Connect offers.

• Enables your site to connect to Facebook with JS SDK
• Implements OpenGraph tags, entirely automatically
• Comment using Facebook credentials (with Facebook avatar support)
• Automatically Publish new posts to Facebook Profile or Application or Fan Page
• Manually Publish posts to FB Profile or Application or Fan Page
• Integrate comments made on Facebook back into your own site
• Login with your Facebook credentials, optionally using Facebook avatars instead of Gravatars
• New user registration with Facebook credentials (using the Facebook Registration Authentication system)
• Facebook Photo Album integration in the Media uploader
• Like Button and shortcode
• User Status Widget and shortcode
• Live Stream Widget and shortcode
• Fan Box Widget and shortcode
• Fan Count Chicklet and Widget
• Activity Feed Widget
• “Share” button and Shortcode (reworked version of Like button, as Share button is no longer supported by Facebook)

That’s quite a lot for one plugin. But remember, you don’t have to use all the features it offers. You can still use the plugin and enable only what you need.

Installation and Setup

First thing you need to do is install and activate Simple Facebook Connect plugin. Upon activation, a new option will be added under your Settings Menu called Simple Facebook Connect. Once you click on that, it will ask you to enter your application secret, application ID, and facebook fan page.

Now most of you probably have no clue what the heck the first two are, and you are probably wondering why you need these. You need these for this plugin to work properly (Auto-publish to Facebook, Facebook login, registration etc). Unfortunately, at this point in time, you cannot move forward without having those elements filled in. So we will show you how to get your own application ID and application secret key.
First you need to visit Facebook Developers Page. After you login, click on Apps link in the navigation bar. Then click on Create a new App icon (top left).

Obviously, change the application name to your own, and then click ok. It will prompt you to fill out the captcha. Once you have done that, you will be taken to a screen that will give you the basic information for your application.

Now do everything we demonstrate in the image above. Edit the icon to match your site’s logo, so your users know what they are connecting to. Keep your contact email updated. Select your category. Check the box for Website and then enter your url. Your application ID and app secret are listed at the top. You can copy and paste them in your Simple Facebook Connect plugin settings.
Now this only leaves us with the Facebook Fan Page ID. If you are using a fan page for your site (which most of us do), then you need to enter it in the field there. You can find the ID of the page by simply bringing your mouse over to your fan page edit link (the ID is listed there).

Once you click Save changes, a whole bunch of new options should be available to you now under SFC Plugins.

Check the ones that you plan on using, and leave the others blank. In our example, we will leave all boxes checked, so we can cover everything.
Below the Facebook Plugins, you will have an option for Facebook Metadata. By default Simple Facebook Connect plugin pulls Facebook Meta Data information from your posts. But if for some reason, you didn’t have an image for the post, or an error occurs, there is an option to enter default values.

Enter the path of your default image (which most likely should be your logo), and the description of the site. Below this you will see the option for Login Settings.

You can check to have Facebook Avatars override Gravatars when available. This is entirely a personal preference. Next you will have the Like Button settings.

If you don’t know what the like buttons look like, then scroll up on this page, and you will see the example of the facebook like button. You have the option to enter it either before your post content, after your post content, both before and after, or manually. You can select from the like button layouts, the action name, and send button.
We have checked the settings that tends to work the best among our clients.
There is also share button settings (which essentially has been replaced by the like button). So honestly this part is useless if you are using the like button. But lets say, if you wanted to use this one instead of the like button, then you can select the options from adding it before the content, after the content, before and after the content, or manual insertion. You can also select from Box count or button count.

We left the settings to be default. You can pick for yourself where you want these.
Next option available is the auto-publish settings.

You can choose to auto-publish to your facebook profile and/or facebook application page. If you have the Facebook Fan Page ID inserted, then it will publish to your fan page. You will have to grant SFC permission by clicking on the button and authorizing through facebook. This is safe authorization because you are authorizing your own application.
Next is Fan Box settings which is for folks who are CSS rockstars and want to customize the look of their facebook fan page. You have to know how to use Firebug in order to really use this custom CSS box because SFC provides no documentation of each class. So use firebug to detect what you want to modify, and then place the custom styling in this area.
So are you wondering how would these settings look like on your site? Well check out the screenshots for the plugin.
Hopefuy this article helped you do a basic setup for Simple Facebook Connect.

A Beginner’s Guide To jQuery-Based JSON API Clients

Are you fascinated by dynamic data? Do you go green with envy when you see tweets pulled magically into websites? Trust me, I’ve been there.
The goal of today’s tutorial is to create a simple Web app for grabbing movie posters from TMDb. We’ll use jQuery and the user’s input to query a JSON-based API and deal with the returned data appropriately.
I hope to convince you that APIs aren’t scary and that most of the time they can be a developer’s best friend.

APIs Are The Future But, More Importantly, The Present

JSON-based APIs are a hot property on the Web right now. I cannot remember the last time I went onto a blog or portfolio without seeing the owner’s tweets or Facebook friends staring back at me. This interactivity makes the Web an exciting place. The only limit seems to be people’s imagination. As demonstrated by everything from pulled tweets to a self-aware exchange-rates API, data is currently king, and websites are swapping it freely.
Developers are allowing us to get at their data much more openly now; no longer is everything under lock and key. Websites are proud to have you access their data and, in fact, encourage it. Websites such as TMDb and LastFM allow you to build entirely separate applications based on the data they’ve spent years accumulating. This openness and receptiveness are fostering an intertwined network of users and their corresponding actions.

This article is aimed at people who are competent in HTML and CSS and have basic knowledge of jQuery techniques. We won’t delve deep into advanced JavaScript techniques, but will rather help the beginner who wants to create more complex Web tools.

APIs in a Nutshell

In basic terms, an API enables you to access a website’s data without going near its databases. It gives us a user-friendly way to read and write data to and from a website’s databases.

Sure, Great, But What Code Do I Need?

Like many developers, I bounce merrily between back-end and front-end development, and I am as happy working in PHP as in jQuery. It just depends on which hat I’m wearing that day.
Because this article is mainly about jQuery-based JSON API clients, we’ll focus on client-side code (i.e. jQuery).
When dealing with APIs, and armed with jQuery, one is more likely to encounter JSON.

Player 1: JSON

JSON (or JavaScript Object Notation) is a lightweight, easy and popular way to exchange data. jQuery is not the only tool for manipulating and interfacing with JSON; it’s just my and many others’ preferred method.
A lot of the services we use everyday have JSON-based APIs: Twitter, Facebook and Flickr all send back data in JSON format.
A JSON response from an API looks like this:

01	([{"score":

02	null,"popularity":

03	3,"translated":true,"adult":

04	false,"language":"en","original_name":"The Goonies","name":"The Goonies","alternative_name":"I Goonies",

05	"movie_type":"movie","id":9340,"imdb_id":"tt0089218",

06	"url":"http://www.themoviedb.org/movie/9340",

07	"votes":16,"rating":9.2,"certification":"PG","overview":"A young teenager named Mikey Walsh finds an old treasure map in his father's attic.

08	Hoping to save their homes from demolition, Mikey and his friends Data Wang, Chunk Cohen, and Mouth Devereaux runs off on a big quest

09	to find the secret stash of the pirate One-Eyed Willie.","released":"1985-06-07",

10	"posters":[{"image":{"type":"poster","size":"original","height":1500,"width":1000,

11	"url":"http://cf1.imgobject.com/posters/76b/4d406d767b9aa15bb500276b/the-goonies-original.jpg",

12	"id":"4d406d767b9aa15bb500276b"}}],"backdrops":[{"image":{"type":"backdrop","size":"original","height":1080,"width":1920,

13	"url":"http://cf1.imgobject.com/backdrops/242/4d690e167b9aa13631001242/the-goonies-original.jpg",

14	"id":"4d690e167b9aa13631001242"}}],"version":3174,"last_modified_at":"2011-09-12 13:19:05"}])

A bit of a mess, right? Compare this to the same JSON viewed in Google Chrome’s developer console:

The JSON response is accessible via a jQuery function, allowing us to manipulate, display and, more importantly, style it however we want.

Player 2: jQuery

Personally, I’d pick jQuery over JavaScript any day of the week. jQuery makes things a lot easier for the beginner Web developer who just wants stuff to work right off the bat. I use it every day. If I had to complete the same tasks using native Javascript, my productivity would grind right down. In my opinion, JavaScript is for people who want a deeper understanding of the scripting language and the DOM itself. But for simplicity and ease of use, jQuery is where it’s at.
In essence, jQuery is a JavaScript library, with handy functions like getJSON. This particular function will be the glue that holds our API client together.

The Goal: A jQuery-Based JSON API Client

I recently submitted to An Event Apart the Web app that we’re about to go through now. It’s called Front Row.
The idea of the Web app is to take a movie title inputted by the user, run it through TMDb’s API, and return the relevant poster. The user could then share it or save it to their computer.
The Web app is split into HTML, CSS and jQuery. We’ll focus on the jQuery, because that’s where the magic happens.

The HTML

Below is the basic structure of the Web app. Nothing special here.

01	<!DOCTYPE html>

02

<html>

03

<head>

04	<meta name="author" content="Ben Howdle and Dan Matthew">

05	<meta name="description" content="A responsive movie poster grabber">

06	<title>Front Row by Ben Howdle</title>

07	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

08	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>

09	<!--jQuery, linked from a CDN-->

10	<script src="scripts.js"></script>

11	<script type="text/javascript" src="http://use.typekit.com/oya4cmx.js"></script>

12	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

13	<link rel="stylesheet" href="style.css" />

14

</head>

15

<body>

16	<div class="container">

17

<header>

18	<h1>Front Row</h1>

19

</header>

20	<section id="fetch">

21	<input type="text" placeholder="Enter a movie title" id="term" />

22	<button id="search">Find me a poster</button>

23	</section>

24	<section id="poster">

25	</section>

26

<footer>

27	<p>Created by <a href="http://twostepmedia.co.uk">Ben Howdle</a></p>

28

</footer>

29

</div>

30

</body>

31

</html>

All we’ve got is a bit of Twitter self-indulgence, an input field and a submission button. Done!
The CSS is a bit off topic for this article, so I’ll leave it to you to inspect the elements of interest on the live website.

The jQuery

01	$(document).ready(function(){

02

03	//This is to remove the validation message if no poster image is present

04

05	$('#term').focus(function(){

06	var full = $("#poster").has("img").length ? true : false;

07	if(full == false){

08	$('#poster').empty();

09

}

10

});

I like validation messages to disappear when the user starts retyping in an input field. The script below checks whether an image is present (i.e. a movie poster), and if not, empties the container of the validation message once the input field gains focus.

01	//function definition

02

03	var getPoster = function(){

04

05	//Grab the movie title and store it in a variable

06

07	var film = $('#term').val();

08

09	//Check if the user has entered anything

10

11	if(film == ''){

12

13	//If the input field was empty, display a message

14

15	$('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>");

The reason why we store the main code that retrieves the data in a function will become clear later on (mainly, it’s for DRY programming).
We then store the value of the input in a variable, so that when we use it again in the code, the jQuery doesn’t have to rescan the DOM.
Basic validation is performed on the input, checking that something has actually been entered in the field.
In an attempt at humor on my part, I display a message warning the user that they haven’t entered anything and asking them to please do so.

1

} else {

2

3	//They must have entered a value, carry on with API call, first display a loading message to notify the user of activity

4

5	$('#poster').html("<h2 class='loading'>Your poster is on its way!</h2>");

If the input contains a value, we then process the user’s request. Another message is displayed, letting the user know that something is happening.

1	$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {

2

3	//TMDb is nice enough to return a message if nothing was found, so we can base our if statement on this information

4

5	if (json != "Nothing found."){

6

7	//Display the poster and a message announcing the result

8

9	$('#poster').html('<h2 class="loading">Well, gee whiz! We found you a poster, skip!</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');

Here we get to the meat of our API client. We use jQuery’s getJSON function, which, by definition, loads “JSON-encoded data from the server using a GET HTTP request.”
We then use the API’s URL, suppled in this case by TMDb. As with many other APIs, you have to register your application in order to receive a key (a 30-second process). We insert the API key (23afca60ebf72f8d88cdcae2c4f31866) into the URL and pass the user’s movie title into the URL as a search parameter.
One thing to mention is that appending callback=? to the end of the URL enables us to make cross-domain JSON and AJAX calls. Don’t forget this, otherwise the data will be limited to your own domain! This method uses what’s called JSONP (or JSON with padding), which basically allows a script to fetch data from another server on a different domain. To do this, we must specify the callback above when jQuery loads the data. It replaces the ? with our custom function’s name, thereby allowing us to make cross-domain calls with ease.
In the function’s callback, we have put the word json (which holds our retrieved data), but we could have put data or message.
The next check is to see whether any data was returned. TMDb is kind enough to supply us with a message of “Nothing found” when it can’t find anything. So, we’ve based our if statement on this string’s value.
This check is API-specific. Usually if no results are found, we would expand the object to find a property named length, which would tell us how many results were returned. If this happens, the code might look something like this:

1	if (json.length != 0){

As a side note, before writing even a line of code in the callback function of the JSON call, we should become familiar with the results returned in Chrome’s console or in Firebug. This would tell us exactly what to check for in if statements and, more importantly, what path to take to grab the data we want.
Let’s add console.log(json);, like so:

1	$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {

2	console.log(json);

This will output something like the following in the console of your favorite browser (click the image to see the full size):

The last line of this code outputs our poster. We display another message to the user saying that we’ve found a result, and then proceed to show the image.
Let’s spend a moment figuring out how we got to the poster images using the line json[0].posters[0].image.url.
The reason we use json[0] is that — since we want to display only one poster, and knowing how relevant TMDb’s results are — we can gamble on the first result. We then access the posters array like so: json[0].posters[0]. Chrome even tells us that posters is an array, so we know what we’re dealing with. Again, we access the first value of the array, having faith that it will be most relevant. It then tells us that image is an object, so we can access it like so: json[0].posters[0].image. By expanding our object further, we see that image contains a property named url. Jackpot! This contains a direct image link, which we can use in the src attribute of our image element.

01

} else {

02

03	//If nothing is found, I attempt humor by displaying a Goonies poster and confirming that their search returned no results.

04

05	$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/

06	23afca60ebf72f8d88cdcae2c4f31866/goonies?callback=?", function(json) {

07

08	$('#poster').html('<h2 class="loading">We're afraid nothing was found for that search. Perhaps you were looking for The Goonies?</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');

09

10

});

11

}

Having determined that the API has no results for the user, we could display an error message. But this being a movie-related Web app, let’s give the user a preset poster of The Goonies and let them know we couldn’t find anything. We’ll use the exact same src attribute for the image that we used before, this time with goonies hardcoded into the API call’s URL.

01

});

02

03

}

04

05	return false;

06

}

07

08	//Because we've wrapped the JSON code in a function, we can call it on mouse click or on a hit of the Return button while in the input field

09

10	$('#search').click(getPoster);

11

12	$('#term').keyup(function(event){

13

14	if(event.keyCode == 13){

15

16	getPoster();

17

18

}

19

20

});

21

22

});

It is now clear why we wrapped our JSON call in a function: doing so allows us to run the function when the user hits the submission button or presses Enter while in the input field.

The Full Code

The HTML

01	<!DOCTYPE html>

02

<html>

03

<head>

04	<meta name="author" content="Ben Howdle and Dan Matthew">

05	<meta name="description" content="A responsive movie poster grabber">

06	<title>Front Row by Ben Howdle</title>

07	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

08	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>

09	<!--jQuery, linked from a CDN-->

10	<script src="scripts.js"></script>

11	<script type="text/javascript" src="http://use.typekit.com/oya4cmx.js"></script>

12	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

13	<link rel="stylesheet" href="style.css" />

14

</head>

15

<body>

16	<div class="container">

17

<header>

18	<h1>Front Row</h1>

19

</header>

20	<section id="fetch">

21	<input type="text" placeholder="Enter a movie title" id="term" />

22	<button id="search">Find me a poster</button>

23	</section>

24	<section id="poster">

25	</section>

26

<footer>

27	<p>Created by <a href="http://twostepmedia.co.uk">Ben Howdle</a></p>

28

</footer>

29

</div>

30

</body>

31

</html>

The jQuery

01	$(document).ready(function(){

02

03	$('#term').focus(function(){

04	var full = $("#poster").has("img").length ? true : false;

05	if(full == false){

06	$('#poster').empty();

07

}

08

});

09

10	var getPoster = function(){

11

12	var film = $('#term').val();

13

14	if(film == ''){

15

16	$('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>");

17

18

} else {

19

20	$('#poster').html("<h2 class='loading'>Your poster is on its way!</h2>");

21

22	$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/

23	23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {

24	if (json != "Nothing found."){

25	$('#poster').html('<h2 class="loading">Well, gee whiz! We found you a poster, skip!</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');

26

} else {

27	$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/

28	23afca60ebf72f8d88cdcae2c4f31866/goonies?callback=?", function(json) {

29	console.log(json);

30	$('#poster').html('<h2 class="loading">We're afraid nothing was found for that search. Perhaps you were looking for The Goonies?</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');

31

});

32

}

33

});

34

35

}

36

37	return false;

38

}

39

40	$('#search').click(getPoster);

41	$('#term').keyup(function(event){

42	if(event.keyCode == 13){

43	getPoster();

44

}

45

});

46

47

});

Conclusion

That’s it: a handy method of reading data from a remote API with jQuery, and manipulating the JSON output to fit our needs.
Every API is different, and every one returns different results in a different structure — it’s all part of the fun! So, get used to using console.log(), and familiarize yourself with the results set before trying to access it with code or using it in your application.
Start with something practical and entertaining: build a check-in checker with Gowalla’s API; visualize trends with Twitter’s API; or make a face-recognition app with Face.com’s API.
APIs are fun. By definition, the data they bring to the page is dynamic, not static.
If you have any problems with the API we’ve used here or you have any success stories with other APIs, please do leave a comment.

Further Resources

• “How to Use JSON APIs With jQuery,” Joel Sutherland, HiFi
• “How to Use jQuery With a JSON Flickr Feed to Display Photos,” Richard Shepherd
• “Bing Instant Search With jQuery and Ajax,” Srinivas Tamada, 9Lessons