Django non-rel on Heroku with less and coffee-script compilation

Finally got it to work, so here’s my cheat-sheet:

Python already installed on my mac. Used easy_install, pip, and virtualenv to get python requirements met. Used Homebrew to get other resources like node.js, and then npm for node specific stuff.

Not using postgres, so I needed to install mongodb, first locally, in order to try my application out:
http://docs.mongodb.org/manual/tutorial/install-mongodb-on-debian-or-ubuntu-linux/

Then get Django-non-rel and Django MongoDB Engine installed:
http://django-mongodb.org/topics/setup.html

As my application required user-authentication support for objects, I also added in django-permission-backend-nonrel.

Then continued by following instructions on Heroku for getting started with Django:
https://devcenter.heroku.com/articles/django#postgres_database_config

Added a MongoHQ datasource to my Heroku app.

Not using postgres, so used help from here to set up db connections, remove DATABASE_URL from heroku config (heroku config:remove DATABASE_URL), and fix my requirements.txt file to include the following:


https://github.com/django-nonrel/django-nonrel/tarball/master
https://github.com/django-nonrel/nonrel-search/tarball/master
https://github.com/django-nonrel/djangotoolbox/tarball/master
https://github.com/django-nonrel/django-permission-backend-nonrel/tarball/master
https://github.com/django-nonrel/django-dbindexer/tarball/master
https://github.com/django-nonrel/mongodb-engine/tarball/master
Unidecode==0.04.9
distribute==0.6.27
django-appconf==0.5
django-compressor==1.1.2
psycopg2==2.4.5
pymongo==2.2.1
wsgiref==0.1.2
gunicorn==0.14.6

My application uses less and coffee-script, so I added in django-compressor to compile my less and coffee-script files and needed node.js in order to install the required compilers.

I got some help from stackoverflow and found this to get node.js and django loaded for my heroku application:
https://github.com/jiaaro/heroku-buildpack-django

npm_requirements.txt

coffee-script
less@1.3.0

Then since this was for a production server, I needed to get my staticfiles copied over to my STATIC_ROOT. I got a lot of help from MatthewPhiong’s blog post on Managing Django Static Files on Heroku.  I had to go into the comments and on to stackoverflow to figure out how to serve the files from Heroku (there aren’t that many of them in my application so s3 seemed like overkill – no speed issues for me).

These steps included remembering to import settings in urls.py:

urls.py:

from django.conf import settings

if not settings.DEBUG:
urlpatterns += patterns(”,
url(r’^static/(?P.*)$’, ‘django.views.static.serve’, {‘document_root’:settings.STATIC_ROOT}),
)

Notes:

  • Getting the correct SITE_ID requires you to push to heroku and use “heroku run python app/manage.py shell” command to interact with your heroku application.  You’ll need to add the Site object and then grab it’s ID, site.id(), and put that into your settings.py and then push again.
  • Debug/development vs. Production caused me some issues with static files.  All I understand about this right now is that in production, django copies your static files over to a staticfiles directory from all of your project’s app static directories.  If you don’t run collectstatic, this won’t happen.  But you need to run collectstatic on the same worker as your application so they know about each other – requiring a Procfile (same link as above).   I would love to read something that  clarifies what is going on through all these steps, including using django-compressor.  Right now it works, but I don’t understand it completely.

High Performance Websites

Truthfully, whenever I heard talk of website performance in the past, my eyes glazed over. I was too concerned about getting something to work, rather than worrying about the nitty-gritty details of making them work quickly. However, I’ve also always been interested in accessibility and usability. When I started to think about how website performance improvements would also greatly improve website usability and accessibility, I started to grow a lot more interested in the topic. Below are some links to helpful information for front-end web developers interested in improving their website performance. I plan to include some posts on my own results from some of the exercises in Steve Souders class as the year progresses.


Supporting Transparent PNGs in IE6 for Plone 3

I’m working on my first Plone website.  I created a simple style for the site using transparent PNG files.  It looked great on IE7+, Chrome, Safari, Firefox.  I wasn’t sure whether it was necessary to still support IE6, where the transparent PNG files are not supported out-of-the-box.  The website was for Computer Architects so they probably all have more recent browsers, but not everyone follows the latest curve, so I went a step further with my design.

There are several options for supporting transparent PNGs in IE6.  Here are the details about the one I selected:

Supersleight JQuery Plugin

I only had a couple of images in my banner that I was concerned about.  One was an in-line image.  The other was a positioned back-ground image for which this wasn’t the best option, as it doesn’t work with positioned background images.  Darn.

Understanding what the code was doing wasn’t so difficult – uses JavaScript to add a css “filter” rule to inline and background images in IE6 and IE5.5 browsers, since “filter” is not in the W3C CSS specification.  What I needed to do was figure out how to use a jQuery plugin within Plone 3.  Turned out it wasn’t too difficult.  Yeah!

First, jQuery is automatically included in Plone 3.  I needed to download the script file I was using and put it into my custom theme’s template folder.  Once I had that completed, I needed to update the logo template in the browser folder to call the JavaScript function on my single inline image – jq('#portal-logo').supersleight().  Then I needed to register my script in the theme’s profiles/default registry file (jsregistry.xml) (from Nabble), copy the x.gif image to my theme’s skins/images folder and restart my server.

Now I need to use an alternative method to help out my background image because of the positioning.  I’m planning to create two images (one PNG and one GIF) and switch between them based on the user’s browser.  We’ll see how it goes.