Usuário Yahoo! interface Blog (YUIBlog)

Pergunte Satyam - e ser elegível para uma cópia gratuita do Novo Livro de YUI 2,8 Packt

Satyam (Daniel Barreiro) escreveu na semana passada sobre a sua experiência de escrita YUI 2.8: Aprender a Biblioteca , o novo YUI 2 do volume disponível de Packt.

Packt generosamente ofereceu alguns livres cópias eletrônicas para YUIBlog leitores. Sugira uma pergunta ou tutorial que você gostaria de ver a partir Satyam em um YUI tópico 2.8-relacionados como um comentário sobre este post, e se Satyam escolhe seu tema sugerido por um dos seus três "Ask Satyam" blog posts Packt fará uma cópia eletrônica do livro disponível para download da Satyam.

Satyam vai postar as respostas às suas três perguntas favoritas aqui no blog durante o próximo mês ou assim.

Encontrar conversas: bloglines | technorati

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

YUI 3.2.0 Preview Release 1: Apoio Evento Touch, Gestos, Transitions, CSS Grids, ScrollView, Uploader, e muito mais

A equipe do contribuinte YUI é o prazer de anunciar a pré-visualização primeiro desenvolvedor do próximo release 3.2.0 YUI. Esta previsão é uma oportunidade para os desenvolvedores e implementadores para ajudar a testar a introdução em regressões potencial e fornecer feedback sobre novos recursos e componentes. Se você tem uma implementação YUI existentes, por favor exercício YUI 3.2.0pr1 em seu ambiente de desenvolvimento e deixe-nos saber o que você encontrar.

Há três maneiras para começar com o lançamento previsão:

• Use a partir do CDN: YUI 3.2.0pr1 está disponível no CDN através da tag versão 3.2.0pr1 - assim você pode fazer referência a previsão de liberação de arquivos como http://yui.yahooapis.com/combo?3.2.0pr1/build/yui/yui-min.js . Se você alternar para este arquivo de origem para a versão pré-lançamento, todas as subseqüentes use() declarações continuará a carregar YUI 3.2.0pr1.
• Faça o download do release: Download YUI 3.2.0pr1 de YUILibrary.com , incluindo o código fonte e exemplos para todos os componentes - incluindo aqueles que são novos para esta versão.
• Explore os exemplos: Como uma conveniência, postamos o preview (junto com o roster exemplos funcionamento ) para YUIBlog. Sinta-se livre para explorar a libertação não como um prelúdio para mudar sua referência versão CDN (ou baixar o preview) e testá-lo em seu próprio ambiente.

Mudanças notáveis ​​Chegando em YUI 3.2.0

Como com todo o trabalho de desenvolvimento YUI, você pode acompanhar nossos planos atuais e progresso em nosso YUI 3 tasklist , incluindo uma lista completa de YUI 3.2.0 (3.3.0 e alguns próximos) alterações; você também pode verificar no nosso progresso questões no banco de dados de bugs . Aqui estão alguns dos componentes novos e atualizados destaque no preview para desenvolvedores 3.2.0:

• Apoio intrínseco a eventos de toque foi adicionada ( mynode.on("touchstart", function(e) {}); ). Nós também adicionamos um módulo com dois gestos Gestos incluído - gesture-flick e gesture-move - que trabalham com os dois dispositivos touch-e mouse-driven. Confira a documentação da API ou a página de exemplo fornecido para idéias sobre como começar a usar gestos.
• Carregador intrínseca YUI agora suporta baseada em capacidade de carga. Isso nos permite separar, por exemplo, o código do IE-específicas em submódulos separados e permitir que o Loader para pacote que apenas código para os navegadores que necessitam dele. Estamos aproveitando este novo recurso para evitar o transporte código IE-específicas no módulo de Dom para não-IE navegadores, um aumento de performance / k de peso, que vai beneficiar todos os usuários de navegadores modernos, sem alterar o código necessário.
• Carteira YUI 3 de animação agora suporta transições através do módulo de transição, proporcionando normalização browser para esta técnica poderosa, a aceleração por hardware (quando disponível) para transições manipulação; confira o exemplo de código de exemplo . Animação, em sua forma mais básica, tem uma árvore de dependência aerodinâmica para navegadores modernos, reduzindo significativamente o peso k para animação simples em navegadores melhor.
• YUI 3.2.0 trará consigo uma nova versão beta do componente YUI Grids CSS, e você pode começar a explorar esta nova abordagem para Grids na versão preview. Os exemplos são o melhor lugar para começar .
• Nós trabalhamos com Michael Johnston, da equipe de Engenharia Yahoo! Mobile para trazer uma nova (beta) widget ScrollView a YUI 3.2.0. ScrollView fornece uma implementação painel de rolagem familiar aos usuários de aplicativos nativos da Apple iOS, emulando a elasticidade do elemento quando rolada para o início ou término limite. Você verá nos exemplos 3.2.0pr1 para ScrollView que este componente é um dispositivo neutro, trabalhar bem com um mouse bem como com eventos de toque em seu Android ou dispositivo IOS.
  
