If / else statement inside of React Component’s Render method

Sometimes (well, actually pretty often) you have to use conditional statements inside of React Component’s Render methods.

You could do it like this:

import React from "react";

class MyComponent extends React.Component {
    render() {
        return (
            <div>
                {"LGK" == "awesome" ?
                    <h1>LGK is awesome!</h1>
                : 
                    <h1>LGK is not awesome :C</h1>
                }
            </div>
        );
    }
}

This works without any problem. But you always have to set the else part. But in many situations you only need the „if part“.
In this case, this way is much nicer:

import React from "react";

class MyComponent extends React.Component {
    render() {
        return (
            <div>
                {"LGK" == "awesome" &&
                    <h1>LGK is awesome!</h1>
                }
            </div>
        );
    }
}

Regular expression collection

On this post I want to collect different regular expressions, that I used in my projects so I can find them very quick, when I need them in the future.
For more useful regular expressions you should check out this page:

Containing a string but not multiple others

See the Pen Regex example: Containing String but not multiple others by Lars Gerrit Kliesing LGK (@lgkonline) on CodePen.

Try to avoid loops in JavaScript for better performance

Use objects instead of arrays

A benefit of objects is that you can directly call its children elements (properties) by name. While arrays only have index numbers.

Here is a simple example:

const exampleDataArray = [
	{
		id: 8462943,
		name: "Google",
		url: "http://google.com"
	},
	{
		id: 9847323,
		name: "Amazon",
		url: "http://amazon.com"
	},
	{
		id: 938442934,
		name: "Twitter",
		url: "http://twitter.com"
	}
];

function getDataById(id) {
	for (let i = 0; i < exampleDataArray.length; i++) {
		if (exampleDataArray[i].id === id) {
			return exampleDataArray[i];
		}
	}
}

So in this example when I want to get an item by its ID or any other property I have to go through each other item first. Depending on how many items you have and how often you need to get one item, it can take lot of time.

If you use an object instead of an array it could look like this:

const exampleDataObject = {
	8462943: {
		name: "Google",
		url: "http://google.com"
	},
	9847323: {
		name: "Amazon",
		url: "http://amazon.com"
	},
	938442934: {
		name: "Twitter",
		url: "http://twitter.com"
	}
};

function getDataById(id) {
	return exampleDataObject[id];
}

This way we can directly point to the item we want and don't have to use a loop.

Viele Schriftarten enthalten alle Icons die du brauchst – also warum nutzt du sie nicht?

♥ ☶ ᚓ

Emoticons sind aus sozialen Netzwerken längst nicht mehr wegzudenken. Sie werden vor allem dafür genutzt, Gefühle auszudrücken, etwas was durch Wörter häufig schwer auszudrücken ist. Oder sie untermahlen Geschriebenes, u.a. auch um Missverständnisse des Textes zu umgehen.

Aber nicht nur beim Austauschen von Nachrichten sind Icons hilfreich. Für die User Experience sind Symbole ein wichtiger Bestandteil. Ein ☰ öffnet ein Menü, ein 🔎 führt eine Suche aus und mit einem ♥ favorisiere ich etwas.

Oh, hast du gesehen, wie ich Icons sogar hier im Artikel verwendet habe? Und das ging ganz einfach. Und damit kommen wir zum eigentlichen Thema dieses Artikels. 〠

Ich benutzte dafür keine Icon-Library wie FontAwesome. Für das 〠 zum Beispiel habe ich nur folgendes als HTML geschrieben: &#12320;
Damit habe ich einfach nur den Unicode für dieses Symbol benutzt. Denn eine Menge Icons haben — genauso wie Buchstaben und Ziffern — einen eigenen Unicode.
Vorraussetzung dafür, dass das Symbol auch angezeigt wird, ist dass die verwendete Schriftart dieses auch enthält.

Finde Icons mit Graphemica

Graphemica sucht Icons im Unicode basierend auf Stichwörter.

http://graphemica.com/

In der Suchleiste gibst du einfach ein was du brauchst. Auf der Detail-Seite zu einem Icon findest du dann die nötigen HTML-Codes zum Einbinden auf deine Seite.

Das „Thin Design“-Phänomen

„Dünn“ als Schönheitsideal existiert nicht nur bei bei Menschen, sondern seit geraumer Zeit auch in der Typografie.
Die Variante „Light“ einer Schriftart ist mittlerweile Standard.

Der Trend geht in diese Richtung, weil Bildschirme immer hochauflösender werden. In Zeiten von 4K und Retina Displays haben UX-Designer deutlich mehr Möglichkeiten Dinge auszuprobieren, die zuvor noch undenkbar waren.

„Thin Design“ scheint ein Teil davon zu sein. Und es beschränkt sich nicht nur auf die Typografie. Wer in letzter Zeit die Design-Entwicklungen von Microsoft (Windows 10) und Apple (OS X, iOS) verfolgt hat, wird feststellen, dass auch Symbole vom Schlankheitswahn betroffen sind.

Hier mal ein Beispiel, das ich auf der Apple-Website gefunden habe:
Screenshot

Wo kann ich „Thin Design“ einsetzen – wo nicht?

Als UX-Elemente halte ich „Thin Design“ für eine angebrachte Sache. Sowohl für Typografie, Symbole, aber auch für andere Controls, wie Buttons, Eingabefelder, Trennlinien.
Linien sollten aber möglichst vektorbasiert erzeugt werden und nicht beispielsweise als Bitmap, um eine Skalierbarkeit zu ermöglichen. Es besteht nämlich die Gefahr, dass die Linien dadurch verschwinden könnten. Bei Webdesign könnten Thin-Elemente beispielsweise per CSS (Border) oder SVG erzeugt werden.

Unangebracht halte ich Thin Design allerdings beim Logo-Design. Ein Logo muss universell einsetzbar sein und eine starke und selbstbewusste Darstellung haben. Besteht eine Bildmarke nur aus dünnen Linien, kann es schnell untergehen, wenn nicht sogar verschwinden. In Fließtexten bieten sich „leichte“ Schriftarten auch nicht an, weil dadurch die Lesbarkeit beeinträchtigt werden kann.

Beim Redesign der Nachrichten-Feeds auf Startmon.com habe ich mich auch mal am „Thin Design“ orientiert.
Du kannst es betrachten, wenn du auf https://startmon.com/ gehst und dann bei „Nachrichten-Feeds“ unten links auf den Maximieren-Button klickst.

Screenshot

Tumblr Bilder schneller im Vollbild betrachten

Tumblr-Bilder schneller in ganzer Pracht betrachten

Tumblr-Bilder schneller in ganzer Pracht betrachten

Beim Stöbern durch Tumblr-Blogs spürst du vielleicht häufig das Verlangen, ein Bild in der vollen Dimension anzusehen.
Denn in Blog-Posts sind die Bilder meistens komprimiert und um auf das volle Bild zu kommen kann schon mal zu einem Krampf führen. ^^

Deswegen habe ich für dieses Problem einen kleinen Service entwickelt. Dort gibst du die URL des Tumblr-Posts ein und du wirst direkt auf die Vollansicht weitergeleitet.

lgk.io/show-tumblr-image