Cardápio Online

Link do projeto

Projeto completo do zero utilizando HTML, CSS, Tailwind CSS e JavaScript. Com técnicas essenciais de desenvolvimento web, foi criado uma aplicação dinâmica e responsiva deste projeto completo.

O que é o Tailwind CSS

Tailwind CSS é um framework CSS de código aberto que se destaca por sua abordagem única de design utilitário. Em vez de fornecer estilos pré-estilizados para elementos específicos, ele fornece uma série de classes utilitárias que podem ser diretamente aplicadas aos elementos HTML para estilizá-los. Isso simplifica o processo de criação de estilos para páginas web e aumenta a produtividade.

Ele trabalha com classes, que vão somando com cada classe do projeto até formar a página.

O Tailwind CSS é projetado com uma abordagem “mobile-first”. Isso significa que as classes de utilitário sem prefixo (como uppercase) são aplicadas em todos os tamanhos de tela, enquanto as classes de utilitário com prefixo (como md:uppercase) só são aplicadas no breakpoint especificado e acima. Portanto, você pode facilmente construir interfaces de usuário adaptativas sem nunca sair do seu HTML. Isso é semelhante ao que você pode estar acostumado em outros frameworks como o Bootstrap.

O que é o package.json?

Quando você executa o comando npm init -y no terminal em seu projeto, o npm (Node Package Manager) cria um arquivo chamado package.json no diretório atual do projeto. O package.json é um arquivo de metadados para o seu projeto Node.js. Ele contém informações sobre o projeto, como o nome, versão, descrição, dependências, scripts de execução e outras configurações importantes.

A opção -y é uma abreviação de --yes, que faz com que o npm aceite automaticamente todas as perguntas feitas durante a inicialização do package.json, usando os valores padrão para as respostas. Isso é útil quando você deseja criar rapidamente um package.json com as configurações padrão e não precisa revisar ou alterar manualmente cada uma delas.

Ao executar npm init -y, o npm cria um package.json com valores padrão, incluindo informações mínimas como nome do projeto, versão, descrição e ponto de entrada (geralmente o arquivo principal do seu aplicativo). Você pode então editar este arquivo manualmente ou adicionar mais informações conforme necessário, como dependências, scripts de execução, autor, licença, entre outros detalhes do projeto.

Um arquivo .json é um tipo de arquivo de texto usado para armazenar e transmitir dados de forma estruturada. Ele usa uma sintaxe simples de pares chave-valor e é comumente usado na programação para configurar aplicativos, trocar dados entre servidores e clientes web e outras tarefas de gerenciamento de dados.

O que é o deploy?

Usado principalmente no contexto de desenvolvimento de software e refere-se ao processo de lançar ou disponibilizar uma aplicação ou uma nova versão de um software para uso em um ambiente operacional, como um servidor ou uma plataforma de nuvem. Isso geralmente envolve a transferência dos arquivos e recursos necessários para o ambiente de produção e a configuração adequada para que o software funcione corretamente. O objetivo do deploy é tornar o software acessível e utilizável pelos usuários finais.

Em programação, o termo deploy está intimamente relacionado à sua tradução literal do inglês: implantar. Em termos práticos, fazer um deploy significa colocar no ar uma aplicação que teve seu desenvolvimento concluído.

As etapas de um deploy são:

Desenvolvimento — a aplicação fica apenas na máquina do programador, um ambiente de tentativa e erro, onde o profissionais tem a liberdade para criar e trabalhar. Tanto o profissional quanto o código amadurecem para a próxima etapa,

Staging/Teste — também chamado de ambiente de homologação. A aplicação passa pelo primeiro deploy para ser disponibilizada a equipe de teste, sendo disponível em uma intranet ou em um ambientes restrito, e a

Produção — após testes, melhorias e correções, a aplicação é implantada no ambiente de produção, agora disponível para os usuários finais.

Em resumo, deploy é o processo que permite que uma aplicação saia do ambiente de desenvolvimento e seja colocada em uso, garantindo que os usuários possam interagir com ela. Quando você cria um site, um software ou um aplicativo e o torna acessível aos usuários finais, você está realizando um deploy.

