Vue Native

Recentemente pesquisando sobre vue.js notei o vue-native que nada mais é que um react-native mas usando o vue, oque na minha opinião é bem mais simples que o react, pois o mesmo conta com estrutura do vue.js o que é extremamente simples, ficou mais ainda mais simples fazer apps para android e ios.

 

Bom vamos a instalação, vou listar a baixo oque é preciso ter instalado para podermos instalar o vue-native:

  • Node >= 6.0 ( https://nodejs.org/en/download/ )
  • npm >= 4.0 (já vem instalado com o nede )
  • react native CLI (npm install -g expo-cli)
  • expo CLI (npm install -g expo-cli)
  • vue-native (npm install -g vue-native-cli)

 

Deixei apenas os comandos dos do react-native e expo pois o node pode ser instalado com um instalador independente do sistema operacional lembre-se de instalar os mesmos na ordem listada.

Vamos ao que interessa a criação do nosso app para isso utilizaremos o seguinte comando: “vue-native init nomeDoProjeto” lembre-se de tirar as aspas para executar o comando.

Se você se deparou com isso também na name dentro so expo pasta digitar o nome do seu projeto e sem seguida pode dar “yes” quando aparecer.

Com nosso app já criado vamos acessar ele via terminal e rodar o chamando para inicializar ele “npm start”, assim que o comando funcionar ele irá abrir seu navegador na seguinte pagina:

Já nessa pagina podemos decidir como iremos usar nosso app, por emulador de android ou ios ou até mesmo pelo nosso celular baixando o app do expo

Expo android https://play.google.com/store/apps/details?id=host.exp.exponent

Expo ios https://itunes.apple.com/br/app/expo-client/id982107779?mt=8

No meu caso vou iniciar ele pelo emulador IOS.

Bom note que esse é o nosso código com a estrutura do vue.js o mesmo cria uma variável com o texto o e exibe na tela do app no emulador.

JavaScript: O objeto Date

Neste post veremos um resumão do objeto Date do JavaScript e como manipular seus atributos.

A instância do objeto Date representa um único ponto no tempo. Apesar de ter o nome Date (data em inglês), este objeto também lida com o tempo.

Inicializando o objeto Date

Inicializamos um objeto Date usando

let d = new Date();

Isso criará um objeto Date apontando para o o momento atual. Internamente, as datas são expressas em milissegundos desde 1º de janeiro de 1970 (UTC). Se passarmos 0, receberemos um objeto Date que representa a hora em 1º de janeiro de 1970 (UTC):

let d = new Date(0);

Se passarmos uma string ao invés de um número, o objeto Date usará o método de análise para determinar a data que você está passando. Exemplos:

// Caso o apresente apenas o ano, o mês default será janeiro
// Caso não apresente o dia, o default será o primeiro
// Caso não apresente o horário, o default será 00:00:00
// Lembrando que padrões americanos de data funcionam com mês, dia e ano

new Date('2018-07-22') // Formato aaaa-mm-dd
new Date('2018-07') // 1º de Julho 2018 - 00:00:00
new Date('2018') // 1º de Janeiro 2018 - 00:00:00
new Date('07/22/2018') // Formato mm-dd-aaaa
new Date('2018/07/22') // Formato aaaa-mm-dd
new Date('2018/7/22') // Formato aaaa-mm-dd
new Date('July 22, 2018')
new Date('July 22, 2018 07:22:13')
new Date('2018-07-22 07:22:13')
new Date('2018-07-22T07:22:13')
new Date('25 March 2018')
new Date('25 Mar 2018')
new Date('25 March, 2018')
new Date('March 25, 2018')
new Date('March 25 2018')
new Date('March 2018') // 1º de Março de 2018 - 00:00:00
new Date('2018 March') // 1º de Março de 2018 - 00:00:00
new Date('2018 MARCH') // 1º de Março de 2018 - 00:00:00
new Date('2018 march') // 1º de Março de 2018 - 00:00:00

O mínimo deve ter 3 parâmetros, mas a maioria dos mecanismos JavaScript também interpreta menos que estes:

new Date(2018, 6) // Dom jul 01 2018 00:00:00 GMT + 0200 (horário de verão da Europa Central)
new Date(2018) // Qui Jan 01 1970 01:00:02 GMT + 0100 (Hora Padrão da Europa Central)

Em qualquer um desses casos, a data resultante é relativa ao fuso horário do seu computador. Isso significa que dois computadores diferentes podem gerar um valor diferente para o mesmo objeto de data. O JavaScript, sem qualquer informação sobre o fuso horário, considerará a data como UTC ou tempo universal coordenado (saiba mais acessando este link) e executará automaticamente uma conversão para o fuso horário atual do computador.

Então, resumindo, você pode criar um novo objeto Date de 4 maneiras:

  • não passando parâmetros, cria um objeto Date que representará a data e hora do momento que o objeto foi criado.
  • passando um número, que representa os milissegundos de 1 de janeiro de 1970 às 00:00 GMT.
  • passando uma string, que representa uma data.
  • passando um conjunto de parâmetros, que representam as diferentes partes de uma data.

 

Fusos horários

Ao inicializar uma data, você pode passar um fuso horário, portanto, a data não é assumida como UTC e depois convertida para o fuso horário local. Você pode especificar um fuso horário adicionando-o no formato +HORAS ou adicionando o nome do fuso horário entre parênteses:

new Date('July 22, 2018 07:22:13 +0700')
new Date('July 22, 2018 07:22:13 (CET)')

ATENÇÂO: Se você especificar um nome de fuso horário errado entre parênteses, o JavaScript será padronizado como UTC sem reclamar. Mas, se você especificar um formato numérico incorreto, o JavaScript se queixará com um erro de “Data Inválida”.

 

Conversões de data e formatação

Dado um objeto Date, existem muitos métodos que gerarão uma string a partir dessa data:

const date = new Date('July 22, 2018 07:22:13')

date.toString() // "Sun Jul 22 2018 07:22:13 GMT+0200 (Central European Summer Time)"
date.toTimeString() //"07:22:13 GMT+0200 (Central European Summer Time)"
date.toUTCString() //"Sun, 22 Jul 2018 05:22:13 GMT"
date.toDateString() //"Sun Jul 22 2018"
date.toISOString() //"2018-07-22T05:22:13.000Z" (ISO 8601 format)
date.toLocaleString() //"22/07/2018, 07:22:13"
date.toLocaleTimeString()	//"07:22:13"
date.getTime() //1532236933000
date.getTime() //1532236933000

 

Os métodos getter do objeto Date

Um objeto Date oferece vários métodos para verificar seu valor. Tudo isso depende do fuso horário atual do computador:

const date = new Date('July 22, 2018 07:22:13')

date.getDate () // 22 (os valores do dia iniciam na base 1)
date.getDay () // 0 (0 significa domingo, 1 significa segunda ..)
date.getFullYear () // 2018
date.getMonth () // 6 (O valor dos meses inicia no 0)
date.getHours () // 7
date.getMinutes () // 22
date.getSeconds () // 13
date.getMilliseconds () // 0 (não especificado quando criado o objeto)
date.getTime () // 1532236933000
date.getTimezoneOffset () // - 120 (irá variar dependendo de onde você estiver e quando você verificar - este é o CET durante o verão). Retorna a diferença de fuso horário expressa em minutos

Caso você precise, existem versões UTC equivalentes desses métodos, que retornam o valor UTC em vez dos valores adaptados ao seu fuso horário atual:

date.getUTCDate () // 22
date.getUTCDay () // 0 (0 significa domingo, 1 significa segunda ..)
date.getUTCFullYear () // 2018
date.getUTCMonth () // 6 (inicia em 0)
date.getUTCHours () // 5 (não 7 como acima)
date.getUTCMinutes () // 22
date.getUTCSeconds () // 13
date.getUTCMilliseconds () // 0 (não especificado)

 

Os métodos setter do objeto Date

Da mesma forma, o JavaScript possue diversos métodos que servem para definir (setar) novos valores no objeto Date.

let d = new Date();

// Os seguintes métodos definem:
setDate(2) // o dia como um número (1-31)
setFullYear(2020) // Define o ano.
setFullYear(2020, 5, 20) // Define o ano, mês e dia.
setHours(22) // Define as horas (0-23)
setMilliseconds(100) // Define os milissegundos (0 a 999)
setMinutes(55) // Define os minutos (0-59)
setMonth(0) // Define o mês (0-11). 0 é Janeiro
setSeconds(1) // Define os segundos (0-59)
setTime(125033) // Define o tempo (milissegundos desde 1º de janeiro de 1970)

 

Comparando duas datas

Você pode calcular a diferença entre duas datas usando Date.getTime():

const date1 = new Date('July 10, 2018 07:22:13')
const date2 = new Date('July 22, 2018 07:22:13')

const diff = date2.getTime () - date1.getTime () // diferença em milissegundos

 

Da mesma forma, você pode verificar se duas datas são iguais:

const date1 = new Date('July 10, 2018 07:22:13')
const date2 = new Date('July 10, 2018 07:22:13')

if (date2.getTime () === date1.getTime ()) {   
    // datas são iguais
}

Lembre-se de que getTime() retorna o número de milissegundos, portanto é necessário levar em conta o tempo na comparação. 10 de julho de 2018 07:22:13 não é igual a novo 10 de julho de 2018 pois, conforme mencionado no começo, se você não declarar o horário, o JavaScript o deixará como 00:00:00


Fonte:

W3Schools – Date get Methods

W3Schools – Date set Methods

Definitive guide to Dates

 

Cursos completos de JavaScript

Seguindo a linha da postagem feita ano passado sobre Cursos completos que você não conhecia, estou postando uma nova lista atualizada para de cursos de empresas menos conhecidas, mas que nem por isso sejam ruins. Já cursei alguns dos listados abaixo e posso dizer que são muito bons.

Para ficar mais fácil de se organizar, os cursos estão agrupados pelas pessoas ou empresas que os criaram.


Alfamidia

Programação JavaScript Completo

Descrição: Um curso do básico ao avançado sobre JavaScript e JQuery. Ele permite que um pessoa que não saiba muito de programação possa aprender a usar o JS e conceitos mais avançados de programação a medida que o aluno avança nas aulas

Nível: Básico – Avançado

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: Sob consulta

 

Desenvolvimento Web e Mobile

Descrição: O curso online de desenvolvimento web e mobile percorre todos os campos da programação (do front-end ao back-end). O intuito é ensinar o estudante a ser um desenvolvedor com capacitação em todas as áreas do desenvolvimento de apps.

Nível: Básico – Avançado

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: Sob consulta

 


A´gora

JavaScript Completo

Descrição: Completo e passo a passo tem por objetivo principal ensinar todos os passos necessários que um iniciante na linguagem javascript precisa para dominar esta linguagem de programação que está crescendo bastante neste últimos tempos. Nela você terá todos os conhecimentos exigidos pelo mercado, do mais elementar ao mais avançados.

Nível: Básico

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: R$197,00, podendo parcelar em 2x sem juros

 

Formação Jquery Completo

Descrição: Este curso tem por objetivo ensinar do básico ao avançado do Jquery. Então você não tem muito conhecimento ou gostaria de aprimorar o que sabe para o nível profissional, esse é o curso ára você.

Nível: Básico

Duração: Você define e o curso possuí acesso vitálicio

Curso recebe atualizações: Não

Investimento: R$157,00, podendo parcelar em 2x sem juros


Udacity

Fundamentos Web Front-End

Descrição: Curso criado nos Estados Unidos com o foco em ensinar os fundamentos da programação Front-end. Ele lida com diversos detalhes da programação JavaScript não encontramos em qualquer lugar e aponta você para outros cursos gratuitos dentro do site deles.

Nível: Básico

Duração: 2 meses de curso e acesso irrestrito somente se você completar tudo

Curso recebe atualizações: Não

Investimento: 5 x R$106,00 – Com desconto à vista

 

Web Front-end Avançado

Descrição: Continuação do curso anterior. Aprofunda-se no entendimento do JavaScript de forma a ensinar a diferença entre as novas técnicas e as antigas. Você também descobrirá mais sobre o ganho de performance e aumento de produtividade do ES6.

Nível: Avançado

Duração: 3 meses meses de curso e acesso irrestrito somente se você completar tudo

Curso recebe atualizações: Não

Investimento: 9 x R$119,00 – Com desconto à vista

 


Danki Code

Curso Webmaster Front-end Completo

Descrição: Um curso de front-end bem completo que tem por objetivo ensinar do zero sobre como lidar com todos aspectos da tela, tanto visuais quanto lógicas. Diferente de um curso de web design que foca mais na questão visual e manipulação de imagens

Nível: Do básico ao avançado

Duração: Você define seu ritmo e com acesso vitalício.

Curso recebe atualizações: Sim

Investimento: 12 x R$19,00 – Com desconto à vista

 

Pacote Fullstack

Descrição: Inclui o curso Webmaster Front-end completo mencionado acima e fornece ainda mais material para ensina-lo sobre o funcionamento do back-end. É bem indicado para aqueles que querem se tornar desenvolvedores responsaveis (ou com o conhecimento) de ambas pontas da criação de uma aplicação web.

Nível: Do básico ao avançado

Duração: Você define

Tempo de acesso: Irrestrito

Curso recebe atualizações: Sim

Investimento: 12 x R$27,00 – Com desconto à vista

 

Desenvolvimento Web Completo

Descrição: Pronto para além de estudar os conceitos de HTML, CSS e JavaScript, também estudar muito PHP? Se sim, esse curso tavez seja para você. No curso de desenvolvimento Web Completo você estará se tornando um desenvolvedor Full Stacke aprendendo a conectar todas as pontas de uma aplicação web.

Nível: Do básico ao avançado

Duração: Você define

Tempo de acesso: Irrestrito

Curso recebe atualizações: Sim

Investimento: 12 x R$22,12 – Com desconto à vista


 

Conclusão

Isso ai, espero que algum destes cursos possam ajudar alguém. Caso você tenha uma duvida, pegunta ou sugestão, deixe seu comentário aqui abaixo para que possamos melhorar essa postagem.

Prettier 1.15: Formatador de Código Adiciona Suporte Angular e Vue.js

Caso você ainda não conheça o Prettier, acesse o site oficial para mais detalhes. A versão 1.15 do Prettier adiciona suporte ao formatador de código para HTML, Vue.js, Angular e MDX, além de adicionar uma variedade de refinamentos e melhorias de sintaxe.

De forma resumida, o Prettier é um software de código aberto disponível sob a licença MIT. Contribuições e feedback são incentivados através do projeto Prettier GitHub e devem seguir as diretrizes de contribuição do Prettier.

Sua principal função é ser um formatador de código opinativo que tenta reduzir os problemas de formatação do código. Iniciado como um projeto JS, o suporte da Prettier se expandiu para abranger muitas outras linguagens, incluindo TypeScript, Flow, HTML5, CSS, Markdown e YAML, com desenvolvimento em andamento para adicionar suporte a Elm, Java, PHP, Python, Ruby e Swift. O Prettier também suporta vários formatos, incluindo JSX, JSON, Vue.js, Angular, SCSS, Less, componentes estilizados e GraphQL.

O Prettier agora pode ser usado para formatar o conteúdo de remarcação, bem como o conteúdo JSX em um recurso MDX.Caso você não conheça, o MDX é uma extensão do markdown que suporta sintaxe JSX. Outra funcionalidade legal é o suporte a interpolação e atributos para Vue.js e Angular, assim como a sintaxe de modelo inline do Angular.

Entre as diversas novidades, Prettier agora pode formatar arquivos de modelo dessas estruturas que estendem o HTML para o Angular e o Vue.js,. Além de fornecer um mecanismo para adicionar comentários para controlar como a marcação é formatada para impedir que a ferramenta remova ou adicione espaços em branco que possam afetar o estilo e os layouts do conteúdo. Os modos de espaço em branco podem corresponder ao comportamento do CSS ou tratar o espaço em branco como sensível (sensitive) ou insensível (insensitive).

O lançamento do Prettier 1.15 faz muitas melhorias na análise do JavaScript, incluindo o nivelamento do else-branch por ternários aninhados, mantendo inline os decoradores se eles foram escritos em linha, respeitando a ordem dos decoradores e melhorando como os objetos são divididos em linhas separadas. Além disso, dezenas de outras melhorias foram feitas para a API geral da Prettier e a variedade de idiomas suportados pela Prettier.

 

Conheça o Typed.js

O Typed.js é uma biblioteca JavaScript muito boa para simular um efeito de texto sendo escrito na tela, similar ao ato de digitar no console ou no Notepad.

Para acessar as funcionalidades do Typed.js, você precisa baixa-lo do site ou inserir uma tag script apontando para o link do CDN que eles disponibilizam conforme o exemplo abaixo.

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>

Como Funciona?

É simples e irei mostrar em alguns exemplos que cobrirão a maioria das funcionalidades que você precisará da biblioteca. Mas primeiro, caso você já não tenha algo parecido, copie o código HTML abaixo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <span id="texto"></span>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
</body>
</html>

Para evitar a necessidade de fazer um download, vou deixar com o link do CDN, mas sinta-se a vontade para altera-lo. Abaixo do script do Typed.js ou em um arquivo separado, adicione o seguinte código:

// A configuração que será passada ao instanciarmos o objeto Typed
let configuracao = {
    // A lista de frases que aparecerão
    // está string podem conter tags html
    strings: ["<i>Primeira</i> frase com Typed.js.", "Olá MundoJS!"],
    // A velocidade que é digitado
    typeSpeed: 40
}

// O Objeto precisará recebe 2 parametros,
// 1º: Uma string começando com # para id ou . para classe html
// 2º: o objeto de configuração
let typed = new Typed("#texto", configuracao);

Com isso você já verá um efeito simples, mas que mostra como funciona e como pode ser executado. Agora vamos ver alguns itens um pouco menos óbvios.


Configurando o Typed.js

Parando no meio da frase

Se na string você usar o acento circunflexo seguido de um valor numérico, quando chegar naquele ponto o Typed.js irá esperar aquele número em milissegundos antes de continuar.

let configuracao = {
            strings: ["<i>Primeira</i> frase ^1000 com Typed.js.", "Olá MundoJS!"],
        }

Retorno inteligente

Se o objeto de configuração tiver uma propriedade chamada “smartBackspace” igual com o valor true, então o texto irá voltar somente até a parte onde o texto diferente.

let configuracao = {
            // A parte "Olá" não será removida quando o texto for reescrever.
            strings: ["Olá MundoJS!", "Olá JavaScript!"],
            smartBackspace: true
        }

Tempo para iniciar e retornar

Através das propriedades startDelay e backDelay é possível definir (em milissegundos ) o tempo que levará para começar a escrever e retornar o texto.

let configuracao = {
            strings: ["Olá MundoJS!", "Olá JavaScript!"],
            startDelay: 2000,
            backDelay: 500,
        }

Customizar o cursor

É possível customizar o cursor ou remove-lo completamente através de duas propriedades conforme o exemplo abaixo. Lembrando que se você colocar showCursor como false, não conseguirá ver qualquer char que definir no cursorChar.

let configuracao = {
            strings: ["Olá MundoJS!", "Olá JavaScript!"],
            showCursor: true,
            cursorChar: '#'
        }

Conclusão

Como e possível ver, a biblioteca do Type.js é simples e fácil de usar. Caso você precise customizar mais coisas va-le a pena dar uma olhada no https://github.com/mattboldt/typed.js/#user-content-customization para ver se o que você precisa já está lá.

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/

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

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

Utilizando Async Await com Expressjs

Hoje eu irei demonstrar como nós podemos utilizar Async/Await em um projeto Node.js com express.js.

O Objetivo desse artigo não será abordar o que é async e nem o porque utilizar ele (caso não saiba veja o artigo ES8: Funções Assíncronas), será algo rápido para demonstrar como trabalhar com ele em um projeto node com o framework expressjs.


Para pular a etapa de criação de um novo projeto, eu irei utilizar um que eu desenvolvi em um artigo anterior sobre:Criando uma API Node com Express.js. Caso você tenha interesse em clonar ele, segue o seu link no meu GitHub: node-express.

Para que possamos ter um cenário mais próximo do nosso dia a dia, eu irei fazer uma requisicão a uma URL externa. Existem muitos pacotes para isso, mas nesse artigo eu irei utilizar o pacote resquest.

Abra um terminal no seu computador e execute o comando abaixo:

npm install request --save-dev

O próximo passo será atualizar a nossa rota GET para que ela possa requisitar uma API externa. Para isso, abra o seu arquivo /src/controllers/personController.js e atualize ele com o trecho de código abaixo:

var request = require("request");

exports.get = async (req, res, next) => {
  console.log("chamando");
  await request("http://www.google.com", function(error, response, body) {
    res.json(body);
  });
};

Em seguida, execute o comando npm start no seu terminal, esse comando ira executar o projeto no seguinte endereço: http://localhost:3000/person.

Abra esse endereço no seu navegador.

Caso tudo esteja OK, você irá receber o resultado da imagem abaixo:

resultado node com Async Await

Bem simples né?

O objetivo desse artigo foi demonstrar como utilizar o Async/Await com Node e o Express.js. Espero que tenham gostado e até um próximo artigo pessoal.

Criando uma API Node com Express.js

Para quem não conhece o Express.js ele é um excelente framework do Node.js que nos auxilia na construção das nossas aplicações Web. Ele é um framework muito simples de ser utilizado, por isso vem sendo adotado pelos desenvolvedores de todos os níveis. Para que possamos conhecer ele um pouco mais vejamos 10 passos a baixo para criação de um Web Site.

1. Instalação

Para esse artigo não iremos abordar a instalação do Node.js, iremos partir de uma maquina com ele já instalado e configurado. Crie um novo diretório no seu computador e crie uma nova pasta, nós iremos utilizar node-express, mas você pode escolher um outro nome de sua preferência. Feito isso execute o comando a baixo para baixar o nosso modulo.

npm install express

3. Estrutura do nosso projeto

Crie uma estrutura de pastas e arquivos conforme está na imagem a baixo:

4. Criando arquivo de Server

Vamos agora criar o arquivo de inicialização do nosso projeto, para quem vem do mundo php seria o nosso index.php ou HomeController.cs no MVC do .NET. Para isso, abra o seu arquivo server.js e cole o código a baixo nele:

const app = require('../src/app');
const port = normalizaPort(process.env.PORT || '3000');
function normalizaPort(val) {
    const port = parseInt(val, 10);
    if (isNaN(port)) {
        return val;
    }
if (port >= 0) {
        return port;
    }
return false;
}
app.listen(port, function () {
    console.log(`app listening on port ${port}`)
})

No código a cima nós estamos importando um modulo que iremos criar nos próximos passos, depois estamos definindo uma porta para que ele seja executado, no final estamos passando para o método app.listen a porta que queremos que ele escute o nosso projeto e de um console.log com ela.

5. Controller

Para que possamos organizar o nosso código, nós dividimos ele pensando em um padrão MVC, no código a baixo nós temos as nossas Actions das nossas Controllers.

exports.post = (req, res, next) => {
    res.status(201).send('Requisição recebida com sucesso!');
};
exports.put = (req, res, next) => {
    let id = req.params.id;
    res.status(201).send(`Requisição recebida com sucesso! ${id}`);
};
exports.delete = (req, res, next) => {
    let id = req.params.id;
    res.status(200).send(`Requisição recebida com sucesso! ${id}`);
};

6. Rotas

Agora vamos criar as nossas rotas, nessa parte nós temos dois arquivos: index.js e personRoute.js. O arquivo index.js seria para passar a versão que esta a nossa API ou para que possamos passar para um balanceador (Load Balancer) verificar se a nossa API está no ar, o personRoute.js contem as rotas que iremos utilizar para nossa PersonController.

Index.js

const express = require('express');
const router = express.Router();
router.get('/', function (req, res, next) {
    res.status(200).send({
        title: "Node Express API",
        version: "0.0.1"
    });
});
module.exports = router;

PersonRoute

const express = require('express');
const router = express.Router();
const controller = require('../controllers/personController')
router.post('/', controller.post);
router.put('/:id', controller.put);
router.delete('/:id', controller.delete);
module.exports = router;

7. Configurações.

O arquivo app.js é responsável pelas configurações do nosso projeto, nele que nós devemos configurar a nossa base de dados, rotas … etc. Pensando novamente no mundo .NET eu ousaria dizer que ele seria o nosso web.config.

const express = require('express');
const app = express();
const router = express.Router();

//Rotas
const index = require('./routes/index');
const personRoute = require('./routes/personRoute');
app.use('/', index);
app.use('/persons', personRoute);
module.exports = app;const express = require('express');
const app = express();
const router = express.Router();

//Rotas
const index = require('./routes/index');
const personRoute = require('./routes/personRoute');
app.use('/', index);
app.use('/persons', personRoute);
module.exports = app;

8. Nodemon

O pacote nodemon nós auxilia no momento do nosso desenvolvimento, com ele nós não precisamos dar stop e subir novamente a nossa APP, ele verifica que ocorreu uma alteração e já faz o refresh automaticamente. Para instalar ele, execute o comando a baixo na sua console.

npm install -g nodemon

9. Arquivo Package.config

Esse seria o arquivo inicial nos projetos Node, nele nós temos todas as dependências

{
  "name": "node-express",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "express": "^4.15.4"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon ./bin/server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

10. Testes

Para que possamos testar o nosso projeto, digite o comando npm install na sua console para importar os pacotes necessários para a nossa aplicação, assim que ele finalizar execute o comando npm start. Caso tudo OK nos passos anteriores, você irá ver a mensagem a baixo na sua console.

Agora abra no seu navegador o endereço http://localhost:3000/. Ele deve apresentar a mensagem a baixo como retorno da nossa rota Index.
{
    "title": "Node Express API",
    "version": "0.0.1"
}

Segue o link do projeto completo que criamos nesse post Github.