• O componente de YUI Uploader 2 é agora parte do 3 YUI família, bem como, estreando como um beta em 3.2.0.
• O módulo de História que estreou com YUI 3.0.0, que era um porto do YUI versão 2, foi preterido (que permanece disponível no YUI 3.2.0 como history-deprecated ). Um novo beta História utilitário estréia em 3.2.0, com base no módulo de Ryan Grove de História Lite da Galeria 3 YUI. Um exemplo de visualização de liberação do novo componente é uma boa referência de partida.
• O JSONP e módulos de consulta a partir do 3 YQL YUI Galeria tornaram-se componentes canônicos, estreando como beta nesta versão.

Comentários

O objetivo de uma versão pré-lançamento é para torná-lo tão fácil quanto possível para todos nós na comunidade para avaliar o progresso do lançamento e fornecer feedback. Por favor, dedique algum tempo para testar 3.2.0pr1 e deixe-nos saber o que você encontrar mediante a apresentação de bilhetes no banco de dados bug YUI três marcados como "Observado em versão" 3.2.0pr1. Nós vamos fazer o nosso melhor para visualizar o endereço de liberação perguntas sobre o 3 YUI Fórum , também.

Encontrar conversas: bloglines | technorati

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

YUI Theater vem ao Boxee, Cortesia de Chad Auld ea Equipe Brilaps

YUI colaborador e ex-Yahoo Chad Auld nos mandou para nos contar sobre seu mais recente projecto com o seu grupo Brilaps - um projeto que trouxe YUI Theater para a tela de TV via Boxee. Nas palavras do Chade:

Boxee é um up-and-coming aplicação multiplataforma que tem como objetivo ajudar a trazer o conteúdo da web à TV. Ele é baseado no código aberto XBMC projeto e permite aos usuários escrever novos plugins para trazer conteúdos adicionais. Lançamos um novo projeto há três semanas para construir o nosso plugin de Boxee primeiro, e nós selecionamos o Teatro YUI como o conteúdo queríamos trazer a partir da web para a TV. Há tantos grandes vídeos arquivados lá (e crescente), pensamos que é uma excelente fonte de conteúdo para os desenvolvedores têm acesso a partir de seu sofá (especialmente porque a maioria dos vídeos são um pouco mais do que alguém possa ter tempo para assistir confortavelmente de seu laptop). Demorou cerca de uma semana para construir o plugin, mais uma semana para polonês-lo e resolver alguns bugs, e cerca de uma semana para obter a candidatura aprovada pela equipe de QA Boxee e empurrou para o repositório público. Eu só tenho a palavra que ele bateu no repositório público esta manhã, e então eu queria chegar e que você saiba.

Esta é uma notícia fantástica para todos que tem apreciado YUI Theater conteúdo e gostaria de recuperar o atraso em mais tardar a partir Douglas Crockford, Brendan Eich e todos os outros oradores Theater grande YUI a partir do conforto de sua / seu sofá. Confira o vídeo acima para uma excursão da interface do usuário, e depois ir pegar Boxee e começar.

Encontrar conversas: bloglines | technorati

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

Frontend Posições Engenharia Disponível com a Equipe Força Yahoo! Flex

