@@mel0nchiolha, se vc estiver usando alguma biblioteca ou framework, primeiro pesquisa se não tem algo no padrão deles. Caso não tenha, esse é um ótimo ponto de partida pra você levar adiante
@@mel0nchieu tava até escrevendo que eu já usei o BEM , mas acabei perdendo o costume de usar e abandonei. Mas sim, concordo muito contigo, é um ótimo método e bem organizado para utilizar o CSS em grande escala
Único problema é que :has() não tem compatibilidade com o Firefox... Acho valido avisar isso no vídeo pois por mais elegante que fique usar essa solução na prática vai levar alguma tempo até que se tenha compatibilidade com todos os navegadores e trazer um conteúdo assim pode induzir uma pessoa nova a usar e ela nem saber por que em alguns navegadores não funcionam.
@@R6videos6R mas isso é chato e duvido que um usuário comum faça ou se importe de fazer isso. Essa feature é de 2021, e ainda não é padrão no Firefox, que tá passando vergonha. Gosto do seletor :has(), mas evito usar por causa do Firefox infelizmente.
Hellllp! Essa tela preta onde abre. Eu queria fazer o exercício junto com ele. Mas não sei o que abrir. E outra ele começa o vídeo com o código pronto. No App já tá pronto. Sou Analista de Sistemas formada em 1900 e nem lembro mais. Tô perdida aqui rs
Jovem, gostaria de agradecer pelo conteudo excelente, me ajudou muito, mas eu to com um probleminha, na pagina onde eu inserir o código, quando a caixa expande, ela empurra o conteúdo que está acima para um pouco mais para cima, e quando recolhe o conteudo abaixa, existe uma forma de quando a caixa de seleção expandir o posicionamento dela ficar fixo?
Depende de como estamos codando o select customizado. Existem mais comportamentos e atributos que podemos usar e deixar ainda mais acessível, como por exemplo o atributo aria-* que oferece um conjunto de comportamentos de acessibilidade, ou mais detalhes de implementação em JS, como um click fora do componente que faz o componente fechar, etc
Eu coloquei as linhas do lucid para aparecer os ícones das setas up down e não apareceram no meu projeto e revisei diversas vezes e não sei porque não aparece😥
verifica se vc: 1. adicionou o 2:18 2. adicionou o html (entendi que sim, vc fez até essa etapa) 2:25 3. iniciou o lucide.createIcons() lá na aba JS 2:30
Firefox foi tão significativo na minha carreira, com o firebug.. mas acho estranha batalha entre os navegadores para acompanhar a evolução da tecnologia.. tem coisas que funcionam lá e não cá ... é meio maluco, né? Dizem por aí que até o Safari se tornou o novo Internet Explorer hehehe
@@maykbrito eu nesses dias tava estudando como fazer input de pesquisa fiz legalzinho no chrome chego no firefox o input search não cria botão de limpeza de campo , lá vai eu tendo que tirar o automático e fazer um em css ,
@@maykbrito um cara no canal do Theo t3 comentou que muitas pessoas do core do Firefox foram dispensadas na onda de layoffs e que boa parte dessa gente trabalhava na implementação do CSS no navegador.
Parabéns pela inclusão das legendas! Como surdo, me sinto parte da comunidade assistindo suas aulas. Obrigado por isso!
Não tem como! Por mais simples que seja, cada aula uma novidade e um aprendizado diferente. Maykão brabo demais.
Que massa que curtiu Nilton!! TMJ
esse cara come css no cafe da manha, almoco e jantar...ele eh um monstro.
Tu é o cara Mayk!!! Conteúdo bom demais 💥
Valeu mano!! Que bom que tá curtindo!
É impressionante o quanto dá pra aprender com componentes tão "simples".. fantástico Maycao... vc manda bem demais!!
Excelente conteúdo, obrigado Maykão. Me ajudou demais esse vídeo.
Muito bom! Parabéns pelo conteúdo e didática
Muito legal... curti muito... me ajudando no meus estudos
Que massa!! Bora estudar!!
Maykão torna tudo muito simples, cara! Que aula incrível
Parabéns pelo vídeo!! 🤙
DICA: Acho interessante vocês colocarem no final um take da página funcionando com um screen reader, como o NVDA.
Muto show!! Ajudou dms...
muito bom esse #boraCodar me ajuda nos meus estudos!
Parabéns e que você coloque mais contéudos assim dinâmicos ... Deus abençoe
Obrigado pelo seu comentário e carinho Fulvio!
Não vai tem mais vídeos do boracodar no RUclips?
Faz um vídeo desenvolvendo em Expo um sistema de chamada por áudio e vídeo. Por favor senhores 🙏
vcs poderiam trazer um select que de para selecionar varios items, preciso de um desses e ta complicado fazer aqui kkk
Parabéns pelo conteudo Maykão show, so me tira uma duvida, como eu faria para fechar o select quando clickar fora da caixa.
Dá pra usar a estratégia que fizemos do keydown, mas para o mousedown ou click na window.
@@maykbrito boooua, vou tenta aqui abraços
@@rafael37663 shooww!! sucesso!
Q navegadfor é esse em 2:40 ? Achei legal as abas na lateral
é o navegador Arc
comprando os cursos da rocketseat posso fazer download de videos?
Boa tarde Mayk! Qual o padrão/metodologia de css que tu usa?
Tenho outra pergunta, você acha viável usar esse select em um projeto escalável ou vai dar ruim?
Acho que nenhum. Se tem nome a maneira que eu faço, eu não sei kkkk..
@@mel0nchiolha, se vc estiver usando alguma biblioteca ou framework, primeiro pesquisa se não tem algo no padrão deles. Caso não tenha, esse é um ótimo ponto de partida pra você levar adiante
@@maykbrito lol depois da uma olha no método BEM (block element modifier), acho que é o mais usado pela estrutura ficar bem simples pra manutenção.
@@mel0nchieu tava até escrevendo que eu já usei o BEM , mas acabei perdendo o costume de usar e abandonei. Mas sim, concordo muito contigo, é um ótimo método e bem organizado para utilizar o CSS em grande escala
Uma dúvida, e se eu clica-se fora? Em qualquer outra área? Que tipo de evento seria? Por que um "Select" normal do html já tem isso por padrão.
pode usar o windo.addEventListener('click', e => { // código para fechar aqui })
Queria ver a resolução de todo o projecto do boraCodar da ultima semana.😉
Eu fiz o desafio usando a biblioteca shadcn-ui e tailwind para poupar tempo.
OOOLOOOOOCCOOOOOO!!! Deve ter ficado MUITO DELICINNHAAA!! Shad-cn tá lindo demais!!
Único problema é que :has() não tem compatibilidade com o Firefox... Acho valido avisar isso no vídeo pois por mais elegante que fique usar essa solução na prática vai levar alguma tempo até que se tenha compatibilidade com todos os navegadores e trazer um conteúdo assim pode induzir uma pessoa nova a usar e ela nem saber por que em alguns navegadores não funcionam.
Bora se atualizar Firefox.. ajuda nóis!
Dá pra habilitar.
@@R6videos6R mas isso é chato e duvido que um usuário comum faça ou se importe de fazer isso. Essa feature é de 2021, e ainda não é padrão no Firefox, que tá passando vergonha. Gosto do seletor :has(), mas evito usar por causa do Firefox infelizmente.
Hellllp! Essa tela preta onde abre. Eu queria fazer o exercício junto com ele. Mas não sei o que abrir. E outra ele começa o vídeo com o código pronto. No App já tá pronto. Sou Analista de Sistemas formada em 1900 e nem lembro mais. Tô perdida aqui rs
Que navegador é este? Maykão manda muito bem
É o Arc
@@rocketseat obrigada
É a resolução completa mesmo?
Do select, sim, do desafio inteiro, não
@@maykbrito aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa agr entendi
@@ppedrolucas_ kkkkkk
Jovem, gostaria de agradecer pelo conteudo excelente, me ajudou muito, mas eu to com um probleminha, na pagina onde eu inserir o código, quando a caixa expande, ela empurra o conteúdo que está acima para um pouco mais para cima, e quando recolhe o conteudo abaixa, existe uma forma de quando a caixa de seleção expandir o posicionamento dela ficar fixo?
verificou se tem algum espaçamento sendo adicionado no css quando a caixa expande/recolhe?
Maykão, quando a gente deixa de usar o html select não perdemos acessibilidade?
Depende de como estamos codando o select customizado. Existem mais comportamentos e atributos que podemos usar e deixar ainda mais acessível, como por exemplo o atributo aria-* que oferece um conjunto de comportamentos de acessibilidade, ou mais detalhes de implementação em JS, como um click fora do componente que faz o componente fechar, etc
Eu coloquei as linhas do lucid para aparecer os ícones das setas up down e não apareceram no meu projeto e revisei diversas vezes e não sei porque não aparece😥
verifica se vc:
1. adicionou o 2:18
2. adicionou o html (entendi que sim, vc fez até essa etapa) 2:25
3. iniciou o lucide.createIcons() lá na aba JS 2:30
estou enfrentando o mesmo erro, verifiquei o codigo e não esta faltando nada, no fronteditor funciona, porem quando coloco no vscode não
@@rocketseat
sim, tudo igualzinho ao vídeo, as setas não aparecem, estou usando o vscode@@rocketseat
firefox vai sofrer com esse tanto de has
Firefox foi tão significativo na minha carreira, com o firebug.. mas acho estranha batalha entre os navegadores para acompanhar a evolução da tecnologia.. tem coisas que funcionam lá e não cá ... é meio maluco, né? Dizem por aí que até o Safari se tornou o novo Internet Explorer hehehe
@@maykbrito eu nesses dias tava estudando como fazer input de pesquisa fiz legalzinho no chrome chego no firefox o input search não cria botão de limpeza de campo , lá vai eu tendo que tirar o automático e fazer um em css ,
@@maykbrito Mas o que deve ser feito nesses casos? Ignora a existência do firefox? ou tenta outra abordagem?
@@gamerfasTentar outras abordagens, pois precisamos pensar nos usuários...
@@maykbrito um cara no canal do Theo t3 comentou que muitas pessoas do core do Firefox foram dispensadas na onda de layoffs e que boa parte dessa gente trabalhava na implementação do CSS no navegador.
não sei se é vergonhoso pedir isso kkkk, mas alguém tem o projeto pronto? tipo no Fiddle ou Codepen etc?
Cadê o desafio 35 pessoal? Não vão mais disponibilizar para os meros pobres mortais? hehe
Os desafios estão dentro da plataforma boracodar.dev 💜
sabia não que era tão complexo fazer um select customizado
Sempre uma dorzinha de cabeça fazer um select customizado 🥹😅
se tu for pensar na verdade é beeem complexo. é que o Mayk faz parecer simples =D
kkkkkk pois eu não achei que parece simples, na realidade, eu disse que é bem complexo aparentemente@@ati_modis
@@patrickxfranco kkkk é verdade, li errado :D
O que aconteceu com o bora codar da semana passada?
Os desafios estão dentro da plataforma boracodar.dev 💜