Nettuts+

Web Development & Design Tutorials

Best of Tuts+ in January 2012

Thu, 02 Feb 2012 15:37:09 +0000 -

Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!

---

Psdtuts+ — Photoshop Tutorials

• 

  Create a Pimped Out Truck Using Photoshop and Point and Shoot Photos

  Making modifications to your car or truck in Photoshop can be a lot of fun. In this tutorial we will demonstrate how to create a pimped out truck modification using photos taken with a simple point and shoot camera, with no advanced lighting setup. Let’s get started!

  Visit Article

• 

  Create an Elephant Sundae Using Photo Manipulation Techniques

  Photoshop is great at seamlessly combing photos to create an entirely new scene. In this tutorial we will create an elephant sundae using several stock photos. Let’s get started!

  Visit Article

• 

  The Incredible Digital Art of Michael Oswald

  In this article we will be featuring the work of Michael Oswald. Oswald is a digital artist with a unique style. His technique involves a combination of photo manipulation and digital painting techniques and the results are often stunning. Let’s take a look!

  Visit Article

---

Nettuts+ — Web Development Tutorials

• 

  Sublime Text 2 Tips and Tricks (Updated)

  Sublime Text 2 is one of the fastest and most incredible code editors to be released in a long time! With a community and plugin ecosystem as passionate as this one, it just might be impossible for any other editor to catch up. I’ll show you my favorite tips and tricks today.

  Visit Article

• 

  An In Depth Analysis of HTML5 Multimedia and Accessibility

  In this tutorial, youll learn how HTML5 helps to provide you with several ways of presenting your media content to users. As a result, youll increase the availability of your media to users with different
  needs and requirements, making it more accessible.

  Visit Article

• 

  Writing an API Wrapper in Ruby with TDD

  Sooner or later, all developers are required to interact with an API. The most difficult part is always related to reliably testing the code we write, and, as we want to make sure that everything works properly, we continuosly run code that queries the API itself. This process is slow and inefficient, as we can experience network issues and data inconsistencies (the API results may change). Let’s review how we can avoid all of this effort with Ruby.

  Visit Article

---

Vectortuts+ — Illustrator Tutorials

• 

  How to Illustrate a Microscope in Illustrator

  The microscopes is a symbol of our civilization. Throughout this tutorial on how to illustrate a vector microscope you’ll take advantage of numerous Illustrator tools. You will learn how to use blends, art brushes and 3D rendering in Adobe Illustrator. Let’s get started!

  Visit Article

• 

  Create a Picture Gallery in Illustrator

  This work is a common project created together with Iaroslav Lazunov and Alexander Egupov. We have used 3D rendering, Blends, Opacity masks, making this three-dimensional stage with vanishing points. Learn every step in how to create this picture gallery work.

  Visit Article

• 

  Important Resources for Learning How to Design Typefaces and Full Fonts

  If you’re serious about creating a typeface design, then you’ll need some solid resources to get started. Learn effective typeface design workflows, how to take an initial spark of an idea from sketch, through Illustrator, into Fontlab, and then work your creation into a complete and custom font design. Here are multiple tutorials that show you how to create fonts in Illustrator and Fontlab, and you can also dive into articles that describe the foundation of quality type design with ample inspirational examples.

  Visit Article

---

Webdesigntuts+ — Web Design Tutorials

• 

  A Beginner’s Guide to Pairing Fonts

  Pairing fonts can be a challenge. Selecting two or more fonts which work well is one thing – selecting two which work together to achieve your typographic aims may have you reaching for the aspirin. Let’s see if we can alleviate any headaches. This guide will help you get started with font pairing for the web.

  Visit Article

• 

  Design a Series of Smart Banner Ads in Photoshop

  With the continuous growth of the Internet, online marketing has gotten bigger every year, and along with it, the advertising industry. One major factor in all this craziness is buying and selling ads.

  Visit Article

• 

  Twitter Bootstrap 101: Introduction

  Twitter’s Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and javascript tools, freely available to use in your next web design project. This video series aims to introduce you to Bootstrap; taking you all the way from downloading the resources, to building a complete Bootstrap-based website.

  Visit Article

---

Phototuts+ — Photography Tutorials

• 

  HDR: Love it or Leave It?

  There are few techniques in the photography world that divide our community as much as HDR. High dynamic range images, or HDR images, are a special type of composite image that combines several images at different exposure settings in order to create an image with increased dynamic range. The look provided by HDR is loved by many, and disliked by perhaps just as many. In today’s article, we’re going to take a better look at what HDR is, and get some opinions from photographers using HDR.

  Visit Article

• 

  Inspiring Images of Cars and Motorcycles

  Cars and motorbikes have been around for 100 years. Throughout the century, they have looked beautiful, satisfied our need for speed and become a symbol for thrill seeking. Today, we’ll look at photos ranging from brand new Ferrari’s to classic muscle cars.

  Visit Article

• 

  Quick Tip: GIMP Portable – Take Your Editing Software With You

  While a number of smartphones now offer photo editing basics (and a plethora of apps to expand things even more), the portability of a solid photo editing program has been hard to come by. Photoshop is a monster in regards to space requirements and its ability to work on any system where it is not expressively installed. Picasa can be fairly ‘lightweight’ but lacks many of the more advanced photo editing tools. So what about GIMP?

  Visit Article

---

Cgtuts+ — Computer Graphics Tutorials

• 

  Modeling, UVmapping And Texturing A Low Poly T-Rex In Blender, Part 1

  In the first tutorial of 2012 you’ll learn how to create an awesome low-poly dinosaur using Blender and Gimp. In today’s post artist Karan Shah will walk you through the entire modeling process step by step, and show you how to create an optimized model suitable for use in any game engine.

  Visit Article

• 

  Create A Realistic Explosion In Maya Using Maya Fluids

  Today you’ll learn to animate and shade fluids, understand all of the major attributes, learn how adding fields will allow you to gain better control over your simulation, and how to light and render the final animation.

  Visit Article

• 

  SpeedTree To UDK: The Complete Workflow, Part 1 Creating The Tree

  Due to the shear number of polygons often required to make believable 3D trees, creating realistic ones for use “in-game” can be a challenging, time consuming task. SpeedTree from IDV aims to change all that with it’s intuitive UI, ease of use and powerful toolset. Making believable trees and plants has literally never been easier!

  Visit Article

---

Aetuts+ — After Effects Tutorials

• 

  Dominoes” CameraTracker and Cinema 4d Case Study – Day 1

  In this tutorial we’re going to go over the principle functionality of CameraTracker from The Foundry, learning basic workflow, optimizing results, aligning the ground plane and exporting this data from After Effects to Cinema 4d.

  Visit Article

• 

  Make An Amazing Motion Reactant Flame – Tuts+ Premium

  Using just a few video elements of torch flames, we composite a burning hand by using a series of null objects and expressions to drive a time lagged displacement effect to simulate fire burning from a moving source. We use the Puppet tool for the distortion and throw on some tracked lighting effects and a displacement map for the Heat. This principle can be used to add realistic, fluid motion to any tracked object.

  Visit Article

• 

  Key Tips To Becoming A Successful Video Freelancer

  Youve watched thousands of tutorials. Youve put in countless hours and spent many late nights working on personal projects. Youve finally come to the conclusion that this may just be something you would like to do for a career. It can seem a little intimidating at first, because how are you going to convince someone to pay you to do this? Up until now youve been your only client. How do you get more? Im going to share my insight and experiences on how to successfully launch your freelance career this year!

  Visit Article

---

Audiotuts+ — Audio & Production Tutorials

• 

  Free Professional Quality Audio Unit Plug-ins for Mac

  Lets face it, software is expensive. While there are hundreds of free plug-ins available online, more often than not two problems will arise: One, most of them are for PCs leaving us Mac users feeling left out. Two, most of them are vary poor quality.

  While I do agree with the saying, “The tools are only as good as the artist,” I also believe the opposite is true; that at some point the artist can only be as good as his tools are.

  Visit Article

• 

  Quick Tip: Drum Processing Part 4: Tips and Tricks

  This short series of quick tips is designed to give you a good overview of the audio processing techniques involved in creating a professional sounding drum beat for use in house, electro and breaks in Cubase. In this final part we will look at a few ways to add even more life to your drums.
  
  Here is a sample of the type of beat you could expect to end up with at the end of this series of tips:

  Visit Article

• 

  Quick Tip: Use the Doubling Technique for Quick Drums

  It’s 3:30 in the afternoon when your phone rings. The head of a music library is calling and she needs your help. They have a commercial for an A-list client that needs music, and they want you to submit an entry. You’ll get $10,000 if you land the gig.

  Visit Article

---

Activetuts+ — Flash, Flex & ActionScript Tutorials

• 

  Create a Microphone-Controlled Flash Game: Code

  In this mini-series, we’re creating a spaceship game where the main control is via the microphone: shout louder to make the ship fly higher. So far, we’ve created all the required graphical elements for the game. Now, it’s time to work on our code. We’ve got a lot to do, so let’s get started!

  Visit Article

• 

  Why Bother With jQuery? A Guide for (Former) Flash Developers

  If you, like many Flash developers, are looking into using HTML5 for your web apps, you’ll almost certainly have come across jQuery. It’s a very popular JavaScript library, used by a large percentage of the most visited websites – but what’s all the fuss about, and should you use it?

  Visit Article

• 

  An Introduction to the HTML5 Gamepad API

  As HTML games begin to gradually increase in popularity, vendors are starting to introduce some exciting new APIs to make gaming that little bit sweeter for both us developers and our end players. One of these is the GamepadAPI, which allows you to connect your good old console gamepad into your computer and use it for browser based games, plug and play style. Let’s dive in!

  Visit Article

---

Wptuts+ — WordPress Tutorials

• 

  The Rise of HTML5 in WordPress

  2011 was a big year for the advancement of HTML5 in the web development community. It became pretty widely adopted, especially for the mobile web. There have been major projects that help developers use HTML5, like Paul Irish’s HTML5 Boilerplate (technically 2010, but popularized in 2011) and books galore!

  Visit Article

• 

  Reusable Custom Meta Boxes Part 3: Extra Fields

  In Part 1 and Part 2 of our custom meta box template tutorial series, we learned how to create a field array to loop through and create a custom meta box with your standard fields. Now let’s throw in a bit of JavaScript for some fancy, but highly useful fields.

  Visit Article

• 

  The Ultimate Quickstart Guide to Speeding Up Your WordPress Site

  Give your site a boost! Implement crucial optimization techniques that will improve not only your ySlow score, but your Google rank too. In this tutorial we will cover all aspects of W3 caching, ySlow, Google page speed, CSS sprites & htaccess rules, to achieve a high ySlow score like i have done on my blog.

  Visit Article

---

Mobiletuts+ — Mobile Development Tutorials

