Prática recomendada para HTML, CSS e Javascript: extensão do Chrome

Para quem acabou de terminar o Codecademy.

Quando você estuda programação, a maneira mais eficiente de estudar sozinho é desenvolver um produto. Essa abordagem é muito mais rápida do que fazer qualquer curso de programação para melhorar suas habilidades de programação.

Normalmente, as pessoas começam a aprender a programar com HTML, CSS e Javascript básico em programação da Web, no entanto, antes de chegarem à parte do servidor, é difícil criar um aplicativo significativo.

Então, eu sempre tentei convencer os alunos assim,

Vai ser divertido se você começar a aprender do lado do servidor e iniciar algum aplicativo. Por favor, não desista.

mas muitos estudantes param de aprender programação enquanto estão no estágio HTML e CSS.

(Talvez começar com HTML não seja uma boa ideia para incentivar as pessoas a estudar programação.)

Um dia, abri meu navegador Chrome para começar a trabalhar. Então percebi que estava usando o melhor aplicativo que você pode criar usando apenas HTML, CSS e Javascript.

Momentum

Para ser breve, se você instalar esta extensão no Chrome, sempre que abrir uma nova guia, haverá uma mensagem de saudação sobre uma imagem super bacana. O número de downloads já é de vários milhões. Se você não usou isso, eu recomendo que você o instale. Talvez você só experimente esse aplicativo por 2 a 3 segundos por nova guia, mas pode relaxar por um momento.

Vamos tentar clonar este aplicativo!

Fase 1: Coisas a preparar

  • HTML
  • CSS
  • Javascript
  • Bela imagem: de unsplash
  • manifest.json (a ser carregado no Chrome)

A maneira como desenvolvi o aplicativo rapidamente foi focando no presente, não no futuro. Obviamente, é importante ter um plano concreto quando não é seu projeto solo. Mas! A vida útil da auto-motivação é muito curta; portanto, quando você sentir vontade de desenvolver algo, é melhor finalizá-la rapidamente. Se você começar a pensar em outras opções que melhorarão seu produto, nunca terminará seu projeto.

Vamos simplificar.

Estamos criando um site com uma imagem grande, uma grande mensagem de saudação e talvez a hora atual.

Encontre uma foto

Se você for ao site Unsplash, poderá encontrar toneladas de imagens legais e sem licença.

Como estou na Noruega, decidi usar esta foto.
Obrigado, Vidar Nordli-Mathisen. (É sempre importante reconhecer o talento deles.)

Foto de Vidar Nordli-Mathisen no Unsplash

Faça um projeto

Simples Simples Simples

Um arquivo HTML, um CSS, um Javascript e um arquivo de manifesto.

É tudo o que precisamos.

Ok, esta é a primeira versão.

Esta é uma página da web simples. Agora, para ser carregado no Chrome, você deve adicionar o seguinte arquivo manifest.json.

"Chrome_url_overrides" é a propriedade mais importante nesta aplicação.

Vá para a página de extensãoClique no botão Clique no botão de seleção dentro da pasta do projetoNossa humilde extensão…Sempre que você abrir a nova guia, ela exibirá sua página da web simples.

Lá está, acabamos de terminar nosso primeiro projeto.

Você pode usá-lo apenas com essa funcionalidade. Talvez você possa editar o texto para algo com o qual deseja se motivar, como “impossível não é nada”, “apenas faça”, “nós somos o mundo”, algo-algo. Ou talvez você possa colocar sua foto de família.

Mas vamos torná-lo melhor do que isso.

Fase 2: Coisas a serem adicionadas

  • Hora atual
  • Função de mudança de nome
  • Função de mudança de imagem

Para incluir esses três novos recursos, alterei o arquivo HTML como abaixo.

CSS também deve ser alterado.

Então a nova página será como abaixo.

Oh, eu pensei que era Momentum :)

Atualizando manifest.json

Agora, adicionaremos dois recursos.

Antes de tudo, adicionaremos um formulário de entrada a este aplicativo para que as pessoas possam colocar seu nome nele. Adicionaremos este formulário na mensagem "Olá, Jungwon Seo".

Isso é feio, vamos consertar

Novo estilo para a tag de entrada.

Ok, muito melhor.

A partir de agora, precisamos pensar em como armazenar essas informações.

Usaremos "cookie", mas você não poderá usar "cookie" se você apenas abrir o arquivo HTML no navegador Chrome. Tente testar após o carregamento como uma extensão do Chrome.

Havia informações incorretas sobre a permissão de armazenamento na postagem anterior. Você não precisa da permissão de "armazenamento" para usar o "Cookie".

Além disso, como ainda prefiro usar o jQuery, vamos adicioná-lo.

