Yahoo! User Interface Blog (YUIBlog)

Ankündigung YUI 3.1.0

Die YUI-Team freut sich, die Freisetzung von anzukündigen YUI 3.1.0 .

Highlights dieser Version sind die folgenden:

• Component-Infrastruktur - Der Widget-Infrastruktur für YUI 3 ist nun weitgehend vorhanden. Satyen Desai hat auf dieser Arbeit wurden in den vergangenen Monaten konzentriert und der Ansatz er YUICONF 2009 diskutiert ist nun vollständig als die realisierte Basis , Attribut , Plugin und Widget -Module in die Komponente Infrastruktur-Gruppe zu erreichen GA-Status. Satyen hat eine vorgesehene ausführliche Leitfaden für Entwickler für Interessierte, die mehr über die Komponente Infrastruktur.

• Internationalisierung Utility - Satyen arbeitete mit Yahoo Internationalisierung Ingenieur Norbert Lindenberg auf der neuen Internationalisierung Dienstprogramm für 3.1.0. Diese Komponente stellt YUI 3er Ansatz zur Internationalisierung, so dass für die Externalisierung von Modul Sprache Resource-Bundles, die getrennt von Code geliefert werden können, mit Unterstützung hinzugefügt, um Adam Moore-Loader für die Angabe Spracheinstellungen. Wir werden weiter zu entwickeln und auf diesem Ansatz aufbauen, wie wir YUI 3 Widgets vorstellen mit komplexeren UIs.
• TabView als Referenz-Widget - Matt Sweeney TabView aktualisiert und dient als gute Referenz-Implementierung für YUI-3-basierte Widgets, einschließlich der Ansatz, den wir auf Progressive Enhancement unter sind.

  

• Loader Verbesserungen - Adam Moore hat YUI 3er-Loader zur besseren Unterstützung der verbesserten YUI 3 Gallery . Ab 3.1.0 können Sie nun alle Last Gallery-Modul, das vor 3.1.0 ohne zusätzliche Konfiguration ausgeliefert einfach durch Verweis auf das Modul in Ihrer use() -Anweisung.
• YUI 2 in 3 - Adam Ausweitung der Befugnisse der use() noch weiter mit dem YUI 2 in 3-Projekt . Mit der Veröffentlichung von 3.1.0 können Sie nun auch YUI 2 Module direkt von Ihrem use() -Anweisung, bringt eine vollständig Sandbox-Version von YUI 2 in Ihre YUI 3 Instanz. Diese Arbeit unterstützt Entwickler, die den Übergang sind YUI 3, aber immer noch abhängig von einigen Komponenten, die einzigartig für YUI 2, einschließlich der beliebten YUI 2 DataTable .
• New Sortable Utility - Sortable ist ein neues Dienstprogramm von Dav Glass, die nutzt Drag and Drop auf sortierbare Listen zu implementieren. Support ist für die einzelnen Listen oder mehrere Listen, in denen Elemente aus einer Liste in die andere gezogen werden kann.

  

• Visuelle Behandlungen für Slider - Visual Designer Jeff Conniff arbeitete mit YUI-Ingenieur Luke Smith auf der Slider -Komponente für 3.1.0, deren Ergebnis eine Reihe von alternativen visuellen Behandlungen für Slider wurde. Luke hat auch Slider, um die Vorteile von Verbesserungen in der allgemeinen Widget-Infrastruktur übernehmen aktualisiert.

  

• Neue API für die Erstellung von synthetischen DOM-Ereignisse - Luke fügte der Y.Event.define() -Methode, um es einfach für Entwickler neue DOM-Ereignisse in der YUI 3 Ökosystem zu definieren. Verwenden Sie diese, um Lücken in der einheimischen DOM Event-Liste oder sonst label gemeinsame Interaktion mit dem Benutzer Momente zu füllen, dann an-und abmelden, wie Sie es mit einem anderen Ereignis.

Wie immer hat YUI-Programm-Manager Georgiann Puckett sofern eine umfassende Changelog für die YUI 3.1.0 Release - beziehen sich auf das Dokument für detaillierte Informationen darüber, was während der YUI 3-Familie verändert.

Was kommt als Nächstes?

Zwischen der Veröffentlichung von YUI 3.0.0 und 3.1.0 wurden mehr als 50 kostenlose Open-Source-Module zur hinzugefügt YUI 3 Gallery . Heute ist all diese Inhalte für Sie zugänglich von jedem YUI 3.1.0 Beispiel . Als wir uns auf unsere Arbeit für YUI 3.2.0 zu beginnen, wird die Bibliothek selbst alles andere als statisch sein - aktuell, YUI 3 ist mehr schnell wachsende Community von Beiträgen als aus dem Kernteam der Arbeit, und diese Beiträge sind zugänglich in einem nie dagewesenen Ausmaß.

