Yahoo! User Interface Blog (YUIBlog)

Aufbauend Sideline: Lessons in YUI + Adobe AIR

Überhaupt sich wundern, was die Leute jetzt sagen über Ihre Firma, Marke, Service, Produkt, etc? Sideline , durch eine aktuelle interne Hack Projekt bei Yahoo! inspiriert, geht über den Standard-Kundenbefragung Prozess können Sie in Echtzeit hören die Menschen Gespräch über Ihre Produkte und verwenden Sie dann das Feedback auf Ihre Dienst zu verbessern oder helfen Anwendern bei ihren Problemen.

Kurz gesagt, waren die Ziele unseres Projektes zu

• Erstellen Sie eine Desktop-Anwendung, die für die Erstellung, Gruppierung und automatische Ausführung von erweiterten Suche Abfragen Twitter erlaubt
• Nutzung vorhandener Skill-Sets und-Tools
• Ziel des Windows, Mac OS X und Linux Betriebssystemen und Minimierung der Menge von Plattform-spezifischen Code, der geschrieben werden muss
• Open-Source-Code, so dass andere davon lernen, dazu beitragen, und / oder erweitern das Produkt nach eigenem Ermessen

Unser Team von Front-End-Ingenieure sind Experten in JavaScript, CSS, HTML und PHP, aber nicht über eine große Erfahrung in der Entwicklung Desktop-Anwendungen. So wurde die Frage, wie wir unsere vorhandenen Fähigkeiten-Sets für Desktop-Entwicklung zu maximieren? Die Antwort war für uns das nutzen Adobe AIR-Plattform , die "können Entwickler bewährter Web-Technologien, um Rich-Internet-Anwendungen, die außerhalb des Browsers laufen auf mehreren Betriebssystemen bauen." Da AIR unterstützt HTML / JavaScript-Entwicklung (zusätzlich zu Flex und Flash), konnten wir unsere Anwendung auf die traditionellen Web-Technologien zu bauen, auf der Oberseite des YUI , und haben es auf die drei wichtigsten Desktop-Betriebssystemen laufen.

YUI Grids in AIR

Sideline enthält eine umfangreiche Umsetzung der YUI-Bibliothek. Es sollte hoffentlich als gutes Beispiel für andere Entwickler in das Experimentieren mit YUI und Adobe AIR Interesse dienen. Die Anwendung Layout aufgebaut ist mit YUI Grids und sogar nutzt die kürzlich hinzugefügten ARIA Landmark Roles . Grids funktionierte sehr gut in die AIR-Umgebung und machte Redesigns, die Mitte der Entwicklung einfach mit minimalen Änderungen am Code zu implementieren aufgetreten. Genau wie in der Standard-Browser-Umgebung können YUI Grids als eine großartige Grundlage für eine AIR-Anwendung dienen, auch wenn der Entwickler entscheidet sich gegen die Verwendung der Rest der JavaScript-Bibliothek und entschied sich für einen anderen Rahmen statt.

YUI-Komponenten in AIR

Neben Grids, Sideline nutzt auch der Dom , Event- , Drag and Drop , JSON , Selector , Container , Knopf , Menu , Slider und TabView Komponenten. Ich bin glücklich zu berichten, dass alle YUI-Komponenten sehr gut durchgeführt in der AIR-Umgebung und benötigt keine Änderungen. Sideline nicht implementieren ein ziemlich individuelles Design und damit einige angepasste Häuten der YUI-Komponenten erforderlich war, aber keinen Kern Modifikationen. Die meisten AIR-Anwendungen dazu neigen, haben eine reiche Desktop-Anwendung, um sie zu fühlen. Für dieses Maß an Anpassung, die YUI Skinning Artikel ist eine gute Referenz, um loszulegen.

Beyond the Browser

