Pra quem não sabe, o Last.fm é uma rede social onde ela cria um perfil musical do usuário (músicas, artistas, álbuns), que é compartilhado com os demais integrates da comunidade. Fundado em 2002 no Reino Unido, foi comprado pela empresa estadunidense CBS Interactive por 140 milhões de libras. Conta com mais de 20 milhões de usuários ativos distribuídos em 230 países.

Com isso resolvi criar mais um teste com jQuery e Handlebars.js, e criei uma espécie de Widget (pode ser usado como um Widget se quiser) onde mostro as últimas músicas que o usuário selecionado andou ouvindo no Last.fm.

Todas as informações referentes a customização e utilização estão descritas no respositório que criei no Github.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Conhecimento é aquele tipo de coisa que não deve ficar guardado. Se você compartilha conhecimento, todo mundo acaba crescendo junto. Logicamente não é um post de um blog que vou passar tudo o que eu sei, mas quem me acompanha no Twitter sabe que diariamente posto uma enchorrada de links sobre desenvolvimento web.

A maioria dos links que posto, são os que eu consigo, ou através de pesquisa, meu feed, ou através das Newsletters que assino. E como conhecimento nunca é demais, vou deixar abaixo algumas newsletters que julgo interessante quem é desenvolvedor acompanhar:

• StatusCode – The weekly digest for developers
• JavaScript Weekly – This week’s JavaScript news
• HTML5 Weekly – A free, once–weekly round-up of HTML5 and browser technology news and links.
• Web Design Weekly
• CSS Weekly
• Sidebar – The best design links, every day.
• Stack Exchange Newsletters
• Code Project
• Smashing Magazine Newsletter
• Responsive Design Weekly
• BrazilJS Weekly

Conhece alguma outra Newsletter interessante? Deixe o link da mesma nos comentários.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Continuando os meus testes com Handlebars, resolvi dessa vez criar um script para mostrar de uma forma simples e eficaz os últimos shots de um usuário do Dribbble.

Mais uma vez utilizei o sistema de templates no client-side Handlebars, se você ainda não o conhece, é interessante dar uma olhada.

Veja aqui um exemplo do plugin em ação, caso fique interessado em fazer o download do código fonte, o mesmo está disponível no Github.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Muita gente acha que o Zepto.js é um framework javascript voltado só para mobile. Muito pelo contrário, no seu início, sim, ele era voltado só para browsers webkit, mas após atualizações ele se tornou uma ótima alternativa ao jQuery, já que possui uma API compatível e aproximadamente 8kb.

O grande problema de adoção de Zepto.js no desktop é de que ele só funciona com browsers modernos, ou seja, esqueça o Internet Explorer. Abaixo você vê a listagem de browsers compatíveis:

• Safari 5+ (desktop)
• Chrome 5+ (desktop)
• Mozilla Firefox 4+
• iOS 4+ Safari
• Android 2.2+ Browser
• Outros browsers baseados em webkit
• webOS 1.4.5+ Browser
• BlackBerry Tablet OS 1.0.7+ Browser
• Amazon Silk 1.0+
• Opera 10+

Mas se você precisar dar suporte ao Internet Explorer, você pode fazer da seguinte forma, colocando como fallback o jQuery:

<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>

Originalmente nem todos os plugins de jQuery podem funcionar corretamente no Zepto, mesmo com a API compatível, algumas alterações devem ser feitas, portanto, vou deixar aqui uma listagem de plugins que encontrei que foram especificamente desenvolvidos para serem usados com o Zepto.js.

Zepto Carousel

Simples plugin de Carousel com suporte a swipe e css transtitions. Download.

Zepto Carousel Plugin

Carousel horizontal com loop infinito. Download.

Zepto-carousel.js

Zepto carousel para imagens. Download.

Bare Slideshow

Plugin básico para slideshow. Download.

SwipeSlide

Plugin de slides com navegação do tipo swipe. Download.

Flickable.js

Plugin para habilitar touch gestures em qualquer elemento HTML. Download.

Zepto Page Transitions

HTML5 Page Transitions similar ao jQuery Mobile. Download.

Zepto Mobile

Mobile framework baseado em Zepto e Backbone. Download.

Zepto Range

Input Range com Zepto. Download.

ZeptoSlider

Zepto Range plugin. Download.

jHERE

API para se trabalhar com mapas. Download.

Mobiscroll

Date & Time Scroller plugin. Download.

zDatesPicker

iOS calendar para aplicações web. Download.

Zepto Cookie Plugin

Read, set, e delete cookies com Zepto. Download.

Zepto Toast-Message

Plugin para mostrar mensagens ao usuário. Download.

Zepto Data Binding

Plugin para Data Binding. Download.

Zepto CouchDB

Plugin para acessar CouchDB com Zepto. Download.

Zepto Reorient

Plugin Zepto para detecção de mobile orientation. Download.

