Yahoo! User Interface Blog (YUIBlog)

Yui ist Hiring

29. April 2011 um 12.58 Uhr von Jenny Donnelly | In Entwicklung , Frontend Engineering Jobs bei Yahoo | 2 Kommentare

Wir suchen einen Senior Frontend Engineer suchen, um die YUI Team beitreten! Sie müssen ein Experte auf JavaScript und sehr versiert in verschiedenen Front-End-Technologien zu sein. Sie lieben die Lösung komplexer Probleme in großem Maßstab, wissen, was es um robuste und intuitive APIs Design nimmt, und umarmen die Best Practices von Performance, Sicherheit, Barrierefreiheit und Usability. Sie haben auch hervorragende kommunikative Fähigkeiten besitzen viel Liebe zum Detail und sind unabhängig und einfallsreich.

Minimale beruflichen Qualifikationen:

• Expert-Level JavaScript, HTML-und CSS-Fähigkeiten.
• Nachgewiesene Erfahrung die Erstellung wiederverwendbarer Komponenten, die modulare JS, performant und wartbar sind.
• Eine Leidenschaft für den Aufbau und die Evangelisierung ein Weltklasse-Front-End-Bibliothek, die Millionen von Menschen jeden Tag auswirkt.
• Die Vertrautheit mit Open-Source Software-Projekte, insbesondere YUI.
• Informatik oder vergleichbarer Abschluss Berufserfahrung.

Bevorzugte beruflichen Qualifikationen:

• Nachgewiesene fundiertes Fachwissen in einem oder mehreren Front-End-Domains wie Mobile, Performance, Server-Side JavaScript oder Internationalisierung.

Wenn das klingt wie Sie, schicken Sie bitte Ihren Lebenslauf und Ihr Anschreiben auf yui-jobs (at) yahoo-inc (dot) com.

Über Yahoo!

Denken Sie beeinflussen 1 aus jeden 2 Personen online - in innovative und einfallsreiche Weise, die einzigartig sind Yahoo!. Wir tun nur so, dass jede und jeden Tag, und du könntest auch. Schließlich ist es groß Denkern wie Ihnen, die nächste Generation von Internet-Erfahrungen für Verbraucher und Werbetreibende auf der ganzen Welt schaffen wird. Jetzt ist die Zeit, die Welt zu zeigen, was du hast. Setzen Sie Ihre Ideen, um für über eine halbe Milliarde Menschen zu arbeiten.

Yahoo! Inc. ist eine der Chancengleichheit fördert. Für weitere Informationen oder für alle unsere Öffnungen suchen besuchen Sie bitte http://careers.yahoo.com .

Finden Gespräche: Bloglines | technorati

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

Bei der Bekanntgabe YUI Compressor 2.4.6

26. April 2011 um 10:09 Uhr von Stoyan Stefanov | In Entwicklung , Leistung | 10 Kommentare

Wir freuen uns, die sofortige Verfügbarkeit der Version 2.4.6 des verkünden YUI Compressor . Diese Version enthält vor allem Updates im Zusammenhang mit der Verarbeitung von Compressor CSS Minification und führt die Stapelverarbeitung von mehreren Dateien mit einem einzigen Befehl.

CSS Minification

Highlights zählen:

• Zahlreiche Bugs behoben, die den Kompressor und / oder das entstehende minimierte Dateien zu brechen.
• Hinzugefügt Dokumentation darüber, was genau das tut minifier und auch welche CSS-Hacks es verträgt.
• Es gibt einen JavaScript Hafen von CSS min in Fall ist es besser geeignet für den Build-Prozess. Hier ist auch ein Test Web-UI , die die JavaScript-Port, wo Sie mit dem minifier experimentieren können verwendet.
• Eine beträchtliche Anzahl von neuen Tests hinzugefügt werden (Sie können aber noch mehr hinzu ).
• Sicherer Umgang mit einigen CSS-Eigenschaften, die immer mehr Annahme wie Media Queries und CSS3-Transformationen werden.

Batch-Verarbeitung

Eine weitere willkommene Ergänzung zu Compressor ist, dass sie kann jetzt mit Gruppen von Dateien. Dies kann erheblich verringern die Zeit, Ihren Build-Prozess dauert, besonders wenn Sie eine große Anzahl von Dateien zu minify haben.

