After working with the HTML5 history API for the launch of You Rather, I hit a snag with keeping social widgets current. The content and URL would update, but the Like button would stick to the original document location. As it turns out, Twitter and Facebook widgets that can’t simply be updated via typical jQuery selectors since they are parsed into iframes once the page loads. Fortunately for us, there is an easy fix.

In the function below, you can see that on push state we replace the HTML of the widget’s parent with the new unparsed snippet. Then we search for a window level object of FB for Facebook and twttr for Twitter and reload each if they exist. For those looking to update Google Analytics you’ll also notice there is a section where the URL is pushed as a new pageview. You earned those pageviews, so don’t forget to claim them.

var update_social = function(title, url) {

	// Add a new pageview to Analytics
	if (typeof _gaq !== 'undefined')
	{
		window._gaq.push(['_trackPageview', url]);
	}

	//Need the full URL for outside sites
	var full_url = window.location.href;

	//Populate new Facebook widget
	$('#fb-like').html('<fb:like href="' + full_url + '" show_faces="false" width="350" action="like" send="true" font="segoe ui" colorscheme="light" />');

	//Reload Facebook
	if (typeof FB !== 'undefined') {
		FB.XFBML.parse(document.getElementById('fb-like'));
	}

	//Populate new Twitter widget
	var twitter_text = title + " via " + "@buildinternet";
	$('#twitter-share').html('<a href="https://twitter.com/share" vclass="twitter-share-button" data-url="' + full_url + '" data-text="'+ twitter_text +'" data-related="buildinternet">Tweet</a>');

	//Reload Twitter
	if (typeof twttr !== 'undefined') {
		twttr.widgets.load();
	}
}

For a look at this in action, take a look at the the demo page. The source code shows more of the context in a working History API driven page.

If you’re looking for more reading on how to get started with the history API, I recommend taking a look at this tutorial before looping back.

With the release of iOS 5 on Wednesday, a flurry of new features became available to developers. From hot new features like iCloud and iMessage to Android-like notifications, one standout new feature for developers is the addition of an entire Twitter framework, allowing developers to access the Twitter-verse in a much easier way. In prior iterations of iOS, developers needed to add in third-party libraries to authenticate Twitter accounts, post tweets, search for hashtags, and so on. With the new Twitter.framework, iOS takes the wheel from the developers’ apps for the heavy lifting.

This tutorial will let you learn the basics to implementing the new Twitter framework into your iOS app to create and post tweets. By the end, you’ll have a simple app that will let you tweet any given message, link, or image!

Overview

The Twitter.framework has a pre-built modal view controller for presenting the user with a quick tweet, named TWTweetComposeViewController. This “tweet sheet” is a quick way for developers to post text, images or links from within their app, without bouncing out to Safari or the Twitter app.

iOS 5 has a new Accounts framework as well, which allows for a neat and tidy way to store usernames, passwords, etc. Apple has taken the initiative to package the Accounts framework into the new Twitter framework. This means that if an iOS 5 user logs into Twitter in any Twitter-using applications, his credentials can be stored into the iOS Settings and are able to be used by other apps as well.

What if our user is not logged in to Twitter when they get our extravagant tweeting app? Well, that is up to us as the developer to handle. For this example, I’ll show you two different ways to handle this situation. The first is to just let iOS notify the user that they need to be logged in to tweet. The second is to just not let them tweet at all. The decision is up to you! So let’s get started.

Getting Started

Since this tutorial involves new iOS features in iOS 5, it is assumed you’re already running Xcode 4+

To begin, let’s work with a simple, single-view based app. Create a new single-view project in Xcode. Let’s call it TweetThis. For the sake of being cutting edge, let’s make sure the project uses Automatic Reference Counting (ARC).

Add Twitter.framework

To take advantage of the new Twitter framework, we need to link our binary with the Twitter library. This is accomplished by clicking on your project in the Navigator sidebar, selecting your project’s target, and going to Build Phases. This should pull up a table with a few items. Click the arrow next to Link Binary With Libraries to expand the options and click the + button to add a new library. Find the library named Twitter.framework in the popup menu and select add button. Your end product should look a bit like this:

Setup your interface

For this example app, we only need a couple UI elements. In your ViewController.xib, add in a button and a label.

The button will say something like “Tweet this!” and will be linked to the action that brings up our tweet sheet.

The label we add is for displaying an error message should the user not be logged in to Twitter. Let’s give this some text like “Not logged in to Twitter” for now. We’ll simply just hide and unhide this depending of if the user can tweet or not.Last but not least, create an IBOutlet for the button (I named mine tweetButton) and label (mine was errorLabel) and an IBAction for the tweeting named tweetButtonPressed for the event touch up inside. Now let’s hit the code.

ViewController.h

Check for availability

