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 Entwickeln nutze ich aber lieber andere Browser, wie Chrome oder Firefox, da diese meine Meinung nach, bessere Entwickler-Tools bieten.

So geht’s

Glücklicherweise kannst du den Browser selbst definieren, welcher bei npm start geöffnet werden soll.

  1. Erstelle eine neue Datei namens .env ins Root-Verzeichnis deines Projekts.
  2. Um Firefox als Browser zu setzen, schreibe folgendes in Datei:
BROWSER=Firefox

Der einzutragende Browser-Name kann sich von Plattform zu Plattform unterscheiden. Die Bezeichnung von Google Chrome beispielsweise unter macOS ist google chrome, unter Windows chrome und unter Linux google-chrome.

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

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: