Forem: ALI ALHARBI

Auto-Detect RTL in React with TypeScript! 🌐

ALI ALHARBI — Thu, 07 Nov 2024 06:47:22 +0000

Ever wanted your text input to automagically switch direction based on what users type? Let’s build a React component that detects Right-to-Left (RTL) languages like Arabic in real time—with just a few lines of TypeScript! No libraries, no hassle.

The Magic Code 🪄

Here’s all you need for instant direction switching based on input:

import { ChangeEvent, useState } from 'react';

const App = () => {
  const [direction, setDirection] = useState<'ltr' | 'rtl'>('ltr');

  const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
    const text = event.target.value;
    const rtlRegex = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F]/;

    setDirection(rtlRegex.test(text) ? 'rtl' : 'ltr');
  };

  return (
    <textarea
      dir={direction}
      placeholder="Type something..."
      onChange={handleInputChange}
    />
  );
};

export default App;

How It Works 🔍

State Magic: useState sets the direction to either 'ltr' or 'rtl'.
RTL Detection: We use a simple regex to detect Arabic script. If it finds RTL characters, the direction flips to rtl; otherwise, it stays ltr.
Dynamic Direction: The dir={direction} attribute on <textarea> updates as you type, giving an instant RTL effect.

Why This Rocks 🎉

Lightweight: No extra libraries needed.
Instant Feedback: Typing adjusts direction as you go.
Type Safety: TypeScript keeps direction locked to 'ltr' or 'rtl' only.

Give it a try! Your input fields will never be the same. 🚀🌍

Mastering RTL with One Line of CSS (No Libraries Needed!) 🚀

ALI ALHARBI — Wed, 06 Nov 2024 19:05:16 +0000

Ever thought RTL layouts were a hassle? Think again! You don’t need complex libraries or a pile of code. Here’s the simple solution to handle RTL like a pro.

The Magic One-Liner 🪄

Here’s all you need:

[lang="ar"] { direction: rtl }

Then, with lang="ar" on <main>, the content inside flows from right to left, while the rest of the page stays untouched.

<main lang="ar">
  //.... RTL Content
</main>

Yup, that’s it! By targeting elements with [lang="ar"], you tell your CSS exactly where to flip things around, making sure only Arabic (or any RTL language) sections flow from right to left. Clean, focused, and without affecting the whole page!

Why Not Just Use direction: rtl on body? 🤔

Good question! Setting direction: rtl on the html or body tags flips everything, which can mess with layouts for other languages. If you’re running a bilingual site, this one-liner keeps things neat and language-specific—no unexpected surprises!

What About Browser Translation? 🌍

Browsers translate and (usually) respect [lang="ar"] for layout direction. This keeps things tidy even if users switch languages. But let’s be real: browser translations aren’t perfect, so test it out and see the magic for yourself!

Got a Better Way? Prove Me Wrong! 🎉

Alright, maybe everyone already knows this 😅. If not, try it out. And if you’ve got a better solution, let me know!

Happy coding ✨

🚨Error Handling & Result Management : Debugging Disasters and Tiny Victories

ALI ALHARBI — Wed, 06 Nov 2024 05:36:34 +0000

I’ll be real: when I first started coding, error handling was an afterthought. Errors? They were just “part of the journey,” right? But, after a few too many mystery bugs and app crashes, I finally decided to tackle error handling properly. Maybe these tips will save someone else some headaches,
......or maybe I’m just here documenting my own mess. Let’s dive in!

Early Days: Playing Whack-a-Mole with Errors 🐹

At first, my error-handling strategy was more “throw in a console.log() and hope for the best.” But as projects grew, this approach crashed and burned—literally. 💥 My app would keep breaking, and I was left guessing why. Lesson learned? Errors don’t just “disappear” Ignoring them only makes them come back stronger. 😅

Learning to Respect the `try-catch` 🔍

Eventually, I realized try-catch blocks could actually be lifesavers. By wrapping code in try-catch, I could see where errors happened and even fix them. Here’s what that looked like:

try {
  const data = await fetchData();
} catch (error) {
  console.error("An error happened:", error);
}

It made debugging a lot easier! But catching errors was just the beginning—I needed to handle them properly. 🤓

Managing Results: Success or Failure? ✅❌

Next, I noticed my functions were returning... unclear results. Was null a failure? An empty result? Who knows! To avoid confusion, I started returning { success: true } for success and { success: false, error } for failures:

const result = await db.insert(data);
if (!result) throw new Error("Insert failed");
return { success: true };

Now, it’s clear whether things went right or wrong. No more head-scratching over ambiguous returns! 🤯

Error Messages in Two Languages? 🌍

One day, I found out I needed error messages in both English and Arabic. Because, you know, why not? 🥲 So I set up a little message map:

const MSGS = {
  OTP_FAILED: { 
    en: "OTP verification failed.", 
    ar: "فشل التحقق من الرمز." 
  },
};

It was surprisingly handy! Now I could grab MSGS.OTP_FAILED[locale] and return the right message in the right language. This little tweak was a game-changer. ✨

Putting It All Together 🧩

Eventually, I got to a setup that actually worked. I used try-catch at a high level, with each function either returning { success: true } or throwing an error. Here’s what it looked like:

export const otpCreate = async (otp, locale) => {
  const row = await db.insert(tableOtp).values(otp).returning();
  if (!row || row.length === 0) throw new Error(MSGS.OTP_FAILED[locale]);
  return { success: true, data: row };
};

Then, I’d handle it like this:

try {
  const result = await otpCreate(otp, locale);
  if (result.success) console.log(MSGS.OTP_CREATED[locale], result.data);
} catch (error) {
  console.error(MSGS.OTP_FAILED[locale], error.message);
}

Simple, readable, and (finally) consistent. 🙌

Final Thoughts 💡

So, that’s my journey! Here’s what I learned along the way:

Catch errors close to the source 🕵️ – It makes debugging so much easier.
Be explicit with success/failure indicators ✅❌ – No more guessing what null means.
Make error messages clear 🌍 – And if you’re working in multiple languages, a little planning goes a long way.

What about you? Have any other tricks for handling errors and results? I’d love to hear your ideas! And if this saves just one person from a debugging headache, I’ll call it a win. Happy coding! 🎉👩‍💻👨‍💻