Yahoo! Blog User Interface (YUIBlog)

YUI está contratando

Abril 29, 2011 at 12:58 pm por Jenny Donnelly | Em Desenvolvimento e Empregos Frontend Engenharia em Yahoo | 2 Comentários

Estamos à procura de um engenheiro de front-end de alto nível para se juntar à equipe YUI! Você deve ser um especialista em JavaScript e bem versado em vários front-end tecnologias. Você adora resolver problemas complexos em escala maciça, sabe o que é preciso para projetar APIs robusta e intuitiva, e abraçar as melhores práticas de desempenho, segurança, acessibilidade, usabilidade e. Você também tem excelentes habilidades de comunicação, possuem grande atenção aos detalhes, e são independentes e engenhoso.

Qualificações mínimas de trabalho:

• Especialista em nível de JavaScript, HTML, CSS e habilidades.
• Experiência comprovada construção de componentes reutilizáveis ​​JS que são de alto desempenho, modular e de fácil manutenção.
• Uma paixão para a construção e evangelizar um mundo de classe biblioteca front-end que atinge milhões de pessoas todos os dias.
• Familiaridade com projetos open-source software, especialmente YUI.
• Grau de Ciência da Computação ou experiência profissional equivalente.

Qualificações preferenciais de trabalho:

• Profundidade demonstrada de especialização em um ou mais front-end domínios, tais como móveis, desempenho, do lado do servidor JavaScript, ou internacionalização.

Se isso soa como você, por favor envie o seu currículo e carta de apresentação para yui-jobs (at) yahoo-inc (dot).

Sobre o Yahoo!

Pense sobre impacto de 1 em cada 2 pessoas on-line - em formas inovadoras e imaginativas que são exclusivamente do Yahoo!. Fazemos apenas que a cada dia, e você poderia também. Afinal, é grandes pensadores como você, que irá criar a próxima geração de experiências na Internet para consumidores e anunciantes de todo o mundo. Agora é a hora de mostrar ao mundo o que você tem. Coloque suas idéias para o trabalho por mais de meio bilhão de pessoas.

Yahoo! Inc. é uma empregadora de oportunidades iguais. Para mais informações ou para pesquisar todas as nossas aberturas visite http://careers.yahoo.com .

Encontrar conversas: bloglines | technorati

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

Anunciando YUI Compressor 2.4.6

26 de abril de 2011 às 10:09 por Stoyan Stefanov | Em Desenvolvimento e Desempenho | 10 Comentários

Temos o prazer de anunciar a disponibilidade imediata da versão 2.4.6 do YUI Compressor . Esta versão contém atualizações em sua maioria relacionados com a movimentação Compressor de CSS minimização e processamento em lote introduz de vários arquivos com um único comando.

Minification CSS

Os destaques incluem:

• Corrigido bugs diversos que quebram o compressor e / ou os arquivos resultantes minified.
• Adicionado documentação sobre o que exatamente o minifier faz e também hacks que CSS tolera.
• Há uma porta de JavaScript CSS min no caso, é mais adequado para o seu processo de construção. Aqui está também uma interface web de teste que usa a porta JavaScript, onde você pode experimentar com a minifier.
• Um número significativo de novos testes adicionado (mas você pode adicionar ainda mais ).
• A manipulação segura de alguns recursos CSS que estão cada vez mais a adopção, tais como consultas de mídia e CSS3 transformações.

O processamento em lote

Outra adição bem-vinda para Compressor é que ele agora pode processar lotes de arquivos. Isso pode reduzir significativamente o tempo de seu processo de construção leva, especialmente se você tiver um grande número de arquivos para apoucar.

Por exemplo, os seguintes comandos minify tudo .js e .css arquivos e gravar os arquivos minified com um "-min.css" sufixo.

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

Agradecimentos vão para Stephen Woods, ea equipe do Flickr para esta função!

Links

YUI Compressor 2.4.6 está disponível para o período imediato de download . Sinta-se livre para nos ajudar a apresentar um pedido bug ou recurso , a escrita de testes mais , a bifurcação do código ou se juntar à conversa .

Encontrar conversas: bloglines | technorati

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

Direcção-friendly Barra de Navegação

Abril 25, 2011 at 9:12 pm por Thierry Koblentz | Em CSS 101 e Desenvolvimento | 4 Comentários