• 

  iOS SDK: Creating an Awesome Carousel

  Engage your users with stunning carousels. We’ll look at how easy and clean it can be to implement scrollable, interactive carousels in your iOS applications. With high configurability, you can have 3D, flat, rotating, and endless scrolling arrays for data, images, or buttons.
  

  Visit Article

• 

  PhoneGap From Scratch: Introduction

  Want to learn how to use PhoneGap, but don’t know where to get started? Join us as we put together “Sculder”, not only a tribute to an excellent science fiction TV series, but a fully-fledged native mobile application for the believer in you!

  Visit Article

• 

  Mobile Flash is Far From Dead: Setting the Record Straight

  In light of recent announcements from Adobe, there has been a lot of confusion over the state of the Flash Platform – specifically in regard to Flash content on mobile devices. This article seeks to clarify many of the misconceptions that exist by addressing the main points of confusion around these announcements regardless of the initial, monumental, and absolutely unbelievable blunders from failed public (and private) relations messaging and general marketing surrounding these announcements.

  Visit Article

Learn jQuery in 30 Days

Wed, 01 Feb 2012 04:47:14 +0000 -

Sometimes, it’s easy to become overwhelmed by how much there is to learn in this industry. If jQuery happens to be on your personal “need to learn soon” list, then I’m happy to announce my new course: “Learn jQuery in 30 Days”. If you’ll give me fifteen minutes a day for the next month, I’ll help you become a jQuery pro – and it’s free!

---

How Does it Work?

Sporadically, your skills will be put to the test, when you take the interactive quizzes!

Once you enroll (free) via email, each day, you’ll receive a 10-15 minute video lesson. As you might expect, every episode will build upon the one it proceeds, and, sporadically, your skills will be put to the test, when you take the interactive quizzes!

Along the way, you’ll learn the essentials (querying and manipulating the DOM), while incrementally working your way up to more advanced topics, such as jQuery’s AJAX methods and plugin development.

I worked particularly hard to make the process of picking up this new skill as easy as possible for everyone – even if you have very, very little JavaScript experience. So…do you want to join me?

Recently in Web Development (January ’12 Edition)

Mon, 30 Jan 2012 20:37:02 +0000 -

Web development is an industry that’s in a state of constant flux with technologies and jargon changing and mutating in an endless cycle. Not to mention the sheer deluge of information one has to process everyday.

In this series, published monthly, we’ll seek to rectify this by bringing you all the important news, announcements, releases and interesting discussions within the web development industry in a concise package. Join me after the jump for an extra dose of community content this month!

---

News and Releases

All of the important news in a single place: releases, announcements, companies bickering, security issues and all related hoopla.

‘HTML5 Please’ Helps Devs Make Informed Decisions

HTML5 is a beast of a spec with no one truly knowing everything there is to know. This shiny new site gives you all the information you need to use HTML5 features on your site, right now.

The site provides you with recommendations as to whether you should be using that specific facet of HTML5 right now and provides you with helpful links to polyfills, when necessary. Time saver!

Read more

HP Open Sources Enyo

Enyo is the engine that powers webOS. But what exactly is Enyo, you ask? Well, it’s a spiffy JavaScript framework that helps you build better performing, easier to maintain application.

I’m sure you’ve heard this plenty of times before so why don’t you check out the link below to find out for yourself?

Read more

Tech Giants Protest SOPA

Last month saw a figurative deluge of protests against SOPA. If you have no idea what SOPA is, hit the link below to find out.

While many services merely blackened out their logo, many others, including Wikipedia and Reddit, went the extra length and completely blacked out their sites. The proposed bill has been shelved but I predict that we’ll see another in a different skin soon…

Read more

Vim on a Tablet? Yes, Please!

I understand not everyone uses a tablet but the number is growing, quite rapidly. Wouldn’t it be great to SSH into your server to fix that pesky bug? Get a proper laptop, you say? I’m going to ask you to shush for now and go with the flow.

This month saw the release of Vim for the iOS platform. And no, it’s not a gimped version. From a quick run through, it seems that all the nice bits are still in there. If you’re in the intersection between developers and iPad users, let us know in the comments below as to whether it fits your needs.

Read more

Cut the Rope Ported to the Browser

I’m sure a lot of you have played this ridiculously cute ‘aww’ inducing game. What brings the game to our list is the fact that it has been ported to the browser by the newly cool Internet Explorer team.

And true to their current vision, they’ve ported it using JavaScript and the magic of HTML5. The link below leads you to a write up about the game development instead of the game itself to protect your productivity.

Read more

The Rails Tutorial, Version Two, Inches Towards Completion

‘The’ Rails tutorial? Indeed it is! Michael Hartl’s free has helped many learn the voodoo that is Rails and Michael is slowly updating his ebook for Ruby 1.9 and Rails 3.2

Thus far, six chapters are out with a chapter expected every week in the future. Make sure to check the site out!

Read more

Sublime Text 2 Piles on More Features with New Beta

Sublime Text 2 is a grand piece of work and every build only reaffirms this. This new build introduces a ton of features including auto complete, performance improvements, a new UI theme and a ton more.

Read more

---

New Kids on the Block

As web developers, the sheer amount of resources we can tap into increases exponentially with time. Here is just a quick look at some recently created resources that deserve your attention — everything from new books to scripts and frameworks.

---

wrap.js

My wrap.js plugin handles the nested require based on a config, and takes it to the next level by generating an actual AMD module for you during the build. So now you don’t have to write wrappers around scripts that you wish were modules, wrap.js does that for you.

Github Repo

---

Resumable.js

Resumables is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.
The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes.

Github Repo

---

IcedCoffeeScript

IcedCoffeeScript is a fork of CoffeeScript. It is superset of the CoffeeScript language. The iced interpreter is a drop-in replacement for the standard coffee interpreter since it will interpret all existing CoffeeScript programs. IcedCoffeeScript (ICS) adds two new keywords: await and defer. These additions simply and powerfully streamline asynchronous control flow, both on the server and on the browser.

Github Repo

---

Banking.js

Banking.JS retrieves all of your bank transactions similiar to how quickbooks does it. There is no need to depend on or pay for third party services. The bank statement results are in JSON or Valid XML and supports all financial institutions.

Github Repo

---

Roy

Roy is a small functional language that compiles to JavaScript. The main features include whitespace significant syntax, compile-time meta-programming, structural typing and monad syntax

Github Repo

---

jsgif

jsgif an animated GIF player bookmarklet with support for pausing, going frame-by-frame, playing in reverse, and other features that one might expect from a video player.

Github Repo

---

zip.js

zip.js offers a low-level API for writing and reading large zip files (up to 4GB) with a stable RAM use. It also offers a Filesystem API in order to manipulate zip file structure.

Github Repo

---

Seriously.js

Seriously.js is a real-time, node-based video compositor for the web. Inspired by professional software such as After Effects and Nuke, Seriously.js renders high-quality video effects, but allows them to be dynamic and interactive.

Github Repo

---

Best of the Internet

Often, you’re not really looking for a tutorial as much as you’re looking for a rant, an opinion or the musings of a tired developer or just something cool with absolutely zero real world use. This sections contains links to precisely those — interesting and cool stuff from the developer community.

The Five Stages of Hosting

Five common options for hosting a web business, ranked in decreasing order of ‘cloudiness’.

Read more

JavaScript Needs Blocks

Yehuda Katz talks about why he wants to see block lambdas in JavaScript. It’s a bit technical but well worth a read.

Read more

How I Learned Enough Ruby On Rails In 12 Weeks To Launch Freelancify

A Non-Developer explains how… I think you know already. Just click the darn link and move on.

Read more

Why are software development task estimations regularly off by a factor of 2-3?

Is it the developer’s fault? Is it a management issue? Bad methodology, or lack thereof? Or is it ingrained in the nature of the process?

Read more

Explanation for the ‘Wat’ Talk – CodeMash 2012

This StackOverflow question, along with the well written answers below, explore the code that was demonstrated in the talk mentioned in the title. Provides a quick look at the quirkier portions of JavaScript.

Read more

Why are column oriented databases so much faster than row oriented databases?

A quick little read that explains why, and how, different databases perform differently. There isn’t much jargon there and gets the point quite clearly.

Read more

PHP Mind Love

The link below points to some PHP code. Figure out what the output is and you get a cookie!

Read more

Testing Socket.IO With Mocha, Should.js and Socket.IO Client

A clean writeup that details how the author got all the named technologies working together.

Read more

What is the difference between semicolons in JavaScript and in Python?

Ever had to think about the question above? How exactly do they each handle semicolons and newlines? Read up below.

Read more

The Programming Djinn

The Least Boring Programming Book teaches Ruby programming to beginners in an unconventional way.

Read more

Non-Canvas Wizardry

I don’t really have much context to go on here so just give the link below a click. Pretty smooth stuff for something that’s not canvas or Flash based.

Read more

---

Wrapping Up

Well, that’s about all the major changes that happened in our industry lately.

Do you want us to cover more standard news? A focus on upcoming scripts maybe? Or just more interesting posts and discussions from the community? Let us know in the comments and thank you so much for reading!

Writing an API Wrapper in Ruby with TDD

Sat, 28 Jan 2012 23:18:32 +0000 -

Sooner or later, all developers are required to interact with an API. The most difficult part is always related to reliably testing the code we write, and, as we want to make sure that everything works properly, we continuosly run code that queries the API itself. This process is slow and inefficient, as we can experience network issues and data inconsistencies (the API results may change). Let’s review how we can avoid all of this effort with Ruby.

---

Our Goal

“Flow is essential: write the tests, run them and see them fail, then write the minimal implementation code to make them pass. Once they all do, refactor if needed.”

Our goal is simple: write a small wrapper around the Dribbble API to retrieve information about a user (called ‘player’ in the Dribbble world).
As we will be using Ruby, we will also follow a TDD approach: if you’re not familiar with this technique, Nettuts+ has a good primer on RSpec you can read. In a nutshell, we will write tests before writing our code implementation, making it easier to spot bugs and to achieve a high code quality. Flow is essential: write the tests, run them and see them fail, then write the minimal implementation code to make them pass. Once they all do, refactor if needed.

The API

The Dribbble API is fairly straightforward. At the time of this it supports only GET requests and doesn’t require authentication: an ideal candidate for our tutorial. Moreover, it offers a 60 calls per minute limit, a restriction that perfectly shows why working with APIs require a smart approach.

---

Key Concepts

This tutorial needs to assume that you have some familiarity with testing concepts: fixtures, mocks, expectations. Testing is an important topic (especially in the Ruby community) and even if you are not a Rubyist, I’d encourage you to dig deeper into the matter and to search for equivalent tools for your everyday language. You may want to read “The RSpec book” by David Chelimsky et al., an excellent primer on Behavior Driven Development.