O Yahoo! Flex Força está olhando para expandir a nossa equipa com alguns engenheiros frontend talentoso. Como parte da equipe de Força Flex, você terá a oportunidade de trabalhar em vários projetos estratégicos de grande visibilidade e grande visibilidade. Estas posições envolvem ser um embaixador das melhores práticas e partilha de conhecimentos em toda a organização. Nós trabalhamos de perto com as equipes de plataforma diferentes, incluindo a equipe de YUI, para garantir que estamos utilizando as mais recentes estratégias, técnicas e ferramentas.

Como exemplo recente, a equipe Força Flex estava por trás da implementação do novo Yahoo! Atualizações widget que é construído inteiramente usando YUI 3 .

Para ser bem sucedido neste papel, você precisa ser um aluno auto-starter e rápido com uma mentalidade positiva que pode rapidamente aumentar e assumir desafios diferentes. A verdadeira paixão para as tecnologias de interface e as melhores práticas também é necessária.

Se trabalhar comigo e com meus colegas sobre o Flex Yahoo! Força parece interessante para você, vá até o site Yahoo carreiras e confira os seguintes cargos:

• Posição frontend engenheiro # 1
• Posição frontend engenheiro # 2
• Posição frontend engenheiro # 3 - este é um papel mais altos, com mais experiência e habilidades adicionais necessárias

Encontrar conversas: bloglines | technorati

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

YUI: Horário de funcionamento Wed, 21 de julho

Para aqueles de vocês que não se inscrever para o calendário YUI ou forum YUILibrary.com , a próxima parcela do YUI: Horário de funcionamento será amanhã, 21 de julho.

Desta vez, vamos focar um tema recorrente para os contribuintes YUI comunidade que estão apenas começando construir seus próprios módulos: Como construir um Widget e como construir um plug-in em um 3 YUI caminho.

Anthony Pipkin, aka apipkin de yui # canal de IRC fama, será o convidado, guiando-nos através de seus aprendizados sobre o ano passado e mostrando como passar de copiar e colar o YUI 3 exemplos de documentação para sentir confiante de que você está fazendo o certo escolhas de como abordar um problema em uma "YUI 3 maneira de pensar".

Vamos dar uma olhada em dois de seus módulos mais simples Gallery, o Widget botão eo nó Plugin IO . Ele vai discutir o que parecia inicialmente, versus hoje, e porque mudou.

Então vamos brincar um pouco, talvez construir algo a partir do zero com base no que as pessoas na chamada quer cobrir.

Matt Sweeney (Node, Selector, tabview, redes, etc) e Satyen "o Guru" Desai (Widget, Plugin, Base Atributo, etc) da equipe YUI também estará na chamada. Portanto, vai haver melhores práticas em casa.

Para YUI três consumidores que não são (ainda?) Contribuintes, esta chamada deve ainda ser valioso para a compreensão do pensamento por trás como YUI 3 widgets e plugins são construídas e que tipo de padrões que esperar de novos componentes YUI. E sem dúvida haverá outras takeaways grande como sempre.

Estaremos on-line 10:00-12:00 PDT. Os detalhes de conexão são as mesmas, como de costume.

1. Discar para 1-888-371-8922 (fora dos EUA participantes, e-mail me para um número local)
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)

Aqui está o tópico do fórum para este horário em aberto. Vou postar alguns dos takeaways interessante após a chamada.

Siga @ yuilibrary no Twitter para o mais tardar.

Esperamos ver você lá!

Encontrar conversas: bloglines | technorati

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

Notas Autor: Writing YUI 2.8: Aprender a Biblioteca, o New YUI 2 do livro de Packt

Em dezembro de 2009, editores da Packt Publishing me perguntou se eu gostaria de escrever a segunda edição de seu livro sobre a biblioteca YUI . O autor original, Dan Wellman, estava envolvido em outro negócio no momento, e eles precisavam de um autor que foi amplamente familiarizado com YUI 2 . A primeira coisa que pensei foi: você não está um pouco atrasado? Muito do YUI 3 já estava em GA e mais estava vindo com cada lançamento. Mas a equipe Packt queria continuar, e eu concordei em assumir o desafio.

