I created a website called Coffee and the Word which displays a different passage from the Bible each day. It is intentionally simple and designed with readers in mind. This article describes the development of the project from idea to maintenance.
2016-11-08 Update: the site ran for the two years it had in the reading plan and is now nonexistent.
I have followed Bible Design Blog for several months and have gained an appreciation for the design of Bibles. Some time this summer, the author posted several times about Bibles designed to be read more like a narrative and less like a reference book. One such Bible is called Bibliotheca. The Kickstarter was very successful--it currently has $1.4 million pledged. When I saw the project's success, I thought that perhaps people had started caring about design aspects of the Bible.
With that in mind, I had the idea to create a website that displayed passages from the Bible which prioritized design.
I serve as a Resident Assistant at my university, and I was on call for Thanksgiving break. I had time and wanted to strengthen my front end and design skills, so I took to my Trello board of project ideas and looked for something interesting. This one fit the bill.
I found a site online that had Bible reading plans, picked on that looked good, and wrote a small Python script to parse the HTML representation of the plan, turning it into a text file. From there, it was easier to get the reading plan inserted into a SQLite database.
I don't anticipate running into legal issues over the fact that I basically stole a reading plan because I don't think this project will garner much attention.
After figuring out the passages I would be displaying each day, I turned to
actually retrieving their text. I found Crossway's ESV Bible web
service and decided to use it. I have interacted with
web services in Python before using urllib2, but wanted to try out the
Requests library. Requests is
awesome. The library made creating web requests much simpler than I remember it
being using urllib2.
Initially, the website made a request to the Bible API every time it was
accessed. Keeping this API access within a specific class later allowed me to
implement caching of the text by changing only one
class.
Caching improved my page's load time on localhost from about 400ms to around
5ms. I was pleased but not surprised by that improvement (web requests can be
expensive).
I thought about using Redis for caching (because it's fast) but decided to use SQLite because I did not want to add more dependencies. Additionally, for the purposes of this project, I was not especially concerned about performance. I still think it would be interesting to see how using Redis for caching would stack up to my current SQLite-based approach from a performance perspective.
Another option was to go through the reading plan I had stored, fetching all of the verses in advance. Then, I wouldn't have to make any requests to the Bible API in the future. There were a few reasons I didn't do this:
In an attempt to polish the site, I turned my attention to branding and design.
Initially, I named the site "Just the Word," because that's what it was. I wanted to come up with something more interesting yet still simple. On a whim, I decided to make a reference to Sh*tuff Christian Girls Say and chose "Coffee and the Word." I found a coffee stain brush set online, changed a few lines of HTML, and was done (625f95c).
With the brand figured out, I turned to improving the design of the site. I tend to favor simple designs. I have very little knowledge of design, but my uneducated eye does not enjoy busy-looking pages. As an added bonus, it was way easier to make the site simple than it would have been to make it look fancy.
I tried to follow Practical Typography's Summary of Key Rules. I used TypeGenius to decide on what fonts to use. As someone with no background in graphic design, I appreciate these resources because they at least give me somewhere to start.
I had not done much with responsive web design, so I was excited to learn more. I found Google's Responsive Web Design Basics and implemented some things I learned. The most interesting thing I learned was how to apply different stylesheets based on browser size (2af6319).
I had set the coffee stain image's width to be 50% of the document's width,
which looked good until the window became wider than twice the width of the
coffee stain image. At this point, the image was stretched beyond its 500px
width, and the scaling made it look pixelated. I separated out the
background-size rules into a separate stylesheet and used a media attribute
to make those rules only apply up to a width of 1000px.
I have a server through CloudAtCost that I rent for $9 per year using a coupon code. It runs Ubuntu Server 14.04.1 LTS. I'm using a free domain name on the .tk TLD.
Deploying the application turned out to be more difficult than I anticipated. I hadn't deployed a Flask app, so I read and tried to follow multiple guides with limited success. Eventually, I had luck following this guide, which used Supervisor, Nginx, and Gunicorn on Ubuntu.
I then set up dploy.io to be able to easily deploy future changes. The service will copy over changed files and then restart the app with the press of a button; I find it convenient.
I searched for a website monitoring service and found monitor.us. It was easy enough to set up, and I get daily emails with a summary of both uptime and response times.
I made a simple website which displays a different Bible passage every day. I gained experience with responsive web design, deployment, and monitoring. Some technologies used include:
Thanks for reading! If you have any feedback or want to get in touch, email me at sgt at this domain.