CodeVerse | دنیای برنامه نویسان
1.06K subscribers
65 photos
6 videos
72 links
💻 ترفند برنامه نویسی PHP & JavaScript
🚀 آموزش وردپرس
💡 ترفندهای کاربردی
🤖 هوش مصنوعی و تکنولوژی
👨‍💻آموزش • ترفند • پروژه

@ideveloperweb_z |ارتباط
Download Telegram
🔴زبان 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
❤8
🎨 افزونه کروم CSS Peeper؛ استایل سایت‌ها رو سریع بررسی کن!

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

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

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

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

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

@CodeVerse_dev
❤9
⚡️ چرا 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
👍8❤3
🧩 چرا بعضی سایت‌ها روی موبایل حس «اپلیکیشن» میدن؟

یه سایت می‌تونه کاملاً با 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
❤6👍2
چرا 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
👏5👍3❤2
🤖 این ریپو برای کار با AI Agentها خیلی به‌دردت می‌خوره!

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

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

📎 GitHub

@CodeVerse_dev
❤6🤣1
چرا == و === در JavaScript این‌قدر مهمن؟ 🤔

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

ببین:

5 == "5"
// true

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

اما:

5 === "5"
// false

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

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

0 == false
// true

0 === false
// false

یا:

"" == false
// true

"" === false
// false

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

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

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

=== 

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

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

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

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

@CodeVerse_dev
❤3👍3🤣1
معرفی ابزار جدید Oxc

ابزار Oxc که مخفف Oxidize JavaScript Compiler هست، این روزها حسابی سر و صدا کرده. این ابزار که با زبان Rust نوشته شده، قراره جایگزین ابزارهایی مثل ESLint، Prettier و Babel بشه.

❌ مشکل ابزارهای قدیمی:

· سرعت پایین در پروژه‌های بزرگ
· مصرف بالای حافظه
· وابستگی به Node.js

✅ مزایای Oxc:

· سرعت ۱۰ برابر سریع‌تر از ESLint
· مصرف حافظه بسیار کمتر
· پشتیبانی از جدیدترین سینتکس‌های جاوااسکریپت
· کاملاً با پروژه‌های React، Vue و Next.js سازگاره

💡 اگر پروژه‌های جاوااسکریپتی سنگین داری، حتماً Oxc رو امتحان کن. سرعت لینت‌کردن و بیلد پروژه‌ت رو چندین برابر میکنه.

@CodeVerse_dev
👍4❤3
🌐 یه قابلیت HTML که می‌تونه تجربه کاربر رو خیلی بهتر کنه

فرض کن کاربر داخل یک فرم اطلاعات زیادی وارد کرده.

صفحه Reload میشه و همه‌چیز از بین میره.

اینجاست که قابلیت autocomplete می‌تونه کمک کنه.

مثلاً:

<input
type="email"
name="email"
autocomplete="email"
>

یا:

<input
type="text"
name="name"
autocomplete="name"
>

مرورگر از این اطلاعات برای پیشنهاد و تکمیل خودکار فرم استفاده می‌کنه.

برای آدرس، تلفن، ایمیل، نام و اطلاعات پرداخت هم مقدارهای استاندارد مختلفی وجود داره.

نکته جالب اینه که این فقط یک قابلیت برای راحتی کاربر نیست.

فرم استاندارد = تجربه بهتر + خطای کمتر + تکمیل سریع‌تر

به جای اینکه با JavaScript یک سیستم AutoFill عجیب بسازی، اول ببین خود HTML چه قابلیتی برات فراهم کرده.

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


@CodeVerse_dev
👍9❤2
🚀 چرا بعضی سایت‌ها با کلی انیمیشن هنوز روان اجرا میشن؟

مشکل انیمیشن معمولاً خود انیمیشن نیست؛
مشکل اینه که چه چیزی رو Animate می‌کنی.

مثلاً این:

.box {
left: 100px;
transition: left .3s;
}

ممکنه باعث بشه مرورگر مجبور بشه Layout رو دوباره محاسبه کنه.

ولی برای خیلی از انیمیشن‌ها، استفاده از:

.box {
transform: translateX(100px);
transition: transform .3s;
}

