Google: guia de como gerar dados estruturados usando JS

Recentemente, o Google publicou uma diretriz de desenvolvedor na página de desenvolvedores do Google. Este documento fornece uma visão sobre como criar dados estruturados utilizando JavaScript e implementá-los no site, ou fazê-los corretamente para que possa trazer benefícios na pesquisa do Google. Este novo guia, descreve métodos para adicionar dados estruturados dinamicamente a um site usando JavaScript. Atualmente, o uso de JavaScript é essencial para criar um site com funcionalidade aprimorada. As novas dicas do guia de desenvolvimento da Google serão especialmente valiosas para especialistas de SEO e desenvolvedores Web.

Atualmente, existem muitas maneiras de gerar dados estruturados com JavaScript, mas as mais utilizadas são:

O gerenciador de tags do google é utilizado para gerar JSON-LD dinamicamente. Ele é uma plataforma que permite o gerenciamento de tags no seu site sem editar o código. Para gerar dados estruturados com o Gerenciador de Tas do Google, você precisa:

  • Configure e instale o Gerenciador de tags do Google ao seu site;
  • Adicionar uma tag HTML personalizada ao contêiner;
  • Cole o bloco de dados estruturado desejado no conteúdo da tag;
  • Instale o contêiner conforme mostrado na seção Instalar o Gerenciador de tags do Google no menu de administração do contêiner;
  • Para adicionar a tag ao seu site, publique seu contêiner na interface do Gerenciador de tags do Google e, por fim:
  • Teste a sua implementação.

E a outra maneira de gerar dados estruturados é usando JavaScript para gerar todos os dados estruturados ou adicionar mais informações de dados renderizados no servidor. De qualquer forma, o Google Search pode entender e processar dados estruturados disponíveis no DOM ao renderizar a página. Para saber como o Google Search processa o JavaScript, consulte o guia básico de JavaScript aqui.

Para isso, você precisa:

  • Encontrar o tipo de dado estruturado em que você está interessado;
  • Editar o HTML do seu site para incluir um snippet JavaScript.
  • Testar sua implementação com o Rich Results Tests.

Gostou deste artigo? Comente abaixo!

Referências:

https://codeburst.io/javascript-news-and-updates-april-2020-98ab1ba67418

https://developers.google.com/search/docs/guides/javascript-seo-basics

Novidades ANGULAR 10

Angular lançou a versão beta do Angular 10, ou seja, a atualização está a caminho!

Essa atualização, planejada para o popular framework de desenvolvimento web, possui duas versões betas iniciais baseadas em TypeScript. Espera-se que a atualização para o framework desenvolvida pelo Google se concentre mais no ecossistema do que em suas características.

A atualização provavelmente será menor do que as versões anteriores do Angular. Não há data predeterminada de lançamento, visto que o Angular 9 ficou disponível no dia 6 de fevereiro deste ano e a versão Angular 9.1 ficou disponível no dia 25 de março.

Até agora, os recursos do Angular 10 são:

  • Adição de informações de dependência e seletores de conteúdo aos metadados;

  • Propagação do período de valor correto em um ExpressionBinding de uma expressão de microssintaxe para ParsedProperty, que por sua vez propagaria o período para os ASTs (VE e Ivy);

  • Uma correção para o núcleo. A lógica seria adicionada à migração de classe não decorada para decorar classes derivadas de classes não decoradas que usam recursos do Angular;

  • Urlmatcher sempre pode retornar null;

  • Foi corrigida uma situação em que havia uma chance de o service-worker nunca se registrar quando há uma tarefa de longa duração ou tempo limite recorrente.

Angular 9.1 chegou com suporte ao TypeScript 3.8:

A versão final do Angular 9 foi o último trabalho antes do Angular 10. O Angular 9.1 adicionou novos recursos, incluindo o suporte ao TypeScript 3.8, aprimoramentos de desempenho e uma longa lista de correção de bugs.

Este é o último lançamento secundário planejado para 9.x. À medida que começamos a trabalhar para a versão 10.0, você deve esperar para ver as pré-liberações da versão 10.0 normalmente uma vez por semana, embora elas contenham apenas alterações mínimas no início.”

Você pode encontrar as versões preliminares do Angular 10 no GitHub.

Gostou deste artigo? Comente abaixo e compartilhe com seus amigos!

Referências:

https://github.com/angular/angular/releases?ref=morioh.com

JavaScript lidera ranking de linguagens

2020 chegou e com ele, muitas mudanças no mundo da tecnologia. Se você está curioso para saber qual pode ser o futuro do mundo da programação, veio conferir no lugar certo.

Seguindo as tendências de 2019, o ecossistema do JavaScript se manteve muito utilizado e otimizado. A cada dia que passa, mais pessoas utilizam esta poderosa linguagem com seus frameworks e bibliotecas.

Por muitos anos seguidos, o JavaScript vem sendo a linguagem de programação com maior crescimento e procura. Ela é amplamente utilizada no desenvolvimento de interfaces interativas para a Web, pois é suportada por todos os navegadores modernos. Segundo a pesquisa anual realizada pela Stack Overflow, cerca de 70% dos 72.525 desenvolvedores profissionais que participaram da pesquisa, afirmaram que utilizam JavaScript. Além disso, é um dos idiomas mais procurados, pois os entrevistados que ainda não usaram, afirmaram que querem aprendê-lo.

Pelo sétimo ano consecutivo, o JavaScript é a linguagem de programação mais utilizada, com Python seguindo de categoria.

Empresas de todo o mundo utilizam JavaScript em seus stacks de linguagens. O JavaScript é o coração de qualquer grande empresa de tecnologia, como o PayPal, que foi um dos primeiros a adotar o NodeJS, Netflix, Groupon, Walmart e LinkedIn. 16 de 25 empresas Unicórnio dos EUA mencionam o JavaScript em suas tecnologias, portanto, é improvável que o JavaScript saia do grid em um futuro próximo.

Em relação aos frameworks web, vemos que os frameworks JavaScript continuam em pleno funcionamento, com o jQuery tomando o primeiro lugar, seguido do Angular/Angular.js, React.js,

ASP.NET entre outros. Ainda vemos o Vue.js em ascensão na lista de frameworks web mais utilizados

.

Entre outros frameworks, bibliotecas e ferramentas, vemos a ascensão do Node.js, que se tornou o mais utilizado, com 50.4%, seguido de .NET e .NET Core. React Native também possui uma grande quantia de usos, com 10.8% dos entrevistados afirmando utilizá-lo

.

Referências:

Gostou desta notícia? Comente abaixo!

Novidades Vue 3

Entre muitas novidades, o Vue 3 está disponibilizando uma nova API para criação de componentes. Ela não introduz novos conceitos no Vue, mas expõe os principais recursos, como criar e observar os estados reativos como funções independentes. Isso é extremamente útil para desenvolvedores de todos os níveis.

Options API e Composition API

No Vue 2, os componentes criados com a Options API são baseados em objetos. No Vue 3, foi adicionado um conjunto de APIs, chamado Composition API que é baseado em funções. Isso é principalmente bom para resolver dois problemas que eram encontrados na utilização do Vue em projetos muito grandes.

Em componentes grandes que encapsulam várias tarefas lógicas, você deseja agrupar código por recurso, mas a API Options dividia esse código (entre hooks de ciclo de vida etc.) afetando negativamente a legibilidade do código. Em segundo lugar, você deseja reutilizar a lógica em projetos de larga escala e, no Vue 2, soluções como mixins não tratam muito bem esse problema.

O Vue 3 veio para resolver esses problemas com uma nova API. Essa API coexistirá com a Options API, não substituindo-a. Você continuará criando componentes da maneira que está acostumado, sem encontrar nenhum problema. Mas você poderá também criar com a Composition API, que fornece recursos mais flexíveis de organização e reutilização de código e lógica. A nova API pensou em levar o Vue adiante como uma estrutura, reduzindo a visão de que o Vue opera “magicamente” por trás dos panos.

Composition API

A Composition API já está disponível como um plug-in para você testá-la.

No Vue 2, a reatividade foi alcançada com o uso de getters e setters do Object.defineProperty, causando algumas limitações. No Vue 3, a reatividade é realizada por meio de proxies, um recurso introduzido no JavaScript ES6.

O Vue oferece APIs independentes que permitem criar, observar e reagir a alterações de estado.

Você pode criar um objeto da seguinte maneira:

import { reactive } from 'vue';
const state = reactive ({ count: 0 });

