Tag: JavaScript

Publicado em

Node RED: Ferramenta de programação para a internet das coisas

Com o casamento do Node.JS com a internet das coisas que resultou no Node-Red (uma ferramenta que consiste com runtime baseado em Node.Js para programação “flow-based”), que foi originalmente desenvolvido time de serviços de tecnologias emergentes da IBM e agora faz parte da JS Foundation. Se você ainda não tinha ouvindo falar disto antes, agora é a hora de dar uma olhada neste assunto.

O Framework de um runtime em node.js que você aponta para um navegador web para poder acessar o flow editor. Através do navegador é possível criar aplicações arrastando nodes na área de trabalho e conectando-as juntas.

 

Como funciona?

Editor Flow no navegador: Torna simples a conexão entre os flows através de uma ampla gama de nodes em sua paleta. Flows podem então ser rodados no runtime com um único clique. Funções JavaScript podem ser criadas no editor de texto e uma biblioteca interna permite que você salve funções, templates ou flows para reutilização.

Construído com Node.js: Com já mencionado, o runtime foi construído com node.js, utilizando ao máximo modelo de blocos e orientado a eventos. Isto o torna ideal para rodar na rede de hardwares de baixo custo como o Raspberry Pi e também na nuvem. Com mais de 225.000 módulos nos pacotes de repositório do Node, é fácil alterar e adicionar novas funcionalidades.

Desenvolvimento Social: Os flows criados em Node-RED são armazenados utilizando Json que podem ser facilmente importados e exportados para compartilha-los com outros. Uma biblioteca online do flow permite que você compartilhe seus melhores flows com o resto do mundo.

Como começar?

Antes de você começar, você precisa garantir que seu computador possui uma instalação do Node.js, de preferencia com as ultimas atualizações. Também, tenha em mente que o Node-RED não oferece mais suporte para as versões 0.12.x ou 0.10.x

Com relação ao hardware, você consegue encontrar instruções especificas para o Raspberry Pi, BeagleBone Black, e Windows. Usuários de Linux e OSX devem manter em mente que eles precisam instalar as versões dos pacotes que são especificas para os seus sistemas operacionais ou obter a última versão LTS (suporte de longo termo) do site.

Publicado em

Estimando a velocidade de download com Imagens

Neste post será mostrado uma forma de estimar a velocidade de download utilizando uma imagem e algumas linhas de código JavaScript. A ideia do algoritmo é a de:

  • Fornecer uma imagem de tamanho grande para calcular de forma mais confiável.
  • Iniciar um contador um passo antes de baixar a imagem.
  • Baixar a imagem.
  • Encerrar o contador no momento que a imagem termina.
  • Calcular o resultado em MBps e Mbps.

O Código HTML

Abaixo o segue o código HTML. Como você pode ver, para manter tudo simples, serão utilizadas apenas algumas linhas de código e a exibição de resultados será de apenas um texto com os dados

<!DOCTYPE html>
<html>
<head>
    <title>Teste de Velocidade</title>
    <meta charset="utf-8" />
</head>
<body>
    <!-- O botão que irá iniciar o teste -->
    <button onclick="iniciarTeste()">Iniciar</button>

    <!-- Tag de paragrafo que exibirá os resultados -->
    <p id="progresso"></p>
    
    <script src="main.js"></script>
</body>
</html>

 

O Código JavaScript

A explicação do código JavaScript abaixo está dentro dos comentários de cada trecho.

// Variaveis para controlar o inicio e o fim do download
let inicioDownload;
let fimDownload;

// Variavel que guarda os dados da imagem que serão utilizados
const imagem = {
    // Caminho da imagem. Utilize o caminho da sua imagem
    caminho: "coffe-cup.jpg",

    // O tamanho da imagem em megabytes
    tamanho: 6.877555
};

// Inica o teste de Download
// Se outros recursos estiverem sendo baixados
function iniciarTeste() {
    mostrarMensagem("Efetuando teste de Download...");
    window.setTimeout(medirConexao(), 1);
}