Zum Beispiel die folgenden Befehle minify alle .js und .css -Dateien und Schreiben der minimierte Dateien mit einem "-min.css" Suffix.

  $ Java-jar yuicompressor.jar-o '. Css $:-min.css' * CSS.
 $ Java-jar yuicompressor.jar-o '. Js $:-min.js' * js. 

Dank geht an Stephen Woods und dem Flickr-Team für dieses Feature!

Links

YUI Compressor 2.4.6 steht ab sofort zum Download . Fühlen Sie sich frei, uns zu helfen durch einen Bug oder Feature-Request , Schreiben neuer Tests , Gabelung den Code oder den Beitritt zur Konversation .

Finden Gespräche: Bloglines | technorati

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

Direction-freundliche Navigation Bar

25. April 2011 um 09.12 Uhr von Thierry Koblentz | In CSS 101 , -Entwicklung | 4 Kommentare

Ich stieß vor kurzem auf einer horizontalen Navigationsmenü mit Links nach rechts ausgerichtet. Wie zu erwarten, es war ein Listenelement mit float:right und die Listenelemente mit float:left . Auch wenn es nichts falsch mit diesem Ansatz, inspiriert es mich an dieser Stelle besprechen nehmen Richtwirkung für das Layout.

Die Kosten für die Floating Elements

Schwimmer haben keine Vorstellung von Richtwirkung, sie müssen nicht wie Inline-Elemente oder Spalten der Tabelle (für die die Arbeit dir -Attribut ist ein Wundermittel). Mit Schwimmern, müssen Autoren einen Mechanismus einzuführen, zu "tauschen" Werte, wenn die Änderungen in der Benutzeroberfläche ( ltr vs rtl ).

Also anstelle von float , können Autoren favorisieren inline-block . Hier ist ein einfaches Beispiel:

 ul { text-align: end; text-align: right\9; *text-align: right; } li { display: inline; } a { display: inline-block; padding: 5px 15px; margin: 0 5px; } 

Beachten Sie, dass mit " \ 0 "(ohne Leerzeichen) anstelle von" \9 "kümmern würde Opera nehmen, aber vielleicht nicht so zukunftssicher, da" sein \9 "(nur IE).

Wie dieser Demo-Seite zeigt in Chrome, Safari und Firefox, die inline-block -Technik macht das Layout-Modus schriftlich angewiesen (die Richtung des Flusses entspricht dem Wert der dir Attribut oder dem Ausgangswert, wenn keine Richtung angegeben wird). Für andere UA s, und weil der IE die mangelnde Unterstützung für das Attribut-Selektor (dh html[dir="rtl"] ), müssen die Autoren einen Haken im Markup hinzufügen, um auf die Änderung der Richtung gerecht zu werden. Zum Beispiel, für die volle A-Grade-Kompatibilität:

Für die Schwimmer-Technik:

 .rtl ul { float: left; } .rtl ul li { float: right; } 

Für die Inline-Block-Technik:

 .rtl ul { text-align: left\9; /* IE8/9 */ *text-align: left; /* IE5/6/7 */ } 

text-align: start | end

Im Gegensatz zu left und right , start und end sind Schreib-Modus abhängig Stichworte. Im Englischen start Karten zu left und end Karten zu right . Unter Berufung auf start und end , statt left und right ermöglicht es einige Browser, um den Austausch (tun ltr / rtl ) automatisch.

Die Unterschiede zwischen den Browsern und Techniken

In Browsern, die keine Unterstützung " start / end "(IE, Opera)

schweben Technik: Swapping Richtung ändert nichts

inline-block-Technik: Swapping Richtung ändert nichts an der Ausrichtung des Menüs, aber Links werden in der richtigen Reihenfolge angezeigt

In Browsern, die Unterstützung "zu tun start / end "(Chrome, Safari, Firefox)

schweben Technik: Swapping Richtung ändert nichts

inline-block-Technik: Swapping Richtung genügt, um die Richtung der sowohl im Menü wechseln und die Links

Das ist es! Das nächste Mal müssen Sie Stilelemente horizontal, denken Sie daran, geben display:inline-block oder display:table versuchen.

Finden Gespräche: Bloglines | technorati

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

YUI 3 "Building Blocks, Module und Anwendungen" Workshop nach Portland kommen, und kostenlos!