Você terá acesso às APIs que permitirão injetar hooks dinamicamente em uma instância do Vue. Os métodos de registro do ciclo de vida podem ser utilizados no método setup(), que é o ponto de entrada em que todas as funções de composição são chamadas. Por exemplo:

import { onMounted } from 'vue';

export default {
    setup() {
        onMounted(() => {
            console.log("O componente está montado.");
        })
    }
}

As funções que usam essas APIs podem ser importadas para um componente, permitindo que o componente execute várias tarefas lógicas com código reutilizável e legível.

Gostou desta notícia? Confira as mais novas funções no link de referência!

Referência: https://alligator.io/vuejs/whats-coming-in-vue-3/

O que há de novo no ES2020?

As propostas do ECMAScript estão crescendo e dando origem a novas implementações. Portanto, você já consegue acessar os novos recursos do ECMAScript resumidos no ES2020. E quais são eles?

Dynamic Import

O Dynamic Import é um dos recursos mais interessantes do ES2020. É um recurso que você pode usar com carregamento lento. Antes, se você quisesse importar um módulo em JavaScript, teria algo como:

import Math from ('./Math.js');
const Math = new Math;
Math.multiply();

Nesse caso, temos uma maneira estática de importar o módulo Math e não poderíamos atrasar a carga se quiséssemos que esse módulo dependesse de uma ação do usuário. Graças ao ES2020, você pode usar o carregamento lento sem um webpack. Você pode utilizar a importação como uma função em qualquer lugar do seu código, usando uma função assíncrona que retorna uma Promise:

import Math from ('./Math.js');
.then ((Math) => {
    const Math = new Math;
    Math.multiply();
});

BigInt

Representa um número maior que 2 ^ 53-1 no JavaScript pode ser um problema, pois este é o maior número que o objeto Number pode representar. O BigInt é um objeto que ajuda a representar números maiores que esse. Ele é interessante, por exemplo, no caso de uma multiplicação que gere um número maior que isso. Como o Int já indica, você deve utilizar números inteiros, e não flutuantes.

const bigNumber = BigInt(90000880880909);

Promise.allSettled

O método Promise.allSettled() retorna uma promise que é resolvida depois de todas as promises retornarem resolved ou rejected, com um vetor de objetos descrevendo cada resultado da promise. O Promise.allSettled() retorna algo como Promise.all(). Mas o Promise.all() aguarda que todas as promises sejam cumpridas ou qualquer promise seja rejeitada.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject)=>
setTimeout (reject, 100, 'foo'));
const promise = [promise1, promise2];

Promise.allSettled(promises).
 then((results)=> results.foreach((result)=>
 console.log(result.status)));

globalThis:

A propriedade globalThis contém o valor global de this com o contexto do objeto global. Graças a isso, você não precisa diferenciar se o código está sendo executado em um navegador (this) ou no Node (global):

function canMakeHTTPrequest(){
    return typeof globalThis.XMLHttpRequest === 'function';
}

console.log(canMakeHTTPrequest());

Gostou desta notícia? Comente abaixo!

Referência: https://www.ma-no.org/en/programming/javascript/javascript-what-s-new-in-es2020

Summit auxilia no combate ao COVID-19

O novo coronavírus é um desafio para os cientistas. Eles devem acelerar suas pesquisas pois a velocidade que o vírus se espalha é muito grande. O supercomputador Summit, do IBM, equipado com o “cérebro da IA”, realizou milhares de simulações para analisar compostos de drogas que podem impedir a infecção às células hospedeiras causadas pelo novo vírus COVID-19. Após essas simulações, foram identificados 77 compostos promissores para tratamentos eficazes. As descobertas realizadas pelos pesquisadores do Laboratório Nacional de Oak Ridge foram publicadas na revista ChemRxiv.

O Summit foi construído para resolver os problemas do mundo. Ele possui o poder de 200 petaflops, e isso significa que ele possui uma capacidade de 200 quadrilhões de cálculos por segundo.

O supercomputador modelou como diferentes compostos podem impedir que o COVID-19 se espalhe para outras células.

O vírus infecta as células hospedeiras, injetando-as com “pico” de material genético. O Summit encontra compostos de drogas que possam se ligar ao “pico”, potencialmente impedindo a disseminação.

