diff --git a/templates/blog/Keep It Simple/index.html b/templates/blog/Keep It Simple/index.html new file mode 100644 index 0000000..346ef0d --- /dev/null +++ b/templates/blog/Keep It Simple/index.html @@ -0,0 +1,110 @@ + +{% extends "template.html" %} +{% block head %} + {{ super() }} +{% endblock %} +{% block content %} +{{ _date.date() }} +
“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], [3]. Some good reads. Schulz von Thun defined the four-ears model 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. + + +
++
+ 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.
+
+
+<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.
+
+
+.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 —
+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.
+
+
+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()
returns a string. The result will be interpreted by the browser in HTML/CSS format.
+
+
+@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.
+
+
+{% 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()
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.
+
+
+@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])
+
+
++This is how you make pesto, by the way. Bon Appetit! +
++