Vídeos direto ao ponto sobre Frontend | School of Net

Frontend

Angular 7

Angular - Atualizando versões com ng update

1 Aula Intermediário

Neste direto ao ponto, vamos aprender a como atualizar os pacotes Angular de uma aplicação construída com o Angular Framework. Através do ng é possível atualizar os pacotes angular de forma bem simples, adequando a aplicação Angular para as últimas versões do framework.

Intermediário

Angular - Atualizando versões com ng update

Angular - Como fazer um refresh token

1 Aula Avançado

Neste direto ao ponto, vamos aprender a como fazer um refresh token automático no Angular utilizando o conceito de HTTP Interceptors. Automaticamente quando a aplicação perceber que o token atual não tem mais validade, ela mesma se recuperará requisitando um novo token e reenviando a requisição atual.

Avançado

Angular - Como fazer um refresh token

HTML

Elemento Progress HTML 5

1 Aula Básico

Neste direto ao ponto, mostraremos como trabalhar com o novo elemento do HTML 5 que cria uma progress bar de maneira super simples e nativa.

Básico

Elemento Progress HTML 5

Elemento Time HTML5

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com um elemento novo do HTML5 que trabalha especialmente com data e tempo melhorando assim os resultados nos mecanismos de busca.

Intermediário

Elemento Time HTML5

HTML e CSS

Animações Web com BodyMovin

1 Aula Avançado

Nesse direto ao ponto vamos aprender a trabalhar com animações na web, algo que por muito tempo foi muito complexo de se realizar.

Avançado

Animações Web com BodyMovin

CSS

CSS Grid

1 Aula Básico

Neste direto ao ponto vamos falar sobre o recurso grid do CSS, recurso focado em grades com linhas e colunas, um recurso rico e poderoso para qualquer desenvolvedor front-end.

Básico

CSS Grid

@support CSS - Como Utilizar?

1 Aula Básico

Neste direto ao ponto vamos aprender a utilizar a tag @support que veio para nós ajudar a testar features dentro de browsers dentro do nosso CSS e saber se a propriedade tem suporte ao nosso browser ou não de maneira nativa.

Básico

@support CSS - Como Utilizar?

Columns CSS

1 Aula Básico

Neste direto ao ponto, mostraremos como organizar textos em colunas utilizando CSS com ajuda da propriedade Columns, que chegou para realizar essa função com zero esforço.

Básico

Columns CSS

Utilizando BEM CSS

1 Aula Intermediário

Neste direto ao ponto aprenderemos a trabalhar com BEM, uma metodologia que busca organizar afim de padronizar a escrita do seu CSS

Intermediário

Utilizando BEM CSS

Lógica de programação

Regex - Buscar e Substituir em IDEs

1 Aula Básico

Neste direto ao ponto, mostraremos como usar expressões regulares para efetuar buscas e substituições de termos e textos com IDEs. A expressão regular permite, de modo avançado, que realizemos buscas que não seriam possíveis de modo habitual, facilitando muitas tarefas do dia a dia da área de tecnologia.

Básico

Regex - Buscar e Substituir em IDEs

Javascript

Vue.js Mixins - Reaproveitando componentes

1 Aula Básico

Neste direto ao ponto, vamos aprender a como reaproveitar estruturas semelhantes usadas em componentes diversos com o Vue.js. O recurso chamado de Mixins, permite criar um módulos que são reusáveis em qualquer componente Vue, diminuindo código-fonte nos componentes e melhorando a manutenção.

Básico

Vue.js Mixins - Reaproveitando componentes

Array.from - Javascript

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com listas (arrays) focando em um método especifico: Array.from que irá facilitar o nosso dia a dia em tarefas comuns que antes demandavam muito tempo.

Intermediário

Array.from - Javascript

Vue UI - Interface de gerenciamento de projetos Vue

1 Aula Intermediário

Neste direto ao ponto vamos conhecer a Vue UI, ou Vue User Interface, onde é possível criar e gerenciar projetos Vue sem precisar de acesso a linha de comando, tudo em uma interface bonita e simples.

Intermediário

Vue UI - Interface de gerenciamento de projetos Vue

Landing Page VuePress

1 Aula Intermediário

Neste direto ao ponto mostraremos como usar o Vuepress, uma ferramenta do mesmo criador do Vue.js, para gerar landing pages com SSR focadas em conversão de vendas/leads.

