Autor: Alexandre Machado

Fascinado por tecnologia, buscando sempre adquirir conhecimento.
Publicado em

Conheça SvelteJS, um framework Frontend JavaScript

O Svelte é um framework com uma nova maneira de desenvolver interfaces de usuário. Frameworks tradicionais como React e Vue fazem a maior parte do trabalho no browser, o Svelte realiza esse trabalha em uma etapa de compilação que acontece quando você constrói a sua aplicação.

Sem utilizar técnicas como virtualização do DOM, o Svelte escreve código que cirurgicamente atualiza o DOM quando o estado do seu app muda. A diferença crucial entre o Svelte e outros frameworks JavaScript é que o Svelte converte o seu app para JavaScript ideal em tempo de construção, ao invés de interpretar seu código em tempo de execução. Isso significa que você não terá que considerar custo de performance das abstrações do framework, e você não terá penalidades quando seu app carregar pela primeira vez.

Você pode escrever o seu aplicativo do zero utilizando o Svelte, ou pode adicioná-lo de forma incremental à uma base de código já existente. Você também pode utilizar componentes como pacotes independentes, que funcionam em qualquer lugar, sem a sobrecarga de dependências de um framework convencional.

Componentes

No Svelte, uma aplicação é composta de um ou mais componentes. Um componente é um bloco de código reutilizável que encapsula HTML, CSS e JavaScript juntos em um arquivo .svelte.

Por exemplo:

<script>
    let nome = "mundo";
</script>

<h1> Olá Mundo!</h1>

E podemos utilizar uma referência à variável nome, criada acima!

<h1>Olá {nome}!</h1>

E isso nos trará o resultado:

Olá mundo!

Também podemos armazenar caminhos de url e pastas de armazenamento em variáveis, e utilizá-las em atributos de nossos elementos HTML, como:

<script>
    let caminhoOrigem = "imagem/foto.png";
</script>

<img src={caminhoOrigem}>

E isso funcionará. Mas o Svelte nos trará uma mensagem:

A11y: <img> element should have an alt attribute

Quando estamos criando web apps, é importante ter certeza que ele será acessível para todos os usuários, e isso inclui pessoas com dificuldades de visão ou movimento, ou até mesmo pessoas com boa conexão à internet e com bom hardware. A acessibilidade é de extrema importância no desenvolvimento e o Svelte auxilia avisando-o se você não escreveu elementos de marcação acessíveis.

Nesse caso, teremos:
<img src={caminhoOrigem} alt="Seu texto acessível aqui.">

Você pode fazer o download do Svelte diretamente no site em um arquivo .zip ou utilizando o npm e npx:

npx degit sveltejs/template my-svelte-project

cd my-svelte-project

npm install

npm run dev

Você pode verificar a documentação em: https://svelte.dev/tutorial/basics

Gostou deste artigo? Comente abaixo!

Referência: https://svelte.dev/

Publicado em

Estrutura de Dados com Classes JavaScript

FILA:

Image for post

class Fila {
    constructor(head = null, tail = null, count = 0){
        this.head = head;
        this.tail = tail;
        this.count = count;
    }
    GetContador(){
        return this.count;
    }
}

Enqueue:

Enqueue(data){
    let no = {
        data: data,
        next: this.head
    };
    if (this.head === null){
        this.tail = no;
    }
    this.head = no;
    this.count++;
}

Dequeue:

Dequeue(){
    if (this.count === 0){
        return;
    } else {
        let current = this.head;
        let previous = null;
        while (current.next){
            previous = current;
            current = current.next;
        }
        if (this.count > 1){
            previous.next = null;
            this.tail = previous;
        } else {
            this.head = null;
            this.tail = null;
        }
        this.count--;
    }
}

MostrarTudo:

MostrarTudo(){
    if (this.head === null){
        return null;
    } else {
        let arr = [];
        let current = this.head;
        for (let i = 0; i < this.count; i++) {
            arr[i] = current.data;
            current = current.next;
        }
        return arr;
    }
}

VisualizarEm:

VisualizarEm(index){
    if (index > -1 && index < this.count){
        let current = this.head;
        for (let i = 0; i < index; i++) {
            current = current.next;
        }
        return current.data;
    } else {
        return null;
    }
}

Agora, vamos testar:

