Light profiling with django-debug-toolbar 07 Jan 2015

Was recently coding like a monkey until I started seeing some performance issues on my dashboard. Once loaded with real data, things start to slow down to a crawl. The dashboard gets its data from a few API endpoints powered with django-rest-framework.

After enabling django-debug-toolbar here is what I am looking at:

Using django-debug-toolbar

Yes, 2000 milliseconds and 190-some queries. Deeply-nested serializers will do that to you… On a closer look, I see many very similar queries:

So many queries...

I decide to drill down to one of the nested serializers (you have to start someplace, right?) since those queries are directly related. Seems like there is one query for each ForeignKey.

Peek at nested serializer

How to cut down the number of queries? Easy. Where possible you can use select_related or prefetch_related. In my use case, prefetch_related makes more sense since I have a nested serializer that could leverage having the whole related object.

You can see that the number of queries is reduced, and the presence of WHERE in the last query. However something else is eating up some of the time.

Using prefetch_related

What is eating up the query time is an inefficient query. I could have used the EXPL. (explain query) button, but I know exactly what is happening: my custom GenericForeignKey is based on fields that are not indexed properly.

Just need to add db_index=True and get the sql with ./manage.py sqlall.

SQL CREATE INDEX `testruns_keyvalueitem_37ef4eb4` ON `testruns_keyvalueitem` (`content_type_id`);

Instant gratification:

Using db_index

That’s it for now.

Chair mounted jousting and inotify... 19 Nov 2014

chair mounted jousting (xkcd)

credit: xkcd http://xkcd.com/303/

Compiling takes a long time

  • Maybe you are using make.
  • Maybe make is polling the filesystem.
  • Maybe you have too many files and too many subdirectories.

I was recently reviewing some articles about build wars and trying to figure out what makes a good and efficient build system. The claim was that using gulp you have streams and you pipe them all together and the build becomes very efficient. That’s one aspect. Both grunt and gulp support a watch method. Instant feedback is great to have to become more productivity and most sought after. In order to get instant feedback you need to be able to detect changes to your files and be able to perform the minimum amount of work that is required. Why clean objects that are still perfectly valid? Why run make clean at all?

Nice and fancy, but are the tools that I use daily harnessing that power?

Django has runserver

At work, I use django in some of the projects. Here is my favorite command:

./manage.py runserver

I have become fond of the autoreload feature. If you look at the django.utils.autoreload code, you will see that it tries to use inotify if it is available.

inotify

from Wikipedia:

Inotify (inode notify) is a Linux kernel subsystem that acts to extend filesystems to notice changes to the filesystem, and report those changes to applications. It replaces an earlier facility, dnotify, which had similar goals.

In other words, rather than polling the filesystem to check what new changes came in, the kernel subsystem notifies you. If you have a daemon running for your compile job, it translates in some time spent walking a tree up-front; but a net effect that it does not need to keep doing that each time; later updates are handled more efficiently.

gulp.watch

With gulp (a build streaming process - written in javascript) allows you to use gulp.watch which monitors file changes and runs the callback functions you provide.

However, gulp.watch is provided by vinyl-fs which itself re-exports watch from glob-watcher, which in turns uses gaze.

grunt-contrib-watch

With grunt you can leverage the grunt-contrib-watch plugin which allows you to monitor the file changes.

Just as gulp.watch this also leverages gaze.

gaze

https://github.com/shama/gaze:

A globbing fs.watch wrapper built from the best parts of other fine watch libs. Compatible with Node.js 0.10/0.8, Windows, OSX and Linux.

gaze

Here is a sample from the documentation:

Back to make

I wanted to search if make was able to run as a daemon and use inotify. This is what I found after a bit of googling and searching stackoverflow.

supplementing make

Possibilities are to use tools / libraries and teach make about them. These are the contenders…

inotify-tools

quote from the inotify-tools github page:

[inotify-tools] is a package of some commandline utilities relating to inotify.

The general purpose of this package is to allow inotify’s features to be used from within shell scripts.

