Tag: Programação

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”

Publicado em

Duas maneiras de unir vetores em JavaScript:

Você sabe como unir vetores?

Este artigo mostrará duas maneiras de unir vetores e retornar um novo vetor.

Serão utilizados os operadores Spread e Concat.

// Duas formas de unir vetores
const circ = [‘círculo’, ‘esfera’];
const quadr = [‘quadrado’, ‘cubo’];

// Usando o Concat para unir os vetores:
cons unirVet = [].concat(circ, quadr);

// Usando o Spread para unir os vetores:
const unirSpread = [...circ, ...quadr];

// E o resultado será:
console.log(unirSpread);

// [‘círculo’, ‘esfera’, ‘quadrado’, ‘cubo’]

Você também pode escrever o método Concat deste modo:

const circ = [‘círculo’, ‘esfera’];
const quadr = [‘quadrado’, ‘cubo’];

const unirVetor = circ.concat(quadr);
console.log(unirVetor);

E o resultado será:
// [‘círculo’, ‘esfera’, ‘quadrado’, ‘cubo’]

console.log(circ); // [‘círculo’, ‘esfera’];
console.log(quadr); // [‘quadrado’, ‘cubo’];

Este modo não altera o vetor existente.

Comparando os dois modos do concat:
// Versão 1
cons unirVet = [].concat(circ, quadr);

// Versão 2
const unirVetor = circ.concat(quadr);

A versão 1 cria uma nova matriz e não manipula uma matriz existente. Visualmente falando, a versão 2 parece adicionar a matriz de quadrados à matriz de círculos.

A diferença entre Spread e Concat:

Spread:

O Spread quebra um array ou uma string em múltiplos elementos. Se você possui um array e quer criar um array com o existente fazendo parte dele, você pode usar o Spread.

let umaString = "Olá Mundo";

console.log(umaString); // exibe a string

console.log(...umaString); // exibe cada caracter

let umVetor = [11,22,33,44,55,66]; //cria um vetor

console.log(umVetor); // mostra conteúdo o vetor

console.log(...umVetor); // mostra o conteúdo de cada índice do vetor

Concat:

Já o Concat cria um novo vetor unindo os elementos que foram passados como parâmetro, não alterando a si mesmo ou aos argumentos passados, mas criando um novo vetor contendo uma cópia de si e dos argumentos.

A cópia é uma referência aos objetos. Se o objeto original for modificado, as mudanças serão visíveis no original e na cópia.

Strings e numbers (diferente dos objetos String e Number), o concat copia os valores de strings e numbers para o novo vetor, mas qualquer alteração no novo vetor não refletirá no original.

// Cria uma função que concatenará
// o vetor e a variável
function combinaVetor(vetor1, vetor2){ 
    return [].concat(vetor1, vetor2);
} 

// Crie um vetor
const ehVetor = ['carro', 'moto', 'onibus'];

// Crie uma variável
const notVetor = 7;

// Chamada da função
combinaVetor(ehVetor, notVetor);

// [“carro”, “moto”, “onibus”, 7]

Unindo arrays com Push:

Quando você utilizar o método Push, você não criará um novo array, mas sim manipulando um existente:

const meninos = ["joao", "josé"];
const meninas = ["maria", "vanessa"];
const alunos = meninos.push(...meninas);

console.log(alunos); //Quando você usa o push, ele retornará o tamanho do vetor unido.
console.log(meninos); 
["joao", "josé", "maria", "vanessa"] // Retorna o vetor meninos modificado 

console.log(meninas);
 ["maria", "vanessa"]

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

Publicado em

Como criar um cartão de crédito com a biblioteca Card

Você já conhece a biblioteca Card criada por Jesse Pollak?

Esta biblioteca auxilia você a criar um cartão de crédito utilizando poucas linhas de código. Com ela, você possui acesso aos mais variados tipos de cartão de crédito, e consegue visualizar em tempo real as informações sendo inseridas no cartão, alterando seus dados conforme você digitar. Tudo nesta biblioteca foi criado com CSS, HTML e JavaScript puro, e não necessita de imagens adicionais.