let fila = new Fila();
fila.Enqueue(1);
fila.Enqueue(2);
fila.Enqueue(3);
fila.Enqueue(4);
fila.Enqueue(5);
fila.Enqueue(6);
fila.Dequeue();
fila.Dequeue();
console.log(fila.VisualizarEm(1));
console.log(fila.MostrarTudo());
console.log(fila);
Image for post

PILHA:

Image for post

Então, para começarmos a implementar a pilha, precisamos construir a nossa classe Pilha e seu construtor. Vamos implementar também um contador, que será útil para nos mostrar a quantidade de itens na pilha. No nosso construtor, precisamos setar nossos valores do contador e do topo da pilha. Como ainda não há nada na pilha, o topo é null e o contador é 0:

class Pilha {
    constructor(top = null, count = 0){
        this.top = top;
        this.count = count;
    }
    GetContador(){
        return this.count;
    }
}

Push:

Push(data){
    let no = {
       data: data,
       next: null
    };
    no.next = this.top;
    this.top = no;
    this.count++;
}

Visualizar:

Visualizar(){
    if (this.top === null){
        return null;
    } else {
        return this.top.data;
    }
}

Remover:

Remover(){
    if (this.top === null){
        return null;
    } else {
        let remover = this.top;
        this.top = this.top.next;
        if (this.count > 0){
            this.count--;
        }
        return remover.data;
    }
}

MostrarTodos:

MostrarTodos(){
    if (this.top === null){
        return null;
    } else {
        let arr = [];
        let current = this.top;
        for (let i = 0; i < this.count; i++){
            arr[i] = current.data;
            current = current.next;
        }
        return arr;
    }
}

E podemos testar a nossa estrutura de dados, instanciando uma nova pilha:

let pilha = new Pilha();
pilha.Push(1);
pilha.Push(2);
pilha.Push(3);
pilha.Push(4);
pilha.Push(5);
pilha.Push(6);
pilha.Push(7);
pilha.Remover();
console.log(pilha.Visualizar());
console.log(pilha.MostrarTodos());
console.log(pilha);

E a saída será:

Image for post

Continue lendo “Estrutura de Dados com Classes JavaScript”

Publicado em

Você sabe o que significa NPM?

O NPM, ou Node Package Manager, é um repositório online com a finalidade de publicação de projetos NodeJS de código aberto. Podemos utilizar o npm como um utilitário de linhas de comando, interagindo com os repositórios e instalando os seus pacotes. Isso auxilia diretamente na instalação, controle de gerenciamento de versão e dependências dos projetos. Existem muitos aplicativos e bibliotecas publicados no npm, com novidades sendo adicionadas todos os dias. Você pode pesquisar essas bibliotecas e dependências em: https://npmjs.org.

Para instalar uma biblioteca, você só precisará executar o comando:

npm install nome_do_pacote

Assim que estiver instalado, você pode verificar a existência da biblioteca ou dependência na pasta node_modules e você usa o comando require() para adicioná-lo à sua página.

Para adicionar algo globalmente, você pode adicionar o comando -g à sintaxe. Isso instalará o programa em um local, e adicionará um link a ele, permitindo a utilização do programa no console, como qualquer outra ferramenta CLI.

Como um gerenciador de dependências, você possuirá um arquivo package.json no seu projeto nodejs. Executando o comando:

npm install

Utilizando esse comando na pasta raiz do seu projeto, assim o npm instalará todas as dependências que são listadas no arquivo package.json. Depois de executar este comando, você pode verificar na pasta node_modules que todas as dependências que são especificadas no package.json estarão instaladas.

home

Com o comando home, você pode abrir o site da biblioteca que você está tentando instalar. O site será aberto no seu navegador padrão. Por exemplo, utilizaremos o React Native como exemplo:

npm home react-native

Após executar este comando, a página de documentação do React Native no GitHub será aberta!

init

O comando init nos permite iniciar um arquivo package.json. Na criação deste arquivo, são feitas diversas perguntas. Mas você também pode pular todo o questionário adicionando um -y ao comando!

npm init -y

Lista de pacotes

Podemos verificar a lista de pacotes instalados no nosso projeto utilizando o comando:

npm ls --depth 0

E também podemos verificar quais são as bibliotecas ou dependências instaladas globalmente na nossa máquina utilizando o comando:

npm ls -g --depth 0

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

Referências:

Referências: https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/

Publicado em

O que são React Components & Props

