Inizio Interfaccia utente sul blog (YUIBlog)

YUI 3 Guida Suggerimento: Aggiunta di Impressionante proprietario

Luke ( @ ls_n ) postato questo frammento di codice in risposta ad una domanda, l'altro giorno, e ho pensato che valeva la pena condividere qui come una punta rapida.

Come la maggior parte di selezione basati su idiomi, un sacco di potenza espressiva YUI 3 proviene da ciò che si può fare una volta riferimento a una o più HTMLElements - in YUI 3, che significa avere un punto di riferimento del nodo, che di solito si ottiene attraverso Y.one( selector string ) o Y.all( selector string ) . Così, Y.one("#foo"). doSomethingInteresting è un modello comune.

E 'facile estendere espressività YUI 3, aggiungendo la tua magia proprio al nodo (e / o NodeList). Ecco un modo per rendere la vostra estensione modulare e riutilizzabile.

Per prima cosa, creare un nuovo modulo personalizzato (che chiameremo node++ ):

  YUI.add ('nodo + +', function (Y) {
	
	 / / Definire una funzione che verrà eseguito nel contesto di un
	 / / Istanza nodo:
	 doSomethingAwesome funzione () {
		 Y.log ("Fai qualcosa di impressionante qui.");
	 }

	 / / Uso addMethod per aggiungere doAwesomeThing al prototipo di nodo:
	 Y.Node.addMethod ("doAwesomeThing", doSomethingAwesome);
	
	 / / Estendere questa funzionalità ai NodeLists:
	 Y.NodeList.importMethod (Y.Node.prototype, "doAwesomeThing");
	
 }, .0,1 '0 ', {Richiede: [' nodo ']}); 

Succo di Luca è qui .

Con tale definizione sulla pagina, node++ si può use in qualsiasi istanza d. Nel tuo codice di implementazione, si dovrebbe usare:

  YUI (). Uso ('nodo + +', function (Y) {
	
	 / / Uso da un singolo nodo:
         . Y.one ('# pippo') doAwesomeThing ();

	 / / Uso da un NodeList:
	 . Y.all ('p') doAwesomeThing ();
	
 }); 

Si noti che solo l'istanza YUI (s) a cui si associa l' node++ modulo avrà accesso a doAwesomeThing . Una caratteristica di questo disegno che ti piacerà come costruire applicazioni complesse è che la vostra logica di implementazione non sarà necessario cambiare se la lista di dipendenza per node++ si evolve - che avranno gestito automaticamente a use() tempo, e la dipendenza dichiarazione rimane con il codice a cui si riferisce.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

YUI Teatro - Dav Vetro: "Uso Node.js e YUI 3" (36 min.)

Lavoro ryan Dahl su Node.js - e la comunità che formano intorno a quel progetto - si è unito HTML5 come una delle grandi storie del 2010. YUI ingegnere Dav Glass ha lavorato per rendere YUI 3 un potente alleato per gli implementatori Node.js, e in questo video che vi mostra quello che ha fatto finora - tra cui demo di widget progressivamente migliorata in esecuzione lo stesso codice su client e server. Non perdetevi questo.

Se il video embed di seguito non viene visualizzato correttamente nel vostro lettore RSS, click through per guardare o scaricare la versione ad alta risoluzione del video su YUI Theater .

• Scaricare video HD (480p ~ 271MB)
• Scarica il video (m4v)
• Ad alta risoluzione, versione trascritto di questo discorso è disponibile sul sito YUI Teatro

Altri recenti YUI Theater Video:

• Alois Reitbauer: dynaTrace Ajax Edition - dynaTrace offre uno dei più potenti strumenti per analizzare le prestazioni delle applicazioni web in Internet Explorer. In questo discorso, dynaTrace ingegnere Alois Reitbauer passeggiate attraverso quattro specifici scenari di analisi utilizzando l'interfaccia dynaTrace.
• Ryan Grove: Il raggiungimento di prestazioni Zen con YUI 3 - In seguito le linee guida codificate può aiutare a costruire siti web veloce, ma la creazione di applicazioni che sono pulito, veloce ed estensibile, coinvolge anche un approccio equilibrato alle prestazioni ad ogni livello del vostro lavoro F2E. YUI 3 è progettato per aiutare in questo processo, fornendo un diritto di dimensioni livello di astrazione con incorporato nella magia delle prestazioni e una varietà di strumenti che rendono il codice frontend facile veloce e divertente da realizzare. In questa sessione, esploreremo il zen di performanti JavaScript nel mondo 3 YUI e farvi conoscere alcuni degli strumenti potenti YUI 3 mette a vostra disposizione in ogni applicazione che si scrive.
• Douglas Crockford: Crockford su JavaScript - Scene 6: Loopage - Lo sviluppo del software è ostacolato da una serie specifica di errori di progettazione che sono state fatte in linguaggi di programmazione prima e ripetuto in tutto ciò che è stato fatto da allora. E, un po 'miracolosamente, JavaScript sta andando a fare la destra, trasformando radicalmente il nostro modo di scrivere applicazioni. Anche in questo caso. Nel ciclo della Storia, che è già accaduto, ma non è successo così. Questo è il motivo per cui dovrebbe preoccuparsi l'emergere di server-side JavaScript e l'entusiasmo intorno progetti come Node.js - non perché siamo alla fine di un trend forte, ma perché stanno spianando la strada verso la prossima grande rivoluzione nel software.

Iscrizione a YUI Theater:

• YUI Teatro RSS feed
• YUI Theater su iTunes

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

Realizzazione di messa a fuoco: Auto a noleggio espresso

Autonoleggio espresso è il primo sito indipendente noleggio auto confronto su Internet. Consente noleggio auto utenti online in più di 1000 città e aeroporti di tutto il mondo.

La nostra base di utenti è in gran parte non tecnica, il che significa che vogliono confrontare i prezzi e noleggiare auto più facilmente possibile. Con il rilancio del nostro sito web nel giugno del 2010 abbiamo implementato molte componenti di YUI 2 a contribuire a fornire ai nostri clienti un'esperienza intuitiva.

Quali componenti YUI stiamo usando?

I componenti che abbiamo usato sono Connection Manager , completamento automatico , DataSource , Calendario , Animazione , JSON e container .

Perché abbiamo scelto YUI

Nel rivedere le librerie JavaScript differenti che potremmo potenzialmente l'uso su Autonoleggio espresso , abbiamo scoperto che il YUI è stata la più completa per le nostre esigenze. La più grande dispone di vendita per noi è stato l'approccio estremamente modulare la YUI ha portato a realizzare diversi modelli di progettazione, così come la robusta documentazione e gli esempi sono forniti. Dal punto di vista dello sviluppo ciò ha portato ad un rapido sviluppo della nostra applicazione, senza dover lottare con una libreria.

Come usiamo YUI

Utilizziamo il YUI in diversi modi. I nostri 4 componenti più utilizzati sono il completamento automatico, calendario, Container, e Connection Manager. Ecco alcuni dei modi in cui usiamo ognuno di questi componenti.

Completamento automatico

La componente di completamento automatico è ampiamente utilizzato sul nostro sito per aiutare gli utenti a trovare una città o aeroporto in cui affittare una macchina. Abbiamo apprezzato molto quanto fosse facile da implementare questa componente, e quanto velocemente si risponde. Noi cache di risultati di ricerca server-side per contribuire a migliorare i risultati di ricerca, tuttavia, avendo il client-side caching anche aiutato moltissimo ad accelerare la risposta del componente. Un'altra caratteristica che abbiamo davvero preso per come è stato facile i risultati sono stati di stile. Quando si visualizzano le posizioni per l'utente questo è stato fondamentale perché abbiamo bisogno di identificare quali luoghi in cui si trovano in città e che sono stati trovati negli aeroporti.

Calendario

La componente calendario è anche usato in tutto il sito quando un affittuario si sta riempiendo di date per condurre una ricerca. Stiamo usando una versione personalizzata di John Peloquin del Calendario intervallo di selezione e la visualizzazione in una finestra di dialogo YUI . Essenzialmente quello che volevamo fare era dare l'affittuario di due mesi vista al momento di scegliere le date, oltre che visivamente mostrare loro cosa intervallo di date che attualmente selezionato. Di nuovo, questo è stato estremamente semplice da implementare con YUI 2 Calendario, e fondamentalmente è sceso a creare un dialogo YUI, l'impostazione del corpo per contenere un div per il calendario, quindi collegare un calendario intervallo YUI a quel div.

