|
12345 |
- title: Next Gen Static Blogging
- url: https://inoads.com/articles/2021-01-09-Next-Gen-Static-Blogging
- hash_url: 2458bbc9f86af47ffffcd1b99f19743a
-
- <date>2021-01-09</date> <author>mmackh</author><button id="accessibility" class="accessibilityToggle">Toggle Reader</button><p></p><p></p><h2>TL;DR</h2><p>Take a look at the source code of this page - I rely mostly on CSS for the rendering of this article. </p><p></p><p>The CSS property powering this article, </p><pre><code>white-space: pre-line</code></pre>, has existed since the IE8 days.<p></p><p></p><p></p><h2>Background</h2><p>My first programming exercise was to code a blog using PHP. Add text files to a folder via FTP, scan the directory and generate the HTML dynamically. How about adding an admin frontend? Or a database as a backend? All good and well, but when do you find the time to actually write your articles? </p><p></p><p>If it's one thing I learnt over the past years of coding is that simplicity is key. You don't need a lot of CSS or HTML Tags to make a page look pretty. It may not be the absolute correct way to do it, but look at the source code of this page. It's tiny!</p><p></p><p></p><p></p><h2>My Solution</h2><p>Instead of nesting </p><pre><code><div></code></pre> after <pre><code><div></code></pre> or <pre><code><p></code></pre> to create paragraphs, I stumbled upon <pre><code>white-space: pre-line</code></pre>. To quote the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space">MDN Web Docs</a> - <em>"Sequences of white space are collapsed. Lines are broken at newline characters, ..."</em> - and that is key. I use HTML tags like <pre><code><em></code></pre> or <pre><code><b></code></pre> for emphasis only.<p></p><p>Every paragraph is initiated with a newline character. The experience to writing this blog entry is very similar to using a dedicated word processor. Except you have much more control, more settings you can tweak and more visuals you can add. </p><p></p><p>A similar technology I can think of is Markdown. Except you have to run it through a parser before seeing the result. Also, different flavours produce different outputs. All rather messy for me. My workflow consists of pressing CMD+S, switching to Safari and reloading the page. What you see now is what I get.</p><p></p><p>Managing this blog is a little more involved than dynamically generating everything. The design could also be a little prettier.</p><p></p><p></p><p></p><h2>More Benefits</h2><p>The overall page size is tiny. No need for JavaScript or any other complicated backend or client-side frameworks. I can use PHP to introduce dynamic elements to the page, but that's optional. Maybe you might be inspired a little and move your blog off centralised platforms like Medium, etc. and start embracing the simplicity of creating compelling pages with very little code. Simplicity is key.</p>
|
