Bootstrap – Twitters UI-Framework sehr beliebt
Twitter ist populär. Da wird mir niemand groß widersprechen. Doch nur wenige wissen, dass nicht nur Twitter, sondern auch sein CSS-/HTML-Framework Bootstrap sehr beliebt ist … bei Web-Entwicklern. Der Open-Source Frontend-Entwicklungswerkzeugkasten gehört zu den am meisten frequentierten Quellcode-Sammlung beim Hosting-Dienst für Software-Entwicklungsprojekte GitHub.
Das heißt, immer mehr Website-Element, wie Buttons oder Eingabefelder, werden uns in Zukunft an die von Twitter erinnern oder auf dem gleichen Framework basieren. Twitter Bootstrap enthält auf HTML5 und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-System, Navigations- und andere Gestaltungselemente für Oberflächen, sowie optional JavaScript-Erweiterungen. Und wie es sich für ein modernes Framework gehört, unterstützt es nicht nur alle gängigen Browser, sondern bietet auch Gestaltungselemente für Smartphones und Tablets an.
Wer mehr zu Bootstrap erfahren möchte, sollte den entsprechenden Artikel bei t3n lesen oder einfach bei Wikipedia vorbeischauen. Es runterladen, forken oder die Neuerungen zu Bootstrap beobachten, könnt ihr bei GitHub.
von Matthias Zellmer
css-tricks.com … Coder-Website mit Tipps, Tricks und feinen Gestaltungstools
Der Name hat sicher historische Gründe, denn auf css-tricks.com gibt es weit mehr als nur Tricks zum Thema CSS. Besonders interessant finde ich den Download-Bereich. Dort findet man feine Tools zur Gestaltung von Websites aus den Bereichen JavaScript, Layouts/Templates, PHP und natürlich CSS.
Im Bereich JavaScript gibt es zum Beispiel das oben abgebildete InfoGrid, das mir ausgesprochen gut gefällt. Es liefert nämlich einen guten Lösungsansatz für das Problem, wenn eine Info-Tabelle eigentlich zu breit für das Layout der Content-Spalte ist. Weiter gibt es etwa bei den PHP-Sachen eine schicke Darstellung von RSS-Feeds für das iPhone und die Editable CSS3 Photo Gallery liefert eine hübsche Galerie-Ansicht, die auch Menschen mit ästhetischen Ansprüchen gefallen könnte.
Alles in allem ein sehr inspirierende Site, auch außerhalb es Download-Bereichs. Denn dort finden sich interessante Artikel und Screencasts zum Themenbereich, sowie eine ganzer Haufen an so genannten Snippets; das sind kleine, hilfreiche Code-Schnipsel für Entwickler. Außerdem gibt es noch ein Coder-Forum, in das ich aber noch nicht reingeschaut habe.
von Matthias Zellmer
Frontend Coding Tips von Jon Raasch
Die Tage wurde ich auf den Beitrag “10 Javascript Performance Boosting Tips from Nicholas Zakas” auf dem Blog von Jon Raasch gestoßen. Zunächst habe ich den Beitrag nur überflogen. Doch schon dabei bin ich auf einige Dinge gestoßen, die absolut einleuchtend waren und für die ich mir vornehme, sie in Zukunft zu beachten.
Beim anschließenden Stöbern fand ich zahlreiche weitere interessante Beiträge rum um die Themen JavaScript und Frontend-Entwicklung im Allgemeinen. Jon Raasch scheint genau zu wissen, über was er da schreibt. Er schafft es, die Inhalte verständlich aufzuschreiben und seinen Beiträgen genau die richtige Länge zu geben. Man erhält die erwarteten Informationen so portioniert, dass einen der Informationsgehalt nicht erschlägt. Möchte man mehr wissen kann man den Links folgen, die eigentlich immer zur Verfügung stehen.
Befasst man sich mit dem Entwickeln von Frontends für das Web lohnt es sich (denke ich) in jedem Fall, regelmäßig bei Jon Raasch vorbei zu schauen.
von Katrin Schneider
Harmony – digitales Malen
Okay, okay, ich bin kein großer Künstler und ich werde wohl auch niemals einer werden. Doch das Bild oben, von mir gemalt, verdient trotzdem Anerkennung. Nicht für mich, sondern für die Web-Anwendung Harmony, mit der ich es erschaffen habe.
Mein Tipp: Spielt mal ein bisschen mit Harmony rum. Es macht Spaß … und: Man wird bei der Benutzung kaum darauf kommen, dass diese Web-Anwendung keine Flash-Anwendung ist … wie ein Klick auf die rechte Maustaste schnell verdeutlichen wird. Nein, Harmony ist in JavaScript geschrieben. Meint man nicht, oder?!
von Matthias Zellmer
JavaScript-Framework YUI 3.0 kann auch CSS
Mir ist die Yahoo User Interface Library, kurz YUI Library, vor allem als freies JavaScript-Framework zur Erstellung von interaktiven Web-Anwendungen ein Begriff. Doch kann es vor allem in der neusten Version 3.0 deutlich mehr, es enthält auch ein so genanntes CSS-Grid-Framework.
In einem interessanter Artikel im Dr. Web Magazin unterzieht Dieter Petereit das aktuelle YUI 3.0 CSS-Framework einem Praxistest. Prädikat: Sehr lesenswert …
von Matthias Zellmer
Bomomo zeigt, was mit HTML5 auch möglich ist
Die Stuttgarter Philipp Lenssen und Nikolai Kordulla haben mit der kleinen grafischen Web-Anwendung Bomomo auf nette Art und Weise demonstriert, was mit JavaScript, HTML5 und dessen Canvas-Element inzwischen machbar ist. Laut Wikipedia ist:
das Canvas-Element […] Bestandteil von HTML5 und gestattet ein dynamisches Rendern von Vektorgrafiken und Bitmap-Grafiken.
Achtet aber bitte darauf, dass ihr einen modernen Browser verwendet. Oder zumindest Flash installiert habt, das ist nämlich das Fallback für Web-User aus dem letzten Jahrtausend.
Weitere interessante grafische Sachen von den Beiden findet man übrigens auf ihrer Website Sketchory.
Gefunden bei Chrome Experiments – Not your mother’s JavaScript … nebenbei bemerkt: das ist auch eine Site, die ein bisschen zum Stöbern einlädt.
von Matthias Zellmer
BBC macht interne Java-Script-Bibliothek als Open-Source öffentlich
Einige mir gut bekannte Menschen, sind immer ganz begeistert, wenn es um die Einstellungsmöglichkeiten für den Nutzer auf der BBC-Website geht. Netterweise hat die BBC nun ihre interne JavaScript-Bibliothek unter dem Namen Glow als Open-Source veröffentlicht.
heise online zitiert den Glow-Produktmanager Stephen Elphson dahingehend, dass die Bibliothek sogar gut dokumentiert sein. Wollen wir mal hoffen, dass das auch so stimmt …
Zur Glow-Website…
von Matthias Zellmer
Chrome 2.0
Letzte Woche veröffentliche Google eine erste stabile 2.0-beta-Version seines Browsers Chrome. Mit Chrome 2.0 wurden eine große Zahl von Sicherheitslücken geschlossen, die zum Teil für Geschwindigkeitseinbußen oder Abstürze verantwortlich waren. Des weiteren wurden neue Features implementiert. Hier hat Google auf die Wünsche der User reagiert und beispielsweise die Möglichkeit umgesetzt, vorgeschlagene Websites aus der Liste auf der “Neuer Tab”-Seite löschen zu können. Auch neu in Chrome 2.0 ist die überarbeitete JavaScript-Engine V8, die JavaScript noch schneller handeln können soll.
Eine komplette Liste der Bugfixes, neuen Features und weiteren Neuerungen ist über den Google Chroem Blog erreichbar.
via GoogleWatchBlog und theNEXTweb
von Katrin Schneider
Browser-Performance: JavaScript vs. HTML
Gestern bin ich auf AjaxLine.com auf einen interessanten Artikel gestoßen, der sich mit der Performance von Browsern bezüglich JavaScript befasst. Wie der Titel “The Browsers Performance in Dependence of HTML Coding” schon sagt, ist dieser Artikel kein weiterer reiner Vergleich der JavaScript-Engines verschiedener Browser. Vielmehr beschäftigt er sich damit, wie performant Browser JavaScript in Abhängigkeit vom zu rendernden HTML-Code ausführen.
Der Autor, Sergey Chikuyonok (Blog), hat verschiedene HTML-Konstrukte in folgenden Browsern getestet: IE6, IE7, IE8b2, FF2, FF3, FF3.1a, Opera 9.62, Chrome 0.3, Safari 3.1.2, FF3 (Mac), FF3.1a (Mac), Safari 3.1.2 (Mac), Opera 9.6.1 (Mac), WebKit r37790 (Mac).
Es wurde beispielsweise überprüft, ob absolute oder relative Positionierung von Elementen performanter ist, oder wie sich die Anzahl der DOM-Elemente auf die Browser-Performance auswirkt. Die Ergebnisse der einzelnen Test sind jeweils grafisch aufbereitet dargestellt. Aus besonders eindeutigen Ergebnissen formuliert Chikuyonok außerdem klare Handlungsanweisungen.
Am Ende des Artikels befindet sich ein Resümee, in dem folgende Maßnahmen zur Verbesserung der Browser-Performance vorgeschlagen werden:
- interaktive Elemente sollten absolut positioniert werden
- interaktive Elemente sollten bereits von Anfang an bedacht und eingeplant und nicht nachträglich eingefügt werden
- zu viele Elemente auf einer Seite können sich negativ auf die Performance auswirken
- gleiches gilt für zu tiefes Verschachteln von Elementen
- das Verwenden von <img />-Elementen ist performanter als das Einsetzen des Background-Image-Attributs
- Bilder sollten nicht vom Browser skaliert werden
Die getesteten HTML-Konstrukte sind typisch für Szenarien, in denen DOM-Manipulation über JavaScript stattfindet. Doch das Befolgen einiger der vorgeschlagenen Maßnahmen – wie beispielsweise der Verzicht auf Skalierung von Bildern über den Browser – ist sicher auch ratsam, wenn kein JavaScript zum Einsatz kommt.
via spic
von Katrin Schneider
Highslide JS – Lightbox-Alternativen
Highslide JS ist eine Open Source Galerie-Bibliothek auf Basis von JavaScript. Sie bietet mehrere schicke Lightbox-Alternativen zu den ungeliebten Pop-ups einspunktnulliger Tage.
Sehr schön: Highslide JS bringt seinen eigenen Fallback-Mechanismus schon mit. Das heißt, ist der Browser mit dem die Bilder betrachtet werden sollen, nicht JavaScript-fähig oder wurde es deaktiviert, legen sich die Großansichten nicht über die Galerie-Ansicht, sondern werden einfach als Grafik angezeigt. Somit sind die Lightboxen aus der Highslide-Bibliothek sogar in barrierefreien Web-Angeboten einsetzbar.
Via Gratisscript
von Matthias Zellmer
