Quasi-Documentation Story for XFA Genesis

Just as a brief warning, this post is going to be quite technical. I imagine this content might be dry for those of you who aren't computer science-ically inclined. For those of you who are computer science-ically inclined, I can only hope this will be useful, but know the following content is mostly for my own benefit. If you're looking to be entertained, I suggest hitting the next/previous buttons on the bottom of the screen.

Now then, I have largely finished the architecture for the XFA site. I think it is very likely that I will build more web apps in the future, so I’m going to write what I like to call a documentation story for this project. The “Quasi” prefix is there because the last time I wrote a documentation story it was incredibly long and detailed, and here I’m only really going to include important points from the project. This is going to be in mostly chronological order with respect to when I completed the various parts of the project. I should also note that this is also mostly for my benefit, and this shouldn’t be taken as a comprehensive guide.

Django:

There are five main parts of a Django web app (when you’re using Django templates): Models, Views, Urls, Templates, and Settings. I will go over each in order.

1. Models: Models are the Django python abstraction for entries in a database. They are really quite straightforward once you get the hang of it. To figure out how they work, it’s easiest to look at examples. If you want a field in a model to be optional, be sure to include null and blank kwarg options. Make sure to run manage.py makemigrations and manage.py migrate when you create or edit a model.
2. Views: This is how Django handles Url requests. Basically, you use Django’s database API to get necessary data, and then you create a context object containing information necessary to render a specific page, and then render a page using information from the context object and a template.
3. Urls: Django provides a way to create beautiful Urls. Writing Urls.py is quite straightforward, but two things are worth noting. You can include urls from different files throughout the project by using the “include” function. This is very easy. You can also create Urls that contain contextual information that is sent to Views in the form of kwargs.
4. Templates: Django provides a wonderfully easy way to make dynamic templates that render to HTML using context passed in from a particular view function or class. I will talk about two features. You can use {% block %} to create template blocks that can be included in other template files. This is a very useful functionality if you have various features of a web app that appear on each page (like the header, footer). Django allows you to use namespaced Urls in templates, which means that if something changes with the urls of a project, you don’t have to change the hrefs of all the anchor tags. This is quite good. You can also call functions of different objects from within templates.
5. Settings. This file obviously contains the settings of the project, but a couple things are worth noting. You should use a config json file or environment variables to store sensitive information about the project. This is also where you can include a list of other Django compatible web apps.

HTML / CSS:

This is really only my second web dev project, so I learned a great deal about HTML/ CSS in this project. I’m going to include points that I find valuable. Some of these are quite basic.

• Use divs to organize everything.
• Use position: absolute if you know exactly where you want the element to be located.
• If you use position: absolute, make sure the parent element has its position set to relative.
• Margins are everything. Never forget.
• To specify where something should be, margin, height, width and padding. Never forget.
• The order of margin and padding is top, right, bottom, left.
• Make sure to be mindful of cross-browser support.
• To make a transparent linear gradient not look grey on mobile, use rgba, and make the “a” value 0.01.
• Keep making websites and keep learning.

Materialize CSS:

I used the Materialize CSS framework for some of the CSS heavy lifting. Here are some important things to be done with Materialize:

• Use center-align for alignment. This is so very wonderful.
• Use container to put content in the middle of the screen. This is also so very wonderful.
• Use Rows and columns for positioning objects. A very good feature.
• The “hide-on-small-and-down” and other hide/show classes are incredibly useful for making webpages look good on mobile.

Deployment:

This was very daunting, but thanks to Corey Schafer, everything is up and working. This was my process for getting the XFA site up on the interweb.

1. Make a Linode account.
2. Create a new Linode Server. Mine runs Ubuntu 19.10. In retrospect I probably should have used Ubuntu 18.04 because its LTS, but hopefully that doesn’t bite me in the butt too hard.
3. On the server, create a new user with sudo privileges. Honestly for the next couple steps, the best way to relearn is to just rewatch Corey Schafer’s videos until you understand everything completely.
4. Set up SSH for passwordless authentication.
5. Install ufw (uncomplicated firewall).
6. Install and set up an Apache2 server. I’m a bit fan of Apache because it’s configuration files are pretty straightforward.
7. Use git to transfer files from local to server (more details below).
8. Configure Apache to work with the Django wsgi.
9. Allow http traffic from the firewall.
10. Buy a domain from a domain registry and set its namespace records according to Linode’s instructions.
11. Use Linode to configure RDNS for your domain, and in your settings.py make sure you include your domain in the list of allowed hosts. More details in Schafer’s vid.
12. Your website should be up and running by now, but it won’t be secure.
13. Use let’s encrypt and certbot to make the site secure. These instructions are on Let’s Encrypt’s website.
14. Add a section in the firewall configuration to redirect traffic from the non-www to the www site. This was causing some issues.

Setting up Git: This is super important because it allows you to develop on your local machine and easily push changes to the server. I will redirect you to this link which has much more information about this. Somethings to note about this process. Include your settings.py and your db.sqlite3 database in the .gitignore because you will have different settings for your live Django app than for your local Django app. It is also best practice for the server to have its own database. I used PostgreSQL for my live server. It’s super easy to setup and configure with Django, and Django migrations worked just as well for the Postgres as they did for Sqlite.

I think that just about covers everything. There are, of course, a ton of other nitty gritty details to figure out, but that’s how any software project goes. Once again, I’m mostly writing this as a way for me to remember the main steps for building a web app with Django. Perhaps this may be of some use to the rest of you.