Tag: MundoJS

Publicado em

Nova versão – MOBX 6

O MobX é uma biblioteca responsável por gerenciamento de estado simples e escalável. Aplica este gerenciamento e escalonamento de forma transparente a programação reativa funcional.

O MobX já possui 5 anos. Já foi adotado por empresas como Microsoft(Outlook), Netflix, Amazon e E.A. Games (Battlefield). Ele possui a mesma filosofia desde o início. Se algo pode ser derivado pelo estado do aplicativo, será derivado automaticamente.

Em contraste a isso, o ecossistema JavaScript mudou significativamente ao longo dos anos. No entanto, propostas do JavaScript como observables, Object.observe e decorators nunca foram materializados. O MobX 6 é uma versão que não traz muitos novos recursos, mas sim uma consolidação em consideração ao estado atual do JavaScript.

Adeus Decorators!

Usar decorators não é mais regra no MobX. Quando começou, o MobX era um projeto do TypeScript e utilizava decorators. Atualmente, as implementações experimentais do decorator são incompatíveis com a proposta de campos de classe que logo será padronizada. As implementações de decorator legado (Babel) e experimental (TypeScript) não serão capazes de interceptar inicializações de campos de classe. Mas como ficará o MobX depois dos decorators?

Em vez de usar decorator nos membros durante a definição de classe, os membros da instância precisam  ser anotados no construtor, usando o utilitário makeObservable.

import {observable, computed, action, makeObservable} from "mobx"

// Antes:
class TodoStore {
    @observable
    todos: Todo[] = []

    @computed
    get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.done).length
    }

    @action
    addTodo(todo: Todo) {
        this.todos.push(todo)
    }
}

// Depois:
class TodoStore {
    todos: Todo[] = []

    constructor() {
        makeObservable(this, {
            todos: observable,
            unfinishedTodoCount: computed,
            addTodo: action
        })
    }

    get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.done).length
    }

    addTodo(todo: Todo) {
        this.todos.push(todo)
    }
}

O makeObservable não requer configurações de compilação sofisticadas. Migrar uma base de código que use diversos decorators para makeObservable pode ser um desafio. O MobX vem com um mod de código para fazer isso automaticamente. Utilizando o comando:

npm mobx-undecorate

Utilizando este comando, todos os decorators da pasta de origem serão reescritos automaticamente! Depois, atualize sua configuração TypeScript/Babel e estará tudo pronto para prosseguir.

Documentação nova!

Com a retirada da norma de utilização de decorators, a documentação foi revisada e reestruturada, sendo mais curta, com menor repetição e discutindo melhor os cenários comuns.

Suporte a navegador aprimorado

O MobX 6 suporta mais mecanismos JavaScript que o MobX 5. O 5 exigia suporte de proxy, tornando-o inadequado para Internet Explorer e React Native, por isso, o Mobx 4 era mantido ativamente. No entanto, o MobX 6 substitui os dois. Ele ainda exigirá Proxies, mas será possível cancelar o uso do Proxy caso precise oferecer suporte a mecanismos mais antigos.

Você pode verificar mais novidades em:

Gostou desta notícia? Comente abaixo!

Referência: https://michel.codes/blogs/mobx6

Publicado em

NativeScript 7.0 – Lançamento

A versão 7.0 do NativeScript é um passo decisivo para o framework, pois alinha-se com os padrões do JavaScript moderno, trazendo consistência para a stack. O NativeScript 7.0 fornece uma capacidade de atualizações mais eficientes com as mudanças no ecossistema JavaScript, reinando em uma varredura holística sobre o gerenciamento do código aberto em torno do framework.

Para instalar o NativeScript via npm:

npm i -g nativescript

O NativeScript possui novos aliases cli:

  • ns – O novo padrão;
  • nsc – “Compilador NativeScript”;
  • tns – funciona por razões históricas.

O novo comando clean garante que os arquivos de projeto sejam limpos quando necessário. Você pode usar o comando:

ns clean

Você precisa verificar se os plug-ins dos seus projetos possuem compatibilidade com o NativeScript 7 antes de migrar. Você também deve olhar o guia de referência para importação para nivelar quaisquer informações que seu projeto possa utilizar.

Com a segmentação do es2017 e posteriores, é permitido um código mais rápido e com melhor desempenho. O motor v8 usado no NativeScript sempre teve suporte de ponta para o ES mais recente.

Vários pacotes do npm também foram definidos, incluindo plug-ins para ajudar a esclarecer o que é compatívelcom NativeScript 7.

@NativeClass() decorator

Necessário apenas se você estiver usando TypeScript e estendendo uma classe nativa. Se você estiver usando JavaScript puro, use a função .extend().

Um dos recursos mais atraentes do NativeScript é estender as classes nativas diretamente no JavaScript. Mas o JavaScript não sabe como estender uma classe nativa por conta própria. No ES2017, extends é suportado nativamente e, portanto, deixa de fora o __extends necessário para os tempos de execução e esta é uma oportunidade perfeita pra usar o decorator.

nsconfig.json -> nativescript.config.ts

