Categoria: Notícias

Publicado em

O Google adiciona noções SEO JavaScript ao seu guia do desenvolvedor

Recentemente, o Google adicionou uma seção básica de SEO do JavaScript ao guia do desenvolvedor da Rede de Pesquisa. A nova seção tem como objetivo fornecer aos iniciantes uma visão geral de como o Googlebot processa o JavaScript. Isto inclui descrições gerais de como o Google processa JavaScript, além de algumas práticas recomendadas.

Além de uma visão geral de como o Googlebot rastreia, processa e indexa aplicativos da Web JavaScript, o guia também fornece dicas básicas, acompanhadas de links para recursos mais detalhados das funcionalidade de indexação Google, como as seguintes:

  • Como descrever sua página com títulos e snippets exclusivos: O JavaScript permite que os SEOs definam ou alterem títulos e meta descrições.
  • Como escrever código compatível: Os desenvolvedores devem estar cientes das limitações da API e do JavaScript do Googlebot.
  • Códigos de status HTTP importantes: Os códigos de status informam ao Googlebot que uma página foi movida ou que ela não deve ser rastreada ou indexada.
  • Informações sobre a tag meta-robôs: O Google afirma que o uso do JavaScript para remover ou alterar a metatag do robô pode não funcionar da maneira esperada, explicando: “O Googlebot ignora a renderização e a execução do JavaScript se a tag de meta-robôs contiver inicialmente ‘noindex’. Se você quiser usar JavaScript para alterar o conteúdo da metatag do robô, não defina o valor da metatag como “noindex”.
  • Corrigindo imagens e conteúdo carregado com lazy load: O Google recomenda o uso de lazy load para aumentar o desempenho e diminuir os custos de largura de banda.

Por que devemos nos importar. O JavaScript é uma ferramenta poderosa para desenvolvedores e pode melhorar a experiência do usuário. Entender como o Googlebot processa seus aplicativos da web com JavaScript pode ajudar você a torná-los mais detectáveis, o que pode aumentar sua visibilidade orgânica e atrair mais tráfego para seu site.

 

 

 

 

Publicado em

Novidades no ECMAScript 2019 (ES2019)/ES10

A versão 72 do Chrome lançou alguns novos recursos interessantes do ES10:

.Flat():

O método flat() cria um novo vetor recursivamente com todos os elementos do sub-vetor concatenados nele até a profundidade especificada.

let vetor = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]];

vetor.flat();
// (7) [1, 2, 3, 4, 5, 6, Array(4)]

vetor.flat().flat();
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, Array(3)]

vetor.flat().flat().flat();
//(12) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

vetor.flat(Infinity);
//(12) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

.flatMap():

O método flatMap() primeiramente mapeia cada elemento do vetor usando uma função e mapeamente para, em seguida, nivelar o resultado em um novo array. O flatMap é bastante útil, pois mescla um mapa seguido por um flat de profundidade 1 em um método mais eficiente.

let vetor = [1, 2, 3, 4, 5];

vetor.map(x => [x, x*2]);
// (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
// 0: (2) [1, 2]
// 1: (2) [2, 4]
// 2: (2) [3, 6]
// 3: (2) [4, 8]
// 4: (2) [5, 10]

vetor.flatMap(v=>[v, v*2]);
// (10) [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

Object.fromEntries():

O método Object.fromEntries() transforma uma lista de pares de valores-chave em um objeto.

Exemplo 1:

let obj = {
    chave1:'valor1',
    chave2:'valor2',
    chave3:'valor3'
}    

let entries = Object.entries(obj);

console.log(entries);
// (3) [Array(2), Array(2), Array(2)]0: (2) ["chave1", "valor1"]1: (2) ["chave2", "valor2"]2: (2) ["chave3", "valor3"]

let fromEntries = Object.fromEntries(entries);

console.log(fromEntries);
// {chave1: "valor1", chave2: "valor2", chave3: "valor3"}

Exemplo 2:

let entries  = new Map([
    ['nome', 'ben'],
    ['idade', 25]
]);    

Object.fromEntries(entries);
// {nome: "ben", idade: 25}

String.trimStart() & String.trimEnd():

O método trimStart() remove espaços em branco do início de uma string. O método trimEnd() remove espaços em branco do final de uma string.

let olaMundo = "     Olá Mundo!     ";

console.log(JSON.stringify(olaMundo.trimEnd()));
// "     Olá Mundo!"

console.log(JSON.stringify(olaMundo.trimStart()));
// "Olá Mundo!     "

Optional Catch Binding:

Permite que os desenvolvedores usem try / catch sem criar uma ligação não utilizada. Você pode fazer uso do catch block sem um parâmetro.

try {
    throw new Error("sem erro");
} catch {
    console.log("nenhum parâmetro no catch");
}
// nenhum parâmetro no catch

Antes era obrigatório usar parâmetro no catch block:

try {
    throw new Error ("Algum erro aleatório");
} catch(e) {
    console.log(e);
}    
// Error: Algum erro aleatório

Continue lendo “Novidades no ECMAScript 2019 (ES2019)/ES10”

Publicado em

React Native simplifica o desenvolvimento de aplicativos:

Há um número crescente de aplicativos incríveis e populares nas lojas de aplicativos que foram criadas com React Native, estes incluem: Facebook Ads Manager, Facebook Messenger, AirBnB, Bloomber, UberEats, Discord e Instagram.

O crescimento de aplicativos para dispositivos móveis.

A Statista, que é uma provedora de dados de mercado e consumidores, prevê que os aplicativos móveis gerarão receita global de aproximadamente US$ 189 bilhões até o ano 2020. O desenvolvimento de aplicativos móveis está aumentando à medida que aumenta a necessidade de aplicativos que ajudarão a simplificar a vida e o trabalho.

Com a crescente demanda por aplicativos, os desenvolvedores estão procurando modos de facilitar o trabalho. Ao mesmo tempo, as empresas exigem que seus aplicativos estejam disponíveis em todas as plataformas: Web, iOS, Android, entre outras. Este é um desafio, pois os desenvolvedores têm que projetar e desenvolver a mesma coisa para três plataformas diferentes.

Três aplicativos pelo preço de um.

Com React Native, eles não precisam mais criar três aplicações diferentes para Web,Android e iOS. Um aplicativo será executado em todas as três plataformas. É uma estrutura rápida e fácil baseada, em JavaScript usada para criar aplicativos nativos. Também é apoiado pelo Facebook com amplo apoio e contribuição da comunidade, bem como tutoriais e materiais de aprendizagem.

Isso torna extremamente fácil começar a usar o React Native. Também é fácil fazer a transição de nativo para reagir e vice-versa e isso pode ser feito a qualquer momento sem esforço, porque o React Native alinha-se às convenções da plataforma nativa. Mais importante, pode-se mudar de React Native para totalmente nativo com muito pouco esforço.

O CEO da BlueGrass Digital, Nick Durrant, diz que é definitivamente muito mais barato, fácil e rápido desenvolver aplicativos móveis no React Native:

“O React Native permite uma única base de código JavaScript para todas as plataformas. Isso facilita a manutenção do aplicativo com o mesmo processo de desenvolvimento para todas as plataformas e a reutilização do mesmo código. Isso significa menos recursos, não há necessidade de equipes de desenvolvimento separadas. ”

Continue lendo “React Native simplifica o desenvolvimento de aplicativos:”

Publicado em

SAP amplia e expande contribuições para a comunidade de desenvolvedores web.

A SAP apresenta a UI5 Web Components, uma biblioteca para desenvolvedores Web que possibilita a criação de aplicações corporativas com maior facilidade.

A nova UI5 Web Components criada pela SAP permite que os desenvolvedores aproveitem recursos oferecidos pelo OpenUI5 enquanto utilizam outras estruturas como Angular, React, Vue.js. Os Web Components são conjuntos de elementos, de interface corporativa, com funções que não seriam tão facilmente implementadas utilizando HTML padrão.

