Ein Kind steht auf einem Feld und schaut auf eine Karte.

Photo by Annie Spratt on Unsplash

Das Internet und vor allem das World Wide Web ist eine weite Landschaft. InternetLiveStats sagt es gibt rund 1.700.000.000 (eine Milliarde, 700 Millionen) Webseiten. Das ist eine Menge. Im vergleich dazu gibt es knapp 1.024.470 (1 Millionen) npm Pakete. Das ist zwar nur ein Bruchteil von dem, was es an Webseiten gibt, aber immernoch sehr, sehr viel.

Durch diese Masse an Paketen, Frameworks und Design Konzepte durchzublicken ist gerade am Anfang extrem überfordert und kann ab einem gewissen Punkt für viel Frust sorgen.

So war es auch bei mir. Was darin resultierte, dass ich maximal bei basic HTML, CSS und Javascript geblieben bin. Oberste grenze war jQuery und Bootstrap. Worte wie React, Redux, Vue, SCSS oder Express waren das Grauen für mich.

Man denkt sich: “Ich mach das jetzt!”, öffnet die Dokumentation und versteht nur Bahnhof. Googelt nach Tutorials, setzt ein “Hello World” auf und versteht immer noch nicht mehr.

Aber ich habe es geschafft, aus diesem Teufelskreis auszubrechen und möchte euch heute verraten wie!

Die Lernmethode

Jeder lernt anders. Manche mit einem Buch, andere mit Youtube Videos, Beispiele oder Dokumentation. Ich kann mit allem was anfangen, aber nichts von dem hat mich so wirklich 100% zufrieden gestellt. Selten lag es aber am Material. Häufiger wie ich damit umgegangen bin.

Diese Umgang habe ich mit FreeCodeCamp gelernt. #notSponsored

FreeCodeCamp ist eine non-profit, die kostenlos Online Kurse zur Webentwicklung anbieten. Sie verwenden eine Mischung zwischen einem Praktischen und einem Theoretisch Ansatz, der auf sich aufbaut.

Nehmen wir an ich möchte Javascript lernen. Ich starte also den Kurs und bekomme erst mal erzählt, was Javascript überhaupt ist. Darauf hin geht es aber recht schnell zu den Übungen. Auf der linken Seite des Bildschirms wird mir nun ein Konzept erklärt und auf der rechten Seite gibt es einen Code Editor. Man liest sich also die linke Seite, mit dem Konzept und Code Beispielen durch. Am ende gibt es eine kleine Aufgabe dieses Beispiel in die Realität umsetzen. Zum Beispiel bekommt man also erklärt, was eine Variable ist, wie die Syntax aussieht und was man damit alles so machen kann. Nachdem man es sich durchgelesen hat, soll man selber im angeschlossenen Editor eine Variable initialisieren, sie belegen oder ändern.

Dadurch nimmt man das abstrakte Konzept direkt in die Hand, setzt es um und kann direkt nachvollziehen ob man es verstanden oder nicht. Bei der zweiten Übung geht es dann um Schleifen. Dort muss man also seine Wissen der Variablen mit reinbringen, aber auch das neue der Schleifen anwenden.

Wozu führt das nun?

  1. Man sitz nicht vor einem großen Haufen an Code Beispielen, wo es verlangt wird mehrere Konzepte und Eigenarten gleichzeitig zu verstehen.
  2. Durch die direkte Anwendung dessen findet schon eine Transferleistung statt. Man muss sich direkt damit auseinandersetzen, was eine Schleife ist und überliest es nicht einfach.
  3. Wenn man diesen Prozess 2-3 durchgemacht hat, erhält man eine gute Einschätzung, wie man selber in Teilaufgaben und Konzepte unterteilt.