Ekwal

Plugin para equalizar largura ou altura com Zepto. Download.

Zepto ghostclick

Plugin para evitar ghostclicks em interfaces mobile. Download.

Zepto onPress

Fast buttons para web apps. Download.

Happy.js

Plugin para validação de formulários com Zepto. Download.

ZeptoScroll

Zepto window scroll plugin. Download.

CanJS Zepto Template

Plugin de Templates para Zepto. Download.

Zepto Template

Zepto Simple Template plugin. Download.

Zepto Accordion

Zepto Accordion Plugin. Download.

Zepto timeago

Zepto Plugin para update timestamps. Download.

litebox.js

Lightbox plugin para Zepto. Download.

CzBox2

Lightbox plugin para Zepto ou jQuery. Download.

bootstrap-datepicker.js

Datepicker para Twitter Bootstrap com Zepto ou jQuery. Download.

Zepto Autocomplete

Zepto Autocomplete plugin. Download.

ZeptoTextarea

Plugin para autogrowing de textareas. Download.

ZeptoShake

Plugin para device shake detection. Download.

Touch Input Increment

Increment/Decrement Zepto Plugin. Download.

Zepto Tooltip

Responsive e Mobile-Friendly Tooltip. Download.

Fluid Carousel

Responsive Carousel com Zepto. Download.

touchslider

iOS carousel/slider para jquery ou zepto. Download.

Zepto appear

Dispare eventos assim que o elemento estiver visível no viewport. Download.

Zepto Detect

Detect browser e devices features. Download.

Zepto Antiscroll

OSX Lion scrollbars cross-browser. Download.

Zepto pjax

pushState + ajax para zepto.js. Download.

Geolocator

Geolocation API plugin para jQuery ou Zepto. Download.

Drag and Drop

Drag and Drop Zepto plugin. Download.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Revistas para desenvolvedores hoje existem ao montes, mas com material de qualidade, quase nenhuma. Recentemente conheci a Applines, uma revista digital para desenvolvedores web, essa sim, com conteúdo de qualidade.

Confesso que fiquei impressionado com a qualidade da revista, que possui versão para Ipad e tablets com Android, e ainda por cima tudo de graça. Se você não tem uma tablet, pode ficar despreocupado, a cada versão lançada (a revista é mensal) eles lançam um PDF com todo o conteúdo. A única desvantagem é que o PDF não é interativo.

No vídeo abaixo você tem uma visão geral da revista:

O mais legal de tudo isso é saber que é tudo de graça. Corre lá e faz o download.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Pernambuco no próximo dia 1 de dezembro de 2012 será sede de uma dos maiores eventos de Front End do Brasil, senão do mundo, onde ao lado da Praia de Boa Viagem acontece o Feecbr.

O FEEC BRAZIL é uma convenção para profissionais de internet de diversas áreas, idealizada por um grupo experiente, reconhecido pela qualidade e grau de inovação de projetos educacionais e eventos realizados no Nordeste do Brasil.

Cientes de que a região nordeste do Brasil passa por um momento de consolidação econômica e apresenta diversas oportunidades na área, nosso grupo decidiu promover uma convenção para profissionais de internet, buscando criar um ambiente capaz de desenvolver pessoas, integrar empresas e instituições de ensino, bem como difundir as melhores técnicas de desenvolvimento utilizadas ao redor do mundo.

O FEEC BRAZIL tem como proposta a realização de um evento capaz de atingir altos níveis de satisfação pelos participantes e parceiros patrocinadores, reforçando a capacidade de inovação com qualidade já demonstrada em outras iniciativas do grupo.

O público-alvo engloba desenvolvedores web, front-ends, back-ends, designers, analistas de mídia social, gestores e demais profissionais que estejam envolvidos com desenvolvimento de projetos e aplicações para internet e mobile, atualmente desafiados para encontrar soluções que aumentem a produtividade de seus times, agradem seus clientes e agreguem novas experiências para os usuários finais, tudo com qualidade, agilidade e baixo custo.

Abaixo você vê a listagem dos palestrantes, nacionais e internacionais:

Nos veremos lá.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Esse post tem o intuito de mostrar como fazer de uma forma simples blocos de texto atuarem como uma roleta russa, ou seja, ficarem em ordem aleatória.

Para esse exemplo, criei um HTML com a seguinte estrutura:

<div id="roulette">
    <ul>
        <li>Texto aqui</li>
        <li>Texto aqui</li>
        <li>Texto aqui</li>
        <li>Texto aqui</li>
        <li>Texto aqui</li>
    </ul>
</div>

Você deve se atentar que a div com o id “roulette” deve possuir uma altura definida e também overflow:hidden, o resto fica a cargo do JavaScript, e aqui usei jQuery:

var roulette = $('#roulette'),
    nItems = roulette.find('li').length,
    lastPos = 0;
	
