Yahoo! User Interface Blog (YUIBlog)

YUI sta assumendo

Stiamo cercando un senior engineer front-end ad unirsi al team YUI! Devi essere un esperto di JavaScript e ben versato in vari front-end tecnologie. Tu ami risolvere problemi complessi su scala massiccia, sa cosa serve per progettare le API robusta e intuitiva, e abbracciare le migliori pratiche di prestazioni, sicurezza, accessibilità e usabilità. Hai anche eccellenti doti di comunicazione, in possesso di grande attenzione ai dettagli, e sono indipendenti e intraprendenti.

Qualifiche professionali minimi:

• A livello di esperti JavaScript, HTML, CSS e le competenze.
• L'esperienza ha dimostrato la costruzione di componenti JS riutilizzabili che sono modulari, performante, e gestibile.
• La passione per la costruzione e l'evangelizzazione di un mondo di classe front-end della libreria che ha un impatto di milioni di persone ogni giorno.
• La familiarità con progetti open-source software, in particolare YUI.
• Computer laurea o esperienza di lavoro equivalente.

Qualifiche di lavoro preferite:

• Dimostrata la profondità delle competenze in uno o più domini di front-end, quali mobile, prestazioni, server-side JavaScript, o di internazionalizzazione.

Se questo suona come voi, si prega di inviare il vostro curriculum e lettera di presentazione a yui-job (at) yahoo-inc (dot) com.

A proposito di Yahoo!

Pensate a impatto 1 ogni 2 persone online - in modo innovativo e creativo 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 maggiori informazioni o 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!

Annunciando YUI Compressor 2.4.6

Siamo lieti di annunciare la disponibilità immediata della versione 2.4.6 della YUI Compressor . Questa versione contiene soprattutto gli aggiornamenti relativi alla movimentazione compressore di minimizzazione CSS e introduce l'elaborazione in batch di più file con un singolo comando.

CSS minification

I punti culminanti includono:

• Risolti alcuni bug numerosi che rompono il compressore e / o dei file risultanti minified.
• Aggiunto documentazione su ciò che esattamente il minifier fa e che anche hack CSS tollera.
• C'è una porta di JavaScript CSS min nel caso in cui è più adatto per il vostro processo di compilazione. Ecco anche una interfaccia web di test che utilizza la porta JavaScript, dove si può sperimentare con il minifier.
• Un numero significativo di nuovi test aggiunte (ma è possibile aggiungere ancora di più ).
• Manipolazione sicura di alcune funzionalità CSS che sono sempre più l'adozione, come media query e CSS3 trasformazioni.

Elaborazione in batch

Un'altra aggiunta benvenuto Compressor è che può ora gestire gruppi di file. Questo può ridurre significativamente il tempo il processo di compilazione richiede, soprattutto se si dispone di un gran numero di file da minify.

Per esempio i seguenti comandi minify tutti .js e .css file e scrivere i file minified con una "-min.css" suffisso.

  *: '-Min.css. Css $' css $ java-jar yuicompressor.jar-o.
 *: '-Min.js. Js $' js $ java-jar yuicompressor.jar-o. 

Ringraziamento va a Stephen Woods e il team di Flickr per questa funzione!

Links

YUI Compressor 2.4.6 è disponibile per l'immediata il download . Non esitate a darci una mano dal deposito di una richiesta di bug o funzione , di scrivere i test , il fork del codice o di unirsi alla conversazione .

Trova le conversazioni: bloglines | technorati

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

Direzione-friendly barra di navigazione

Recentemente ho incontrato un menu orizzontale di navigazione con link allineata a destra. Come ci si potrebbe aspettare, è stato un elemento di lista con float:right e le voci di elenco con float:left . Anche se non c'è niente di sbagliato in questo approccio, mi ha spinto a cogliere l'occasione per discutere di direzionalità per il layout.

Il costo di elementi galleggianti

Galleggianti non hanno il concetto di direzionalità, ma non funzionano come elementi in linea o le colonne della tabella (per i quali il dir attributo è una bacchetta magica). Con carri, gli autori devono implementare un meccanismo per "scambiare" i valori ogni volta che cambia l'interfaccia ( ltr vs rtl ).