Web Components são agnósticos em termos de framework, funcionam nos navegadores mais modernos e podem ser usados para acrescentar algumas funcionalidades avançadas em aplicações Web dinâmicas e páginas Web estáticas.

“O código aberto é uma parte fundamental da estratégia tecnológica da SAP, e somos ativos na comunidade há mais de 15 anos. Além de disponibilizar tecnologias desenvolvidas dentro da SAP à comunidade Open Source, contribuímos com outros projetos relevantes da indústria”, afirma Angelo Agra, head da unidade de desenvolvimento do SAP Data Hub no Brasil. “Nossa contínua colaboração com a comunidade open source em torno do CLA assistant e do OpenUI5 é uma importante fonte de contribuições e de novos recursos”, completa.

Continue lendo “SAP amplia e expande contribuições para a comunidade de desenvolvedores web.”

Publicado em

O que é o Blazor e por quê é importante para os desenvolvedores .Net e para a Web.

Há alguns anos, quando a Microsoft lançou o Razor, ele foi considerado revolucionário. Esta linguagem de marcação server side permitiu que os desenvolvedores trouxessem códigos do lado do servidor para as páginas Web. A sintaxe do Razor foi projetada para ser fácil de ler e aprender, o que foi ótimo para atrair novos desenvolvedores.

Embora essa tecnologia permitisse aos desenvolvedores manipular toda a lógica do lado do servidor usando o .NET e trazer os dados para o lado do cliente pela Razor, a Microsoft ainda não tinha solução para competir com estruturas JavaScript como Angular, React e Vue no front end.

Essa lacuna fez com que os engenheiros da Microsoft pensassem em maneiras de trazer o poder do .NET para o lado do cliente. Sua jornada inevitavelmente levou à Web Assembly. Para aqueles que não estão familiarizados com esta tecnologia, Web Assembly ou WASM é um…

Novo tipo de código que pode ser executado em navegadores da Web modernos - é uma linguagem de montagem de baixo nível com um formato binário compacto que é executado com desempenho quase nativo e fornece linguagens como C / C ++ e Rust com um destino de compilação que eles podem ser executados na web. Ele também é projetado para rodar ao lado do JavaScript, permitindo que ambos trabalhem juntos.

                                                                                                                                                              - developer.mozilla.org

Em suma, o Web Assembly torna o código .Net possível em praticamente qualquer lugar. Esse avanço resolveu muitos problemas para desenvolvedores .NET que procuravam executar seu código em navegadores modernos. Mas o mais importante é que abriu caminho para a Microsoft ampliar o alcance de sua tecnologia Razor existente.

Enter Blazor!

O resultado é uma solução perfeita para criar uma alternativa competitiva aos populares frameworks de aplicativos de página única, aproveitando todo o poder do .NET. O sonho que começou com o Silverlight está finalmente se tornando uma realidade. O Blazor associa a marcação Razor familiar a coisas como vinculação de dados, injeção de dependência e até mesmo permite chamadas de e para o JavaScript por meio de interoperabilidade de JavaScript.

Agora os desenvolvedores podem alavancar seus conhecimentos C# em servidores e clientes, dando-lhes acesso ao .NET e suas bibliotecas. Para melhorar as coisas, os aplicativos do Blazor são baseados em componentes. Isso permite que eles sejam aninhados e reutilizados, tornando-os muito flexíveis. O resultado é uma interface de usuário rica e rápida renderizada como HTML e CSS.

Enquanto o Silverlight era prejudicado por preocupações de adoção devido à falta de suporte de plataforma, o Web Assembly é suportado por todos os principais navegadores, incluindo o Safari no iOS. Isso coloca em pé de igualdade com o JavaScript e as estruturas de aplicativos de página única concorrentes na luta pelo domínio da web.

Há algumas coisas para manter em mente se você planeja pular para o Blazor neste momento. O Blazor herda anos de maturidade do .NET e do Razor, e é muito capaz, mesmo ainda não fornecendo certos recursos.

