Exercício fácil – recursão com JavaScript

Neste exercício, veremos antes uma função que utiliza recursão. Essa função retorna um array de números inteiros começando com 1 pelo número passado para a função.

Teremos um exemplo para você tirar uma base de como resolver o exercício.

No nosso caso base, a função recursiva não precisa mais se chamar, sendo um caso simples em que o valor de retorno já é conhecido. Também haverá uma chamada recursiva que executa a função original com os argumentos diferentes.

No nosso exemplo base, temos uma função recursiva que retorna um vetor que contém os números de 1 a n. Então, se passarmos um valor n, ele deverá adicionar valores ao vetor até chegar a esse valor. Por exemplo: n = 10. O vetor resultante deverá ser [1, 2, 3, 4, 5, 6, 7, 8, 9, 10}. Se o valor de n for menor que 1, retornará um vetor vazio:

function contador (n){
    if (n < 1){
        return [];
    } else {
        let contadorArray = contador (n - 1);
        contadorArray.push(n);
        return contadorArray;
    }
}

console.log(contador(20));
/* [
   1,  2,  3,  4,  5,  6,  7,
   8,  9, 10, 11, 12, 13, 14,
  15, 16, 17, 18, 19, 20
] */

No começo, isso parece contra-intuitivo, com o valor de n diminuindo, mas os valores do vetor aumentando. Isso acontece pois o envio ocorre por último, após o retorno da chamada recursiva. Quando n é inserido, a contagem (n-1) já foi avaliada e retornada [1, 2, …, n-1].

Vamos ao exercício:

No nosso exercício, utilizaremos a recursão para retornar um array que contém os números inteiros que vão de n a 1, com base no parâmetro n. Se n for menor que 1, retorna um array vazio, senão, retorna os valores de n a 1. Exemplo:

n = 10;

[10, 9, 8, 7, 6, 5, 4, 3, 2, 1].

Use o exemplo anterior como base para este exercício. Não use o método push!

Você pode realizar o download da resolução deste exercício aqui:

[download id=”3715″]

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 é o Prettier?

