tln devlog [2.1/3] – Setting up a MongoDB-backed Django application

This series of articles loosely documents design choices and implementation issues I met during the making of the tln website. I learnt a few lessons along my improvised 9-week schedule, and I thought I could share them with fellow first-timers. I guess some technical points might also be of interest to more experimented developers.

Reading tutorials

Beginning on January 9th, 2018, I spent three days swallowing HTML, CSS, JavaScript and Django quick & free tutorials from French platform OpenClassrooms. It may feel there's a stigma associated with reading 101 stuff, but this is plain and simple impostor syndrome. Everyone's got a basic right not to know everything. I find there's actually a lot of pride to find in tackling an unknown subject. There's no point fearing your own ignorance, just head to tutorials and start building the knowledge you need.

Interfacing Django with a MongoDB database

As it happens, I'd never tried reading CSS before, nor had I ever written one line of JavaScript. The need for a content management system (CMS) quickly made itself clear, though at that time I hardly grasped what models, views and controllers designated. It became much clearer during the writing of my own application. Before settling on Python-based Django, I read about Node.js frameworks and also Ruby on Rails, but eventually it felt better to just choose a framework based on the language which feels most comfortable.

Then I installed django-mongoengine to interface between Django and MongoDB. It ran fine even though I was using Django v2.0. What didn't run fine because of this recent version was Haystack, which is used by most Django search engines, so I had to drop it. (Support got merged just a few weeks ago, so maybe I'll be able to add a search field to the Critique navigation bar now!)

Once django-mongoengine was installed, by the end of the fourth day I had written all Critique views and templates. Basically I'd completed serving the right HTML content. I took a minute to digest how crazy fast that went. Maybe it would have gone even faster if I'd known my way around class-based views. I used some of them later in development, but I'm not convinced it's worth taking much time to learn about Django class-based views unless you build websites for a living.

Using JavaScript for early rendering

I'd also began writing simple JavaScript for properly animating the errances dropdown navigation bar. (The top-level bar wasn't there yet, because I was not set on the global website navigation.) It was inspired by the Nautilus website's own navigation bar. I also used JavaScript for the rendering of multiple query results in fixed-size chunks, as shown here. This modular presentation would prove quite useful when faced with different window sizes.

Finding free fonts

Before the end of the week, I could even find several hours to browse for fonts on DaFont and Font Squirrel. Most fonts available are not licensed for redistribution. It particular, this means they must not be served through a CSS @font-face reference. I'm fine messing with the Google terms of service, but I won't disrespect artists rights. Eventually I was able to make my mind on three main fonts. I'd use Alegreya for personal texts, and AlegreyaSans for more formal purposes. Both fonts were made by Juan Pablo del Peral, who works with a nice studio. Then Abuget, by khurasan, would be used for navigation bars. I also retained Soljik Dambaek, by Yosep Lee, though I ended up only using it for the tln logo of the Critique navigation bar.

Backing up with GitHub

Finally, I set up a Git repository through GitHub, then pushed my Django project online. GitHub is a free and easy way to save personal work, as long as you're okay making it public. Actually, Git is arguably the most useful cross-language tool for programmers. It's well worth taking the time to browse a tutorial if you're not already familiar with its most common features. Once you've understood the system, you can always refer to search engines to find the command you need.