Forem: Ruan Aragão

Idealização e escolha de tecnologias

Ruan Aragão — Mon, 19 Jan 2026 12:25:10 +0000

Introdução

Essa série será dividida em diversas postagens curtas, pois se eu for fazer postagens grandes, simplesmente não vou concluir.

Irei (tentar) abordar aqui os detalhes da criação do projeto Blog do Caju e os motivos das principais tomadas de decisão.

Escolha das tecnologias

Sabemos que hoje temos um oceano de opções para criar projetos, principalmente blogs. Então, para tomar a melhor decisão, precisamos saber onde queremos chegar, qual a principal finalidade do blog. Com isso, quero dizer: qual será o produto final de aproveitamento dele.

Qual o "ouro" desse blog?

Estou desenvolvendo outro projeto chamado Caju Ofertas, um HUB de empresas locais focadas em segmentação, um dos principais topo de funil que estou preocupado é o engajamento orgânico e indexação pelos motores de busca, então um blog recheado de informações buscadas diariamente pelo meu público é uma excelente porta de entrada, esse é um terreno que precisava ir preparando desde já.

O "ouro", ou seja, o produto de valor resultante do processo.

Precisamos entender nosso público, saber como ele age, de onde vem, porque vem, o que querem.

Requisitos

~~Não temos dinheiro!~~ Budget reduzido para o projeto.
Requisito 1
Requisito 2
SEO próximo da perfeição
Identidade visual do projeto
Acessibilidade

Foi isso, ou mais ou menos o que lembro.

Então, não sei se falei (risos), mas não temos dinheiro, então deveria ser algo com custo zero (ou quase).

A opção que quase segui foi o Google Blogger, em um primeiro olhar seria o mais barato, nele poderíamos adicionar domínio personalizado sem ter que pagar por isso, teoricamente teria um SEO ótimo, é do Google hahaha.

Trazendo para a realidade, seria um barato que se tornaria muito caro para o projeto a curto prazo. Logo no início tive muito problema com a personalização, aí que fui fazer um levantamento mais detalhado do projeto e dar o valor adequado para ele.

Um passo atrás para dar três à frente

Mantive algumas tecnologias que estou usando na stack do Caju Ofertas.

Next.js para criação do blog, com ele conseguiria um desenvolvimento ágil e teria os recursos de SSR.
Para armazenas as postagens a escolha foi arquivos MDX dentro do próprio projeto.
Hospedagem fica com a Vercel, pois o ambiente é perfeito para isso e o custo zero*.

Para publicar um projeto sem custos na Vercel o repositório deve ser público, inicialmente isso foi um problema e fui avaliar novamente as opções, uma delas seria abrir o projeto, aí lembrei de que isso faz parte da minha vida e agora mais uma vez poderia manter um projeto de código aberto em um produto real 😍🥰. O que era um problema se tornou uma solução e motivação!

Finalizo por aqui esta postagem, meus pomodoros para ela acabaram (e bem no momento que imaginei). Até a próxima!

Ctrl+C/Ctrl+V não funciona – Ubuntu no VirtualBox

Ruan Aragão — Sun, 28 Dec 2025 06:38:17 +0000

Instalei Ubuntu no VirtualBox, já habilitei área de transferência e DnD nas configurações, mas mesmo assim não funciona. :/

Isso é bem comum no VirtualBox
Habilitar Área de Transferência e Arrastar e Soltar nas configurações não funciona sozinho.

Causa principal

Os recursos de clipboard e Drag & Drop só funcionam quando o Guest Additions está corretamente instalado dentro do Ubuntu.

Vamos tentar corrigir isso passo a passo

1. Verifique as configurações da VM

Com a VM desligada:
Configurações → Geral → Avançado

Área de Transferência: Bidirecional
Arrastar e Soltar: Bidirecional

Ligue a VM depois disso.

2. Instalar dependências no Ubuntu

No Ubuntu, abra o terminal e execute os comandos:

sudo apt update
sudo apt install -y build-essential dkms linux-headers-$(uname -r)

3. Inserir o Guest Additions

No menu do VirtualBox (com a VM ligada):

Dispositivos → Inserir imagem de CD dos Adicionais para Convidado

Se pedir para baixar, aceite.

4. Montar e instalar

Normalmente o Ubuntu monta automaticamente.
Se não aparecer nada, rode:

sudo mkdir -p /media/cdrom
sudo mount /dev/cdrom /media/cdrom

Agora instale:

cd /media/*/VBox_GAs*
sudo ./VBoxLinuxAdditions.run

⚠️ Se aparecer aviso sobre Wayland, pode ignorar por enquanto.

5. Reinicie o Ubuntu

sudo reboot

Teste

Depois do reboot:

Copie um texto no Windows
Cole no Ubuntu
Teste arrastar um arquivo pequeno

Se funcionar, show de bola, resolvido.

Deu ruim, NÃO funcionou?

O Ubuntu recente usa Wayland, e o VirtualBox tem limitações com clipboard/DnD nele.

Confirme se os módulos estão carregados:

lsmod | grep vbox

Deve aparecer algo como:

vboxguest
vboxsf
vboxvideo

Para compartilhar arquivos sem DnD (muito útil):

Configurações → Pastas Compartilhadas
Marque:
- ✅ Automontar
- ✅ Tornar permanente

No Ubuntu, o caminho será:

/media/sf_nome_da_pasta

⚠️ Aparece um alerta de permissão ao tentar entrar na pasta?

Você pode precisar adicionar seu usuário ao grupo vboxusers com o comando:

sudo usermod -aG vboxusers $USER

Caso retorne um erro informando que o grupo não existe, você precisará criar o grupo:

sudo groupadd vboxusers

Após isso, tente adicionar novamente. Agora deverá funcionar normalmente.

Caso tenha problemas, não hesite em comentar. Caso não tenha, comente também. <3

Create your own calculator

Ruan Aragão — Tue, 31 Oct 2023 02:41:54 +0000

Intro

For some years now, participating as a supporter during Hacktoberfest editions, small projects are always offered to the beginner public, so that they can make a valid contribution and learn more about how to contribute in the correct way.

RuanAragao (Ruan Aragão) · GitHub

Vamos nos desesperar com calma. RuanAragao has 239 repositories available. Follow their code on GitHub.

github.com

Project

The project I focused on in this edition was a calculator, yes, but I'll explain it better below.

The proposal is for users to create their own calculators. The project has an index.html which has a title and links to each calculator. There is also a directory called calculators.

RuanAragao / calculator

Create your own calculator

Calculator

Create your own calculator

How

⚠️ Firstly, be willing to learn and/or teach. This project is not a PR farm for hacktoberfest.

Star ✨ this project 👀🫶
Go to issues and create a new. Add the name of your calculator in title and comment a short purpose of your calculator.

Example:

title:

Screw calculator

comment:

convert weight to units

Fork this project
Create a folder in [root]/calculators with the name of your calculator using the Kebab case convention.

Example:

mkdir example-calculator > [root]/calculators/example-calculator

Inside your folder calculator is required index.html file with your calculator.
Edit the /index.html file and add the your calculator folder link in alphabetical order with a <br> in the end.

Example:

<a href="/calculators/example-calculator">Example Calculator</a><br/>
Open your pull request with "Closes #{your-issue-number}". Example "Closes #10".

Contributing

Steps to contribute:

Fork the repository by clicking the "Fork" button in the upper right corner of this page.
Clone…

View on GitHub

The contributor creates an issue explaining the function of his calculator (his proposal), he must create his calculator following some basic rules: it will be created within the /calculators directory and within its own directory; there should be at least one file called index.html; add the relative link of the calculator to the list of links in the main index.html.

calculator
├── calculators
│   └── my-awesome-calculator
│       ├── index.html
│       ├── style.css (optional)
│       └── script.js (optional)
└── index.html

File and directory names should follow the Kebab Case convention.

Highs and Lows

The challenge of managing people, especially when there are prizes involved. This edition I noticed something new, the generation of code through AI, not just snippets of code, but the entire code, and often the participants had no idea how the code that was generated worked.

I expected this, but it is still something that causes a certain sadness in us, especially when the person is not worried about learning, about receiving feedback, but just wants to push any PR up to the repository and repeatedly asks us to accept the PR.

But overall it was really cool, many were there genuinely contributing.

Growth

Without a doubt, it was really cool to participate again this time and get the community moving a little, especially allowing some people to contribute for the first time in their lives. I am finishing this edition with more experience in managing projects involving people of multiple nationalities and levels of knowledge.

Pledge movement (hacktoberfest #10)

Ruan Aragão — Tue, 03 Oct 2023 13:17:40 +0000

[pt-BR 🇧🇷]
Um evento sempre muito esperado por mim e que sempre participei ativamente, seja de forma online, seja offline. Inclusive acredito que minhas maiores contribuições ao longo desses anos foi de forma offline, encabeçando um evento presencial na edição de 2019 na cidade de Teresina - Piauí - Brasil

Infelizmente ano passado não consegui ser ativo, mas nessa edição estou procurando movimentar um pouco por meio de meus repositórios, ou procurando projetos pequenos para participar (deixe o seu nos comentários).

A DEV community foi uma comunidade que achei magnifica desde o principio. Não lembro como descobri ela, acredito eu que foi por meio do seu repositório aberto, mas depois de entrar meus olhos brilharam. Infelizmente eu já não estava mais em minha época de ouro como escritor de conteúdo de tecnologia, então durante esses anos fui mais consumidor e não gerei nada de conteúdo. Espero mudar isso, espero, e irei me mexer para isso.

Meu compromisso será o de reforçar e reanimar meu eterno compromisso, o compromisso do movimento! O ciclo de APRENDER - COMPARTILHAR sempre me motivou e isso não pode parar.

E você, já contribui para a comunidade? Se sim, deixa aí algo interessante nos comentário, vou adorar conhecer. Se você não contribui e tem vontade fala aí também, estou aqui para ajudar nesse primeiro passo.

HACK - LEARN - FIX - TEACH
(QUEBRE - APRENDA - CONSERTE - ENSINE)

[en-US 🇺🇸]
An event that has always been highly anticipated by me and that I have always actively participated in, whether online or offline. I even believe that my biggest contributions over the years were offline, leading an in-person event in the 2019 edition in the city of Teresina - Piauí - Brazil

Unfortunately last year I wasn't able to be active, but in this edition I'm looking to move around a little through my repositories, or looking for small projects to participate in (leave yours in the comments).

The DEV community was a community that I found magnificent from the beginning. I don't remember how I discovered it, I believe it was through its open repository, but after entering my eyes lit up. Unfortunately, I was no longer in my golden age as a technology content writer, so during those years I was more of a consumer and didn't generate any content. I hope to change that, I hope, and I will move towards it.

My commitment will be to reinforce and revive my eternal commitment, the commitment of the movement! The LEARN - SHARE cycle has always motivated me and that can't stop.

And you, do you already contribute to the community? If so, leave something interesting in the comments, I'd love to know. If you don't contribute and want to, say so too, I'm here to help with this first step.

HACK - LEARN - FIX - TEACH

Converter texto (string) para número em JavaScript e suas diferenças

Ruan Aragão — Sat, 04 Mar 2023 03:47:38 +0000

Pode parecer até trivial esse tipo de procedimento, mas para quem estar iniciando é bom saber as formas e suas particularidades de realizar uma conversão, evitando assim problemas futuros nos resultados esperados.

Number()

Essa é uma função global de conversão para números.

// Using the Number() function to convert a string to a number
var str1 = "42";
var num1 = Number(str1);  // num1 será 42

Importante ressaltar que ela converte apenas strings que contenham valores numéricos, caso a string contenha valores não numéricos, a função retornará NaN (not a number).

Por exemplo:

var str2 = "hello";
var num2 = Number(str2);  // num2 será NaN

Outro detalhe importante é que valores booleanos e vazios serão convertidos também.

var str3 = "";
var num3 = Number(str3);
// Valor retornado: 0

Operador unário de adição (+)

A forma mais simples, que conheço, para converter uma string em um inteiro é adicionando o operador unário de adição (+) antes da string (ou variável contendo a string).

console.log(+'2');
// Valor retornado: 2

const myNumber = '2';
console.log(+myNumber);
// Valor retornado: 2

O operador de subtração também consegue realizar casting
Mas atenção!
O operador unário

parseInt() e parseFloat()

O parserInt() é a forma mais comumente usada, recebendo uma string e retornando um inteiro, e o parserFloat() recendo uma string e retornando um número de ponto flutuante.

// Usando parseInt(string, base) para converter uma string para um integer
var str5 = "42";
var num5 = parseInt(str5, 10);  // num5 será 42

// Usando parseFloat(string) para converter uma string para um número de ponto flutuante
var str6 = "3.14159";
var num6 = parseFloat(str6);  // num6 será 3.14159

Como viram, no parseInt(string, base) pode ser fornecido a base de conversão, um inteiro entre 2 e 36. Passei 10, pois queria a base decimal, o que não é obrigatório uma vez que a base 10 é assumida quando não se especifica, mas é sempre recomendado passar a base para ser o mais explícito possível sobre o que está ocorrendo.

Dependendo da sua necessidade, essa forma de conversão tem uma certa diferença: ao passar uma string vazia e valores booleanos o retorno será NaN. Se tiver dúvidas em qual usar, essa é a melhor escolha para você.

Também é possível converter strings que comecem com números e tenham caracteres na sequência, por exemplo:

parseInt('1984book');  // o retorno será 1984

FATAL Cannot destructure property 'nuxt' of 'this' as it is undefined.

Ruan Aragão — Fri, 03 Mar 2023 10:01:35 +0000

$ nuxt
ℹ Using default Tailwind CSS file from runtime/tailwind.css                                                           nuxt:tailwindcss 06:42:07

 FATAL  Cannot destructure property 'nuxt' of 'this' as it is undefined.                                                               06:42:07

  at postcss8Module (node_modules/@nuxt/postcss8/dist/index.js:15:10)
  at installModule (node_modules/@nuxt/kit/dist/index.mjs:435:21)
  at async setup (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:186:7)
  at async ModuleContainer.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:167:5)
  at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:167:20)
  at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:34:7)
  at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:342:5)


   ╭─────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                 │
   │   ✖ Nuxt Fatal Error                                                            │
   │                                                                                 │
   │   TypeError: Cannot destructure property 'nuxt' of 'this' as it is undefined.   │
   │                                                                                 │
   ╰─────────────────────────────────────────────────────────────────────────────────╯

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

do...

Add in your package.json:

  "resolutions": {
    "@nuxt/kit": "3.0.0-rc.13"
  }

and run:
$ yarn

Font: https://github.com/nuxt-modules/tailwindcss/issues/598

Animated Car On The Road - Pure SVG (Follow path)

Ruan Aragão — Thu, 11 Nov 2021 04:55:14 +0000