rotate = function () {
    var triggerID = Math.floor(Math.random() * nItems),
        rouletteHeight = $(roulette).find('li').outerHeight(true),
        roulettePosition = triggerID * rouletteHeight;
    if (roulettePosition != lastPos) {
        roulette.find('ul').stop().animate({
            top: -roulettePosition
        }, 500);
        lastPos = roulettePosition
    } else {
        rotate()
    }
};

setInterval(function(){
    rotate();
}, 3000);

Para melhor compreensão, vejam o exemplo em funcionamento. Você também pode efetuar o download do código aqui.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Se você estava procurando uma forma elegante de mostrar seus últimos vídeos do Youtube em seu site, vou deixar aqui uma solução simples. Utilizei jQuery e criei uma espécie de ‘Playlist’ com os últimos vídeos do usuário do Youtube que desejar. A função responsável que criei para isso espera 3 parâmetros como pode ver abaixo:

youtubeGallery('#gallery','user', 20)

Onde:

• #gallery: Elemento no HTML onde a galeria será carregada.
• user: Nome do usuário do Youtube, altere para qual deseja ver os vídeos.
• 20: Número de vídeos a serem carregados. Altere para quantos julgar necessário.

Agora vejam aqui um exemplo. Funciona em qualquer browser decente. Caso tenha interesse em fazer o download do código, fique a vontade.

Update 07/02/2013

Uma versão para o Vimeo está disponível aqui. Fique a contade e faça o download do código fonte nesse link.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Em mais uma parceria com a Editora Bookman, irei sortear aqui mais um livro, dessa vez o livro Smashing WordPress, e como aqui não tem frescura, basta deixar um comentário com um e-mail válido que você já está concorrendo.

A promoção é válida até o dia 22 de Julho de 2012, e o sorteio será no dia 23 de Julho de 2012, através do random.org. Irei entrar em contato com o gahador por e-mail e caso não receba nenhuma resposta dentro de 72 horas, um novo sorteio será efetuado.

Caso você não seja o feliz ganhador do livro, você pode comprá-lo com 20% de desconto utilizando o seguinte código no carrinho de compras: wordpress, mas atenção que esse código só é válido até o dia 31/07/2012.

Update: O ganhador do livro foi o Matheus Ninaut.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

O Maujor, no dia 13 de dezembro, irá lançar seu mais novo livro, dessa vez sobre CSS3. Quer conhecer mais sobre o livro, leia a resenha abaixo:

CSS3 ultrapassou o status de proposta de uma tecnologia que prometia revolucionar a forma como estilizamos documentos para a web e deve obrigatoriamente fazer parte do dia a dia dos designers e desenvolvedores web.

Muitas das funcionalidades das CSS3 estão desenvolvidas o bastante para ser empregadas em fase de produção, quer com suporte nativo, quer com uso de prefixos proprietários. Outras tantas estão sendo implementadas em navegadores modernos, possibilitando o seu estudo e o desenvolvimento de suítes para estudos. Saber o que se pode e o que não se pode, o que se deve e o que não se deve usar das CSS3 é um conhecimento indispensável.

Este livro tem os seguintes objetivos:

• - Fornecer uma visão detalhada das CSS, possibilitando aos iniciantes conhecer os mecanismos da aplicação de estilos, sua sintaxe, suas propriedades básicas e os esquemas de posicionamento CSS, bem como estudar e exemplificar valores e unidades CSS.
• - Apresentar e exemplificar os novos seletores CSS3.
• - Demonstrar as propriedades avançadas para aplicação de fundos com uso das funcionalidades para background.
• - Estudar as funcionalidades para aplicação de bordas, sombras, cores e opacidade.
• - Apresentar e demonstrar os novos contextos para construção de layout com emprego das funcionalidades previstas nos Módulos Multicolunas, Template Layout e Boxes Flexíveis.
• - Estudar o modo de servir folhas de estilos para diferentes tipos de mídia com uso das funcionalidades do Módulo Media Queries.
• - Aplicar gradientes, transformações 2D e 3D, transições e animações com uso de CSS3.

Maujor aborda as novas funcionalidades das CSS3 de forma clara, em linguagem didática, mostrando vários exemplos práticos no site do livro (http://livrocss3.com.br).

E como os leitores aqui não poderiam ficar de fora, vou sortear um exemplo no blog. E para participar é fácil, não precisar tweetar esse post para 200 pessoas ou algo do tipo, basta deixar um comentário aqui com um e-mail válido, para que eu possa entrar em contato depois, caso você seja o ganhador. O formulário de comentários ficará aberto por 1 semana, ou seja, até o dia 13 de dezembro, quando será a data de lançamento do livro e também o dia do sorteio.

A ferramenta utilizada para o sorteio será o Random.org. Boa sorte a todos os participantes.

Update: O ganhador do livro foi o Cleyton, meus parabéns.

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?