To summarize here, here are three key concepts you must know:

• Mock: also called double, a mock is “an object that stands in for another object in an example”. This means that if we want to test the interaction between an object and another, we can mock the second one. In this tutorial, we will mock the Dribbble API, as to test our code we don’t need the API, itself, but something that behaves like it and exposes the same interface.
• Fixture: a dataset that recreates a specific state in the system. A fixture can be used to create the needed data to test a piece of logic.
• Expectation: a test example written the from the point of view of the result we want to achieve.

---

Our Tools

“As a general practice, run tests every time you update them.”

WebMock is a Ruby mocking library that is used to mock (or stub) http requests. In other words, it allows you to simulate any HTTP request without actually making one. The primary advantage to this is being able to develop and test against any HTTP service without needing the service itself and without incurring in related issues (like API limits, IP restrictions and such).
VCR is a complementary tool that records any real http request and creates a fixture, a file that contains all the needed data to replicate that request without performing it again. We will configure it to use WebMock to do that. In other words, our tests will interact with the real Dribbble API just once: after that, WebMock will stub all the requests thanks to the data recorded by VCR. We will have a perfect replica of the Dribbble API responses recorded locally. In addition, WebMock will let us test edge cases (like the request timing out) easily and consistently. A wonderful consequence of our setup is that everything will be extremely fast.

As for unit testing, we will be using Minitest. It’s a fast and simple unit testing library that also supports expectations in the RSpec fashion. It offers a smaller feature set, but I find that this actually encourages and pushes you to separate your logic into small, testable methods. Minitest is part of Ruby 1.9, so if you’re using it (I hope so) you don’t need to install it. On Ruby 1.8, it’s only a matter of gem install minitest.

I will be using Ruby 1.9.3: if you don’t, you will probably encounter some issues related to require_relative, but I’ve included fallback code in a comment right below it. As a general practice, you should run tests every time you update them, even if I won’t be mentioning this step explicitly throughout the tutorial.

---

Setup

We will use the conventional /lib and /spec folder structure to organize our code. As for the name of our library, we’ll call it Dish, following the Dribbble convention of using basketball related terms.

The Gemfile will contain all our dependencies, albeit they’re quite small.

source :rubygems

gem 'httparty'

group :test do
  gem 'webmock'
  gem 'vcr'
  gem 'turn'
  gem 'rake'
end

Httparty is an easy to use gem to handle HTTP requests; it will be the core of our library. In the test group, we will also add Turn to change the output of our tests to be more descriptive and to support color.

The /lib and /spec folders have a symmetrical structure: for every file contained in the /lib/dish folder, there should be a file inside /spec/dish with the same name and the ‘_spec’ suffix.

Let’s start by creating a /lib/dish.rb file and add the following code:

require "httparty"
Dir[File.dirname(__FILE__) + '/dish/*.rb'].each do |file|
  require file
end

It doesn’t do much: it requires ‘httparty’ and then iterates over every .rb file inside /lib/dish to require it. With this file in place, we will be able to add any functionality inside separate files in /lib/dish and have it automatically loaded just by requiring this single file.

Let’s move to the /spec folder. Here’s the content of the spec_helper.rb file.

#we need the actual library file
require_relative '../lib/dish'
# For Ruby < 1.9.3, use this instead of require_relative
# require(File.expand_path('../../lib/dish', __FILE__))

#dependencies
require 'minitest/autorun'
require 'webmock/minitest'
require 'vcr'
require 'turn'

Turn.config do |c|
 # :outline  - turn's original case/test outline mode [default]
 c.format  = :outline
 # turn on invoke/execute tracing, enable full backtrace
 c.trace   = true
 # use humanized test names (works only with :outline format)
 c.natural = true
end

#VCR config
VCR.config do |c|
  c.cassette_library_dir = 'spec/fixtures/dish_cassettes'
  c.stub_with :webmock
end

There’s quite a few things here worth noting, so let’s break it piece by piece:

• At first, we require the main lib file for our app, making the code we want to test available to the test suite. The require_relative statement is a Ruby 1.9.3 addition.
• We then require all the library dependencies: minitest/autorun includes all the expectations we will be using, webmock/minitest adds the needed bindings between the two libraries, while vcr and turn are pretty self-explanatory.
• The Turn config block merely needs to tweak our test output. We will use the outline format, where we can see the description of our specs.
• The VCR config blocks tells VCR to store the requests into a fixture folder (note the relative path) and to use WebMock as a stubbing library (VCR supports some other ones).

Last, but not least, the Rakefile that contains some support code:

require 'rake/testtask'

Rake::TestTask.new do |t|
  t.test_files = FileList['spec/lib/dish/*_spec.rb']
  t.verbose = true
end

task :default => test

The rake/testtask library includes a TestTask class that is useful to set the location of our test files. From now on, to run our specs, we will only type rake from the library root directory.

As a way to test our configuration, let’s add the following code to /lib/dish/player.rb:

module Dish
  class Player
  end
end

Then /spec/lib/dish/player_spec.rb:

require_relative '../../spec_helper'
# For Ruby < 1.9.3, use this instead of require_relative
# require (File.expand_path('./../../../spec_helper', __FILE__))

describe Dish::Player do

  it "must work" do
    "Yay!".must_be_instance_of String
  end

end

Running rake should give you one test passing and no errors. This test is by no means useful for our project, yet it implicitly verifies that our library file structure is in place (the describe block would throw an error if the Dish::Player module was not loaded).

---

First Specs

To work properly, Dish requires the Httparty modules and the correct base_uri, i.e. the base url of the Dribbble API. Let’s write the relevant tests for these requirements in player_spec.rb:

...
describe Dish::Player do

  describe "default attributes" do

    it "must include httparty methods" do
      Dish::Player.must_include HTTParty
    end

    it "must have the base url set to the Dribble API endpoint" do
      Dish::Player.base_uri.must_equal 'http://api.dribbble.com'
    end

  end

end

As you can see, Minitest expectations are self-explanatory, especially if you are an RSpec user: the biggest difference is wording, where Minitest prefers “must/wont” to “should/should_not”.

Running these tests will show one error and one failure. To have them pass, let’s add our first lines of implementation code to player.rb:

module Dish

  class Player

    include HTTParty

    base_uri 'http://api.dribbble.com'

  end

end

Running rake again should show the two specs passing. Now our Player class has access to all Httparty class methods, like get or post.

---

Recording our First Request

As we will be working on the Player class, we will need to have API data for a player. The Dribbble API documentation page shows that the endpoint to get data about a specific player is http://api.dribbble.com/players/:id

As in typical Rails fashion, :id is either the id or the username of a specific player. We will be using simplebits, the username of Dan Cederholm, one of the Dribbble founders.

To record the request with VCR, let’s update our player_spec.rb file by adding the following describe block to the spec, right after the first one:

  ...

  describe "GET profile" do

  before do
    VCR.insert_cassette 'player', :record => :new_episodes
  end

  after do
    VCR.eject_cassette
  end

  it "records the fixture" do
    Dish::Player.get('/players/simplebits')
  end

  end

end

After running rake, you can verify that the fixture has been created. From now on, all our tests will be completely network independent.

The before block is used to execute a specific portion of code before every expectation: we use it to add the VCR macro used to record a fixture that we will call ‘player’. This will create a player.yml file under spec/fixtures/dish_cassettes. The :record option is set to record all new requests once and replay them on every subsequent, identical request. As a proof of concept, we can add a spec whose only aim is to record a fixture for simplebits’s profile. The after directive tells VCR to remove the cassette after the tests, making sure that everything is properly isolated. The get method on the Player class is made available, thanks to the inclusion of the Httparty module.

After running rake, you can verify that the fixture has been created. From now on, all our tests will be completely network independent.

---

Getting the Player Profile

Every Dribbble user has a profile that contains a pretty extensive amount of data. Let’s think about how we would like our library to be when actually used: this is a useful way to flesh out our DSL will work. Here’s what we want to achieve:

simplebits = Dish::Player.new('simplebits')
simplebits.profile
  => #returns a hash with all the data from the API
simplebits.username
  => 'simplebits'
simplebits.id
  => 1
simplebits.shots_count
  => 157

Simple and effective: we want to instantiate a Player by using its username and then get access to its data by calling methods on the instance that map to the attributes returned by the API. We need to be consistent with the API itself.

Let’s tackle one thing at a time and write some tests related to getting the player data from the API. We can modify our "GET profile" block to have:

describe "GET profile" do

  let(:player) { Dish::Player.new }

  before do
    VCR.insert_cassette 'player', :record => :new_episodes
  end

  after do
    VCR.eject_cassette
  end

  it "must have a profile method" do
    player.must_respond_to :profile
  end

  it "must parse the api response from JSON to Hash" do
    player.profile.must_be_instance_of Hash
  end

  it "must perform the request and get the data" do
    player.profile["username"].must_equal 'simplebits'
  end

end

The let directive at the top creates a Dish::Player instance available in the expectations. Next, we want to make sure that our player has got a profile method whose value is a hash representing the data from the API. As a last step, we test a sample key (the username) to make sure that we actually perform the request.

Note that we’re not yet handling how to set the username, as this is a further step. The minimal implementation required is the following:

...
class Player

  include HTTParty

  base_uri 'http://api.dribbble.com'

  def profile
    self.class.get '/players/simplebits'
  end

end
...

A very little amount of code: we’re just wrapping a get call in the profile method. We then pass the hardcoded path to retrieve simplebits’s data, data that we had already stored thanks to VCR.

All our tests should be passing.

---

Setting the Username

Now that we have a working profile function, we can take care of the username. Here are the relevant specs:

describe "default instance attributes" do

  let(:player) { Dish::Player.new('simplebits') }

  it "must have an id attribute" do
    player.must_respond_to :username
  end

  it "must have the right id" do
    player.username.must_equal 'simplebits'
  end

end

describe "GET profile" do

  let(:player) { Dish::Player.new('simplebits') }

  before do
    VCR.insert_cassette 'base', :record => :new_episodes
  end

  after do
    VCR.eject_cassette
  end

  it "must have a profile method" do
    player.must_respond_to :profile
  end

  it "must parse the api response from JSON to Hash" do
    player.profile.must_be_instance_of Hash
  end

  it "must get the right profile" do
    player.profile["username"].must_equal "simplebits"
  end

end

We’ve added a new describe block to check the username we’re going to add and simply amended the player initialization in the GET profile block to reflect the DSL we want to have. Running the specs now will reveal many errors, as our Player class doesn’t accept arguments when initialized (for now).

Implementation is very straightforward:

...
class Player

  attr_accessor :username

  include HTTParty

  base_uri 'http://api.dribbble.com'

  def initialize(username)
    self.username = username
  end

  def profile
    self.class.get "/players/#{self.username}"
  end

end
...

