Yahoo! Blog User Interface (YUIBlog)

YUI Dica 3 Rápido: Adicionando seu voto próprio

Lucas ( @ ls_n ) enviou este trecho em resposta a uma pergunta outro dia, e eu pensei que valia a pena compartilhar aqui como uma dica rápida.

Como a maioria das expressões idiomáticas selector de base, um lote de potência expressiva YUI 3 vem de que você pode fazer quando você tem referência a um ou mais HTMLElements - em YUI 3, que significa ter um nó de referência, que geralmente se via Y.one( selector string ) ou Y.all( selector string ) . Então, Y.one("#foo"). doSomethingInteresting é um padrão comum.

É fácil de estender expressividade YUI 3, adicionando sua própria magia para o nó (e / ou NodeList). Aqui está uma maneira de fazer a sua extensão modular e reutilizável.

Primeiro, crie um novo módulo personalizado (vamos chamá-lo node++ ):

  YUI.add ('nó + +' função, (Y) {
	
	 / / Definir uma função que será executado no contexto de um
	 / Instância / Nó
	 doSomethingAwesome function () {
		 Y.log ("Faça algo incrível aqui.");
	 }

	 / / Usar AddMethod para adicionar doAwesomeThing ao protótipo do Nó:
	 Y.Node.addMethod ("doAwesomeThing", doSomethingAwesome);
	
	 / / Estender essa funcionalidade a NodeLists:
	 Y.NodeList.importMethod (Y.Node.prototype ", doAwesomeThing");
	
 }, '0 .0.1 ', {Requer: [' nó ']}); 

Essência de Lucas é aqui .

Com essa definição na página, node++ pode ser use d em qualquer instância. Em seu código de implementação, você faria:

  YUI (). Uso ("nó + + 'função, (Y) {
	
	 / / Usar a partir de um único nó:
         Y.one ('# foo') doAwesomeThing ().;

	 / / Usar a partir de um NodeList:
	 Y.all ('p') doAwesomeThing ().;
	
 }); 

Note que apenas uma instância do YUI (s) para que você ligar o seu node++ módulo terá acesso a doAwesomeThing . Uma característica deste projeto que você vai gostar como você construir aplicações complexas é que a lógica de implementação não precisa mudar se a lista de dependência para node++ evolui - que vai ser feita para você automaticamente a use() tempo, ea dependência declaração fica com o código para que ele pertence.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

YUI Theater - Dav Glass: (36. Min) "Usando Node.js e YUI 3"

Trabalho Ryan Dahl sobre Node.js - ea comunidade se formando em torno desse projeto - juntou-se HTML5 como uma das grandes histórias de 2010. Engenheiro YUI Dav Vidro tem trabalhado para fazer YUI 3 um poderoso aliado para os implementadores Node.js, e neste vídeo ele mostra o que ele fez até agora - incluindo demos de widgets progressivamente melhoradas que executam o mesmo código no cliente e servidor. Não perca este.

Se o vídeo incorporar abaixo não aparecer correctamente no seu leitor de RSS, clique por assistir ou baixar a versão de alta resolução do vídeo em YUI Theater .

• Download de vídeo HD (480p ~ 271MB)
• Download video (m4v)
• A alta resolução versão, transcritas desta palestra está disponível no site Theater YUI

Outros vídeos Theater recentes YUI:

• Alois Reitbauer: dynaTrace Ajax Edição - dynaTrace proporciona uma das mais poderosas ferramentas para analisar o desempenho de aplicações web no Internet Explorer. Nesta palestra, o engenheiro dynaTrace Alois Reitbauer percorre quatro cenários específicos de análise usando a interface dynaTrace.
• Ryan Grove: Alcançar Desempenho Zen com YUI 3 - Seguindo as orientações codificadas pode ajudá-lo a construir sites rápidos, mas a criação de aplicativos que são limpo, rápido e extensível também envolve tomar uma abordagem equilibrada ao desempenho em cada nível de seu trabalho F2E. YUI 3 é projetado para ajudá-lo neste processo, proporcionando uma camada de abstração de direito de tamanho com built-in magia desempenho e uma variedade de ferramentas que tornam o código frontend rápido, fácil e divertido de se produzir. Nesta sessão, vamos explorar o zen de performance JavaScript no 3 º YUI mundo e introduzir-lhe algumas das ferramentas poderosas YUI 3 coloca à sua disposição em todos os aplicativos que você escreve.
• Douglas Crockford: Crockford em JavaScript - Cena 6: Loopage - O desenvolvimento de software é dificultada por um conjunto específico de erros de design que foram feitas nas primeiras linguagens de programação e repetida em tudo o que foi feito desde então. E, de certa forma, milagrosamente, JavaScript vai fazer isso direito, transformando radicalmente a nossa forma de escrever aplicações. Mais uma vez. In the Loop de História, tem tudo aconteceu antes, mas nunca aconteceu assim. É por isso que você deve se preocupar com o surgimento de JavaScript do lado do servidor e da emoção em torno de projetos como Node.js - não porque eles estão na ponta de uma tendência, mas porque eles estão pavimentando o caminho para a próxima grande revolução em software.

Inscrevendo-se na YUI Theater:

• YUI Theater RSS feed
• YUI Theater no iTunes

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

Foco Implementação: Aluguel expresso

Aluguer de carro expresso é a líder independente de carro site de comparação de aluguel na Internet. Ele permite que usuários carros aluguel on-line em mais de 1000 cidades e aeroportos de todo o mundo.

Nossa base de usuários é em grande parte não técnica, o que significa que eles querem comparar preços e aluguel de carros tão facilmente quanto possível. Com o relançamento do nosso site, em junho de 2010, nós implementamos muitos componentes YUI 2 para ajudar a fornecer aos nossos clientes uma experiência intuitiva.

Quais componentes YUI estamos usando?

Os componentes que temos vindo a utilizar incluem Connection Manager , AutoComplete , DataSource , Calendário , Animação , JSON , e Container .

Por que escolheu YUI

Ao analisar as diferentes bibliotecas JavaScript que poderia usar no carro expresso , descobrimos que a YUI foi o mais completo para nossas necessidades. As principais características de venda para nós foi a abordagem muito modular o YUI tomou para implementar diferentes padrões de design, bem como a documentação robusta e exemplos que eles prestados. Do ponto de vista de desenvolvimento que levou a um rápido desenvolvimento da nossa aplicação sem ter que lutar com uma biblioteca.

Como usamos YUI

Nós utilizamos o YUI num certo número de maneiras. Nossos 4 componentes mais utilizados são AutoComplete, Calendário, Container, e Connection Manager. Aqui estão algumas das maneiras que usamos cada um desses componentes.

AutoComplete

O componente AutoComplete é amplamente utilizado em nosso site para ajudar usuários a encontrar uma cidade ou aeroporto em que alugar um carro. Nós realmente gostei de como era fácil implementar este componente, e quão rápido ele responde. Nós cache de resultados de pesquisa do lado do servidor para ajudar a melhorar os resultados da pesquisa, no entanto, com o cache do lado do cliente também ajudou tremendamente a acelerar a resposta do componente. Outra característica que realmente levou para o quão fácil era os resultados foram o estilo. Ao exibir os locais para o usuário isso foi crucial, pois precisávamos identificar quais locais onde encontrados em cidades e que foram encontrados nos aeroportos.

Calendário

O componente Calendar também é usado em todo o site quando um locatário está enchendo de datas para realizar uma pesquisa. Nós estamos usando uma versão personalizada do John Peloquin da Seleção Intervalo Calendário e exibi-lo em um diálogo YUI . Essencialmente o que queríamos fazer era dar o locatário a fim de dois meses ao escolher suas datas, bem como visualmente mostrar-lhes o intervalo de datas que atualmente selecionado. Novamente, isso foi extremamente simples de implementar usando YUI Calendar 2 e, basicamente, desceu para a criação de um diálogo de YUI, definindo o corpo para conter uma div para o Calendário, em seguida, anexar um Calendário Intervalo YUI ao div.

Containers

