Think Vitamin

Wed, 22 Feb 2012 14:00:36 +0000: We’re Hiring New Teachers! - Think Vitamin
Treehouse is looking for four new awesome teachers to add to the Treehouse Team! If you’re a talented designer or developer, this is an absolute dream job.

We’re hiring four new video teachers! The Treehouse video studio is located in Orlando, Florida which is where you’ll be working. We’re looking for some amazing people that can dominate the following roles:
- PHP & WordPress Teacher
- Front-End Design Teacher
- Android Development Teacher
- Business & Marketing Teacher
Responsibilities
1. Writing and recording videos
2. Writing quizzes and code challenges
3. Creating downloadable assets and code
4. Writing blog posts for Think Vitamin
Here’s one of the videos from our library, which is similar to what you’ll be creating:

Skills and Qualities
- You have crazy passion for the web. You live this stuff!
- You have outstanding writing abilities.
- You have impressive presentation skills and lots of on-camera confidence.
- You’re self motivated and you maintain your razor sharp knowledge.
- You whole-heartedly believe in our Core Values.
Our Benefits

We believe work, fun, and generous benefits go together. Treehouse team members enjoy…
1. Full salary for a 4-Day week! We don’t work Fridays :)
2. 18 vacation days, 9 federal holidays, and two weeks off at Christmas
3. Free iPhone + monthly contract
4. Free lunch every day
5. 401(k) contribution matching
6. Full coverage for medical, dental, and vision
Working in Orlando

You’ll absolutely love working in our Orlando office! In addition to the growing teaching team, you’ll also work closely with our talented video production crew. These creative guys and gals are the best in the biz; they will make you look and sound your best.

We’re a fun loving bunch that appreciates cupcakes, remote control helicopters, hammocks, Nerf wars, and coffee. Oh, and animated GIFs! Can’t forget about the GIFs. :) Here’s a behind-the-scenes video of a project we all worked on together that will give you a flavor for the office.

How to Apply
1. Create a 3-5 minute audition video where you teach a topic related to the role you’re applying for. If you love PHP and WordPress, tell me all about themes or plugins!
2. When you’ve uploaded your video to the web, email the link to nick@teamtreehouse.com – Please do not send email attachments.
Also, please don’t send a resume. ;) We don’t care about your education or how many jobs you’ve worked. We’re looking for confidence, friendliness, passion, and crisp teaching abilities.

Application Deadline

Make sure to email us your application by Thursday, March 8th 2012!
Wed, 22 Feb 2012 10:27:28 +0000: Angry Birds founder speaking at Future Insights Live - Think Vitamin

I’m super excited to announce that Peter Vesterbacka, the Founder of Angry Birds, will be speaking at Future Insights Live in Vegas, April 30 – May 4th.

There are only 19 Early Bird tickets left, so buy your ticket here. See you there!

Wed, 22 Feb 2012 03:20:42 +0000: A New Year, A New Responsive Dribbble Portfolio – Part 2 of 2 - Think Vitamin

Moving forward ladies and gents we are onto round two of this two part tutorial. In part one we covered the HTML/CSS/jQuery of our one page responsive Dribbble portfolio site. If you missed the first post please check it out here. Now it’s time to convert HTML to PHP and use the Dribbble API to pull your data. Plus IE fixes.

HTML to PHP

First things first let’s turn our project from HTML to PHP. This task takes two easy steps. First, make sure we have our files in a php environment. Second change the file extension of the index file.

As most of you know, when you run PHP you need to be in a PHP environment such as a live server or a local server. I personally use MAMP as a test server before putting anything live. MAMP is for Mac users where as WAMP is for Windows users. These two solutions are super easy to install and operate. Also you have the option of using a live server.

Now that we have our PHP environment lets take our static HTML Dribbble Portfolio and upload it to our server. Since I’m using MAMP the default local host is ‘localhost:8888/’ and the directory is ‘Dribble-Portfolio/’. In the browser the direct path is ‘http://localhost:8888/Dribble-Portfolio/’. From here lets change the file extension of our index.html to index.php. When you refresh the page you will notice the url doesn’t change at all and the page still renders the same. This is exactly what we want.