Eine wichtige Erweiterung des Adobe AIR-Plattform über die traditionelle Web-Umfeld ist der Zugang zu einem lokalen SQLite-Datenbank und die Benutzer-Dateisystem. Lokale Datenbank zugreifen wird immer in herkömmlichen Web-Umgebungen durch Technologien wie Gears und HTML 5 Client-Seite Speicher, aber für jetzt diese Lösungen sind nicht allgegenwärtig. Für Interessenten an AIR Entwicklung hat Sideline viele der gemeinsamen Aufgaben, die ein typisches AIR-Anwendung erfordert möglicherweise, z. B. in Angriff genommen, das Abrufen externer Daten, Handhabung Anwendungs-Updates, die Interaktion mit der lokalen Datenbank in Zusammenarbeit mit dem lokalen Dateisystem, bringt nativen Browser-Fenster, Anzeige Desktop-Benachrichtigungen, etc. Es sollte sich als ein nützliches Nachschlagewerk werden in dieser Hinsicht.

Tipps für AIR-Entwicklung

1. Kennen Sie Ihre Umwelt. AIR nutzt die WebKit Open-Source-Browser-Engine unter der Haube. Traditionelle Web-Entwicklung ist bei der Antragstellung oder Arbeiten vor Ort über so viele Browser / Betriebssysteme wie möglich ab. Welche Browser unterstützen in der Regel kommt es zu einem Kosten im Vergleich zu Auslastungsgrad. Allerdings Codierung für einen einzigen Rendering-Engine reduziert die Notwendigkeit zur Vorbereitung und Test gegen die slue der möglichen Kombinationen auf dem Markt. That being said, es immer noch sinnvoll, in einem cross-browser Weise zu entwickeln, wo möglich, da es eine Zeit kommen kann, wenn die Anwendung benötigt, um seine Rückkehr in die eine eher traditionelle Browser-Umgebung. Mit einem Framework wie YUI wird dieser Prozess relativ schmerzlos. Es ist einfach, die Browser und Plattformen derzeit von YUI über die unterstützten sehen Graded Browser Support-Chart . Entwickler sollten ziemlich sicher, einige grundlegende Abkürzungen nimmt, beim Bau von AIR-Anwendungen (mit -webkit-border-radius macht abgerundeten Ecken ein Kinderspiel), aber sie sparsam und dokumentieren sie, damit sie später leicht vor Ort sind.
2. Bei der Entwicklung einer komplexen Anwendung in jeder Umgebung eine solide Reihe von Debugging-Tools ist ein must-have. Adobe bietet einige nützliche Tools zur Fehlersuche AIR out of the box. Entwickler sollten sich die AIR Debug Launcher (ADL) , die HTML Introspector , und die HTML-Source-Viewer . Zusätzlich zu den mitgelieferten Tools, Aptana Studio mit seiner Adobe AIR Plugin erwies sich als ein unverzichtbarer Vorteil. Die Aptana Plugin bietet Unterstützung bei der Erstellung von AIR-Projekt, das Importieren von gemeinsamen JavaScript-Frameworks, Debugging-, Verpackungs-/ Export und der digitalen Signatur der Anwendung.
3. Vergessen Sie nicht, die Leistung Techniken, die wir aus dem Standard-Browser-Umgebung (dh, optimieren Sie Ihre Bilder, minify und kombinieren Sie die Anwendung CSS-und JavaScript-Dateien und für schwere Ereignis-basierte Anwendungen wie Sideline, nutzen Sie gelernt haben, Event-Delegation Techniken ) . AIR-Anwendungen auf dem Desktop laufen und so gibt es ein bisschen mehr Nachsicht mit der Leistung als bei der typischen Browser-Umgebung, aber nicht vergessen, wie der Browser selbst, der AIR-Container verbraucht auch ein Stück des Systems im Speicher noch vor der Anwendung benutzerdefinierten Code Tritte in .

The Road Ahead

Die Beta-Version von Sideline können installiert werden http://sideline.yahoo.com . Der Code ist Open Source unter den Bedingungen der BSD-Lizenz und gehostet auf GitHub . Wir freuen uns über Beiträge, Feedback und / oder Anregungen. Auch in den Geist der die Dinge so offen wie möglich und unterstützt aufstrebende Technologie, die wir wahrscheinlich Port Sideline zu Titanium in der nahen Zukunft. Einige anfängliche Arbeit hat bereits auf den Hafen getan worden und wird in den kommenden Wochen fortsetzen. Es ist auch durchaus möglich, dass Sideline werden am Ende die Implementierung eines JavaScript ORM wie JazzRecord zur Datenbank-Interaktionen über Plattformen hinweg zu erleichtern. Wenn jemand weitere Tipps für die Unterstützung mehrerer Plattformen würden wir sie gerne hören.