In den kommenden Wochen werden wir aktualisieren die YUI 3 Fahrplan und Kalender mit der frühen Ziele und Zeitpläne aus unserem 3.2.0 Planung. 3.2.0 wird ein Widget-fokussierten freizugeben, da die Mehrheit des Kernteams ihre Aufmerksamkeit auf die hochwertigen UI Bausteine, bekannt aus der YUI 2 Welt sind.

In der Zwischenzeit freuen wir uns auf Ihr Feedback zu YUI 3.1.0. Begleiten Sie uns in der YUILibrary.com Foren und lassen Sie uns über das Know Bug-Tracker , wenn Sie Fragen zu entdecken in der Veröffentlichung.

Finden Gespräche: bloglines | technorati

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

Bevorstehende Konferenzen der Branche

Wir lieben große Tech-Konferenzen, und wir wissen, dass viele von Ihnen erstaunliche Dinge mit zu teilen. Deshalb habe ich gemeinsam diese Liste von Konferenzen und Barcamps Kommen, auf die Lautsprecher-und die Teilnahme der Suche setzen.

Wir werden auf einige dieser, und wir hoffen wir sehen viele von euch dort zu sprechen oder nicht.

Fachkonferenzen

Web 2.0 Expo New York 2010

Einsendeschluss: 12. April 2010
Web 2.0 Expo NYC Submission Seite
Konferenz Termin: 18. - 21. Oktober 2010
Ort: New York, NYC, USA

EuroPython 2010

Einsendeschluss: 30. April 2010
EuroPython Submission Seite
Konferenz Termin: 19. - 22. Juni 2010
Ort: Birmingham Conservatoire, Birmingham, UK

Barcamps

• 3. April - MobileCamp Boston
• 10. April - BarCamp Rochester
• 10. April - BarCamp Charlotte
• April 17-18 - BarCamp Boston
• 1. Mai - BarCamp Missoula
• 25 September - BarCamp Jonesboro

Wir halten Sie auf Aktualisieren Ereignis sprechen Fristen, wie sie kommen. Lassen Sie mich wissen, was ich in den Kommentaren verpasst und wir sorgen dafür, dass Ihre Veranstaltung ist hier enthalten.

Finden Gespräche: bloglines | technorati

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

In der YUI 3 Gallery: Matt Parker Resize Plugin

Wir verwenden eine Menge über die verschiedenen YUI 2 Widgets und Komponenten in unserem Programm, und sie lieben! Aber ich hatte gedacht, es sei an der Zeit zu starten um eine Auseinandersetzung mit YUI 3 und beschloss ich ein Go bei zu bringen haben YUI 2er-Resize Utility- an YUI 3. Ich habe auch längerfristige Pläne, ein Tagebuch zu schreiben Widget, und wenn es im Begriff war, in YUI 3 ist es würden einige resizableness müssen.

Das Ergebnis: Mein YUI 3 Galerie Resize Plugin . Die Quelle ist auf GitHub , und hier ist ein funktionelles Beispiel .

Ich beschloss, es als Plugin, anstatt ein Widget zu tun. Soweit ich das beurteilen kann, sind Plugins wie eine hübsche Handtasche oder ein Paar Vogel-Strauß-Haut-Schuhe, sie ziemlich ein vorhandenes Element, aber sie sind nicht das A-und-end-all. Erstellen eines Elements resizeable fühlte mich wie ein Plugin für mich.

So verwenden Sie Resize, enthalten den Code in Ihre Seite ein:

 <Script

Sobald Sie haben das Modul auf der Seite, so dass ein Element resizeable ist so einfach wie das Einstecken es in:

 YUI (). Verwenden ("gallery-resize", function (Y) {
   Y.one ("# elementID") Stecker (Y.Plugin.Resize).;
 });

Es schien mir sehr wichtig, dass die config und API von YUI 3 Versionen von Komponenten, die in YUI 2 vorliegen sollten ähnlich sein, zumindest, oder so viel wie sie in der YUI 3-Ansatz werden kann. So können Sie die gleiche Konfiguration Objekte mit diesem Plugin zu benutzen, als mit dem YUI-2-Version, und ich habe die gleichen API-Methoden zur Verfügung gestellt. Ich habe das Plugin-Code von Grund auf neu, aber die CSS wird direkt von YUI 2 kopiert, nur die Änderung der Präfix von yui- zu yui3- . Dies sollte zur Minimierung der Lernkurve für Menschen, die den YUI 2 bis YUI 3 Übergang.