Em 16 de ^Julho, o novo volume saiu, YUI 2.8: Aprender a Biblioteca , não como uma segunda edição, mas como um novo título. No final, não foi uma decisão tão ruim. Enquanto o livro estava atravessando o processo de edição, YUI três ganharam a capacidade de carga YUI 2 componentes do use() declaração . Isso amplia a utilidade do extenso catálogo YUI 2, tendo a pressão de desenvolvedores para produzir YUI três versões de todos os componentes 2 YUI.

• Capítulo de exemplo: Packt lançou um capítulo de amostra do novo volume, que abrange 2,8 YUI Editor de Rich Text, em seu site, dando-lhe um sabor do que o novo livro contém .

O objetivo com este novo volume foi para cobrir todos os não-beta YUI dois componentes. Esta visão ampla obrigou-me a tomar um olhar mais profundo componentes eu mal tinha usado nas suas formas mais básicas, bem como outros que eu não tinha usado em tudo. No entanto, em contraste com a primeira edição, um projeto que começou pouco depois de a biblioteca tinha sido tornada pública, eu tinha alguns anos de experiência acumulada com YUI - minha própria experiência combinada com a de muitos usuários que compartilham suas experiências e conselhos nos fóruns e no blog. Também fui poupado de muitos erros por uma excelente equipe de revisores, dois dos quais, Caridy Patiño e Iliyan Peichev, também são conhecidos contribuintes YUI.

Para manter o livro para um comprimento gerenciáveis, eu eliminou algumas imagens, exemplos de comprimento, e material de referência que pode ser encontrado no site da YUI . Enquanto a primeira edição tinha no máximo dois componentes por capítulo, o novo tem até quatro anos e tem um casal de novos capítulos. Mesmo assim, alguns componentes não fazer o corte.

A Evolução da YUI 2

Eu aprendi muito sobre a Biblioteca YUI enquanto escrevia este livro, e as alterações que fiz ao texto de Dan foram instrutivas sobre a evolução da biblioteca desde o seu lançamento em 2006.

O estilo de programação para código de exemplo mudou nestes anos. Em vez de criar um espaço de nomes (ou usando YAHOO.example , que está sempre disponível como um espaço reservado), que agora tendem a caber tudo dentro de uma função anônima criada quando o DOM se torna disponível. (Este estilo é mais perto do que vemos no YUI 3). Agora usamos namespaces quando absolutamente necessário para criar variáveis ​​globalmente acessível (incluindo objetos), como quando criamos um componente biblioteca personalizada. Sandboxing nos salva a digitação, já que podemos definir funcionalmente com escopo de aliases para os objetos que usamos com mais frequência a partir de YUI (Dom, Evento, Lang são atalhos comum) ou variáveis ​​de nossa própria. Essa abordagem também permite YUI Compressor fazer um trabalho muito melhor.

Ter uma vista panorâmica de toda a biblioteca permitiu-me perceber como se desenvolveu ao longo do tempo. A arquitetura dos componentes mudaram e é claro como tudo tem convergido para o que agora é YUI 3.

Os primeiros componentes, como TreeView, teve poucas dependências. Como certos padrões começou a ficar óbvio, alguma infra-estrutura componente básico começou a se desenvolver. A família tinha um Container Config objeto que permitiu a métodos getter e setter, e assim tem todos os componentes que herdam dele. Ele também usa o objeto Event Custom, que é uma das duas formas de trabalhar com eventos personalizados que temos disponíveis em YUI 2.

Com o lançamento do tabview veio o YUI Utility Elemento 2 , o que proporcionou melhor getters e setters (via AttributeProvider), bem como melhores eventos personalizados (via EventProvider). Dezessete outras YUI 2 componentes herdam Element. Olhando para a evolução da biblioteca, é fácil ver como as idéias por trás do elemento, como um invólucro elemento DOM, veio para informar Nó 3 do YUI. Papel elemento como base para outros componentes foi quebrado na Base de Dados de YUI 3 e Widget, embora os novos componentes são todos muito mais poderoso e completo, cada um em sua própria área. Por exemplo, o Nó de all e one métodos retornar instâncias do nó, enquanto elemento de getXxxx métodos retornam referências simples elemento DOM, não completamente abstrair o DOM.

