Node.js: Check if you are in debug or production mode

Sometimes you have to use other values in a variable when your application is in production as if when you are debugging it.
For example you have to use another web service URL.

Here is how can do it:

var webApiUrl;

if (process.env.NODE_ENV === "production") {
	// use in production
	webApiUrl = "http://myapp.online/awesome-app/api";
}
else {
	// use on debugging
	webApiUrl = "/api";
}

If you do it like me and use Webpack, you can start the debug mode with webpack -d and the production mode with webpack -p.

JS: Hide an element when clicking on somewhere else

Hint: I used the functions removeClass() and addClass() to make things easier. You can find them on

See the Pen Hide an element when clicking on somewhere else by Lars Gerrit Kliesing LGK (@lgkonline) on CodePen.

JavaScript „hasClass()“, „addClass()“, „removeClass()“ helper functions

If you’re like me and come from jQuery to pure JavaScript, these helper functions might be very helpful for you:

function hasClass(el, className) {
    if (el.classList)
        return el.classList.contains(className);
    else
        return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className) {
    if (el.classList)
        el.classList.add(className);
    else if (!hasClass(el, className)) 
        el.className += " " + className;
}

function removeClass(el, className) {
    if (el.classList)
        el.classList.remove(className);
    else if (hasClass(el, className))
        el.className=el.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), ' ');
}

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.