HTML: Links über rel-Attribut absichern

Wenn du auf eine externe Webseite verlinkst und über target=“_blank“ festlegst, dass die Seite in einem neuen Tab geöffnet werden soll, wird empfohlen zusätzlich das Attribut rel=“noopener noreferrer“ zu setzen: Snippet für Visual Studio Code Snippets in Visual Studio Code sind Shortcuts um vorgefertigte Code-Schnipsel einzufügen. Hier die Snippet-Konfig für target=“_blank“ rel=“noopener noreferrer“: Mehr Infos …

Guide: Use Git for deployment

Prepare server Use SSH to get to webspace: ssh user@webspace.host Navigate to correct directory: cd myapp/production Create Git folder: mkdir .git Navigate to the folder: cd .git Init bare repository: git init –bare Create file called „post-receive“ in .git/hooks with this content: Update: It’s important that your „post-receive“ file has the permission to execute. In …

Quicktip: Browser für Create React App definieren

Create React App ist der einfachste Weg, ein React-Projekt zu erstellen. Ein Debug-Server wird bereits mitgeliefert. Mit npm start wird dieser gestartet und die App wird im Standardbrowser des Betriebssystems geöffnet. Doch manchmal möchtest du vielleicht, dass die App in einem anderen Browser geöffnet wird. In meinem Fall nutze ich Safari zwar als Standardbrowser, zum …

Tutorial: Neues React-Projekt mit Uisum

Mit Uisum habe ich eine Library zusammengestellt, die es (ursprünglich in erster Linie mir selbst) erleichtern soll, ein neues Web-App-Projekt mit React zu erstellen. Als Basis nutzt Uisum das beliebte CSS-Framework Bootstrap und liefert eine Reihe an Komponenten, die für moderne Mobile-First-Anwendungen hilfreich sind. Beitragsbild: Pixabay, Quelle: Pexels

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

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 …

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 …

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:

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 …