Felix Panozzo


Nginx proxy and error pages

I ran into a problem the other day while configuring error pages to a nginx vhost.

The virtual host is configured to send all requests to a proxy (a Rails application served by unicorn) except for assets and error pages.

The configuration looks something like this:

server {
  listen           443 ssl;
  server_name      …
  root             …

  location /assets {

  location / {
    try_files $uri @proxy;

  error_page 500 @error_page;

  location @error_page {
    root …
    rewrite ^(.*)$ /error_page.html break;

  location @proxy {
    proxy_pass …

A lot of the configuration has been removed for readability.

There is one issue with the configuration above, and that is that the error page will never be served by nginx. The default behaviour of nginx is once a request has been passed to a proxy (in this case everything that isn't under /assets) it will return whatever the proxy returns. This goes for error responses as well, i.e if the proxy responds with a HTTP status code of 500 nginx will happely pass that along to the client.

What you need here is a directive from the nginx HTTP proxy module called proxy_intercept_errors, which will intercept all responses with codes greater then or equal to 400. If no error directive matching the response code exists, the response from the proxy will be served.

Add proxy_intercept_errors, reload nginx and it will serve the error page.

server {
  listen                    443 ssl;
  server_name               …
  root                      …
  proxy intercept errors    on;


Dropbox database backup script

A couple of weeks ago I stumbled over a Dropbox bash script which makes the task of writing scripts that interact with Dropbox trivial!

What I ended up with was a simple PostgreSQL backup script for a (another) blog that I'm hosting.

To make it work, download the dropbox_uploader.sh and run it. It will prompt you and help you setup your Dropbox account to work with the script.

Then create a new bash script file containing the code below and alter it for your setup:

#!/usr/bin/env bash # Create a dumpfile with todays date (YYYY-MM-DD)
FILENAME="NAME_OF_DUMP_$(date +%Y-%m-%d).sql" DATABASE= some_database

./dropbox_uploader.sh upload $FILENAME

Finally add the script as a cron entry. I decided to run it every day at 03:00 (AM). $ sudo nano /etc/cron.allow # Add your username to this file $ crontab -e Add something like this to crontab: 0 3 * * 1 /path/to/script >/dev/null 2>&1

The >/dev/null 2>&1 parts redirects output from the script to /dev/null or else crontab will try to e-mail it to you.

This could do with some added finesse like removing old backups or else your Dropbox can get pretty crowded if you have a large database.


Another note regarding :empty

Today while working on a Backbone powered application at work I tried to select an element with the CSS3 :empty selector without luck.

The answer was inside the EJS-template. When we rendered the view I couldn't understand why the styles wasn't applied correctly. After some investigation I was finally able to solve the issue by removing the line break inside the element.

The thing is that for a HTML element to be targeted by :empty it needs to be completely empty, line breaks are considered content! It makes sense but can be annoying if you don't know about it.


CSS3 :empty selector for sidebars

Last week I found I neat use of the :empty CSS3 selector to easily style elements that are next to elements that sometimes are empty.

During the week we've implemented a lot of design work for our new Backbone powered application at work. The application has a couple of views, with a tabbed navigation. The layout contains of a left-oriented sidebar and a main container for main content. Some views take use of the sidebar and fill it with data while others don't.

By using the :empty selector we were able to adjust the right margin of the main content container depending on if we had any data in the sidebar or not. The container needs a margin since we are absolute positioning the sidebar to make sure it takes up the full vertical space in the viewport.

The selector we use looks like this:

.sidebar:empty + #content {
  /* Rules that should apply to the
      main content container when
      the sidebar is empty go here

What the selector actually does is selecting elements with the id content that follow an empty element with the class sidebar. The '+' is called the adjacent sibling selector, read more here. Inside this block we are able to apply rules to the #content element, i.e its margin-left should not make room for the sidebar.

The caveat is that :empty is not supported in Internet Explorer versions below 9, read more about support at www.caniuse.com. Lucky for us, this application is not open to the public and therefore we are able to require users to use IE9+ or other modern browsers.


sudo blog

Today is sunday and I'm getting this blog thing going. I'll write posts mostly about technical topics that interest me, things that strikes me at work or other inspiring things.

I am a passionate programmer, read more about me here.

See you on the internet.