Und damit können wir wieder den Bogen nach oben machen. Dokumentation und Büchern. Die gleiche Methode kann man nämlich auch dort anwenden, man kriegt sie nur nicht so schön vorgekaut. Auch Bücher und die meisten Dokumentation gehen abschnittsweise und Konzept für Konzept durch. Anstatt aber nun diese nur stur zu lesen oder in zu großen Code Beispielen reinzuspringen, können wir uns währenddessen eine kleine Zusammenfassung schreiben. Nichts großes, nichts wildes. Es soll kein Lehrbuch werden. Der Clue ist aber: Wir copy & pasten uns nicht einfach die Beispiele, sondern schreiben unsere eigenen. Sei es, dass wir einfach die Variablen Namen ändern.

class Car {
    constructor(horsepower, doors, buildYear){
    this.horsepower = horsepower
    this.doors = doors
    this.buildYear = buildYear
    }
    
    get info(){
        retun `The Car has ${horsepower} horsepower and ${doors} doors. It was build in ${buildYear}.`
    }
}

const car = new Car(200, 4, 2019)

Würde zum Beispiel im Buch stehen. Darauf aufbauend übertragen wir das in meinetwegen einem Cheat-Sheet als

class Cat {
    constructor(name, pawPower, birthYear){
    this.name = name
    this.pawPower = pawPower
    this.birthYear = birthYear
    }
    
    get info(){
        retun `This is ${name}. ${name} has ${pawPower} paws and was born in ${birthYear}`
    }
}

const cat = new Cat(200, 4, 2019)

Im Grunde, steht da das selbe. Da wir uns aber Gedanken machen, ob jetzt pawPower wirklich so sinnvoll ist, machen wir uns gleichzeit mit Gedanken über constructor, this. und get info(){}. Wir möchten ja schließlich sinnvolle Beispiele und keine die nur für sich stehen.

Der letzte Schritt

Baue dinge! Die letzten Übungen zu einem Thema bestehen im FreeCodeCamp immer daraus selbstständig Dinge zu bauen. Das muss nichts großes oder außergewöhnlich sein. Vielleicht ist so gar ganz sinnvoll etwas umsetzen dessen Algorithmen und Datenstrom man schon verstanden hat. So kann man sich voll und ganz auf das Framework konzentrieren.

Zusammengefast

  1. Breche Frameworks und Sprachen in kleine Teile auf
  2. Gehe eins nach dem anderen durch.
  3. Schreibe selbst die banalsten Code Beispiele noch ein mal mit eigenen Gedanken auf
  4. Setze deine gelernten Fähigkeiten direkt in die Praxis um

Vielen dank fürs Leben lesen, falls ihr darüber weiter quatschen möchtet, haut mich auf Mastodon, Twitter oder per Mail an!


I’m guilty… I lost my keys… so here is a list of my current PGP Keys:

  • KurzGedanke@pm.me E7E7B4EA
    • C593 DD46 1D18 1A37 E0A4  5715 F328 3F0B E7E7 B4EA
  • thore.jahn@pm.me 8D0AE8A8
    • 868E 62A0 99AF 54BF 1FD3  C61B 09F5 F16E 8D0A E8A8
  • thore.d.jahn@studmail.w-hs.de 92ED93ED
    • 0369 B97F A3B1 8BCD FB25  8466 411B BDF7 92ED 93ED

Click on the Key ID to download the key directly.

If you don’t trust this blog (don’t trust this blog) please look up the keys at your trustworthy keyserver.


Das Bochumer Rathaus von außen.

Seit über einem Jahr steht eine Amazon Alexa in dem Rathaus von Bochum. Aufmerksam bin ich darauf über einen derWesten1 Artikel geworden. Wie sich natürlich rausstellt, sind nicht alle Menschen darüber so begeistert wie es eingehend erwartet worden ist. Und das kann ich sehr gut verstehen.