Nun geh hin und Gabel es !

Finden Gespräche: bloglines | technorati

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

Implementation Focus: DocLanding

Finden Gespräche: bloglines | technorati

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

Der Aufbau eines Fast-People-Finder für Flickr mit YUI AutoComplete

Bei Flickr , haben wir vor kurzem wurde eine neue Leute-selector-Widget, ein paar von unseren Seiten; diese Funktion basiert auf dem YUI AutoComplete Kontrolle . Die Menschen-selector-Widget ermöglicht es unseren Mitgliedern zu Personen aus ihrer Kontaktliste, die nach oben von 20.000 Einträge enthalten können. Aufgrund der großen Menge von Daten beteiligt sind, traditionelle Techniken für das Abrufen und die Analyse der Daten wurden nicht machbar, vor allem aufgrund extrem langsam parse Zeiten. In diesem Beitrag werfen wir einen Blick auf einige der verschiedenen Datenformate haben wir versucht und an der AutoComplete-Konfiguration haben wir festgestellt, dass die meisten performant sein.

Zunächst ist hier ein Video-Rückblick auf das, was wir versuchen zu erreichen, die neue Interaktion mit dem Menschen-Finder Widget ist auf der rechten Seite dargestellt:

Das Abholen und Parsing: XHR und Custom Data

Die größte Herausforderung bestand darin, ein Datenformat, das schnell sein zum Download, schnell zu analysieren, und würde - vor allem - zu sichern. Wir versuchten zuerst XML und Ajax, aber das Parsen von XML erwies sich als viel zu langsam - in der Tat fanden wir, dass dieser Ansatz könnte den Browser auf größere Datenmengen. Nächstes versuchten wir eine Kombination von JSON und Ajax, das war deutlich schneller, aber es dauerte noch mehr als 80 Sekunden, um unseren größten Datensatz (ein Array mit rund 10.700 Objekten, die jeweils mit mehreren Eigenschaften) zu analysieren.

Am Ende fanden wir zwei Transport / parse-Techniken, die sich als extrem schnell sein:

1. Holen JSON (eingewickelt in eine Callback-Funktion) mit dynamisch generierten Skript-Tags;
2. Parsen einer benutzerdefinierten Daten-Format (eine Steuer-Charakter getrennte Liste) mit split() , holte mit Ajax (mit YUI Connection Manager ).

Am Ende gingen wir mit dem benutzerdefinierten Format. Formatieren unserer JSON, so dass es durch eine dynamische Script-Tag durchgeführt werden konnte, war eine weniger sichere Ansatz und nicht um eine Leistung zu gewinnen. Mit XHR gab uns eine sicherere und immer noch sehr performante Lösung.

User Interaction: YUI AutoComplete

Sobald wir eine Möglichkeit, die Daten in JavaScript schnell war, war die nächste Herausforderung, einen Weg für den Benutzer zu erstellen, um schnell durch die Liste der Kontakte suchen. Um dies zu erreichen, wandten wir uns an AutoComplete Control-YUI ist. Es erfüllt unsere Anforderungen genau: extrem schnell und sehr gut konfigurierbar. Um es zu benutzen mit unseren Kunden Daten, haben wir eine Funktion, um die Verwendung als AutoComplete Instanz DataSource; jedem Tastendruck in das Widget löst diese Funktion auf und übergibt den Suchbegriff. Innerhalb dieser Funktion durchlaufen wir alle Mitglieds Kontakte und versuchen, die Abfrage auf vier verschiedenen Feldern übereinstimmen. Wir verwendeten reguläre Ausdrücke, um das String-Matching zu tun.

Auch für große Gruppen von Kontakten, finden wir diese Technik als äußerst effizient. Hier ist die Basisversion von dem, was wir getan haben:

  Funktion searchContacts (query) {

        var Spiele = [],
            queryRegEx = new RegExp (Abfrage, 'i'), sollte / / Abfrage
                                                 / / Überprüft, bevor 
                                                 / / Verwendung in einer Regex.
            Kontakt;

         for (var n = 0, len = contacts.length; n <len; n + +) {

                contact = Kontakt [n];

                if (contact.username.search (queryRegEx) == -1! | |
                    contact.realname.search (queryRegEx) == -1! | |
                    contact.emailAddress.search (queryRegEx) == -1! | |
                    contact.alias.search (queryRegEx)! == -1) {
                        matches.push (Kontakt);
                }
        }

        Rückspiele;
 } 

