Yahoo! User Interface Blog (YUIBlog)

CSS Quick Tip: Wie man ein "float drop" im IE6 verhindern

Auch wenn dieses Verhalten wird oft als "genannt Float Drop "oder ein" Drop-Schwimmer ", die Spalte, muss nicht ein Schwimmer sein, fällt ... es muss nur breiter sein als der Raum für sie bereitgestellt. Beachten Sie, dass dies durch spec ist und es ist ein gemeinsames Verhalten in allen Browsern, wenn eine Spalte ist "zu breit", dann wird es fallen zu lassen.

Was macht IE 6 stehen, ist, dass dieser Browser nicht vollständig unterstützt die width Eigentum (noch height für diese Angelegenheit). Daher lässt es Container wachsen, ihre Inhalte unterzubringen. Es ist dieses Wachstum, das die Tropfen erzeugt, da die Box nicht in den vorgesehenen Raum passen.

In der Regel sind die Täter Elemente, die nicht einwickeln kann (z. B. Bilder, URLs, etc.), aber font Styling (z. B. IE und kursiv ) verantwortlich sein kann auch.

Zum Beispiel, um die rechte Spalte Drop-on machen YUIBlog im IE 6, ist alles, was ich tun musste, um Stil eines der Bilder in die richtige Bahn mit einer Breite größer als 210 Pixel. Das Bild zwingt IE 6 um die Breite der rechten Spalte der dann nicht mehr passen neben dem rechten Spalte zu erhöhen.

Die üblichen Korrekturen:

word-wrap: break-word;

Streicher Wrap durch Brechen am rechten Rand des Kastens.

wbr mit wbr:after {content:"\00200B"} für Opera

Der wbr -Element stellt einen Zeilenumbruch Chance. Einsetzen wbr drin lange Strings erlaubt dem Browser einen Zeilenumbruch hinzu, wenn nötig.

overflow-x:hidden;

Jeder Inhalt breiter als der Behälter abgeschnitten am rechten Rand der genannten Schachtel.

Beachten Sie, dass die beiden ersten Lösungen nur auf Strings arbeiten und wird nicht verhindern, Bilder, etc. aus den Ausbau der Box.

Bei bekannten Fixes scheitern kurz

Vor einigen Wochen wurde ich gebeten, einen "float drop" auf einer der Seiten Yahoo! Finanzen zu beheben. In modernen Browsern wurde ein langer String ragte aus dem rechten Schiene (Screenshot), aber im IE 6, dass dieselbe Zeichenfolge, die richtige Spalte fallen below the fold (Screenshot). Leider kam es, dass Inhalte von einem Anbieter, sodass die Bearbeitung der Aufschlag war keine Option.

Aufgrund der Beschaffenheit der Saite, die eine durch Komma getrennte Liste von Symbolen war, waren die Updates oben nicht zufriedenstellend. Brechen diese Liste in einem beliebigen Ort war besser als Schneiden Sie ihn aus, aber immer noch keine praktikable Lösung ...

Erstellen IE 6 wie die großen Jungs verhalten

Der Trick, um den IE 6 zu verhalten wie alle modernen Browsern da draußen ist, um die Box-Stil mit einem negativen rechten Rand (plus position:relative ).

Live Demo

Ohne die fix

Screenshot für diejenigen, die nicht sehen, diese Seite im IE 6.

Lorem ipsum dolor sit amet, consectetur bibendum sollicitudin. Etiam mollis facilisis Viverra. Curabitur luctus, nibh AC rhoncus ultrices, turpis Mauris Mattis dui, quis pharetra odio Orci vitae risus. Nunc ultricies gravida facilisis.

Curabitur luctus, quis Orci vitae risus.

Mit dem Update

Lorem ipsum dolor sit amet, consectetur bibendum sollicitudin. Etiam mollis facilisis Viverra. Curabitur luctus, nibh AC rhoncus ultrices, turpis Mauris Mattis dui, quis pharetra odio Orci vitae risus. Nunc ultricies gravida facilisis.

Curabitur luctus, quis Orci vitae risus.

.fixMe { margin-right:-100px; position:relative; }
.fixMe { margin-right:-100px; position:relative; } 

Die negative Marge jeden Wert, solange dieser Wert größer als das Delta zwischen der zugewiesenen Breite und der tatsächlichen Breite des expandierten Feld ist. Es ist diese Erklärung, die das Dropdown Schwimmer verhindert. Der Zweck der position:relative ist es, IE zeigen den Inhalt außerhalb der Grenzen des übergeordneten Containers.

Weil ich auf Stilelemente der gleiche auf der ganzen Linie gefallen, ich normalerweise nicht Sandkasten diese Regel.

Dinge zu beachten,

Dieser Hack hält die Kolonne an Ort und Stelle, aber es verhindert nicht, dass die Container aus immer breiter. Das heißt, Sie können nicht Stil des Elements mit einem Hintergrund oder einer Grenze, weil sie außerhalb der Hülle gemalt werden würde. Hier ist ein Screenshot von dem, was Hintergrund und den Rand sehen aus wie wenn sie in Kombination mit dieser Technik in IE 6 zur Anwendung:

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

jQuery und YUI 3: A Tale of Two JavaScript-Bibliotheken

Kürzlich hatte ich die Gelegenheit, meine erste JavaScript-Front-End-Anwendung zu erstellen. Was folgt ist eine kurze Geschichte der Entdeckung und Entwicklung, die etwa beim Versuch, Tools, die nicht für den Job bei der Hand geeignet sind, verwenden kommt. Es ist ein Bericht über das Lernen durch die Entwicklung die gleiche Front-End-Anwendung mit zwei sehr unterschiedlichen Bibliotheken, jQuery und YUI 3 erworben. Details zu dem Client und dem Projekt wurden absichtlich weggelassen.

Überblick

Das Projekt umfasste die Umgestaltung von mehreren unterschiedlichen Flash-Tools in einer einzigen interaktiven Anwendung auf offenen Standards für eine große Content-Publisher basiert. Von hoher Bedeutung, musste die Anwendung hoch mit einer kleinen anfänglichen Fußabdruck durch die große Zahl der Page Impressions täglich erhält der Kunde optimiert werden. Mehrere Phasen beteiligt waren, mit dem ersten in einer anfänglichen proof of concept.

Das Konzept beinhaltete die Entwicklung einer Ansicht von dem, was würde das ausgefüllte Antragsformular sein. Es bestand aus:

