خروجی این کد چیه؟

چرا Clean Code مهمه؟
کد تمیز یعنی کدی که بعداً خودت ببینی و حالِت بد نشه. به همین سادگی.

چه فایده‌ای داره؟
- دیباگ راحت‌تر
- تغییر ساده‌تر
- کار تیمی بهتر

اصول ساده Clean Code:
- اسم درست انتخاب کن
مثلا countUsers بهتر از x یا data1 ـه. مغز آدم autocomplete نداره.
- تابع کوتاه باشه
اگه تابع رو اسکرول می‌کنی، یعنی زیادی حرف زده.
- فقط یه کار انجام بده
تابع نباید هم یوزر بسازه، هم لاگین کنه، هم چای بریزه.
- کد تکراری ننویس
کپی‌پیست زیاد = باگ‌های تکراری.

خلاصه:
کد تمیز = کار کمتر در آینده.

ابزار کاربردی: Lodash – جعبه‌ابزار توابع آماده
ا Lodash یه کتابخانه قدرتمنده پر از توابع آماده برای کار با آرایه، آبجکت، استرینگ و ...

مثال: حذف مقدارهای خالی از آرایه

import _ from "lodash";

const data = ["Ali", "", null, "Sara", undefined, " "];
const cleaned = _.compact(data);

console.log(cleaned);
// ["Ali", "Sara", " "]

مزایا:
- ساده‌سازی کد
- جلوگیری از باگ
- توابع آماده مهم و کاربردی مثل: debounce, cloneDeep, merge, uniq

لحظات مشترک javscript developerها - قسمت اول (کلاسیک)

- از console.log() به عنوان ابزار اصلی دیباگ استفاده کردی، و کار کرد.
- تو لاگ‌ها undefined رو دیدی و گفتی: عه چرا :/
- بدون اینکه دقیقاً بدونی چرا، === رو به جای == گذاشتی، و همه‌چیز درست شد.
- کد نوشتی که دیروز کار می‌کرد، امروز کار نمی‌کنه، بدون اینکه حتی چیزی رو دست بزنی.
- تلاش برای نوشتن map، filter و reduce تو یه خط
- با CORS جنگیدی و باختی.
- چجور div رو ببرم وسط؟؟؟

یه سایت پر از کامپوننت‌های UI، دکمه‌های خفن، چک‌باکس‌ها، loading، input و ...

https://uiverse.io/elements

خبر: CHATGPT عاشق دستورات تند است : وقتی ادب کم میشود، دقت بالا می رود.


+مقالمو یه جوری بنویس که انگار تو ننوشتی پدرسگ :)

چرا بدون انگلیسی، یاد گرفتن برنامه‌نویسی مثل رانندگی با چشم بسته‌ست؟

برنامه‌نویسی فقط کد نوشتن نیست، در واقع نصفش خوندنه!
مستندات، ارورها، آموزش‌ها، فروم‌ها (مثل Stack Overflow) — همه به انگلیسی‌ان.

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

یه مثال ساده:
کسی که فقط فارسی سرچ می‌کنه، شاید یه جواب سطحی پیدا کنه.
ولی اونی که انگلیسی سرچ می‌کنه، وسط یه معدن طلای اطلاعاته.

پس اگه دنبال رشد واقعی تو برنامه‌نویسی‌ای، حتما روی زبان انگلیسی هم وقت بذار.

استفاده از Array.at()

از ES2022 به بعد، جاوااسکریپت یه متد جدید به آرایه‌ها اضافه کرده به اسم .at()
که دسترسی به المنت‌ها رو خیلی راحت‌تر و خواناتر می‌کنه.


مثال:

const numbers = [10, 20, 30, 40];

console.log(numbers.at(0));  // 10
console.log(numbers.at(-1)); // 40

چرا بهتره؟
• دیگه لازم نیست بنویسی
array[array.length - 1]
• از ایندکس منفی پشتیبانی می‌کنه
• کد کوتاه‌تر و خواناتر میشه

نکته:
at() هم توی آرایه‌ها کار می‌کنه هم روی استرینگ‌ها:

"Hello".at(-1); // "o"

امروز در یکی از مصاحبه‌ های فنی، سوال جالبی ازم پرسیده شد:

💬 «Tailwindcss دقیقا چطور استایل‌ ها رو مدیریت میکنه؟
یعنی برای هر کلاس مثل p-1, p-2 فایل CSS جدا می‌ سازه؟
پس حجم فایل باید خیلی زیاد بشه، نه؟»

🟢 در جواب باید گفت:
Tailwind از JIT Compiler استفاده میکنه. یعنی فقط همون کلاس‌ هایی که در پروژه استفاده میکنی، در خروجی نهایی CSS ساخته میشن.
در نتیجه فایل خروجی معمولا فقط چند ده کیلو بایته.

همچنین مصاحبه گر سوالی در مورد تفاوت بین ورژن 3 و 4 پرسید:
💬 «در ورژن ۴، آیا دیگه نمیتونیم tailwind.config.js داشته باشیم؟»

