Posted 12.18.2009

How I taught myself to program

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


I watched the Lynda.com Flash Actionscript 3.0 videos and then use the Flash Quickstart and O’Reilly’s Essential Actionscript 3.0 for reference.

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.

Expression Engine


Jason Irelan has done a fantastic video screencast on Expression Engine. — Granted Ellis Lab just released EE2.0, but Jason’s already written an ebook for that too! I haven’t read it but, I’ve already bought it.

WordPress

The other day, I shared my entire WordPress collection. As I mentioned at the top of that post, Digging into WordPress, has proved be the best resource I have found, to date, on 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.


(3) Comments :: Leave a Comment :: Permalink

Posted 12.07.2009

Displaying a Vimeo Feed with jQuery

UPDATE JUNE 6, 2013
This code no longer works. You can find a revised blog post here.

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


<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> 

K.I.S.S.

I’m going to keep this as simple as possible.

Include the following JavaScript under your jQuery line.


$(document).ready(function () {
    <strong>init_vimeo();</strong>
});

<em>// Change this to your username to load in your clips</em>
var vimeoUserName = 'user257977';

<em>// Tell Vimeo what function to call</em>
var userInfoCallback = 'userInfo';
var clipsCallback = 'showThumbs';

<em>// Set up the URLs</em>
var userInfoUrl = 'http://www.vimeo.com/api/' + vimeoUserName + '/user_info.json?callback=' + userInfoCallback;
var clipsUrl = 'http://www.vimeo.com/api/' + vimeoUserName + '/clips.json?callback=' + clipsCallback;

<em>// This function goes through the clips and puts them on the page</em>
<strong>function showThumbs(clips)</strong> {
    var thumbs = document.getElementById('thumbs');
    thumbs.innerHTML = '';
    
    var ul = document.createElement('ul');
    thumbs.appendChild(ul);
    
    for (var i = 0; i < clips.length; i++) {
        var thumb = document.createElement('img');
        thumb.setAttribute('src', clips[i].thumbnail_medium);
        thumb.setAttribute('alt', clips[i].title);
        thumb.setAttribute('title', clips[i].title);
        
        var a = document.createElement('a');
        a.setAttribute('href', clips[i].url);
        a.setAttribute('target', clips[i], '_blank');
        a.appendChild(thumb);
        
        var li = document.createElement('li');
        li.appendChild(a);
        ul.appendChild(li);
    }
<strong>}</strong>

<em>// This function loads the data from Vimeo</em>
<b>function init_vimeo()</b> {
    var head = document.getElementsByTagName('head').item(0);
    
    var userJs = document.createElement('script');
    userJs.setAttribute('type', 'text/javascript');
    head.appendChild(userJs);
    
    var clipsJs = document.createElement('script');
    clipsJs.setAttribute('type', 'text/javascript');
    clipsJs.setAttribute('src', clipsUrl);
    head.appendChild(clipsJs);
<strong>}</strong> 

Use this line or something similar in your HTML. — If you do go with something different, make sure you make the changes in your JavaScript.


<div id="vimeo">
  <div id="videos"></div>
  <div id="thumbs">Loading videos...</div>
</div> 

All you need to do to make it work for you is to change the Vimeo username ID (var vimeoUserName = 'user257977';). Your video thumbnails can be styled within your CSS.

Done! Next!

Download File



(1) Comments :: Leave a Comment :: Permalink

Posted 12.03.2009

Importing a YouTube Feed using jQuery

To import a YouTube Feed, using jQuery, you’ll need a few things:

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:


<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.jgfeed.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jyoutube.js" type="text/javascript" charset="utf-8"></script> 

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

In this particular instance, I’m going to use my favorites feed:
http://gdata.youtube.com/feeds/base/users/amyhaywood/favorites?client=ytapi-youtube-user&v=2

Then, in the callback function, we’re going to pass in feeds. This is the content that we just got. So far, this is what our code looks like:


<script type="text/javascript" charset="utf-8">
    $(document).ready(function() { $.jGFeed('http://gdata.youtube.com/feeds/base/users/amyhaywood/favorites?client=ytapi-youtube-user&v=2', function(feeds) {
            
            
        });
    });
</script> 

So far, so good.

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.


var entry = feeds.entries[i];
    html += '<a href="' + entry.link + '" title="' + entry.title + '"><img src="' + $.jYoutube(entry.link, 'small') + '" class="thumb left"></a>'; 

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.

Here’s our final code:


<script type="text/javascript" charset="utf-8">
            $(document).ready(function() {            
                $.jGFeed('http://gdata.youtube.com/feeds/base/users/threadsmedia/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile',
                function(feeds){
                    // Check for errors
                    if(!feeds){
                        // there was an error
                        return false;
                    }

                    var html = '';

                    // do whatever you want with feeds here
                    for(var i=0; i<feeds.entries.length; i++){
                        var entry = feeds.entries[i];
                        html += '<a href="' + entry.link + '" title="' + entry.title + '"><img src="' + $.jYoutube(entry.link, 'small') + '" class="thumb left"></a>';
                    }

                    $('#you_tube_feed').html(html);
                }, 4);
            });
        </script></i> 

Not too shabby. Saturday, we’ll be looking at what it takes to display a Flickr Feed, using jQuery.


(12) Comments :: Leave a Comment :: Permalink