Hier ein Beispiel mit einigen weiteren Optionen, wie ein Objekt als zweites Argument bestanden plug() :

 YUI (). Verwenden ("gallery-resize", function (Y) {

   Y.one ("# elementID")
    . Stecker (Y.Plugin.Resize,
          {Ziehbar: true,
             Verhältnis: false,
             Höhe: 150,
             Proxy: true,
             ghost: true,
             animieren: true,
             autoRatio: true,
             Griffe: ["t", "b", "l", "r", "tl", "tr", "bl", "br"],
             hiddenHandles: false,
             hover: true,
             knobHandles: true,
             useShim: true,
             Status: true,
             / / Das ist neu: ein Wahlschalter auf Kind-Elemente innerhalb von # elementID finden
             / / Das sollte im Verhältnis zu den Wrapper der Größe verändert werden.
             wrappedEls: "img",
             / / So ist: Sollte der Wrapper "Umarmung" des gewickelt Element?
             / / Das werde nur mit einem gewickelt Element zu arbeiten.
             hugWrappedEl: true
              });
  });

Es gibt eine Ausnahme, um die Konsistenz mit YUI 2: Wickeln Elemente. Meine Resize Gallery Modul fügt einige div -Elemente in dem Element, das verkleinert die Ihnen Ziehpunkte. Das ist in Ordnung, solange das Element Kindknoten akzeptiert, aber Bilder, Textfelder und dergleichen nicht. In YUI 2, die Resize Utility- fügt automatisch (oder, wenn Sie sagen, es) ein Wrapper-Element, um das Bild (oder was auch immer), um es resizeable.

Das ist in Ordnung, aber es ist nicht so gut mit einem Plugin-Ansatz. Plugins Plug-in zu einem bestimmten Knoten und sind zugänglich als eine Eigenschaft dieses Knotens. Aber wenn mein Plugin startet neue übergeordnete Knoten und heftet sich und sein Verhalten, dass Eltern, ist die Schnittstelle ein wenig gebrochen, und es wird unübersichtlich zu bedienen. So die Quintessenz ist, dass Sie wickeln Ihre Bilder selbst für jetzt. Dies könnte als ein Vorteil gegossen werden; der Wrapper-Element kann ein Haufen Bilder enthalten, zu sagen, und sie konnten alle mit dem Wrapper der Größe verändert werden, aber Beschriftungen für sie könnten allein gelassen werden.

Ich würde das Feedback der Benutzer (Liebe in der brandneuen Galerie Resize-Forum ), ob das Plugin-Ansatz für Sie arbeitet - das heißt, gefällt Ihnen die Bequemlichkeit oder doch lieber den zusätzlichen Komfort eines Dienstprogramm, das automatisch verarbeitet die Verpackung von Bilder und Textfelder? Ich habe einige andere to-dos noch, als auch, zum Beispiel, ich habe noch nicht bekam die Events verdrahtet, gibt es einige Neu-Arrangieren Kleinigkeiten (Herausziehen der CSS-Klasse-Namen), und einige Performance-Optimierungen und-größe noch zu tun. Ich habe nicht Cross-Browser-Test abgeschlossen ist, entweder, wenn Sie Resize sind mit einem Mac, vor allem, ich würde gerne Feedback darüber, wie es für Sie arbeiten.

Finden Gespräche: bloglines | technorati

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

Andrew Bialecki gewinnt den YUI 3 Gallery Contest 2010 mit Effects Module

Herzlichen Glückwunsch an Andrew Bialecki ( @ abialecki auf Twitter ), dessen Scriptaculous-inspirierten Effects-Modul gewann den YUI 3 Gallery Contest 2010 .

Andrew, der im DC-Bereich lebt, teilnehmen werden JSConf 2010 im nächsten Monat mit einem kostenlosen Ticket aus der Yahoo! Developer Network . (Danke, @ YDN !)

The Winning Entry: Effects

Andrew Das Projekt baut auf dem YUI 3 Animation Komponente, indem es ein Zucker-Schicht durch die Scriptaculous API inspiriert. Die Idee wird ein bekanntes (und erwünscht) eine für jedermann verwendet werden, um diese Art der Syntax:

  .. Y.one ("# main_demo") bewegen ({x: 300}) fade (); 

Die Richter schätzten die Nützlichkeit und Wünschbarkeit dieses Pakets. Entwickler schätzen die Prägnanz der Syntax und die Auffindbarkeit der Auswirkungen, vor allem wenn sie Erfahrung in der Arbeit mit ihm in anderen Bibliotheken haben.

Wir bewunderten die Professionalität der Dokumentation Andrew für das Modul vorgesehenen . Die Dokumentation ist nie eine leichte Aufgabe, aber es ist der Implementierer erste Berührungspunkt mit Ihrem Code und gründlich dokumentiert das Projekt teilt Ihrem Publikum, dass du nimmst seine Bedürfnisse ernst. Andrew leicht gelöscht, die Messlatte für uns.

