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

Frontend

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

Elemento Detail e Summary - HTML

1 Aula Intermediário

Neste direto ao ponto, mostraremos como trabalhar com o elemento details e summary que já existiam no HTML, mas somente com a chegada no HTML 5 começaram a ficar populares.

Intermediário

Elemento Detail e Summary - HTML

Elemento dialog - HTML

1 Aula Intermediário

Neste direto ao ponto vamos aprende a trabalhar com esse novo elemento chamado dialog capaz de produzir uma modal nativa com HTML 5.

Intermediário

Elemento dialog - HTML

Datalist HTML

1 Aula Intermediário

Neste direto ao ponto, apresentaremos algo que é pouco utilizado dentro do HTML, porém em alguns momentos, pode ser super útil. São os datalists para os campos input. Com eles, conseguimos sugerir assuntos para aquele input.

Intermediário

Datalist HTML

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

Media print com CSS

1 Aula Básico

Aprenda a trabalhar com a propriedade @media print, para configurar o layout de impressão de forma rápida e eficaz.

Básico

Media print com CSS

AOS Scroll Animation

1 Aula Avançado

Neste direto ao ponto, ensinaremos como trabalhar com scrolling animation. Utilizaremos uma biblioteca que o implementa, de forma super fácil, para trabalharmos. AOS é uma biblioteca que foca em scroll e permite, através de atributos, customizar e dizer onde o efeito acontecerá.

Avançado

AOS Scroll Animation

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

Javascript - Diferenças entre Var e Let

1 Aula Básico

Neste direto ao ponto, mostraremos em detalhes as principais diferenças entre as palavras reservadas, 'var' e 'let', que servem para a declaração de variáveis na linguagem.

Básico

Javascript - Diferenças entre Var e Let

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

Entendendo for in e for of - Javascript

1 Aula Intermediário

Trabalhar com loops é algo que todos devemos saber. Neste direto ao ponto, falaremos sobre loop com JS e focar em: for in e for of, que vieram com a chegada do ES6.

Intermediário

Entendendo for in e for of - Javascript

Introdução a Realidade aumentada com HTML 5

1 Aula Intermediário

Neste direto ao ponto, apresentaremos a diferença entre realidade virtual e realidade aumentada. Criaremos uma cena 3D com A-Frame, um framework que funciona sobre o Three.js. Ele permite a criação de elementos usando simples marcações HTML e que podem ser trabalhados visualmente, através de um inspetor 3D incrível.

Intermediário

Introdução a Realidade aumentada com HTML 5

Template literals - ES6

1 Aula Intermediário

Neste direto ao ponto vamos trabalhar com a feature chamada Template Literals do ES6 que veio para mudar a forma com que trablhamos com String no Javascript.

Intermediário

Template literals - ES6

Three.js Animações 3D

1 Aula Intermediário

Neste direto ao ponto, apresentaremos o Three.js. É uma biblioteca que abstrai toda a tecnologia WebGL. Veremos o conceito inicial e produziremos um pequeno exemplo para mostrar o poder da biblioteca.

Intermediário

Three.js Animações 3D

Diretivas no Vue.js

1 Aula Intermediário

Neste direto ao ponto vamos aprender o que são diretivas e como criar nossas próprias, de forma que, de forma prática e eficiente, possamos manipular os elementos do DOM, limitados apenas a nossa própria capacidade com o Javascript, no exemplo prático vamos re-criar a diretiva v-on do Vue.

Intermediário

Diretivas no Vue.js

PWA - Push notifications por tópicos

1 Aula Intermediário

Neste direto ao ponto, mostraremos como agrupar e enviar notificações para múltiplos usuários registrados em tópicos, facilitando o processo de disparo das notificações. Vamos configurar o processo de envio das push notifications do zero, criando o HTML, Javascript, projeto no Firebase até o disparo final com tópicos.

Intermediário

PWA - Push notifications por tópicos

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

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

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

Progressive Web

PWA - Escolhendo câmera

1 Aula Intermediário

Neste direto ao ponto, mostraremos como exibir a imagem da câmera do dispositivo (Computador, Celular, etc) no navegador, além de listarmos as câmeras disponíveis, permitindo ao usuário escolher qual quer exibir.

Intermediário

PWA - Escolhendo câmera

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