At this point, your ViewController.h should look something like this:

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController {
     IBOutlet UIButton *tweetButton;
     IBOutlet UILabel *errorLabel;
}
- (IBAction)tweetButtonPressed:(id)sender;
@end

We should add in one more variable here before moving on. Add in the interface a BOOL named _canTweet. This boolean will keep track of whether or not the ability to tweet is available. What do you mean by “the ability to tweet is available”? It’s two-fold. The TWTweetComposeViewController has a method named canSendTweet. The method returns true should the user be logged in and if the device is able to reach the Twitter service. While this doesn’t mean it’ll return false if Twitter is down (which is rare anyway), it will be very helpful should the user be in Airplane Mode, or not have service, or some similar situation.

With that boolean, our ViewController header should be complete for now. Let’s head over to ViewController.m and get some work done.

ViewController.m

First things first, let’s import the Twitter framework by importing the header for it. Add the following import line at the top of your file:

#import <Twitter/Twitter.h>

Remember earlier when I mentioned that we have a couple of options to handle if our user isn’t logged in to Twitter yet? Let’s use a define to set this. Add the following line right under your import:

#define letOSHandleLogin FALSE

Since we’re going to modify interface items based on tweeting ability, let’s check our ability to tweet by overriding the loadView method as such:

- (void)loadView
{
     [super loadView];
     //Check to see if the user is able to tweet
     /**
     * This part is somewhat optional. iOS will prompt the user to log in to Twitter if they aren't already
     * However, it's best practice to do something similar to this, like show custom alerts, etc.
     **/
     if ([TWTweetComposeViewController canSendTweet]){
          _canTweet = YES;
     }
     if (letOSHandleLogin) {
          errorLabel.hidden = YES;
     } else{
          tweetButton.hidden = !(_canTweet);      //If able to tweet, show button
          errorLabel.hidden = _canTweet;          //If able to tweet, hide error
     }
}

Great! Now at this point you should be able to run your application and depending on whether or not your simulator has a Twitter account setup already, you should see the button or the error message! But that’s just step one. Step two is the fun part: composing the actual tweet!

Composing and Displaying the Tweet Sheet

The last step to creating this awesome tweet is actual composition of the tweet sheet itself. This step is actually quite simple and takes only a few lines of code. Define your IBAction for tweetButtonClicked as such:

- (IBAction)tweetButtonPressed:(id)sender {
     //Create the tweet sheet
     TWTweetComposeViewController *tweetSheet = [[TWTweetComposeViewController alloc] init];

     //Customize the tweet sheet here
     //Add a tweet message
     [tweetSheet setInitialText:@"Just learned how to use the #iOS5 Twitter Framework on @buildinternet"];

     //Add an image
     [tweetSheet addImage:[UIImage imageNamed:@"tweetThumb.png"]];

     //Add a link
     //Don't worry, Twitter will handle turning this into a t.co link
     [tweetSheet addURL:[NSURL URLWithString:@"http://buildinternet.com/2011/10/ios-creating-your-own-tweet-sheet"]];

     //Set a blocking handler for the tweet sheet
     tweetSheet.completionHandler = ^(TWTweetComposeViewControllerResult result){
          [self dismissModalViewControllerAnimated:YES];
     };

     //Show the tweet sheet!
     [self presentModalViewController:tweetSheet animated:YES];
}

Let’s go through this line by line real quick to see what’s going on. First, we alloc-init a new tweet sheet; Objective-C basics. After that, we can customize what the actual tweet is. We can set text with the setInitialText method, add an image with addImage, and add a link with addLink (which will be converted to a t.co link for you by Twitter). Next, we have to set a blocking handler for the result. This is to ensure that we don’t mess up the rest of the app while tweeting until we dismiss the modal view (that is our tweet sheet). The last line displays our tweet sheet! Build and run your app to see the tweet in all its glory.

Wrap Up

I’ve included a sample project for you to learn from here on GitHub. This project is only one example of how to use the Twitter framework. Implement it to your pleasing! Add your own images, craft your own tweets, and bring your app to the next level of the Twitter-verse.

I first saw this style slideshow as a Flash solution on Cargo Collective, which has since been updated to Javascript. As it turns out, it’s actually quite easy, making it a quick addition to any site you wish to implement it on.

Here’s what we’ll be doing:

• Super fast slideshow that only runs when hovered over.
• Overlay logo that toggles between two different states depending on hover state
• Inspiration piece for this tutorial: Cargo Collective
• See our end goal by visiting our demo page.

The HTML

This is the structure for each slideshow, with the images are pulled from the unordered list and turned into a slideshow by jQuery Cycle Plugin.

The .link element is where a URL can be provided for when the slideshow is clicked. It is also how we will swap the logo on hovers.

<!-- Slideshow
=========================-->
<div class="slideshow-block">
	<a href="http://website.com" class="link"></a>
	<ul class="slides">
		<li><img src="image.jpg"/></li>
		<!-- Any other slides -->
	</ul>
