Fix for Twenty Seventeen’s stucking header

As you may have noticed, I’m using a customized version of the WordPress theme „Twenty Seventeen“ for this blog. In general, the theme is pretty nice, but there’s a little „bug“ (?) that has bothered me for a while.

You can see it in the video above. When a page isn’t finished loading, the whole body seem to stuck over the header and then crashes in its actual place.

Here’s my fix for this:

body:not(.twentyseventeen-front-page) .custom-header {
	margin-bottom: 72px;
}

How to apply this

Just use the WordPress Customizer, go to „Custom CSS“ and insert the code.

UI Design – Die Herausforderung eines Dark Themes

Eins vorweg: Ihr könnt jetzt Artikel auf Neue St bewerten! Wenn euch dieser Artikel also gefällt, hinterlasst unten gerne ein Daumen rauf. Außerdem habt ihr unten die Möglichkeit, den Artikel via Twitter zu kommentieren. 

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

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.

Code snippet: The easiest way for a parallax background with CSS and JavaScript

Here is the JavaScript part:

window.addEventListener("scroll", event => {
    document.body.style.backgroundPosition = "0px -" + (window.pageYOffset / 2) + "px";
});

Here is how the CSS part may look like:

body {
    background-image: url(./images/bg1.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed; // this is important
}

 

Here is an example of the result:

Code Snippet: Der einfachste Weg Parallax mit JavaScript und CSS zu realisieren

Hier der JavaScript-Teil:

window.addEventListener("scroll", event => {
    document.body.style.backgroundPosition = "0px -" + (window.pageYOffset / 2) + "px";
});

Und hier wie der CSS-Teil aussehen könnte:

body {
    background-image: url(./images/bg1.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed; // das ist wichtig
}

 

Ein Beispiel, wie das Ergebnis aussehen kann:

Mit diesem Hack verbesserst du die User Experience von CodePen

CodePen ist für mich eine geniale Plattformen, um sich inspirieren zu lassen und herauszufinden, was durch Web-Technologien alles möglich ist.

Was mich aber störte: die Pen-Gallerie. Gerade wenn man nur kurz in das Ergebnis hereinschauen wollte, dauert es sehr lange, weil die Seite für einen Pen ganz neu aufgebaut werden musste. Dann musste man wieder zurück zur Gallerie navigieren (was auch nochmal dauerte).

Also habe durch die Konsole des Browsers per JavaScript einen kleinen Hack geschrieben:

See the Pen CodePen gallery hack by Lars Gerrit Kliesing LGK (@lgkonline) on CodePen.

Der Code bewirkt, dass die Links zu den Pens jeweils in einen Iframe geöffnet werden, der dann in den Vordergrund gerät. Nach einem Klick außerhalb des Iframes wird dieser wieder geschlossen und man kann den nächsten Link auswählen.

Ein kleines Problem war, dass bei einem Wechsel auf eine andere Seite das Verhalten wieder zurück gesetzt wurde. Als Workaround wird mein Programm kurz nach einem Seitenwechsel erneut ausgeführt.

So nutzt du den Hack

Während du dich in der Gallerie von CodePen befindest, öffne die Konsole deines Browsers (unter Windows ist das meistens F12). Und füge dort den Code von oben ein.

Das kannst du so machen. Allerdings müsstest du das bei jedem Besuch wiederholen, da der Code ja nicht dauerhaft gespeichert wird. Durch Browser-Erweiterungen (wie z.B. dieser für Chrome) könntest du aber erreichen, dass der Hack jedes Mal ausgeführt wird.