Programamos uma Ferramenta pro Youtube com JavaScript Puro (Vanilla JS) // Mão no Código #33

[@CantoDasAves]

Node!!!👍👍👍👍👍

[@elizabethregina7911]

Eu estou iniciando em programação e ainda não entendo quase nada do que vocês estão usando .Mas os vídeos são uma delícia de assistir sempre !Parabéns ao casal mais inteligente e charmoso do KZbin. 😁❤️

[@codigofontetv]

Muito obrigada Elizabeth! 😍 Esse vídeo não é para quem está no início, já é preciso ter conhecimento em orientação a objetos e na linguagem, mas ele também não é avançado. Daqui a pouquinho você já vai estar por dentro de tudo! Grande abraço! 😉

[@wagnersillvaa]

Quando comecei a assistir os vídeos deles eu também não entendi nada kkk Então, continua que me ajudaram bastante na minha jornada tmb.

[@f3llip3nogu3ira9]

Também estou iniciante mal tenho 2messes se aprender o inglês aprendi melhor pelo que percebi ajuda muito do aprendendo os dois juntos nem sei como kkk

[@elteixeiras]

Quando sai o primeiro curso do canal, bah, com essa didática hands-on, seria massa um curso de web com o casal mais tech que já ví.

[@felipedallagnolo]

Porra, que irado. Eu sou um designer e estou começando a me aventurar nessa área agora. Essa experiência de ver profissionais em ação foi muito boa!!

[@JeanBragag]

Eu to aprendendo javascript agora e foi incrível como aprendi vários conceitos e funcionalidades da linguagem apenas nesse vídeo, vcs são feras!!

[@felypepaiva745]

Esse tal de Web Scraper pra fazer coleta de dados é sensacional, eu tinha um projeto maravilhoso pra fazer com o uso dele, mas infelizmente encontrei algumas barreiras legais com relação a ele e os direitos autorais e infelizmente tive que abandonar a publicação do mesmo.

[@codigofontetv]

Olá Felype, é preciso ter cuidado sim. Nesse caso estamos pegando informações que estão disponíveis para todos e que não são sensíveis, por isso não tem problema. 😉

[@antoniosilva8856]

Vocês são brabos ✌️❤️

[@diegolima362]

Nessa quarentena eu to com um projeto pessoal de pegar os dados do site da minha faculdade e apresentar em um app em flutter. Na parte do scraping eu baixei as paginas HTML e subi em um python http.server, com isso eu consigo visualizar os dados da pagina no Chrome, inspecionar elementos e executar JS. Assim eu faço varios testes mais rapidos e sem consultar toda vez o servidor da faculdade.

[@Diego-Garcia]

Refazer o site da faculdade localmente: STONKS Se bem que dá vontade as vezes kkkk

[@xxDeLucca]

Que feliz coincidência, estou estudando estes dias, justamente web scraping com Java script... O vídeo de python de vcs (o do NBA) já tinha sido excelente..... E agr esse.... Fantástico.... Muito bom e sinto que devo dizer obrigado rs.... Esse vídeo.....😍 Edit aqui: Eu poderia ter mencionado as ferramentas que cheguei a ver, bom, cheerio e puppeter.

[@codigofontetv]

📝 𝗟𝗶𝗻𝗸𝘀 𝗱𝗼 𝗣𝗿𝗼𝗷𝗲𝘁𝗼 → GitHub do Projeto: codft.me/youtubechapterextractor → 1º vídeo: Web Scraping com Vanilla JS: kzbin.info/www/bejne/iZSqqIqppKiSY6s → 2º vídeo: API Rest com Deno: kzbin.info/www/bejne/ipmnhaeVrMllj5Y → 3º vídeo: Refatorando JavaScript para TypeScript: kzbin.info/www/bejne/ipmnhaeVrMllj5Y

[@guilherme8913]