</div>

The CSS

The dimensions for my slideshow are 200px by 150px. Depending on the sizes of your logo and slides, the below background position coordinates and overall dimensions may need to get adjusted.

• The logo is toggled between the two color variations using the background position hover technique.
• The unordered  slides list is given a class of “active” when hovered over, making it visible on the page.

*{
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
}
.slideshow-block{
	position: relative;
	width: 200px;
	height: 150px;
	overflow: hidden;
	background: #111 url('img/bg.jpg');
}
a.link{
	position:absolute;
	height: 150px;
	width: 200px;
	display: block;
	z-index: 10;
	background: url('img/logo.png') no-repeat center top;
}
a.link:hover{
	background-position: center -150px;
}
.slides{
	z-index:0;
	visibility:hidden;
}
.slides.active{
	visibility:visible;
}

The jQuery

On the jQuery side, we want to accomplish two tasks:

1. Tie the jQuery Cycle Plugin to our list of images, turning them into a slideshow.
2. Swap between pause and play states when the slideshow is hovered over. This means the slideshow is hidden and paused when the mouse is not over it.

<script type="text/javascript">
jQuery(function($){

	// Cycle plugin
	$('.slides').cycle({
	    fx:     'none',
	    speed:   1,
	    timeout: 70
	}).cycle("pause");

	// Pause & play on hover
	$('.slideshow-block').hover(function(){
		$(this).find('.slides').addClass('active').cycle('resume');
	}, function(){
		$(this).find('.slides').removeClass('active').cycle('pause');
	});

});
</script>

Closing

I’ve included two versions of the script, one with the TV and one without (for easier copy and paste implementation). As always, when in doubt, try using the downloadable demos as a foundation to build from.

I look forward to seeing what folks are able to make happen – enjoy!

Note: You are able to place multiple slideshows on the same page, meaning it’s feasible for you to make a gallery out of a series of thumbnail slideshows.

The idea of a fluid thumbnail bar is simple: Create a list of thumbnails within a space where the overflow can be flipped through page by page. Speaking of pages, make sure we’re on the same one by checking out the demo page.

To be clear, this tutorial is intended to show you how to add this functionality to an existing list of images, in hopes you can use it to compliment whatever your current setup might be. This tutorial assumes you have some level of experience with jQuery.

Features

• Cycle through thumbnails in different intervals depending on container width
• Page arrows only displayed when needed (thumbnails overflow container)

Getting Started

First off, let’s make sure we have a base structure to work with, outlined below.

Scripts

jQuery (surprise!), Easing, and the separate file which will contain our script.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/fluid.thumbs.js"></script>

CSS

Just one stylesheet needed, nothing crazy. For the sake of brevity, I will let you review the stylesheet on your own, which is available in the download.

<link rel="stylesheet" href="css/fluid.thumbs.css" type="text/css" media="screen" />

HTML

Below is the structure of the list which will contain the thumbnails, wrapped in a container.

<div id="thumb-tray">
     <ul id="thumb-list">
          <li><img src="thumb-1.jpg"/></li>
          <li><img src="thumb-2.jpg"/></li>
          <li><img src="thumb-x.jpg"/></li>
     </ul>
     <div id="thumb-prev"></div>
     <div id="thumb-next"></div>
</div>

The jQuery

This is where the bulk of the functionality will be made possible, to get a good sense of what we’re aiming to do, here are the goals:

• Automatically resize the width of thumbnail list to fit number of images it contains (when the window is loaded or resized).
• Calculate how many thumbs are visible within the visible area.
• Cycle through the pages of thumbs when the forward or back arrows are clicked.

The Variables

To make editing easier, we are going to plug the elements into variables. Additionally, we are defining the thumbInterval and thumbPage variables, which store the pixel width of each page and the pixel distance from zero, respectively.

var thumbTray = '#thumb-tray',
thumbList = '#thumb-list',
thumbNext = '#thumb-next',
thumbPrev = '#thumb-prev',
thumbInterval,
thumbPage = 0;

Setup

When the document is first ready, the width of the thumbnail list must be calculated, and then depending whether or not it exceeds to visible area, the thumb arrows are displayed and the pixel width of each thumb page is calculated.

// Adjust to true width of thumb markers
$(thumbList).width($('> li', thumbList).length * $('> li', thumbList).outerWidth(true));

The width is calculated by multiplying the width of one li by the total number of items within the list. The outerWidth function allows us to include padding and margins in our calculation.

// Hide thumb arrows if not needed
if ($(thumbList).width() <= $(thumbTray).width()) $(thumbPrev+","+thumbNext).fadeOut(0);

If the width of the thumbnail list is larger than the thumb tray, then the arrows are needed and faded in.

// Thumb Intervals
thumbInterval = Math.floor($(thumbTray).width() / $('> li', thumbList).outerWidth(true)) * $('> li', thumbList).outerWidth(true);

Similar to how the true width of the thumb list was calculated, we are now figuring out the width of each page of thumbnails, establishing how far to shift the list (left or right) when it is cycled through.

Thumb Navigation

Pages are navigated by adjusting the left property in a positive(backward) or negative(forward) direction. The thumbInterval variable stores what distance is considered a page, while the thumbPage variable stores the total distance from the left.

If the beginning or end of the list is reached, it will automatically spill over to the opposite end of the list. Each page is calculated based on how many complete list items can be visible in the current visible space. We make use of easing for these animations to add extra smooth transitions.

// Thumb Next Button
$(thumbNext).click(function(){
	if (thumbPage - thumbInterval <= -$(thumbList).width()){
		thumbPage = 0;
		$(thumbList).stop().animate({'left': thumbPage}, {duration:500, easing:'easeOutExpo'});
	}else{
		thumbPage = thumbPage - thumbInterval;
		$(thumbList).stop().animate({'left': thumbPage}, {duration:500, easing:'easeOutExpo'});
	}
});

// Thumb Previous Button
$(thumbPrev).click(function(){
	if (thumbPage + thumbInterval > 0){
		thumbPage = Math.floor($(thumbList).width() / thumbInterval) * -thumbInterval;
		if ($(thumbList).width() <= -thumbPage) thumbPage = thumbPage + thumbInterval;
		$(thumbList).stop().animate({'left': thumbPage}, {duration:500, easing:'easeOutExpo'});
	}else{
		thumbPage = thumbPage + thumbInterval;
		$(thumbList).stop().animate({'left': thumbPage}, {duration:500, easing:'easeOutExpo'});
	}
});

Handling Resizes

Since the thumbInterval and thumbPage are calculated when the page first loads, we need to adjust for the fact that when the browser window size changes, those numbers are no longer relevant. In order to keep this simple, when the window is resized, the variables are recalculated and the page is set back to zero.

$(window).resize(function(){

	// Update Thumb Interval & Page
	thumbPage = 0;
	thumbInterval = Math.floor($(thumbTray).width() / $('> li', thumbList).outerWidth(true)) * $('> li', thumbList).outerWidth(true);

	// Adjust thumbnail markers
	if ($(thumbList).width() > $(thumbTray).width()){
		$(thumbPrev+","+thumbNext).fadeIn('fast');
		$(thumbList).stop().animate({'left':0}, 200);
	}else{
		$(thumbPrev+","+thumbNext).fadeOut('fast');
	}

});

Wrap-up & Expanded Script

I've taken the basics of this tutorial and expanded upon them in Thumb Reel, a free script I released that has added functionality such as clicking and keyboard navigation. You can also see this script used in the newest Supersized release, which is what it was originally made for, although it has since been modified.

Having a mobile specific layout allows on-the-go visitors to quickly access to telephone numbers, email addresses, and directions – exactly the sort of thing a visitor from a mobile device might be there for.

This tutorial isn’t about creating an entire mobile version of your site, although some of the stuff you’ll see here today can be used for exactly that. Instead, this is a means of offering a quick introduction to visitors from the mobile world before passing them through through to your main site.

The Goal

Getting Started

To make this easy, I have provided a mobile template for you to download, which means that all we will have to do is set up redirects for mobile browsers. You can customize the template landing page however you see fit – it’s just standard HTML/CSS.

Here’s what you need to do to get started:

1. Download the template file.
2. Create a directory (or page) to send mobile users to – some common subdomains are “m” or “mobile” (eg. m.digg.com and m.facebook.com).
3. We will be using JS Mobile Redirection to redirect mobile browsers, the script can be downloaded on GitHub. Place the .js file wherever you choose, I have placed mine in a folder called “js”.

Set the Redirect

On the index page of your site, in the <head> section paste in the following lines:

<script type="text/javascript" src="js/redirection_mobile.min.js"></script>
<script type="text/javascript">
SA.redirection_mobile ({param:"isDefault", mobile_prefix : "m", cookie_hours : "1" });
</script>

This will send any visitor that arrives on the index page to the subdomain “m.website.com”, but only once every hour. If they press the link on the template page that says “continue to full site”, they will not be redirected within the defined timeframe.

That’s pretty much it. Congratulations, you have a mobile landing page – now go forth and customize.

Note: If you are redirecting to a specific page rather than a subdomain you can do this by including mobile_url : “website.com/mobile” and mobile_prefix : “http”. Refer to the documentation for further explanation.

Additional Notes

Fitting to Screen

You may have noticed the following meta tag in the downloadable files for this tutorial:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;" />

This is the tag that determines how the page fits to the screen and if a visitor can zoom in and out. Mozilla does a fine job of explaining this in great detail, check out their page on the viewport meta tag for a more rigorous exploration.

Further iOS Reading

For more information regarding possibilities on iOS, check out the Safari Web Content Guide. Some nice ones to start with include their viewport and text size adjustment pages.

Our final post for 2010 comes after a few discussions with industry friends. I was surprised to find that a number of them had never used the in-browser debugging consoles for JavaScript. Regrettably this also included a certain member of our own office, but he can remain nameless for now.

So for those of you who haven’t yet been formally introduced to the browser console API, here’s a great way to start fresh in 2011.

Visual Debugging

When you work on websites, debugging is mostly a visual experience. It’s easy to see misaligned columns or overlapping text, change something, and then refresh. With PHP, error reporting stops the script and displays the issue right on the page. In short, a good chunk of web design errors can be handled identified by page load.

The console API is a browser object that can be used to output debugging information as a page loads. For example, the console might output an error if an image element had a source of “definitelynotareallink” instead of a valid URL. The console really shines when it comes to JavaScript, especially when sorting through the DOM.

Firebug has the best documented (and robust) console API, but Firefox isn’t the only browser that can use it. Most modern browsers have development tools that include a console tab. For Chrome and Safari, you can reach this view by right-clicking and selecting “Inspect Element” from the context menu.

Simple Examples

The console support a number of options, but you’ll probably only use the same 3-4 regularly. From my own experience, the log() function is by far the most useful. It outputs a new message line to the console that can contain plaintext, DOM Elements, or variables. The examples below cover a couple of the more common functions.

In this script, the console outputs a different result depending on whether or not the full_name variable is empty:

if (full_name != ""){
	console.log('The name \"' + full_name + '\" was entered');
}else{
	console.error('No name was entered');
}

For this jQuery click event, the console will return information about the target element’s attributes:

$('.trace').click(function(){
	//Run a trace on this click event
	console.trace();
	return false;
});

I’ve put together a demo page to help showcase more of the basics. Try running it with your console open, and view the source for specific explanations.

Direct Input is Allowed

The console goes much deeper than simple outputs, and can also accept direct input similar to a command line. For example, type “document” and press enter to get the page returned. Console DOM traversal is a bit heavier (and not as immediately useful) for an introduction, so we’ll leave that for another post.

Keep the Page Clean

Debugging behind the scenes keeps your page clear of any “testing only” outputs that must be deleted before launching. It’s entirely possible to leave console debugging in a live installation without the user ever noticing.

Next time you’re working on a JavaScript project, give the console a go. It’s a hell of a lot easier than creating random alert() boxes for specific triggers. When it comes to troubleshooting, unobtrusive is wonderful.

If there’s a further interest in this topic, there are a number of things we can do more on, particularly with tracking jQuery events. If you have any suggestions, questions, or expertise of your own to throw in, leave a comment below and we’ll compile something for a future post.

Links & Reading

1. Firebug and Logging
2. Apple’s Documentation on Console Debugging

It might have taken a while, but two weeks ago I finally got into GitHub. For those not familiar, GitHub is a site focused on the version control system Git, and allows. It’s not the only place that you can get hosted Git repositories from (e.g. Beanstalk), but it does have a much more open-source friendly environment. It’s no coincidence that their tagline is “Social Coding”.

As part of my orientation to GitHub, I wanted to contribute something to an existing project. As it turned out, Martin Bean’s Dribbble PHP wrapper was a brilliant candidate. Martin had already done a substantial amount of work in getting the raw JSON data into a workable format. I decided to help out and add in support for comments, rebounds, and some updated examples. This tutorial is the finishing touch.

Dribble API in PHP

Dribbble has a nicely documented API. Unfortunately for some, it only documents the API’s output, which means that you’d have to do some work on your own to get it to working on a project. On the bright side, finding a library for your language is not hard. In this tutorial, we’ll walk through a couple examples using the Dribbble PHP project hosted on GitHub.

As part of my GitHub update, I included formatted example pages that cover most of the regular API activity. This includes displaying rebounds, comments, and a number of the preset feeds given by Dribbble. If you download the source files and look at the examples, getting started should be straightforward. For the average person, displaying their account’s last five shots is perfectly fine.

General Installation

Note: All of these instructions are based on the version available as of November 1, 2010. If you’re reading this in the future, things may look different. That’s technology for you.

To start off, make sure that you’ve downloaded the most recent version from the project page. Once you’ve unzipped the project folder you’ll see a couple folders. The first is “examples/” and has a few sample pages that you can play with and see how things work. The second is “src” and contains all the files you need to integrate it into your own project.

Assuming you leave these files in the “src/” folder, you’ll load the class using the following code at the top of your page. This code must be present in order for any of the examples below to work.

<?php

require_once('src/dribbble.php');

$dribbble = new Dribbble();

?>

This will create a new dribbble object stored in $dribbble. Everything below branches from this.

Example 1: List by User

