🎨 این ریپو بهت کمک می‌کنه UIهای خفن‌تری بسازی!

اگه با React یا Next.js کار می‌کنی، این ریپو می‌تونه کلی کامپوننت آماده و قابل شخصی‌سازی در اختیارت بذاره؛ بدون اینکه مجبور باشی همه‌چیز رو از صفر بسازی.

کدها هم دست خودته و می‌تونی هر بخش رو مطابق نیاز پروژه‌ات تغییر بدی. 👌

📎 GitHub

@CodeVerse_dev

متد ()Promise.race برای API نجاتت میده

فرض کنید API شما گاهی ۱۰ ثانیه طول می‌کشد.

اما UI فقط تا ۳ ثانیه می‌تواند منتظر بماند.

اینجاست که ()Promise.race می‌تواند مفید باشد.

مثلاً:

const timeout = new Promise((_, reject) => {
    setTimeout(() => {
        reject(new Error("Request timeout"));
    }, 3000);
});

await Promise.race([
    fetch("/api/products"),
    timeout
]);

هرکدام زودتر اتفاق بیفتد، نتیجه مشخص می‌شود:

⚡‌حالا API پاسخ دهد ← ادامه بده.

⏱️ سه ثانیه تمام شود ← Timeout.

البته برای پروژه واقعی بهتر است از AbortController هم برای متوقف کردن خود Request استفاده کنید.

🎯 قابلیت Timeout فقط یک قابلیت UX نیست؛ بخشی از طراحی سیستم‌های مقاوم است.

💡 هیچ API نباید بدون محدودیت زمانی منتظر یک سرویس خارجی بماند.

@CodeVerse_dev

🚨 یک خبر مهم برای PHP Developerها

چرخه توسعه PHP 8.6 آغاز شده و نسخه‌های آزمایشی آن در حال انتشار هستند.

در حال حاضر PHP 8.6 هنوز نسخه Production نیست و نسخه‌های Alpha برای تست و بازخورد توسعه‌دهندگان منتشر شده‌اند.

هم‌زمان شاخه PHP 8.5 نیز به‌روزرسانی‌های امنیتی دریافت می‌کند؛ آخرین نسخه اعلام‌شده در منابع رسمی PHP، PHP 8.5.9 است.

پس اگر پروژه Production دارید:

❌ سراغ PHP 8.6 Alpha نروید.

اما اگر توسعه‌دهنده PHP هستید:

✅ تست نسخه‌های آزمایشی

✅ بررسی Breaking Changeها

✅ آماده‌سازی Libraryها

می‌تواند از همین حالا شروع شود.

🎯 نسخه‌های Alpha برای Production نیستند؛ برای این هستند که جامعه توسعه‌دهندگان قبل از Release نهایی مشکلات را پیدا کنند.

💡 یک Developer حرفه‌ای فقط بعد از انتشار نسخه نهایی به تغییرات فکر نمی‌کند؛ چرخه توسعه را از همان ابتدا دنبال می‌کند.

@CodeVerse_dev

چرا «بهینه‌سازی زودهنگام» خطرناک است؟

گاهی یک توسعه‌دهنده قبل از اینکه حتی مشکل Performance وجود داشته باشد، شروع می‌کند به:

❌ انجام Cache کردن همه چیز
❌ اضافه کردن Redis
❌ پیچیده کردن Queryها
❌ تبدیل معماری به Microservice

فقط چون:

«ممکنه بعداً کند بشه.»

مشکل اینجاست که هنوز نمی‌دانیم Bottleneck کجاست.

رویکرد بهتر:

Measure → Identify → Optimize → Measure Again

یعنی:

1️⃣ اندازه‌گیری کن.

2️⃣ گلوگاه واقعی را پیدا کن.

3️⃣ همان بخش را بهینه کن.

4️⃣ دوباره اندازه‌گیری کن.

🎯 باید بدونیم Performance Engineering با حدس زدن شروع نمی‌شود؛ با داده شروع می‌شود.

💡 گاهی ساده‌ترین کد، تا زمانی که واقعاً مشکل ایجاد نکرده، بهترین کد است.

آیا Retry می‌تواند یک مشکل کوچک را به فاجعه تبدیل کند؟

فرض کنید API پرداخت شما موقتاً خطا می‌دهد.

سیستم تصمیم می‌گیرد دوباره تلاش کند:

Request
   ↓
Retry
   ↓
Retry
   ↓
Retry

اگر ۱۰۰۰ درخواست هم‌زمان داشته باشید، یک خطای موقت می‌تواند ناگهان به:

🔥 هزاران Request جدید

تبدیل شود.

این همان چیزی است که باید هنگام طراحی Retry مراقبش باشید.

راهکارهای حرفه‌ای:

✅ محدود کردن تعداد Retry

✅ Exponential Backoff

✅ Jitter

✅ تشخیص خطاهای قابل Retry

و در سیستم‌های مالی:

✅ Idempotency

🎯عمل Retry باید سیستم را مقاوم‌تر کند، نه اینکه هنگام بحران فشار بیشتری به سرویس وارد کند.

💡همین Retry بدون Backoff می‌تواند یک سرویس سالم را هم وارد زنجیره شکست کند.

@CodeVerse_dev

این روزها AI دیگر فقط یک ابزار برای تکمیل کد نیست.

مدل‌های جدید به سمت:

🤖فرایند Coding Agent
🤖 اجرای چندمرحله‌ای Taskها
🤖همینطور Debugging
🤖انجام Code Review
🤖 تست و اصلاح خودکار

حرکت کرده‌اند.

حتی Google در ۱۳ آگوست ۲۰۲۶ مدل Gemini 3.7 Flash را معرفی کرد و آن را به‌طور ویژه برای Coding و Agentها معرفی کرده است.

اما یک نکته مهم:

هوش مصنوعی می‌تواند کد بیشتری تولید کند؛

اما این به معنی تولید نرم‌افزار بهتر نیست.

هرچه تولید کد ارزان‌تر شود، اهمیت این موارد بیشتر می‌شود:

✅ Architecture
✅ Testing
✅ Security
✅ Code Review
✅ System Design

🎯 آینده توسعه نرم‌افزار احتمالاً کمتر درباره «نوشتن کد» و بیشتر درباره هدایت و ارزیابی سیستم‌هایی است که کد تولید می‌کنند.

@CodeVerse_dev

🔐 ۵۰ پروژه Open Source بررسی شدند؛ یک نکته مهم درباره امنیت در عصر AI

با افزایش استفاده از AI در توسعه نرم‌افزار، یک سؤال مهم‌تر از همیشه شده:
آیا استفاده از AI واقعاً باعث امن‌تر شدن کد می‌شود؟

پلتفرم GitHub اخیراً تجربه ۵۰ پروژه Open Source را که در برنامه Secure Open Source Fund حضور داشته‌اند بررسی کرده است.

نتیجه جالب است:

🤖 هوش مصنوعی (AI) می‌تواند در شناسایی مشکلات امنیتی کمک کند؛
اما بدون بررسی و تجربه Maintainerها، به‌تنهایی کافی نیست.

در این پروژه‌ها ترکیب چند عامل اهمیت زیادی داشته:

✅ ابزارهای امنیتی خودکار
✅ استفاده کنترل‌شده از AI
✅ همینطور Code Review انسانی
✅ بررسی Dependencyها
✅ آموزش Maintainerها

💡 نکته مهم برای برنامه‌نویس‌ها:

هوش مصنوعی(AI) می‌تواند یک لایه امنیتی باشد، اما نباید تنها لایه امنیتی پروژه شما باشد.
قبل از Merge کردن کدی که AI تولید کرده، آن را Review و Test کنید.


@CodeVerse_deb

