Yahoo! User Interface Blog (YUIBlog)

Screencast: Ross Harmes ist YUI Bundle für Textmate

30. November 2006 um 05.27 Uhr von Eric Miraglia | In Entwicklung , YUI Theater | 14 Kommentare

Lesen Sie weiter Screencast: Ross Harmes ist YUI Bundle für Textmate ...

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

Performance Research, Teil 1: Was die 80/20 Regel erzählt Reduzierung HTTP Requests

28. November 2006 um 12.56 Uhr von Tenni Theurer | In Entwicklung , Leistung | 128 Kommentare

Es ist kein Geheimnis, dass die Nutzer schneller Web-Seiten bevorzugen. Ich arbeite in einem engagierten Team auf die Quantifizierung und Verbesserung der Leistung von Yahoo! Produkte weltweit konzentriert. Als Teil unserer Arbeit führen wir Experimente im Zusammenhang mit Web-Seite Leistung. Wir teilen unsere Erkenntnisse, so dass andere Front-End-Ingenieure mit uns bei der Beschleunigung die User Experience im Web.

Die 80/20 Regel Performance-

Vilfredo Pareto, ein Ökonom in den frühen 1900er Jahren schuf der berühmte Beobachtung von denen 80% des Volksvermögens zu 20% der Bevölkerung gehörten. Dies wurde später verallgemeinert, was gemeinhin als das Pareto-Prinzip (auch als 80/20-Regel bekannt), die für jedes Phänomen, 80% der Folgen von 20% der Ursachen kommen Staaten bezeichnet. Wir sehen dieses Phänomen in der Softwareentwicklung, wo 80% der Zeit in nur 20% des Codes verbracht wird. Wenn wir unsere Anwendungen zu optimieren, wissen wir auf, dass 20% des Codes konzentrieren. Die gleiche Technik soll auch angewendet werden, wenn die Optimierung Webseiten. Die meisten Performance-Optimierung sind heute auf die Teile, die das HTML-Dokument (Apache, C + +, Datenbanken, etc.) generieren, aber die Teile nur zu etwa 20% der Benutzer die Reaktionszeit beitragen. Es ist besser, auf die Optimierung der Teile, die die anderen 80% beitragen können.

Mit einem Packet-Sniffer, entdecken wir, was sich in dem anderen 80%. Abbildung 1 ist eine grafische Darstellung, wo die Zeit verbracht wird geladen http://www.yahoo.com mit einem leeren Cache. Jeder Balken steht für eine bestimmte Komponente und ist in der Bestellung durch den Browser gestartet werden gezeigt. Der erste Balken ist die Zeit für den Browser ausgegeben, um nur die HTML-Dokument abrufen. Beachten Sie nur 10% der Zeit hier ist der Browser die HTML-Seite Anfrage ausgegeben, und für Apache zusammenfügen die HTML und gibt die Antwort an den Browser zurück. Die anderen 90% der Zeit damit verbracht holen andere Komponenten in die Seite einschließlich der Bilder, Scripts und Stylesheets.

Tabelle 1 zeigt populäre Websites Ausgaben zwischen 5% und 38% der Zeit Download des HTML-Dokuments. Die anderen 62% bis 95% der Zeit wird damit verbracht, HTTP-Anfragen, um alle Komponenten in das HTML-Dokument (z. B. Bilder, Scripts und Stylesheets) zu holen. Die Auswirkungen der mit vielen Komponenten der Seite wird durch die Tatsache, dass Browser in nur zwei oder vier Komponenten herunterladen parallel per hostname, abhängig von der HTTP-Version der Antwort und der Browser des Benutzers weiter verschärft. Unsere Erfahrung zeigt, dass die Verringerung der Anzahl von HTTP-Anfragen hat den größten Einfluss auf die Verringerung der Reaktionszeit und ist oft die einfachste Leistungsverbesserung zu machen.

Sollte nicht alles in den Cache des Browsers gespeichert sowieso?

Der Abschluss ist der gleiche: Die Reduzierung der Anzahl von HTTP-Anforderungen hat den größten Einfluss auf die Verringerung der Reaktionszeit und ist oft die einfachste Leistungsverbesserung zu machen. Im nächsten Artikel werden wir die Auswirkungen der Caching-Look, und einige überraschende Erkenntnisse der realen Welt.

Haftungsausschluss: Design Imperative diktieren visuellen Reichtum müssen gegen diesen Antrag-Reduktionsziel abgewogen werden. Wenn Sie visuellen Reichtum benötigen, können weitere Schritte eingeleitet werden - Aggregation JS-Dateien mit Hilfe von CSS-Sprites, etc. - aber visuellen Reichtum nicht dazu neigen, im Widerspruch zu einer schlanken HTTP-Request-Pipeline.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

Video: Douglas Crockford, "Advanced JavaScript"

27. November 2006 um 10.59 Uhr von Eric Miraglia | In Entwicklung , YUI Theater | 34 Kommentare

Letzten Monat konnte ich ein paar Videos von einem genommen Douglas Crockford Präsentationen auf Frontend-Engineering ( Video: Douglas Crockford, "An Inconvenient API: Die Theorie der Dom" ). Wer Douglas tief tauchen Sie ein in die DOM genossen werden auch in seiner "Advanced JavaScript" Präsentation, nun öffentlich verfügbar auf Yahoo! Video interessiert. In dieser Präsentation - der dritte einer dreiteiligen Reihe, die er bei Yahoo! worden Lehre - Douglas sieht genau an Code-Muster, aus dem JavaScript-Programmierer in Authoring ihre Anwendungen wählen können. Er vergleicht vertraut Konstrukten wie dem pseudoklassische Pattern mit mehr einzigartige Muster wie die parasitäre Pattern, dass (so argumentiert er) mehr run "mit dem Strich" von JavaScript. Als Brendan Eich bei Yahoo sprach in diesem Sommer beschrieb er Douglas als "Yoda von Lambda-Programmierung und JavaScript", nachdem ich "Advanced JavaScript", können Sie eine klare Vorstellung davon, wo dieses Gefühl kommt von können.

Es trägt zu wiederholen, dass Douglas 'Ideen und Perspektiven seiner eigenen sind und dass die vielen Fehler in Bildschirmschreiber Handwerkskunst sind meine.

• Teil 1: 31 Minuten
• Teil 2: 25 Minuten
• Teil 3: 11 Minuten
• Vortragsfolien zum Download (zipped PowerPoint-Datei)

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

Graded Browser Support: Q4 aktualisieren

15. November 2006 um 01.42 Uhr von Nate Koechley | In Entwicklung | 17 Kommentare

Etwa alle drei Monate aktualisieren wir die Tabelle detailliert, welche Browser A-Klasse Unterstützung erhalten nach Graded Browser Support . In Verbindung mit der gestrigen YUI Update-Version , hier ist unser Browser-Unterstützung Update für Q4 2006.

Zusammenfassend: A-Klasse-Support beginnt für Firefox 2.0 und ist für IE7 bekräftigt. A-Klasse-Unterstützung ist für IE 5.5 und Firefox 1.0 eingestellt. Selten verwendete Gecko-Derivate (zB Netscape und Mozilla Application Suite) erhalten nun X-Grade statt A-Klasse zu unterstützen. Opera 9 erhält nun A-Klasse-Unterstützung auf weitere Plattformen.

In Kugel bilden, sind hier alle Änderungen in diesem Update:

1. Wiederholung der A-Klasse zu unterstützen, IE 7, Win (XP)
2. Beendigung der A-Klasse Support, IE5.5, Win
3. Initiation der A-Klasse Support, Firefox 2.x, Win / Mac.
4. Beendigung der A-Klasse Support, Firefox 1.0.x, Win / Mac.
5. Ausbau der A-Klasse zu unterstützen, Opera 9.x, Win / Mac
6. Beendigung der A-Klasse zu unterstützen, Mozilla App Suite, Win / Mac
7. Beendigung der A-Klasse zu unterstützen, Netscape, Win / Mac

