CSS Einfache Bilder Gallery mit unterschiedlich hohen Bildern

Wer als Dev schon mal mit Bildern zu tun hatte weiß es. Bilder sind in den seltensten Fällen immer gleich groß. Aber es gibt ja auch fancy Bildergallerien die sich genau diese Diversität zu nutze machen. Und auch genau deswegen so cool aussehen. Das lässt sich ziemlich leicht mit purem CSS lösen.
https://codepen.io/seotheater/pen/YzYrBqp

CSS not() – What?

Stellt Euch vor ihr möchtet eine CSS Property einem ganzen container zuweisen außer einem einzigen element nicht. Ihr könnt es jetzt schön manuel machen oder dem parent Element die Property zweusen aber im Selector die Pseudoklasse :not(‘selector’) noch verwenden. Somit erben alle Kinder bis auf das eine welches man aus seinem “Erbe” 😉 ausgetragen hat. Das schwarze Schaf der Familie halt.

.container {
  border: 1px solid #333;
}
.container>*:not(img) {
  opacity: 0.2;
}

<div class="container">
  <h2>About</h2>

  <p>Lorem ipsum ...</p>

  <img class="about-img" src="https://via.placeholder.com/500" alt="Home" />
</div>

Wer Padding sagt sollte box-sizing in Erwägung ziehen

Schnell ist innerhalb einer Box ein padding links und ein padding rechts hinzugefügt. Was einigen abernicht bewusst ist, dass die padding die width des Containers ebenfalls beinflusst. Aus diesem Grund sollte man, wenn man das nicht wünscht ein box-sizing: border-box; dem Element mit dem Padding hinzufügen.

Bei parent habe ich es nicht hinzugefügt und ihr seht, dass es jetzt hinten rangehangen wurde. Sobald ihr aber box-sizing hinzugefügt habt ist es richtig ausgerichtet. Sieht ja sonst aus wie ein alter Fernseher.

<div class="parent">
  <div class="box">123</div>
</div>

.parent {
   background: gray;
   padding: 20px;  
   width:100vh;
   margin: auto;  
}
.box {
   width: 330px;
   height: 212px;
   margin-top: 1px;
   margin-left: 22.5px;
   background-color: orange;
   border-radius:10px;
   padding: 10px 8px;
   box-sizing: border-box;
}

Symlinks – Was sind symbolische Links

Bei einem aktuellen Projekt bin ich auf ein außergewöhnliches deployment gestoßen. Außergewöhnlich aber nicht negativ wertend gemeint. Halt nicht “state of the art”. Stack: Amazon EC2 Server mit einem NGINX Webserver. Der Ablauf ist wie folgt. Der Order html unter dem Pfad /usr/share/nginx/html war ein Symlink auf ein Verzeichnis im selben Pfad. Nennen wir den Ordner usr/share/nginx/kundenwebsite-2022-01-11 .

Ich nahm an das der frühere Entwickler von seiner lokalen Machine die Dateien via scp hochgespielt hatte und dann den Symlink angepasst hat. Kann man machen aber ich finde das birgt eine Menge an Risikopotenzial. Außerdem kommt man eher selten in die Verlegenheit Symlinks selber zu setzen. Heißt man muss sich immer wieder einlesen. Aus diesem Grund schreibe ich diesen Artikel. Es soll ein kleines How To Symlink sein.

Ein Symlink wird gesetzt mit: ln -s /absoluter/pfad/zum/ziel /absoluter/pfad/der/verknüpfung

Im Kontext zum obigen Beispiel beduetet es: ln -s usr/share/nginx/kundenwebsite-2022-01-11 usr/share/nginx/html

Erklärung: Wer jetzt auf usr/share/nginx/ ein ls -la macht wird folgende Ausgabe erhalten: html -> kundenwebsite-2022-01-11

drwxr-xr-x  1 nginx  nginx    50 26. Jan 11:22 html -> kundenwebsite-2022-01-11
drwxr-xr-x  5 nginx nginx 4096 31. Aug 2021  kundenwebsite-2022-01-11

Heißt das der Symlink erfolgreich gesetzt ist und html eine Referenz auf den kundenwebsite-2022-01-11 Ordner enthält.

