Yahoo! User Interface Blog (YUIBlog)

YUI 2.9.0 Release Candidate è ora disponibile

30 Marzo 2011 alle 11:02 pm Jenny Donnelly | In Development | 4 Comments

Il YUI 2.9.0 release candidate è ora disponibile per la revisione da parte della comunità. Il team sarà presente nei prossimi giorni di fare un ultimo giro di prove, quindi vorremmo incoraggiare la nostra comunità di sviluppatori di ottenere qualsiasi feeback a noi entro la fine della settimana.

La release candidate, YUI 2.9.0 PR4, è disponibile sia tramite il CDN , nonché un pacchetto scaricabile per il test. Si prega di fornire un feedback da Venerdì 1 aprile su eventuali bug e regressioni si possono trovare.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Uso Loader a Quorus

24 Marzo 2011 alle 9:49 pm Peter Abrahamsen | In Development , le implementazioni YUI | 2 commenti

Oggi, vorrei parlare di YUI Loader e come noi a Quorus, Inc. , utilizzarla per fornire siti di terze parti con le nuove caratteristiche su richiesta.

Il codice che scriviamo caratteristiche poteri sulle pagine di altri popoli, il che significa che siamo nella non invidiabile posizione di dover non solo non controlla l'ambiente del browser, ma pesanti restrizioni nel modo in cui usiamo il documento stesso. I nostri clienti mettere uno script Quorus bootstrap sulle loro pagine, tutto il resto necessario per il nostro funzionalità è caricato in modo dinamico e su richiesta. Andiamo a lunghezze eroici per assicurarsi che i nostri elementi, stili e script non alterano il comportamento di tutto non siamo responsabili.

Abbiamo iniziato la nostra base di codice presente due anni fa, quando YUI 3 è stato solo prendendo forma. E 'stata una decisione rischiosa, al momento di impegnarsi per una base di codice che non avrebbe colpito beta per diversi mesi. In retrospettiva non posso immaginare come si sarebbe realizzato ciò che abbiamo senza di essa. Non ho visto nessun altro quadro che ha componenti che si avvicinano il potere di Loader, Attribute e CustomEvent .

Lo script di bootstrap Quorus forniamo ai nostri clienti fa quasi nulla. Il suo compito è solo quello di caricare il centro della nostra piattaforma senza bloccare il resto del caricamento della pagina, e di coda di qualsiasi API chiamate fino a quando abbiamo fatto così. Questo file di script core, chiamato stage2, inline yui , loader , e oop , così come intelligenza sufficiente per caricare librerie aggiuntive per rispondere alle chiamate API, i clic degli utenti, e le altre condizioni del contesto operativo. Maggior parte delle altre risorse sono servite da un server combo personalizzata che serve personalizzato Quorus e stock moduli YUI.

Bootstrap code fino API chiamate in codice del sito ospitante tra il momento in carica e quando siamo pronti ad andare in un array sul nostro oggetto globale, QUORUS:

 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); }; 

Una volta che siamo pronti a elaborare le chiamate API, stage2 li esegue uno per uno in timeout. Questo assicura cediamo il controllo regolarmente al browser, il che rende l'esperienza utente più reattiva. Il comportamento è molto simile a Y.AsyncQueue, ma più semplice e non richiede YUI da caricare:

 // 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(); 

Il bootstrap file è, a questo punto, per lo più immutabile: è qualcosa che la mano fuori ad un cliente, che potrebbe richiedere un mese o più per distribuire qualsiasi nuova versione abbiamo dato loro, un tempo incredibilmente lungo per una società di avvio agile. Il stage2 file, nel frattempo, è piccolo, carichi da nostri server, e ha una vita breve cache. Questo assicura che nessun utente finale avrà una vecchia versione per più di pochi minuti. Quasi tutte le altre risorse di cui abbiamo bisogno in modo permanente cacheabili librerie JavaScript e file CSS.

Quando abbiamo rilasciare una nuova versione del nostro codice, stage2 indirizza automaticamente i browser per avviare il download da una nuova posizione, assicurando che utilizzare solo il nuovo codice. Questa configurazione ci permette di distribuire le modifiche rapidamente senza servendo le attività più spesso del necessario. Questo non solo a mantenere i costi di larghezza di banda bassa, ma fornisce una migliore esperienza utente: le risorse memorizzate nella cache caricare molto rapidamente mentre la pagina viene caricata.

Se abbiamo iniziato la nostra codebase oggi, con il beneficio della Galleria YUI , ci sono una serie di componenti che potremmo usare per rendere la nostra vita più facile. Uno di questi è Eric Ferraiuolo di Component Manager Base , che assiste con il cablaggio di componenti (tipicamente Widget) su richiesta. Un altro potrebbe essere di archiviazione Lite , per aiutarci a mantenere lo stato delle applicazioni su caricamento della pagina.

Molte grazie al team YUI per il loro grande lavoro, e alla comunità per i loro contributi. Se volete leggere i nostri approcci per sandboxing o di coordinare i componenti caricati in modo asincrono, per favore fatemelo sapere nei commenti!