Maneiro, eu tive uma ideia parecida com isso. Seria de pegar os capítulos do vídeo e colocar dentro do player na esquerda como uma lista, quando vc clicasse titulo do capítulo no player. Assim seria bem mais fácil de visualizar os capítulos sem ter que olhar na descrição do vídeo. Acho que é uma boa idéia pra uma extensão de navegador ou até mesmo pro KZbin implementar algum dia.

[@codigofontetv]

Ideia excelente Guilherme!

[@niltoncs7739]

Parece um jogo, no qual vcs vão passando de fases. Já brinquei com web scraping com Python e descobria quando meu link de internet ficava abaixo do contratado, acessando a página web do modem. Rsrs

[@ItsSalesGabriel]

Show, quando tiver mais mão no código, se possível faz alguns com C#

[@codigofontetv]

Sugestão anotada!

[@angelitocsg]

Olá Gabriel, hoje às 14hrs, temos live no canal sobre testes unitários em C# utilizando o xUnit.

[@lucasrosa4014]

Muito Top, quando tiver mais mão no código.. Façam algo com Java, pfv

[@tiagomatos8264]

Quanto mais vejo Javascript mais estou gostando, estou pensando até em trocar e ficar como linguagem principal de estudo

[@junior.santana]

Muito bom, código bem estruturado e clean

[@ldcoder7482]

Trabalho sensacional!

[@lucasgiovaninevesmaciel7175]

Vídeo com a ótima qualidade de sempre! E se vocês fizessem backend no Deno e dessem suas opiniões sobre ele?! Ia ser massa demais!

[@apollotech6039]

Dois feras !!

[@codigofontetv]

Muito obrigada Adriano!

[@franciomarsouza3215]

Essa chama, que sai ao digitar é show. Como habilitar no meu?

[@codigofontetv]

É uma extensão chamada Power Mode

[@marcelohenriquedev]

show de bola

[@wagnersillvaa]

Vocês foram feitos.. quer dizer, programados um para o outro kkk

[@codigofontetv]

Que lindo! 😍😍

[@robson-gomes]

Muito BOM!!!

[@navarrorenato]

Mto bom. Vou até experimentar tbm PR exercitar. 👏🏻👏🏻👊🏻

[@longuinni]

Mão no código é excelente =]

[@antoniomarcos4456]

Comecei a ver os vídeos do canal amei e me inscrevi aí comecei a sentir vontade de aprender a programar e estou pensando fazer faculdade de análise e desenvolvimento de sistemas e já comecei um curso de lógica de programação na softblue Minha pergunta é correto primeiro estudar a lógica de programação e sobre as linguagens de programação qual se inicia e é muito difícil aprender? Um dia quero trabalhar com desenvolvimento de games pois sou apaixonado por jogos

[@BinhoTubeLab]

Top demais... Parabéns!

[@jorgealegretti4796]

Video top ^^ (Adoro os videos de scraping), Eu voto em Node com TypeScript hehehehe (Ou se quiserem fazer em Deno para já falar dele tbm acho lehal hehehe )

[@codigofontetv]

🤔 vamos pensar na sugestão do Deno. 😉

[@jorgealegretti4796]

@@codigofontetv Eita, só joguei no ar por jogar hehehehe ^^ Mas iria ser muito legal hehehe

[@asaedumig]

Que massa.

[@luanpaivadev]

Perfeição da natureza! Rsrs

[@codigofontetv]

😊😊

[@Diego-Garcia]

Tenho uma pergunta, por que não escreveu o código de maneira convencional (no "corpo" do arquivo mesmo), ou utilizou classes? Por que escreveu o código em um objeto? E da forma que o código está montando os elementos dos tópicos em 15:58 (na linha 102), provavelmente abre a possibilidade de Cross-site Scripting, sendo o script a ser executado estando na descrição do vídeo, assim fechando o elemento h5 e inserindo um elemento script com o código a ser executado. Neste contexto a vulnerabilidade não é crítica, mas não é bom se acostumar a fazer desta forma 👍 Acho que seria legal um vídeo mostrando na prática várias brechas de segurança que iniciantes podem deixar sem querer no código.