انتخاب بهتریه.

چرا؟

چون transform معمولاً برای انیمیشن‌های حرکتی مناسب‌تره و می‌تونه فشار روی فرآیند Layout رو کمتر کنه.

قاعده ساده:

برای حرکت و Scale و Rotate، اول به transform فکر کن.

نه اینکه هر چیزی رو با:

top
left
width
height

انیمیت کنی.

یه انیمیشن قشنگ که روی موبایل 20FPS اجرا بشه، دیگه قشنگ نیست. 😄

طراحی خوب فقط ظاهر نیست؛ باید روان هم باشه.

@CodeVerse_dev
❤3👍3🤣1
ترفند طلایی دیباگ در وردپرس با WP_DEBUG

خیلی از دولوپرها وقتی سایت ارور میده، مستقیم میرن سراغ فایل‌های لاگ یا پنل هاستینگ. اما یک راه خیلی سریع‌تر و حرفه‌ای‌تر وجود داره.

✅ ترفند: فعال‌سازی WP_DEBUG در فایل wp-config.php

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

· تمام ارورهای PHP و وردپرس توی فایل debug.log ذخیره میشن
· به کاربران سایت هیچ اروری نمایش داده نمیشه
· می‌تونی بدون نگرانی از خراب شدن ظاهر سایت، خطاها رو پیدا کنی

⚠️ نکته مهم: این تنظیمات رو فقط در محیط توسعه فعال کن و هیچوقت در سایت زنده (پراوداکشن) از WP_DEBUG_DISPLAY استفاده نکن.

@CodeVerse_dev
❤3👍3
ابزار کاربردی برای برنامه‌نویسان PHP - معرفی Laravel Herd

اگر با PHP و لاراول کار میکنی، حتماً میدونی که راه‌اندازی محیط توسعه محلی همیشه یه دردسر بوده. اما ابزار جدید Laravel Herd این مشکل رو یه بار برای همیشه حل کرده.

✅ ویژگی‌های Laravel Herd:

· نصب یک‌کلیکی PHP، MySQL و Nginx
· بدون نیاز به Docker یا VirtualBox
· پشتیبانی از چندین نسخه PHP به‌صورت همزمان
· مدیریت دامنه‌های محلی با پسوند .test
· کاملاً رایگان برای استفاده شخصی

⚠️ نکته مهم: این ابزار مخصوص سیستم‌عامل macOS هست و برای ویندوز هم نسخه‌ای به نام Laragon وجود داره که عملکرد مشابهی داره.

💡 اگر از XAMPP یا MAMP خسته شدی، حتماً Herd رو امتحان کن. سرعت راه‌اندازی پروژه‌هات چند برابر میشه.

@CodeVerse_dev
❤6
🔥 چرا ()isset و ()empty تو PHP همیشه اون چیزی که فکر می‌کنی نیستن؟

یه اشتباه رایج:

if (!empty($value)) {
// ...
}

ظاهرش ساده‌ست.

ولی ()empty فقط null رو خالی در نظر نمی‌گیره.

مقادیر مختلفی مثل:

0
"0"
false
""
null
[]

می‌تونن برای ()empty خالی محسوب بشن.

حالا فرض کن:

$discount = 0;

if (!empty($discount)) {
applyDiscount($discount);
}

اینجا ممکنه منطق برنامه‌ت اون چیزی نباشه که انتظار داشتی؛ چون 0 از نظر ()empty مقدار خالی محسوب میشه.

اگر واقعاً می‌خوای مشخص کنی مقدار وجود داره و دقیقاً چه نوعی داره، مقایسه صریح خیلی وقت‌ها انتخاب بهتریه:

if ($discount !== null) {
// ...
}

زبان PHP به خاطر Type Juggling انعطاف زیادی داره؛
ولی همین انعطاف اگر حواست نباشه، تبدیل به باگ میشه.

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

@CodeVerse_dev
❤6
⚡قابلیت Superpowers؛ یه ریپو برای قوی‌تر کردن Coding Agentها

اگه از Claude Code، Codex، Cursor یا ابزارهای مشابه استفاده می‌کنی، این ریپو می‌تونه خیلی به کارت بیاد.

