Matt Vickers is a front-end developer located in Canada.

Currently building amazing things at InVision.

Peacocks in Space by Dayle Rees

Disable Dates from jQuery UI's DatePicker 08 Feb 2013

Sometimes you want to exclude some dates from the jQuery UI’s DatePicker, but some quick searching didn’t show much.

After a bit of poking around, and some methods borrowed from David Walsh, I was able to come up with a simple(r) solution.

var disabled_dates = ["2013-02-22","2013-02-23","2013-02-24"];

function disabled(date){

  var formatted = $.datepicker.formatDate('yy-mm-dd', date);

  return $.inArray(formatted, disabled_dates) === -1 ? [true] : [false];

}

$( ".date" ).datepicker({
  dateFormat: 'yy-mm-dd',
  beforeShowDay: disabled
});

You’ll have to change the format to suit your needs, but this should be enough to get you up and running.

Backscratch - Serving up the best image sizes 09 Nov 2012

Demo - Github

I’ve been using Backstretch in a lot of my projects lately and while it works great, it relies of bigger images to looks it’s best. No one likes a big pixely photo for their backgrounds.

A while back, before I found Backstretch, I was searching the web for the best way to make a full page background. I came across this page on CSS Tricks that described a technique of loading up a different image size based on the size of the browser window.

I really liked this idea and decided to see if we could use it with Backstretch and that’s when Backscratch comes in.

Quick little tutorial

<div class="backscratch">

  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" class="bg" data-src="/path/to/your/image.jpg" />

</div> <!-- header -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script src="jquery.backscratch.min.js"></script>
<script>

  // Call backscratch with the image size options you want to use
  $(".backscratch").backscratch([1024, 1280, 1366]);

  /**
   * Ideally, you've created images with the following names
   *
   * image_1024.jpg
   * image_1280.jpg
   * image_1366.jpg
   */

</script>

How to tell Alfred to startup your dev environment 30 Oct 2012

If you’re anything like I used to be, you’d spend x number minutes wasting time getting all your programs started up when your getting ready to do some development.

Luckily, you can teach Alfred to start everything up for you at once, with just a few keystrokes.

You’ll need the Alfred Powerpack to be able to create extensions which will run you about £15.

Once you’ve installed the powerpack, you can use the applescript below as a template to get everything up and running.

-- Open up the terminal and cd to the current folder

-- Taken from http://twitter.com/pwc

set finderPath to ""

tell application "Finder"
  try
    set finderFolder to (folder of the front window as alias)
  on error
    set finderFolder to (path to home folder as alias)
  end try
  set finderPath to quoted form of POSIX path of finderFolder
end tell

tell application "Terminal"
  do script "cd " & finderPath
end tell

-- Sublime Text 2
tell application "Sublime Text 2" to do shell script "/Applications/Sublime\\ Text\\ 2.app/Contents/SharedSupport/bin/subl " & finderPath

-- The others
tell application "Mamp" to activate
tell application "CodeKit" to activate

-- Hide programs we don't really need
tell application "Finder"
  set visible of process "Mamp" to false
  set visible of process "Codekit" to false
end tell

Add a name to the script and then you can launch it but launching Alfred ( option + space ) and typing out the name of your new script.

Using Git to upload to your FTP 30 May 2012

Everyone always says that uploading sites via FTP is going the way of the dinosaur. The new kid on the block is deploying using Git. There are many different services that will automate this for you, but I always find you learn more by doing.

After searching the internet, I found this script by Ryan Florence that will pull down the files on your FTP whenever you make a git push. I’ve used his script along with my own bash script (please excuse how bad it is, it’s my first day) to create a script that sets everything up for me automatically.

You’ll have to change a few variables, mainly the ssh location, but you can use this as a boilerplate, inspiration or whatever you feel.

#!/bin/bash

# Creates a new project folder on the server,
# creates a new git repo, adds our post-receive
# hook and add a value to the config

cd ~/

echo "
What's the new projects path?" 
read new_project_folder

echo "
Going to $new_project_folder" 
cd ~/$new_project_folder

# Fresh git
git init

# Setup the new hook and fix the permissions
POST_RECEIVE=`curl https://raw.github.com/gist/2926367/b2be776f73a486ada91c07e0df9c34b0be92925a/post-receive -o ".git/hooks/post-receive"`
chmod 777 .git/hooks/post-receive

# Add the config to the config
ADD_TO_CONFIG="
[receive] 
  denyCurrentBranch = ignore";

echo $ADD_TO_CONFIG >> '.git/config'

# Finishing touches
echo "
Project Setup!

Don't forget to add this remote

git remote add ftp ssh://envexlabs@envexlabs.com/~/$new_project_folder"

# Goodbye
exit

Custom WordPress Routes 17 May 2012

I’m working on a project right now that I felt would benefit from some sexy (dynamic) URLs. In a nutshell, I wanted to be able to edit a job by going to a URL like /job/edit/12412

There is not a lot of documentation on this on the web and after a lot of searching the web, I came up with this:

/**
 * 
 * Custom routes that we'd like to use
 *  
 */

function facet_rewrite_rules() {

    add_rewrite_rule('job/edit/([0-9]+)?$', 'index.php?pagename=job/edit&job_id=$matches[1]', 'top' ); 

}

function facet_query_vars( $query_vars ) {

    $query_vars[] = 'job_id';

    return $query_vars;

}

// Do It

add_action( 'init', 'facet_rewrite_rules' );
add_filter( 'query_vars', 'facet_query_vars' );  

Step 1

Add routes.php to your functions.php file. ie. include_once TEMPLATEPATH . '/routes.php';

Step 2

Visit your permalinks settings page in wp-admin. This resets all the permalink rules. Your custom routes WILL NOT WORK unless you refresh the permalink rules.

Step 3

To grab the new custom values use get_query_var('job_id'); in your template.

There is a great plugin called Monkeyman Rewrite Analyzer that will help you see where you rewrites are being read. Helps a ton with debugging all your WordPress rewrites.