Wenn man nun ein Feature eingebaut hat und es im März auf den sever schiebt, passt man den Symlink wie folgt an:

ln -sfn $PWD/kundenwebsite-2022-03-01 $PWD/html

Somit wird die alte Referenez überschrieben.

Wenn man dann die Schnauze voll hat von so einem Deployment löscht man den Symlink ganz easy mit: rm $PWD/html .

Bemerkung: $PWD gibt der den aktuellen Standpunkt deines aufenhalts im Verzeichnissystem wieder. Also achte beim ausführen mit der Systemvariable $PWD wo du gerade bist. Du musst in unserem beispiel hier sein: ln -sfn $PWD/src2/ $PWD/target/Daten.

Hoffe es hat geholfen das Wissen über Symlinks etwas aufzufrischen?

JS flat()

Es kommt schon mal vor das man geschachtelte arrays bekommt.
Zum Beispiel: Man möchte aus einem geschachteltem Array alle Werte in einem Array sammeln. Mit der array Funktion flat() ist das kein Problem.

const arr1 = [1, 2, [3, 4]];

arr1.flat();
// [1, 2, 3, 4]

Auch mehrstuffig verschachtelte Arrays kann man geradeziehen (flatten). Indem man der flat Funktion die Anzahl der verschachtelungen die aufgelöst werden sollen, mitgibt. Da man ansonsten in seinem result array die oberen verschachtelung mitgelistet bekommt.

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

NVM – Noder Version Manager

Als Fullstack oder Frontendentwickler benötigt man heute eigentlich immer
NodeJS. Zumindest bei einem modernen Stack. Um zum Beispiel JS, CSS Dateien zu kompilieren oder in verschiedene Packages zu bündeln um es dann in das Projekt zu laden. Oder seine lokale Entwicklungsumgebung mit nützlichen Tools zu bereichern wie zum Beispiel Linter, Typescript.

Wenn man mehrer verschiedene Projekte hat, dann kann es sehr schnell vorkommen das man diese unagenehmen roten Error Meldungen von NPM erhält wenn man zum Beispiel ein npm script (npm run dev, nem run watch, etc.) startet.

Meiner Erfahrung nach sollte man immer zuerst die Nodeversion checken. Den Node verändert sich regelmäßig. Man kann sich natürlich Docker hier zu nutze
machen. Also einen node Docker Container der genau die Noderversion bereithält die man für das Projekt benötigt. Man kann aber auch lokal node installieren.

Aber das würde ich nicht nativ machen sondern ein nützliches Tool nutzen. Ich
spreche von NVM. NVM steht wohl für NodeVersionManager. Hier kann man leicht
zwischen den Node Versionen wechseln. Man installiert auch sehr leicht mit nvm eine neue Version.

Meiner Meinung nach ein wirklich gutes und nützliches Tool für alle die
Frontendarbeiten erledigen müssen.

Q: https://github.com/nvm-sh/nvm#manual-install

CSS position Pattern

Take a look to this pattern and you will understand how it works. Assign your container position: relative;. There child assign position:absolute;. The absolute elements you can positioning by using top, bottom, left, right.

body {
  background: gray;
} 

.container {  
  position: relative;
  width: 50%;
  height: 100vh;
  border: 3px solid #73AD21;
  margin: 0px auto;
  text-align:center;  
}

.container div {
  padding: 10px;
}

.container div:nth-child(1) {
  background: yellow;
  position: absolute;
  width: 200px;
  height: 200px;  
  top: 50%;
  left: 20%;
}

.container div:nth-child(2) {
  background: green;
  position: absolute;
  width: 100px;
  height: 100px;  
  top: 20%;
  right: 20%;
}

.container div:nth-child(3) {
  background: red;
  position: absolute;
  width: 50px;
  height: 50px;  
  top: 10px;
  right: 10px;  
}

.container div:nth-child(4) {
  background: yellowgreen;
  position: absolute;
  width: 300px;
  height: 30px;  
  top: 10px;
  left: -20px;  
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>FLAG</div>
</div>

DEMO: https://codepen.io/mike-lowrey/pen/BamodMQ

SeoTheater Autoren