🚨 این کد روی سیستم توسعه کاملاً طبیعی به نظر می‌رسد:

$users = User::all();

۱۰۰ کاربر؟

مشکلی نیست.

۱۰۰ هزار کاربر؟

هنوز شاید متوجه مشکل نشوید.

اما وقتی جدول به چند میلیون رکورد برسد، این Query می‌تواند:

❌ حجم زیادی از RAM را مصرف کند
❌ زمان Response را بالا ببرد
❌ فشار زیادی به Database وارد کند
❌ حتی باعث Timeout شدن Request شود

اگر فقط برای پردازش اطلاعات به رکوردها نیاز دارید، از پردازش تکه‌ای استفاده کنید:

User::chunkById(1000, function ($users) {
    foreach ($users as $user) {
        // Process
    }
});

و اگر برای API فقط بخشی از داده‌ها را لازم دارید، Pagination یا Cursor Pagination انتخاب منطقی‌تری است.

🎯فضای Database را طوری Query نکن که انگار همیشه فقط ۱۰۰ رکورد دارد.

💡 کدی که امروز با ۱۰۰۰ رکورد عالی است، ممکن است فردا با ۱۰ میلیون رکورد تبدیل به یک Incident واقعی شود.

@CodeVerse_dev

⚠️ اگر با GitHub Spark کار می‌کنید، این خبر را جدی بگیرید!

این پلتفرم اعلام کرده که GitHub Spark در حال بازنشسته شدن است.

از ۴ آگوست ۲۰۲۶:

❌ کاربران جدید نمی‌توانند از Spark استفاده کنند.
❌ امکان ساخت App جدید وجود ندارد.

اما کاربران فعلی تا ۳۱ آگوست ۲۰۲۶ فرصت دارند Appهای خود را Export کنند.

اپلیکیشن‌هایی که قبلاً Deploy شده‌اند، بعد از بازنشستگی Spark نیز به کار خود ادامه خواهند داد.

📌 بنابراین اگر قبلاً با GitHub Spark پروژه ساخته‌اید:

قبل از ۳۱ آگوست حتماً پروژه‌های خود را بررسی و Export کنید.

💡 این دقیقاً یکی از دلایلی است که نشان می‌دهد نباید پروژه‌های مهم را کاملاً به یک سرویس خاص وابسته کرد.

@CodeVerse_dev

🌐 یک نکته مهم برای طراحان سایت:

فقط به ظاهر سایت در مرورگر دسکتاپ اعتماد نکن!

ممکن است صفحه روی مانیتور شما کاملاً عالی باشد، اما روی موبایل:

❌ متن‌ها بیش از حد کوچک باشند
❌ دکمه‌ها سخت لمس شوند
❌ تصاویر از صفحه بیرون بزنند
❌ منو تجربه بدی داشته باشد

قبل از انتشار هر صفحه، حداقل این ۳ حالت را بررسی کن:

📱 موبایل
📲 تبلت
💻 دسکتاپ

طراحی Responsive یعنی سایت واقعاً با کاربر سازگار باشد، نه اینکه فقط «در موبایل باز شود».

@CodeVerse_dev

داداش یه دوره پایتون پیدا کردم خفن ۱۰۰ تومن
اون دوره:

🐘 یک قابلیت کاربردی PHP که خیلی‌ها نادیده می‌گیرند:

اگر چند مقدار را می‌خواهی از یک آرایه برداری کنی، لازم نیست برای هرکدام جداگانه بنویسی:

$data = [
    'name' => 'Ali',
    'email' => 'ali@example.com',
];

['name' => $name, 'email' => $email] = $data;

حالا مستقیماً به name$ و email$ دسترسی داری.

💡 این قابلیت مخصوصاً در پروژه‌های Laravel و هنگام کار با داده‌های API می‌تواند کدت را تمیزتر و خواناتر کند.

@CodeVerse_dev

🤖 یک تغییر بزرگ در دنیای توسعه نرم‌افزار:

برنامه‌نویسی با کمک AI دیگر فقط درباره «تولید کد» نیست.

نسل جدید ابزارهای AI می‌توانند در بخش‌هایی مثل:

🔹 تحلیل پروژه
🔹 پیدا کردن باگ
🔹 نوشتن تست
🔹 کار با Git
🔹 اجرای وظایف چندمرحله‌ای

به توسعه‌دهنده کمک کنند.

اما یک نکته مهم وجود دارد:

اگر اصول برنامه‌نویسی را بلد نباشی، AI فقط می‌تواند کد بیشتری تولید کند؛ نه اینکه الزاماً کد بهتری بسازد.

💬 به نظرت AI در آینده بیشتر «دستیار برنامه‌نویس» خواهد بود یا «جایگزین بخشی از برنامه‌نویس‌ها»؟

@CodeVerse_dev

🔥 چرا !important می‌تونه CSS پروژه‌ت رو نابود کنه؟

یه استایل اعمال نمیشه؟

اولین واکنش خیلی‌ها:

.button {
    color: red !important;
}

کار نکرد؟

.button {
    color: blue !important;
}

و این چرخه ادامه پیدا می‌کنه 😄

مشکل اینجاست که !important شاید همون لحظه مشکلت رو حل کنه، ولی Specificity کدت رو پیچیده‌تر می‌کنه.

بعداً برای Override کردنش مجبور میشی دوباره Specificity بالاتری بنویسی یا حتی !important دیگه‌ای استفاده کنی.

نتیجه:

!important
   ↓
!important
   ↓
!important
   ↓
💀 CSS Hell

قبل از استفاده از !important اول بررسی کن:

*آیا Selector قوی‌تری وجود داره؟
* ترتیب CSSها درسته؟
* یک استایل قالب یا افزونه داره Override می‌کنه؟
* اصلاً ساختار کلاس‌ها درست طراحی شده؟

استفاده از important! ابزار بدی نیست؛ استفاده بی‌دلیل ازش بده.

گاهی بهترین CSS، کدی نیست که اضافه می‌کنی؛ کدی‌ـه که دلیل وجودش رو پیدا می‌کنی و حذفش می‌کنی.

@CodeVerse_dev

🔴زبان PHP وقتی زیادی باهات راه میاد، ممکنه دردسر درست کنه!

یکی از ویژگی‌های جالب PHP اینه که در بعضی شرایط خودش سعی می‌کنه نوع داده‌ها رو تبدیل کنه تا عملیات موردنظر انجام بشه.

مثلاً ممکنه فکر کنی داری با یک عدد کار می‌کنی، ولی PHP با توجه به context و نوع عملگر، نوع داده رو تبدیل کنه و نتیجه‌ای بده که دقیقاً انتظارشو نداشتی 😅

به این رفتار می‌گن Type Juggling.

در پروژه‌های کوچیک شاید خیلی به چشمت نیاد، ولی وقتی وارد پروژه‌های بزرگ‌تر مثل Laravel می‌شی، همین رفتارهای به ظاهر ساده می‌تونن تبدیل به باگ‌های عجیب و سخت‌پیدا بشن.

برای همین چندتا چیز خیلی مهم می‌شن:

🔹 استفاده درست از Type Declaration
🔹 مناسب بودن Validation
🔹 استفاده از === به جای == وقتی مقایسه دقیق می‌خوای
🔹 شناخت رفتار Typeها در PHP
🔹 و در بعضی بخش‌ها استفاده از strict_types

البته یه نکته مهم اینجاست:

قابلیت strict_types قرار نیست کل Type Juggling در PHP رو غیرفعال کنه!

این قابلیت بیشتر روی Type Declarationهای اسکالر در سطح فایل تأثیر می‌ذاره و باعث می‌شه رفتار بعضی تبدیل‌های ضمنی در فراخوانی توابع و متدها قابل‌پیش‌بینی‌تر بشه.

