Solutions Log

Sorting JavaScript Arrays in Numerical Order

2011-10-14T14:21:00-05:00

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

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

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

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:

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

Stack Overflow

Using External Files as jQuery Templates

2011-04-28T14:45:15-05:00

Previously…

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

$.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

Dave Ward

Don’t clutter your Desktop

2011-01-12T14:07:00-06:00

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

Crank up the size as far as it will go

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

How I deal with TextMate projects

2011-01-11T16:09:34-06:00

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à:

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

2011-01-07T10:25:18-06:00

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

Git Ready

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

2010-12-27T12:30:51-06:00

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

Determine if a jQuery click event was triggered by a user or a script calling the .click() method

2010-11-13T17:06:53-06:00

$('.button').click(function(e) {
    if (e.originalEvent) {
        // user click
    } else {
        // .click()
    };
});

Source

chiel’s comment on the jQuery API

Optional Parameters in JavaScript Functions

2010-11-03T11:49:08-05:00

Set it up

adjustDisplay: function(smooth){
    if (smooth === undefined) { smooth = false };
    …
    if (smooth) {
        $('#content').animate({height: '500px'}, 200);
    } else {
        $('#content').css('height', '500px');
    };
},
…

Call it

app.adjustDisplay('smooth');

jQuery Templates

2010-10-25T11:22:56-05:00

Download jquery-tmpl

Create a Template (most basic way):

<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:

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:

