proofreading
This commit is contained in:
+11
-12
@@ -1,26 +1,23 @@
|
||||
<!--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>
|
||||
#bottle #css #html #simpletemplate #webdesign #webdevelopment<br>
|
||||
<br>
|
||||
Blessfrey.me is a personal website I use to showcase projects and blog my process. It was originally written in PHP, but now it uses <a href="https://bottlepy.org/docs/dev/">Bottle</a>, a Python web framework. <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>
|
||||
Blessfrey.me's needs are fairly simple - some static pages and a blog page. Generalized blogging platforms are overkill for my purposes. I don't need support for multiple authors, comments, localization, e-commerce, and so on. Unused features bog down the website at best and contribute to security vulnerabilities at worst. <br>
|
||||
<br>
|
||||
Also, it's fun to write my own platform. 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. Regardless, since it can be considered my programming portfolio, it makes sense that it itself should be something I programmed. <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>
|
||||
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 and with less verbosity. Plus, I get to write in Python, a much more enjoyable language. <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>
|
||||
Instead of existing as a static collection of HTML pages on my server, Blessfrey.me's pages are constructed upon request by the website's Bottle script from SimpleTemplate templates. <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>
|
||||
Every page uses the frame template pictured below, so the basic skeleton is consistent without requiring copy-pasted code. Each page is individualize through bringing in a new template within <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>
|
||||
@@ -48,7 +45,7 @@ Bottle takes URLs and generates the corresponding web page upon request. Each UR
|
||||
</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>
|
||||
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 and headlines for the sidebar, and get the current time for the footer. <br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
@@ -60,9 +57,11 @@ The website is styled using CSS, heavily relying on the CSS Grid and a bit of Fl
|
||||
<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>
|
||||
The CSS code for project's general grid and 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>
|
||||
Last updated June 8, 2021 <br>
|
||||
<br>
|
||||
|
||||
Reference in New Issue
Block a user