blessfrey-bottle/vps/diary/entries/201015

<!--201224,200806-->
<h1>making of blessfrey.me</h1>
october 15, 2020<br>
#bottle #css #html #simpletemplate #webdesign #webdev<br>
<br>
blessfrey.me is a personal website I use to showcase projects + blog my process. I originally wrote it in PHP, but now it's written in <a href="https://bottlepy.org/docs/dev/">Bottle</a>, a Python web framework. <br>
<br>
<br>
<h2>why not use a premade blogging platform like WordPress? </h2><br>
blessfrey.me's needs are fairly simple - just some static pages and a blog page. Generalized blogging platforms are overkill. I don't need support for multiple users, localization, e-commerce, and so on. Unused features only bog down the website, potentially contributing to poor performance + security vulnerabilities. <br>
<br>
Also, it's just fun to write my own. I'm learning a lot as I take my website from initial sketches, to Hello World, to various prototypes, to something polished enough to show my friends. Also, since it can be considered a programming portfolio, it just makes sense that it itself should be something I programmed. <br>
<br>
<br>
<h2>why Bottle? </h2><br>
I originally wrote blessfrey.me in PHP. I switched to Bottle after looking for a templating engine. Bottle comes with SimpleTemplate and can do everything PHP can do but faster + with less verbosity. Plus, you get to write in Python, which is always fun. <br>
<br>
<br>
<h2>how does blessfrey.me work? </h2><br>
<h3>SimpleTemplate </h3><br>
Instead of a static collection of HTML pages on my server, blessfrey.me's pages are constructed from SimpleTemplate templates and filled in using a Bottle script upon request. <br>
<br>
Every page uses the frame template below, so the basic skeleton is consistent and code for repetitive elements only has to exist in one place. Each page's content is made unique by bringing in a different template as <code>{{!base}}</code>. (Double curly brackets refer to variables, and exclamation marks disable escaping.) <br>
<br><center>
<img src="/static/img/ent/blessfrey_website_alltemplate.png" alt="(image: basic template code.)"><br>
</center>
(The code can be found on <a href="https://pastebin.com/mQuGX3Xa">Pastebin</a>.) <br>
<br>
The header template below (brought in at <code>% include('header.tpl')</code>) has some variables, too, which are supplied by the Bottle script. If Bottle doesn't provide a title, it defaults to 'blessfrey.me.' Variables can also be used in paths and URLs.  <br>
<br><center>
<img src="/static/img/ent/blessfrey_website_headertemplate.png" alt="(image: header template code.)" width="500" height="54"><br>
</center>
(The code can be found on <a href="https://pastebin.com/JcEU4xTm">Pastebin</a>.) <br>
<br>
You can insert Python code into the templates for dynamic pages. Below is an excerpt of the template for the diary page. This code fills the page with diary entry previews using a for loop. Not shown is the first line <code>% rebase('frame.tpl')</code>, which tells SimpleTemplate to insert this content at the <code>{{!base}}</code> variable in the frame template. <br>
<br><center>
<img src="/static/img/ent/blessfrey_website_snippettemplate.png" alt="(image: diary snippet code from diary template.)" width="500" height="401"><br>
</center>
(The code can be found on <a href="https://pastebin.com/ckEj9Bf2">Pastebin</a>.) <br>
<br>
The Bottle script sends the max number of snippets per page (the <code>limit</code>) and a list of lists containing all the diary snippets. It receives the page number from the URL. For the snippets that will appear on the given page, it converts the list data into HTML code to be displayed in the browser. <br>
<br>
<br>
<h3>Bottle </h3><br>
Bottle takes URLs and generates the corresponding web page upon request. Each URL is tied to a method, which returns a template and a dictionary of data to be used in the template. Since Bottle is a Python framework, you have access to all the Python libraries you need. <br>
<br><center>
<img src="/static/img/ent/blessfrey_website_diaryscript.png" alt="(image: Bottle script excerpt for diary routes.)" width="500" height="288"><br>
</center>
(The code can be found on <a href="https://pastebin.com/Bf96F9Ha">Pastebin</a>.) <br>
<br>
This is what the methods for specific routes look like. So every time you go to blessfrey.me/diary, one of the above methods is called, depending on whether also you supplied an integer. To generate the page content, it calls a lot of Python functions to find my diary entries, convert them into previews for the snippets section + headlines for the sidebar, and get the current time for the footer. <br>
<br>
<br>
<br>
<h3>CSS </h3><br>
The website is styled using CSS, heavily relying on the CSS Grid and a bit of Flexbox. CSS Grids can be used inside CSS Grids, so my pages are generally blocked out, with smaller internal grids managing specific content. <br>
<br><center>
<img src="/static/img/ent/blessfrey_website_cssgrid.png" alt="(image: CSS Grid traced over screenshot of projects page.)" width="500" height="491"><br>
</center>
<br>
The projects page is an example of nested grids. Almost every page uses the yellow general layout. The content unique to the projects page is mapped out in green, with a section for the header, featured projects, and other projects. The other projects use a 2-column grid in blue to evenly space out all the little thumbnails. <br>
<br>
The CSS code for project's general grid + the nested unfeatured grid are shown below.<br>
<br><center>
<img src="/static/img/ent/blessfrey_website_projectcss.png" alt="(image: projects css code.)"><br>
</center>
(The code can be found on <a href="https://pastebin.com/pVgkmT5k">Pastebin</a>, but you can always see a web page's CSS by right-clicking and viewing the source.) <br>
<br>