Circa l'autore: Peter Abrahamsen scrive Ruby e JavaScript, gestisce l'infrastruttura server, e gli studi user-centered design in Seattle, Washington, USA. Lo si può trovare su IRC come Rainhead.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI: Orario di apertura lun 23 marzo

21 Marzo 2011 alle 10:15 da Luca Smith | In Development e orari di apertura | 4 Comments

YUI 3 Cookbook primo sguardo

Non è stato ben pubblicizzato, ma abbiamo un 3 Cookbook YUI in opere e Evan Goer è l'uomo in carica. Evan è stato uno scrittore tecnico per quasi 15 anni, il che significa che abbiamo fiducia in lui per fare un lavoro migliore scrittura di esso che avremmo (noi ci limiteremo alla codifica). Quindi, questa settimana ti presentiamo Evan, e vi darà la possibilità di vedere e dare un feedback su alcune contenuto iniziale del libro e della struttura.

Anche questa settimana, Steven Roussey sarà la chiamata, provare le canzoni di plug-in Luminarie per Firebug che permette di vedere i 3 oggetti YUI dietro la struttura DOM e altro ancora.

Time & Details

Saremo on-line 10:00-11:00 PDT Mercoledì. I dettagli di connessione sono le stesse come al solito.

1. Comporre al 1-888-371-8922 (Skype funziona alla grande per non statunitensi partecipanti *)
2. Inserire il codice partecipante 47188953 #
3. Partecipa alla sessione di condivisione dello schermo (questa vi verrà chiesto di installare il plugin Adobe Connect se questa è la prima volta ad usarlo)

* - Se Skype non è un'opzione, mandatemi una email o prendere me (ls_n) nel yui # canale IRC su Freenode per un numero locale.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Apertura lavori sul Team Yahoo! Media Foundation

17 marzo 2011 alle 09:35 am da Ricardo Dotta | In Development , Lavoro front-end Ingegneria a Yahoo | 1 commento

Siamo alla ricerca di un Software Engineer con esperienza per unirsi al team Media Yahoo! anteriore Foundation End. Il team Front End è responsabile dello sviluppo globale, componenti software condivisi e piattaforme per i siti web dei media Yahoo! - Yahoo! Notizie, Yahoo! Finance, Yahoo! Sports, Yahoo! Music, Yahoo! Movies, TV Yahoo!, Yahoo! Video, OMG! e altri. Yahoo! siti dei media sono tra le mete più ambite sul Web, e vi svolgono un ruolo chiave nello sviluppo di prodotti unici ed entusiasmanti e servizi che tocco milioni di persone ogni giorno.

Requisiti

• In grado di lavorare in un ambiente dinamico
• Discente Fast - può venire rapidamente fino alla velocità con diverse tecnologie
• Team Player - in grado di collaborare con i coetanei e di guida
• Deve avere un forte senso di impegno e responsabilità
• Deve avere forti capacità di comunicazione verbale e scritta
• Deve avere una forte conoscenza e interesse per strumenti e tecnologie emergenti nel settore

Competenze richieste / Esperienza

• 5 + anni di esperienza nel settore
• Deve avere una forte conoscenza della programmazione orientata agli oggetti in PHP (preferito), Java o C + + o simile
• Deve avere esperienza con framework MVC come Zend, CakePHP, o Symphony (o altro) e lato client AJAX
• Deve avere una forte conoscenza di JavaScript, OOP JS, CSS e DHTML
• Proficiency in JSON, XML, XSLT, Unix amministrazione e shell scripting
• Le espressioni regolari, esperienza di sviluppo Unix, esperienza di gestione e Subversion altamente desiderata
• Tecnologie di presentazione conoscenza ed esperienza con HTML5, CSS3, ed emergenti altamente desiderata
• L'esperienza con unit testing e / o automazione dei test a più
• Database, SQL e MySQL (stack LAMP) esperienza sono vantaggi
• Esperienza nello sviluppo e distribuzione altamente efficienti e scalabili le applicazioni lato server
• Ottima capacità di debugging e testing
• Ottime capacità di analisi e problem solving
• Computer laurea o equivalente esperienza di lavoro richiesta

A proposito di Yahoo!

Pensate a impatto 1 ogni 2 persone on-line in modi innovativi e fantasiosi che sono unicamente Yahoo!. Lo facciamo solo che ogni giorno, e si potrebbe anche. Dopo tutto, è grandi pensatori come te che creeranno la prossima generazione di esperienze Internet per i consumatori e gli inserzionisti di tutto il mondo. Ora è il momento di mostrare al mondo quello che hai. Mettete le vostre idee a lavorare per oltre mezzo miliardo di persone.

Yahoo! Inc. è un datore di lavoro pari opportunità. Per ulteriori informazioni e per richiedere visitare http://careers.yahoo.com/jdescription.php?frm=search_results&oid=35901&qs=jcat=8__submit=1 , e per cercare tutti i nostri aperture si prega di visitare http://careers.yahoo . com .

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI: Aperto gio Ore 17 marzo