Così, invece di usare float , gli autori possono favorire inline-block . Ecco un semplice esempio:

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

Si noti che l'utilizzo di " \ 0 "(senza spazio) al posto di" \9 "si prendesse cura di Opera, ma non può essere a prova di futuro" \9 "(solo con IE).

In questa pagina demo mostra, in Chrome, Safari e Firefox, l' inline-block tecnica rendono il percorso di scrittura in modalità dipendente (la direzione del flusso corrisponde al valore della dir attributo, o il valore iniziale, se la direzione non è specificato). Per gli altri UA s, e IE a causa della mancanza di supporto per l'attributo selettore (cioè html[dir="rtl"] ), gli autori hanno bisogno di aggiungere un gancio nel markup per soddisfare il cambio di direzione. Ad esempio, per la piena compatibilità A-grade:

Per la tecnica float:

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

Per la linea-blocco tecnica:

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

text-align: start | end

A differenza di left e di right , start e end sono la scrittura in modalità parole chiave dipendenti. In inglese, start le mappe left e end mappe a right . Basandosi su start e end , piuttosto che left e right alcuni browser permette di fare lo scambio ( ltr / rtl ) automaticamente.

Le differenze tra i browser e le tecniche

In browser che non supportano " start / end "(IE, Opera)

float tecnica: la direzione scambio non cambia nulla

inline-block tecnica: lo scambio di direzione non modificare l'allineamento del menu, ma i collegamenti sono visualizzati nella corretta sequenza

In browser che supportano il " start / end "(Chrome, Safari, Firefox)

float tecnica: la direzione scambio non cambia nulla

inline-block tecnica: lo swapping direzione è sufficiente a invertire la direzione sia del menu e dei collegamenti

Questo è tutto! La prossima volta che dovete elementi di stile in senso orizzontale, ricordatevi di dare display:inline-block e display:table una prova.

Trova le conversazioni: bloglines | technorati

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

YUI 3 "Building Blocks, i moduli e le applicazioni" Workshop Venendo a Portland, e Free!

YUI, insieme con la Yahoo! Developer Network , è entusiasta di sponsorizzare un omaggio YUI 3 Workshop "Building Blocks, i moduli e le applicazioni" su Domenica 1 maggio 2011 a Portland, Oregon. Questo è un ottimo modo per kick-off il vostro tempo a JSConf , ma non hai bisogno di un biglietto JSConf per partecipare al workshop. Tutti sono invitati a questo evento gratuito!

Mi sarà affiancato dal compagno di Yahoo! Gonzalo Cordero per un intera giornata di hands-on di formazione, dove si impara come costruire le classi stateful, plugin e widget utilizzando le 3 componenti dell'infrastruttura YUI, in pacchetti in moduli riutilizzabili, e assemblare in una semplice applicazione. La classe mattino si concentrerà su ciò che i blocchetti di costruzione (come Base e Widget) hanno da offrire e quando e come usarli. La classe pomeriggio entrare in configurazioni più avanzate di classe, l'istituzione del Loader di combinare i moduli ospitati, e la creazione di controller di applicazioni di mettere in relazione le varie classi del modulo e le API tramite eventi personalizzati.

Lo spazio è limitato, in modo da prenotare il vostro posto oggi a http://training.bocoup.com/PreJSConf-2011/

Trova le conversazioni: bloglines | technorati

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

Modalità Quick Edit per YUI 3 DataTable

Anche se YUI 3 DataTable non dispone ancora di modifica in linea delle singole cellule, è relativamente semplice da implementare modalità Quick Edit. Il QuickEdit plugin per DataTable nella Galleria YUI 3 permette a tutti i valori visibili in un DataTable da modificare contemporaneamente.

( Fare clic sulla schermata per giocare con questo esempio .)

Panoramica