// Função auxiliar que exibe mensagens na tela
function mostrarMensagem(messagem) {
    // Se a variavel mensagem for uma string, exibirá ela como veio,
    // Se a variavel for um vetor, exibirá cada linha quebrado por <br/>
    let mensagemHTML = (typeof messagem == "string") ? messagem : messagem.join("<br />");
    document.getElementById("progresso").innerHTML = mensagemHTML;
}

// Função que efetivamente mede a conexao de velocidade
function medirConexao() {
    // Cria o objeto de imagem que iremos calcular o tempo de download
    let imagemTeste = new Image();

    // No envento de carregamento da emnsagem,
    // para o contador e exibe o os resultados
    imagemTeste.onload = function () {
        endTime = new Date().getTime();
        exibirResultados();
    }

    // Inicia o contador 
    startTime = new Date().getTime();
    // cria uma controlador apra evitar carregar um caminho de imagem que ja está em cache
    let cacheBuster = "?nnn=" + startTime;
    // inicia a imagem
    imagemTeste.src = imagem.caminho + cacheBuster;
}

// Exibe os resultados caculados em Megabytes por segundo
// e em Megabits por segundo
function exibirResultados() {
    // converte o tempo de milisegundos para segundis
    let duracao = (endTime - startTime) / 1000;
    // calcula o tempo que levou para baixar a imagem,
    // arredondando para duas casas decimais
    let velocidadeMbps = (imagem.tamanho / duracao).toFixed(2);
    
    mostrarMensagem([
        "A Velocidade da conexão é de:",
        velocidadeMbps + " MBps",
        (velocidadeMbps * 8) + " Mbps"
    ]);
}

Conclusão

Após rodar os testes algumas vezes, foi possível observar as seguintes coisas.

  1. O resultado sempre se apresentou abaixo do que seria a capacidade da internet na minha casa.
  2. Caso outras páginas estivessem sendo acessadas, o resultado era muito inferior ao esperado.

Apesar dos itens acima terem sido esperados, foi interessante compara-los com sites que exibem a velocidade da internet para ver o preciso é o teste em relação a eles.

Publicado em

API Network Information: Obtenha dados de conexão do usúario

É comum usar a largura da tela ou indicadores semelhantes para decidir quantos dados mostrar ao usuário. Mas, às vezes, um usuário com uma tela maior ou dispositivo de maior resolução tem uma conexão de rede ruim, e enviá-las para imagens maiores torna as coisas muito mais lentas para eles no carregamento do site. Seria ótimo se pudéssemos explicar as condições de rede de um usuário específico para determinar o que devemos enviá-las.

A API de informações da rede faz exatamente isso. É uma API que fornece informações sobre a conexão do sistema em termos ou tipo de conexão (por exemplo, “wifi”, “celular” etc.) que podemos usar para otimizar a experiência deles.

Acessar dados do objeto Navegador

Navigator.connection é a propriedade principal que analisaremos. É somente leitura e contém algumas informações potencialmente valiosas sobre a conexão do usuário.

let connectionInfo = navigator.connection;

Isso retorna um objeto que possui as seguintes propriedades.

Propriedades da API Network Information

  • Downlink: Retorna a estimativa de largura de banda efetiva em megabits por segundo.
  • DownlinkMax: Retorna a velocidade máxima de downlink para a tecnologia de conexão subjacente.
  • EffectiveType: retorna o tipo de conexão efetivo que significa uma das opções “slow-2g”, “2g”, “3g” ou “4g”.
  • Rtt: Retorna o tempo de ida e volta estimado estimado da conexão atual.
  • Type: retorna o tipo de conexão que um dispositivo está usando para se comunicar com a rede.
    • Inclui: “bluetooth, celular, ethernet, nenhum, wifi, wimax, outro, desconhecido”.

Nota: Atualmente, os navegadores de desktop não retornam as propriedades downlinkMax e type.

Eventos

Também podemos adicionar listeners para o evento “onchange”, que dispara quando as informações de conexão são alteradas.

