Solutions Log

So I only have to figure things out once.

Sorting JavaScript Arrays in Numerical Order

I do not understand why this is was so difficult to figure out.

You’ll need Underscore.js to play along at home.

Start with an array like

1
var sizes = [4, 1, 10, 8];

If you just use JavaScript’s built in .sort() method, you’ll end up with

1
2
sizes.sort();
// results in [1, 10, 4, 8]

This is because it sorts lexicographically by default. Why? Because it (doesn’t) love you.

Here’s how to do it using Underscore’s sortBy method:

1
2
sizes = _.sortBy( sizes, function( val ){ return val; } );
// results in [1, 4, 8, 10]

Why does this work? I’m not sure. Ask your dad.

Source

Using External Files as jQuery Templates

Previously…

If you want to keep your templates in external files, you can load the template in like so:

1
2
3
$.get('/js/templates/filename.html', function(template) {
  $.tmpl(template, data).appendTo('#whatever');
});

A couple of benefits of this method:

  • Organizing your templates into their own files is tidy.
  • Your syntax highlighter will be happier, since you’re not writing HTML between two <script> tags.

Source

Don’t Clutter Your Desktop

To keep from putting too many files and folders on your Desktop, make your icons huge.

  • Click on your desktop
  • From the menu, choose View > Show View Options

Show View Options

  • Crank up the size as far as it will go

Crank that Icon Size

  • Gaze at your huge, pretty icons and then get back to work

Big, pretty icon

How I Deal With TextMate Projects

  • Create a folder in ~/Documents called TextMate Projects
  • Save your TextMate Project files there (not the projects themselves)
  • Change the icon of the folder to what the ~/Sites folder has (makes sense to me since I use TextMate almost entirely for websites)
  • Drag to the right side of your Dock
  • Right click the folder in the Dock
    • Display as Folder
    • View content as list

VoilĂ :

TextMate Projects folder in the OS X Dock

Note: you’ll see .tmproj at the end of the project name until the next time you restart your machine or you restart the Dock (killall Dock). Not sure what the deal is with that.

Temporarily Ignore a File in Git

Sometimes you want to temporarily ignore a file in a Git repository without throwing it out entirely by putting it in .gitignore. Here’s how to do it:

git update-index --assume-unchanged [filename]

To start tracking changes again:

git update-index --no-assume-unchanged [filename]

Source

Install and Use Django, MySQL, and VirtualEnv on Snow Leopard

Django

mkdir -p ~/src
svn co http://code.djangoproject.com/svn/django/trunk/ ~/src/django
ln -s ~/src/django/django `python -c "from distutils.sysconfig import get_python_lib; print get_python_lib()"`/django
ln -s ~/src/django/django/bin/django-admin.py ~/bin/django-admin.py

PIP, mysql-python, virtualenv, virtualenvwrapper, Mercurial

Download and install the MySQL package installer, then:

easy_install pip
pip install http://downloads.sourceforge.net/project/mysql-python/mysql-python-test/1.2.3c1/MySQL-python-1.2.3c1.tar.gz?use_mirror=cdnetworks-us-2
pip install virtualenv
pip install virtualenvwrapper
pip install mercurial

(Note: we’re installing Mercurial because a lot of PIP packages require it)

In ~/bin/dotfiles/bash/env

export WORKON_HOME=$HOME/.virtualenvs
source /usr/local/bin/virtualenvwrapper.sh
. ~/src/django/extras/django_bash_completion

Then

mkdir -p ~/.virtualenvs
source ~/.bashrc

Install libjpeg from scratch (for PIL):

cd ~/src
curl -O http://www.ijg.org/files/jpegsrc.v8a.tar.gz
tar zxvf jpegsrc.v8a.tar.gz
cd jpeg-8a
./configure
make
make install

Setup a project

cd [path/to/your/project/]
mkvirtualenv [projectname]
add2virtualenv .
echo 'cd [path/to/your/project/]' >> $WORKON_HOME/postactivate

Put requirements for your project into a requirements.txt like so:

A package on its own line:

docutils==0.6

Repo noted like so:

-e git://github.com/mintchaos/typogrify.git#egg=Typogrify

To install things in your requirements file

pip install -r requirements.txt

Starting and Stopping VirtualEnvs

Start:

workon [project]

Stop:

deactivate

Sources

Optional Parameters in JavaScript Functions

Set it up
1
2
3
4
5
6
7
8
9
10
adjustDisplay: function(smooth){
    if (smooth === undefined) { smooth = false };
    ...
    if (smooth) {
        $('#content').animate({height: '500px'}, 200);
    } else {
        $('#content').css('height', '500px');
    };
},
...
Call it
1
app.adjustDisplay('smooth');

jQuery Templates

Create a Template (most basic way):

1
2
3
<script id="book-template" type="text/x-jquery-tmpl">
    <li>${name} (${year})</li>
</script>

Note that the type attribute is set to text/x-jquery-tmpl (text/html would do the trick as well). Anything other than text/javascript is ignored by the browser. Also, leaving it out entirely will default to text/javascript (thank you, HTML5 for making it OK to do that).

Data:

1
2
3
4
5
6
7
8
9
10
var books = [
    { name: 'The Gunslinger',               year: '1982' },
    { name: 'The Drawing of the Three',     year: '1987' },
    { name: 'The Waste Lands',              year: '1991' },
    { name: 'Wizard and Glass',             year: '1997' },
    { name: 'The Wolves of the Calla',      year: '2003' },
    { name: 'Song of Susannah',             year: '2004' },
    { name: 'The Dark Tower',               year: '2004' },
    { name: 'The Wind Through the Keyhole', year: '2012' }
];

Load the template with data:

1
$('#book-template').tmpl(books).appendTo('#book-list');

To be totally explicit: the first selector is the ID of the template (script tag), the argument being passed to .tmpl is the array, and then we’re appending the whole thing to the #tower-list object in the DOM.

Now don’t forget some HTML:

1
<ul id="book-list"></ul>

Source

Using Sass With Django

Install django-css.

Install Sass.

sudo gem install haml

Add to settings.py:

settings.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
INSTALLED_APPS = (
  ...
  'compressor',
  ...
)

...

COMPILER_FORMATS = {
    '.sass': {
        'binary_path':'sass',
        'arguments': '*.sass *.css'
    },
    '.scss': {
        'binary_path':'sass',
        'arguments': '*.scss *.css'
    }
}

Add to a template that you want to load a Sass file:

1
2
3
4
5
6
7
{ % load compress % }

...

{ % compress css % }
<link rel="stylesheet" href="css/base.scss" media="screen">
{ % endcompress % }

Dealssss with caching when you deploy.

Perhaps pip install python-memcached then put something like this in settings.py

1
CACHE_BACKEND = 'memcached://127.0.0.1:11211/'

Write some nice Sass.

Your snazzy Sass file
1
2
3
4
5
6
7
8
$orange: #EE8529;

ul {
  font-size: 26px;
  li {
      color: $orange;
  }
}