پس قرار نیست با فعال کردنش، ناگهان تمام مشکلات مربوط به Typeها حل بشه. 😄

💡 یه نکته مهم‌تر:

هرچی پروژه بزرگ‌تر می‌شه، شناخت خود زبان برنامه‌نویسی اهمیت بیشتری پیدا می‌کنه.

خیلی از باگ‌های عجیب لزوماً از منطق پیچیده پروژه نیستن؛ گاهی فقط از یه فرض اشتباه درباره نوع داده‌ها شروع می‌شن.

زبان PHP در ظاهر ساده‌ست، ولی وقتی عمیق‌تر می‌ری، می‌بینی کلی جزئیات داره که شناختنشون می‌تونه کیفیت کدت رو خیلی بهتر کنه. 🚀

@CodeVerse_dev

🎨 افزونه کروم CSS Peeper؛ استایل سایت‌ها رو سریع بررسی کن!

اگه طراح سایت یا Front-End کار می‌کنی، حتماً پیش اومده بخوای بدونی یک سایت از چه فونت، رنگ یا استایلی استفاده کرده.

ابزار CSS Peeper این کار رو خیلی ساده‌تر می‌کنه؛ بدون اینکه مجبور باشی بین حجم زیادی از کدهای CSS دنبال یک مقدار خاص بگردی. 👌

🔥 امکانات کاربردی:

✅ مشاهده رنگ‌های استفاده‌شده در سایت
✅ بررسی فونت‌ها و تایپوگرافی
✅ استخراج اطلاعات تصاویر
✅ مشاهده بعضی از ویژگی‌های CSS عناصر
✅ مناسب برای بررسی UI و الهام گرفتن از طراحی سایت‌ها
✅ صرفه‌جویی در زمان هنگام بررسی استایل صفحات

💡 یک سایت خوب دیدی و می‌خوای بفهمی چطور طراحی شده؟
افزونه CSS Peeper رو باز کن و خیلی سریع اطلاعات مهم طراحی رو بررسی کن. 🚀

@CodeVerse_dev

⚡️ چرا alt فقط برای سئو نیست؟

هنوز بعضی‌ها فکر می‌کنن alt رو فقط برای اینکه گوگل عکس رو بهتر بفهمه می‌نویسن.

در حالی که کاربرد مهم‌تری هم داره.

فرض کن تصویر به هر دلیلی لود نشه.

یا کاربر از Screen Reader استفاده کنه.

این:

<img src="team.jpg" alt="تیم توسعه شرکت">

به مرورگر و ابزارهای کمکی می‌گه تصویر چه مفهومی داشته.

اما این:

<img src="team.jpg" alt="image123">

تقریباً هیچ ارزش واقعی نداره.

حتی بدتر:

اگر تصویر صرفاً تزئینیه و هیچ اطلاعاتی منتقل نمی‌کنه، بهتره:

<img src="shape.svg" alt="">

بنویسی تا Screen Reader الکی اون رو برای کاربر نخوانه.

پس alt رو برای پر کردن یک فیلد ننویس.

از خودت بپرس:

> اگر تصویر نمایش داده نشه، کاربر چه چیزی باید بدونه؟

همون رو داخل alt بنویس.

این یعنی Accessibility واقعی، نه فقط تیک زدن یک گزینه در چک‌لیست سئو.


@CodeVerse_dev

🧩 چرا بعضی سایت‌ها روی موبایل حس «اپلیکیشن» میدن؟

یه سایت می‌تونه کاملاً با HTML، CSS و JavaScript ساخته شده باشه، ولی روی موبایل حس یک اپلیکیشن واقعی رو بده.

یکی از دلایلش Web App Manifestـه.

با یک فایل Manifest می‌تونی اطلاعاتی مثل این‌ها رو به مرورگر بدی:

{
  "name": "My Website",
  "short_name": "MyApp",
  "start_url": "/",
  "display": "standalone"
}