Come per la versione 2 YUI , l'idea centrale della modalità Quick Edit è quello di scambiare tutti i formattatori cellulari con quelle nuove che popolano le celle con elementi di un form, ad esempio, campi di input o menù a discesa. Ciò avviene quando start() viene chiamata, in base alla configurazione descritta di seguito. Dopo che l'utente è finito, è possibile chiamare getChanges() per ottenere i valori modificati e quindi persistono loro. Per uscire dalla modalità Quick Edit, chiamare cancel() . (Prende il nome da cancellare, invece di fermarsi a ricordare che annulla tutte le modifiche.)

Dal momento che il veloce modulo galleria Edit è un plugin per DataTable, è necessario collegarlo al tuo datatable prima di poterlo utilizzare:

 my_table.plug (Y.Plugin.DataTableQuickEdit);

Questo memorizza il plugin nella qe membro del datatable, quindi è necessario chiamare le funzioni del plugin in questo modo:

 my_table.qe.start ();

Configurazione

Quick Edit aggiunge due nuovi attributi di configurazione a tutte le colonne: quickEdit e qeFormatter .

Se una colonna quickEdit proprietà è definita, la colonna sarà modificabile in modalità Quick Edit. Per accettare tutti i valori predefiniti, si può semplicemente impostare quickEdit:true . Per un maggiore controllo, è possibile passare un oggetto con le seguenti proprietà:

formatter

Il formattatore cellula che renderà un campo apposito modulo: <input type="text">, <textarea> o <select>. Per impostazione predefinita, il formattatore cella Y.Plugin.DataTableQuickEdit.textFormatter viene utilizzato per tutte le cellule a produrre elementi di input. Per ottenere una textarea elemento, configurare una colonna da utilizzare Y.Plugin.DataTableQuickEdit.textareaFormatter invece.

validation

Convalida configurazione per ogni campo nella colonna.

css

Classi CSS che codificano le regole di convalida di base:

yiv-required

Il valore non deve essere vuoto.

yiv-length:[x,y]

Stringa deve essere almeno x caratteri e al massimo y caratteri. Almeno uno di X e Y deve essere specificato.

yiv-integer:[x,y]

Il valore intero deve essere almeno x e al massimo y . x ed y sono entrambi opzionali.

yiv-decimal:[x,y]

Il valore decimale deve essere almeno x e al massimo y . Esponenti non sono ammessi. x ed y sono entrambi opzionali.

fn

Una funzione che sarà chiamato con il DataTable alla sua portata ed elemento di forma della cella come argomento. Restituisce vero se il valore è valido. In caso contrario, chiamare this.displayMessage(...) per visualizzare un errore e poi tornare false.

msg

Una mappa dei tipi di messaggi che verranno visualizzati quando una regola di convalida di base o regex fallisce. I tipi validi sono: required , min_length , max_length , integer , decimal , e regex . Non vi è alcun valore predefinito per il tipo di regex , quindi è necessario specificare un messaggio se si configura una convalida regex. I messaggi di errore di default per gli altri tipi vengono memorizzati in Y.FormManager.Strings (fornito da gallery-formmgr-css-validazione ) e può essere ignorato e / o localizzata.

regex

Espressione regolare che il valore deve soddisfare per essere considerato valido.

A volte, una non modificabile colonna deve essere reso in modo diverso durante la modalità Quick Edit. L'esempio migliore è una colonna contenente un link, dal momento che la navigazione dalla pagina, mentre in modalità Quick Edit può essere disastroso. Per rimuovere il collegamento durante il Quick Edit, configurare qeFormatter per la colonna sia Y.Plugin.DataTableQuickEdit.readonlyLinkFormatter . Per gli indirizzi e-mail, utilizzare Y.Plugin.DataTableQuickEdit.readonlyEmailFormatter . È inoltre possibile scrivere personalizzato, di sola lettura formattatore. Basta seguire le normali regole per la costruzione di un formattatore cella DataTable.

Caratteristiche mancanti

A causa di un bug in YUI 3.3.0 DataTable , il td elemento passato a un formattatore colonna è in realtà dalla colonna precedente. Questo ha reso troppo fastidioso per sostenere copia verso il basso, dove un pulsante nella prima riga consente di copiare il valore verso il basso per tutte le altre righe.