Recentemente, deparei com um menu de navegação horizontal com links alinhadas à direita. Como você poderia esperar, foi um elemento da lista com float:right e os itens da lista com float:left . Mesmo que não haja nada de errado com esta abordagem, que me inspirou a aproveitar esta oportunidade para discutir direcionalidade para layout.

O custo dos elementos flutuantes

Floats não têm noção de direcionalidade, pois eles não funcionam como elementos inline ou colunas da tabela (para que o dir atributo é uma bala mágica). Com carros alegóricos, os autores devem implementar um mecanismo de "swap" valores sempre que as mudanças na interface ( ltr vs rtl ).

Então, ao invés de usar float , os autores podem favorecer inline-block . Aqui está um exemplo simples:

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

Observe que usar " \ 0 "(sem espaço) em vez de" \9 "tomaria conta de Opera, mas pode não ser como prova de futuro, como" \9 "(apenas IE).

Como esta página de demonstração mostra, no Chrome, Safari e Firefox, o inline-block técnica faz o layout escrita de modo dependente (a direção do fluxo corresponde ao valor da dir atributo, ou o valor inicial, se nenhuma direção é especificado). Por outro UA s, e por causa da falta do IE de apoio para o seletor de atributo (ie html[dir="rtl"] ), os autores precisam adicionar um gancho na marcação para atender à mudança de direção. Por exemplo, a compatibilidade de grau completo:

Para a técnica float:

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

Para a técnica inline-block:

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

text-align: start | end

Ao contrário de left e right , start e end são o modo de escrita as palavras-chave dependentes. Em Inglês, start mapas para left e end mapeia para right . Baseando-se no start e end ao invés de left e right permite que alguns navegadores para fazer a troca ( ltr / rtl ) automaticamente.

Diferenças entre os navegadores e técnicas

Em navegadores que não suportam o " start / end "(IE, Opera)

flutuar técnica: direção de troca não muda nada

inline-block técnica: troca de direção não muda o alinhamento do menu, mas os links são exibidos na seqüência correta

Em navegadores que fazem "apoio start / end "(Chrome, Safari, Firefox)

flutuar técnica: direção de troca não muda nada

inline-block técnica: troca de direção é o suficiente para trocar a direção do menu e os links

É isso aí! Da próxima vez que você tem que elementos de estilo horizontal, lembre-se de dar display:inline-block ou display:table uma tentativa.

Encontrar conversas: bloglines | technorati

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

YUI 3 "blocos de construção, módulos e Aplicações" Workshop Vindo para Portland, e grátis!

Abril 19, 2011 at 3:32 por Luke Smith | Em Desenvolvimento e Eventos YUI | 6 Comentários

YUI, juntamente com o Yahoo! Developer Network , está animado para patrocinar uma cortesia YUI 3 "blocos de construção, módulos e Aplicações" Workshop em domingo, 1 de maio, 2011 em Portland, Oregon. Esta é uma ótima maneira de kick-off seu tempo no JSConf , mas você não precisa de um bilhete JSConf para participar do workshop. Todos estão convidados para este evento grátis!

I será acompanhado pelo colega Yahoo! Gonzalo Cordero para um dia inteiro de treinamento prático, onde você vai aprender a construir classes stateful, plugins e widgets usando o YUI 3 componentes de infra-estrutura, empacotá-los em módulos reutilizáveis, e montá-los em uma aplicação simples. A classe de manhã vai se concentrar no que os blocos de construção (como Base e Widget) tem para oferecer e quando e como usá-los. A classe tarde vai entrar em configurações mais avançadas de classe, a criação do Loader para combinar seus módulos hospedados, e configurar os controladores de aplicativos para relacionar suas várias classes de módulo e as APIs através de eventos personalizados.

O espaço é limitado, portanto, reservar o seu lugar hoje em http://training.bocoup.com/PreJSConf-2011/

Encontrar conversas: bloglines | technorati

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

Modo de edição rápida para YUI 3 DataTable

19 de abril de 2011 às 3:20 pm por John Lindal | Em Desenvolvimento , YUI 3 Galeria | 1 Comentário

Mesmo que YUI 3 DataTable ainda não tem edição em linha de células individuais, é relativamente simples de implementar o modo de edição rápida. A edição rápida plugin para o DataTable na Galeria 3 YUI permite que todos os valores visíveis em um DataTable a ser editado simultaneamente.

