DEV Community: alyson farias

How We Added IP-Based Language Detection in 5 Minutes

alyson farias — Sun, 11 Jan 2026 13:27:44 +0000

How We Added IP-Based Language Detection in 3 Minutes

The Challenge

You want your Next.js app to automatically detect the user's language based on their location. Sounds complex, right? You might think you need:

Third-party IP geolocation APIs
Complex database lookups
Expensive geolocation services
Additional API calls on every page load

The Reality: It's Actually Super Simple

Modern hosting platforms like Vercel and Cloudflare already detect the user's country for every request. They include this information in request headers—completely free, with zero additional API calls!

The Solution: 3 Simple Steps

Step 1: Create a Country-to-Language Mapper (2 minutes)

// src/lib/i18n/country-to-language.ts
export function getLanguageFromCountry(countryCode: string): Language {
  // Map common countries to languages
  if (['BR', 'PT'].includes(countryCode)) return 'pt';
  if (['ES', 'MX', 'AR'].includes(countryCode)) return 'es';
  if (['IT'].includes(countryCode)) return 'it';
  // ... and so on
  return 'pt'; // Default
}

Step 2: Add Middleware (2 minutes)

// src/middleware.ts
export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Get country from headers (Vercel/Cloudflare provides this!)
  const countryCode = request.headers.get('x-vercel-ip-country');

  if (countryCode) {
    const language = mapCountryToLanguage(countryCode);
    response.cookies.set('detected-lang', language);
  }

  return response;
}

That's it! The middleware runs automatically on every request and sets a cookie.

Step 3: Update Your I18n Provider (1 minute)

// Read from cookie instead of defaulting
const cookieLang = getLanguageFromCookie();
const detectedLang = cookieLang || 'pt'; // Fallback to default

Why This Is Brilliant

✅ Zero cost - No API calls, no third-party services

✅ Zero latency - Headers are already in the request

✅ Zero complexity - Just read headers and map countries

✅ Works everywhere - Vercel and Cloudflare both support this

✅ Non-intrusive - Falls back gracefully if headers aren't available

The Magic Headers

When you deploy on Vercel, you get:

x-vercel-ip-country - The user's country code

When you use Cloudflare, you get:

cf-ipcountry - The user's country code

Both platforms detect this automatically. No configuration needed!

Real-World Flow

User from Brazil visits your site
Vercel/Cloudflare adds x-vercel-ip-country: BR header
Your middleware reads BR → maps to pt → sets cookie
Your app shows Portuguese content
User switches to English via selector → cookie updates
Next visit → reads cookie → remembers preference

The Result

Before: Default language for everyone, manual selection required

After: Automatic detection with smart fallbacks

Time invested: ~5 minutes

Lines of code: ~100

Complexity: Minimal

User experience: Significantly improved ✨

TL;DR: Don't overthink it. Modern hosting platforms already give you geolocation for free. Just read the headers and map countries to languages. Done! 🎉

expo hot reloading problem

alyson farias — Sun, 26 Oct 2025 00:39:26 +0000

you should use

npx expo prebuild --clean

npx expo start --clear

Como ler um artigo que saiu do ar usando a Wayback Machine

alyson farias — Mon, 22 Sep 2025 14:48:57 +0000

Você clica em um link em um vídeo no YouTube e dá de cara com o erro 404 – Página não encontrada. A página existiu, mas foi removida.

Se o artigo vale a pena, ainda há saída: usar a Wayback Machine. O site mantém cópias antigas de páginas da web. Basta colar o link quebrado, escolher uma versão arquivada e acessar o conteúdo como se ainda estivesse online.

(Vide Imagem abaixo)

Solução ->

Wayback Machine https://web.archive.org/

how to deal with any ORM framework properly?

alyson farias — Wed, 23 Jul 2025 12:17:50 +0000

Understand the Abstraction
Learn how the ORM maps database tables to objects (Active Record vs. Data Mapper). Read its core concepts: model definition, relationships, querying, transactions.

Ignore Sugar Initially
Avoid shortcuts, decorators, and magic methods at first. Manually define fields, types, and constraints. Explicit over implicit.

Control the Query Layer
Use logging or query inspection tools to view generated SQL. Validate against expectations. Know how to bypass ORM and run raw SQL when needed.

Handle Relationships Manually First
Define foreign keys and join conditions yourself before relying on association helpers. Understand cascading behavior and lazy vs. eager loading.

Batch and Lazy Load Intelligently
Profile and reduce N+1 queries. Know how to prefetch or batch load when needed. Learn the ORM's method for controlling load strategies.

Test with Real Data Shapes
Validate against edge cases, empty sets, nested relations, and massive rows. Check transaction behavior and rollback.

Avoid Over-Reliance on Migrations
Track schema changes directly. Know when to bypass migration tools and write SQL. ORM migration layers often lag or make dangerous assumptions.

Handle Sessions/Connections Properly
Know how the ORM manages sessions, pools, and commits. Explicitly handle lifecycles in request/response or batch processing contexts.

Keep Business Logic Outside Models
Treat models as data access layers. Encapsulate logic in service layers or domain logic, not inside ORM entity methods.

Benchmark Before Shipping
Profile ORM performance vs. direct SQL for key paths. Optimize joins, subqueries, indexing. ORM adds overhead — know its cost.

Front-End Optimization: Debouncing and Throttling Explained In Short

alyson farias — Sun, 04 Aug 2024 02:50:08 +0000

What is Debouncing?

Debouncing is a technique that delays the execution of a function until the user stops performing a certain action for a specified amount of time.

If you have a search bar that fetches suggestions from the backend as the user types, you can debounce the function that makes the API call, so that it only runs after the user stops typing for a few seconds. This way, you can avoid making too many API calls that might overload your server or return irrelevant results.

What is Throttling?

Throttling is a technique that limits the execution of a function to once in every specified time interval.
Common use:

If you have a resize event handler that adjusts the layout of your page, you can throttle the function that updates the layout, so that it only runs once every 100ms. This way, you can avoid running your code too frequently, which might cause janky user interface or high CPU usage.

You can see clearly in this video

Debounce vs Throttle

Reference: Debounce vs Throttle

It is all about time to market

alyson farias — Sat, 13 Jul 2024 19:50:44 +0000

It is all about time to market

Recently, my sister became a mom, and motherhood comes with new problems that need solutions. Stay with me as I explain my point.

She gave me a list of issues and suggested a website or app could solve them. We brainstormed ideas like:

Tracking diaper changes (pee/poop) to see if the baby's output is normal
Daily, weekly, and monthly reports
Counting feedings and which breast was used
Tracking the baby's sleep duration
Estimating diaper costs
Medication reminders
Recording the baby's temperature

I then searched the Play Store and found a solution that's been around since 2015. This simple app solves her problems and costs only 12 reais (BRL) (~$2.1 USD) per year. It boasts over 1 million downloads and 100,000 reviews, with 95% of them positive. It likely requires minimal maintenance from the developer, who probably doesn't need a team.

code is just commodity and
sometimes, success is about being in the right place at the right time with the right knowledge to build.

key metrics to measure web perfomance; an short introduction

alyson farias — Wed, 19 Jun 2024 22:01:26 +0000

Monitoring web performance is crucial for ensuring optimal user experience and business success. Here some key metrics to consider:

1. Page Load Time

Page load time measures how long it takes for a web page to fully load in a user's browser. Faster load times improve user satisfaction and engagement.

2. Time to First Byte (TTFB)

TTFB measures the time taken by the browser to receive the first byte of response from the server after requesting a web page. It indicates server responsiveness.

Practical Example:

When a user visits a website, their browser sends a request to the server to fetch the web page. The server processes this request, retrieves the necessary data (HTML, CSS, JavaScript, images, etc.), and starts sending it back to the browser. TTFB specifically measures the time it takes from the moment the browser sends the request until it receives the first byte of data from the server.

For instance, if a user accesses a news website, the TTFB can vary depending on server load and network conditions. A fast TTFB (e.g., under 200 milliseconds) means the server responds quickly, delivering the initial content promptly. A slow TTFB (e.g., over 1 second) indicates potential issues with server performance or network latency, leading to longer wait times for users.

3. First Contentful Paint (FCP)

FCP measures the time when the browser first renders any content on the screen, such as text, images, or non-white canvas. It gives a sense of when the user perceives the page as loading.

4. Time to Interactive (TTI)

TTI measures when the page is fully interactive and responsive to user input. It's crucial for determining when users can start engaging with the content.

5. Total Blocking Time (TBT)

TBT measures the total amount of time between First Contentful Paint and Time to Interactive when the main thread is blocked and unable to respond to user input.

6. Load Distribution

Load distribution metrics assess how resources (like images, scripts, and stylesheets) are distributed across different servers or Content Delivery Networks (CDNs) to optimize load times.

7. Error Rate

Error rate tracks the percentage of requests that result in errors, such as 404 (not found) or 500 (server error). High error rates can indicate issues with server configurations or network problems.

All this metrics influence influence conversion rate as we are human

You can measure so many things using the performance API
const resources = performance.getEntriesByType("resource"); const paints = performance.getEntriesByType("paint"); const navigations=performance.getEntriesByType("navigation");

useful
https://developer.mozilla.org/en-US/docs/Web/API/Performance

https://pagespeed.web.dev/

a web perfomance introduction and why you should care;

alyson farias — Wed, 19 Jun 2024 21:21:47 +0000

Improving the performance of your website/web product impacts several critical metrics:

User Satisfaction and Retention
Cost Savings
Competitive Advantage
Improved SEO
High Conversion Rate

Before diving in, let's define two key metrics:

Bounce Rate: Percentage of visitors who leave your website after viewing only one page, indicating engagement.
Conversion Rate: Measures how effectively your site turns visitors into customers or leads.

Impact of Page Load Time

As page load time increases, so does the bounce rate:

Increasing load time from 1 to 3 seconds raises bounce probability by 32%
Deloitte found that a jump from 1 to 5 seconds increases bounce probability by 90%.
A 10-second load time increases bounce probability by 123%. (Google/SOASTA, 2017).

Financial Implications

For example:

eBay's 100-millisecond speed improvement increased add-to-cart rates by 0.5%, leading to 50,000 more monthly transactions.
BMW's adoption of Progressive Web Apps (PWA) boosted traffic by 8 to 40%. (Milliseconds Make Million from Deloitte)

Strategies for Improvement

Improving Conversion Rate:

Optimize User Experience: Simplify the user journey.
Enhance Content Quality: Ensure relevance and persuasion.
A/B Testing: Experiment with different versions for better performance.

Reducing Bounce Rate:

Improve Page Load Speed: Ensure fast loading times.
Enhance Content Relevance: Align content with visitor intent.
Engage with Design: Create an intuitive and attractive layout.

if you are a web developer and need to know little more about key metrics to measure web perfomance

Você talvez não saiba tratar erros usando Fetch API corretamente

alyson farias — Tue, 12 Dec 2023 12:32:25 +0000

O Fetch API não é tão novo, e a maioria dos desenvolvedores já o utilizou em algum momento para obter recursos de um servidor. No entanto, será que você realmente sabe como lidar com erros ao usar essa API?

Dado o código abaixo, em que uma solicitação usando a Fetch API retorna um erro 404, qual seria a mensagem no console: sucesso ou falhou?

try {
  // este endpoint retornará 404
  const response = await fetch('https://restcountries.com/v4.1/all');
  console.log('Sucesso');
} catch {
  console.error('Falhou');
}

Se você assumir que este código registra a mensagem de falha quando ocorre um erro 404, eu diria que este artigo é definitivamente para você, porque sua resposta está incorreta. O console.log exibirá a mensagem sucesso, e vou explicar por quê e qual é a melhor maneira de lidar com erros usando a Fetch API.

O que é a Fetch API?
Em resumo, a Fetch API é uma interface para fazer facilmente solicitações HTTP assíncronas do tipo GET e POST para endpoints.

Como lidar com erros usando a Fetch API?
Ao usar a Fetch API, diferentes erros podem ocorrer, como: erro do servidor (500), erro não encontrado (404), erro de rede, erro CORS, entre outros. E temos abordagens diferentes para lidar com todos esses erros, como você verá abaixo.

Usando try/catch para lidar com erros da Fetch API:
Estou presumindo que você está familiarizado com promisses em JavaScript e sabe como elas funcionam (porque uma das razões pelas quais a Fetch API é tão popular é porque ela retorna uma promisse). Portanto, podemos usar o poder de then, catch e finally quando a fetch é resolvida, rejeitada e concluída.

Envolvendo a chamada fetch em um bloco try/catch é uma maneira muito comum de lidar com erros (veja o exemplo abaixo), mas nem todos os erros podem ser capturados, e explicarei isso logo após o código.

javascript
Copy code
try {
// este endpoint retornará um erro CORS
const response = await fetch('https://google.com/api');
} catch {
console.error('Falhou');
}
// Saída: Falhou
Este código tentará realizar uma busca e detectar erros apenas quando a promisse for rejeitada (o que pode ocorrer em dois cenários):

Erros de rede: falha ao conectar-se ao servidor, o que pode ser causado por vários motivos, como rede lenta e tempo limite, por exemplo.
Erros CORS: quando um domínio não está autorizado a obter recursos de um domínio diferente.
A Fetch retornará resolvido para erros de status do servidor (como 404 e 500, por exemplo), e é por isso que o catch não pode capturá-los no exemplo no início deste artigo.

Verificando o status da resposta para lidar com erros da Fetch API:
Outra maneira comum de lidar com erros usando a Fetch API é verificar o status da resposta quando a promisse é resolvida - e é assim que devemos obter o erro 404 no exemplo no início deste artigo:

// este endpoint retornará 404
const response = await fetch('https://restcountries.com/v4.1/all');

if (response.ok) {
  // ...faça algo com a resposta se response.ok for verdadeiro
} else {
  console.error('Falhou');
}

Aqui, usamos response.ok para verificar se a resposta foi bem-sucedida ou não (verdadeiro ou falso).

É verdadeiro quando o código de status está entre 200 e 299 (significa bem-sucedido).
É falso quando o servidor retorna qualquer outro status que não esteja acima. Exemplos são 404 (não encontrado) e 500 (erro interno do servidor).
Melhor maneira de lidar com erros usando a Fetch API:
Exemplo 01:
Como você viu acima, try/catch e response.ok são usados para capturar diferentes tipos de erros, então podemos combinar as duas abordagens para lidar melhor com erros usando a Fetch API. Veja o exemplo abaixo:

try {
  const response = await fetch('https://restcountries.com/v4.1/all');
  if (response.ok) {
    console.log('promisse resolvida e status HTTP é bem-sucedido');
    // ...faça algo com a resposta
  } else {
    console.error('promisse resolvida, mas status HTTP falhou');
  }
} catch {
  console.error('promisse rejeitada');
}

Explicação:

try/catch é usado para obter erros quando a promisse é rejeitada (problemas de rede ou CORS).
response.ok é usado para lidar com erros do servidor (404 ou 500, por exemplo) quando a promisse é resolvida.
Exemplo 02:
Outra maneira comum de lidar com erros dentro do bloco try é lançar um erro quando response.ok não é verdadeiro, para que o bloco catch seja executado e possamos lidar com todos os erros no mesmo lugar. Veja o exemplo abaixo para entender melhor:

try {
  const response = await fetch('https://restcountries.com/v4.1/all');

  if (response.ok) {
    console.log('promisse resolvida e status HTTP é bem-sucedido');
    // ...faça algo com a resposta
  } else {
    // Mensagem personalizada para códigos HTTP falhados
    if (response.status === 404) throw new Error('404, Não encontrado');
    if (response.status === 500) throw new Error('500, erro interno do servidor');
    // Para qualquer outro erro do servidor
    throw new Error(response.status);
  }
} catch (error) {
  console.error('Fetch', error);
  // Saída por exemplo: "Erro no Fetch: 404, Não encontrado"
}

Identifique e apague todas node_modules com NP Kill

alyson farias — Tue, 02 Aug 2022 02:06:00 +0000

Eu sei, você trabalha com Javascript, e precisa de instalar variadas dependências.
O problema é que com o passar do tempo você se depara com vários projetos consumindo sua memória sem necessidade, pois precisamos do projeto vez ou outra, mas não do node_modules(a pasta mais pesada) necessariamente.

O Npkill faz uma varredura em todo computador identificando as pastas node_modules e possibilita a exclusão ao pressionar [SPACE]
via CLI.

Instalação

Você não precisa necessariamente instalar, pode simplesmente usar o comando abaixo
npx kill
Ou caso quiser instalar
npm i -g npkill #caso use Linux talvez precise utilizar sudo, cuidado.
Logo após
npkill

Referência:
https://www.npmjs.com/package/npkill