Componentes são como funções que retornam elementos HTML.

Os componentes são partes independentes e reutilizáveis de código. Eles possuem o mesmo propósito que as funções JavaScript, mas trabalham de forma isolada e retornam elementos HTML por uma função render.

Eles possuem dois tipos, chamados Componentes de Classes e Componentes de Funções.

Function Components

Um Function Component nada mais é do que uma função JavaScript que retorna um elemento JSX (leia este artigo se você não conhece JSX).

Por exemplo:

import React from 'react';

function ThisComponent(){
    const component = 'Olá Mundo! Eu sou um Componente!';
    return <h1>{component}</h1>;
}

export default ThisComponent;

Se você quer renderizar um React Component dentro de uma Function Component, você pode definir outro componente e renderizá-lo com HTML utilizando JSX:

import React from 'react';

function App(){
    return <ThisComponent />;
}

function ThisComponent(){
    const component = 'Olá Mundo! Eu sou um Componente!';
    return <h1>{component}</h1>;
}

export default App;

Deste modo, você tem um Componente Filho. Você consegue decidir como e onde renderizar um componente.

Class Component

Quando criamos um componente React, o nome do componente deve iniciar com uma letra maiúscula. Ao criar um Class Component, precisamos incluir o extends React.Component, pois este componente cria uma herança para o React.Component, criando um acesso às funções do React Component.

Criando um Class Component, precisamos do método render() para retornar HTML. Por exemplo:

class Pessoa extends React.Component {
    render(){
        return <h1>Olá, eu sou uma Pessoa!</h1>;
    }
}

Agora você tem um componente chamado Pessoa que retorna um elemento H1. Para usar este componente na aplicação, é só utilizar a sintaxe:

ReactDOM.render(<Pessoa />, document.getElementById('root'));

E esse componente será renderizado na sua página, no elemento root!

Component Constructor:

Se existe uma função construtora (constructor()) no seu componente, a função será chamada quando o componente for iniciado. O construtor será onde você irá iniciar as propriedades dos seus componentes.

No React, utilizamos um objeto chamado state para criar nossas propriedades de componentes. Utilize também o super() para utilizar os métodos herdados pela função construtora pai e também para obter acesso à todas as funções do método React.Component. Por exemplo, criaremos um componente Pessoa, com um estado de humor:

class Pessoa extends React.Component {
    constructor(){
        super();
        this.state = {humor: 'Bem humorada!'};
    }
    render(){
        return <h1>Olá, eu sou uma Pessoa {this.state.humor}</h1>;
    }
}

ReactDOM.render(<Pessoa />, document.getElementById('root'));

E temos a saída:

Olá, eu sou uma Pessoa Bem humorada!

Props:

Podemos também utilizar props para adicionar propriedades de componentes.

As props são como argumentos de funções, e você pode enviá-las para os componentes como atributos:

class Pessoa extends React.Component {
    render(){
        return <h1>Olá, eu sou uma Pessoa {this.props.humor}</h1>;
    }
}

ReactDOM.render(<Pessoa humor="Bem humorada!"/>, document.getElementById('root'));

E com isso, obtemos o nosso resultado:

Olá, eu sou uma Pessoa Bem humorada!

Gostou deste artigo? Comente abaixo!

Referências:

Publicado em

O que é JSX?

Olá pessoal, neste artigo, aprenderemos o que é o JSX e quais são as suas aplicações. O JSX significa JavaScript XML e nos permite escrever HTML no React, tornando fácil a sua adição. Com o JSX, podemos escrever os elementos HTML dentro do JavaScript e adicioná-los ao DOM sem utilizar métodos como createElement() ou appendChild(). o JSX é uma alternativa para escrevermos nosso código que mescla a estrutura do DOM com a lógica da aplicação.

São necessários transpiladores (pré-processadores) como o Babel. Basicamente, com o JSX você escreve estruturas HTML/XML do mesmo modo que escreve o código JavaScript, então, o transpilador transformará essas expressões em código JavaScript. Ou seja, ao invés de colocar o JavaScript no HTML, colocamos o HTML no JavaScript.

O JSX fornece uma sintaxe concisa e familiar para definir uma estrutura de árvore com atributos que não requerem o aprendizado de uma linguagem de templates ou abandonar o JavaScript e o JSX é fácil de ler e escrever. Vejamos um exemplo:

const element = <h1>Olá Mundo!</h1>

ReactDOM.render{
    element, 
    document.getElementById('root')
};

Neste exemplo, declaramos a variável element e a usamos dentro do JSX, renderizando-a com ReactDOM.render().

Se fosse escrever o mesmo exemplo anterior sem o JSX, seria algo como:

const element = React.createElement('h1, {}, 'Olá Mundo!');
ReactDOM.render(element, document.getElementById('root'));

Veja, se não utilizamos JSX, precisamos do método createElement para criarmos o nosso elemento <h1> utiliando o React. Com o JSX, eliminamos a necessidade de utilizar este método, simplificando a sintaxe do nosso código.

O JSX também é uma expressão!

Podemos utilizar expressões em JSX, transformando-se em chamadas normais de funções que retornam objetos JavaScript. Por exemplo:

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Nome',
    lastName: 'Sobrenome'
};

function greeting(user){
    if (user) {
        return <h1>Olá, {formatName(user)}!</h1>;
    }
    return <h1>Olá, anônimo!</h1>;
}

Ou seja, você pode utilizar o JSX dentro de estruturas condicionais e laços de repetição, atribuí-los a variáveis, aceitá-los como argumentos e retorná-los de funções!

Gostou deste artigo? Comente abaixo!

Referências:

 

Publicado em

Bootstrap 5 – Mudanças

Olá pessoal, neste artigo mostraremos as novidades do Bootstrap 5. A versão alfa já está disponível e há muitas diferenças entre as versões 4 e 5. Mas quais serão as mudanças?

jQuery

O Bootstrap 5 não depende mais do jQuery. Isso mesmo! O jQuery não é mais uma dependência no Bootstrap 5. Ele mudou para a utilização do próprio JavaScript (Vanilla) e isso é mérito do próprio jQuery. Ele foi uma peça fundamental no desenvolvimento Front-End, impulsionando mudanças nas tecnologias de desenvolvimento de interfaces web na última década. Os projetos construídos em Bootstrap 5 serão significativamente mais leves em tamanho e no carregamento de páginas.

Uma das alterações possíveis foi trocar a abordagem do plugin de botão em HTML e CSS para alternar estados. Você pode visualizar a lista de alterações relacionadas ao JavaScript na versão alfa do Bootstrap 5 aqui.

Novos visuais e sensações

O site e documentação agora não possuem mais largura total da página, melhorando a visibilidade e legibilidade, tornando o site mais semelhante à página de conteúdo, e não a um aplicativo. A barra lateral de seções expansíveis foi atualizada para uma navegação mais rápida. O Bootstrap também possui um novo logotipo que foi inspirado no CSS.

Fim do suporte ao Internet Explorer

O suporte para o Internet Explorer foi abandonado na versão 5. O foco da atualização é a construção de ferramentas mais amigáveis para o futuro.

Propriedades personalizadas no CSS

Graças ao fim do suporte ao Internet Explorer, foi possível começar a utilizar propriedades personalizadas ao CSS. A equipe de atualização do Bootstrap está trabalhando para utilizar os poderes das propriedades personalizadas Sass e CSS para um sistema mais flexível.

Personalização da documentação

A documentação foi aprimorada em diversos lugares, aumentando as explicações, removendo ambiguidades e fornecendo mais suporte para entender o Bootstrap. A documentação personalizada expande a página Theming da v4 com mais conteúdo e fragmentos de código para construir sobre arquivos Sass de origem Bootstrap. A paleta de cores também foi expandida na v5. Você pode personalizar a aparência da sua aplicação sem sair da base de código. Isso ajudará a tornar os sites baseados em Bootstrap mais acessíveis para todos.

Formulários

A documentação e componentes dos formulários foi revisada e foram consolidados todos os estilos de formulários na nova seção Formulários. Cada caixa de seleção, rádio, arquivo, entre outros, inclui uma aparência personalizada para unificar o estilo e comportamento dos controles de formulário no S.O. e navegador.

Você pode verificar mais atualizações no seguinte link: https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/

Gostou deste artigo? Comente abaixo!

Referências:

Publicado em

Criando Single Page Website com NodeJS

Olá galera! Neste artigo, criaremos um Website Single Page utilizando NodeJS.

Para criar este projeto, precisaremos de:

  • NodeJS + NPM;
  • Um editor de código de sua preferência. Recomendo utilizar o Visual Studio Code.