Contenitori

Utilizziamo contenitori YUI in tutto il nostro sito web in un certo numero di modi diversi. Nell'esempio di cui sopra che stavamo usando una finestra di dialogo per aiutarci visualizzare il calendario intervallo quando un utente è stata scelta una data. Sulla nostra pagina dei risultati ricerca tasso facciamo largo uso dei contenitori per dare il locatario ulteriori informazioni sui diversi aspetti della agenzia di noleggio auto e il veicolo che potrebbero potenzialmente affitto. La maggior parte dei contenitori in questa pagina sono pannelli che si ri-utilizzare per ogni lista diversa. Ad esempio, il display del veicolo caratteristiche del pannello:

Le cose sono un po 'più divertente con il Cliente nominale agenzia di rating. Quando si visualizzano le valutazioni, abbiamo voluto focalizzare l'attenzione dell'utente per i punteggi un'agenzia ricevuto e per visualizzare queste informazioni in un ambiente pulito, semplice da vista così. Utilizzando la finestra di dialogo Controllo siamo stati in grado di limitare la finestra e al centro il dialogo con facilità per aiutarci a raggiungere questo obiettivo. Impostando un colpo di testa vuota e il piè ha fatto uno stile semplice, semplicemente aggiungendo gli stili appropriati al nostro CSS. Il risultato finale è stato un contenitore pulito valutazioni che fornisce il locatario con le informazioni che vogliono.

Connection Manager

Connection Manager è utilizzato in tutto il sito ogni volta che abbiamo bisogno di estrarre i dati tramite una richiesta XHR. In alcuni degli esempi di cui sopra ci avvaliamo di questo componente per la richiesta di città e aeroporti per il completamento automatico implementaitons e tirando le informazioni di rating per il Cliente nominale di dialogo.

Un modo interessante utilizziamo Connection Manager è con il nostro blocco centrale noleggio che si trova sulla maggior parte delle pagine. Per aiutare con le prestazioni che facciamo un sacco di tutta pagina cache su molte delle nostre pagine di contenuti. Tuttavia, abbiamo ancora voglia di visualizzare il blocco dinamico centro di noleggio su queste pagine. Questo ci ha presentato un problema siamo riusciti a risolvere con Connection Manager. Invece di dover rompere la nostra pagina interamente memorizzato nella cache e cache solo gli aspetti della pagina che abbiamo trovato è stato più facile per includere solo il blocco di centro noleggio tramite una semplice richiesta asincrona. Abbiamo scoperto che questo ci ha permesso di mantenere le prestazioni da avere una pagina completamente nella cache, ma ancora visualizzare il contenuto dinamico nella nostra casella di centro noleggio.

Considerazioni finali

Nel complesso siamo stati molto contenti della nostra scelta di utilizzare YUI. Ci offre una libreria modulare che è ben documentato, facile da utilizzare e implementare.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

Nel YUI 3 Galleria: Modulo RaphaelJS Matt Taylor

RaphaelJS è una potente libreria JavaScript che gestisce SVG disegni e animazioni. Esso consente di creare facilmente tele SVG e disegnare forme di base e percorsi molto facilmente, anche loro raggruppamento in insiemi e applicazione di trasformazioni a uno o molti vettori. È possibile disegnare forme, manipolare immagini, e animare tutto. RaphaelJS fornisce una piacevole API per creare e modificare gli elementi SVG con facilità.

Mentre la biblioteca è impressionante, ma ho trovato che posso aggiungere alcune caratteristiche importanti elementi della biblioteca RaphaelJS con YUI3. Ho iniziato questo impegno con il nuovo modulo Galleria RaphaelJS .

RaphaelJS Caricamento pigro e Plugin

La prima caratteristica è la lazy-carico non solo della biblioteca RaphaelJS, ma qualsiasi RaphaelJS plugin potrebbe essere necessario. Il modulo Galleria RaphaelJS solo caricare i file quando si dichiara sarai utilizzando all'interno di una sandbox YUI. Per esempio:

 
 YUI ({galleria: 'galleria 2010/09/22-20-15'}). Uso ('galleria-raphael', function (Y) {
 
	 Y. Raffaello (). Uso (function (Raffaello) {
		
		 / / Uso Raffaello qui proprio come si farebbe fuori YUI
		 var = carta Raffaello ('myPaper', 500, 500);
 
	 });
 
 });