[@geilsonribeiro6405]

Coloca como extensão do Chrome, seria bastante útil aplicar isso no vídeo corrente!

[@3es77ey]

Vídeo excelente, acho que usando o Node ficaria 10!

[@codigofontetv]

Obrigada Weslley, pretendemos fazer com Node mesmo.

[@IgorogI1000]

muito bom! nem sabia que js podia fazer tanta coisa sem o ; isso é específico o ES6?

[@thiagoztaaso9784]

só uma dúvida, aquela função setMessage que o Gabriel mostra em 15:22 não deveria funcionar né? pois ela foi declarada depois de ser chamada em formato de variável e com const, então não vai sofrer hoisting, certo?

[@codigofontetv]

Oi Thiago, ela foi declarada depois porém só é chamada a partir do click no botão, portanto funciona. 👍

[@thiagoztaaso9784]

@@codigofontetv ah sim, verdade, mt obrigado 👍

[@Rattones]

CAPITULOS, legal .. faltou criar isso nesse vídeo pra gente ver como funciona ...

[@codigofontetv]

Sem dúvida. Pedido atendido!! 😉

[@Rattones]

@@codigofontetv só uma crítica mas aí é ao KZbin mesmo .. qdo eu clico no CAPÍTULO (no histórico do vídeo) ele vai pro ponto clicado ao invés do começo do capítulo .. acho q o YT tinha rever uma forma de melhorar isso .. mas clicando no link da descrição vai direto no ponto .. SHOW ..

[@f3llip3nogu3ira9]

Esse arrei que seis fala tando e em todos apps ou só em Java e html? E que significa é o conjunto todo completo do código isso que é um arrei m?

[@VictorCampos87]

ETL é vida 😘

[@raulinooliveira4239]

ola dupla dinâmica acompanho pouco tempo tenho 33 anos estou entrando neste mundo da programação estou fazendo análise de sistema e agora estou entrando em contato com minha primeira linguagem c/c++ queria uma opinião sua da pra fazer muita coisa com esta linguagem. ou não, e se poder dizer me de exemplos. valeu fica com Deus.

[@tiagoalmeida3392]

Achei muito legal, eu tentei algum tempo atrás mas não consegui, eu queria criar um gerenciamento que pegue a posição do vídeo por palavra chave e toda vez que abrir o sistema ele atualize as posições, eu sei que já tem esse sistema mas queria criar o meu, seria interessante vcs ensinarem a pegar a posição do vídeo pela palavra chave, eu gosto muito do trabalho de vcs, meus parabéns

[@codigofontetv]

Olá Tiago, é uma ideia interessante, teríamos que usar a própria IA do Google para identificar a parte as partes do vídeo. Sugestão anotada!

[@cerbero2358]

Caso o idioma da descrição seja em outra língua que a expressão regular do texto que foi usada não é aplicada. Como tratar esse caso? Ótimo o vídeo, abraços

[@codigofontetv]

Todas as línguas que são derivadas do alfabeto latino serão validadas com essa expressão. Ela não vai funcionar em outras línguas como Russo e Árabe, por exemplo. ;)

[@cerbero2358]

@@codigofontetv Obrigado pela resposta.

[@carlaponciano4420]

Poderiam responder uma dúvida que sempre me impede de começar novos projetos? É "legal" buscar dados na internet com web scraping? Por exemplo, teria algum problema eu fazer um scrap para pegar todos os comentários de fotos no instagram? Em algum momento meu código seria interrompido e eu teria problemas futuros com o instagram? mt obrigada

[@EricAmbiel]

Topzera!

[@ewertonfrancoo]

TOP

[@marceloluis195]

Poderia ter algum mão no condigo com programação funcional. Resolvendo algum problema com alguma linguagem funcional (E JS não é funcional, ele tem um suporte razoável porem não é funciona) tipo Elixir, Rust ou ClojureScript. Como pegar dados de nome e email, e salva no banco de dados. Mostrar que é possível fazer isso sem usar Objetos.