The initialize method gets a username that gets stored inside the class thanks to the attr_accessor method added above. We then change the profile method to interpolate the username attribute.

We should get all our tests passing once again.

---

Dynamic Attributes

At a basic level, our lib is in pretty good shape. As profile is a Hash, we could stop here and already use it by passing the key of the attribute we want to get the value for. Our goal, however, is to create an easy to use DSL that has a method for each attribute.

Let’s think about what we need to achieve. Let’s assume we have a player instance and stub how it would work:

player.username
  => 'simplebits'
player.shots_count
  => 157
player.foo_attribute
  => NoMethodError

Let’s translate this into specs and add them to the GET profile block:

...
describe "dynamic attributes" do

  before do
    player.profile
  end

  it "must return the attribute value if present in profile" do
    player.id.must_equal 1
  end

  it "must raise method missing if attribute is not present" do
    lambda { player.foo_attribute }.must_raise NoMethodError
  end

end
...

We already have a spec for username, so we don’t need to add another one. Note a few things:

• we explicitly call player.profile in a before block, otherwise it will be nil when we try to get the attribute value.
• to test that foo_attribute raises an exception, we need to wrap it in a lambda and check that it raises the expected error.
• we test that id equals 1, as we know that that is the expected value (this is a purely data-dependent test).

Implementation-wise, we could define a series of methods to access the profile hash, yet this would create a lot of duplicated logic. Moreover, the would rely on the API result to always have the same keys.

“We will rely on method_missing to handle this cases and ‘generate’ all those methods on the fly.”

Instead, we will rely on method_missing to handle this cases and ‘generate’ all those methods on the fly. But what does this mean? Without going into too much metaprogramming, we can simply say that every time we call a method not present on the object, Ruby raises a NoMethodError by using method_missing. By redefining this very method inside a class, we can modify its behaviour.

In our case, we will intercept the method_missing call, verify that the method name that has been called is a key in the profile hash and in case of positive result, return the hash value for that key. If not, we will call super to raise a standard NoMethodError: this is needed to make sure that our library behaves exactly the way any other library would do. In other words, we want to guarantee the least possible surprise.

Let’s add the following code to the Player class:

def method_missing(name)
  if profile.has_key?(name.to_s)
    profile[name.to_s]
  else
    super
  end
end

The code does exactly what described above. If you now run the specs, you should have them all pass. I’d encorage you to add some more to the spec files for some other attribute, like shots_count.

This implementation, however, is not really idiomatic Ruby. It works, but it can be streamlined into a ternary operator, a condensed form of an if-else conditional. It can be rewritten as:

def method_missing(name, *args, &block)
  profile.has_key?(name.to_s) ? profile[name.to_s] : super
end

It’s not just a matter of length, but also a matter of consistency and shared conventions between developers. Browsing source code of Ruby gems and libraries is a good way to get accustomed to these conventions.

---

Caching

As a final step, we want to make sure that our library is efficient. It should not make any more requests than needed and possibly cache data internally. Once again, let’s think about how we could use it:

player.profile
  => performs the request and returns a Hash
player.profile
  => returns the same hash
player.profile(true)
  => forces the reload of the http request and then returns the hash (with data changes if necessary)

How can we test this? We can by using WebMock to enable and disable network connections to the API endpoint. Even if we’re using VCR fixtures, WebMock can simulate a network Timeout or a different response to the server. In our case, we can test caching by getting the profile once and then disabling the network. By calling player.profile again we should see the same data, while by calling player.profile(true) we should get a Timeout::Error, as the library would try to connect to the (disabled) API endpoint.

Let’s add another block to the player_spec.rb file, right after dynamic attribute generation:

describe "caching" do

  # we use Webmock to disable the network connection after
  # fetching the profile
  before do
    player.profile
    stub_request(:any, /api.dribbble.com/).to_timeout
  end

  it "must cache the profile" do
    player.profile.must_be_instance_of Hash
  end

  it "must refresh the profile if forced" do
    lambda { player.profile(true) }.must_raise Timeout::Error
  end

end

The stub_request method intercepts all calls to the API endpoint and simulates a timeout, raising the expected Timeout::Error. As we did before, we test the presence of this error in a lambda.

Implementation can be tricky, so we’ll split it into two steps. Firstly, let’s move the actual http request to a private method:

...
def profile
  get_profile
end

...

private

def get_profile
  self.class.get("/players/#{self.username}")
end
...

This will not get our specs passing, as we’re not caching the result of get_profile. To do that, let’s change the profile method:

...
def profile
  @profile ||= get_profile
end
...

We will store the result hash into an instance variable. Also note the ||= operator, whose presence makes sure that get_profile is run only if @profile returns a falsy value (like nil).

Next we can add the forced reload directive:

...
def profile(force = false)
  force ? @profile = get_profile : @profile ||= get_profile
end
...

We’re using a ternary again: if force is false, we perform get_profile and cache it, if not, we use the logic written in the previous version of this method (i.e. performing the request only if we don’t have already an hash).

Our specs should be green now and this is also the end of our tutorial.

---

Wrapping Up

Our purpose in this tutorial was writing a small and efficient library to interact with the Dribbble API; we’ve laid the foundation for this to happen. Most of the logic we’ve written can be abstracted and requesed to access all the other endpoints. Minitest, WebMock and VCR have proven to be valuable tools to help us shape our code.

We do, however, need to be aware of a small caveat: VCR can become a double-edged sword, as our tests can become too much data-dependent. If, for any reason, the API we’re building against changes without any visible sign (like a version number), we may risk having our tests perfectly working with a dataset, which is no longer relevant. In that case, removing and recreating the fixture is the best way to make sure that our code still works as expected.

24 Extremely Useful Ruby Gems for Web Development

Thu, 26 Jan 2012 21:38:56 +0000 -

One of the nicer things about developing on the Ruby platform is the sheer amount of meticulously categorized, highly reusable code wrapped up in the form of aptly named ‘gems’.

I’m sure you’ve heard of popular frameworks like Sinatra or the super popular Rails that ship as gems but you’re missing an entire spectrum of others that handle issues at a much lower level. Start using these and watch your productivity shoot through the roof!

---

A Quick Note

I’m well aware that some of the gems listed here have Rails, or parts of Rails, as a dependency. That doesn’t mean that they are any less useful or need to be sneered at.

---

CarrierWave

Upload files in your Ruby applications, map them to a range of ORMs, store them on different backends. It works well with Rack based web applications, such as Ruby on Rails.

Related reading

• Github repo
• A Gentle Introduction to CarrierWave

---

Kaminari

Kaminari is a Scope & Engine based, clean, powerful, customizable and sophisticated paginator. Kaminari supports multiple ORMs (ActiveRecord, Mongoid, MongoMapper) multiple web frameworks (Rails, Sinatra), and multiple template engines (ERB, Haml).

Related reading

• Github repo
• Railscasts #254 Pagination with Kaminari

---

HAML

Haml (HTML Abstraction Markup Language) is a layer on top of XHTML or XML that’s designed to express the structure of XHTML or XML documents in a non-repetitive, elegant, easy way, using indentation rather than closing tags and allowing Ruby to be embedded with ease. It was originally envisioned as a plugin for Ruby on Rails, but it can function as a stand-alone templating engine.

Related reading

• HAML website
• An Introduction to Haml and Sinatra
• An Introduction to Haml

---

Authlogic

A simple, unobtrusive model based Ruby authentication solution. Authlogic is very flexible, it has a strong public API and a plethora of hooks to allow you to modify behavior and extend it.

Related reading

• Github repo
• Railscasts #160 Authlogic

---

Shoulda

Shoulda is a gem that allows you to create more understandable tests for your Ruby application. Shoulda allows you to provide context to your tests enabling you to categorize tests according to a specific feature or scenario you’re testing.

Related reading

• Github repo
• Shoulda Looked At It Sooner

---

factory_girl

factory_girl provides a framework and DSL for defining and using factories – less error-prone, more explicit, and all-around easier to work with than fixtures. It has straightforward definition syntax, support for multiple build strategies (saved instances, unsaved instances, attribute hashes, and stubbed objects), and support for multiple factories for the same class (user, admin_user, and so on), including factory inheritance.

Related reading

• Github repo
• Using factory_girl to simplify our test setup

---

RMagick

RMagick is an interface between the Ruby programming language and the ImageMagick and GraphicsMagick image processing libraries.

Related reading

• Github repo
• Drawing with RVG

---

Cancan

CanCan is an authorization library for Ruby on Rails which restricts what resources a given user is allowed to access and is decoupled from user roles. All permissions are stored in a single location and not duplicated across controllers, views, and database queries.

Related reading

• Github repo
• Railscasts #192 Authorization with CanCan

---

Nokogiri

Nokogiri is an HTML, XML, SAX, and Reader parser. Among Nokogiri’s many features is the ability to search documents via XPath or CSS3 selectors. Nokogiri parses and searches XML/HTML very quickly, and also has correctly implemented CSS3 selector support as well as XPath support.

Related reading

• Github repo
• Getting Started with Nokogiri
• Railscasts #190 Screen Scraping with Nokogiri

---

SASS

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Related reading

• Github repo
• Railscasts #268 Sass Basics

---

Formtastic

Formtastic is a Rails FormBuilder DSL (with some other goodies) to make it far easier to create beautiful, semantically rich, syntactically awesome, readily stylable and wonderfully accessible HTML forms in your Rails applications.

Related reading

• Github repo
• Railscasts #184 Formtastic Part 1
• Railscasts #185 Formtastic Part 2

---

Capistrano

Capistrano is a utility and framework for executing commands in parallel on multiple remote machines, via SSH. It uses a simple DSL (borrowed in part from Rake) that allows you to define tasks, which may be applied to machines in certain roles. It also supports tunneling connections via some gateway machine to allow operations to be performed behind VPN’s and firewalls.

Related reading

• Github repo
• Railscasts #133 Capistrano Tasks

---

Omniauth

OmniAuth is a Ruby authentication framework that provides a standardized interface to many different authentication providers such as Facebook, OpenID, and even traditional username and password.

Related reading

• Github repo
• How to Use Omniauth to Authenticate your Users
• Railscasts #241 Simple OmniAuth

---

Bundler

Bundler is a tool that manages gem dependencies for your ruby application. It takes a gem manifest file and is able to fetch, download, and install the gems and all child dependencies specified in this manifest. It can manage any update to the gem manifest file and update the bundle’s gems accordingly. It also lets you run any ruby code in context of the bundle’s gem environment.

Related reading

• Github repo
• Using the New Gem Bundler Today

---

resque

Resque (pronounced like “rescue”) is a Redis-backed library for creating background jobs, placing those jobs on multiple queues, and processing them later. Resque is heavily inspired by DelayedJob.

Related reading

• Github repo
• Do YOU know Resque?
• Railscasts #271 Resque