Micholas Smith, pesquisador de Oak Ridge, criou um modelo de pico de coronavírus. Com o Summit, ele simulou como os átomos e partículas da proteína viral reagiriam a diferentes compostos. Foram executadas simulações de mais de 8.000 compostos que poderiam se ligar à proteína de pico do vírus, limitando sua capacidade de espalhar pelas células hospedeiras.

O Summit ocupa uma área de 520 m². Ele foi construído a partir de fileiras de servidores equivalentes ao tamanho de geladeiras que, no total, pesam 340 toneladas. Os seus processadores possuem no total 200 mil núcleos. Cada servidor possui seis modelos de uma placa de vídeo de estruturas avançadas desenvolvidas exclusivamente para o supercomputador. São 250 petabytes de memória, que possuem a capacidade de armazenar 74 milhões de anos de vídeo em alta definição em seu HD.

Gostou desa notícia? Comente abaixo e compartilhe com seus amigos

Fontes:

https://edition.cnn.com/2020/03/19/us/fastest-supercomputer-coronavirus-scn-trnd/index.html

https://www.gentside.com.br/computador/summit-o-supercomputador-mais-poderoso-do-mundo_art10808.html

Conheça o CylonJS, um framework para robótica

O Cylon.js é um framework JavaScript para robótica, computação física e Internet das Coisas (IoT). Ele fornece uma maneira simples, mas poderosa, de criar soluções que incorporam vários dispositivos de hardware diferentes simultaneamente. Deseja usar o Node.js para robôs, drones e dispositivos de IoT? Este é o framework certo.

Instalação:

Você pode utilizar o npm para instalar o módulo cylon:

npm install cylon

No ubuntu, você pode utilizar o apt-get para instalar o NodeJs na sua máquina, e assim, utilizar o npm:

sudo apt-get install nodejs

Com o módulo core instalado, você precisa instalar módulos de suporte de hardware necessários. Utilizaremos os módulos firmata, gpio e i2c. Esses módulos são utilizados no Arduino para a ligação de um LED.

npm install cylon-firmata cylon-gpio cylon-i2c

Hello World com Cylon.js:

Para criar uma aplicação Olá Mundo com o Cylon.js, você precisará:

  • Fazer a requisição do módulo cylon;
  • Utilizar o método Robot para logar o resultado no console;
  • utilizar o método start() para mostrar o resultado.
let Cylon = require('cylon');

Cylon.robot({
    work: function() {
        every((1).second(), function() {
            console.log("Olá Mundo!");
        });
    }
}).start();

Com isso, temos um Olá Mundo!

Arduino = LED + Botão

Este exemplo acende um LED ao clicar em um botão:

let Cylon = require('cylon');

Cylon.robot({
    connections: {
        arduino: { adaptor: 'firmata', port: '/dev/ttyACM0'}
    },

    devices: {
        led: { driver: 'led', pin: 13 },
        button: { drier: 'button', pin: 2}
    },

    work: function(my){
        my.button.on('push', function() {
            my.led.toggle()
        });
    }
}).start();

O Cylon.js pode ser executado diretamente no navegador, usando o módulo NPM do browserify. Você pode executá-lo usando um aplicativo conectado ao Chrome ou um aplicativo móvel PhoneGap.

Você pode ver mais alguns exemplos do Cylon.JS em ação, consulte a página de exemplos.

O Cylon.js fornece uma maneira simples e poderosa de criar soluções que incorporam vários dispositivos de hardware diferentes ao mesmo tempo.

Para verificar atualizações, notas e outros comentários sobre o Cylon.js , você pode acessar o blog do Cylon.js. Também pode acessar o GitHub.

O Cylon.js foi feito e atualizado pelo Hybrid Groud. É licenciado sob a licença Apache 2.0.

Gostou deste artigo? Comente abaixo!

Novidades React v3.3.0

O React já disponibilizou a versão v3.3.0, que é uma versão que inclui recursos como modelos customizados e suporte para alguns novos operadores opcionais de encadeamento e coalescência nula.

Modelos personalizados:

Agora, você pode criar um aplicativo novo utilizando modelos personalizados. Alguns modelos existentes como cra-template e cra-template-typescript. Utilize esse comando para criar um novo aplicativo tendo como base um modelo personalizado:

npx create-react-app my-app --template typescript

Você pode omitir o prefixo cra-template ao especificar o modelo desejado.