fswatch

quote from the fswatch github page:

A cross-platform file change monitor with multiple backends: Apple OS X File System Events API, *BSD kqueue, Linux inotify and a stat-based backend.

make alternatives using inotify

If make does not support inotify there are some known alternatives that do. It may be tedious to port the Makefiles though; which is why I would look into making make better rather than rip-and-replace with a different solution.

tup

What is tup?

Tup is a file-based build system for Linux, OSX, and Windows. It inputs a list of file changes and a directed acyclic graph (DAG), then processes the DAG to execute the appropriate commands required to update dependent files. Updates are performed with very little overhead since tup implements powerful build algorithms to avoid doing unnecessary work. This means you can stay focused on your project rather than on your build system.

After previous discoveries, I tried to look up build systems that leverage inotify; I found tup. The website publishes a comparison between make and tup.

Choosing a license 25 Oct 2014

Today I stumbled on http://choosealicense.com/, a slick interface for choosing a license.

To quote the website:

Choosing an OSS license doesn’t need to be scary

Here is what the page looks like:

choosealicense.com screenshot

All-in-all it is a great tool for the non-legalese in addition to the popular http://opensource.org/licenses page.

Testing your GitHub project. 25 Oct 2014

Continuous integration is something I value a lot in software projects. If you are already hosting your code on GitHub, for public or private repositories, then you can leverage a lot of tools available in the ecosystem.

Travis-CI

Let me just quote their README:

Travis CI is a hosted continuous integration and deployment system. There are two versions of it, travis-ci.com for private repositories, and travis-ci.org for public repositories.

Once you enable Travis for your project, it will test all the branches for which it is enabled as well as the pull requests. Pure glittering awesome. Plus, if you look at their pricing, it is free for open source projects; … awesomeness squared. Head over to the docs, and get started.

Why?

Having some kind of metric to check that a commit is good or bad is useful. There is no point in doing an automatic merge of a commit that will cause tests to fail. Instead, it is smarter to apply changes locally, fix them and only then merge them.

E.g. GitHub shows Travis commit status:

testing pull requests with Travis

That is a pretty neat integration with GitHub; when Travis tests your GitHub changes, it will then notify GitHub of your commit status (more info: commit status API).

Adding a badge to your README.md

Once your project is enabled, then you can also add the badge in your project’s README.md so it will show on the project page (or GitHub project pages). This will let your users (end-users or library consumers) know how everything is looking; and collaborators that they may want to spend some time fixing the branch.

E.g. xmlrunner build status: xmlrunner build status

Enabling Travis for your project

  1. review the documentation.
  2. go to the profile page.
  3. profit.

enabling Travis for xmlrunner

Adding a .travis.yml configuration

  1. review the documentation.
  2. add a .travis.yml file.
  3. profit.

Here is a minimalist configuration for testing a python project using tox, which I will cover in the next section.

Tox

Let me quote the tox doc:

tox aims to automate and standardize testing in Python. It is part of a larger vision of easing the packaging, testing and release process of Python software.

Two-liner example

Let’s start with a very simple example that involves letting setuptools run the testsuite (setuptools doc):

Testing multiple python versions

Let’s rewind for a bit… What is tox?.

Tox as is a generic virtualenv management and test command line tool you can use for:

  • checking your package installs correctly with different Python versions and interpreters
  • running your tests in each of the environments, configuring your test tool of choice
  • acting as a frontend to Continuous Integration servers, greatly reducing boilerplate and merging CI and shell-based testing.

So would that mean I can test python 2.6, 2.7, and 3.3? Yes.

fontawesome cheatsheet 23 Sep 2014