این ابزار Superpowers به Coding Agent کمک می‌کنه قبل از اینکه مستقیم بره سراغ کدنویسی، اول مسئله رو بررسی کنه، برای پیاده‌سازی برنامه‌ریزی کنه، تست بنویسه و بعد کد رو مرحله‌به‌مرحله اجرا و بررسی کنه.

یعنی به‌جای اینکه Agent فقط «کد تولید کنه»، سعی می‌کنه مثل یک فرآیند مهندسی نرم‌افزار واقعی عمل کنه. 👌

📎 GitHub


@CodeVerse_dev
❤5
🐘 نسخه PHP 8.5.9 منتشر شد؛ یک آپدیت امنیتی و Bug Fix مهم

اگر با PHP کار می‌کنی، نسخه فعلی شاخه 8.5 در حال حاضر PHP 8.5.9 است.

این نسخه در سری Patch Releaseهای PHP قرار دارد و شامل اصلاحات امنیتی و رفع Bugهاست. نسخه‌های 8.2، 8.3، 8.4 و 8.5 نیز در ماه آگوست Patchهای جدید دریافت کرده‌اند.

🔎 PHP 8.5 چیست؟

نسخه اصلی جدید PHP است که قابلیت‌های جدید زبان را در اختیار توسعه‌دهندگان قرار می‌دهد و تا پایان سال 2027 پشتیبانی می‌شود.

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

قبل از Update:

Backup
↓
Test
↓
Check Dependencies
↓
Update
↓
Monitor

❌ مستقیم روی Production آپدیت نکن.

💡قابلیت Patch Releaseها معمولاً برای دریافت اصلاحات امنیتی و Bug Fixها مهم‌اند؛ بنابراین «آپدیت نکردن چون Feature جدیدی ندارد» همیشه تصمیم درستی نیست.

@CodeVerse_dev
❤6
🔐 یک Plugin می‌تواند کل سایت را در معرض خطر قرار دهد

یکی از مشکلات امنیتی اخیر WordPress مربوط به Forminator Forms بوده است.

حالا Forminator چیست؟

یک Plugin برای ساخت فرم‌ها، نظرسنجی‌ها و فرم‌های تعاملی در WordPress است.

آسیب‌پذیری CVE-2026-15748 در نسخه‌های 1.56.1 و پایین‌تر گزارش شده و شدت آن CVSS 9.8 اعلام شده است.

در شرایط مشخص، مهاجم بدون احراز هویت می‌توانست فایل مخرب PHP آپلود کند و در نهایت کنترل سایت را به دست بگیرد. این آسیب‌پذیری صدها هزار نصب را در معرض خطر قرار داده است.

🎯 درس مهم برای WordPress Developerها:

امنیت فقط مربوط به WordPress Core نیست.

WordPress Core
+
Plugins
+
Themes
+
Server
=
Security Surface

💡 اگر سایت WordPress داری، Pluginهای نصب‌شده را هم مثل Core جدی بگیر و نسخه‌های آسیب‌پذیر را سریع Update کن.

@CodeVerse_dev
❤7
یه مدت فکر می‌کردم وقتی کدم کار می‌کنه، یعنی کارم رو درست انجام دادم.

ولی بعداً فهمیدم بین «کار کردن کد» و «خوب بودن کد» تفاوت خیلی زیادی وجود داره.

ممکنه یه کد کاملاً درست اجرا بشه، ولی:
🔸 نگهداریش سخت باشه
🔸 باگ‌گیریش زمان‌بر باشه
🔸 تغییر دادنش کل پروژه رو تحت تأثیر قرار بده

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

«چطوری اینو اجرا کنم؟»

بلکه از خودم می‌پرسم:

«اگه ۶ ماه دیگه بخوام تغییرش بدم، هنوز از این کد راضی هستم؟»

همین تغییر دیدگاه، کیفیت کدهام رو خیلی بهتر کرد.

📢 @CodeVerse_dev
❤8
🔐 یک اشتباه کوچک در API می‌تواند تبدیل به مشکل امنیتی بزرگ شود