• Eine erste Seed-Datei (<1 KB) verantwortlich für das dynamische Laden von beliebigen Frameworks (zB jQuery oder YUI 3) und der erstmaligen Anwendung Datei.
• Die Entwicklung und Integration von jQuery-Plugins zur Unterstützung von Formular-Element Styling und Validierung und dynamischen Grafik-Visualisierungen.
• Die Erzeugung und der Bevölkerung von UI, basierend auf Benutzereingaben, Konfigurationsstandardeinstellungen und Speicherort der Anwendung innerhalb der Verlags-Website.
• Die Berechnung und Darstellung von Informationen bezogen auf die Eingabe des Benutzers.

Im Interesse einer vollständigen Offenlegung, hatte meine eigene Erfahrung bis zu diesem Punkt bei der Entwicklung von kleinen, eigenständigen Lösungen, die Art, von denen Sie in der Regel als Plugins könnte beschreiben gewesen. Dazu gehörten dynamische UI-Komponenten wie Bild Karussells, interaktive Karten und Twitter / Flickr-Widgets. Zum Zeitpunkt der ersten Dilettantismus mit JavaScript, jQuery populär war, einfach zu erlernen und mir erlaubt, schnell erlernbar sind für die Projekte, die ich zum Arbeiten benötigt wurde. Aber all das waren eigenständige Einheiten und hatte keine Notwendigkeit, mit anderen Code oder als Teil einer größeren Anwendung interagieren.

First Attempt

Am Abschluss der ersten Phase des Projekts, wurde es schmerzhaft offensichtlich, dass ich mit einer ganz anderen Tier zu tun als das, was ich gewohnt war. Gestützt hatte wenig Erfahrung in der Organisation Code, meinen Code schnell zu unorganisiert, ineffizient und repetitiv. Als ein Ergebnis war der erste Teil dessen, was eine viel größere Anwendung werden nur langsam geladen. In der Tat dauerte es 8 Sekunden, diesen einzigen Proof of Concept zu generieren. Eine große Änderung war notwendig, und während ich mit angesehen hatte, eine kleine Bibliothek wie Dean Edwards Base- oder John Resigs einfache JavaScript-Vererbung Muster an Klasse-basierte Vererbung zu jQuery hinzuzufügen, beschloss ich, einen Schritt weiter gehen.

Was ich wollte, war eine komplette, ausgereifte Rahmen, innerhalb dessen auf meine erste OO-Anwendung zu entwickeln. Etwas, das effektiv führen würde mir durch den Vorgang. Bei der Überprüfung der verfügbaren Bibliotheken habe ich beschlossen, YUI 3 aus den folgenden Gründen anzunehmen:

• Integrierte, Erbschafts-basierte Anwendung, Entwicklung und Support einschließlich Attribut-Klasse-Management.
• Langfristige Lösung:
  • Unterstützung für Standards und Zugänglichkeit.
  • Gefördert von einer großen bekannten Organisation, Yahoo!
  • Verbunden mit angesehenen Namen wie Douglas Crockford , Nicholas Zakas und Stoyan Stefanov .
• Performance-Optimierung:
  • Initial Seed-Datei von nur 7KB.
  • Lazy-geladenen Module auf Anfrage.
  • EUR Lieferung.
• Abwechslungsreiche und umfassende Dokumentation:
  • Yahoo! Developer Network
  • YUI 3 API-Dokumentation
  • YUI Theater
  • YUI-Bibliothek
  • YUI Blog
• Ältere, konsequente Entwicklung zwischen den Veröffentlichungen.
• Integrierte Werkzeuge in YUI Compressor , YUIDoc , YUI Builder und Konsole .
• Nicht nur, JavaScript, ein CSS-Framework auch.

Take Two

Integration von YUI 3 brachte mehrere direkte und indirekte Vorteile für das Projekt:

• Erbschafts-basierte Architektur und Klasse-Management durch die Attribut -Schnittstelle, und Base- und Widget- Klassen produziert leistungsfähige, wiederverwendbare und organisierter Code.
• Trennung von Präsentations-Modell ab und Daten mit Hilfe des Widget -Klasse, um alternative Ansichten (Inline-oder Overlay) auf den Ort der Anwendung innerhalb der Website der Basis zu machen.
• Sandbox und dynamischen Modul Integration durch YUI.use ().
• Cross-Browser-Konsole Debugging mit YUI-Konsole .
• Auf Save, Performance-Optimierung mit YUI Compressor in Eclipse.
• Einfache Einbindung und Integration von bereits vorhandenen jQuery-Plugins.
• Auf Save, mit automatisierten Code-Dokumentation YUIDoc .

Das Endergebnis war ein glücklicher Kunde und ein fertiges Produkt mit Sub-Second-Ladezeiten (wir erinnern uns dauerte es 8 Sekunden, um die anfängliche Proof of Concept zu laden).

Lessons Learned

Wählen Sie das richtige Werkzeug für den Job

Beim Lesen dieser Post Ich bin sicher, einige Leser werden dies als anti-jQuery anzuzeigen. Überhaupt nicht. jQuery ist ein fantastisches Projekt verantwortlich für viele Innovationen. Aber wie bei jedem Werkzeug, es hat seine Stärken und einen Verwendungszweck. Seine Stärke liegt bei der Normalisierung der Browser-Inkonsistenzen, eine Senkung der Eintrittsbarriere für den Anfänger und Verbesserung der Effizienz der erfahrene Programmierer. Das primäre Lernen, das aus dem Projekt kam, war, dass man nicht auf ein Werkzeug für jeden Job angewiesen. YUI baut auf jQuery kann auch bietet eine gut architected Anwendungs-Framework bieten. Aber es ist fair zu sagen, dass es zu einem Preis kommt, siehe den nächsten Punkt.

Steile Lernkurve

Man braucht Geduld, vor allem beim Schreiben Ihrer ersten Anwendung mit einer unbekannten Bibliothek wie ich. Doch der Erfolg ist immens. Durch das Erlernen einer anderen Bibliothek, wird nicht nur Ihre JavaScript-Fähigkeiten zu verbessern, werden Sie auch ein tieferes Verständnis dafür, wie Bibliotheken Arbeit und den Nutzen bei weitem. Ich versuche, etwas Neues über YUI Alltag erfahren und je mehr ich lerne, desto mehr bin ich in Ehrfurcht vor den Gedanken und die schiere Talent, das in den Aufbau YUI weg ist.

Laden Sie nur Inhalte, wenn Sie es brauchen

Während es sicherlich einfacher, nur programmatisch, um alles, was Sie brauchen im Voraus geladen werden kann, gewannen die Performance-Verbesserungen als direkte Folge von Lazy Loading Content nur dann, wenn Sie es brauchen ist riesig. Dies war einer der wichtigsten Faktoren für eine drastische Verbesserung der Leistung der Anwendung.