Operadores de encadeamento e coalescência nula:

// encadeamento opcional
a?.(); // undefined se a `a` é null/undefined
b?.c; // undefined se a `b` é null/undefined

// coalescência nula
undefined ?? 'algum outro padrão'; // resulta em: 'algum outro padrão'
null ?? 'algum outro padrão'; // resulta em: 'algum outro padrão'
'' ?? 'algum outro padrão'; // resulta em: ''
0 ?? 300; // resulta em: 0
false ?? true; // resulta em: false
Importante:

Para utilizar os novos operadores, atualize o seu TypeScript para a versão 3.7.0. Caso utilize o VS Code 1.4 ou anterior, configure o editor para que ele entenda os novos operadores.

Continue lendo “Novidades React v3.3.0”

JavaScript completa 24 anos de idade

No dia 4 de dezembro de 2019, o JavaScript comemora seus 24 anos de existência. Neste mesmo dia, em 1995, a NetScape e a Sun Microsystems anunciaram o JavaScript, uma linguagem de script de plataforma aberta, para a criação e personalização de aplicativos em redes corporativas e Internet.

É uma linguagem de script fácil de usar, projetada para criar webapps que vinculam objetos e recursos em clientes e servidores. Foi projetada para ser usado por desenvolvedores web para que criassem scripts dinâmicos em execução no cliente ou servidor.

Com o JavaScript, podemos ter um formulário inteligente que executa cálculos de pagamento de empréstimos ou de câmbio diretamente no cliente em resposta à entrada do usuário. Uma página pode conter scripts JavaScript executados no cliente e servidor. No servidor, os scritps podem compor e formatar dinamicamente o conteúdo HTML com base nas preferências do usuário armazenadas em um banco de dados e no cliente.

“A natureza do JavaScript cliente-servidor, multi-fornecedor e multiplataforma é uma adaptação natural ao sistema de autoria da Web Vermeer FrontPage. O rastreamento de tecnologias da Web inovadoras e ativadoras é uma prioridade importante para a Vermeer, e estamos nos movendo rapidamente para incorporar o JavaScript na primeira página em produtos futuros.”

John R. Mandle

CEO da Vermeer Technologies

 

Basicamente, essas foram as palavras utilizadas pelos criadores do artigo original, publicado no lançamento do JavaScript, em 04 de dezembro de 1995.

Você pode ler o artigo original em:

https://web.archive.org/web/20070916144913/http://wp.netscape.com/newsref/pr/newsrelease67.html

Atualmente, a linguagem evoluiu muito em relação à quando foi lançada. Foram criados diversos frameworks e bibliotecas que auxiliam no desenvolvimento front-end, trazendo agilidade e uma rápida curva de aprendizado para os desenvolvedores. Podemos utilizar JavaScript no lado do servidor com Nodejs e utilizar diversos frameworks e bibliotecas como as atuais React, Angular e Vue, e também o jQuery para a apresentação no front.

Gostou dessa notícia? Comente abaixo!

Richard Feldman e o futuro da web.

Richard Feldman, na ReactiveConf em Praga, fez algumas previsões sobre o futuro da Web até 2025. Ele afirma que aposta em prever as evoluções de tecnologias atuais, como TypeScript e WebAssembly.

Apesar de o TypeScript estar evoluindo gradativamente, ainda há muitas reclamações em relação à sua verbosidade, que afeta a legibilidade do código-fonte. Mas Feldman afirma que o TypeScript será a escolha mais comum entre os desenvolvedores de projetos comerciais.

Com relação ao WebAssembly, Feldman sustenta que o futuro não seja guiado pelo WebAssembly por conta de seu desempenho aprimorado. Ele acredita que o WebAssembly permitirá a concorrência com as lojas e instaladores de apps.

Com relação ao gerenciamento de pacotes, Feldman afirma que o npm continuará relevante, mas que até o final de 2025, ocorrerá algum incidente de segurança, infectando pelo menos um pacote malicioso e afetando muitos desenvolvedores.

Feldman acredita que as linguagens de compilação para o JavaScript estarão crescendo, mas nenhuma de modo tão rápido quanto o TypeScript.

Fonte: https://www.infoq.com/news/2019/11/reactiveconf-2019-web-prediction/

Gostou desta notícia? Comente abaixo!