Há muito tempo existe uma key nativescript na raiz de qualquer aplicativo package.json, para gerenciar as id’s do pacote de aplicações e versões de runtime. Havia também outro package.json embutido no diretório src que continha sinalizadores de runtime. Também existia um arquivo chamado nsconfig.json, que continha outras configurações de aplicativo. Agora, no NativeScript 7, isso tudo é consolidade em um único arquivo nativescript.config.ts!

engine v8 iOS

No NativeScript 7.0, a runtime padrão do iOS usa o mesmo mecanismo v8, ajudando a melhorar a manutenção em tempos de execução.

Para conhecer mais novidades sobre o NativeScript 7, acesse a página de novidades.

Referências: https://nativescript.org/blog/nativescript-7-announcement/

Gostou desta notícia? Comente abaixo!

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

Tornando o código mais rápido usando Sets JavaScript

Muitos desenvolvedores limitam-se a utilização de objetos globais básicos, como strings, objetos, números, arrays e booleanos. Na maioria das vezes, isso realmente é tudo que você precisa mas, para tornar o código mais eficiente, nem sempre isso é todo o necessário.

Para isso, existem os Sets JavaScript, que tornam o seu código mais rápido a medida que ele é escalonado. O uso de sets traz resultados que seriam impossíveis de obter somente com arrays.

E como os sets são diferentes?

Bom, os arrays são coleções de dados indexados, ou seja, cada valor dos dados em um array é ordenado por um índice. Por exemplo:

let mainArray = [a, b, c, d];
console.log(mainArray.indexOf(a));
// 0
console.log(mainArray.indexOf(c));
// 2

Já os Sets são coleções codificadas. Não usam índices, mas ordenam os seus dados utilizando chaves. Seus elementos são iteráveis na ordem de inserção e não podem conter dados duplicados, ou seja, cada conjunto de dados deve ser único.

E quais são os benefícios?

  • Utilizar métodos como indexOf() ou includes() para verificar a existência de um elemento em um array é muito lento;
  • Nos Sets, você pode excluir o elemento pelo seu valor. Em um array, você pode utilizar o splice com base no índice do elemento, tornando-o lento pela dependência de índices;
  • É mais rápido adicionar elementos aos Sets do que adicionar elementos em um array utilizando metodos como push() ou unshift();
  • Um Set pode armazenar NaN;
  • Sets armazenam apenas valores únicos. Se você não pode trabalhar com duplicatas, esta é uma vantagem.

O quão mais rápido são os Sets?

Os métodos que o array utiliza possuem uma complexidade de tempo linear de O (N), ou seja, o tempo de execução necessário aumenta conforme aumenta o tamanho dos dados. Mas métodos que utilizam Sets para manipulações como inserção, exclusão e pesquisa possuem uma complexidade de tempo  O (1), e isso significa que o tempo de execução não varia, pois o tamanho dos dados não influencia no tempo de execução dos métodos.

Teste:

Realizando um teste, vamos criar um array e um set com um milhão de entradas cada:

let newArray = [], newSet = new Set(), n = 1000000;

for (let i = 0; i < n; i++){
    newArray.push(i);
    newSet.add(i);
}

Agora, pesquisaremos o número 425123 no array e no set:

let result; 
console.time('Array');
result = newArray.indexOf(425123) !== -1;
console.timeEnd('Array');

console.time('Set');
result = newSet.has(425123);
console.timeEnd('Set');

E a saída foi:

// Array: 1.201ms
// Set: 0.029ms

Gostaram deste artigo? Comente abaixo!

Referência: https://medium.com/@bretcameron/how-to-make-your-code-faster-using-javascript-sets-b432457a4a77

Publicado em

ECMAScript 2020: algumas novidades

Com as novas implementações do ECMAScript, temos novos recursos para melhorar o desempenho de nosso código e velocidade de codificação. Além de melhorias na sintaxe, temos novos operadores e novas implantações para facilitar o desenvolvimento com JavaScript. Caso você ainda não conheça algumas dessas implementações, o MundoJS possui um curso com as principais implementações do ECMAScript 2019 e 2020, e pode ser adquirido aqui.

Agora, conheceremos mais algumas implementações do ECMA2020:

Nullish Coalescing:

O Nullish coalescing adiciona a capacidade de verificar valores nulos em vez de valores falsey.

No JavaScript, alguns valores são falsey, como strings vazias, o 0, undefined, null, false, NaN, entre outros. Mas você pode querer verificar se a variável é null, ou seja, undefined ou null, pois é normal uma variável ter uma string vazia ou valor falso. Neste caso, você pode usar o novo operador Nullish Coalescing (??).

Em comparação a:

Como podemos ver, o operador || sempre retornará ‘Algum valor verdadeiro’, enquanto o operador ?? poderá retornar um valor não-nulo.

globalThis:

Se você escreveu código JS que pode ser usado no NodeJs, no navegador e dentro de web-workers, você pode ter dificuldade em obter o objeto global. Isso ocorre porque é utilizado window para os navegadores, global para o Node e self para web-workers. Se houver mais runtimes, também haverá objetos globais diferentes para eles. Neste caso, você teria que ter a sua própria implementação de detecção de runtime e, após isso, usar o objeto global correto. O ES2020 traz o globalThis, que sempre se refere ao objeto global, não importando onde o código será executado:

Module Namespace Exports:

Com módulos JavaScript, é possível utilizar a seguinte sintaxe:

import * as utilidades from './utilidades.mjs'

E agora, também podemos exportar código:

export * as utilidades from './utilidades.mjs'

E isso é o equivalente a:

import * as utilidades from './utilidades.mjs'
export { utilidades }

Well defined for-in order:

A especificação do ECMAScript não especificava em qual order o for-in deveria executar. Agora, isso está oficialmente padronizado no ES2020, pois os navegadores implantaram uma ordem de execução consistente.

import.meta:

O objeto import.meta foi criado pela implementação do ECMAScript com um prototype null.

Considere um módulo chamado modulo.js:

<script type="module" src="modulo.js"></script>

Agora, você pode acessar as meta-informações sobre o módulo utilizando apenas o import.meta:

console.log(import.meta)

Isso retornará um objeto com uma propriedade url que indicará a URL do nosso módulo. Isso é bom para saber o que obteremos em scripts externos ou descobrir a URL de documentos que estão contidos em nossos scripts internos.

Gostou deste artigo? Comente abaixo!

Publicado em

Novidades Vue v3.0.0 “One Piece”

O Vue.js está lançando a versão 3.0.0 denominada One Piece. Esta versão fornece um desempenho aprimorado, menor tamanho de pacotes, uma melhor integração do TypeScript e novas APIs para lidar com casos de uso em uma grande escala, com base sólida para iterações futuras de longo prazo do framework.

O 3.0 representa mais de 2 anos de desenvolvimento. o Vue é um projeto criado para a comunidade e sustentado pela mesma. Tem uma missão de ser simples, acessível para que qualquer pessoa possa aprendê-la rapidamente. Conforme o crescimento da base de usuários, a estrutura também cresceu em escopo, adaptando-se às demandas crescentes, evoluindo para o chamado “Framework Progressivo”.

Módulos internos em camadas

Na versão 3.0, a nova arquitetura oferece uma melhor capacidade de manutenção, permitindo que os usuários finais reduzam a metade do tamanho do tempo de execução.

  • O compilador suporta transformações AST personalizadas;
  • O runtime principal fornece uma API de primeira classe para a criação de renderizadores personalizados, visando diferentes destinos de renderização.
  • O módulo reactivity exporta funções que fornecem acesso direto ao sistema de reatividade do Vue. Este pode ser usado como um pacote independente, emparelhando com outras soluções de modelos.

Melhorias de desempenho

O Vue 3 mostra melhorias significativas de desempenho em relação à versão 2 em termos de tamanho de pacotes. No Vue 3, foi utilizado “DOM virtual informado pelo compilador”. O compilador realiza otimizações agressivas, gerando código de função de renderização, elevando o conteúdo estático, deixando dicas de tempo de execução para tipos de vinculação, nivelando nós dinâmicos dentro de um modelo para reduzir o custo de passagem em tempo de execução.

Integração aprimorada de TypeScript

O código base do Vue v3.0.0 é escrito em TypeScript, com as definições de tipo testadas e agrupadas automaticamente, para que deste forma, estejam sempre atualizadas. A API de composição funciona muito bem com inferências desse tipo.

Próximos passos:

As próximas implementações e mudanças serão:

  • Compilação de migração;
  • Suporte IE11;
  • Integração de roteador e Vuex em novos devtools;
  • Outras melhorias na inferência de tipo de modelo no Vetur.

Você pode ver todas as novidades no github do VueJS!

Gostou desta notícia? Comente abaixo!

Referências: https://github.com/vuejs/vue-next/releases/tag/v3.0.0

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

Promoção Pacote Profissional JavaScript + jQuery

Com pressa?
Acesse direto o curso clicando aqui

Olá pessoal!

Durante o mês de Setembro estamos com uma promoção para o curso Pacote Profissional JavaScript, ES2020 e jQuery (+ jQuery UI).

Neste curso, abordamos o desenvolvimento web com JavaScript e jQuery.

Você vai utilizar as tecnologias:

  • JavaScript;

  • jQuery e jQuery UI;

  • ES2019;

  • ES2020;

  • Conceitos modernos de desenvolvimento web.

E você vai aprender:

  • Fundamentos do JavaScript;

  • Estruturas básicas de programação;

  • Aprofundamento das estruturas ensinadas;

  • Atualizações que o JavaScript vem recebendo;

  • Conceitos essenciais de JQuery.

Tudo isso resolvendo projetos que lhe auxiliarão no desenvolvimento dos seus sites e aplicações web!

Mostramos no curso as novas atualizações do ECMAScript 2020, que auxiliam o desenvolvedor a otimizar os seus códigos.

O curso está com desconto de 75% pelos próximos 31 dias e pode ser adquirido diretamente por este link:

Use nosso cupom : 1E2D3E957FADED9578A2  ou acesse direto pelo link abaixo

Acessar curso

Compartilhe com seus amigos!