Vamos começar!

De início, precisamos criar nossa pasta que conterá todos os arquivos do projeto. Utilizando um terminal, crie a pasta chamada node_website com o comando:

mkdir node_website

cd node_website

Dentro da nossa pasta, criaremos dois arquivos:

  • package.json (conterá nossas dependências);
  • server.js (conterá nossos scripts para criação do servidor).

Crie também uma pasta chamada node-example-website e, dentro desta pasta, crie outra pasta chamada express. Essa pasta express conterá nosso arquivo index.html.

Ao código!

No nosso arquivo package.json, precisamos adicionar o nome do nosso projeto, versão, os scripts e as dependências. O seu arquivo deverá ficar assim:

{
    "name": "node-website",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "start": "node server.js"
    },
    "dependencies": {
        "express": "^4.17.1"
    }
}

Assim, já criamos nosso arquivo de dependências.

Agora, precisamos criar nosso servidor. No nosso arquivo server.js, iremos:

  • Fazer a requisição dos pacotes que utilizaremos;
  • Criaremos o servidor na porta que escolhermos utilizar.
const http = require('http');
const express = require('express');
const path = require('path');

const app = express();
app.use(express.json());
app.use(express.static('express'));

// URL padrão do site
app.use('/', (req, res) => {
    res.sendFile(path.join(__dirname+'/node-example-website/express/index.html'));
});

const server = http.createServer(app);
const port = 3000;
server.listen(port);

console.debug('Server inicializado na porta ' + port);

Neste projeto, estamos utilizando a porta 3000.

Agora, precisamos instalar as outras dependências e módulos do node no nosso projeto. Dentro da pasta node-example-website, rode o seguinte comando:

npm install

Esse comando vai instalar as dependências definidas no nosso package.json.

No nosso arquivo index.html, utilizaremos um exemplo do W3CSS, chamado Cafe Template. Você pode utilizar o template de sua preferência ou criar o seu próprio!

<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<style>
body, html {
  height: 100%;
  font-family: "Inconsolata", sans-serif;
}

.bgimg {
  background-position: center;
  background-size: cover;
  background-image: url("https://www.w3schools.com/w3images/coffeehouse.jpg");
  min-height: 75%;
}

.menu {
  display: none;
}
</style>
<body>

<!-- Links (sit on top) -->
<div class="w3-top">
  <div class="w3-row w3-padding w3-black">
    <div class="w3-col s3">
      <a href="#" class="w3-button w3-block w3-black">HOME</a>
    </div>
    <div class="w3-col s3">
      <a href="#about" class="w3-button w3-block w3-black">ABOUT</a>
    </div>
    <div class="w3-col s3">
      <a href="#menu" class="w3-button w3-block w3-black">MENU</a>
    </div>
    <div class="w3-col s3">
      <a href="#where" class="w3-button w3-block w3-black">WHERE</a>
    </div>
  </div>
</div>

<!-- Header with image -->
<header class="bgimg w3-display-container w3-grayscale-min" id="home">
  <div class="w3-display-bottomleft w3-center w3-padding-large w3-hide-small">
    <span class="w3-tag">Open from 6am to 5pm</span>
  </div>
  <div class="w3-display-middle w3-center">
    <span class="w3-text-white" style="font-size:90px">the<br>Cafe</span>
  </div>
  <div class="w3-display-bottomright w3-center w3-padding-large">
    <span class="w3-text-white">15 Adr street, 5015</span>
  </div>
</header>

<!-- Add a background color and large text to the whole page -->
<div class="w3-sand w3-grayscale w3-large">

<!-- About Container -->
<div class="w3-container" id="about">
  <div class="w3-content" style="max-width:700px">
    <h5 class="w3-center w3-padding-64"><span class="w3-tag w3-wide">ABOUT THE CAFE</span></h5>
    <p>The Cafe was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>In addition to our full espresso and brew bar menu, we serve fresh made-to-order breakfast and lunch sandwiches, as well as a selection of sides and salads and other good stuff.</p>
    <div class="w3-panel w3-leftbar w3-light-grey">
      <p><i>"Use products from nature for what it's worth - but never too early, nor too late." Fresh is the new sweet.</i></p>
      <p>Chef, Coffeeist and Owner: Liam Brown</p>
    </div>
    <img src="https://www.w3schools.com/w3images/coffeeshop.jpg" style="width:100%;max-width:1000px" class="w3-margin-top">
    <p><strong>Opening hours:</strong> everyday from 6am to 5pm.</p>
    <p><strong>Address:</strong> 15 Adr street, 5015, NY</p>
  </div>