Continue lendo “O que é o Blazor e por quê é importante para os desenvolvedores .Net e para a Web.”

Publicado em

Abertas as inscrições para Code Day II.

A Samsung anunciou que estão abertas as incrições para o Code Day II, evento que será realizado em São Paulo, entre os dias 10 e 24 de agosto, no Espaço OCEAN da USP (Universidade de São Paulo). O curso é presencial e possui duração de oito horas e é direcionado a professores e educadores da rede pública. Podem participar professores e educadores que estiveram no Code Day I. Este curso é uma iniciativa da Samsung em parceria com o LSI-TEC (Laboratório de Sistemas Integráveis Tecnológico). Os encontros irão contemplar conceitos e atividades avançadas em IoT (Internet das Coisas).

O Code Day II faz parte do Code IoT, que é uma plataforma de cursos online e gratuitos disponibilizada pela Samsung a todos os interessados em aprender mais sobre tecnologia. Temas que abordam Aplicações para Dispositivos Móveis, Aprendendo a programar e Objetos Inteligentes Conectados estão disponíveis. Ao final de cada curso, os participantes recebem certificado de conclusão, e os cursos estão disponíveis em português, inglês e espanhol.

Continue lendo “Abertas as inscrições para Code Day II.”

Publicado em

O mecanismo de JavaScript do Facebook que otimiza o React Native no Android

O mecanismo de código aberto JavaScript Hermes pode ser usado para melhorar o desempenho de todos os aplicativos móveis baseados em JavaScript.

O Facebook criou um mecanismo JavaScript, chamado Hermes, que melhora o desempenho de aplicativos React Native em dispositivos Android. Embora o mecanismo de código aberto seja otimizado para o React Native atualmente, ele pode ser usado para melhorar o desempenho de aplicativos móveis baseados em JavaScript em geral.

Especialmente, Hermes é voltada para a inicialização rápida, aproveitando o bytecode compacto e otimização estática antecipada. Em muitos casos, a ativação do Hermes melhora o tempo de inicialização, diminui o uso de memória e resulta em um tamanho de aplicativo menor.

O Hermes atualmente é um recurso opcional no React Native. A maioria dos produtos React Native do Facebook no Android já está utilizando o Hermes, incluindo o Crisis Response e o aplicativo complementar Oculus.

Recursos do mecanismo JavaScript Hermes:

As capacidades do Hermes incluem:

  • Em vez de analisar e compilar o JavaScript no dispositivo enquanto o usuário aguarda, esse trabalho pode ser feito no momento da criação.
  • A compilação à frente do tempo permite otimizações mais complexas.  Funções idênticas podem ser encontradas em um programa e desduplicadas. As cadeias de caracteres do código JavaScript podem ser agrupadas em um formato de armazenamento eficiente sem sobrecarga de tempo de execução.
  • Um pequeno tamanho de APK Android.
  • O bytecode pode ser mapeado na memória e carregado a partir da memória flash, conforme necessário.
  • O espaço de endereço virtual é alocado em partes por demanda, conforme necessário, evitando a necessidade de estimar o tamanho do heap e minimizar a sobrecarga. Memória livre pode ser retornada ao sistema operacional. Além disso, as pausas de coleta de lixo são minimizadas.
  • Implementa padrões JavaScript, com o Hermes visando o ECMAScript 2015, também conhecido como ES6. Os recursos JavaScript não usados com frequência nos aplicativos React Native foram omitidos.

O Facebook também abriu a integração do Hermes com o React Native, para que os desenvolvedores possam usar o Hermes imediatamente. A empresa planeja construir ferramentas de criação de perfil de tempo e memória para Hermes e adicionar suporte ao protocolo de depuração do Visual Studio Code.

Onde baixar o Hermes?

Você pode fazer o download do Hermes no GitHub. Instruções para ativar o uso do Hermes podem ser encontradas no site do React Native. (documentação)

 