Os dois modelos, configuração e CustomEvents por um lado e AttributeProvider EventProvider e por outro, não são totalmente incompatíveis. No menu e botões Dividir ambos os modelos coexistem, como Button herda Elemento e abriga um menu regulares que herda de Container.

Sem dúvida, YUI 3 beneficiou de toda essa experiência, mas YUI 2 também beneficiou YUI3. Coisas legais veio do YUI 3 a enriquecer YUI 2, como event-delegate e element-delegate e outros novos eventos podemos ouvir ( focusin e focusout , mouseenter e mouseleave ). Este também se tornou possível por causa de o caminho componentes nós carregamos , que mudou durante a vida útil do YUI 2 - sobretudo com a introdução do 2 YUI Carregador - e tornou-se formalizado como apoio intrínseco a do lado do cliente de carga em YUI 3.

Carregando afetados como os componentes tem projetado e como os arquivos de componente final são construídas. Em YUI 2, para minimizar o número de pedidos pendentes de servidor, os componentes tiveram que ter o máximo de que eles precisavam embalados em comum. Assim, alguns componentes tem objetos vagamente relacionadas neles apenas para tê-los à mão quando e se necessário, outros tem um monte de objetos com um conjunto de características embalado em um arquivo, pois o carregamento as partes separadas era muito caro. Então veio agregados, como yahoo-dom-events.js ou reset-fonts-grids.css uma vez que são quase sempre usados ​​juntos ou utilities.js que reúne todos os componentes usados ​​frequentemente na YAHOO.util ramo. Mas a verdadeira mudança veio com pedidos de combinação de cabo, o que nos permitiu retirar qualquer número de arquivos de script e css cada em apenas um pedido http. Que o torna menos necessário para otimizar a embalagem dos objetos na biblioteca para arquivos de componentes e aqueles em agregados com base em uma hipotética 'usuário comum'.

Em YUI 3, não precisa mais carregar o "container família" de uma vez. Nós podemos carregar o separados widget- xxxx arquivos em cima do básico widget de acordo com as características que precisamos. Essa abordagem é o padrão no YUI 3, mas ele veio como uma das etapas na evolução do YUI 2. Portanto, mais recente, YUI dois componentes como event-delegate e element-delegate são embalados separadamente de seus componentes de base e por isso é do evento mouseenter e mouseleave . Podemos ver ainda se divide em componentes da biblioteca em versões futuras, permitindo que você escolha, mais especificamente, o conjunto de recursos que você quer e deixar o código desnecessárias fora da página.

Esta é uma história de progresso, um processo que, necessariamente, fui embora alguns esforços falharam. Por que não TreeView herdar Elemento ou porque não tem Container e, assim, Menu, mudou para Elemento ou, pelo menos, para AttributeProvider e EventProvider? Tecnicamente, a resposta é "compatibilidade com versões anteriores, mas em termos mais gerais, é 'respeito'. Existem milhares de sites (e dezenas de milhares de desenvolvedores) usando a interface pública publicada do YUI dois componentes. Fazer essas mudanças iria quebrar muitos aplicativos ou cortá-los seria o caminho de atualização, se eles querem se beneficiar de uma correção de código ou de um novo recurso. Sendo tão respeitoso da base de código instalado é um recurso de biblioteca em si. Ser respeitoso para nós, que criam esse código, é uma característica das pessoas na equipe YUI, e eu sou muito grato é assim.

Encontrar conversas: bloglines | technorati

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

Limites do navegador móvel Cache, Revisited

No Limits Mobile Browser Cache: Android, iOS e webOS , eu compartilhei os resultados de minhas tentativas de determinar os limites cache do navegador no Android, IOS e dispositivos webOS. No final do artigo, eu escrevi:

Use estes resultados como um ponto de partida, mas verificar-los você mesmo antes de tomar decisões importantes baseados em suposições sobre as limitações de cache móvel. As mudanças navegador móvel do mundo em um ritmo relâmpago, por isso esta pesquisa terá uma vida útil muito curta.

