Archives

Posted 12.18.2009

I’m often asked, “How do you know all this stuff?” Usually, I just chuckle and say “Oh, I just I picked it up.” This time, instead of laughing my geekiness off, I thought I would share. Most of the stuff I know, I taught myself.

Photoshop, Illustrator, and InDesign

I’m a huge fan of Lynda.com. You can subscribe for $25/month, which gets you access to her entire video library. I’ve learned so many tips and trips for using Adobe products that I’ve quickly become the go to person on my team for “How do you do __________?”

HTML

My very first job was with a web company. I came in, knowing close to nothing. They were very gracious and patient with me. Within the first couple of weeks, I was handed a basic introduction to HTML book. Read this. –So I don’t remember exactly what the book was… but, I’ve written a basic crash course of my own that should at least give you a starting place.

CSS

NOTE: This book concentrates on the concepts of CSS 2. I know people are pushing for CSS 3, however, I’ve yet to really sink my teeth into it, because it’s not supported across the board.

PHP and MySQL

Kevin Yank does a fantastic job of explaining code in a way that makes sense. This book will help you with all the essentials you need for understanding PHP and MySQL.

If you’re looking for more advanced PHP (i.e. Object Oriented programming), I also read a good chunk of Harry Fuecks’ The PHP Anthology. However, I’ll warn you: he’s a large contributor for PEAR. I was disappointed by how much he relied on the PEAR libraries instead of rolling up his sleeves and actually explaining PHP.

jQuery

jQuery is a JavaScript library. Other popular libraries that you may have heard of are MooTools or Prototype. I don’t know what prompted me to pick jQuery, but I’ve been so pleased with the ease of use. It was far easier to learn than what I expected.

ActionScript

CodeIgniter

If you’re not familiar with CodeIgniter, it is a PHP framework. A lot of the functionality that would normally take a few hours to set up is already been built in. Recently, I’ve realized that I’m a control freak when it comes to writing code. I love the fact that I don’t have to give up any of this control, but can move ten times faster in the building process.

The hardest part for me, in learning CodeIgniter, was wrapping my mind around the MVC model. Once you get that, it’s pretty straight forward.

One of the reasons that I love CodeIgniter is Ellis Labs has done such a fantastic job in writing documentation. (thank you!) So between reading through their site, forums, and other people’s tutorials, I got up to speed pretty quickly.

WordPress

Movable Type

This one is a little bit harder. As I mentioned in my CMS comparison post, it’s been hard for me to find ACCURATE resources. On their site, Movable Type has a Designer’s guide that is so-so, at best. Even then, I’ve found some of the documentation to be wrong and definitely lacking. The best resource I’ve found has been co-workers that have run into the same issues I have. (helps you alot, I know.)

My next undertaking: Building an iPhone app

So, I guess it’s pretty obviously, I LOVE to learn. Once I feel like I have a good grip on a subject, I look for another challenge. Right now, I’m trying to figure out how to write an iPhone app. The syntax is a little different than what I’m used to, coming at it from a PHP background. But, I’m finding that my knowledge of Flash helps more than anything else.

One final shout out

A resource that is often overlooked is Google. I don’t think I could code without it. You don’t think about it, because it is the middle man, but it is an invaluable resource.

Posted 12.07.2009

Trying to figure out how to display a Vimeo feed was a little harder than the other tasks (Twitter, YouTube, and Flickr) we’ve covered so far.

I stumbled upon Ashley Ford’s blog, Using the Vimeo API, which had exactly what I needed. His code showed more information than I needed. He didn’t require jQuery in his code, however, when I made my modifications, I added jQuery so that I could take advantage of its syntax.

Going through the motions

Download the latest version of jQuery and link it to your site. This should be a no brainer now.

Posted 12.03.2009

I know it seems like a lot, but it really will make things a whole lot easier.

The jQuery Google Feed Plugin makes use of Google’s Feed API, so that the content in the feed is easy to access (and understand). The jQuery HowTo blog has some great documentation, if you want to read up, or use it in conjunction with another Google project.

The jYouTube jQuery Plugin takes a YouTube video URL or ID and gives you a thumbnail corresponding with that video.

Our Logic

Use jQuery Google Feed plugin to read our YouTube Feed.

From the information we get out of the plugin, get the URL, pass it to the jYouTube Plugin. So we can show it on our site.

First things First

Obviously, you’ll need to include all of the JavaScript files in the header of your HTML:

All of the JQuery we’re writing will go in the $(document).ready(function() { }); so that it will run as soon as the page loads.

If you look at the documentation on the Google Feed plugin page, you’ll pass in the RSS feed and a callback function. (A callback function is just a fancy name for caboose. It will run as soon as the first function is finished.)

Next, let’s make sure that the feed actually loaded. If it didn’t, there’s no use in running unnecessary code and throwing errors.

So, if there wasn’t a feed if(!feeds), return nothing return false;.

Next, let’s set up a container to hold our code. We’re going to be building an HTML string that will contain our feed.

var html = '';

Now here’s the fun part. We’re going to create a loop that will cycle through all the items in our feed. For each item, it will get the thumbnail and link to that video.

The easiest way to to implement this is with the for loop.

For programming newbies:

You pass in 3 parameters to a for loop. The first parameter, initializes your counter. Typically, you want your counter to start at 0. var i=0;

The second parameter, tells you how many times you want the loop to cycle. Since, we want it to cycle through all the items in our feed, we’ll tell it to go into it reaches the end, or length of our feed. feeds.entries.length

The last, and final parameter, tells it how to update the counter at the end of 1 iteration: we want it to advance by 1 i++.

for(var i=0; i<feeds.entries.length; i++){

Wait a second, where did feeds.entries.length come from? Well, check your documentation.Feeds is the parameter that we passed into our function. Entries is an array that contains all our entries (surprised)? And length is part of jQuery. It tells us how many items are in our array. Or, in this case, how many entries we have.

We can also get individual values for each of our entries, accessing the feeds.entries. In fact, the next part of our code does that. We look at each entry (feeds.entries) to find it’s link and title, plugging the values into the appropriate places in the HTML string.

As you’ll see, we added a call to jYouTube, which grabs our image path. All we do is pass in the link. Or, here, I passed in “small” in the second parameter. This is optional. If I didn’t pass in small, it would have given me the large image, by default.

We’re almost there! After we’re done running the loop, we just have to display the HTML that we wrote. Here, I told it to put the HTML in a div container with an ID of you_tube_feed, but this could be whatever your little heart desires.