🟢 باید گفت که میشه.
در Tailwind 4، فایل config اختیاری شده، نه اینکه حذف‌ شده باشه.
اگه فقط بخوای از تنظیمات پیشفرض استفاده کنی، نیازی بهش نداری،
ولی اگه بخوای theme یا plugin های خودت رو تعریف کنی، هنوزم کاملا پشتیبانی میشه.

حتی یه قدم جلوتر رفت و گفت:
💬 «فرض کن میخوای config رو از سمت سرور بگیری، اون وقت چی؟»

🟢 در جوابش، Tailwind ذاتا runtime-config نداره،
اما میشه با CSS Variables یا تولید فایل config در زمان build از سرور، این رفتار رو شبیه‌ سازی کرد.

مصاحبه گر خیلی تلاش داشت از تعاریف کلیشه ای فاصله بگیرم و فهم و درک من رو به شکل عمیق تر بسنجه.

گفتم با شما هم به اشتراک بذارم. امیدوارم مفید بوده باشه.

Matin Taherzadeh

یه مخزن جذاب تو گیت‌هاب هست که بهت یاد می‌ده چطور فقط با CSS بدون نیاز به جاوااسکریپت، کلی کار خفن مثل انیمیشن و منو درست کنی!

برای کسایی که دنبال سایت‌های سبک و سریع هستن عالیه.

اگر دوست داری کدهات ساده‌تر و بهینه‌تر باشن، حتما یه سر بهش بزن!

لینکش

https://github.com/you-dont-need/You-Dont-Need-JavaScript

Farhad Safari

ا SDUI یعنی چی؟

ا SDUI مخفف Server-Driven UI هست، یعنی رابط کاربری هدایت‌شده از سمت سرور.
به زبان ساده:
به‌جای اینکه UI رو کامل توی اپ یا فرانت‌اند بنویسیم، سرور تصمیم می‌گیره که چه UIی باید نشون داده بشه و اون رو به صورت ساختاریافته (مثلاً JSON) برای کلاینت می‌فرسته.

کلاینت (اپ یا وب‌اپ) فقط یه renderer می‌سازه که این داده‌ها رو تفسیر و نمایش بده.
پس وقتی خواستیم ظاهر یا ساختار یه صفحه رو تغییر بدیم، لازم نیست اپ رو آپدیت کنیم، فقط کافیه جواب API رو تغییر بدیم.

یه مثال خیلی ساده

فرض کنین یه API داریم که اینو برمی‌گردونه:

{
  "type": "screen",
  "title": "Login",
  "components": [
    { "type": "text", "value": "Welcome!" },
    { "type": "input", "placeholder": "Username" },
    { "type": "input", "placeholder": "Password", "secure": true },
    { "type": "button", "label": "Login", "action": "/api/login" }
  ]
}

کلاینت فقط این JSON رو می‌گیره و طبق type و components، صفحه‌ی لاگین رو داینامیک می‌سازه.
اگه فردا بخوایم یه دکمه‌ی جدید اضافه کنیم یا متن رو عوض کنیم، فقط کافیه API رو تغییر بدیم.

کجاها استفاده می‌شه؟
۱- اپلیکیشن‌های موبایل (iOS / Android):
چون آپدیت‌دادن برای هر تغییر UI خیلی زمان‌بره، SDUI اجازه می‌ده بدون انتشار نسخه‌ی جدید، UI رو آپدیت کنیم.

۲- سیستم‌های A/B Testing یا personalization:
می‌تونیم برای کاربرهای مختلف، UI متفاوت بفرستیم بدون اینکه چند تا نسخه بسازیم.

۳- پلتفرم‌های multi-brand یا white-label:
مثلاً یه اپ داریم برای چند برند مختلف (با تم و کامپوننت‌های متفاوت)، SDUI خیلی کمک می‌کنه که از یه base code استفاده کنیم.

۴- اپ‌های با تغییر سریع در محتوا:
مثلا marketplaceها، اپ‌های خبری یا فروشگاه‌ها که مدام صفحه‌ها و کمپین‌هاشون عوض می‌شه. (دیوار از همین روش استفاده می‌کنه)

مزایا

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

معایب

❌ پیچیدگی زیاد در طراحی رندرر سمت کلاینت
❌ دیباگ و تست سخت‌تر (چون UI از سروره)
❌ در پروژه‌های کوچیک، بیش از حد سنگینه


یه نکته مهم

خیلی از شرکت‌های بزرگ مثل Airbnb, Netflix, Shopify و Uber از SDUI استفاده می‌کنن،
ولی معمولاً فقط برای بخش‌هایی از UI نه کل اپ، چون ترکیبش با UI محلی (Local UI) بهتر جواب می‌ده.

حرکت جالب Stackoverflow

- اگه از ChatGPT و ... استفاده می‌کنین ولی دلتون پیش Stackoverflow هست، می‌تونین از سرویس جدید این شرکت استفاده کنین که شباهت زیادی به چت‌بات های امروزی داره ولی جواب‌هایی به سبک Stackoverflow میده:

https://stackoverflow.ai