Yahoo! User Interface Blog (YUIBlog)

YUI 2.9.0 Release Candidate ist ab sofort erhältlich

30. März 2011 um 11.02 Uhr von Jenny Donnelly | In Entwicklung | 4 Kommentare

Die YUI 2.9.0 Release Candidate ist nun für die Überprüfung durch die Gemeinde zur Verfügung. Das Team wird unter den nächsten Tagen eine endgültige Testrunde zu tun, so möchten wir unsere Entwickler-Community zu ermutigen, jede feeback zu uns bis zum Ende der Woche.

Der Release Candidate, YUI 2.9.0 PR4, wird sowohl über die verfügbaren EUR sowie ein Download-Paket zum Testen. Bitte Feedback von freitag 1 April auf allen Fehlern und Regressionen können Sie zu finden.

Finden Gespräche: bloglines | technorati

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

Loader Aufruf an Quorus

24. März 2011 um 09.49 Uhr von Peter Abrahamsen | In Entwicklung , YUI-Implementierungen | 1 Kommentar

Heute würde Ich mag, darüber zu sprechen YUI Loader und wie wir bei Quorus, Inc. , nutzen, um Webseiten Dritter, mit neuen Features auf Abruf bereitzustellen.

Der Code schreiben wir Kräfte verfügt über andere Völker "Seiten, dh wir sind in der wenig beneidenswerten Lage, dass nicht nur keine Kontrolle über die Browser-Umgebung, aber schwere Einschränkungen in wie wir sie verwenden das eigentliche Dokument. Unsere Kunden Setzen Sie einen Quorus Bootstrap-Skript auf ihren Seiten, alles andere für unsere Funktionalität benötigt wird, dynamisch und bei Bedarf geladen. Wir gehen zu heroischen Anstrengungen, um sicherzustellen, dass unsere Elemente, Stile und Skripte nicht verändern das Verhalten von etwas sind wir nicht verantwortlich sind.

Wir begannen unsere Gegenwart Code-Basis vor zwei Jahren, wenn YUI 3 nur unter war formen. Es war eine riskante Entscheidung zu der Zeit zu einer Codebasis, die nicht betroffen wäre beta für mehrere Monate zu verpflichten. Im Nachhinein kann ich mir nicht vorstellen, wie würden wir erreicht haben, was wir ohne ihn haben. Ich habe keinen anderen Rahmen, Komponenten Annäherung an die Macht der Loader, gesehen hat, Attribute und CustomEvent .

Die Quorus Bootstrap Skript, das wir unseren Kunden bieten, ist fast nichts. Seine Aufgabe ist es, nur um den Kern unserer Plattform ohne Blockierung der Rest der Seite zu laden, laden, und die Warteschlange alle API-Aufrufe, bis wir so getan haben. Dieser Kern-Skript-Datei namens stage2, inlines yui , loader und oop , sowie intelligent genug, um zusätzliche Bibliotheken zu laden, um API-Aufrufe, klickt, und andere Bedingungen in der Betriebsumgebung zu reagieren. Die meisten anderen Ressourcen durch eine benutzerdefinierte Combo-Server, benutzerdefinierte Quorus und Lager YUI-Module dient serviert.

