Tipps für ein frustfrei(er)es Entwickeln von Gutenberg Custom Blocks

Zur Zeit arbeite ich viel mit dem neuen WordPress Gutenberg Editor. In diesem Artikel möchte ich einige Erfahrungen, die ich gesammelt habe, in Form von Tipps teilen. Mit der Zeit werden also wird die Liste also wahrscheinlich noch erweitert.

  • Stylesheet immer in eine CSS-Datei auslagern, um Konflikte beim Ändern zu vermeiden
  • Mit InspectorControls können Elemente für die Seitenleiste gesetzt werden (Inspector in der Dokumentation)
  • Eigenschaft parent ist sinnvoll für verschachtelte Blöcke (in der Dokumentation).

Beitragsbild: Negative Space, Quelle: Pexels

Gedankenspiel: Wie ein Upload-Filter funktionieren müsste

„Upload-Filter“ gilt als Trigger-Wort für die aktuelle Diskussion rund um den geforderten Artikel 13 der Urheberrechtsreform. Viele sind sich einig, dass ein Upload-Filter schwer umzusetzen wäre. Ich habe mal ein bisschen nachgedacht, wie eigentlich ein guter Upload-Filter-System aufgebaut sein könnte.

Beitragsbild: Pixabay, Quelle: Pexels

„Gedankenspiel: Wie ein Upload-Filter funktionieren müsste“ weiterlesen

Lösung für Twenty Seventeens stockenden Header

Für eine lange Zeit habe ich für diesen Blog eine angepasste Version des WordPress Themes „Twenty Seventeen“ genutzt. Generell finde ich den Theme ziemlich nett, aber es gibt einen kleinen „Bug“ (?), der mich schon länger gestört hat.

There’s also an english version of this article on my Medium site. Beitragsbild: Pixabay, Quelle: Pexels

„Lösung für Twenty Seventeens stockenden Header“ weiterlesen

CSS: Die Nutzung von System-Fonts

Web Fonts zu nutzen ist nett, aber manchmal ist es sinnvoll, eine Schriftart zu nutzen, die bereits auf dem System installiert ist. So kannst du die Perfomance etwas verbessern, weil der Browser so nicht mehr die Font-Datei laden muss. Außerdem kannst du dem Nutzer so einen gewohnten Look präsentieren, wenn die Schriftart auf der Webseite zu dem seinen Betriebssystems passt.

There’s also an english version of this article on my Medium site. Beitragsbild: mali maeder, Quelle: Pexels

„CSS: Die Nutzung von System-Fonts“ weiterlesen

UI Design – Die Herausforderung eines Dark Themes

Entwickler lieben sie schon seit Ewigkeiten, nun werden sie immer salonfähiger: dunkle UI Themes. Viele empfinden sie als augenfreundlicher. Ob das wirklich stimmt, kann ich nicht beurteilen. Zu mindest kann dunkles UI-Design aber zu einer besseren Energieeffizienz bei Geräten mit OLED-Displays beitragen, da hierfür schwarze Pixel nicht mit Strom versorgt werden müssen.
Abgesehen davon kann dunkles Design auch einfach ästhetisch besser aussehen.

„UI Design – Die Herausforderung eines Dark Themes“ weiterlesen

Wenn ein Webdev ein Spiel entwickelt…

Seit längere Zeit schon habe ich Lust ein eigenes Spiel zu entwickeln. Dafür habe ich auch einige Ideen, allerdings hat mich bisher immer sehr schnell wieder die Motivation dazu verlassen. Trotzdem gab es dafür immer wieder einige Zwischenergebnisse, die ich in diesem Artikel mal etwas zusammen tragen möchte. „Wenn ein Webdev ein Spiel entwickelt…“ weiterlesen

TheFink – Die Plattform für Denker und Macher