This is probably what 90% of you are interested in. A Dribbble feed makes an excellent addition to any portfolio/personal site. The following code will pull in the latest 3 shots made by the specified account.

<ul class="dribbble-shots">
	<?php
		$player = $dribbble->player->find('zachdunn');
		$shots = $player->shots(array('per_page' => 3));
		foreach ($shots->shots as $shot) {
			echo sprintf('<li><a href="%s"><img src="%s" alt="%s" /></a></li>', $shot->url, $shot->image_url, $shot->title);
	} ?>
</ul>

Shots can be called in two sizes: teaser and full. The example above uses the full 400×300 default, but if you wanted to display teasers instead, you can replace the $shot->image_url with $shot->image_teaser_url.

For those unfamiliar with PHP’s sprintf() function, here’s a quick primer: The “%s” acts as a placeholder for the arguments provided after the first comma. In the example above, the $shot->url result will be placed into the href attribute, etc. You don’t have to use this method, but I find it to be much neater than a series of PHP blocks for one-liners.

Example 2: Popular Shots

Here’s how you could use the API to get the three latest shots from Dribbble’s popular section:

<ul class="shots">

	<?php
		//If we're using the same dribbble object, this will overwrite previous calls
		$popular_shots = $dribbble->shot->popular(array('page' => 1, 'per_page' => 3));
	foreach ($popular_shots->shots as $shot) { ?>
		<li>
			<h2><a href="<?php echo $shot->url;?>"><?php echo $shot->title; ?></a></h2>
			<a href="<?php echo $shot->url;?>"><img src="<?php echo $shot->image_url; ?>" alt="<?php echo $shot->title; ?>"/></a>
			<p>from <a href="<?php echo $shot->player->url; ?>"><?php echo $shot->player->name; ?></a>
		</li>
	<?php } ?>

</ul>

Notice that you’re also able to display information about each shot’s author as well as link to their respective profiles.

Example 3: Comments on a Shot

This last one would be useful if you wanted to make a Dribbble-powered testimonial system. The loop below will display comments for the shot specified by ID.

# find a shot
$shot = $dribbble->shot->find(62170);

# Get first 5 comments on first page
$comments = $shot->comments(array('page' => 1, 'per_page' => 5));

	<ul class="shots">
		<li>
			<h2><a href="<?php echo $shot->url;?>"><?php echo $shot->title; ?></a></h2>
			<a href="<?php echo $shot->url;?>"><img src="<?php echo $shot->image_url; ?>" alt="<?php echo $shot->title; ?>"/></a>
			<p>from <a href="<?php echo $shot->player->url; ?>"><?php echo $shot->player->name; ?></a>
		</li>
	</ul>

	<?php if ($comments) : ?>

		<ul class="comments">

		<?php foreach ($comments as $comment) { ?>

			<li>
				<p><span class="author"><a href="<?php echo $comment->player->url; ?>"><?php echo $comment->player->name; ?></a> says:</span> <?php echo $comment->body; ?></p>
			</li>

		<?php } ?>

		</ul>

	<?php else : ?>

		<p>No comments on this shot yet</p>

	<?php endif; ?>

If you have any confusion with these (or other) examples, I recommend you take a look at the demo pages packaged with the source code. I tried to make sure that they were as clear-cut as possible, and should make it easy to figure out most issues.

Fork It Yourself

Since the project is open source, if anyone is motivated enough to contribute, that would be wonderful. Even though the current version covers all of the basics, there are plenty of features that could be improved upon and integrated from scratch. Even a couple hours can add miles (or kilometers) of polish. If you make a branch that’s got some exciting stuff in it, post up a link in the comments! We’d love to see it.

…and before you ask, I don’t have any dribbble invites. Sorry to disappoint!

Links & References

1. The Dribbble PHP project on GitHub
2. Dribbble’s official API documentation
3. Follow me on Dribbble

A critical feature in web programming is the ability to seamlessly pass data from one page load to the next. It’s used most commonly when dealing with user logins, but also for passing error messages, shopping carts, etc.

Storing data across pages using PHP is done with two variables in the global scope, called $_SESSION and $_COOKIE, and although accomplishing the same end goal, the both go about it in very different ways. The purpose of this article is to give a brief look into the differences between cookies and sessions, when it’s better to use one versus the other, and the pros and cons of the two.

The difference is in how each store data. Cookies store data locally in the user’s browser, while sessions store data on the webserver.

Session Basics

Sessions are simply server-side cookies each with a corresponding client side cookie that contains only a reference to its server-side counterpart. When a user visits a page, the client sends the reference code to the server, and PHP will then match that reference code to a server-side cookie and load the data in the server’s cookie into the $_SESSION superglobal.

Pros

1. Can store very large amounts of data easily.
2. Save bandwidth by passing only a reference to the session each pageload. A client-side cookie has to pass all of its data.
3. Data is stored on the web server. This makes sessions secure, because the data cannot be viewed or edited by the client.

