Como usar o Glitch (editor de textos online) em 15 minutos
Neste tutorial, vamos falar sobre o editor de textos: Glitch. Vou trazer as características principais, as funcionalidades e te mostrar na prática como utilizá-las.
Ele está disponível no endereço: https://glitch.com
É uma plataforma online, onde você pode criar projetos diretamente no browser, sem precisar instalar nenhum aplicativo. Com ele você pode trabalhar de forma colaborativa com seu time. Existe uma versão gratuita, que é bastante útil e traz muitas funcionalidades, mas você também pode optar por pagar o Glitch Pro, que vai te proporcionar vários outros recursos. Vamos falar sobre eles a seguir.
Ferramentas, Funcionalidades e Possibilidades
Essas são algumas das possibilidades que você terá utilizando o Glitch:
Glitch In Bio – Um template que você poderá usar para criar uma landing page com a lista com seus links favoritos e customizá-los gratuitamente. É bem parecido com o link tree. Essa página você pode colocar no link da Bio das suas redes sociais.
Sites simples – Você também pode desenvolver aplicações simples com HTML e CSS
Sites estáticos – Você pode editar códigos gerados através do Eleventy
Aplicações Full Stack – Você poderá desenvolver aplicações completas com Back-end e Front-end.
Você pode optar por criar os arquivos do zero através da plataforma ou importar arquivos de projetos para começar a editar (podem ser importados de pastas do computador ou do GitHub)
Ao clicar em “New Project”, você deve escolher uma das opções:
Prettier
Tem suporte para o Prettier que vai te ajudar a deixar seu código mais organizado e formatado de forma mais rápida. É só clicar no botão “Prettier”, que ele vai aplicar a formatação e ainda vai mostrar uma animação com glitters na tela, isso traz uma interação mais descontraída, mas você pode desabilitá-la a qualquer momento. Veja na imagem abaixo:
É possível também aplicar a formatação em apenas uma parte do arquivo. Basta selecionar o fragmento que deseja aplicar e clicar no botão.
O Glitch utiliza uma biblioteca do Prettier para customizar as preferências dele. Algumas regras vem aplicadas por padrão, mas você pode modificá-las no arquivo .prettierrc.json
O Editor de Projeto
A estrutura do editor é bem parecida com a de outros editores, sendo que é dividida em 3 partes, à esquerda fica a árvore de diretório, onde visualizamos os arquivos, na parte do centro, editamos o código e à direita é a área onde podemos visualizar o resultado. Bem simples e fácil de entender.
Termos de Uso
É importante se atentar à alguns detalhes para não perder seus projetos e não ter dores de cabeça durante o desenvolvimento.
Horas de projeto
Os projetos podem ser criados de forma anônima, mas dessa forma, terá 120 horas gratuitas de projeto, além de projetos anônimos expirarem automaticamente em 5 dias. Para conseguir horas adicionais e evitar que o projeto expire, você precisa criar uma conta.
Todos os usuários registrados recebem 1000 horas gratuitas de projeto por mês e as horas não utilizadas não são acumuladas. Usuários do Glitch Pro recebem 4000 horas de projetos por mês.
É possível gerenciar a quantidade de horas que ainda restam, através de um painel na página inicial.
Espaço de armazenamento
As aplicações possuem um limite de 200MB de espaço em disco. O conteúdo da pasta temporária /tmp não conta, pois os arquivos são removidos assim que o aplicativo é reiniciado.
Por padrão os módulos do node.js não contam também nesse total. É reservado 1GB para a onde modules.
Tem um espaço adicional de 512MB para o armazenamento de assets (arquivos do projeto). O tamanho limite de upload é 256MB.
As aplicações possuem um limite de 512MB de RAM.
Limite de requisições
As aplicações possuem um limite de 4000 requisições por hora.
Fazendo o upgrade para o Glitch Pro, não há limites de requisições e você poderá fazer projetos privados. Recebe memória extra, mais espaço em disco, o que torna mais tranquilo o desenvolvimento de aplicações mais profissionais.
Suporte
Possui um suporte muito bom com uma comunidade ativa, além de uma documentação com perguntas frequentes, discussões sobre erros mais comuns entre outros assuntos.
Glitch In Bio na Prática
Vamos fazer um Glitch In Bio para entender como funciona:
1 – Clique em New Project, em seguida em “Find More” no menu que será aberto.
2 – Em seguida vai abrir essa janela e você pode clicar no ícone à direita embaixo, “Glitch in Bio” > “Remix your Own”
3 – Abrirá essa tela, com um vídeo explicativo de como você pode configurar e editar seu projeto para iniciar. Ele mostra também todo o passo a passo de como você pode fazer para editá-lo.
4 – Vou acessar o arquivo settings.json à direita e modificar o nome do primeiro título e colocar o link para redirecioná-lo.
jewish online dating sites in santa fe nm
5 – Depois vamos mudar o tema, vejam que ainda está o tema padrão do Glitch, mas podemos customizar. Para isso, vamos acessar a pasta public/styles/themes. Podemos escolher outros temas para testar. No nosso caso, vamos manter o tema atual, mas modificá-lo. Clique no nome do tema, vai abrir o editor.
Vamos alterar a cor do fundo e colocar a cor preta. Em body background, vamos colocar a cor preta #000000
6 – Agora vamos trocar a cor da borda dos botões para vermelho: Em .root (—color-primary) vamos colocar a cor # 9B111E
7 – Agora vamos trocar a imagem e vamos colocar a imagem do Javascript, para lembrar nosso curso principal que é o FullStack Javascript. Coloquei o link do dev icons em “avatar image”.
Você ainda pode personalizar mais e colocar seus links principais e cores preferidas. Depois disso sua página estará pronta!
Se você gostou de conhecer melhor o Glitch, dê seu like e siga nossa página para ver mais conteúdos como esse. E caso você queira aprender mais sobre programação para criar páginas completas no Glitch, temos o curso Programador Full Stack Javascript que vai te ensinar a base da programação web e você poderá se tornar um desenvolvedor Javascript Full Stack do zero, mesmo não tendo nenhum conhecimento inicial!
