stefan
/
website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
website/build/blog/Keep It Simple/index.html

292 lines
20 KiB
HTML
Raw Permalink Normal View History

init
2021-06-01 23:15:46 +02:00
<!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 Friese's Website</a>
</div>
implemented markdown support
2023-07-15 23:53:43 +02:00
<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>
init
2021-06-01 23:15:46 +02:00
<hr style="width: 36ch;"/>
<div class="menu">
<a href="/about.html" style="text-decoration:none">about&emsp;</a>
<a href="/contact.html" style="text-decoration:none">contact&emsp;</a>
<a href="/rss.xml" style="text-decoration:none">rss&emsp;</a>
<a href="https://git.stefan.works" style="text-decoration:none">git</a>
</div>
<br><br>
<p></p>
<hr/>
</center>
<p></p>
</head>
<body>
implemented markdown support
2023-07-15 23:53:43 +02:00
<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 .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. &gt;" 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>&lt;lang&gt;</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">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="p">&gt;</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 \&lt;key&gt;:\&lt;value&gt; 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">&quot;./templates/blog/&quot;</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">&quot;index.html&quot;</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">&quot;./templates/blog&quot;</span><span class="p">)</span> <span class="k">if</span> <span class="s2">&quot;index.html&quot;</span> <span class="ow">in</span> <span class="n">files</span><span class="p">}</span>
</code></pre></div>
init
2021-06-01 23:15:46 +02:00
implemented markdown support
2023-07-15 23:53:43 +02:00
<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">&#39;/&#39;</span><span class="p">)</span>
<span class="k">def</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">&quot;index.html&quot;</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>
init
2021-06-01 23:15:46 +02:00
implemented markdown support
2023-07-15 23:53:43 +02:00
<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">&quot;template.html&quot;</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">&lt;p&gt;</span>Welcome<span class="w"> </span>to<span class="w"> </span>my<span class="w"> </span>website<span class="nt">&lt;/p&gt;</span>
<span class="w"> </span><span class="nt">&lt;span</span><span class="w"> </span><span class="na">class=</span><span class="s">&quot;index&quot;</span><span class="nt">&gt;</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">&lt;p&gt;&lt;a</span><span class="w"> </span><span class="na">href=</span><span class="s">&quot;</span><span class="cp">{{</span> <span class="nv">url_for</span><span class="o">(</span><span class="s1">&#39;blog&#39;</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">&quot;</span><span class="nt">&gt;</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">&lt;/a&gt;&lt;/p&gt;</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">&lt;/span&gt;</span>
<span class="w"> </span><span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span>
</code></pre></div>
init
2021-06-01 23:15:46 +02:00
implemented markdown support
2023-07-15 23:53:43 +02:00
<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">&#39;/blog/&lt;blog_item&gt;/index.html&#39;</span><span class="p">)</span>
<span class="k">def</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">&quot;blog/</span><span class="si">{</span><span class="n">blog_item</span><span class="si">}</span><span class="s2">/index.html&quot;</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>
init
2021-06-01 23:15:46 +02:00
implemented markdown support
2023-07-15 23:53:43 +02:00
<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>
init
2021-06-01 23:15:46 +02:00
</div>
<div id="footer">
<hr/>
<p></p>
<center>
&copy; Stefan Friese
</center>
</div>
</body>
</html>