Wenn du zur deutschsprachigen Creator-Szene gehörst, hast du eventuell mal etwas von TheFink gehört (wenn nicht, auch nicht schlimm 😉). TheFink ist eine entstehende Plattform im Web für (in erster Linie) deutschsprachige kreative Menschen. Egal ob du gerne entwickelst, Dinge designst oder Musik produzierst. Auf TheFink sollst du die Möglichkeit bekommen, dich, dein Können und deine Ideen zu präsentieren und auch um coole Projekte zusammen mit anderen Leuten zu starten.

Während die Plattform selbst sich noch in Entwicklung befindet, hast du bereits jetzt die Möglichkeit, dich auf https://thefink.net zu registrieren (btw von mir entwickelt), anschließend kannst du bereits unserem Discord-Server beitreten und unseren Newsletter abonnieren, damit du was die Entwicklung angehst auf dem neuesten Stand gehalten wirst.

Mit Asiw und Uisum ans Ziel!

Für die Entwicklung der aktuellen Site kamen hauptsächlich zwei Libraries zum Einsatz:

  • Asiw fürs Server-Backend mit MVC-Pattern
  • Uisum als UI-Kit, die zusammen mit React und Bootstrap funktioniert

Diese beiden Libraries können frei verwendet werden, den Quellcode dazu gibt es auf GitHub. Asiw musste ich zwar stark abändern, da die Form, die ihr auf GitHub findet doch sehr abgespeckt ist. Ich denke aber, dass Asiw eine gute Basis für einen RESTful Service in PHP ist. Der Aufbau von Asiw ist übrigens sehr stark von ASP.NET Web API inspiriert, wenn du also damit mal gearbeitet hast, wirst du dich sehr schnell zurecht finden.

Für das Frontend kam Uisum als UI-Kit zum Einsatz. Uisum (kommt im übrigen aus dem Lateinischen und heißt soviel wie „betrachten“) liefert nützliche React-Komponenten für den Grundaufbau einer Web App. Für das Styling wird hauptsächlich Bootstrap genutzt. Der Vorteil: Durch das Abändern von SCSS-Variablen lässt das Aussehen sehr gut personalisieren.
Noch ein Tipp: Durch dieses Tool wird das Anpassen von Bootstrap-Variablen noch angenehmer: https://lgkonline.github.io/customize-bootstrap/

Was ich bei macOS vermisse: Window Snapping

Seit ein paar Monaten bin ich nun stolzer Besitzer eines MacBook Pro und nutze seitdem auch hauptsächlich nicht mehr Windows sondern macOS.

Auch wenn mir das Betriebssystem an sich sehr gut gefällt (vor allem auch vom Optischen her), gibt es eine Sache die ich besondern von Windows vermisse. Dieses Feature wurde erstmals mit Windows 7 integriert und nennt sich „Aero Snap“. Hierbei kann man ein Fenster ganz einfach per Drag-and-Drop an eine Bildschirmkante ziehen und das Fenster wird automatisch an die jeweilige Seite „angedockt“. Auf diese Weise wird Multitasking deutlich vereinfacht, da so Fenster schnell und einfach nebeneinander angeordnet werden können.

Mit dem Split View bietet macOS zwar ein ähnliches Feature, es ist in meinen Augen aber nicht ganz das Gleiche. Beim Split View können lediglich zwei Fenster gleichzeitig sichtbar sein, beide werden dann auf eine eigene Arbeitsfläche ausgelagert und beide befinden sich quasi im Vollbildmodus.

Durch Dritthersteller-Apps lässt sich „Snapping“ übrigens auch bei macOS realisieren. Vor allem Magnet ist sehr beliebt und auch habe es bei mir installiert und nutze es ständig. Es ist besser als gar nichts, funktioniert aber leider nicht ganz so schön wie Snapping unter Windows.
Zum Beispiel ist die Geste für das Maximieren, das Fenster an den oberen Bildschirmrand zu ziehen. Hier kommt es oft zu Irritationen, da die Geste ein Fenster in einen anderen Arbeitsraum zu ziehen ähnlich ist.