Alphanumeric sorting of an array with objects according to the value of an object

Especially in the frontend it happens quite often that you want to sort an array, an array with objects according to a certain pattern. Javascript has very performant and nice functions. But you can use these functions not only in the frontend. If you write your backend with NodeJS you will also appreciate the array functions of Javascript.

Goal: To sort an array of objects alphanumerically. Once ASC and once DESC. In this case by name. Imagine you have the following array:

const d = [
  {
    name: {
      common: "Z"
    }
  },
  {
    name: {
      common: "A"
    }
  },
  {
    name: {
      common: "B"
    }
  }  
];

We will sort with the sort() function. For alphanumeric sorting we also use the localCompare() function. To reverse the sorting we can use the reverse() function.

d.sort((a,b) => a.name.common.localeCompare(b.name.common))
console.log("asc",d);
console.log("asc",d.reverse());

And that was it for today 🙂

Was ist der Unterschied zwischen Unit-Tests und Function-Tests

Um es kurz zu fassen: Unit Tests gibt dem Entwickler ein Feedback ob sein bzw. der Code richtig
funktioniert. Dagegen machen Funktionstest eine Aussagen darüber, ob der Code
auch die richtige Sache macht.

Unit Tests werden aus der Sicht des Programmierers geschrieben. Sie sollen
sicherstellen, dass eine bestimmte Methode (oder eine Einheit) einer Klasse eine
Reihe von spezifischen Aufgaben erfüllt.

Funktionstests werden aus der Sicht des Benutzers geschrieben. Sie stellen
sicher, dass das System so funktioniert, wie die Benutzer es erwarten.

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]

SeoTheater Autoren