14 Marzo, 2011 alle 11:56 pm da Luke Smith | In Development , Orario di apertura | Commenti disabilitati

Ajax

Questa settimana, voglio dirottare l'ora di parlare di Y.io (e amici), fare un po 'di brainstorming su ciò che tutti pensano renderebbe YUI 3 di ajax interfaccia il meglio che possono essere. Ho alcuni pensieri che mi piacerebbe condividere, e possiamo eseguire la scansione attraverso alcuni bug esistenti e richieste di nuove funzionalità .

In realtà, però, voglio sentire da te che tipo di modelli che tendono ad applicare nel mondo reale, e che tipo di zucchero API si potrebbe aggiungere per rendere la vita più facile. Perché lo faremo. Lo giuro.

Ecco un campionatore dalla galleria oggi:

• REST Resource
• IO Multi-response
• AlloyUI IO e IO Request
• Comet flusso
• JSON-RPC
• IO Poller

Forse alcune delle risposte sono lì? Cosa vuoi cotta in, e che cosa si vuole assomigliare?

Time & Details

Saremo on-line 10:00-11:00 PDT Giovedi. I dettagli di connessione sono le stesse come al solito.

1. Comporre al 1-888-371-8922 (Skype funziona alla grande per non statunitensi partecipanti *)
2. Inserire il codice partecipante 47188953 #
3. Partecipa alla sessione di condivisione dello schermo (questa vi verrà chiesto di installare il plugin Adobe Connect se questa è la prima volta ad usarlo)

* - Se Skype non è un'opzione, mandatemi una email o prendere me (ls_n) nel yui # canale IRC su Freenode per un numero locale.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI 2.9.0 Preview Release è ora disponibile

14 Marzo, 2011 alle 8:10 pm Jenny Donnelly | In Development | 4 Comments

Il team di YUI è stato duramente al lavoro chiudendo l'ultimo dei nostri 2.9.0 bug , e oggi siamo lieti di annunciare la disponibilità di una versione 2.9.0 di anteprima per il test da parte della comunità. Incluso in questa release sono numerose correzioni di bug e miglioramenti mirati che aiuterà a portare la chiusura al codeline 2 YUI , nonché modifiche al codice mirate e aggiornamenti della documentazione che rendono più difficile per gli implementatori a trascurare involontariamente best practice di sicurezza .

YUI 2.9.0 rappresenta il nostro ultimo rilascio di bug fix sulla linea 2 del codice YUI prima di metterlo in modalità di manutenzione, quando solo correzioni di bug critici e mirate correzioni di compatibilità del browser saranno prese in considerazione. Siamo davvero entusiasti di essere in grado di raggiungere questo importante traguardo, che ci aiuterà a raddoppiare i nostri sforzi su YUI 3.

YUI 2.9.0 PR2 è disponibile sia tramite il CDN , nonché un pacchetto scaricabile per il test. Speriamo che si può prendere un momento per testare versione di anteprima di oggi e di fornire un feedback da Venerdì 18 marzo su tutti i bug e regressioni si possono trovare.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Trucchi di frontiera con CSS Boxes Compresso

8 marzo, 2011 at 03:23 da Thierry Koblentz | In CSS 101 , le Progettazione e Sviluppo | 8 commenti

Questi trucchi li aiuterà a realizzare progetti senza ricorrere all'uso di immagini, CSS3 gradiente o markup estranei. Con collasso scatole con zero line-height e height valori, siamo in grado di visualizzare il contenuto al di fuori della casella di contenuti, oltre i confini.

Bi-colore di sfondo

In questo esempio non include IE 6/7 soluzioni alternative (controllare il codice sorgente di questa pagina demo per le correzioni di IE).

 .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 e tubi tra le voci di elenco

Questo esempio mostra correttamente tutti i browser IE, dopo alcune correzioni semplici.

 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> 

Triangoli sinistra e verso destra

In questo esempio non include IE 6/7 soluzioni alternative (controllare il codice sorgente di questa pagina demo per le correzioni di IE).

 #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 e trasparenza delle frontiere

IE 6 non supporta la parola chiave " transparent "per il colore del bordo. Quando si utilizza questo valore, IE 6 disegna un bordo nero.

La correzione per questo è di utilizzare il filtro crominanza che mostra un colore specifico del contenuto dell'oggetto come trasparente. Ad esempio, per creare una freccia rivolta verso destra è possibile utilizzare questa regola:

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

Il font-size dichiarazione è un'altra soluzione per IE 6. E 'per assicurarsi che questo browser non aumentare l'altezza della finestra.

! Arrestare le presse ho appena imparato un nuovo trucco (grazie Chungho Fang):

La magia [per creare la trasparenza delle frontiere in IE] è quello di impostare 'border-style' a uno tratteggiata o punteggiata

---

Questo è tutto! Questo è solo un altro modo per utilizzare i bordi per ottenere l'immagine-less design.

Ulteriori letture

• Uno studio dei poligoni regolari
• slantastic
• Slant

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!