Einmal hatten wir die Daten mit dem Widget, haben wir eine Änderung an der Standard-Konfiguration AutoComplete: Wir setzen die queryDelay Parameter auf 0 (Standardwert ist 200ms). Dies bedeutet, dass es keine Verzögerung zwischen einem Tastendruck und eine Suche initiiert werden. Es gibt Nachteile dieser (der AutoComplete-Display neigt dazu, ein wenig aufflackern, wenn Sie ein paar Zeichen in schneller Folge), aber wir fanden es die größte Verbesserung, die wir gemacht, wichtiger noch als Optimierungen, um unsere Suchfunktion werden. Während ein queryDelay von 200ms oder mehr könnte besser geeignet sein für XHR oder andere Remote-DataSources, fanden wir, dass unsere Regex-based mit lokalen Daten DataSource wurde bis zur Aufgabe des Suchens auf jeden Tastendruck. Mit Auto-Vervollständigen, bekamen wir kostenlos Caching hinzugefügt, um die Mischung, so dass einer Suche nur müssten einmal durchgeführt werden.

Weitere Details zu all diesen Techniken, einschließlich der vollständigen Details zu den verschiedenen Datenformaten und umfangreichen Profiling-Daten für jeden einzelnen, sich auf der gefunden werden code.flickr Blog.

Finden Gespräche: bloglines | technorati

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

In the Wild für 25. März 2009

Nachrichten und Notizen aus der YUI-Community in den vergangenen Wochen. Lassen Sie uns in den Kommentaren, was wir verpasst wissen, und wir bekommen es beim nächsten Mal:

• Ross Harmes auf YUI AutoComplete und Flickr People Finder : Flickr ist Ross Harmes hat ein interessantes Stück auf der Flickr-Code Blog über das Tun super-schnelle Suche empfehlen in der Schaffung der Flickr People Finder-Funktion. Ross beschreibt im Detail den Prozess nutzt er, um Kontaktlisten schnell auf dem Client, auf deren Eingliederung in JavaScript. Von dort wandte er sich an Jenny Donnelly ist YUI AutoComplete : "[Mit dem] Array von Kontakten in JavaScript, mussten wir einen Weg, um durch sie suchen, und wählen Sie eins. Dazu verwendeten wir YUI ausgezeichneten AutoVervollständigen-Widget. Um die Daten in das Widget, haben wir eine DataSource -Objekt, das eine Funktion auszuführen würde zu Ergebnissen zu kommen. Diese Funktion einfach durchgeschleift unser Kontaktformular Array und entsprach dem angegebenen Abfrage vier verschiedene Eigenschaften von jedem Kontakt, mit einem regulären Ausdruck (RegExp-Objekten erwies sich als extrem für diese gut geeignet, wobei die durchschnittliche Suchzeit für die 10.000 Kontakte bei kommenden in weniger als 38ms). Nachdem die Ergebnisse gesammelt wurden, nahm die Auto-Vervollständigen-Widget kümmert sich um alles andere, inklusive Caching der Ergebnisse. "
  
• W3C Beta-Site mit YUI Reset und Schriftarten : Nicole Sullivan schrieb, uns zu sagen, dass YUI Reset- und Schriftarten Teil der neuen W3C Site Redesign, die Sie hier ansehen können sind. Die Website nutzt auch Nicoles OOCS Arbeit.
  
• Kellogg ist Brasilien Seite mit YUI Anschluss, Animation und mehr gebaut : Kellogg Brasilien Website implementiert eine Reihe von YUI-Komponenten. Wir haben festgestellt, Connection Manager , Animationen , Get und vieles mehr, alles herab über eine einzige Combo-gehandhabt URL aus yahooapis.com. Nice. ( Original-Quelle. )
  
