/Nivel-05-FocusTimer

Nivel 05 - FocusTimer: Cronometro com som

Primary LanguageHTML

Nivel 05

FocusTimer

  • Apresentando o aplicativo - 01:20
  • Estrutura HTML do FocusTimer - 09:48
  • Iniciando os estilos do app FocusTimer - 10:36
  • Ajustando larguras e tamanhos com CSS clamp - 07:39
  • Alinhando com grid e finalizando o CSS - 09:45
  • Introdução à DOM do Browser - 10:06
  • Event-driven, programação imperativa e callbacks - 07:52
  • Refatorando para as novas funcionalidades - 10:02
  • Iniciando a lógica para o contador - 10:21
  • Avançando na lógica com pequenos passos - 13:07
  • Princípios de Clean Code e programação declarativa - 15:01
  • Resetando o cronometro e entendendo escopos - 14:43
  • Introdução ao ES6 Modules - 12:58
  • Continuando a modularização e resolvendo erros - 08:47
  • Criando objetos com o padrão Factory e injeção de dependências - 15:44
  • Refatorando os controles - 11:25
  • Resolvendo bugs e conversando sobre complexidade de projetos - 14:28
  • Últimos ajustes do contador - 11:43
  • Adicionando sons - 15:57
  • Finalizando a aplicação - 13:08

Conceitos estudados

  • DOM (Document Object Model): A sigla DOM significa Document Object Model, que em português significa Modelo de Documento por Objetos. Trata-se de uma interface de programação que os navegadores utilizam para representar páginas na web.

  • Callback: Uma função callback é uma função passada a outra função como argumento, que é então invocado dentro da função externa para completar algum tipo de rotina ou ação.

  • Programação imperativa: Baseado em instruções e comandos, o programador diz como e o quê exatamente um programa ou rotina deve realizar.

  • Programação declarativa: é um estilo de programação não imperativa, na qual os programas descrevem os resultados desejados sem listar explicitamente os comandos ou etapas que devem ser executados. Linguagens de programação funcionais e lógicas são caracterizadas por um estilo de programação declarativa.

  • Refatoração: é o processo de alterar um software de uma maneira que não mude o seu comportamento externo e ainda melhore a sua estrutura interna.

  • Simple Factory: é apenas um Singleton (ou apenas uma classe estática na maioria das linguagens de programação, mas, em JavaScript, eles são essencialmente os mesmos) que tem uma ou mais funções para criação e retorno de objetos.