Interagieren Sie mit dem DOM so wenig wie möglich

Dieser Punkt bezieht sich nicht auf die spezifische Bibliothek angewendet wurde. Durch das Zwischenspeichern der erforderlichen DOM-Elemente und HTML-Templates unter Verwendung mehr, fiel UI-Rendering-Zeit beträchtlich. Die Knoten können zwischengespeichert werden mit Y.one (), während der Knoten-Listen können eingefangen mit Y.all () werden. Auch Y.Node.create () war sehr nützlich bei der effizienten Umwandlung großer Text-Strings von HTML-DOM-Elementen, um vor dem Einsetzen.

Erfahren Sie von Verwenden Sie beispielsweise eine EUR

Bei der Verwendung von YUI-Bibliothek ausgeliefert EUR haben wir beschlossen, alle Vermögenswerte des Projekts über EUR zu liefern. Das war wahrscheinlich der nächste größte Faktor für die Performance-Verbesserung.

Pub, sub Trubel

Für die erfahrene Programmierer da draußen, versuchen, nicht an diesem einen lachen. Nach dem Schreiben nicht viel mehr als Plugins in der Vergangenheit verwendet worden, ich hatte keine Ahnung, wie Anwendungen sollten intern zu kommunizieren. Selbst nach der Lektüre "Custom Events können Sie die interessantesten Momente oder Ereignisse in Ihrem eigenen Code zu veröffentlichen, damit andere Komponenten auf der Seite auf diese Ereignisse zu abonnieren kann und auf sie reagieren," Ich habe noch verpasst.

Wie sich herausstellt, Publish-and-subscribe YUI Die maßgeschneiderten Event-Modell funktioniert wunderbar für Inter-Klasse und Inter-Objekt-Kommunikation. Sie können sogar abonnieren, Pre-und Post, um Ereignisse und beinhalten dynamische Logik zu Blasenbildung auf der Grundlage bestimmter Bedingungen zu unterdrücken.

Integrieren Best Practice in Ihren Workflow

Mit Eclipse konnten wir JSLint und YUI Compressor in den Build-Prozess zu integrieren. Einfach ausgedrückt, wird jedes Mal, wenn Sie Strg / Befehl + S Ihr JavaScript-Code validiert und optimiert. Das heißt, Sie sind gegen optimiert, Produktion Grade-Code von der ersten Zeile des Codes testen. Es bedeutet auch, dass Sie nicht vergessen, in der hektischen letzten Rennen der Lieferfrist zu optimieren.

YUI Learning on the Job

Obwohl jeder hat eine andere Lernstil, dachte ich, ich teile, welche Ressourcen ich YUI mit einem bestimmten Ziel vor Augen lernen verwendet.

• Beobachten Sie die relevanten YUI Theater Episoden um einen allgemeinen Überblick über die Bibliothek zu bekommen oder lernen, ein bestimmtes Modul. Kann ich sehr empfehlen, beginnend mit:
  • Eric Miraglia Willkommen auf der YUI 3
  • Todd Kloots auf YUI 3 Zucker
  • Matt Sweeney YUI 3 Performance
  • Luke Smith Debuggen in YUI 3
  • Isaac Schlueter zur Behebung von Problemen mit YUI 3
  • Eric Ferraiuolo auf Web App-Entwicklung mit YUI 3
  • Luke Smith Events Evolved
• Informieren Sie sich über YUI auf der Yahoo! Developer Network . Ich versuche, ein bisschen lesen jede Woche und erfahren Sie mehr jedes Mal, wenn ich wieder lesen.
• Lesen Sie die API -Dokumentation. Wenn Sie es nicht finden können auf YUI Theater oder auf der Developer Network, in der API zu graben. Es lohnt sich, auch den Code direkt zu lesen.
• Lesen und schreiben Fragen zum Forum auf YUILibrary.com .
• Spielen und viel Spaß!

Abschluss

YUI 3 ist ein voll ausgestattetes, reifen und sich ständig weiterentwickelnden Bibliothek eignet sich für kleine bis große Projekte. Als Front-End Web-Anwendungen immer komplexer werden, wird der Bedarf an Bibliotheken wie YUI wachsen. Während für den Uneingeweihten es eine erschreckende Erfahrung auf den ersten sein können, wenn Sie dabei bleiben du wirst belohnt werden.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

YUIConf 2010 Verkauft Out; kündigt zwei Abendveranstaltungen

YUIConf 2010 ist ausverkauft! Danke an alle, registriert - wir freuen uns darauf, euch alle im November. Wir sind jetzt die letzten Handgriffe an unserem Zeitplan, aber Sie können einen Blick auf das, was wir auf Lager haben hier nehmen: http://yuilibrary.com/yuiconf2010/schedule.php .

Highlights zählen:

• Ein Node.js verfolgen, wo man auf allen aufregenden Dinge geschehen mit Server-Side JavaScript können Rampe. Wir haben Node.js Schöpfer Ryan Dahl präsentiert und sitzt auf einem Panel über die Zukunft der Frontend-Engineering, und wir haben das YUI Dav Glass, einer der ersten, die zeigen, Node-basierte Progressive Enhancement mit off-the-shelf Komponenten-Bibliothek (YUI aus 3), zeigt, wie die Zukunft aussieht.
• Ein YQL Spur, um Sie auf dem Laufenden über die Umsetzung YQL, um Daten von überall auf das Internet zugreifen. Das Team YQL selbst werden vor Ort sein, um Sie über ihre neuesten Arbeiten erzählen.
• Fallstudien aussetzen, wie realen Projekten umsetzen YUI in anspruchsvollen Produktionsumgebungen. Ingenieure von Flickr und Yahoo! Mail werden vor Ort sein, und Eric Ferraiuolo - Gewinner eines PayPalX Preis für seine jüngsten Arbeiten - hier sein wird, darüber zu sprechen Tipp im Internet , seine neueste YUI 3-basiertes Projekt.
• Aufschlussreiche Vorträge darüber, wie mobile / Touch-Erfahrungen zu liefern.
• Tieftauchen auf YUI-Module, von AutoVervollständigen CSS Grids zur Galerie Beiträge.

Alle Sitzungen werden auf Video archiviert werden und auf YUI Theater kurz nach der Konferenz.

Wir freuen uns, gemeinsam mit der Yahoo! Developer Network beizutreten, um zwei besondere Abendveranstaltungen, die offen für die breite Öffentlichkeit veranstaltet. Obwohl also die Konferenz bereits ausverkauft ist, kann jeder die Abendveranstaltungen, indem Sie sich bei Meetup.com teilzunehmen. Die Plätze sind begrenzt, also melden Sie sich bald! (YUIConf Teilnehmer brauchen nicht um sich anzumelden.)