Il bug è richiesto anche una rielaborazione completa delle cellule di base Veloci formattatori Edit per tornare testo invece di manipolare il DOM. Questo è il motivo formattatori cellulari personalizzati non sono ufficialmente supportati in questa versione iniziale. Se siete avventurosi, è ancora possibile costruire, ma di tenere presente che avrete bisogno di riscriverle, aggiungendo il supporto per copia verso il basso, una volta che il bug è stato risolto in DataTable.

Circa l'autore: John Lindal ( @ jafl5272 su Twitter) è uno degli ingegneri di piombo costruire le fondamenta su cui Yahoo! APT è stato costruito. In precedenza, ha lavorato sul Yahoo! Publisher Network.

Trova le conversazioni: bloglines | technorati

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

YUI: Orario di apertura gio aprile 21 °

YUI Remote Loader Servizio

Per un po 'di tempo, Reid Burke ha lavorato su un servizio basato su Node.js per accelerare il processo di calcolo e la richiesta di dipendenze dei moduli in YUI 3. Ha capito molto vicino al abbottonato a questo punto, e vuole condividere ciò che lui ha e le vostre idee per ciò che renderebbe ancora Awesomer.

Il problema

Per un po 'di tempo abbiamo saputo che, mentre in realtà conveniente per gli sviluppatori, il Y.use( modules ,...) metodo introduce un inutile ritardo nel tempo di spin up del codice di implementazione. Si scopre che si tratta di un sacco di lavoro calcolo alberi di dipendenza, i metadati e solo può essere onerosi per l'occupazione di memoria complessiva della pagina. Il metodo tradizionale di includere il file seme YUI ( yui-min.js ), poi il bootstrap con YUI().use(...) prima dice YUI Loader per caricare il modulo, che è sellato con i metadati di dipendenza per l'intera libreria in la sua fonte, poi Loader calcolare la lista completa dei moduli necessari, sulla base di use(...) dichiarazione sulla macchina client.

La soluzione

Il servizio Remote Loader si muove questo calcolo al server, rendendo il codice più velocemente e riducendo l'inizializzazione del tuo sito il profilo memoria del client, perché i metadati e Loader non sono più necessarie sulla macchina client. Serve anche come gestore di combo, restituendo tutto il codice direttamente anziché attraverso il routing al servizio combo yahooapis (meno traffico di rete), ed è in grado di essere distribuito su un server Node.js sul tuo dominio.

Il piano è quello di avere demo Reid ciò che funziona oggi, tra cui alcune statistiche piuttosto impressionanti dal suo utilizzo su yuilibrary.com , quindi aprire la chiamata al feedback e richieste. Venite a verificare che cosa il futuro di YUI Loader sta cercando come!

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!

Annunciando YUI 2.9.0

Il team di YUI è entusiasta di annunciare il rilascio della versione YUI 2.9.0. YUI 2.9.0 è l' ultima versione di correzione bug sulla linea 2 del codice YUI segna il passaggio in modalità di manutenzione. Andando avanti, aspettiamo di vedere i comunicati costituiti da solo correzioni di bug critici o le soluzioni ai problemi di compatibilità del browser derivanti dagli aggiornamenti ai browser della GBS . Siamo davvero entusiasti di focalizzare meglio la nostra attenzione sul prossimo rilascio di YUI 3.4.0.

Per avere un'idea dei cambiamenti inclusi in YUI 2.9.0, è possibile esaminare il Digest ReadMe che riassume tutte le aggiunte fatte dagli sviluppatori di componenti ai loro rispettivi file Leggimi per questa versione. È inoltre possibile visualizzare l' elenco dei biglietti fissati in YUI 2.9.0 per una sintesi di correzioni di bug e richieste di miglioramento completati in questa versione.

Vorremmo ricordare a tutti che come abbiamo iniziato il processo di deprecare YUI 2.x, tutte le versioni rilasciate continuerà ad essere ospitato su CDN Yahoo e il codice di base continuerà ad essere forkable su GitHub.com .

Trova le conversazioni: bloglines | technorati

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