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.
Tag: JavaScript
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; }… Continue reading JavaScript “hasClass()”, “addClass()”, “removeClass()” helper functions
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,… Continue reading Try to avoid loops in JavaScript for better performance
Die komfortable Art, JavaScript- und CSS-Dateien zu kombinieren — mit Miniphpy
In den Artikeln Traffic verringern: JavaScript-Dateien kombinieren und Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien bin ich bereits darauf eingegangen, dass es Sinn macht, bei Web-Projekten CSS- und JavaScript-Dateien zusammenzufassen, um mehrfaches Abfragen einzelner Dateien zu verhindern. Verwendet man CSS Pre-Prozessoren wie LESS oder Sass, ist es ziemlich einfach, seine Stylesheets zu kombinieren. Seit einiger Zeit… Continue reading Die komfortable Art, JavaScript- und CSS-Dateien zu kombinieren — mit Miniphpy
Traffic verringern: JavaScript-Dateien kombinieren
Für das Kombinieren und Minimieren von JavaScript-Dateien, habe ich UglifyJS2 auf GitHub gefunden. Das ist ein Node.js-Modul. Um es zu verwenden, muss also Node.js installiert sein. Um UglifyJS2 zu installieren, tippe Folgendes in ein Konsolen-Programm ein (ich benutze gerne PowerShell): npm install uglify-js -g Navigiere anschließend mit cd zu deinem Projekt-Ordner. In meinem Beispiel sieht… Continue reading Traffic verringern: JavaScript-Dateien kombinieren
html_bones 2.1 ist online!
html_bones ist ein kleines Werkzeug für Web-Entwickler, die schnell mit einem neuen Web-Projekt starten wollen. Aus eine Reihe an häufig genutzten HTML-Elementen, können die benötigten Komponenten aus- und abgewählt werden. So erhältst du schnell ein HTML-Grundaufbau, welchen du auch für später speichern kannst. Es ist keine Anmeldung oder Registrierung notwendig. Jetzt starten »