یه سایت پر از کامپوننت‌های 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

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

Bardia

تبدیل nestjs به موشک سرعت

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

مورد اول:
تبدیل http adapter از پیشفرض express به فستیفای
باعث افزایش ۲ الی ۵ برابری سرعت توی درخواست های rest api میشه
مورد دوم:
اضافه کردن کشینگ ردیس توی اینترسپتور ها، باعث میشه سرعت جواب دادن سرویس ها بیشتر بشه و response time خیلی کمتر بشه
مورد سوم:
فشرده سازی درخواست ها، باعث میشه ۱۰ تا ۲۰ درصد سرعت افزایش پیدا کنه، اگر فستیفای آداپتر استفاده میکنید از پکیج
@fastify/compress
میتونید استفاده کنید و اگر اکسپرس استفاده میکنید از پکیج
compress
میتونید استفاده کنید.
مورد چهارم: استفاده از پکیج cluster برای استفاده از هسته های مختلف سی پی یو
import cluster from 'cluster';
import { cpus } from 'os';

if (cluster.isPrimary) {
  cpus().forEach(() => cluster.fork());
} else {
  // bootstrap Nest app
}
اگه سی پی یو چند هسته ای باشه موازی سازی پردازش باعث افزایش سرعت خیلی چشم گیری میشه
مورد پنجم:
این یکی برای توسعس، استفاده از swc به عنوان بیلدر و کامپایلر به جای tsc پیشفرض باعث افزایش ۱۰ تا ۲۰ برابری سرعت توسعه میشه. swc کامپایلر بر پایه rust هستش

Amir Zalaghi

مفهوم abstraction یعنی چی؟

ا Abstraction یعنی پنهان کردن جزئیات غیرضروری و فقط نشان دادن چیزهای مهم.
یعنی وقتی با یه چیز کار می‌کنیم، فقط اون بخش‌هایی رو ببینیم که برای استفاده لازمن، نه اون‌هایی که برای پیاده‌سازی لازم بودن.

در کدنویسی، Abstraction یعنی اینکه ما:
بخش‌هایی از کد رو طوری طراحی می‌کنیم که فقط رفتارهای لازم رو expose کنن؛
ولی جزئیات درونی (پیاده‌سازی) رو پنهان کنن.

مثال:

class UserService {
  private users = [];

  addUser(name: string) {
    this.users.push(name);
  }

  getAllUsers() {
    return [...this.users];
  }
}

اینجا:
بیرون از کلاس فقط addUser و getAllUsers در دسترس هستن.
کسی نمی‌دونه (و نباید بدونه) که users چطور ذخیره می‌شن، آیا در حافظه‌ان یا در دیتابیس.

خب فایدش چیه؟
وابستگی بین قسمت‌های مختلف برنامه کم میشه
می‌تونیم راحت‌تر کد رو تغییر بدیم یا تست کنیم
شلوغی‌ها تا جای ممکن کم میشه