Nós utilizamos Containers YUI através do nosso site em um número de maneiras diferentes. No exemplo acima que estávamos usando uma caixa de diálogo que nos ajude a mostrar o Calendário Intervalo quando um usuário estava selecionando uma data. Em nossa taxa de página de resultados de pesquisa que fazem uso pesado de Containers para dar o locatário obter mais informações sobre os diferentes aspectos da agência de aluguer de automóveis e do veículo que possam potencialmente alugar. A maioria dos contêineres nesta página são painéis que nós re-uso para cada anúncio diferente. Por exemplo, o mostrador do veículo apresenta Painel:

As coisas ficaram um pouco mais divertido com as classificações das agências locatário nominal. Ao exibir as classificações, nós realmente queríamos focar a atenção do usuário para os escores de uma agência recebidos e para exibir essa informação em um ambiente limpo, maneira fácil visualização. Ao utilizar o Dialog Control fomos capazes de restringir a viewport e centro do diálogo com facilidade para nos ajudar a atingir esse objetivo. Ao definir um cabeçalho e rodapé em branco que fez estilo simples, apenas adicionando os estilos apropriados para o nosso CSS. O resultado final foi um recipiente limpo classificações que oferece ao locatário com a informação que querem.

Connection Manager

Connection Manager é usado em todo o site sempre que precisamos para extrair dados através de um pedido XHR. Em alguns dos exemplos acima, utilizamos este componente para o pedido de cidades e aeroportos para os implementaitons AutoComplete e puxando as informações de classificação para o Cliente nominal de diálogo.

Uma maneira interessante nós utilizamos Connection Manager é com o nosso bloco de centro de aluguer que se sente na maioria das páginas. Para ajudar com o desempenho que fazer um monte de caching de página inteira em muitas de nossas páginas de conteúdo. No entanto, ainda queria exibir o bloco de centro dinâmico aluguer nestas páginas. Este apresentou-nos um problema que foram capazes de resolver com Connection Manager. Ao invés de ter que quebrar a nossa página totalmente em cache e os aspectos de cache somente da página descobrimos que era mais fácil de incluir apenas o bloco de centro de aluguer através de uma solicitação assíncrona simples. Nós descobrimos que isso nos permitiu manter o desempenho de ter uma página totalmente em cache, e ainda exibir o conteúdo dinâmico na nossa caixa de centro de aluguer.

Considerações Finais

No geral, têm sido extremamente satisfeitos com a escolha de usar YUI. Ele nos fornece uma biblioteca modular que está bem documentado, fácil de usar e implementar.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

No YUI 3 Gallery: Matt Taylor Módulo RaphaelJS

RaphaelJS é uma biblioteca JavaScript poderoso que gerencia SVG desenhos e animações. Ele permite que você facilmente criar telas SVG e desenhar formas básicas e caminhos muito facilmente, mesmo agrupando-os em conjuntos e aplicação de transformações a um ou muitos vetores. Você pode desenhar formas, manipular imagens, e animar tudo. RaphaelJS proporciona uma agradável API para criar e modificar elementos SVG com facilidade.

Enquanto a biblioteca é impressionante, mas eu descobri que posso acrescentar algumas características importantes para os elementos da biblioteca RaphaelJS com YUI3. Eu comecei esses esforços com o novo Módulo Galeria RaphaelJS .

Preguiçoso RaphaelJS Carregamento e Plugins

O primeiro recurso é o carregamento preguiçoso, não só a biblioteca RaphaelJS, mas qualquer RaphaelJS plugins você pode precisar. O Módulo Galeria RaphaelJS só carregar esses arquivos quando você declarar que vai usá-los dentro de uma sandbox YUI. Por exemplo:

 
 YUI ({gallery: 'galeria de 2010/09/22-20-15'}). Uso ('galeria raphael', function (Y) {
 
	 Y.Raphael (). Usar (function (Rafael) {
		
		 / / Usar Raphael aqui apenas como você faria fora YUI
		 var papel = Raphael ('myPaper', 500, 500);
 
	 });
 
 });

