Skip to main content

Testing Open Graph while developing, the sane workflow

· 4 min read
Pere Pages
Software Engineer

Testing Open Graph locally is a bit deceptive: your browser can see localhost, but Facebook, LinkedIn, Slack, Discord, X/Twitter, etc. cannot.

The best workflow is:

1. Check the HTML locally
2. Expose localhost with ngrok
3. Test the public URL in real social preview/debugger tools

Chrome plugins are useful for fast feedback, but the final validation should happen through a public HTTPS URL.

Open Graph Logo

https://ogp.me/

Creating Personal CLI Tools Without Global Node, npm, pnpm, or TypeScript

· 3 min read
Pere Pages
Software Engineer

I wanted a tiny CLI tool for a very specific workflow: take an image and expand its canvas to 1200x630, centered, without resizing the image itself. Useful for Open Graph images.

But the interesting part was not the image logic. The interesting part was this constraint:

I do not want global Node, npm, pnpm, TypeScript, or tsx.

That changes the setup.

A terminal running a personal CLI tool

pnpm: the package manager that said "why are we copying lodash 500 times?"

· 8 min read
Pere Pages
Software Engineer

pnpm is a JavaScript package manager, like npm and Yarn, but with a very opinionated design: fast installs, less disk usage, stricter dependency resolution, and strong monorepo support. Its name originally stands for “performant npm”. It reached v1 in 2017, after earlier work starting in 2016, and it was heavily inspired by ideas from ied, another experimental package manager. (Medium)

pnpm logo

Violating Single Responsibility Principle (SRP)

· 3 min read
Pere Pages
Software Engineer

This is the first of a series of posts about the most common mistakes in Frontend development. This is the most common mistake I see in React projects.

This post explains what the Single Responsibility Principle (SRP) is and why it's important for React components. It shows how putting too much code and too many tasks in one component can lead to messy, hard-to-maintain apps.

Inside the Cookie Jar, How Chrome Actually Handles Cookies (and Why It Matters for Developers)

· 9 min read
Pere Pages
Software Engineer

Cookies are tiny key–value blobs with rules. Chrome enforces those rules rigorously: where the cookie applies (domain/path), when it’s sent (request matching + SameSite), how it’s protected (Secure/HttpOnly), and how long it survives (expiry/eviction). This post walks through the full lifecycle, browser behavior, sharp edges, and production patterns—with TypeScript examples.

  • Use server-set, Secure; HttpOnly; SameSite=Lax cookies for auth.
  • Scope deliberately with domain and path; avoid accidental overlaps.
  • Understand SameSite (and partitioning) for cross-site flows.
  • Keep cookies small, few, and purposeful.