Tips and tricks for front end development automation using python and django by Evan Reiser

1. Tips & Tricks for Front End Development Automation Evan Reiser

2. Front End Automation? Tools / Tricks to speed up front end dev work Why talk about this? Same reason we all like Django: More time solving our biz/eng problems Less time doing the same repeatable patterns We want to: Build web apps + add features Not: waste time deploying media, organizing assets, minifying js/css, making sprites etc.

3. django experience Co-founder @ GamerNook Social Network for Gamers 100k+ Members Co-founder @ BloomSpot Luxury Daily Deals 3rd Largest Daily Deals site Co-founder @ AdStack Algorithmically Managed Facebook Advertising

4. Overview Pains with Front end Development Deploying Media Files Compressing / Combine media files Generating Sprites Automate all of this

5. Problems / Pains Annoying parts of front end development Deploying media to media server / CDN Combining JS / CSS files Minimizing JS / CSS Cache-busting media files in prod Building sprite images Referencing sprites in CSS Having to do this all manually These are all common patterns We shouldn’t have to waste time on them

6. Tools django.contrib.staticfiles django_storages boto django_compressor YUI JS/CSS Compressor django_media_bundler PIL pngcrush

7. django.contrib.staticfiles Pulls media from various places Places them in another place Different folder Media Server Or any custom storage backend S3 / CloudFront CDN

8. Media Files => CDN 1) Set up static files to find #settings.py STATICFILES_DIRS = ( os.path.join(os.getcwd(),"media"), ) STATICFILES_FINDERS = ( 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder', ) STATIC_ROOT = os.path.join(os.getcwd(),"static")

10. Is a python library for interacting with Amazon Web Services

11. django_storages

13. Media Files => CDN 4) Reference media in your templates #settings.py TEMPLATE_CONTEXT_PROCESSORS += ( 'django.core.context_processors.static', ) {# Some Template #} <link rel="stylesheet" href="{{STATIC_URL}}style.css" /> <link rel="stylesheet" href=“http://cdn.adstack.com/style.css" />

14. Managing Media Managing Media CSS / JavaScript assets We want to: Reduce Http requests Reduce bandwidth We don’t want to: Think about front-end performance while coding Interrupt our development

15. Managing Media 1. We want to reduce the number of HTTP requests for serving JS + CSS <link rel="stylesheet" href="{{STATIC_URL}}css/admin/base.css" /> <link rel="stylesheet" href="{{STATIC_URL}}css/admin/changelists.css" /> <link rel="stylesheet" href="{{STATIC_URL}}css/icon_sprites.css"/> <link rel="stylesheet" href="{{STATIC_URL}}css/common_10.css" /> <link rel="stylesheet" href="{{STATIC_URL}}css/tablesorter.css" /> <link rel="stylesheet" href="{{STATIC_URL}}css/multiselect.css" /> <link rel="stylesheet" href="{{STATIC_URL}}css/superfish.css" /> <link rel="stylesheet" href="{{STATIC_URL}}css/all.css" />

16. Managing Media 2. We want to minify css / js content and only include what’s needed (reduce bandwidth) /* Make sure to rename this file before you deploy to break client caching!!! */ /* Headers */ H1 { font-weight:bold; } H2 { font-weight;bold; } H1,H2 {font-weight:bold} Obviously the same thing goes for JS

17. Managing Media 3. Don’t want to have to change the asset names to prevent client side caching Style.css Style2.css Style3.css Style4.css Style5.css

18. Managing Media One way to do this is django_compressor Converts & combines linked or inline css/js into cacheable static files Compression / minification support for: CSS Tidy, YUI CSS + JS, Google’s Closure Compiler, JSmin, cssmin Builds unique static file names to bust cache No need to heavily modify existing templates Plus: Extendable for custom post processing / filtering via python

19. Managing Media Template changes are minimal {% compress css %} <link href="{{STATIC_URL}}css/admin/base.css" /> <link href="{{STATIC_URL}}css/admin/changelists.css" /> <link href="{{STATIC_URL}}css/icon_sprites.css"/> <link href="{{STATIC_URL}}css/common_10.css" /> <link href="{{STATIC_URL}}css/tablesorter.css" /> <link href="{{STATIC_URL}}css/multiselect.css" /> <link href="{{STATIC_URL}}css/superfish.css" /> {% endcompress %} {% compress js %} <script src="{{STATIC_URL}}js/jquery-1.5.1.min.js"></script> <script src="{{ STATIC_URL }}js/jquery.hoverIntent.js"></script> <script src="{{STATIC_URL}}js/common.js"></script> <script src="{{STATIC_URL}}js/jquery.multiselect.min.js"></script> <script src="{{STATIC_URL}}js/jquery.cluetip.min.js"></script> <script src="{{STATIC_URL}}js/jquery.tablesorter.js"></script> <script src="{{ STATIC_URL }}js/jquery.tooltip.pack.js"></script> <script src="{{ STATIC_URL }}js/superfish.js"></script> {% endcompress %}