Wir können sehen, gallery-effects zeigt sich in vielen use() -Anweisungen in die Zukunft, und das war einer der entscheidenden Faktoren. Nützlich, ausdrucksstark und überzeugend dokumentiert - in diesem Fall, eine gewinnende Kombination.

Dank Andrew für seine Unterwerfung. Prüfen Sie alle Andrew Galerie Beiträge auf YUILibrary.com .

Lobende Erwähnungen

Die Qualität der Module, die wir für den Wettbewerb beurteilt hat dies eine schwierige Wahl - es gibt viele interessante Arbeit in dieser Gruppe. Wir vereinzelt ein paar andere bemerkenswerte Einträge würdig besonderes Lob:

• Nutzen: YUI Slideshow - Josh Lizarraga ist YUI Diashow-Modul (inspiriert durch die jQuery-Plugin-Zyklus) ist sauber, elegant und gut dokumentiert. Dies ist ein starker Konkurrent, wenn Sie für ein Bild Cycler auf YUI 3 basierend suchen.
• Einzigartigkeit: Radial Menu - Matt Snider ist Radial Menu ist ein neuer Ansatz, um ein Portfolio von Miniatur-oder mittelgroße Objekte suchen. Der Use Case für diese Komponente ist wohl enger als für einige UI-Widgets, aber im Einsatz in den richtigen Kontext es durchaus wirkungsvolle und unverwechselbaren könnte.
• Code Quality: Component Manager - Eric Ferraiuolo der Component Manager schlug uns als gut geschrieben und als ein Projekt, dass Entwickler ihre eigenen Code-Struktur hilft. Obwohl es nicht machen Ihre Seite glänzend, könnte es dazu beitragen, dass Ihre Anwendung besser funktionieren, und das ist würdig mit einer lobenden Erwähnung in unserem Buch.
• Dokumentation: YUISand - Lauren Smith YUISand -Modul, das eine glatte Umsetzung von Quicksand für jQuery inspiriert ist, war sowohl gut dokumentiert und interessant. Er teilte gute Noten in der Dokumentation Kategorie mit lobenswert und modular Slideshow James Punteney der Base / Slideshow Animated Tandem , Josh Zyklus-style Slideshow , und einige andere.

16 Module in 17 Tagen

Dies war ein kurzer Laufzeit Wettbewerb, aber trotz der schmalen Fenster gab es 16 förderfähige Module vorgelegt, und keiner von ihnen enttäuscht. In der Tat können viele von ihnen am Ende macht eine überzeugende Beitrag zu einem Ihrer zukünftigen YUI 3 Anwendungen. Es war ein Bild Lupe , zwei Video- Module, ein Wrapper für YUI 3 DataSource , um es mit YUI 2 Komponenten, einem Werk Karussell Widget und ein DOM-Erstellung Zucker-Modul , und vieles mehr.

Mit diesen Neuankömmlingen (zusammen mit einigen anderen aus den letzten Wochen, die nicht contest-fähigen), ist YUI 3 Gallery bis zu 82 Module . Sie reichen von der Grundlagenforschung bis zu dem wunderlichen, aber die Ressource selbst ist bereits einer der wertvollsten Aspekte der YUI 3 Entwickler-Portfolio. ( Und es kann noch mehr wertvolle recht bald .) Erinnern Sie sich, wie der kommenden Version 3.1 (nur ein paar Wochen weg) Sie in der Lage, alle diese Module nutzen direkt von Ihrem use() -Anweisung ohne zusätzliche Konfiguration oder Overhead.

Vielen Dank an alle, die Module vorgelegt. Andrew, haben Spaß an JSConf!

Finden Gespräche: bloglines | technorati

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

Ada Lovelace Day 2010: Julie London, Diana Liu, Helena Rajan, Shweta Hayatnagarkar und Betty Tso von Yahoo! Finance

Die Frauen der Yahoo! Finance -Frontend Engineering-Team sind nur einige der talentiertesten Ingenieure, die ich je hatte das Privileg haben, mit zu arbeiten. Ihre Leidenschaft für die besten Praktiken, die Zugänglichkeit und den Endanwender machen den Bau der weltweit größten und am besten finanzieren Ort ein absolutes Vergnügen. Am Vorabend der Versand einer massiven Änderung der Yahoo! Finance Website, nehmen unsere Codebasis global wird und schieben Sie es in Rechenzentren rund um den Globus, finde ich mich das Gefühl unglaublich glücklich, mit diesen Frauen an einem Tag zu Tag Grundlage zu arbeiten. Ich fragte die Frauen auf der Yahoo! Finance Frontend-Team darüber nachzudenken, was brachten sie nach Frontend Engineering und wie es ist, auf eine der weltweit am häufigsten besuchten Websites zu arbeiten.

Julie London

