Category / Toolbox

9

Particleground: a jQuery plugin for background particle systems

Lately I’ve noticed a few sites using JavaScript particle systems as animated backgrounds. I was curious about the technique so I created Particleground, a jQuery plugin that creates a similar effect.

particleground

The particle system can be fine tuned using several configuration options, including a parallax effect which is controlled by the mouse on desktop computers or the gyroscope on smart devices. Particleground works in any browser that supports HTML5 canvas.

See a demo

Download

View on Github

87

Automated git deployments from Bitbucket

Important: Bitbucket have changed how webhooks function, and the technique described in this post will no longer work without modification. One of my readers has created an updated version, and I recommend trying that instead. I no longer use this deployment method and won’t be updating my tutorial or answering comments, but I have left the comment section open so that readers can post their tips and help each other out.

Git may not have been designed as a deployment tool, but for small projects it can do the job quite nicely. What makes Git deployments attractive is how frictionless the process is: make some changes to your project, merge them into your production branch, push the commit to a remote repository and like magic the changes are live! Git knows which files need to be changed or deleted, so you don’t have to think about it. If you’re already using git to version control your project then you probably won’t even need to modify your existing workflow, once the initial setup is done.

I use Bitbucket for hosting my private repositories, and have recently implemented a deployment process that integrates with Bitbucket’s POST hooks feature. There are basically three things you need to do to make this work:

  • Set up SSH keys so your server can talk to Bitbucket
  • Clone your Bitbucket repository on your web server
  • Setup a hook on Bitbucket and an associated deployment script on your server

Here’s what your deployment workflow will look like once we’re done:

  • Develop your website locally
  • When you’re ready to deploy, commit your changes and push them to Bitbucket
  • When Bitbucket receives the commit it will notify a deployment script on your server
  • The deployment script will fetch the changes into a cloned repository on your server, and checkout files to your public web directory

Continue reading

94

TweetPHP: Display tweets on your website using PHP

If you’ve ever wanted to display your latest Twitter tweets on a website, TweetPHP lets you do that using PHP. TweetPHP is a rewrite of my old Twitter RSS feed parser, which stopped working when Twitter phased out their v1 API.

Features

  • Works with Twitter API v1.1
  • Tweets are cached to avoid exceeding Twitter’s API request rate limits
  • A fallback is provided in case the twitter feed fails to load
  • Retweets and @replies can be optionally ignored
  • A configuration parameter allows you to specify how many tweets are displayed
  • Dates can optionally be displayed in “Twitter style”, e.g. “12 minutes ago”
  • You can customize the HTML that wraps your tweets, tweet status and meta information

Download

TweetPHP is available on Github

Usage

To interact with Twitter’s API you will need to create an API KEY, which you can create at: https://dev.twitter.com/apps

After creating your API Key you will need to take note of following values: “Consumer key”, “Consumer secret”, “Access token”, “Access token secret”

Those values can be passed as options to the class constructor, along with the Twitter screen name you wish to query:

require_once('TweetPHP.php');

$TweetPHP = new TweetPHP(array(
  'consumer_key'              => 'xxxxxxxxxxxxxxxxxxxxx',
  'consumer_secret'           => 'xxxxxxxxxxxxxxxxxxxxx',
  'access_token'              => 'xxxxxxxxxxxxxxxxxxxxx',
  'access_token_secret'       => 'xxxxxxxxxxxxxxxxxxxxx',
  'twitter_screen_name'       => 'yourusername'
));

Then you can display the results like so:

echo $TweetPHP->get_tweet_list();

Options

See TweetPHP’s Github for documentation of all options.

Caching

Caching is employed because Twitter rate limits how many times their feeds can be accessed per hour.

When the user timeline is first loaded, the resultant HTML list is saved as a text file on your web server. The default location for this file is: cache/twitter.txt

You can change this file path by setting the cache_file option. For example, to set a path from your root public directory try:

$_SERVER['DOCUMENT_ROOT'] . '/path/to/my/cache/dir/filename.txt'

Debugging

If you are experiencing problems using the plugin please set the debug option to true. This will set PHP’s error reporting level to E_ALL, and will also display a debugging report.

