Spare als Adobe CC-Abonnent bares Geld

Es ist kein Geheimnis, dass die Creative Cloud-Abos von Adobe alles andere als Schnäppchen sind.
Als Bestandkunde kannst du dir aber möglicherweise 60 Tage Kosten sparen.

Wechsel dafür in die Kontoeinstellungen deiner Adobe ID. Öffne dafür die Adobe Creative Cloud-Anwendung (wo du z.B. Photoshop installierst), klicke oben rechts auf dein Profilbild und dann auf „Konto verwalten“.

Es öffnet sich eine Seite, melde dich hier mit deinem Passwort an.
Klicke dann bei „Creative Cloud-Abonnement“ unter „Abos & Produkte“ auf „Abo verwalten“.

Jetzt klicke auf „Abo kündigen“. Um dich vom Kündigen abzuhalten wird dir nun die Gutschrift angeboten.
In meinem Fall werden mir die Kosten für 60 Tage erstattet. In meinem Fall wären das immerhin 118,98€.

Wie ihr Frosted Glass fürs Web nutzen könnt

Der sogenannte Frosted Glass-Effekt (oder von Microsoft auch Acrylic genannt) ist momentan sehr angesagt. Ich habe auch schon mal ein Video produziert, in dem ich gezeigt habe wie ihr den Effekt mit CSS erzeugen könnt. Leider gibt es mit dieser Technik noch ein paar Probleme, wodurch man sie noch nicht wirklich produktiv einsetzen kann.

Ein Problem ist, dass für die Technik immer ein Hintergrundbild definiert werden muss. Das setzt aber voraus, dass zwischen dem Element mit dem Effekt und dem Hintergrund nichts liegen darf.

Das Element mit dem Effekt ist nämlich nicht wirklich transparent, sondern hat nur den gleichen Hintergrund wie der Body.
Man könnte eine Art Screenshot machen und dieses als Hintergrund benutzen.
Das habe ich mal ausprobiert:

Wie im Beispiel beschrieben, nutze ich html2canvas um das HTML in ein Canvas zu konvertieren. Das Canvas wandel ich dann wiederum in ein Bild um, damit es als Hintergrundbild genutzt werden kann.
Das gesamte Beispiel gibt es hier: https://lgkonline.github.io/frosted-glass/

Die React Komponente react-acrylic geht hier den gleichen Weg, um den Effekt zu erzeugen. Es sei aber gesagt, diese Technik nicht sehr performant ist, da es sehr rechenintensiv ist ein Screenshot zu erzeugen und je nachdem wie viele Elemente es auf der Seite gibt, dauert es auch länger.

Ein anderes Problem ist, dass Browser wie Edge und Firefox beim Scrollen stocken, wenn ein Hintergrundbild als fixed gesetzt ist. Dafür habe ich leider noch keine Lösung gefunden. Diese Problematik wird hier auf Stack Overflow auch genannt.

Auch ist es doch sehr aufwändig, den Effekt zu erzeugen. Es gibt aber Möglichkeiten, sich die Arbeit zu erleichtern.
Auf CodePen habe ich ein Beispiel veröffentlicht, in dem ich eine React Komponente erstellt habe, wodurch ich den Effekt schneller an jeder beliebigen Stelle einbinden kann:

See the Pen FrostedGlass React Component by Lars Gerrit Kliesing LGK (@lgkonline) on CodePen.

Update

Ich habe eine neue CSS-Spezifikation gefunden, mit der es deutlich einfacher wird, den Effekt einzusetzen: backdrop-filter
Mit backdrop-filter: blur(10px); könnte man also Frosted Glass realisieren.
Derzeit wird backgroup-filter leider nur von Safari für macOS und iOS unterstützt, soll aber auch in der nächsten Edge-Version verfügbar sein (Quelle: caniuse.com).

Ich konnte backdrop-filter erfolgreich in diesem Pen testen.

Link zum CodePen: https://codepen.io/lgkonline/pen/GQrLeV

Mac als optimale Plattform für Entwickler – und wie Microsoft mit dazu beiträgt

Ich bin selber Entwickler. Und wenn ich im Internet Fach-Artikel oder auch offizielle Dokumentationen von Bibliotheken lese, stelle ich immer wieder fest, dass viele andere Entwickler offenbar macOS statt Windows oder einer Linux Distribution nutzen.

Selbst Microsoft präsentiert in den Blogs von Visual Studio Code größtenteils Screenshots von macOS.
Und das, obwohl sie doch selbst immer betonen, dass Windows 10 die beste Plattform für Entwickler sei. Tatsächlich scheint aber macOS viel optimaler für Entwickler zu sein. Warum? Dafür brauchen wir nur zu schauen, welche Plattformen heute für Endanwender am relevantesten sind: Smartphones und Web. Die Anwendungen dafür werden größtenteils in JavaScript entwickelt (das geht auch aus der GitHub Octoverse 2017 Statistik hervor). Der größte Vorteil an der JavaScript-Entwicklung ist, dass dies sowohl unter Linux, Windows und macOS möglich ist.
Was aber nicht unter allen Plattformen möglich ist: Das Erstellen einer mobilen App. Zumindest das Kompilieren von iOS-Apps erlaubt Apple nur auf Mac-Geräten. Jetzt kann man als Entwickler sagen: „Fuck it, dann entwickle ich halt nur für Android.“ Aber wer ernsthaft mit seiner App Geld verdienen will, für den ist der iOS-Marktanteil einfach zu wichtig, man kann ihn nicht einfach ignorieren.

Es war also ein kluger Schachzug von Apple iOS-Kompilierung nur von Macs zu erlauben. Denn während der PC-Kauf jährlich abnimmt, scheint dies nicht für Apple-PCs zu zutreffen: Mac-Verkaufszahlen im Q2 2017 widerstehen dem Trend | Mac Life