• YUI Mit Blick auf - Greenbookings.com, Sustainable Travel-Site : Yvo Schaap schrieb uns erzählen Greenbookings.com , eine vor kurzem gestartete Reise-Website, die auf dem aufstrebenden Welt des nachhaltigen Reisens konzentriert. Wenn Sie durch Greenbookings Buch, werden sie caclulate und ermöglichen es Ihnen, den Carbon Footprint von Ihren Reisen kompensiert wurden. Schreibt Yvo: "Ich habe mit dem YUI Framework arbeitet seit langer Zeit und veröffentlichte gestern meine neue Website greenbookings.com , dass fast jedes Modul des Frameworks im Einsatz hat: Kalender, Registerkarten, datatable , Geschichte + Intervall Kalender , Gitter, autocomplete, und viele mehr. Auch viel Mühe hat sich auf eine sehr schnelle Laden der Seite wurde durch die Beseitigung aller javascript aus dem Header, um die unten auf der Seite zu verbringen. "We love the site und die Verwendung von John Peloquin Beitrag zur YUI, die Interval-Kalender für die Datumsauswahl .
  
• YUI Sichtung - Infinite Crossword Seite zum Spiel : Marco Egli schrieb uns über eine neue Version der unendlichen Kreuzworträtsel, ein Spiel vor Ort mit einer breiten Palette von YUI Utilities und Widgets zu erzählen. "Am vergangenen Freitag eine neue Version des Unendlichen Kreuzworträtsel veröffentlicht wurde. Es ist die erste Version, die in englischer Sprache verfügbar ist. Es ist eine unendliche Kreuzworträtsel, die komplett im Browser läuft. Mehrere verschiedene YUI-Komponenten wurden für die Entwicklung verwendet werden, einschließlich Animation, Button, Connection Manager, DataTable Json, Menü und vieles mehr. Das Spiel zielt auf die Entwicklung der größten Kreuzworträtsel der Welt. Benutzer können spielen und ihre eigenen Fragen. Es ist eine Mischung aus Kreuzworträtsel und Scrabble ". Schauen Sie sich das Spiel hier , sicher sein, um sich einzuloggen und dann die Menüs am unteren Rand des Bildschirms, um eigene Fragen hinzufügen.
• DevX "Yahoos Rich Web Benutzeroberflächen für Java-Entwickler" : DevX hat einen neuen Artikel für Java-Entwickler in YUI interessiert . Schreibt Narayanan AR: " Dies ist der erste Artikel in einer dreiteiligen Serie, die sich vor allem an Java-Entwickler, die nicht JavaScript-Experten, sondern die Entwicklung von Web-Anwendungen mit Server-Side-Frameworks (wie JavaServer Pages, Struts oder Spring). In dieser Ausgabe wird JavaScript Neulinge sehen, wie YUI für die Einrichtung und Design zu verwenden, und sollte eine ganze Menge über objektorientierte JavaScript-Programmierung zu erlernen. Für Entwickler, die bereits Experte in JavaScript, dient dieser Artikel-Serie als eine Einführung in die YUI-Bibliothek. "
• Video: "YUI für Control Freaks" mit Christian Heilmann : Die Ajaxian Team hat Christian Heilmann YUI Diskussion auf Video; check it out hier oder im eingebetteten Player unten.
  
• YUI AutoComplete und Kalender auf Turkish Airlines Website : Cagatay Civici schrieb uns erzählen die Turkish Airlines Website Verwendung von YUI AutoComplete und Kalender auf dem Buchungs-Tool. Viele Reise-Websites haben diese Kombination im Laufe der Jahre verwendet; Southwest.com war einer der ersten Anwender der YUI-Kalender und gehört weiterhin zu den ursprünglichen Versionen der Kalender auf die aktuelle Buchung Website zu nutzen. Yahoo eigene Reise-Website ist ein weiteres gutes Beispiel für wie diese Widgets können gemeinsam genutzt werden - es durchgeführt wurde, von YUI ImageLoader Autor Matt Mlinac. ( Original-Quelle. )
• Caridy Patino Mayea: "YUI3: Controlling Key Strokes Events (keyup, KeyDown, Druck)" : Caridy (Autor der beliebten Bubbling Bibliothek Erweiterungen YUI) hat einen neuen Blog-Post bis zum Umgang mit wichtigen Ereignissen in YUI 3 . ( Original-Quelle. )
• Balsamiq Mockups für YUI-Komponenten : Die Mockups to Go Blog hat einige YUI-Komponenten verspottet up mit dem Balsamiq Schnittstelle, einschließlich Menüs und Schaltflächen , Kalender und Karussells . ( Original-Quelle. )
  