Cons

1. Ends when the browser is closed unless you’ve configured php.ini to extend sessions’ cookie lifetime. Cannot last forever.

Cookie Basics

Cookie data is sent to the web server every page load. PHP reads and stores the value into the $_COOKIE superglobal. When a cookie is created, you can give it a lifespan. After that lifespan runs out, it will expire.

Pros

1. Can last as long as the website needs. They will still be there even if the browser is closed and reopened.
2. Useful for “remember me” logins
3. Useful for storing temporary user settings. For example, if a user is browsing a paginated list of items, sorted a certain way, the sorting setting can be stored in a cookie.

Cons

1. Stored in the users filesystem. This means that the user can tamper with it and view it.
2. Can only store a limited amount of data.
3. Must pass all data to the webserver each pageload. This takes up more bandwidth.

Cookies in Action

Creating a cookie

The function definition:

bool setcookie ( string name [, string value [, int expire [, string path [, string domain [, int secure]]]]])

<?php
    if (!isset($_COOKIE['Ordering'])) {
        setcookie("Ordering", $_POST['ChangeOrdering'], time() + 31536000);
    }
?>

Using a cookie

<?php
	echo (isset($_COOKIE[‘ordering’])) ? $_COOKIE[‘ordering’] : ‘cookie value not set’;
?>

Deleting a cookie

<?php setcookie(‘favorite_color’); ?>

Setting a cookie with no value is the same as deleting it. This will not remove the file from the client computer. To do this, you can set the cookie expiration date to a time in the past, and the browser will take care of it.

Sessions in Action

Creating a session

<?php session_start(); ?>

This must be called near the top of your code before any output. When you call this function, PHP will check to see if the user sent a session cookie. If so, it will load the session data into $_SESSION. If not, it will create a new session file on the server and send the ID back to the client.

Setting a value

<?php $_SESSION[‘first_name’] = ‘Brian’; ?>

Reading a session value

<?php echo $_SESSION[‘first_name’]; ?>

Removing session data

<?php unset($_SESSION[‘first_name’]); ?>

Ending a session

<?php session_destroy(); ?>

The Bottom Line

Sessions are cookies where the data is stored on the server. Cookies are stored in the users filesystem (typically in their “Temporary Internet Files” folder). Both have their advantages, but on any given day, you’ll probably find yourself using sessions much more commonly.

PHP Documentation

1. PHP Manual: Sessions
2. PHP Manual: Cookies

Even though CSS3 has brought a lot to the table in regards to drop shadow effects, there are still plenty of reasons to use image alternatives. The drop shadows generated by CSS3 are relatively uniform, and don’t deviate much past size and transparency. In some cases, you might want to give a page some extra depth.

I ran into a similar situation in a recent client project, and decided to use a recent trend of warping drop shadows to help add some extra excitement to the page. You might have seen similar effects in other tutorials involving deleting a circular section, but this method will keep the edges from being too sharp. It also allows you to work with non-rectangular shapes because all points are editable in the warp tool’s grid.

Setting Up

Start a new Photoshop document. The size doesn’t matter because all of the elements will scale accordingly. I recommend changing the background color to something that will make a white box stand out, but not drown out a black shadow. We’ll use a light blue for the example. Draw up a white box and we’re ready to start on the shadow.

Add the Shadow

You might be tempted to use blending options right now. Resist the urge, because we’re aiming for something much more distinct.

Start by making a new layer that is positioned between the background and content box from the previous step. On the new layer, draw a rectangle selection that is just slightly smaller than the width of the content box. Fill this area with black.

With the black rectangle layer selection go to Filter>Gaussian Blur and set the radius to 6 pixels.

Love the Warp Tool

Photoshop’s warp tool is wildly underrated. It’s good for much more than messing around with celebrity faces or other random attempts to doctor photos. It’s particular good at taking specific shapes and molding them into another shape without ruining the appearance. This point is exactly why we’ll use it to shape our new drop shadow.

With the shadow layer selected, head to Edit>Transform>Warp to bring up the warping grid. Use the handles on this control to give a curvature to the blurred rectangle. Feel free to shift the layer around to get the best positioning.

Once the shape is set, simply lower the layer’s opacity down to about 15% and you’ve got a finished shadow that simulates a subtle page curl. Nice work!

Wrapping Up

There you have it, a drop shadow that gives content areas a feeling of “coming off the page” depth. As you might have guessed by now, this is a perfect footer background for content areas throughout the page. Not bad!

Good software enables us to take a lot of niceties for granted. Intelligent interfaces handle all the simple tasks so that we don’t need to worry about them. For example, when I type “www.desktopped.com” into an email or an instant message, I expect that it will be clickable on the other end without having to manually add in HTML tags. Another example is parsing text from a twitter feed. For example, “@desktopped is a blog about the #computers“, we expect both @desktopped and #computers to be links.