( Clique na imagem para jogar com este exemplo .)

Visão global

Tal como acontece com o YUI versão 2 , a idéia central do modo de edição rápida é trocar todos os formatadores de celulares com os novos que povoam as células com elementos de formulário, por exemplo, campos de entrada ou dropdowns. Isto é feito quando start() é chamado, com base na configuração descrita abaixo. Depois que o usuário estiver concluída, você pode chamar getChanges() para obter os valores alterados e, em seguida, persistem eles. Para sair do modo de edição rápida, chamar cancel() . (É nomeado cancelar em vez de parar para lembrá-lo que ele descarta todas as alterações.)

Uma vez que o módulo de galeria de Quick Edit é um plugin para o DataTable, você precisa ligá-lo em sua tabela de dados para que você possa usá-lo:

 my_table.plug (Y.Plugin.DataTableQuickEdit);

Esta armazena o plugin no qe membro da tabela de dados, então você deve chamar funções do plugin como este:

 my_table.qe.start ();

Configuração

Quick Edit adiciona dois atributos nova configuração para todas as colunas: quickEdit e qeFormatter .

Se uma coluna quickEdit propriedade é definida, a coluna vai ser editado no modo de edição rápida. Para aceitar todos os padrões, você pode simplesmente definir quickEdit:true . Para obter mais controle, você pode passar um objeto com as seguintes propriedades:

formatter

O formatador de célula que irá processar um campo de formulário apropriado: <input type="text">, <textarea>, ou <select>. Por padrão, o formatador de célula Y.Plugin.DataTableQuickEdit.textFormatter é usado para todas as células para produzir elementos de entrada. Para obter uma textarea elemento, configurar uma coluna para usar Y.Plugin.DataTableQuickEdit.textareaFormatter vez.

validation

Configuração de validação para cada campo na coluna.

css

Classes CSS codificam regras de validação básicas:

yiv-required

Valor não deve estar vazio.

yiv-length:[x,y]

Corda deve ser, pelo menos x caracteres e na maioria dos y caracteres. Pelo menos um de X e Y deve ser especificado.

yiv-integer:[x,y]

O valor inteiro deve ser pelo menos x e, no máximo, y . x e y são ambos opcional.

yiv-decimal:[x,y]

O valor decimal deve ser pelo menos x e, no máximo, y . Expoentes não são permitidos. x e y são ambos opcional.

fn

Uma função que será chamado com o DataTable como o seu alcance e elemento da célula forma como o argumento. Retorna true se o valor é válido. Caso contrário, ligue para this.displayMessage(...) para exibir um erro e, em seguida, retornar false.

msg

Um mapa de tipos de mensagens que serão exibidas quando uma regra de validação básica ou regex falhar. Os tipos válidos são: required , min_length , max_length , integer , decimal , e regex . Não há padrão para o tipo regex , então você deve especificar uma mensagem se você configurar uma validação regex. As mensagens de erro padrão para os outros tipos são armazenadas em Y.FormManager.Strings (fornecido pela galeria formmgr-css-validação ) e pode ser substituído e / ou localizada.

regex

Expressão regular que o valor deve satisfazer para ser considerado válido.

Às vezes, uma coluna não-editável devem ser prestados de forma diferente durante o modo de edição rápida. O melhor exemplo é uma coluna que contém um link, uma vez que navegar para fora da página, enquanto no modo de edição rápida pode ser desastroso. Para remover o link durante Quick Edit, configurar qeFormatter para a coluna a ser Y.Plugin.DataTableQuickEdit.readonlyLinkFormatter . Para endereços de e-mail, use Y.Plugin.DataTableQuickEdit.readonlyEmailFormatter . Você também pode escrever personalizado, formatador de somente leitura. Basta seguir as regras normais para a construção de um formatador de célula DataTable.

Características Desaparecidas

Devido a um bug no 3.3.0 DataTable YUI , a td elemento passado para um formatador de coluna é na verdade a partir da coluna anterior. Isso tornou muito problemático para apoiar a cópia para baixo, onde um botão na primeira linha permite que você copiar o valor para baixo para todas as outras linhas.

