Com StencilJS você já tem esta funcionalidade por padrão, se optar por uma abordagem mais nativa, terá de desenvolver toda a parte de "bundling", lazy-load, etc. Basta seguir algumas guidelines documentadas pela ferramenta. Sobre o StencilJS: "Additionally, lazy-loading is a default feature of Stencil, so code-splitting is already happening automatically, and only dynamically importing components which are being used on the page." Direto da documentação: stenciljs.com/docs/module-bundling

Tente utilizar da seguinte forma: input:hover::placeholder {}

Olá! Como o que funcionou melhor no meu caso foram vídeos, cursos, artigos e documentações, qualquer livro que eu acabasse recomendando seria sem experiência própria. Nunca li livros de front-end, sempre foquei em aprender com base em experimentações e consumindo muita documentação/artigos, mas tenho certeza que na internet você encontrará algumas boas recomendações. Abraços!

Fala Matheus! Sim, é possível, se está visando o reaproveitamento agnóstico de componentes é um bom caminho, mas sempre se pergunte se vale a pena essa complexidade que estará adicionando. Mesmo que seja simples de trabalhar, é mais um projeto para gerenciar. Bom trabalho e sucesso!

Obrigado pelas palavras Luiz Henrique!! No momento ainda não possuo planos de criar cursos ou algo do tipo, focando em meu tempo vago apenas em conteúdos gratuitos voltados para a comunidade, tento retribuir de alguma forma. Infelizmente ultimamente não estou conseguindo dedicar muito tempo para produzir novos vídeos ou outros materiais, muito em breve planejo voltar! 🙂

O vídeo é de um ano atrás e neste meio tempo andei estudando um pouco mais de inglês, tenho corrigido a pronúncia de algumas palavras que assistindo este vídeo percebi que pronunciava errado. Quanto a Head na verdade a pronúncia seria “réd”, “ruéde” seria para red (puxando o R). Mesmo caso para header (que pronunciei errado no vídeo), o correto seria réder. No mais, espero que o conteúdo em português tenha ajudado.

Obrigado pelas palavras Thiago! A resposta é o famoso depende, pois sempre deve ser levado o contexto atual de sua empresa/projeto. Se pretende trabalhar mais próximo do VanillaJS, sem muitas abstrações existem opções como o Lit e Svelte que são bem populares. Considero ainda hoje o StencilJS uma ótima ferramenta e que facilita a vida ao trabalhar com webcomponents, já existe uma arquitetura opinativa (o que facilita na padronização e manter uma base de código com boas práticas), tem um CLI muito bom, boa documentação e principalmente, já aplica polyfills para navegadores mais antigos e outras compilações que precisariam ser configuradas de maneira manual. Em termos gerais, ainda recomendo o StencilJS para ser utilizado, é claro que se pretender criar apenas um único web component ou algo mais simples sem tanto boilerplate possa fazer sentido algo como o Lit.

@@tiago.boeing Entendi. Eu vou dar uma olhada no Lit. Mas meu desafio aqui é criar uma Biblioteca de um DS criado com Web Component mas usando Typescript e cobrindo qq Framework como Angular e React. até o momento achei o Stencil o mais dentro dessa necessidade. Mas vou ter de fazer bem simples porque hoje em dia o Angular e React possuem particularidades com implementações bem diferentes de forma que para que ele seja o mais Agnóstico possível, deverá lidar somente com a parte visual mesmo. Muito obrigado por sua resposta. Ajudou bastante na visão.

@@ThiagoLucioBittencourt com base nesses critérios o Stencil é uma ótima escolha e ainda vai facilitar o processo de distribuição da lib. 😉

Creio que você quis se referir a utilizar o Serverless Framework ou não. Considerando isto a diferença está mais no processo de deploy, manutenção e “portabilidade”. Ao utilizar o Serverless Framework são criados os mesmos recursos que você teria que criar manualmente dentro da interface da AWS. A vantagem dessa abordagem é que você mantém sua infraestrutura em código, isto quer dizer que pode facilmente implantar a aplicação em outra conta AWS apenas alterando as credenciais, algo que ao criar manualmente via interface no console você obrigatoriamente precisaria criar novamente de maneira manual. Nativamente a AWS possui o SAM que é sua sintaxe própria para criar recursos na nuvem via IaC (infrastructure as Code), porém para coisas mais objetivas como funções e um API Gateway isso acaba sendo mais verboso e ainda existe um lock-in com a AWS, visto que é uma sintaxe apenas deles e não funcionará em outra nuvem por exemplo. De qualquer maneira o Serverless Framework permite que você misture as sintaxes e adicione código SAM no yaml dele, dessa maneira você pode trabalhar com ambos ao mesmo tempo. Outro detalhe é que tanto com Serverless Framework quanto com SAM, ambos criarão por de baixo dos panos uma stack do CloudFormation. A título de curiosidade, vá na interface do console e busque pelo CloudFormation, veja que o Serverless Framework unificou tudo lá.

@@tiago.boeing Obrigado!!

Ao que me lembre os únicos que estão interligados diretamente são relative e absolute, porém cada tipo possui algumas necessidades específicas, por exemplo: ao utilizar "position: fixed" ou "position: sticky" você precisará informar o local onde o elemento deve ficar posicionado (caso contrário ele utiliza valores padrões), dessa maneira isto pode ser feito utilizando as propriedades: top, bottom, left e right. Para entender melhor, dê uma olhada nessa documentação: developer.mozilla.org/pt-BR/docs/Web/CSS/position

@@tiago.boeing Interessante, vlw!

Valeu Wallace!!

Valeu Jhonatan, fico feliz em ter ajudado!

Bacana que ajudou! A cadeira é uma DT3sports Royce Tecido Space Grey. Recomendo sim, muito confortável e ajustável, já possuo há quase dois anos e sem nenhum ruído ou desgaste visível até o momento. 🙂

Opa Luiz! Existe sim, na documentação do CSS diretamente ou eu costumo utilizar o MDN que é um site com amplo conteúdo sobre a web e oficial do Mozilla. CSS position developer.mozilla.org/en-US/docs/Web/CSS/position#formal_definition Sobre ao usar position: absolute e descobrir quem seria o relative (no caso da body/html é um pouco diferente, mas citei pra exemplificar), existe uma nota na documentação sobre isso: “However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.” Confira na seção position: absolute www.w3schools.com/css/css_positioning.asp Em resumo, se você utilizar apenas position: absolute sem declarar um relative, o elemento buscará na DOM a tag body para utilizar como base, talvez meu exemplo tenha confundido as coisas, não quis ser literal com o “de fato ele procura”. 😅

Dá uma olhada nesse meu outro vídeo que possui a parte do placeholder. (: kzfaq.info/get/bejne/bdpjqJSGrOCyk6s.html

@@tiago.boeing Obrigado! Poderia fazer um vídeo ensinando tudo sobre div, como funciona pra que serve e como usá-la, a mesma coisa com function e com buttons, por favor? gostaria muito de aprender a uasr essas coisas sabe.. Obrigado!!