Ich baute meine erste Website im Jahr 1998, als animierte GIFs wurden als Schneide. Ich war wie ein Anthropologe arbeitete zu der Zeit und hätte nie gedacht, dass die 5 miesen kleinen Web-Seiten, die ich für San Francisco State University gebaut wäre der Beginn eines Weges, die schließlich zu Yahoo! würde führen können.

Ich liebe Frontend Engineering, weil ich in Frage gestellt werden Liebe und ich liebe es, Rätsel zu lösen. Mein Job ist nie langweilig. Die Landschaft ist ständig wechselnden und sich hervortun, haben Sie immer weiter lernen.

Arbeiten bei Yahoo! hält mein Ego in Schach. Ich arbeite mit brillanten Menschen auf eine Website, die von Millionen von Menschen verwendet wird.

Diana Liu

Ich zum ersten Mal mit Web-Programmierung, wenn ich als Co-op Student arbeitete während meines Grundstudiums Studien beteiligt. Ich war bei Hewlett-Packard arbeiten über ihre internen Web-Seiten und Web-Tools. Ich war für eine Vielzahl von Aufgaben ausgesetzt, aber ich fand mich bald angezogen Frontend Engineering. Ich liebe es, in der Lage, ein paar Zeilen Code zu schreiben, drücken Sie die Schaltfläche zum Aktualisieren des Browsers, und sofort Ergebnisse sehen. Die Instant-Befriedigung ist überwältigend. Ich liebe die Arbeit auf der Ebene am nächsten Nutzer. Es ist mir wichtig, dass ich tolle Erfahrungen, die den Nutzer, und als ein Frontend-Ingenieur kann ich oft Einfluss auf die Usability und Design von Web-Seiten.

Yahoo bietet eine umfassende Ausbildung in Frontend-Technologien, und es hat auch einen hohen Standard für den Code, den wir schreiben. Yahoo drängt uns zu erreichen Code zu schreiben. Für mich ist es sehr lohnend zu wissen, dass Menschen mit Behinderungen in der Lage, die Eigenschaften von Yahoo! Finance Zugang, weil ich Code, der unterstützenden Technologien unterstützt zu schreiben sind.

Ich bin stolz, den Leuten zu sagen, dass ich auf der größten Finanz-Arbeit vor Ort auf dem Netz. Es ist eine große Verantwortung, wissend, dass ich Code schreiben für Millionen von Nutzern weltweit. Gleichzeitig ist es ein unglaubliches Gefühl zu wissen, dass ich Menschen helfen, Dinge zu erledigen einfacher, da der Code, den ich zu schreiben.

Helena Rajan

Alle von uns kennen das Sprichwort, "Face ist der Index des Geistes". Ich würde Frontend Engineering auf das Gesicht und Backend-Engineering, um den Geist zu vergleichen. Das sagt alles. Die Website erstens wird durch das Look and Feel beurteilt, dann kommt die andere Eigenschaften ... und das ist, was ich in mir und das ist, was hält mein tägliches Leben interessant.

Es ist ein tolles Erlebnis im Finanzwesen arbeiten. Nicht jeder bekommt die Möglichkeit, auf ein Produkt, das von Millionen von Menschen in der Welt täglich zu sehen ist Arbeit, und ich bin dankbar, diese Chance zu haben. Dieses Projekt hat mir das Privileg, mit einigen großen Technologen und es hilft mir etwas Neues lernen täglich.

Shweta Hayatnagarkar

Frontend-Engineering ist eine erstaunliche Domain - lernen Sie die coolsten Software, dass die Endnutzer tatsächlich sehen und schätzen zu entwickeln. Sie entwickeln ständig Funktionen, die die Benutzererfahrung auswirken. Darüber hinaus erhalten Sie zum Lernen und Arbeiten auf cutting-edge, state-of-the-art Technologien, die sich ständig weiterentwickelnden sind. Yahoo! bietet eine solide Plattform für Frontend-Engineering.

Es ist ein zweischneidiges Schwert - einerseits erhalten Sie eine Genugtuung fest, dass, was Sie entwickeln, indem Millionen von Nutzern überall auf der Welt verwendet werden, auf der anderen Seite muss man ständig auf die Zehen, um sicherzustellen, dass die Website läuft perfekt . So ist es herausfordernd und befriedigend zugleich.

Yahoo ist ein fantastischer Ort, um ein Frontend-Ingenieur werden. Das Frontend-Infrastruktur und werden ständig weiterentwickelt Frontend Forschung, nicht um unsere Millionen von Nutzern zu erwähnen, macht die Entwicklung bei Yahoo! eine höchst interessante, herausfordernde und befriedigende Arbeit zu erleben.

Betty Tso

Ich begann auch Erstellen von Websites während der Zeit, als animierte GIFs ein Hit wurden. Nach dem Studium der Informatik, konzentrierte ich mich auf Hochleistungs-Web-Site Entwicklung. Ich schloss Yahoo! als Frontend-Ingenieur, und es war sehr befriedigend zu sehen, wie verschiedene Frontend-Technologien haben die Online-User Experience weiter entwickelt und das Internet ein alltäglicher Bestandteil des Lebens der Menschen.

Mein Fokus auf der Yahoo! Finance Frontend-Team umfasst die Analyse und Entwicklung von Möglichkeiten, um Site-Performance und Benutzerfreundlichkeit zu verbessern. Ich habe auch helfen, andere Yahoo! Eigenschaften, Leistungsengpässe zu erkennen und Lösungen vorschlagen für Verbesserungen. Ich genieße teilen die lila Geist mit Personen außerhalb des Unternehmens, und ich war einer der Vertreter in Massachusetts Institute of Technology Hochschulmarketing-Programm.

Es wird mein 4. Jahr werden bei Yahoo! in einem Monat und rückblickend war es wie ein erfülltes Reise. Ich erhalte auf einer Website, die Millionen Menschen das tägliche Leben Auswirkungen der Arbeit, und ich kann mit einigen großen Talenten in einer freundlichen, busy, verrückt und Spaß Team zu arbeiten.

Finden Gespräche: bloglines | technorati

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

Ada Lovelace Day 2010: Sadaf Shahsahebi des Yahoo! Developer Network

Aufgewachsen im Herzen des Silicon Valley, könnte man argumentieren, dass Sadaf Shahsahebi immer war dazu bestimmt, mit der Technologie arbeiten. Ihr Vater nach Hause brachte ihren ersten Computer, wenn sie 7 war und von der Mittelschule war sie bereits Pascal-Programmierung in der Schule während der Einnahme von Sommerkursen lernen C + +. Trotzdem war ein Teil der Sadaf gleichermaßen in Richtung Medizin und das Potenzial zur Behandlung von Hilfe und Heilung Kindern gezogen. Erst kurz vor dem College, als sie endgültig beschlossen, auf die Technik konzentrieren. Die Ärzteschaft der Verlust stellte sich heraus, Yahoo! 's zu gewinnen.

Eine Chance Sommer Praktikum bei Yahoo! nach ihrem zweiten Jahr am College begann eine Beziehung, die bis zum Abschluss gedauert, als sie sich für Yahoo! Vollzeitbeschäftigung entschieden. Obwohl ihre Praktika waren nicht auf Frontend-Engineering konzentrieren, zog es sie auf die Disziplin, wenn sie über die Juku-Programm gelernt. Sadaf verbrachte mehrere Monate lernen die Ins und Outs der Frontend-Engineering vor dem Abschluss mit der allerersten Juku-Klasse.

Sadaf dann trat der Yahoo! Application Platform (YAP) Team als einer der ersten Frontend-Ingenieure. Sie war Teil des Teams, die YAP von Grund auf neu erstellt und wuchs es um die feature-rich Plattform, die Entwicklern heute genießen. Schon eine Leistung für alle, geschweige denn für jemanden, der erste Anstellung nach dem College.

Aufgrund ihrer fundierten Kenntnisse in Bezug auf YAP wurde Sadaf auch damit beauftragt, auf die technische Integration von YAP in My Yahoo! arbeitete sie eng mit dem My Yahoo! Team, um eine nahtlose Erfahrung mit dem bestehenden Produkt zu erstellen, was einen enormen Einfluss auf die Arbeit Millionen von Mein Yahoo! Nutzer weltweit.

Sadaf der aktuellen Rolle als Teil des Yahoo! Developer Network Team hat sie die Entwicklung und Aufrechterhaltung der Entwickler-Tools, die Entwicklern von Drittanbietern zur Erstellung und Verwaltung ihrer YAP-Anwendungen ermöglichen. Es genügt zu sagen, wenn Sie jemals ein YAP Anwendung erstellt haben, dann sind Sie dankbar für Sadaf Arbeit sind.

Was Sadaf bringt mit ihrer Arbeit liegt auf der Hand, wenn sie spricht: die Leidenschaft für das Web, eine Liebe, von Herausforderungen und einem Durst nach Wissen. Sie finden sich regelmäßig versuchen, ihr eigenes Verständnis aller Dinge Software zu erweitern, wie sie ein eifriger Leser und erst vor kurzem begann eine Master-Studiengang in Informatik werden.

Die Herausforderung des Web, ist ein sich ständig verändernden, sich ständig weiterentwickelnden Bereich der APIs perfekt auf beträchtlichen Talente Sadaf ist abgestimmt. Obwohl sie schnell zugeben, dass IE6 treibt sie Nüsse, Sadaf Leidenschaft für Front-End-Engineering und ihr Engagement weiter zu lernen sorgt für eine leuchtende Zukunft für sie und alle ihre zukünftigen Projekte.

