Eine einfache React Webseite

Zuerst einmal wird ein React Project angelegt:

1
npx create-react-app my_app

Dann wechseln wir in das Verzeichnis und installieren die Abhängigkeiten:

1
cd my_app

Und so sehen wir das erste Ergbnis:

1
npm start

Erster React Screen

Ich möchte hier React Material Ui verwenden, und folge dem Setup Guide

Mermaid

Kennt Ihr schon Mermaid?

UML Diagramme von Text:

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail... John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
1
2
3
4
5
6
7
8
9
10
11
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

So installiert man Mermaid in Hexo: Link

Du magst freie Demokratie? Dann zahl mit Freude deine Rundfunkgebühren!

Zuletzt editiert: 15.5.2019 06:10

Als konservativer Österreicher, der in Unterfranken lebt, sehe ich mich überraschender Weise mit einer Diskussion konfrontiert, mit der ich nicht gerechnet habe. Während der Diskussion zur Europawahl 2019, dem gemeinsamen Betrachten der Wahlwerbungen und der darauffolgenden Diskussionen, wurde ich sehr direkt mit Belehrungen zu Appeasement-Politik und der Machtergreifung Hitlers konfrontiert. Ohne damit gerechnet zu haben, wurde, bei von mir emotional positiv und sachlich vereinfacht wahrgenommenen Wahlslogans, plötzlich über das dritte Reich diskutiert.

Meinung:

Und dies zu Recht.

Was hat das mit den Rundfunkgebühren zu tun?

Als Österreicher im Ausland suche ich Informationen zur aktuellen Lage und bilde mir zu Wahlkampfzeiten eine Meinung von “weit weg”. Hier ist der ORF ein unschätzbar wertvolles Werkzeug, da ich ihn, seit meiner Kindheit, als verlässliches und neutrales Medium kennen gelernt habe. Und nein, nicht alles was ich im ORF sehe, ist nach “meiner Meinung” und macht mich glücklich. Das ist auch nicht seine Aufgabe. Der öffentlich-rechtliche Rundfunk sollte eine neutrale Diskussionsgrundlage bieten, bei Berichterstattungen auch schwere Themen ansprechen und Debatten auslösen.

Ich mache mir Sorgen um den ORF.

Angefangen hat es, mit einer Stellungnahme von Armin Wolf zu seiner Arbeit (siehe Video).




Und ich gebe Herrn Wolf recht; nur weil wir uns an etwas gewöhnt haben, macht es das nicht automatisch richtig. Meiner Meinung nach, sprechen wir hier über die Gewöhnung an den Rechtspopulismus in Österreich.

Die Geschichte jedoch geht weiter.

Dies ist nur ein Beispiel, wo der ORF Beträge zeigt, die mich nicht glücklich machen, mich definitiv emotional erwischen, und dazu führen, dass ich über das Gesprochene nachdenken muss:




Um es klar auszusprechen: Ich finde Jan Böhmermann nicht unterhaltsam. ABER: Respekt! Das braucht Mut.

Er nutzt und verwendet, aus meiner Sicht, ganz bewusst diese Begriffe und Übertreibungen. Ob das notwendig ist, um gegen rechts gerichtete Propaganda aufmerksam zu machen, weiß ich nicht. Was es jedenfalls tut, ist eine Diskussion auslösen; das ist wichtig und auch eine der Aufgaben des ORF.

Eines, das ich aus dem Beitrag jedoch als richtig mitgenommen habe, ist, dass zusätzliche staatliche Nähe des ORF keine gute Idee ist.

Deswegen denke ich, dass Rundfunkgebühren nicht über Steuern geregelt werden sollten, die Finanzierung des ORF jedoch sichergestellt werden muss.

Persönlich komme ich auf keine bessere Idee, als durch Rundfunkgebühren eine unabhängige Finanzierung zu sichern.

Zum Schluss noch ein paar Links für diejenigen die sich weiter informieren möchten:

There All the Honor Lies

“But no pleasure is comparable to standing upon the vantage ground of truth.”

Francis Bacon

Also um als Nerd Farbe zu bekennen: “Mimbari lügen nicht”! und das läßt sich auf Vulkanier übertragen für diejenigen welche die obskure Babylon 5 Referenz nicht verstehen.

Warum mag ich die alten SciFi Romane und Serien? Weil sie sich mit Moral beschäftigen und moderne Fabeln aufstellen ohne den gesellschaftlichen Ballast den die meisten verstaubten Philosophen mittragen.

Denn die Idee, dass eine Lüge grundsätzlich falsch ist und nur beim Thema des Schutzes anderer Manövrierraum bleibt ist keine neue Idee. Am ehesten deckt sich mein Herangehen an Moral hier mit Immanuel Kant.

Ablösen möchte ich es von der Idee, dass es immer eine höhere Macht oder Prinzip benötigt die immer vorhanden sind, in der die meisten gleich Gott sehen wollen. Doch die Frage “Was soll ich tun?” beantwortet Kant finde ich sehr schön.

Für die jenigen die sich mit den Texten nicht beschäftigt haben finde ich den Video Kurs der Harvard University von Michael Sandel eine gute Variante.

Three Kinds of Love

“For whatever we do or suffer for a friend is pleasant, because love is the principal cause of pleasure.”

Thomas Aquinas

Um es mit den alten Griechen nehmen zu können, müssen wir über “platonische Liebe” sprechen. Und nicht in dem Sinne wie wir es heute verstehen.

Es ist schön, wenn man drei Wörter dafür hat. Plato kannte drei Arten der Liebe:

Eros, die dringliche, erotische und sinnliche Liebe. Philia, die freundschafliche, gegenseitige und bedingende Liebe. Agape, die selbstlose, aufopfernde und bedingungslose Liebe.

  • Eros

    So meinen die alten griechen Eros wenn wir uns in jemanden verknallen und Anziehung fühlen ohne einen bewussten Grund. Die einfachste und schwierigste Art der Liebe gleichzeitig. Sie passiert einem so einfach wie ein Zufall und landet bei manchen von uns, immer bei den falschen Partnern.

  • Philia

    Die freundschaftliche Liebe wächst mit dem Vertrauen und den gegenseitigen Nettigkeiten wie Geschäfte die man durchführen kann. Um jede kleine Freude sind wir dankbar bis wir diese Zuwendungen nicht mehr missen wollen und uns im gleichen revanchieren.

  • Agape

    Die selbstlose Liebe die man für ein Kind oder Eltern spürt. Die höchste Form der Liebe selbstos und und rein. Sie ist es die wir genießen, auch wenn wir nichts zurück bekommen. Selten und doch die schönste.

So spricht Plato bei Liebe davon Eros in Agape zu transformieren. Wenn man das Bedürfniss fühlt, jemandem nahe zu sein, keine Verpflichtung oder Aufdringlichkeit damit zu rechtfertigen. Sondern es auch einseitig anzunehmen, keine Bedingung zu stellen und als solche zu genießen.

Dieser Teil der Idee ist uns beim Begriff “platonischer Liebe” verloren gegangen, doch finde ich es ist eine Idee die gepflegt werden sollte.

A Look through the Prism of Life





“Friendship is like wetting your pants, everyone can see it, but only you can feel its warmth.”

Unbekannt

Meine Freunde kennen den Moment, wenn ich ihnen eine Führung durch meine Gedanken gebe. Manchmal sind sie fasziniert, verwirrt und mal erstaunt. Um diese Gedanken in einer konsistenten Art wiederzugeben, habe ich immer wieder überlegt ein Buch zu schreiben. Nun versuche ich mich an einer Sammlung von Artikeln, die auch als Kapitel dienen können und hoffe Sie geben dem einen oder anderen Anreiz über Dinge nachzudenken.