Exemplos

O benefício óbvio de ter essas informações é que podemos personalizar a experiência do usuário não apenas com base no tamanho da tela, mas também em como o usuário está se conectando ao nosso site. É sobre wi-fi ou celular? É um 3g ou 4g, etc?

let preloadVideo = true;
let connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

if (connection) {
    if (connection.type === 'cellular') {
        preloadVideo = false;
    }
}

Por exemplo, poderíamos determinar se pré-carregaremos os ativos com uso intensivo de recursos, como vídeo, com base na conexão de rede, decidindo não pré-carregar os recursos se eles estiverem em excesso no celular.

Suporte

Infelizmente, o suporte para essa API é mínimo no momento, com o Chrome e o Opera sendo os principais navegadores para suporte a dispositivos móveis e o Chrome para computador.

A boa notícia, porém, é que, embora não possamos usar isso para todos, ainda podemos usá-lo para melhorar progressivamente nossos sites para alguns de nossos usuários. E com os benefícios potenciais que poderia oferecer quando estiver amplamente disponível, é definitivamente uma API para ficar de olho em seguir em frente.

Fonte:

MDN Docs: NetworkInformation
MDN Docs: Navigator.connection
Tradução principal: https://www.afasterweb.com/2018/01/26/network-api/

Publicado em

Epoc.js: Leitor De Ondas Cerebrais JavaScript

A recente transição da ficção científica para a realidade para a interface cérebro-máquina, juntamente com a Lei de Atwood, “qualquer aplicativo que possa ser escrito em JavaScript, será escrito em JavaScript”, levou ao Epoc.js, um software de controle de código aberto para a linha Emotiv de sensores cerebrais.

O software fornecido pela Emotiv não é de código aberto, e os dados brutos de cada sensor não estão disponíveis. Em vez disso, sua API permite acesso a recursos como acelerômetro e giroscópio, desempenho (excitação, relaxamento, etc.) e expressões (piscadela, franzir a testa, sorriso, etc.), comandos mentais (empurrar, puxar, levantar, etc.).

Para fazer a interface cérebro-máquina funcionar, um usuário final precisa primeiro treinar os comandos mentais. Uma vez terminado, você pode usar epoc.js, criado por Charlie Gerard, um desenvolvedor de software na ThoughtWorks, para trabalhar com a API Emotiv, bem como usar o emulador Emotiv.

Gerard usou epoc.js para criar várias demonstrações, incluindo um teclado cerebral, navegação de um espaço 3D usando WebVR e pilotando um drone.

Há uma variedade de ondas cerebrais que podem ser detectadas, das quais diferentes tipos de aplicativos podem concentrar seus esforços:

  • Delta (0,5-4 Hz) – sono profundo sem sonhos, reparação
  • Teta (4-8 Hz) – criatividade, sonhos, meditações
  • Alfa (8-13 Hz) – relaxamento físico e mental
  • Beta (13-32 Hz) – acordado, consciente, pensando
  • Gamma (32-100 Hz) – aprendizagem, resolução de problemas

Gerard explica que alguns dos limites atuais do software de controlador de sensor cerebral incluem treinamento por usuário, latência inicial, precisão para hardware não invasivo e aceitação social.

Epoc.js fornece uma variedade de dados de dispositivos e eventos para os desenvolvedores interagirem com os sensores cerebrais Emotiv. Para aprender mais sobre a biblioteca, acesse: https://github.com/charliegerard/Epoc.js?files=1

Publicado em

JavaScript: Melhoras de perfomance assíncrona

A equipe do V8 JavaScript anuncia melhorias para otimizar as funções e promessas assíncronas. A equipe também aprimorou a experiência de depuração do código assíncrono, um ponto problemático comum para desenvolvedores de JavaScript.

A introdução de promessas no ES2015 e a introdução posterior de funções assíncronas e a iteração assíncrona do ES2018 tornam a criação de código assíncrono muito mais eficiente do que o uso de callbacks. No entanto, até recentemente, o uso desses novos recursos não era eficiente.