Eu tentei adicionar o jQuery CDN, mas…

Não se preocupe, basta adicionar mais uma propriedade no manifest.json.

Bom, agora estamos prontos para codificar no arquivo script.js.

O que eu quero fazer primeiro é:

  1. Faça os usuários digitarem seu nome.
  2. Armazenar no cookie (vamos usar apenas o código mais popular)
  3. Esmaecer o formulário de entrada e esmaecer na mensagem de saudação.

Agora, é a primeira vez que temos que pensar como um desenvolvedor de verdade.

Caso 1: quando você o abre pela primeira vez.
Caso 2: quando você o abre depois de digitar seu nome.

Precisamos decidir o que deve ser visível e o que não deve ser.

Caso 1:
Hora: Hora atual
Mensagem de Saudação: Qual é o seu nome?
Formulário de entrada: visível

Caso 2:
Hora: Hora atual
Mensagem de saudação: Olá, !
Formulário de entrada: invisível

E, a maneira de diferenciar esses dois casos é verificar se o cookie possui a chave 'nome de usuário'.

Com a função de atualização de tempo, o novo script.js será como abaixo.

Antes de digitar o nomeDepois de digitar o nome

Ok, parece estar funcionando.

Obviamente, ainda precisamos melhorar algumas coisas, como efeitos de transição.

Mas vou dar a você.

Agora o que mais?

Precisamos adicionar a funcionalidade que permite aos usuários alterar sua imagem.

API anulada

Você pode registrar seu aplicativo facilmente e obter um token nesta página.

Para usar a API Unsplash, você deve registrar seu aplicativo na página do desenvolvedor.

Ao clicar em

Para o produto de demonstração, você poderá usar até 50 solicitações por hora. E isso é o suficiente para nós.

Basta preencher o formulário abaixo como quiser.

Digite qualquer nome

Se você criar o aplicativo, verá a parte "Chaves" no site redirecionado.

Eu apaguei este aplicativo, então não adianta tentar.

Você só precisa copiar a 'Chave de acesso' e atribuir à sua variável javascript 'ACCESS_KEY'.

Usaremos a API de pesquisa.

Aqui está o cenário. Todas as pessoas têm interesses diferentes. Quero perguntar primeiro ao interesse deles e depois pesquisarei essa imagem usando a API Unsplash. Depois disso, continuarei atualizando a imagem a cada 12 horas (mesma palavra-chave, imagem diferente).

Portanto, a função AJAX será como abaixo.

E essa função será chamada depois que você digitar seu interesse.

Então, como você pode esperar, precisamos ser um desenvolvedor novamente.

Caso 1-1: Primeira vez
Caso 1-2: Depois do nome
Caso 2: depois de digitar seu interesse
Caso 3: 12 horas depois.

Ok, vamos decidir um por um.

No caso 1–1, precisamos apenas ocultar toda a parte relacionada à imagem. Pule isso.

No caso 1–2, apenas mostra o formulário de entrada para o interesse.

No caso 2, ligue para o AJAX e salve as informações da imagem.

No caso 3, vamos definir o tempo de expiração para 12 horas e, se o cookie estiver vazio, ligue novamente para a solicitação AJAX.

Palavra chave: Londres

Sim, está funcionando.

Fase 3: retoques finais

Não é obrigatório creditar o fotógrafo, mas por que não?

Podemos escrever mais algumas linhas de código e creditar o nome e a página do fotógrafo no lado superior esquerdo.

Para que possamos usar as informações do fotógrafo quando você verificar o cookie pela primeira vez.

Mais uma coisa, e se alguém quiser mudar de interesse?

Vamos adicionar essa funcionalidade que permite que as pessoas digitem novamente seu interesse.

Antes de clicar no botão

Ai está. Se você clicar no botão "Escolha um novo interesse", será acionado para abrir o formulário de entrada onde você digitou seu interesse anteriormente.

Depois de clicar no botão

Fase 4: faça seu próprio produto.

Eu só quero que você experimente o processo do começo ao fim. Ainda assim, você precisa desenvolver isso sozinho para realmente absorver a habilidade que aprendeu.

Deve haver algumas funções que você acha que seria bom incluir, como a maneira de escolher a imagem aleatória. Ou você pode pensar que alguns dos meus códigos são ineficientes. Você pode melhorar sua versão do mesmo produto com um código melhor.

Boa sorte e não desista!

A versão completa pode ser encontrada aqui: https://github.com/thejungwon/MyChromeExtension

Esta história é publicada na Noteworthy, onde mais de 10.000 leitores vêm todos os dias para aprender sobre as pessoas e idéias que moldam os produtos que amamos.

Siga nossa publicação para ver mais histórias de produtos e design apresentadas pela equipe do Journal.