O que é o método 'Splice' no JavaScript?

O método splice() em JavaScript é um método integrado para manipular arrays. Ele modifica o array original, removendo, substituindo ou adicionando elementos. A sintaxe do método splice() é a seguinte: array.splice(indice, deleteCount, elemento1, ..., elementoN)

Os parâmetros são:

• indice : O índice no qual deve iniciar a alteração do array. Se for maior que o tamanho total do array, nenhum elemento será alterado. Se for negativo, irá iniciar a partir daquele número de elementos a partir do fim.


• deleteCount : Um inteiro indicando o número de elementos antigos que devem ser removidos. Se não for especificado, ou se for maior que o número de elementos restantes no array iniciando pelo índice, então todos os elementos até o fim do array serão deletados. Se for 0, nenhum elemento é removido


• elemento1, ..., elementoN : Os elementos a serem adicionados no array. Se você não especificar nenhum elemento, splice simplesmente removerá elementos do array.

O valor de retorno é um novo array contendo os elementos deletados. Se nenhum elemento for removido, um array vazio é retornado.

Aqui está um exemplo de como usar o método splice():
var myFish = ["angel", "clown", "mandarin", "surgeon"];

// remove 0 elementos a partir do índice 2, e insere "drum"

var removed = myFish.splice(2, 0, "drum");

// myFish é ["angel", "clown", "drum", "mandarin", "surgeon"]

// removed é [], nenhum elemento removido

Observações e Anotações para Estudo

• Quando for realizar um npm init -y no Terminal para criar um package.json, o nome do diretório do seu projeto não pode ter mais de uma palavra separada, como Cardápio Online, certifique-se de colocar apenas uma palavra ou, se tiver mais de uma, coloca-lá juntos (senão pode dar um erro ao criar o pacote .JSON).


• Dentro do arquivo tailwind.config.js, na parte 'content', este caminho escrito que contém HTML e JS, dizendo que os arquivos dentro da nossa pasta que termina com esses dois, podem usar o Tailwind CSS.


• Arquivo package.json, dentro de scripts, sempre configurar para utilizar o Tailwind CSS: "dev": "npx tailwindcss -i ./styles/style.css -o ./styles/output.css --watch"


• Sempre que abrir novamente o seu projeto com Tailwind CSS, não esqueça de configurar no CMD (Prompt de Comando), o seguinte comando: npm run dev e abrir seu arquivo da página web com o "Open With Live Server".


• md, lg, sm: medium | large | small — Media Query: um recurso do CSS3 que permite adaptar o layout de uma página web para diferentes tamanhos de tela e tipos de mídia. Ela consiste em um tipo de mídia e uma ou mais expressões que limitam o escopo das folhas de estilo usando características de mídia, como largura, altura e cor. Isso facilita a criação de sites responsivos que se adaptam automaticamente ao dispositivo do usuário


• A tag main do HTML define o conteúdo principal dentro do de um documento ou aplicação. O conteúdo dentro do elemento main deve ser único para o documento e diretamente relacionado ao tópico central da página ou à funcionalidade central da aplicação. Isso significa que seções da página que são comuns a todo o site ou aplicação, como mecanismos de navegação, informações de copyright, logotipo e campos de busca, não devem ser incluídas dentro do elemento main. Além disso, a tag main não pode ser filha dos elementos article, aside, footer, header, ou nav. Você deve usar a tag main do HTML quando precisa de um elemento para inserir o conteúdo principal da página. O conteúdo principal são os textos, imagens, tabelas que estão relacionados com o tema proposto do link em que entramos. Este conteúdo deve ser único na página, ou seja, não deve ser repetido ao longo da página.


• Propriedade flex no CSS — usada em um contêiner flexível para controlar o comportamento de seus itens filhos. Ela é uma abreviação para as propriedades flex-grow, flex-shrink e flex-basis, que controlam como um item cresce, encolhe e é dimensionado inicialmente dentro do contêiner.