• Mehr von Matt Snider auf YUI-EXT-MVC : Matt wurde weiterhin die Arbeit an seinem YUI-EXT-MVC-Projekt . Laut Matt, "der Vorteil der Verwendung der Controller-Klassen 'AJAX-System ist, dass es vereinfacht YUI Connection Manager und Entwickler können vorregistrieren Rückrufe, wodurch die Art der erwarteten Antwort. Er steht am http://code.google.com/p/yui-ext-mvc/source/browse/trunk/assets/js/mvc/lib/controller.js . In Zukunft werde ich das Hinzufügen Befehl Muster Logik für das Abrufen von JSON-und HTML-Daten vom Server. "
  
• Paul Tarjan Geo-Explorer mit YQL und YUI : SearchMonkey Ingenieur Paul Tarjan hat eine interessante Demo-up mit YUI TabView und Yahoo Maps Ajax-API, um die Ergebnisse einer YQL Geosuche Display . Die Schnittstelle ermöglicht es Ihnen, einen Ortsnamen und dann für diesen Standort, diese Stelle die Geschwister, die Lage der Vorfahren, etc. Für den größeren Zusammenhang und warum, das ist interessant zu suchen, siehe PHP Erfinder Rasmus Lerdorff Blogbeitrag zum Thema . ( Original-Quelle. )
• Meg Smitley - "dynamisch laden YUI Abhängigkeiten" : Meg schreibt (auf Meglog) : "Ich habe mit YUI Grids und LayoutManager für das Rückgrat meiner app-Schnittstelle seit dem Ende des letzten Jahres. Es ist eine steile Lernkurve ist, und ich halte mich immer noch sehr unerfahrene und in der Tat erst dann bemerkt, in dieser Woche die "dynamische Belastung" auf die Registerkarte YUI Configurator . Anstatt statisch einschließlich der erforderlichen YUI CSS-und JavaScript-Ressourcen, ist es möglich, YUILoader verwenden, um dynamisch zu importieren sie auf zu laden. Während ich schätze, dass YUI-Experten nicht von meiner YUILoader-Epiphanie beeindruckt sein, hat dieser Ansatz hat mir geholfen, abspecken meine app JS-Dateien, während abnehmende Wartung Anliegen und so fühle ich mich Erwähnenswert ist zum Wohle der anderen noobs. " Check out ihrem Artikel für mehr Details .
• Mit Karussell mit SugarCRM : Roger Smith hat ein Tutorial auf der SugarCRM Entwickler-Blog , dass "eine schnelle und einfache ListView Anpassung, die nutzt Karussell Widget aus der Yahoo UI (YUI) Library . Diese Anpassung völlig verändert das Aussehen und Verhalten der Kontakt ListView von einem "Zeilen und Spalten 'Ansicht Ihrer Suchergebnisse auf einen Yahoo UI Carousel zu sehen. Die YUI-Bibliothek ist in SugarCRM enthalten und bietet eine Menge Features der Benutzeroberfläche über das wir in den Kern-Anwendung. "
  

Finden Gespräche: bloglines | technorati

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

Georgiann Puckett: YUI / ASTRA Program Manager (AdaLovelaceDay09)

[Anmerkung: Dieser Beitrag ist Teil der YUI-Team die Teilnahme an Ada Lovelace Day , eine Feier der weiblichen Technologen der ganzen Welt.]

Georgiann Puckett (besser bekannt als "George" genannt) dient als Programm-Manager für YUI und verbundenen Projekte (einschließlich der ASTRA-Bibliothek). Programm-Management komplexer technischer Programme mit mehreren Projekten ist eine der anspruchsvollsten Aufgaben in einer Software-Firma, und George ist ideal, um die Herausforderung geeignet. Sie bringt die Tabelle eine schnelle Intelligenz, Geduld und Disziplin, um große Datenströme verwalten und ein tief verwurzeltes Verständnis der Prozesse, durch die erfolgreiche Software-Programme sind nachhaltig. Ihr Hintergrund dient hier auch - als C / C + + Engineering Veteran, sie kann direkt mitfühlen mit den Erfahrungen der Ingenieure, mit denen sie arbeitet.

