Duas das postagens mais populares deste blog são Tags META do Facebook Open Graph e Como criar um cartão do Twitter. Não estou surpreso porque nós, como criadores de conteúdo, queremos ter algum controle visual sobre como nosso site é representado e compartilhado em sites de terceiros, especialmente sites de mídia social. Recentemente, publiquei um link no Tech.pro e eles obtêm instantaneamente informações de gráficos abertos sobre a página, preenchendo previamente informações conhecidas, assim como o Facebook e o Twitter, e isso me fez pensar sobre o outro lado dos dados de gráficos abertos: a extração de dados de um site. Não é preciso ir além do open-graph-scraper Módulo JavaScript!
Após instalar o módulo do NPM ou GitHub, é fácil obter informações do Open Graph a partir de um determinado URL:
var ogs = require('open-graph-scraper'); ogs( { url: 'https://davidwalsh.name' }, // Settings object first function(er, res) { console.log(er, res); } // Callback ); /* Result: { data: { success: 'true', ogImage: 'https://davidwalsh.name/wp-content/themes/punky/images/logo.png', ogTitle: 'David Walsh - JavaScript, HTML5 Consultant', ogUrl: 'https://davidwalsh.name/', ogSiteName: 'David Walsh Blog', ogDescription: 'David Walsh Blog features tutorials about MooTools, jQuery, Dojo, JavaScript, PHP, CSS, HTML5, MySQL, and more!' }, success: true } */
API simples e resultado simples – adorável. É claro que toda linguagem de programação terá uma biblioteca equivalente, mas todos sabemos que o JavaScript é o rei! Bom compartilhamento a todos!
Animações JS responsivas e infinitamente escalonáveis
No final de 2012, não era fácil encontrar projetos de código aberto usando
requestAnimationFrame()
– Esse é o gancho que permite que o código Javascript seja sincronizado com o loop de pintura nativo de um navegador da Web. As animações que usam esse método podem ser executadas a 60 fps e proporcionar…
Estilos com escopo CSS
Há muitos novos atributos incríveis que obtivemos durante a revolução do HTML5: espaço reservado, download, oculto, entre outros. Cada um desses atributos nos fornece um nível diferente de controle sobre um elemento na página, mas há um novo atributo de elemento que permite…