</div>

<!-- Menu Container -->
<div class="w3-container" id="menu">
  <div class="w3-content" style="max-width:700px">
 
    <h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">THE MENU</span></h5>
  
    <div class="w3-row w3-center w3-card w3-padding">
      <a href="javascript:void(0)" onclick="openMenu(event, 'Eat');" id="myLink">
        <div class="w3-col s6 tablink">Eat</div>
      </a>
      <a href="javascript:void(0)" onclick="openMenu(event, 'Drinks');">
        <div class="w3-col s6 tablink">Drink</div>
      </a>
    </div>

    <div id="Eat" class="w3-container menu w3-padding-48 w3-card">
      <h5>Bread Basket</h5>
      <p class="w3-text-grey">Assortment of fresh baked fruit breads and muffins 5.50</p><br>
    
      <h5>Honey Almond Granola with Fruits</h5>
      <p class="w3-text-grey">Natural cereal of honey toasted oats, raisins, almonds and dates 7.00</p><br>
    
      <h5>Belgian Waffle</h5>
      <p class="w3-text-grey">Vanilla flavored batter with malted flour 7.50</p><br>
    
      <h5>Scrambled eggs</h5>
      <p class="w3-text-grey">Scrambled eggs, roasted red pepper and garlic, with green onions 7.50</p><br>
    
      <h5>Blueberry Pancakes</h5>
      <p class="w3-text-grey">With syrup, butter and lots of berries 8.50</p>
    </div>

    <div id="Drinks" class="w3-container menu w3-padding-48 w3-card">
      <h5>Coffee</h5>
      <p class="w3-text-grey">Regular coffee 2.50</p><br>
    
      <h5>Chocolato</h5>
      <p class="w3-text-grey">Chocolate espresso with milk 4.50</p><br>
    
      <h5>Corretto</h5>
      <p class="w3-text-grey">Whiskey and coffee 5.00</p><br>
    
      <h5>Iced tea</h5>
      <p class="w3-text-grey">Hot tea, except not hot 3.00</p><br>
    
      <h5>Soda</h5>
      <p class="w3-text-grey">Coke, Sprite, Fanta, etc. 2.50</p>
    </div>  
    <img src="https://www.w3schools.com/w3images/coffeehouse2.jpg" style="width:100%;max-width:1000px;margin-top:32px;">
  </div>
</div>

<!-- Contact/Area Container -->
<div class="w3-container" id="where" style="padding-bottom:32px;">
  <div class="w3-content" style="max-width:700px">
    <h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">WHERE TO FIND US</span></h5>
    <p>Find us at some address at some place.</p>
    <img src="https://www.w3schools.com/w3images/map.jpg" class="w3-image" style="width:100%">
    <p><span class="w3-tag">FYI!</span> We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggerst criteria of them all, both look and taste.</p>
    <p><strong>Reserve</strong> a table, ask for today's special or just send us a message:</p>
    <form action="/action_page.php" target="_blank">
      <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p>
      <p><input class="w3-input w3-padding-16 w3-border" type="number" placeholder="How many people" required name="People"></p>
      <p><input class="w3-input w3-padding-16 w3-border" type="datetime-local" placeholder="Date and time" required name="date" value="2017-11-16T20:00"></p>
      <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message \ Special requirements" required name="Message"></p>
      <p><button class="w3-button w3-black" type="submit">SEND MESSAGE</button></p>
    </form>
  </div>
</div>

<!-- End page content -->
</div>

<!-- Footer -->
<footer class="w3-center w3-light-grey w3-padding-48 w3-large">
  <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>

<script>
// Tabbed Menu
function openMenu(evt, menuName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("menu");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-dark-grey", "");
  }
  document.getElementById(menuName).style.display = "block";
  evt.currentTarget.firstElementChild.className += " w3-dark-grey";
}
document.getElementById("myLink").click();
</script>

</body>
</html>

Você também pode adicionar o css e js em arquivos separados!

Para inicializar o servidor, utilizamos o comando:

npm start

Para testar, abra o seu browser e digite:

localhost:3000