Se você estiver usando plugins RaphaelJS, especificar seus caminhos em uma matriz e enviar esse como o primeiro parâmetro na Y.Raphael () use () função.:

 
 YUI ({gallery: 'galeria de 2010/09/22-20-15'}). Uso ('galeria raphael', function (Y) {
 
	 myPlugins var = ['plugins / raphael.awesomePlugin.js', 'plugins / raphael.wickedPlugin.js'];
 
	 Y.Raphael (). Usar (myPlugins, function (Rafael) {
 
		 / / Usar Raphael aqui apenas como você faria fora YUI
		 var papel = Raphael ('myPaper', 500, 500);
		 / / O 'papel' terá quaisquer novas funções adicionadas por seus plugins agora
	 });
 
 });

A biblioteca RaphaelJS é carregado pela primeira vez, então todos os plugins específicos são carregados antes da sua função de callback é executado com o objeto Raphael como o único parâmetro.

Eventos personalizados

Depois de criar um espaço de desenho com o objeto Raphael, então você pode começar imediatamente até o desenho. Quando você chamar métodos como rect , circle , e path no espaço do desenho, você vai receber de volta os objetos que representam vetores SVG. Normalmente, você terá acesso aos seus elementos correspondentes DOM através do node da propriedade. Por exemplo:

 
 var papel = Raphael ('myPaper', 500, 500);
 var quadrado = paper.rect (0, 0, 100, 100);

Isso cria um objeto vetor retangular nas coordenadas [0,0] com uma largura e altura de 100 pixels. Você tem acesso ao elemento DOM subjacente (que é um SVG rect elemento) assim:

 
 var rectNode = square.node;
 rectNode.onclick = function () {
	 alert ('Parabéns, você clicou em um quadrado!');
 };

Se você é um ávido usuário de YUI, você provavelmente gostaria de algo mais do que isso. Como cerca de um construído em Y.Node também? Assim como o node propriedade refere-se à HTMLElement atrás do objecto SVG, o $node propriedade refere-se à Y.Node invólucro para esse elemento. Assim, você pode fazer coisas como esta:

 
 quadrado. $ node.on ('mouseover', function () {
	 alert ('Parabéns, você pode mover o mouse!');
 });

Vamos tentar algo mais complexo agora. Uma interação com um vetor deve ser capaz de causar outros vetores desenhados para atualizar seus estilos, certo? Que tal criar algumas barras que todas as suas cores tornam dependentes de onde um o mouse está localizado em um círculo na página:

 
 var papel = Raphael ('rcanvas', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({preencher: 'rosa', acidente vascular cerebral: 'black'});
 
 / / Empurrando um monte de retângulos em uma matriz
 var i = 0; retângulos = [];
 for (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, 200, 20) attr ({preencher: 'red', acidente vascular cerebral: 'amarelo'}.));
 }
 
 / / Loop através dos retângulos, adicionando manipuladores mousemove específicas para cada círculo
 Y.Array.each (retângulos, função (rect, index) {
	 var i = índice + 1;
	 circ. $ node.on ('mousemove', function (evt) {
		 / / A cor de preenchimento é dinâmico, dependendo da localização deste retângulo
		 / / Na matriz, bem como a localização do rato
		 var = lf circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + lf,
			 x = evt.clientX - Se,
			 top = circ.attrs.cy - circ.attrs.r,
			 btm = 2 * circ.attrs.r + superior,
			 y = evt.clientY - superior;
			 vermelho = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 verde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 azul = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 rect.attr ('encher', 'rgb ("+ vermelho +', '+ verde +', '+ azul +') ');
	 });
 });

Este exemplo é execução aqui , mas como se pode ver nos instantâneos abaixo, a cor de cada barra é dependente da localização do rato sobre o círculo, bem como a ordem da barra.

Dependendo de onde o cursor do mouse está sobre o círculo, as cores das barras mudar individualmente.

