 Vamos lá. Desejar primeiramente um boa noite pro Lucas, boa noite Brasil, boa noite Florianópolis. Eu vou tentar ser extremamente pontual. Vou colocar um timer aqui pra gente terminar a nossa palestra no atrasar o evento em 25 minutos e sobrar 5 minutinhos aí para as perguntas. Beleza? Então, vamos lá. Fazer um jabá aqui, tô com minha tela cheia. Seis stream work, o melhor do PHP tudo em um lugar. Vou explicar um pouquinho mais pra frente, mas é bem bacana a gente conhecer stream work, ele é bem moderno e vamos pra lá. Quem sou eu? Eu sou Gabriel Cano, sou pai, converter de café em código, amo café, amo codar. Quarente ano, amo quarentes também. Jogador de Magic the Gatering, que é um joguinho de cartas pra quem não conhece e entusiasta de audiovisual. Adoro podcasts, vídeos, etc. Tanto produzir quanto consumir, tá? E sobre o que a gente vai falar hoje? A gente vai tentar aqui falar um pouquinho sobre os stream works que eu já utilizei. Então, vou trazer uma experiência um pouco particular minha, escrever um pouco sobre os stream works que eu já utilizei. Vou falar sobre o seis de stream work em si, né? E daí a gente vai tentar fazer um pouquinho aqui de live code, sempre aquela Lady Murph, né, da errada, etc. Vamos ver como é que vai ser dessa vez. Tem que ter que deixar o máximo de coisas preparadas possíveis pra não dar errado, mas a gente já vai saber na hora. Então, vamos lá. Stream works que já utilizei. Primeiro stream work que eu já utilizei é o Gabriel Pipe Stream Work, que é sempre aquele stream work que você faz com seus próprios códigos, você junta um monte de coisa que você usa sempre, vai salvando arquivos, vai dando inputs, etc. Então, todo mundo, quando começa a fazer bastante trampo em WordPress, etc., ela pega e faz os seus próprios códigos ali, armazena eles, pra poder reutilizar no dia a dia, né? Então, esse foi o meu primeiro stream work em préstas. Depois, eu conheci o Odin Stream Work, que foi um stream work que a comunidade WordPress Brasil construiu. E ele é muito bacana, muito legal, assim. Ele é um stream work orientado ao objeto, ele tem várias classes, vários helpers, muito legais que você pode utilizar. Só que foi perdendo um pouco de suporte da comunidade com o tempo. E eu achei que ele ficou um pouco parado, assim, no tempo. Então, por exemplo, ele não evoluiu tanto quanto outros stream works, por exemplo, o próprio Sage, que a gente tem hoje em dia, e outras coisas como FrontEat, etc., né? E eu parei de usar ele, basicamente, porque meus processos estão ficando muito lentos e ele utilizava o Grunt como compilador de CSS, JavaScript, etc. E daí eu fui pro underscoreme. Deixa eu só ver, beleza. Eu fui pro underscoreme, que eu criei uma estrutura dele compilando direto o SaaS sem muitas coisas, assim, rebuscadas, né? Então, ele gerava um border plate, assim, bem básico. Eu pegava, criava o tema, ia colocando os códigos, compilando, etc., tava super certo. A evolução do underscoreme pra mim foi o WP Group. Então, o WP Group cria uma estrutura, basicamente, pra você compilar o seu JavaScript, o seu CSS utilizando o SaaS, né? Com o Group, então, ele tem uma velocidade bem grande de compilar as coisas. Você consegue também usar o Live Reload pra quem não conhece, que eu vou mostrar aqui também. Então, você tem bastante coisa, bastante ferramentas dentro do WP Group. Só que ele não te entrega uma estrutura de código PHP, então, por exemplo, o seu front page, o seu functions, etc., sabe? Coisas que WordPress tem que ter por obrigatório de arquivos para funcionar. Então, ele não... Como ele não entregava nada disso, o WP Group, eu consegui juntar ele com o underscoreme. Então, o underscoreme entregava o border plate básico ali de PHP, eu juntava ele com o underscoreme, melhor dos dois mundos. Utilizei isso por muito, muito, muito, muito, muito tempo. Até eu entrar na empresa que eu tô hoje, e conheci o Sage Framework. Então, eu vim aqui pra espalhar pra vocês, meu Brasil, Varonil, Florianópolis, todo mundo também que tá fora do Brasil. Um beijo, o Sage Framework. O que é o Sage Framework? Deixa eu só ver o nosso próximo slide aqui, beleza. Ele, basicamente, se eu fosse resumir, ele pega o framework PHP que eu considero um dos mais potentes, senão o mais potente hoje, que é o Laravel, e junta isso com WordPress. E daí você pega, eu tenho a tecnologia mais top da Galaxy, é no Laravel, no PHP, e eu juntei com o WordPress, que às vezes tem um spaghetti code ali, meio macarônico, né? E eu vou destacar aqui algumas coisas que eu acredito que são pontos muito positivos do Sage, né? Então, eu vou falar aqui um pouco sobre o Sage. Ele foi criado em 2011 pela Roots, que é uma empresa que faz outras coisinhas, também como Bad Rock. Não vou lembrar os outros produtos deles, não é? A gente pode ver no site deles, né? E eles criaram isso, por eles terem um projeto padrão para eles desenvolverem os sites deles. Então, o Game for Pride framework deles virou um negócio gigantesco muito bom que é o Sage, né? O que que o Sage tem de coisas muito boas, né? Ele tem gerenciamento de assets e dependências de uma forma muito boa, porque ele usa o webpack. Ele tem uma utilização muito bacana. Então, assim, todos os projetos que eu faço, que eu utilizo o Sage, a gente tem notas muito boas no Google page de speed porque ele compida, ele faz tudo lá, ele faz acontecer. E herança de modelos. A gente consegue reutilizar, criar componentes e reutilizar eles de fato em diversos lugares. Isso é muito legal. Outras coisas que eu posso falar sobre o Sage. Ele é mantido profissionalmente pela Sage, né? Pelo Roots, a Roots, que é a empresa que criou o Sage. Ele é o boilerplate perfeito. Então, você vai ter ali toda a estrutura do WordPress. Você tem estrutura do blade para você poder utilizar, né? Várias coisinhas que a gente vai dar uma olhada. Processo de build moderno. Então, eu utilizo o webpack. Isso faz com que a gente consiga compilar as coisas de uma forma muito rápida e muito boa. Além de adicionar outros packages e tal. E ele tem um ótimo controle de views. E a gente vai ver bastante dessas views que ele utiliza o blade do Laravel para fazer isso, né? E aqui a gente já vai para o live code. Agora é a hora da verdade. Até rápido chega a loja do code. Acho que acelerei demais de eu ter curtido mais esse momento. Então, vou tentar criar um clima aqui. Se a Alexa me ajudar, para a gente criar um clima de tensão aqui na hora do live code. Alexa, luz vermelha. Alexa, luz vermelha. Tudo bem. Ah, beleza. Vou me trazer esse clima. Então, agora, vamos abrir aqui. Então, vamos conhecer primeiro o site do Sage. Sage Roots. Aqui, eu vou fazer uma instalação do Sage fora de uma instalação WordPress. Só para vocês verem como é muito fácil de você copiar esse arquivo. Definir o que você quer e ver ele lá, né? Então, ele basicamente você tem que rodar esse comando aqui. Composer Create Roots Sage. Então, eu vou entrar aqui no diretório padrão dos meus sites, né? E vou copiar o Sage para cá. Composer Create Roots Sage. Beleza, ele vai começar a rodar o composer e daí ele vai me perguntar algumas informações sobre o Sage. Aí, quando a gente fizer essa primeira configuração, eu vou mostrar para vocês como que é a estrutura que ele cria, tá? Ó, o... está funcionando, hein? Está dando certo. Então, vamos lá, o nome do nosso termo vai ser WordTimp. Floripa. Essa URL do autor pode ser essa mesmo. O termo pode ser esse aí mesmo, termo version. Autor, eu vou colocar aqui Gabriel Cano. Não sou eu, autor, mas tudo bem. Termo o autor URL, ok. Locar o teste, eu vou colocar aqui... Ah, vou deixar isso aqui mesmo, depois a gente vai ver isso aqui funcionando, tá? É, diretório do termo, ok. Olha que legal, você pode escolher qual framework você é, se você quer utilizar dentro do seu Sage, qual framework você quer utilizar, né? Eu utilizo muito o bootstrap, né? Então, eu vou colocar aqui o bootstrap. Ele traz os ativos de SaaS padrão, dentro dessa estrutura. Não vamos mudar nada. Pum, pronto, temos aqui o nosso Sage. Se eu vier aqui dar um code Sage para abrir dentro do meu VS Code, ó, abrimos aqui o Sage. Se eu pudesse resumir o Sage, ele basicamente transforma o... um termo WordPress numa arquitetura MVC, que é Model View Controller, né? É... O avio, a gente vai utilizar os blades. Eles estão dentro dessa parte daqui, resources, tá? E os assets também. Os controllers estão dentro da nossa pasta app. E a gente tem aqui os controllers, onde eu utilizo eles, tá? E o model, ele utiliza basicamente a arquitetura de modelagem de dados do próprio WordPress. Então, a gente não precisa usar essa letrinha da nossa sopinha em MVC, tá? É... Por que é muito bacana você estruturar ele dessa forma? Porque você consegue separar muito bem o que é lógica do seu tema e o que é consumo dos dados. Mas você só vai exibir as coisas, configurar o CSS, etc. Dentro dessa estrutura aqui. Então, aqui eu vou ter as views, onde eu vou tratar todas as configurações do que eu quero exibir. E aqui nos controllers eu tenho a lógica. Que eu vou falar como exibir cada uma dessas coisas, tá? A princípio, bem simples, sem segredo, nem nada. Beleza? Olha, ele criou tudo certinho aqui. Dentro dos meus assets, eu tenho aqui scripts, que ele cria algumas rotas já padrões, daqui a um detalhe bem bacano para a gente entrar, mas não sei se vai dar tempo. E daí ele tem aqui toda a estrutura do Bootstrap. Então, olha, ele cria um CSS global, ele cria um arquivo de variáveis para você poder criar, utilizar, buildar. Ele já tem alguns arquivos padrões como footer, header, pages, posts, adibar, tá vendo? Muita coisa. Ele é muito legal, ele é muito perfeito. Ele é todo, todo, todo perfeitinho. Agora, vamos ver ele rodando. Então, eu peguei, cria um tema com o Sage dentro de uma instalação WordPress para a gente conseguir testar algumas coisas e ver. Beleza? Então, vamos lá. Eu vou abrir aqui o meu VS Code, o projeto que eu acho que é o WordPress. Beleza? Então, aqui eu tenho um WordPress instalado, configurado bonitinho com o Sage. Beleza? Vamos voltar aqui. E como eu acessuei ele aqui, eu acessuei ele através de localhost. Então, ok. Tem aqui um boilerplate basicão, tem a minha página home, está funcionando ok, lindo, maravilhoso. Vamos seguir. Então, aqui eu vou colocar algumas coisas que têm mais a ver um pouquinho com a arquitetura do Blade, mas você trazendo isso que é muito poderoso do Laravel para o WordPress, você viu qual ganho que você tem, tá? Então, por exemplo, a primeira coisa que eu acho que é muito bacana aqui, a forma como a gente consegue imprimir variáveis. Olha como é simples. A gente não precisa ficar mais abrindo, fechando um monte de PHP. O negócio era horroroso. Você escreveu um código, você tinha que abrir e fechar PHP mil vezes. Aqui você não precisa fazer isso. Como a gente consegue testar isso? Lembra que eu falei que a gente separa a lógica de negócio, consul dos dados, etc. Dá a view onde a gente só vai exibir? De fato, né? Então, vamos lá. Eu tenho aqui, dentro da app, o app é uma série de configurações gerais que eu vou ter lógicas. Então, isso daqui eu poderia fazer uma consulta do banco de dados, eu poderia repegar uns fields do ACF, alguma coisa desse tipo, né? Mas eu resolvi criar aqui um monte de classes para a gente fazer alguns testes, beleza? Então, eu queria uma função aqui chamada texto. Olha que legal. Eu não preciso fazer absolutamente nada. Eu vou criar uma função. Dentro da pasta app, ela fica disponível para todos os lugares, né? Que se chama texto. E ela me retorna um HTML. Automaticamente, se eu quiser resgatar isso daqui em qualquer lugar, a única coisa que eu preciso fazer é colocar uma variável aqui chamada texto. Porque ele automaticamente transforma uma função existente que retorna um valor em uma variável para mim. No caso, se ela estiver dentro da pasta app, do controle da app, acessa em qualquer lugar, se ela estiver dentro de um controle específico, então page, single, igual a arquitetura de template que a gente tem, dentro do proper press, ela vai ficar acessível dentro daquilo A, né? Beleza, vamos ver aqui. Se eu posso utilizar o nosso modelo antigo aqui, meio ruim, de dar um eco no texto, deixa aqui. Vamos ver se vai funcionar. Eu nem sei se vai funcionar isso. Uh, funcionou. Eu dei um olá mundo lá, grandão. H1, beleza. Agora, olha como é muito mais bacana. Eu posso deletar esse eco, aqui posso deletar o PHP. Isso eu coloco dentro dos bigodinhos aqui, que eu não lembro se é parênteses, chaves ou... Eu sei que esqueço o nome, mas o Lu, oh, escreveu. Puta, mas ele escreveu H1, fechou H1. Por quê? Olha que legal. Essa daqui é a síntese que eu vou receber tudo menos HTML, então ele está sempre escapando daqui, tá? Aqui, se eu colocar duas exclamações, ele para de escapar, ele aceita HTML. Então, o aceito HTML, então aceito HTML não tem que me ratear, escrevo o príncipe com a variável escapado. Bem simples, muito legal, certo? Vamos lá para o nosso próximo testezinho. Olha como a gente consegue usar uma estrutura de controle muito fácil com os ifs aqui. Então, eu vou vir aqui, vou pegar outra variável que eu criei, testif, beleza, vamos lá. Eu vou chegar aqui, a rouba, eu vou lá. Se eu utilizar essa síntese do grade, eu vou divisar a rouba. Então, a rouba e if, beleza? Então, si, a minha variável, testif, eu vou tornando uma função aqui, o valor 4, for igual a 4, eu quero que ele escreva isso aqui. Beleza? Hum, entendeu? Ótimo, lindo, maravilhoso. Outra coisa que a gente pode pensar, é o siif. Então, se for igual a 3, eu não quero que ele escreva, mas a rouba é o siif, o testif for igual a 4, aí sim, eu quero que ele escreva, mas eu quero que ele escreva aqui também. Ótimo, aqui eu vou aceitar a HTML, porque eu sou bondinho demais. Uh, escreveu, beleza. Então, vamos por que aqui fosse igual a 2, aí ele vai sumir aqui, porque esse valor não existe. Então, se eu quiser aqui, vou controlar com Elsie, a rouba Elsie, já com meu valor aqui, funcionando. Viu como é muito mais fácil, eu não preciso ficar brilhando e fechando muito de coisa, como eu consigo tratar isso de uma forma muito mais tranquila dentro da minha estrutura? Beleza, vamos para outra Acabar meu tempo, enganando, agora vou te escorrer. Outra estrutura de dados, esse daqui eu já deixei até feita já, olha como eu vou controlar um for de uma forma muito fácil. Ó, for, já coloco aqui, coloco a condição, o alto incremento e eu já posso consumir aqui embaixo mesmo. Se eu vier aqui, da 1 de 5, um, desvelue, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. Legal, né? Agora vamos para lá, esse daqui eu demorei muito tempo para eu criar esse aqui. Eu disponibilizei aqui uma função chamada gatos, então ela tem aqui os nomes de todos os meus gatos, o primeiro nome, o último nome e as cores de cada um deles. Beleza, para a gente fazer esse exemplo. Então qualquer primeira coisa que eu quero mostrar, um forite, que assim, ele é ok. Esse forite aqui, ele funciona muito bem. Vou pegar os meus gatos e vou falar quais são os gatos de cada um dos meus gatos aqui. Se eu pegar aqui, então tinha três gatos, aí de 1, 2, 3, exatamente o que eu tenho aqui, consumindo de uma forma perfeita sem problema nenhum. Agora vamos para segundo exemplo. Onde eu tenho aqui o forelse, tá? Eu quero saber quais são os meus pássaros. Uavidos pássaros, só que eu não tenho pássaros aqui. Não criei nenhuma variável aqui de pássaros. Eu não tenho pássaros. Então vamos supor que eu tivesse itens na parte de cima, iria fazer um forite. E na parte de baixo aqui, se eu não tiver nenhum item, ele vai falar que está vazio. Então vamos lá. Você não tem pássaros, beleza? Aí, ó, se eu mudar aqui para gatos, um, mostrar a prioridade dos meus gatos. Viu como é simples você tratar uma exceção dentro dessa estrutura do blade? Como ele é poderoso? Outra estrutura aqui do forouse que eu já fiz, forite que eu já fiz e o forite que eu já fiz. Beleza. Vamos lá. Break and continue. Se eu já utilizasse o blade dessa forma aqui, onde eu quisesse pegar os meus cachorros, tá? Ele já seria muito bom. Então ele ia falar que eu quero o meu cachorro. Se o ID do meu cachorro for igual a zero e eu tenho aqui a variável cachorros, ah, não tenho aqui. Vou explicar. Voltando um pouquinho. Dentro da minha estrutura front page, eu tenho aqui uma função cachorros, onde eu tenho o nome do meu cachorro e eu vou consumir esses dados aqui, tá? Eu consigo acessar isso apenas porque ela está nessa página e se eu tenho que acessar ela em outra página, como ela não está disponível na app, que é global, ele não consegue acessar, tá? Então vamos lá. Quero o cachorro com o ID igual a zero. Se tiver, eu quero pular ele, porque eu não quero um cachorro com o ID igual a zero. Então beleza, eu mostro o meu cachorro que não tem ID igual a zero, então ele é latrel. Se eu chegar aqui e falar que o ID dele é igual a zero, ele não vai aparecer nada, certo? Aqui é agora um monte de cachorro repetido e vou trocar os IDs deles. Então vamos lá. Vou querer um, dois, três, quatro, e vamos lá para o último cachorro, cinco. Eu quero dar um break no cinco, tá? Então vamos lá, latrel zero, latrel. Um, latrel dois, latrel três, latrel quatro, e latrel cinco. Como que ficou essa nossa estrutura de dados? O latrel zero, ele pulou, porque eu pedi para ele pular, não é verdade? Quando o latrel for igual a zero, beleza. Vou colocar aqui até o latrel seis para a gente fazer o teste. Ele foi lá dentro desse forite, o latrel zero ele pulou. Os outros, ele escreveu todos. Porém, quando for igual a cinco, eu vou dar um break. Eu vou continuar o meu loop. Então o latrel seis ele não mostrou, certo? Se eu vier esse aqui trocar as pra seis, ele ia mostrar. Já tá legal isso daqui, já tá bem melhor do que se você fosse fazer de outro jeito. Mas olha só como a gente consegue fazer um negócio ainda muito melhor. Eu posso utilizar o continue e o break dessa forma. Olha a diferença do código. Eu vou falar, quando o meu cachorro for de zero, eu não vou mostrar. Quando for igual a cinco break. Eu coloco a condição dentro da própria função, que é o continue and break. Isso daqui vai funcionar exatamente do mesmo jeito. Só que com muito menos linhas. E aqui a gente tem uma comparação bem grande de como ele funcionaria com essas linhas desse jeito e como ele funcionaria, significado. Já estou ficando, a gente tem mais duas coisinhas para mostrar. Mais porreta de todos, melhor de todas as coisas que a gente tem para mostrar. Tá. É uma coisa bem comum que você tem que fazer quando está programando, etc. É você ir lá, faz um forite, aí você coloca que é igual a zero e daí você vai lá e coloca aí mais mais e etc. Você tem que sempre fazer aquelas interações para ver onde você está exatamente em cada uma das coisas. E o nosso forite traz o blade para cá ele tem uma variávelzinha dentro do forite que se chama loop e ela consegue pegar tudo que está acontecendo dentro do loop. Então olha que legal. Eu tenho aqui a nossa variável dos gatos. Então eu tenho aqui meus gatos dentro da pasta app que é o Alfred Hittcock, a Ganesh Kelly e o Roger Faulzinho. Então, quando eu tenho aqui os meus gatos, eu quero falar que ele é o meu primeiro gato. Quando ele estiver na última interação do loop, eu quero falar que ele é o meu último gato. Tá. E ele vai concatenar isso com o nome do gato sobre o nome do gato. Beleza? Então se a gente vier aqui olha que maravilhoso. Eu não precisei colocar aí, não precisei contar mais e e dentro de j simplesmente ele falou que o meu primeiro gato é o Alfred Hittcock, segundo é a Ganesh Kelly, terceiro e último gato é o Roger Faulzinho. Olha que maravilhoso. Não tem nada de código aqui e eu consigo fazer tanta coisa. Essa variável loop ela é muito potente porque ela consegue identificar qual que é o item que você está entendo naquele momento, se ele é o primeiro se ele é o último se ele tem parente, várias e várias e várias coisas. Se vocês procurarem por essa variável vocês vão conseguir ver que dá para vocês fazerem várias coisas e isso vai melhorar a qualidade do código de vocês muito, muito mesmo porque ele fica muito mais simplificado muito mais destrutivo é fácil das pessoas entenderem pouquíssimas linhas. Para fechar agora eu vou mostrar aqui o loop parente é o loop do loop então quando você vai lá se faz i mais mais, daí depois do item j depois do j tem um L você vai indo um monte de loop dentro do loop e o negócio fica super complexo de você entender então aqui eu vou mostrar as cores do meu gato cores do pego o nome do gato e aí eu tenho aqui as cores que é um outro objeto que está dentro dos gatos dentro de cores e vou fazer um forite dentro das cores também só que o hitcock ele é meio fedido que é um dos meus gatos e além das cores dele quando eu tiver na primeira interação do loop que é o meu gato alfre de hitcock eu quero falar que além dele ser preto e branco ele é fedido então vamos lá eu comentei aqui então a alfre de hitcock é preto e fedido e ele é branco e fedido a grece que ela é cinze e preto e o rogero flauzini é branco e laranja se eu vier esse aqui falar se ao invés de ser o último item eu quero o west o último item de lá de cima então quem vai virar fedido aqui agora é o rogero o rogero não é fedido, ele só é brincadeiro brincadeiro branco e brincadeiro, laranja e brincadeiro viu? muito simples de você fazer essas diversas comparações eu ainda tenho um minutinho então nesse meu último um minutinho aqui eu vou mostrar para vocês como funciona o live reload do sage que é bem simples ls, um lado a nossa pasta do tema vamos entrar em wp floripa beleza o webpack que é um negócio javascript ele tem uma função que é o live reload onde você vai codando modificando seu javascript e o seu css e ele já vai mudando tudo isso na tela então eu vou chegar aqui para eu fazer isso é muito simples eu preciso dar um yarn para instalar tudo isso depois eu dou um yarn start ele vai criar um local host porta 3000 onde eu tenho aqui minhas coisinhas e eu posso vir aqui dentro do meu css e modificá-la então vou pegar aqui os globais vou colocar aqui o meu h1 é color green salveio tá compilando cheguei aqui com o h1 color green vamos lá vamos tentar usar as variáveis do sass eu ia aqui colocar que eu tenho a color green acabou de acabar nos uns 5 minutos só vou mostrar isso aqui para vocês color green é igual a blue e a gente desafia o sistema o tempo todo eu venho aqui já, minha variável chamada color green e vai funcionar? não, não vai funcionar, funcionou um, virou a zoom é, isso é resumidamente tudo que o Sage pode fazer e faz e é isso galera muito obrigado muito legal, Gabriel a galera adorou o nome dos gatos acho que a primeira pergunta é quantos amigos de patas você tem? 4 um cachorro e 3 gatos já sei que é muito legal muito legal, o framework o Sage deu para ver que agiliza bastante o trabalho dá para fazer aplicações bem legais, bem complexas inclusive que traz todo esse ferramental para o cara que está trabalhando as perguntas que foram feitas claro que o intuito da ferramenta é agilizar a construção de plataformas mais robustas mas como fica a performance dessas aplicações? você chegou a testar alguma? cheguei, eu não consigo colocar diretamente alguns números aqui mas o Sage se vende muito pelo fato de todo esse processo de build dele, dos assets para gerar coisas muito otimizadas na roots tem uma documentação acho que nas primeiras coisas que você for ver eles vão te mostrar bem de markers que no gtmetrex e no google page speed a nota era a com 98 97 em sites com bastante coisas porque eles conseguem criar principalmente no JavaScript, isso é muito bacana por mais que ele compive ele faz com que o JavaScript só carregue na página se você não utiliza um modal na home e só utiliza por exemplo na página de contato ele só vai carregar na página de contato isso dá um ganho muito grande é, o código fica sempre em chuto uma pergunta que fizeram também é se o Sage permite usar o tailwind que chegou a fazer esse teste eu nunca utilizei eu estou começando um pouco de contato com o tailwind mas se você ver na hora e você cria o tema que eu fiz aqui vai ficar gravado, vocês vão conseguir ver acho que eu preciso número 5 de tailwind start do Sage se você usa acho que você vai adorar utilizar ele dentro do Sage muito bom muito legal, Gabriel, obrigado pelo teu material, pela tua contribuição pessoal, gostou muito mesmo acho que está todo mundo intrigado para quem não conhecia começar a testar bem legal, parabéns