• Propriedade grid no CSS — usada para criar um layout de grade bidimensional. Ela é uma abreviação para várias propriedades que definem as linhas e colunas da grade, bem como as áreas da grade. Isso permite um controle preciso sobre o posicionamento e dimensionamento dos elementos na página.




• Método addEventListener() no JavaScript: usado para anexar um manipulador de eventos a um elemento do DOM (Documento de Objeto Modelo). Ele permite que você especifique uma função que será executada quando um evento específico ocorrer no elemento. O addEventListener() escuta os eventos em elementos e executa ações específicas quando esses eventos ocorrem. É uma ferramenta poderosa para interatividade e manipulação de elementos na web.


• Slice no JavaScript: refere-se a um método de array que retorna uma cópia de parte de um array original. Ele não altera o array original, mas cria um novo array contendo os elementos especificados.Um "slice" é uma parte de um array. É como cortar uma fatia de um bolo. Imagine que você tem um bolo (que seria o seu array) e você quer uma parte específica dele, como apenas a parte do meio. O método slice() faz exatamente isso para os arrays.. Ele não altera o array original, mas cria um novo array contendo os elementos especificados. O método slice() aceita dois argumentos opcionais: o índice inicial e o índice final do intervalo a ser copiado. Se nenhum argumento for fornecido, slice() copiará todos os elementos do array original.


• innerHTML, innerText e TextContent no JavaScript : propriedades usadas para manipular o conteúdo de um elemento HTML, mas funcionam de maneiras ligeiramente diferentes. O innerHTML retorna ou define o conteúdo HTML de um elemento. Ele inclui tanto o texto quanto as tags HTML dentro do elemento. Já o innerText retorna ou define apenas o texto “visível” de um elemento. Ele ignora as tags HTML e considera o estilo CSS (como display: none ou visibility: hidden). E o textContent retorna ou define todo o conteúdo de texto de um elemento, incluindo nós de texto em elementos filhos. Ele ignora as tags HTML, mas não considera o estilo CSS.


• O que é uma API (Application Programming Interface — Interface de Programação de Aplicação): atua como um intermediário que permite a comunicação entre diferentes softwares, facilitando a troca de informações e serviços. Por exemplo, em um aplicativo de viagens, a API permite que o aplicativo envie solicitações para várias companhias aéreas e receba opções de voo em resposta. Isso é possível devido à definição de um "idioma comum" pela API, que permite a troca de dados sem a necessidade de entender internamente o funcionamento de cada sistema. Testes em APIs são essenciais para garantir sua funcionalidade, segurança, desempenho e usabilidade, assegurando assim a entrega de produtos de software robustos e de alta qualidade.


• Toastify JS para alertas/notificações : é uma biblioteca de notificação de toast — notificações de computador com uma mensagem leve que aparece na interface do usuário e desaparece automaticamente após um curto período de tempo. Ele é chamado de ‘toast’ porque, assim como uma torrada que salta da torradeira, a notificação aparece e desaparece sem interromper a atividade do usuário. Geralmente, é usado para fornecer feedback rápido sobre uma operação sem exigir uma ação do usuário. Por exemplo, pode informar que uma mensagem foi enviada ou que um arquivo foi salvo — leve com o JavaScript. Aqui estão alguns dos seus recursos: notificações múltiplas e empilhadas, não bloqueia a thread de execução, opções de personalização incluem texto de notificação, duração, cor de fundo do toast, exibição do ícone de fechamento, posição de exibição e posição de deslocamento.

Fontes Bibliográficas

1. Responsive Design by Tailwind CSS


2. 'Mobile First' to 'Desktop First' by Stack Overflow


3. Motivos para usar o Tailwind CSS by Pingback


4. O que é Tailwind CSS e como usar by Brasil Code


5. Guia completo de Tailwind CSS by Programadores Deprê


6. O que é Tailwind CSS by freeCodeCamp


7. O que é Tailwind CSS e como instalar via CDN by treinaWeb


8. O que é uma API? by João Santos on LinkedIn


9. Flexbox vs. Grid no CSS by Medium