Grundsätzlich finde ich die Idee von einem Smart Speaker in einem Rathaus ganz cool. Es ist öffentlich, jeder kann ihn nutzen und wieder ein kleiner Schritt zur Digitalisierung. Aber... warum Amazon? Warum ein Echo? Klar, es ist komfortable. Aber warum Werbung für ein Unternehmen machen und gar noch eins dessen Ethik recht fragwürdig ist. Dazu kommt noch natürlich die Frage nach dem Datenschutz und was der kleine Dot so alles tolles mithört. Ich würde zumindest nicht wollen, dass meine Gespräche, die ich im Flur eines Rathauses führe, von einem Weltkonzern mitgehört werden. Diese können nämlich durchaus sensitive Informationen enthalten.

Dabei gibt es doch Alternativen wie Mycroft AI 2, welche Open Source sind und von Haus aus schon Datenschutzfreundlicher sind. Die Bochum Marketing GmbH Argumentiert:

Für die Stadtwerber ist die Zielsetzung klar: „Wer einmal entdeckt hat, dass Alexa Antworten zu Bochum liefert, und den Mehrwert erkennt, der wird sich auch daheim daran erinnern und diesen Kanal nutzen“, so Marketing-Chef Schiefelbein.

Aber was Argumentiert dagegen zweispurig zu Fahren und sowohl die Alexa neben dem Mycroft laufen zu lassen? Ein Backend für den Alexa Skill wird wohl geben.

Um zu schauen ob zum Beispiel zweispurig möglich wäre, habe ich eine FragDenStaat3 gestellt um zu Erfahren, was die Kosten der Aufstellung waren und was die Folgekosten sind, die Echo-Dots zu warten.4

Jetzt heißt es auf die Antwort der Stadt Bochum warten und während dessen im Rathaus zu schweigen.

Rathaus Bild CC BY-SA Frank Vincentz


Es ist Tag 1. Es ist Tag 2 … es ist Tag 4 und der Congress ist für die meisten Menschen um. Doch.. was kommt danach? Tag 5? Tag 6? Ich wusste es nicht. Weihnachtsfeiertage und der Congress haben diese unangenehme Eigenschaft das Zeitgefühl komplett zu zerschießen. Das ist durchaus sehr angenehm, aber durchaus auch schwierig wieder zu finden wenn man sich nicht aktiv dafür entscheidet. Long Story Short: Ich habe einfach mal Vorlesungen verpasst, weil ich der festen Überzeugung war es wäre Mittwoch und nicht Donnerstag. Das war gar nicht mal so angenehm. Aus der Frustierheit überkam mich die Idee meines Lebens. Ich schreibe einen Mastodon Bot.

What The Day?

Screenshot des WhatTheDay botsin.space Accounts

What the day? ist ein Mastodon Bot der alle zwölf Stunden, jeweils um 08:00 Uhr und 20:00 Uhr den Aktuellen Wochentag, das Datum und die Uhrzeit postet. Er ist Open Source und man kann ihn auf GitHub finden.

Wie ist er geschrieben?

Ich war sehr überrascht wie einfach es ist Mastodon Bots in Python zu schreiben. Im Grunde nutze ich zwei Librarys. Ein mal mastodon.py und schedule. Mastodon.py ist einfach eine Python API Wrapper für Mastodon und das hier all der Code den es benötigt um einen Post zu verfassen.

def post():
    '''
    Login for Mastdon and tooting a toot with the current weekday, date and time.
    '''
    weekday = time.strftime('%A')
    dateDMY =time.strftime('%d/%m/%Y')
    clock = time.strftime("%X")

    mastodon = Mastodon(
        api_base_url = 'https://botsin.space/',
        access_token = cred.accessToken
    )
    mastodon.log_in(
        cred.email,
        cred.password,
    )
    mastodon.status_post('Today is {}, the {} and it is {} o\'clock!'.format(weekday, dateDMY, clock), visibility='unlisted')

