293 lines
20 KiB
HTML
293 lines
20 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<center>
|
||
<head>
|
||
|
||
|
||
<meta charset="utf-8">
|
||
<link rel="stylesheet" href="/static/stylesheet.css">
|
||
<title>Stefan's Blog</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<div class="menu">
|
||
<a href="/" style="text-decoration:none">Stefan Etringer's Website</a>
|
||
</div>
|
||
<style>
|
||
/* Stylesheet 1 */
|
||
body { background: #2f333d; color: #979fad; }
|
||
hr{ color: #979fad; border-color: #979fad; }
|
||
pre { background: #282c34; color: #979fad; border: 1px solid #282c34; }
|
||
code { background: #282c34; color: #979fad; }
|
||
a:hover { color: #be5046; }
|
||
details > summary { background: #282c34; }
|
||
details > summary:hover { background: #2f333d; color: #979fad; }
|
||
::selection { background: #668799; }
|
||
::-moz-selection { background: #668799; }
|
||
</style>
|
||
|
||
<hr style="width: 36ch;"/>
|
||
<div class="menu">
|
||
<a href="/about.html" style="text-decoration:none">about </a>
|
||
<a href="/contact.html" style="text-decoration:none">contact </a>
|
||
<a href="/rss.xml" style="text-decoration:none">rss </a>
|
||
<a href="https://git.stefan.works" style="text-decoration:none">git</a>
|
||
</div>
|
||
<br><br>
|
||
<p></p>
|
||
<hr/>
|
||
</center>
|
||
<p></p>
|
||
|
||
|
||
</head>
|
||
<body>
|
||
<div lang="en" class="content">
|
||
<span class="body">
|
||
<!-- 2021-06-01 -->
|
||
<style>pre { line-height: 125%; }
|
||
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
|
||
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
|
||
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
|
||
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
|
||
.codehilite .hll { background-color: #ffffcc }
|
||
.codehilite .c { color: #7F848E } /* Comment */
|
||
.codehilite .err { color: #ABB2BF } /* Error */
|
||
.codehilite .esc { color: #ABB2BF } /* Escape */
|
||
.codehilite .g { color: #ABB2BF } /* Generic */
|
||
.codehilite .k { color: #C678DD } /* Keyword */
|
||
.codehilite .l { color: #ABB2BF } /* Literal */
|
||
.codehilite .n { color: #E06C75 } /* Name */
|
||
.codehilite .o { color: #56B6C2 } /* Operator */
|
||
.codehilite .x { color: #ABB2BF } /* Other */
|
||
.codehilite .p { color: #ABB2BF } /* Punctuation */
|
||
.codehilite .ch { color: #7F848E } /* Comment.Hashbang */
|
||
.codehilite .cm { color: #7F848E } /* Comment.Multiline */
|
||
.codehilite .cp { color: #7F848E } /* Comment.Preproc */
|
||
.codehilite .cpf { color: #7F848E } /* Comment.PreprocFile */
|
||
.codehilite .c1 { color: #7F848E } /* Comment.Single */
|
||
.codehilite .cs { color: #7F848E } /* Comment.Special */
|
||
.codehilite .gd { color: #ABB2BF } /* Generic.Deleted */
|
||
.codehilite .ge { color: #ABB2BF } /* Generic.Emph */
|
||
.codehilite .ges { color: #ABB2BF } /* Generic.EmphStrong */
|
||
.codehilite .gr { color: #ABB2BF } /* Generic.Error */
|
||
.codehilite .gh { color: #ABB2BF } /* Generic.Heading */
|
||
.codehilite .gi { color: #ABB2BF } /* Generic.Inserted */
|
||
.codehilite .go { color: #ABB2BF } /* Generic.Output */
|
||
.codehilite .gp { color: #ABB2BF } /* Generic.Prompt */
|
||
.codehilite .gs { color: #ABB2BF } /* Generic.Strong */
|
||
.codehilite .gu { color: #ABB2BF } /* Generic.Subheading */
|
||
.codehilite .gt { color: #ABB2BF } /* Generic.Traceback */
|
||
.codehilite .kc { color: #E5C07B } /* Keyword.Constant */
|
||
.codehilite .kd { color: #C678DD } /* Keyword.Declaration */
|
||
.codehilite .kn { color: #C678DD } /* Keyword.Namespace */
|
||
.codehilite .kp { color: #C678DD } /* Keyword.Pseudo */
|
||
.codehilite .kr { color: #C678DD } /* Keyword.Reserved */
|
||
.codehilite .kt { color: #E5C07B } /* Keyword.Type */
|
||
.codehilite .ld { color: #ABB2BF } /* Literal.Date */
|
||
.codehilite .m { color: #D19A66 } /* Literal.Number */
|
||
.codehilite .s { color: #98C379 } /* Literal.String */
|
||
.codehilite .na { color: #E06C75 } /* Name.Attribute */
|
||
.codehilite .nb { color: #E5C07B } /* Name.Builtin */
|
||
.codehilite .nc { color: #E5C07B } /* Name.Class */
|
||
.codehilite .no { color: #E06C75 } /* Name.Constant */
|
||
.codehilite .nd { color: #61AFEF } /* Name.Decorator */
|
||
.codehilite .ni { color: #E06C75 } /* Name.Entity */
|
||
.codehilite .ne { color: #E06C75 } /* Name.Exception */
|
||
.codehilite .nf { color: #61AFEF; font-weight: bold } /* Name.Function */
|
||
.codehilite .nl { color: #E06C75 } /* Name.Label */
|
||
.codehilite .nn { color: #E06C75 } /* Name.Namespace */
|
||
.codehilite .nx { color: #E06C75 } /* Name.Other */
|
||
.codehilite .py { color: #E06C75 } /* Name.Property */
|
||
.codehilite .nt { color: #E06C75 } /* Name.Tag */
|
||
.codehilite .nv { color: #E06C75 } /* Name.Variable */
|
||
.codehilite .ow { color: #56B6C2 } /* Operator.Word */
|
||
.codehilite .pm { color: #ABB2BF } /* Punctuation.Marker */
|
||
.codehilite .w { color: #ABB2BF } /* Text.Whitespace */
|
||
.codehilite .mb { color: #D19A66 } /* Literal.Number.Bin */
|
||
.codehilite .mf { color: #D19A66 } /* Literal.Number.Float */
|
||
.codehilite .mh { color: #D19A66 } /* Literal.Number.Hex */
|
||
.codehilite .mi { color: #D19A66 } /* Literal.Number.Integer */
|
||
.codehilite .mo { color: #D19A66 } /* Literal.Number.Oct */
|
||
.codehilite .sa { color: #98C379 } /* Literal.String.Affix */
|
||
.codehilite .sb { color: #98C379 } /* Literal.String.Backtick */
|
||
.codehilite .sc { color: #98C379 } /* Literal.String.Char */
|
||
.codehilite .dl { color: #98C379 } /* Literal.String.Delimiter */
|
||
.codehilite .sd { color: #98C379 } /* Literal.String.Doc */
|
||
.codehilite .s2 { color: #98C379 } /* Literal.String.Double */
|
||
.codehilite .se { color: #98C379 } /* Literal.String.Escape */
|
||
.codehilite .sh { color: #98C379 } /* Literal.String.Heredoc */
|
||
.codehilite .si { color: #98C379 } /* Literal.String.Interpol */
|
||
.codehilite .sx { color: #98C379 } /* Literal.String.Other */
|
||
.codehilite .sr { color: #98C379 } /* Literal.String.Regex */
|
||
.codehilite .s1 { color: #98C379 } /* Literal.String.Single */
|
||
.codehilite .ss { color: #98C379 } /* Literal.String.Symbol */
|
||
.codehilite .bp { color: #E5C07B } /* Name.Builtin.Pseudo */
|
||
.codehilite .fm { color: #56B6C2; font-weight: bold } /* Name.Function.Magic */
|
||
.codehilite .vc { color: #E06C75 } /* Name.Variable.Class */
|
||
.codehilite .vg { color: #E06C75 } /* Name.Variable.Global */
|
||
.codehilite .vi { color: #E06C75 } /* Name.Variable.Instance */
|
||
.codehilite .vm { color: #E06C75 } /* Name.Variable.Magic */
|
||
.codehilite .il { color: #D19A66 } /* Literal.Number.Integer.Long */</style>
|
||
<p>2021-06-01</p>
|
||
<h1 id="keep-it-simple">Keep It Simple</h1>
|
||
<p>While studying architecture not only had I so little money that I ate
|
||
spaghetti and pesto every day, I learned a thing or two about design
|
||
principles as well. These principles hold true for every product or
|
||
piece of engineering you plan out. It is the KISS principle. Keep it
|
||
simple stupid, or to quote a guy Jony Ive is clearly a fan of
|
||
<a href="#references">[1]</a>:</p>
|
||
<blockquote>
|
||
<p>"Good design is as little design as possible."<br />
|
||
--- Dieter Rams ---</p>
|
||
</blockquote>
|
||
<p>Let's expand on it so far that it should be as simple as possible
|
||
without being outright stupid. To expand even further, a compelling and
|
||
useful design is not only measurable by the things you can do with it,
|
||
but even more important are the things you don't have to do when you use
|
||
it.</p>
|
||
<p>As you craft something, you will inevitably communicate with everybody
|
||
using your product. In proxy, any room, place or inanimate object
|
||
created by a human speaks to the user. Even on an emotional level.
|
||
Psychologists or product designers like computer and car designers are
|
||
no strangers to this. Donald Norman wrote multiple books about it
|
||
<a href="#references">[2]</a>, <a href="#references">[3]</a>.
|
||
Schulz von Thun defined the <a href="http://temp.chpfeiffer.de/Four-sides_model.pdf">four-ears
|
||
model</a> in which a
|
||
sender's message is received on four different levels. These are Factual
|
||
information, Appeal, Self-revelation and Relationship. This means it is
|
||
helpful to think about the essence of the aspect you want to craft to
|
||
communicate clearly and get the message across. <img alt="A functional lighter. >" src="../../static/images/218px-White_BIC_lighter.png" /></p>
|
||
<h2 id="pesto-principles"><a href="#pesto-principles">Pesto Principles</a></h2>
|
||
<hr />
|
||
<p>What about this website's design principles? First and foremost, how
|
||
you spent your time is important. Do you really need to wait for more
|
||
than a few seconds to load a website? Then there should be a plausible
|
||
reason for that. Should you wait more than 5 seconds to be able to read
|
||
something a guy is rambling about on his blog? I highly doubt it. The
|
||
layout should respect you and your time. Network traffic should be
|
||
minimal.</p>
|
||
<p>Second, I don't want your data. No cookies, no statistics about you, no
|
||
ad tracking of your surfing behavior. That is what you and I won't have
|
||
to put up with. You may read my blog, or you don't. Take it or leave it.
|
||
But I hope you will learn something by doing it or have a good time at
|
||
least.</p>
|
||
<p>There are some points to make this website work and make it accessible.
|
||
To write entries, I will use plain HTML. For now, it is sufficient. HTML
|
||
is a nice markup language. Use a <code><lang></code> tag and you got translation
|
||
accessibility. Another one is the following line, making the layout
|
||
respond dynamically to different screen sizes. More examples on <a href="https://perfectmotherfuckingwebsite.com">this
|
||
beautiful website</a>.</p>
|
||
<div class="codehilite"><pre><span></span><code><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="p">></span>
|
||
</code></pre></div>
|
||
|
||
<p>This will be a blog about computers, for the most part, there will be
|
||
code examples. Further, I want to keep the stylesheet small and
|
||
maintainable. Monospaced fonts are not only a dead giveaway about this
|
||
fact, a solid layout is created via the following line of CSS.</p>
|
||
<div class="codehilite"><pre><span></span><code><span class="p">.</span><span class="nc">content</span><span class="p">{</span><span class="k">text-align</span><span class="p">:</span><span class="kc">justify</span><span class="p">;}</span>
|
||
</code></pre></div>
|
||
|
||
<p>To keep things in perspective, the date of publication will be the first
|
||
line in each article. If the content may be of interest to you, knowing
|
||
the date it was created is beneficial in evaluating its potential
|
||
usefulness over time.</p>
|
||
<p>There is no harm in growing something like a website incrementally. You
|
||
will never miss a feature you never had in the first place. You could
|
||
aspire to get it if it is conceptually meaningful and makes some sense
|
||
in the overall picture. But a feature that does not exist needs no
|
||
maintenance, does not produce any bugs and needs no documentation.</p>
|
||
<blockquote>
|
||
<p>"The things you own end up owning you."<br />
|
||
--- Chuck Palahniuk ---</p>
|
||
</blockquote>
|
||
<h2 id="cordial-code"><a href="#cordial-code">Cordial Code</a></h2>
|
||
<hr />
|
||
<p>The website was created on a Saturday afternoon in Python and Flask
|
||
framework. Six months down the line, I do not want to put much energy
|
||
into grasping what I had done this weekend regarding to code structure.
|
||
I want to put the least amount of time possible into extending and
|
||
maintaining the framework of the site. It consists of a Python file, a
|
||
stylesheet, a jinja template and an empty favicon file. The last one
|
||
exists because I want to avoid any error possible displayed in the
|
||
network console of the browser. Everything else is content. You can find
|
||
the site as a repository on <a href="https://git.stefan.works">my git</a>.</p>
|
||
<p>A directory named <code>blog</code> contains all entries released as well as the
|
||
ones I am working on. Metadata about subdirectories and the
|
||
corresponding content is gathered inside a \<key>:\<value> structure.
|
||
An entry is seen as valid and stored in the dictionary as soon as an
|
||
index.html file is found. Who knows what might be added in the future.
|
||
It will be added to a list of values. For now, metadata is solely the
|
||
date of the blog articles. It is added to the RSS site automatically as
|
||
well. The code snippet contains the dictionary.</p>
|
||
<div class="codehilite"><pre><span></span><code> <span class="n">meta_data</span> <span class="o">=</span> <span class="p">{</span><span class="n">root</span><span class="p">[</span><span class="nb">len</span><span class="p">(</span><span class="s2">"./templates/blog/"</span><span class="p">):]</span> <span class="p">:</span>
|
||
<span class="n">datetime</span><span class="o">.</span><span class="n">fromtimestamp</span><span class="p">(</span><span class="n">os</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">getmtime</span><span class="p">(</span><span class="n">os</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="n">root</span><span class="p">,</span><span class="s2">"index.html"</span><span class="p">)))</span>
|
||
<span class="k">for</span> <span class="n">root</span><span class="p">,</span> <span class="n">dirs</span><span class="p">,</span> <span class="n">files</span> <span class="ow">in</span> <span class="n">os</span><span class="o">.</span><span class="n">walk</span><span class="p">(</span><span class="s2">"./templates/blog"</span><span class="p">)</span> <span class="k">if</span> <span class="s2">"index.html"</span> <span class="ow">in</span> <span class="n">files</span><span class="p">}</span>
|
||
</code></pre></div>
|
||
|
||
<p>Routes are set by the use of decorators. The landing page is declared in
|
||
the following snippet. After the dictionary is sorted by date,
|
||
<a href="https://flask.palletsprojects.com/en/2.0.x/api/#flask.render_template"><code>render_template()</code></a>
|
||
returns a string. The result will be interpreted by the browser in
|
||
HTML/CSS format.</p>
|
||
<div class="codehilite"><pre><span></span><code> <span class="nd">@app</span><span class="o">.</span><span class="n">route</span><span class="p">(</span><span class="s1">'/'</span><span class="p">)</span>
|
||
<span class="k">def</span><span class="w"> </span><span class="nf">index</span><span class="p">(</span><span class="n">_paths</span><span class="o">=</span><span class="n">meta_data</span><span class="p">):</span>
|
||
<span class="n">sorted_meta_data</span> <span class="o">=</span> <span class="nb">dict</span><span class="p">(</span><span class="nb">sorted</span><span class="p">(</span><span class="n">meta_data</span><span class="o">.</span><span class="n">items</span><span class="p">(),</span> <span class="n">reverse</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span> <span class="n">key</span><span class="o">=</span><span class="k">lambda</span> <span class="n">item</span> <span class="p">:</span> <span class="n">item</span><span class="p">[</span><span class="mi">1</span><span class="p">]))</span>
|
||
<span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="s2">"index.html"</span><span class="p">,</span> <span class="n">_paths</span><span class="o">=</span><span class="n">sorted_meta_data</span><span class="p">)</span>
|
||
</code></pre></div>
|
||
|
||
<p>The main page, like every other page, extends the general jinja
|
||
template. It contains a list of all articles found.</p>
|
||
<div class="codehilite"><pre><span></span><code><span class="w"> </span><span class="cp">{%</span> <span class="k">extends</span> <span class="s2">"template.html"</span> <span class="cp">%}</span>
|
||
<span class="w"> </span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">head</span> <span class="cp">%}</span>
|
||
<span class="w"> </span><span class="cp">{{</span> <span class="nb">super</span><span class="o">()</span> <span class="cp">}}</span>
|
||
<span class="w"> </span><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
|
||
<span class="w"> </span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">content</span> <span class="cp">%}</span><span class="w"> </span>
|
||
<span class="w"> </span><span class="nt"><p></span>Welcome<span class="w"> </span>to<span class="w"> </span>my<span class="w"> </span>website<span class="nt"></p></span>
|
||
<span class="w"> </span><span class="nt"><span</span><span class="w"> </span><span class="na">class=</span><span class="s">"index"</span><span class="nt">></span>
|
||
<span class="w"> </span><span class="cp">{%</span> <span class="k">for</span> <span class="nv">name</span><span class="o">,</span><span class="nv">_date</span> <span class="k">in</span> <span class="nv">_paths.items</span><span class="o">()</span> <span class="cp">%}</span>
|
||
<span class="w"> </span><span class="nt"><p><a</span><span class="w"> </span><span class="na">href=</span><span class="s">"</span><span class="cp">{{</span> <span class="nv">url_for</span><span class="o">(</span><span class="s1">'blog'</span><span class="o">,</span> <span class="nv">blog_item</span><span class="o">=</span><span class="nv">name</span><span class="o">)</span> <span class="cp">}}</span><span class="s">"</span><span class="nt">></span><span class="cp">{{</span> <span class="nv">_date.date</span><span class="o">()</span> <span class="cp">}}</span><span class="w"> </span><span class="cp">{{</span> <span class="nv">name</span> <span class="cp">}}</span><span class="nt"></a></p></span>
|
||
<span class="w"> </span><span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span>
|
||
<span class="w"> </span><span class="nt"></span></span>
|
||
<span class="w"> </span><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
|
||
</code></pre></div>
|
||
|
||
<p>URLs originate from the meta_data dictionary keys. These are the blog
|
||
entries' directory names. Flask's
|
||
<a href="https://flask.palletsprojects.com/en/2.0.x/api/#flask.url_for"><code>url_for()</code></a>
|
||
returns the articles if you want to visit the site. It handles URL
|
||
encoding as well. This is pretty neat since there are spaces in the
|
||
names.</p>
|
||
<div class="codehilite"><pre><span></span><code> <span class="nd">@app</span><span class="o">.</span><span class="n">route</span><span class="p">(</span><span class="s1">'/blog/<blog_item>/index.html'</span><span class="p">)</span>
|
||
<span class="k">def</span><span class="w"> </span><span class="nf">blog</span><span class="p">(</span><span class="n">blog_item</span><span class="p">,</span> <span class="n">_date</span><span class="o">=</span><span class="n">meta_data</span><span class="p">):</span>
|
||
<span class="k">return</span> <span class="n">render_template</span><span class="p">(</span><span class="sa">f</span><span class="s2">"blog/</span><span class="si">{</span><span class="n">blog_item</span><span class="si">}</span><span class="s2">/index.html"</span><span class="p">,</span> <span class="n">_date</span><span class="o">=</span><span class="n">meta_data</span><span class="p">[</span><span class="n">blog_item</span><span class="p">])</span>
|
||
</code></pre></div>
|
||
|
||
<h2 id="digestif"><a href="#digestif">Digestif</a></h2>
|
||
<hr />
|
||
<p>Incidentally, this turned out to be not only an opener for my blog but
|
||
code documentation for myself as well. Maybe, I'll need to pick it up in
|
||
six months, who knows.... As a closure, at least from my experience, the
|
||
most feature-rich application seldom reaches its set goals. The one with
|
||
a clear and precise target, fulfilling its minimal scope, most likely
|
||
will.</p>
|
||
<p><a href="https://www.bonappetit.com/recipe/best-pesto">This is how you make pesto, by the
|
||
way.</a> Bon Appetit!</p>
|
||
<h2 id="references"><a href="#references">References</a></h2>
|
||
<p><a href="https://www.bookfinder.com/?isbn=9783899555844">[1] Less and More: The Design Ethos of Dieter Rams, 2015,
|
||
ISBN:9783899555844</a><br />
|
||
<a href="https://www.bookfinder.com/?isbn=9780465051366">[2] Emotional Design: Why We Love (or Hate) Everyday Things, 2005,
|
||
ISBN:9780465051366</a><br />
|
||
<a href="https://www.bookfinder.com/?isbn=9780465067107">[3] The Design of Everyday Things, 2002, ISBN,
|
||
9780465067107</a></p>
|
||
</span>
|
||
</div>
|
||
<div id="footer">
|
||
|
||
<hr/>
|
||
<p></p>
|
||
<center>
|
||
© Stefan Etringer
|
||
</center>
|
||
|
||
</div>
|
||
</body>
|
||
</html> |