Yahoo! Blog User Interface (YUIBlog)

YUI 2.9.0 Release Candidate já está disponível

30 de março de 2011 às 11:02 am por Jenny Donnelly | Em Desenvolvimento | 4 Comentários

O YUI release candidate 2.9.0 já está disponível para revisão pela comunidade. A equipe irá tomar nos próximos dias para fazer uma rodada final de testes, por isso gostaríamos de encorajar nossa comunidade de desenvolvedores para obter qualquer feeback para nós até o final da semana.

O release candidate, YUI 2.9.0 PR4, está disponível tanto através da CDN , bem como um pacote para download para testes. Por favor, fornecer feedback por sexta-feira, 1 abril em quaisquer bugs e regressões que você pode encontrar.

Encontrar conversas: bloglines | technorati

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

Uso carregador em Quorus

24 de março de 2011 às 9:49 pm por Peter Abrahamsen | Em Desenvolvimento e Implementações YUI | 2 Comentários

Hoje, eu gostaria de falar sobre YUI carregador e como estamos em Quorus, Inc. , usá-lo para fornecer sites de terceiros com novos recursos sob demanda.

O código que escrevemos características poderes nas páginas de outras pessoas, o que significa que estamos na posição de ter não só nenhum controle sobre o ambiente do navegador, mas pesadas restrições na forma como usamos o próprio documento. Nossos clientes colocar um script de inicialização Quorus em suas páginas, tudo o mais necessário para a nossa funcionalidade é carregado de forma dinâmica e on demand. Nós não medimos heróicos para se certificar de que os nossos elementos, estilos e scripts de não alterar o comportamento de qualquer coisa que nós não somos responsáveis.

Começamos nossa base de código atual há dois anos, quando YUI 3 foi apenas a tomar forma. Foi uma decisão arriscada no momento de se comprometer com uma base de código que não iria bater beta por vários meses. Em retrospecto, eu não posso imaginar como teríamos feito o que temos sem ele. Eu não tenho visto qualquer outra estrutura que tem componentes que se aproximam do poder de Loader, atributo , e CustomEvent .

O script bootstrap Quorus que prestamos aos nossos clientes não faz quase nada. Seu trabalho é apenas para carregar o núcleo da nossa plataforma, sem bloquear o resto do carregamento da página, e para a fila de qualquer API chama até que tenhamos feito. Esse arquivo de script principal, chamado stage2, inlines yui , loader , e oop , bem como inteligência suficiente para carregar bibliotecas adicionais para responder às chamadas de API, cliques do usuário, e outras condições no ambiente operacional. A maioria dos recursos outros são servidos por um servidor de combinação personalizada que serve personalizado Quorus e módulos de ações YUI.