---

Jammit

Jammit is an industrial strength asset packaging library for Rails, providing both the CSS and JavaScript concatenation and compression that you’d expect, as well as YUI Compressor and Closure Compiler compatibility, ahead-of-time gzipping, built-in JavaScript template support, and optional Data-URI / MHTML image embedding.

Related reading

• Github repo
• Using Jammit in Rails

---

capybara

Capybara helps you test Rails and Rack applications by simulating how a real user would interact with your app. It is agnostic about the driver running your tests and comes with Rack::Test and Selenium support built in.

Related reading

• Github repo
• Capybara (and Selenium) with RSpec & Rails 3

---

Active Merchant

Active Merchant is an extraction from the e-commerce system Shopify. Shopify’s requirements for a simple and unified API to access dozens of different payment gateways with very different internal APIs was the chief principle in designing the library. It was developed for usage in Ruby on Rails web applications and integrates seamlessly as a plugin but it also works excellently as a stand alone library.

Related reading

• Github repo
• Railscasts #144 Active Merchant Basics

---

eventmachine

EventMachine implements a fast, single-threaded engine for arbitrary networkcommunications. It’s extremely easy to use in Ruby. EventMachine wraps all interactions with IP sockets, allowing programs to concentrate on the implementation of network protocols. It can be used to create both network servers and clients.

Related reading

• Github repo
• An introduction to eventmachine, and how to avoid callback spaghetti

---

mustache

Inspired by ctemplate, Mustache is a framework-agnostic way to renderlogic-free views.As ctemplates says, “It emphasizes separating logic from presentation:it is impossible to embed application logic in this templatelanguage.

Related reading

• Github repo

---

Passenger

Phusion Passenger™ — a.k.a. mod_rails or mod_rack — makes deployment of Ruby web applications, such as those built on the revolutionary Ruby on Rails web framework, a breeze.

Related reading

• Github repo
• Railscasts #122 Passenger in Development

---

Chef

Chef is a system integration framework designed to bring the benefits of configuration management to your entire infrastructure. With Chef, you can manage your servers by writing code, not by running commands.

Related reading

• Github repo
• Getting started with Chef tutorial

---

Thinking Sphinx

A concise and easy-to-use Ruby library that connects ActiveRecord to the Sphinx search daemon, managing configuration, indexing and searching.

Related reading

• Github repo
• Railscasts #120 Thinking Sphinx

---

Wrapping Up

So those were some of the awesome gems I’ve found extremely useful when I’m whipping up a web app in Ruby. I’m a 100% sure I’m missing a metric butt load of others though. Let me know about your favorite gems in the comments below and thank you so much for reading!

Why you Should be using PHP’s PDO for Database Access

Wed, 25 Jan 2012 16:04:40 +0000 -

Many PHP programmers learned how to access databases by using either the MySQL or MySQLi extensions. As of PHP 5.1, there’s a better way. PHP Data Objects (PDO) provide methods for prepared statements and working with objects that will make you far more productive!

May of 2010

---

PDO Introduction

“PDO – PHP Data Objects – is a database access layer providing a uniform method of access to multiple databases.”

It doesn’t account for database-specific syntax, but can allow for the process of switching databases and platforms to be fairly painless, simply by switching the connection string in many instances.

This tutorial isn’t meant to be a complete how-to on SQL. It’s written primarily for people currently using the mysql or mysqli extension to help them make the jump to the more portable and powerful PDO.

Database Support

The extension can support any database that a PDO driver has been written for. At the time of this writing, the following database drivers are available:

• PDO_DBLIB ( FreeTDS / Microsoft SQL Server / Sybase )
• PDO_FIREBIRD ( Firebird/Interbase 6 )
• PDO_IBM ( IBM DB2 )
• PDO_INFORMIX ( IBM Informix Dynamic Server )
• PDO_MYSQL ( MySQL 3.x/4.x/5.x )
• PDO_OCI ( Oracle Call Interface )
• PDO_ODBC ( ODBC v3 (IBM DB2, unixODBC and win32 ODBC) )
• PDO_PGSQL ( PostgreSQL )
• PDO_SQLITE ( SQLite 3 and SQLite 2 )
• PDO_4D ( 4D )

All of these drivers are not necessarily available on your system; here’s a quick way to find out which drivers you have:

print_r(PDO::getAvailableDrivers());

---

Connecting

Different databases may have slightly different connection methods. Below, the method to connect to some of the most popular databases are shown. You’ll notice that the first three are identical, other then the database type – and then SQLite has its own syntax.

try {
  # MS SQL Server and Sybase with PDO_DBLIB
  $DBH = new PDO("mssql:host=$host;dbname=$dbname, $user, $pass");
  $DBH = new PDO("sybase:host=$host;dbname=$dbname, $user, $pass");

  # MySQL with PDO_MYSQL
  $DBH = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);

  # SQLite Database
  $DBH = new PDO("sqlite:my/database/path/database.db");
}
catch(PDOException $e) {
    echo $e->getMessage();
}

Please take note of the try/catch block – you should always wrap your PDO operations in a try/catch, and use the exception mechanism – more on this shortly. Typically you’re only going to make a single connection – there are several listed to show you the syntax. $DBH stands for ‘database handle’ and will be used throughout this tutorial.

You can close any connection by setting the handle to null.

# close the connection
$DBH = null;

You can get more information on database specific options and/or connection strings for other databases from PHP.net.

---

Exceptions and PDO

PDO can use exceptions to handle errors, which means anything you do with PDO should be wrapped in a try/catch block. You can force PDO into one of three error modes by setting the error mode attribute on your newly created database handle. Here’s the syntax:

$DBH->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_SILENT );
$DBH->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING );
$DBH->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

No matter what error mode you set, an error connecting will always produce an exception, and creating a connection should always be contained in a try/catch block.

PDO::ERRMODE_SILENT

This is the default error mode. If you leave it in this mode, you’ll have to check for errors in the way you’re probably used to if you used the mysql or mysqli extensions. The other two methods are more ideal for DRY programming.

PDO::ERRMODE_WARNING

This mode will issue a standard PHP warning, and allow the program to continue execution. It’s useful for debugging.

PDO::ERRMODE_EXCEPTION

This is the mode you should want in most situations. It fires an exception, allowing you to handle errors gracefully and hide data that might help someone exploit your system. Here’s an example of taking advantage of exceptions:

# connect to the database
try {
  $DBH = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
  $DBH->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

  # UH-OH! Typed DELECT instead of SELECT!
  $DBH->prepare('DELECT name FROM people');
}
catch(PDOException $e) {
    echo "I'm sorry, Dave. I'm afraid I can't do that.";
    file_put_contents('PDOErrors.txt', $e->getMessage(), FILE_APPEND);
}

There’s an intentional error in the select statement; this will cause an exception. The exception sends the details of the error to a log file, and displays a friendly (or not so friendly) message to the user.

---

Insert and Update

Inserting new data, or updating existing data is one of the more common database operations. Using PDO, this is normally a two-step process. Everything covered in this section applies equally to both UPDATE and INSERT operations.

Here’s an example of the most basic type of insert:

# STH means "Statement Handle"
$STH = $DBH->prepare("INSERT INTO folks ( first_name ) values ( 'Cathy' )");
$STH->execute();

You could also accomplish the same operation by using the exec() method, with one less call. In most situations, you’re going to use the longer method so you can take advantage of prepared statements. Even if you’re only going to use it once, using prepared statements will help protect you from SQL injection attacks.

Prepared Statements

Using prepared statements will help protect you from SQL injection.

A prepared statement is a precompiled SQL statement that can be executed multiple times by sending just the data to the server. It has the added advantage of automatically making the data used in the placeholders safe from SQL injection attacks.

You use a prepared statement by including placeholders in your SQL. Here’s three examples: one without placeholders, one with unnamed placeholders, and one with named placeholders.

# no placeholders - ripe for SQL Injection!
$STH = $DBH->("INSERT INTO folks (name, addr, city) values ($name, $addr, $city)");