Warum ich nicht mehr Adobe Portfolio verwende

Für die, die es nicht kennen: Adobe Portfolio ist eine Art Website-Baukasten insbesondere für Kreativschaffende, um einfach und ohne nötigen Programmierkenntnissen eine eigene Portfolio-Website zu erstellen.

Auch wenn ich Kenntnisse in der Web-Entwicklung sehr wohl besitze, hielt ich Adobe Portfolio durchaus für interessant. Vor allem die Synchronisation mit Behance ist durchaus praktisch. Alle meine Projekte von dort wurden automatisch auf der Portfolio-Site angezeigt.
In meinem Creative Cloud-Abo ist die Nutzung von Adobe Portfolio übrigens inklusive. Ich musste also nichts extra bezahlen. Auch das war ein Grund für mich, warum ich das ausnutzen sollte.

Nun aber der ausschlagende Grund, warum ich mich für eine Alternative entschieden habe: Die Nutzung von HTTPS in Kombination mit einer eigenen Domain ist unmöglich.  Es ist seit längerem bekannt, dass Suchmaschinen Webseiten mit HTTP schlechter einstufen, als welche mit HTTPS. Browser, wie Chrome kennzeichnen Webseiten mit Eingabefeldern und ohne HTTPS sogar als „Nicht sicher“.
Dieses Manko wurde bereits vor Jahren an Adobe kommuniziert, getan hat sich aber noch nichts. Wenigstens ist dieses Problem im FAQ aufgeführt: Adobe Portfolio FAQ

Der Umstieg

Ich entschied mich also dazu, meine Portfolio-Site selbst zu gestalten und zu entwickeln. Glücklicherweise bietet Behance eine API an. Damit kann ich also auch weiterhin meine Projekte anzeigen lassen.
Gestalterisch habe ich mich zunächst an das Template aus Adobe Portfolio orientiert. Dass ich jetzt alle Freiheiten habe, habe ich das natürlich auch genutzt und habe beispielsweise als Font HK Grotesk verwendet. Bei Adobe Portfolio ist die Schriftarten-Auswahl relativ begrenzt gewesen.

Cool ist auch, dass ich mein Portfolio jetzt auch in mehreren Sprachen anbieten kann. Das war bei Adobe Portfolio auch nicht möglich.
Das neue Portfolio habe ich übrigens u.a. mit React realisiert.

„Swipeable Bar“: Vielleicht neuer UI-Trend?

Zuletzt habe ich meine Website lgk.io überarbeitet und im Zuge dessen ein neues Element in meiner CI eingeführt: ich nenne sie „Swipeable Bar“ oder auch „Pill Bar“.

Gemeint ist eine kleine aber dickere horizontale Linie oben mittig einer Anwendung.
Dieses Element signalisiert: „Mich kannst du ziehen / wischen“
Daraufhin passiert etwas am oberen Ende der Anwendung. In meinem Fall wird eine Leiste eingeblendet, die auf meine anderen Projekte und Services verweist.

Die Idee ist von Apple

Genauer gesagt vom iPad. Seit iOS 11 können dort nämlich Fenster gelöst werden und frei auf dem Bildschirm verschoben werden. Und dort signalisiert das Element ebenfalls: „Hier kannst du ziehen“

Beim iPhone X hat ein ähnliches Element den Home-Button abgelöst. Hier aber permanent auf der unteren Seite des Displays. Wischt der Nutzer hier nach oben, gelangt er auf den Startbildschirm.
Die Leiste hat hier aber noch mehr Funktionen: Wischt man horizontal (also nach links oder rechts), wechselt man die aktuell geöffnete App.

Offizielle Bezeichnung?

In Apples Dokumentationen und auch sonst im Netz konnte ich noch keinen Begriff für dieses UI-Element finden. Deswegen habe ich extra einen Thread in User Experience Stack Exchange eröffnet: https://ux.stackexchange.com/questions/114790/whats-apples-term-for-horizontal-swipeable-bar

Update: Das Element scheint keine offizielle Bezeichnung zu haben. Allerdings wird der Streifen, der beim iPhone X unten den Home-Button ersetzt in einer Methoden-Dokumentation als „Home Indicator“ (Quelle: Apple Developer Documentation) bezeichnet.
Als allgemeine Bezeichnung könnte man also „Swipe Indicator“ wählen.

iPad Pro – Test aus Sicht eines Hobbydesigners/Entwicklers

Seit ein paar Woche habe ich jetzt mein iPad Pro. Es soll vor allem als Grafiktablett dienen, aber auch bei Bedarf für Unterhaltung sorgen. Hier möchte ich meine ersten Eindrücke vom Gerät schildern und ob es mein Laptop ersetzt hat. „iPad Pro – Test aus Sicht eines Hobbydesigners/Entwicklers“ weiterlesen

Frosted Glass Effect CSS Tutorial

In diesem Video zeige ich wie einfach es ist, den Frosted Glass-Effekt mit CSS umzusetzen.
Der Frosted Glass-Effekt ist gerade sehr beliebt. Unter anderem kommt er bereits von Apple und Microsoft zum Einsatz.

Den Quellcode findet ihr hier:
https://codepen.io/lgkonline/pen/aWryOo

Das Hintergrundbild „Light Trails on City Street at Night“ von Steven Arenas habe ich auf Pexels gefunden:
https://www.pexels.com/photo/architecture-blur-bridge-buildings-314380/

Attribution for the music I’ve used:
Accralate – The Dark Contenent von Kevin MacLeod ist unter der Lizenz Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) lizenziert.
Quelle: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1100341
Interpret: http://incompetech.com/