YUIConf 2010 Podiumsdiskussion: "The Future of Web Development" von Ben Galbraith und Dion Almaer moderiert
8. November 2010, 6.30 bis 20.00 Uhr

Melden Sie sich für die Teilnahme an Podiumsdiskussion http://www.meetup.com/BayJax/calendar/15239592/ .

YUIConf hat gemeinsam dieses Gremium renommierter, um die nahe Zukunft der Disziplin in einer Zeit großer Veränderungen erkunden gebracht. Geplante Diskussionsteilnehmer sind Elaine Wherry, Gründer und Frontend-Architekt bei Meebo; Douglas Crockford, JavaScript-Architekt bei Yahoo!, Tantek Çelik, Technologe und Autor; Ryan Dahl, der Schöpfer der Node.js; Joe Hewitt von Facebook, der Schöpfer von Firebug und eine der am meisten heruntergeladenen mobilen Anwendungen aller Zeiten (Facebook für iOS); Thomas Sha, YUI Gründer bei Yahoo!.

YUIConf 2010 Keynote: "Projekt Zukunft" von Douglas Crockford
10. November 2010, 6.30 Uhr bis 20.00 Uhr

Melden Sie sich an die Keynote auf Teilnahme http://www.meetup.com/BayJax/calendar/15239717/ .

In der Softwareentwicklung, träumen wir über Architektur. Dies ist die wahre Geschichte von einem solchen Traum.

Sitzplätze für diese spezielle Veranstaltungen begrenzt ist, so sicher sein, melden Sie sich bald!

CC Fotos:

• Dion Almaer: http://www.flickr.com/photos/seanosh/3306058997/
• Tantek Çelik: http://www.flickr.com/photos/thomashawk/409672754/
• Ryan Dahl: http://www.flickr.com/photos/blank22763/4089950858/
• Elaine Wherry: http://www.flickr.com/photos/drewm/3016944830/
• Ben Galbraith: http://www.flickr.com/photos/seanosh/3306056383/

Fotos mit freundlicher Genehmigung verwendet:

• Douglas Crockford: http://www.flickr.com/photos/allenr/4482834276/
• Douglas Crockford: http://www.flickr.com/photos/allenr/4341338168/

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

Bei der Bekanntgabe YUI 2.8.2 - Wichtiges Sicherheits-Update für alle Benutzer von YUI 2.4.0-2.8.1

Die YUI-Team veröffentlicht YUI 2.8.2 heute. Dieses Release behebt einen sicherheitsrelevanten Mangel , der in der YUI 2 Flash Komponente Infrastruktur, beginnend mit dem YUI 2.4.0 Release eingeführt wurde. Dieser Defekt kann JavaScript Injektion Exploits gegen Domains erstellt werden, die als Host betroffen YUI .swf -Dateien. Besuchen Sie die Security Bulletin für YUI 2.8.2 für weitere Informationen über diese zu identifizieren und die betroffenen Dateien ersetzen .

Wenn Ihre Site beherbergt eine YUI 2-Verteilung zwischen Version 2.4.0 und 2.8.1, die diese Dateien enthält, wird es von dieser Sicherheitsanfälligkeit betroffen.

Wenn Ihre Website lädt YUI 2 von Yahoos EUR ( yui.yahooapis.com ) oder aus dem Google-EUR ( ajax.googleapis.com ), und die Dateien nicht auf Ihrer eigenen Domain gehostet werden, sind Sie nicht betroffen. YUI 3 wird nicht von diesem Problem betroffen.

Sie können YUI 2.8.2 (und gepatchte Versionen von YUI 2.4.0-2.8.1) vom Download der YUILibrary.com Download-Seite .

Siehe Security Bulletin , um Informationen zu ermitteln, ob Ihre Seite betroffen ist, wie das Problem zu beheben, und wie um das Update zu überprüfen.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!

In der YUI 3 Gallery: Erweiterungen für SVG, für SVG erstellt Wow!

Einführung

SVG ( Scalable Vector Graphics ) bietet eine deklarative Syntax für interaktive, animierte 2D-Grafik: Formen, Bildern und Text. SVG-Unterstützung ist Teil der HTML 5 -Spezifikation und SVG wird von allen gängigen Browsern, einschließlich Internet Explorer von Microsoft implementiert in der Version 9 .

Die SVG-wow.org Website Vitrinen, was mit SVG heute getan werden kann. Die Demos auf dieser Web Site wurden für die erstellte SVG Open Konferenz, auf der SVG-Wow! Sitzungen haben eine Tradition seit mehreren Jahren. Die SVG Wow! Sitzungen wurden von Dean Jackson begann, dann in Zusammenarbeit mit mir und dann weiter durch Erik Dahlstrom . Erik und ich haben auf der Sitzung für den collorated 2009 und 2010 Ausgaben von der Konferenz.

In den letzten zwei Jahren haben sich die Demos zunehmend AJAX-Frameworks verwendet, die Anwendung ihrer Funktionen, um SVG statt (oder zusätzlich zu) HTML. YUI ist das am weitesten verbreitete Rahmen auf der Website, die sowohl benutzt YUI 2 und 3 YUI .

Ich werde mit einem schnellen Überblick über SVG zu starten und dann diskutieren, welche Art von Demos, dass YUI unterstützt und die Erweiterungen, die ich auf die YUI 3 Galerie hinzugefügt haben , um es mit SVG zu arbeiten. (Diese Erweiterungen sind jetzt frei, unter den Bedingungen der Verwendung der BSD-Lizenz YUI .)

SVG Überblick

Wie HTML ist eine W3C SVG-Spezifikation. Es bietet eine Syntax zur Beschreibung Grundformen (Rechtecke, Kreise, Linien, Polygone, Ellipsen, Polylinien), beliebige Formen (beschrieben in Bezug auf Pfadsegmente, die Linien, quadratische oder kubische Bezierkurven sein kann), Text und Bildern.

Das folgende Bild ist ein Screenshot des alternate stylesheet Beispiel auf SVG-wow.org und zeigt einige SVG-Funktionen im Spiel: Reichen Rendering (Schatten-Effekte, Farbverläufe, Muster) und einfache und komplexe Formen.

Da SVG-Bildern in Bezug auf Geometrie und Rendering-Attribute definiert sind, ist es möglich, sie bei jeder Auflösung rendern. Als Ergebnis können SVG-Bildern auf jede beliebige Größe skaliert werden, unter Beibehaltung einer hohen Rendering-Qualität, zum Beispiel beim Drucken (keine scharfen Kanten mehr).

