View a demo page »

Searching Source Code

• ack can be downloaded at betterthangrep.com and is a great, free tool for searching a project’s source code. Usage: ack string will return the relative paths to all the files containing the matched string, the line on which the string is found with the match highlighted, and the line number on which the match lives, all while ignoring those files contained within .git or .svn directories.
• ack --js searchtext will perform a search on all *.js files.
• If you still prefer grep, the following would return the relative paths to all the files in which the text “string” is found: grep -rl string . | grep -v \.svn, excluding files in .svn directories.

Diffing

• diff -rq some_directory some_other_directory will recursively diff all files in some_directory and some_other_directory, printing the files containing any descrepencies to the terminal.
• diff file_one file_two will output to the terminal all instances of descrepencies between file_one and file_two, as well as outputing the line/column number in which the differences exist.
• Alternatively, colordiff is a tool which provides colorized ouput to diff. If you’re using homebrew, colordiff can be installed with brew install colordiff. See colordiff man for usage.

Miscellaneous Operations on Files

• cat filename will output the contents of filename to the terminal.
• less filename provides a much better way to inspect large files from the command line. It outputs only a full screen view of a file’s contents. Use j and k to scroll up and down. b and f navigate a full screen up and down. Use /pattern to search for the text pattern.
• cat file1 >> file2 will write the contents of file1 to file2.
• touch filename will create a file named filname within the current directory.
• Once installed, tree produces a depth-indented listing of files.
• chmod 760 filename changes the permissions on filename to 760.

Maintainenance, Monitoring, and Debugging

• ps xa lists all the running processes on your machine.
• ps xa | grep java will will check if a process named java is running. kill -9 xxxx, where xxxxx is the process id, will kill the java process. This is useful if something has frozen.
• top is a system monitor tool that produces a frequently-updated list of processes. By default, the processes are ordered by percentage of CPU usage.
• tail -f log_file_name outputs the log file’s content to the terminal, which is helpful when troubleshooting code such as PHP or Apache.
• Cheat is a RubyGem that provides command-line access to simple cheat sheets, not unlike a simplified, user-edited man page. An out-of-the-box Cheat installation provides a few basic starter cheat sheets which can be edited and extended easily. It’s also relatively easy to add your own additional cheat sheets. Example Usage: cheat html.
• Most commands have a -help option which will list a command’s arguments and options. Example: cd -help.
• Similarly, man provides more detailed documentation. Example: man mysqldump.

Working With a Server

• ssh username@hostname.com provides ssh acess.
• Similarly, ftp username@hostname.com and sftp username@hostname.com provide ftp and sftp access.
• scp /path/to/local/file username@hostname:path/to/copy/to can be used to copy files to a server over ssh.
• Similarly, scp username@hostname:/path/to/remote/file /local/path/to/copy/to/ copies a file from a server to your local machine.
• wget can be used to retrieve content from a web server. Example: wget http://hostname.com/somefile.zip will download somefile.zip from http://hostname.com.
• Similarly, curl -O http://hostname.com/download.tar.gz will download download.tar.gz

The HTML

<a class="thumb" href="/some-url">
    <img src="some-image.jpg" alt="Image" />
    <b class="play">
        <i class="wave"></i>
        <i class="arrow">Play now</i>
    </b>
</a>

The CSS

/* the anchor tag containing everything */
a.thumb {
    position:relative;
    width:300px;
    height:225px;
    display:block;
}

/* the black box */
b.play {
    display:block;
    position:absolute;
    width:80px;
    height:75px;
    bottom:0;
    right:0;
    background:#1a1a1a;
    text-indent:-5000px;
    overflow:hidden;
}

/* the arrow's container */
i.arrow {
    display: block;
    width: 40px;
    height: 45px;
    overflow:hidden;
    position:relative;
    margin:-30px 0 0 25px;
}