Como se constata, que foi um bom conselho: no dia seguinte o artigo foi publicado, Steve Souders comentou que ele tinha executar testes usando uma metodologia diferente que era mais representativo de um fluxo de trabalho web no mundo real e tinha obtido resultados diferentes.

Nova Metodologia

Minha metodologia original envolvidos navegar diretamente para uma página gerada aleatoriamente de um certo tamanho, servido com um text/html tipo de conteúdo. Os resultados utilizando esta metodologia foram reprodutíveis confiável (exceto no webOS), mas como Steve apontou, os usuários não navegar diretamente para arquivos CSS e JavaScript. Minha suposição de que os limites para a navegação directa para um recurso de HTML foram os mesmos que os limites para externa CSS e JavaScript estava incorreta, por isso mesmo que os resultados dos meus testes eram válidas, elas não foram amplamente aplicável.

Ao longo de muitas sessões de mensagens instantâneas, vários e-mails, e um par de telefonemas, Steve e eu trabalhei para fora uma nova metodologia de testes. Eu implementei uma versão dele em cima da minha estrutura de testes de cache , em seguida, Steve implementou uma versão capaz de publicar resultados para Browserscope .

Nos testes de novo, nós carregar uma página HTML que se refere a um CSS gerado aleatoriamente ou componente JavaScript de um certo tamanho. Então navegar para uma segunda página HTML que carrega o mesmo componente e verifica se é ou não foi carregado a partir do cache. Para determinar se um componente foi carregado a partir do cache, que armazena um timestamp em um cookie em cada pedido, se o timestamp é atualizada a segunda vez que carregar o componente, sabemos que o pedido de bater o servidor, o que significa que o componente não foi carregado a partir do cache.

Resultados nova

Descobrimos que todos os navegadores móveis que testamos tinha limites de cache significativamente maior de recursos externos carregado por uma página que eles fizeram para uma página HTML em si. Esta é uma excelente notícia para os desenvolvedores de web móvel.

A tabela abaixo ilustra os nossos resultados:

Note-se que 4MB foi o maior tamanho que testamos, e todos os dispositivos IOS componentes 4MB de cache. O limite de cache real desses dispositivos pode ser maior que 4MB. Além disso, webOS da Palm Pre Além disso deu resultados consistentes nesta prova, enquanto ele teve alguns problemas no teste anterior.

É possível que os limites muito mais baixos do meu teste anterior mostrou para componentes HTML no IOS pode indicar o uso de um cache de memória RAM para esses componentes, enquanto os limites muito maior para CSS / JS componentes deste teste pode indicar o uso de um cache de disco, mas isso é apenas conjectura. Android, pelo menos, parece usar um cache de disco em ambos os casos, uma vez que seu cache sobrevive ciclos de energia.

Recomendações nova

Com base nestes novos resultados, juntamente com os resultados dos meus testes anteriores, eu ofereço a actualização seguinte conjunto de recomendações:

• Use far-futuro cabeçalhos de expiração de cache. Isso impedirá que o browser de ter que enviar um pedido GET condicional.
• Tente limitar páginas HTML para 25.6KB ou menos, se você quer que eles sejam armazenados em cache, já que os testes anteriores mostraram que esse limite imposto pelo iOS 3.2 no IPAD-foi o menor limite de recursos HTML dos dispositivos testados.
• Mantenha CSS e componentes JS sob 1MB. Claro, 1MB é enorme e seus componentes deve ser muito menor do que isso, mas não se incomode a divisão de um componente em pedidos separados para o bem da cacheability menos que seu tamanho se aproxima de 1 MB.
• Considerar o uso do cache do aplicativo HTML5 se é importante que seus componentes persistem no cache por um longo tempo, ou através de ciclos de poder.
• Fazer seus próprios testes. Sublinhei a importância deste no meu artigo anterior e eu vou forçá-lo novamente aqui. Use estes resultados como um ponto de partida, mas verificar-los você mesmo antes de tomar decisões importantes com base nelas.

Encontrar conversas: bloglines | technorati

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