[@fpsgameplaypcs]

A webcam está com um pequeno delay

[@apprendiiz]

Achei que só eu que pesquisava pra usar expressão regular xD 10:55

[@weudesitb]

Vanilla Js melhor framework haha

[@EnderPlayEnderPlay]

Qual tema do VsCode vocês usa?

[@codigofontetv]

Dracula

[@joaovitorjuliao4870]

Como que o VS Code de vocês fica assim? Roxo, bonitinho

[@codigofontetv]

O tema que usamos e o Drácula.

[@bceg3961]

Essa função não aparece pra mim. :(

[@FunctionDev]

caraca top

[@Fonetico13]

Cara eu que venho do Java (como primeira linguagem aprendida) e querendo aprender JavaScript, acho muito louco esse negócio das variáveis não terem seus tipos explícitos. Fica mais confuso entender do que se trata cada objeto, mas parece ser muito produtivo também se organizar direito.

[@codigofontetv]

No início é estranho, mas é bem rápido de se habituar. 😉

[@Fonetico13]

Em 10:59, também recomendo utilizarem o site regexr.com Dá pra brincar muito por lá e aprender como Regex funciona. Ótimo video casal!

[@codigofontetv]

Ótima dica!

[@FabioSuenaga]

Node, não! Bora surfar na onda do Deno! :D

[@codigofontetv]

🤔 será?! Vamos pensar na sua sugestão! 😉

[@ricardolucas4517]

Que atenção é essa que faz o efeitinho ao digitar

[@codigofontetv]

Power Mode! :)

[@ricardolucas4517]

@@codigofontetv valeu vocês são demais, só sinto falta daquelas entrevista, igual a do Maujor, se der pra anotar ai kkk

[@RonaldoHoch]

Legal o vídeo, WebScraping é bem chato de fazer 😝 Mas, foram pelo caminho mais longo... 👀 Pensei que iriam usar o Cheerio para fazer o parse do body. 🤔 (github.com/cheeriojs/cheerio)

[@Agnaldojunior9]

Bacana, mas estou acostumado com Java, me dá uma aflição ver todo o código sem ponto e vírgula kkk

[@codigofontetv]

No início é estranho, mas rapidinho acostuma. 🙂

[@rectopul]

no meu nao tem

[@codigofontetv]

Rogério esse é um recurso bem novo. Você não é o primeiro a relatar que não está vendo, mas acreditamos que muito em breve estará ativo. 😉

[@tirodev]

Sugestão: Usem Deno!

[@MrBira24]

Adoro mão no código so que nesse fiquei meio confuso

[@codigofontetv]

Esse tinha bastante código, tivemos que codificar um pouco mais rápido, talvez tenha sido isso. Minha sugestão é pegar o projeto no Git, olhar com mais calma e ir testando as funções. Que tal? 😉 Abraços

[@MrBira24]

@@codigofontetv vou fazer e refazer pra tentar compreender, mais mao no codigo por favor!

[@developerlage]

Pq a Wanessa não escreve código? #escrevewanessa

[@rafael_fraga]

Eu só mó iniciante em Javascript ainda. Provavelmente nao irei entender muita coisa sakaospaksopasksopkas Eu to achando Javascript meio complicado :p

[@matheusdepaula8061]

Meu deus como vcs aguentam esses foguinhos saindo quase fico maluco

[@naoseioquecriar]

"programamos uma ferramenta" = usamos a api do youtube dentro de um foreach.

[@codigofontetv]

Isso mesmo! Só não usamos a API do KZbin, pois ela não dá suporte aos capítulos. Fizemos via Web Scraping. A definição de ferramenta não tem relação com a quantidade de "foreachs" ou regras de negócio utilizados. 😉

[@g-laveli]

Achei que era mais fácil.