O bug também necessária uma reformulação completa dos formatadores de celulares básicos Edição rápida para retornar texto em vez de manipular o DOM. É por isso que formatadores de celulares personalizados não são suportados oficialmente nesta versão inicial. Se você é aventureiro, você ainda pode construí-los, mas tenha em mente que você terá que reescrevê-los, incluindo a adição de suporte para copiar para baixo, uma vez que o bug no DataTable é fixo.

Sobre o autor: John Lindal ( @ jafl5272 no Twitter) é um dos engenheiros de chumbo construindo o alicerce sobre o qual Yahoo! APT é construído. Anteriormente, ele trabalhou no Yahoo! Publisher Network.

Encontrar conversas: bloglines | technorati

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

YUI: Horário de funcionamento qui abril 21

19 de abril de 2011 às 1:39 am por Luke Smith | Em Desenvolvimento e Horas Abertas | Comments Off

YUI remoto Loader Service

Por um tempo agora, Reid Burke vem trabalhando em um serviço Node.js base para acelerar o processo de cálculo e solicitando as dependências de módulo em YUI 3. Ele tem isso muito perto de abotoado, neste ponto, e quer compartilhar o que ele tem e chegar as suas ideias para o que tornaria ainda awesomer.

O problema

Por um tempo agora nós sabemos que, enquanto realmente conveniente para os desenvolvedores, o Y.use( modules ,...) método introduz um atraso desnecessário na rotação o tempo do seu código de implementação. Acontece que é muito trabalho calcular árvores de dependência, e os metadados só pode ser onerosa para o consumo de memória global da sua página. O método tradicional de incluir o arquivo semente YUI ( yui-min.js ), então a inicialização com YUI().use(...) primeiro conta a YUI para carregar o carregador de módulo, que está sobrecarregado com os metadados de dependência para toda a biblioteca em sua fonte, então tem carregador de calcular a lista completa de módulos necessários com base na sua use(...) declaração na máquina do cliente.

A solução

O serviço de carregador remoto move este cálculo para o servidor, fazendo com que seu código inicializar mais rápido e reduzindo perfil do seu site memória do cliente porque os metadados e carregador não são mais necessários na máquina do cliente. Serve também como o manipulador de combinação, voltar todo o código diretamente em vez de encaminhamento através do serviço de combinação yahooapis (menos tráfego de rede), e é capaz de ser implantado em um servidor Node.js no seu domínio.

O plano é ter demonstração Reid que está funcionando hoje, incluindo algumas estatísticas bastante impressionantes da sua utilização em yuilibrary.com , em seguida, abra a chamada para comentários e pedidos. Venha conferir o que o futuro da YUI Loader está parecendo!

Time & Detalhes

Nós vamos estar on-line 10:00-11:00 PDT quinta-feira. 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)

* - Se o Skype não é uma opção, enviar e-mail me ou me pegar (ls_n) no canal de IRC # yui na freenode para um número local.

Encontrar conversas: bloglines | technorati

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

Anunciando YUI 2.9.0

Abril 13, 2011 at 05:28 por Jenny Donnelly | Em Desenvolvimento | 11 Comentários

A equipe YUI está entusiasmada em anunciar o lançamento de YUI versão 2.9.0. YUI 2.9.0 é a versão de correção de bug na última linha de código YUI 2 marcando a sua transição para o modo de manutenção. Seguindo em frente, esperar para ver lançamentos consistindo de apenas correções de bugs críticos ou correções para problemas com o navegador de compatibilidade resultantes de atualizações para os navegadores do GBS . Estamos realmente animado para melhor concentrar a nossa atenção sobre a libertação 3.4.0 próximo de YUI.

Para se ter uma idéia das alterações incluídas no YUI 2.9.0, você pode rever o Digest ReadMe que resume todos os acréscimos feitos por desenvolvedores de componentes para os seus respectivos arquivos ReadMe para esta versão. Você também pode ver a lista de tickets corrigidos em YUI 2.9.0 para um resumo das correções de bugs e pedidos de melhorias concluídas nesta versão.

Gostaríamos de lembrar a todos que quando começamos o processo de depreciativo YUI 2.x, todas as versões lançadas continuará a ser hospedado no CDN do Yahoo e da base de código continuará a ser forkable em GitHub.com .

Encontrar conversas: bloglines | technorati

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