What will happen?
const arr = [1, 2, 3]; arr[10] = 5; console.log(arr.length);
const arr = [1, 2, 3]; arr[10] = 5; console.log(arr.length);
Anonymous Quiz
25%
3
10%
10
50%
11
15%
See answer
جاوااسکریپت یا تایپاسکریپت؟ کِی از کدوم استفاده کنیم؟
یکی از سؤالهای رایج بین برنامهنویسها اینه که آیا باید پروژه رو با جاوااسکریپت شروع کنیم یا تایپاسکریپت؟
پاسخ کوتاه اینه: بستگی به نوع پروژه و هدفت داره.
زمانی که جاوااسکریپت انتخاب بهتریه:
• پروژه کوچکه و نیاز به ساختار پیچیده نداره
• میخوای سریع نمونه اولیه (prototype) بسازی
• اعضای تیم هنوز با TypeScript آشنا نیستن
• قصد داری فقط سمت مرورگر (Frontend) کار سبک انجام بدی
در این حالت، سادگی جاوااسکریپت باعث میشه سریعتر پیش بری و درگیر تنظیمات اضافه نشی.
زمانی که باید سراغ TypeScript بری:
• پروژه بزرگ یا بلندمدته
• تیم چندنفره داری و میخوای از اشتباهات زمان اجرا جلوگیری کنی
• نیاز به type safety و autocomplete قوی داری
• ساختار کدها باید قابل نگهداری و قابل توسعه باشه
TypeScript با اضافه کردن نوعدهی ایستا، خطاها رو قبل از اجرا نشون میده و کیفیت کد رو بالا میبره.
جمعبندی:
اگر هدفت سرعت و سادگیه، جاوااسکریپت انتخاب خوبیه.
اما اگر پایداری، مقیاسپذیری و خوانایی کد برات مهمه، TypeScript انتخاب منطقیتره.
در واقع، یادگیری هر دو ضروریه. جاوااسکریپت پایه است، TypeScript نسخهی امنتر و حرفهایتر اون.
یکی از سؤالهای رایج بین برنامهنویسها اینه که آیا باید پروژه رو با جاوااسکریپت شروع کنیم یا تایپاسکریپت؟
پاسخ کوتاه اینه: بستگی به نوع پروژه و هدفت داره.
زمانی که جاوااسکریپت انتخاب بهتریه:
• پروژه کوچکه و نیاز به ساختار پیچیده نداره
• میخوای سریع نمونه اولیه (prototype) بسازی
• اعضای تیم هنوز با TypeScript آشنا نیستن
• قصد داری فقط سمت مرورگر (Frontend) کار سبک انجام بدی
در این حالت، سادگی جاوااسکریپت باعث میشه سریعتر پیش بری و درگیر تنظیمات اضافه نشی.
زمانی که باید سراغ TypeScript بری:
• پروژه بزرگ یا بلندمدته
• تیم چندنفره داری و میخوای از اشتباهات زمان اجرا جلوگیری کنی
• نیاز به type safety و autocomplete قوی داری
• ساختار کدها باید قابل نگهداری و قابل توسعه باشه
TypeScript با اضافه کردن نوعدهی ایستا، خطاها رو قبل از اجرا نشون میده و کیفیت کد رو بالا میبره.
جمعبندی:
اگر هدفت سرعت و سادگیه، جاوااسکریپت انتخاب خوبیه.
اما اگر پایداری، مقیاسپذیری و خوانایی کد برات مهمه، TypeScript انتخاب منطقیتره.
در واقع، یادگیری هر دو ضروریه. جاوااسکریپت پایه است، TypeScript نسخهی امنتر و حرفهایتر اون.
👍1
بازنویسی کامپایلر TypeScript با Go
شرکت Microsoft اعلام کرده که در حال مهاجرت (port) یا بازنویسی کامپایلر TypeScript از جاوااسکریپت به زبان Go هستند.
هدف اصلی؟ بهبود چشمگیر عملکرد، کاهش زمان کامپایل و مصرف حافظه.
نکات کلیدی:
• کامپایلر فعلی TypeScript (tsc) تا امروز عمدتاً در جاوااسکریپت/TypeScript اجرا میشده؛ حالا پروژهای تحت عنوان «native port» راه افتاده که کد در Go اجرا خواهد شد.
• بنچمارکهای اولیه نشان میدن که سرعت کامپایل روی پروژههای بزرگ ممکنه ۱۰ برابر سریعتر بشه.
• این تغییر تأثیری بر نحوهی استفاده برنامهنویسها از TypeScript نداره؛ syntax و APIها ثابت میمونن. فقط پشتِصحنه اجرا بهینهتر میشه.
چرا Go؟
چند دلیل مهم پشت انتخاب Go:
• پشتیبانی قدرتمند از همزمانی (concurrency) که برای پردازش فایلهای زیاد و تحلیل AST کامپایلر مهمه.
• جمعآوری خودکار حافظه (garbage collection) و ساختار دادهها که میتواند برای برنامهای به پیچیدگی یک کامپایلر مناسبتر باشه.
• امکان پورت «تابع به تابع» (functionally similar) از کد قدیمی به کد جدید بدون بازنویسی کامل.
چه چیزی تغییر میکند؟
برای شما به عنوان توسعهدهندهی TypeScript، تغییر عمدهای نیست.
کدی که تا حالا نوشتی همون کدی هست که خواهی نوشت.
ولی زمان ساخت پروژهها، زمان پاسخگویی ابزارها و مصرف حافظه در پروژههای بزرگ بهتر خواهد شد.
شرکت Microsoft اعلام کرده که در حال مهاجرت (port) یا بازنویسی کامپایلر TypeScript از جاوااسکریپت به زبان Go هستند.
هدف اصلی؟ بهبود چشمگیر عملکرد، کاهش زمان کامپایل و مصرف حافظه.
نکات کلیدی:
• کامپایلر فعلی TypeScript (tsc) تا امروز عمدتاً در جاوااسکریپت/TypeScript اجرا میشده؛ حالا پروژهای تحت عنوان «native port» راه افتاده که کد در Go اجرا خواهد شد.
• بنچمارکهای اولیه نشان میدن که سرعت کامپایل روی پروژههای بزرگ ممکنه ۱۰ برابر سریعتر بشه.
• این تغییر تأثیری بر نحوهی استفاده برنامهنویسها از TypeScript نداره؛ syntax و APIها ثابت میمونن. فقط پشتِصحنه اجرا بهینهتر میشه.
چرا Go؟
چند دلیل مهم پشت انتخاب Go:
• پشتیبانی قدرتمند از همزمانی (concurrency) که برای پردازش فایلهای زیاد و تحلیل AST کامپایلر مهمه.
• جمعآوری خودکار حافظه (garbage collection) و ساختار دادهها که میتواند برای برنامهای به پیچیدگی یک کامپایلر مناسبتر باشه.
• امکان پورت «تابع به تابع» (functionally similar) از کد قدیمی به کد جدید بدون بازنویسی کامل.
چه چیزی تغییر میکند؟
برای شما به عنوان توسعهدهندهی TypeScript، تغییر عمدهای نیست.
کدی که تا حالا نوشتی همون کدی هست که خواهی نوشت.
ولی زمان ساخت پروژهها، زمان پاسخگویی ابزارها و مصرف حافظه در پروژههای بزرگ بهتر خواهد شد.
👍2
پکیج: dotenv-expand
احتمالاً با dotenv آشنا هستین، پکیجی که متغیرهای محیطی رو از فایل .env لود میکنه.
اما اگه بخوایم توی .env از یه متغیر داخل متغیر دیگه استفاده کنیم، dotenv بهصورت پیشفرض اینو ساپورت نمیکنه.
اینجا میتونیم از dotenv-expand استفاده کنیم.
اینجا از APP_NAME تونستیم توی یک متغیر دیگه هم استفاده کنیم. فقط توی کد باید کد زیر رو اضافه کنیم:
تمیزی و نظم فایل .env رو زیاد میکنه و جلوی تکرار بی مورد رو میگیره.
برای پروژههای چندمحیطی (dev, staging, prod) عالیه.
نیاز به تغییر در dotenv اصلی نداره.
احتمالاً با dotenv آشنا هستین، پکیجی که متغیرهای محیطی رو از فایل .env لود میکنه.
اما اگه بخوایم توی .env از یه متغیر داخل متغیر دیگه استفاده کنیم، dotenv بهصورت پیشفرض اینو ساپورت نمیکنه.
اینجا میتونیم از dotenv-expand استفاده کنیم.
APP_NAME=My-Project
APP_PATH=/var/www/${APP_NAME}
اینجا از APP_NAME تونستیم توی یک متغیر دیگه هم استفاده کنیم. فقط توی کد باید کد زیر رو اضافه کنیم:
import dotenv from "dotenv";
import dotenvExpand from "dotenv-expand";
const env = dotenv.config();
dotenvExpand.expand(env);
console.log(process.env.APP_PATH); // /var/www/My-Project
تمیزی و نظم فایل .env رو زیاد میکنه و جلوی تکرار بی مورد رو میگیره.
برای پروژههای چندمحیطی (dev, staging, prod) عالیه.
نیاز به تغییر در dotenv اصلی نداره.
👍1
بک اند یاد بگیرم یا نه ؟
روی صحبتم با کسایی هست که چندسالی تجربه موفق توی فرانت اند داشتن :
خیلی ها اعتقاد دارن باید یه مهارت رو یاد گرفت و توی همون عمیق شد و تا تهش رفت , تا حدی درسته اما دنیای وب خیلی گستردس خصوصا برای کسی که عاشقه کدنوشتن هستش و برنامه نویسی رو فقط به چشم یه شغل نگاه نمیکنه
به نظر من وقتی فرانت بلدی یاد گیری بک اند واست هم راحت تر میشه و هم دیده بهتری بهت میده خصوصا اگر زبان عوض نکنی و یه چیزی مثل node ,express یادبگیری
اگر فرانتاند کار هستی، یه روزی وقت بذار و سمت سرور رو هم کشف کن, قول میدم طرز نگاهت به کد برای همیشه تغییر کنه.
وقتی یادگیری بکاند رو شروع کردم، فکر میکردم فقط قراره با دیتابیس و API سروکار داشته باشم.
ولی چیزی که واقعاً یاد گرفتم، تفکر سیستمی بود.
حالا وقتی کد فرانتاند مینویسم، بهتر میفهمم درخواستها از کجا میان، چرا باید بهینه باشن، و چطور یه تصمیم ساده توی UI میتونه روی Performance سرور تأثیر بذاره.
یادگیری بکاند برای من فقط یه مهارت جدید نبود؛ یه زاویه دید تازه بود به دنیای برنامهنویسی.
Kamyar Kamazani
روی صحبتم با کسایی هست که چندسالی تجربه موفق توی فرانت اند داشتن :
خیلی ها اعتقاد دارن باید یه مهارت رو یاد گرفت و توی همون عمیق شد و تا تهش رفت , تا حدی درسته اما دنیای وب خیلی گستردس خصوصا برای کسی که عاشقه کدنوشتن هستش و برنامه نویسی رو فقط به چشم یه شغل نگاه نمیکنه
به نظر من وقتی فرانت بلدی یاد گیری بک اند واست هم راحت تر میشه و هم دیده بهتری بهت میده خصوصا اگر زبان عوض نکنی و یه چیزی مثل node ,express یادبگیری
اگر فرانتاند کار هستی، یه روزی وقت بذار و سمت سرور رو هم کشف کن, قول میدم طرز نگاهت به کد برای همیشه تغییر کنه.
وقتی یادگیری بکاند رو شروع کردم، فکر میکردم فقط قراره با دیتابیس و API سروکار داشته باشم.
ولی چیزی که واقعاً یاد گرفتم، تفکر سیستمی بود.
حالا وقتی کد فرانتاند مینویسم، بهتر میفهمم درخواستها از کجا میان، چرا باید بهینه باشن، و چطور یه تصمیم ساده توی UI میتونه روی Performance سرور تأثیر بذاره.
یادگیری بکاند برای من فقط یه مهارت جدید نبود؛ یه زاویه دید تازه بود به دنیای برنامهنویسی.
Kamyar Kamazani
👍3
اگه از Toastها برای نمایش پیامها استفاده میکنی و دنبال یه ابزار سبک، خوشاستایل و راحتی، react-hot-toast یکی از بهترین انتخابهاست.
طراحی مینیمال و جذابی داره. قابل شخصیسازی هست. وابستگیهای سنگین هم نداره. از همه مهمتر JSX Content هم پشتیبانی میکنه.
https://react-hot-toast.com/
طراحی مینیمال و جذابی داره. قابل شخصیسازی هست. وابستگیهای سنگین هم نداره. از همه مهمتر JSX Content هم پشتیبانی میکنه.
https://react-hot-toast.com/
👍3
Why does this Timer component cause a memory leak?
Anonymous Quiz
14%
setCount is wrong inside interval
2%
React can’t handle intervals
71%
Needs to use setInterval in useEffect
12%
See Answer
نظر نامحبوب:
تو مصاحبه های کاری متاسفانه تو اکثر موارد شما باید بازیگر و دروغ گوی خوبی باشین وگرنه ریجکت میشین. اگه همیشه بخواین صادق باشین جواب نمیده اونم تو دنیای فعلی و باید تا حدی اغراق کنین.
تو مصاحبه های کاری متاسفانه تو اکثر موارد شما باید بازیگر و دروغ گوی خوبی باشین وگرنه ریجکت میشین. اگه همیشه بخواین صادق باشین جواب نمیده اونم تو دنیای فعلی و باید تا حدی اغراق کنین.
👍10
ا framer-motion چیست؟
کتابخانهای برای ساخت انیمیشن در React که هم سادهست، هم دقیق.
در واقع، framer-motion جایگزین قدرتمندیه برای CSS animation و transition،
با این تفاوت که کنترل کاملی روی state و eventهای React داریم.
https://motion.dev/
کتابخانهای برای ساخت انیمیشن در React که هم سادهست، هم دقیق.
در واقع، framer-motion جایگزین قدرتمندیه برای CSS animation و transition،
با این تفاوت که کنترل کاملی روی state و eventهای React داریم.
https://motion.dev/
وقتی مدیر بد داری
مدیر بد همیشه فکر میکنه مشکل از آدمهاست، نه از فرایند.
اگر چیزی درست پیش نره، دنبال مقصر میگرده نه دلیل.
و برعکس هر موفقیتی رو نتیجهی “مدیریتش” میدونه، نه کار تیم.
چنین فضایی باعث میشه تیم ساکت بشه.
کسی دیگه ایده نمیده، کسی اشتباه رو اعلام نمیکنه، چون میدونه قراره متهم بشه.
و اینجاست که تیم دلسرد میشه و یکییکی اعضا میرن از شرکت.
مدیر بد همیشه فکر میکنه مشکل از آدمهاست، نه از فرایند.
اگر چیزی درست پیش نره، دنبال مقصر میگرده نه دلیل.
و برعکس هر موفقیتی رو نتیجهی “مدیریتش” میدونه، نه کار تیم.
چنین فضایی باعث میشه تیم ساکت بشه.
کسی دیگه ایده نمیده، کسی اشتباه رو اعلام نمیکنه، چون میدونه قراره متهم بشه.
و اینجاست که تیم دلسرد میشه و یکییکی اعضا میرن از شرکت.
👍7
چرا React 19 یک نقطهی مهم در تحول این کتابخانه است:
1. کد خواناتر و تمیزتر: با حذف بسیاری از هوکهای پراستفاده و نیاز کمتر به مدیریت دستی state، ساختار کد سادهتر و قابلدرکتر میشود.
2. کاهش کدهای تکراری: حجم کدی که مینویسید کمتر است، اما قابلیتهایی که دریافت میکنید بیشتر.
3. بهبود عملکرد: معماری جدید باعث کاهش رندرهای غیرضروری و روانتر شدن اجرای برنامه میشود.
4. تجربه بهتر برای توسعهدهنده: تمرکز شما از مدیریت وضعیتهای async برداشته میشود و میتوانید روی ساخت قابلیتهای اصلی تمرکز کنید.
ا React 19 تلاش میکند فرایند توسعه را سادهتر کند، مخصوصاً در بخشهایی مثل مدیریت دادههای async. هوک جدید use() امکان کار با عملیاتهای async را طبیعیتر و سادهتر فراهم میکند، پیچیدگی کد را کاهش میدهد و روند توسعه را کارآمدتر میکن
1. کد خواناتر و تمیزتر: با حذف بسیاری از هوکهای پراستفاده و نیاز کمتر به مدیریت دستی state، ساختار کد سادهتر و قابلدرکتر میشود.
2. کاهش کدهای تکراری: حجم کدی که مینویسید کمتر است، اما قابلیتهایی که دریافت میکنید بیشتر.
3. بهبود عملکرد: معماری جدید باعث کاهش رندرهای غیرضروری و روانتر شدن اجرای برنامه میشود.
4. تجربه بهتر برای توسعهدهنده: تمرکز شما از مدیریت وضعیتهای async برداشته میشود و میتوانید روی ساخت قابلیتهای اصلی تمرکز کنید.
ا React 19 تلاش میکند فرایند توسعه را سادهتر کند، مخصوصاً در بخشهایی مثل مدیریت دادههای async. هوک جدید use() امکان کار با عملیاتهای async را طبیعیتر و سادهتر فراهم میکند، پیچیدگی کد را کاهش میدهد و روند توسعه را کارآمدتر میکن
👍2