Intermediário

Landing Page VuePress

Module ES6 no Browser - Como usar?

1 Aula Intermediário

Neste direto ao ponto vamos aprender a utilizar o module pattern presente no ES6 que agora está disponível para a utilização nos browsers modernos, facilitando assim o desenvolvimento de nossas aplicações frontend.

Intermediário

Module ES6 no Browser - Como usar?

Leitor de código de barras com Javascript

1 Aula Intermediário

Neste direto ao ponto vamos aprender como ler códigos de barra utilizando a câmera do celular, webcam ou outra disponível utilizando apenas HTML e Javascript.

Intermediário

Leitor de código de barras com Javascript

Múltiplas instâncias Vue no Laravel

1 Aula Intermediário

Neste direto ao ponto, vamos aprender como usar várias instâncias Vue.js independentes por páginas em uma aplicação Laravel, ou seja, utilizando o conceito Multi Page Application. Cada página com Blade terá sua instância Vue independente com suas próprias responsabilidades.a

Intermediário

Múltiplas instâncias Vue no Laravel

Iterações assincronas - Javascript

1 Aula Intermediário

Neste direto ao ponto vamos aprender a criar iterações (loops) assincronas utlizando features do ES6 que vai proporcionar isso de maneira efetiva e super rápido, sem a necessidade de reescrever funções a partir de sua pollyfil.

Intermediário

Iterações assincronas - Javascript

Trabalhando com Proxy no Javascript

1 Aula Intermediário

Neste direto ao ponto, ensinaremos como usar o objeto Proxy do Javascript para determinar o que acontece quando um objeto tem seu valor alterado, de forma que possamos disparar os mais diversos efeitos.

Intermediário

Trabalhando com Proxy no Javascript

NumVerify - Validação de Telefone

1 Aula Intermediário

Neste direto ao ponto, mostraremos como utilizar uma API para validação de telefone, chamada NumVerify. É um serviço especializado em validação de telefones de vários países, possui suporte ao número brasileiro e é ideal para casos em que há necessidade em trabalhar com número de telefone na aplicação.

Intermediário

NumVerify - Validação de Telefone

Recortando imagens com Javascript

1 Aula Intermediário

Neste direto ao ponto, ensinaremos como recortar imagens usando a biblioteca Croppie. De forma muito intuitiva, mostraremos desde a seleção da imagem no dispositivo (computador ou celular), adição de pré-visualização no DOM até o redimensionamento e corte arrastando a imagem, para obter um resultado final incrível.

Intermediário

Recortando imagens com Javascript

JSON com Javascript

1 Aula Intermediário

Neste direto ao ponto vamos aprende a trabalhar JSON utilizando o javascript de forma nativa.

Intermediário

JSON com Javascript

Wrapper IIFE Javascript

1 Aula Avançado

Neste direto ao ponto vamos aprender a trabalhar com IIFE ou funções imediatas. Aprenderemos como podemos criar um wrapper o código ficar mais legível.

Avançado

Wrapper IIFE Javascript

Angular 6

Drag and Drop com Angular

1 Aula Intermediário

Neste direto ao ponto vamos falar sobre como trabalhar com arrasta e solta em nossas interfaces com Angular 2+, vamos usar a biblioteca ngx-drag-drop e ver todas as possibilidades que a library oferece, e são muitas.

Intermediário

Drag and Drop com Angular

Angular - Ambientes de execução

1 Aula Intermediário

Neste direto ao ponto, ensinaremos como o Angular organiza diferentes ambientes de execuções e como melhorar este ambiente através do Git.

Intermediário

Angular - Ambientes de execução

Vue.js

Criando sites estáticos com Vuepress

1 Aula Básico

Neste direto ao ponto vamos ver como usar o Vuepress, ferramenta do mesmo criador do Vue.js, voltado para geração de sites estáticos com SSR e otimização SEO.

Básico

Criando sites estáticos com Vuepress

Deploy de projeto Quasar no Heroku

1 Aula Intermediário

Neste direto ao ponto quero mostrar como publicar um projeto Quasar (versão SPA ou PWA) no Heroku sem sofrimento, uma das alternativas mais simples que vi atualmente.

Intermediário

Deploy de projeto Quasar no Heroku

Vue.js - Slots

1 Aula Intermediário