19. April 2011 um 15.32 Uhr von Luke Smith | In Entwicklung , YUI Veranstaltungen | 6 Kommentare

YUI, zusammen mit dem Yahoo! Developer Network , ist begeistert, ein kostenloses sponsern YUI 3 "Building Blocks, Module und Anwendungen"-Workshop am SONNTAG, 1 Mai, 2011 in Portland, Oregon. Dies ist eine großartige Möglichkeit, um Kick-Off-Zeit bei JSConf , aber Sie brauchen kein Ticket JSConf an dem Workshop teilzunehmen. Alle sind zu dieser kostenlosen Veranstaltung eingeladen!

Ich werde von anderen Yahoo! verbunden werden Gonzalo Cordero für eine ganztägige von Hands-on Training, wo Sie lernen, wie man Stateful-Klassen, Plugins und Widgets mit den YUI 3 Infrastruktur-Komponenten bauen wird, packen Sie diese in wiederverwendbare Module, und montieren sie in einer einfachen Anwendung. Der Morgen-Klasse wird auf das, was die Bausteine ​​(wie zB Base und Widget) zu bieten haben und wann und wie man sie benutzt zu konzentrieren. Der Nachmittag Klasse wird in fortgeschrittenen Klasse Konfigurationen erhalten, die Einrichtung der Loader zu Ihrem Gastgeber-Module zu kombinieren, und die Einrichtung Anwendungs-Steuereinheiten, um Ihre verschiedenen Modul-Klassen und APIs über benutzerdefinierte Ereignisse beziehen.

Plätze sind begrenzt, so reservieren Sie Ihren Platz heute auf http://training.bocoup.com/PreJSConf-2011/

Finden Gespräche: Bloglines | technorati

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

Quick Edit-Modus für YUI 3 DataTable

19. April 2011 um 15.20 Uhr von John Lindal | In Entwicklung , YUI 3 Galerie | 1 Kommentar

Auch wenn YUI 3 DataTable verfügt noch nicht über Inline-Editing von einzelnen Zellen, ist es relativ einfach, Quick Edit-Modus zu implementieren. Die QuickEdit Plugin für DataTable in der YUI 3 Gallery erlaubt es, alle sichtbaren Werte in einer DataTable gleichzeitig bearbeitet werden.

( Klicken Sie auf den Screenshot, um bei diesem Beispiel zu spielen .)

Überblick

Wie bei der YUI-2-Version , ist der Kerngedanke der Quick Edit-Modus zu tauschen alle Formatierer Zelle durch neue ersetzt, die die Zellen mit Formular-Elemente, z. B. Eingabefelder oder Dropdown-Listen zu füllen. Dies erfolgt, wenn start() wird aufgerufen, bezogen auf das nachfolgend beschriebene Konfiguration. Nachdem der Benutzer fertig ist, können Sie getChanges() , um die geänderten Werte zu bekommen und dann beharren sie. Um Quick Edit-Modus zu beenden, rufen Sie cancel() . (Es heißt stornieren statt zu stoppen, um Sie daran zu erinnern, dass sie alle Änderungen verworfen.)

Da der Quick Edit Galerie-Modul ist ein Plugin für DataTable, müssen Sie das Netzkabel angeschlossen, um Ihre DataTable bevor Sie sie verwenden können:

 my_table.plug (Y.Plugin.DataTableQuickEdit);

Dieser speichert das Plugin in der qe Mitglied der DataTable, so müssen Sie das Plugin-Funktionen wie folgt aufrufen:

 my_table.qe.start ();

Konfiguration

Quick Edit fügt zwei neue Konfiguration Attribute auf alle Spalten: quickEdit und qeFormatter .

Wenn einer Spalte quickEdit Eigenschaft definiert ist, wird die Spalte editierbar sein im Quick-Edit-Modus. Um alle Standardeinstellungen zu übernehmen, können Sie einfach festlegen quickEdit:true . Für mehr Kontrolle, können Sie ein Objekt mit folgenden Eigenschaften übergeben:

formatter

Die Zelle Formatierer, die eine entsprechende Formularfeld machen wird: <input type="text">, <textarea> oder <select>. Standardmäßig wird die Zelle Formatierer Y.Plugin.DataTableQuickEdit.textFormatter wird für alle Zellen verwendet werden, um Input-Elemente zu erzeugen. Um einen zu bekommen textarea Element, konfigurieren Sie eine Spalte zu verwenden Y.Plugin.DataTableQuickEdit.textareaFormatter statt.

