Snake_Bytes #6: Front End Templating

Here at PokitDok it’s not a stretch to say that all of our developers love Python. While most of our Snake_Bytes have touched on using python in a more theoretical and technical sense, today’s Snake_Byte will focus on the real-world application of using a Python framework in production. When we wanted to get our main consumer-facing website off of a shared deployment cycle and onto a lightweight framework that would be manageable by Front End and Marketing earlier this year, we had a large task at hand.

Our old setup relied on Flask/Jinja as part of a shared repository. After some research we landed on a solution we still use today, Lektor. Lektor has syntax very similar to Jinja, which makes sense as it was made by Armin Ronacher, creator of the Flask web framework for Python.

As one of the early adopters we had some speed bumps, but several aspects really drew us to this framework, albeit with some custom set up. We nested each page in a content folder and comprised of a UTF-8 encoded text file with the .lr extension with some keys and values.

This is how to configure custom fields in the model:

This way you can enter markdown (Lektor even has a GUI for entering your markdown when you run it locally) which made this easy for quick text edits. Now, let’s get to the python!

Having partial html snippets and a default template really makes things shine. When you design new template, you just have to put {% extends "default.html" %} instead of starting from the ground up or copying and pasting. Template inheritance is invaluable.

We also love what Lektor calls "databags," either .ini or .json. The particular case above shows a for-loop using Lektor/Jinja templating to return what you can see on our careers page:

pokitdok jonathan fann lektor example 1

We use the file structure to generate our site's navigation.

This returns our unordered list nav for "solutions":
pokitdok lektor example 2

If you have an external URL you will utilize across your website, set it in your lektor project file so you can change it if you want to point at a staging server instead of at some point without rewriting every matching parent url? It’s as simple as
your_variable = ''

<a href="{{ site.db.config.PROJECT.your_variable }}/some_page">Some Page</a> would render as <a href="">Some Page</a> once you build your project (lektor build). Having variables you can utilize across your whole website can prove valuable in more ways than just avoiding static hyperlinks, but this is a great real-world example that we use for our production build to test against staging and production servers.

While not as heavily pythonic as most of our snake_bytes, hopefully it is beneficial for you to see a real-world example of python as it permeates our stack (or lack thereof in this case). Yes, we still use flask and python heavily on our other sites, but for a simple static website with a lot of content, having a shared language for templating (with all the added benefits of its GUI, <10 second deploys, etc), Lektor is a fantastic sister to Flask and a valuable asset in the Pythonic toolbelt.

About Jonathan Fann

Since October 2014, Jonathan Fann has been part of the Front End team at PokitDok. Prior to this, he worked in various capacities within the healthcare and tech realms. His mission at PokitDok is to help disrupt the healthcare industry with sleek and intuitive front end development. He also is a musician and recording artist who frequently shreds the guitar in miraculous new ways around the office.

View All Posts