Se si utilizza plugin RaphaelJS, specificare i loro percorsi in un array e inviare che come primo parametro nella Raffaello Y. () utilizzano () funzione.:

 
 YUI ({galleria: 'galleria 2010/09/22-20-15'}). Uso ('galleria-raphael', function (Y) {
 
	 myPlugins var = ['plugins / raphael.awesomePlugin.js', 'plugins / raphael.wickedPlugin.js'];
 
	 Y. Raffaello (). Uso (myPlugins, funzione (Raffaello) {
 
		 / / Uso Raffaello qui proprio come si farebbe fuori YUI
		 var = carta Raffaello ('myPaper', 500, 500);
		 / / La 'carta' avrà nuove funzioni aggiunte da plugin ora
	 });
 
 });

La biblioteca RaphaelJS viene caricato per primo, poi tutti i plugin specificato vengono caricati prima della funzione di callback viene eseguita con l'oggetto Raffaello come unico parametro.

Eventi personalizzati

Una volta creato uno spazio di disegno con l'oggetto Raffaello, allora si può subito scendere al disegno. Quando si chiama metodi come rect , circle , e path sullo spazio disegno, riceverai indietro oggetti che rappresentano i vettori SVG. Normalmente, avrete accesso ai loro corrispondenti elementi DOM tramite il node proprietà. Per esempio:

 
 var = carta Raffaello ('myPaper', 500, 500);
 var paper.rect quadrato = (0, 0, 100, 100);

Questo crea un oggetto rettangolare vettore a coordinate [0,0] con una larghezza e un'altezza di 100 pixel. Si ha accesso all'elemento DOM sottostante (che è un SVG rect elemento) in questo modo:

 
 var = rectNode square.node;
 rectNode.onclick = function () {
	 alert ('Congratulazioni, hai cliccato un quadrato!');
 };

Se sei un utente appassionato di YUI, si sarebbe probabilmente qualcosa di più. Come su un costruito nel Y.Node come bene? Proprio come il node proprietà si riferisce al HTMLElement dietro l'oggetto in formato SVG, il $node proprietà fa riferimento al Y.Node wrapper per tale elemento. Così si può fare cose come questa:

 
 piazza. node.on $ ('mouseover', function () {
	 alert ('Congratulazioni, è possibile spostare il mouse!');
 });