Obwohl Sie immer muss sich auf die offizielle GBS Tabelle auf der Yahoo! Developer Network gehostet , habe ich einen Schnappschuss von diesem Quartal Diagramm für die Nachwelt willen enthalten:

	Win 98	Win 2000	Win XP	Mac 10.3.x	Mac 10.4
IE 7.0			A-Klasse
IE 6.0	A-Klasse	A-Klasse	A-Klasse
Firefox 2.0 .*	A-Klasse	A-Klasse	A-Klasse	A-Klasse	A-Klasse
Firefox 1.5 .*	A-Klasse	A-Klasse	A-Klasse	A-Klasse	A-Klasse
Opera 9 .*	A-Klasse	A-Klasse	A-Klasse	A-Klasse	A-Klasse
Safari 2.0 *					A-Klasse

Vorausschauend auf das nächste Quartal (2007Q1), werden wir reflektieren inkrementelle Releases der unterstützten Browser aber keine wesentlichen Änderungen zu erwarten sind.

Thanks,
Nate

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

YUI-Version 0.12.0: TabView Control, verbesserte API Dokumentation und vieles mehr

13. November 2006 um 18.35 Uhr von Eric Miraglia | In Entwicklung | 23 Kommentare

Heute haben wir die Version 0.12 des YUI-Bibliothek. Hier sind die Highlights:

• Die TabView Steuerung : von YUI Geschrieben Animationen und Dom Autor Matt Sweeney , diese dynamische Register-Lösung ist das neueste YUI hinaus und bietet solide Unterstützung sowohl für progressive Verbesserung und für Hochglanz-Reichtum. Check out Matts Liste von TabView Beispiele für eine Idee von dem, was die neue Steuerung kann; Quelltext an den Beispielen zu sehen, wie sie umgesetzt sind.
• Verbesserte Dokumentation: YUI-Entwickler Adam Moore ( Event- , Drag & Drop , Slider , TreeView ) hat ein neues Werkzeug zum Erzeugen erstellt API-Dokumentation , so dass wir einheitliche, vernetzte API docs mit integriertem generieren AutoComplete -powered Suche Kontrolle . Die neue API-Dokumente bieten Entwicklern ein klareres Bild von Klassenstrukturen und verfügen über separate Kategorisierung für Immobilien-und Konfigurationsmöglichkeiten. Sie können nie wieder Sheets Cheat wieder ...
• ... Aber falls Sie noch wie Cheat Sheets: Cheat Sheets für Version 0.12 aktualisiert und enthalten neue Blätter für TabView und Nate Koechley CSS- Reset- , Schriften -und Grids Stiftung. Sie können alle YUI Cheat Sheets zum Download aus dem YUI-Bibliothek Website.
• Apropos CSS Grids: Nate hat die Grids Paket mit gebackenen Unterstützung für 750px, 950px rev'd und Full-Ansichtsfenster ("liquid") Layouts. Grids 0,12 verdreifacht die Anzahl der unterstützten Layouts und noch Gewichte in unter 3KB vor gzip. Wir haben gebaut die YUI-Website auf den Reset / Fonts / Grids Stiftung jetzt und wir machen Gebrauch Nutzung der neuen Full-Ansichtsfenster zu unterstützen.
• Verbesserungen in der Bibliothek: Es gibt Verbesserungen in der Bibliothek zu finden, von Ereignis 's neue onContentReady Methode zu einer deutlich verbesserten Calendar Control mit einer vereinfachten Oberfläche zur Erstellung multi-Monats-Kalender zeigt (wenn Sie von einer früheren Version des Upgrades sind Kalender, bitte zuerst die Schritt-für-Schritt-Upgrade-Anleitung ). Für eine vollständige Liste der Änderungen finden Sie in den Release Notes Dokumentation, dass die Verteilung begleitet.

Wir folgen mit mehr Informationen über einige dieser Themen später in der Woche. Denn jetzt, bitte machen Sie sich auf SourceForge zu den neuesten YUI-Distribution herunterladen, finden Sie in der Release-Notes in der Verteilung für eine vollständige Manifest der Änderungen in der gesamten Bibliothek. Wie immer, die YUI-Seite im Yahoo! Developer Network hat alle aktuellen Dokumentation arbeiten.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