Bootstrap : Warteschlangen-API-Aufrufe in der Host-Seite den Code zwischen, wenn es lädt und wenn wir bereit sind, in einem Array auf unsere globale Objekt, QUORUS unterwegs gemacht

 QUORUS._callbacks = []; QUORUS.use = function () { // turn the arguments object into a regular array, // so that it can be stored safely var args = Array.prototype.slice.call(arguments, 0); QUORUS._callbacks.push(args); }; 

Sobald wir bereit sind, API-Aufrufe verarbeiten sind, stage2 läuft sie eins nach dem anderen in Timeouts. Dies stellt sicher, wir liefern Kontrolle regelmäßig an den Browser zurück, die die Benutzerfreundlichkeit stärker auf macht. Das Verhalten ist ein viel wie Y. AsyncQueue, aber einfacher und erfordert keine YUI geladen werden:

 // Put the real 'use' function in place for any subsequent calls: QUORUS.use = function (feature, callback) { YUI.use('module-that-provides-the-feature', function (Y) { // find the API for the requested feature, and pass it to the callback callback(Y.APIs[feature]); // process another pending API call, if any: setTimeout(processAPICall, 0); }); }; // Play catch-up, running each callback in sequence: function processAPICall () { var callback = QUORUS._callbacks.shift(); if (callback) { QUORUS.use.apply(QUORUS, callback); } } // Start processing the queue: processAPICall(); 

Die bootstrap Datei ist, zu diesem Zeitpunkt, meist unveränderlich: es ist etwas, das wir die Hand von einem Kunden, der benötigt einen Monat oder länger auf jede neue Version gaben wir ihnen eine unglaublich lange Zeit für ein agiles Startup-Unternehmen einsetzen können. Die stage2 -Datei, mittlerweile ist klein, Lasten aus unseren eigenen Servern und hat eine kurze Cache Lebensdauer. Dadurch wird sichergestellt, dass keine Endbenutzer eine alte Version für mehr als ein paar Minuten haben. Fast alle anderen Ressourcen, die wir brauchen, sind in dauerhaft cacheable JavaScript-Bibliotheken und CSS-Dateien.

Wenn wir eine neue Version unserer Veröffentlichung des Quellcodes, stage2 automatisch leitet Browser den Download zu starten von einem neuen Standort, sicherzustellen, dass sie nur die neuesten Code verwenden. Dieser Aufbau ermöglicht es uns, Veränderungen schnell zu implementieren, ohne serviert Vermögenswerte öfter als nötig. Dadurch wird nicht nur halten unsere Bandbreite niedrig, aber es bietet eine bessere Benutzererfahrung: Die Ressourcen im Cache sehr schnell geladen werden, während die Seite geladen wird.

Wenn wir anfingen unsere Codebasis heute, mit dem Vorteil der YUI Galerie gibt es eine Reihe von Komponenten, die wir nutzen, um uns das Leben erleichtern könnte. Einer von ihnen ist Eric Ferraiuolo der Basis Component Manager , die mit Verkabelung Komponenten (typischerweise Widgets) auf Anfrage unterstützt. Ein weiterer könnte sein Storage-Lite , um uns zu helfen behalten Zustand der Anwendung auf Seite geladen wird.

Vielen Dank an die YUI-Team für ihre großartige Arbeit, und die Gemeinschaft für ihre Beiträge. Wenn Sie möchten über unsere Ansätze zur Sandbox oder auf die Koordinierung der asynchron geladenen Komponenten zu lesen, lass es mich bitte in den Kommentaren wissen!

Über den Autor: Peter Abrahamsen schreibt Ruby und JavaScript, verwaltet Server-Infrastruktur, und Studien User-Centered Design in Seattle, Washington, USA. Er kann auf gefunden werden IRC als Rainhead.

Finden Gespräche: bloglines | technorati

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

YUI: Öffnungszeiten Mi 23. März

21. März 2011 um 10:15 Uhr von Luke Smith | In Entwicklung , Öffnungszeiten | 4 Kommentare

YUI 3 Kochbuch ersten Blick

Es ist nicht gut bekannt, aber wir haben eine YUI 3 Kochbuch in den Werken und Evan Goer ist der Mann verantwortlich. Evan hat ein technischer Autor seit fast 15 Jahren, was bedeutet, wir vertrauen ihm, einen besseren Job zu schreiben, als wir hätten (wir zur Codierung Stick) zu tun. So in dieser Woche werden wir Ihnen, Evan einzuführen, und geben Ihnen eine Chance zu sehen und Feedback über einige der Buch ursprüngliche Inhalt und Struktur.

Auch in dieser Woche, Steven Roussey wird auf den Anruf werden, Demonstrieren Illuminations-Plugin für FireBug , dass Sie die YUI 3 Objekte hinter dem DOM-Struktur und mehr sehen können.

Zeit & Details

Wir werden Online von 10.00 bis 11.00 Uhr PDT Mittwoch. Die Verbindungsdaten sind die gleichen wie gewohnt.

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 (diese werden Sie aufgefordert, die Adobe Connect-Plugin zu installieren, wenn dies Ihre erste Mal benutzen)

* - Wenn Skype nicht möglich ist, mailen Sie mir oder catch me (ls_n) in der # yui IRC-Kanal auf freenode für eine lokale Nummer.

Finden Gespräche: bloglines | technorati

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

Stellenangebot auf der Yahoo! Media Foundation-Team

17. März 2011 um 09.35 Uhr von Ricardo Dotta | In Entwicklung , Frontend Engineering Jobs bei Yahoo | 1 Kommentar

Wir suchen einen erfahrenen Software Engineer der Yahoo! Media Foundation Front-End-Teams. Die Front-End-Team ist verantwortlich für die Entwicklung von globalen, gemeinsamen Software-Komponenten und Plattformen für Yahoo! Media Websites - Yahoo! News, Yahoo Finance, Yahoo Sports, Yahoo! Music, Yahoo Movies, Yahoo! TV, Yahoo Video, OMG! und andere. Yahoo! Media Websites gehören zu den Top-Destinationen im Web, und Sie werden eine Schlüsselrolle in der Entwicklung von einzigartigen und aufregenden Produkten und Dienstleistungen, die berühren Millionen von Menschen jeden Tag zu spielen.

Bedarf

• Kann in einem dynamischen Umfeld zu arbeiten
• Schnelle Lerner - kann schnell kommen auf Touren mit unterschiedlichen Technologien
• Team-Player - mit Zusammenarbeit und Führung Kollegen
• Muss ein starkes Gefühl der Verpflichtung und Verantwortung
• Muss starke mündliche und schriftliche Kommunikationsfähigkeit
• Muss sehr gute Kenntnisse und starkes Interesse an neuen Tools und Technologien in der Industrie haben

Erforderliche Kenntnisse / Erfahrungen

• 5 + Jahre Erfahrung in der Branche
• Muss sehr gute Kenntnisse der objektorientierten Programmierung in PHP (bevorzugt), Java oder C + + oder ähnliches haben
• Muss Erfahrung mit MVC-Frameworks wie Zend, CakePHP oder Symphony (oder andere) und Client-seitige AJAX haben
• Muss sehr gute Kenntnisse von JavaScript, OOP JS, CSS und DHTML haben
• Proficiency in JSON, XML, XSLT, Unix-Administration und Shell Scripting
• Reguläre Ausdrücke, Unix Entwicklung Erfahrung und Subversion-Erfahrung sehr erwünscht
• Wissen und Erfahrung mit HTML5, CSS3, und aufkommende Technologien Präsentation begehrten
• Erfahrungen mit Unit-Tests und / oder Testautomatisierung ein Plus
• Database, SQL und MySQL (LAMP-Stack) Erfahrung sind Pluspunkte
• Erfahrung in der Entwicklung und Bereitstellung von höchst effizienten, skalierbaren Server-seitige Anwendungen
• Ausgezeichnete Debuggen und Testen Fähigkeiten
• Sehr gute analytische und Problemlösungsfähigkeiten
• Informatik oder vergleichbarer Abschluss, Berufserfahrung erforderlich

Über Yahoo!

Denken Sie beeinflussen 1 aus jeden 2 Personen online-in innovative und kreative Wege, die einzigartig sind Yahoo!. Wir wissen nur, dass jeden Tag, und man konnte auch. Schließlich ist es groß Denker wie Sie, die nächste Generation von Internet für die Konsumenten und Werbetreibenden auf der ganzen Welt schaffen wird. Jetzt ist die Zeit, die Welt, was du hast zu zeigen. Setzen Sie Ihre Ideen für über eine halbe Milliarde Menschen zu arbeiten.

Yahoo! Inc. ist ein Equal Opportunity Employer. Für weitere Informationen und zur Anwendung finden Sie unter http://careers.yahoo.com/jdescription.php?frm=search_results&oid=35901&qs=jcat=8__submit=1 , und alle unsere Öffnungen suchen besuchen Sie bitte http://careers.yahoo . com .

Finden Gespräche: bloglines | technorati

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

YUI: Öffnungszeiten Do 17. März

14. März 2011 um 11.56 Uhr von Luke Smith | In Entwicklung , Öffnungszeiten | Keine Kommentare

Ajax

Diese Woche möchte ich zu entführen die Stunde, darüber zu sprechen Y.io (und Freunden) und ein wenig Brainstorming auf, was Sie denken würde YUI 3er ajax Schnittstellen die beste sie sein können. Ich habe einige Gedanken Ich mag mit anderen teilen mögen, und wir können durch einige Scan vorhandenen Bugs und Feature Requests .

Wirklich, aber ich möchte von Ihnen hören, welche Art von Muster, die Sie neigen dazu, in der realen Welt umzusetzen, und welche Art von API Zucker könnten wir hinzufügen, um Ihr Leben leichter machen. Weil wir es tun. Ich schwöre es.

Hier ist ein Sampler aus der Galerie heute:

• REST Ressource
• IO Multi-Reaktion
• AlloyUI IO und IO Anfrage
• Comet-Stream
• JSON-RPC
• IO Poller

Vielleicht sind einige der Antworten sind da drin? Was willst du gebacken, und was willst du es aussehen?

Zeit & Details

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

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 (diese werden Sie aufgefordert, die Adobe Connect-Plugin zu installieren, wenn dies Ihre erste Mal benutzen)

* - Wenn Skype nicht möglich ist, mailen Sie mir oder catch me (ls_n) in der # yui IRC-Kanal auf freenode für eine lokale Nummer.

Finden Gespräche: bloglines | technorati

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

YUI 2.9.0 Preview Release ist jetzt verfügbar

14. März 2011 um 8:10 pm von Jenny Donnelly | In Entwicklung | 4 Kommentare

Die YUI-Team hat hart daran gearbeitet Glattstellung der letzte unserer worden 2.9.0 Bugs , und heute sind wir erfreut, die Verfügbarkeit eines zu verkünden 2.9.0 Preview Release zum Testen von der Gemeinde. Auch in dieser Version sind zahlreiche Bugfixes und Verbesserungen gezielt , mit deren Hilfe bringen Schließung der YUI 2 Entwicklungspfad , sowie gezielte Änderungen am Code und Dokumentation Updates, die es schwieriger machen für Implementierer ungewollt vernachlässigen Security Best Practices .

YUI 2.9.0 stellt unsere letzte Bugfix-Release auf dem YUI 2-Code Zeile, bevor es in den Wartungsmodus versetzt, wenn nur kritische Fehlerbehebungen und gezielte Browser-Kompatibilität behoben berücksichtigt werden. Wir sind wirklich aufgeregt, um in der Lage sein, diesen wichtigen Meilenstein, der uns helfen, unsere Anstrengungen verdoppeln, auf YUI 3 wird erreicht.

YUI 2.9.0 PR2 ist sowohl über die verfügbaren EUR sowie ein Download-Paket zum Testen. Wir hoffen, dass Sie einen Moment Zeit nehmen, um den heutigen Preview-Version zu testen und Feedback von Freitag, 18 März auf irgendwelche Fehler und Regressionen können Sie zu finden.

Finden Gespräche: bloglines | technorati

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

CSS Border Tricks mit Collapsed Boxes

8. März 2011 um 03.23 Uhr von Thierry Koblentz | In CSS 101 , Design- , Entwicklung | 8 Kommentare

Diese Tricks helfen Ihnen dabei Designs ohne Rückgriff auf die Verwendung von Bildern, CSS3 Gradienten oder überflüssige Markup. Durch die Zusammenführung Boxen mit Null line-height und height Werte, können wir Inhalte außerhalb des Inhalts anzuzeigen, über Grenzen hinweg.

Bi-Color Hintergrund

Dieses Beispiel umfasst nicht IE 6 / 7 Workarounds (den Quellcode dieser Demo-Seite für den IE behebt).

 .parent { display:inline-block; text-align: center; border: 1px solid #cecece; } .child { display:inline-block; line-height: 0; height: 0; border-top: 1em solid #ffc; border-bottom: 1em solid #fdcf46; padding:0 .6em; vertical-align:bottom; } <ul id="menuBar-A"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

Dots und Rohre zwischen Listenelementen

Dieses Beispiel zeigt, korrekt in allen Browsern, nachdem einige einfache IE behebt.

 ul.one, ul.two { margin-left:0; display:inline-block; *display:inline; zoom:1; height:12px; line-height:12px; padding:0; } li { float:left; display:inline; height:2px; line-height:2px; position:relative; top:.3em; } ul.two {border-left:1px solid #333;} ul.one li {border-left:2px solid #333;} ul.two li {border-right:2px solid #333;} ul.one li.first-child, ul.two li.last-child { border:0; } a { color:#000; padding:.4em .9em; *position:relative; } <div id="menuBar-B"> <ul class="us"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> </ul> <ul class="ourOffer"> <li class="services"><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> </div> 

Links und rechts zeigende Dreiecke

Dieses Beispiel umfasst nicht IE 6 / 7 Workarounds (den Quellcode dieser Demo-Seite für den IE behebt).

 #box { line-height: 0; height: 0; border: .4em solid transparent; border-left-color: #333; border-right-color: #333; padding: 0 .3em; display: inline-block; } <ul id="menuBar-C"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

IE 6 und Grenzen der Transparenz

IE 6 nicht unterstützt dem Stichwort " transparent "für Rahmenfarbe. Wenn Sie diesen Wert verwenden, zieht IE 6 einen schwarzen Rand.

Die Fehlerbehebung für dieses ist die Verwendung Chroma-Filter , die eine bestimmte Farbe der Inhalt des Objekts zeigt, wie transparent. Zum Beispiel erstellen Sie eine nach rechts zeigenden Pfeil können Sie mit dieser Regel:

 #Box { height: 0; width: 0; border: 10px solid transparent; font-size: 0; _border-color: pink; _filter: chroma(color="pink"); border-left-color: #333; } 

Die font-size Erklärung ist ein weiterer Workaround für IE 6. Es ist sicherzustellen, dass dieser Browser keine Zunahme der Höhe der Box.

Stoppen Sie den Pressen Ich habe gelernt, einen neuen Trick (danke Chungho Fang)!

Die Magie [zum Rand Transparenz in IE erstellen] auf 'border-style', entweder gestrichelt oder gepunktet gesetzt

---

Das ist es! Dies ist nur eine weitere Möglichkeit, Grenzen zu nutzen, um Bild-less Design zu erreichen.

Weiterführende Literatur

• A Study of regelmäßige Vielecke
• slantastic
• Slants

Finden Gespräche: bloglines | technorati

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