The ability to “linkify” text is a great tool to have when developing a blog or website. Possible uses include:

• Turning URLs clickable in content, comments, and anywhere else
• Turning valid email addresses clickable
• Turning twitter text clickable so that @desktopped, #computers, www.desktopped.com all become links.

To search a string for patterns, such as strings that begin with “http://” or “@” is an ability that can be applied in almost endless ways to improve the way we process and display data.

How can we do this? The best way with PHP is to use a universal pattern matching syntax called regular expressions and some useful PHP functions.

Regular Expressions Basics

A regular expression is a pattern string that represents a set of strings by using a variety of special characters.

The Basic Special Characters

• | connects two possible values and will turn up a match if the string matches either. For example hi|hello matches the strings “hi” and “hello”
• () are used to group values and set order of operations. For example, br(i|y)an will match both “brian” and “bryan”.
• [] are used to match a single character that appears inside the brackets. [abc] will match “a”, “b”, or “c”, but not “d”.
• * will turn up a match if there is zero or more of the preceding element. The string go*gle will match “ggle”, “gogle”, “google”, “gooogle”, etc.
• + will turn up a match if there is one or more of the preceding element. The string go+gle will match “gogle”, “google”, gooogle”, etc.
• ? will turn up a match if there is zero or one of the preceding character. The string desktopp?ed will match both “desktopped” and “desktoped”.

Other Common Special Characters

• \w will match a “word” character, which translates to any character alphanumeric or ‘_’
• \n \r and \t will match a new line, carriage return and tab respectively.

A full reference for special characters can be found here:

http://www.php.net/manual/en/function.preg-replace.php#89364

PHP Function: preg_replace

The preg_replace function in PHP will take a regular expressions pattern, a replacement string, and the text to be examined as arguments. It will check the input text against the pattern and then if there’s a match it will place certain pieces of the input text into the replacement string.

The pieces that are placed into the replacement string are determined by what is in parenthesis in the pattern string. They are then referenced in the replacement string by using $0, $1, $2, etc., where the $n matches the nth parenthesized pattern.

A Simple Example

$text= 'My name is Brian';
$pattern = 'My name is (Brian|Sam|Zach)';
$replacement = '$1 is a pretty cool guy.';
echo preg_replace($pattern, $replacement, $text);

The code will output “Brian is a pretty cool guy.” If $text was “My name is Zach”, the output would be “Zach is a pretty cool guy.” If $text was “My name is Nick”, there’d be no match and the original text would be returned; “My name is Nick”.

Useful Regex Functions

This function will turn all URLs in a body of text into clickable links

function link_it($text)
{
    $text= preg_replace("/(^|[\n ])([\w]*?)((ht|f)tp(s)?:\/\/[\w]+[^ \,\"\n\r\t<]*)/is", "$1$2<a href=\"$3\" >$3</a>", $text);
    $text= preg_replace("/(^|[\n ])([\w]*?)((www|ftp)\.[^ \,\"\t\n\r<]*)/is", "$1$2<a href=\"http://$3\" >$3</a>", $text);
    $text= preg_replace("/(^|[\n ])([a-z0-9&\-_\.]+?)@([\w\-]+\.([\w\-\.]+)+)/i", "$1<a href=\"mailto:$2@$3\">$2@$3</a>", $text);
    return($text);
}

This function will turn all pound signs (#) and at-sign (@) into hash tag and @reply links in a twitter feed.

function twitter_it($text)
{
    $text= preg_replace("/@(\w+)/", '<a href="http://www.twitter.com/$1" target="_blank">@$1</a>', $text);
    $text= preg_replace("/\#(\w+)/", '<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>',$text);
    return $text;
}

This function finds strings in your post body that you’ve identified with the pattern :tagname: and turns them into tag searches on your blog. For example: “This post is about :PHP:.” will result in “The post is about PHP“.

function tag_it($text)
{
    $text= preg_replace("/:(\w+):/", '<a href="http://www.buildinternet.com/tag/$1/" target="_blank">$1</a>',$text);
    return $text;
}

This function will highlight search terms in search result titles on your WordPress blog. Pass an array of keywords and it will do the rest. (Must be used inside the loop)

function highlight_terms($keys_array)
{
    $title = get_the_title();
    return preg_replace('/('.implode('|', $keys_array) .')/iu', '<span class="highlight">$0</span>', $title);
}

The function will take any string (usually a page title) and generate a URL slug.

function create_slug($string)
{
    $string= strtolower(trim($string));
    $string= preg_replace('/[^a-z0-9-]/', '-', $string);
    $string= preg_replace('/-+/', "-", $string);
    return $string;
}

Further Reading

Regular Expressions Resource:
http://www.regular-expressions.info

PHP pre_replace Manual:
http://php.net/manual/en/function.preg-replace.php