Download the PHP wrapper for the Dribbble API

Thanks to Martin Bean for making this next step super easy. Martin created a ‘PHP wrapper for the Dribbble API’ which you can download at github. This allows us to access the Dribbble API with minimal code. Simply download the file from here and unzip it. Copy the ‘src’ folder inside the main folder and paste it in the same directory as our index.php. Your directory should now look like this:

Your file directory should look like this

Integrating Everything

Now it’s time to jump into some php code. First we want to add the following code to our header area right before the html doctype:

 
<?php
 
require 'src/dribbble.php';
 
$dribbble = new Dribbble();
 
//////////////////////////////////////////////////////////////////////
 
//Dribbble User ID
$playername='mathelme';
//How many 'shots' would you like to display per page?
$perpage='12';
 
//Contact Info
$email='mat.helme@gmail.com';
$twitter='twitter.com/#/mathelme';
$facebook='facebook.com/mat.helme';
$linkedin='http://www.linkedin.com/pub/mat-helme/28/7b5/710';
 
 
/////////////////////////////////////////////////////////////////////
 
?>
 
<!DOCTYPE html>

Lets briefly go over the code. We start off with an opening php tag. The next bit of code calls the ‘dribbble.php’ file which we placed in our directory and initiates its options for the Dribbble API. Directly under the ‘//Dribble User ID’ is where we specify which dribbble account we want to pull from. For example purposes I have used all of my credentials. My direct url to my dribbble account is http://www.dribbble.com/mathelme, so my player name is ‘mathelme’. Then below that is how many shots we want to display. I would recommend using ’12′. Lastly is the contact info. Again I have used my credentials for example purposes. Simply swap out my info with yours. Lastly we close the php tag.

Now that we have initiated all the php functions and variables lets swap out the data in our page. Our first step is swapping out our contact info. Simply highlight all the data between the ‘nav’ tags with:

 
<ul class="menu">
 
     <li><a href="mailto:<?php echo $email ?>" class="email"></a></li>
     <li><a href="http://www.dribbble.com/<?php echo $playername ?>" class="dribbble"></a></li>
     <li><a href="<?php echo $twitter ?>" class="twitter"></a></li>
     <li><a href="<?php echo $facebook ?>" class="facebook"></a></li>
     <li><a href="<?php echo $linkedin ?>" class="linkd"></a></li>
 
</ul>

All we are doing here is changing the ‘href’ ‘#’ link with the variables we set in the head of the page through a php echo statement.

Now we want to pull in the latest shots for our Dribbble user. Simply swap out the following code in between the id ‘container’ with:

 
<?php
 
                    $my_shots = $dribbble->get_player_shots($playername, 1, $perpage);
 
                    foreach ($my_shots->shots as $shot) 
                    {
                        echo '<a class="box" href="' . $shot->url . '"><h3>' . $shot->title. '</h3><img src="'. $shot->image_url . '" alt="' . $shot->title. '" class="pic" />' . '</a>';
                    }
 
?>

This php code runs a loop and grabs the latest 12 shots from the Dribbble user and returns a linking title and image to Dribbble.

Your final index.php file should look something like this:

 
<?php
 
require 'src/dribbble.php';
 
$dribbble = new Dribbble();
 
//////////////////////////////////////////////////////////////////////
 
//Dribbble User ID
$playername='mathelme';
//How many 'shots' would you like to display per page?
$perpage='12';
 
//Contact Info
$email='mat.helme@gmail.com';
$twitter='twitter.com/#/mathelme';
$facebook='facebook.com/mat.helme';
$linkedin='http://www.linkedin.com/pub/mat-helme/28/7b5/710';
 
 
/////////////////////////////////////////////////////////////////////
 
?>
 
<!DOCTYPE html>
 
<html>
 
<head>
 
	<!--Viewport-->
	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>Dribbble Portfolio</title>
 
    <!--Google fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
 
    <!--Main Stylesheet-->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
 
</head>
 