A biblioteca reconhece diversas formas de cartão de crédito e você não precisa alterar nada (além dos dados a serem inseridos no cartão). Com ela, você terá uma pré-visualização em tempo real do seu cartão.

Usando sem jQuery:

Para utilizar a biblioteca Card, você precisará incluir o arquivo card.js no seu HTML. Não será necessário um link para o CSS, porque o arquivo JavaScript já fará isso por você.

<!-- no final do BODY -->
<!-- CSS está incluso no arquivo JavaScript -->
<script src="/path/to/card.js"></script>

Assim que você incluir este arquivo, poderá inicializar o Card.

let cartao = new Card({
    // seleciona a classe #formCard
    form: '#formCard', 
    // seleciona o container que mostra
    // o cartão na tela
    container: '.card-wrapper',

Instalando a biblioteca Card por bower:

Se você está usando o bower, poderá instalar o card.js com este comando:

bower install card --save

Se você está usando npm, você poderá instalar o card.js assim:

npm install --save card

Criando os campos de preenchimento do cartão:

O cartão renderiza com espaços reservados para cada campo de preenchimento: número do cartão, nome, validade e cvc.

<form id="formCard">
    <div>
        <input type="text" name="number" placeholder="Numero Cartão" />
        <input type="text" name="name" placeholder="Nome" />
    </div>
    <div>
        <input type="text" name="expiry" placeholder="Data" />
        <input type="text" name="cvc" placeholder="CVC" />
    </div>
    <div>
        <input id="bt" type="submit" value="Enviar" />
    </div>
</form>

Criando um cartão:

let cartao = new Card({
    form: '#formCard',
    container: '.card-wrapper',
    // Altera o placeholder
    placeholders: {
        name: 'Seu nome aqui'
    }
});

Para traduzir o cartão para sua língua nativa, você pode alterar adicionando os objetos a seguir:

// Altera o placeholder
placeholders:{
    name: 'Seu nome aqui'
}
messages: {
    validDate: 'Data\nexpiração',
    monthYear: 'mes/ano',
},
O código deverá ficar assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Biblioteca Card</title>
</head>
<body>
    <script src="card-master/dist/card.js"></script>
    <div class='card-wrapper'></div>
    <form id="formCard">
        <div>
            <input type="text" name="number" placeholder="Numero Cartão" />
            <input type="text" name="name" placeholder="Nome" />
        </div>
        <div>
            <input type="text" name="expiry" placeholder="Data" />
            <input type="text" name="cvc" placeholder="CVC" />
        </div>
        <div>
            <input id="btn" type="submit" value="Enviar" />
        </div>
    </form>
    <script>
        let cartao = new Card({
            form: '#formCard',
            container: '.card-wrapper',
            // Altera o placeholder
            placeholders: {
                name: 'Seu nome aqui'
            }
        });
    </script>
</body>
</html>

Para mais informações sobre a biblioteca, acesse o link: https://github.com/jessepollak/card

E aí, gostou do artigo? Deixe seu comentário abaixo!

Publicado em

O que o programador JavaScript deve saber

JavaScript é uma das principais linguagens de programação mais requisitadas no mercado de trabalho atual. No entanto, os empregadores geralmente procuram uma combinação de habilidades. Descubra o que mais você deve adicionar ao seu currículo para conseguir o seu próximo trabalho JavaScript.

A pesquisa vem do CV Compiler, uma empresa que, como o próprio nome sugere, ajuda a criar um currículo convincente para desenvolvedores e outros no setor de software. Para fornecer esta orientação, mantém-se continuamente atualizado com as demandas dos empregadores. Para esta pesquisa dos desenvolvedores de habilidades em JavaScript, a equipe do Compilador de CV precisou de 300 especificações de trabalho para desenvolvedores de JavaScript de AngelList, StackOverflow, LinkedIn e páginas de carreira de empresas de tecnologia em rápido crescimento em todo o mundo. Em seguida, usando sua própria ferramenta de análise de texto, eles identificaram os termos que foram mencionados com mais frequência e criaram este gráfico:

linguagens de programação, metodologias de programação e assim por diante. Na verdade, isso pode não ter sido a primeira coisa que você percebeu – você pode ter sido atingido pelo domínio do React. Mesmo se você permitir que qualquer abertura de trabalho para o React exija JavaScript, a demanda por essa estrutura parece ser esmagadora. Como existem apenas 300 listagens de empregos e o principal concorrente da React, Angular também tem uma alta proporção de menções, algumas aberturas precisam exigir múltiplas estruturas ou uma ou mais alternativas. Mesmo assim, o recorde de 267 da React é excelente, o Angular tem 195 pontos de crédito, enquanto o Vue apenas recebe 44 menções.

Comentando sobre isso no blog Game of Frameworks, Andrew Stetsenko escreve:

“Como você deve ter notado, o Vue.js não era tão alto em nossa classificação de habilidades. Eu acho que pode haver várias razões para isso. Primeiro de tudo, nem toda empresa está pronta para transferir seus projetos para o Vue.js e descartar soluções de front-end mais estáveis ​​e comuns. Em segundo lugar, os empregadores podem querer que os desenvolvedores aprendam o Vue.js enquanto trabalham, por isso eles não mencionam nas especificações iniciais do trabalho.”

Continue lendo “O que o programador JavaScript deve saber”

Publicado em

Como usar o setTimeOut

setTimeout()

Assim como a função setInterval(), o setTimeout() é uma função temporizadora que é utilizada para chamar funções de retorno após um tempo estipulado. A diferença entre essas duas funções temporizadora é que o setTimeout() chama a função apenas uma vez, e o setInterval() chama a função indefinidamente no intervalo de tempo passado, parando somente quando se utiliza a função clearInterval().

Sintaxe:

// sintaxe da função setTimeout, que define um temporizador
// que disparará uma ação definida em tempo estipulado
setTimeout(função, milissegundos, param1, param2, …);
Onde:

função: é a função que será executada no intervalo de tempo predefinido;

milissegundos: é o intervalo de tempo estipulado para a chamada da função;

param1, param2: são os parâmetros utilizados.

HTML no exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exercicio setTimeOut</title>
</head>
<body>
    <section id="textoCompleta">
        <!-- O cabeçalho -->
        <h1>O texto irá preencher-se sozinho!</h1>
        <p id="type"></p>
    </section>
    <script src="main.js"></script>
</body>
</html>
E no JavaScript:
// Cria-se uma função, que possui o texto a ser mostrado
(function () {
    const text = "Este texto irá se preencher de forma automática. Estou usando o setTimeOut para definir o tempo em que as palavras serão escritas!"
    const textArea = document.getElementById("type");
    textArea.innerHTML = "";
    const textLength = text.length;

    // Nesta parte, cria-se uma variável contador e uma função
    // que irá definir o intervalo de tempo em que cada letra 
    // será mostrada de forma automática na tela.
    let contador = 0;
    function mostrarTexto() {
        if (contador <= textLength) {
            const letra = text.charAt(contador);
            textArea.textContent += letra;
            // Função setTimeOut define o tempo em milissegundos que cada letra
            // levará para ser exibida na tela.
            setTimeout(function () {
                mostrarTexto();
            }, 100);
            contador++;
        } else {
            return false;
        }
    }
    mostrarTexto();
})();

Como funciona o exemplo?

Este exemplo cria uma função que exibe letra após letra do texto inserido, de forma automática, no intervalo de tempo definido. Na função abaixo determinamos qual o texto que será inserido.

const text = "Texto que será exibido na tela!"
    // O texto precisa ser inserido em uma tag html, e essa tag deve possuir um id
    // pois este id será utilizado para identificar em qual parágrafo o texto será inserido
    const textArea = document.getElementById("type");
    textArea.innerHTML = "";
    const textLength = text.length;

Função setTimeout():

A função setTimeout irá definir o tempo em que cada letra do texto irá ser exibida na tela do usuário. Em conjunto a isto, podemos utilizar o método charAt(), que irá retornar os caracteres presentes no texto! O código textArea.textContent += letra irá retornar uma letra por vez, de maneira sequencial, da esquerda para a direita.

let contador = 0;
    function mostrarTexto() {
        if (contador <= textLength) {
            // Este código captura os caracteres do texto
            const letra = text.charAt(contador);
            // e os mostram de forma sequencial, da esquerda para a direita
            // tornando possível que o texto apareça de forma sequencial, letra por letra
            textArea.textContent += letra;
            // Função setTimeOut define o tempo em milissegundos que cada letra
            // levará para ser exibida na tela.
            setTimeout(function () {
                mostrarTexto();
            }, 100);
            contador++;
        } else {
            return false;
        }
    }

Gostou deste artigo? Deixe o seu comentário abaixo:

Publicado em

Exercício fácil – função setInterval()

Você sabe utilizar o temporizador setInterval?

O setInterval é uma função temporizadora do JavaScript. Ela é utilizada para executar uma função de retorno após um determinado tempo a ser estipulado. É uma função que executará infinitamente na sua página, a menos que você estipule uma função de pausa, chamada clearInterval() ou que você feche a página. É uma função que deve ser utilizada com cuidado pois, se uma pausa não for estipulada, poderá levar a uma sobrecarga de memória e causar travamento e lentidão na sua página web.

Requisitos:

para este exerício, será necessário conhecimento das funções setInterval e clearInterval. Caso você ainda não tenha lido o artigo sobre como utilizar o setInterval e o clearInteval, acesse o link: Como usar o setInterval

Exercício:

Utilizando os seus conhecimentos em JavaScript e temporizadores, crie uma função que utilize o temporizador setInterval() e o clearInterval() para criar um loop que exiba a mensagem “Este é um exemplo de contador, estamos no número:  x“.

Onde:  X é o número atual no contador.

Observação:

Esta mensagem deverá aparecer no console vinte vezes e a cada três segundos, ou seja, o contador também deverá aumentar um número a cada três segundos.

PARTE 1:

Você deverá criar duas variáveis. Crie uma variável para o contador e uma variável para o limite, que servirá para estipular um limite de contagem:

// Crie as variáveis para o contador e limite
// respectivamente. Elas servirão para estipular
// a quantidade de vezes que a mensagem será exibida
let contador;
let limite;

PARTE 2:

Crie uma variável para o temporizador. Esta variável irá receber a função setInterval() e, dentro da função setInterval(), você deverá criar uma condicional que irá estipular quando a função clearInterval() será utilizada.

// Criando uma variável para o temporizador, use a função
// setInterval, para definir o tempo que levará para a 
// mensagem ser exibida.
let timer = setInterval(function(){
    // Dentro da função, estipule um clearInterval
    // que deverá ser executada quando o contador chegar ao limite
    // Para isso, utilize uma estrutura condicional
    if (){
        clearInterval();
    }
})

Resolução:

O seu console.log ficará assim:

Gostou deste exercício? Conseguiu resolvê-lo facilmente? Deixe o seu comentário abaixo!

Publicado em

Como usar o setInterval

setInterval e clearInterval():

O setInterval() é uma função temporizadora. Ela executa uma função de retorno após determinado tempo. A função setInterval() executará infinitamente, até que você execute a função clearInterval().

Se você é iniciante, você pode pular a explicação Como funciona.

Como funciona?

Sendo uma função assíncrona, a instrução a ser executada é lançada no Event Loop. Mas o que é Event Loop? É uma instrução síncrona, ou seja, quando ela estiver executando, a thread ficará bloqueada e, assim que terminar, a próxima instrução é executada. Como o setInterval() executará infinitamente, sabemos que ele adicionará uma instrução ao Event Loop a cada quantia de tempo que for definida.

Definição:

O setInterval() chama uma função em intervalos de tempo definidos. Ele continuará chamando a função até que o clearInterval() seja chamado, ou que a página seja fechada.

Sintaxe:

// sintaxe da função setInterval, que define um temporizador
// que disparará uma ação definida em tempo estipulado
setInterval(function, miliseconds, parameter1, parameter2, …);
Onde:

function: é a função que será executada;

miliseconds: é o intervalo em milisegundos(ms) em que o código será executado. Se o valor especificado for menor que 10, o valor 10 será utilizado.

parameter: parâmetros para passar para a função.

Exemplo:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>setInterval() e clearInterval()</title>
</head>

<body>
    <button id="btn">Clique aqui para iniciar</button>
    <script src="main.js"></script>
</body>

</html>
E no JavaScript:
// Crie uma variável
let variavel;

// Crie uma função, utilizando essa variável para 
// declarar o intervalo em que será disparado.
function minhaFuncao() {
    variavel = setInterval(consoleLog, 2000);
}
// Mensagem que será mostrada no console
function consoleLog() {
    console.log("Ola mundo!");
}

// Função será chamada utilizando o evento onclick
document.getElementById("btn").onclick = minhaFuncao;

O clearInterval() limpa o timer configurado pela função setInterval(). Ele desativa a função e não executa a função definida pelo temporizador.

Sintaxe:

// Função clearInterval travará a execução do setInterval
// bloqueando a ação definida pelo temporizador
clearInterval(id_do_setInterval)

Exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>setInterval() e clearInterval()</title>
</head>
<body>
    <button id="btn">Clique aqui para iniciar</button>
    <button id="btn2">Clique aqui para parar</button>
    <script src="main.js"></script>
</body>
</html>
E no JavaScript:
// Crie uma variável
let variavel;

// Crie uma função, utilizando essa variável para 
// declarar o intervalo em que será disparado.
function minhaFuncao() {
    variavel = setInterval(consoleLog, 2000);
}
// Mensagem que será mostrada no console
function consoleLog() {
    console.log("Ola mundo!");
}

// Função que será executada para bloquear
// a ação do temporizador definido no setInterval
function pararFuncao() {
    clearInterval(variavel);
}

// Função será chamada utilizando o evento onclick
document.getElementById("btn").onclick = minhaFuncao;
document.getElementById("btn2").onclick = pararFuncao;

Gostou deste artigo? Deixe o seu comentário abaixo:

Publicado em

Gráficos Line e Bar com Chart.js

Criando gráficos com Chart.js

Os gráficos de linhas e barras são gráficos muito utilizados no mundo empresarial. O gráfico de linha é usado para mostrar tendências, comparar conjuntos de dados, mostrar evoluções e diminuições de algum fenômeno. Apresenta a variação de valores dos dados em determinado período.

Se você ainda não viu o artigo Iniciando com Chart.js, acesse-o no link:https://www.mundojs.com.br/iniciando-com-chart-js/

LINHA:

O gráfico de linhas é uma maneira de mostrar os pontos de dados em uma linha. O gráfico em linha permite que um número de propriedades seja especificado para cada um dos conjuntos de dados.

Ao criar o seu documento HTML base, você deverá adicionar um Canvas na sua página.

<!-- adicione a tag canvas no seu HTML -->
<canvas id="myChart"></canvas>

Com o Canvas adicionado, você precisará incluir a biblioteca Chart.js na sua página.

<!-- o link a seguir direciona para a biblioteca online do Chart.js -->
<!-- a biblioteca também está disponível para download no site do Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

Para criar um gráfico do tipo Linha, você usará o seguinte código:

// criando um novo objeto, contendo o tipo, os dados
// e as opções que o gráfico terá.
let ctx = document.getElementById('myChart');

let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

Onde:

Type:

É o tipo de gráfico que será feito;

Data:

Os dados que serão inseridos no gráfico.

Options:

As customizações que você fará no seu gráfico.

TYPE:

Este valor define de qual tipo será o gráfico. Você deve utilizar ‘line’ para o formato LINHA.

// type:'line'

DATA:

Para a construção do gráfico, é necessário que os datasets contenham os valores a ser inseridos no gráfico. Para isto, cria-se um vetor com os valores necessários.

Você também poderá inserir uma legenda (label) para a linha do gráfico.

// O objeto data possui os valores dispostos no gráfico
data: {
    // Legendas das Linhas
    labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho'],
    datasets: [{
        // Legenda
        label: 'Meu primeiro gráfico',
        // Define-se a cor da linha.
        borderColor: 'rgb(245,222,179)',
        // Dados a serem inseridos nas barras
        data: [0, 10, 5, 2, 20, 12, 1],
    }]
}

OPTIONS:

Esse objeto define as opções a serem inseridas no seu gráfico. Confira as diversas customizações disponíveis para o seu tipo de gráfico em: https://www.chartjs.org/docs/latest/charts/line.html.

O exemplo a seguir utilizará a opção tension, que define se as linhas serão retas ou possuirão algum tipo de curvatura.

// Esta opção define se as linhas serão curvadas ou retas,
// use 0 para retas.
options: {
    elements: {
        line: {
            tension: 0
        }
    }
}

BARRAS:

O gráfico de barras mostra os valores dos dados com barras verticais. É muito utilizado para mostrar dados de tendências e comparação de vários conjuntos de dados. Cada barra retangular é correspondente a uma categoria e proporcional ao valor do dado na respectiva categoria.

De maneira semelhante à criação do gráfico em linhas, utilizaremos a mesma estrutura HTML para o gráfico de barras.

Para criar um gráfico do tipo Barra, você usará o seguinte código:

// criando um novo objeto, contendo o tipo, os dados
// e as opções que o gráfico terá.
let ctx = document.getElementById('myChart');
let myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

TYPE:

Este valor define de qual tipo será o gráfico. Você deve utilizar ‘bar’ para o formato BARRA VERTICAL e ‘horizontalBar’ para o formato BARRA HORIZONTAL.

// type: 'bar'
// type: 'horizontalBar'

DATA:

Assim como no gráfico em Linhas, é necessário que os datasets contenham um vetor com os valores a ser inseridos no gráfico. Você deve especificar também as cores de cada retângulo, sendo uma cor para cada valor no vetor. Também pode inserir legendas. Confira mais opções em: https://www.chartjs.org/docs/latest/charts/bar.html

// O objeto data possui os valores dispostos no gráfico
data: {
    // Legendas das Barras
    labels: ['Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
    datasets: [{
        // Legenda geral
        label: '$ em Vendas',
        // Dados a serem inseridos nas barras
        data: [10, 9, 12, 19, 21, 7],
        // Define as cores de preenchimento das barras
        // de acordo com sua posição no vetor
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        // Define as cores de preenchimento das bordas das barras
        // de acordo com sua posição no vetor
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
         ],
         // Define a espessura da borda dos retângulos
         borderWidth: 1
    }]
},

OPTIONS:

Esse objeto define as opções a serem inseridas no seu gráfico. Você também pode conferir as diversas opções de customização na documentação do Chart.js.

Neste exemplo será utilizada a opção beginAtZero, que tem a função de começar a barra no valor 0 do eixo X.

// Customização que define onde irá começar a ser erguida a barra
// começando pelo ZERO, no eixo X.
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

 

Publicado em

Novas atualizações Node.js 12

O Node.js recentemente lançou a versão 12 do Node.js, adicionando melhorias através da V8 JavaScript engine, melhora no desempenho de inicialização, módulos ES6, entre outros.

O projeto Node.js segue uma estratégia LTS (Long Term Support). Os desenvolvedores devem saber que as novas atualizações não estarão prontas em termos LTS até Outubro de 2019. Até lá, os desenvolvedores estão encorajados a reportar questões que eles encontrarem usando o Node.js 12, e essas questões serão resolvidas antes da versão LTS estar completa.

A versão Transport Layer Security (TLS) no Node.js está atualmente na versão TLS 1.3 por padrão, ela inclui numerosas mudanças na criação do protocolo e tornando sua configuração mais direta e segura. Mais além, a TLS 1.3 inclui melhorias no sigilo de encaminhamento e modos de criptografia mais seguros.

O Node.js 12 deixa mais fácil a configuração dos limites do heap, melhorando significativamente o desempenho ao trabalhar com grandes quantias de dados. A atualização para os limites do heap configura o tamanho do heap JavaScript como uma função de memória disponível, em lugar dos padrões V8 para navegadores da web.

Continue lendo “Novas atualizações Node.js 12”