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

Frontend

HTML

Picture Element - HTML5

1 Aula Básico

Neste direto ao ponto vamos aprender a trabalhar com um elemento introduzido na versão 5 do HTML que veio para facilitar a trabalhar com imagem e responsividade.

Básico

Picture Element - HTML5

Criando modais nativas com Dialog - HTML5

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com o elemento nativo dialog que chegou no HTML5 e é capaz de gerar modais/pop-up nativos usando HTML, sem necessidade de trabalhar com implementações terceiras.

Intermediário

Criando modais nativas com Dialog - HTML5

Utilizando elemento Meter - HTML5

1 Aula Intermediário

Neste direto ao ponto vamos aprender o que é o elemento meter, introduzido no HTML5 que é capaz de representar um valor escalar dentro de um intervalo. Vamos entender quais as situações que podemos utiliza-lo para criar uma interface interativa para nosso usuário.

Intermediário

Utilizando elemento Meter - HTML5

HTML e CSS

CSS

CSS :is e :where como usar

1 Aula Intermediário

Neste direto ao ponto vamos aprender a tralhar duas novas features do CSS. Os pseudo classes :is e :where. Veremos como utilizar e quais o momentos apropriados para usar.

Intermediário

CSS :is e :where como usar

Entendendo conceito de SMACSS no CSS

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com a metodologia SMACSS utilizando CSS e veremos como aplicando em um projeto ela pode contribuir para crescimento do projeto.

Intermediário

Entendendo conceito de SMACSS no CSS

CSS: Entendendo a abordagem Utility First

1 Aula Intermediário

Neste direto ao ponto vamos entender e praticar a abordagem que está em constante evolução: Utility first. Vamos verificar quais os principais benefícios dessa abordagem e quando é interessante utilizar.

Intermediário

CSS: Entendendo a abordagem Utility First

Utilizando Clamp CSS

1 Aula Intermediário

Neste direto ao ponto vamos aprender utilizar a propriedade Clamp, afim de melhorar nosso layout responsivo quando temos que trabalhar com diversos tamanho de fontes a partir do tamanho de nosso layout.

Intermediário

Utilizando Clamp CSS

Touch device com CSS

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com uma propriedade ainda pouca falada no CSS porem de extrema importância para uma boa experiência do usuário. Vamos aprender como podemos detectar toques (touch) no celular e interagir com ele através do CSS.

Intermediário

Touch device com CSS

Javascript

Javascript: Trabalhando com Memoize

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com Memoize, um pattern capaz de ajudar na performance de regras de negocio, que consiste no cache do resultado de uma função baseado nos seus parâmetros de entrada.

Intermediário

Javascript: Trabalhando com Memoize

Entendendo Promises: any e try

1 Aula Intermediário

Neste direto ao ponto vamos continuar falando de Promises porem dessa vez, vamos entender os métodos any e try que fazem parte da arquitetura de Promises. Vamos verificar o que podemos fazer com eles e como funcionam.

Intermediário

Entendendo Promises: any e try

Trabalhando com Drag and Drop

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com o efeito Drag and Drop. Vamos trabalhar interagindo com a API nativa do HTML e também com SortableJS que é uma abstração da API nativa.

Intermediário

Trabalhando com Drag and Drop

Trabalhando com Decorators - ES7

1 Aula Avançado

Neste direto ao ponto vamos aprender a trabalhar com Decorators, uma funcionalidade já disponível em diversas outras linguagens de programação que também chegou ao Javascript na versão 7 do Ecmascript.

Avançado

Trabalhando com Decorators - ES7

React

Entendendo useEffect - React Hooks

1 Aula Intermediário

Neste direto ao ponto vamos aprender a utilizar um dos hook's mais famosos, o useEffect. Ele tem pode ser usado em diversas situações, vamos entender quais situações são essas e como aplicar.

Intermediário

Entendendo useEffect - React Hooks

Next.js: Primeiros passos

1 Aula Intermediário

Neste direto ao ponto vamos aprender o que é o Next.js e como podemos dar os primeiros passos utilizando o framework que irá mudar a forma que trabalhamos com React.js