Die ersten drei Variablen, weekday, dateDMY und clock dienen hier jeweils dazu den aktuellen Wochentag, Datum und Uhrzeit zu bekommen. Dadrunter findet die Anmeldung bei Mastodon statt, wobei cred.$ auf ein weiteres .py file verweist um meine Anmeldedaten aus Git raus zu halten. Bei mastodon.status_post() ist das Argument visibility='unlisted' noch relevant, da es eher ungerne gesehen wird, wenn Bots auf die Lokale Timeline poste. Auch wenn mein Bot auf https://botsin.space/ läuft, möchte ich mich dieser “guten Sitte” anschließen.

def main():
    '''
    Runs the schedule for the toots at 8 o'clock and 20 o'clock.
    '''
    schedule.every().day.at('08:00').do(post)
    schedule.every().day.at('20:00').do(post)
    while True:
        schedule.run_pending()
        time.sleep(1)


if __name__ == "__main__":
    main()

Der letzte abschnitt ist die main Funktion mit der schedule library, die auch recht eingäning zu lesen und zu nutzen ist.

Im Grunde habe ich hier also einen funktionieren Mastodon Bot in knapp 40 Zeilen. Wenn das mal keine Motivation ist, selber einen zu schreiben, dann weiß ich auch nicht.

Zum Schluss läuft der Bot auf einem Raspberry Pi der hier bei mir Zuhause steht. Da ich von Docker und systemd nicht all die große Ahnung habe, habe ich mich bei diesem Ask Ubuntu Eintrag bemüht und den Befehl nohup gefunden, womit der Bot nun ganz gemütlich im Hintergrund läuft. Leider werde ich bei einem Neustart des Pi den Bot ebenfalls Neustarten müssten. Vielleicht investiere ich da mal ein wenig in Docker oder systemd.

Falls ihr noch Fragen dazu habt, könnt ihr mich gerne auf Mastodon kontaktieren. kurzgedanke@chaos.social

Ansonsten wünsch ich euch noch viel Spaß beim eigenen Bot schreiben und um das aktuelle Datum nicht zu vergessen folgt @whattheday@botsin.space!


Die Geschichte von Version 1

Das erste Design von kurzgedanke.me ist mittlerweile ca. ein Jahr alt. Es war das erste goHugo Theme, welches ich mit meinen eigenen Händen geschrieben habe. Ich war lange sehr stolz darauf, aber nach der Zeit haben sich einige Design-Schwächen aufgetan. Gar nicht mal so sehr in der Strukturierung der Website, sondern mehr auf der farblichen Ebene. Dazu kam, dass ich kurzgedanke.me als einen “schlichten” und “schnellen” Blog geplant hatte. Mit jedem einzelnen CSS und Javascript verschwand vor allem die Schnelligkeit. Am Ende war es Bootstrap, jQuery, HighlightJS, OpenDyslexic, Source Code Pro von Google und eigenes Javascript zum Wechseln der Themes. Eigentlich eine ganz schöne Menge und gerade durch meinen eigenen, zugegeben nicht ganz perfekten, Theme Changer dauert es für die ersten meaningful Builds eine Weile.

Design Entscheidungen bei Version 2

Ein Screenshot von KurzGedanke.me

Die Design-Entscheidungen von kurz-hugo-v2 ist dieselbe wie bei der Version 1. Es soll schnell und schlicht sein. Ich schreibe meinen Blog nicht für Werbung, sondern für meinen Content. Und der soll im Vordergrund stehen.

Farben

Zu Beginn stand eine Farbwahl auf dem Plan, das war ja schließlich mein eigener und größter Kritikpunkt an Version 1.

Ich entschied mich also für Folgendes:

$white-bg: #FDFFFC;
$blue-link: #507B8E;
$purple-link: #53375C;
$gray-highlight: #46494C;
$text-black: #020100;

Was wohl am ehesten auffällt ist, dass schwarz und weiß kein 100 % schwarz und weiß sind. Dies kommt noch ein wenig aus meiner 3D Design- und Bildbearbeitungszeit. Im wahren Leben gibt es kein 100 % weiß oder schwarz und ich finde den Anblick davon ein wenig angenehmer, als wenn ich auf einen strahlend weißen Bildschirm schauen. Und das, obwohl die Abweichungen so minimal sind.