Publicado em

Conheça o Sucrase, um compilador mais rápido que o Babel.

O Sucrase é uma alternativa ao Babel que permite um desenvolvimento muito rápido. O Sucrase assume que você está desenvolvendo em um navegador recente ou em uma versão recente do Node.js, acelerando a sua experiência em desenvolvimento.
Ele se concentra na compilação de extensões da linguagem não-padrão, como JSX, TypeScript e Flow.

  • O Sucrase não verifica se há erros no seu código, ele apenas produz código JS válido. Sempre verifique o código que você irá fornecer;
  • Ele também não produz código para navegadores antigos;
  • Não é um verificador de letras, ou seja, processa cada arquivo isoladamente.
  • É benéfico principalmente no desenvolvimento mas, às vezes, Babel será mais adequado para compilações de produção.

O Sucrase visa o desenvolvimento de builds. Obtém ganhos de velocidade significativos provenientes de uma redução no escopo dos objetivos do compilador.

Esses recursos JavaScript são levados em consideração ao compilar no Sucrase:

O Sucrase é licenciado pelo MIT. Uma grande parte do Sucrase é baseada em uma bifurcação do analisador Babel , que também é licenciado pelo MIT.

Confira as fontes:

https://github.com/alangpierce/sucrase

https://www.infoq.com/news/2019/06/sucrase-fast-babel-modern-js/

 

 

Publicado em

PixiJS adiciona suporte a WebGL.

PixiJS é uma biblioteca que permite criar gráficos interativos sem precisar merhulhar na WebGL API e é despreocupada em lidar com a compatibilidade do navegador e dispositivo. Ela tem suporte completo ao WebGL e volta à tela do HTML5.

É uma ferramenta ideal para criação de conteúdo dinãmico e interativo. Ela possui compatibilidade para multiplataforma. Com o PixiJS você cria experiências refinadas de forma rápida, evitando dores de cabeça relacionadas à inconsistências de navegadores.

Ele possui:

  • Renderizador WebGL;
  • Gráfico de cena completo;
  • API fácil de usar;
  • Suporte para atlas de textura;
  • Carregador de assets/sprites;
  • Deteca automaticamente qual renderizador usar;
  • Interação com mouse e multitoque;
  • Texto;
  • BitmapFont;
  • Renderiza texturas;
  • Desenhor primitivos;
  • Mascaramento;
  • Filtros e
  • Plugins de usuário.

O PixiJS possui uma API amigável e rica em recursos, permitindo que você se concentre ne produção enquanto a API cuida dos fundamentos. Se tratando em renderização 2D, o PixiJS é o mais rápido que existe e sempre será de código aberto.

O WebGL é uma API utilizada para renderizar gráficos 3D e 2D sem o uso de plugins. Além do navegador, a própria GPU também precisa oferecer suporte ao recurso.

Você pode fazer o download com npm ou usando uma URL da CDN:

npm install pixi.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>

A maneira correta de importar o PixiJS é:

import * as PIXI from 'pixi.js'

Continue lendo “PixiJS adiciona suporte a WebGL.”

Publicado em

Aplicações nativas em JavaScript com Capacitor

Capacitor, o novo framework da Ionic.

Você sabe o que é o Ionic? É uma ferramenta para criar aplicativos mobile, utilizando HTML, CSS e JavaScript.

Capacitor é uma cross-plataform API que facilita chamar SDKs nativos a partir de código da Web e fornece suporte de progressive web apps. Criada pela Ionic, é uma alternativa ao Apache Cordova, que foi lançado em 2009. O Capacitor foi criado devido ao sistema de plugins desatualizados do Apache Cordova e pela restrição ao gerenciamento de plataformas nativas.

Ele foi projetado pela equipe do Ionic Framework como uma alternativa ao Cordova. O Capacitor pode ser usado sem o Ionic, mas em breve se tornará uma parte essencial do mesmo.

Continue lendo “Aplicações nativas em JavaScript com Capacitor”