Proviamo ora qualcosa di più complesso. Una interazione con un vettore dovrebbe essere in grado di causare altri vettori disegnato ad aggiornare i loro stili, giusto? Che ne dici di creare qualche bar che rendono tutti i loro colori dipendono dove il mouse si trova su un cerchio sulla pagina:

 
 var = carta Raffaello ('rcanvas', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({fill: 'rosa', l'ictus: 'nero'});
 
 / / Spingendo un po 'di rettangoli in un array
 var i = 0; rettangoli = [];
 for (; i <10; i + +) {
	 . rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({fill: 'rosso', l'ictus: 'giallo'}));
 }
 
 / / Loop attraverso i rettangoli, l'aggiunta di gestori specifici mousemove cerchio per ogni
 Y.Array.each (rettangoli, funzione (rect, index) {
	 var i = indice + 1;
	 circ. node.on $ ('mousemove', function (evt) {
		 / / Il colore di riempimento è dinamica, dipende dalla posizione di questo rettangolo
		 / / A l'array e la posizione del mouse
		 Se var = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + lf,
			 x = evt.clientX - lf,
			 top = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * circ.attrs.r top +,
			 y = evt.clientY - alto;
			 rosso = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 verde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 blu = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 rect.attr ('riempire', 'rgb (' + rosso + ',' + verde + ',' + blu +')');
	 });
 });

Questo esempio è in esecuzione qui , ma come potete vedere nelle istantanee di seguito, il colore di ciascuna barra dipende dalla posizione del mouse sopra il cerchio e l'ordine della barra.

A seconda di dove il cursore del mouse si trova sopra il cerchio, i colori barra di cambiamento individuale.

Così si può vedere che $node è un collegamento utile, ma niente di spettacolare. Sarebbe davvero fantastico se ogni oggetto SVG si crea con il fuoco potrebbe RaphaelJS eventi personalizzati . Ciò consentirebbe la tua singoli elementi di disegno per generare eventi personalizzati, e tutto nella pagina può ascoltare e rispondere. Questo può essere utile in molti modi. Per cominciare, fornisce le interazioni fra ricchi i vostri disegni. Interazioni dell'utente con un vettore possono ora comunicare eventuali altri vettori dell'interazione on demand. Questo significa che è possibile generare eventi programatically dai disegni, quando siano rispettate determinate condizioni. Questo non solo permette di notificare i vostri disegni da altri vettori, ma nulla sulla pagina può ascoltare in

 
 var = carta Raffaello ('rcanvas', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({fill: 'rosa', l'ictus: 'nero'});
 
 / / Making array di rettangoli e cerchi
 var i = 0, rettangoli = [], cerchi = [];
 for (; i <10; i + +) {
	 . rectangles.push (paper.rect (0, 40 * i, 40 * i, 20) attr ({fill: 'rosso', l'ictus: 'giallo'}));
	 circles.push (. paper.circle (0,0,20) nascondere ());
 }
 Y.Array.each (rettangoli, funzione (rect, index) {
	 var i = indice + 1;
	 circ. node.on $ ('mousemove', function (evt) {
		 Se var = circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + lf,
			 x = evt.clientX - lf,
			 top = circ.attrs.cy - circ.attrs.r,
			 BTM = 2 * circ.attrs.r top +,
			 y = evt.clientY - alto;
			 newWidth = (((256 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 rosso = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 verde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 blu = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 / / Questa volta, non solo cambiando il colore, ma anche la larghezza rettangolo
		 rect.attr ({
			 larghezza: newWidth,
			 riempire: 'rgb (' + rosso + ',' + verde + ',' + blu + ')'
		 });
		 / / Cottura di eventi personalizzati per segnalare che questa larghezza rettangolo è cambiato
		 rect.fire ('width-cambiato', {width: newWidth, fonte: rect, ordine: indice});
	 });
	
	 / / Ogni rettangolo ottiene un ascoltatore che spara sulla larghezza cambiato
	 rect.on ('width-cambiato', function (evt) {
		 attrs var = evt.source.attrs;
		 / / Ottiene il cerchio corrispondente e spostarlo verso l'estremità destra del rettangolo
		 cerchi [evt.order]. attr ({
			 cx: attrs.x + attrs.width,
			 cy: attrs.y,
			 riempire: 'cornflowerblue'
		 .}) Show ();
		
	 });
	
 });

Date un'occhiata a questo esempio in esecuzione qui . Si può anche vedere dalla snapshot qui sotto che cerchi sono in corso di elaborazione sulle estremità destra del rettangolo. Questo sta avvenendo in risposta al fuoco di eventi personalizzati ogni rettangolo individuo, essere catturati da un gestore che si sposta il cerchio in una posizione relativa agli attributi correnti del rettangolo.

Questo apre alcune interessanti per possiblities RaphaelJS all'interno YUI3. Per esempio, cosa succederebbe se potessimo creare un gruppo di forme vettoriali con il gruppo stesso sia l'entità che genera gli eventi al mondo esterno? Internamente, ogni disegno vettoriale in grado di comunicare con il suo contenitore attraverso eventi personalizzati, e il contenitore potrebbe prendere decisioni su quali dati incendi al mondo esterno. Questo apre l'idea di completamente incapsulato, controlli interattivi SVG.

Riassunto

Con l'ascesa di HTML5 e le sue tecnologie satellitari, non ci sono opzioni più tanti altri che Flash per le interazioni ricchi. Idealmente, tutti gli elementi vectored della pagina dovrebbe essere completamente accessibile e standardizzato. Questo apre possiblities bello per noi creare accessibili, controlli web standard senza ricorrere a Flash. SVG è un'opzione attraente perché ogni vettore tracciato sulla pagina è sostenuta da un nodo DOM che possiamo modificare con YUI come qualsiasi altro nodo DOM. Questo è ciò che permette il modulo Galleria RaphaelJS per aumentare tutti gli oggetti SVG creati da RaphaelJS, e questa è una chiave per la ricca interazione con questi elments da altro punto della pagina.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

clearfix Reloaded trabocco +: nascosti Demystified

clearfix e overflow : hidden possono essere le due tecniche più popolari per cancellare galleggia senza markup strutturale.

Questo breve articolo è di migliorare il primo metodo e spargimento po 'di luce sul vero significato del secondo.

clearfix

In tutto quello che sai è sbagliato clearfix spiego i problemi questo metodo crea tutti i browser e vi suggerisco di usare solo clearfix su elementi che non sono vicino al galleggianti (per esempio una finestra modale), anche se, come autori abbiamo ancora a che fare con margini di collasso . Questa pagina demo dimostra la questione.

Margin-crollo comportamento nelle prime due caselle mostra che è il contenuto generato (non vuota) che mantiene il margine inferiore all'interno della scatola (che ha perfettamente senso in base alle specifiche ).

Quindi, per creare lo stesso layout casella tutti i browser possiamo migliorare il metodo originale di generazione dei contenuti utilizzando sia gli pseudo-elementi :before e :after :

  . Clearfix: prima,
 . Clearfix: dopo {
   contenuto:; "."    
   display: block;    
   altezza: 0;    
   overflow: hidden;	
 }
 . Clearfix: dopo {clear: both;}
 . Clearfix {zoom: 1;} / * IE <8 * / 

Non è sufficiente sostituire le regole clearfix con questi nuovi progetti esistenti, anche se, come si può avere problemi già patchato relative al crollo dei margini attraverso altri metodi.

overflow

Nella maggior parte delle discussioni sulla cancellazione galleggia l' overflow:hidden metodo viene in su, ed è sempre abbattuto da un " Se si sta posizionando gli elementi posizionati in modo assoluto all'interno del div, sarà il taglio di questi elementi ". Ma questo non è necessario vero. overflow:hidden sempre clip di elementi posizionati in modo relativo, ma non sarà sempre nascondere quelli posizionati in modo assoluto. Questo perché tutto dipende il blocco contenente:

10.1 Definizione di "blocco contenitore":

4. Se l'elemento ha 'position: absolute', il blocco contenitore è stabilito dal più vicino antenato con una 'posizione' di 'assoluto', 'relativo' o 'fisso', ...

Questo significa che gli elementi con posizionamento assoluto mostrerà al di fuori di una scatola in stile con overflow:hidden meno che il loro blocco contenitore è la stessa scatola o un elemento all'interno della scatola detto.

È possibile controllare questa pagina demo per vedere come funzionano le cose.

Alternative migliori

Se si può applicare una larghezza dell'elemento contenitore galleggianti, allora la vostra opzione migliore è quella di utilizzare:

  display: inline-block;
 larghezza: <qualsiasi <valore esplicito; 

Altre letture

• Galleggianti contenute, galleggianti allegando con puro CSS conosciuta come la tecnica clearfix
• Come cancellare Galleggia senza markup strutturali
• Il Metodo clearfix New
• 10.1 Definizione di "blocco contenitore"

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

YUI: Orario lun 29 settembre

La prossima rata di YUI: Orario sarà Mercoledì prossimo, il 29.

YUI 3 grafici stanno arrivando nella prossima release, e un'anteprima di alcuni primi lavori è già nella Galleria . Ponti Tripp sarà la chiamata, introducendo la nuova struttura e mostrando come i consigli contenuti in package Grafici YUI 2 ha comunicato la nuova architettura, cercando quel sottile equilibrio tra flessibilità e semplicità. Oh, e ho parlato non Flash?

Anche sul ponte sarà Allen Rabinovich dare un aggiornamento sul lavoro straordinario ha fatto sulla riprogettazione yuilibrary.com. Stiamo parlando di tutto, qui: home page, guide utente, demo, tutorial, documentazione API. Le opere. Per molti versi è una storia completamente nuova, e una molto migliore.

Saremo in linea 10:00-12:00 PDT. I dettagli della connessione sono le stesse come al solito.

1. Comporre per 1-888-371-8922 (Skype grandi opere per i non-US partecipanti *)
2. Inserisci 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)

E, infine, il thread del forum yuilibrary.com Orario per questo è qui . Guarda là per le note, take away interessante, e la registrazione della chiamata dopo il gioco è fatto. O avviare la conversazione fuori presto da domande inviando, proposte di temi, o il codice che si desidera rivedere.

Non dimenticare di sottoscrivere il calendario YUI e seguire @ yuilibrary su Twitter per gli ultimi aggiornamenti sulla Orario e altri interestingness YUI.

Speriamo di vedervi lì!

* - Se Skype non è un'opzione, mi e-mail per un numero locale.

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!

Nel Wild 24 settembre 2010

Mentre ci prepariamo per YUIConf 2010 e molto di più nei prossimi mesi, qui ci sono alcune delle altre cose che abbiamo preso atto in tutto il mondo grandi YUI:

• YUI Teatro Top List Nettuts di Da vedere Podcast F2E : Andrew Burgess scrive di YUI Teatro : "Sembra che tutte le volte che un paio di volte al mese, Yahoo porta in sviluppatori all'avanguardia della tecnologia web per mantenere i propri dipendenti fino a data. Per il bene del resto di noi, questi colloqui sono registrati e pubblicati. Troverete ben noti sviluppatori come Douglas Crockford e Nicholas Zakas, e parla su tutto, dalle prestazioni e l'accessibilità a JavaScript e DOM. " #
  
• DigitalInsurance.com (un sito @ apipkin) Powered by YUI 3 : Prolific galleria contribuente Anthony Pipkin ha contribuito a produrre il nuovo portale DigitalInsurance.com , alimentato da YUI 3. #
  
• Miglioramento progressivo usando solo JS (@ codepo8 su davglass @) : Christian Heilmann scrive su Ajaxian: "miglioramento progressivo è ancora oggetto di confusione per un sacco di persone che sono molto eccitati circa le possibilità di JavaScript in ambienti browser moderno. Si può sentire anacronistico scrivere le soluzioni per un non-JS ambiente e poi ancora una volta esalta in JavaScript. Sono cresciuto così tanto per me è una semplice questione di fare la cosa giusta, ma con il mondo di oggi di librerie JavaScript e out-of-the-box widget può sembrare un trascinamento. Inserisci vetro Dav della squadra di YUI. E 'stato ruotando il concetto di progressive enhancement intorno alla testa e come un amante JS e il codice backend "Endurer", ha deciso di risolvere questo problema una volta per tutte in un modo puro JavaScript. " Scopri l'intero articolo per i dettagli . #
  
• Plugin sovrapposizione di più per YUI 3 da Oliver Andrich : Dalla pagina GitHub Oliver: "Sovrapposizione Plugin è una collezione di cinque plugin che ho scritto per imparare YUI 3 plugin di sviluppo in generale. Tre su cinque plugin più o meno imitare il Extra Overlay creato da Eric Ferraiuolo .... I cinque plugin sono:
  • BaseOverlayPlugin
  • ModalOverlay
  • KeepAligned
  • HideOnEscape
  • ConstrainDimensions "
  ( fonte originale. ) #
• Reid Burke Slides YUI per HackU presso la Carnegie Mellon : ingegnere YUI (e Yeti autore) Burke Reid montata un po 'di diapositive e un YUI 3-motore basato su presentazione per il suo recente discorso alla Carnegie Mellon. #
  
• Devcurry per l'apprendimento JS da Crockford e altri guru su YUI Theater : Suprotim Agarwal scrive in devcurry questa mattina: "In questo post, voglio condividere i link di alcuni video molto utili JavaScript e conferenze tenute da Guru JavaScript, ricco di informazioni, a guardare e divertente assolutamente gratuita! Anche se Internet è pieno di video gratuiti, ho scelto solo un paio di loro, che ho trovato più utili. Preparatevi a prendere appunti come si impara .. Crockford le lezioni di video su JavaScript - Douglas Crockford è un architetto JavaScript e gioca un ruolo importante nella progettazione di nuove caratteristiche del linguaggio. I suoi video sono un 'must-have' per qualsiasi sviluppatore JavaScript. YUI Teatro - Consente di accedere ai colloqui di programmazione libera da guru su JavaScript e sviluppo web "Suprotim prosegue elencando alcune altre fonti di contenuti, inclusi altri titoli Teatro YUI.. #
  

Trova conversazioni: Bloglines | technorati

Condividere ed estendere: Bookmark con del.icio.us | Digg it! | reddit!