diff --git a/app/blog/2015-03-hochmoderne-bahnstadt-mit-schwachem-internet.mdx b/app/blog/2015-03-hochmoderne-bahnstadt-mit-schwachem-internet.mdx
new file mode 100644
index 0000000..9969263
--- /dev/null
+++ b/app/blog/2015-03-hochmoderne-bahnstadt-mit-schwachem-internet.mdx
@@ -0,0 +1,55 @@
+---
+layout: post
+title: "Auf dem Prüfstand: Internet in der Bahnstadt, Heidelberg"
+date: 2015-03-21 16:55:00 +0200
+tags: Bahnstadt Heidelberg Politik
+author: werner
+---
+
+export const summary = `Die größte Passivhaus-Siedlung der Welt setzt Meilensteine. Viele junge Familien und Unternehmen lassen sich hier nieder. "Eines der größten Stadtentwicklungsprojekte in Deutschland" ist in vielen Bereichen sehr gut. Das Internet gehört leider nicht dazu. In der Bahnstadt in Heidelberg macht das Internet den Eindruck eher "Neuland" zu sein.`
+
+{summary}
+
+Ja, natürlich funktioniert es. Natürlich gab es das alles schon schlimmer. Aber das dürfte wohl kaum ein sinnvoller Vergleich für eines der innovativsten Bauprojekte der letzten Jahre sein. Wo liegt also das Problem? Die Qualität der verlegten Leitungen und der Anbindung an die Internetknoten ist für "Normalbürger" sicher schwer einschätzbar. Glasfaser sei der modernste Standard heutzutage. Also muss es doch gut sein. Denken viele – ist nur leider nicht unbedingt richtig. Tatsächlich liegt das Problem eher bei der Gestaltung der Produkte, die diese Leitungen nutzen. Ein NGA-Netz (Next Generation Access), wie Glasfaser, kann auch den Zielen der zukünftigen EU-Bestrebungen für 2018 und 2020 gerecht werden.
+
+Die Produkte dafür zu gestalten, liegt aber in der Hand der Anbieter. Leider lassen sich diese derart lumpen, dass wir nur mit Mühe und Not nicht als [förderungsfähiger "weißer Fleck"](http://www.vilseck.de/breitbandausbau/Markterkundungsverfahren_Stadt_Vilseck.pdf) gelten. Das ist wirklich beachtlich für ein mit Glasfaser versorgtes Neubaugebiet. Auch das dürfte einmalig sein.
+
+Wie früher im DSL-Geschäft, wird immer gern mit Download-Raten geworben. Das ist aber so, als würde man die Qualität einer Mahlzeit nur anhand einer einzelnen Zutat bewerten. Eine einzige schlechte Zutat kann aber ein ganzes Gericht versauen. So ähnlich ist es mit den Internetanschlüssen in der Bahnstadt. Die Geschwindigkeit hängt sowohl am Download, als auch am Upload. Beide beeinflussen sich gegenseitig. Jedes "Päckchen", das empfangen wird (Download), muss quittiert werden (Upload). Ein langsamer Upload reduziert damit die praktisch erzielbare Reaktions- und Download-Geschwindigkeit.
+
+Download und Upload sind seit den anfänglichen DSL-Zeiten asynchron: Der Download ist immer viel schneller, als der Upload gewesen. Das machte früher eventuell auch mal Sinn. Heute nicht mehr so sehr. [Industrie 4.0](http://de.wikipedia.org/wiki/Industrie_4.0), [Big Data](http://www.horizont.net/marketing/nachrichten/CeBIT-Chef-Oliver-Frese-im-Interview-Digitalisierung-der-Wirtschaft-steht-ganz-oben-auf-der-Agenda-133282), [Cloud Computing](http://de.wikipedia.org/wiki/Cloud_Computing) und die zunehmende Digitalisierung des Alltags sind real. Teilen Sie Fotos mit Freunden oder lassen Sie welche online entwickeln? Nutzen Sie Dropbox oder andere Online-Festplatten? Verbinden Sie sich mit entfernten Servern oder Ihrem Arbeitsplatz-PC in der Firma? Nutzen Sie Videotelefonie mit Skype oder FaceTime? Verschicken Sie Anhänge per Email? Nutzen Sie die iCloud-Funktionalität Ihres iPhones? ... Haben Sie sich dabei erwischt, "ja" zu sagen? Dann haben Sie in der Bahnstadt ein Problem. Das ist Fakt.
+
+## Mehr als prozentuale Unterschiede
+
+### Fotos hochladen
+
+Nur eine Hand voll Fotos in mittlerer Qualität (5 Stück, ca 25MB) mit Freunden zu teilen kann dauern:
+
+- "Private 50" von PremiumTK: mehr als 2 Minuten
+- "3Play Smart 50" von KabelBW: unter 90 Sekunden
+- "Zu Hause M" der Deutschen Telekom: rund 20 Sekunden
+- "Zu Hause M Glasfaser" der Deutschen Telekom: rund 4 Sekunden
+
+### Dateien hochladen
+
+Fotos sind dabei noch harmlos. Es gibt aber Internet-Dienste, die schnell die Gigabytes überschreiten. Bei Dropbox bekommen Sie kostenlos 2GB als Onlinefestplatte. Beim Mediencenter der Deutschen Telekom sogar 25GB. Die wollen erst mal befüllt werden.
+
+2GB Daten hochladen im Vergleich:
+
+- "Private 50" von PremiumTK: mehr als 3 Stunden
+- "3Play Smart 50" von KabelBW: unter 2 Stunden
+- "Zu Hause M" der Deutschen Telekom: weniger als 30 Minuten
+- "Zu Hause M Glasfaser" der Deutschen Telekom: rund 5 Minuten
+
+## Fazit
+
+Selbst der Monitoring Bericht des [BMWi](http://www.bmwi.de/Dateien/BMWi/PDF/dritter-monitoringbericht-zur-breitbandstrategie) kommt zu dem Schluss, dass der Upload immer wichtiger wird. Umso interessanter, dass die Manet schon 2011 wie folgt geworben hat: "Mit dem Anschluss an die virtuelle Welt per Hochgeschwindigkeitsnetz setzt dieser Stadtteil [...] auch in Sachen Telekommunikation Standards für die Zukunft." Aus einer [Pressemitteilung der Pfalzcom/Manet](http://www.pfalzkom-manet.de/fileadmin/customer/documents/pdf/presse/20110713_KoopVertrag_in_HD.pdf)
+
+Die Tarife, die in der Bahnstadt angeboten werden, haben recht ordentliche Download-Raten, aber nur minimale Upload-Raten. Die Upload-Rate ist in der Tat so winzig, dass selbst traditionelle Technologien wie DSL und Kabel, oder sogar Mobilfunktarife mehr anbieten. Das ist lächerlich. Die Ansprüche an moderne NGA-Netze wie Glasfaser sind weit höher (bis zu 20-fach). Die Konkurrenz in anderen Städten spielt daher logischerweise in einer ganz anderen Liga.
+
+Fazit: Die Infrastruktur der Bahnstadt sollte ursprünglich für unterschiedliche Anbieter zur Verfügung stehen. Das hat bis heute nicht funktioniert – nicht mal im Ansatz. Keiner der Anwohner hatte beim Einzug eine Wahl. Wo sind die Deutsche Telekom, KabelBW, Vodafone und 1&1? Die angebotenen Tarife sind nach Augenwischerei-Taktik aufgebaut. Viel versprochen – wenig gehalten. Zukunftsorientierung, Fehlanzeige. Gerade PremiumTK, die den Großteil der Bahnstadt versorgen, brillieren mit den im nationalen Vergleich schlechtesten Tarifen. Monopole sind immer gefährlich. Das muss sich ändern.
+
+Die Bahnstadt besitzt eine moderne Internet-Infrastruktur. Jetzt bedarf es passender Produkte und einer größeren Anbieterauswahl, damit Versprechen gehalten und Erwartungen erfüllt werden. Das Bahnstadt-Image eines hochmodernen Stadtteils soll ja keinen Schaden nehmen.
+
+## Bahnstadt-Info
+
+Zuerst erschienen in der [Bahnstadt-Info März 2015](http://media.wix.com/ugd/948b76_2c192b633eaf4d2cb533340910d619ec.pdf) (Nr. 30 vom 20.03.2015).
diff --git a/app/blog/2015-06-falsche-farben.mdx b/app/blog/2015-06-falsche-farben.mdx
new file mode 100644
index 0000000..03cebbf
--- /dev/null
+++ b/app/blog/2015-06-falsche-farben.mdx
@@ -0,0 +1,301 @@
+---
+layout: post
+title: "Falsche Farben — So gelingt die Arbeit mit Farben besser"
+date: 2015-06-12 9:40:03 +0200
+tags: Design Farben
+author: werner
+signup: true
+---
+
+import { Image } from "../components/blog/Image"
+
+import titleImage from "./images/farben/title.jpg"
+import munsellImage from "./images/farben/munsell-system.png"
+import srgbImage from "./images/farben/srgb-gamut.png"
+import rgbCmykImage from "./images/farben/rgb-vs-cmyk.png"
+import hueImage from "./images/farben/hue.jpg"
+import cie1931Image from "./images/farben/cie-1931.png"
+import huslImage from "./images/farben/husl-stretching.png"
+import ciecamImage from "./images/farben/surround-red-ciecam02.png"
+import pantoneImage from "./images/farben/pantone-art.jpg"
+import hlcFaecherImage from "./images/farben/hlc-faecher.jpg"
+
+export const summary = `Ein umfangreiches Verständnis für Farben ist unter Web-Entwicklern und sogar Designern oft nicht vorhanden. Der Mensch nimmt Farben nicht in der gleichen Form wahr, wie diese technisch erfasst werden. Vielmehr hat er durch unterschiedlich gut ausgebaute Fähigkeiten verschiedener Rezeptoren im Auge erhebliche Unterschiede in der Wahrnehmung verschiedener Farbgruppen. Noch dazu wird durch eine Vielzahl von Effekten der Umgebung diese Wahrnehmung noch massiv beeinflusst.`
+
+
+
+{summary}
+
+
+
+Zur Definition von Farben gibt es unterschiedliche Modelle und Formate. Viele davon haben eine sehr lange Historie. Nur Wenige beachten den Menschen umfassend genug um als sinnvoll für eine Vielzahl von Arbeiten zu gelten. Beispiele hierfür wären die Bearbeitung von Bildern oder das mathematische Arbeiten mit Farben z.B. das prozentuale Anpassen der Helligkeit. Auch Harmonien bzw. Unterschiede zwischen Farben — es gibt hierzu diverse Ideen — machen genau genommen keinen Sinn, wenn das fundamentale Modell dahinter eine massiv verzerrte Darstellung im Vergleich zur menschlichen Wahrnehmung nutzt.
+
+## RGB und Hex
+
+
+
+Im Internet verwenden die meisten Web-Entwickler [RGB-Farben](http://de.wikipedia.org/wiki/RGB-Farbraum), die auch gerne als Hex-Werte angegeben werden. Man stellt bei der Verwendung von RGB-basierten Farben schnell fest, dass Änderungen an den Einzelwerten keine nachvollziehbaren Änderungen bewirken. Das ergibt sich durch eine ganze Reihe von Gründen. RGB definiert die Ausprägung der Farben Rot, Grün und Blau und damit deren Mischungsverhältnis. Intuitiv würde man denken, dass man hiermit gut alle Farben sinnvoll abbilden kann: Die meisten Farbtöne entstehen durch Mischungen dieser Einzelfarben. Das ist auch soweit nicht ganz falsch. Problembehaftet ist hierbei aber, dass die Helligkeit und Sättigung (bzw. zum besseren Verständnis: Kräftigkeit) der Farben sich eher indirekt ergibt: Wenn sich der Wert aller Grundfarben reduziert sinkt sowohl die Helligkeit als auch die Sättigung.
+
+Am gebräuchlichsten unter den RGB-Farbräumen (es gibt mehr als eine Variante zur Verwendung in unterschiedlicher Software und Hardware) ist heute [sRGB](http://de.wikipedia.org/wiki/SRGB) (von 1996), der sowohl zur Kalibrierung von Monitoren (Ziel ist oft eine >99%-ig korrekte Abbildung des sRGB-Farbraumes) als auch im Web als Standard verwendet wird. Durch das geringe Gamut — eine Bezeichnung für den Anteil des abgedeckten sichtbaren Spektrums — präferieren Bildverarbeitungsexperten aber [Adobe RGB](http://de.wikipedia.org/wiki/Adobe-RGB-Farbraum) (von 1998) oder das [ECI-RGB](http://www.eci.org/doku.php?id=de:colourstandards:workingcolorspaces). Beide können einen weitaus größeren Anteil der sichtbaren Farben abbilden als sRGB.
+
+## CMYK
+
+
+
+Für den Vierfarbdruck durch Offset-Drucker bzw. Druckereien wird meistens CMYK genutzt. Für den Einsatz am Bildschirm hat dieses Farbmodell keine Relevanz und wird nach dem Design am Bildschirm (das meist in anderen Farbräumen stattfindet) nur entsprechend umgerechnet. Druckereien verwenden sogenannte ICC-Profile für das Farbmanagement um die rohen CMYK-Daten an die Fähigkeiten bzw. Unfähigkeiten des Ausgabegerätes anzupassen.
+
+CMYK findet man hauptsächlich in Programmen, die ursprünglich für die Erzeugung von Druckprodukten entwickelt worden sind. Unter anderem in der der Adobe-Kollektion aber auch z.B. in Gimp und Affinity Designer.
+
+## HSL und HSB
+
+Seit ein paar Jahren kann man im Web auch Farben über HSL definieren. Mit HSL werden Farben mittels Hue (Farbton), Saturation (Sättigung) und Luminanz (Helligkeit) definiert. Dies löst einen Großteil der Probleme von RGB. Endlich hat man eine gute Kontrolle über Sättigung und Helligkeit — und das ohne den Farbton zu ändern. HSB und HSL sind in der Art und Weise vergleichbar, aber nicht identisch. Man kann beide ineinander umrechnen, aber man kann nicht einfach den gleichen Einzelwert im anderen Modell einsetzen (außer für Hue/Farbton).
+
+
+
+Es gibt allerdings noch ein paar Probleme, die gegen die Verwendung von HSL/HSB zur Definition und Berechnung von Farben und Paletten von Farben sprechen. Alle bisher genannten Modelle beziehen sich nur auf technische Gegebenheiten und lassen den Menschen und seine Wahrnehmung komplett außen vor. Das führt dann z.B. dazu, dass unterschiedliche Farbtöne bei gleicher Sättigung völlig unterschiedlich gesättigt erscheinen.
+
+Außerdem bilden alle diese Modelle nur einen Teil des durch Menschen wahrnehmbaren Spektrums ab. Das Gamut (Menge aller Farben, die ein Gerät darstellen, wiedergeben bzw. aufzeichnen kann) ist bei diesen verhältnismäßig klein. Umrechnungen zwischen den Modellen können, da sich die Modelle zusätzlich auch nicht 100%-ig überlagern, verlustbehaftet sein (gerade weil in der Regel mit den gerundeten Werten des jeweiligen Modells gearbeitet wird).
+
+Wir empfehlen grundsätzlich auf Methoden zur Manipulation von Farben, die HSL/HSB-basiert sind, zu verzichten. Das schließt dann z.B. auch die elegant wirkenden Farbmethoden von [Sass](http://sass-lang.com) (einem Tool zur Arbeit mit CSS) wie [adjust_color](http://sass-lang.com/documentation/Sass/Script/Functions.html#adjust_color-instance_method) mit ein. Es hilt natürlich auch nichts [HSB in HSL umzurechnen](http://www.sitepoint.com/hsb-colors-with-sass/) auch wenn man dann natürlich Farbtöne direkt aus Photoshop, Illustrator, Gimp und Co kopieren kann. HSB, welches unter anderem in der Adobe Kollektion, Gimp und als Standard unter Mac OS genutzt wird, ist allgemein weiter verbreitet als HSL, welches unter anderem Teil der CSS3-Spezifikation und in Affinity Designer zur Farbauswahl angeboten wird.
+
+## CIEXYZ
+
+Das CIEXYZ-Farbraum ist ein erster Versuch gewesen Farben so abzubilden wie der Mensch diese wahrnimmt. Außerdem sollte mir CIEXYZ ein einheitlicher Standard zur Definition aller wahrnehmbaren Farben gefunden werden.
+
+
+
+CIEXYZ ist entsprechend schon alt. Der Standard wurde im Jahr 1931 spezifiziert (nach Forschungen, die schon 1920 begonnen haben). CIEXYZ stellt die Basis für den reellen CIERGB-Farbraum dar und ist einer der ersten RGB-Farbräume überhaupt. CIERGB bildet nur einen Teil des CIEXYZ-Farbraums ab — beinhaltet aber im Gegensatz zu diesem auch nur darstellbare Farben. Die Limitierungen lagen vor allem in weniger Feinheiten und fehlenden Farben im grün-blauen Bereich des Farbspektrums.
+
+Das CIEXYZ-System wurde in den Jahren bis 1931 erstellt. Die damalige Präzision für exakte wissenschaftliche Zwecke ist unter heutigen technischen Möglichkeiten unzureichend. Trotzdem basieren alle weiteren CIE-Modelle bisher weiterhin auf dem klassische CIEXYZ-Modell.
+
+Das CIEXYZ-System wird heute meist nur als Umrechnungsbasis zwischen RGB und anderen CIE\*-Farbräumen verwendet.
+
+## CIELAB und CIELUV
+
+Die beiden Farbräume CIELAB und CIELUV (von 1976) sind eine Verbesserung des CIEXYZ-Farbmodells um die menschliche Wahrnehmung bei der Definition von Farben noch besser in Betracht zu ziehen. Beide transformieren über mathematische Formeln, den Ursprungsfarbraum CIEXYZ. Ziel war es, dass eine gleichmäßige Anpassungen der Werte auch dazu führt, dass sich die Farbe — relativ betrachtet — genauso viel verändert.
+
+
+ Unlike the RGB and CMYK color models, Lab color is designed to approximate
+ human vision. It aspires to perceptual uniformity, and its L component closely
+ matches human perception of lightness.
+
+
+
+Mit Erreichung dieses Zieles wäre eine mathematische Anpassung von Farben korrekt möglich. Mit HSL/HSB — wie bereits erwähnt — ist das leider nicht der Fall. In der Konsequenz heißt das, dass alle Tools und Lösungen, die Farben auf Basis von HSL/HSB anpassen z.B. via Methoden wie `lighten` oder `darken` zwangsweise falsche Ergebnisse liefern. Falsch bedeutet in dem Fall aber nicht, dass diese völlig daneben liegen. Immerhin wird ein Bild schon dunkler bei der Verwendung von 'darken()' — allerdings kann z.B. ein rötlicheres Bild nach der Abdunklung weniger dunkel erscheinen als ein Türkises.
+
+
+ CIELAB is one of the most widely used because it has become one of the
+ building blocks of color management with ICC profiles. Therefore, it is
+ basically omnipresent in digital imaging.
+
+
+
+
+
+CIELAB und CIELUV unterscheiden sich in soweit, dass CIELUV ursprünglich für beleuchte Flächen gedacht war — also z.B. Bildschirme — während CIELAB eher für passive Flächen wie für den Ausdruck gedacht war. CIELUV spielt heute allerdings, trotz der riesigen Menge an Displays heutzutage, überraschenderweise keine große Rolle mehr. Wenn man sich im professionellen Umfeld umsieht, ist meist nur die Rede von CIELAB bzw. kürzer auch LAB. Programme wie Photoshop und auch neue Kandidaten wie Affinity Designer bieten neben den Klassikern wie RGB auch eine Eingabe als LAB-Farben an. CIELAB dient diesen Programmen oft auch intern als Speicherformat — alle anderen Farbräume werden entsprechend umgerechnet.
+
+
+ The consensus among the attendees was that CIELUV was not really needed
+ anymore (all current color science development revolved around CIELAB and
+ CIECAM worldwide) it was agreed to keep it around for 'emissive' people.
+
+
+
+Ein Grund der gegen CIELUV spricht, ist aber auch, dass CIELUV nicht ganz so gleichmäßige Abstände bei der Abbildung der Farben realisiert hat. CIELAB hat dieses Ziel also besser erfüllt und erlaubt die Beschreibung aller wahrnehmbaren Farben mit sehr gleichmäßigen Abständen.
+
+CIELAB findet man in allen professionellen Grafikprogrammen: Adobe Photoshop, Affinity Designer, Corel Graphics, Gimp und vielen mehr. CIELUV hat sich nicht durchgesetzt, ist aber z.B. die Basis von HUSL (siehe nächster Absatz).
+
+## HUSL — Das CIELUV-Derivat
+
+[HUSL](http://www.husl-colors.org) verfolgt die Anpassung des CIELUV-Farbraumes, um diese verwendbarer zu gestalten. Ein Problem bei der Verwendung von CIE-Farben ist nämlich, dass es möglich ist, Farben zu definieren, die im Endeffekt nicht abbildbar sind. HUSL stretcht daher den Farbraum so, dass dieser eine Abbildung in einer HSL-typischen Aufbereitung erlaubt.
+
+
+
+Diese Anpassung verzieht allerdings den Farbraum derart, dass die Sättigung, wenn man unterschiedliche Farbtöne vergleicht, nicht mehr gleichmäßig ist. Das rechnen mit Farben, also das mathematische heller/dunkler bzw. intensiver/sanfter machen der Farben, ist daher mit HUSL kaum möglich. Trotzdem dürfte HUSL, aufgrund der Beachtung des Menschen, die bessere Wahl zur Definition von Farben sein als das weiter verbreitete HSL/HSB.
+
+Es gibt unseres Wissens nach keine Programme für die Arbeit HUSL. Es gibt aber Umsetzungen zur Verwendung in JavaScript-, Python- und C#-Anwendungen.
+
+## HLC — CIELAB in einfacher
+
+HLC (bzw. L\*C\*h° oder LCHab) erlaubt die [einfachere Handhabung von CIELAB-Farben](http://cielab-farben.de/hlc_in_5_minuten.html). Im Kern also vergleichbar mit der Idee von HUSL für CIELUV (oder LCHuv). Genau wie in HSL/HSB gibt es wieder einen mit 360 Grad ausgestatteten Farbton-Radius. (Die Werte dafür sind aber wieder nur ähnlich und nicht identisch.) Ein Nachteil ist allerdings, dass HLC etwas reduziert ist bzgl. Farbumfang/Gamut und daher nicht alle in CIELAB realisierbaren Farben korrekt bzw. über gerade Werte, abbilden kann.
+
+Lch kann man über diverse APIs wie z.B. "Color Science" für Python nutzen. Für die nutzerfreundlichere Variante HLC gibt es Farbfächer vom [DTP Studio](http://dtpstudio.de/) in denen man auch die CIELAB-Werte ablesen kann und somit die Werte in ein Grafikprogramm übertragen kann.
+
+## CIECAM
+
+CIECAM97 (von 1997) und CIECAM02 (von 2002) sind weiter verbesserte Versionen eines Farbraums auf Basis der Erkenntnisse von CIELAB, die neben der verbesserten menschlichen Wahrnehmung auch noch weitere Umgebungsvariablen mit einbeziehen. Man bezeichnet sie daher auch als "Farberscheinungsmodell" — das passt aber auch schon in reduzierter Art und Weise für CIELAB (Beachtet die Adaption an den Weißpunkt und die sogenannte Kompression der Helligkeitswahrnehmung).
+
+CIECAM97 spielt heute keine Rolle mehr. Es war nur ein Zwischenschritt zum einfacheren und gleichzeitig besseren CIECAM02.
+
+
+ Neither CIELAB or CIELUV are considered "perceptually uniform" nowadays.
+
+
+
+
+
+CIECAM korrigiert viele Effekte (z.B. die Stevens- und Hunt-Effekte), die im Laufe der Zeit identifiziert wurden. Somit kann man mit CIECAM Farben korrekter in Relation zueinander bringen. Abstände innerhalb von CIECAM entsprechen noch besser den Abständen der menschlichen Wahrnehmung. Es berücksichtigt in größerem Umfang Dinge wie etwa Bildhelligkeit, Farbhintergrund, Bildumgebung, Weißpunkt, Adaptation und Simultankontrast. Daher ist CIECAM besser als CIELAB zur Definition und Berechnung von Farben.
+
+CIECAM ist allerdings auch weit komplexer als CIELAB und benötigt zur Berechnung z.B. viel mehr Informationen zur Umgebung etc. Diese Variablen können natürlich alle auf Standard-Werten belassen werden. Wobei es natürlich am besten wäre die meisten dieser Werte automatisch zu bestimmen.
+
+
+ CIECAM02 ist das letzte international empfohlene Modell.
+
+
+
+Ein weiter verbessertes Model nach CIECAM ist laut [Mark Fairchild](http://rit-mcsl.org/fairchild/) — einem anerkannten Professor zur Farblehre — nicht so schnell in Sicht. Weitere Verbesserungen würden in erheblichen Umfang sehr detaillierte Forschungen erfordern. Die Arbeit geht aber natürlich weiter mit Modellen wie iCAM, die sich aber eher auf den Eindruck ganzer Bilder (sogenannte Image Color Appearance Modelle) fokussieren und sehr relevant sind z.B. für die HDR-Fotografie.
+
+CIECAM ist die Basis für das Windows Farbmanagement-System, ist Kerntechnologie der HDR-Software Enblend und steht im RAW-Entwickler RawTherapee zur Anpassung von Bildern zur Verfügung.
+
+## Pantone, RAL, HKS und Co
+
+Diese nicht freien Farbsysteme wie [Pantone](http://de.wikipedia.org/wiki/Pantone_Matching_System), [RAL](http://de.wikipedia.org/wiki/RAL-Farbe) und [HKS](http://de.wikipedia.org/wiki/HKS-Farbfächer) kosten eine gute Menge an Geld und [helfen im Prinzip nicht mehr als die freien Standards](http://freiefarbe.de) der CIE-Gruppe. In großen Konzernen werden diese Farbsysteme oft verwendet. Klassischerweise kommen sie aus dem Druckbereich und garantieren auch wirklich die passende Ausgabefarbe zu erhalten.
+
+
+
+Pantone arbeitet zum Beispiel mit extra gemischten Volltonfarben und umgeht daher die reduzierten Möglichkeiten eines auf der Mischung von vier Farben basierenden CMYK-Druckes. Für den Bildschirm ist aber in jedem Fall eine Umrechnung nach sRGB zur Anzeige erforderlich.
+
+RAL basiert im Kern auf CIELAB, aber bringt nach Auffassung des Herstellers wohl Ordnung und Beherrschbarkeit in das System.
+
+Interessant ist weiterhin, dass es einige Farben in diesen Systemen gibt, die durch große Marken und Unternehmen gesperrt sind. Ein paar bekannte Beispiele wären hier:
+
+- Beiersdorf-Blau (Pantone 280)
+- Telekom-Magenta (RAL 4010)
+- Langenscheidt-Gelb
+- Milka-Lila
+
+In den genannten Farbsystemen wird mit festen Tabellen statt mit Mathematik gearbeitet (daher wird auch oft von Farbtabellen, Farbreihen bzw. Sonderfarben statt Farbsystemen gesprochen). Für Abstufungen sucht man — je nach System — z.B. innerhalb einer Tabelle nach dem nächsten Farbton in der jeweiligen Richtung. Es handelt sich um Variation von Pigmentanteilen statt auf Empfindung basierender Verfahren.
+
+Feiner als mit den Tabellen des Anbieters kann man in diesen Systemen nicht arbeiten. Harmonien lassen sich auch schwer berechnen und auch nicht mathematisch darlegen.
+
+Man kann alle Farben — bis auf Schmuckfarben wie Gold — aus diesen Systemen auch als CIELAB/CIECAM definieren. Was im Gegenzug aber nicht bedeutet, dass man diese im Anschluss über CMYK auch drucken kann. CMYK deckt schließlich nicht das volle wahrnehmbare Spektrum ab und so kann man via Pantone, HKS und Co Farben produzieren, die es in der CMYK-Welt nicht gibt.
+
+Pantone, RAL, HKS und Co begegnen einem mehrheitlich im Umfeld des Offset-Drucks bzw. dem Druck mit Lack-Farben. Für das Branding großer Marken wird außerdem häufig auf diese Farbpaletten zurückgegriffen.
+
+## Fazit
+
+Berechnete Farben sind Urheber- und Lizenz-frei. Und oft möchte man berechnen — jedenfalls sobald man in der Lage ist, Farben wirklich anhand der menschlichen Empfindung zu behandeln.
+
+RGB und CMYK fallen aufgrund des begrenzten Farbumfangs/Gamuts wie erwähnt aus. Feste Tabellen wie Pantone erlauben keine Berechnung und zwingen einen in feste unflexible Systeme.
+
+
+ Die Internationale Beleuchtungskommission (Commission Internationale de
+ l'Eclairage, CIE) ist keine Firma, sondern ein recht kleiner weltweit aktiver
+ wissenschaftlich arbeitender Verein, der sich der Weiterentwicklung von
+ Farbmodellen und Standardisierung von Lichtquellen verschrieben hat.
+
+
+
+Was bleibt sind die neueren CIE-Standards wie CIECAM und CIELAB. Nach unserer Einschätzung macht es Sinn bei der Entwicklung von neuen Designs konsequent auf eines dieser Modelle zu setzen.
+
+
+ CIELAB has become a standard colorimetric space and is one of the most
+ practical and widely implemented color models available.
+
+
+
+
+
+- CIECAM ist dabei unser Favorit zur Berechnung von Farben, da er eine sehr gute Gleichmäßigkeit bei Farbton und Sättigung aufweist und einige relevante Informationen der Umgebung mit beachtet.
+- CIELAB bzw. HLC ist vermutlich der sinnvolle Kompromiss, da dieser aktuell eine weit bessere Verbreitung aufweist und es neben weitreichendem Support in Grafikprogrammen auch z.B. [Farbfächer zu kaufen](http://dtpstudio.de/cielab/shop.php) gibt.
+
+CIELAB als auch CIECAM bilden das volle sichtbare Gamut ab. Solange man die Einzelwerte nicht rundet, lassen sich beide Farbräume verlustfrei konvertieren. Man kann z.B. über einen HLC-Farbfächer eine Farbe auswählen und anschließende Berechnungen zu Harmonien oder Abstufungen über CIECAM realisieren. Am Ende gibt man dann RGB für den Bildschirm aus bzw. CMYK für den Druck.
+
+## Ressourcen
+
+- [Watercolors](http://www.handprint.com/HP/WCL/color7.html)
+- [Bruce Justin Lindbloom](http://www.brucelindbloom.com/index.html?Math.html)
+
+_[API]: Schnittstelle zur Anwendungsprogrammierung
+_[CAM]: Farberscheinungsmodell
+_[CIE]: Internationale Beleuchtungskommission
+_[CIECAM]: Farberscheinungsmodell von 2002
+_[CIELAB]: Farbmodell zur Beschreibung aller wahrnehmbaren Farben
+_[CIELUV]: Alternatives Farbmodell zu CIELAB für Bildschirme
+_[CIERGB]: RGB-Farbraum der CIE
+_[CIEXYZ]: Klassisches Basis-Farbmodell zur Erfassung aller wahrnehmbaren Farben
+_[CMYK]: Ein subtraktives Farbmodell, das die technische Grundlage für den modernen Vierfarbdruck bildet.
+_[CSS]: Zur Definition der Formatierung von HTML-Dokumenten
+_[DTP]: Gestaltung von Dokumenten, die aus Texten und Bildern bestehen und später als Publikationen, wie zum Beispiel Broschüren, Magazine, Bücher oder Kataloge, ihre Verwendung finden.
+_[HDR]: Bild mit hohem Dynamikumfang
+_[HKS]: Basis- und Volltonfarben für Kunstdruck- und Naturpapiere
+_[HLC]: Abkürzung für Hue-Lightness-Chroma
+_[HSB]: Farbmodell welches eine Farbe mit Hilfe des Farbwerts (Hue), der Farbsättigung (Saturation) und der absoluten Helligkeit (Brightness) definiert.
+_[HSL]: Farbmodell welches eine Farbe mit Hilfe des Farbwerts (Hue), der Farbsättigung (Saturation) und der relativen Helligkeit (Lightness) definiert.
+_[HUSL]: Vereinfachte Variante von CIELUV
+_[ICC]: Internationale Vereinigung von Kozernen zur Vereinheitlichung von Farben
+_[LAB]: Siehe CIELAB
+_[LCH]: Abkürzung für Lightness-Chroma-Hue
+_[RAL]: Eine normierte Farbtabelle der RAL gGmbH
+_[RGB]: Ein additiver Farbraum, der Farbwahrnehmungen durch das additive Mischen dreier Grundfarben (Rot, Grün und Blau) nachbildet. Siehe auch CMYK.
+_[SRGB]: Versuch einen Standard-RGB-Farbraum zu schaffen.
+_[WCS]: Farbmanagement-Software die in Windows seit Vista verwendet wird.
diff --git a/app/blog/2015-06-live-einrichtung-mit-unreal-engine.mdx b/app/blog/2015-06-live-einrichtung-mit-unreal-engine.mdx
new file mode 100644
index 0000000..fc0fa7e
--- /dev/null
+++ b/app/blog/2015-06-live-einrichtung-mit-unreal-engine.mdx
@@ -0,0 +1,48 @@
+---
+layout: post
+title: "Unglaublich: Live Demonstration der Wohnungs-Einrichtung mit der Unreal Engine"
+date: 2015-06-23 21:40:03 +0200
+tags: Architektur Einrichtung Unreal 3D
+author: werner
+---
+
+export const summary = `Das ist mal völlig verrückt. Man — bzw. [CG Cloud](http://cgcloud.pro) — kann mittlerweile ganze Wohnungen live rendern und diese zur Demonstration bzw. zum Anpassen der Inneneinrichtung nutzen.`
+
+{summary}
+
+
+
+Das ganze basiert auf der [Unreal Engine](https://de.wikipedia.org/wiki/Unreal_Engine) - mit der wurden sonst eigentlich "nur" Spiele gemacht. Statt klassischerweise stundenlang etwas als statische Film rendern zu müssen, kann man es mittlerweile direkt live sehen und sogar steuern. Natürlich ist das für den Ersteller weiterhin sehr mühevoll. Immerhin [370 Objekte wurden wohl per Hand gezeichnet](http://www.fastcodesign.com/3047559/the-model-home-of-the-future-will-be-computer-generated) und übertragen. Ganze 3 Wochen Arbeit.
+
+Aber es gibt auch jede Menge Vorteile:
+
+- Direkte Anpassung von Objekten: kein Problem
+- Andere Blickwinkel: kein Problem
+- Andere Beleuchtung: kein Problem
+
+Die Unreal Engine ist das gleiche Biest, welches mittlerweile die neue [Metal-Schnittstelle von Apple]() benutzt. Jetzt bin ich ja mal gespannt, wann ich meine Wohnung direkt auf dem iPad in dieser Art und Weise durchwandern und gestalten kann. Muss ja nicht direkt in [4K](https://de.wikipedia.org/wiki/Ultra_High_Definition_Television) sein wie das Demo des Lofts oben.
+
+
+
+So geht Zukunft.
diff --git a/app/blog/2015-06-sommerlektuere-von-bill-gates.mdx b/app/blog/2015-06-sommerlektuere-von-bill-gates.mdx
new file mode 100644
index 0000000..4049564
--- /dev/null
+++ b/app/blog/2015-06-sommerlektuere-von-bill-gates.mdx
@@ -0,0 +1,48 @@
+---
+layout: post
+title: "Sommerlektüre von Bill Gates"
+date: 2015-06-15 10:35:32 +0200
+tags: Lesen Bücher
+author: werner
+---
+
+import { Image } from "../components/blog/Image"
+import { Book } from "../components/blog/Book"
+
+import summerBooksImage from "./images/buecher/summer-books_2015_1200px_v1.jpg"
+
+export const summary = `Bill Gates ist ein bemerkenswerter Mensch. Seit er bei Microsoft nicht mehr aktiv ist und sich ganz anderen Themen widmet, kommen von Ihm immer wieder interessante Berichterstattungen und Empfehlungen.`
+
+
+
+{summary}
+
+Diesmal hat er [ein paar tolle Empfehlungen für Lesematerial](http://www.gatesnotes.com/About-Bill-Gates/Summer-Books-2015) in euren nächsten Sommerurlaub. Er nennt es auch passend "Beach Reading".
+
+Besonders spannend fanden wir diese hier:
+
+
+
+
+ What if? Was wäre wenn?: Wirklich wissenschaftliche Antworten auf absurde
+ hypothetische Fragen
+
+
+
+
+ Der Zauber der Wirklichkeit: Die faszinierende Wahrheit hinter den Rätseln
+ der Natur
+
+
+
+ How to Lie with Statistics
+
+
+
+Bei den ersten Beiden gab es deutsche Versionen - denen habe ich hier mal den Vorzug gegeben.
+
+Und nun: Viel Spaß beim Lesen am Strand.
diff --git a/app/blog/2015-07-nodejs-applikation-in-einer-datei.mdx b/app/blog/2015-07-nodejs-applikation-in-einer-datei.mdx
new file mode 100644
index 0000000..4ec4bff
--- /dev/null
+++ b/app/blog/2015-07-nodejs-applikation-in-einer-datei.mdx
@@ -0,0 +1,76 @@
+---
+layout: post
+title: "Node.js-App als ausführbare Einzeldatei"
+date: 2015-07-12 14:00:00 +0200
+tags: Nodejs iojs Ausführbar Datei Linker
+author: fastner
+signup: true
+---
+
+import { Image } from "../components/blog/Image"
+
+import chainImage from "./images/jslinker/chain-257492.jpg"
+
+export const summary = `Unsere Kunden sind immer wieder ein Quell guter Inspirationen. In diesem Fall wollte unser Kunde seine Webseiten aus der Git-Quelle auf dem Server fertig zusammenbauen. Das ist an sich noch nichts besonderes. Doch die Optimierung der HTML-Dateigrößen durch einen HTML-Kompressor gehört heute zum guten Ton der Entwicklung.`
+
+
+
+{summary}
+
+In besagtem Projekt wird UglifyJS verwendet. Um nicht Node.js - die Ausführungsumgebung für UglifyJS - auf dem Server installieren zu müssen haben wir [JSLinker](https://github.com/sebastian-software/jslinker) entwickelt.
+
+_JSLinker_ baut aus der Node.js-Laufzeitumgebung und einer Node.js-Applikation eine einzelne ausführbare Datei.
+
+## JSLinker installieren
+
+Die Benutzung von _JSLinker_ setzt eine installierte Node.js- oder io.js-Umgebung voraus. Danach ist die Installation von _JSLinker_ einfach.
+
+```bash
+npm install -g jslinker
+```
+
+Ab sofort steht der Befehl `jslinker` auf der Kommandozeile zur Verfügung.
+
+## JSLinker benutzen
+
+_JSLinker_ kann sowohl lokale Node.js-Applikationen als auch _npm_-Pakete umwandeln. Außerdem muss man sich für die Zielplattform entscheiden.
+
+## JSLinker mit einem npm-Paket verwenden
+
+_JSLinker_ verwendet das von dem Paketbetreuer festgelegt Startskript. Dies ist in der `package.json` unter `scripts.start definiert. Ebenfalls wird - ohne weitere Parameter - die aktuelle Plattform als Zielsystem für die ausführbare Datei verwendet.
+
+```bash
+jslinker --npm uglify-js
+```
+
+Leider hat UglifyJS kein Skript als Startskript definiert. Daher die Fehlermeldung `Error: No start script found, please specify by command line parameter --main`. UglifyJS wird per `bin/uglifyjs` gestartet.
+
+```bash
+jslinker --npm uglify-js --main bin/uglifyjs
+```
+
+Wenn die Meldung `--- created` erscheint hat alles funktioniert. Diese Datei kann jetzt ausgeführt werden, ohne dass Node.js installiert sein muss.
+
+## JSLinker für eigene Projekte verwenden
+
+_JSLinker_ kann auch ohne `--npm` verwendet werden. Dazu muss im aktuellen Verzeichnis eine `package.json` bestehen.
+
+```bash
+jslinker
+```
+
+## Ausführbare Datei für andere Plattformen bauen
+
+Als Standard baut _jslinker_ eine ausführbare Datei für die aktuelle Plattform. Dieses Verhalten kann über Parameter verändert werden. Alle Parameter sind mit `jslinker --help` zu sehen.
+
+```bash
+jslinker --engine iojs --version v2.3.1 --platform linux --arch x64
+```
+
+Die erstelle ausführbare Datei kann unter Linux auf einer 64-Bit-Architektur ausgeführt werden. Als Laufzeitumgebung wird _io.js_ in der Version 2.3.1 verwendet.
+
+## Technischer Hintergrund
+
+Die erstellte ausführbare Datei ist ein kleines Shellskript mit angehängter .tar.gz-Datei. Dieses Archiv wird in ein temporäres Verzeichnis entpackt. In dem Archiv ist sowohl die Node.js-Laufzeitumgebung als auch die Node.js-Anwendung inklusive aller NPM-Abhängigkeiten enthalten. Das Skript gibt alle eigenen Parameter weiter an das definierte Startskript. Nach der Ausführung wird das temporäre Verzeichnis wieder gelöscht.
+
+Für die Ausführung des Shellskripts werden sowohl _tar_ inklusive GZip, _awk_ als auch _tail_ benötigt. Daher kann _jslinker_ derzeit nur ausführbare Dateien für Linux und Apple OS X bauen.
diff --git a/app/blog/2015-07-rechtschreibung-und-jekyll.mdx b/app/blog/2015-07-rechtschreibung-und-jekyll.mdx
new file mode 100644
index 0000000..33a85ac
--- /dev/null
+++ b/app/blog/2015-07-rechtschreibung-und-jekyll.mdx
@@ -0,0 +1,114 @@
+---
+layout: post
+title: "Rechtschreibung mit Hunspell und Jekyll"
+date: 2015-07-09 9:35:32 +0200
+tags: Jekyll Rechtschreibung Hunspell
+author: werner
+signup: true
+---
+
+export const summary = `Wer es mit Jekyll ernst meint wird wohl früher oder später feststellen, dass es gar nicht so einfach ist, in dem System mit typischen Redaktionstools zu arbeiten. Die meisten werden einen einfachen Text-Editor wie Sublime Text benutzen, in dem eine Rechtschreibprüfung wie in Word, nicht mal eben eingebaut ist. Wir dachten uns daher, ob man dies nicht besser sei, dies unabhängig vom Redakteur und seinem eigenen System auch lösen kann. Jede Homepage soll mit einem Wörterbuch kommen und eine eingebaute Rechtschreibprüfung besitzen.`
+
+{summary}
+
+Und ja es geht. Innerhalb der typischen Unix-Kommandozeilen-Tools gab es schon lange eine Rechtschreibkontrolle mit dem Namen [Ispell](http://www.gnu.org/software/ispell/) von 2006. Dann kam [Aspell](http://aspell.net/) - welches seit 2011 nicht mehr weiterentwickelt wird. Aktuell ist wohl [Hunspell](http://hunspell.sourceforge.net/) die Wahl unter den Rechtschreibtools. Auch in der Unix-Welt gibt es also stetige Weiterentwicklung. Hunspell steckt wohl beinahe überall drin. In der OpenOffice-Suite, dem Chrome-Browser und sogar in Mac OS.
+
+## Hunspell installieren
+
+Die aktuelle Version von Hunspell kann man am einfachsten via [Homebrew](http://brew.sh) auf dem Mac installieren.
+
+```bash
+brew install hunspell
+```
+
+Im Gegensatz zu Aspell gibt es bei Homebrew aber keine Wörterbücher zur direkten Installation via Homebrew. Diese werden nämlich außerhalb der typischen Homebrew-Verzeichnisse systemweit in `/Library/Spelling/` oder im Nutzerverzeichnis `~/Library/Spelling/` installiert.
+
+Es ist empfehlenswert auch noch Python 3 zu installieren, da wir dieses im folgenden Ablauf noch benötigen:
+
+```bash
+brew install python3
+```
+
+## Wörterbücher beziehen
+
+Aktuelle Wörterbücher gibt es z.B. bei:
+
+- [Mozilla](https://addons.mozilla.org/de-DE/firefox/language-tools)
+- [OpenOffice](http://extensions.services.openoffice.org/de/dictionaries)
+
+Beide Dateien sind im Prinzip ZIP-Dateien und lassen sich über normale Archivprogramme entpacken. Dafür ist es unter Umständen notwendig die Endungen nach `.zip` anzupassen. Die relevanten Dateien findet man dann in:
+
+- Mozilla: `dictionaries/de-DE.aff` und `dictionaries/de-DE.dic`
+- OpenOffice: `de_DE_frami/de_DE_frami.aff` und `de_DE_frami/de_DE_frami.dic`
+
+Das Wörterbuch von OpenOffice ist weit größer und enthält zusätzlich auch die Datenbanken für Thesaurus und Silbentrennung. Beides ist für Hunspell jetzt nicht direkt sinnvoll nutzbar und somit eher in der Office-Suite relevant.
+
+Das heruntergeladene Wörterbuch muss dann in das entsprechende Spelling-Verzeichnis als `~/Library/Spelling/de_DE.dic` und `~/Library/Spelling/de_DE.aff` oder alternativ in das entsprechende systemweite Verzeichnis kopiert werden.
+
+## Rechtschreibung mit Jekyll verbinden
+
+Um die Rechtschreibung zu überprüfen macht es Sinn, die Seiten über den normalen Ablauf in Jekyll zu generieren und dann die resultierenden Seiten zu testen. Das hat nämlich den Vorteil, dass man die Inhalte in der gleichen Form überprüfen kann, wie sie später auch die Besucher sehen können. Dafür kann man ein schnelles Shell-Skript `tools/check-spelling.sh` benutzen:
+
+
+
+Der letzte Block ist etwas komplizierter. Er löst folgende Punkte:
+
+1. Er wandelt mit einem Python-Skript die HTML-Inhalte in puren Text um.
+2. Er überprüft parallel in sowohl Deutsch als auch US-Englisch und erlaubt so auch eine Vielzahl typischer [Denglischer-Ausdrücke](https://de.wikipedia.org/wiki/Denglisch) und gemischte Sprachen innerhalb von Seiten (sinnvoll z.B. für Zitate, Auszüge, etc.). Dafür müssen natürlich beide Sprachdateien installiert worden sein.
+3. Es fügt ein eigenes Wörterbuch hinzu, welches direkt im Jekyll-Ordner liegt. Dies kann relevant sein um z.B. eigene Fachbegriffe hinzuzufügen.
+4. Es führt Hunspell im nicht interaktiven Modus aus und sortiert und normalisiert die Ausgabe im Anschluss um doppelte Falschschreibweisen zu ignorieren und die Übersichtlichkeit zu wahren.
+
+Das `plaintext.py`-Skript findet man bei Github:
+
+
+
+## Installation
+
+- Die Ordner `tools` und `tools/dict` anlegen.
+- Unterhalb des Ordners `tools/dict` eine Datei `custom.txt` mit eigenen Wörtern pflegen. Ein Wort pro Zeile.
+- Die Skripte `check-spelling.sh` und `plaintext.py` im `tools`-Ordner ablegen und ausführbar machen.
+
+## Benutzung
+
+Im Anschluss an die Installation sollte die Ausführung von `tools/check-spelling.sh` ein Resultat wie dieses hier produzieren:
+
+```
+>>> Preparing custom dictionary...
+>>> Cleaning up old files...
+>>> Building jekyll files...
+Configuration file: /Users/Sebastian/Workspace/sebastian-software/homepage/_config.yml
+ Source: /Users/Sebastian/Workspace/sebastian-software/homepage
+ Destination: /Users/Sebastian/Workspace/sebastian-software/homepage/_site
+ Generating...
+ done.
+ Auto-regeneration: disabled. Use --watch to enable.
+>>> Check spelling...
+>>> FILE: _site/404/index.html
+>>> FILE: _site/50x/index.html
+>>> FILE: _site/blog/2015-03/hochmoderne-bahnstadt-mit-schwachem-internet/index.html
+ 1 Hochgeschwindigkeits
+ 1 Reaktions
+>>> FILE: _site/blog/2015-06/falsche-farben/index.html
+ 1 Eclairage
+ 1 Fairchild
+ 1 Lch
+ 1 Lindbloom
+ 1 MacEvoy
+ 1 colorimetric
+ 1 emissive
+ 1 rötlicheres
+ 1 stretcht
+ 2 ig
+>>> FILE: _site/blog/2015-06/live-einrichtung-mit-unreal-engine/index.html
+ 2 Wohnungs
+>>> FILE: _site/blog/2015-06/sommerlektuere-von-bill-gates/index.html
+>>> FILE: _site/blog/2015-07/rechtschreibung-und-jekyll/index.html
+ 1 Denglischer
+ 1 Redaktionstools
+ 1 Skripte
+ 2 Homebrew
+```
+
+Wir nutzen das Skript regelmäßig - auch schon während der Verfassung neuer Artikel. Natürlich ist nicht immer alles was berichtet wird auch korrekturbedürftig. Aber es hilft schnell einen Überblick zu bekommen bei den typischen Tipp-Fehlern. Und nach und nach kann man auch ein Wörterbuch von "erlaubten" Wörtern aufbauen.
+
+Ich hoffe ich habe mit dieser Erklärung dazu beigetragen ein paar mehr Jekyll-basierte Blogs von Rechtschreibfehlern zu befreien. Es handelt sich sicherlich um einen sehr pragmatischen Ansatz, der noch etwas Feinschliff gebrauchen kann.
diff --git a/app/blog/2015-08-powerline-fuer-homeway.mdx b/app/blog/2015-08-powerline-fuer-homeway.mdx
new file mode 100644
index 0000000..890a7a3
--- /dev/null
+++ b/app/blog/2015-08-powerline-fuer-homeway.mdx
@@ -0,0 +1,114 @@
+---
+layout: post
+title: "Homeway Evolution besser mit Powerline?"
+date: 2015-08-09 22:00:00 +0200
+tags: Homeway Powerline Multimedia Cat7 FritzBox
+author: werner
+signup: true
+---
+
+import { Image } from "../components/blog/Image"
+import { AmazonLink } from "../components/blog/Amazon"
+
+import homewayEvolutionKabelImage from "./images/homeway/homeway-evolution-kabel.jpg"
+import homewayKleinverteilerImage from "./images/homeway/homeway-kleinverteiler.jpg"
+import homewayVerteilerfeldImage from "./images/homeway/homeway-verteilerfeld.jpg"
+import homewayAnschlussdoseImage from "./images/homeway/homeway-anschlussdose.jpg"
+import homewayPowerlineAdapterImage from "./images/homeway/powerline-adapter-in-zentrale.jpg"
+import homewayFritzBox7490Image from "./images/homeway/fritzbox-7490.jpg"
+import homewayInnenaufbauKleinverteilerImage from "./images/homeway/mein-innenaufbau-im-kleinverteiler.jpg"
+import homewayAsusRouterRTAC3200Image from "./images/homeway/asus-router-rt-ac3200.jpg"
+
+export const summary = `Neue Ansätze der Heim-Verkabelung basieren unter anderem auf dem [Homeway System](http://www.homeway.de/die-systeme.html). Über dieses System ist es möglich über eine einheitliche Verkabelung in den Räumen diverse Signale zu transportieren - Internet, Telefon und Fernsehen. Manchmal kann es aber vorkommen, dass selbst das modernste System, Lücken aufweist, die einer Lösung bedürfen.`
+
+{summary}
+
+
+
+In den meisten Fällen befindet sich die so genannte [Homeway-Zentrale](https://www.homeway.de/die-systeme/systemkomponenten/homeway-zentrale.html), dort wo alle Kabel zusammenlaufen, im Abstellraum der Wohnung. Dort wird in der Regel mit einem so genannten Kleinverteiler gearbeitet. Dieser ist durch äußere Einflüsse abgeschirmt und bietet die komfortable Möglichkeit alle Verkabelungen zentral an einer Stelle zu erledigen und umzukonfigurieren.
+
+Leider hat das System auch ein paar Hindernisse:
+
+- eine mögliche Überhitzung der dort einen eingeschlossen Geräte ist nicht ganz auszuschließen
+- das DECT- und das WLAN-Signal der {/* % amazonlink B00EO777DI % */}FritzBox{/* % endamazonlink % */} wird durch die Abschirmung natürlich auch beeinträchtigt
+- der Platz für einen alternativen Router ist in dem so genannten Kleinverteiler nicht gegeben
+- Aus dem gleichen Grund dürfte es schwierig sein, die Server-Funktionalität der {/* % amazonlink B00EO777DI % */}FritzBox{/* % endamazonlink % */} zu nutzen. Platz für Festplatten. Sorry, den gibt es nicht.
+
+
+
+Ich möchte heute eine Lösung mit Ihnen teilen, die meinen Bedürfnissen gerecht wird. Vielleicht hilft diese ja auch Ihnen bzw. inspiriert ein wenig zum querdenken. Meine Lösung begann mit folgender Idee:
+
+- die Verkabelung aller Ethernet-Ports der Wohnung in dem Kleinverteiler mit einem einfachen Gigabit-Switch.
+- die Weiterleitung des Signals von dem Glasfasermodem in einen anderen Raum (im Idealfall zum Beispiel ein Büroraum)
+
+
+
+Es gibt leider ein großes Hindernis auf dem Weg zu dieser Lösung zwar: Die interne Hausverkabelung kann für die Weiterleitung des Glasfasermodems nicht verwendet werden. Das würde nur gehen wenn es an (mindestens) einer Stelle in der Wohnung zwei Ethernet-Verbindungen geben würde:
+
+1. Eine Leitung zur Weiterleitung des Signals vom Glasfasermodem
+2. Die andere Leitung für das Rückverbindung des Internets (hinter der Firewall) zur Heimverkabelung der restlichen Anschlüsse
+
+
+
+Leider gibt es bei uns aber nirgendwo zwei Gigabit-Ports. In der Regel wird bei dem [Homeway System](http://www.homeway.de/die-systeme.html) nur eine Anschlussdose pro "Region" der Wohnung installiert. Das wird sicherlich auch in der Form vermarktet, da das System zugegebenermaßen zu sehr viel aufgeräumteren Wänden führt. Im Gegensatz zu früher ist ja bei diesem System wirklich alles in einer Anschlussdose untergebracht.
+
+Eine halbe Alternative wäre noch eine Konfiguration ohne Gigabit-Unterstützung, was dann wieder zwei Leitungen innerhalb einer Anschlussdose erlauben würde, reicht leider nicht, da in dem Fall das Internet potentiell schneller ist, als die Heimverkabelung. Zumindest in unserem Glasfaser-Fall.
+
+
+
+Die Lösung, die ich jetzt umgesetzt habe, bedarf der Nutzung eines zusätzlichen {/* % amazonlink B00SWI2UUK % */}Powerline-Sets{/* % endamazonlink % */}, welches genutzt wird um das Glasfasermodem Signal in mein Büroraum weiterzuleiten. Das ist Premiere für mich. Ich hatte Powerline bisher nie im Einsatz.
+
+
+
+Ich habe mich für die heute modernste Variante von Powerline entschieden. Diese unterstützt {/* % amazonlink B00SWI2UUK % */}bis zu 1200Mbit/s{/* % endamazonlink % */}. In der Praxis dürfte es eher die Hälfte sein. Trotzdem sollte diese Lösung auch einigen zukünftigen Anpassungen der Tarife unseres Glasfaseranschlusses genügen.
+
+Die Telefone waren übrigens bereits ausschließlich per DECT direkt mit der FritzBox verbunden - hier ist also keine Änderung notwendig bzw. das macht die Idee mit der "Weiterleitung" überhaupt erst denkbar. Wenn man echte Kabeltelefone direkt mit der FritzBox verbinden wollen würde, müsste diese leider im Kleinverteiler verbleiben.
+
+
+
+Mein zugegebenermaßen kompliziertes Setup sieht heute wie folgt aus:
+
+- Ein Glasfasermodem/ONT, welches vom Provider gestellt wird [Kleinverteiler]
+- 1GBit taugliches TP-Link Powerline-Set für die Verkabelung zwischen Glasfasermodem und Büroraum [Kleinverteiler + Büro]
+- Einfacher Gigabit-Switch der im Kleinverteiler die verschiedenen Ausgangspunkte des Verteilerfeldes direkt miteinander verbindet [Kleinverteiler]
+- Das eigentliche Homeway-System für die interne Verkabelung der verschiedenen Räumen untereinander [Wohnzimmer + Büro + Schlafzimmer]
+- FritzBox 7490 als erster Kontakt für
+ die Powerline-Verbindung zum Glasfasermodem [Büro]
+- TP Link-Router für den Freifunk Rhein-Neckar, der direkt an einem Port der FritzBox hängt. [Büro]
+- Ein moderner Asus RT-AC3200 Router, den ich für die interne Verkabelung und das interne WLAN ausgesucht haben. [Büro]
+
+
+
+Bisher scheint alles tadellos zu funktionieren. Powerline macht auch keine Probleme - ist ja auch eine recht kurze Distanz, die zu überwinden ist.
diff --git a/app/blog/2015-08-referrer-spam-vermeidung-einer-analyse-muellhalde.mdx b/app/blog/2015-08-referrer-spam-vermeidung-einer-analyse-muellhalde.mdx
new file mode 100644
index 0000000..08a1191
--- /dev/null
+++ b/app/blog/2015-08-referrer-spam-vermeidung-einer-analyse-muellhalde.mdx
@@ -0,0 +1,441 @@
+---
+layout: post
+title: "Referrer Spam - Wie wir die Referrer-Müllhalde in Google Analytics vermeiden"
+date: 2015-08-20 15:10:00 +0200
+tags: Analytics Referrer Spam Google SEO Filter Blacklist
+author: werner
+signup: true
+---
+
+import { Image } from "../components/blog/Image"
+
+import reportOriginalImage from "./images/referrer/reporting-original.png"
+import reportingFilteredImage from "./images/referrer/reporting-filtered.png"
+import homeWithTwoViewsImage from "./images/referrer/home-with-two-views.png"
+import adminOverviewImage from "./images/referrer/admin-overview.png"
+import viewSettingsImage from "./images/referrer/view-settings.png"
+import viewSettingsBotImage from "./images/referrer/view-settings-botfilter.png"
+import viewFiltersImage from "./images/referrer/view-filters.png"
+import segmentUeberblickImage from "./images/referrer/segment-ueberblick.png"
+import bereinigteSegmenteEinrichtenImage from "./images/referrer/bereinigte-segmente-einrichten.png"
+import reportingOriginalSegmentHinzufuegenImage from "./images/referrer/reporting-original-segment-hinzufuegen.png"
+import reportingOriginalMitSegmentImage from "./images/referrer/reporting-original-mit-segment.png"
+
+export const summary = `Mit dem Aufsetzen einer Homepage gibt es recht überraschend immer wieder neue Tätigkeitsfelder. So kam es auch für uns. Wir wurden recht spontan auf ein Phänomen aufmerksam welches Wikipedia unter dem Begriff [Referrer-Spam](https://de.wikipedia.org/wiki/Referrer-Spam) beschreibt: In *[Google Analytics](http://www.google.com/analytics/)* gibt es jede Menge Traffic, aber vieles, wenn nicht sogar der größte Teil, davon scheint nicht von Menschen sondern von sogenannten Spam-Bots zu kommen.`
+
+
+
+{summary}
+
+
+ Gefährlich ist Referrer-Spam in der Regel nicht. Lästig ist er aber trotzdem,
+ denn er verfälscht die Ergebnisse der Webseiten-Analyse und erschwert dadurch
+ unter anderem die SEO-Optimierung.
+
+
+
+Unserer Überzeugung nach -- damit die Analyse der Besucher überhaupt irgendwie Sinn macht -- muss man im ersten Schritt diese Aufrufe aus den eigenen Statistiken loswerden. Es bringt ja nichts, sich über Erfolge zu freuen die nicht real sind und Besucherzahlen zu Feiern, die nicht der Realität entsprechen.
+
+Uns bleibt bisher verborgen warum Google sich dem Thema nicht direkt selber annimmt. Aber vielleicht gibt es dafür ja Gründe. Auf dem ersten Blick erscheint Referrer-Spam aber nicht viel anders als Spam im Mailboxen: Es geht nur darum, dass jemand auf den Link klickt. Im Falle von Referrer-Spam sind diese Links oft Tools und Lösungen die speziell auf die Bedürfnisse des Webseiten-Anbieters zielen: Einfache Sharing-Funktionen via Buttons, SEO-Analyse und -Optimierung, Spezielle Rabatte für Produkte aber natürlich auch Erwachsenen-Inhalte, etc. In einigen Fällen handelt es sich dabei schlicht um Marketing für eigene Angebote. In den meisten Fällen wird auf echte Shops und Dienste verwiesen, die Prämien/Provisionen für Klicks bzw. die Gewinnung von Neukunden auszahlen.
+
+
+ Spam visits are low engagement, non-converting, high bounce-rate traffic. They
+ skew all "success metrics" downwards.
+
+
+{/* : .hanging */}
+
+## Blocken unerwünschter Zugriffe
+
+Eine erste sinnvolle Idee, wäre das Blocken der Zugriffe direkt im Webserver. Die Idee dabei ist, dass ein Webseiten-Aufruf, der nicht stattfindet auch keine Einträge in der Analyse-Software produziert. [Yong Mook Kim](http://www.mkyong.com/) hat darüber geschrieben wie man [direkt in _NGINX_](http://www.mkyong.com/nginx/nginx-block-referrer-spam/) mit der Analyse des Headers `$http-referer`. Über den [Status-Code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) `403`, `405`, etc. kann man dann direkt eine Fehler-Mitteilung an den Aufrufer rausgeben und sich ein weiteres Prozessieren ersparen.
+
+### Basis-Filter mit _NGINX_
+
+```nginx
+server{
+ # ...
+
+ # Block Referrer SPAM
+ if ($http_referer ~* (buttons|free|cheap|porn|semalt|offer|share)) {
+ return 405;
+ }
+
+ # ...
+}
+```
+
+In _NGINX_ gibt es mittlerweile aber auch ein [Modul _ngx_http_referer_module_](http://wiki.nginx.org/Referrer_Spam_Blocking), welches sich komplett dieser Funktionalität annimmt und in jeder _NGINX_-Installation direkt enthalten ist:
+
+```nginx
+location / {
+ valid_referers none blocked (buttons|free|cheap|porn|semalt|offer|share);
+
+ if ($invalid_referer) {
+ return 405;
+ }
+}
+```
+
+Übrigens ist das Feld `Referer` in der HTTP-Spezifikation (Version 1.0) tatsächlich [falsch geschrieben](https://en.wiktionary.org/wiki/referer). Also wundern Sie sich nicht wegen des einzelnen 'r's in der Wortmitte. In echt heißt es, auch im Englischen, "Referrer".
+
+
+ The spammer is draining your resources, consuming your bandwidth, decreasing
+ your site's performance, and clogging your access and error logs with hundreds
+ or thousands of bogus requests.
+
+
+{/* : .hanging */}
+
+### Basis-Filter mit Apache
+
+Eine ähnliche Funktionalität für _Apache_ sieht wie folgt aus:
+
+```apache
+# Block Referrer SPAM
+
+ RewriteEngine on
+ RewriteCond %{HTTP_REFERER} buttons|free|cheap|porn|semalt|offer|share [NC]
+ RewriteRule .* - [F]
+
+```
+
+Beide Code-Schnipsel müssen in die eigene `sites-enabled/default` bzw `httpd.conf` integriert werden.
+
+Für eine optimale Sicherheit und Performance der eigenen Webseite ist das Sperren von unerwünschten Aufrufen auf jeden Fall eine gute Idee. Statt eigener Listen von bösen Wörtern zu pflegen kann man sich das Ganze aber noch ein wenig einfacher machen.
+
+### Filter mit Blacklisten für Apache
+
+Für einen Großteil der Webseiten, wäre eine der folgenden Listen sicherlich einfacher, als selber alle problematischen Fälle zusammenzutragen:
+
+- [5G Blacklist - Stabil](https://perishablepress.com/5g-blacklist-2013/)
+- [6G Blacklist - Beta](https://perishablepress.com/6g-beta/)
+- [2013 User-Agent-Blacklist](https://perishablepress.com/2013-user-agent-blacklist/)
+
+Jeff Starr von Perishable Press hat
+sich wirklich über Jahre viel Mühe gemacht um diese Listen zu erstellen und zu
+warten. Es dürfte der pragmatische Ansatz sein, diese -- zumindest als Basis --
+für eigene Filter zu benutzen.
+
+Alle drei Listen sind frei unter der [GPL](https://www.gnu.org/licenses/gpl.html) verfügbar. Alle Blog-Posts zu diesen und vermutlich die Filter selber wurden zuletzt am 03. April 2015 geupdatet. Die ersten beiden sind vollständige Blacklists. Die "6G" verfolgt eine bessere Abdeckung von neuen Spam-Phänomenen - es besteht aber natürlich das Risiko, dass diese auch mehr "gute" Besucher blockt. Wobei man generell bei dem Einsatz von derartigen Blockaden natürlich immer Folgendes im Blick haben sollte:
+
+
+ A perfect firewall would block only bad traffic, but in reality it's
+ inevitable that some good requests get blocked.
+
+
+{/* : .hanging */}
+
+Daher macht es durchaus Sinn die "6G"-Variante zu nutzen und einfach zu beoachten, wie sich der Spam bzw. die Beschwerden entwickeln. Die dritte Liste ist eine kleine Ausnahme und beschränkt sich mehrheitlich auf das Filtern von zugriffen bestimmter User-Agenten. Interessanterweise nutzen die Spammer wohl nur eine begrenzte Zahl von Tools für ihre Aktionen. Der Ansatz User-Agenten zu filtern wäre daher eine Alternative bzw. Ergänzung zu dem konventionelleren Ansatz der "5G"- und "6G"-Listen.
+
+
+ It's one of many ways to improve the security of your site and protect against
+ evil exploits, bad requests, and other nefarious garbage.
+
+
+{/* : .hanging */}
+
+Jeder der Listen kann einfach für jeden Apache-Webserver genutzt werden. Hierzu kopiert man die Datei `.htaccess` lediglich in das Stammverzeichnis der eigenen Webseite bzw. fügt es mit der vorherigen Datei zusammen. Das klappt natürlich nur, wenn man nicht direkt in einem sehr günstigen Hosting-Vertrag ist, der keine eigenen `.htaccess`-Dateien erlaubt. Für alle, die vollen Zugriff auf den Webserver haben empfehlen wir eine Integration in die Standard-Konfiguration des Apache.
+
+Für _WordPress_-Nutzer gibt es auch eine Alternative zu dem `.htaccess`-basierten Ansatz...
+
+### Einfache alternative Lösung für WordPress-Blogs
+
+Jeff Starr hat mittlerweile, für die _WordPress_-Nutzer unter Ihnen, auch ein Plugin herausgegeben. BBQ schützt vor allen Formen von bösen Requests und Attacken auf _WordPress_. Die Lösung läuft komplett in PHP und kommt ohne Manipulation der `.htaccess` aus.
+
+
+ BBQ checks all incoming traffic and quietly blocks bad requests containing
+ nasty stuff like `eval`, `base64`, and excessively long request-strings. This
+ is a simple yet solid solution that works great for sites where `.htaccess` is
+ not available.
+
+
+{/* : .hanging */}
+
+Für ambitioniertere _WordPress_-Nutzer erscheint uns die Pro-Version von BBQ eine echtes Schnäppchen (nur einmalig $10) zur Absicherung der eigenen Webseite zu sein. Gerade wenn man bedenkt, dass es wirklich schön in _WordPress_ integriert ist und alle zukünftigen Updates auch mit enthalten sind.
+
+### PHP-Webseiten fahren mit _ZB Block_ gut
+
+Es gibt eine weitere PHP-basierte und kostenlose Alternative zu den Listen bzw. _WordPress_-Plugins von Jeff Starr. [ZB Block](http://www.spambotsecurity.com/zbblock.php) kümmert sich nicht nur um Spam-Zugriffe sondern auch um XSS-Attacken.
+
+Es funktioniert unter anderem mit dieses PHP-basierten Lösungen: _Drupal_,
+_phpBB_, _VBulletin_, _Joomla_, _WordPress_, _CodeIgniter_, ...
+
+### Blacklisten für _NGINX_-Nutzer nur nach Konvertierung
+
+Leider haben wir bisher keine vergleichbare Lösung zu den Blacklisten von Jeff Starr für NGINX gefunden. Glücklicherweise sind diese aber recht einfach strukturiert und lassen sich gut - zumindest mit ein wenig Nacharbeit - für NGINX aufbereiten. Eine dieser Lösungen zur Konvertierung von Apache-Konfigurationen nach NGINX ist daher vermutlich für Sie interessant:
+
+- [htaccess-Konverter von Timme Hosting](https://timmehosting.de/htaccess-converter)
+- [Alternativer Webservice von Alexei Shabalin](http://winginx.com/en/htaccess)
+- [Apache2NGINX - Ein Kommandozeilen-Tool](https://github.com/nhnc-nginx/apache2nginx)
+
+### Referer filtern mit _NGINX_ mit Map-Modul
+
+Eine weitere schöne Alternative für _NGINX_ ist die Nutzung des Moduls _ngx_http_map_module_ (Teil der Standard-Distribution von _NGINX_) die von [Justas Azna](http://fadeit.dk/blog/post/nginx-referer-spam-blacklist) vorgeschlagen wurde.
+
+```nginx
+# /etc/nginx/blacklist.conf
+
+map $http_referer $bad_referer {
+ hostnames;
+
+ # Standard-Wert toleriert die Abfrage
+ default 0;
+
+ # Wenn etwas aus dieser Liste matcht
+ # wird $bad_referer "wahr"
+ "~social-buttons.com" 1;
+ "~semalt.com" 1;
+ "~hulfingtonpost.com" 1;
+
+ # Die Liste kann z.B. aus den Daten von Piwik erstellt werden:
+ # https://github.com/piwik/referrer-spam-blacklist
+
+ # ...
+}
+```
+
+```nginx
+# /etc/nginx/nginx.conf
+
+http {
+ # ...
+
+ include blacklist.conf;
+
+ # ...
+}
+```
+
+```
+# /etc/nginx/sites-enabled/mysite.conf
+
+server {
+ # ...
+
+ if ($bad_referer) {
+ return 444;
+ }
+
+ # ...
+}
+```
+
+## Aufräumen in _Google Analytics_
+
+Performance und Sicherheit profitieren nach dem Anwenden der vorher genannten Schritte auf jeden Fall. Leider sind diese Schritte nicht 100%-ig ausreichend bei den typischen Attacken auf _Google Analytics_.
+
+
+ Angegriffen wird dabei nicht Ihre Website, sondern Ihr{" "}
+ Google Analytics-Konto.
+
+
+{/* : .hanging */}
+
+Auch Tom Capper hat schon festgestellt, das selbst Profile Log-Inhalte erhalten, die auf gar keiner Homepage verwendet werden:
+
+
+ I can only assume the spammers are randomly cycling through possible tracking
+ IDs.
+
+
+{/* : .hanging */}
+
+Man muss daher -- um klare Ergebnisse zu erhalten -- direkt in _Google Analytics_ einen Filter einbauen.
+
+
+{/* : .sidecaption */}
+
+Und das macht man am besten über einen neuen View. So bewahrt man immer die Originaldaten und kann im Zweifelsfall immer nochmal ein Blick dort hinein werfen.
+
+
+{/* : .sidecaption */}
+
+
+{/* : .sidecaption */}
+
+### Basis-Konfiguration
+
+Ein erster logischer und einfacher Schritt sollte sein, die Option in den Einstellungen der Datenansicht zu ändern. Das Ganze ist etwas versteckt, aber mittels den Screenshots hier dürfte es auffindbar werden:
+
+
+{/* : .sidecaption */}
+
+
+ This feature will automatically filter all spiders and bots on the IAB/ABC
+ International Spiders & Bots List from your data.
+
+
+{/* : .hanging */}
+
+Die Datenansicht zu ändern, ändert natürlich nicht die eigentliche Aufzeichnung. Dies ist ein typische Kritikpunkt bei Googles Optionen für _Analytics_. Es bleibt außerdem schleierhaft, warum jemand als Standard überhaupt diese Art von Spam-Bots erfassen wollen würde. Wir jedenfalls nicht. Vielleicht kommt es weil die Option selber [noch relativ neu](https://plus.google.com/+GoogleAnalytics/posts/2tJ79CkfnZk) ist.
+
+Die Verwendung der "Referral Exclusion"-Liste in _Google Analytics_ funktioniert übrigens nicht zur Spam-Vermeidung. Der Name würde das zwar suggerieren, aber...
+
+
+ Referrals exclusions list are for modifying how Google Analytics will
+ attribute the visits from those domains, not excluding them.
+
+
+{/* : .hanging */}
+
+Deshalb widmen wir uns jetzt der richtigen Lösung.
+
+### Filter einrichten
+
+Leider reicht der oben eingerichtete Filter von _Google Analytics_ für Bots nicht für viel - er basiert _nur_ auf der Erkennung der Software, die den Zugriff macht. Außerdem macht es Sinn fehlerhafte Daten erst gar nicht zu sammeln. Dafür kann man Filter einrichten. Nach einiger Recherche und eigenen Experimenten empfehlen wir folgende drei Filter:
+
+1. Hostname Validierung
+2. Bildschirm-Auflösung
+3. Referral Quelle
+
+
+{/* : .sidecaption */}
+
+### 1. Hostname validieren
+
+Die Validierung des Hostnamens ist trivial und äußerst wirksam. Attacken, die direkt _Google Analytics_ betreffen und nicht über die eigentliche Homepage laufen, haben in der Regel keinen oder einen anderen Hostname als die eigentliche Seite. Die Idee ist also alle Log-Anfragen abzuweisen, die nicht den korrekten Hostnamen aufweisen.
+
+### 2. Bildschirm-Auflösung
+
+Die Anfragen, die direkt _Google Analytics_ füttern haben in der Regel keine Informationen, die nur bei einem regulären Webseiten-Aufruf stattfinden können. So ist z.B. in der Regel das Feld "Bildschirm-Auflösung" ungesetzt. Diese Lösung haben wir als erstes bei [Tom Capper](https://www.distilled.net/resources/quick-fix-for-referral-spam-in-google-analytics/) entdeckt. Das ganze ist überaus raffiniert da sehr einfach. Weiterhin bedarf es keiner Wartung. Es bietet sich also an, Anfragen zu ignorieren in denen dieses Feld leer ist und damit direkt einen weiteren großen Teil der problematischen Anfragen loszuwerden.
+
+### 3. Referral-Quelle untersuchen
+
+Im Referral findet man in Spam-Anfragen oft immer die gleichen Wörter: `free`, `cheap`, `webmaster`, ... sind recht typisch. Seiten, die von einer Domain kommen, die diese Wörter enthalten will man in der Regel blockieren.
+
+Mit dem [Spam Filter Installer](http://www.simoahava.com/spamfilter/) gibt es übrigens ein Tool für die automatische "Installation" von Filter-Regeln in _Google Analytics_. Dies geschieht über eine Autorisierung des Tools bei _Google_. Wem das nicht geheuer ist, der sollte es wohl lieber manuell machen. Für alle anderen stellt dies eine bequeme Methode dar, die Listen der Referral-Quellen nicht händisch anzulegen und zu pflegen.
+
+Eine gute Basis für einen Filter (Feld: "Campaign Source") wäre beispielsweise die Liste von Jon Henshaw:
+
+```
+darodar\.|semalt\.|buttons-for-website|blackhatworth|ilovevitaly|prodvigator|cenokos\.|ranksonic\.|adcash\.|simple-share-buttons\.|social-buttons\.
+```
+
+Es gibt aber auch hier wieder öffentliche und gepflegte Listen wie z.B. [diese hier vom Piwik Analyse Tool](https://github.com/piwik/referrer-spam-blacklist). Wer Interesse hat: _Piwik_ wäre an sich für viele auch eine gute Alternative zu _Google Analytics_ - zumindest wenn man nicht auch Werbung über Google macht. In dem Fall ist wohl _Google Analytics_ unerlässlich damit man alle Erfolge und zukünftige Potentiale der geschalteten Werbung auch direkt in der Analyse-Software sehen kann.
+
+### Wirkt leider nur für neue Daten
+
+
+{/* : .sidecaption */}
+
+Bitte bedenken Sie noch:
+
+- Filter brauchen bis zu 24 Stunden, bis diese auf die neu reinkommenden Daten angewendet werden.
+- Sie wirken nur für neu hinzukommende Daten - die alten Zahlen sind daher immer noch falsch.
+- Wenn Filter auf dem Hauptview angewendet werden, sind die betroffenen Einträge für immer weg.
+
+Im Idealfall schauen Sie jetzt noch wie Sie die bisherigen Daten aufräumen...
+
+### Aufräumen historischer Daten
+
+Man kann übrigens die Statistik in _Google Analytics_ leider nicht resetten: Stattdessen [dupliziert man am besten das Profil](https://productforums.google.com/forum/#!topic/analytics/nfZFLdYQ9ck) und nutzt dieses in Zukunft für neue Einträge. Dazu muss man natürlich die Tracking-ID auch im Client-seitigen Code der Homepage auf den neuen Wert anpassen. Wir halten es aber für genauso praktikabel die historischen Daten mit einfacheren Mitteln leicht zu bereinigen. Das geht am besten über Segmente. Ein Segment dient dazu nur einen Teil der gesammelten Daten in den Views anzuzeigen. Das kann man auch dazu nutzen ein Spam-Filter umzusetzen. Und zwar so:
+
+Gehen Sie zurück in den Admin-Bereich. Dort klicken Sie innerhalb des linken Bereichs auf "Segments". Sie bekommen eine noch leere Liste von Segmenten... wir wollen aber das hier sehen:
+
+
+{/* : .sidecaption */}
+
+Klicken Sie auf "New Segment" und legen Sie das Segment "Bereinigt" mit folgenden Daten an:
+
+
+{/* : .sidecaption */}
+
+Zurück in dem Reporting des Original-Views können Sie nun einfach das Segment "Bereinigt" hinzufügen...
+
+
+{/* : .sidecaption */}
+
+Und hier sehen Sie das Ergebnis der Mühe - eine schöne bereinigte Statistik. Sehr eindrucksvoll im Vergleich zum Original in blau:
+
+
+{/* : .sidecaption */}
+
+Wenn Sie es bis hierher geschafft haben, gibt es nun vermutlich eine Webseite mehr, die über brauchbarere Statistiken verfügt.
+
+Wir sind immer dran an weiteren Themen. Verpassen Sie nichts: Melden Sie sich jetzt zu unserem Newsletter an.
diff --git a/app/blog/2016-01-internationalisierung-im-frontend.mdx b/app/blog/2016-01-internationalisierung-im-frontend.mdx
new file mode 100644
index 0000000..82accbb
--- /dev/null
+++ b/app/blog/2016-01-internationalisierung-im-frontend.mdx
@@ -0,0 +1,152 @@
+---
+layout: post
+title: "Internationalisierung im Frontend"
+date: 2016-01-27 14:10:00 +0200
+tags: Lokalisierung Internationalisierung CLDR Übersetzung Sprache
+author: werner
+signup: true
+---
+
+import { Image } from "../components/blog/Image"
+
+import shutterstockImage from "./images/i18n/shutterstock_228803698.png"
+import icuMessageFormatImage from "./images/i18n/icu-message-format.png"
+import unicodeImage from "./images/i18n/unicode.png"
+import globalizeMarkDarkImage from "./images/i18n/globalize-mark-dark.png"
+import formatJsImage from "./images/i18n/formatjs-logo.png"
+
+export const summary = `Die Internationalisierung ist immer wieder ein großes Thema in Software-Projekten. Heutzutage wandern verstärkt Teile des Backends ins Frontend. Für moderne Single Page Applications (SPA) muss hier seitens der Framework-Technologie überlegt werden, wie man am Besten mit der Übersetzung bzw. dem größeren Thema der Internationalisierung — von der die reine Übersetzung nur ein Teilaspekt ist — umgeht. Es gab hier in Vergangenheit vielfältige Entwicklungen, die aber oft nicht ausgereift sind. Ich möchte versuchen einen Überblick zu geben.`
+
+{summary}
+
+
+
+## Bereiche der Internationalisierung
+
+Mit dem Begriff der Internationalisierung fassen wir die Übersetzung von Texten aber auch die Anpassung an andere Länder und Kulturen in einen handlichen Begriff zusammen. Übersetzung hat man in den Anfängen der Software-Entwicklung sehr trivial unterstützt. Es wurden einfache `1:1`-Mappings genutzt, die den Original-Text übersetzten. Dann wurde dieser Text im Quelltext über eine ID bzw. den meist englischsprachigen Originaltext verwiesen. Problem hierbei ist, dass die Übersetzung nicht ganz so trivial ist. So gibt es zum Beispiel folgende "Details", die man beachten sollte:
+
+- **Platzhalter** im Text für dynamische Werte aus der Anwendung
+- **Plural-Regeln** der individuellen Regionen und Sprachen müssen berücksichtigt werden. Es gibt Länder mit mehr als nur Singular und Plural - dort gibt es mehrere Gruppen von Formulierungen je nach der auszudrückenden Anzahl - im arabischen z.B. 6 an der Zahl.
+- **Gender-Unterstützung** - wir wollen den Nutzer ja möglichst passend und höflich ansprechen. Dazu gehört dann auch das Geschlecht.
+
+Es gibt auch [ein paar gute, englischsprachige Slides von Google](https://docs.google.com/presentation/d/1ZyN8-0VXmod5hbHveq-M1AeQ61Ga3BmVuahZjbmbBxo/pub?) zu dem Thema.
+
+## Übersetzungs-Technologien
+
+- **ICU**: Das aktuell leistungsstärkste Format. Hier verpackt man die Logik zur Übersetzung mit in den Übersetzungstext. Dies reduziert die Menge an Doppeldefinitionen in der Übersetzung. Gleichzeitig läuft ICU in Gefahr, dass die Erstellung der Übersetzung nicht so trivial ist wie bei einfachen Key-Value-Paaren. [MacOS und iOS nutzen das XLIFF-Format](https://developer.apple.com/library/ios/documentation/MacOSX/Conceptual/BPInternational/LocalizingYourApp/LocalizingYourApp.html) für die Übersetzung mittels ICU. Gibt's zum Beispiel auch [von IBM für Java-Entwickler](http://icu-project.org/apiref/icu4j/com/ibm/icu/text/MessageFormat.html).
+
+
+{/*: .sidecaption */}
+
+- **Gettext**: Älteres Format, welches noch oft im OpenSource-Bereich verwendet wird. Es handelt sich um [eine Entwicklung der Free Software Foundation](https://www.gnu.org/software/gettext/). Leider verfügt Gettext über keine Gender-Unterstützung und nur reduzierte Plural-Unterstützung (im Vergleich zu ICU nur eine Plural-Logik pro Text) lassen es aktuell als weniger sinnvoll einsetzbaren Kandidaten erscheinen.
+- **Eigene XML- bzw. Text-Dateien**: Android scheint auf ein [XML-basiertes triviales Key-Value-System](http://developer.android.com/training/basics/supporting-devices/languages.html) aufzusetzen. Von Gender-Unterstützung wird leider nichts gesagt. Plural-Unterstützung gibt es mit den sogenannten [Quantity Strings](http://developer.android.com/guide/topics/resources/string-resource.html#Plurals). In der alten Java-Welt gibt es Property-Files - auch in einem XML-Dialekt.
+
+## Lokalisierungsdaten
+
+Es gibt hier eigentlich nur einen Spieler und zwar das sogenannte [CLDR-Archiv des Unicode-Konsortiums](http://cldr.unicode.org/). Die dort gesammelten Daten werden von allen großen IT-Unternehmen wie Apple, Google, Microsoft und IBM genutzt.
+
+Enthalten ist in diesem Repository z.B. folgendes:
+
+- **Daten für die Formatierung und das Parsen** von Zahlen, Währungen, Datumswerten, Zeiten und Zeitzonen.
+- **Übersetzung von feststehenden Namen** für Sprachen, Länder, Regionen, Währungen, Wochentagen, Einheiten und mehr
+- **Informationen zur Sprache**: Plural-Formen, Geschlechter, Regeln für Sortierung und Suche, Laufrichtung der Schrift, etc.
+- **Länderinformationen**: Telefonnummern, Währungen, Kalender-Formate, Tastaturlayouts, etc.
+
+
+{/*: .sidecaption */}
+
+Wie man sieht ist dies eine ganze Menge. Es macht also unbedingt Sinn diese mühevoll gesammelten und gepflegten Daten für eigene Anwendungen zu nutzen.
+
+Für das Frontend besteht durch [den Übergang zu JSON als Ausgangsformat](http://cldr.unicode.org/index/json-format-data) hier im Prinzip eine einfache Möglichkeit zur Nutzung dieser Daten. Leider stellt sich im Detail dann raus, dass die Daten oft ungünstig strukturiert (z.B. gibt es die Namen der Jahrzehnte des indischen Kalenders auch im Deutschen Datenbestand) sind und es daher oft erforderlich erscheint die Daten für eigene Zwecke neu zusammenzustellen bzw. zu reduzieren.
+
+Glücklicherweise gibt es mittlerweile die gleichen Daten auch auf Github und in NPM. Dort aber besser strukturiert. [Details dazu finden sich hier im README](https://github.com/unicode-cldr/cldr-json).
+
+## Optionen im Frontend
+
+Dieses hier ist jetzt keine Liste mit Anspruch auf Vollständigkeit. Dazu ist die Frontend-Landschaft viel zu diffus. Es handelt sich vielmehr um eine Liste der fundamentalen Technologien. Die hier genannten Lösungen machen einen etablierten Eindruck und werden auch oft tief in Frameworks versteckt als Basis-Technologie verwendet:
+
+### Intl
+
+Die neue [Standard-API, die in modernen Browsern verbaut ist](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl). Enthält aktuell nur Funktionalitäten zur Formatierung von Datumswerten und Zahlen. Interessanterweise sind nicht mal die passenden Parser an Board. Weiterhin gibt es Möglichkeiten Strings sprachspezifisch zu vergleichen. Aufgrund der großen Datenmenge ist dies aber nicht im [sonst umfangreichen Polyfill](https://github.com/andyearnshaw/Intl.js/) möglich (notwendig für aktuelle Versionen von Safari + alte Versionen von Internet Explorer (vor Version 11), Chrome (vor Version 24) und Firefox (vor Version 29).
+
+Während die Browser zumindest die für den Nutzer relevante Sprache in der nativen API mitbringen sollten, kann dies für den Polyfill aufwendiger sein. So ist zum Beispiel allein die Deutsche Übersetzung aktuell [rund 75KB gross](https://github.com/andyearnshaw/Intl.js/blob/master/locale-data/json/de.json). Vieles was enthalten ist, ist für die meisten Nutzer eher wenig relevant (indische Kalender, etc.). Eine Beschränkung — zumindest für die meisten Locales — auf den [Gregorianischen Kalender](https://de.wikipedia.org/wiki/Gregorianischer_Kalender) wäre sicher zweckmäßiger.
+
+Für die Nutzung wird das Paket [cldr-core](https://github.com/unicode-cldr/cldr-core) und weitere Pakete von [CLDR-JSON](https://github.com/unicode-cldr/cldr-json) benötigt. Dieses Projekt hat den großen Vorteil, dass es von John Emmons — einem IBM Mitarbeiter der seit 2005 intensiv im Unicode-Umfeld tätig ist — betreut wird. Interessant ist, im Vergleich zur vorherigen Kritik, dass diese Daten recht fein strukturiert sind und so auch im Frontend-Umfeld Sinn machen würden. Es ist demnach so, dass erst durch die Verarbeitung durch die (Grunt-basierten) Build-Tools vom _IntlPolyfill_ die in NPM vorhandenen Daten zusammengelegt und in der Größe unhandlicher werden. Hier wäre für zukünftige Versionen eine Verbesserung wünschenswert.
+
+### Globalize
+
+[jQuery-Projekt für die Globalisierung](https://github.com/jquery/globalize) (vermutlich benutzt man hier Globalisierung um den Projektnamen wiederaufzugreifen). Unterstützt die Formatierung und das Parsen von sowohl Datums als auch Zahlenwerten. Bei Währungen wird nur die Formatierung unterstützt. Soweit man keinen Wert auf die Erkennung der Währung liegt kann man natürlich den Zahlenparser auch als Währungsparser zweckentfremden. Es gibt auch eine Funktionalität zur Formatierung von relativen Datumsinformationen wie z.B. "vor einem Monat". _Globalize_ kann als eines der Urgesteine gelten, da es schon seit rund 5 Jahren auf dem Markt ist.
+
+
+{/*: .sidecaption */}
+
+Im Rahmen der Entwicklung von _Globalize_ sind einige weitere Tools zum Umgang (Download + Prozessierung) mit _CLDR_-Daten entstanden (nachdem man von eigenen Daten gewechselt ist). _Globalize_ liefert die _CLDR_-Daten nicht mit, aber kommt mit einer Armee von Abhängigkeiten z.B. dem [_CLDR_-Daten-Downloader](https://github.com/rxaviers/cldr-data-downloader). Hier muss jeder Entwickler neben der Installation des Paketes im Anschluss auch die notwendigen _CLDR_-Daten via Kommandozeile downloaden. Man kann so natürlich gewährleisten dort immer den aktuellen Stand zu besitzen - soweit die Entwickler daran denken auch immer alles fleissig zu updaten.
+
+Die Daten, die im Paket mit _Globalize_ geladen werden, sind noch größer, als die vom _Intl Polyfill_. Hier ist allein die Liste der Währungen über 70KB. Diese Mengen an Daten sind im Umfeld von _NodeJS_ vielleicht okay. Im Frontend-Umfeld ist diese Datenmenge definitiv problematisch. Natürlich gibt es Bilder, die größer sind - der elementare Unterschied bei JSON-Datenstrukturen ist, dass diese Daten durch den JavaScript-Parser laufen und nicht so klein (im Speicher) bleiben wie die eigentlich Dateigröße suggerieren würde.
+
+### FormatJS
+
+[FormatJS](http://formatjs.io/) ist eine auf _Intl_ aufsetzende Schicht mit zusätzlichen Funktionen zur Formatierung von relativen Zeiten und ein _ICU_-kompatibles Message-Format. Hauptaugenmerk liegt auf der Integration der verschiedenen Features mit Frameworks wie React, Amber und Templating-Libraries wie Handlebars oder Dust. Weiterhin kommt eine recht interessante Funktionalität eines sogenannten Format-Caches, welches die Neuverarbeitung von Ausdrücken reduziert und somit für die Ausführungsgeschwindigkeit zuträglich ist. FormatJS nutzt eine Weiterentwicklung von [Messageformat.js](https://github.com/SlexAxton/messageformat.js/) des _ICU_ Messageformats in JavaScript.
+
+
+{/*: .sidecaption */}
+
+Während Globalize für sich allein stehend, unabhängig von _Intl_ funktioniert, erfordert [FormatJS](http://formatjs.io/) die Existenz der API bzw. des [Polyfills](https://github.com/andyearnshaw/Intl.js/). [FormatJS](http://formatjs.io/) ist eine Entwicklung von Yahoo. Was im Prinzip erstmal gut klingt ist bei genauerer Betrachtung leider nicht ganz so positiv, da der Footer der Webseite suggeriert, dass diese Library seit 2014 keine größeren Updates mehr erhalten hat.
+
+_FormatJS_ kommt weitestgehend mit den Daten von _Intl_ bzw. dem _Intl Polyfill_ aus. Das MessageFormat benötigt weiterhin eine `pluralRuleFunction` pro Sprache. Das relative Formatieren von Datum/Zeit benötigt eine zusätzliche Datenstruktur vom _CLDR_-Bestand. Diese umfassen aber je nach Sprache nur rund 2KB. Das ist im Vergleich zu den anderen genannten Werten geradezu wenig. Die Daten liegen im Projekt `intl-relativeformat` offline vor (soweit dieses über das NPM-Paket installiert wird). Leider sind diese Pakete nur in Form von JSONP-ähnlichen Daten vorhanden, die sich automatisch an das globale `IntlRelativeFormat` binden. Dieses Vorgehen ist aber für moderne ES2015(ES6)-Buildprozesse eher hinderlich, da auf diesen Wege die Daten nicht einfach integriert werden können. Die Daten sind aber eigentlich in dem [CLDR-JSON](https://github.com/unicode-cldr/cldr-json)-Paket auch feingranularer vorhanden. Hier wäre es sinnvoll sich eine bessere ES2015(ES6)-konforme Integration zu überlegen. Die Daten werden durch das Yahoo eigene Tool [formatjs-extract-cldr-data](https://github.com/yahoo/formatjs-extract-cldr-data) zusammengestellt. Evtl. kann dieses in Zukunft entsprechend verbessert werden.
+
+## Zusammenfassung
+
+Zusammengefasst könnte man die Entscheidung zum Einsatz der Technologie wie folgt vereinfachen:
+
+- **Übersetzung von Texten**: MessageFormat/ICU
+- **Datumsformatierung**: natives Intl-Objekt bzw. Polyfill
+- **Zahlenformatierung**: natives Intl-Objekt bzw. Polyfill
+- **Formatierung relative Datumswerte**: FormatJS oder Globalize
+- **Parsen von Zahlen**: Globalize oder eigene Lösung
+- **Parsen von Währungen**: eigene Lösung
+- **Parsen von Datum/Zeit**: eigene Lösung
+
+## Einfache Textübersetzungslösungen
+
+Ein kleine Liste von einzelnen Libraries für die Übersetzung von Texten:
+
+- [messageformat.js](https://github.com/SlexAxton/messageformat.js): ICU MessageFormat für JavaScript - i18n Plural und Gender Varianten werden unterstützt
+- [Jed](http://slexaxton.github.io/Jed/): Gleicher Autor wie MessageFormatJS - aber diesmal mit Gettext statt ICU als Basis/Inspiration
+- [polyglot.js](http://airbnb.io/polyglot.js): Von Airbnb entwickelte einfache Lösung (Keine Abhängigkeiten) zur Übersetzung. Enthält hard-coded die Pluralization-Rules für aktuell 7 Varianten (mit rund 30 Sprachen).
+
+## Spezielle Bibiliotheken
+
+- [MomentJS](http://momentjs.com/): Bibiliothek zur Arbeit mit Datumswerten z.B. die einfache Berechnung sowie deren Formatierung. Die Locales werden als seperate JavaScript-Dateien via NPM/GitHub mit ausgeliefert. Die Daten werden scheinbar manuell von Autoren gepflegt und basieren nicht auf _CLDR_-Daten. (Es gab dazu mal einen Versuch - der aber nach zwei Jahren Inaktivität wohl als gescheitert betrachtet werden muss.) Man kann aber auch via _Grunt_ einen eigenen Build mit den benötigten Locales bauen.
+- [Moment Timezones](http://momentjs.com/timezone/): Bibilothek zur Arbeit mit Zeitzonen.
+
+## (MVC-)Framework-Lösungen für i18n/l10n
+
+Hier noch eine kleine Liste von Framework-spezifischen Übersetzungs- und Lokalisierungslösungen:
+
+- [ember-i18n](https://github.com/jamesarosen/ember-i18n): Einfache Übersetzungslösung für Ember. Nur Messages mit Plural-Regeln vom CLDR.
+- [ember-intl](https://github.com/yahoo/ember-intl) - Internationalisierung für Ember mittels FormatJS.
+- [react-intl](https://github.com/yahoo/react-intl): Meist genutzt Lösung für React wie es scheint
+- [i18n-msg](https://github.com/ebidel/i18n-msg): Ein Custom-Element für Polymer zur Übersetzung von Texten
+- [angular-i18n](https://docs.angularjs.org/guide/i18n): Dokumentation zur einbauten Lokalisierung in Angular. Formatierung für Zahlen, Datum und Geldwerte. Pluralformen und Genderformen werden unterstützt.
+- [angular-translate](https://angular-translate.github.io/): AngularJS module with support of i18n and l10n including lazy loading and pluralization.
+
+## Links / Ressourcen
+
+- [Lesenswerte Übersicht von Lokalisierungslösungen](http://rxaviers.github.io/javascript-globalization/)
diff --git a/app/blog/2016-04-senior-frontend-developer.mdx b/app/blog/2016-04-senior-frontend-developer.mdx
new file mode 100644
index 0000000..218df94
--- /dev/null
+++ b/app/blog/2016-04-senior-frontend-developer.mdx
@@ -0,0 +1,47 @@
+---
+layout: post
+title: "Senior Frontend Entwickler"
+date: 2016-04-15 8:30:00 +0200
+tags: Frontend JavaScript CSS Job
+author: werner
+signup: true
+---
+
+export const summary = `Aufgrund unserer Erfahrung werden wir immer wieder von Kunden gefragt ob wir an Job-Interviews teilnehmen können bzw. bei der Auswahl von Mitarbeitern unterstützen können. Leider sind in vielen Fällen schon die Job-Anzeigen und Projekt-Gesuche wenig aussagekräftig, spannend oder präzise. Damit erscheinen diese nicht gerade verlockend. Hier mal ein Entwurf — der zugegebenermaßen recht lang geraten ist — für die Position eines Senior Frontend Entwickler oder Architekten.`
+
+{summary}
+
+Hier nun also die Beschreibung:
+
+- Einen Abschluss der Informatik oder eine abgeschlossene Ausbildung im IT-Bereich erwarten wir von Dir. Grundlegende Programmierkenntnisse zu Datenstrukturen, Big-O-Notation, Compiler vs. Interpreter, etc. halten wir auch im Frontend für wichtig.
+- 3 Jahre praktische Frontend-Entwicklung sind ein Muss. Eher Fünf. Keine Ablenkungen. Wir haben Zweifel an Full-Stack-Genies. Besser Spezialist als Alles-Könner.
+- EcmaScript 2015 und Co fühlen sich für Dich gut an und Du konntest schon einige praktische Erfahrung sammeln.
+- Du verstehst wie ein Browser rendert, Du hast tiefe Kenntnisse vom DOM, Du verstehst was Browser schnell und langsam können.
+- Aktuelle Programmiertrends im Frontend setzt Du gerne ein bzw. verstehst warum nicht. Promises? Streaming? Reaktive Programmierung? Virtual DOM? JSX? Dependency Injection?
+- Animationen mit Easing und Physics hast Du schon mehrfach umgesetzt. Entwürfe aus FramerJS, Principle, Quartz Composer und Co produzieren ein Faszination für die anstehende Herausforderung, aber keine Panik.
+- Gängige Web-Frameworks wie React, VueJS, Angular, Ember, … sind Dir bekannt. Theoretisch und praktisch. Wir verstehen, dass Du nicht alle kennen kannst. Ein Überblick ist für uns aber essentiell. Etwas über den Tellerrand hinausschauen hat noch niemals geschadet.
+- Du kommunizierst selbstverständlich mit Backends via REST. Versionierte APIs und OAuth sind Dir immer wieder begegnet. Du kennst die Unterschiede der verschiedenen HTTP-Methoden? Erste Erfahrungen mit Socket-basierter Kommunikation runden Deine Kenntnisse ab.
+- Versionstools wie Git sind für die Arbeit im Team Standard. Keine Frage. Rebasing, Git Flow, Pull Requests, LFS, Hooks, etc. sollten Dir aber auch geläufig sein.
+- Wir setzen auf moderne Build-Tools wie Gulp oder auch Webpack. Pakete verwalten wir mit JSPM. Wäre das auch was für Dich? Wir freuen uns von Deinen Kenntnissen und Erfahrungen zu profitieren.
+- Komponenten sind Dir geläufig und Du konntest Diese im praktischen Einsatz selbst entwickeln und verbessern. Atomares Design sagt Dir etwas?
+- Responsive Design ist eine Herausforderung. Größer, kleiner, weiter, Dichter. Ladezeiten immer im Blick? Typographie immer lesbar? Alles kein richtiges Problem! Aber sehr spannend. Erzähl' und erprob' Deine Ideen bei uns.
+- Du nimmst an der Entwicklung von Libaries/Frameworks/Komponenten teil (aktiv oder passiv), Du entwickelst eigene Lösungen, Du gibst Feedback zu vorhandenen Lösungen statt immer alles selber zu machen. GitHub und NPM sind Dein täglich Brot. Für die OpenSource-Community bist Du kein Fremder.
+- Performance vs. Architektur. Du fokussierst Deine Arbeit auf beste Performance und User Experience und verstehst es dabei täglich Kompromisse zu finden um eine stabile und nachhaltige Architektur zu gewährleisten. Wir schreiben ungerne alles dreimal. Das sollte auch Dein Ziel sein.
+- SpeedCurve, Developer Tools, Netzwerk-Monitore und Performance-Budgets sind für Dich eine liebgewonnene tägliche Orientierung.
+- Dir sagen die Begriffe Polyfill, Transpiling, Post Processing, Source Maps, Base64, Magic Numbers, etc. etwas.
+- Tools rund um CSS Verarbeitung sind Dein täglich Brot. Du verstehst wie diese konfiguriert werden, was Sie machen und wie Du diese effizient verbinden kannst.
+- Du kennst Dich mit geläufigen Grafikformaten im Web und deren Optimierung aus. SVG und WebP hast Du sicher schon praktisch eingesetzt?
+- Was war noch gleich der Unterschied von WOFF zu WOFF2. Und worum handelt es sich dabei überhaupt?
+- Du hast Kenntnisse zur Auslieferung von Frontend-Anwendungen. CDN und Checksummen-basierte Dateinamen sind Dir geläufig.
+- Du verstehst was von Ladezeiten und Reaktionszeiten für die Qualität der User Experience. Für Dich ist es selbstverständlich in angrenzenden UX-Bereichen Interesse zu zeigen. Dein primäres Ziel ist eine tolle User Experience.
+- Wir können mit Dir Fachsimpeln zu aktuellen Entwicklungen und Problemen der Browser und Web-Technologien. IndexedDB in Webkit? Mobile Web Performance auf Android? CSS Module Pro und Contra? Präfixe vs. Config-Flags?
+- Du willst Dich weiterbilden. Lesen und Experimentieren ist Dein Hobby. Du versuchst immer wieder Deine Komfortzone zu verlassen. Du kämpfst für diese Möglichkeiten während Deines regulären Jobs? Umso besser!
+- Wir können von Dir neue Twitter-Accounts zum Folgen, neue Newsletter oder Podcast zum Abonnieren, neue Events zum Besuchen kennenlernen?
+- Webmontage, Konferenzen und kleine Meetups besuchst Du immer wieder. Teilweise auch als aktiver Teilnehmer. Wir sehen Dich als einen Teil um uns besser in die Entwickler-Community zu integrieren.
+- Agile Prozesse, Continuous Delivery/Testing/Deployment. Slack oder Trello? Saucelabs? BrowserStack? Moderne Tools und Prozesse helfen ungemein. Dir auch?
+- Umso mehr Senior umso besser muss man kommunizieren können. Du verstehst es Deine Argumente zu verteidigen ohne zu verletzen. Du kannst die Chefs überzeugen und Deine Kollegen mitreißen? Perfekt! Wir suchen Charisma und Passion.
+- Du kämpfst für Deine Überzeugungen. Wir wollen besser sein als Normal. Das gelingt uns nur, wenn wir Leute wie Dich finden, die mehr wollen als Standard.
+
+Du verstehst nur 2/3 davon? Kein Problem - den Rest kannst Du bei uns lernen!
+
+Melde Dich einfach via E-Mail - vielleicht haben wir Arbeit für Dich!
diff --git a/app/blog/images/buecher/summer-books_2015_1200px_v1.jpg b/app/blog/images/buecher/summer-books_2015_1200px_v1.jpg
new file mode 100644
index 0000000..20fead0
Binary files /dev/null and b/app/blog/images/buecher/summer-books_2015_1200px_v1.jpg differ
diff --git a/app/blog/images/farben/cie-1931.png b/app/blog/images/farben/cie-1931.png
new file mode 100644
index 0000000..485e1e2
Binary files /dev/null and b/app/blog/images/farben/cie-1931.png differ
diff --git a/app/blog/images/farben/cielab-circle.png b/app/blog/images/farben/cielab-circle.png
new file mode 100644
index 0000000..bec3f05
Binary files /dev/null and b/app/blog/images/farben/cielab-circle.png differ
diff --git a/app/blog/images/farben/hlc-faecher.jpg b/app/blog/images/farben/hlc-faecher.jpg
new file mode 100644
index 0000000..478286b
Binary files /dev/null and b/app/blog/images/farben/hlc-faecher.jpg differ
diff --git a/app/blog/images/farben/hsb-vs-cielab.png b/app/blog/images/farben/hsb-vs-cielab.png
new file mode 100644
index 0000000..7c49a9c
Binary files /dev/null and b/app/blog/images/farben/hsb-vs-cielab.png differ
diff --git a/app/blog/images/farben/hue.jpg b/app/blog/images/farben/hue.jpg
new file mode 100644
index 0000000..1454a49
Binary files /dev/null and b/app/blog/images/farben/hue.jpg differ
diff --git a/app/blog/images/farben/husl-stretching.png b/app/blog/images/farben/husl-stretching.png
new file mode 100644
index 0000000..479683f
Binary files /dev/null and b/app/blog/images/farben/husl-stretching.png differ
diff --git a/app/blog/images/farben/munsell-system.png b/app/blog/images/farben/munsell-system.png
new file mode 100644
index 0000000..facd364
Binary files /dev/null and b/app/blog/images/farben/munsell-system.png differ
diff --git a/app/blog/images/farben/pantone-art.jpg b/app/blog/images/farben/pantone-art.jpg
new file mode 100644
index 0000000..58b2d06
Binary files /dev/null and b/app/blog/images/farben/pantone-art.jpg differ
diff --git a/app/blog/images/farben/rgb-vs-cmyk.png b/app/blog/images/farben/rgb-vs-cmyk.png
new file mode 100644
index 0000000..50864eb
Binary files /dev/null and b/app/blog/images/farben/rgb-vs-cmyk.png differ
diff --git a/app/blog/images/farben/srgb-gamut.png b/app/blog/images/farben/srgb-gamut.png
new file mode 100644
index 0000000..cb6f9e9
Binary files /dev/null and b/app/blog/images/farben/srgb-gamut.png differ
diff --git a/app/blog/images/farben/surround-red-ciecam02.png b/app/blog/images/farben/surround-red-ciecam02.png
new file mode 100644
index 0000000..539e524
Binary files /dev/null and b/app/blog/images/farben/surround-red-ciecam02.png differ
diff --git a/app/blog/images/farben/title.jpg b/app/blog/images/farben/title.jpg
new file mode 100644
index 0000000..02e2f90
Binary files /dev/null and b/app/blog/images/farben/title.jpg differ
diff --git a/app/blog/images/homeway/asus-router-rt-ac3200.jpg b/app/blog/images/homeway/asus-router-rt-ac3200.jpg
new file mode 100644
index 0000000..f206d4c
Binary files /dev/null and b/app/blog/images/homeway/asus-router-rt-ac3200.jpg differ
diff --git a/app/blog/images/homeway/fritzbox-7490.jpg b/app/blog/images/homeway/fritzbox-7490.jpg
new file mode 100644
index 0000000..46514bb
Binary files /dev/null and b/app/blog/images/homeway/fritzbox-7490.jpg differ
diff --git a/app/blog/images/homeway/homeway-anschlussdose.jpg b/app/blog/images/homeway/homeway-anschlussdose.jpg
new file mode 100644
index 0000000..31be35f
Binary files /dev/null and b/app/blog/images/homeway/homeway-anschlussdose.jpg differ
diff --git a/app/blog/images/homeway/homeway-evolution-kabel.jpg b/app/blog/images/homeway/homeway-evolution-kabel.jpg
new file mode 100644
index 0000000..b0e714a
Binary files /dev/null and b/app/blog/images/homeway/homeway-evolution-kabel.jpg differ
diff --git a/app/blog/images/homeway/homeway-kleinverteiler.jpg b/app/blog/images/homeway/homeway-kleinverteiler.jpg
new file mode 100644
index 0000000..246d212
Binary files /dev/null and b/app/blog/images/homeway/homeway-kleinverteiler.jpg differ
diff --git a/app/blog/images/homeway/homeway-verteilerfeld.jpg b/app/blog/images/homeway/homeway-verteilerfeld.jpg
new file mode 100644
index 0000000..3dfa4ab
Binary files /dev/null and b/app/blog/images/homeway/homeway-verteilerfeld.jpg differ
diff --git a/app/blog/images/homeway/mein-innenaufbau-im-kleinverteiler.jpg b/app/blog/images/homeway/mein-innenaufbau-im-kleinverteiler.jpg
new file mode 100644
index 0000000..435660b
Binary files /dev/null and b/app/blog/images/homeway/mein-innenaufbau-im-kleinverteiler.jpg differ
diff --git a/app/blog/images/homeway/powerline-adapter-in-zentrale.jpg b/app/blog/images/homeway/powerline-adapter-in-zentrale.jpg
new file mode 100644
index 0000000..052ba47
Binary files /dev/null and b/app/blog/images/homeway/powerline-adapter-in-zentrale.jpg differ
diff --git a/app/blog/images/i18n/formatjs-logo.afdesign b/app/blog/images/i18n/formatjs-logo.afdesign
new file mode 100644
index 0000000..2ab320a
Binary files /dev/null and b/app/blog/images/i18n/formatjs-logo.afdesign differ
diff --git a/app/blog/images/i18n/formatjs-logo.png b/app/blog/images/i18n/formatjs-logo.png
new file mode 100644
index 0000000..f29ef5c
Binary files /dev/null and b/app/blog/images/i18n/formatjs-logo.png differ
diff --git a/app/blog/images/i18n/globalize-mark-dark.png b/app/blog/images/i18n/globalize-mark-dark.png
new file mode 100644
index 0000000..c127f16
Binary files /dev/null and b/app/blog/images/i18n/globalize-mark-dark.png differ
diff --git a/app/blog/images/i18n/icu-message-format.png b/app/blog/images/i18n/icu-message-format.png
new file mode 100644
index 0000000..b2fc831
Binary files /dev/null and b/app/blog/images/i18n/icu-message-format.png differ
diff --git a/app/blog/images/i18n/shutterstock_228803698.afdesign b/app/blog/images/i18n/shutterstock_228803698.afdesign
new file mode 100644
index 0000000..bf80200
Binary files /dev/null and b/app/blog/images/i18n/shutterstock_228803698.afdesign differ
diff --git a/app/blog/images/i18n/shutterstock_228803698.eps b/app/blog/images/i18n/shutterstock_228803698.eps
new file mode 100644
index 0000000..8c5b981
Binary files /dev/null and b/app/blog/images/i18n/shutterstock_228803698.eps differ
diff --git a/app/blog/images/i18n/shutterstock_228803698.png b/app/blog/images/i18n/shutterstock_228803698.png
new file mode 100644
index 0000000..4710e13
Binary files /dev/null and b/app/blog/images/i18n/shutterstock_228803698.png differ
diff --git a/app/blog/images/i18n/shutterstock_228803698.svg b/app/blog/images/i18n/shutterstock_228803698.svg
new file mode 100644
index 0000000..9f73447
--- /dev/null
+++ b/app/blog/images/i18n/shutterstock_228803698.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/blog/images/i18n/unicode.png b/app/blog/images/i18n/unicode.png
new file mode 100644
index 0000000..c2a1052
Binary files /dev/null and b/app/blog/images/i18n/unicode.png differ
diff --git a/app/blog/images/jslinker/chain-257492.jpg b/app/blog/images/jslinker/chain-257492.jpg
new file mode 100644
index 0000000..015deb5
Binary files /dev/null and b/app/blog/images/jslinker/chain-257492.jpg differ
diff --git a/app/blog/images/referrer/admin-overview.png b/app/blog/images/referrer/admin-overview.png
new file mode 100644
index 0000000..44df345
Binary files /dev/null and b/app/blog/images/referrer/admin-overview.png differ
diff --git a/app/blog/images/referrer/bereinigte-segmente-einrichten.png b/app/blog/images/referrer/bereinigte-segmente-einrichten.png
new file mode 100644
index 0000000..b0b9ff7
Binary files /dev/null and b/app/blog/images/referrer/bereinigte-segmente-einrichten.png differ
diff --git a/app/blog/images/referrer/home-with-two-views.png b/app/blog/images/referrer/home-with-two-views.png
new file mode 100644
index 0000000..847ea2e
Binary files /dev/null and b/app/blog/images/referrer/home-with-two-views.png differ
diff --git a/app/blog/images/referrer/reporting-filtered.png b/app/blog/images/referrer/reporting-filtered.png
new file mode 100644
index 0000000..7c1ef85
Binary files /dev/null and b/app/blog/images/referrer/reporting-filtered.png differ
diff --git a/app/blog/images/referrer/reporting-original-mit-segment.png b/app/blog/images/referrer/reporting-original-mit-segment.png
new file mode 100644
index 0000000..9881eb4
Binary files /dev/null and b/app/blog/images/referrer/reporting-original-mit-segment.png differ
diff --git a/app/blog/images/referrer/reporting-original-segment-hinzufuegen.png b/app/blog/images/referrer/reporting-original-segment-hinzufuegen.png
new file mode 100644
index 0000000..81e1d2f
Binary files /dev/null and b/app/blog/images/referrer/reporting-original-segment-hinzufuegen.png differ
diff --git a/app/blog/images/referrer/reporting-original.png b/app/blog/images/referrer/reporting-original.png
new file mode 100644
index 0000000..23cd832
Binary files /dev/null and b/app/blog/images/referrer/reporting-original.png differ
diff --git a/app/blog/images/referrer/segment-ueberblick.png b/app/blog/images/referrer/segment-ueberblick.png
new file mode 100644
index 0000000..d03908d
Binary files /dev/null and b/app/blog/images/referrer/segment-ueberblick.png differ
diff --git a/app/blog/images/referrer/view-filters.png b/app/blog/images/referrer/view-filters.png
new file mode 100644
index 0000000..0b9dded
Binary files /dev/null and b/app/blog/images/referrer/view-filters.png differ
diff --git a/app/blog/images/referrer/view-settings-botfilter.png b/app/blog/images/referrer/view-settings-botfilter.png
new file mode 100644
index 0000000..da5dff6
Binary files /dev/null and b/app/blog/images/referrer/view-settings-botfilter.png differ
diff --git a/app/blog/images/referrer/view-settings.png b/app/blog/images/referrer/view-settings.png
new file mode 100644
index 0000000..b3dc69d
Binary files /dev/null and b/app/blog/images/referrer/view-settings.png differ
diff --git a/app/components/blog/Amazon.tsx b/app/components/blog/Amazon.tsx
new file mode 100644
index 0000000..0a1ce9a
--- /dev/null
+++ b/app/components/blog/Amazon.tsx
@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from "react"
+
+export interface AmazonProps extends PropsWithChildren {
+ // eslint-disable-next-line react/no-unused-prop-types
+ readonly id: string
+}
+
+export function AmazonLink({ children }: AmazonProps) {
+ return children
+}
diff --git a/app/components/blog/Book.tsx b/app/components/blog/Book.tsx
new file mode 100644
index 0000000..4a9965b
--- /dev/null
+++ b/app/components/blog/Book.tsx
@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from "react"
+
+export interface BookProps extends PropsWithChildren {
+ // eslint-disable-next-line react/no-unused-prop-types
+ readonly amazonId?: string
+}
+
+export function Book({ children }: BookProps) {
+ return