JavaScript wir kaum new Ya

13. November 2006 um 09.21 Uhr von Douglas Crockford | In Entwicklung | 54 Kommentare

JavaScript ist eine prototypische Sprache, aber es hat einen new Betreiber, um es irgendwie aussehen wie eine klassische Sprache versucht. Das neigt dazu, Programmierer verwechseln, was zu einigen problematischen Programmierung Mustern.

Sie müssen nie benutzen new Object() in JavaScript. Verwenden Sie das Objekt-Literal {} statt. Ebenso nicht benutzen new Array() , verwenden Sie die Array-Literal [] statt. Arrays in JavaScript arbeiten nichts, wie die Arrays in Java, und die Verwendung der Java-ähnliche Syntax wird verwirren.

Verwenden Sie keine new Number , new String oder new Boolean . Diese Formen erzeugen unnötige Objekt-Wrapper. Verwenden Sie einfach einfache Literale statt.

Verwenden Sie keine new Function zu Funktion Werte zu schaffen. Verwenden Sie die Funktion Ausdrücke statt. Zum Beispiel,

  frames [0]. onfocus = new Function ("document.bgColor = 'antiquewhite'") 

ist besser als schriftliche

  frames [0] onfocus = function () {document.bgColor = 'antiquewhite';}.; 

Die zweite Form kann der Compiler die Funktion Körper früher zu sehen, so dass jeder Fehler in es früher erkannt werden. Manchmal new Function wird von den Leuten, die nicht verstehen, wie inneren Funktionen gearbeitet.

  selObj.onchange = new Function ("dynamicOptionListObjects [" +
         dol.index + "] ändern (this)."); 

Wenn wir die Funktionen selbst in Strings zu halten, kann der Compiler nicht sehen. Wenn wir die Funktionen selbst als String-Ausdrücken zu halten, können wir nicht sehen, wie sie auch nicht. Es ist besser, nicht in Unwissenheit Programm. Durch eine Funktion, die eine Funktion gibt, können wir uns ausdrücklich an die Werte wollen wir binden passieren. Dies erlaubt uns, eine Reihe von initialize selObj in einer Schleife.

  selObj.onchange = function (i) {
     zurück function () {
         . dynamicOptionListObjects [i] ändern (this);

     };
 } (Dol.index); 

Es ist nie eine gute Idee, setzen new direkt vor der function . Zum Beispiel new function bietet keinen Vorteil bei der Konstruktion neuer Objekte.

  myObj = new function () {
     this.type = "Kern";
 }; 

Es ist besser, mit einem Objekt-Literal. Es ist kleiner, schneller.

  myObj = {
     Typ: "Kern"
 }; 

Wenn wir machen ein Objekt mit Methoden, die auf private Variablen und Funktionen gebunden sind, ist es noch besser, lassen Sie einfach das new Präfix.

  var foo = new function () {
     Funktion ProcessMessages (message) {
         alert ("Nachricht:" + message.content);
     }
     this.init = function () {
         abonnieren ("/ MyTopic", this, ProcessMessages);
     }
 } 

Durch die Verwendung von new , die Funktion aufzurufen, hält das Objekt auf einem wertlosen prototype -Objekt. Das Abfälle Speicher ohne Verrechnung Vorteil. Wenn wir nicht über den new , wissen wir nicht halten verschwendet prototype -Objekt in der Kette. Anstatt also wir rufen Sie die Factory-Funktion der richtige Weg, mit () .

  var foo = function () {
     Funktion ProcessMessages (message) {
         alert ("Nachricht:" + message.content);
     }
     return {
         init: function () {
             abonnieren ("/ MyTopic", this, ProcessMessages);
         }
     };
 } ();

So die Regel ist einfach: Das einzige Mal, dass wir die Verwendung sollten new Betreiber ist es, eine pseudoklassische Constructor-Funktion aufrufen. Beim Aufruf einer Konstruktor-Funktion, die Verwendung von new ist obligatorisch.

Es gibt eine Zeit, um new , und eine Zeit, nicht.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!