181 lines
7.8 KiB
Markdown
181 lines
7.8 KiB
Markdown
2021-06-01
|
||
|
||
# Keep It Simple
|
||
|
||
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
|
||
[[1]](#references):
|
||
|
||
> "Good design is as little design as possible."
|
||
> --- Dieter Rams ---
|
||
|
||
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.
|
||
|
||
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
|
||
[[2]](#references), [[3]](#references).
|
||
Schulz von Thun defined the [four-ears
|
||
model](http://temp.chpfeiffer.de/Four-sides_model.pdf) 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. 
|
||
|
||
## [Pesto Principles](#pesto-principles)
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
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.
|
||
|
||
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.
|
||
|
||
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 `<lang>` tag and you got translation
|
||
accessibility. Another one is the following line, making the layout
|
||
respond dynamically to different screen sizes. More examples on [this
|
||
beautiful website](https://perfectmotherfuckingwebsite.com).
|
||
|
||
```html
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
```
|
||
|
||
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.
|
||
|
||
```css
|
||
.content{text-align:justify;}
|
||
```
|
||
|
||
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.
|
||
|
||
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.
|
||
|
||
> "The things you own end up owning you."
|
||
> --- Chuck Palahniuk ---
|
||
|
||
## [Cordial Code](#cordial-code)
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
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 [my git](https://git.stefan.works).
|
||
|
||
A directory named `blog` 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.
|
||
|
||
```python
|
||
meta_data = {root[len("./templates/blog/"):] :
|
||
datetime.fromtimestamp(os.path.getmtime(os.path.join(root,"index.html")))
|
||
for root, dirs, files in os.walk("./templates/blog") if "index.html" in files}
|
||
```
|
||
|
||
Routes are set by the use of decorators. The landing page is declared in
|
||
the following snippet. After the dictionary is sorted by date,
|
||
[`render_template()`](https://flask.palletsprojects.com/en/2.0.x/api/#flask.render_template)
|
||
returns a string. The result will be interpreted by the browser in
|
||
HTML/CSS format.
|
||
|
||
```python
|
||
@app.route('/')
|
||
def index(_paths=meta_data):
|
||
sorted_meta_data = dict(sorted(meta_data.items(), reverse=True, key=lambda item : item[1]))
|
||
return render_template("index.html", _paths=sorted_meta_data)
|
||
```
|
||
|
||
The main page, like every other page, extends the general jinja
|
||
template. It contains a list of all articles found.
|
||
|
||
```jinja2
|
||
{% extends "template.html" %}
|
||
{% block head %}
|
||
{{ super() }}
|
||
{% endblock %}
|
||
{% block content %}
|
||
<p>Welcome to my website</p>
|
||
<span class="index">
|
||
{% for name,_date in _paths.items() %}
|
||
<p><a href="{{ url_for('blog', blog_item=name) }}">{{ _date.date() }} {{ name }}</a></p>
|
||
{% endfor %}
|
||
</span>
|
||
{% endblock %}
|
||
```
|
||
|
||
URLs originate from the meta_data dictionary keys. These are the blog
|
||
entries' directory names. Flask's
|
||
[`url_for()`](https://flask.palletsprojects.com/en/2.0.x/api/#flask.url_for)
|
||
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.
|
||
|
||
```python
|
||
@app.route('/blog/<blog_item>/index.html')
|
||
def blog(blog_item, _date=meta_data):
|
||
return render_template(f"blog/{blog_item}/index.html", _date=meta_data[blog_item])
|
||
```
|
||
|
||
## [Digestif](#digestif)
|
||
|
||
------------------------------------------------------------------------
|
||
|
||
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.
|
||
|
||
[This is how you make pesto, by the
|
||
way.](https://www.bonappetit.com/recipe/best-pesto) Bon Appetit!
|
||
|
||
## [References](#references)
|
||
|
||
[[1] Less and More: The Design Ethos of Dieter Rams, 2015,
|
||
ISBN:9783899555844](https://www.bookfinder.com/?isbn=9783899555844)
|
||
[[2] Emotional Design: Why We Love (or Hate) Everyday Things, 2005,
|
||
ISBN:9780465051366](https://www.bookfinder.com/?isbn=9780465051366)
|
||
[[3] The Design of Everyday Things, 2002, ISBN,
|
||
9780465067107](https://www.bookfinder.com/?isbn=9780465067107)
|