/* the arrow */
i.arrow:after {
    content:'';
    display:block;
    background:#fff;
    width:60px;
    height:65px;
    -moz-transform:
        rotate(-60deg)
        skewY(30deg);
    -webkit-transform:
        rotate(-60deg)
        skewY(30deg);
    -o-transform:
        rotate(-60deg)
        skewY(30deg);
    -ms-transform:
        rotate(-60deg)
        skewY(30deg);
    transform:
        rotate(-60deg)
        skewY(30deg);
    position:absolute;
    left:-52px;
    top:-10px;
}

/* the gradiated and curved background behind the arrow */
i.wave {
    content:'';
    display:block;
    background:-moz-linear-gradient(center top, #000000, #272727 83%, #3D3D3D 100%) repeat scroll 0 0 transparent;
    background-image:-ms-linear-gradient(center top, #000000, #272727 83%, #3D3D3D 100%) repeat scroll 0 0 transparent;
    background:-webkit-gradient(linear, center top, center bottom, from(#000), color-stop(83%, #272727), color-stop(100%, #3d3d3d));
    border-radius:80px;
    display:block;
    height:160px;
    margin-left:-45px;
    margin-top:-110px;
    width:170px;
}

Example:

The HTML

<div class="cube">
    <div class="cube-side top"></div>
    <div class="cube-side left"></div>
    <div class="cube-side right"></div>
</div>

The CSS

/* a container div */
div.cube {
    position:relative;
    width:200px;
    height:220px;
}

/* styles for all the cube's sides (top, left, and right) */
div.cube-side {
    width:100px;
    height:100px;
    position:absolute;
}

/* the cube's top side */
div.top {
    left:50px;
    top:10px;
    background:#612d2d;
    -moz-transform:
        rotate(60deg)
        skew(0deg, -30deg)
        scale(1, 1.15);
    -webkit-transform:
        rotate(60deg)
        skew(0deg, -30deg)
        scale(1, 1.15);
    -o-transform:
        rotate(60deg)
        skew(0deg, -30deg)
        scale(1, 1.15);
    -ie-transform:
        rotate(60deg)
        skew(0deg, -30deg)
        scale(1, 1.15);
    transform:
        rotate(60deg)
        skew(0deg, -30deg)
        scale(1, 1.15);
}

/* the cube's left side */
div.left {
    background:#b06969;
    top:90px;
    left:0px;
    -moz-transform:skew(0deg, 30deg);
    -webkit-transform:skew(0deg, 30deg);
    -o-transform:skew(0deg, 30deg);
    -ie-transform:skew(0deg, 30deg);
    transform:skew(0deg, 30deg);
}

/* the cube's right side */
div.right {
   background:#b07c7c;
   top:90px;
   right:0;
   -moz-transform:skew(0deg, -30deg);
   -webkit-transform:skew(0deg, -30deg);
   -o-transform:skew(0deg, -30deg);
   -ie-transform:skew(0deg, -30deg);
   transform:skew(0deg, -30deg);
}

Set Up Your Repository

1. Fork a project by visiting its URL on GitHub and clicking the “Fork” button
2. Clone your fork to your local machine:

   git clone git@github.com:yourUsername/projectName.git

3. Assign the original repository to a remote called “upstream” to retrieve updates from the original repository you forked:

   cd projectName
   git remote add upstream git://github.com/originalUsername/projectName.git

4. Routinely pull all the “upstream” updates to your local repository:

   git fetch upstream

   And merge them to your forked master:

   git merge upstream/master

Develop Features

1. Create and check out a feature branch to house your edits:

   git branch branchName
   git checkout branchName

   This can be shortened to:

   git checkout -b branchName

2. Make edits and commit them:

   git add someFile.js
   git commit -m "Your commit message."

3. Push your branch to GitHub:

   git push origin branchName

4. Visit your forked project on GitHub and switch to your branchName branch.
5. Click “Pull Request” to request that your features be merged to the “upstream” master.

As my co-worker Trevor suggests in more detail, one solution is to create a class with 3 internal objects:

settings:

this object houses configuration options, such as a debug option

private:

this object houses private functions

public:

this object houses all public functions

Then, in writing unit tests, a developer can instantiate the class by passing {debug: true} to adjust the class’s settings such that the private and public objects are merged, in effect exposing the previously private functions housed in the private object.

Note that this technique is a bit controversial amongst those who argue that the need to test private functions hints at larger code problems, specifically that the private functions are too complex. Also note that it requires jQuery.

Example Code

    if (typeof NS === 'undefined' || !NS) {
        var NS = {};
    }
    (function ($) {
        NS.Klass = function(options) {
            var settings = {
                    debug: false
                },
                private = {
                    // Private Functions
                },
                public = {
                    // Public Functions
                };
            if (options) {
                $.extend(settings, options);
            }
            if (settings.debug) {
                return $.extend({}, private, public);
            } else {
                return public;
            }
        };
    }(jQuery));
    var myClass = new NS.Klass(); // Regular usage
    var myDebugClass = new NS.Klass({debug: true}); // Debug usage

A Few Salient Takeaways

• A well-developed content strategy designed to serve clearly-defined organizational goals is essential to online success. An organization’s web presence is only as strong as the value of its content, and content development requires consistent and on-going effort.
• Tools like Google Analytics and techniques such as A/B Testing can help measure success, as well as inform strategy and design. Again, always bear in mind your organization’s goals, how your web presence can serve such goals, and how success can be measured via conversions.
• If leveraged thoughtfully, platforms such as Facebook and Twitter provide free and simple means through which an organization can engage the public in meaningful messaging, build community, or even poll its markets or constituency. If executed poorly, such social media can irritate people and damage an organization’s brand stature. Again, good content strategy is key.
• Often, an existing platform — something like the Google Docs suite, Flickr, or FourSquare — can better serve an organization’s needs than could a custom solution.
• Healthy open source technology — projects like WordPress, Drupal, Django, and Rails — are extremely affordable, surrounded by active development and user communities, robust documentation and resources, and large support networks. Such factors may justify the abandonment of legacy technologies within an organization in favor of open source solutions. Mindfully assess the pros and cons of such a technology decision, but don’t throw good money after bad.
• Good SEO, or Search Engine Optimization, is largely the product of thoughtful content, an active online presence, and Web Standards such as semantic and accessible HTML.

The Creational Pattern

• used in creating objects within in application
• define a class and instantiate it later when you need it

  var newObject = new MyClass();

The Constructor Function

• used to create specific types of objects
• native constructors in JavaScript include Array and Object
• constructor functions often capitalized to distinguish them from normal functions

  
  function Car(model, year, miles){
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.whatCar = function(){
      console.log(this.model);
    };
  }
  

  
  var civic = new Car("Honda Civic", 2009, 20000);
  var mondeo = new Car("Ford Mondeo", 2010, 5000);
  

The Singleton Pattern

• can be implemented by creating a class with a method that creates a new instance of the class if one doesn’t exist
• if an instance exists, it returns a reference to that object
• traditionally, restricts instantiation of a class to a single object
• doesn’t provide a way for code that doesn’t know about a previous reference to the singleton to easily retrieve it
• it is not the object or class that’s returned by a singleton, it’s a structure
• useful when exactly one object is needed to coordinate patterns across the system

  
  var SingletonTester = (function(){

    //args: an object containing arguments for the singleton
    function Singleton(args) {

     //set args variable to args passed or empty object if none provided.
      var args = args || {};
      //set the name parameter
      this.name = 'SingletonTester';
      //set the value of pointX
      this.pointX = args.pointX || 6; //get parameter from arguments or set default
      //set the value of pointY
      this.pointY = args.pointY || 10;  

    }

   //this is our instance holder
    var instance;

   //this is an emulation of static variables and methods
    var _static = {
      name: 'SingletonTester',
     //This is a method for getting an instance

     //It returns a singleton instance of a singleton object
      getInstance: function (args){
        if (instance === undefined) {
          instance = new Singleton(args);
        }
        return instance;
      }
    };
    return _static;
  })();

  var singletonTest = SingletonTester.getInstance({pointX: 5});
  console.log(singletonTest.pointX); // outputs 5
  

The Module Pattern

• way to provide both private and public encapsulation for the idea of JavaScript ‘classes’
• work under the premise of a ‘class’ actually being defined as a function
• parameters that you decide to use for this class are actually the parameters for the constructor
• local variables and functions defined inside your class become private members
• return method for your class (ie. still a function) returns an object that contains your public methods and variables

Advantages

• cleaner than true encapsulation for developers coming from an object-oriented background
• public parts of your code are able to touch the private parts
• outside world is unable to touch the class’s private parts

Disadvantages

• as you access both public and private members differently, when you wish to change visibility, you actually have to make changes to each place the member was used
• You also can’t access private members in methods that are added to the object at a later point.

  
  var someModule = (function() {

    //private attributes
    var privateVar = 5;

    //private methods
    var privateMethod = function() {
      return 'Private Test';
    };

    return {
      //public attributes
      publicVar : 10,
      //public methods
      publicMethod : function() {
        return ' Followed By Public Test ';
    }, 

    //let's access the private members
    getData : function() {
      return privateMethod() + this.publicMethod() + privateVar;
     }
   }
  })(); //the parens here cause the anonymous function to execute and return

  someModule.getData();
  

The Revealing Module Pattern

• improvement to Module pattern by Christian Heilmann
• define all of your functions and variables in the private scope and return an anonymous object at the end of the module along with pointers to both the private variables and functions you wish to reveal as public
• allows the syntax of your script to be fairly consistent
• makes it very clear at the end which of your functions and variables may be accessed publicly
• provides ability to reveal private functions with more specific names if you wish

  
  /*
   The idea here is that you have private methods which you want to expose as public methods.

   Below we are defining we a self-executing function and immediately returning the object.
   */
   var myRevealingModule = function() {
     var name = 'John Smith';
     var age = 40;

     function updatePerson() {
       name = 'John Smith Updated';
     }
     function setPerson () {
       name = 'John Smith Set';
     }
     function getPerson () {
       return name;
     }

     return {
       set: setPerson,
       get: getPerson
    }
  }();

  // Sample usage:
  myRevealingModule.get();
  

The Prototype Pattern

• based on the concept of prototypal inheritance where we create objects which act as prototypes for other objects
• prototype object itself is effectively used a blueprint for each object the constructor creates.
• easy way to implement inheritance
• performance boost

  
  // No need for capitalization as it's not a constructor
  var someCar = {
    drive: function() {};
    name: 'Mazda 3'
  };

  // Use Object.create to generate a new car
  var anotherCar = Object.create(someCar);
  anotherCar.name = 'Toyota Camry';
  

The Facade Pattern

• simplifies the interface of a class and it also decouples the class from the code that utilizes it
• provide us with an ability to indirectly interact with subsystems in a way that may be less prone to error than accessing the subsystem directly

  
  //simplifying an interface for attaching events
  var addMyEvent = function(el,ev,fn) {
    if (el.addEventListener) {
     el.addEventListener(ev,fn, false);
    } else if (el.attachEvent) {
     el.attachEvent('on'+ev, fn);
    } else {
     el['on' + ev] = fn;
    }
  };
  

The Factory Pattern

• deals with the problem of creating objects without need to specify the exact class of object being created
• suggests defining an interface for creating an object where you allow the subclasses to decide which class to instantiate
• defines a completely separate method for the creation of objects and which sub-classes are able to override so they can specify ‘type’ of factory product created

  
  var Car = (function() {
    var Car = function (model, year, miles){
     this.model = model;
     this.year   = year;
     this.miles = miles;
    };
    return function (model, year, miles) {
      return new Car(model, year, miles);
    }
  })();

  var civic = new Car("Honda Civic", 2009, 20000);
  var mondeo = new Car("Ford Mondeo", 2010, 5000);
  

The Decorator Pattern

• alternative to creating subclasses
• can be used to wrap objects within another object of the same interface and allows you to both add behaviour to methods and also pass the method call to the original object (ie the constructor of the decorator)
• used when you need to keeping adding new functionality to overridden methods
• subclassing adds behaviour that affects all the instances of the original class, whilst decorating can add new behavior for individual objects

  
  //The class we're going to decorate
  function Macbook(){
    this.cost = function() {
      return 1000;
    };
  }

  function Memory(macbook) {
    this.cost = function() {
      return macbook.cost() + 75;
    };
  }

  function BlurayDrive(macbook) {
    this.cost = function() {
      return macbook.cost() + 300;
    };
  }

  function Insurance(macbook) {
    this.cost = function(){
      return macbook.cost() + 250;
    };
  }

  // Sample usage
  var myMacbook = new Insurance(new BlurayDrive(new Memory(new Macbook())));
  console.log( myMacbook.cost() );
  

• full commands history
• tab completion for functions
• simple output highlighting
• documentation for commands

In an attempt to install the tool, I initially followed Konstantin Kudryashov’s instructions Mac OS X installation instructions, but encountered a few problems. Most noteably, after installation, the phpsh command was still not recognized, resulting in -bash: phpsh: command not found. After digging around, I discovered that, per Konstantin Kudryashov’s step 3.6, my /usr/local/bin/phpsh was symlinked to a non-existent phpsh in /opt/local/Library/Frameworks/Python.framework/Versions/2.6/bin/phpsh. I’m not sure how this happened, but seems most likely related to how setup.py installed it.

Update

Since posting this, I discovered Jeff Stieler’s excellent instructions on installing phpsh, including some tips for getting the tool running with WordPress Multisite. Jeff’s instructions are probably worth a try before resorting to mine.

How I Got it Working

Note that I’m using Mac OS X 10.6.6, and that these instructions assume you have git, MacPorts, and Homebrew installed.

1. Set up Python to utilize Python 2.6 and to utilize Python’s select.poll library:
   1. Install Python 2.6 if you haven’t already done so. To determine which version of Python you’re running, open Terminal.app and enter python. This will open the Python interactive shell and report which version of Python you’re running. The shell can be quit with Ctrl + d. If you’re running a Python version < 2.6, quit the interactive shell and enter:

          sudo port install python26

   2. Install Python’s select.poll library:

          sudo port install python_select

2. Install pysqlite for autocompletion:
   1. Install wget if you haven’t already done so:

          sudo brew install wget

   2. Untar the file you’ve downloaded with wget and cd into the directory:

          tar -xvf pysqlite-2.5.6.tar.gz && cd pysqlite-2.5.6

   3. Build pysqlite:

          python setup.py build

   4. Install it:

          sudo python setup.py install

3. Set up phpsh on your machine:
   1. Download the phpsh package or clone the phpsh git repository:

          git clone git://github.com/facebook/phpsh.git

   2. cd to the phpsh directory:

          cd phpsh

   3. Install phpsh locally:

          python setup.py install --prefix=~

   4. Set your PYTHONPATH

          export PYTHONPATH=~/lib/python2.6/site-packages

   5. And run phpsh from Terminal.app:

          ~/bin/phpsh

4. Additionally, you may want to set up your machine so that you can simply enter phpsh to start the phpsh interactive shell, rather than having to enter ~/bin/phpsh To do this, you’ll need to put the PYTHONPATH line in your .bashrc or .bash_profile and add ~/bin to your PATH. For example, I added the following lines to my ~/.bash_profile:

     export PATH=~/bin::$PATH
     export PYTHONPATH=~/lib/python2.6/site-packages

To deal with the problem, I created a bash function to serve as a shortcut wrapping my usage of grep, sed, and uniq. Note that I’m using Mac OS X 10.6.6.

  function rep() {
    for i in `grep -R --exclude="*.svn*" "$1" * | sed s/:.*$//g | uniq`; do
      sed -i ".bak" -e "s#$1#$2#g" $i
    done
  }

How to Use the Function

1. Paste the above function into your ~/.bash_profile.
2. Open Terminal.app or, if it's already open, enter source ~/.bash_profile to reload your profile settings.
3. cd to the directory where you'd like to perform the recursive find/replace.
4. Enter rep textofind texttoreplace. For example, to executive my above-mentioned find/replace, I entered rep /layout/ /layout_xds/
5. Note that the function backs up the original files with a *.bak file extension. After verifying that the find/replace has successfully executed, delete the *.bak files by running find . -name "*.bak" -exec rm "{}" \; from the directory where the rep command was run.

Props to Jeff for helping me on some syntax specifics.

Note that the following instructions apply to Mac OS X 10.6.5.

1. Install XCode
2. Install Git
3. Open Terminal.app
4. Install the latest Ruby Version Manager (RVM) code from the github repository by entering this command:

      bash < <( curl http://rvm.beginrescueend.com/releases/rvm-install-head ) 

5. When the installation finishes, open your ~/.bash_profile and add the following line:

      # This loads RVM into a shell session.
     [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" 

6. Reload your ~/.bash_profile:

      source .bash_profile 

7. Confirm that RVM installed correctly:

      which rvm 

   If RVM installed correctly, the above command should return something like the following:

      /Users/your_username/.rvm/bin/rvm 

8. Install the proper version of Ruby. We’ll be Ruby 1.8.7:

      rvm install 1.8.7 

9. Set Ruby 1.8.7 as your default Ruby:

      rvm --default 1.8.7 

10. Confirm that Ruby 1.8.7 installed and is set to be your default Ruby:

       which ruby 

    If all is well, this should return something like the following:

       /Users/your_username/.rvm/rubies/ruby-1.8.7-p330/bin/ruby 

11. Install Rails:

       gem install rails 

    Note that Rails can be installed without its documentation like so:

       gem install rails --no-rdoc --no-ri 

12. Confirm that Rails installed correctly and is using Ruby 1.8.7:

       which rails 

    If all is well, this should return something like:

       /Users/your_username/.rvm/gems/ruby-1.8.7-p330/bin/rail 

13. cd to the directory of your choosing and make a new Rails app:

       rails new your_app_name 

14. cd to your_app_name
15. Install all the dependencies specified in your Rails app’s Gemfile

       bundle install 

16. Run the Rails server:

       rails s 

17. Visit your Rails app in your browser at http://localhost:3000/

The solution

I made a bash function that provides a quick way to include/exclude files from an svn commit.

  function smartcommit() {
    svn stat > /tmp/svn_commits.tmp
    vim /tmp/svn_commits.tmp
    svn commit `cat /tmp/svn_commits.tmp | cut -d' ' -f2- | xargs`
    rm /tmp/svn_commits.tmp
  }

How to Use It

1. Paste the above function into your ~/.bash_profile
2. Enter smartcommit at the command line from within a Subversion project’s directory.
3. The output of svn stat is printed to a new file called svn_commits.tmp.
4. svn_commits.tmp is opened in Vim.
5. Remove any lines specifiying files you DO NOT want to commit.
6. Enter :wq to save and quit the temporary file.
7. Proceed with the commit as normal, noting that only those files left listed in the aforementioned svn_commits.tmp file will be committed.
8. The svn_commits.tmp file is deleted.

A self-contained script can also be downloaded from GitHub.

Adding Surroundings

Generally, the cs or ys commands can be used to add surroundings.

Add Surrounding <tag> or Puncation to Word:

  ysiw<tag>
  csw<tag>

Add Surrounding to Highlighted Text From Within Visual Mode:

  VS<tag>

Add Surrounding <tag> or Punctuation to Line:

  yss<tag>

Add Surrounding to Line, Place it on a New Line, and Indent It:

  ySs<tag>
  ySS<tag>

Changing Surroundings

Surroundings can be changed with the cs command.

Change Surrounding <tag>:

  cst<newtag>

Change Surrounding Puncuation, in this Case Changing a Double Quote to a Single Quote:

  cs"'

Deleting Surroundings

Delete Innermost Surrounding <tag>:

  dst

Delete Surrounding Quotes (Also works with parentheses, brackets, etc.):

  ds"

Delete Text Within a <tag>

While this isn’t a function of Surround.vim, I find it somewhat relevant to the above operations. Luckily, it’s built into Vim.

  dit

How to Install Git on Webfaction

1. Log into your Webfaction Control Panel
2. Navigate to Domains/Websites » Applications
3. Click Add New
4. Enter git as the application name in the Name field
5. Select git from the App category menu
6. Enter a password for the default user in the Extra Info field
7. Click the Create button

Git should now be installed. The installation creates a directory at ~/webapps/git. A directory at ~/webapps/git/bin contains the Git executables. A directory at ~/webapps/git/repos provides a place to store your repositories, pre-populated with ~/webapps/git/repos/proj.git serving as an example.

How to Create a new Git Repository

1. Open an SSH session to your webfaction account: ssh username@username.webfactional.com
2. cd ~/webapps/git/
3. Enter ./bin/git init --bare ./repos/reponame.git to create a new repository, where reponame is the name of yorur repository
4. cd repos/repo.git
5. Enable HTTP push with ../../bin/git config http.receivepack true

Connect it to Your Local Work

1. cd /path/to/your/local/repository/
2. Assuming it’s not already under version control, enter git init
3. git add .
4. git commit -a -m 'Initial commit.'
5. git remote add origin ssh://username@username.webfactional.com/~/webapps/git/repos/reponame.git
6. git push origin master
7. git push

Clone Your Repository Somewhere New

git clone username@username.webfactional.com:webapps/git/repos/reponame.git

Based On:

• Webfaction’s Git Documentation
• Git Setup on Webfaction

• Install SIMBL
• Download and install Ciaran Walsh’s SIMBL plugin.
• In the Finder, navigate to Applications » Utilities » Terminal. Press ⌘I to “Get Info.” Tick “Open in 32-bit mode.”
• Confirm that the SIMBL plugin was installed correctly by restarting Terminal and verifying that a “More” button appears in Preferences » Text.
• Download Todd Werth’s IR Black color scheme.
• Install the color scheme by double clicking the IR_Black.terminal file.
• Navigate to Terminal » Preferences to set IR Black as your default color scheme.

Features

• Semantically sound and valid HTML5
• Minimal, clean, and valid CSS 2.1
• HTML5 support to versions of Internet Explorer prior to IE 9 provided via Remy Sharp’s HTML5 Shiv
• A minimal, typographically strong design based on Baskerville
• Free and licensed under GPL

A demo can be viewed at quietlogger.mikeball.us. The source code can be forked on GitHub, or downloaded here.

View demo »

News.gpcc.com is built on a custom WordPress theme. It shares JSON-powered advertising and featured events modules with greaterphilachamber.com and aggregates feed content from Twitter, Flickr, and the GPCC’s event calendar.

GPCC graphic designer Nate Johnson took the lead type photo used in the banner.

Functionality Overview for Philadelphians

• Find a complete list of legislative representatives based on a home address search
• Access representatives’ photos, contact information, and campaign donor data
• Read in-depth reports about the campaign money behind local issues that matter to Philadelphians
• Follow the site’s blog for articles, events, and Philadelphia news related to how campaign money works in Philadelphia politics
• Register to create a profile, comment on reports and blog posts, and get a personalized news feed

Our Philadelphia was made possible by the Samuel S. Fels Fund. Its representative search tool is powered by Cicero’s API. The site is built on Django and is an open source project. Feel free to download its source code or contact me about using this software in your own city.

Read more about the project in my portfolio entry, follow Our Philadelphia on Twitter, or join Our Philadelphia on Facebook.