$('#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:

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

Source

Using Sass with Django

2010-08-22T14:00:38-05:00

Install django-css.

Install Sass.

sudo gem install haml

Add to settings.py:

settings.py

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:

{ % 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

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

Write some nice Sass.

Your snazzy Sass file

$orange: #EE8529;

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

Create a JavaScript Object with Overwrite-able Settings

2010-06-09T15:43:20-05:00

var Fancy = {
  settings: {
      something: 'one',
      somethingElse: 'two'
  },
  init: function(options){
      var s = $.extend({}, this.settings, options);
  }
}

Call it like so:

Fancy.init({something: 'Luke', somethingElse: 'Wroblewski'});

That’s one way to do it anyway.

Passing a JavaScript Function as a Parameter to Another Function

2010-06-09T15:36:25-05:00

function makeItRain (effect) {
    $(‘#something’)[effect]();
}

makeItRain(‘slideToggle’);

Note the lack of a ’.’ and the ’[]’s.

Source

Hernán

Installing MySQL on Snow Leopard using Homebrew

2010-02-28T12:42:59-06:00

If you already have a /usr/local folder and it’s not owned by your user:

sudo chown -R `whoami` /usr/local

Install Homebrew:

cd /usr/local
git init
git remote add origin git://github.com/mxcl/homebrew.git
git pull origin master

This is kind of odd–you install Homebrew right into the base of your /usr/local folder. It nicely ignores other folders that already exists there. Just do it.

Install MySQL:

brew install mysql

Yeah, it’s really that easy. This will take a while.

Now warm it up:

mysql_install_db

And make sure it automatically starts again on login:

launchctl load -w /usr/local/Cellar/mysql/5.1.43/com.mysql.mysqld.plist

The mate Shell Command for TextMate

2010-02-25T13:56:50-06:00

I keep having to look this up.

To add the mate shell command, select the Help menu from within TextMate and select "Terminal Usage…"

Source

TextMate blog

Using Dropbox to Share Git Repositories

2010-02-22T16:02:38-06:00

First, create a Git subfolder inside your Dropbox folder. Then you can share the individual projects inside that folder with whomever you want (or just use it for instant offsite backups).

From inside a Git project:

git clone –bare . ~/Dropbox/Git/gitproject.git
git remote add dropbox ~/Dropbox/Git/gitproject.git

When you’re ready to push:

git push dropbox master

Your Collaborator’s View

Your collaborator would work on the project like so (inside the folder where they want their project to live):

git clone ~/Dropbox/Git/gitproject.git

If they want to have a dropbox remote instead of the default origin:

git remote add dropbox ~/Dropbox/Git/gitproject.git

They would then push the same way:

git push dropbox master

To get the other person’s changes, it’s the standard deal:

git pull dropbox master

Source

Cocoa Is My Girlfriend

Create Your Own Local Copy of the Django Documentation

2010-01-10T03:46:50-06:00

sudo easy_install Sphinx

Inside your local SVN checkout of Django:

cd docs
make html

Now you’ll have a beautiful local copy of the documentation to browse for those rare moments when you’re away from the internet (perhaps you’re in a fort?). Just point your browser to:

file:///path/to/your/django/docs/_build/html/index.html

Source

eddymulyono

Getting Django + MySQL running again on Snow Leopard

2010-01-04T21:03:20-06:00

Previously…

Install the latest Xcode Tools from your Snow Leopard installation DVD
Re symlink things to /Library/Python/2.6/site-packages (Leopard used 2.5)
- Django
- Any other thing you had symlink’d in 2.5

MySQL + Python

Install MySQL from source like Dan says but use the latest version of MySQL (5.1.42 in my case) instead of the version he says to use.
Install MySQL-Python like the top answer on this Stack Overflow question.

After all that Sequel Pro is still showing the version of MySQL as 5.1.33, but it seems to be working…

PIL

This was by far the biggest headache. I finally found a solution:

Install like this, but before running sudo python setup.py install, do this:

LDFLAGS="-arch ppc -arch i386 -arch x86_64" CFLAGS="-arch ppc -arch i386 -arch x86_64" python setup.py build

If you already had PIL installed and had the source files you compiled from before, be sure to delete them and start fresh from a new Imaging-1.1.6.tar.gz.

Using the jQuery Autocomplete Plugin with Django

2009-12-10T17:08:22-06:00

Here’s another look into the development of ComicBinder.

There’s already a good tutorial on how to use an autocomplete plugin with Django, but I wanted to use this much snazzier plugin.

The Process

Load both jquery.autocomplete.min.js and jquery.autocomplete.css in your page.

In your form object, create a CharField to hold your autocomplete. Something like:

title = forms.CharField(label='', widget=forms.TextInput(attrs={'placeholder': 'The name of a comic'}))

Create a hidden field to hold the primary key of the item you’re selecting (so you don’t have to depend on searching against a ‘name’ field or something else equally brittle):

title_pk = forms.IntegerField(widget=forms.HiddenInput())

Create a view to populate the autocomplete list:

def title_lookup(request):
    results = []
    if request.method == "GET":
        if request.GET.has_key(u'q'):
            value = request.GET[u'q']
            # Ignore queries shorter than length 3
            if len(value) > 2:
                model_results = Title.objects.filter(name__icontains=value)
                results = [ (x.__unicode__(), x.id) for x in model_results ]
    json = simplejson.dumps(results)
    return HttpResponse(json, mimetype='application/json')

This will, of course, need a URLconf:

url(r'^title_lookup/$', view=title_lookup, name='title_lookup'),

And to finish it off, a bit of JavaScript in your template to call the plugin:

<script>
    $(function() {
        $('#id_title').autocomplete('{ % url title_lookup % }', {
            dataType: 'json',
            width: 500,
            parse: function(data) {
                return $.map(data, function(row) {
                    return { data:row, value:row[1], result:row[0] };
                });
            }
            }).result(
                function(e, data, value) {
                    $("#id_title_pk").val(value);
                }
            );
        }
    );
</script>

Sources

Smart URL Redirects in Django

2009-12-02T17:50:07-06:00

While building ComicBinder’s URLs, I wanted a way to differentiate a volume of a title other than one, and a printing of an issue other than one. So, for example, a URL to the second printing of the second volume of Amazing Spider-Man #1 would look like:

/marvel/amazing-spider-man_2/1_2/

That’s easy enough with some URLconf wrangling. What I’m talking about today is automatically redirecting a request for _1 in any of those places to the same URL without the _1. While technically correct, I want the lack of underscore + number to mean one, and for there to be only one URL for a resource (someone send me a link to a clever article that talks about this).

django.views.generic.simple.redirect_to to the rescue. Try something like this:

(r’^(?P<publisher>[-\w]+)/(?P<title>[-\w]+)_1/(?P<number>\d+)_1/$’, ‘django.views.generic.simple.redirect_to’, {‘url’: ‘/%(publisher)s/%(title)s/%(number)s/’}),

I made a few of these to account for situations where it was the first volume, but nothing specified for printing, and vise versa.

Not too bulky, and since I have that sitting near the normal rule, it shouldn’t put me out too much to update it if I make any changes.

Source

Django Documentation

How to Log Something

2009-11-09T16:55:42-06:00

With The Django Debug Toolbar

Somewhere in your Python code (not a template):

import logging
logging.debug(something_you_want_to_log)

With Firebug

Somewhere in your JavaScript or the Firebug Console:

console.log(something_you_want_to_log);

That was easy.