Clever Geek Handbook

Tarefas para o treinamento de front-end: doodle-place, Apple Podcasts, Site Blocker, analisando arquivos CSV

Clone do Doodle-place



imagem



O doodle-place é um mundo on-line preenchido com rabiscos animados. Você pode passear e ver rabiscos criados por usuários em todo o mundo ou contribuir.



O que você aprenderá criando um clone do doodle-place:



  • Usando a API do Canvas em JavaScript para desenhar gráficos como rabiscos na tela.
  • Técnicas para trabalhar com gráficos 2D e a API WebGL
  • Trabalhe com a entrada do usuário, como imagens, e armazene os resultados em um banco de dados.


Analisando arquivos CSV para JSON



Este aplicativo usa d3-dsv (lado do cliente) para analisar arquivos CSV. O d3-dsv é um utilitário incluído no d3 (uma popular biblioteca de visualização de dados), mas também pode ser usado por si só, conforme mostrado aqui.



imagem



O que você aprenderá criando um analisador de CSV para JSON.





Clone de extensão de bloqueio de site



O Site Blocker é uma extensão da Web que permite bloquear um ou mais sites adicionando um nome de domínio. Gerencie seu tempo com eficiência, sem distrações.



imagem



O que você aprenderá criando um clone "Site Blocker":



  • Tudo o que você precisa para criar extensões de navegador
  • JavaScript, HTML e CSS para criar extensões.
  • Trabalhando com sites de extensão no Chrome / Firefox / Safari.


Clone Noção



O Noção é um aplicativo para anotações leve, rápido e sem distrações e muito mais. Eu o uso para acompanhar minhas tarefas e idéias. O que eu amo no Notion é o suporte à linguagem de marcação Markdown.



Não há restrições: você pode criar uma versão desktop do Notion, bem como uma versão móvel ou web. Escolha o seu ambiente favorito (ou o que você mais deseja explorar).



imagem



O que você aprenderá criando um clone de noção:



  • Se você quiser avançar, use o Grid em CSS . Grade é fantástico para criar layouts.
  • Trabalhando com um banco de dados. Você deseja armazenar suas anotações em um banco de dados que possa ser consultado posteriormente.
  • DevOps. Quando terminar, implante o aplicativo na Web ou na loja de aplicativos. Mostre ao mundo o que você fez.


Apple Podcast Clone



O aplicativo Podcasts para iOS e macOS fornece acesso fácil a podcasts populares e emergentes usando os ícones de navegação na parte inferior do aplicativo.



imagem



O que você aprenderá criando um clone do Podcast:



  • Como obter dados da API. No caso deste aplicativo, os dados são representados por podcasts. Use esta API para obter todos os podcasts.
  • Como desenvolver um aplicativo de desktop para Mac OS ou iOS e implantá-lo em uma loja de aplicativos. Se você gosta de construir para a web, isso também é ótimo!
  • Construindo interfaces nativas. Por exemplo, você aprenderá como exibir dados na tela.


imagem


Descubra os detalhes de como obter uma profissão de alto nível do zero ou subir de nível em habilidades e salário fazendo os cursos on-line pagos do SkillFactory:











More articles:


All Articles