So werde ich nun unter dem Tag “Prism of Life” diese schreiben und mit einander verbinden.

Also lass mich dir die “ABCs of Me” geben:

Mit Unity3D beginnen

Heute möchte ich beginnen Unity 3D zu testen, da mich Geme Development schon lange interessiert.
Dabei werde ich (teilweise) diesem Udemy Kurs zu Unity3D folgen.

Unity3D und Visual Studio installieren

Als Bemerkung: Ich arbeite auf einem Mac insofern wird es auf einem Windows oder Linux Rechner etwas anders aussehen.

Zuerst lade ich Unity Hub - Personal Version herunter:


Unity Download

Dann installiere ich die aktuelle Unity 2018 Version inklusive Visual Studio für Mac:


Unity Install

Unity Install

Die Installation benötigt dann etwas Zeit, sobald alles erledigt ist geht es weiter.

Hello World

Zuerst lege ich ein neues Projekt an:


Unity New Projekt

Beim Öffnen erscheint die Unity IDE:


Unity New Projekt

Jetzt legen wir ein Skript an, dazu im Projekt Bereich rechts klicken und “Create” > “C# Script” auswählen und direkt den Namen des Files ändern.


Unity New Projekt

Das Skript dann via drag&drop mit dem Objekt der “Main Camera” verbinden. Durch einen Doppelklick auf das Skript wird dieses in Visual Studio geöffnet.

HelloWorld.cs - Ein Beispiel für ein start up “Hello World!” und Output wenn Pfeiltasten gedrückt werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class HelloWorld : MonoBehaviour {

// Use this for initialization
void Start () {
// Hello world on start up
Debug.Log("Hello World!");
}

// Update is called once per frame
void Update () {
// Output text if key is pressed:

if( Input.GetKeyDown( KeyCode.UpArrow )){
Debug.Log("UP pressed.");
}

if (Input.GetKeyDown(KeyCode.DownArrow))
{
Debug.Log("DOWN pressed.");
}

}
}

Mit “Play” im Unity Fenster kann der Code getestet werden:


Unity New Projekt

C# Grundlagen werde ich nicht behandeln in meinem Blog. Dazu kann ich den Kurs jedoch sehr empfehlen.
Im nächsten Blog möchte ich mich mit einer eigenen Spiel- Idee beschäftigen.

Erstellen einer Seite mit Hexo

Da ich gerade noch eine Seite anlege, hier noch eine Anleitung wie man eine Seite mit Hexo erzeugt.

Hexo muss installiert sein, und wir benötigen dazu git und npm. Für den Moment gehe ich mal davon aus das ist etwas, dass jemand der sich mit Hexo beschäftigt selbst lösen kann.

Zuerst legen wir eine neue Hexo Seite an und folgen dem Quick Start Guide.

1
$ hexo init blog

Danach fügen wir das bootstrap-blog Theme hinzu.

1
$ git clone https://github.com/cgmartin/hexo-theme-bootstrap-blog  bootstrap-blog

Da ich Anpassungen an diesem Theme plane clonen wir es zuerst und kopieren den Inhalt des Ordners danach in unser blog.

1
2
3
blog
+ themes
+ /bootstrap-blog

Da ich FontAwesome und das vollständig Bootstrap set verwenden möchte, füge ich auch die optionalen Module hinzu:

1
2
3
$ cd blog
blog $ npm install hexo-tag-bootstrap --save
blog $ npm install hexo-tag-fontawesome --save

Nun können wir das default Theme in der Config ersetzen.
_config.yml:

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: bootstrap-blog

Jetzt löschen wir den Ordner themes/landscape und legen mit unserer Vorlage ein git Repository an.

Um das Blog zu öffnen führen wir hexo serve aus:

1
blog $ hexo serve

Damit finden wir auf http://localhost:4000/ die frische Bootstrap Seite:

Hexo Bootstrap

Ein Blog auswählen