Bootstrap filas de até API chamadas feitas no código do local de acolhimento, entre quando ele carrega e quando estamos prontos para ir em uma matriz em nosso objeto global, QUORUS:

 QUORUS._callbacks = []; QUORUS.use = function () { // turn the arguments object into a regular array, // so that it can be stored safely var args = Array.prototype.slice.call(arguments, 0); QUORUS._callbacks.push(args); }; 

Uma vez que estamos prontos para processar chamadas de API, stage2 executa-los um a um em timeouts. Isso garante que produzem regularmente controle volta para o navegador, o que torna a experiência do usuário mais ágil. O comportamento é muito parecido com Y.AsyncQueue, mas mais simples e não requer YUI a ser carregado:

 // Put the real 'use' function in place for any subsequent calls: QUORUS.use = function (feature, callback) { YUI.use('module-that-provides-the-feature', function (Y) { // find the API for the requested feature, and pass it to the callback callback(Y.APIs[feature]); // process another pending API call, if any: setTimeout(processAPICall, 0); }); }; // Play catch-up, running each callback in sequence: function processAPICall () { var callback = QUORUS._callbacks.shift(); if (callback) { QUORUS.use.apply(QUORUS, callback); } } // Start processing the queue: processAPICall(); 

A bootstrap do arquivo é, por este ponto, principalmente imutável: é algo que a mão para um cliente, que pode exigir um mês ou mais para implantar qualquer nova versão que lhes deu-um tempo muito longo para uma empresa startup ágil. O stage2 arquivo, entretanto, é pequena, as cargas de nossos próprios servidores, e tem uma vida útil curta de cache. Isto assegura que nenhuma utilizador final terá uma versão de idade por mais de alguns minutos. Quase todos os outros recursos de que precisamos estão em bibliotecas permanentemente cacheable JavaScript e CSS.

Quando nós liberamos uma nova versão do nosso código, stage2 direciona automaticamente navegadores para iniciar o download de um novo local, garantindo que eles usam apenas o mais recente código. Esta configuração permite implementar mudanças rapidamente, sem servir-se ativos com mais freqüência do que o necessário. Isso não só manter os nossos custos de largura de banda baixa, mas oferece uma melhor experiência de usuário: os recursos armazenados em cache carregar muito rapidamente, enquanto a página é carregada.

Se nós estávamos começando a nossa base de código hoje, com o benefício da Galeria YUI , há uma série de componentes que podem usar para tornar nossas vidas mais fáceis. Um deles é Eric Ferraiuolo do Component Manager Base de Dados , que auxilia com a fiação dos componentes (tipicamente Widgets) sob demanda. Outro pode ser Armazenamento Lite , para nos ajudar a manter o estado do aplicativo em cargas página.

Muito obrigado à equipe do YUI para sua grande obra, e para a comunidade por suas contribuições. Se você gostaria de ler sobre nossas abordagens para sandboxing ou de coordenar os componentes de forma assíncrona carregados, por favor, deixe-me saber nos comentários!

Sobre o autor: Peter Abrahamsen escreve Ruby e JavaScript, gerencia infraestrutura de servidores, e estudos de design centrado no usuário, em Seattle, Washington, EUA. Ele pode ser encontrado no IRC como Rainhead.

Encontrar conversas: bloglines | technorati

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

YUI: Horário de funcionamento Seg 23 de março

21 março, 2011 às 10:15 am por Luke Smith | Em Desenvolvimento e Horas Abertas | 4 Comentários

YUI olhar Cookbook 3 primeiros

Ele não foi bem divulgado, mas temos um YUI 3 Cookbook nas obras e Evan Goer é o homem responsável. Evan foi um escritor técnico para quase 15 anos, o que significa que nós confio que ele faça um trabalho melhor escrevendo do que teríamos (nós vamos manter a codificação). Portanto, esta semana, vamos apresentá-lo a Evan, e lhe dar uma chance para ver e dar feedback sobre alguns dos conteúdos inicial do livro e da estrutura.

Também nesta semana, Steven Roussey estará na chamada, demos Iluminações plugin para FireBug que lhe permite ver os objetos atrás YUI 3 a estrutura DOM e muito mais.

Time & Detalhes

Nós vamos estar on-line 10:00-11:00 PDT quarta-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!

Abertura do Trabalho no Yahoo! Team Foundation Mídia

Mar 17, 2011 às 9:35 am por Ricardo Dotta | Em Desenvolvimento , Emprego Frontend Engenharia em Yahoo | 1 comentário

Estamos à procura de um Engenheiro de Software experiente para se juntar ao Yahoo! Media Foundation equipe Front-End. A equipe de Front-End é responsável pelo desenvolvimento global, componentes de software e plataformas compartilhadas para os sites do Yahoo! Web Mídia - Yahoo! Notícias, Yahoo! Finance, Yahoo! Sports, Yahoo! Música, Yahoo! Movies, TV Yahoo!, Yahoo! Vídeo, OMG! e outros. Yahoo! Media locais estão entre os principais destinos na Web, e você vai jogar um papel chave no desenvolvimento de produtos originais e emocionantes e serviços que toque milhões de pessoas todos os dias.

Requisitos

• Capaz de trabalhar em um ambiente dinâmico
• Aprendo rápido - pode chegar rapidamente até a velocidade com diferentes tecnologias
• Jogador da equipa - pode colaborar com seus pares e guia
• Deve ter um forte senso de compromisso e responsabilidade
• Deve ter fortes habilidades de comunicação verbal e escrita
• Deve ter um forte conhecimento e interesse em ferramentas e tecnologias emergentes na indústria

Habilidades necessárias / experiência

• 5 + anos de experiência na indústria
• Deve ter sólidos conhecimentos de programação orientada a objeto em PHP (preferencial), Java ou C + + ou similar
• Deve ter experiência com frameworks MVC como Zend, CakePHP, ou Symphony (ou outro) e client-side AJAX
• Deve ter forte conhecimento de JavaScript, JS OOP, CSS e DHTML
• Proficiência em JSON, XML, XSLT, Unix, administração e shell script
• Expressões regulares, Unix experiência de desenvolvimento e experiência de gestão Subversion altamente desejado
• Tecnologias de apresentação de conhecimento e experiência com HTML5, CSS3, e emergentes altamente desejado
• Experiência com testes de unidade e / ou automação de teste um plus
• Banco de dados, SQL e MySQL experiência (LAMP) são vantagens
• Experiência no desenvolvimento e implantação altamente eficientes, escaláveis ​​aplicações server-side
• Depuração excelente e habilidades de teste
• Excelente análise e habilidades para resolver problemas
• Grau de Ciência da Computação ou experiência de trabalho equivalente necessário

Sobre o Yahoo!

Pense sobre impacto de 1 em cada 2 pessoas on-line de forma inovadora e criativa 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 e para aplicar, por favor visite http://careers.yahoo.com/jdescription.php?frm=search_results&oid=35901&qs=jcat=8__submit=1 , e buscar todas as nossas aberturas visite http://careers.yahoo . com .

Encontrar conversas: bloglines | technorati

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

YUI: Qui Abertos Horas dia 17 de março

Março 14, 2011 às 11:56 pm por Luke Smith | Em Desenvolvimento , Horas Abertas | Comments Off

Ajax

Esta semana, eu quero roubar a hora de falar sobre Y.io (e amigos) e fazer um pouco de reflexão sobre o que você acha que tudo faria ajax YUI 3 de interface o melhor que pode ser. Eu tenho alguns pensamentos que eu gostaria de compartilhar, e podemos verificar através de alguns bugs existentes e solicitações de recursos .

Realmente, embora, eu quero ouvir de você que tipo de padrões que tendem a aplicar no mundo real, e que tipo de açúcar API poderíamos acrescentar para tornar sua vida mais fácil. Porque nós vamos fazê-lo. Eu juro.

Aqui está uma amostra da galeria de hoje:

• Recurso REST
• IO resposta Multi-
• AlloyUI IO e Pedido IO
• Fluxo Comet
• JSON-RPC
• IO Poller

Talvez algumas das respostas estão lá? O que você quer cozido, eo que você quer que ele se parece?

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!

YUI Preview Release 2.9.0 já está disponível

Março 14, 2011 às 8:10 pm por Jenny Donnelly | Em Desenvolvimento | 4 Comentários

A equipe YUI tem sido duro no trabalho fechando o último de nossos 2.9.0 erros , e hoje temos o prazer de anunciar a disponibilidade de uma versão pré-lançamento 2.9.0 para testes pela comunidade. Incluem-se nesta versão são inúmeras correções de bugs e melhorias específicas que ajudarão a trazer o fechamento para a 2 YUI codeline , bem como alterações de código específicas e atualizações de documentação que o tornam mais difícil para os implementadores sem querer ignorar as práticas recomendadas de segurança .

YUI 2.9.0 representa a nossa última versão de correção de erros na linha de código YUI 2 antes de colocá-lo em modo de manutenção, quando apenas correções de bugs críticos e correções de compatibilidade do navegador alvo serão considerados. Estamos realmente animado para ser capaz de atingir este marco importante, que vai nos ajudar a redobrar nossos esforços para YUI 3.

YUI 2.9.0 PR2 está disponível tanto através da CDN , bem como um pacote transferível para o teste. Esperamos que você possa ter um momento para testar o lançamento de hoje de visualização e fornecer feedback por sexta-feira, 18 de marco em todos os bugs e regressões que você pode encontrar.

Encontrar conversas: bloglines | technorati

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

Truques CSS fronteira com caixas Colapsados

Março 8, 2011 em 3:23 pm por Thierry Koblentz | Em CSS 101 e Projeto e Desenvolvimento | 8 Comentários

Esses truques ajudarão você a alcançar projetos sem recorrer ao uso de imagens, CSS3 gradiente ou marcação estranha. Por desmoronar caixas com zero line-height e height valores, podemos exibir conteúdo fora da caixa de conteúdo, para além das fronteiras.

Bi-cor de fundo

Este exemplo não inclui IE 6/7 soluções alternativas (verificar o código fonte desta página de demonstração para correções do IE).

 .parent { display:inline-block; text-align: center; border: 1px solid #cecece; } .child { display:inline-block; line-height: 0; height: 0; border-top: 1em solid #ffc; border-bottom: 1em solid #fdcf46; padding:0 .6em; vertical-align:bottom; } <ul id="menuBar-A"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

Pontos e tubulações entre os itens da lista

Este exemplo mostra corretamente em navegadores IE após algumas correções simples.

 ul.one, ul.two { margin-left:0; display:inline-block; *display:inline; zoom:1; height:12px; line-height:12px; padding:0; } li { float:left; display:inline; height:2px; line-height:2px; position:relative; top:.3em; } ul.two {border-left:1px solid #333;} ul.one li {border-left:2px solid #333;} ul.two li {border-right:2px solid #333;} ul.one li.first-child, ul.two li.last-child { border:0; } a { color:#000; padding:.4em .9em; *position:relative; } <div id="menuBar-B"> <ul class="us"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> </ul> <ul class="ourOffer"> <li class="services"><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> </div> 

Triângulos esquerda e apontando para a direita

Este exemplo não inclui IE 6/7 soluções alternativas (verificar o código fonte desta página de demonstração para correções do IE).

 #box { line-height: 0; height: 0; border: .4em solid transparent; border-left-color: #333; border-right-color: #333; padding: 0 .3em; display: inline-block; } <ul id="menuBar-C"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

IE 6 e transparência fronteira

IE 6 não suporta a palavra-chave " transparent "para a cor da borda. Quando você usa esse valor, o IE 6 desenha uma borda preta.

A correcção para este é a utilização do filtro croma que exibe uma cor específica do conteúdo do objecto como transparente. Por exemplo, para criar uma seta para a direita apontando você poderia usar esta regra:

 #Box { height: 0; width: 0; border: 10px solid transparent; font-size: 0; _border-color: pink; _filter: chroma(color="pink"); border-left-color: #333; } 

A declaração font-size é outra solução para o IE 6. É para garantir que este navegador não aumentar a altura da caixa.

Parem as prensas eu aprendi um truque novo (obrigado Chungho Fang):

A magia [para criar transparência na fronteira IE] é definir 'border-style', quer tracejada ou pontilhada

---

É isso aí! Este é apenas mais uma maneira de usar as fronteiras para alcançar-imagem menos design.

Leitura complementar

• Um Estudo de polígonos regulares
• slantastic
• Slants

Encontrar conversas: bloglines | technorati

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