initial commit, add Publish, add minimal theme, add content

2024-03-24 20:24:51 +01:00
commit cd2f440141
1240 changed files with 194709 additions and 0 deletions
@@ -0,0 +1,137 @@
+---
+layout: post
+title: "Install Syncthing on Uberspace 6 in a Subdomain"
+categories:
+  - Tutorials
+tags:
+  - English
+  - Self-Hosted Software
+
+last_modified_at: 2020-07-18
+excerpt_separator: <!-- more -->
+---
+
+<div class="alert alert-warning">
+  <h2 class="alert-heading">Uberspace 6 has reached <a href="https://en.wikipedia.org/wiki/End-of-life_(product)">EOL</a></h2>
+  <p>If you want to use Syncthing, you should create an Uberspace 7 and refer to the the <a href="https://lab.uberspace.de/guide_syncthing.html">Syncthing tutorial from the Uberlab</a>!</p>
+</div>
+
+This short tutorial explains how to install [Syncthing](https://syncthing.net) on a [Uberspace](https://uberspace.de). It is based on the [~~Tutorial~~](https://maxhaesslein.de/dachboden/syncthing-auf-uberspace/) from [Max Haesslein](http://maxhaesslein.blog). Thanks Max!
+<!-- more -->
+
+## Download newest Syncthing version
+
+Connect to your uberspace:
+```
+ssh <user>@<uberspace>
+```
+
+Download the [newest Syncthing version](https://github.com/syncthing/syncthing/releases/latest) for Linux:
+```
+cd ~/etc/  
+wget <NEWEST AMD64 LINUX VERSION>
+```
+
+Extract the file (eXtract Ze Files!) and move it to its own folder:
+```
+tar -xzf <FILENAME>
+mv <FOLDERNAME> syncthing/
+```
+
+Link it to your binaries folder and start it once:
+```
+ln -s ~/etc/syncthing/syncthing ~/bin/syncthing
+syncthing
+```
+Close the program with CTRL-C.
+
+
+## Prepare your Uberspace
+
+Get the ports we are going to use for GUI and sync:
+```
+uberspace-add-port -p tcp --firewall
+🚀  All good! Opened tcp port <PORT1>.
+uberspace-add-port -p both --firewall
+🚀  All good! Opened tcp port <PORT2>.
+```
+
+Add a subdomain to make your Syncthing easily accessible; also make sure it is possible to connect through HTTPS:
+```
+uberspace-add-domain -w -d sync.<DOMAIN>.de
+uberspace-letsencrypt
+uberspace-letsencrypt-renew -f
+```
+If you already use LetsEncrypt, you have to add the domain to your configuration. Just follow the steps displayed after the `uberspace-letsencrypt`. Don't forget to add the subdomain to your domain registrar DNS records aswell, so it gets redirected correctly!
+
+Now, create the corresponding folder on the Uberspace:
+```
+mkdir /var/www/virtual/<UBERSPACE>/sync.<DOMAIN>.de
+```
+
+Edit the `.htaccess` so it sends you to the correct port:
+```
+cd /var/www/virtual/<UBERSPACE>/sync.<DOMAIN>.de/
+vim .htaccess
+```
+
+```
+RewriteEngine On
+RewriteRule (.*) http://localhost:<PORT1>/$1 [P]
+```
+
+
+## Modify the Syncthing config file
+
+Open the syncthing config file:
+```
+cd ~/.config/syncthing
+vim config.xml
+```
+
+Find the GUI entry and replace the port with `<PORT1>`:
+```
+...
+<gui enabled="true" tls="false" debugging="false">
+  <address>127.0.0.1:<PORT1></address>
+...
+```
+
+Find the options entry and replace the port with `<PORT2>`:
+```
+...
+<options>
+...
+  <localAnnouncePort><PORT2></localAnnouncePort>
+  <localAnnounceMCAddr>[ff12::8384]<PORT2></localAnnounceMCAddr>
+...
+```
+
+
+## Setup Syncthing as a service
+
+If you don't have any services running, you have to setup the Daemon Tools first: [Uberspace Wiki, Daemon Tools](https://wiki.uberspace.de/system:daemontools).
+
+After setting up the services, you can add Syncthing as a service and restart it once:
+```
+uberspace-setup-service syncthing ~/bin/syncthing
+svc -du ~/services/syncthing
+```
+
+
+## Secure your Syncthing instance
+
+Your Syncthing is now available via `sync.<DOMAIN>.de`. However, it is accessible by everyone on the web. Therefore you should secure it. Got to the Syncthing Settings:
+![You can access your settings via Actions -> Settings](/img/20180602-Syncthing-settings.png)
+
+**IMPORTANT: Do not check `Use HTTPS for GUI` you will lose access to your GUI. To get it back you have to find the TLS option in your Syncthing config and set it to `false` again. You connections will have TLS and will be secure without checking this box.**
+
+And now enter your admin user and password in the corresponding fields:
+![You can access your settings via Actions -> Settings](/img/20180602-Syncthing-settings2.png)
+
+
+
+
+## The end
+
+Save and that's it! You now have a Syncthing service running on Uberspace! Ideal for private documents you don't want the NSA to have.
@@ -0,0 +1,85 @@
+---
+layout: post
+title: "Zusammenfassung von Fredmund Maliks Führen, Leisten, Leben"
+categories:
+  - Summaries
+tags:
+  - Deutsch
+  - Philosophy
+
+last_modified_at:
+excerpt_separator: <!-- more -->
+---
+
+[Fredmund Maliks](https://de.wikipedia.org/wiki/Fredmund_Malik) [Führen, Leisten, Leben](https://www.amazon.de/dp/3593501279/) ist ein Management-Standardwerk. Es schildert wichtige Aspekte des Managements und die Philosophie des Autors. Dabei steht vor allem eine These im Zentrum: Gutes Management kann man lernen und ist **keine** gottgegebene Fähigkeit. Das Buch legt dar, wie man diese Fähigkeit lernen kann. Ich habe das Buch gelesen und für Dich zusammengefasst.
+
+<!-- more -->
+
+
+## Der Manager
+
+* Der Manager ist eine der wichtigsten Personen in der modernen Gesellschaft, da die Schnittstellen zwischen Berufen immer größer und das Leben immer schneller wird.
+* Der Manager muss als Organisation denken. Er ist Teil eines größeren Komplex und trägt zu der Wirksamkeit und zum Erfolg der Gesamtheit bei.
+* Wie bei vielen Berufen, wird Exzellenz als Manager durch Üben erzielt. Dabei spielt Talent zwar eine große Rolle: nur wer Talent mitbringt kann Management beherrschen. Aber prinzipiell kann **jeder** solide Management-Erfolge erzielen.
+
+
+## Management-Prinzipien
+
+Die wichtigsten Grundprinzipien der wirksamen und qualitativ wertvollen Führung sind:
+  * Resultat- und Zielorientierung
+  * Das Denken als Organisation und der Beitrag zum Ganzen
+  * Fokussierung auf einige wenige wichtige Punkte und Herausdestillieren dieser Punkte: Fokus!
+  * Stärken-Denken und nicht Schwächen-Denken, wie es in der Gesellschaft üblich ist: Stärken stärken!
+  * Positives Denken und Chancen-Fokus, nicht Problem-Fokus
+  * Vertrauen und Integrität, also z.B. Schutz der Mitarbeiter nach außen und oben und nicht Beschmücken mit fremder Leistung
+  * Kontrollieren, aber auch mal *fünfe gerade sein lassen*; Kontrolle basiert auf Vertrauen
+  * Individuelle Förderung der Mitarbeiter
+
+
+## Führung einer Organisation
+
+* Zur Umsetzung dieser Art der Führung:
+  * Arbeiten mit Zielen (unbürokratisch!) und auch (persönlichen) Jahreszielen
+  * Effiziente Organisation und vermeiden von zu viel “Organisitis”; aber nicht jedes Problem durch Neu-Organisation lösen, wenn es nicht dadurch zu lösen ist
+  * Die drei Grundfragen der Organisation:
+    1. Wie müssen wir uns organisieren, damit das, wofür der **Kunde** uns bezahlt, im Zentrum der Aufmerksamkeit steht und von dort nicht wieder verschwinden kann?
+    2. Wie müssen wir uns organisieren, damit das, wofür wir unsere **Mitarbeiter** bezahlen, von diesen auch wirklich getan werden kann?
+    3. Wie müssen wir uns organisieren, damit das, wofür die Firmenspitze/das Top-Management, bezahlt wird, von diesem auch wirklich getan werden kann?
+* Zeichen schlechter Organisation:
+  * Zu viele, unnötige Managementebenen
+  * Zu viel bereichsübergreifende Arbeit: eine Organisation funktioniert dann am besten, wenn man so wenig wie nötig bereichsübergreifend arbeiten muss
+  * Zu viele Sitzungen, zu viele Leute
+  * Zu viele Arbeiter auf Projekten; am effizientesten ist es, wenn ein kompetenter Mitarbeiter ungestört arbeiten kann
+  * Zu viele Koordinatoren und Assistenten
+  * Umfokussierte Jobs
+
+
+## Entscheidungen richtig treffen
+
+Fundierte Entscheidungen treffen, dabei die Schlüssel-Spieler in den Prozess mit einbeziehen (dabei aber nicht aus Wohlwollen berücksichtigen, sondern nur aufgrund von tatsächlicher Wichtigkeit im Rahmen der Entscheidung!).
+
+Der Entscheidungsprozess:
+  1. Die präzise Bestimmung des Problems
+  2. Die Spezifikation der Anforderungen, die die Entscheidung erfüllen muss
+  3. Das Herausarbeiten aller Alternativen
+  4. Die Analyse der Risiken und Folgen für jede Alternative und die Festlegung der Grenzbedingungen
+  5. Der Entschluss selbst
+  6. Der Einbau der Realisierung in die Entscheidung
+  7. Die Etablierung von Feedback, inklusive Follow-up und Follow-through
+
+
+## Führungswerkzeuge
+
+* **Die Sitzung:** davon nicht zu viele (s.o.), die Sitzungen nacharbeiten und bei den Verteilten Aufgaben auch Nachfassen (Follow-up)!
+  * Man sollte sich die Typen von TOP klarmachen und vorher überlegen, wie man mit ihnen umgeht:
+    * Echte Standards (die wichtigsten Punkte die besprochen werden müssen).
+    * Dauerbrenner (wiederkehrende Themen, die man nicht richtig lösen kann, z.B. Probleme beim Betriebsklima): Sollte man langfristig nicht dulden; Lösung finden ist das A und O.
+    * Verschiedenes am Ende aller TOP: Sollte man nicht dulden; ist politisches Instrument, ggf. sogar um ein Thema “durchzudrücken”.
+  * Jeder TOP sollte auch eine Aktion beinhalten; ist das nicht der Fall, verkommt die Sitzung schnell zur “Laber-Runde”
+  * Protokolle wo nötig (ggf. gesetzlich vorgeschrieben); wo optional: sinnvolles Protokoll-Führen (z.B. die Aufgabenverteilung dokumentieren, um sie als Follow-up-Mittel zu verwenden)
+* **Der Bericht:** der schriftliche Bericht ist das effizientes Mittel der Daten-Kommunikation. Der Bericht muss wirksam sein! Daher sollte Zielgruppen-orientiert gearbeitet (z.B. der Bericht geht an einen Juristen: Fokus auf Text, an einen Ingenieur: Fokus auf Grafiken und Statistik), auf realistische Struktur geachtet werden und der Bericht sollte keine unnötigen Inhalte enthalten
+* **Job Design, Assignment Control:** Jobs sollten gut definiert werden. Nicht zu großer, nicht zu kleiner Aufgabenspielraum. Vermeiden von Unnötigkeiten. Und Positionen sollten nicht starr sein, sondern eine Möglichkeit der Weiterentwicklung der Arbeitsstelle (in diesem Fall nicht zwingend des Mitarbeiters!) haben. Ist eine bestimmte Position oder Aufgabe nicht mehr notwendig, muss sie überführt/abgeändert werden.
+* **Budget und Budgetierung:** das wichtigste Tool eines Managers. Richtig benutzt, lässt sich darüber alles steuern. Auch Zeit-, Innovations-, Worst-Case-Budgets benutzen! Ggf. erweitern! Idee des Budgets: Ich habe limitierte Ressourcen, diese sinnvoll verteilen. Weiterführende Schlagworte: Zero-Base-Budgeting, Life-Cycle-Budgeting
+* **Leistungsbeurteilung:** Möglichst nicht standardisieren.
+* **Systematische Müllabfuhr:** Regelmäßige Reviews und überlegen, was noch notwendig ist und was nicht. Unnötiges ausmerzen! In allen Bereichen des Unternehmens.
+* **Persönliche Arbeitsmethodik:** Man sollte sich angewöhnen, sie regelmäßig auf Wirksamkeit zu überprüfen. Wenn man in der Position ist zu delegieren, sollte man das nutzen. Ist hochgradig individuell. 
@@ -0,0 +1,47 @@
+---
+layout: post
+title: "Basic Things to Consider When Starting an Online Business"
+categories:
+  - Summaries
+tags:
+  - English
+  - Checklist
+
+last_modified_at: 2019-03-25
+excerpt_separator: <!-- more -->
+---
+
+This post is a really short excerpt from a flyer I found a while ago. It lists thing you should consider, if you want to try to start an online business. Think about it as a checklist.
+
+<!-- more -->
+
+## Fundamental rules
+
+  - You must care about it.
+  - You must be able to become the authority on it.
+  - You must be able to differentiate yourself.
+  - You must fulfill a need.
+  - Your niche must be commercial.
+
+## Ways to make money
+
+  - Affiliate marketing.
+  - Advertising.
+  - Selling your own products.
+  - Drop shipping (white labeling) - offer products redirect order to supplier.
+
+## Setup process
+
+  - Deciding on a decent name for your online business.
+  - Registering your domain name, web hosting, and installing WordPress.
+  - Designing your website & logo.
+  - Registering social media profiles.
+  - Creating an online store.
+  - Setting up advertising, affiliate, and merchant accounts.
+  - Setting up Google Analytics.
+
+## Necessary systems
+
+  - A system for getting attention (Venture Harbour, What Is My Comfort Zone, FanDistro).
+  - A system for capturing data.
+  - A system for selling products.
@@ -0,0 +1,29 @@
+---
+layout: post
+title: "Use Picture-in-Picture Mode on Mac and iPad with a Bookmarklet"
+categories:
+  - Tips
+tags:
+  - English
+  - Apple
+
+last_modified_at: 2020-07-20
+excerpt_separator: <!-- more -->
+---
+
+[Quinn](https://twitter.com/SnazzyQ) from [Snazzy Labs](https://www.youtube.com/channel/UCO2x-p9gg9TLKneXlibGR7w) just posted an [interesting video](https://www.youtube.com/watch?v=cqjpa8-Cp-s) about some macOS utilities. I love small utilities, but I like it even better, when a problem can be solved with system functions. That is the case here. He mentions Helium - an app to use a form of picture in picture mode for websites that don't support the native PIP.
+
+However, there is a better solution! And this solution works on Mac as well as iPad!
+
+<!-- more -->
+
+You can use a small [bookmarklet](https://en.wikipedia.org/wiki/Bookmarklet) that pushes the current HTML5 video on screen into the native PIP. And yes, it also works with Netflix, **if** you are on macOS Mojave or up (as far as I can tell, Netflix doesn't run in the previous versions of Safari).
+
+Create a new bookmark, enter the following string as the address, give it a nice emoji (like this: ⤵️), voilà! You can now use the native PIP for nearly all your videos!
+Here is the code:
+
+```
+javascript:document.querySelector(%22video%22).webkitSetPresentationMode(%22picture-in-picture%22);
+```
+
+
@@ -0,0 +1,71 @@
+---
+layout: post
+title: "How to Begin an English Sentence"
+categories:
+  - Tutorials
+tags:
+  - English
+  - Writing
+
+last_modified_at:
+excerpt_separator: <!-- more -->
+---
+
+During the writing of my thesis, I collected some English words you can use two empower your writing style.
+
+<!-- more -->
+
+Addition:
+also, again, as well as, besides, coupled with, furthermore, in addition, likewise, moreover, similarly
+
+Consequence:
+accordingly, as a result, consequently, for this reason, for this purpose,
+hence, otherwise, so then, subsequently, therefore, thus, thereupon, wherefore
+
+Generalizing:
+as a rule, as usual, for the most part,
+generally, generally speaking, ordinarily, usually
+
+Exemplifying:
+chiefly, especially, for instance, in particular, markedly, namely,
+particularly, including, specifically, such as
+
+Illustration:
+for example, for instance, for one thing, as an illustration,
+illustrated with, as an example, in this case
+
+Emphasis
+above all, chiefly, with attention to, especially, particularly, singularly
+
+Similarity:
+comparatively, coupled with, correspondingly, identically, likewise, similar, moreover, together with
+
+Exception:
+aside from, barring, besides, except, excepting, excluding, exclusive of, other than, outside of, save
+
+Restatement:
+in essence, in other words, namely, that is, that is to say,
+in short, in brief, to put it differently
+
+Contrast and Comparison:
+contrast, by the same token, conversely, instead, likewise,
+on one hand, on the other hand, on the contrary, rather,
+similarly, yet, but, however, still, nevertheless, in contrast
+
+Sequence:
+at first, first of all, to begin with, in the first place, at the same time,
+for now, for the time being, the next step, in time, in turn, later on,
+meanwhile, next, then, soon, the meantime, later, while, earlier,
+simultaneously, afterward, in conclusion, with this in mind,
+
+Summarizing:
+after all, all in all, all things considered, briefly, by and large, in any case, in any event,
+in brief, in conclusion, on the whole, in short, in summary, in the final analysis,
+in the long run, on balance, to sum up, to summarize, finally
+
+Diversion:
+by the way, incidentally
+
+Direction:
+here, there, over there, beyond, nearly, opposite, under, above,
+to the left, to the right, in the distance
@@ -0,0 +1,52 @@
+---
+layout: post
+title: "Blackhole"
+categories:
+  - Art
+tags:
+  - English
+  - Reading
+
+last_modified_at:
+excerpt_separator: <!-- more -->
+---
+
+This is a text I found on the internet and saved it. If anybody knows the source, please tell me, so I can give credit.
+
+<!-- more -->
+
+# Blackhole
+
+Imagine, just for a moment, that you are aboard a spaceship equipped with a magical engine capable of accelerating you to any arbitrarily high velocity. This is absolutely and utterly impossible, but it turns out it'll be okay, for reasons you'll see in a second.
+
+Because you know your engine can push you faster than the speed of light, you have no fear of black holes. In the interest of scientific curiosity, you allow yourself to fall through the event horizon of one. And not just any black hole, but rather a carefully chosen one, one sufficiently massive that its event horizon lies quite far from its center. This is so you'll have plenty of time between crossing the event horizon and approaching the region of insane gravitational gradient near the center to make your observations and escape again.
+
+As you fall toward the black hole, you notice some things which strike you as highly unusual, but because you know your general relativity they do not shock or frighten you. First, the stars behind you — that is, in the direction that points away from the black hole — grow much brighter. The light from those stars, falling in toward the black hole, is being blue-shifted by the gravitation; light that was formerly too dim to see, in the deep infrared, is boosted to the point of visibility.
+
+Simultaneously, the black patch of sky that is the event horizon seems to *grow* strangely. You know from basic geometry that, at this distance, the black hole should subtend about a half a degree of your view — it should, in other words, be about the same size as the full moon as seen from the surface of the Earth. Except it isn't. In fact, it fills half your view. Half of the sky, from notional horizon to notional horizon, is pure, empty blackness. And *all* the other stars, nearly the whole sky full of stars, are crowded into the hemisphere that lies behind you.
+
+As you continue to fall, the event horizon opens up beneath you, so you feel as if you're descending into a featureless black bowl. Meanwhile, the stars become more and more crowded into a circular region of sky centered on the point immediately aft. The event horizon does not *obscure* the stars; you can watch a star just at the edge of the event horizon for as long as you like and you'll never see it slip behind the black hole. Rather, the field of view through which you see the rest of the universe gets smaller and smaller, as if you're experiencing tunnel-vision.
+
+Finally, just before you're about to cross the event horizon, you see the entire rest of the observable universe contract to a single, brilliant point immediately behind you. If you train your telescope on that point, you'll see not only the light from all the stars and galaxies, but also a curious dim red glow. This is the cosmic microwave background, boosted to visibility by the intense gravitation of the black hole.
+
+And then the point goes out. All at once, as if God turned off the switch.
+
+You have crossed the event horizon of the black hole.
+
+Focusing on the task at hand, knowing that you have limited time before you must fire up your magical spaceship engine and escape the black hole, you turn to your observations. Except you don't see anything. No light is falling on any of your telescopes. The view out your windows is blacker than mere black; you are looking at non-existence. There is *nothing* to see, *nothing* to observe.
+
+You know that somewhere ahead of you lies the singularity … or at least, whatever the universe deems fit to exist at the point where our mathematics fails. But you have no way of observing it. Your mission is a failure.
+
+Disappointed, you decide to end your adventure. You attempt to turn your ship around, such that your magical engine is pointing toward the singularity and so you can thrust yourself away at whatever arbitrarily high velocity is necessary to escape the black hole's hellish gravitation. But you are thwarted.
+
+Your spaceship has sensitive instruments that are designed to detect the gradient of gravitation, so you can orient yourself. These instruments should point straight toward the singularity, allowing you to point your ship in the right direction to escape. Except the instruments are going haywire. They seem to indicate that the singularity lies *all around you.* In *every* direction, the gradient of gravitation increases. If you are to believe your instruments, you are at the point of lowest gravitation inside the event horizon, and every direction points "downhill" toward the center of the black hole. So *any direction you thrust your spaceship* will push you closer to the singularity and your death.
+
+This is clearly nonsense. You cannot believe what your instruments are telling you. It must be a malfunction.
+
+But it isn't. It's the absolute, literal truth. Inside the event horizon of a black hole, there *is* no way out. There are no directions of space that point away from the singularity. Due to the Lovecraftian curvature of spacetime within the event horizon, all the trajectories that *would* carry you away from the black hole now point into the past.
+
+In fact, this is the definition of the event horizon. It's the boundary separating points in space where there *are* trajectories that point away from the black hole from points in space where there are none.
+
+Your magical infinitely-accelerating engine is of no use to you … because you cannot find a direction in which to point it. The singularity is all around you, in every direction you look.
+
+And it is getting closer.
@@ -0,0 +1,26 @@
+---
+layout: post
+title: "Die Rechnung"
+
+tags:
+  - Deutsch
+  - Checklist
+
+last_modified_at: 2019-03-25
+excerpt_separator: <!-- more -->
+---
+
+Die Rechnung ist eines der wesentlichsten Dokumente des Geschäftsverkehrs. Da sie ein formales Dokument ist, müssen einige Regeln eingehalten werden, damit eine Rechnung _gültig_ ist und der Kunde bezahlen muss. Der Gesetzgeber hat eindeutig festgelegt, welche Angaben enthalten sein müssen ([§ 14 UStG](https://www.gesetze-im-internet.de/ustg_1980/__14.html)):
+
+<!-- more -->
+
+- Der vollständige Name und die Anschrift des Rechnungs**steller**
+- Der vollständige Name und die Anschrift des Rechnungs**empfänger**
+- Die Steuernummer des Rechnungs**stellers**
+- Das Ausstellungsdatum
+- Eine eindeutig Rechnungsnummer
+- Die Menge und Art der gelieferten Leistung
+- Das Datum der Lieferung (auch wenn identisch mit oben!)
+- Der Netto-Betrag der Lieferung
+- Den anzuwendenden Steuersatz
+- Den anfallenden Steuerbetrag
@@ -0,0 +1,29 @@
+---
+layout: post
+title: "iPad Gestures"
+categories:
+  - Tips
+tags:
+  - English
+  - Apple
+
+last_modified_at:
+excerpt_separator: <!-- more -->
+---
+
+I did it! I bought an iPad and an Apple Pencil for christmas last year. I write a lot for my university classes and I didn't like that I often had to cross out things on paper (because I wrote something down wrong) and had to write them again. I was not sure, if an iPad is the right device for me -- but turns out it is. It is awesome. If you make a mistake, you erase it and write it again. Wrong sequence of your sentences? Just move them around. The notes come out awesome.
+
+Additionally I learned a few gestures that are really useful:
+
+<!-- more -->
+
+- Swipe with two fingers on the virtual keyboard to move cursor.
+- Tap and hold with two fingers to begin selecting, then move fingers to expand selection, OR
+- Tap once with two fingers to select single word.
+- Double tap with two fingers to select sentence.
+- Triple tap with two fingers to select paragraph.
+
+While text is selected:
+- Swipe left/up with two fingers to move left selection handle.
+- Swipe right/down with two fingers to move right selection handle.
+- Tap once with two fingers to exit selection and return to cursor mode.
@@ -0,0 +1,81 @@
+---
+layout: post
+title: "Use the Pumping Lemma for Regular Languages"
+categories:
+  - Tutorials
+tags:
+  - Proof
+  - Computer Science
+
+last_modified_at: 2019-04-04
+excerpt_separator: <!-- more -->
+---
+
+This semester I finished my course about automata and languages. I learned a lot and it was really enjoyable. From this field, there was [a question about the Pumping Lemma on the computer science subreddit](https://old.reddit.com/r/computerscience/comments/atrs4y/pumping_lemma_in_theory_of_computation/). So naturally, if someone ask about a thing I know about, I'll try to explain it as best as I can -- repetition is key for retaining knowledge!
+
+<!-- more -->
+
+# My Explanation
+
+[My original post on Reddit.](https://old.reddit.com/r/computerscience/comments/atrs4y/pumping_lemma_in_theory_of_computation/eh3aw9k/)
+
+To understand the PL, we think about it in two steps. I'll do it for the regular languages. You can do the same on your own for the context free languages. The idea is the same.
+
+1. We create a visual model to understand what it is about.
+2. We do a PL proof.
+
+## 1. Creating a visual model in your mind.
+
+Firstly, we have to keep in mind that we want to show that a language is not regular. Let's reason a little bit more about regular languages:
+
+- Regular languages can be accepted by finite automata (FA). That means: if your language is regular, there is an FA that accepts this language.
+- To check, whether a word is accepted by an FA, you start in a state, start reading in letters of your word and follow the edges through the FA. If the whole word is read and we end up in a final state, the FA accepts the word.
+- But hold on a second! FA can also accept words that have more letters than we have states and edges. How can that be?! The answer: loops.
+- Now, given any regular language, we **know** that there is an FA that accepts it (this is a theorem).
+- That means: if we have a word, that has more letters than we have states, but is still accepted by our FA, we **have to have** a loop in our FA.
+- Think about it: we can repeat this loop as many times as we want and the FA would still accept words that are processed by going through the loop repeatedly. **It has to!**
+- This repeating of the loop is referred to as pumping a word up or down.
+
+
+## 2. Doing a proof.
+Now, secondly, you want to proof something using this lemma. Let's start with the PL (really try to understand this line!):
+
+`L ∈ REG → ∃n ∈ ℕ ∀x ∈ L: |x| ≥ n ∃u, v, w: x = u ∘ v ∘ w, |v| ≥ 1, |uv| ≤ n ∀i ∈ ℕ: u ∘ vⁱ ∘ w ∈ L`
+
+I'll break it down. Remember: This is a theorem. If you meet the conditions of the implication (part on the left), you now **know** that the part on the right is true.
+
+1. `L ∈ REG →`: "Given a regular language, the following is true."
+2. `∃n ∈ ℕ`: "There is a natural number"
+3. `∀x ∈ L: |x| ≥ n`: "For every word `x` that is in the language and longer than this natural number"
+    - Remember the argument with the loops from part 1. This just says: we now have a word that has more letters than we have states.
+4. `∃u, v, w: x = u ∘ v ∘ w, |v| ≥ 1, |uv| ≤ n`: "You can split up the word `x` into three parts: `u, v, w` where the length of `v` is equal to or bigger than `1` and the length of `u ∘ v` is smaller than our natural number from before"
+    - Here we describe the loop in more detail. `v` is the part that we can pump, because there is a loop that processes v (and can thus process arbitrary iterations of v - or skip it altogether. And because `u ∘ v` is smaller than `n`, we didn't need a loop until now. We only really **need** a loop, if our word has more letters than we have states!
+5. `∀i ∈ ℕ: u ∘ vⁱ ∘ w ∈ L`: "If all the conditions before have been met, we can now pump `v` up or down and the resulting word is still in the language!"
+    - Since it is a loop, pumping doesn't make a difference. If you go the loop a million times, the word is still in the language.
+
+That's it. Again, because it is proved, you **know** it's true if all the conditions are met.
+
+We want to use the lemma to show, that a language **is not** a regular language. Let's have a look at the implication from above. Think about the left part of the implication (`L ∈ REG`) as `A` and the right part (`∃n ∈ ℕ ∀x ∈ L: |x| ≥ n ∃u, v, w: x = u ∘ v ∘ w, |v| ≥ 1, |uv| ≤ n ∀i ∈ ℕ: u ∘ vⁱ ∘ w ∈ L`) as `B`: `A → B`.
+
+We can now do the following transformation:
+
+`A → B ≡ ¬B  → ¬A`
+
+To pull in the negation on the right side of this transformation, all the quantifiers have to "flip around". This means the sentence now looks like this:
+
+`∀n ∈ ℕ ∃x ∈ L: |x| ≥ n ∀u, v, w: x = u ∘ v ∘ w, |v| ≥ 1, |uv| ≤ n ∃i ∈ ℕ: u ∘ vⁱ ∘ w ∉ L → L ∉ REG`
+
+Again, this is still the Pumping Lemma. We didn't change it, we just used an transformation for the implication that is equivalent. If you meet the conditions on the left, you **know** the sentence on the right is true.
+
+Let's use this on an example: Show that `L = {aᵏ ∘ bᵏ | k ≥ 0}` is not regular.
+
+1. Take any number `n`.
+2. Select a word with the requirement `x ∈ L` with `|x| ≥ n`. Your mathematical creativity is requested here! You need to pick a word that helps you show the rest of the conditions easily! We are going to pick: `x = aⁿbⁿ`. This is convenient, because it’s obvious that it is as least as long as n (n occurs twice in it as an exponent). The important property to note: there are exactly as many `a` as there are `b` in this word. So if we can pump it in a way, that this is not the case anymore, we are golden!
+3. Now we have to look at **all** of the partitions `x = uvw` with the conditions `|v| ≥ 1` and `|uv| ≤ n`. Since we have to look at all of them we just say: Let's assume these conditions are met (we can now use them in the next step).
+4. Pick an `i` that shows that `u ∘ vⁱ ∘ w ∉ L`. Let's take `i = 0`.
+    - Since our word is `aⁿbⁿ` and one of the conditions is `|uv| ≤ n`, we know that `uv` can **only** consist of the letter `a`.
+    - And because we have the condition `|v| ≥ 1`, we also know that `v` has to contain **at least** one letter `a`.
+    - If we now remove this letter (or maybe its more than one letter, it doesn't matter), the amount of letters `a` in the word `x` is now not equal to the amount of letters `b` in the word.
+    - Hence: Our word is not part of the language any more (`u ∘ v⁰ ∘ w ∉ L`), violating the PL.
+
+This shows that `L = {aᵏ ∘ bᵏ | k ≥ 0}` is not a regular language.
@@ -0,0 +1,25 @@
+---
+layout: post
+title: "Collection of High Quality Swift Libraries"
+categories:
+  - Programming
+tags:
+  - English
+  - Swift
+
+last_modified_at: 2019-03-30
+excerpt_separator: <!-- more -->
+---
+
+Libraries are an important part of programming. However, there should be a **really** good reason, if you decide to use a library. And if you use one, it should be a good one. These are some from my collection:
+
+<!-- more -->
+
+- [JTAppleCalendar](https://github.com/patchthecode/JTAppleCalendar): Need a calendar view? Don't roll your own.
+- [Keychain](https://github.com/evgenyneu/keychain-swift): Have something that need secure storage, like a password? Put it in the keychain.
+- [SPPermission](https://github.com/IvanVorobei/SPPermission): Your app needs permissions? Inform the user properly. It's important.
+- [SwiftDate](https://github.com/malcommac/SwiftDate): Handles all your date and time needs. [Don't roll your own](https://www.youtube.com/watch?v=-5wpm-gesOY).
+- [WhatsNewKit](https://github.com/SvenTiigi/WhatsNewKit): Welcome your new user like apple does.
+
+## Helper
+- [SwiftyUserDefaults](https://github.com/radex/SwiftyUserDefaults): A small wrapper around NSUserDefaults that makes the usage swifter.
@@ -0,0 +1,144 @@
+---
+layout: post
+title: "Install Mailtrain on Uberspace 7"
+categories:
+  - Tutorials
+tags:
+  - English
+  - Self-Hosted Software
+
+last_modified_at: 2020-07-21
+excerpt_separator: <!-- more -->
+---
+
+This tutorial explains how to install [Mailtrain](https://mailtrain.org) on a [Uberspace 7](uberspace.de). [Mailtrain](https://mailtrain.org/) is a self-hosted open-source (released under the [GPL
+v3.0](https://github.com/Mailtrain-org/mailtrain/blob/master/LICENSE).) newsletter app built on top of [Nodemailer](https://nodemailer.com/). I am following the [manual installation guide](https://github.com/Mailtrain-org/mailtrain#quick-start---manual-install-any-os-that-supports-nodejs) from the official Mailtrain repo and add some additional Uberspace infos. I contributed [this guide](https://lab.uberspace.de/guide_mailtrain.html) to the [Uberlab](https://lab.uberspace.de/) and earned my first [Ubercup](https://github.com/Uberspace/lab/blob/master/CONTRIBUTING.md#reward).
+
+<!-- more -->
+
+## Installation
+
+This guide uses Node.js version 12, which is the [default](https://manual.uberspace.de/lang-nodejs.html#standard-version) on Uberspace 7 at at the moment.
+
+Clone the [GitHub](https://github.com/Mailtrain-org/mailtrain)
+repository:
+
+```console
+[isabell@stardust ~]$ git clone git://github.com/Mailtrain-org/mailtrain.git
+[isabell@stardust ~]$
+```
+
+Install the required dependencies:
+
+```console
+[isabell@stardust ~]$ cd mailtrain
+[isabell@stardust mailtrain]$ npm install --production
+[isabell@stardust mailtrain]$
+```
+
+## Configuration
+
+### Database Setup
+
+Create a new database:
+
+```console
+[isabell@stardust mailtrain]$ mysql -e "CREATE DATABASE ${USER}_mailtrain;"
+[isabell@stardust mailtrain]$
+```
+
+### Mailtrain Config
+
+Copy the example config file:
+
+```console
+[isabell@stardust mailtrain]$ cp config/default.toml config/production.toml
+[isabell@stardust mailtrain]$
+```
+
+Update `production.toml` with your MySQL settings; look for the
+`[mysql]` block:
+
+```console
+...
+
+[mysql]
+host="localhost"
+user="isabell"
+password="MySuperSecretPassword"
+database="isabell_mailtrain"
+
+...
+```
+
+### Web Backend Config
+
+[Mailtrain](https://mailtrain.org/) is running on port 3000. Configure the server to respond to port 3000 using web backends:
+
+``` console
+[isabell@stardust ~]$ uberspace web backend set / --http --port 3000
+[isabell@stardust ~]$
+```
+
+### Supervisord Daemon Setup
+
+Create `~/etc/services.d/mailtrain.ini` with the following content:
+
+```ini
+[program:mailtrain]
+directory=%(ENV_HOME)s/mailtrain/
+command=env NODE_ENV=production /bin/node index.js
+autostart=yes
+autorestart=yes
+```
+
+If it's not in state RUNNING, check your configuration.
+
+### Login and Change Admin Credentials
+
+{% include bootstrap/alert.html 
+  content="Change the default admin credentials to prevent unauthorized access of your data!"
+  style="danger"
+%}
+
+Your [Mailtrain](https://mailtrain.org/) installation should now be
+reachable on `https://isabell.uber.space`. Log in with the username
+`admin` and the password `test`.
+
+Go to `https://isabell.uber.space/users/account` and change your email
+address as well as your password.
+
+{% include bootstrap/alert.html 
+  content="It is not possible to change the username in the GUI. If you want to change the default username `admin` to something else or add additional users, you have to do it directly in the database."
+  style="info"
+%}
+
+## Finishing installation
+
+Go to `https://isabell.uber.space/settings`. In the **General Settings** section change the **Service Address (URL)**
+to `https://isabell.uber.space/`.
+
+In the **Mailer Settings** section change the
+
+> -   *Hostname*,
+> -   *Port*,
+> -   *Encryption*,
+> -   *username*,
+> -   *password*, and
+> -   test your settings by pressing the Button **Check Mailer Config**.
+
+{% include bootstrap/alert.html 
+  content="Uberspace does not allow mass mailings from their servers according to their House Rules. However, you can use Mailtrain as the admin interface for your mailing needs. Use the SMTP services from AWS SES, Sendgrid, Mailgun, etc. for the actual mailing."
+  style="warning"
+%}
+
+## Best Practices
+
+* Test the configuration by creating a new list and subscribing yourself
+to it.
+* Craft your campaign with love and dedication.
+* Don’t spam users that don’t want your newsletter.
+
+------------------------------------------------------------------------
+
+Tested on Uberspace v7.7.0 with NodeJS v12 and MariaDB 10.3.23.
@@ -0,0 +1,45 @@
+---
+layout: post
+title: "The Collection"
+categories:
+  - Tips
+tags:
+  - English
+  - Collection
+
+last_modified_at: 2020-08-28
+excerpt_separator: <!-- more -->
+---
+
+During my time on the Internet, I encountered many things. This post is a collection of the cool things. I will probably update it once in a while. Since I am living in Germany, some of the tips may not be useful for everyone. In order of coolness.
+
+ <!-- more -->
+
+## Web Services
+
+[Uberspace](https://uberspace.de) is a hosting provider. They offer a shared hosting experience that is a little bit more limited than a root server. However, their support is amazing and it's a super good place to host for tinkerers and small projects. Highly recommended. Check out my [Tutorials](/category/tutorials.html) or the [Uberlab for U7](https://lab.uberspace.de) for things you can do on your Uberspace!
+
+Things I am using on Uberspace:
+
+- [InvoicePlane](http://invoiceplane.com): Simple invoicing software. Offers sending offers and invoices via email, too!
+- [Matomao](https://matomo.org): Analytics software to avoid Google.
+- [Redmine](http://redmine.org): Amazing project management solution.
+- [Syncthing](http://syncthing.net): File synchronisation alternative.
+
+[Tecspace](https://tecspace.de) is a hosting provider and domain registrar. I buy and manage my domains through their service. It is extremely cheap, costing only 2,50 EUR per year, if you have 10 or more domains. I love their admin interface. It is simple, behaves like a website should behave (no JavaScript shenanigans) and is very powerful.
+
+[Pinboard](https://pinboard.in) is a bookmarking service. It's minimalistic, easy to use and offers an archiving service so you will never lose these good articles on the internet again.
+
+## Software
+
+### Pictures, Design, Illustrating
+
+[Affinity](https://affinity.serif.com/) produces [Affinity Designer](https://affinity.serif.com/en-gb/designer/) and [Affinity Photo](https://affinity.serif.com/en-gb/photo/). They are competitors to the popular Adobe Photoshop and Illustrator. These two programs are *exceptional*. You can do basically everything you can do with their Adobe counterparts, but they only cost 55 EUR each. No subscriptions, no recurring fees. The interface is polished and if you are an Adobe user you will be right at home. Quit Adobe today. Don't let them milk you.
+
+[Appollo One](https://www.apollooneapp.com/) is a really fast image viewer.
+
+### Random Apps
+
+[Sensei](https://sensei.app/) is a system monitoring app with a nice Mac compliant interface.
+
+[Mactracker](http://mactracker.ca/) is an app that lists all apple hardware and their specifications. No need to google for these things anymore.
@@ -0,0 +1,29 @@
+---
+layout: post
+title: "Strategies from the Happiness Lab"
+categories:
+  - Summaries
+tags:
+  - English
+  - Philosophy
+
+last_modified_at: 
+excerpt_separator: <!-- more -->
+---
+
+I love listening to podcasts while I am out running. The latest one I found is [The Happiness Lab](https://www.happinesslab.fm/) from and with Dr. Laurie Santos, a professor teaching at Yale. She looks at happiness scientifically and takes an active approach: [You have it in your own hands to improve your happiness](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000449594792). The podcast discusses various strategies with various scientists and experts from their respective field.
+
+This is a collection of these strategies you can employ; with the link to the corresponding episode for more information.
+
+<!-- more -->
+
+* [Meditate.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000469606673) You have probably heard about people recommending meditating a thousand times. Do it. Start with 1 minute every day. The research of the benefits seems to be overwhelming.
+* [Sleep enough.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000463759567) Trivial. Humans need sleep. Get. Some. Make it a ritual to go to bed. Make the bed a sanctuary. No screens, no distractions. If you are lying in bed, you sleep. If you can't sleep, leave the bed and try again later. You can combine the ritual with meditation (see above).
+* [Remove choice.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000455959891) Being in control of and having to decide everything is exhausting. Remove unnecessary choices from your life. Have a big wardrobe? Reduce it and go minimal. Or to quote President Obama who always wore a white shirt and cycled through his suits: "Do you know how many decision I have to make throughout the day? You think I also want to decide what to wear?"
+* [Coach yourself from the third person.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000468907282) The research suggests that you perform better and are happier, if you think about the challenges you are facing from a third person perspective. The key term is **distancing**. Distance yourself to get a clearer picture of what is going on. You can use personal distancing (use your name instead of "I"): "Felix knows what he is doing and has experience. Trust him." You can use temporal distancing: "Felix has faced this threat before and came out successful." You can use group distancing: "We are a strong society and can solve this challenge together."
+* [Connect with others. Even strangers.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000452731206) Modern life aims at removing all inconveniences. But it also removes social connections with other people. The example from the podcast is from the guy that invented the ATM. When there were still bank tellers, you had to wait in line -- where you might have to interact socially -- and had to interact with the teller. A person. Research suggests that happiness improves just by interacting with other people
+* [Frame your emotions.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000469255597) When encountering an emotion, you have 5 seconds to decide how to react to it. Use different frames depending on the situation. Examples for these frames:
+	* **The comedic frame** Try to tell a joke about the situation.
+	* **The future storytelling frame** Live your life in a way so that your story, told **truthfully**, makes you look like the person you strife to be. Which story sounds better to you? The story about a miserable and frustrated person that gave up on the slightest problem **or** the story about the person that strongly and cleverly encounters the challenges life throws at her and masters these challenges while smiling.
+	* **The stoic gods challenge frame** Use stoic, imaginary gods as a psychological device: Every setback you face in life is a test these gods have designed to test you and your character. And you want and can prove to them that you are up to the challenge. The harder the challenge is, the more trust the gods have in you.
+* [Practice negative visualization.](https://podcasts.apple.com/de/podcast/the-happiness-lab-with-dr-laurie-santos/id1474245040?l=en&i=1000469255597) Pause every once in a while during the day and think about what you could lose and how that would make you feel. Don't dwell on these thoughts. Just let them flicker for a second. This aims at increasing your appreciation for the people and things you have in your life.
@@ -0,0 +1,85 @@
+---
+layout: post
+title: "Ideas"
+categories:
+  - Personal
+tags:
+  - English
+  - Collection
+
+last_modified_at: 
+excerpt_separator: <!-- more -->
+---
+
+Many people have ideas. Ideas are not special. What makes and breaks an idea is its realization and/or implementation. Here are some of **my** product ideas. Implement them, if you like them! Then send me an [email](mailto:felixfoertsch@gmail.com) to show them to me, please. 😁
+
+<!-- more -->
+
+## Product Ideas
+
+**Flatpen:** Pens have a problem. They are round and stiff and that makes them harder to carry around. The idea: Create a pen that uses regular pen mines, but folds flat so it can be put inside of a notebook without making it wobble.
+
+**Process Visualization with Z-Layers:** Processes are an important part of business development and optimization. Their visualization is important for communicating them. Most process visualization software is clunky to use. Finding the right layer of abstractions with processes is hard by default -- software should make it easier. This has to be a combined solution: From the editor to the reader. The core idea is using Z-layer zooming to make it more intuitive (e.g. pinching in mobile and tablet apps).
+
+**Magic Handshake:** Create a system that supports favors. Being in the system opens you doors, because you know someone. Like an exclusive club.
+
+**10 Minute Mentor:** Finding is a mentor is difficult. Make it easier.
+
+**Sane Games:** Create a list of games that are *sane*: no IAP, no psycho abuse, etc.
+
+## Web App Ideas
+
+**Sign-up:** Create an event where people can sign up really easily. Like [Raid Helper](https://raid-helper.com/), but generalized.
+
+**WOOP:** PWA that implements the [GROW](https://en.wikipedia.org/wiki/GROW_model) or [WOOP](https://en.wikipedia.org/wiki/Gabriele_Oettingen) mental model.
+
+**Predefined Workflow Builder/Checklister/Show the Way:** Many task in modern life follow step-by-step processes. It is **really** inefficient that everybody has to learn them individually. It should be easy to download a pre-created checklist for a specific task and then succeed with just following this checklist. E.g. "How to do a product launch" --> Step 1: Do X. Step 2: Do Y., "How to learn JavaFX" --> etc. Specialised Version of this could be a "You should app". A collection of things everybody should do and/or have. Have a bank account, have insurance, etc.
+
+**GitHub Contributions for Everything:** GitHub Contributions are awesome. They give a quick and intuitive overview about progress. Create a way that allows tracking everything like this.
+
+**Applicant Oriented Applications:** Applications are awful for the applicant. They are at the mercy of organizations. They have to send in all their information and then they have to wait. And they have to do that multiple times. Use different interfaces, create different formats, and so on. It should be easier.
+
+**Make it very easy to donate to a good cause/org:** One click donations. It is not easy to set up donations in Germany. There is a lot of hassle involved with creating receipts etc. This should be super easy for the associated organizations and should allow integrated systems like PayPal and Stripe for payments.
+
+**Local Twitter:** It's not always easy to know what's happening around your. Make an app that makes it really easy to know what public events are happening right now around you. Concert? Demonstration? Check and know.
+
+**Gamekey Exchange:**
+Enable people that buy things like humble bundle to trade their unused keys with each other.
+
+## Computer and Phone App Ideas
+
+**On time:** Calendar integration that allows one click information to others, if you are on time or not.
+
+**Hierarchical Documentation:** Documentation of software is often flat, even though hierarchies are at the core of many projects. Tools should display hierarchies to make it easier to quickly grasp software libraries.
+
+**Moderator Toolbox:** Organizing groups is hard. Make using speech lists, protocols, etc. easy to do.
+
+**Cadence and Heartbeat Music:** Generate electronic music (e.g. with AI) and use the heartbeat sensor of the Apple Watch attach it to the cadence and/or heart rate of the person.
+
+**Vaccination Card:** There is a yellow book that helps track vaccinations. Make one that's on your phone.
+
+**Walk the City:** Exploring a city is awesome. Make an app that tracks all routes/streets you have already been to on the map to facilitate walking every road once.
+
+**Checkpoints:** Create a system that allows people with bad time management to tell an accurate prediction on when they'll get somewhere. Use map data and checkpoints to find out the time.
+
+**Color Clipboard:** Monitor clipboard and store Hex codes. Give a nice UI to create palettes, etc.
+
+**Kontakte:** Create a Tinder-like interface to clean-up contacts: Keep, delete, edit. Have a nice and easy way to add notes and tags. Potentially: Add whitelist/blocklist.
+
+**Business Plan Archive:** Like ideas business plans have way less value than people think. Put them in the public domain.
+
+**Track a Thing:** App that has a unified interface to track things **very** easily. Did a run: Track. How many days since you last called your mother: Track. Is your Doner bigger or smaller than average: Track.
+
+**Single Player Raider (Game):** A game where you do a 40-person raid, but you do it solo on your own terms.
+
+
+## Apps that already exist (or probably exists), but require better design, should not cost money or should be open source
+
+- **Tiddlywiki for Mac**
+- **Anki for Mac**
+- **Twitch for Mac:** mpv/IINA as player and chat on the bottom (native portrait mode)
+- **Ebook reader for Mac:** Books always adds the PDF/ePub to the library, which is not always required
+- **Reddit but with a limit:** Scrolling is unhealthy.
+- **Archiver for Mac:** Easy archiving of things. YouTube via youtube-dl, etc.
+- https://www.progressbarosx.com/
+- **Ambience:** Menu bar one-click music player for study/background music
@@ -0,0 +1,163 @@
+---
+layout: post
+title: "Apple Colors in SCSS"
+categories:
+  - Design
+tags:
+  - English
+
+last_modified_at: 
+excerpt_separator: <!-- more -->
+---
+
+Colors have a big impact on how software looks. Personally, I think macOS and iOS are beautiful and the colors are very well selected. Since I am not a designer, but I want to understand **why** these systems always looks so good, I started designing this website using the Apple colors. The first step I took was creating variables for the Apple colors from the [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) ([iOS](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/)/[macOS](https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/)).
+
+I published them on GitHub as gists so you can use them, too. It's just the raw variables; but I could not find them anywhere else in this SCSS form. Gist [macOS-colors-dark.scss](https://gist.github.com/felixfoertsch/52904ab569521158dd8494024c0a5d77), [macOS-colors-light.scss](https://gist.github.com/felixfoertsch/36922ee9a74d9bd0c0887f62cecb7041), [iOS-colors-dark.scss](https://gist.github.com/felixfoertsch/69dd59c9e541788056ee6c70928c3769), [iOS-colors-light.scss](https://gist.github.com/felixfoertsch/e4c73a673bd769218c39c17ac09127aa).
+
+Read more for the actual variables.
+
+<!-- more -->
+
+```scss
+// macOS-colors-dark.scss
+$macOS-systemBlue-dark: rgba(10, 132, 255, 1);
+$macOS-systemBrown-dark: rgba(172, 142, 104, 1);
+$macOS-systemGray-dark: rgba(152, 152, 157, 1);
+$macOS-systemGreen-dark: rgba(50, 215, 75, 1);
+$macOS-systemIndigo-dark: rgba(94, 92, 230, 1);
+$macOS-systemOrange-dark: rgba(255, 159, 10, 1);
+$macOS-systemPink-dark: rgba(255, 55, 95, 1);
+$macOS-systemPurple-dark: rgba(191, 90, 242, 1);
+$macOS-systemRed-dark: rgba(255, 69, 58, 1);
+$macOS-systemTeal-dark: rgba(100, 210, 255, 1);
+$macOS-systemYellow-dark: rgba(255, 214, 10, 1);
+$macOS-alternateSelectedControl-dark: rgba(0, 88, 208, 1);
+$macOS-alternateSelectedControlText-dark: rgba(255, 255, 255, 1);
+$macOS-controlBackground-dark: rgba(30, 30, 30, 1);
+$macOS-controlText-dark: rgba(255, 255, 255, 0.8);
+$macOS-disabledControlText-dark: rgba(255, 255, 255, 0.2);
+$macOS-grid-dark: rgba(255, 255, 255, 0.1);
+$macOS-headerText-dark: rgba(255, 255, 255, 1);
+$macOS-highlight-dark: rgba(180, 180, 180, 1);
+$macOS-labelColor-dark: rgba(255, 255, 255, 0.8);
+$macOS-linkColor-dark: rgba(65, 156, 255, 1);
+$macOS-placeholderTextColor-dark: rgba(255, 255, 255, 0.2);
+$macOS-quaternaryLabelColor-dark: rgba(255, 255, 255, 0.1);
+$macOS-secondaryLabelColor-dark: rgba(255, 255, 255, 0.5);
+$macOS-selectedContentBackgroundColor-dark: rgba(0, 88, 208, 1);
+$macOS-selectedControlColor-dark: rgba(63, 99, 109, 1);
+$macOS-selectedControlTextColor-dark: rgba(255, 255, 255, 0.8);
+$macOS-selectedMenuItemTextColor-dark: rgba(255, 255, 255, 1);
+$macOS-selectedTextBackgroundColor-dark: rgba(63, 99, 139, 1);
+$macOS-selectedTextColor-dark: rgba(255, 255, 255, 1);
+$macOS-separatorColor-dark: rgba(255, 255, 255, 0.1);
+$macOS-shadowColor-dark: rgba(0, 0, 0, 0);
+$macOS-tertiaryLabelColor-dark: rgba(255, 255, 255, 0.2);
+$macOS-textBackgroundColor-dark: rgba(30, 30, 30, 1);
+$macOS-textColor-dark: rgba(255, 255, 255, 1);
+$macOS-underPageBackgroundColor-dark: rgba(40, 40, 40, 1);
+$macOS-unemphasizedSelectedContentBackgroundColor-dark: rgba(70, 70, 70, 1);
+$macOS-unemphasizedSelectedTextBackgroundColor-dark: rgba(70, 70, 70, 1);
+$macOS-unemphasizedSelectedTextColor-dark: rgba(255, 255, 255, 1);
+$macOS-windowBackgroundColor-dark: rgba(50, 50, 50, 1);
+$macOS-windowFrameTextColor-dark: rgba(255, 255, 255, 0.8);
+```
+
+```scss
+// macOS-colors-light.scss
+$macOS-systemBlue: rgba(0, 122, 255, 1);
+$macOS-systemBrown: rgba(162, 132, 94, 1);
+$macOS-systemGray: rgba(142, 142, 147, 1);
+$macOS-systemGreen: rgba(40, 205, 65, 1);
+$macOS-systemIndigo: rgba(88, 86, 214, 1);
+$macOS-systemOrange: rgba(255, 149, 0, 1);
+$macOS-systemPink: rgba(255, 45, 85, 1);
+$macOS-systemPurple: rgba(175, 82, 222, 1);
+$macOS-systemRed: rgba(255, 59, 48, 1);
+$macOS-systemTeal: rgba(90, 200, 250, 1);
+$macOS-systemYellow: rgba(255, 204, 0, 1);
+$macOS-alternateSelectedControl: rgba(0, 99, 255, 1);
+$macOS-alternateSelectedControlText: rgba(255, 255, 255, 1);
+$macOS-controlBackground: rgba(255, 255, 255, 1);
+$macOS-controlText: rgba(0, 0, 0, 0.8);
+$macOS-disabledControlText: rgba(0, 0, 0, 0.2);
+$macOS-grid: rgba(204, 204, 204, 1);
+$macOS-headerText: rgba(0, 0, 0, 0.8);
+$macOS-highlight: rgba(255, 255, 255, 1);
+$macOS-labelColor: rgba(0, 0, 0, 0.8);
+$macOS-linkColor: rgba(0, 104, 218, 1);
+$macOS-placeholderTextColor: rgba(0, 0, 0, 0.2);
+$macOS-quaternaryLabelColor: rgba(0, 0, 0, 0.1);
+$macOS-secondaryLabelColor: rgba(0, 0 ,0, 0.5);
+$macOS-selectedContentBackgroundColor: rgba(0, 99, 225, 1);
+$macOS-selectedControlColor: rgba(179, 215, 255, 1);
+$macOS-selectedControlTextColor: rgba(0, 0, 0, 0.8);
+$macOS-selectedMenuItemTextColor: rgba(255, 255, 255, 1);
+$macOS-selectedTextBackgroundColor: rgba(179, 215, 255, 1);
+$macOS-selectedTextColor: rgba(0, 0, 0, 1);
+$macOS-separatorColor: rgba(0, 0, 0, 0.1);
+$macOS-shadowColor: rgba(0, 0, 0, 1);
+$macOS-tertiaryLabelColor: rgba(0, 0, 0, 0.2);
+$macOS-textBackgroundColor: rgba(255, 255, 255, 1);
+$macOS-textColor: rgba(0, 0, 0, 1);
+$macOS-underPageBackgroundColor: rgba(150, 150, 150, 0.9);
+$macOS-unemphasizedSelectedContentBackgroundColor: rgba(220, 220, 220, 1);
+$macOS-unemphasizedSelectedTextBackgroundColor: rgba(220, 220, 220, 1);
+$macOS-unemphasizedSelectedTextColor: rgba(0, 0, 0, 1);
+$macOS-windowBackgroundColor: rgba(236, 236, 236, 1);
+$macOS-windowFrameTextColor: rgba(0, 0, 0, 0.8);
+```
+
+```scss
+// iOS-colors-dark.scss
+$iOS-systemBlue-dark: rgba(10, 132, 255, 1);
+$iOS-systemGreen-dark: rgba(48, 209, 88, 1);
+$iOS-systemIndigo-dark: rgba(94, 92, 230, 1);
+$iOS-systemOrange-dark: rgba(255, 159, 10, 1);
+$iOS-systemPink-dark: rgba(255, 55, 95, 1);
+$iOS-systemPurple-dark: rgba(191, 90, 242, 1);
+$iOS-systemRed-dark: rgba(255, 69, 58, 1);
+$iOS-systemTeal-dark: rgba(100, 210, 255, 1);
+$iOS-systemYellow-dark: rgba(255, 214, 10, 1);
+$iOS-systemGray-dark: rgba(142, 142, 147, 1);
+$iOS-systemGray2-dark: rgba(99, 99, 102, 1);
+$iOS-systemGray3-dark: rgba(72, 72, 74, 1);
+$iOS-systemGray4-dark: rgba(58, 58, 60, 1);
+$iOS-systemGray5-dark: rgba(44, 44, 46, 1);
+$iOS-systemGray6-dark: rgba(28, 28, 30, 1);
+$iOS-label-dark: rgba(255, 255, 255, 1);
+$iOS-secondaryLabel-dark: rgba(235, 235, 245, 0.6);
+$iOS-tertiaryLabel-dark: rgba(235, 235, 245, 0.3);
+$iOS-quaternaryLabel-dark: rgba(235, 235, 245, 0.2);
+$iOS-placeholderText-dark: rgba(235, 235, 245, 0.3);
+$iOS-separator-dark: rgba(84, 84, 88, 0.3);
+$iOS-opaqueSeparator-dark: rgba(56, 56, 58, 1);
+$iOS-link-dark: rgba(9, 132, 255, 1);
+```
+
+```scss
+// iOS-colors-light.scss
+$iOS-systemBlue: rgba(0, 122, 255, 1);
+$iOS-systemGreen: rgba(52, 199, 89, 1);
+$iOS-systemIndigo: rgba(88, 86, 214, 1);
+$iOS-systemOrange: rgba(255, 149, 0, 1);
+$iOS-systemPink: rgba(255, 45, 85, 1);
+$iOS-systemPurple: rgba(175, 82, 222, 1);
+$iOS-systemRed: rgba(255, 59, 48, 1);
+$iOS-systemTeal: rgba(90, 200, 250, 1);
+$iOS-systemYellow: rgba(255, 204, 0, 1);
+$iOS-systemGray: rgba(142, 142, 147, 1);
+$iOS-systemGray2: rgba(174, 174, 178, 1);
+$iOS-systemGray3: rgba(199, 199, 204, 1);
+$iOS-systemGray4: rgba(209, 209, 214, 1);
+$iOS-systemGray5: rgba(229, 229, 234, 1);
+$iOS-systemGray6: rgba(242, 242, 247, 1);
+$iOS-label: rgba(0, 0, 0, 1);
+$iOS-secondaryLabel: rgba(60, 60, 67, 0.6);
+$iOS-tertiaryLabel: rgba(60, 60, 67, 0.3);
+$iOS-quaternaryLabel: rgba(60, 60, 67, 0.2);
+$iOS-placeholderText: rgba(60, 60, 67, 0.3);
+$iOS-separator: rgba(60, 60, 67, 0.3);
+$iOS-opaqueSeparator: rgba(198, 198, 200, 1);
+$iOS-link: rgba(0, 122, 255, 1);
+```