validation

Validation Konfiguration für jedes Feld in der Spalte.

css

CSS-Klassen kodieren grundlegende Validierungsregeln:

yiv-required

Der Wert muss nicht leer sein.

yiv-length:[x,y]

String muss mindestens x Zeichen und höchstens y Zeichen. Mindestens eines von x und y angegeben werden.

yiv-integer:[x,y]

Der ganzzahlige Wert muss mindestens x und höchstens y . x und y sind optional.

yiv-decimal:[x,y]

Der Dezimalwert muss mindestens x und höchstens y . Exponenten sind nicht erlaubt. x und y sind optional.

fn

Eine Funktion, mit der DataTable als deren Anwendungsbereich und die Zelle Formular-Element als Argument aufgerufen. Gibt true zurück, wenn der Wert gültig ist. Andernfalls nennen this.displayMessage(...) , um einen Fehler anzuzeigen und dann false zurück.

msg

Eine Karte der Arten von Nachrichten, die angezeigt wird, wenn eine basische oder regex Gültigkeitsregel versagt werden. Die gültigen Typen sind: required , min_length , max_length , integer , decimal , und regex . Es gibt keinen Standardwert für Typ regex , so müssen Sie eine Nachricht angeben, wenn Sie einen Regex Validierung konfigurieren. Die Standard-Fehlermeldungen für die anderen Typen sind in gespeichert Y.FormManager.Strings (bereitgestellt von Galerie-formmgr-CSS-Validierung ) und kann überschrieben werden und / oder lokalisierte.

regex

Regulärer Ausdruck, dass der Wert erfüllen müssen, um als gültig betrachtet werden.

Manchmal muss eine nicht editierbare Spalte anders bei Quick Edit-Modus wiedergegeben werden. Das beste Beispiel ist eine Spalte mit einem Link, da die Navigation von der Seite, während in Quick Edit-Modus können verheerend sein. Um die Verbindung während der Quick Edit entfernen, konfigurieren qeFormatter für die Spalte zu sein Y.Plugin.DataTableQuickEdit.readonlyLinkFormatter . Für E-Mail-Adressen verwenden Y.Plugin.DataTableQuickEdit.readonlyEmailFormatter . Sie können auch schreiben Sie eigene benutzerdefinierte, Nur-Lese-Formatierer. Folgen Sie einfach den normalen Regeln für den Aufbau einer DataTable Zelle Formatierer.

Fehlende Funktionen

Aufgrund eines Fehlers in YUI 3.3.0 DataTable , die td weitergegeben Element einer Spalte Formatierer ist eigentlich aus der vorherigen Spalte. Das machte es zu mühsam, Kopie nach unten zu unterstützen, wo eine Taste in der ersten Zeile können Sie kopieren Sie den Wert nach unten zu allen anderen Zeilen.

Der Fehler auch eine komplette Überarbeitung der grundlegenden Quick Edit Zelle Formatierer, um Text statt Manipulation des DOM zurück benötigt. Deshalb benutzerdefinierte Zelle Formatierer nicht offiziell in dieser ersten Version nicht unterstützt. Wenn Sie abenteuerlustig sind, können Sie dennoch bauen sie, aber bedenken Sie, dass Sie brauchen, um sie neu zu schreiben, einschließlich dem Hinzufügen der Unterstützung für Kopie nach unten, sobald der Fehler in DataTable festgelegt ist.

Über den Autor: John Lindal ( @ jafl5272 auf Twitter) ist einer der leitenden Ingenieure bauen das Fundament, auf dem Yahoo! APT wird gebaut. Zuvor arbeitete er auf dem Yahoo! Publisher Network.

Finden Gespräche: Bloglines | technorati

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

YUI: Öffnungszeiten Do 21. April

19. April 2011 um 01.39 Uhr von Luke Smith | In Entwicklung , Öffnungszeiten | Keine Kommentare

YUI Loader Remote-Service-

Für eine Weile jetzt, Reid Burke wurde auf einem Node.js basierter Dienst gearbeitet, um den Prozess beschleunigen, der Berechnung und anfragende Modul-Abhängigkeiten in YUI 3. Er hat es ziemlich zugeknöpft, um an dieser Stelle zu schließen, und will teilen, was er in sich hat und erhalten Sie Ihre Ideen für das, was würde es sogar awesomer.