O Prettier, segue o link oficial (https://prettier.io), é um formatador de código que visa ajudar os desenvolvedores a escrever aplicações que são mais fáceis de entender e mais uniformizadas entre as diversas formas de programar que existem. Atualmente ele fornece formatação de código para as seguintes linguagens:

Para que você entenda melhor o que ele faz, o Prettier reescreve seu código inteiro do zero, ele lerá linha a linha e fará alterações com base em padrões de formatação de espaço, comprimento de linha entre outras práticas comuns adotadas por diversos desenvolvedores (ou que ao menos deveria ser).

Por exemplo, pegue o seguinte código:

foo(arg1, arg2, arg3, arg4);

Ele se encaixa em uma única linha, para que fique como está. No entanto, todos enfrentamos essa situação:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

De repente, nosso formato anterior para a função de chamada é interrompido porque é muito longo. O Prettier fará o trabalho meticuloso de reimprimí-lo assim para você:

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

O Prettier impõe um estilo de código consistente (ou seja, a formatação do código que não afeta o AST) em toda a sua base de código porque desconsidera o estilo original *, analisando-o e reimprimindo o AST analisado com suas próprias regras que assumem o comprimento máximo da linha em conta, agrupando o código quando necessário.

Você pode realizar o download por npm:

npm install --save-dev --save-exact prettier
# ou global
npm install --global prettier

O prettier-vscode pode ser instalado usando a barra lateral de extensão. Procure pelo Prettier – formatador de código. Também pode ser instalado usando ext install esbenp.prettier-vscode na paleta de comandos. Verifique seu repositório para configuração e atalhos.

Se você deseja ativar e desativar o formatador, instale vscode-status-bar-format-toggle.

Gostou deste artigo? Comente abaixo!

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

Bill Gates em 2015 falando de pandemia

 

Saindo um pouco das nossas postagens sobre JavaScript. Gostaríamos de compartilhar esse vídeo de 5 anos atrás que é uma gravação da palestra do Bill Gates fez no Ted Talks falando que não estávamos (e pelo jeito ainda não estamos) preparados para a próxima grande epidemia.

 

É incrível algumas coisas que ele menciona e como realmente não foi feito muito para controlar/impedir o efeito de um vírus como o coronavírus desde lá.

 

Ao final do vídeo ele disse uma coisa que realmente marcou. Lembrando que foi em 2015

If we start now, we can be ready for the next epidemic

 

Em Português

Se começarmos agora, poderemos estar prontos para a próxima epidemia

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!

Criando e lendo arquivo com File System e NodeJS

O módulo File System do Node.js permite o trabalho com o sistema de arquivos do computador. Com ele, podemos criar, atualizar, ler e excluir diversos tipos de arquivos, como .txt, .html, entre outros. Neste exercício, criaremos um arquivo txt com um pequeno texto e realizar sua leitura. O conteúdo deverá ser exibido no shell do NodeJS. Vamos começar?

1º Passo:

Crie um arquivo JavaScript chamado writeFile.js. Neste arquivo você precisará:

  • Criar uma requisição para o módulo file system;
  • Criar uma variável texto que receberá o seguinte parágrafo: Este é o texto que usaremos como exemplo para salvar em nosso arquivo txt;
  • Utilizar o método writeFile para criar um arquivo chamado ‘newfile.txt’ e inserir neste arquivo o conteúdo da variável texto.

2º Passo:

Crie um arquivo JavaScript chamado readFile.js. Neste arquivo, você precisará:

  • Criar uma requisição para o módulo file system;
  • Utilizar o método readFile para leitura do conteúdo do arquivo ‘newfile.txt’. Não esqueça de adicionar o ‘utf-8’ para codificação dos caracteres;
  • Utilize o console.log para mostrar o conteúdo do nosso arquivo no terminal do NodeJS.

Sua saída deverá ser assim:

Você pode realizar o download do código fonte aqui:

[download id=”3594″]

Exercício fácil: async e await

Async e await são extensões das promises. Quando uma função assíncrona é chamada, ela retorna uma promise. Uma função assíncrona pode conter uma palavra-chave await, que pausa a execução da função e espera pela resolução da promise passada, retomando a execução após a resolução da promise e retornando o valor resolvido. A proposta das funções async/await é simplificar o uso de promises. Assim como promises são similares a callbacks estruturados, as funções async/await são similares à junção de generators com promises. Caso você não conheça o async/await, recomendo que antes de prosseguir, leia este artigo: Entenda o async e await.

Dito isto, vamos ao exercício:

Passo 1:

Crie uma função que após 5 segundos, dobre o resultado do número passado como parâmetro. Essa função deverá retornar uma promise. Use o setTimeOut como temporizador.

O corpo da função abaixo servirá como base para este exercício:

function dobrarEm5Segundos(x) {
  return new Promise( => {
    setTimeout(() => {      
    });
  });
}

Realizado este passo, podemos seguir adiante:

Passo 2:

Crie uma função assíncrona que irá receber um parâmetro x. Crie três variáveis: a, b e c dentro do corpo da função. Cada uma dessas variáveis receberá um await da função do passo anterior. Você deve passar como parâmetros dessa função os número 10, 20 e 30, respectivamente.

Retorne a soma de todos esses elementos, inclusive o parâmetro da função assíncrona.

async function addAsync(x) {
  let a;
  let b;
  let c;
  return;
}

Para mostrar o resultado no console, utilize o .then():

addAsync().then(() => {
  console.log();
});

Você pode realizar o download do exercício resolvido aqui:

[download id=”3580″]

Gostou deste exercício? Comente abaixo:

Exercício fácil: Usando Promises

Olá pessoal! Neste exercício iremos praticar um pouco o uso de promises. As promises vem do termo “promessa”, que representa um valor que pode estar disponível em algum momento no futuro, no presente, ou nunca estar disponível. Ele é um objeto utilizado em processamento assíncrono.

Caso você ainda não saiba o que são promises, verifique o link abaixo antes de prosseguir com o seu exercício:

Vamos ao exercício:

Primeiramente, crie um arquivo chamado scripts.js. Neste arquivo, iremos criar uma função de soma que precisará ter como resultado um número par. Para isso, você precisará criar os seguintes callbacks:

  • callbackSucesso() = trará uma mensagem de sucesso, dizendo que a operação foi concluída com sucesso e que o número somado é par.
  • callBackError() = trará uma mensagem de erro, dizendo que a operação falhou, trazendo um número impar (resultado da soma).

Tome como base o seguinte código:

function somar(){
    if (){
        callbackSucesso();
    } else {
        callbackError();
    }
}

function callbackSucesso(){

}

function callbackError(){
 
}

É muito importante a realização deste exercício para darmos continuidade!

Transformando o exercício em uma promise:

Utilize a função anterior para criar uma promise que tenha:

  • then: uma mensagem de sucesso, informando que a operação foi concluída com sucesso, dizendo se é par ou ímpar e trazendo o número;
  • catch: uma mensagem de erro, informando que a operação possui erro, dizendo se é par ou ímpar e trazendo o número.

Dica: Utilize uma promise com função (resolve, reject).

Observação: Conhecimentos aritméticos serão necessários para a realização deste exercício.

Use este arquivo js como referência:

function soma (){
    let p = new Promise() {        
        if (){
            resolve();
        } else {
            reject();
        }
    })
    
    p.then(() {
    }).catch(() {
    })
}

 

Resolução:

Segue abaixo o arquivo de solução para as respectivas fases do exercício

[download id=”3554″]