Neste direto ao ponto vamos aprender como usar o recurso slot do Vue.js para criar componentes reutilizáveis com conteúdo.

Intermediário

Vue.js - Slots

React

PropTypes React.js - Como usar

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com a prop-type. Uma forma de dizer quais são as propriedades requeridas do seu componente.

Intermediário

PropTypes React.js - Como usar

Trabalhando com Portals React

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com a funcionalidade chamada Portals do React que ajuda a trabalhar com Node diferentes em nossa aplicação.

Intermediário

Trabalhando com Portals React

Material Design com React

1 Aula Intermediário

Nesse direto ao ponto, mostraremos como implementar os conceitos do Material Design utilizando o React.js. Faremos isso através da MUI, uma lib que traz todos os conceitos em formas de componentes React.

Intermediário

Material Design com React

Criando SplashScreen - React Native

1 Aula Intermediário

Neste direto ao ponto, mostraremos como criar uma splash screen utilizando o React Native com o boilerplate create-react-native-app, que tem suporte ao expo. Veremos como é simples trabalhar com a splash screen quando utilizamos o expo.

Intermediário

Criando SplashScreen - React Native

Reactstrap - Componentes Bootstrap no React.js

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com o Reactstrap, uma lib que traz o Boostrap em forma de componentes React, facilitando o desenvolvimento de nossas interfaces.

Intermediário

Reactstrap - Componentes Bootstrap no React.js

Documentando Components React.js

1 Aula Avançado

Neste direto ao ponto vamos aprender a documentar nossos componentes criado em React.js utilizando uma lib especialmente criada pra isso: React Styleguidist, uma lib capaz de prover uma forma simples e eficaz de documentar nossos componentes.

Avançado

Documentando Components React.js

Erros em Componentes com ComponentDidCatch

1 Aula Avançado

Neste direto ao ponto vamos aprender a trabalhar com uma nova parte do ciclo de vida de um component React: A captura de erro. Novidade da versão 16.

Avançado

Erros em Componentes com ComponentDidCatch

Outros

ES7 - Trabalhando com decorators

1 Aula Básico

Neste direto ao ponto, apresentaremos um novo recurso da EcmaScript 7, a possibilidade de criar decorators no JavaScript. Decorators são funções que podem estender e adicionar funcionalidades às classes, métodos e propriedades. Este recurso mudará a forma como programamos com JavaScript.

Básico

ES7 - Trabalhando com decorators

Snippets no Visual Studio Code

1 Aula Básico

Neste direto ao ponto, ensinaremos como ganhar produtividade usando snippets. Além de criar blocos de códigos, o recurso permite inclusão de "Tabstops" para controlar a navegação pelo bloco através da tecla tab, oferecendo valores padrão ou opções dentro dos tabstops. Falaremos, também, sobre intelisense e o Emmet.

Básico

Snippets no Visual Studio Code

Sublime Text para Iniciantes

1 Aula Básico

Neste direto ao ponto vamos conhecer o Sublime Text 3, um editor de texto focado em código que é extremamente leve e altamente produtivo, com recursos nativos aprimorados e capacidade de expanção simplificada, graças ao Package Control. O Sublime Text é uma ferramenta indispensável no meu dia a dia.

Básico

Sublime Text para Iniciantes

Utilizando proxy do BrowserSync com Express.js e Gulp

1 Aula Intermediário

Ensinaremos a trabalhar com a propriedade proxy do browsersync, utilizando uma tarefa do gulp com expressjs (ou qualquer outro servidor). Você encapsulará seu vhost e conseguirá acessar ambos, em apenas um local.

Intermediário

Utilizando proxy do BrowserSync com Express.js e Gulp

Validações de dados no front end com Validator

1 Aula Intermediário

Neste direto ao ponto utilizaremos uma biblioteca para validação no front end chamada de Validator, ela conta com uma suite enorme de validação capaz de validar as situações mais comuns do dia a dia.

Intermediário

Validações de dados no front end com Validator

Trabalhando com IndexedDB - Banco de dados no navegador

1 Aula

Neste direto ao ponto, apresentaremos um banco de dados chave-valor, nativo dos navegadores. Ensinaremos como se conectar, criar storages (como tabelas no MySql) e na sequência, como incluir, visualizar, editar e remover registros do banco, tudo disponibilizado offline.

Trabalhando com IndexedDB - Banco de dados no navegador