A equipe do V8 também explorou o desempenho do código-fonte do mundo real, observando o uso com estruturas de middleware como hapi, koa e trek, que usam promessas e funções assíncronas. Com as recentes mudanças no V8, o desempenho ao usar essas estruturas melhorou significativamente.

O V8 introduziu várias mudanças para levar a melhorias de desempenho assíncrono, incluindo o TurboFan, um novo compilador de otimização, e o Orinoco, um novo coletor de lixo, movendo o GC para fora do thread principal para melhorar o processamento de pedidos. Além disso, houve um erro dentro do Node.js 8 que levou à espera de pular microtricks em alguns casos.

O trabalho de desempenho levou a alguns patches propostos para melhorar a especificação de funções assíncronas, o que deve melhorar o desempenho não apenas no V8, mas em todos os mecanismos JavaScript. Essas alterações incluem a remoção de dois microticks extras e a remoção de uma promessa descartável de funções assíncronas.

Com as atualizações recentes para o código-fonte V8 e refinamentos propostos para a especificação de funções assíncronas, async / wait agora supera o código promocional pela primeira vez reduzindo a sobrecarga das funções assíncronas.

Para facilitar a depuração, o Chrome DevTools também melhora os rastreamentos de pilha para incluir a parte assíncrona do rastreamento de pilha.

O V8 é um mecanismo JavaScript de código aberto do Google que usa navegadores baseados no Chrome e no Chromium, bem como o Node.js. O V8 está disponível sob uma licença do estilo BSD. Contribuições são bem-vindas através do projeto V8 GitHub sob o código de conduta Chromium.

Publicado em

Projeto Diablo.JS

Após navegar no mundo do código fonte para jogos, encontrei um projeto já abandonado a alguns anos chamado Diablo.js. Ele é um projeto simples que utiliza 1 arquivo HTML, 1 arquivo JS (não que isso seja bom) e diversasimagens para simular o jogo Diablo 2.

Como esse jogo consumiu muitas horas da minha vida, pensei em usa-lo como uma ferramenta para praticar programação e reviver o passado.Então fiz um fork dele e comecei a trabalhar em diversas alterações.

O objetivo do projeto é o seguinte:

  • “Atualizar” o código JavaScript para ES6.
  • Manter o projeto em um formato fácil de executar para outros que estão aprendendo a programar ou queira brincar com o código.
  • Melhorar o posicionamento e quantidade monstros e itens aleatórios.
  • Aumentar o mapa.
  • Permitir que o personagem morra.
  • Corrigir bug de colisão e barreiras físicas (paredes e objetos).
  • Permitir escolher outros personagens.
  • Adicionar ao menos 1 habilidade com o botão direito.

Não sei se tudo será possível, mas um objetivo fica difícil chegar a algum lugar.

Tendo dito isso, aqui vão algumas observações sobre o jogo para que você que está interessado em contribuir possa começar a fazer. Se você quiser fazer alterações, comentar cada classe e função trabalhada é muito importante!

Converter funções em classes

Já fiz isso para praticamente todas as classes, mas algumas ainda precisam ser ajustadas, as propriedades precisam ter nomes mais uteis que x, y e z.

Separar arquivos

Não é opção mais performática, mas para manter o código mais fácil de ler, seria interessante separar as classes e funcionalidades em arquivos diferentes.

Imortal

Esse aqui é o Diablo Imortal, o bárbaro não morre mesmo chegando a zero de vida.

Paredes

Além de ser possível “pisar” nas paredes, é possível atacar e ser atacado através delas

Piso e Limite do Mapa

Consegui adicionar paredes, objetos e piso indo para a diagonal esquerda, mas para o outro lado não tem força que renderize o chão.

Talvez seja possível resolver esse problema com paredes, mas tanto o jogador quanto os inimigos podem sair do limite do mapa. Dependendo, os inimigos começaram de fora do mapa.

Contador de ouro

Não que ele tenha utilidade na versão atual, mas seria legal saber quanto de ouro o personagem já coletou