Space and Quotes: Behind the Scenes

Posted on February 16, 2014

I introduced as a small coding exercise in Python and Flask.

The site can be described as a back-end driven quote-on-a-space-background generator. It’s pretty dynamic without relying on JavaScript. That is, while I do load some JavaScript, this is only for visitor stats – you get the same exact experience whether  you have JavaScript enabled in your browser or not.

Visiting the main page generates a new URL (so you can save it or share it) with a quote and a background. The “New quote” link actually takes you back to the main page, which in turn generates a new URL and so on. Reloading the page changes the background image. This adds a little bit of a serendipity as you can share a page with a quote and every visitor will see a different background. Pretty neat.

I’m also using a little CSS hack/trick to handle image preloading. My implementation is a bit more clean: I added empty paragraphs right before the end of body. I’m using an @media rule to only load the background images for larger screens (to avoid preloading on mobile). Furthermore, I am reading the user agent string on the back end to hide those empty paragraphs so that they don’t even show up when you’re visiting the site on a phone.

The “feminist twist” I mentioned in the previous post refers to the fact that a vast majority of the quotes are by women. The quotes are not necessarily feminist themselves though. It was a bit of a challenge to find good quotes that would match the mood of the site (anything political just looked kind of funny with an image of a galaxy in the background). If anyone has any suggestions for more good quotes that would go with the mood of the site, let me know.