Ich sollte wohl erklären warum ich Hexo verwende jedoch anderen Wordpress empfehle.

Persönlich schwanke ich zwischen den folgenden 3 Blogs bzw. CMS (Content Management Systemen):

Die drei Systeme stehen für mich auf einem Spektrum von technischen Möglichkeiten vs. Anwenderfreundlichkeit.

Wordpress

Für jemandem ohne Entwickler- Kenntnisse (PHP, HTML, CSS, JavaScript) empfehle ich immer wieder Wordpress. Es ist einfach im Einstieg. Designs können per Upload einer ZIP Datei ausgetauscht werden und es gibt gute Dokumentation für Anwender.

Als Entwickler überkommt mich bei dem PHP 4 und HTML Code ein leichtes Unwohlsein. Wenn ich HTML Elemente sehe die für mich falsch platziert sind möchte ich die CSS Datei öffnen können und einfach die Eigenschaften ändern. Das ist bei Wordpress nicht einfach, ob der Menge an Code und fragwürdiger Struktur.

Das ist keine Problemstellung die ein Anweder hat. Im Gegenteil die Verwaltung im Backend ist meist bevorzugt und nachvollziehbarer.

Fazit: Gibt es Designs die (nahe) am gesuchten sind und ist tatsächlich nur ein CMS / Blog gesucht ohne große Anpassungs- Pläne: Go Wordpress. Kombiniert damit, dass es genug Entwickler gibt die damit schon in Berührung gekommen sind, findet man auch jemanden der bei kleinen Anpassungen helfen kann.

Hexo

In der Mitte der drei Systeme liegt Hexo für mich. Vorteile sind: Ich verwalte meine Inhalte in Markdown- Dateien und kann direkt HTML und CSS anpassen.

Während ich dies schreibe sieht das z.B. so aus:


Markdown in PHPStorm

Nicht ganz die Eingabemaske die man von Wordpress gewohnt ist. Vorteil ist, dass Markdown von vielen Tools verstanden wird und ich die Inhalte so auch für andere Zwecke nutzen kann und der Inhalt nicht mit dem Design vermischt ist.

Nachteil ist, dass die Inhalte zuerst in gestaltetes HTML für eine Webseite konvertiert werden müssen mit Hlife der Hexo Kommondobefehle:

1
2
3
$ hexo serve
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

Damit bekommt man eine Ansicht der Seite mit allen aktuellen Änderungen und kann so vergleichen wie das Ergebnis aussieht.

Um die Dateien zu erzeugen die auf den Webhost übertragen werden benutzt man folgendes:

1
2
3
4
5
$ hexo generate
INFO Start processing
INFO Files loaded in 483 ms
INFO Generated: blog/2018-05-06-Ein-Blog-auswahlen.html
INFO 1 files generated in 219 ms

Danach können die HTML- Files aus dem “public”- Ordner auf den FTP übertragen werden.

Fazit: Für Entwickler die lieber Markdown schreiben eine gute Lösung. Flexibel und aufgeräumt beim HTML. Jedoch mit einer deutlichen Einstiegshürde für Anwender.

Neos

Die dritte Variante die ich nennen möchte ist Neos. Es verbindet mehr oder weniger die Vorteile von Wordpress mit denen von Hexo.

Jedoch ist hier zuerst eine gewisse Menge an Basisarbeit notwendig. Für ein CMS bietet es eine flexible Datenstruktur und die Möglichkeit das HTML sauber und kontrolliert aufzubereiten. Kombiniert mit dem eingebauten WYSIWYG- Editor eine gute Kombination für etwas komplexere Projekte.

Fazit: Neos würde ich in einem “regulären Projekt” einsetzen bei dem man zuerst das Design bestimmt und danach den Inhalt einpflegt. Es ermöglicht Entwicklern den Code aufzubereiten und zu organisieren und Anwendern den Inhalt beizusteuern. Anwender wollte ich damit jedoch nicht alleine lassen.