Die anderen Farben sind alle durch einen Online-Generator entstanden, da ich es mir nicht zugetraut habe, selber eine komplette Palette zu erstellen. Gerade aber mit dem lila und blau bin ich sehr zufrieden, da es meiner Meinung nach perfekt in die Schlichtheit reinpasst.

Layout

Mit dem Layout kommt mein zweiter Ansatzpunkt:

No more navigation bar!

Ich wollte es schlicht haben. Eine große, dicke, vollgestopfte NavBar, die mit über den Bildschirm schwebt, ist nicht schlicht. Das geht natürlich ein wenig auf die Navigation und ich habe auch noch keine gute Idee, wie ich da etwas einbauen kann, was zum restlichen Design passt und nicht “drauf geklatscht wirkt”. Bis dato sind die unsichtbaren Tags die einzige Möglichkeit, durch den Blog zu suchen.

Das Layout der Blog Einträge gefällt mir schon sehr so, wie es ist, hier muss ich nur noch an dem CSS arbeiten und vor allem an der Responsiveness dessen. Aber auch das kriege ich noch hin - allerdings ist CSS nicht meine allergrößte stärke. g

Technologien

Nicht nur die Farben und das Layout sind geschrumpft, sondern auch die Technologien, die ich nutze.

Von Bootstrap (in der minified Version 127kb) bin ich auf Milligram umgestiegen, welches in der minified Version nur 7kb hat. Plus normalize.css, welches für Milligram notwendig ist, kommen wir damit auf ingesamt 14kb. Das sind 113kb weniger als ein Bootstrap allein. Leider bin ich durch den ‘Theme Changer’ immer noch auf jQuery angewiesen, allerdings mit der voranschreitenden Browser-und Javascript-Technologie ist das das nächste, welches ich gerne loswerden möchte.

Auch wenn die Zahlen in Zeiten des Gigabit-Internets und Edge auf dem Land recht klein klingen, bedeuten diese am Ende des Tages doch Millisekunden, welche erheblich wahrnehmbar sind.

Die Font opendyslexic.org ist als von mir extern geladene Schriftart die Einzige. Der Rest des Blogs nutzt die Georgia Font Family, welche vor allem aus dem Buchdruck bekannt ist und insbesondere auf Geräten mit einer hohen Pixeldichte wunderschön aussieht und ein Buch-Feeling vermittelt.

Cyberpunk

KurzGedanke.me in seinem schwarz und neonpinken Cyberpunk-Theme

Als großer Freund des Cyberpunks war es für mich nur einen kurzen Weg entfernt zu der Entscheidung: “Es muss ein Cyberpunk-Theme geben!”

Inspiration dafür kam dann von der Mastodon Instanz computerfairi.es, bei der ich mir dann die ein oder andere Farbe geklaut habe, welche ich dann auf meinem normalen Dark-Theme aufbaute. Ich weiß bis heute nicht, ob ich dieses Theme selber benutzen möchte, aber irgendwie reizt es mich und meinem inneren Cyberpunk doch schon sehr.

Fazit

Dafür, dass ich kein Designer und auch kein Web-Designer bin, finde ich, dass ich hier etwas abgeliefert habe, wo ich für mich persönlich stolz drauf sein kann. Weitere Arbeiten werden auf jeden Fall folgen und davon gibt es noch recht viele.

Falls du dir anschauen möchtest, was genau ich hier fabriziert habe, findest du das goHugo Theme auf GitHub unter einer MIT License: kurz-hugo-v2

Wahrscheinlich hast du so gar noch Ideen oder Verbesserungsvorschläge für diesen Blog. Diese kannst du mir gerne auf Mastodon mitteilen: chaos.social/@KurzGedanke

Ansonsten wünsche ich dir noch viel Spaß auf kurzgedanke.me!

Lade diesen Artikel als .pdf herunter