FontAwesome is just great! Here are the html entities used for the glyphs.

  • fa-glass
    = 
  • fa-music
    = 
  • fa-search
    = 
  • fa-envelope-o
    = 
  • fa-heart
    = 
  • fa-star
    = 
  • fa-star-o
    = 
  • fa-user
    = 
  • fa-film
    = 
  • fa-th-large
    = 
  • fa-th
    = 
  • fa-th-list
    = 
  • fa-check
    = 
  • fa-remove
    = 
  • fa-close
    = 
  • fa-times
    = 
  • fa-search-plus
    = 
  • fa-search-minus
    = 
  • fa-power-off
    = 
  • fa-signal
    = 
  • fa-gear
    = 
  • fa-cog
    = 
  • fa-trash-o
    = 
  • fa-home
    = 
  • fa-file-o
    = 
  • fa-clock-o
    = 
  • fa-road
    = 
  • fa-download
    = 
  • fa-arrow-circle-o-down
    = 
  • fa-arrow-circle-o-up
    = 
  • fa-inbox
    = 
  • fa-play-circle-o
    = 
  • fa-rotate-right
    = 
  • fa-repeat
    = 
  • fa-refresh
    = 
  • fa-list-alt
    = 
  • fa-lock
    = 
  • fa-flag
    = 
  • fa-headphones
    = 
  • fa-volume-off
    = 
  • fa-volume-down
    = 
  • fa-volume-up
    = 
  • fa-qrcode
    = 
  • fa-barcode
    = 
  • fa-tag
    = 
  • fa-tags
    = 
  • fa-book
    = 
  • fa-bookmark
    = 
  • fa-print
    = 
  • fa-camera
    = 
  • fa-font
    = 
  • fa-bold
    = 
  • fa-italic
    = 
  • fa-text-height
    = 
  • fa-text-width
    = 
  • fa-align-left
    = 
  • fa-align-center
    = 
  • fa-align-right
    = 
  • fa-align-justify
    = 
  • fa-list
    = 
  • fa-dedent
    = 
  • fa-outdent
    = 
  • fa-indent
    = 
  • fa-video-camera
    = 
  • fa-photo
    = 
  • fa-image
    = 
  • fa-picture-o
    = 
  • fa-pencil
    = 
  • fa-map-marker
    = 
  • fa-adjust
    = 
  • fa-tint
    = 
  • fa-edit
    = 
  • fa-pencil-square-o
    = 
  • fa-share-square-o
    = 
  • fa-check-square-o
    = 
  • fa-arrows
    = 
  • fa-step-backward
    = 
  • fa-fast-backward
    = 
  • fa-backward
    = 
  • fa-play
    = 
  • fa-pause
    = 
  • fa-stop
    = 
  • fa-forward
    = 
  • fa-fast-forward
    = 
  • fa-step-forward
    = 
  • fa-eject
    = 
  • fa-chevron-left
    = 
  • fa-chevron-right
    = 
  • fa-plus-circle
    = 
  • fa-minus-circle
    = 
  • fa-times-circle
    = 
  • fa-check-circle
    = 
  • fa-question-circle
    = 
  • fa-info-circle
    = 
  • fa-crosshairs
    = 
  • fa-times-circle-o
    = 
  • fa-check-circle-o
    = 
  • fa-ban
    = 
  • fa-arrow-left
    = 
  • fa-arrow-right
    = 
  • fa-arrow-up
    = 
  • fa-arrow-down
    = 
  • fa-mail-forward
    = 
  • fa-share
    = 
  • fa-expand
    = 
  • fa-compress
    = 
  • fa-plus
    = 
  • fa-minus
    = 
  • fa-asterisk
    = 
  • fa-exclamation-circle
    = 
  • fa-gift
    = 
  • fa-leaf
    = 
  • fa-fire
    = 
  • fa-eye
    = 
  • fa-eye-slash
    = 
  • fa-warning
    = 
  • fa-exclamation-triangle
    = 
  • fa-plane
    = 
  • fa-calendar
    = 
  • fa-random
    = 
  • fa-comment
    = 
  • fa-magnet
    = 
  • fa-chevron-up
    = 
  • fa-chevron-down
    = 
  • fa-retweet
    = 
  • fa-shopping-cart
    = 
  • fa-folder
    = 
  • fa-folder-open
    = 
  • fa-arrows-v
    = 
  • fa-arrows-h
    = 
  • fa-bar-chart-o
    = 
  • fa-bar-chart
    = 
  • fa-twitter-square
    = 
  • fa-facebook-square
    = 
  • fa-camera-retro
    = 
  • fa-key
    = 
  • fa-gears
    = 
  • fa-cogs
    = 
  • fa-comments
    = 
  • fa-thumbs-o-up
    = 
  • fa-thumbs-o-down
    = 
  • fa-star-half
    = 
  • fa-heart-o
    = 
  • fa-sign-out
    = 
  • fa-linkedin-square
    = 
  • fa-thumb-tack
    = 
  • fa-external-link
    = 
  • fa-sign-in
    = 
  • fa-trophy
    = 
  • fa-github-square
    = 
  • fa-upload
    = 
  • fa-lemon-o
    = 
  • fa-phone
    = 
  • fa-square-o
    = 
  • fa-bookmark-o
    = 
  • fa-phone-square
    = 
  • fa-twitter
    = 
  • fa-facebook
    = 
  • fa-github
    = 
  • fa-unlock
    = 
  • fa-credit-card
    = 
  • fa-rss
    = 
  • fa-hdd-o
    = 
  • fa-bullhorn
    = 
  • fa-bell
    = 
  • fa-certificate
    = 
  • fa-hand-o-right
    = 
  • fa-hand-o-left
    = 
  • fa-hand-o-up
    = 
  • fa-hand-o-down
    = 
  • fa-arrow-circle-left
    = 
  • fa-arrow-circle-right
    = 
  • fa-arrow-circle-up
    = 
  • fa-arrow-circle-down
    = 
  • fa-globe
    = 
  • fa-wrench
    = 
  • fa-tasks
    = 
  • fa-filter
    = 
  • fa-briefcase
    = 
  • fa-arrows-alt
    = 
  • fa-group
    = 
  • fa-users
    = 
  • fa-chain
    = 
  • fa-link
    = 
  • fa-cloud
    = 
  • fa-flask
    = 
  • fa-cut
    = 
  • fa-scissors
    = 
  • fa-copy
    = 
  • fa-files-o
    = 
  • fa-paperclip
    = 
  • fa-save
    = 
  • fa-floppy-o
    = 
  • fa-square
    = 
  • fa-navicon
    = 
  • fa-reorder
    = 
  • fa-bars
    = 
  • fa-list-ul
    = 
  • fa-list-ol
    = 
  • fa-strikethrough
    = 
  • fa-underline
    = 
  • fa-table
    = 
  • fa-magic
    = 
  • fa-truck
    = 
  • fa-pinterest
    = 
  • fa-pinterest-square
    = 
  • fa-google-plus-square
    = 
  • fa-google-plus
    = 
  • fa-money
    = 
  • fa-caret-down
    = 
  • fa-caret-up
    = 
  • fa-caret-left
    = 
  • fa-caret-right
    = 
  • fa-columns
    = 
  • fa-unsorted
    = 
  • fa-sort
    = 
  • fa-sort-down
    = 
  • fa-sort-desc
    = 
  • fa-sort-up
    = 
  • fa-sort-asc
    = 
  • fa-envelope
    = 
  • fa-linkedin
    = 
  • fa-rotate-left
    = 
  • fa-undo
    = 
  • fa-legal
    = 
  • fa-gavel
    = 
  • fa-dashboard
    = 
  • fa-tachometer
    = 
  • fa-comment-o
    = 
  • fa-comments-o
    = 
  • fa-flash
    = 
  • fa-bolt
    = 
  • fa-sitemap
    = 
  • fa-umbrella
    = 
  • fa-paste
    = 
  • fa-clipboard
    = 
  • fa-lightbulb-o
    = 
  • fa-exchange
    = 
  • fa-cloud-download
    = 
  • fa-cloud-upload
    = 
  • fa-user-md
    = 
  • fa-stethoscope
    = 
  • fa-suitcase
    = 
  • fa-bell-o
    = 
  • fa-coffee
    = 
  • fa-cutlery
    = 
  • fa-file-text-o
    = 
  • fa-building-o
    = 
  • fa-hospital-o
    = 
  • fa-ambulance
    = 
  • fa-medkit
    = 
  • fa-fighter-jet
    = 
  • fa-beer
    = 
  • fa-h-square
    = 
  • fa-plus-square
    = 
  • fa-angle-double-left
    = 
  • fa-angle-double-right
    = 
  • fa-angle-double-up
    = 
  • fa-angle-double-down
    = 
  • fa-angle-left
    = 
  • fa-angle-right
    = 
  • fa-angle-up
    = 
  • fa-angle-down
    = 
  • fa-desktop
    = 
  • fa-laptop
    = 
  • fa-tablet
    = 
  • fa-mobile-phone
    = 
  • fa-mobile
    = 
  • fa-circle-o
    = 
  • fa-quote-left
    = 
  • fa-quote-right
    = 
  • fa-spinner
    = 
  • fa-circle
    = 
  • fa-mail-reply
    = 
  • fa-reply
    = 
  • fa-github-alt
    = 
  • fa-folder-o
    = 
  • fa-folder-open-o
    = 
  • fa-smile-o
    = 
  • fa-frown-o
    = 
  • fa-meh-o
    = 
  • fa-gamepad
    = 
  • fa-keyboard-o
    = 
  • fa-flag-o
    = 
  • fa-flag-checkered
    = 
  • fa-terminal
    = 
  • fa-code
    = 
  • fa-mail-reply-all
    = 
  • fa-reply-all
    = 
  • fa-star-half-empty
    = 
  • fa-star-half-full
    = 
  • fa-star-half-o
    = 
  • fa-location-arrow
    = 
  • fa-crop
    = 
  • fa-code-fork
    = 
  • fa-unlink
    = 
  • fa-chain-broken
    = 
  • fa-question
    = 
  • fa-info
    = 
  • fa-exclamation
    = 
  • fa-superscript
    = 
  • fa-subscript
    = 
  • fa-eraser
    = 
  • fa-puzzle-piece
    = 
  • fa-microphone
    = 
  • fa-microphone-slash
    = 
  • fa-shield
    = 
  • fa-calendar-o
    = 
  • fa-fire-extinguisher
    = 
  • fa-rocket
    = 
  • fa-maxcdn
    = 
  • fa-chevron-circle-left
    = 
  • fa-chevron-circle-right
    = 
  • fa-chevron-circle-up
    = 
  • fa-chevron-circle-down
    = 
  • fa-html5
    = 
  • fa-css3
    = 
  • fa-anchor
    = 
  • fa-unlock-alt
    = 
  • fa-bullseye
    = 
  • fa-ellipsis-h
    = 
  • fa-ellipsis-v
    = 
  • fa-rss-square
    = 
  • fa-play-circle
    = 
  • fa-ticket
    = 
  • fa-minus-square
    = 
  • fa-minus-square-o
    = 
  • fa-level-up
    = 
  • fa-level-down
    = 
  • fa-check-square
    = 
  • fa-pencil-square
    = 
  • fa-external-link-square
    = 
  • fa-share-square
    = 
  • fa-compass
    = 
  • fa-toggle-down
    = 
  • fa-caret-square-o-down
    = 
  • fa-toggle-up
    = 
  • fa-caret-square-o-up
    = 
  • fa-toggle-right
    = 
  • fa-caret-square-o-right
    = 
  • fa-euro
    = 
  • fa-eur
    = 
  • fa-gbp
    = 
  • fa-dollar
    = 
  • fa-usd
    = 
  • fa-rupee
    = 
  • fa-inr
    = 
  • fa-cny
    = 
  • fa-rmb
    = 
  • fa-yen
    = 
  • fa-jpy
    = 
  • fa-ruble
    = 
  • fa-rouble
    = 
  • fa-rub
    = 
  • fa-won
    = 
  • fa-krw
    = 
  • fa-bitcoin
    = 
  • fa-btc
    = 
  • fa-file
    = 
  • fa-file-text
    = 
  • fa-sort-alpha-asc
    = 
  • fa-sort-alpha-desc
    = 
  • fa-sort-amount-asc
    = 
  • fa-sort-amount-desc
    = 
  • fa-sort-numeric-asc
    = 
  • fa-sort-numeric-desc
    = 
  • fa-thumbs-up
    = 
  • fa-thumbs-down
    = 
  • fa-youtube-square
    = 
  • fa-youtube
    = 
  • fa-xing
    = 
  • fa-xing-square
    = 
  • fa-youtube-play
    = 
  • fa-dropbox
    = 
  • fa-stack-overflow
    = 
  • fa-instagram
    = 
  • fa-flickr
    = 
  • fa-adn
    = 
  • fa-bitbucket
    = 
  • fa-bitbucket-square
    = 
  • fa-tumblr
    = 
  • fa-tumblr-square
    = 
  • fa-long-arrow-down
    = 
  • fa-long-arrow-up
    = 
  • fa-long-arrow-left
    = 
  • fa-long-arrow-right
    = 
  • fa-apple
    = 
  • fa-windows
    = 
  • fa-android
    = 
  • fa-linux
    = 
  • fa-dribbble
    = 
  • fa-skype
    = 
  • fa-foursquare
    = 
  • fa-trello
    = 
  • fa-female
    = 
  • fa-male
    = 
  • fa-gittip
    = 
  • fa-sun-o
    = 
  • fa-moon-o
    = 
  • fa-archive
    = 
  • fa-bug
    = 
  • fa-vk
    = 
  • fa-weibo
    = 
  • fa-renren
    = 
  • fa-pagelines
    = 
  • fa-stack-exchange
    = 
  • fa-arrow-circle-o-right
    = 
  • fa-arrow-circle-o-left
    = 
  • fa-toggle-left
    = 
  • fa-caret-square-o-left
    = 
  • fa-dot-circle-o
    = 
  • fa-wheelchair
    = 
  • fa-vimeo-square
    = 
  • fa-turkish-lira
    = 
  • fa-try
    = 
  • fa-plus-square-o
    = 
  • fa-space-shuttle
    = 
  • fa-slack
    = 
  • fa-envelope-square
    = 
  • fa-wordpress
    = 
  • fa-openid
    = 
  • fa-institution
    = 
  • fa-bank
    = 
  • fa-university
    = 
  • fa-mortar-board
    = 
  • fa-graduation-cap
    = 
  • fa-yahoo
    = 
  • fa-google
    = 
  • fa-reddit
    = 
  • fa-reddit-square
    = 
  • fa-stumbleupon-circle
    = 
  • fa-stumbleupon
    = 
  • fa-delicious
    = 
  • fa-digg
    = 
  • fa-pied-piper
    = 
  • fa-pied-piper-alt
    = 
  • fa-drupal
    = 
  • fa-joomla
    = 
  • fa-language
    = 
  • fa-fax
    = 
  • fa-building
    = 
  • fa-child
    = 
  • fa-paw
    = 
  • fa-spoon
    = 
  • fa-cube
    = 
  • fa-cubes
    = 
  • fa-behance
    = 
  • fa-behance-square
    = 
  • fa-steam
    = 
  • fa-steam-square
    = 
  • fa-recycle
    = 
  • fa-automobile
    = 
  • fa-car
    = 
  • fa-cab
    = 
  • fa-taxi
    = 
  • fa-tree
    = 
  • fa-spotify
    = 
  • fa-deviantart
    = 
  • fa-soundcloud
    = 
  • fa-database
    = 
  • fa-file-pdf-o
    = 
  • fa-file-word-o
    = 
  • fa-file-excel-o
    = 
  • fa-file-powerpoint-o
    = 
  • fa-file-photo-o
    = 
  • fa-file-picture-o
    = 
  • fa-file-image-o
    = 
  • fa-file-zip-o
    = 
  • fa-file-archive-o
    = 
  • fa-file-sound-o
    = 
  • fa-file-audio-o
    = 
  • fa-file-movie-o
    = 
  • fa-file-video-o
    = 
  • fa-file-code-o
    = 
  • fa-vine
    = 
  • fa-codepen
    = 
  • fa-jsfiddle
    = 
  • fa-life-bouy
    = 
  • fa-life-buoy
    = 
  • fa-life-saver
    = 
  • fa-support
    = 
  • fa-life-ring
    = 
  • fa-circle-o-notch
    = 
  • fa-ra
    = 
  • fa-rebel
    = 
  • fa-ge
    = 
  • fa-empire
    = 
  • fa-git-square
    = 
  • fa-git
    = 
  • fa-hacker-news
    = 
  • fa-tencent-weibo
    = 
  • fa-qq
    = 
  • fa-wechat
    = 
  • fa-weixin
    = 
  • fa-send
    = 
  • fa-paper-plane
    = 
  • fa-send-o
    = 
  • fa-paper-plane-o
    = 
  • fa-history
    = 
  • fa-circle-thin
    = 
  • fa-header
    = 
  • fa-paragraph
    = 
  • fa-sliders
    = 
  • fa-share-alt
    = 
  • fa-share-alt-square
    = 
  • fa-bomb
    = 
  • fa-soccer-ball-o
    = 
  • fa-futbol-o
    = 
  • fa-tty
    = 
  • fa-binoculars
    = 
  • fa-plug
    = 
  • fa-slideshare
    = 
  • fa-twitch
    = 
  • fa-yelp
    = 
  • fa-newspaper-o
    = 
  • fa-wifi
    = 
  • fa-calculator
    = 
  • fa-paypal
    = 
  • fa-google-wallet
    = 
  • fa-cc-visa
    = 
  • fa-cc-mastercard
    = 
  • fa-cc-discover
    = 
  • fa-cc-amex
    = 
  • fa-cc-paypal
    = 
  • fa-cc-stripe
    = 
  • fa-bell-slash
    = 
  • fa-bell-slash-o
    = 
  • fa-trash
    = 
  • fa-copyright
    = 
  • fa-at
    = 
  • fa-eyedropper
    = 
  • fa-paint-brush
    = 
  • fa-birthday-cake
    = 
  • fa-area-chart
    = 
  • fa-pie-chart
    = 
  • fa-line-chart
    = 
  • fa-lastfm
    = 
  • fa-lastfm-square
    = 
  • fa-toggle-off
    = 
  • fa-toggle-on
    = 
  • fa-bicycle
    = 
  • fa-bus
    = 
  • fa-ioxhost
    = 
  • fa-angellist
    = 
  • fa-cc
    = 
  • fa-shekel
    = 
  • fa-sheqel
    = 
  • fa-ils
    = 
  • fa-meanpath
    = 

Why do you need html entities?

<svg width="1em" height="1em" style="border: 1px solid black">
<text dy="1em" x="0.5em"><i class="fa fa-envelope"></i></text>
</svg>

gives [], explanation: <i> is not allowed in <text> so it renders outside of SVG.

<svg width="1em" height="1em" style="border: 1px solid black">
<text dy="1em" x="0.5em"class="fa fa-envelope"></text>
</svg>

gives [], explanation: the css has a :before selector with a content, which will not work for an SVG element.

<svg width="1em" height="1em" style="border: 1px solid black">
<text dy="1em" x=".5em"><tspan class="fa">&#xf0e0;</tspan></text>
</svg>

gives [], explanation: <tspan> is allowed in <text> so it renders inside of SVG, hence the clipping.

<svg width="1em" height="1em" style="border: 1px solid black">
<foreignObject fill="blue" height="1em" width="1em" dy="1em" x=".5em"><i class="fa fa-envelope"></i></foreignObject>
</svg>

gives [], explanation: <foreignObject> allows to let the browser render an object, but it gets overlaid on top of the SVG. Also check out what happens when you zoom in/out.