Die folgende vergrößerten Ansicht zeigt das gleiche Bild SVG zuvor gezeigt, aber gerendert mit einer höheren Auflösung unter Beibehaltung der hohen Qualität.

Genau wie HTML, SVG unterstützt Interaktivität: ist es möglich, Event-Listener auf grafische Objekte für Maus oder Tastatur-Interaktionen hinzufügen. Selbstverständlich unterstützt SVG das Document Object Model, das es einfach, die unterschiedlichen Eigenschaften von grafischen Objekten, wie zum Beispiel ihrer Geometrie oder Rendering-Stil zu manipulieren lässt.

Es gibt eine Menge zu der SVG-Spezifikation: erweiterte Rendering-Stile (Streicheln, Füllen, Muster, Farbverläufe), Filter-Effekte (Unschärfen, Schatten, Farbe Matrizen), CSS-Styling, erweiterte Text-Funktionen (z. B. Text auf einem Pfad) und deklarative Animation . Sie können sich über die Verweise am Ende von diesem Post um mehr zu erfahren über die SVG-Format Features.

SVG und HTML

Mit HTML5 , können SVG in HTML-Dokumenten ohne weiteres inlined werden. Browser sind Ausgangspunkt, um diese Funktion (z. B. unterstützen Firefox 4 ). Zur Zeit unterstützen alle gängigen Browser SVG in XHTML inlined, die die gleiche Funktionalität bietet. SVG in XHTML nur verlangt, dass Namensräume richtig deklariert sind.

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         ....
     </ Head>
     <body>
         <h1> Inline-SVG </ h1>

         <SVG xmlns = "http://www.w3.org/2000/svg" version = "1.1"
          xmlns: xlink = "http://www.w3.org/1999/xlink"
          width = "100%" height = "100%" id = "backgroundSVG">
             <-! SVG-Inhalt hier ->
         </ Svg>
     </ Body>
 </ Html>
        

Alle Codebeispiele auf diese Seite nutzen diese Art der Inlining SVG in XHTML.

SVG und YUI

SVG unterstützt deklarative Animation. Zum Beispiel können Sie animieren den Radius eines <circle> Element wie folgt aus:

 <circle cx="50" cy="100" r="40">
     <animate attributeName="r" values="40,60,20,40" dur="1.5s" />
 </ Kreis>
       

Die <animate> -Tag wird von der geliehenen SMIL -Spezifikation und, zusammen mit den anderen Elementen Animation, bietet es eine sehr mächtige Animations-Engine zum SVG.

Leider war bis vor kurzem Browser-Unterstützung für SVG Animation spärlich. Es hat in den letzten zwei Jahren verbessert, aber Microsoft hat deutlich gemacht, es wird nicht unterstützt deklarative SVG Animation im IE 9.

Infolgedessen nutzen die meisten der Demos auf dem SVG-wow.org Website Animationsskripts statt deklarative Animationen. Auf der einen Seite ist dies bedauerlich, weil deklarative Animationen effizienter als Animationsskripts sind. Auf der anderen Seite, können Animationsskripts sehr flexibel sein, und sie arbeiten über Implementierungen sehr gut.

Die Notwendigkeit einer guten Animationsskripts Lösung ist es, was trieb den Einsatz von YUI auf den SVG-wow -Demos. Allerdings sind die Demos auch andere YUI Merkmale, insbesondere der Loader und Node -Module.

Animieren von SVG mit YUI

Die Demos auf SVG-wow verwenden YUI zu schaffen elastischen Drum-Beats , Morphing-Formen oder Drehen von Text und Formen zum Beispiel. Mit YUI mit SVG benötigt ein paar Erweiterungen YUI, ich werde diese in nur einem Moment zu beschreiben.

Drehen von Text und Formen	Morphing-Formen
elastische Trommelschläge

Die folgende Abbildung zeigt, wie YUI kommt in handliches, einfach zu animieren und zu manipulieren SVG-Grafiken.

Animieren der SVG transform -Attribut

Alle SVG grafische Elemente haben eine transform -Attribut. Das Attribut gibt eine 2D- affine Transformation auf Elemente, die verwendet werden, um zu skalieren, neigen, drehen oder übersetzen kann.

Die SVG-wow.org YUI-Erweiterungen für SVG Animation ermöglichen die transform Attribut wie folgt aus:

 var anim = new Y.Animate ({
     Knoten: '# circleA',
     aus: {
         Transformation: {tx: 0, ty: 0, SX: 2, sy: 2}
     },
     zu: {
         Transformation: {tx: 20, ty: 20, SX: 1, sy: 1}
     },
     transformTemplate: "übersetzen (# tx, ty #) Skala (# sx, sy #)",
     Dauer: 1
 });
        

Siehe die Transformation Animationen Tests.

Sie werden bemerken, dass die Werte-Transformation im Sinne von "Komponenten" (wie definiert tx oder ty ), die kombiniert werden, um einen Wert über entsprechende Formulare transformTemplate auf die Animation Konfiguration Objekt gefunden.

Die Vorlage ist ein flexibler Mechanismus für den Aufbau verwandeln Werte, während separate Komponenten es einfach, die animierte Werte zu berechnen machen. Dies ist ein Beispiel, wo die YUI-Animation Modell erlaubt mehr Flexibilität (und mehr Ausdruckskraft) als SVG-SMIL Animation Element ( animateTransform ). Um die Animation oben beschrieben zu schaffen, wäre das Äquivalent SMIL Erklärung gewesen:

 <circle ...>
     <AnimateTransform attributeName = "transform" type = "übersetzen"
                       from = "0,0" zu = "20,20" dur = "1" begin = "scaleAnim.begin" />
     <AnimateTransform id = "scaleAnim" attributeName = "transform" type = "Maßstab"
                       from = "2,2" zu = "1,1" dur = "1" begin = "indefinite" />
 </ Kreis>
        

Man beachte, wie die oben Ausschnitt mehreren benötigt animateTransform Elemente, die synchronisiert werden müssen: der begin Attribut der ersten Animation eingestellt ist, dass scaleAnim.begin , um den Start der beiden Animationen zu synchronisieren. Ein nettes Feature des YUI-Animations-Engine ist, dass das Timing einer Animation (dh, Beginn, Ende und Dauer) gemeinsam genutzt werden können, auf mehrere Element-Eigenschaften anzuwenden.

Die YUI-Erweiterung für die Animation von SVG-Transformationen wird extensiv, wie in der verwendeten Kamera und animierte Texte Beispiele. Der ehemalige verwendet eine Erweiterung von YUI 3, während das letztere verwendet eine Erweiterung von YUI 2.