فرض کنید API شما این درخواست را دریافت می‌کند:
GET /api/users/125/orders

اگر فقط بررسی کنید که User شماره 125 وجود دارد، کافی نیست.

سؤال مهم این است:

آیا کاربر فعلی اجازه مشاهده سفارش‌های User 125 را دارد؟

این همان جایی است که مفهوم Broken Object Level Authorization (BOLA) مطرح می‌شود.

شناسه را نمی‌توان به‌عنوان مجوز در نظر گرفت.
❌ user_id = 125
≠
✅ «کاربر فعلی اجازه دسترسی به User 125 را دارد»

در APIهای واقعی، Authentication فقط می‌گوید «تو کی هستی».

اینجاست که Authorization مشخص می‌کند:

«به چه چیزی اجازه دسترسی داری؟»

این دو را هیچ‌وقت یکی نگیرید.

@CodeVerse_dev
❤3👍3
ترفند کاهش مصرف حافظه در حلقه‌های سنگین PHP

خیلی از دولوپرها وقتی با آرایه‌های بزرگ کار میکنن، از foreach استفاده میکنن و حافظه سرور رو به سرعت پر میکنن. اما یه راه هوشمندانه‌تر وجود داره.

✅ ترفند: استفاده از Generators به جای آرایه‌های کامل
function getLargeData() {
for ($i = 0; $i < 1000000; $i++) {
yield $i;
}
}

foreach (getLargeData() as $item) {
// پردازش هر آیتم به‌صورت جداگانه
}

مزایا:

· مصرف حافظه ثابت (فقط یک آیتم در هر لحظه)
· مناسب برای پردازش فایل‌های بزرگ CSV یا JSON
· کاهش ۹۰٪ مصرف حافظه در پروژه‌های حجیم

⚠️ نکته مهم: Generatorها رو نمیشه چندبار حلقه زد. اگر نیاز به چندبار پیمایش داری، باید دیتا رو در آرایه ذخیره کنی.

@CodeVerse_dev
❤3👍3🤣1
معرفی CSS Container Queries در تمام مرورگرها

بعد از سالها انتظار، Container Queries بالاخره در تمام مرورگرهای مدرن پشتیبانی میشه. این یعنی دیگه برای طراحی ریسپانسیو فقط به Viewport وابسته نیستی!

✅ تفاوت با Media Queries:

· قابلیت Media Queries: بر اساس اندازه صفحه نمایش
· قابلیت Container Queries: بر اساس اندازه المان والد

✅ مثال کاربردی:
.card-container {
container-type: inline-size;
}

@container (min-width: 500px) {
.card {
display: flex;
flex-direction: row;
}
}

@container (max-width: 499px) {
.card {
display: flex;
flex-direction: column;
}
}

💡 این قابلیت برای طراحی کامپوننت‌های مستقل مثل کارت‌های محصول، ویجت‌ها و بخش‌های مختلف سایت فوق‌العاده هست. دیگه نیازی نیست کل سایت رو بر اساس اندازه صفحه تغییر بدی!

@CodeVerse_dev
❤6
ابزار حرفه‌ای مدیریت خطاها در جاوااسکریپت - معرفی Sentry

همه ما تجربه خطاهای عجیب در مرورگر کاربران رو داشتیم که توی محیط توسعه هیچوقت رخ نمیدن. Sentry این مشکل رو یه بار برای همیشه حل میکنه.


· نمایش دقیق خطا به همراه stack trace کامل
· پشتیبانی از Vue، React، Angular و حتی وردپرس

✅ نصب در پروژه جاوااسکریپت:

npm install @sentry/browser
import * as Sentry from '@sentry/browser';
Sentry.init({
dsn: 'YOUR_DSN_URL',
environment: 'production'
});

// ثبت دستی خطا
try {
// کد شما
} catch (error) {
Sentry.captureException(error);
}

💡 نسخه رایگان Sentry برای پروژه‌های کوچک و متوسط کاملاً کافیه. حتماً استفاده کن تا دیگه کاربرات بهت نگن "سایت خرابه" و خودت زودتر از همه متوجه خطا بشی!

@CodeVerse_dev
❤3👍3