Mateus Garcia

Eai Dev, tudo certo? Se você precisa utilizar algumas configurações do Windows constantemente, como a configuração de áudio ou de tela, para alterar o dispositivo de saída por exemplo, você provavelmente deve ter se perguntado se existe uma forma mais rápida de acessar essas configurações, e talvez tenha até tentado criar um atalho para elas pelo menu iniciar. Com alguns simples passos você conseguirá criar atalhos para a maioria das configurações do Windows, utilizando o criador de atalhos e as URIs das páginas de configuração do Windows, encontradas na documentação do Windows. O primeiro passo é acessar a documentação e encontrar a URI da página de configuração que você deseja, por exemplo, no meu caso a “ms-settings:display” que se trata da configuração de vídeo. Após isso, vá para sua área de trabalho, e pressione o botão direito do mouse, clique em Novo, e então em Atalho. Na nova janela “Criar atalho”, no campo “Digite o local do item:”, cole a URI escolhida no primeiro passo, e clique em Avançar. Por fim, escolha um nome para seu atalho, no meu caso será “Configuração de Tela”, e clique em Concluir. Então seu atalho se parecerá com isso: Para conferir se deu tudo certo, basta clicar duas vezes sobre seu novo atalho, e se estiver abrindo a configuração que você escolheu, está tudo certo, mas caso não abra nada, ou abra uma página qualquer da configuração, volte e confira a URI escolhida. Para conferir e/ou alterar seu atalho, pressione o botão direito do mouse sobre ele e clique em propriedades. E então, no campo "URL", confira e se necessário altere para a URI desejada e clique em "Aplicar" ou "OK". E é só isso, uma coisa muito simples que te ajuda a economizar alguns cliques desnecessários (e chatos) no seu dia a dia! * Lembrando que a versão do Windows utilizada nesse artigo foi a 11, outras versões podem ter alguns passos diferentes, mas seguem a mesma ideia! Se você gostou da dica, manda para um amigo que também irá gostar, e caso conheça algum outro atalho legal, conta aí pra gente!! Valeuuu e até a próxima!

Eai Dev, tudo certo? Você já ouviu falar em plataformas/ferramentas low-code? Plataformas low-code, são plataformas de baixo código, onde o desenvolvimento é realizado através de uma GUI (Graphical User Interface), normalmente em um design que lembra bastante os nossos queridos diagramas, tudo isso, como o próprio nome diz, usando pouco e às vezes até nenhum código (no-code). Esse modelo de desenvolvimento não é algo novo, existe desde meados dos anos 90, com ferramentas consagradas, como por exemplo o Delphi, e vem ganhando um espaço cada vez maior. O principal fator de seu crescimento deve-se por permitir que pessoas com um conhecimento básico sobre programação (ou até mesmo nenhum conhecimento), consigam criar suas aplicações, desenvolver seus websites, integrar seus sistemas e muito mais. Sabendo disso, é possível pensar então que os desenvolvedores irão acabar, certo? Negativo, pois apesar de ser possível utilizá-las com pouco conhecimento, normalmente quem conseguirá tirar um melhor proveito de todas as possibilidades dessas plataformas são os desenvolvedores mais experientes. Além disso, essas plataformas normalmente possuem limitações em questões de personalização, funcionalidades, etc., pois para conseguir ser de simples utilização, é necessário muitas vezes eliminar funcionalidades complexas, que trariam maiores possibilidades para desenvolvedores avançados. Também não precisamos temer que as linguagens de programação irão acabar (pelo menos por enquanto hahaha), pois ferramentas low-code ainda usam código, e ferramentas no-code (que não usam código algum) normalmente são mais engessadas que as low-code, portanto, dependendo do seu caso de uso, você nem sequer conseguirá atingir seus objetivos utilizando uma dessas ferramentas, ou pelo menos não de uma forma tão eficiente quanto uma solução desenvolvida em uma linguagem de programação. Conclusão Como tudo na vida, as ferramentas ou plataformas low-code possuem seus prós e contras, mas com tudo isso, no meu ponto de vista, são atualmente ótimas opções para o desenvolvimento de soluções que não possuem um grau de complexidade tão alto, ou que precisam ser desenvolvidas de uma forma rápida, podem também ser utilizadas como prototipagem para aplicações maiores, e o principal, permitem que pessoas com pouco conhecimento técnico tirem suas ideias do papel. Agora diz aí, você já usou ferramentas low-code? Conhece alguma ferramenta low-code bacana? Conta aí pra gente!! Valeuuu e até a próxima!

Eai Dev, tudo certo? Recentemente falamos sobre a Área de Transferência do Windows, e hoje iremos falar sobre outra ferramenta muito interessante também do Windows, o Gravador de Passos. Pelo nome talvez você se lembre daqueles aplicativos que contam os passos conforme você anda com o seu celular ou smartwatch, mas é algo bem diferente, na verdade, o Gravador de Passos registra todo o passo a passo com capturas de tela e descrições textuais de tudo o que você fizer no seu computador enquanto estiver no modo de gravação, o que torna essa ferramenta muito útil para criação de tutoriais e documentações rápidas. Agora que você já sabe do que se trata, bora aprender como configurá-la e utilizá-la... *Lembrando que essa ferramenta está disponível em várias versões do Windows, porém a que está sendo utilizada nesse guia, é o Windows 11. Para começar, vamos buscar por "Gravador de passos" na pesquisa do Windows, então clicar em "Abrir": Então, você verá uma pequena janela como essa: Com a janela do gravador aberto, o primeiro passo é acessar as configurações, clicando no botão de ajuda, representado pelo ponto de interrogação, e então selecionando "Configurações...": Você então verá a seguinte janela: Essa janela possui algumas configurações, a "Habilitar captura de tela" sempre deixaremos com o "Sim", pois é nosso objetivo principal, já a opção "Arquivo de Saída", eu recomendo não utilizar, pois toda gravação que você fizer, será gravada no mesmo local e com o mesmo nome, portanto, quando fizer novas gravações, as antigas com o mesmo nome serão sobrescritas e seu conteúdo será perdido, então o que costumo fazer é deixá-la em branco, e salvo as gravações manualmente após finalizá-las como mostrarei a seguir. A última opção é a que queremos alterar, que se trata do limite de capturas recentes, que por padrão é 25, mas podemos alterar conforme a necessidade, pois ao passar do número limite, as primeiras capturas serão perdidas, por exemplo, em uma gravação com 50 passos e limite de 25, apenas os últimos 25 passos serão registrados com capturas de tela. Detalhe importante: As configurações são perdidas ao fechar a janela, sendo necessário reconfigurar toda vez que for utilizar. Finalizando nossa configuração, podemos fechá-la e voltar para a janela inicial, onde veremos que o primeiro botão é o "Iniciar Gravação", que como próprio nome diz, inicia uma gravação, e após clicar nele, todas as ações que você fizer já estarão sendo registradas, e a janela agora se parecerá com isso: Os botões "Parar Gravação" e "Adicionar Comentário" ficarão disponíveis, e o "Iniciar Gravação" é substituído por "Pausar Gravação". O "Pausar Gravação" permite que você pause e retome a gravação a qualquer momento, o botão "Parar Gravação" finaliza a gravação e abre uma nova janela com o relatório da gravação, e o "Adicionar Comentário" permite que você adicione anotações e comentários que aparecerão no relatório final, mas esta opção não costumo utilizar, pois apenas utilizo as imagens do relatório final. Após gravar seu passo a passo, clique em "Parar Gravação", então abrirá uma janela com o seu relatório, que se parecerá com isso: Nesse relatório, você poderá salvar ou copiar as imagens e informações que achar necessário, e caso queira salvá-lo para extrair seu conteúdo em outro momento, simplesmente clique no botão "Salvar", e caso não tenha ficado contente com a gravação, basta gravar novamente clicando no botão "Nova gravação", os dois botões são encontrados no canto superior esquerdo da tela: Você perceberá também que o relatório contém muitas informações técnicas sobre os programas com os quais interagiu durante a gravação, o motivo disso é que essa ferramenta foi criada pela Microsoft com o intuito de auxiliar na resolução de problemas, onde o usuário deve gravar o passo a passo que percorreu para obter o erro ou problema específico que esteja tendo, e enviá-lo ao suporte técnico que irá analisar o caso em busca de uma solução, por esse motivo também, utilizei a palavra relatório para descrever o resultado da gravação. Na imagem a seguir, podemos ver um exemplo de tais informações técnicas, encontradas no fim do relatório: Outro ponto importante a citar é a qualidade das imagens, que demonstra ser inferior a de uma captura de tela comum, então dependendo do seu objetivo, talvez essa ferramenta não atenda sua necessidade e seja melhor utilizar o bom e velho "Print Screen". Lembrando que isso não significa que a ferramenta nunca poderá te ajudar, pois em casos que você precise criar documentações simples e rápidas para seu time, ou precise simplesmente fazer um mini tutorial para um colega, ela com certeza irá te salvar um bom tempo. Para ver um exemplo prático sobre a qualidade da imagem, a primeira imagem desse post é uma captura dessa ferramenta, e todas as outras são capturas de tela comuns, volte ao topo da página e analise a diferença, e aproveite para me contar se você tinha notado a diferença antes, ou se só percebeu isso agora. Espero que tenha gostado da dica, e que possa utilizá-la no seu dia a dia para melhorar sua produtividade. Como sempre, não se esqueça de me contar o que achou, se já conhecia a ferramenta ou não, e se você gostou do conteúdo, envie para seus amigos e colegas de trabalho, para que eles também possam conhecer essa ferramenta! Valeuuu e até a próxima!

Eai Dev, tudo certo? Você já conhece a área de transferência do Windows? A área de transferência é o lugar para onde vai tudo o que você copia, inclusive imagens, seja com o lendário CTRL + C, ou simplesmente copiando com o botão direito pelo menu de contexto. Mas calma, isso só começa a funcionar a partir do momento que você ativa essa funcionalidade em seu Windows, e para isso, basta usar o atalho Windows + V, e você verá uma janela assim: Ao apertar em Ativar, como dito acima, tudo que você copiar irá parar ali, e ficará mais ou menos assim: A partir disso, basta pressionar com o botão esquerdo do mouse sobre o item que deseja colar, e pronto! Agora se você quer algumas dicas de como usar isso de uma forma eficiente no seu dia a dia de desenvolvimento, continua comigo... Imagina que você está passando seu protótipo para o código, e quer reaproveitar os textos que já criou, normalmente você iria ter que copiar e colocar enquanto altera entre janelas (ou telas) várias vezes até terminar tudo, certo? Com essa funcionalidade, você pode copiar um por um, e em seguida voltar ao código e colar tudo em seu devido lugar, sem a necessidade desse vai e volta, legal né? Você trabalha com muitos links, tendo que copiá-los e colá-los o tempo inteiro? Com a área de transferência, você pode fixar alguns conteúdos, facilitando muito o acesso em momentos que você precisar, principalmente se você costuma enviá-los para outras pessoas com frequência, por exemplo, o link do seu site para seus clientes. Outro exemplo bem comum... Alguma vez você já copiou algum trecho de código, e por engano copiou outra coisa por cima e perdeu o trecho antigo? Com o histórico, você não terá mais esse problema, basta encontrar o trecho, e pronto! Inclusive, você poderá resgatar alguns trechos de código que nem sabia que ia precisar no momento em que copiou, mas que acabaram te salvando um bom tempo. E por último, um bom uso para quem trabalha com imagens, você pode acessar as imagens que copiou do navegador, e os prints que tirou, desde que tenham até 4mb, e estou usando essa funcionalidade agora mesmo, para colar os prints que tirei para utilizar como exemplo, interessante né? Chega de exemplos, agora vamos pontuar alguns detalhes e limitações: A área de transferência armazena até 25 itens, a partir disso, os últimos são substituídos pelos primeiros; Você pode fixar e apagar qualquer item, e também pode limpar todo o histórico; Ao atingir o limite, ou limpando todo o histórico, os itens fixados não são excluídos; Pode-se copiar conteúdos de até 4mb; É possível armazenar imagens e prints; Ao desligar ou reiniciar o computador, itens não fixados são perdidos; É possível transferir itens entre dispositivos conectados com a mesma conta Microsoft. Bom, já falei bastante, agora tá na hora de você correr e pôr em prática tudo o que aprendeu, além disso, me conta se você já conhecia e usava essa funcionalidade, ou se você tem algum outro exemplo de uso bacana. E não esquece de mandar para seus amigos ou seus colegas de trabalho, para que eles também possam aproveitar essa funcionalidade. Valeuuu e até a próxima!

Introdução Eai pessoal, tudo certo com vocês? Já se depararam com aquele probleminha chato onde o seu header fixado fica sobrepondo o conteúdo do seus artigos, no momento em que você clica em algum item do sumário? Se a resposta foi sim, neste artigo mostrarei a vocês uma solução que funcionou muito bem no meu caso, e que era bem mais simples do que eu imaginava. E para quem nunca viu isso, acompanhe mesmo assim, te garanto que vai ser útil um dia! Esta solução envolve apenas CSS, e utiliza poucas linhas de código, não sendo necessário criar nenhuma classe, ou seja, não será necessário alterar cada âncora do seu site, funcionará para todas sem modificá-las. Bom, para exemplificar melhor esse problema, dê uma olhada nessa imagem do meu sumário: Ao clicar neste item grifado, é isso que acontece: Diminuí a opacidade do header para podermos enxergar através dele, e como vocês podem ver, o título do item clicado está totalmente escondido atrás do header. Solução A solução foi criar um pseudo-elemento com ::before, para funcionar como espaçador entre o topo da página e o conteúdo, onde o atributo height recebe o valor da altura do espaçamento, e o atributo margin recebe também este valor, porém negativo, para que o elemento fique posicionado sobre o elemento target. :target::before { content: ""; /* Constrói um elemento "invisível" */ display: block; height: 100px; /* Altura do espaçador */ margin: -100px 0 0; /* Margin top do espaçador */ } O elemento :target é o elemento alvo para o qual a âncora aponta, e ao clicar nela, esse pseudo-elemento será criado sobre esse alvo. Bom, agora vamos ver o resultado disso? Nesse exemplo é possível ver que foi criado um elemento ::before sobre a tag strong, que é justamente o nosso pseudo-elemento de espaçamento, e a tag strong é o nosso elemento target. Também é possível observar que este pseudo-elemento está maior que o header, porém essa foi apenas uma escolha de design, vocês podem usar o valor que desejarem, mas recomendo que seja igual, ou um pouco maior que a altura do seu header, neste exemplo meu header tem 85px, e o pseudo-elemento tem 100px, para que o conteúdo não ficasse tão “colado”. Ao final então, com o console desativado, teremos o seguinte resultado: Muito melhor, não? Detalhes importantes Se você ficou pensando “nossa, mas criando tantos elementos assim para cada âncora, não irá prejudicar o desempenho?”. A resposta é não, pois o pseudo-elemento só é criado após clicar em uma âncora, e caso clique em outras na sequência, o único target que permanecerá com o espaçamento é o alvo da última âncora clicada. Outra dúvida que pode ter passado pela sua cabeça é “mas se está sendo criado um novo elemento em cima do target, os links que estiverem nessa área não serão mais clicáveis?”. Os links e qualquer outro conteúdo que estiverem na área do pseudo-elemento continuarão tendo suas interações, pois se trata de um elemento invisível, o que fica claro ao observar o atributo content, onde é passado o valor de uma string vazia. Considerações finais Esta solução foi encontrada no tópico Fixed page header overlaps in-page anchors do Stack Overflow, e outras informações sobre pseudo-elementos foram encontradas na documentação do ::before no site MDN Web Docs - Mozilla. Lembrando que essa solução pode não funcionar em 100% dos casos, como podemos ver nos comentários do tópico original, então caso não tenha funcionado para você, ou caso você conheça outra solução, conta aí para a gente, vamos adorar trocar ideia! Mas por hoje é só pessoal, obrigado a todos e bom código para vocês, até a próxima!!