Intermediário

Next.js: Primeiros passos

React: Trabalhando com Conditional Rendering

1 Aula Intermediário

Neste direto ao ponto vamos aprender o que é conditional rendering e como trabalhar. Iremos verificar as formas de aplicabilidade da técnica e quais as formas possivies de utilização.

Intermediário

React: Trabalhando com Conditional Rendering

React.js: Customizando CRA sem utilizar eject

1 Aula Intermediário

Neste direto ao ponto vamos aprender a customizar as configurações do boilerplate CRA(create-react-app) sem executar a task eject, responsável pela alteração do boilerplate para configurações.

Intermediário

React.js: Customizando CRA sem utilizar eject

Trabalhando com Typescript e React.js

1 Aula Intermediário

Neste direto ao ponto vamos aprender como iniciar um projeto utilizando React.js e Typescript. Veremos como gerar o projeto utilizando o create-react-app porem com Typescript e quais os principais benefícios que ganhamos ao utilizar.

Intermediário

Trabalhando com Typescript e React.js

Integrando React.js com libs jQuery

1 Aula Intermediário

Neste direto ao ponto vamos aprender a integrar o React.js junto ao jQuery, permitindo a utilização de diversos plugins existentes do jQuery dentro de nossa aplicação React.js

Intermediário

Integrando React.js com libs jQuery

React.js: Validando propriedades com PropTypes

1 Aula Intermediário

Neste direto ao ponto vamos aprender a validar as propriedades de nossos componentes, através do PropTypes. PropTypes é uma das várias formas que permite ao desenvolvedor prevenir bugs de sua aplicação a medida que a mesma vai crescendo.

Intermediário

React.js: Validando propriedades com PropTypes

Introdução ao Mobx

1 Aula Intermediário

Neste direto ao ponto vamos aprender o que é o Mobx e como ele pode ser uma ótima alternativa para quem deseja gerenciador estados dentro de uma aplicação React.js

Intermediário

Introdução ao Mobx

React Hooks - useRef

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com um dos hooks que chegaram na versão do React 16.8 o useRef. Capaz de manipular os elementos DOM de forma mais simples, trazendo muito mais simplicidade.

Intermediário

React Hooks - useRef

Verificando tipos estáticos com Flow - React

1 Aula Avançado

Neste direto ao ponto vamos aprender a identificar certos problemas antes mesmo de executar nosso código através de um ferramenta chamada Flow que é capaz de verificar tipos estáticos e sugerir melhorias.

Avançado

Verificando tipos estáticos com Flow - React

Utilizando template engine Pug com React.js

1 Aula Avançado

Neste direto ao ponto vamos trabalhar com o template engine Pug (antigo Jade) e aprender a integrar com o framework React.js, utilizando ele para criar o HTML ao invés de apenas JSX.

Avançado

Utilizando template engine Pug com React.js

High order components - React

1 Aula Avançado

Neste direto ao ponto vamos aprender a trabalhar com HOC dentro do React. Hight order components desempenham um papel muito importante em vários momentos dentro da tecnologia, vamos conhecer e aprender como criar um.

Avançado

High order components - React

TypeScript

Trabalhando com objetos no Typescript

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com objetos dentro do typescript. O que podemos fazer quando trabalhamos com objetos complexos e como podemos manipular os mesmos.

Intermediário

Trabalhando com objetos no Typescript

Typescript: Entendendo Types

1 Aula Intermediário

Neste direto ao ponto vamos entender o conceito e usabilidade de Type dentro do Typescript. Qual a sua diferença se comparado a interfaces e como podemos utilizar na prática.

Intermediário

Typescript: Entendendo Types

Trabalhando com Generics Classes com Typescript

1 Aula Intermediário

Neste direto ao ponto vamos aprender a trabalhar com um conceito muito presente no Typescript: Generics.Vamos entender o que é, como ele funciona e como podemos utilizar em todos os nossos projetos para torna-los mais abstraídos.

Intermediário

Trabalhando com Generics Classes com Typescript

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