E veja o seu site rodando!

Gostou deste artigo? Comente abaixo com seus amigos!

Referências:

Publicado em

A diferença entre funções regulares e arrow functions:

A Arrow function é um recurso que foi introduzido no ES6. É uma maneira mais concisa de escrever expressões de função e funciona de maneira semelhante às funções regulares, mas com certas diferenças.

let somar = function(n1, n2){
    return n1 + n2;
}

// Utilizando arrow functions =>

let somar = (n1, n2) => { return n1 + n2 };

O arrow function permite ao desenvolvedor alcançar o mesmo resultado simplificando o seu código. Os colchetes se tornam desnecessários se apenas uma expressão seja realizada:

let somar = (n1, n2) => n1 + n2;

Se houver apenas um argumento na função, os parênteses tornam-se desnecessários:

let multiplicaQuadrado = x =:> x * x;

E, caso não existam argumentos:

let dizerOla = _ => console.log("Olá");

As arrow functions têm acesso ao objeto de argumentos da função pai regular mais próxima. Os parâmetros nomeados e restantes são muito utilizados para capturar argumentos passados para arrow functions:

// Em uma função regular
let minhaFuncao = {
    mostrarArgumentos(){
        console.log(argumentos);
    }
};
minhaFuncao.mostrarArgumentos(1, 2, 3, 4);

// Utilizando arrow functions:
let minhaFuncao = {
    mostrarArgumentos: () => {
        console.log(...argumentos);
    }
};
minhaFuncao.mostrarArgumentos(1, 2, 3, 4);

// Argumento is not defined

As funções de seta não tem as suas próprias THIS, sendo o contrário de uma expressão regular. O valor de this dentro de um arrow está sempre ligado ao valor de this na função pai regular que seja mais próxima.

let pessoa = {
    nome: "Fulano Ciclano",
    thisArrow: () => {
        console.log("O nome é: " + this.nome); // Não há binding para this aqui
    },
    thisRegular(){
        console.log("O nome é: " + this.nome); // O bind vai funcionar aqui
    }
};

pessoa.thisArrow();
pessoa.thisRegular();

/* Saída */
//Meu nome é
//Meu nome é Fulano Ciclano

As funções regulares criadas utilizando declarações ou expressões de função são construtivas. Como elas são funções construtoras, elas podem ser invocadas utilizando a palavra-chave new.

As arrow functions  não são construtivas, então, não podem ser chamadas utilizando a palavra-chave new:

let soma = (n1, n2) => console.log(n1 + n2);

new soma(2, 3);

/* Saída */
// soma is not a constructor

As funções de seta também não podem ter parâmetros nomeados duplicados, seja no modo estrito ou não. Isso significa que:

// Isso aqui é válido
function somar(x, x){
    //...Seu código aqui
}

Mas ao utilizar o modo estrito, não é válido:

'use strict'
function somar(x, x) {} 
// SyntaxError: duplicate formal argument x

Com as arrow functions, os argumentos duplicados serão sempre inválidos, independente de estar ou não em modo estrito:

(x, x) => {}
// SyntaxError: duplicate argument names not allowed in this context

Referência: https://medium.com/better-programming/difference-between-regular-functions-and-arrow-functions-f65639aba256

Gostou deste artigo? Comente abaixo e mostre para seus amigos!

Publicado em

Dicas de segurança para código JavaScript

Com a alta dos crimes cibernéticos, é extremamente importante utilizar os recursos de segurança ao nosso favor. Como desenvolvedores de software e aplicações, precisamos seguir, no mínimo, algumas das melhores práticas para poder mitigar os ataques e possivelmente evitá-los. Então, aí vão algumas dicas de como tornar o seu código mais seguro:

Confiança

Cuidado ao confiar dados à terceiros. Ao escrever código para Web, não confie em ninguém. Você pode ter uma arquitetura de validação em vigor a seu favor. Com dados provenientes do seus servidores, ou dos usuários, é muito importante sempre validar os dados antes dos mesmos entrarem no seu aplicativo. Com formulários na web, corremos o risco de termos brechas para SQL Injections, Cross-Site Scripting (XSS) e outros problemas relacionados. Por isso, é importante a existência de validação de dados.

Minimize o seu código

Existem coisas muito utilizadas por pessoas más-intencionadas: as ferramentas do navegador. Lá, eles podem ter acesso ao código JavaScript, podendo entendê-lo e utilizar as brechas de segurança para prejudicar sua aplicação.