<body>
 
	<header>
 
    	<h1 id="logo"><a href="#"><img src="images/logo.png" alt="My Logo" /></a></h1>
 
        <nav>
 
        	<ul class="menu">
 
                 <li><a href="mailto:<?php echo $email ?>" class="email"></a></li>
                 <li><a href="http://www.dribbble.com/<?php echo $playername ?>" class="dribbble"></a></li>
                 <li><a href="<?php echo $twitter ?>" class="twitter"></a></li>
                 <li><a href="<?php echo $facebook ?>" class="facebook"></a></li>
                 <li><a href="<?php echo $linkedin ?>" class="linkd"></a></li>
 
            </ul>
 
        </nav>
 
    </header>
    <!--end header-->
 
    <section class="half">
 
            <img src="images/me.jpg" class="main-image" alt="This is Me" />
 
    </section>
    <!--end main image-->
 
    <section class="half">
 
    	<h2 class="tagline">Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!</h2>
 
    </section>
    <!--end tagline-->
 
    <div class="clear"></div>
 
    <section>
 
			<h1>Latest Work</h1>
 
 
			<div id="container">
 
 
                    <?php
 
                    $my_shots = $dribbble->get_player_shots($playername, 1, $perpage);
 
                    foreach ($my_shots->shots as $shot) 
                    {
                        echo '<a class="box" href="' . $shot->url . '"><h3>' . $shot->title. '</h3><img src="'. $shot->image_url . '" alt="' . $shot->title. '" class="pic" />' . '</a>';
                    }
 
                    ?>
 
 
			</div>
 
	</section>
    <!--end dribble content-->
 
    <div class="clear"></div>
 
    <footer>All RIghts Reserved <a href="#">www.website.com</a></footer>
    <!--end footer-->
 
    <!--js files-->
    <script src="scripts/jquery.js"></script>
    <script src="scripts/fitText.js"></script>
 
    <!--initiate fitText-->
    <script>
 
		$(document).ready(function() {
 
			/*FitText*/
			$(".tagline").fitText(1.1, { minFontSize: '20px', maxFontSize: '200px' });
 
		});
 
    </script>
 
</body>
 
</html>

Congratulations you have successfully created a responsive one page Dribbble portfolio for Chrome, Firefox and Safari. As for Internet Explorer 8 and up we will need to add some additional code.

IE fixes

The fixes for IE aren’t going to be exact fixes but more or less simple solutions. Here is what we need to add directly below the main stylesheet in the head tag:

 
<!-- IE fixes -->
    <script src="scripts/html5.js"></script>
    <script src="scripts/respond.min.js"></script>
 
    <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->

The html5.js file is to allow IE to support HTML5 elements. The respond.js file is used for media quires in IE, since they don’t support them. Lastly we use another style sheet specifically for IE since it doesn’t support CSS3 column-count or column-gap. Also we added CSS3pie to fix the rounded-corners.

Source Files

Role Those Credits:

Tue, 21 Feb 2012 16:10:21 +0000: Free Video: Getting Started with iOS 5 Automatic Reference Counting - Think Vitamin
In this 3 minute video, you will be introduced to Automatic Reference Counting or ARC which eliminates the need for manually maintaining object life-cycles by adding code at compile time to ensure that objects live as long as necessary.

This video is from Treehouse, a high-quality video training site with hundreds of short videos on topics like …
- Accessibility
- CSS3
- Aesthetic Foundations
- Django
- HTML
- CSS
- HTML5
- iOS Development
- JavaScript
- jQuery
- NoSQL
- PHP
- Responsive Web Design
- Ruby
- Ruby on Rails
- UX
- Version Control
- WordPress Theme Design
New videos are added regularly, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.
Tue, 21 Feb 2012 15:08:02 +0000: Ruby 1.9.3-p125 Released - Think Vitamin
The Ruby team just recently released Ruby 1.9.3 patch level 125. The big news in this release is LLVM/clang support as well as GCC 4.7 support. There is also a security fix of the Ruby OpenSSL extension and various other bug fixes. You may notice some speed improvements as well.

You can view the full Change log and both rvm and ruby-build both support the new release in their respective latest versions.

Think Vitamin

Responsibilities

Skills and Qualities

Our Benefits

Working in Orlando

How to Apply

Application Deadline

HTML to PHP

Download the PHP wrapper for the Dribbble API

Integrating Everything

IE fixes