em 2017, usava o bootstrap assim, e a galera não entendi o motivo. O Tailwind veio pra ficar, e agora muito mais moderno e com novas funcionalidades, dando mais liberdade ao dev tambem! Muito bom! Eu gostaria de ver você criando um tema vindo de uma api como vc armagenaria isso e disponibilizaria de acordo com o login de cada usuario. Gosto de ver vc pensando e resolvendo essas abordagens. Obrigado pelo excelente conteudo!
Opa, sou programador javascript e percebo que o conteúdo de utilização de Containers(Docker) é bem escasso aqui no UA-cam, seria legal fazer uma API dessas, bem simples mesmo, com backend e frontend e um banco simples, e por fim conseguir ter todo o sistema em container rodando simultaneamente via Docker Compose.
Congratulations, galera mas no caso do modo dark eu gosto de (nos meus projeto pessoais) colocar a opçao de o usuario mudar de acordo com o que ele quer Coloco o icone de moon e de sun, dependendo o modo que estiver e uso um estado global com useContext para compartilha-lo em toda a aplicação
Mas o NPX e o Vite não tem nenhuma relação. Se você diz quanto ao Next, na verdade são duas ferramentas, o Next é um framework enquanto o Vite é apenas um boilerplate pra criação de projetos React, ambos cumprem seu propósito :)
@@dieegosf É que eu não soube expressar minha dúvida. Eu estava usando o Vite porque achava que era melhor do que o NPX, mas agora parece que o NPX está melhor para criar projetos.
Eu nunca usei tailwind mas acredito que seja bem produtivo pelo que falam. Mas eu não entendo como ficar escrevendo um monte de classe assim pode ser produtivo e organizado? e se o projeto for muito grande?
O q percebo é q quando não dividimos o componentes em pequenas e partes vira um macarrão de HTML com classes e acaba ficando uma dor de cabeça para manutenção...nao vejo MT esse tema na comunidade de como dividir ou não o componente em pequenas partes mas é isso
Mano eu tive contato com o Tailwind na NLW, mas eu realmente aprendi olhando na documentação, eu lembro do atributo CSS, entro no site do Tailwind e pesquiso lá, ai mostra de forma simples como faz, e realmente é bem fácil. Acredito que nem precise tanto assim de curso para aprender, se você já souber CSS consegue fazer tranquilo. Só nesse vídeo aqui você já viu praticamente tudo que foi necessário para eu fazer meu portfólio, só falta mesmo implementar o Dark.
Fala mano. Diz uma coisa, qual estratégia usaria para salvar uns produtos de um ecommerce como favorito usaria um noSQL (redis/mongo) para guardar essas coisas, fazia somente no local storage, usava uma tabela relacional atrelada ao usuário logado ou não fazia (favoritas um produto é frescura). Deixa a dica que te deixo like em todo os seu vídeos😂😂
Trocar o tema do pc e já ser aplicado no tailwind é massa, porém como posso fazer para adicionar um botão pro usuário trocar quando quiser, salvando talvez no localstorage? O tailwind tem isso?
uso tailwind, vejo varias videos aulas e peguei alguns projetos para estudo, vejo que 90% só utliza div, isso é uma boa prática ? ou devemos ir na sematica do html?
O ideal é sempre utilizar a semântica do HTML, por vários motivos, mas um dos principais é acessibilidade. Infelizmente, quando algumas pessoas utilizam o Tailwind ou qualquer outra lib que resete os estilos nativos do navegador, acabam esquecendo do peso semântico das Tags, focando apenas no peso visual.
@@samuelleao entendi, mais a questão da acessibilidade não é o desenvolverdor que tem q pensar nisso, independente do semântica do html, o curso que fiz de ui e ux, mostra que quem faz a acessibilidade é o desenvolvedor independente da semântica, e a questão da mesma utilizadar as tags no lugar certo é mais voltada a ajudar os robôs dos mecanismos de busca a entender melhor o conteúdo da página. isso q vi no curso, outros curso do youtube mostra ao contratio disso kkkk, mais vlw pela ajuda
Rapaz, nesse quesito eu discordo em partes. Todas as facetas do produto precisam pensar em mecanismos de acessibilidade. Principalmente o desenvolvedor Front-End, pois é exatamente nesta camada que a experiência do usuário é concretizada. Como eu havia dito existe muitos motivos para desenvolver um HTML semântico, um dos principais é a acessibilidade, em outros contextos como em websites é a questão que você citou de mecanismos de busca. A um exemplo de acessibilidade por meio da semântica é por exemplo um botão que na verdade é uma div, o usuário não vai interpretar aquele botão por meio do Tab, bem como uma lista de itens, todos esses elementos são descritos pelos motores de acessibilidade para situar melhor o usuário que navegar por meio do teclado. Entende? Valeu, amigo. Abraços!
Parabéns pelo video, Diego. Porém quando você copiou a seção recentes e sobrescreveu a antigas no tema light, esqueceu de mudar a configuração da cor das fontes...
17:29 Como ele fez isso para apagar todo texto selecionado de uma vez sem ser que segurar Alt e ficar clicando onde ele queria o múltiplos seletores (não sei se é assim que se chama)?
não manjo de Tailwind, por isso tenho uma duvida: Para aplicações gigantescas ainda é recomendado usar o Tailwind? porque dessa forma eu terei que mudar cada linha de estilo pra versão dark, onde com css eu poderia modificar as classes globais.
Рік тому
No caso você mudaria em componentes, não faria da mesma forma que o Diego fez duplicando os códigos, saca? Aí vai mudar apenas 1 vez pra cada componente que você for usar.
meus ouvidos sangram a cada "uidguet" pronunciado, mas excelente vídeo como sempre! eu ainda não testei o tailwind, tenho um pouco de receio porque o componente acaba ficando muito sujo cheio de estilização (sou fã de css modules), tem alguma dica de como deixar o código mais limpo?
@@dieegosf passou-se 1 dia, desenvolvi um projeto com tailwind e curti demais! css nativo nunca mais, o workflow é muito mais fluido... acabei percebendo que apesar da estilização ficar no mesmo arquivo, ainda sim é bem legível.
Doideira como os professores da Rocketseat ensinam bem, eu entro me sentindo leigo e realmente saio entendendo sobre
Obrigado
em 2017, usava o bootstrap assim, e a galera não entendi o motivo. O Tailwind veio pra ficar, e agora muito mais moderno e com novas funcionalidades, dando mais liberdade ao dev tambem! Muito bom!
Eu gostaria de ver você criando um tema vindo de uma api como vc armagenaria isso e disponibilizaria de acordo com o login de cada usuario. Gosto de ver vc pensando e resolvendo essas abordagens.
Obrigado pelo excelente conteudo!
eu sempre aprendo algo novo, hoje aprendi sobre o divide, achei muito legal essa class
Opa, sou programador javascript e percebo que o conteúdo de utilização de Containers(Docker) é bem escasso aqui no UA-cam, seria legal fazer uma API dessas, bem simples mesmo, com backend e frontend e um banco simples, e por fim conseguir ter todo o sistema em container rodando simultaneamente via Docker Compose.
Ok, vou preparar, mas geralmente não curto muito usar containers pro código front-end principalmente
Também não conhecia o divide, sensacional
é impressionante o quão produtivo é fazer um projeto com tailwind, nem parece eu odiei da primeira vez que usei KKKKKKK
Literalmente eu na primeira vez que usei kkkkk, só uso Tailwind pra fazer meus projetos com Next/react agora kk
@LivesDoVini o mesmo aconteceu comigo man 😄
Não conhecia esse Tailwind, muito massa!
Estude a documentação do Tailwindcss ....voce vai entender tudo....
É como dizem na programação sempre existe uma documentação por tras de tudo...
Congratulations, galera mas no caso do modo dark eu gosto de (nos meus projeto pessoais) colocar a opçao de o usuario mudar de acordo com o que ele quer
Coloco o icone de moon e de sun, dependendo o modo que estiver e uso um estado global com useContext para compartilha-lo em toda a aplicação
Pow faz o botao alternando entre tema light e dark para ficar completo, please
Daora esse video!
MASSA!!!
autenticação e privatização de routas - a maneira certa
Rapaz to ficando pra trás com tanta att, eu tava usando vite agora vou voltar para o npx
Mas o NPX e o Vite não tem nenhuma relação. Se você diz quanto ao Next, na verdade são duas ferramentas, o Next é um framework enquanto o Vite é apenas um boilerplate pra criação de projetos React, ambos cumprem seu propósito :)
@@dieegosf É que eu não soube expressar minha dúvida. Eu estava usando o Vite porque achava que era melhor do que o NPX, mas agora parece que o NPX está melhor para criar projetos.
Eu nunca usei tailwind mas acredito que seja bem produtivo pelo que falam. Mas eu não entendo como ficar escrevendo um monte de classe assim pode ser produtivo e organizado? e se o projeto for muito grande?
- Sugestão para novos videos : modal quando clicamos em um botão e uma Above page. Acho que falei certo.
Muito bom mesmo!!
O q percebo é q quando não dividimos o componentes em pequenas e partes vira um macarrão de HTML com classes e acaba ficando uma dor de cabeça para manutenção...nao vejo MT esse tema na comunidade de como dividir ou não o componente em pequenas partes mas é isso
Qual o nome desse icon theme ?
Quando vem o curso de tailwind pro ignite?
Mano eu tive contato com o Tailwind na NLW, mas eu realmente aprendi olhando na documentação, eu lembro do atributo CSS, entro no site do Tailwind e pesquiso lá, ai mostra de forma simples como faz, e realmente é bem fácil. Acredito que nem precise tanto assim de curso para aprender, se você já souber CSS consegue fazer tranquilo. Só nesse vídeo aqui você já viu praticamente tudo que foi necessário para eu fazer meu portfólio, só falta mesmo implementar o Dark.
Em 1 semana, por aí
Onde ta o codigo desse app? Eh pq acho q fiz um negocio errado aqui ai queria poder identificar meu erro
Fala mano. Diz uma coisa, qual estratégia usaria para salvar uns produtos de um ecommerce como favorito usaria um noSQL (redis/mongo) para guardar essas coisas, fazia somente no local storage, usava uma tabela relacional atrelada ao usuário logado ou não fazia (favoritas um produto é frescura). Deixa a dica que te deixo like em todo os seu vídeos😂😂
Trocar o tema do pc e já ser aplicado no tailwind é massa, porém como posso fazer para adicionar um botão pro usuário trocar quando quiser, salvando talvez no localstorage? O tailwind tem isso?
Você usa a opção darkMode como class no config do Tailwind e depois cria um botão que troca a classe do body entre dark e vazia, bem simples.
Top
POde fazer um componente de Aside com tailwind?
tailwindcss muito delicinha
uso tailwind, vejo varias videos aulas e peguei alguns projetos para estudo, vejo que 90% só utliza div, isso é uma boa prática ? ou devemos ir na sematica do html?
O ideal é sempre utilizar a semântica do HTML, por vários motivos, mas um dos principais é acessibilidade.
Infelizmente, quando algumas pessoas utilizam o Tailwind ou qualquer outra lib que resete os estilos nativos do navegador, acabam esquecendo do peso semântico das Tags, focando apenas no peso visual.
@@samuelleao entendi, mais a questão da acessibilidade não é o desenvolverdor que tem q pensar nisso, independente do semântica do html, o curso que fiz de ui e ux, mostra que quem faz a acessibilidade é o desenvolvedor independente da semântica, e a questão da mesma utilizadar as tags no lugar certo é mais voltada a ajudar os robôs dos mecanismos de busca a entender melhor o conteúdo da página. isso q vi no curso, outros curso do youtube mostra ao contratio disso kkkk, mais vlw pela ajuda
Rapaz, nesse quesito eu discordo em partes. Todas as facetas do produto precisam pensar em mecanismos de acessibilidade. Principalmente o desenvolvedor Front-End, pois é exatamente nesta camada que a experiência do usuário é concretizada. Como eu havia dito existe muitos motivos para desenvolver um HTML semântico, um dos principais é a acessibilidade, em outros contextos como em websites é a questão que você citou de mecanismos de busca.
A um exemplo de acessibilidade por meio da semântica é por exemplo um botão que na verdade é uma div, o usuário não vai interpretar aquele botão por meio do Tab, bem como uma lista de itens, todos esses elementos são descritos pelos motores de acessibilidade para situar melhor o usuário que navegar por meio do teclado. Entende?
Valeu, amigo. Abraços!
@@samuelleao top demais mano, obrigado
Parabéns pelo video, Diego. Porém quando você copiou a seção recentes e sobrescreveu a antigas no tema light, esqueceu de mudar a configuração da cor das fontes...
Trabalhar pra pegar gripe vindo de Londres também.
White people problems
17:29 Como ele fez isso para apagar todo texto selecionado de uma vez sem ser que segurar Alt e ficar clicando onde ele queria o múltiplos seletores (não sei se é assim que se chama)?
essa seleção no VS Code é feita utilizando o atalho Ctrl + D
@@shin9670 Mto obg
Qual o tema novo do vscode do Diego?
plzzz
Muito massa mesmo
não manjo de Tailwind, por isso tenho uma duvida:
Para aplicações gigantescas ainda é recomendado usar o Tailwind? porque dessa forma eu terei que mudar cada linha de estilo pra versão dark, onde com css eu poderia modificar as classes globais.
No caso você mudaria em componentes, não faria da mesma forma que o Diego fez duplicando os códigos, saca? Aí vai mudar apenas 1 vez pra cada componente que você for usar.
O que ainda acha do stitches? tailwind é muito legal mas não troco o stitches por nada.
Stitches está com algumas limitações com o Next13, recomendo, se estiver usando o app folder do Next 13, usar o vanilla-extract.style/
Como que faz um botão para que ele mude o theme de light para dark, sem necessariamente mudar isso no sistema?
Você usa a opção darkMode como class no config do Tailwind e depois cria um botão que troca a classe do body entre dark e vazia, bem simples.
@@dieegosf Uow haha, o cara até por texto ensina muito! kkk Obrigado!
O segundo a comentar, deixe o like.
navegador novo Diego?
O navegador que tava rodando o projeto é o navegador nativo do VS Code, se não me engano
Arc Browser
Que tal usar luvas de frio....esquenta mais...
Mas daó é ruim pra digitar, só se for aquela com abertura nos dedos
@@dieegosf esatamente...
muito top, só não acho legal essa sintaxe do tailwind, tirando isso ficou perfeito!
Se o problema for com o tamanho gigantesco que podem ficar as classes, eu gosto de usar nesses casos a lib clsx para quebrar em n linhas.
meus ouvidos sangram a cada "uidguet" pronunciado, mas excelente vídeo como sempre!
eu ainda não testei o tailwind, tenho um pouco de receio porque o componente acaba ficando muito sujo cheio de estilização (sou fã de css modules), tem alguma dica de como deixar o código mais limpo?
Perdão, não fiz fisk. Sobre o código organizado, talvez você pode usar algo como o: www.tailwind-variants.org/docs/variants#adding-variants
@@dieegosf INGRES E ESPANHOL é FISK
@@dieegosf passou-se 1 dia, desenvolvi um projeto com tailwind e curti demais! css nativo nunca mais, o workflow é muito mais fluido... acabei percebendo que apesar da estilização ficar no mesmo arquivo, ainda sim é bem legível.
Tailwind não é profissional!
a Netflix e a Nasa usam 💀