DEV Community: Dominique Morem

Descobrindo a fonte utilizada em um site e aplicando ela ao seu projeto Tailwind 4.0/Rails

Dominique Morem — Mon, 18 Aug 2025 20:33:14 +0000

Supondo que um belo dia você esteja navegando em sites por aí e, do nada, goste de uma fonte que está em um deles e deseje colocá-la também no seu site.

Seria um processo não muito dificultoso, o backender - sem saco para lidar com front - pergunta a IA, ela responde e todo mundo sai feliz. Só que o Tailwind passou por uma atualização de versão e agora, da versão 4.0 para frente, acabou, exterminou, extinguiu o tailwind.config.js (se quiser se aprofundar mais na questão digite 'CSS-first configuration' dentro desse link que eu passei).

Isso tem dado um nó na cabeça de muita gente. Especialmente porque muitas IAs foram 'alimentadas' com versões mais antigas do Tailwind, ou seja, as respostas que elas derem conterão alguma configuração no finado tailwind.config.js.

Mas não vamos arrancar os nossos cabelos, ok? As configurações que antes eram feitas no tailwind.config agora devem ser feitas diretamente no arquivo CSS. Em projetos Rails o arquivo fica bem aqui:

app > assets > tailwind > application.css

Dito isso, vamos começar do zero com o passo-a-passo da operação que eu me propus a realizar no título.

Descobrindo a fonte

Inventei de navegar por esse site aqui e achei a fonte linda. Como vou encontrá-la?

Aperte a tecla *F12 no seu teclado, ou clique com o botão direito do mouse em qualquer lugar do site e selecione a opção 'inspecionar'.
No DevTools vá no botão para inspecionar:

Ao inspecionar a fonte no site há duas formas de descobrir:

3.1 Ou passando o cursor por cima da fonte a aguardando a janela de inspeção da tag HTML abrir e informar qual é a fonte.

3.2 Ou clicando em cima do elemento e, no DevTools, indo a seção 'Styles' e procurando a font-family por lá.

Adquirindo os arquivos no Google Fonts

Agora que já sabemos qual é o nome da fonte empregada no site, vamos ao Google Fonts descolá-la para o nosso. No Google Fonts procure pelo nome da sua fonte.

Selecione o tamanho máximo que deseja e se deseja versão em itálico para a fonte ou não. Decidido isso clicamos em Get Font:

Depois vamos em Get embed code:

Selecione a opção link e depois clique em Copy code:

Aplicando a fonte ao seu projeto Rails

1 - Modificações no application.html.erb

Para aplicara a fonte no projeto Rails vamos até o arquivo application.html.erb que fica bem aqui:

app > views > layouts > application.html.erb

E nele, logo abaixo das metatags que ficam dentro da tag

vamos inserir as tags da fonte que copiamos:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">

Para além disso, vamos até o do nosso arquivo - aqui mesmo no application.html.erb - e vamos atribuir a ele a seguinte classe:

class="font-sans"

Vai ficar assim:

2 - Modificação no application.css

Agora vamos ao anteriormente falado application.css percorrendo o caminho:

app > assets > tailwind > application.css

Neste arquivo você vai configurar o tema e dentro do tema a fonte geral do teu site:

 @theme {
  --font-sans: "Jost", sans-serif;
}

Troque o "Jost" e o "sans-serif" pelo que estiver bem aqui nos arquivos da sua fonte lá no Google Fonts:

Agora que já fizemos as modificações, vamos restartar o servidor e recarragar os estilos colocando um bin/dev no terminal...

Antes e Depois

Antes:

Originalmente, eu estava utilizando essa fonte aqui no meu projeto Rails:

Depois:

Comparativo com o site originalda fonte

Login e Logout no Rails 8 para apressadinhos

Dominique Morem — Tue, 12 Aug 2025 20:31:52 +0000

Criando o login

Dê um:

rails g authentication

Você vai ver algo assim no seu terminal:

Depois disso, confira se a gem bcrypt está descomentada. Caso não esteja, descomente e salve a alteração. Precisaremos dela para a encriptação de senhas.

Migrando atualizando o BD com as novas tabelas geradas

Veja que ao dar o comando do generate de autenticação (para criar o login) o Rails realizou - entre outras ações - a criação de três models: current, user e session.

Logo, precisamos atualizar o nosso banco de dados para passar a ter essas respectivas tabelas.

Para isso vamos dar um...

rails db:migrate

... para efetivar essas mudanças no banco de dados.

Logando na Aplicação

Há duas formas de você logar na aplicação:

Pode ser utilizando os emails que constam pré-configurados na pasta fixtures (como mostra Typecraft em seu vídeo).
Pode ser você criando no banco de dados o seu próprio registro de usuário. Você pode criar o usuário que você quiser por lá.

1 - Logando com e-mails pré-configurados

Para acessá-los vamos em:

test > fixtures > files > users.yml

Agora vamos ajeitar as senhas (as senhas vêm por padrão como 'password') mas para poder utilizá-las é preciso dar um comando antes...

Vamos dar um:

rails db:fixtures:load

Rápida explicação sobre rails db:fixtures:load - Início

Esse comando serve para carregar os dados definidos nos arquivos de
fixtures(geralmente .yml - como o users.yml por exemplo -
dentro de test/fixtures/) para o banco de dados.

Ou seja, o Rails vai ler os arquivos YAML de fixtures, por exemplo
test/fixtures/users.yml e vai inserir os dados definidos nesses
arquivos nas respectivas tabelas do banco.

Rápida explicação sobre rails db:fixtures:load - Final

Selecione um dos emails presentes no arquivo users.yml
(test > fixtures > files) para colocar no campo de email do login.

E, como senha, utilize a palavra: password

Bingo! Ele vai entrar!

2 - Logando na aplicação com o seu e-mail

Para logar com o seu email ou com qualquer outro exemplo de email que te der na telha, faça o seguinte:

No terminal, dê um:

rails c

Para acessar o console do Rails.

Uma vez neste, digite:

User.new

para visualizar os nomes dos campos...

Perfeito! Desses campos o único que você vai copiar na íntegra é o email_address:.

Isso porque o id, o created_at: e o updated_at: são preenchidos automaticamente pelo Rails quando você cria o registro.

A questão do password_digest

NÃO PASSE O COMANDO DE CRIAÇÃO DO REGISTRO COM password_digest DIRETAMENTE (!!!) - Vá por mim, eu fiquei quebrando cabeça um tempão porque cometi esse erro e não sabia porque não estava dando certo!

Ao tentar criar um registo como:

User.create!(email: "teste@email.com", password_digest: "123456")

Isso não criptografará nada. Você estará gravando "123456" puro na coluna, o que significa dizer que a senha real estará exposta no banco (o que se trata de um gravíssimo risco de segurança). E, o método authenticate não vai funcionar, porque ele espera um hash BCrypt, não o texto plano. Basicamente, você quebrará o fluxo do Rails Auth.

Dê preferência por preencher o campo de senha apenas com password:

Quando você passa password: "123456" o has_secure_password intercepta o setter password= e usa a gem BCrypt para criar um hash seguro dessa senha. Com isso ele vai gravar esse hash no campo password_digest antes de salvar.

Ps: não precisa utilizar password_confirmation se não quiser validação de confirmação.

Por fim, depois dessa digressão toda, a criação do usuário no BD vai ficar estruturada assim:

User.create!(email_address: "tim.maia@hotmail.com", password: "descobridor_dos_sete_mares")

Obs: A exclamação (!) no final do create é para ele gerar uma mensagem de erro caso a inserção do registro no BD dê too much wrong.

Plim! Registro bem sucedido!

Vamos testar para ver se funcionou mesmo:

Foi, deu certo!

Saindo da aplicação - Fazendo Logout

Para deslogar da aplicação você pode inserir no seu menu principal da aplicação - ou em algum lugar da homepage - o seguinte botão (que Exequiel Rozas criou), que já vem pré-configurado:

<% if Current.user.present? %>
  <%= button_to "Sign out", session_path, method: :delete, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-black underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
<% else %>
  <%= link_to "Sign in", new_session_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
<% end %>

Vai ficar mais ou menos assim:

Digo 'mais ou menos' assim porque eu mudei o tailwind original dos botões para ficarem vermelho e verde:

<% if Current.user.present? %>
    <%= button_to "Sign out", session_path, method: :delete, class: "focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900" %>
<% else %>
    <%= link_to "Sign in", new_session_path, class: "focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800" %>
<% end %>

Falta agora configurar para que você só veja as suas postagens e ous outros só vejam as postagens ou publicações deles. Mas isso é tema para um outro post...

Agradecimentos:

Se pude criar este minitutorial devo isso a 3 pessoas me passaram um pouco do seu conhecimento:

Professor Anchieta (meu professor de Programação Avançada)
Typecraft do Canal Ruby on Rails
E Exequiel Rozas

Identificador Único Universal (UUID): o que a pgcrypto e a sua mãe têm em comum...

Dominique Morem — Sat, 26 Jul 2025 02:40:53 +0000

Sim eu sei, a comparação entre a sua mãe e uma extensão do PostgreSQL pode soar um tanto quanto estranha e bizarra, mas sim... ela é possivel!

Vou traçar um paralelo entre o que a pgcrypto*1 proporciona e o que a sua mãe proporciona e você vai entender a comparação! Para tal, vou me munir de todo o arsenal argumentativo que o Davide Santangelo traz sobre as vantagens e desvantagens do uso de UUIDs em sua fabulosa postagem...

Mas espera aí, o que que é pgcrypto e porque você está falando de UUIDs? Está tudo meio solto, não estou entendendo...

Vamos contextualizar: a pgcrypto é uma extensão do PostgreSQL que te permite criptografar, descriptografar, gerar hashes e criar assinaturas digitais dentro do seu banco de dados (fonte: TigerData). Mais do que isso, é ela quem te permite trabalhar com UUIDs na sua aplicação Rails (vide a documentação - Dá para usar a extensão uuid-ossp também, mas atualmente não é lá muito recomendável*3). Essa extensão, como a sua, a minha, as nossas mães pode nos trazer algo, uma ferramenta poderosa para nos dar paz de espírito em alguns momentos. Está curioso para saber? Vem comigo que eu te mostro, mas antes de partirmos lembre-se "A pgcrypto te possibilita gerar UUIDs", guarde isso! Vamos às semelhanças:

1 - Nada de vida fácil aos predadores!

Assim como muitas mamães escondem os seus filhotinhos de predadores no reino animal, a pgcrypto também esconde o que lhe é caro (os IDs)! Ela vai encriptografar os IDs das suas tabelas, conferindo aleatoriedade e imprevisibilidade a eles. Como uma mãe protetora, ela mascara os IDs da sua aplicação, tornando os identificadores mais dificeis de ler e manusear*1

2 - Te impede de entrar em conflitos!

Quem nunca ouviu um "Se brigar na escola, vai apanhar 2 vezes. Uma na rua e a outra quando chegar em casa..."? A saudosa Rochelle, mãe do Chris - de 'Todo mundo odeia o Chris' - é um clássico exemplo disso! Bordões à parte, Santangelo explica que os UUIDs são gerados para serem globalmente únicos, ou seja, eles promovem uma maior garantia de que registros de diferentes bancos de dados - ou sistemas distribuídos - nunca entrem em conflito.

3 - Se tem, o que tem, quanto tem e onde tem... não interessa! Ou pelo menos não a quem vem de fora.

Vanessa da Mata, Leandra Leal, Adele e Sandy são alguns exemplos de mães que optaram por preservar a privacidade, o sigilo e o anonimato de seus filhos, muitas vezes por uma questão óbvia de segurança. Não é incomum que celebridades que sejam mães e pais mantenham seus filhos fora dos holofotes, o recente caso do ataque à filha de Roberto Justus nas redes ilustra bem isso.

Manter a privacidade de quanto tem, o que tem e onde tem pode te poupar de uma série de problemas e essas pessoas famosas - mães ou não - sabem disso. Pois bem, o mesmo princípio das mães discretas também se aplica ao uso do UUID em projetos. Isso fica claro da fala de Eliaseas, em um debate num tópico do TabNews, quando o desenvolvedor revela que o UUID cria:

[...] segurança por obscuridade. Você pode não querer dar visibilidade ao usuário sobre a quantidade de pedidos que tem no seu sistema. Então ao invés de usar um id de pedido sequencial, você randomiza usando um UUID.

Mas nem tudo são flores!

1 - Coração de mãe é grande, sempre cabe mais um!

Pois é, enquanto que na vida real a frase tem uma conotação positiva e acolhedora, aqui na analogia que eu tracei ela não é tão 'simpática' assim. Isso porque, em comparação aos inteiros autoincrementais o UUID possui um tamanho de armazenamento aumentado, o que consome mais do banco de dados. UUIDs possuem 128 bits, enquanto que os Inteiros possuem apenas 32 bits.

2 - "Onde estás, meu senhor. Onde estás? Onde estás?" (Diáspora - Tribalistas)

O trecho acima é de uma música dos Tribalistas que ilustra bem os desafios de quem emigra de um lugar para o outro. Quase sempre o processo de migração - quer seja para as casas de nossos pais ou não - é trabalhoso, muito trabalhoso e, às vezes, demorado, burocrático e pode deixar a gente meio perdido (como no trecho da canção).

É necessário passar por uma série de adequações, mudanças e processos nessa migração de uma casa para a outra. De um lugar para o outro. Tanto quanto demostrado na música acima, migrar as chaves primarias e estrangeiras de um banco de dados de inteiros para UUID pode ser um processo um tanto quanto burocrático, trabalhoso e delicado. A migração de dados, caso você esteja em uma aplicação já existente e queira realizar o processo de mudança, apesar de trabalhosa é possivel.

"Está bagunçado, mas tem gerência!"

Para finalizar a postagem, trago esse bordão da mãe de uma amiga minha. Ela sabia brincar quando era para brincar, mas sabia passar muita informação séria e educativa também. Como ela, eu quis trazer aqui algo que tivesse essa pegada, leve e informativa (e se eu não consegui trazer, ao seu ver, peço perdão!). Apesar da postagem possuir um fundo humorístico, o intuito era mesclar algumas infomações técnicas também.

Caso tenha se interessado pela temática dos Identificadores Únicos Universais trabalhados com o PostgresSQl e com o Ruby on Rails. Deixo aqui duas referências, que eu pude acompanhar e que são ótimas:

Se você quiser saber como utilizar UUID no Rails 7 com PostgreSQL: https://dev.to/xandekk/usando-uuid-no-rails-7-com-postgresql-223o. O texto é bem objetivo, claro e didático.
Caso queira ver na prática ali na tela, no ao vivo, como se faz esse processo de implantação e o porque fazê-lo. Sugiro o curso 'Ruby on Rails 7.x para Iniciantes' do Professor Jackson Pires: https://videosdeti.com.br/. Em uma de suas aulas ele ensina a como configurar a aplicação para aplicar o UUID aos ID das tabelas.

Sobre os asteríscos no texto (são aprofundamentos)...

1 - Aprofundando - Universally unique identifier ou Identificador Único Universal traduzindo para o português. É um identificador universalmente exclusivo, que consiste em um número de 128 bits representado por 32 dígitos hexadecimais, que são exibidos em cinco grupos e que são separados por hifens segundo Paixão (2018)
2 - Aprofundando - Davide fala que uso de UUIDs pode melhorar a segurança da sua aplicação, pos dificulta que agentes maliciosos prevejam ou adivinhem valores das chaves primárias. E para além disso, os UUIDs não expõem informações sobre a sequência ou estrutura de outros identificadores.
3 - Aprofundando: - Observação, você pode utilizar a extensão uuid-ossp do PostgreSQL, também presente na documentação do Rails, mas ela só é indicada caso você esteja trabalhando com uma versão abaixo da 9.4 do Postgres, depois dessa versão ela foi substituída pela pgcrypto. A própria documentação do Rails também faz essa recomendação. Caso deseje um comparativo mais objetivo sobre as duas extensões e porquê utilizar cada uma ou não, segue uma tabelinha que eu pedi pro Chat GPT gerar... ps: lembre-se de que IAs podem alucinar, portanto, nem tudo que está ali pode ser fato.