حالا اگر سایت شرایط لازم رو داشته باشه، کاربر می‌تونه اون رو به Home Screen اضافه کنه و در حالت standalone اجراش کنه.

یعنی:

بدون نوار آدرس معمول مرورگر
با آیکون اختصاصی
با تجربه‌ای شبیه اپلیکیشن

این یکی از پایه‌های PWA محسوب میشه.

جالب‌تر اینکه PWA فقط یک ظاهر اپلیکیشنی نیست؛ می‌تونه قابلیت‌هایی مثل Offline Experience و Cache هوشمند هم داشته باشه.

وب هنوز خیلی بیشتر از چیزی که اکثر سایت‌ها استفاده می‌کنن قابلیت داره.


@CodeVerse_dev

چرا const همیشه به معنی «غیرقابل تغییر» نیست؟ 🤔

احتمالاً می‌دونی وقتی متغیری رو با const تعریف می‌کنی، دیگه نمی‌تونی مقدار جدیدی بهش نسبت بدی:

const name = "Ahmad";

name = "Ali"; // ❌ Error

اما داستان برای Object و Array کمی فرق می‌کنه 👀

const user = {
  name: "Ahmad"
};

user.name = "Ali";

console.log(user.name);
// Ali

چرا؟ 🤔

چون const جلوی تغییر reference رو می‌گیره، نه تغییر محتوای Object یا Array رو.

یعنی این کار ممنوعه:

user = {}; // ❌

ولی این کاملاً مجازه:

user.name = "Ali"; // ✅

برای Array هم همین اتفاق میفته:

const skills = ["JS", "PHP"];

skills.push("React");

console.log(skills);
// ["JS", "PHP", "React"]

پس یه نکته مهم:

قابلیت const یعنی reference قابل تغییر نیست، نه اینکه داده داخلش حتماً immutable باشه. 🔥

این تفاوت توی پروژه‌های بزرگ JavaScript خیلی مهم میشه.

@CodeVerse_dev

🤖 این ریپو برای کار با AI Agentها خیلی به‌دردت می‌خوره!

ریپوی Anthropic Skills مجموعه‌ای از Skillهای آماده و نمونه برای Agentهاست که به AI کمک می‌کنن کارهای تخصصی رو بهتر و به‌شکل قابل‌تکرار انجام بده.

از کارهای توسعه و برنامه‌نویسی گرفته تا طراحی، کار با اسناد و اتوماسیون؛ می‌تونی ساختار Skillها رو ببینی و حتی ازشون برای ساخت Skillهای خودت ایده بگیری.

📎 GitHub

@CodeVerse_dev

چرا == و === در JavaScript این‌قدر مهمن؟ 🤔

یکی از چیزهایی که خیلی وقت‌ها باعث باگ‌های عجیب توی JavaScript میشه، استفاده اشتباه از == به جای === هست.

ببین:

5 == "5"
// true

چون == قبل از مقایسه، سعی می‌کنه نوع داده‌ها رو تبدیل کنه.

اما:

5 === "5"
// false

چون === هم مقدار و هم نوع داده رو بررسی می‌کنه.

یه مثال جالب‌تر:

0 == false
// true

0 === false
// false

یا:

"" == false
// true

"" === false
// false

اینجاست که == می‌تونه توی پروژه‌های واقعی دردسر درست کنه؛ مخصوصاً وقتی داده از API، فرم یا دیتابیس دریافت می‌کنی.

پس کدوم رو استفاده کنیم؟

در اکثر مواقع:

=== 

انتخاب امن‌تر و قابل‌پیش‌بینی‌تریه. ✅

== الزاماً بد نیست، ولی باید دقیقاً بدونی Type Coercion در اون موقعیت چه رفتاری داره.

یه قانون ساده برای پروژه‌های واقعی:

اگر دلیل مشخصی برای استفاده از == نداری، از === استفاده کن. 🔥

@CodeVerse_dev