Mario Souto

Como você configura seu ambiente JavaScript/NodeJS? Eu gosto bastante do Oh My ZSH, uso o NVM e vou mostrar pra você alguns detalhes importantíssimos e coisas que eu já sofri e a meta é fazer um gerador de setup pra facilitar minha vida no futuro. Bora ver o começo dessa jornada?

Se você acompanha o canal, sabe que vários vídeos aqui são só em JavaScript e muita gente me pergunta "faz diferença usar typescript?", "é obrigatório?", "só da pra fazer código bom com TypeScript" e hoje eu vou mostrar alguns pontos do por que linguagens não tipadas podem ti ajudar a ser um programador melhor, principalmente por como ela força você a seguir algumas convenções pra entender o código em si, mas chega de enrolação e bora ver! 👌

Eu vim falando desse video a um tempo já e ele chegou! Finalmente você vai parar de sofrer com async/await entendendo na prática como usar esses recursos do JavaScript vendo a essência, bora ver?

Já parou pra refletir em nome de variáveis? Eu sei que é um assunto que muita gente fala, mas nesse vídeo eu quis trazer uma abordagem PRÁTICA! Vamos falar o que você tem que se preocupar com relação a semântica, contexto do nome e muito mais! Ficou curioso como da pra falar 10 min sobre isso? Bora ver!

E vamos de dica de vaga pra dev com GitHub e exemplos sensacionais!

Já chegou a jogar algum jogo de CSS na vida? Não? Pois nesse aqui suas habilidades vão ser questionadas! Eu duvido você fazer uma pontuação maior que a minha haha bora conhecer junto o https://cssbattle.dev/

Já configurou um projeto no GitHub para usar com um time de verdade? Nesse vídeo vamos explorar como proteger branches, como integrar seu processo de CI com seus pull requests e várias dicas SENSACIONAIS! Bora ver?

CI/CD Continuous Integration e Continuous Delivery, você sabe o que é? Já se perguntou como funciona? No vídeo de hoje vamos juntos explorar esses conceitos NA PRÁTICA! com as GitHub Actions do GitHub que são um chuchu pra usar e ajudar você a fazer DIVERSAS automações em seus projetos e deixar seus fluxos sensacionais! Bora ver?

Já ficou com dúvida tentando entender o que acontece num callback no JavaScript? Sabe explicar a diferença dele vs uma promise? Sabia que promise tem callback? E como o JavaScript funciona, você sabe? Separa a pipoquinha e vamos juntos nesse video explorar o maravilhoso mundo do JavaScript e entender vários pontos CRUCIAIS pra você ter autonomia em entender a linguagem e como resolver problemas.

O melhor ou pior video do canal, eu resolvi fazer uma tour base sobre JavaScript sem focar em framework nem nada, só JavaScript no navegador! Entender que ele roda quando a página carrega ou quando o usuário dispara uma ação, visualizar as possibilidades, debugar problemas e motivar a dar os primeiros passos!

Olá pessoas, esse vídeo aqui é ESPECIAL DEMAIS falando do meu mais novo projeto open source o SkynexUI que é um compilado de como eu vejo desenvolvimento de interfaces hoje e como eu acredito ser possível escalar isso cross plataforma para os diferentes devices e telas que temos hoje! Pega a pipoca ai e solta o play.

Eu semper falo que eventos fizeram a minha carreira decolar e nesse vídeo eu trago algumas dicas, uma das pessoas que fez diferença demais com uma talk dele e mais algumas novidades!!!

Muita gente pediu, quais eram meus plugins do VSCode e aqui está a lista! Com plugins de identação, ferramentas e paradas que talvez você nem sabia que dava pra ser um plugin!

Eu queria muito uma forma de conseguir compartilhar código entre web e nativo e isso me fez criar uma nova lib! E a ideia é ela servir como um meio campo pra facilitar exemplos de UI aqui no canal e de quebra vocês vão ganhar um vídeo lindineo com várias dicas concatenadas de decisões estruturais que eu to tomando pra fazer esse projeto acontecer, então se ajeita ai na cadeira, pega a pipoca e bora vê!

Você já sofreu com o "this" no JavaScript? Então esse vídeo é pra você! Vou falar dos motivos pelos quais eu evito a todo custo em meus códigos e tento deixar eles o mais simples o possível

Você já sofreu com CSS? Reclama todo dia quando precisa mexer? Então se você quer aprender e parar de sofrer esse vídeo é pra você! Em menos de 20 minutos eu vou fazer a tour que faltava pra você entender o que você precisa aprender de CSS pra começar a fazer qualquer layout, a proposta é audáciosa mas o conteúdo ta SENSACIONAL! Então pega a pipoca, solta o play e vamo que vamo!

E no vídeo de hoje eu vou falar sobre um assunto muito importante pra quem é dev que vai além do código, organização! A ideia é mostrar como organizar um projeto, no caso eu uso um exemplo pessoal, mas a ideia é passar os conceitos tudo em cima do GitHub e ti ajudar a se nortear quando for trabalhar com ferramentas como Trello, Jira, ClubHouse entre outras, bora ver?!

@Dev Soutinho

Já parou pra pensar como fazer pra automatizar o seu linter que toda hora quebra o processo de CI, assim ? Seus problemas acabaram! Conheça nesse vídeo como usar 2 libs super pequenas mas que fazem uma diferença GIGAAANTE de produtividade pra fazer automações entre etapas do seu processo de Git (Commit, Push...) e deixar tudo transparente pro time, bora ver?

Imagina se a sua TV reagisse gerando luzes no fundo com qualquer imagem que tivesse na tela com uma experiência 10x mais imersiva?

E nesse vídeo vamos entender como renderizar um texto que contenha código HTML dinâmico convertendo ele pra um componente react!!!!

A palestra teve foco em falar da importancia de entender a base da computação 'Entrada, Processamento, Saída' e em cima disso perceber como esse padrão se repete, independente da área da programação que você está trabalhando e que nesse mundo tudo poder ser visto como uma API, indo além da ideia de API Web, seguem os slides para quem ficou curioso: https://docs.google.com/presentation/d/1OQp7BmcmNUcKsUSYKs7Q2Pd0cFhVM3LwZ7ryXcixUkA/edit#slide=id.p

Um tempo atrás eu lancei um vídeo ensinando a fazer animações via scroll com addEventListener. Poréeem existem implicações de performance nessa técnica e o correto mesmo seria fazer esse tipo de ação via intersection observer. Então se você quer entender como manipular scroll do JEITO CERTO! Com JavaScript, pega a pipoquinha, se arruma na cadeira e bora pro vídeo!

Fala galera, está rolando um hype absurdo em cima do GitHub Copilot, então vamos colocá-lo a prova tentando criar 100% com a ajuda dos comentários uma app React decidida nesse tweet aqui:

Já parou pra se perguntar como deixar um Front End dinâmico sem escrever 1 linha de Back End? É ai que entram os CMSs! Ferramentas que ti ajudam a gerenciar conteúdo e que você pode usar limitado pelos recursos das que você escolher e da sua criatividade! Nesse vídeo aqui a gente faz uma tour

Muita gente fala que precisamos ter a base da linguagem para poder aprender um framework como React, mas o que é a base? Como visualizar isso? Nesse vídeo eu faço um exercicio de separar conceitos com vocês em cima da própria API do React! Extraindo o que de JavaScript é importante ser aprendido

Fala galera, vamos juntos fazer um aulão de JavaScript com o que vocês pedirem!!! Isso mesmo, prepara todas as suas perguntas e vamo ali ao vivasso tirar o maior número de dúvidas possível pra preparar todo mundo pra Imersão React!

Quando eu comecei a programar essa foi minha maior dúvida, como fazer um sistema de comentários? Como fazer um botão de like? Como fazer um sistema de login em uma single page application? Essas dúvidas me fizeram passar por inúmeros passos e eu vi que entender como a web funciona era o caminho ideal pra isso, então nesse vídeo eu explico com carinho como o protocolo HTTP funciona, como a gente pode pegar informações pela rede e como usar a função fetch do JavaScript!

Quando eu comecei a programar essa foi minha maior dúvida, como fazer um sistema de comentários? Como fazer um botão de like? Como fazer um sistema de login em uma single page application? Essas dúvidas me fizeram passar por inúmeros passos e eu vi que entender como a web funciona era o caminho ideal pra isso, então nesse vídeo eu explico com carinho como o protocolo HTTP funciona, como a gente pode pegar informações pela rede e como usar a função fetch do JavaScript!

Recentemente o WebVitals do Google virou um pré requisito para todos os projetos web, principalmente páginas que são indexadas pelo google. Com isso em mente, resolvi fazer esse vídeo que vão acabar gerando outros falando sobre como identificar gargalos de performance e como resolver esses problemas no dia a dia.

Recentemente o WebVitals do Google virou um pré requisito para todos os projetos web, principalmente páginas que são indexadas pelo google. Com isso em mente, resolvi fazer esse vídeo que vão acabar gerando outros falando sobre como identificar gargalos de performance e como resolver esses problemas no dia a dia.

Nesse vídeo EXTRA aqui do canal, vamos ver um resumo do que rolou na NextConf, todos os principais highlights do evento resumidos aqui em 18 min com aula e tudo mais!!!

Nesse vídeo EXTRA aqui do canal, vamos ver um resumo do que rolou na NextConf, todos os principais highlights do evento resumidos aqui em 18 min com aula e tudo mais!!!

Fala Galera, vamos juntinhos amanhã conferir as novidades do mundo do NextJS enquanto eu assisto e vou mandando uns comentários, a gente conversa junto vai ser INCRÍVEL! Então já marca ai na sua agenda, separa a pipoca e vamo que vamo!!!

Fala Galera, vamos juntinhos amanhã conferir as novidades do mundo do NextJS enquanto eu assisto e vou mandando uns comentários, a gente conversa junto vai ser INCRÍVEL! Então já marca ai na sua agenda, separa a pipoca e vamo que vamo!!!

Eu já trabalhei com diversas ferramentas ao longo da minha carreira, frameworks linguagens... E recentemente eu questionei bastante os motivos de muita gente estar num hype bem grande em cima do Tailwind CSS. Então nesse vídeo eu trouxe um pouco da minha visão em cima da ferramenta, falando pontos que eu gostei e não gostei inclusive fazendo paralelos com o que eu uso hoje que ta mais próximo de CSS in JS.

Eu vejo muita gente entrando na área e se perguntando como faz pra ir crescendo na carreira, ir chegando a vagas empresas e projetos mais legais. Essa é uma pergunta dificil de responder, mas acho que conhecendo como outras pessoas fizeram da pra ter uma inspiração legal de ir escrevendo sua própria história. Então nesse vídeo eu conto pra vocês como consegui meu primeiro emprego como Programador!

Esses dias eu recebi um comentário falando que faltava um vídeo mais introdutório sobre NextJS aqui no canal então chegou a hora! Nesse vídeo tem tudo o que você precisa saber pra começar, o potencial da ferramenta e quero inspirar VOCÊ! a fazer seu próximo projeto com esse framework React pronto pra produção!

Já sofreu com erros na hora de salvar tokens, preferências de usuários e outros dados usando local storage no NextJS? É por que você ainda não viu esse vídeo! Hoje vou mostrar como trabalhar com cookies no NextJS de uma forma super decente e como você pode mesclar o trabalho com localStorage, entendendo o funcionamento da ferramenta e por que muitos passam por problemas fazendo isso, então senta na cadeira, pega a pipoca e não esquece de aperta o freio de mão do fusca em cima do botão de like e subscribe pra fortalecer a firma, valeu! 👊

Você ai, já precisou fazer botões de share nos seus projetos e fico bolado carregando o SDK do Facebook, Twitter e outras empresas? Seus problemas acabaram! Nesse vídeo mostro como fazer isso de uma forma super simples e com ZERO dependências, além de mostrar boas práticas para criar componentes com React e TypeScript! Bora ver?

Já parou pra pensar qual é o real trabalho de alguém que trabalha com programação? Durante muito tempo eu demorei pra entender e nesse vídeo eu quero compartilhar um pouco da minha visão da coisa, ainda faço paralelos com salário, crescimento e dicas de como você pode mostrar mais seu valor em uma próxima entrevista de emprego!

Ao longo de vários vídeo do canal eu sempre falei a importância de se manipular Arrays e Objetos. Nesse vídeo eu vou trazer um exemplo claro e como isso ficou mais paupável pra mim e abriu portas pra eu conseguir trabalhar com tranquilidade. Então se ajeita na cadeira, pega aquele copo de água e bora pro vídeo!

Semana passada eu lancei um vídeo apresentando como eu me organizo no Notion, seguindo nessa pegada, como prometido, trouxe um vídeo explicando como trabalhar com as Master Tags! A feature do Notion que me ajuda a categorizar de forma geral TODAS as coisas que eu trabalho mantendo uma consistência entre diferentes bancos de dados que eu uso na ferramenta. Falando assim parece super complexo, mas volta pro vídeo que você vai entender melhor 😍

Fala galera!!! A ideia dessa live super surpresa e aleatória é abrir essa caixa gigante que o GitHub mandou e ir conversando com vocês enquanto eu incluo a mais nova novidade do canal no meu site! Enquanto isso, já se inscreve na newsletter: https://mariosouto.com/newsletter/

Todo mundo que me conhece fala que eu so meio maluco por organização (e eu concordo) e finalmente com o notion sem escrever uma linha de código eu sinto que cheguei num nivel ABSURDO!!! E queria compartilhar qual a feature do Notion que tem me ajudado muito, num ponto de automatizar, estudos, lives, coisas que preciso fazer e inclusive minha newsletter! Que vou em um próximo vídeo explicar como to fazendo ela e inclusive, já se inscreve nela e receba toda semana os WeekLinks do DevSoutinho / +1 forma que to testando de trazer conteúdo com compromisso fixo de toda semana 1 email (sem spam é claro).

Já parou pra pensar que o webpack pode não estar resolvendo todos os problemas de performance que seu site tem? 😱 Na real ele nem resolve nada, o Babel faz boa parte do processo, mas para garantir funcionalidades de arrays e objetos nem ele acaba sendo o suficiente. Nesse vídeo vamos fazer uma tour sobre cobertura de browsers e como é importante entender como isso é feito para garantir que seu projeto vai rodar em browsers pré-históricos

Sabia que da pra publicar um site com HTML, CSS e JavaScript DE GRAÇA no GitHub e ainda vincular um dominio seu a ele? Nesse vídeo a gente vai aprender a publicar um projeto no GitHub do ZERO migrando ele a partir de simples arquivos HTML, CSS e JS.

Eu larguei o MacOS! Sim! Nesse vídeo eu conto por que e ainda de quebra mostro como ta um pouco do visual do meu setup atual pra gravação EEEE trago dicas do ferramental que eu to usando para trabalhar como Dev Front End!

Vocês pediram e chegou! Finalmente o vídeo integrando GraphQL no NextJS, com setup tranquilinho haha Vamos adicionar o suporte a GraphQL para facilitar integrações e vídeos futuros que quero trazer pro canal, além de cobrirmos como resolver um dos maiores erros cometidos em projetos NextJS quando o assunto é tamanho do HTML gerado. Bora ver?!

De cenário novo e pós mudança, ta chegando mais um vídeo com dicas de desenvolvimento dessa vez falando do Ngrok, a ferramenta que vai permitir vc compartilhar temporariamente qualquer porta localhost da sua máquina com qualquer pessoa no mundo! Bora ver?

No vídeo de hoje vamos fazer uma tour pelas minha features favoritas da linguagem com exemplos práticos de como aplicá-las no dia a dia, ainda de quebra reviso e comento algumas coisas legais que estão por vir no TC39 e por consequência na própria linguagem JavaScript! Se eu fosse você voltava logo pro vídeo e terminava de assistir!

In this video, I introduce some amazing GitHub features like issues, pull requests, PR reviews code suggestions, and other amazing stuff \o/

In this video, I share how amazing was the GitHub Stars box that I receive through the program with the open version of my serie ""Git and GitHub for survival" that is in this playlist https://www.youtube.com/watch?v=BAmvmaKQklQ&list=PLh2Y_pKOa4Uf-cUQOVNGlz_GVHx8QYoE6

In this video, as the past one explain merge in this one I explain how rebase works, everyone fears it one time in life and my idea here is let things clear :D

In this video, I explain how to create a markdown reader to enable a blog creation on top of NextJS and GitHub

In this video, I explain how merge works in git, with visual samples and code ones also!

In this video I use https://git-school.github.io/visualizing-git/#free-remote to teach sample git working flows to teach people how important is to have a visualization about what is happening in our commit history and make people lose fear.

In this video I open .git folder and explain how things work in internals

Inspired by the last video, in this one I teach how to create a universal code executor running on NodeJS and running Python and JavaScript code until the end of the video. It's the starting of a brand new serie

In this video, I teach how to create a tooltip with Styled Components enforcing good practices of accessibility (wai-aria).

In this video I teach how to use GitHub CodeSpaces and explain how amazing is the environment provided by GitHub with this VS Code running on browser and how amazing is the setup to test front end projectrs.

In this video I introduce how to go beyond stackoverflow to solve code problems using GitHub features like issues and looking directly into source code.

In this video I teach how to create a robot with puppeteer and how to use it to make complex things interacting with UIs, doing login and other stuff.

In this video I share my experience using Conventional Commits with Semantic Release in my git projects.

In this video, I introduce TDD without writing any test! The main idea is to share how TDD is a way of thinking and not only a coding technique

In this video, I introduce how to use Styled Components and how amazing is to use it in React projects :D

In this video I explain how to manage PROD and DEV env values with NodeJS and JavaScript

In this video I explain the importance to have trailing slash in websites and the impacts of analytics tools because of it, the importance to have headers, and how to avoid clickjacking vulnerability.

In this video, I make a quick tour through Front End history to reach a conclusion if the profession is going to end or to have a new transformation.

In this vídeo I explain how I organize my studies and how I use notion to it.

In this video I explain how I imagine a front end project and how to organize it design system based with React and NextJS

In this video, I explain alternatives to typeof in JavaScript to validate types

In this video, I explain how to use Lottie with React to create beautiful animations!

In this video I explain how to make screen transitions in React Native with React Navigation

In this video, I give some tips about how to create a portfolio using the Wayback machine and tips about where to get project ideas and layouts.

In this video, I implement the validation API of Formik

This was the opening of a free React JS course that I developed with Ju Negreiros and Marco Bruno. We analyze Spotify, Ifood, and Netflix websites speaking about front end, performance, and other stuff related.

In this video, I explain how to make the stagger effect with JavaScript, React, and Styled Components

In this video I explain how to use React, NextJS and how to integrate with Google Spreadsheets.

In this video I reimplement the React render API to show that libraries are not magic

In this video, I recreate the Spotify UI with styled-components explaining how I organize my style components

In this video, I explain how Formik base API works reimplementing it with react custom hooks

The main idea of this video is to explain base JavaScript knowledge to have before start to learn a JavaScript framework

In this video, I explain how to generate static apps with NextJS

In this video, I explain how to use Github Readme Badges and how an open-source project should be organized

In this video, I explain why NextJS is amazing for SEO and give performance tips based on Vercel structures

In this video I explain how to use strategy in javascript with a game example

In this video, I explain how to make lazy loading and scroll animation effects with JavaScript and scroll events.

In this interview, I explain how to make Front End testing invited by Rodrigo Branas.

In this video, I explain how to draw obstacles in endless run games

In this video I explain how to create the base of Spotify UI with Styled Components, React Native and show how to code based in a Figma Layout

In this video, I explain how to make the draw effect with SVG and CSS

In this video, I explain how to start the creation of a Spotify + Pocketcast clone app with JavaScript, React Native, and Expo

In this video I explain how to make endless runner games with JavaScript and Canvas.

In this video, I explain how to use a puppeteer to create a robot that makes monetary conversion through the google website

In this video I explain about game development with JavaScript, the content is relative to collision, jumps and web audio api

In this video I explain how to use browser APIs to simulate the material design ripple effect

In this video I explain how gravity works and develop it with JavaScript and canvas

In this video I explain how to centralize in CSS vertical, horizontally and explain a little bit about why css has multiple ways to centralize stuff.

I explain how forEach an map works behind the scenes implementing them to explain how people can use it with this knowledge.

I create a YouTube video explaining how to add an easter egg to a website with JavaScript and use it to explain the debounce pattern.

In this video I explain how to create a game with JavaScript showing the canvas tag and how to create elements and add images to it.