YUI Versionen gehen mit Hunderten von Veränderungen, von denen viele vorgeschlagen oder sind mit Beiträgen Entwickler auf der ganzen Welt. Seit seinem Eintritt in das Team vor zwei Jahren hat George revolutioniert die Art und Weise all dieser Informationen umgegangen wird. Das ist eine bessere Prognose, bessere Kommunikation und eine bessere Qualität auf der ganzen Linie geführt.

George hat darüber hinaus lobenswerte Führung für die YUI-Team bei der Unterstützung von wichtigen internen Projekten bei Yahoo zur Verfügung gestellt. Wenn wir ein internes Projekt zu bezeichnen, als einen "großen Wette", etwas entscheidend für die Zukunft des Unternehmens, arbeiten wir mit dem Projekt der Frontend-Engineering-Team und stellen Sie sicher, dass wir tun was wir können, um sie zu unterstützen. George verwaltet diese Beziehungen, sicherzustellen, dass unsere Mitarbeiter zeitnah, gut dokumentierte baut erhalten und dass ihre Prioritäten sind genau in unserer Release-Pläne wider. Mit der Fähigkeit, die vielfältigen Projekte gerecht zu werden und unsere erfolgreiche Zusammenarbeit zu erleichtern ist keine kleine Herausforderung, und George hat die schweres Heben notwendig, um sicherzustellen, dass YUI und ASTRA Ingenieure bieten die richtige Unterstützung zum richtigen Zeitpunkt über Yahoo getan.

Apropos wogenden Anheben .... George ist auch bei Yahoo als außergewöhnliche Technologe und ein unermüdlicher Fürsprecher für YUI bekannt, aber sie ist auch gut für diejenigen, die häufige Yahoos Mitarbeiter Turnhalle bekannt. Hier finden Sie George gibt vier oder fünf Abenden in der Woche arbeiten, um ihren eigenen Weltrekord Formular auf der freien Gewichten besser.

George Arbeit und ihre allgemeine Verpflichtung zu herausragender Leistung hat sicherlich jeder von uns, die mit ihrer Arbeit in den vergangenen Jahren inspiriert. Ich fragte George, hatte sie inspiriert und schickte sie auf dem Weg zu einer Karriere in der Technologie.

Was war Ihre erste Erfahrung mit Computern?

Ich war darauf bedacht, beim Betreten eines pre-med track in der Schule und ich hatten eine AP Calculus natürlich meinem Abschlussjahr als Teil des College Prep Lehrplan. Wie es der Zufall wollte, bekam der Lehrer ein Stipendium für zwei Apple-Computern als Teil einer Studie, die die Programmierung an der High School zu unterrichten. Nicht nur, dass wir es - wir haben wettbewerbsfähig sie versucht, die robusten Funktionen mit der geringsten Menge an Code zu tun. Der erste digitale Elektronik in der Schule besucht, wo ich zu programmieren Schaltungen hat auf einem Steckbrett mit Assembler machte den Deal.

Hattest du irgendwelche weiblichen Technologe Vorbilder, die Sie beeinflusst?

Es gibt zwei Frauen, die ich mit, dass ich durch sehr beeindruckt und sehr viel gelernt aus gearbeitet habe. Darragh Muldoon, Mitbegründer von Cricket Software, stellte mich aus der Schule in die mit Abstand die schönsten Start Abenteuer meiner Karriere. Sie war nicht ein Techniker per se, aber ich lernte sehr viel von ihr in Bezug auf ihren Umgang mit Menschen in führenden technischen Leute, Aufbau von Teams und wachsende Unternehmen. Die andere Frau, die ich aufblicken und daraus gelernt wurde Sheila Brady, der durch die Reihen, um Direktor-Niveau stieg in Apples System Software Division. Sie definitiv wusste, wie man ein Release-Laufwerk, in vielen Fällen führenden Teams meist von männlichen Ingenieuren zusammen. Sie zeigten eine Ebene des Vertrauens, der Kompetenz und Aggressivität, die von jedem Ingenieur geschätzt werden könnten - männlich oder weiblich.

Finden Gespräche: bloglines | technorati

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

Jenny Han Donnelly: YUI Engineer (AdaLovelaceDay09)