Das Problem

Seit einiger Zeit haben wir bekannt, dass zwar wirklich praktisch für Entwickler, die Y.use( modules ,...) -Methode eine unnötige Verzögerung bei der Spin-up Zeit von Ihrer Implementierung Code führt. Es stellt sich heraus, dass es eine Menge Arbeit, Berechnung Abhängigkeit Bäumen ist, und die Metadaten allein kann auf den gesamten Speicherbedarf Ihrer Seite belastend. Die traditionelle Methode der einschließlich der YUI-Seed-Datei ( yui-min.js ), dann Bootstrapping mit YUI().use(...) erste erzählt YUI Loader, um die Modul-Abhängigkeit, die mit Metadaten für die gesamte Bibliothek wird in sattelte laden der Quelle-Loader dann berechnen Sie die vollständige Liste der benötigten Module auf der Grundlage Ihrer use(...) Aussage auf dem Client-Rechner.

Die Lösung

Der Remote Loader-Service bewegt sich diese Berechnung auf den Server, so dass Ihr Code schneller initialisieren und die Reduzierung Ihrer Seiten-Client-Speicher-Profil, weil die Metadaten und Loader nicht mehr auf dem Client-Rechner erforderlich. Es dient auch als Combo-Handler, der Rückkehr alle den Code direkt, anstatt den Umweg über den yahooapis Combo-Dienst (weniger Netzwerkverkehr), und fähig ist, auf einem Server in Ihrem Node.js Domäne bereitgestellt.

Der Plan ist, Reid Demo haben, was funktioniert heute, darunter einige ziemlich beeindruckende Statistik von seiner Verwendung auf yuilibrary.com , dann öffnen Sie den Anruf an Rückmeldungen und Anfragen. Kommen Sie heraus, was die Zukunft der YUI Loader ist wie die Suche!

Zeit & Details

Wir werden Online von 10.00 bis 11.00 Uhr PDT am Donnerstag. Die Verbindungsdaten sind die gleichen wie immer.

1. Wählen Sie sich in 1-888-371-8922 (Skype funktioniert gut für Nicht-US-Teilnehmer *)
2. Geben Sie den Teilnehmer-Code 47188953 #
3. Join the Screen-Sharing-Sitzung (dies wird Sie auffordern, die Adobe Connect-Plugin zu installieren, wenn dies Ihre erste Mal benutzen)

* - Wenn Skype ist keine Option, mailen Sie mir oder fangen mich (ls_n) im IRC-Channel # yui auf Freenode für eine lokale Nummer.

Finden Gespräche: Bloglines | technorati

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

Bei der Bekanntgabe YUI 2.9.0

13. April 2011 um 05.28 Uhr von Jenny Donnelly | In Entwicklung | 11 Kommentare

Die YUI-Team ist begeistert, dass die Freisetzung von YUI Version 2.9.0 bekannt zu geben. YUI 2.9.0 ist das letzte Bugfix-Release auf der YUI-2-Code Linie markiert den Übergang in den Wartungsmodus. Auch in Zukunft erwarten, Releases, bestehend aus nur kritische Bugfixes oder Updates für Browser-Kompatibilität Fragen, die sich aus Aktuelles zu Browsern finden Sie in der GBS . Wir sind wirklich aufgeregt, um besser konzentrieren unsere Aufmerksamkeit auf die bevorstehende Veröffentlichung von YUI 3.4.0.

Um eine Vorstellung von den Veränderungen in YUI 2.9.0 enthalten bekommen, können Sie überprüfen die ReadMe Digest , welche einen Überblick über alle Ergänzungen von Komponenten-Entwickler, um ihre jeweiligen Readme-Dateien für diese Version gemacht. Sie können auch die Liste der Karten fest in YUI 2.9.0 für eine Zusammenfassung der Fehlerkorrekturen und Verbesserungsvorschläge in dieser Pressemitteilung abgeschlossen.

Wir möchten daran erinnern, dass, wie wir den Prozess der Verurteilen YUI 2.x beginnen, alle veröffentlichten Versionen werden weiterhin auf Yahoos EUR gehostet werden und der Code-Basis wird weiterhin auf GitHub.com forkable .

Finden Gespräche: Bloglines | technorati

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