# unnamed placeholders
$STH = $DBH->("INSERT INTO folks (name, addr, city) values (?, ?, ?);

# named placeholders
$STH = $DBH->("INSERT INTO folks (name, addr, city) value (:name, :addr, :city)");

You want to avoid the first method; it’s here for comparison. The choice of using named or unnamed placeholders will affect how you set data for those statements.

Unnamed Placeholders

# assign variables to each place holder, indexed 1-3
$STH->bindParam(1, $name);
$STH->bindParam(2, $addr);
$STH->bindParam(3, $city);

# insert one row
$name = "Daniel"
$addr = "1 Wicked Way";
$city = "Arlington Heights";
$STH->execute();

# insert another row with different values
$name = "Steve"
$addr = "5 Circle Drive";
$city = "Schaumburg";
$STH->execute();

There are two steps here. First, we assign variables to the various placeholders (lines 2-4). Then, we assign values to those placeholders and execute the statement. To send another set of data, just change the values of those variables and execute the statement again.

Does this seem a bit unwieldy for statements with a lot of parameters? It is. However, if your data is stored in an array, there’s an easy shortcut:

# the data we want to insert
$data = array('Cathy', '9 Dark and Twisty Road', 'Cardiff');

$STH = $DBH->("INSERT INTO folks (name, addr, city) values (?, ?, ?);
$STH->execute($data);

That’s easy!

The data in the array applies to the placeholders in order. $data[0] goes into the first placeholder, $data[1] the second, etc. However, if your array indexes are not in order, this won’t work properly, and you’ll need to re-index the array.

Named Placeholders

You could probably guess the syntax, but here’s an example:

# the first argument is the named placeholder name - notice named
# placeholders always start with a colon.
$STH->bindParam(':name', $name);

You can use a shortcut here as well, but it works with associative arrays. Here’s an example:

# the data we want to insert
$data = array( 'name' => 'Cathy', 'addr' => '9 Dark and Twisty', 'city' => 'Cardiff' );

# the shortcut!
$STH = $DBH->("INSERT INTO folks (name, addr, city) value (:name, :addr, :city)");
$STH->execute($data);

The keys of your array do not need to start with a colon, but otherwise need to match the named placeholders. If you have an array of arrays you can iterate over them, and simply call the execute with each array of data.

Another nice feature of named placeholders is the ability to insert objects directly into your database, assuming the properties match the named fields. Here’s an example object, and how you’d perform your insert:

# a simple object
class person {
    public $name;
    public $addr;
    public $city;

    function __construct($n,$a,$c) {
        $this->name = $n;
        $this->addr = $a;
        $this->city = $c;
    }
    # etc ...
}

$cathy = new person('Cathy','9 Dark and Twisty','Cardiff');

# here's the fun part:
$STH = $DBH->("INSERT INTO folks (name, addr, city) value (:name, :addr, :city)");
$STH->execute((array)$cathy);

By casting the object to an array in the execute, the properties are treated as array keys.

---

Selecting Data

Data is obtained via the ->fetch(), a method of your statement handle. Before calling fetch, it’s best to tell PDO how you’d like the data to be fetched. You have the following options:

• PDO::FETCH_ASSOC: returns an array indexed by column name
• PDO::FETCH_BOTH (default): returns an array indexed by both column name and number
• PDO::FETCH_BOUND: Assigns the values of your columns to the variables set with the ->bindColumn() method
• PDO::FETCH_CLASS: Assigns the values of your columns to properties of the named class. It will create the properties if matching properties do not exist
• PDO::FETCH_INTO: Updates an existing instance of the named class
• PDO::FETCH_LAZY: Combines PDO::FETCH_BOTH/PDO::FETCH_OBJ, creating the object variable names as they are used
• PDO::FETCH_NUM: returns an array indexed by column number
• PDO::FETCH_OBJ: returns an anonymous object with property names that correspond to the column names

In reality, there are three which will cover most situations: FETCH_ASSOC, FETCH_CLASS, and FETCH_OBJ. In order to set the fetch method, the following syntax is used:

$STH->setFetchMode(PDO::FETCH_ASSOC);

You can also set the fetch type directly within the ->fetch() method call.

FETCH_ASSOC

This fetch type creates an associative array, indexed by column name. This should be quite familiar to anyone who has used the mysql/mysqli extensions. Here’s an example of selecting data with this method:

# using the shortcut ->query() method here since there are no variable
# values in the select statement.
$STH = $DBH->query('SELECT name, addr, city from folks');

# setting the fetch mode
$STH->setFetchMode(PDO::FETCH_ASSOC);

while($row = $STH->fetch()) {
    echo $row['name'] . "\n";
    echo $row['addr'] . "\n";
    echo $row['city'] . "\n";
}

The while loop will continue to go through the result set one row at a time until complete.

FETCH_OBJ

This fetch type creates an object of std class for each row of fetched data. Here’s an example:

# creating the statement
$STH = $DBH->query('SELECT name, addr, city from folks');

# setting the fetch mode
$STH->setFetchMode(PDO::FETCH_OBJ);

# showing the results
while($row = $STH->fetch()) {
    echo $row->name . "\n";
    echo $row->addr . "\n";
    echo $row->city . "\n";
}

FETCH_CLASS

The properties of your object are set BEFORE the constructor is called. This is important.

This fetch method allows you to fetch data directly into a class of your choosing. When you use FETCH_CLASS, the properties of your object are set BEFORE the constructor is called. Read that again, it’s important. If properties matching the column names don’t exist, those properties will be created (as public) for you.

This means if your data needs any transformation after it comes out of the database, it can be done automatically by your object as each object is created.

As an example, imagine a situation where the address needs to be partially obscured for each record. We could do this by operating on that property in the constructor. Here’s an example:

class secret_person {
    public $name;
    public $addr;
    public $city;
    public $other_data;

    function __construct($other = '') {
        $this->address = preg_replace('/[a-z]/', 'x', $this->address);
        $this->other_data = $other;
    }
}

As data is fetched into this class, the address has all its lowercase a-z letters replaced by the letter x. Now, using the class and having that data transform occur is completely transparent:

$STH = $DBH->query('SELECT name, addr, city from folks');
$STH->setFetchMode(PDO::FETCH_CLASS, 'secret_person');

while($obj = $STH->fetch()) {
    echo $obj->addr;
}

If the address was ’5 Rosebud,’ you’d see ’5 Rxxxxxx’ as your output. Of course, there may be situations where you want the constructor called before the data is assigned. PDO has you covered for this, too.

$STH->setFetchMode(PDO::FETCH_CLASS | PDO::FETCH_PROPS_LATE, 'secret_person');

Now, when you repeat the previous example with this fetch mode (PDO::FETCH_PROPS_LATE) the address will NOT be obscured, since the constructor was called and the properties were assigned.

Finally, if you really need to, you can pass arguments to the constructor when fetching data into objects with PDO:

$STH->setFetchMode(PDO::FETCH_CLASS, 'secret_person', array('stuff'));

If you need to pass different data to the constructor for each object, you can set the fetch mode inside the fetch method:

$i = 0;
while($rowObj =  $STH->fetch(PDO::FETCH_CLASS, 'secret_person', array($i))) {
    // do stuff
    $i++
}

---

Some Other Helpful Methods

While this isn’t meant to cover everything in PDO (it’s a huge extension!) there are a few more methods you’ll want to know in order to do basic things with PDO.

$DBH->lastInsertId();

The ->lastInsertId() method is always called on the database handle, not statement handle, and will return the auto incremented id of the last inserted row by that connection.

$DBH->exec('DELETE FROM folks WHERE 1');
$DBH->exec("SET time_zone = '-8:00'");

The ->exec() method is used for operations that can not return data other then the affected rows. The above are two examples of using the exec method.

$safe = $DBH->quote($unsafe);

The ->quote() method quotes strings so they are safe to use in queries. This is your fallback if you’re not using prepared statements.

$rows_affected = $STH->rowCount();

The ->rowCount() method returns an integer indicating the number of rows affected by an operation. In at least one known version of PDO, according to [this bug report](http://bugs.php.net/40822) the method does not work with select statements. If you’re having this problem, and can’t upgrade PHP, you could get the number of rows with the following:

$sql = "SELECT COUNT(*) FROM folks";
if ($STH = $DBH->query($sql)) {
    # check the row count
    if ($STH->fetchColumn() > 0) {

    # issue a real select here, because there's data!
    }
    else {
        echo "No rows matched the query.";
    }
}

---

Conclusion

I hope this helps some of you migrate away from the mysql and mysqli extensions. What do you think? Are there any of you out there who might make the switch?

Meet Crockford’s JSDev

Wed, 25 Jan 2012 05:29:21 +0000 -

Recently, Douglas Crockford released a neat tool that makes the process of developing and testing your JavaScript a bit easier. Interested in learning more? Watch today’s quick tip to find out!

---

Watch the Screencast

---

Show Link

• Douglas Crockford’s Google+ Post
• JSDev | Github
• Labelled blocks, useful?
• Gist of test_code script I created in the screencast

---

Will you use JSDev?

I’m curious; is this something that you’ll use in your daily coding? I’m still not sure, myself. Let us hear your thoughts in the comments!

.htaccess Files for the Rest of Us

Tue, 24 Jan 2012 00:37:06 +0000 -

.htaccess files are used to configure Apache, as well a range of other web servers. Despite the .htaccess file type extension, they are simply text files that can be edited using any text-editor. In this article, we’ll review what they are, and how you can use them in your projects.

Please note that .htaccess files don't work on Windows-based systems, although they can be edited and uploaded to a compatible web server, and on Linux-based systems they are hidden by default.

In order to work with htaccess files locally, to see how they work and generally play around with them, we can use XAMPP (or MAMP) on the Mac – a package that installs and configures Apache, PHP and MySQL. To edit these .htaccess files on Mac, we should use a text editor that allows for the opening of hidden files, such as TextWrangler.

A .htaccess file follows the same format as Apache’s main configuration file: httpd.conf. Many of the settings that can be configured using the main configuration file can also be configured with them, and vice versa.

A setting configured in an .htaccess file will override the same setting in the main configuration file for the directory which contains the file, as well as all of its subdirectories.

They are sometimes referred to as dynamic configuration files because they are read by the server on every request to the directory they are contained within. This means that any changes to an .htaccess file will take effect immediately, without requiring a reboot of the server, unlike changes made to the global configuration file. It also means that you pay a slight performance hit for using them, but they can be useful when you don't have access to the server's main configuration file.

So now we all know what .htaccess files are, how they are edited and worked with, and some of their pros and cons, let's look at how they can be used and some of the cool stuff they can do.

---

Redirects and URL Rewriting

A popular use of .htaccess files is to perform redirects or rewrite URLs. This can help with SEO following a domain name change, or file-structure reorganisation, or can make long unsightly URL more friendly and memorable.

Redirections

A redirection can be as simple as the following:

Redirect 301 ^old\.html$ http://localhost/new.html  

This sets the HTTP status code to 301 (moved permanently) and redirects all requests to old.html transparently to new.html. We use a regular expression to match the URL to redirect, which gives us a fine degree of control to ensure only the correct URL is matched for redirection, but adds complexity to the configuration and administration of it. The full URL of the resource being redirected to is required.

Rewrites

A rewrite rule can be as simple as this:

RewriteEngine on
RewriteRule ^old\.html$ new.html

In this example, we just provide a simple file redirect from one file to another, which will also be performed transparently, without changing what is displayed in the address bar. The first directive, RewriteEngine on, simply ensures that the rewrite engine is enabled.

In order to update what is displayed in the address bar of the visitor's browser, we can use the R flag at the end of the RewriteRule e.g.

RewriteRule ^old\.html$ http://hostname/new.html [r=301]

The r flag causes an external redirection which is why the full URL (an example URL here) to the new page is given. We can also specify the status code when using the flag. This causes the address bar to be updated in the visitor's browser.

One of the possible uses for URL rewriting I gave at the start of this section was to make unsightly URLs (containing query-string data) friendlier to visitors and search engines. Let's see this in action now:

RewriteRule ^products/([^/]+)/([^/]+)/([^/]+) product.php?cat=$1&brand=$2&prod=$3

This rule will allow visitors to use a URL like products/turntables/technics/sl1210, and have it transformed into product.php?cat=turntables&<WBR>brand=technics&prod=sl1210. The parentheses in between the forward slashes in the above regular expression are capturing groups – we can use each of these as $1, $2 and $3 respectively. The [^/]+ character class within the parentheses means match any character except a forward-slash 1 or more times.

In practice, URL rewriting can be (and usually is) much more complex and achieve far greater things than this. URL rewriting is better explained using entire tutorials so we won't look at them in any further detail here.

---

Serving Custom Error Pages

It's just not cool to show the default 404 page anymore. Many sites take the opportunity offered by a file not found error to inject a little humour into their site, but at the very least, people expect the 404 page of a site to at least match the style and theme of any other page of the site.

Very closely related to URL rewriting, serving a custom error page instead of the standard 404 page is easy with an .htaccess file:

ErrorDocument 404 "/404.html"

That's all we need; whenever a 404 error occurs, the specified page is displayed. We can configure pages to be displayed for many other server errors too.

---

Restricting Access to Specific Resources

Using .htaccess files, we can enable password protection of any file or directory, to all users, or based on things like domain or IP address. This is after all one of their core uses. To prevent access to an entire directory, we would simple create a new .htaccess file, containing the following code:

AuthName "Username and password required"
AuthUserFile /path/to/.htpasswd
Require valid-user
AuthType Basic

This file should then be saved into the directory we wish to protect. The AuthName directive specifies the message to display in the username/password dialog box, the AuthUserFile should be the path to the .htpasswd file. The Require directive specifies that only authenticated users may access the protected file while the AuthType is set to Basic.

To protect a specific file, we can wrap the above code in a <files> directive, which specifies the protected file:

<Files "protectedfile.html">
	AuthName "Username and password required"
	AuthUserFile /path/to/.htpasswd
	Require valid-user
    AuthType Basic
</Files>

We also require an .htpasswd file for these types of authentication, which contains a colon-separated list of usernames and encrypted passwords required to access the protected resource(s). This file should be saved in a directory that is not accessible to the web. There are a range of services that can be used to generate these files automatically as the password should be stored in encrypted form.

---

Block Access to Certain Entities

Another use of .htaccess files is to quickly and easily block all requests from an IP address or user-agent. To block a specific IP address, simply add the following directives to your .htaccess file:

order allow,deny
deny from 192.168.0.1
allow from all

The order directive tells Apache in which order to evaluate the allow/deny directives. In this case, allow is evaluated first, then deny. The allow from all directive is evaluated first (even though it appears after the deny directive) and all IPs are allowed, then if the client's IP matches the one specified in the deny directive, access is forbidden. This lets everyone in except the specified IP. Note that we can also deny access to entire IP blocks by supplying a shorter IP, e.g. 192.168.

To deny requests based on user-agent, we could do this:

RewriteCond %{HTTP_USER_AGENT} ^OrangeSpider
RewriteRule ^(.*)$ http://%{REMOTE_ADDR}/$ [r=301,l]

In this example, any client with a HTTP_USER_AGENT string starting with OrangeSpider (a bad bot) is redirected back to the address that it originated from. The regular expression matches any single character (.) zero or more times (*) and redirects to the %{REMOTE_ADDR} environment variable. The l flag we used here instructs Apache to treat this match as the last rule so will not process any others before performing the rewrite.

---

Force an IE Rendering Mode

Alongside controlling how the server responds to certain requests, we can also do things to the visitor's browser, such as forcing IE to render pages using a specific rendering engine. For example, we can use the mod_headers module, if it is present, to set the X-UA-Compatible header:

Header set X-UA-Compatible "IE=Edge"

Adding this line to an .htaccess file will instruct IE to use the highest rendering mode available. As demonstrated by HTML5 Boilerplate, we can also avoid setting this header on files that don't require it by using a <FilesMatch directive like so:

<FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|xpi|safariextz|vcf)$" >
      Header unset X-UA-Compatible
</FilesMatch>

---

Implement Caching

Caching is easy to set up and can make your site load faster.

Caching is easy to set up and can make your site load faster. 'Nuff said! By setting a far-future expires date on elements of sites that don't change very often, we can prevent the browser from requesting unchanged resources on every request.

If you're running your site through Google PageSpeed or Yahoo's YSlow and you get the message about setting far-future expiry headers, this is how you fix it:

ExpiresActive on
ExpiresActive on
ExpiresByType image/gif                 "access plus 1 month"
ExpiresByType image/png                 "access plus 1 month"
ExpiresByType image/jpg                 "access plus 1 month"
ExpiresByType image/jpeg                "access plus 1 month"
ExpiresByType video/ogg                 "access plus 1 month"
ExpiresByType audio/ogg                 "access plus 1 month"
ExpiresByType video/mp4                 "access plus 1 month"
ExpiresByType video/webm                "access plus 1 month"

You can add different ExpiresByType directives for any content that is listed in the performance tool you're using, or anything else that you want to control caching on. The first directive, ExpiresActive on, simply ensures the generation of Expires headers is switched on. These directives depend on Apache having the mod_expires module loaded.

---

Enabling Compression

Another warning we may get in a performance checker refers to enabling compression, and this is also something we can fix simply by updating our .htaccess file:

FilterDeclare   COMPRESS
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/javascript
FilterChain     COMPRESS
FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no

This compression scheme works on newer versions of Apache (2.1+) using the mod_filter module. It uses the DEFLATE compression algorithm to compress content based on its response content-type, in this case we specify text/html, text/css and text/javascript (which will likely be the types of files flagged in PageSpeed/Yslow anyhow).

In the above example we start out by declaring the filter we wish to use, in this case COMPRESS, using the FilterDeclare directive. We then list the content types we wish to use this filter. The FilterChain directive then instructs the server to build a filter chain based on the FilterProvider directives we have listed. The FilterProtocol directive allows us to specify options that are applied to the filter chain whenever it is run, the options we need to use are change=yes (the content may be changed by the filter (in this case, compressed)) and byteranges=no (the filter must only be applied to complete files).

On older versions of Apache, the mod_deflate module is used to configure DEFLATE compression. We have less control of how the content is filtered in this case, but the directives are simpler:

SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/javascript

In this case we just set the compression algorithm using the SetOutputFilter directive, and then specify the content-types we'd like to compress using the AddOutputFilterByType directive.

Usually your web server will use one of these modules depending on which version of Apache is in use. Generally, you will know this beforehand, but if you are creating a generic .htaccess file that you can use on a variety of sites, or which you may share with other people and therefore you don't know which modules may be in use, you may wish to use both of the above blocks of code wrapped in <IfModule module_name> directives so that the correct module is used and the server doesn't throw a 500 error if we try to configure a module that isn't included. You should be aware that it's also relatively common for hosts that run a large number of sites from a single box to disable compression as there is a small CPU performance hit for compressing on the server.

---

Summary

We looked at some of the most common uses for .htaccess files, and reviewed how we can achieve certain tasks that, as website builders/maintainers, are of particular interest to us. As is the case with any introductory tutorial of this nature, the subjects we've covered are presented as introductions to a particular topic. There are many other options and configurations than we have been able to look at, so I'd strongly recommend further reading on any subject that is of particular interest.

Testing your PHP Codebase with EnhancePHP

Sat, 21 Jan 2012 04:51:12 +0000 -

You know it; I know it. We should be testing our code more than we do. Part of the reason we don’t, I think, is that we don’t know exactly how. Well, I’m getting rid of that excuse today: I’m teaching you to test your PHP with the EnhancePHP framework.

---

Meet EnhancePHP

I’m not going to try to convince you to test your code; and we’re not going to discuss Test Driven Development, either. That’s been done before on Nettuts+. In that article, Nikko Bautista explains exactly why testing is a good thing and outlines a TDD workflow. Read that sometime, if you aren’t familiar with TDD. He also uses the SimpleTest library for his examples, so if you don’t like the look of EnhancePHP, you might try SimpleTest as an alternative.

As I said, we’ll be using the EnhancePHP. It’s a great little PHP library—a single file—that offers a lot of testing functionality.

Start by heading over to their download page and grabbing the latest version of the framework.

We’re going to be building a really simple Validation class to test. It won’t do too much: just return true if the item passes validation, or false if it doesn’t. So, set up a really simple little project:

We’ll do this is a semi-TDD fashion, so let’s start by writing a few tests.

---

Writing Tests

Out little class is going to validate three things: email addresses, usernames, and phone numbers.

But before we get to writing actual tests, we’ll need to set up our class:

<?php

class Validation_test extends \Enhance\TestFixture {
	public function setUp () {
		$this-> val = new Validation();
	}

}

This is our start; notice that we’re extending the class \Enhance\TestFixture. By doing so, we let EnhancePHP know that any public methods of this class are tests, with the exception of methods setUp and tearDown. As you might guess, these methods run before and after all your tests (not before and after each one). In this case, our setUp method will create a new Validation instance and assign it to a property on our instance.

By the way, if you’re relatively new to PHP, you might not be familiar with that \Enhance\TestFixture syntax: what’s with the slashes? That’s PHP namespacing for you; check out the docs if you aren’t familiar with it.

So, the tests!

Email Addresses

Let’s start by validating email addresses. As you’ll see, just doing a basic test is pretty simple:

public function validates_a_good_email_address () {
	$result = $this->val->validate_email("john@doe.com");
	\Enhance\Assert::isTrue($result);
}

We simply call the method we want to test, passing it a valid email address, and storing the $result. Then, we hand $result to the isTrue method. That method belongs to the \Enhance\Assert class.

We want to make sure our class will reject non-email addresses. So, let’s test for that:

public function reject_bad_email_addresses () {
	$val_wrapper = \Enhance\Core::getCodeCoverageWrapper('Validation');
	$val_email = $this->get_scenario('validate_email');
	$addresses = array("john", "jo!hn@doe.com", "john@doe.", "jo*hn@doe.com");

	foreach ($addresses as $addr) {
  		$val_email->with($addr)->expect(false);
	}
	$val_email->verifyExpectations();
}

This introduces a pretty cool feature of EnhancePHP: scenarios. We want to test a bunch of non-email addresses to make sure our method will return false. By creating a scenario, we essentially wrap an instance of our class in some EnhancePHP goodness, are write much less code to test all our non-addresses. That’s what $val_wrapper is: a modified instance of our Validation class. Then, $val_email is the scenario object, somewhat like a shortcut to the validate_email method.

Then, we’ve got an array of strings that should not validate as email addresses. We’ll loop over that array with a foreach loop. Notice how we run the test: we call the with method on our scenario object, passing it the parameters for the method we’re testing. Then, we call the expect method on that, and pass it whatever we expect to get back.

Finally, we call the scenario’s verifyExpectations method.

So, the first tests are written; how do we run them?

---

Running Tests

Before we actually run the tests, we’ll need to create our Validation class. Inside lib.validation.php, start with this:

<?php

class Validation {
	public function validate_email ($address) {

	}
}

Now, in test.php, we’ll pull it all together:

<?php

require "vendor/EnhanceTestFramework.php";
require "lib/validation.php";
require "test/validation_test.php";

\Enhance\Core::runTests();

First, we’ll require all the necessary files. Then, we call the runTests method, which finds our tests.

Next comes the neat part. Fire up a server, and you’ll get some nice HTML output:

Very nice, right? Now, if you’ve got PHP in your terminal, run this is in the terminal:

EnhancePHP notices that you’re in a different environment, and adjusts its output appropriately. A side benefit of this is that if you’re using an IDE, like PhpStorm, that can run unit tests, you can view this terminal output right inside the IDE.

You can also get XML and TAP output, if that’s what you prefer, just pass \Enhance\TemplateType::Xml or \Enhance\TemplateType::Tap to the runTests method to get the appropriate output. Note that running it in the terminal will also produce command-line results, no matter what you pass to runTests.

Getting the Tests to Pass

Let’s write the method that causes our tests to pass. As you know, that’s the validate_email. At the top of the Validation class, let’s define a public property:

public $email_regex = '/^[\w+-_\.]+@[\w\.]+\.\w+$/';

I’m putting this in a public property so that if the user wants to replace it with their own regex, they could. I’m using this simple version of an email regex, but you can replace it with your favourite regex if you want.

Then, there’s the method:

public function validate_email ($address) {
	return preg_match($this->email_regex, $address) == 1
}

Now, we run the tests again, and:

---

Writing More Tests

Time for more tests:

Usernames

Let’s create some tests for usernames now. Our requirements are simply that it must be a 4 to 20 character string consisting only of word characters or periods. So:

public function validates_a_good_username () {
	$result = $this->val->validate_username("some_user_name.12");
	\Enhance\Assert::isTrue($result);
}

Now, how about a few usernames that shouldn’t validate:

public function rejects_bad_usernames () {
	$val_username = $this->get_scenario('validate_username');
	$usernames = array(
		"name with space",
		"no!exclaimation!mark",
		"ts",
		"thisUsernameIsTooLongItShouldBeBetweenFourAndTwentyCharacters");

	foreach ($usernames as $name) {
  		$val_username->with($name)->expect(false);
	}
	$val_username->verifyExpectations();
}

This is very similar to our reject_bad_email_addresses function. Notice, however, that we’re calling this get_scenario method: where’s that come from? I’m abstracting the scenario creation functionality into private method, at the bottom of our class:

private function get_scenario ($method) {
	$val_wrapper = \Enhance\Core::getCodeCoverageWrapper('Validation');
    return \Enhance\Core::getScenario($val_wrapper, $method);
}

We can use this in our reject_bad_usernames and replace the scenario creation in reject_bad_email_addresses as well. Because this is a private method, EnhancePHP won’t try to run it as a normal test, the way it will with public methods.

We’ll make these tests pass similarly to how we made the first set pass:

# At the top . . .
public  $username_regex = '/^[\w\.]{4,20}$/';

# and the method . . .
public function validate_username ($username) {
	return preg_match($this->username_regex, $username) == 1;
}

This is pretty basic, of course, but that’s all that’s needed to meet our goal. If we wanted to return an explanation in the case of failure, you might do something like this:

public function validate_username ($username) {
	$len = strlen($username);
	if ($len < 4 || $len > 20) {
  		return "Username must be between 4 and 20 characters";
	} elseif (preg_match($this->username_regex, $username) == 1) {
  		return true;
	} else {
  		return "Username must only include letters, numbers, underscores, or periods.";
	}
}

Of course, you might also want to check if the username already exists.

Now, run the tests and you should see them all passing.

Phone Numbers

I think you’re getting the hang of this by now, so let’s finish of our validation example by checking phone numbers:

public function validates_good_phonenumbers () {
	$val_phonenumber = $this->get_scenario("validate_phonenumber");
	$numbers = array("1234567890", "(890) 123-4567",
		"123-456-7890", "123 456 7890", "(123) 456 7890");

	foreach($numbers as $num) {
  		$val_phonenumber->with($num)->expect(true);
	}
	$val_phonenumber->verifyExpectations();
}

public function rejects_bad_phonenumnbers () {
	$result = $this->val->validate_phonenumber("123456789012");
	\Enhance\Assert::isFalse($result);
}

You can probably figure out the Validation method:

public $phonenumber_regex = '/^\d{10}$|^(\(?\d{3}\)?[ |-]\d{3}[ |-]\d{4})$/';

public function validate_phonenumber ($number) {
	return preg_match($this->phonenumber_regex, $number) == 1;
}

Now, we can run all the tests together. Here’s what that looks like from the command line (my preferred testing environment):

---

Other Test Functionality

Of course, EnhancePHP can do a lot more than what we’ve looked at in this little example. Let’s look at some of that now.

We very briefly met the \Enhance\Assert class in our first test. We didn’t really use it otherwise, because it’s not useful when using scenarios. However, it’s where all the assertion methods are. The beauty of them is that their names make their functionality incredibly obvious. The following test examples would pass:

• \Enhance\Assert::areIdentical("Nettuts+", "Nettuts+")
• \Enhance\Assert::areNotIdentical("Nettuts+", "Psdtuts+")
• \Enhance\Assert::isTrue(true)
• \Enhance\Assert::isFalse(false)
• \Enhance\Assert::contains("Net", "Nettuts+")
• \Enhance\Assert::isNull(null)
• \Enhance\Assert::isNotNull('Nettust+')
• \Enhance\Assert::isInstanceOfType('Exception', new Exception(""))
• \Enhance\Assert::isNotInstanceOfType('String', new Exception(""))

There are a few other assertion methods, too; you can check the docs for a complete list and examples.

Mocks

EnhancePHP can also do mocks and stubs. Haven’t heard of mocks and stubs? Well, they aren’t too complicated. A mock is a wrapper for object, that can keep track of what methods are called, with what properties they are called, and what values are returned. A mock will have some test to verify, as we’ll see.

Here’s a small example of a mock. Let’s start with a very simple class that counts:

<?php

require "vendor/EnhanceTestFramework.php";

class Counter {
  public $num = 0;
  public function increment ($num = 1) {
    $this->num = $this->num + $num;
    return $this->num;
  }
}

We have one function: increment, that accepts a parameter (but defaults to 1), and increments the $num property by that number.

We might use this class if we were building a scoreboard:

class Scoreboard {
  public $home = 0;
  public $away = 0;

  public function __construct ($home, $away) {
    $this->home_counter = $home;
    $this->away_counter = $away;
  } 

  public function score_home () {
    $this->home = $this->home_counter->increment();
    return $this->home;
  }
  public function score_away () {
    $this->away = $this->away_counter->increment();
    return $this->home;
  }
}

Now, we want to test to make sure that the Counter instance method increment is working properly when the Scoreboard instance methods call it. So we creat this test:

class ScoreboardTest extends \Enhance\TestFixture {
  public function score_home_calls_increment () {
    $home_counter_mock = \Enhance\MockFactory::createMock("Counter");
    $away_counter = new Counter();

    $home_counter_mock->addExpectation( \Enhance\Expect::method('increment') );

    $scoreboard = new Scoreboard($home_counter_mock, $away_counter);
    $scoreboard->score_home();

    $home_counter_mock->verifyExpectations();
  }
}

\Enhance\Core::runTests();

Notice that we start by creating $home_counter_mock: we use the EnhancePHP mock factory, passing it the name of the class we’re mocking. This returns a “wrapped” instance of Counter. Then, we add an expectation, with this line

$home_counter_mock->addExpectation( \Enhance\Expect::method('increment') );

Our expectation just says that we expect the increment method to be called.

After that, we go on to create the Scoreboard instance, and call score_home. Then, we verifyExpectations. If you run this, you’ll see that our test passes.

We could also state what parameters we want a method on the mock object to be called with, what value is returned, or how many times the method should be called, with something like this:

$home_counter_mock->addExpectation( \Enhance\Expect::method('increment')->with(10) );
$home_counter_mock->addExpectation( \Enhance\Expect::method('increment')->times(2) );
$home_counter_mock->addExpectation( \Enhance\Expect::method('increment')->returns(1) );
$home_counter_mock->addExpectation( \Enhance\Expect::method('increment')->with(3)->times(1) );
$home_counter_mock->addExpectation( \Enhance\Expect::method('increment')->with(2)->returns(2) );

I should mention that, while with and times will show failed tests if the expectations aren’t meant, returns doesn’t. You’ll have to store the return value and use an assertion to very that. I’m not sure why that’s the case, but every library has its quirks :). (You can see an example of this in the library examples in Github.)

Stubs

Then, there are stubs. A stub fills in for a real object and method, returning exactly what you tell it to. So, let’s say we want to make sure that our Scoreboard instance is correctly using the value it receives from increment, we can stub a Counter instance so we can control what increment will return:

class ScoreboardTest extends \Enhance\TestFixture {
  public function score_home_calls_increment () {
    $home_counter_stub = \Enhance\StubFactory::createStub("Counter");
    $away_counter = new Counter();

    $home_counter_stub->addExpectation( \Enhance\Expect::method('increment')->returns(10) );

    $scoreboard = new Scoreboard($home_counter_stub, $away_counter);
    $result = $scoreboard->score_home();

    \Enhance\Assert::areIdentical($result, 10);

  }
}

\Enhance\Core::runTests();

Here, we’re using \Enhance\StubFactory::createStub to create our stub counter. Then, we add an expectation that the method increment will return 10. We can see that the result it what we’d expect, given our code.

For more examples of mocks and stub with the EnhancePHP library, check out the Github Repo.

---

Conclusion

Well, that’s a look at testing in PHP, using the EnhancePHP framework. It’s an incredibly simple framework, but it provides everything you need to do some simple unit testing on your PHP code. Even if you choose a different method/framework for testing your PHP (or perhaps roll your own!), I hope this tutorial has sparked an interest in testing your code, and how simple it can be.

But maybe you already test your PHP. Let us all know what you use in the comments; after all, we’re all here to learn from each other! Thank you so much for stopping by!

New Course: Introduction to Web Typography

Thu, 19 Jan 2012 23:24:31 +0000 -

Web typography is accessible to everyone. If you’ve ever built or designed a web page, you’ve almost definitely turned your hand to web typography of some sort. As a discipline, typography has been practiced for hundreds of years, and as a result there are many lessons and conventions we can learn from.

Saying that, web typography is a bit like skiing. It’s unwise to just grab a couple of wooden planks and throw yourself down a black piste; you’ll develop bad habits and perhaps even break a bone. Before diving into your next web project, make sure you’ve at least considered the fundamentals.

I can’t help you with skiing, but I can help you with web typography. If you’ve never looked properly into the subject, or even if you need a refresher, Introduction to Web Typography is for you!

---

Free Preview Lessons

• Welcome (2m 10s)
• An Introduction (10m 22s)
• Anatomy of Type (11m 36s)

---

Overview

As with all Tuts+ Premium courses, we’ll start at the beginning, working through the basics and some terminology, before moving on to the practicalities. During the process we’ll build ourselves a demo web page which will highlight the theory we cover. Even if you’re not yet confident with HTML and CSS, each video comes with source files stepping off from where the previous video ended.

Take a look at the episodes listed below and be sure to check out the preview videos even if you don’t yet have a Premium subscription.

This course comprises 11 helpful videos.

As with all Tuts+ Premium courses, each lesson has an accompanying forum where you can discuss ideas and questions which arise as you watch the videos.

Get involved with the forum, where you can discuss each lesson.

---

Tuts+ Premium

The recently re-launched Tuts+ Premium is a service that provides top-tier training in a variety of creative fields. Whether you prefer books, visual training, or in depth tutorials, we have you covered. While we unfortunately can’t afford to provide the service for free, it’s only $19 a month – less than you’d spend on dinner.

I hope you’ll consider checking it out! In addition to learning a huge variety of new skills, it’s also a fantastic way to say thank you to Nettuts+.