[Anmerkung: Dieser Beitrag ist Teil der YUI-Team die Teilnahme an Ada Lovelace Day , eine Feier der weiblichen Technologen der ganzen Welt.]

Jenny Han Donnelly ist Autor von drei YUI-Komponenten:

1. The DataTable Control : YUI's DataTable is one of our signature UI widgets, providing a powerful menu of interactive options for tabular data.
2. The AutoComplete Control : AutoComplete provides typeahead, suggest, filtration and combo-box functionality to any text input area.
3. The DataSource Utility : Shared by DataTable, AutoComplete and the Charts Control , DataSource serves as a conduit between widgets and potential sources of data — including server-side data, JavaScript arrays, and DOM structures like HTML tables.

Jenny's work inspires us in part because of the technical challenges she takes on — try getting fixed headers with xy scrolling to work in IE6 using a semantically sound base table sometime, if you have any doubts. Jenny has taken on some of the most complex HCI challenges anywhere in YUI and engineered them to suit virtually any environment. DataSource enables other YUI components to work with anything from flat files to JSON and XML to JavaScript arrays and DOM structures. We've heard from thousands of people on the YUI forums using all of these features and more in ecclectic and novel ways.

We're also inspired by the organizational leadership Jenny has shown in her time at Yahoo. Currently, she's the lead editor of YUIBlog, bringing technical voices from throughout Yahoo to these pages to share their insights. She has also organized our annual frontend engineering summit at Yahoo, bringing hundreds of Yahoo engineers from around the world together in a rich weeklong technical conference. She's taught weeklong YUI courses to engineers in the USA, Korea and Japan, and she's been an integral member of the hack day group at Yahoo that's such an important part of our engineering culture.

Whether she's coding, writing, teaching or leading — all of which are aspects of the modern technologist's job description — Jenny sets a high bar with her intelligence, dedication, imagination and wit. Ada would be proud.

[ photo of Jenny used by kind permission of Stephen Woods ]

Finden Gespräche: bloglines | technorati

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

Survey: When is an Accordion not an Accordion?

I'm looking for feedback from people who have designed or built an interface using an “accordion” module (or are considering doing so). You see, I've been working on a design pattern for accordion modules, and I'd like to throw out a handful of open questions to the community via this brief survey . I'll be listening elsewhere as well, on twitter ( @mediajunkie ) and on mailing lists where web designers and developers hang out.

(I realize this is not a scientific survey. I'm just interested in engaging the wider community in a discussion instead of trying to impose my view or Yahoo!'s view on the community as authoritative.)

Everywhere I go lately, it seems that interaction designers and web developers are talking about accordion widgets and debating about what makes an accordion an accordion. Not everyone working in this field has heard the term (some may simply refer to “stacked panels” or “collapsible panels”) but most get the gist fairly easily. Ironically, none of the UI elements described as accordions share the actual behavior of a real-world accordion (the musical instrument): namely, that stretching an accordion opens all the folds evenly.

Accordions have been an on-and-off topic of discussion on the main IxDA mailing list ; we discussed them in our Pattern Library workshop in Vancouver earlier this month, and there's been an ongoing discussion about accordions on our internal designer mailing list here at Yahoo!.

So I sat down with some folks from the YUI team (and Marco, the maker of an experimental YUI accordion widget ) a little while ago to sort through a draft of an accordion pattern that might help inform the development of an official YUI component.

Broadly speaking, most people agree on what we're talking about when we talk about an accordion interface element. Everyone agrees that accordions are used to compress content into a limited space and that they consist of panels that can collapse or expand. Beyond this, there are a number of subtle nuances that not everyone agrees on.

One trend I've noticed is that front-end developers tend be agnostic about how the accordion should work, viewing it as really just a variant on a tree widget. Designers tend to be more prescriptive, saying that to be an accordion it must behave in thus and such a way (but not all designers agree on what these rules are).

In the end, the YUI folks will produce code that can be made to do just about anything. We aren't going to try to impose our own taste or preferences in design through the functionality of the code itself. However, we will use the associated pattern to make suggestions and recommendations drawn from the experience of the entire design community, and we will probably lobby for default behaviors that match what most people expect.

So, if you've got a few minutes and an opinion, please visit the survey and let me know what you think!

I'll close the survey on April 30.

Finden Gespräche: bloglines | technorati

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