$

ملاحظات من مكتب مبرمج — حول الشيفرات، الأنظمة، والمتعة الغريبة لتتبع الأخطاء في الثانية صباحاً.

أنا أليكس ريفيرا — مهندس برمجيات أكتب عن هذه الحرفة. تايب سكريبت اليوم، رست غداً، ولغة التجميع للمتعة. مقال جديد الثلاثاء من كل أسبوعين.

اقرأ الأحدث اشترك

142

مقالاً نُشر

8.2k

قارئ منتظم

منذ آخر تحديث

∞

أكواب من القهوة

مرر للأسفل

JavaScript·TypeScript·Rust·Go·WebAssembly·PostgreSQL·Redis·Docker·Kubernetes·Linux·NeoVim· JavaScript·TypeScript·Rust·Go·WebAssembly·PostgreSQL·Redis·Docker·Kubernetes·Linux·NeoVim·

// ملاحظات حديثة

أحدث الكتابات

جميع المنشورات

JavaScript

11.12.24 — قراءة 8 دقائق

عن العنف الهادئ للتحويلات الضمنية

جافا سكريبت ستسمح لك بإضافة [] إلى {} وتشكرك على ذلك. دليل ميداني للأخطاء الشائعة والقاتلة.

اقرأ المقال ←

Compilers

10.28.24 — قراءة 14 دقيقة

محلل لغوي (Lexer)، يدوياً، في ظهيرة يوم أحد

تجاوز التعبيرات النمطية. تجاوز المولدات الجاهزة. مئتا سطر من عبارات الاختيار (switch) وستفهم شيئاً جديداً عن كل لغة استخدمتها على الإطلاق.

اقرأ المقال ←

Error Handling

10.14.24 — قراءة 6 دقائق

لماذا أزلت كل كتل Try/Catch من قاعدة شيفراتي

أنواع النتائج (Result types)، قنوات الأخطاء، والسلام الغريب للسماح للأشياء بالانهيار بصوت عالٍ أثناء بيئة التطوير.

اقرأ المقال ←

// مقتطف الأسبوع

useTypewriter() — الخطاف الذي يشغل هذه الصفحة.

الترحيب الوامض في أعلى هذه الصفحة ليس حركة CSS تقليدية — بل هو خطاف (Hook) حقيقي مبني بـ React. كتابة، إيقاف، حذف، ثم تقدم. اضغط على نسخ والصقه في مشروعك القادم.

← بدون مكتبات تابعة خارجية (Dependencies)
← حوالي 30 سطراً، مكتوبة بالكامل وأنواع آمنة
← تنظيف آمن لتسريبات الذاكرة عند الإزالة (Unmount)

React TypeScript Hooks

useTypewriter.ts

// A self-cleaning typewriter hook. No deps, ~30 lines.
import { useState, useEffect } from 'react';

export function useTypewriter(
  words: string[],
  speed = 80,
  pause = 1800,
) {
  const [text, setText] = useState('');
  const [i, setI] = useState(0);
  const [del, setDel] = useState(false);

  useEffect(() => {
    const word = words[i % words.length];
    const delay = del ? speed / 2 : speed;

    const t = setTimeout(() => {
      setText(del
        ? word.slice(0, text.length - 1)
        : word.slice(0, text.length + 1));
    }, delay);

    if (!del && text === word) {
      const p = setTimeout(() => setDel(true), pause);
      return () => { clearTimeout(t); clearTimeout(p); };
    }
    if (del && text === '') {
      setDel(false);
      setI(i + 1);
    }
    return () => clearTimeout(t);
  }, [text, del, i, words, speed, pause]);

  return text;
}

usage.tsx

function Hero() {
  const greeting = useTypewriter([
    'مرحباً أيها المسافر.',
    'لقد وجدت /dev/log.',
    'console.log(love)',
  ]);

  return <h1>{greeting}</h1>;
}