Assim você pode ver que $node é um atalho útil, mas nada espetacular. Seria realmente fantástico se cada objeto SVG que você cria com RaphaelJS pode disparar eventos personalizados . Isso permitiria que os seus elementos de desenho individuais para disparar eventos personalizados, e qualquer coisa na página poderia ouvir e responder. Isto pode ser útil em muitas maneiras. Para começar, ele fornece interações ricas entre os seus desenhos. Interações do usuário com um vetor agora pode notificar quaisquer outros vetores da interação on demand. Isto significa que você pode programaticamente disparar eventos de seus desenhos quando certas condições são cumpridas. Isso não só permitir que os seus desenhos para notificar outros vetores, mas nada na página pode ouvir dentro

 
 var papel = Raphael ('rcanvas', 600, 800);
 
 . var circ = paper.circle (350, 200, 100) attr ({preencher: 'rosa', acidente vascular cerebral: 'black'});
 
 / / Fazer conjuntos de retângulos e círculos
 var i = 0, retângulos = [], círculos = [];
 for (; i <10; i + +) {
	 rectangles.push (paper.rect (0, 40 * i, i * 40, 20) attr ({preencher: 'red', acidente vascular cerebral: 'amarelo'}.));
	 circles.push (paper.circle (0,0,20) hide ().);
 }
 Y.Array.each (retângulos, função (rect, index) {
	 var i = índice + 1;
	 circ. $ node.on ('mousemove', function (evt) {
		 var = lf circ.attrs.cx - circ.attrs.r,
			 rt = 2 * circ.attrs.r + lf,
			 x = evt.clientX - Se,
			 top = circ.attrs.cy - circ.attrs.r,
			 btm = 2 * circ.attrs.r + superior,
			 y = evt.clientY - superior;
			 NewWidth = (((256 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 vermelho = (((128 * x) / (2 * circ.attrs.r)) -1) * i / 6,
			 verde = 256 - ((((128 * x) / (2 * circ.attrs.r)) -1) * i / 6),
			 azul = (((128 * y) / (2 * circ.attrs.r)) -1) * i / 6;
		 / / Este tempo, não apenas mudando a cor, mas também a largura rectângulo
		 rect.attr ({
			 width: NewWidth,
			 preencher: 'rgb ("+ vermelho +', '+ verde +', '+ azul +') '
		 });
		 / / Disparar evento personalizado para avisar que esta largura retângulo mudou
		 rect.fire ('width-changed', {width: NewWidth, fonte: rect, a ordem: Índice});
	 });
	
	 / / Cada retângulo recebe um ouvinte que é acionado em largura mudou
	 rect.on ('width-changed', function (evt) {
		 var attrs = evt.source.attrs;
		 / / Pega o círculo correspondente e movê-lo para a extremidade direita do retângulo
		 círculos [evt.order]. attr ({
			 cx: attrs.x + attrs.width,
			 cy: attrs.y,
			 preencher: 'cornflowerblue'
		 .}) Show ();
		
	 });
	
 });

Dê uma olhada neste exemplo rodando aqui . Você também pode ver na fotografia abaixo que os círculos estão sendo traçadas nas extremidades direita dos retângulos. Isto está ocorrendo em resposta ao disparo de cada retângulo indivíduo evento personalizado, sendo capturado por um manipulador que move o círculo para uma posição em relação aos atributos atuais do retângulo.

Isso abre algumas possibilidades interessantes para RaphaelJS dentro YUI3. Por exemplo, o que se poderia criar um grupo de formas vetoriais com o grupo em si é a entidade que dispara eventos para o mundo exterior? Internamente, cada desenho vetorial pode se comunicar com seu recipiente através de eventos personalizados, eo recipiente se tomar decisões sobre quais os dados que dispara para o mundo exterior. Isso abre a idéia de totalmente encapsulados, controles interativos SVG.

Resumo

Com a ascensão do HTML5 e suas tecnologias por satélite, há tantas outras opções que não sejam Flash para interações ricas. Idealmente, todos os elementos vetoriais da página deve ser totalmente acessível e padronizado. Isso abre possibilidades maravilhosas para nós para criar acessíveis, controles web padrão, sem recorrer a Flash. SVG é uma opção atraente porque cada vetor desenhado na página é apoiada por um nó DOM que podemos modificar com YUI como qualquer outro nó DOM. Isso é o que permite que o Módulo Galeria RaphaelJS para aumentar todos os objetos em SVG sendo criados por RaphaelJS, e que é a chave para uma interação rica com esses elments de outras partes da página.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

clearfix Reloaded + overflow: hidden Demystified

clearfix e overflow : hidden pode ser as duas técnicas mais populares para limpar carros alegóricos sem marcação estrutural.

Este breve artigo é sobre como melhorar o método de primeira e derramar alguma luz sobre o verdadeiro significado do segundo.

clearfix

Em tudo o que sabe sobre clearfix é errado eu explicar os problemas este método cria em vários navegadores e eu sugiro usar apenas clearfix em elementos que não estão ao lado de carros alegóricos (por exemplo, uma janela modal), embora, como autores ainda temos que lidar com o colapso margens . Esta página de demonstração demonstra o problema.

Margem colapso comportamento nas duas primeiras caixas mostra que é o conteúdo gerado (não-vazia) que mantém a margem inferior dentro da caixa (que faz todo o sentido de acordo com a especificação ).

Assim, para criar o layout da caixa mesmo em todos os navegadores que podemos melhorar o método original de geração de conteúdo usando ambos os pseudo-elementos :before e :after :

  . Clearfix: antes,
 . Clearfix: after {
   conteúdo: ";".    
   display: block;    
   height: 0;    
   overflow: hidden;	
 }
 . Clearfix: after {clear: both;}
 . Clearfix {zoom: 1;} / * IE <8 * / 

Não basta substituir as regras de clearfix com esses novos em projetos existentes, embora, como você pode ter problemas já corrigidos relacionadas com o colapso margens através de outros métodos.

overflow

Na maioria das discussões sobre compensação flutua o overflow:hidden método surge, e é sempre abatido por um " Se você está colocando elementos posicionados absolutamente dentro da div, você estará cortando esses elementos ". Mas isso não é verdade necessária. overflow:hidden sempre juntar elementos relativamente posicionados, mas não iremos sempre esconder os posicionados absolutamente. Isto porque tudo depende do bloco de conteúdo:

10,1 Definição de "bloco de conteúdo":

4. Se o elemento tem "position: absolute ', o bloco que contém é estabelecida pelo ancestral mais próximo com uma 'posição' de 'absoluta', 'relativa' ou 'fixo', ...

Isto significa que elementos posicionados absolutamente irá mostrar fora de uma caixa estilizada com overflow:hidden a menos que seu bloco de conteúdo é a própria caixa ou um elemento dentro da caixa, disse.

Você pode verificar esta página de demonstração para ver como as coisas funcionam.

Melhores alternativas

Se você pode aplicar uma largura para o elemento que contém carros alegóricos, então a sua melhor opção é usar:

  display: inline-block;
 width: value> explícita <qualquer; 

Leitura complementar

• Flutua contidos, flutuadores encerram com CSS puro conhecido como a técnica clearfix
• Como limpar Floats Sem marcação estrutural
• O Método Clearfix Nova
• 10,1 Definição de "bloco contendo"

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

YUI: Horário de funcionamento Seg Set 29 ª

A próxima edição do YUI: Horário de funcionamento será próxima quarta-feira, dia 29.

YUI 3 gráficos estão vindo na próxima versão, e uma pré-visualização de algum trabalho precoce é já na Galeria . Pontes Tripp estará na chamada, introduzindo a nova estrutura e mostrando como os aprendizados de pacote YUI 2 de gráficos informou a nova arquitetura, buscando o equilíbrio tênue entre flexibilidade e simplicidade. Ah, e eu mencionei não Flash?

Também no convés será Allen Rabinovich dando uma atualização sobre o fantástico trabalho que ele vem fazendo sobre o redesenho yuilibrary.com. Estamos falando de tudo, aqui: Página Principal, guias de usuário, demos, tutoriais, API docs. Os trabalhos. Em muitos aspectos, é uma história completamente nova, e uma muito melhor.

Nós vamos estar on-line 10:00-12:00 PDT. Os detalhes da ligação são o mesmo que o normal.

1. Disque para 1-888-371-8922 (Skype funciona muito bem para não-americanos participantes *)
2. Digite o código de participante 47188953 #
3. Junte-se a sessão de compartilhamento de tela (este irá pedir-lhe para instalar o plugin Adobe Connect, se esta é sua primeira vez de usá-lo)

E, finalmente, o tópico do fórum yuilibrary.com para este Horário de funcionamento é aqui . Olhe lá para notas, takeaways interessantes, ea gravação da chamada após ele é feito. Ou iniciar a conversa fora cedo, colocando perguntas, sugestões de temas, ou o código que você gostaria de revisão.

Não se esqueça de assinar o Calendário YUI e siga @ yuilibrary no Twitter para atualizações recentes sobre as Horas Abertas e interestingness YUI outro.

Espero ver você lá!

* - Se o Skype não é uma opção, enviar e-mail me para um número local.

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!

In the Wild para 24 de setembro de 2010

Enquanto nos preparamos para YUIConf 2010 e muito mais nos próximos meses, aqui estão algumas das outras coisas que temos tomado conhecimento de no mundo YUI maior:

• YUI Theater Tops NETTUTS lista de must-see Podcasts F2E : Andrew Burgess escreve sobre YUI Theater : "Parece que tão frequentemente como algumas vezes por mês, Yahoo! traz desenvolvedores na vanguarda da tecnologia web para manter os seus empregados até data. Para o benefício do resto de nós, essas conversas são gravadas e publicadas. Você vai encontrar conhecidos devs como Douglas Crockford e Zakas Nicholas, e fala sobre tudo, desde o desempenho ea acessibilidade para JavaScript e DOM. " #
  
• DigitalInsurance.com (um @ Sítio apipkin) Powered by YUI 3 : Prolific galeria contribuinte Anthony Pipkin ajudou a produzir o novo portal DigitalInsurance.com ., alimentado por YUI 3 #
  
• Progressive Enhancement usando nada mas JS (@ codepo8 em davglass @) : Christian Heilmann escreve sobre Ajaxian: "melhoramento progressivo ainda é uma questão confusa para um monte de pessoas que estão muito entusiasmados com as capacidades de JavaScript do navegador em ambientes modernos. Pode-se sentir anacrônico escrever suas soluções para um ambiente não-JS e, em seguida, mais uma vez melhora em JavaScript. Eu cresci assim então para mim é uma simples questão de fazer a coisa certa, mas com o mundo de hoje de bibliotecas JavaScript e out-of-the-box Widgets pode parecer uma chatice. Digite Dav vidro da equipe YUI. Ele está transformando o conceito de melhoria progressiva em sua cabeça e como um amante JS e código de backend "endurer", ele partiu para resolver este problema uma vez por todas de uma forma JavaScript puro. " Confira o artigo completo para obter mais detalhes . #
  
• Plugins Mais de sobreposição para YUI 3 de Oliver Andrich : Da página GitHub Oliver: "Overlay Plugins é uma coleção de cinco plugins que eu escrevi, a fim de aprender YUI developement plugin de 3 em geral. Três em cada cinco plugins mais ou menos imitar os Extras de sobreposição criados por Eric Ferraiuolo .... Os cinco plugins são:
  • BaseOverlayPlugin
  • ModalOverlay
  • KeepAligned
  • HideOnEscape
  • ConstrainDimensions "
  ( fonte original. ) #
• Slides Reid Burke YUI para HackU da Carnegie Mellon : YUI engenheiro (e Yeti autor) Reid Burke chicoteado até alguns slides e um YUI motor 3-base slideshow para sua recente palestra na Carnegie Mellon. #
  
• Devcurry em Aprender JS de Crockford e outros gurus em YUI Theater : Suprotim Agarwal escreve em devcurry esta manhã: "Neste post, vou compartilhar links de alguns vídeos muito úteis JavaScript e palestras por Gurus JavaScript, cheios de informações, divertir assistindo e absolutamente grátis! Embora a internet está cheia de vídeos gratuitos, que eu escolhi apenas um par deles, que eu achei o mais útil. Prepare-se para tomar notas como você aprender .. palestras Crockford vídeo em JavaScript - Douglas Crockford é um arquiteto de JavaScript e joga um papel importante na concepção de novos recursos da linguagem. Seus vídeos são um 'must-have "para qualquer desenvolvedor JavaScript. YUI Theater -.. Fornece acesso a palestras gratuitas de gurus de programação em JavaScript e desenvolvimento web "Suprotim continua a listar algumas outras fontes de conteúdo, incluindo títulos Theater YUI #
  

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!