Here are a few tips to help you solve common configuration issues:

tmhOAuth response code: 0

If your debugging report shows the error “tmhOAuth response code: 0”, you can find out more about this error message in the tmhOAuth github README. Dario also offers this solution: “My server didn’t like the the two __DIR__ constants in the tmhOAuth.php file, hard-coded them and it all works now.”

unserialize error

If you receive the PHP warning “[function.unserialize]: Error at offset 0 of 49 bytes”, it might be the case that you have magic quotes enabled in your PHP configuration.

Credits

– Feed parsing uses Matt Harris’ tmhOAuth
– Hashtag/username parsing uses Mike Cochrane’s twitter-text-php

4

Comprehensive domain mapping for Big Cartel stores

When working with the Big Cartel ecommerce platform it is common to map a custom domain to your store. For example, you might like to use the domain mysite.com instead of your default Big Cartel subdomain mysite.bigcartel.com.

Big Cartel provide instructions for configuring domain mapping using a CNAME record, so that www.mysite.com becomes an alias for mysite.bigcartel.com. This works great except for one thing: if a customer omits the www prefix from your store’s URL they will get a big fat 404 error. This is because your CNAME record only matches the www subdomain.

Continue reading

16

Trackpad Scroll Emulator jQuery plugin

When Rdio rolled out their redesigned application recently, I was intrigued by the app’s scrolling implementation. There are no conventional browser scrollbars in Rdio, and instead scrollbars appear on-demand when the user’s mouse enters a scrollable portion of the interface, or when the user performs a mousewheel or trackpad scroll. Rdio’s implementation mimics the experience of scrolling in OSX Lion using a trackpad pointing device, except that it works for any user, on any platform.

Inspired by Rdio’s scrollbars I have created a jQuery plugin that emulates Lion’s trackpad-style scrolling, regardless of the user’s pointing device, browser, or platform.

Continue reading

8

A jQuery plugin boilerplate

I created this boilerplate for a jQuery plugin I’m working on, and you can use it to kick start your own jQuery plugin development. The features of my boilerplate are:

  • Plugin can be customised using options
  • Setters/Getters for options
  • Private and public methods
  • Callback hooks
  • Plugin instances can be destroyed

Continue reading

0

FormBuilder updated to v1.5

It’s been almost exactly four years since I updated my FormBuilder PHP class, but believe it or not I have been slowly modifying and improving the class during the intervening years. I figured it was high time I rolled those improvements into the public version of the class, so here’s what’s new in version 1.5 of FormBuilder:

  • Better handling of checkbox results in the emailResults method.
  • A custom form submit URL can be passed to the FormBuilder constructor. Useful when using FormBuilder in an environment that is performing URL rewriting.
  • Replaced deprecated ergei functions with preg_match.
  • Checkbox field types are correctly processed when field is not mandatory, and the user didn’t check any of the available options.
  • Added new field type: file (for file uploads). Note that files are currently not emailed when using the emailResults method. Any handling of the uploaded files should be accomplished manually by accessing PHP’s $_Files array.
  • The textbox and textarea field types now accept an optional defaultvalue parameter.
  • Fixed a bug that meant checkboxes had a CSS class of ‘fbheckbox’ instead of ‘fbcheckbox’.

If you encounter any problems with the new version please let me know.

13

Sunset: A syntax highlighting theme for phpDesigner

My weapon of choice for code editing is the excellent program phpDesigner, but every so often I like to test drive a different editor to see what I might be missing out on. Recently I spent some time playing with Notepad++, and one feature that jumped out at me was the ability to choose from a large number of pre-installed syntax highlighting themes.

When I switched back to phpDesigner, the default blue-on-white color scheme seemed a tad boring, so I decided it was time to pimp my IDE! Unfortunately user created themes for phpDesigner are thin on the ground, which left me no option but to make my own.

PHP example:

Sunset theme for phpDesigner - PHP code

Continue reading

0

FlashScaler now works with SWFObject 2

One of my readers, René, asked me if my FlashScaler JavaScript class works with SWFObject 2. I’m happy to say that yes, it does. The demo and download on my original FlashScaler post now include working examples using SWFObject 2.1.