Sempre tente minimizar e ofuscar o seu código, removendo caracteres desnecessários e modificando seu código para dificultar e legibilidade de terceiros. Você pode utilizar ferramentas para redução do seu código e também, para ofuscá-lo.

Linting:

O JavaScript é dinâmico e flexível. Isso torna-o muito suscetível a introdução de erros. O Linting é um processo de análise de código, que retorna para você alguns “erros” que pareçam suspeitos.

Utilize o strict

Se você não utilizar o modo estrito(strict), as ferramentas de linting logo o alertarão. O modo use strict adiciona algumas exceções ao seu código, não permitindo realizar algumas ações denominadas inseguras, como acessar objetos globais declarados. O modo estrito garante que o seu código seja bem pensado e consequentemente, mais seguro.

Simplicidade

Se esforce para manter sua aplicação simples. Seu design, a arquitetura do seu software, seu código. Quanto mais complexo, maior a possibilidade de vulnerabilidades e mais fácil ele pode vir a ser alvo de invasores. Sempre utilize os guias de estilo e melhores práticas de codificação.

Concluindo

Estes são alguns passos eficazes e simples de como você pode tornar o seu aplicativo menos vulnerável à ataques de invasores. Utilize as dicas e implemente-as na sua aplicação.

Referências:https://ngninja.com/posts/secure-coding-javascript

Gostou deste artigo? Comente abaixo:

Publicado em

Criando Auto-Refresh com Live-Server (NodeJS)

Olá pessoal,  neste artigo criaremos um servidor com NodeJS que atualizará a sua página web automaticamente sempre que houver uma alteração no código. Para isso, utilizaremos o Live-server, um pacote para Node que auxilia na criação de um servidor em tempo real.

O Live-Server é um pequeno servidor para desenvolvimento com a capacidade de atualizar a página ao vivo, dispensando a necessidade de instalação de plug-in para o navegador ou adicionar códigos para inicializar a função de atualização de página.

Para instalar o live-server, você precisa do npm. Utilize o seguinte código para instalação:

npm install -g live-server

Começando:

Crie uma pasta com o nome do seu projeto. Neste tutorial, criarei uma pasta chamada Live_node. Precisamos criar o nosso arquivo package, que conterá os dados de nosso projeto. Utilize o seguinte comando para criar o seu package de forma rápida:

npm init --yes

Com nosso package criado e dependência instalada, vamos começar criando um arquivo index.html. Esse arquivo será nossa página principal.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live_node</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
  <h1> Olá Mundo </h1>  
</body>
</html>

Criaremos também um main.css para estilizar nossa página. Adicione os seus arquivos index.html e main.css dentro de uma pasta chamada public.

No nosso arquivo main.css, adicionaremos um background-color no nosso body e também, alteraremos a cor das letras:

body{
    background-color: black;
    color: #fff;
}

Com isso, temos nosso Body na cor preta e as letras na cor branca.

Agora, no seu terminal, adicione o seguinte comando:

live-server public

Esse comando fará nosso código rodar, atualizando o navegador automaticamente. É importante salientar que este comando deve ser executado em modo administrador no seu powershell/prompt/terminal. Pode acontecer de ocorrer a necessidade de adicionar o npm em suas variáveis de ambiente no windows. Caso você não saiba como fazer isso, este link pode ajudá-lo a realizar este procedimento.

Caso você não queria adicionar o live-server globalmente na sua máquina, e sim somente no seu projeto, retire o -g na instalação do server. Caso você opte por esta opção, um procedimento deve ser feito para que ocorra a execução e atualização em tempo real da sua página. No seu arquivo package.json, altere o seguinte:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

Para:

"scripts": {
  "dev": "live-server public"
},

E, por fim, no seu terminal, execute o comando:

npm run dev

Este comando iniciará o script “dev” que inserimos no nosso package.json e, com isso, iniciará o live-server! O live-server inicia por padrão na porta 8080, mas você pode alterá-lo incluindo no seu script do package.json:

"scripts": {
  "dev": "live-server public --port=3000"
},

Com isso, você pode escolher a porta a ser utilizada. Para mais detalhes sobre o live-server, acesse a documentação em:

https://www.npmjs.com/package/live-server

Gostou deste artigo? Comente abaixo!