Finden Gespräche: bloglines | technorati

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

In der YUI 3 Gallery: John Lindal die Form Manager

Formulare sind ein Grundnahrungsmittel auf Webseiten für eine sehr lange Zeit gewesen. In den frühen Tagen waren sie ganz einfach: Die vom Benutzer eingegebenen Werte und wartete dann, während der Server die Werte verarbeitet oder spucken wieder Fehler. Der Aufstieg des Web 2.0 hat sich die Erfahrung verbessert, vor allem durch Pre-Validierung auf dem Client. Dies ermöglicht sofortiges Feedback und vermeidet sinnlose Verbindungen zum Server.

Pre-Validierung ist nur ein Aspekt der Formen, aber. Der gesamte Zyklus ist:

1. Pre-füllen Sie das Formular mit Standardwerten;
2. Pre-Validierung der Eingabe in den Browser;
3. schicken Sie das Formular an den Server synchron oder asynchron;
4. die Ergebnisse von dem Server (Erfolg oder Fehler) zurückgegeben.

In Kombination mit YUI 3 IO , der YUI 3 Gallery Modul Formular-Manager unterstützt diese vollen Zyklus. Sie können mit der client-seitige Funktionalität spielen hier .

Initialisierung

Der erste Schritt, vor Ausfüllen des Formulars mit Standardwerten, ist natürlich am besten, indem Sie Werte direkt in das Markup getan, denn das funktioniert auch dann, wenn JavaScript deaktiviert ist. Sie können jedoch auch an einer Karte von Standardwerten, auf die Namen der Formular-Elemente eingegeben haben, um die Form Manager Konstruktor. Wenn Sie uns anrufen prepareForm() , verbindet es die Standardwerte aus dem DOM mit den Standardwerten an den Konstruktor übergeben, mit dem Konstruktor Werte Vorrang. Das Ergebnis wird gespeichert, so dass Sie problemlos auf diese Werte, indem Sie Reset kann populateForm() . Sie können auch diese gespeicherten Standardwerte: setDefaultValues() , setDefaultValue() , oder saveCurrentValuesAsDefault() . (Beachten Sie, dass dieser sich von der Browser-nativen reset -Funktion, denn das nutzt nur die Werte in den DOM kodiert. Form Manager bietet clearForm() als Wrapper für reset .)

Eine weitere nützliche Funktion, um während der Initialisierung Anruf initFocus() . Dies setzt den Fokus auf das erste Element in der Form. Wenn Sie das Formular ausfüllen ist der Hauptgrund für den Besuch der Seite, das spart dem Anwender einen Klick. Selbstverständlich, wenn Sie mehr als ein Formular auf der Seite haben, sollten Sie nur aufrufen, initFocus() für eine von ihnen.

Pre-Validierung

Pre-Validierung von Benutzereingaben ist eine heikle Angelegenheit . Nach meiner Erfahrung ist der einfachste Ansatz am besten können: alles überprüfen, nachdem der Benutzer sagt, dass ich fertig bin Dies vermeidet die Notwendigkeit, die Input-Stream-Filter (keyup ist leicht zu fangen, aber Paste ist bekanntlich schwer, und das alles führt zu sehr unerwartet. Grenzfall Verhalten) und, noch wichtiger, ist es nicht zu unterbrechen des Benutzers fließen. Deshalb Form Manager eine einzelne Funktion, um alles in der Form (Trommelwirbel bitte) zu validieren bietet: validateForm() .

Im Gegensatz zu anderen Lösungen, speichert Form Manager die meisten der Validierung Konfiguration in den DOM. So markieren Sie ein Feld für die Validierung, gelten eine oder mehrere der folgenden CSS-Klassen direkt auf das Feld:

yiv-required

Der Wert muss nicht leer sein.

yiv-length:[x,y]

String muss mindestens x Zeichen und höchstens y Zeichen lang sein. Mindestens einer der x und y müssen angegeben werden.

yiv-integer:[x,y]

Der Wert muss eine ganze Zahl sein, und der Wert muss mindestens x und höchstens y werden x und y sind beide optional.

yiv-decimal:[x,y]

Der Wert muss eine Dezimalzahl sein, und der Wert muss mindestens x und höchstens y werden Exponenten sind nicht gestattet. x und y sind beide optional.

Zum Beispiel, wenn ein Feld ausgefüllt werden muss, und es nimmt nur zwischen 6 und 10 Zeichen, würde die CSS-Klasse werden yiv-required yiv-length:[6,10] .