Animieren von Geometrie

Basisgeometrie

Animieren von SVG-Geometrie mit YUI ist ganz einfach. Im folgenden Beispiel werden animiert eine <rect> Elements Breite, Höhe und Eckradien:

 var anim = new Y.Animate ({
     Knoten: '# recta',
     aus: {
         Breite: 200,
         Höhe: 100,
         rx: 5,
         ry: 5
     },
     zu: {
         Breite: 300,
         Höhe: 100,
         RX: 10,
         RY: 10;
     },
     Dauer: 2,
     Lockerung: Y.Easing.elasticOut
 });
        

Auch die Form Animationen Tests.

Wie später erörtert auf, nahm einige Änderungen unter der Haube YUI diese Arbeit. Aber von einem Entwickler-Perspektive, funktioniert diese Animation genau die gleiche Weise wie die Animation eines anderen HTML-Attribut oder CSS-Eigenschaft.

Die <path> 's d -Attribut

Ein Geometrie-Attribut ist ein wenig spezieller: das d -Attribut für das <path> Element. Die <path> Element wird für beliebig komplexe Geometrie verwendet. Ein <path> beschreiben kann jede beliebige Form. Seine d -Attribut beschreibt seine Geometrie hinsichtlich der Pfadsegmente, die Linien, Bögen, quadratische oder kubische sein kann Bezierkurven (es gibt ein paar Befehle mehr, aber sie alle Karte in Bezierkurven).

Animieren der d -Attribut auch ein bisschen Ausweitung auf die YUI Animations-Engine benötigt, aber mit dieser Erweiterung, die d -Attribut kann wie jede andere animiert werden, wie unten dargestellt.

 var anim = new Y.Animate ({
     Knoten: "# Weg A",
     aus: {d: "M 0 0 C 50 0 100 50 100 100 C 50 100 0 50 0 0 Z"},
     auf: {d: "M 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 Z"},
     Dauer 1s,
     Lockerung: Y.Easing.bounceBack
 });
        

Siehe die Pfade Animationen Tests, die zeigt, unter anderem ein Häkchen verwandelt sich in ein Kreuz im Laufe der Zeit, wie in den folgenden Bildern dargestellt.

Die Zitate Gandhis Demo nutzt diese Technik der Animation des d -Attribut auf die Morph-Formen in Gandhis Figur.

Animieren von anderen SVG-Attribute

Natürlich sind die YUI-Animationen nicht an Geometrie Attribute beschränkt. Jede SVG-Attribut kann animiert werden. Zum Beispiel die folgende Animation animiert das Verwischradius auf einer horizontalen Weichzeichnungsfilter.

 / / SVG-Schnipsel
 <Filter ..
     <FeGaussianBlur id = "BlurFilter" stdDeviation = "10 10" ...  />
 </ Filter>

 / / JavaScript-Animation
 var anim = new Y.Animate ({
     Knoten: '# BlurFilter',
     aus: {stdDeviation: [0, 20]},
     auf: {stdDeviation: [0, 0]}
 });
        

Auch die Filter-Animationen Tests. Das folgende Bild zeigt, wie das Animieren einer Gaußschen Weichzeichner auf Übergang zwischen Staaten Taste verwendet werden.

Dieser Effekt wird in der verwendeten schnellen Unschärfe-Effekt -Demo, auch wenn diese Demo nicht verwendet YUI Animation, sondern deklarative SMIL Animation Elemente (auf Kosten von nur laufen in Browsern, die diese Funktion, wie oben erläutert).

Animieren von CSS-Eigenschaften

Wie HTML SVG-Elemente haben Attribute und auch CSS-Eigenschaften. SVG hat einige spezielle CSS-Eigenschaften . Diese Eigenschaften können animiert werden, manchmal zu überraschenden Effekten zu erstellen. Zum Beispiel kann die stroke-dashoffset kann Eigenschaft verwendet, um zu simulieren Zeichnen einer Form werden.

 / / SVG-Schnipsel
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / JavaScript
 var anim = new Y.Animate ({
     Knoten: "# recta",
     auf: {'Hub-dashoffset': 0},
     Dauer: 0.25
 });
        

Siehe die Schlaganfall-Animationen Tests.

Die Graffitis Demo nutzt diese Technik (wenn auch ohne Animation YUI) und so auch die Kamera -Demo (diesmal mit YUI-Animation).

YUI und SVG: Unter der Haube

Die SVG-wow.org Website verwendet sowohl YUI YUI 2 und 3 und verfügt über SVG-spezifischen Erweiterungen für beide. Der folgende Abschnitt dieses Artikels konzentriert sich auf die YUI 3 Verlängerungen.

Extensions were needed to:

• make YUI work with SVG's DOM specificities
• account for implementation differences
• add support for new attribute types such as SVG transforms
• add additional animation timing and synchronization features

Accounting for SVG DOM Specificities

As described earlier, SVG attributes can be animated with declarative elements such as <animate> . To support SVG's animation model, SVG attribute values hold both an animated and a base value. For example, the r attribute on a <circle> element is an SVGAnimatedLength defined as follows:

interface SVGAnimatedLength {
  readonly attribute SVGLength baseVal;
  readonly attribute SVGLength animVal;
};

As a result, even in implementations that do not support declarative animation, we need to reach down to the baseVal to read an attribute's value:

var circle = document.getElementById('#myCircle');
var rValue = circle.getAttribute('r').baseVal.value;

Extensions were needed to allow the animation engine to account for the SVG attributes' unusual value model. Thankfully, YUI 3 has a concept of animation behaviors . Behaviors are essentially attribute-specific hooks, and it was fairly easy to add support to handle SVG attribute values. For example, SVGAnimatedLength attributes are handled like so:

var lengthBehavior = {
    set: function (anim, att, from, to, elapsed, duration, fun) {
        // SVG specific handling
    },

    get: function (anim, attr) {
        // SVG specific handling
     }
};

// Handle <circle>'sr attribute
Y.Animate.behaviors.r = lengthBehavior;

There are more extensions for other SVG attributes values such as the transform attribute, color attribute values (like fill , stroke or stop-color ) and attributes such as stdDeviation mentioned earlier.

A few similar tweaks were required, for example in the Y.Node.prototype.toString method, again to account for SVG's baseVal (this time on the className node property). Another example is the default node setter in the Node module.

Accounting for browser differences

While the previous extensions are required because of specification differences between HTML and SVG, the following are required because of implementation variations between browsers.

SVG has a special category of attributes called presentation attributes . In implementations also supporting CSS styling (which all browsers support), these presentation attributes are really just another way to specify a CSS property with a low specificity . From the SVG specification:

The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or 'style' attributes.

Unfortunately, some browsers do not implement the specification correctly and window.getComputedStyle does not always account for all possible sources for setting the SVG CSS properties: CSS selectors, style attribute and presentation attributes.

YUI came to the rescue thanks to the Node module which could be extended to hide these browser differences. The Y.DOM.CUSTOM_STYLES and the Y.Node.prototype.getComputedStyle could be extended to offer a uniform way to read SVG style properties.

Extending Y.DOM

YUI wraps all DOM access through the Node interface. As a result, some SVG specific DOM methods, such as getBBox (used to compute the bounds of an SVG element), are not accessible on the wrapped object.

To make things easier to program for SVG, extensions to the default Y.DOM module (which Node uses) were added to either expose SVG DOM features or add convenience methods, commonly needed when manipulating content:

• firstElement/lastElement/prevElement/nextElement/removeAllChildren (not SVG specific)
• getMatrix/setMatrix . Provides an easy way to manipulate transforms on SVG elements, something notoriously difficult with the standard SVG DOM
• getBBox/getViewportBBox provide simple ways to access bounding box in the element's coordinate system or in viewport space.
• loadContent . A utility to insert a DOM fragment described using a JavaScript object literal. Zum Beispiel:

  myNode.loadContent({
      tag: 'g',
      fill: 'red',
      stroke: 'none',
      children: [{
          tag: "rect",
          x: 10,
          y: 10,
          width: 200,
          height: 300
      }, {
          tag: 'circle',
          r: 10,
          cx: 105,
          cy: 155
      }, {
          tag: 'image',
          'xlink:href': 'images/photo.png',
          width: 200,
          height: '300px'
      }, prevSibling);
          

  is a shorthand for making various DOM calls (such as createElementNS , setAttributeNS and appendChild ) to create a g element and its children and inserting it before prevSibling under myNode . The utility deals with namespaces for attributes and elements.

Additions to the Animation engine for timing and synchronization

Many, if not most effects involving animation require multiple choreographed animation instances. Typically, several animations are required to create a desired effect, and the start or end of animations depend on each other, sometimes with a time offset: animations need to be synchronized.

For example, if you have a set of shapes which need to fade in one after the other, you will need to create a fade animation for each element and then chain their start time with a slight offset.

var chained = Y.all('#chained circle'),
    firstAnim, previousAnim;

chained.each(function (circle) {
    var anim = new Y.Animate({
        node: circle,
        from: {'fill': 'white'},
        to: {'fill': 'gray'},
        duration: 0.25
     });
    if (previousAnim !== undefined) {
        // Synchrnoize the start of anim to be 0.15 seconds after the begining
        // of the previous circle's animation (previousAnim).
        previousAnim.onBegin(anim, 0.15);
    } else {
        firstAnim = anim;
     }
    previousAnim = anim;
 });

// Start the first animation 1s after a click on any of the circles.
// Note that this is an extension to the default YUI run method which does not
// take a time offset.
chained.on('click', function () {
    firstAnim.run(1);
 });

See the time offsets tests.

The method onBegin makes it easy to synchronize the start of two animations, with an optional time offset. Actually, onBegin can also invoke a function with a time offset. Likewise, the onEnd extension makes it easy to synchronize with the end of an animation.

By default, YUI animations have events which provide a way to synchronize. The onBegin and onEnd methods express the synchronization more concisely (a similar example of conciseness is shown below).

In addition, it is sometime necessary to synchronize an animation with an event, again with a time offset. The beginOn and endOn extensions allow us to express that. Zum Beispiel:

anim.beginOn(Y.one('#button'), 'click', 0.5);

will start the animation 0.5s after the element with id 'button' was clicked. This is a short-hand for:

Y.one('#button').on('click', function () {
    setTimeout(500 /* ms */, function () {anim.run();});
 });

A final extension made to the animation class was the ability to make an animation object apply its first frame's state before it was actually started. This is often needed when creating animation effects involving multiple animations which start at different time offsets.

var anim = new Y.Animate({
    node: Y.one('#button'),
    from: {r: 30, 'fill-opacity': 0, color: 'crimson'},
    to: {r: 80, 'fill-opacity': 1, color: 'gold'},
    duration: 0.25
 });

// the following will set the desired state on the target object prior to
// actually starting the animation.
anim.applyStartFrame();
anim.run(2);

The picture shuffle demo uses animation offsets for the effect that spreads the stack of pictures or puts the pictures back in a stack.

Abschluss

Working with SVG and YUI, and in particular YUI 3, has been a very enjoyable experience: a lot of the YUI functionality applies to SVG right out of the box and YUI's extensible architecture made it possible to work around occasional issues and to add desired functionality.

Of course, increased standard support for SVG in YUI would be helpful, in particular making YUI work with stand alone SVG documents and making the Node class wrap SVG elements without workarounds.

There are also a few enhancements that would be helpful. For example, it would help if animations could target multiple elements. Likewise, supporting multiple values (as in the <animate> SVG element for example) would be helpful to create more sophisticated effects.

The demos on svg-wow.org were written for YUI 3.1 and ported to 3.2 for the purpose of this blog. In 3.2, transitions were introduced which make use of native CSS transitions if available in the browser. It might be possible for the YUI animation engine to similarly leverage SMIL animation where available (Opera, Firefox and WebKit at the time of this writing) which should also yield performance improvements.

The SVG extensions on the svg-wow.org web site are available as a YUI 3 Gallery module for those who want to enjoy the fun of working with YUI and SVG.

Referenzen

• SVG Wow!
• SVG Specification
• SVG Tutorial
• Adobe's SVG Zone (a little dated, but still has good examples)
• carto.net examples
• KevLinDev

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

In the Wild for October 15, 2010

YUIConf 2010 is right around the corner , and we continue to have our heads down working on that event and the upcoming YUI 3.3.0 release. In the meantime, here's what we've noted in the community in the past few weeks. Let us know @yuilibrary (or in the comments below) what we missed!

• Andrew Wooldridge, “Learning YUI: Pt. 2 – Community, Logging, and the Console” : Andrew Wooldridge (@triptych) is back with part 2 of his new “Learning YUI” blog series. I particularly like (and agree with) his take on the YUI community: “In a word, community is really what makes YUI stand out to me as a javascript library. If you need help working with YUI, there are community forums , an IRC channel , as well as Open Hours that allow you to talk directly with YUI developers. I would recommend that you get connected early on in your learning experience, especially with the IRC channel because you will discover a helpful group of smart folks hang out there and are willing to answer any question, no matter how seemingly mundane. You also should follow yuilibrary on twitter as you will be tapped into the latest YUI news there.” Check out the full blog post for more . I covered part one in a previous “In the Wild” column . #
  
• Andrew Burgess's “Crash Course” on YUI 2 Grids on NetTuts : Andrew Burgess's “Crash Course” on YUI 2 Grids, which we first noted in May last year , has been picked up by NetTuts and is bringing a new wave of attention to what has historically been one of YUI's most popular projects. #
  
• Create a BlogRoll with Google Spreadsheets and YUI3 : Andrew Wooldridge (@triptych) continues his series of YUI 3-focused articles with a new entry that ties together YUI 3 and Google Docs. “I admit it: I was inspired by this article by Codeinfront.com. The idea of creating a snippet of code that anyone can share, update, and learn from is just extremely compelling and gratifying. So, I offer to you something that you may have never thought of. You can use Google Spreadsheets as a JSON data source. YUI3′s JSONP module talks very nicely to this JSON data source and allows you to essentially create sites that can be data driven and yet never require you to have a complicated PHP MyAdmin setup or MYSQL database. You can do it all via client-side technologies and some help from Google Spreadsheets. If you combine this with the Forms ability in G Spreadsheets, you could even create a cool report page based on some survey you create. Let's get down to code.” Get down to code with the full blog post here #
  
• Video Remixing Site Dragontape Using YUI 3 : Video remixing site Dragontape is making extensive use of YUI 3. Here's how the site's authors describe the project: “Dragontape is a webapp that enables you to create mixtapes of your favorite online videos, so you can watch them as a continuous show. The tapes you create are accessed through a single URL, so you can easily share with friends or embed them in a webpage. The source clips remain in their original locations, Dragontape simply remembers where to find them.” #
  
• Erik Eldridge, “Simple YUI 3 Module for Yahoo! Login” : YDN evangelist Erik Eldrige has written up a nice tutorial on his personal blog that shows you how to leverage YUI 3 and Yahoo!'s OpenID system simply and efficiently. Writes Erik: “Looking at the OpenID landing page on the YDN site might give the impression that logging users into a site with a Yahoo! ID is difficult. Given the following conditions, however, adding Yahoo! login to your site can be quite simple:
  1. Because we're only targeting Yahoo! accounts, we can preset the login location to https://open.login.yahooapis.com/openid/op/auth
  2. If we log users in via a popup, but manage everything via JavaScript on the parent page, we can skip validation of the response coming back from Yahoo!”
  You can find the full tutorial here . #
  
• Upstage, a New YUI 3-powered HTML5 Presentation System by Reid Burke : @Reid is just getting this project underway, but there's a lot to like already. Following in the footsteps of a series of standards-based presentation tools that have launched in the last few years, Upstage puts a YUI 3 twist on the genre. Code is on GitHub — download, fork, and have fun. ( Original source. ) #
  
• A Simple Twitter Widget with YUI 3 and YQL (by @codeinfront) : @codeinfront has posted a new tutorial on using YUI 3 and YQL in a Twitter mashup. “While in between projects I've been playing around with JavaScript dates including conversion to relative time. This then lead me to testing the function within a Twitter widget context. I ended up with a Twitter widget using YUI 3 and YQL. The code below explores a couple of interesting concepts…” Check out the blog post for full details . #
  
• “YUI, How Dare You Make Me Rethink…” : Michigan Techie writes that YUI 3 is designed to break bad habits and challenges him to find new, hopefully better coding patterns. “When you use YUI3 you have a YUI().use() and everything gets encapsulated within that bit of code. So if I were to just move the MyApp code into the YUI block I'm no longer able to access it from the page of content I want to run JS on. So this is good, no JS globals, but it's bad…not the way I've been doing things.” You can see MT's full epiphany here . #
  
• Jeez.eu on Building a Custom Search Engine with YUI : Jeez.eu's tutorial on building a custom search engine relies heavily on YUI 2 widgets and utilities. #
  
• Node.js Resource List from @codeinfront Includes Crockford, Dav Glass : Blogger Mark Rall (@codeinfront) has compiled a set of his favorite Node.js-related resources. Key among them are two recent YUI Theater talks from Douglas Crockford and Dav Glass. For his other favorites, head over to his blog . #
• ErisDS Has Updated Her Carousel Custom-navigation Example for 2.8.x : Northampton blogger ErisDS has updated her work on custom navigation for YUI 2 Carousel to support YUI 2.8.x. “Last year I published two parts of a three part tutorial (doh) on the YUI2 Carousel Widget which worked with YUI Carousel 2.7.0. Since that time, a new couple of new versions of the YUI2: Carousel widget have been released (2.8.0 and 2.8.1), and it seems my examples do not work with the updated code. This post covers the issues, the reasons why they occur and how to resolve them.” Check out the full post here . #
  
• Tweet of the Week : From @bartt : “Being able to use #YUI on both client & server is so nice. JavaScript + my favorite library on both sides of the fence == !context switch.” #
  

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

YUIConf 2010: Early-bird registration ends this week

An awesome lineup is in place for YUIConf 2010 , which will be held at Yahoo!'s Sunnyvale, CA campus this November 8-10. Douglas Crockford will be back with a new talk entitled “Project Future”, and Dion Almaer and Ben Galbraith will be moderating a panel on the future of the discipline. We have a stellar lineup of speakers, including Christian Heilmann, Dav Glass, and Nicholas Zakas, taking the podium this year on topics spanning YQL, NodeJS, and YUI:

• An Introduction to YQL
• YQL + YUI: Building End-to-End Applications
• Building YQL Open Data Tables with YQL Execute
• Using (Not Abusing) YQL for Caching, Filtering and Collating Data
• NodeJS + YUI 3
• Using NodeJS and YUI 3 for Server or Browser Side View Rendering
• Avoiding Spaghetti Code with Server-Side JavaScript
• Understanding Progressive Enhancement with YUI: Write Less, Achieve More
• Internationalizing Applications Using YUI 3
• Editor: The Next Generation
• AutoComplete: Deep Space Nine
• The Journey from Idea to Functioning Widget in YUI 3
• Finger Tips: Lessons Learned From Building a Touch-Based Experience
• and much, much more!

Be sure to sign up this week to receive the early-bird rate of $35. After October 8, tickets cost $50.

For folks traveling from outside the Bay Area, we have made available Yahoo! rates at a couple nearby hotels. Check out http://yuilibrary.com/yuiconf2010/ for more details.

CC photo of Dion Almaer by seanosh on Flickr.

Update: The early-bird price was incorrect. Tickets cost $35 through October 8.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!