Guide: Use Git for deployment

Prepare server

  1. Use SSH to get to webspace: ssh user@webspace.host
  2. Navigate to correct directory: cd myapp/production
  3. Create Git folder: mkdir .git
  4. Navigate to the folder: cd .git
  5. Init bare repository: git init --bare
  6. Create file called „post-receive“ in .git/hooks with this content:
#!/bin/sh

# The production directory
TARGET="/kunden/homepages/xx/xxx/htdocs/myapp/production/app"

# The Git repo
REPO="/kunden/homepages/xx/xxx/htdocs/myapp/production/.git"
# Deploy the content to the directory
git --work-tree=$TARGET --git-dir=$REPO checkout -f

Update: It’s important that your „post-receive“ file has the permission to execute. In my case, I gave the file permission 705.

Prepare local development setup

  1. Project folder has to be a Git repository. If it isn’t already, run: git init
  2. Add remote: git remote add deploy ssh://user@webspace.host/kunden/homepages/xx/xxx/htdocs/myapp/production/.git

Upload changes

  1. Commit local changes.
  2. Run this to upload them: git push deploy HEAD

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

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: