DEV Community: Luke

Why Your Tech Career Needs a Twitter Strategy

Luke — Wed, 25 Feb 2026 11:49:36 +0000

Face the truth: Most people got into software development because they enjoy programming, not because they want to be online celebrities.

The truth is that the tech landscape has evolved. In an ultra-competitive job market with widespread layoffs and the dreaded "resume black hole" of applicant tracking system software, merely pushing code to personal repositories is no longer enough to get you noticed.

Whether you enjoy using X (formerly known as Twitter) or despise it, Tech Twitter is the new tech lounge. It's the new watering hole for tech professionals everywhere. It's the 24/7 tech meetup that includes hiring managers, open-source maintainers, venture capitalists, and even potential clients for freelancers.

Your profile on X is now the entry point for your online portfolio. So why does having a presence on Dev Twitter matter, why is it so darn difficult to get started, and how can you do so without losing your mind?

The Psychology of "Follower Count" in the Tech Industry

As programmers, we're naturally predisposed to be highly skeptical of metrics that don't directly impact code quality or system performance. We're people who value clean architecture over code readability. So why does having an audience matter in the tech industry?

An audience in the tech industry isn't about being popular; it's about having social proof.

When you're trying to get hired or network with people in the tech industry, having an audience proves three things to people who check out your profile:

You are active: You enjoy tech outside of work hours.
You can communicate: You're capable of effectively explaining complex technical concepts in an easily consumed format—this is an extremely valuable skill in the tech industry.
You have authority: If people in the tech industry care about what you have to say, then you're probably worth working with because you're probably good at programming.

Having a strong Twitter presence is an opportunity magnet. It’s the best way to skip job application websites and go straight to DMs, get podcast invites, or find beta testers for your indie game.

The "Cold Start" Problem

So if X is so great, why do so many devs fail after a week?

It’s because of the "Empty GitHub" problem.

You think someone is a genius because they have a GitHub profile. You check it out and find no repos and no green contribution squares. They're a genius in spite of this.

But it’s worse. The algorithm is extremely unforgiving to new accounts. You spend two hours crafting a brilliant Twitter thread on optimizing React renders. Literally nobody will ever see it. You need the initial engagement to get the algorithm working.

It takes 6-12 months of daily tweeting to go from 0 to 1,000 followers. Most developers are busy. They don't have time to grind from 0 to 1,000.

The Dev's Playbook for Growth

If you want to build a presence, you have to provide value. Here are the unvarnished strategies that actually work in the tech community:

The "TIL" (Today I Learned) Strategy: You don't have to be a senior architect to provide value. Write about what you learned. "TIL how to use this specific Git flag."
Share the Messy Middle: Don't share your finished side projects. "Build in public." Did you spend 4 hours debugging a CORS error? Tweet about what caused it and how you fixed it. Devs relate to the struggle.
Engage in Your Stack: Shouting into the void gets you nowhere. Engage with mid-tier creators in your specific stack (e.g., Python, Vue.js, Rust) and leave thoughtful, technical comments on their discussions.
Format Beautifully: Nobody wants to read unformatted, ugly code snippets. Share beautiful screenshots of your code snippets using tools like Carbon or Raycast.

Accelerating the Timeline (Bridging the Gap)

Even after following all these steps, your content will still not reach many people in the beginning because of the algorithm. You need a certain amount of social proof so that when real developers come across your profile, they will press the "Follow" button.

If you wish to skip the 6-month organic process, you will need to use a tool like SocialCrow to blast your cold start problem. With SocialCrow will grow your following in a natural way.

When you buy Twitter (X) followers you get a big push, and then you’re showing the algorithm that you’re active and engaged. It closes the gap so that when you post that amazing tutorial or snippet, the algorithm knows to put it in front of those developers. It lets you spend less time working the algorithm and more time working the code.

The Long Game

At the end of the day, tools and growth hacks get you eyeballs on your profile. Your technical substance is what keeps those eyeballs there.

Your follower count gets you in the door. Your social proof combined with your tech insights is what compounds your growth. Your Dev Twitter is like your code: build it thoughtfully, focus on functionality, and it should be a career asset working for you 24/7.

Superwhisper for Windows? A practical alternative you can use today

Luke — Sat, 13 Sep 2025 13:59:15 +0000

Superwhisper is slick — and macOS-only. If you’re on Windows, waiting doesn’t help. You need something that does the same job right now.

Download Free: www.voicegecko.io

Enter Voice Gecko. It’s a lightweight voice-to-text app for everyday work: notes, emails, documents, chats, brainstorming. Put the cursor anywhere that accepts text and talk. Your words appear instantly. No copy–paste routine, no jumping between apps.

Why use Voice Gecko on Windows

Faster than typing when you’re in flow.
Great for capturing ideas before they disappear.
Helpful when your hands need a break (RSI, fatigue, long days).
Works across tools you already use — editors, browsers, chat apps, docs.

How it works (simple)

Install Voice Gecko on Windows.
Set a push-to-talk hotkey.
Place the caret in any text field. Speak. That’s it.

What it’s good at

Drafting emails and replies without losing your train of thought.
Turning messy notes into clean paragraphs.
Writing blog outlines, meeting summaries, or task lists on the fly.
Dictating messages in chat while you’re multitasking.

Quick examples you can try

“Outline a one-page blog post on releasing version 1.0.”

“Turn these bullets into a clear email to the team.”

“Summarise this meeting in five actionable points.”

The short answer

There isn’t a Superwhisper for Windows build at the time of writing. If you need that talk → text workflow on Windows today, Voice Gecko is the practical choice.

No affiliation with Superwhisper. Product names belong to their owners.

Stop Typing, Start Speaking: How Brain Dumping via Voice Can 10x Your AI Coding Workflow

Luke — Fri, 29 Aug 2025 20:21:28 +0000

We've all been there. You have a perfect idea for Cursor, but typing out every edge case and requirement is a drag. So you write a lazy, one-line prompt and get a lazy, one-line result.

The problem isn't the AI. The keyboard is the bottleneck.
You speak at ~150 WPM but type at ~40. By using your voice, you can stop writing tiny prompts and start dictating complete, high-context 'brain dumps'—just like you'd brief a junior dev.

Instead of slowly typing: "make a user profile component"

You could just say this in seconds:

Create a React component named UserProfileBadge that takes a userProfile object as a prop. This object includes a name, avatarUrl, and an array of permissions. If the permissions array includes 'admin', render a small, green 'Admin' badge next to the name. Also, handle the edge case where avatarUrl is null and render a default avatar with the user's initials.

The result? The AI gives you exactly what you wanted, on the first try.

I needed a simple tool for this exact workflow—a global hotkey that lets me dictate into any window (my IDE, a commit message, a Jira ticket), completely offline for privacy.

So I built VoiceGecko. It's a lightweight desktop app that gets out of your way and just lets you talk.

Give the technique a try. Stop letting your keyboard slow down your best ideas.

Building Smart Multi-Currency Pricing with IP Geolocation 🌍💰

Luke — Wed, 28 May 2025 18:39:42 +0000

So here's something that's been bugging me for a while. You know when you're browsing a website from another country and you see prices in some foreign currency? And you're sitting there trying to do mental math, wondering if ฿259 is actually expensive or not in your local money?

Yeah, that's exactly what happened to me last week. I was looking at this SaaS tool, saw the price in USD, and honestly... I just closed the tab. Too much work to figure out if it was worth it.

But then I realized - I'm probably doing the same thing to my own users. Oops.

So today we're fixing that. We'll build a smart multi-currency pricing system that automatically detects where users are and shows them prices in their local currency. It's actually not as complicated as I thought it would be, though there are definitely some gotchas.

Why This Actually Matters (More Than I Expected)

I did some digging after my little revelation, and apparently displaying prices in local currency can boost conversion rates by up to 30%. That's... significant. I mean, I knew it mattered, but 30%?

When users see prices in their familiar currency, it removes that mental friction. No more calculator apps, no more "is this expensive or cheap?" moments. Just instant understanding.

But here's the thing - and I learned this the hard way - implementing this properly isn't just about slapping a currency converter on your site. You need to think about accuracy, performance, user preferences, error handling... the list goes on.

Let me walk you through what I built, including the mistakes I made along the way.

What We're Working With

For this project, I ended up using:

IP Flare API for the geolocation stuff
React/Next.js for the frontend (though honestly, these concepts work with pretty much any framework)
TypeScript because I like my code to yell at me when I mess up
Some exchange rate API for the actual currency conversion

The cool thing about IP Flare - and why I picked it over the other options - is that it gives you not just location data, but also the local currency info. Saves you from maintaining some massive country-to-currency mapping file. Trust me, I started going down that rabbit hole and it's not fun.

Step 1: Getting the Geolocation Working

First things first, let's get the basic geolocation service running. I'm using the ipflare npm package because it has solid TypeScript support and, perhaps more importantly, actually handles errors gracefully.

npm install ipflare

Here's what I ended up with for the basic service:

// services/geolocation.ts
import { IPFlare } from 'ipflare';

const geolocator = new IPFlare({
  apiKey: process.env.IPFLARE_API_KEY!,
});

export interface UserLocation {
  country: string;
  countryCode: string;
  currency: string;
  currencyName: string;
  city?: string;
  timezone?: string;
}

export async function getUserLocation(ip?: string): Promise<UserLocation | null> {
  try {
    const result = await geolocator.lookup(ip || 'auto');

    if (!result.ok) {
      console.error('Geolocation failed:', result.error.message);
      return null;
    }

    const data = result.data;

    return {
      country: data.country_name || 'Unknown',
      countryCode: data.country_code || 'US',
      currency: data.currency || 'USD',
      currencyName: data.currency_name || 'US Dollar',
      city: data.city,
      timezone: data.timezone,
    };
  } catch (error) {
    console.error('Geolocation error:', error);
    return null;
  }
}

One thing I really like about the ipflare library is this result-based API approach. No messy try-catch blocks everywhere - the library handles the API errors internally and gives you a clean success/failure result. Makes the code much cleaner, I think.

Step 2: The Currency Detection Hook

Now this is where it gets interesting. I needed a React hook that could handle currency detection but also respect user preferences. Because let's be honest - sometimes the geolocation gets it wrong, or users just prefer a different currency.

// hooks/useCurrency.ts
import { useState, useEffect, useCallback } from 'react';
import { getUserLocation, type UserLocation } from '../services/geolocation';

export type SupportedCurrency = 'USD' | 'EUR' | 'GBP' | 'CAD' | 'AUD';

const SUPPORTED_CURRENCIES: Record<string, SupportedCurrency> = {
  'USD': 'USD',
  'EUR': 'EUR', 
  'GBP': 'GBP',
  'CAD': 'CAD',
  'AUD': 'AUD',
};

const CURRENCY_SYMBOLS: Record<SupportedCurrency, string> = {
  'USD': '$',
  'EUR': '€',
  'GBP': '£',
  'CAD': 'C$',
  'AUD': 'A$',
};

export function useCurrency() {
  const [currency, setCurrency] = useState<SupportedCurrency>('USD');
  const [isLoading, setIsLoading] = useState(true);
  const [userLocation, setUserLocation] = useState<UserLocation | null>(null);

  // Load saved currency preference first
  useEffect(() => {
    const saved = localStorage.getItem('preferred-currency');
    if (saved && saved in SUPPORTED_CURRENCIES) {
      setCurrency(saved as SupportedCurrency);
    }
  }, []);

  // Then try to detect location
  useEffect(() => {
    async function detectCurrency() {
      try {
        const location = await getUserLocation();
        setUserLocation(location);

        if (location && location.currency in SUPPORTED_CURRENCIES) {
          const detectedCurrency = SUPPORTED_CURRENCIES[location.currency];

          // Only auto-set if user hasn't manually chosen something
          const hasManualPreference = localStorage.getItem('preferred-currency');
          if (!hasManualPreference) {
            setCurrency(detectedCurrency);
          }
        }
      } catch (error) {
        console.error('Currency detection failed:', error);
        // Not much we can do here, just stick with USD
      } finally {
        setIsLoading(false);
      }
    }

    detectCurrency();
  }, []);

  const updateCurrency = useCallback((newCurrency: SupportedCurrency) => {
    setCurrency(newCurrency);
    localStorage.setItem('preferred-currency', newCurrency);
  }, []);

  return {
    currency,
    setCurrency: updateCurrency,
    isLoading,
    userLocation,
    currencySymbol: CURRENCY_SYMBOLS[currency],
    supportedCurrencies: SUPPORTED_CURRENCIES,
  };
}

I spent way too much time thinking about the order of operations here. Should I check localStorage first or do the geolocation first? I ended up going with localStorage first because if someone has explicitly chosen a currency, that should probably take precedence.

The hook does a few smart things:

Respects what users have already chosen
Falls back to geolocation for new visitors
Only works with currencies I actually support (learned this lesson the hard way when someone from a country with an obscure currency visited my site)
Gives you loading states so you can show something reasonable while it's working

Step 3: Currency Conversion (The Tricky Part)

Alright, so now we know where the user is and what currency they probably want. But we still need to actually convert the prices. This is where things get a bit more complex.

// services/currency.ts
interface ExchangeRates {
  [key: string]: number;
}

class CurrencyService {
  private rates: ExchangeRates = {};
  private lastUpdate: number = 0;
  private readonly CACHE_DURATION = 1000 * 60 * 60; // 1 hour

  async getExchangeRates(): Promise<ExchangeRates> {
    const now = Date.now();

    // Return cached rates if they're still fresh
    if (this.rates && (now - this.lastUpdate) < this.CACHE_DURATION) {
      return this.rates;
    }

    try {
      const response = await fetch('https://api.exchangerate-api.com/v4/latest/USD');
      const data = await response.json();

      this.rates = data.rates;
      this.lastUpdate = now;

      return this.rates;
    } catch (error) {
      console.error('Failed to fetch exchange rates:', error);
      // Return cached rates or some reasonable defaults
      return this.rates || { USD: 1, EUR: 0.85, GBP: 0.73, CAD: 1.25, AUD: 1.35 };
    }
  }

  async convertPrice(
    amount: number, 
    fromCurrency: string = 'USD', 
    toCurrency: string
  ): Promise<number> {
    if (fromCurrency === toCurrency) return amount;

    const rates = await this.getExchangeRates();

    // Convert to USD first, then to target currency
    const usdAmount = fromCurrency === 'USD' ? amount : amount / rates[fromCurrency];
    const convertedAmount = toCurrency === 'USD' ? usdAmount : usdAmount * rates[toCurrency];

    return Math.round(convertedAmount * 100) / 100; // Round to 2 decimal places
  }

  formatPrice(amount: number, currency: string): string {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: currency,
    }).format(amount);
  }
}

export const currencyService = new CurrencyService();

I'm using a free exchange rate API here, which is probably fine for most use cases. Though if you're doing this for a real business, you might want to consider a paid service for better reliability. The free ones sometimes have rate limits or go down at inconvenient times.

The caching is important - you don't want to hit the exchange rate API on every price conversion. Exchange rates don't change that frequently anyway, so an hour cache seems reasonable. Maybe even longer, depending on your needs.

Step 4: The Pricing Component

Now let's put it all together. This is where the magic happens - or where everything breaks if you're not careful.

// components/PricingCard.tsx
import React, { useState, useEffect } from 'react';
import { useCurrency } from '../hooks/useCurrency';
import { currencyService } from '../services/currency';

interface PricingPlan {
  name: string;
  basePrice: number; // Always in USD
  features: string[];
}

interface PricingCardProps {
  plan: PricingPlan;
}

export function PricingCard({ plan }: PricingCardProps) {
  const { currency, currencySymbol, isLoading: currencyLoading } = useCurrency();
  const [convertedPrice, setConvertedPrice] = useState<number>(plan.basePrice);
  const [isConverting, setIsConverting] = useState(false);

  useEffect(() => {
    async function convertPrice() {
      if (currency === 'USD') {
        setConvertedPrice(plan.basePrice);
        return;
      }

      setIsConverting(true);
      try {
        const converted = await currencyService.convertPrice(
          plan.basePrice, 
          'USD', 
          currency
        );
        setConvertedPrice(converted);
      } catch (error) {
        console.error('Price conversion failed:', error);
        // Just show the original price if conversion fails
        setConvertedPrice(plan.basePrice);
      } finally {
        setIsConverting(false);
      }
    }

    convertPrice();
  }, [plan.basePrice, currency]);

  const formattedPrice = currencyService.formatPrice(convertedPrice, currency);

  return (
    <div className="pricing-card">
      <h3>{plan.name}</h3>

      <div className="price">
        {currencyLoading || isConverting ? (
          <div className="price-skeleton">💰 Loading...</div>
        ) : (
          <>
            <span className="amount">{formattedPrice}</span>
            <span className="period">/month</span>
          </>
        )}
      </div>

      <ul className="features">
        {plan.features.map((feature, index) => (
          <li key={index}>✅ {feature}</li>
        ))}
      </ul>

      <button className="cta-button">
        Get Started 🚀
      </button>
    </div>
  );
}

I probably spent too much time on the loading states here, but I think it's worth it. There's nothing worse than seeing prices jump around as the conversion happens. Better to show a loading state and then smoothly transition to the final price.

One thing I learned: always have a fallback. If the currency conversion fails for any reason, just show the original USD price. It's better than showing nothing or crashing.

Step 5: Let Users Override the Detection

This is crucial. Sometimes the geolocation gets it wrong, or users just prefer to see prices in a different currency. Maybe they're traveling, or they're an expat, or they just like USD better. Whatever the reason, give them control.

// components/CurrencySelector.tsx
import React from 'react';
import { useCurrency } from '../hooks/useCurrency';

const CURRENCY_OPTIONS = [
  { code: 'USD', name: 'US Dollar', flag: '🇺🇸' },
  { code: 'EUR', name: 'Euro', flag: '🇪🇺' },
  { code: 'GBP', name: 'British Pound', flag: '🇬🇧' },
  { code: 'CAD', name: 'Canadian Dollar', flag: '🇨🇦' },
  { code: 'AUD', name: 'Australian Dollar', flag: '🇦🇺' },
];

export function CurrencySelector() {
  const { currency, setCurrency, userLocation } = useCurrency();

  return (
    <div className="currency-selector">
      <label htmlFor="currency">💱 Currency:</label>
      <select 
        id="currency"
        value={currency} 
        onChange={(e) => setCurrency(e.target.value as any)}
      >
        {CURRENCY_OPTIONS.map((option) => (
          <option key={option.code} value={option.code}>
            {option.flag} {option.code} - {option.name}
          </option>
        ))}
      </select>

      {userLocation && (
        <small className="detected-location">
          📍 Detected: {userLocation.city}, {userLocation.country}
        </small>
      )}
    </div>
  );
}

I like showing the detected location too. It gives users confidence that the system is working, and it's kind of cool to see "Detected: London, United Kingdom" or whatever.

Some Production Tips I Wish I'd Known Earlier

Server-Side Detection

If you're serious about this, you probably want to do the currency detection server-side for better performance and SEO. Here's a basic Next.js API route:

// pages/api/detect-currency.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { getUserLocation } from '../../services/geolocation';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const forwarded = req.headers['x-forwarded-for'];
    const ip = typeof forwarded === 'string' 
      ? forwarded.split(',')[0] 
      : req.connection.remoteAddress;

    const location = await getUserLocation(ip);

    if (location) {
      // Set some cookies for subsequent requests
      res.setHeader('Set-Cookie', [
        `detected-currency=${location.currency}; Path=/; Max-Age=86400; SameSite=Lax`,
        `detected-country=${location.countryCode}; Path=/; Max-Age=86400; SameSite=Lax`
      ]);
    }

    res.status(200).json({ location });
  } catch (error) {
    console.error('Currency detection error:', error);
    res.status(500).json({ error: 'Failed to detect currency' });
  }
}

Testing (Don't Skip This Part)

I made the mistake of not testing this thoroughly at first. Here's a basic test setup that would have saved me some headaches:

// __tests__/currency.test.ts
import { getUserLocation } from '../services/geolocation';

describe('Currency Detection', () => {
  test('detects US currency for US IP', async () => {
    const location = await getUserLocation('8.8.8.8'); // Google DNS
    expect(location?.currency).toBe('USD');
    expect(location?.countryCode).toBe('US');
  });

  test('detects UK currency for UK IP', async () => {
    const location = await getUserLocation('84.17.50.173'); // Some UK IP
    expect(location?.currency).toBe('GBP');
    expect(location?.countryCode).toBe('GB');
  });

  test('handles invalid IPs gracefully', async () => {
    const location = await getUserLocation('not-an-ip');
    expect(location).toBeNull();
  });
});

Things to Keep in Mind

A few things I learned along the way:

Rate limiting - Don't let people abuse your API endpoints. Implement some basic rate limiting.

Privacy - Be transparent about the location detection in your privacy policy. Some people care about this stuff.

Fallbacks - Always have a fallback currency. USD is usually a safe bet.

GDPR - If you're dealing with EU users, you might need to think about data processing implications. I'm not a lawyer, but it's worth considering.

Putting It All Together

Here's what the final pricing page looks like:

// pages/pricing.tsx
import React from 'react';
import { PricingCard } from '../components/PricingCard';
import { CurrencySelector } from '../components/CurrencySelector';

const PRICING_PLANS = [
  {
    name: 'Starter',
    basePrice: 9.99,
    features: ['10,000 API calls', 'Basic support', 'Dashboard access']
  },
  {
    name: 'Pro',
    basePrice: 29.99,
    features: ['100,000 API calls', 'Priority support', 'Advanced analytics']
  },
  {
    name: 'Enterprise',
    basePrice: 99.99,
    features: ['Unlimited API calls', '24/7 support', 'Custom integrations']
  }
];

export default function PricingPage() {
  return (
    <div className="pricing-page">
      <header>
        <h1>💰 Choose Your Plan</h1>
        <CurrencySelector />
      </header>

      <div className="pricing-grid">
        {PRICING_PLANS.map((plan) => (
          <PricingCard key={plan.name} plan={plan} />
        ))}
      </div>
    </div>
  );
}

Was It Worth It?

So after implementing all this, did it actually work? I think so. My conversion rates for international visitors definitely improved, though I can't say it was exactly 30%. Maybe 15-20%? Hard to measure precisely because there are so many variables.

But the user feedback has been positive. People seem to appreciate seeing prices in their local currency, and I've gotten fewer "how much is this in euros?" type emails.

The IP Flare API made the whole thing much easier than I expected. Having the currency data built into the geolocation response was a huge time-saver. Plus their free tier gives you 1,000 requests per month, which is perfect for testing and small projects.

If you're thinking about implementing something like this, I'd say go for it. Just start simple, test thoroughly, and always have fallbacks. Your international users will thank you.

Have you implemented multi-currency pricing on your site? How did it go? I'm curious to hear about other approaches - drop a comment below! 👇

If this was helpful, give it a ❤️ and maybe follow for more web dev stuff!

Building an Automatic Currency Switcher in Next.js

Luke — Thu, 02 Jan 2025 09:19:01 +0000

What We're Working With

For this project, I ended up using:

React/Next.js for the frontend (though honestly, these concepts work with pretty much any framework)
TypeScript because I like my code to yell at me when I mess up
IP Flare API for the geolocation stuff
Some exchange rate API for the actual currency conversion

Step 1: Getting the Geolocation Working

npm install ipflare

Here's what I ended up with for the basic service:

// services/geolocation.ts
import { IPFlare } from 'ipflare';

const geolocator = new IPFlare({
  apiKey: process.env.IPFLARE_API_KEY!,
});

export interface UserLocation {
  country: string;
  countryCode: string;
  currency: string;
  currencyName: string;
  city?: string;
  timezone?: string;
}

export async function getUserLocation(ip?: string): Promise<UserLocation | null> {
  try {
    const result = await geolocator.lookup(ip || 'auto');

    if (!result.ok) {
      console.error('Geolocation failed:', result.error.message);
      return null;
    }

    const data = result.data;

    return {
      country: data.country_name || 'Unknown',
      countryCode: data.country_code || 'US',
      currency: data.currency || 'USD',
      currencyName: data.currency_name || 'US Dollar',
      city: data.city,
      timezone: data.timezone,
    };
  } catch (error) {
    console.error('Geolocation error:', error);
    return null;
  }
}

Step 2: The Currency Detection Hook

// hooks/useCurrency.ts
import { useState, useEffect, useCallback } from 'react';
import { getUserLocation, type UserLocation } from '../services/geolocation';

export type SupportedCurrency = 'USD' | 'EUR' | 'GBP' | 'CAD' | 'AUD';

const SUPPORTED_CURRENCIES: Record<string, SupportedCurrency> = {
  'USD': 'USD',
  'EUR': 'EUR', 
  'GBP': 'GBP',
  'CAD': 'CAD',
  'AUD': 'AUD',
};

const CURRENCY_SYMBOLS: Record<SupportedCurrency, string> = {
  'USD': '$',
  'EUR': '€',
  'GBP': '£',
  'CAD': 'C$',
  'AUD': 'A$',
};

export function useCurrency() {
  const [currency, setCurrency] = useState<SupportedCurrency>('USD');
  const [isLoading, setIsLoading] = useState(true);
  const [userLocation, setUserLocation] = useState<UserLocation | null>(null);

  // Load saved currency preference first
  useEffect(() => {
    const saved = localStorage.getItem('preferred-currency');
    if (saved && saved in SUPPORTED_CURRENCIES) {
      setCurrency(saved as SupportedCurrency);
    }
  }, []);

  // Then try to detect location
  useEffect(() => {
    async function detectCurrency() {
      try {
        const location = await getUserLocation();
        setUserLocation(location);

        if (location && location.currency in SUPPORTED_CURRENCIES) {
          const detectedCurrency = SUPPORTED_CURRENCIES[location.currency];

          // Only auto-set if user hasn't manually chosen something
          const hasManualPreference = localStorage.getItem('preferred-currency');
          if (!hasManualPreference) {
            setCurrency(detectedCurrency);
          }
        }
      } catch (error) {
        console.error('Currency detection failed:', error);
        // Not much we can do here, just stick with USD
      } finally {
        setIsLoading(false);
      }
    }

    detectCurrency();
  }, []);

  const updateCurrency = useCallback((newCurrency: SupportedCurrency) => {
    setCurrency(newCurrency);
    localStorage.setItem('preferred-currency', newCurrency);
  }, []);

  return {
    currency,
    setCurrency: updateCurrency,
    isLoading,
    userLocation,
    currencySymbol: CURRENCY_SYMBOLS[currency],
    supportedCurrencies: SUPPORTED_CURRENCIES,
  };
}

The hook does a few smart things:

Respects what users have already chosen
Falls back to geolocation for new visitors
Only works with currencies I actually support (learned this lesson the hard way when someone from a country with an obscure currency visited my site)
Gives you loading states so you can show something reasonable while it's working

Step 3: Currency Conversion (The Tricky Part)

Alright, so now we know where the user is and what currency they probably want. But we still need to actually convert the prices. This is where things get a bit more complex.

// services/currency.ts
interface ExchangeRates {
  [key: string]: number;
}

class CurrencyService {
  private rates: ExchangeRates = {};
  private lastUpdate: number = 0;
  private readonly CACHE_DURATION = 1000 * 60 * 60; // 1 hour

  async getExchangeRates(): Promise<ExchangeRates> {
    const now = Date.now();

    // Return cached rates if they're still fresh
    if (this.rates && (now - this.lastUpdate) < this.CACHE_DURATION) {
      return this.rates;
    }

    try {
      const response = await fetch('https://api.exchangerate-api.com/v4/latest/USD');
      const data = await response.json();

      this.rates = data.rates;
      this.lastUpdate = now;

      return this.rates;
    } catch (error) {
      console.error('Failed to fetch exchange rates:', error);
      // Return cached rates or some reasonable defaults
      return this.rates || { USD: 1, EUR: 0.85, GBP: 0.73, CAD: 1.25, AUD: 1.35 };
    }
  }

  async convertPrice(
    amount: number, 
    fromCurrency: string = 'USD', 
    toCurrency: string
  ): Promise<number> {
    if (fromCurrency === toCurrency) return amount;

    const rates = await this.getExchangeRates();

    // Convert to USD first, then to target currency
    const usdAmount = fromCurrency === 'USD' ? amount : amount / rates[fromCurrency];
    const convertedAmount = toCurrency === 'USD' ? usdAmount : usdAmount * rates[toCurrency];

    return Math.round(convertedAmount * 100) / 100; // Round to 2 decimal places
  }

  formatPrice(amount: number, currency: string): string {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: currency,
    }).format(amount);
  }
}

export const currencyService = new CurrencyService();

Step 4: The Pricing Component

Now let's put it all together. This is where the magic happens - or where everything breaks if you're not careful.

// components/PricingCard.tsx
import React, { useState, useEffect } from 'react';
import { useCurrency } from '../hooks/useCurrency';
import { currencyService } from '../services/currency';

interface PricingPlan {
  name: string;
  basePrice: number; // Always in USD
  features: string[];
}

interface PricingCardProps {
  plan: PricingPlan;
}

export function PricingCard({ plan }: PricingCardProps) {
  const { currency, currencySymbol, isLoading: currencyLoading } = useCurrency();
  const [convertedPrice, setConvertedPrice] = useState<number>(plan.basePrice);
  const [isConverting, setIsConverting] = useState(false);

  useEffect(() => {
    async function convertPrice() {
      if (currency === 'USD') {
        setConvertedPrice(plan.basePrice);
        return;
      }

      setIsConverting(true);
      try {
        const converted = await currencyService.convertPrice(
          plan.basePrice, 
          'USD', 
          currency
        );
        setConvertedPrice(converted);
      } catch (error) {
        console.error('Price conversion failed:', error);
        // Just show the original price if conversion fails
        setConvertedPrice(plan.basePrice);
      } finally {
        setIsConverting(false);
      }
    }

    convertPrice();
  }, [plan.basePrice, currency]);

  const formattedPrice = currencyService.formatPrice(convertedPrice, currency);

  return (
    <div className="pricing-card">
      <h3>{plan.name}</h3>

      <div className="price">
        {currencyLoading || isConverting ? (
          <div className="price-skeleton">💰 Loading...</div>
        ) : (
          <>
            <span className="amount">{formattedPrice}</span>
            <span className="period">/month</span>
          </>
        )}
      </div>

      <ul className="features">
        {plan.features.map((feature, index) => (
          <li key={index}>✅ {feature}</li>
        ))}
      </ul>

      <button className="cta-button">
        Get Started 🚀
      </button>
    </div>
  );
}

One thing I learned: always have a fallback. If the currency conversion fails for any reason, just show the original USD price. It's better than showing nothing or crashing.

Step 5: Let Users Override the Detection

// components/CurrencySelector.tsx
import React from 'react';
import { useCurrency } from '../hooks/useCurrency';

const CURRENCY_OPTIONS = [
  { code: 'USD', name: 'US Dollar', flag: '🇺🇸' },
  { code: 'EUR', name: 'Euro', flag: '🇪🇺' },
  { code: 'GBP', name: 'British Pound', flag: '🇬🇧' },
  { code: 'CAD', name: 'Canadian Dollar', flag: '🇨🇦' },
  { code: 'AUD', name: 'Australian Dollar', flag: '🇦🇺' },
];

export function CurrencySelector() {
  const { currency, setCurrency, userLocation } = useCurrency();

  return (
    <div className="currency-selector">
      <label htmlFor="currency">💱 Currency:</label>
      <select 
        id="currency"
        value={currency} 
        onChange={(e) => setCurrency(e.target.value as any)}
      >
        {CURRENCY_OPTIONS.map((option) => (
          <option key={option.code} value={option.code}>
            {option.flag} {option.code} - {option.name}
          </option>
        ))}
      </select>

      {userLocation && (
        <small className="detected-location">
          📍 Detected: {userLocation.city}, {userLocation.country}
        </small>
      )}
    </div>
  );
}

I like showing the detected location too. It gives users confidence that the system is working, and it's kind of cool to see "Detected: London, United Kingdom" or whatever.

Some Production Tips I Wish I'd Known Earlier

Server-Side Detection

If you're serious about this, you probably want to do the currency detection server-side for better performance and SEO. Here's a basic Next.js API route:

// pages/api/detect-currency.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { getUserLocation } from '../../services/geolocation';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const forwarded = req.headers['x-forwarded-for'];
    const ip = typeof forwarded === 'string' 
      ? forwarded.split(',')[0] 
      : req.connection.remoteAddress;

    const location = await getUserLocation(ip);

    if (location) {
      // Set some cookies for subsequent requests
      res.setHeader('Set-Cookie', [
        `detected-currency=${location.currency}; Path=/; Max-Age=86400; SameSite=Lax`,
        `detected-country=${location.countryCode}; Path=/; Max-Age=86400; SameSite=Lax`
      ]);
    }

    res.status(200).json({ location });
  } catch (error) {
    console.error('Currency detection error:', error);
    res.status(500).json({ error: 'Failed to detect currency' });
  }
}

Putting It All Together

Here's what the final pricing page looks like:

// pages/pricing.tsx
import React from 'react';
import { PricingCard } from '../components/PricingCard';
import { CurrencySelector } from '../components/CurrencySelector';

const PRICING_PLANS = [
  {
    name: 'Starter',
    basePrice: 9.99,
    features: ['10,000 API calls', 'Basic support', 'Dashboard access']
  },
  {
    name: 'Pro',
    basePrice: 29.99,
    features: ['100,000 API calls', 'Priority support', 'Advanced analytics']
  },
  {
    name: 'Enterprise',
    basePrice: 99.99,
    features: ['Unlimited API calls', '24/7 support', 'Custom integrations']
  }
];

export default function PricingPage() {
  return (
    <div className="pricing-page">
      <header>
        <h1>💰 Choose Your Plan</h1>
        <CurrencySelector />
      </header>

      <div className="pricing-grid">
        {PRICING_PLANS.map((plan) => (
          <PricingCard key={plan.name} plan={plan} />
        ))}
      </div>
    </div>
  );
}

Was It Worth It?

But the user feedback has been positive. People seem to appreciate seeing prices in their local currency, and I've gotten fewer "how much is this in euros?" type emails.

If you're thinking about implementing something like this, I'd say go for it. Just start simple, test thoroughly, and always have fallbacks. Your international users will thank you.

Have you implemented multi-currency pricing on your site? How did it go? I'm curious to hear about other approaches - drop a comment below! 👇

If this was helpful, give it a ❤️ and maybe follow for more web dev stuff!

Best site to buy Twitter followers?

Luke — Fri, 18 Nov 2022 21:50:29 +0000

But Should You Buy Followers?

Yes! There a lot of reasons to buy Twitter followers. For one, it can help you build up your social media presence quickly. If you're just starting out on Twitter, it can be difficult to get followers organically. By buying followers, you can jumpstart your Twitter account and get the ball rolling.

Another reason to buy followers is that it can help you appear more popular than you actually are. If you have a lot of followers, people are more likely to pay attention to what you have to say. They'll also be more likely to follow you back if you follow them. This can help you build up a real, engaged following over time.

Finally, buying followers can be a good way to test out different marketing strategies. If you're not sure how to get more followers organically, buying followers can help you experiment with different tactics and see what works. You can then use those same tactics to get real followers.

What is the best site?

If you're looking to grow your business on social media, you should definitely check out Social Crow. They offer a variety of services to help you get more Twitter followers, likes, and views. Their prices are very reasonable, and their customer service is excellent. I highly recommend them to grow your online presence!

Results of buying Twitter followers

If you're looking to increase your Twitter following quickly and easily, you may be tempted to buy followers. But is this really a good idea for your business?

As it turns out, buying Twitter followers can actually be quite beneficial for your business. Here's why:

1. It boosts your visibility.
When you have more followers, you're more likely to show up in search results and be seen by potential customers. This can lead to more website visitors, more leads, and ultimately, more sales.

2. It makes you look more credible.
Let's face it, people are more likely to do business with someone who looks like they're already successful. Having a large Twitter following can make you look more credible and trustworthy, which can encourage people to do business with you.

3. It can lead to organic growth.
While the followers won't interact with your tweets, they can still help to attract real followers who will.

Results from buying Twitter followers

Is it Visual studio or online MMORPG?

Luke — Thu, 08 Oct 2020 23:48:31 +0000

What is it? 🤷‍♂️

CyberCode Online is a Cyber Punk inspired, Text Based MMORPG Browser Game where gameplay interface are 'Stealthily' mimicking the VSCode interface. To start, please Login or Register by typing your email and password on the string variable, then click login/signUp function to proceed.

CyberCode Online Community 👋

The CyberCode online community is one of the friendliest I have every had the pleasure of speaking with. They were really helpful to get started. If you want to connect with other players, or there is something you want to talk to me about you can find me at CyberCode Online's Discord Channel.

There is also a mobile app 📱

The mobile app does not have the stealthy visual appearance but is just as fun. You can get it for free on the Google Play store.

Gameplay 🕹️

Calm and relaxing but interesting and addictive! Best of all is the appearance since you are able to play it at work and none of your colleges will notice.

Pickles? Finance? Find out what the hype is about!

Luke — Sat, 03 Oct 2020 23:56:40 +0000

What is Pickle?

Pickle is an experimental protocol using farming rewards, vaults, and governance to put stable coins closer to their pegs.

Abstract

To bring stable coins closer to their pegs, the Pickle protocol uses farming rewards, vaults, and governance. By distributing PICKLEs to Uniswap LPs of different stable coin pools, capital movement between stable coins is encouraged. Pickle Vaults, will use various active strategies to produce returns for pVault owners and the protocol, including leveraged flash loans to short off-peg stable coins.

Why does Pickle exist?

Due to varying market conditions and monetary policy restrictions, Stable coins have often gone off peg. This problem has only been compounded by the recent boom in yield farming as farmers purchase and sell vast quantities of stable coins to find the best yield.
A much more stable stable coin ecosystem is needed for the DeFi ecosystem to flourish.

How do I start farming?

Visit Pickle Finance and unlock and link your wallet. Then you can deposit UNIV2 PICKLE/ETH LP and earn Pickle in return.

Earn crypto from watching videos.

Luke — Mon, 21 Sep 2020 18:20:37 +0000

How to get over $100 in crypto

Coinbase! They know that crypto can seem complicated, so to make it easier to understand, and provide people with incentives to learn that they have partnered with some of the most popular blockchain projects to build Coinbase Earn.

By watching short and clear informative videos and then answering a multiple choice question, Coinbase Earn is an convenient way for verified Coinbase users to earn free crypto from famous blockchain projects.

What do I need to do?

1. Watch videos - To inform you about various cryptocurrencies, they have produced informative videos.

2. Complete a quiz - After each video you will receive a simple quiz testing what you’ve learned.

3. Earn - You will receive a simple test after each video, checking what you have learned.

4. Start today! - Only a select group of customers can receive opportunities for a limited period of time. So join before all the crypto is claimed.

Start now: Coinbase

caveat
Please be aware that some countries are unable to participate in the program, and that you might be placed on a waiting list to start a course on a specific coin.

Discovering how much I love open source

Luke — Thu, 10 Sep 2020 15:52:57 +0000

This text was written using the GPT-2 model by OpenAI. With the seed phrase below.

I love open source software and the way it can empower us to create things that are not possible otherwise.

As a member of The Open Source Software Foundation (OSF), I have been working with GitHub for over 10 years. how much I love open source and the ways that it can help the world become a better place through sharing knowledge.

In May 2015, the OSF announced its new organizational structure, which included a role called Chief Operating Officer. By 2017, he was appointed CEO by the board. He is also an advisor on several other projects.

In 2013, he founded the non-profit organization Code For America (CFA) in order to provide free online training courses related to software development. Since its inception, CFA's website has received more than 3 million visits from around the world.

He is also an active contributor on various other projects including the Apache Spark project, OpenStack project as well as many others.

Andres Are, the team manager at WebAssembly loves open source and is a passionate member, I find that if you're considering an open source project, a "open source browser" is a better fit. So because Open Source people love doing web apps...

This past week, I joined several organizations in for some open source projects with my friends. I got to work for the likes of Mozilla, OpenOffice, and MSOffice. Also we are very friendly with people using Chrome.

Today, as you may be wondering, I'm also attending a bunch of Open Source Week events in NYC. The conference is open to the public at http://www.openserver.com which includes several other big events to come at the conference, it was announced that I was there with a number of guest speakers.

Last weekend, I will be attending another Open Source Week event for The Open Source World event in London. First of all, I will be going from 3 to 4 interviews per week.

I had got here a very nice car, I was a little afraid, I wasn't sure if I had really got to go or not, so I arrived there a short time ago with a little extra cash to keep me warm if I could or not. Luckily, I am a really lovely person, and it is really good to find a way to travel to the world looking to learn and share with others, and I have a great opportunity and a dream to join the Open Source World that I love to call my life.