20. Compressor Settings We use a custom Storage Class to store the results on S3 from django.core.files.storage import get_storage_class from storages.backends.s3boto import S3BotoStorage #A special Storage class that saves to S3 and Locally class CachedS3BotoStorage(S3BotoStorage): def __init__(self, *args, **kwargs): super(CachedS3BotoStorage, self).__init__(*args, **kwargs) self.local_storage = get_storage_class( "compressor.storage.CompressorFileStorage")() def save(self, name, content): name = super(CachedS3BotoStorage, self).save(name,content) self.local_storage._save(name, content) return name

21. Compressor Settings Compressor settings for offline / pre-greneration import os STATICFILES_FINDERS += ( 'compressor.finders.CompressorFinder', ) COMPRESS_OFFLINE = True COMPRESS_STORAGE = "common.common_storages.CachedS3BotoStorage" COMPRESS_ROOT = os.path.join(os.path.dirname(__file__), 'media') COMPRESS_OUTPUT_DIR = "compress_cache" COMPRESS_OFFLINE_CONTEXT = {"STATIC_URL":STATIC_URL} COMPRESS_URL = STATIC_URL #post processing filters COMPRESS_CSS_FILTERS = ['compressor.filters.yui.YUICSSFilter‘] COMPRESS_JS_FILTERS = ['compressor.filters.jsmin.JSMinFilter'] COMPRESS_YUI_BINARY = 'java -jar %s yuicompressor-2.4.6.jar'

23. applies post processing filters

24. creates unique name from hash of content

26. Automatic Sprites What are sprites? Sprites are composite images made up of other images Why? Reduce # HTTP requests How? CSS is used to only show part of the composite image

27. Automatic Sprites How do we use sprites? Set them as a css background on a fixed size element Position them so only part of the larger image shows Cool. But this is really a pain Creating images Custom css for positioning

29. can help build the sprite automatically

30. Generates positioning CSS

31. Uses python + PIL to generate the sprite

32. Uses pngcrush to optimize the final image size

33. Use Case:

34. We have a folder full of icons

35. user.png, email.png, add.png

36. We want to easily put these in templates

38. Automatic Sprites 1) Configure Media bundler settings MEDIA_BUNDLES = ( {"type": "png-sprite", "name": "icon", "path": os.path.join(MEDIA_ROOT,"icons"), "url": "../icons/", "css_file": os.path.join(MEDIA_ROOT,"css","icon_sprites.css"), "files": [ “add.png”, “delete.png”, “user.png”, “delete.png”, “group.png”, ] }, )

39. Automatic Sprites 1) Configure Media bundler settings MEDIA_BUNDLES = ( {"type": "png-sprite", "name": "icon", "path": os.path.join(MEDIA_ROOT,"icons"), "url": "../icons/", "css_file": os.path.join(MEDIA_ROOT,"css","icon_sprites.css"), "files": filter(lambda x: x[-4:]== '.png', os.listdir(os.path.join(MEDIA_ROOT,"icons"))) }, )

40. Automatic Sprites 2) Bundle our media python manage.py bundle_media 3) This creates a sprite.png + sprite.css .icon {background-image: url('http://cdn.adstack.com/icons/sprites/icon110701154833.png?675d7dfaa1e1');} .icon_user {width: 16px;background-position: 0px 0px;height: 16px;} .icon_add {width: 16px;background-position: -16px 0px;height: 16px;} Etc…

41. <style> .icon {width: 16px;height: 16px;margin: 0;padding: 0;display: inline-block;position: relative;top: 2px;} </style> <div><span class=“icon icon_user”></span> Hello Evan</div> Automatic Sprites 4) We can then show icons using css Hello Evan

42. Automatic Sprites 5) We can easily write template tags to make this easier #front_end_tags.py from django import template register = template.Library() @register.inclusion_tag("common/front_end/icon.html") def icon(icon_name): return locals() {# common/front_end/icon.html #} <span class="icon icon_{{ icon_name }}"></span> 6) Now it’s a bit easier to develop <div> {% icon "user" %} Hello Evan</div>

43. Automation Fabric Deploy Script from fabric.api import * defcdn_deploy(): run('python manage.py bundle_media') run('python manage.py collectstatic --noinput') run('python manage.py compress') fab cdn_deploy

44. References django.contrib.staticfiles https://docs.djangoproject.com/en/dev/howto/static-files/ Boto http://code.google.com/p/boto/ Fabric http://docs.fabfile.org/en/1.1.1/index.html django_compressor http://code.google.com/p/django-compressor/ Boto http://code.google.com/p/boto/ django_storages https://bitbucket.org/david/django-storages/wiki/Home django_media_bundler https://github.com/fabiocorneti/django-media-bundler Pngcrush http://pmt.sourceforge.net/pngcrush/ YUI compressor http://developer.yahoo.com/yui/compressor/

45. Questions? Evan Reiser evan@adstack.com