Ein angenehmer Nebeneffekt der Kodierung Validierung in CSS-Klassen ist, dass es in Situationen angewendet werden kann, zB bei der Bearbeitung von dynamisch erzeugten Felder in einer Tabelle. (Ich hoffe, ein Beispiel für post YUI 2 DataTable in Kürze.) FormManager macht die statische Funktion validateFromCSSData() , so dass Sie müssen nicht das Rad neu erfinden.

Wenn Sie einen regulären Ausdruck verwenden, um ein Feld zu validieren müssen, registrieren Sie es durch den Aufruf setRegex() . Für alles andere können Sie eine Funktion, um ein Feld legen, indem Sie setFunction() . Wenn Sie überprüft, dass mehrere Felder umfassen durchführen müssen, können Sie überschreiben postValidateForm() auf Ihrer Instanz von Y.FormManager .

Ein letzter Hinweis: Wie der Name schon vermuten lässt, ist Pre-Validierung nicht echte Validierung. JavaScript ist relativ leicht zu unterwandern (oder vollständig ausschalten), so muss der Server nie vertrauen alles, was sie von den Kunden. Darüber hinaus können einige Prüfungen nur auf dem Server, zB alles, was schlagen die Datenbank erfordert getan werden.

Angezeigte Fehler

Selbstverständlich, wenn entweder Pre-Validierung auf dem Client oder die Validierung auf dem Server ausfällt, dann müssen Sie den Benutzer zu benachrichtigen, idealerweise indem sie die Felder, die Aufmerksamkeit brauchen. Form Manager unterstützt diese über die Funktion displayMessage() .

Diese Funktion erwartet bestimmte CSS-Marker-Klassen auf dem DOM surrouning jedes Formularelement oder eng gekoppelten Satz von Formular-Elemente. Meine Lieblings-Layout ist:

 <div class=" formmgr-row>
   ... Element label ...
   <span class=" formmgr-message-text "> </ span>
   ... Formular-Element mit CSS-Klasse formmgr-Feld markiert ...
 </ Div>

Diese lokalisiert gut, da das Etikett über dem Feld, und wenn eine Fehlermeldung angezeigt wird, ist es sehr deutlich, in welchem ​​Bereich der Fehler gilt. Um zu sehen, sie in Aktion, folgen Sie diesem Link und klicken Sie auf die Schaltfläche Validate in der linken oberen Ecke der Seite.

Aber das ist nur meine Vorliebe. You can arrange the DOM elements any way you want inside the container marked by formmgr-row , as long as somewhere inside is another container marked by formmgr-message-text , and the field itself is marked by formmgr-field .

Message Types

One important point is that displayMessage() requires a message type. The supported types are stored in Y.FormManager.status_order in order of precedence. The default is [ 'error', 'warn', 'success', 'info' ] , but you can modify this to suit your needs. The ordering is important because, if you call displayMessage() with a higher precedence type and the field is already displaying a message with a lower precedence, then the new message will replace the original message. Similarly, a lower precedence message will be ignored if a higher precedence message is already displayed. This allows you to toss messages at each field with abandon, secure in the knowledge that errors will override warnings.

When a message is displayed, the container marked with formmgr-row and the field marked with formmgr-field both get an extra CSS class: formmgr-has type , where type is the message type. This allows you to style the message, field, label, etc. in a different way for each message type. In addition, the fieldset containing the form field also gets the same class. This can be used to direct the user's attention when the form is large. (If several fields within a fieldset have different types of messages, the highest precedence type is set on the fieldset.)

Nachrichten

Form Manager includes a default set of error messages for all the validations that can be encoded in CSS. These strings are stored in Y.FormManager.Strings , so you can modify and/or localize them.

You can also specify custom messages for individual fields by calling setErrorMessages() .

Note that there is no default message for a regular expression validator, because anything generic like The value does not match the required pattern. is utterly meaningless to the user. If you do not set a message for the type regex before setting the regular expression itself, Form Manager will log an error to remind you.

Submitting the Form

Regardless of whether you submit the data synchronously (via form.submit() ) or asynchronously (via Y.io ), you will probably want to disable the form while the data is being processed. Form Manager automatically finds all buttons inside the <form> element. If you have additional buttons elsewhere on the page, you can register them by calling registerButton() . All known buttons will be disabled when you call disableForm() . (If you use XHR, call enableForm() after you receive the response from the server!)

If you submit the form synchronously, then you will serve the same page again if there are errors. In order to work without JavaScript, you should write the errors directly into the DOM, the same way that Form Manager does it.

If you submit via XHR, then you know that JavaScript is enabled, so you can use displayMessage() to highlight the values which the server rejected. Obviously, this requires that the response from the server include detailed error information!

As a final note, if the form is in an overlay, then you should only close the overlay if the server response with success ; ie, display errors in the overlay, but display a success message somewhere prominent on the main page.

Finden Gespräche: bloglines | technorati

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