kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

JavaScript


WordPress: interne jQuery-Version über Google CDN im Footer laden

Wer jQuery in WordPress verwenden will, integriert das Script häufig manuell im Header oder Footer der Seite. Das Script wird dazu heruntergeladen, in den Website-Ordner kopiert und von dort aus verknüpft. Alternativ wird es über ein Content Delivery Network (CDN) von Google & Co. geladen.
WordPress verfügt jedoch auch über eine eigene Version von jQuery, die genutzt werden kann. Diese Version wird auch von Plugins verwendet. Wenn ihr jQuery also manuell hinzufügt, kann es passieren, dass jQuery mehrfach geladen wird. Das dauert länger und kann zu erheblichen Konflikten mit Plugins führen.

Beitrag zu Ende lesen

Die neue Quelle für Webentwickler – WebPlatform.org

Mit der Website webplatform.org wurde eine neue Anlaufstelle für Webworker geschafften. Angefangen bei den Klassikern HTML5 und CSS3 über thematische Schwerpunkte wie Animationen, Media Queries und Medienformate deckt das Projekt diverse Bereiche der modernen Webentwicklung ab. Die Community steht dabei ganz klar im Mittelpunkt. Die Inhalte werden in Form eines Blogs, diverser Foren, Tutorials und Frage/Antwort-Seiten vermittelt und von der Community ergänzt. Unterstützt wird das Projekt von den ganz Großen der Szene: Adobe, Facebook, Google, HP, Microsoft, Nokia, Mozilla, Opera und das W3C sind mit von der Partie.

Beitrag zu Ende lesen

CSS-Files automatisch nachladen: CSS refresh

Mein Workflow bei der Umsetzung einer Website sieht normalerweise etwa so aus: Sobald ich das grobe HTML-Markup geschrieben habe, lege ich die CSS-Datei an und füge Style-Angaben hinzu. Dabei wechsle ich permanent zwischen dem Code-Editor, der Debug-Konsole des Browsers und dem Browser selbst. Ich schreibe einige Zeilen Code, speichere das Stylesheet, und überprüfe das Ergebnis im Browser. Dazu muss ich jedes Mal den Browser neu laden um die Änderungen auch sehen zu können. Und weil ich ungern Zeit verschwende, nutze ich ein Bookmarklet um die Seite immer automatisch aktuell zu halten. Das Tool ist zwar nicht gerade neu, aber dennoch ungemein praktisch.

Beitrag zu Ende lesen

Höhe von Facebook iframe-Tabs anpassen

Aus aktuellem Anlass (und da ich bereits diverse Mails erhalten habe) ein kurzer Hinweis. Um den Scrollbalken in langen Facebook-Tabs zu deaktivieren und die Höhe des Tabs an den Inhalt anzupassen, wird ein kleines JavaScript benötigt. Das bisherige Snippet funktioniert seit einigen Tagen nicht mehr! Ich habe den entsprechenden Beitrag hier im Blog aktualisiert. Ersetzt einfach das alte Snippet mit dem neuen Code und tragt eure App-ID und die Höhe des Inhalts ein.

Scrollbalken in Facebook-iFrame-Tabs deaktivieren →

Syntax Highlighting mit Prism

Prism Syntax Highlighter

Plugins und Scripte zum farbigen Strukturieren von Quellcode gibt es einige. Mit Prism ist ein weiteres Script erschienen, das im Vergleich zu den anderen mir bekannten Methoden einige Vorteile bietet. Ihr müsst beispielsweise keinen für das Plugin angepassten Quellcode verwenden, sondern werdet vielmehr gezwungen semantisch korrektes HTML5-Markup zu schreiben. Das Script lässt sich darüber hinaus kinderleicht anpassen, kommt in drei Designs daher und ist gerade einmal 1.5KB groß.

Beitrag zu Ende lesen

WordPress: Gesuchte Wörter in den Suchergebnissen farblich hervorherben

Die Suchfunktion von WordPress wird häufig kritisiert und verfügt nicht über allzu viele Funktionen. Mit einigen Tricks lässt sich die Suche um fehlende Features erweitern und benutzerfreundlicher gestalten. So könnt ihr beispielweise über die functions.php gezielt Seiten in den Suchergebnissen verstecken.
Mit folgendem jQuery-Snippet hebt ihr die gesuchten Begriffe in der Ergebnisseite farblich hervor. Das erleichtert Besuchern die Orientierung und sieht z.B. so aus.

Beitrag zu Ende lesen

Responsive Images mit ‹figure› oder ‹picture›-Tag: jQuery Picture

Im Responsive Design ist es zwar möglich identische Inhalte unterschiedlich darzustellen, es ist jedoch nicht ohne weiteres möglich Inhalte auszutauschen. Daher werden auf kleinen Bildschirmen meist viel zu große Bilder geladen die lediglich über CSS auf die Abmessung des Displays skaliert sind.
Im Moment gibt es für dieses Problem keine standardisierte Lösung, nur diverse Scripte die den Bildaustausch übernehmen. jQuery Picture ist ein solches Script. Es lässt sich einfach in die Website integrieren, ist gerade einmal 2KB groß und nutzt entweder das valide <figure>- oder das experimentelle <picture>-Element.

Beitrag zu Ende lesen