توسعه‌دهنده جدید و «سندرم ارثیه» 🌀
یک توسعه‌دهنده جدید وارد شرکتی می‌شود. اولین چیزی که با آن مواجه می‌شود، احتمالاً کد پروژه‌ای است که قبلاً نوشته شده و در حال اجراست. او شروع به بررسی کد می‌کند و با تعجب می‌پرسد: «این چطور کار می‌کند؟». سپس قانع می‌شود و، همان‌طور که می‌دانیم، «با اصول خود وارد قلمروی دیگران نمی‌شوند»، بنابراین او شروع به پیروی از سبک و روش‌هایی می‌کند که در نوشتن کد پیش از او استفاده شده‌اند. اگر هم توسعه‌دهنده قبلی به مقامی بالاتر ارتقا یافته باشد یا مسئول هدایت این تازه‌وارد باشد، این موضوع انگیزه او را برای ادامه همان سبک تقویت می‌کند.
اما در اینجا یک دام پنهان وجود دارد. اغلب توسعه‌دهندگان قبلی (یا حتی یک تیم کامل!) از یک اصل ساده پیروی کرده‌اند: «این یک راه‌حل موقتی است، و نفر بعدی که مسئول این کار شود، آن را بازنویسی خواهد کرد». 😈 اکنون همان «توسعه‌دهنده جدید» که قرار بود همه‌چیز را درست کند، همان مسیر شیب‌دار را ادامه می‌دهد، مسیری که به کدی نامناسب و بدهی فنی بسیار سنگین منجر می‌شود. 😒
چرا این اتفاق می‌افتد؟
✅ ترس از خراب کردن کد موجود
اگر کد کار می‌کند، تغییر آن ترسناک است. توسعه‌دهنده جدید فکر می‌کند: بهتر است چیزی مشابه در کنار آن اضافه کنم تا اینکه کدی که در حال حاضر کار می‌کند را دستکاری کنم، چرا که بازنویسی کد نیازمند تست دوباره است و این به معنی اضافه شدن کار برای همه است.
✅ کمبود زمان برای تحلیل
بررسی و بازسازی کد قدیمی نیاز به زمان دارد، در حالی که ضرب‌الاجل‌های وظایف جاری فشار می‌آورند. تطبیق با منطق موجود بسیار آسان‌تر از درک و بهبود آن است.
✅ ذهنیت «من اینجا موقتی هستم»
گاهی توسعه‌دهندگان با این طرز فکر وارد شرکت می‌شوند: «من یک یا دو سال اینجا کار می‌کنم و بعد به پروژه دیگری می‌روم». چرا باید انرژی خود را برای بهبود معماری صرف کرد وقتی که به نظر می‌رسد این مسئولیت من نیست؟!
✅ کد به مثابه زبان
هر تیمی کد خود را به سبک خاصی می‌نویسد، و برای توسعه‌دهنده جدید سخت است که این سبک را بشکند، حتی اگر مشکلاتی در آن ببیند. او تلاش می‌کند تا خود را تطبیق دهد تا «غریبه» تلقی نشود.
آیا می‌توان این مسئله را حل کرد؟
بله، می‌توان و باید آن را برطرف کرد! درمان سندرم ارثیه شامل چند گام ساده است:
1️⃣ ایجاد فرهنگ تغییرات. به تیم توضیح دهید که بهبود کد نه‌تنها مجاز، بلکه مطلوب است.
2️⃣ ثبت بدهی فنی. مفهوم بدهی فنی را تعریف کنید و آن را مستند سازید: کجا نیاز به بهبود است، کدام بخش‌ها باید بازنگری شوند و چگونه.
3️⃣ اختصاص زمان برای بازبینی. حداقل بخشی از اسپرینت را به کار بر روی بهبود کد قدیمی اختصاص دهید.
4️⃣ برگزاری جلسات گروهی. اجازه دهید تیم دور هم جمع شود و بخش‌های مشکل‌دار را بررسی کند تا به راه‌حل‌های توافقی برسند.
هر توسعه‌دهنده‌ای با چنین وضعیتی مواجه می‌شود که تطبیق با شرایط موجود آسان‌تر از مبارزه با جریان است. اما همین سازش‌های کوچک است که به مشکلات ارثیه‌ای منجر می‌شود.
دیدگاه شخصی من
همیشه باید سؤال بپرسید: چرا این کد به این شکل نوشته شده؟ چرا کسی آن را تغییر نداده؟ اگر من بخواهم آن را بهبود دهم چه اتفاقی می‌افتد و آیا انجام این کار در حال حاضر ضروری است؟ حمایت از تازه‌واردها اهمیت دارد، اما شرکت‌ها نیز باید نگاه تازه را تشویق کنند. گاهی اوقات، دیدگاه‌های تازه مسائلی را آشکار می‌کنند که افراد قدیمی پروژه دیگر قادر به دیدن آن‌ها نیستند.
آیا شما هم در چنین موقعیتی قرار گرفته‌اید؟ یا شاید خودتان آغازگر چنین زنجیره‌ای بوده‌اید؟ تجربه‌ها و دیدگاه‌های خود را در نظرات به اشتراک بگذارید! 😊
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
یک توسعه‌دهنده جدید وارد شرکتی می‌شود. اولین چیزی که با آن مواجه می‌شود، احتمالاً کد پروژه‌ای است که قبلاً نوشته شده و در حال اجراست. او شروع به بررسی کد می‌کند و با تعجب می‌پرسد: «این چطور کار می‌کند؟». سپس قانع می‌شود و، همان‌طور که می‌دانیم، «با اصول خود وارد قلمروی دیگران نمی‌شوند»، بنابراین او شروع به پیروی از سبک و روش‌هایی می‌کند که در نوشتن کد پیش از او استفاده شده‌اند. اگر هم توسعه‌دهنده قبلی به مقامی بالاتر ارتقا یافته باشد یا مسئول هدایت این تازه‌وارد باشد، این موضوع انگیزه او را برای ادامه همان سبک تقویت می‌کند.
اما در اینجا یک دام پنهان وجود دارد. اغلب توسعه‌دهندگان قبلی (یا حتی یک تیم کامل!) از یک اصل ساده پیروی کرده‌اند: «این یک راه‌حل موقتی است، و نفر بعدی که مسئول این کار شود، آن را بازنویسی خواهد کرد». 😈 اکنون همان «توسعه‌دهنده جدید» که قرار بود همه‌چیز را درست کند، همان مسیر شیب‌دار را ادامه می‌دهد، مسیری که به کدی نامناسب و بدهی فنی بسیار سنگین منجر می‌شود. 😒
چرا این اتفاق می‌افتد؟
✅ ترس از خراب کردن کد موجود
اگر کد کار می‌کند، تغییر آن ترسناک است. توسعه‌دهنده جدید فکر می‌کند: بهتر است چیزی مشابه در کنار آن اضافه کنم تا اینکه کدی که در حال حاضر کار می‌کند را دستکاری کنم، چرا که بازنویسی کد نیازمند تست دوباره است و این به معنی اضافه شدن کار برای همه است.
✅ کمبود زمان برای تحلیل
بررسی و بازسازی کد قدیمی نیاز به زمان دارد، در حالی که ضرب‌الاجل‌های وظایف جاری فشار می‌آورند. تطبیق با منطق موجود بسیار آسان‌تر از درک و بهبود آن است.
✅ ذهنیت «من اینجا موقتی هستم»
گاهی توسعه‌دهندگان با این طرز فکر وارد شرکت می‌شوند: «من یک یا دو سال اینجا کار می‌کنم و بعد به پروژه دیگری می‌روم». چرا باید انرژی خود را برای بهبود معماری صرف کرد وقتی که به نظر می‌رسد این مسئولیت من نیست؟!
✅ کد به مثابه زبان
هر تیمی کد خود را به سبک خاصی می‌نویسد، و برای توسعه‌دهنده جدید سخت است که این سبک را بشکند، حتی اگر مشکلاتی در آن ببیند. او تلاش می‌کند تا خود را تطبیق دهد تا «غریبه» تلقی نشود.
آیا می‌توان این مسئله را حل کرد؟
بله، می‌توان و باید آن را برطرف کرد! درمان سندرم ارثیه شامل چند گام ساده است:
1️⃣ ایجاد فرهنگ تغییرات. به تیم توضیح دهید که بهبود کد نه‌تنها مجاز، بلکه مطلوب است.
2️⃣ ثبت بدهی فنی. مفهوم بدهی فنی را تعریف کنید و آن را مستند سازید: کجا نیاز به بهبود است، کدام بخش‌ها باید بازنگری شوند و چگونه.
3️⃣ اختصاص زمان برای بازبینی. حداقل بخشی از اسپرینت را به کار بر روی بهبود کد قدیمی اختصاص دهید.
4️⃣ برگزاری جلسات گروهی. اجازه دهید تیم دور هم جمع شود و بخش‌های مشکل‌دار را بررسی کند تا به راه‌حل‌های توافقی برسند.
هر توسعه‌دهنده‌ای با چنین وضعیتی مواجه می‌شود که تطبیق با شرایط موجود آسان‌تر از مبارزه با جریان است. اما همین سازش‌های کوچک است که به مشکلات ارثیه‌ای منجر می‌شود.
دیدگاه شخصی من
همیشه باید سؤال بپرسید: چرا این کد به این شکل نوشته شده؟ چرا کسی آن را تغییر نداده؟ اگر من بخواهم آن را بهبود دهم چه اتفاقی می‌افتد و آیا انجام این کار در حال حاضر ضروری است؟ حمایت از تازه‌واردها اهمیت دارد، اما شرکت‌ها نیز باید نگاه تازه را تشویق کنند. گاهی اوقات، دیدگاه‌های تازه مسائلی را آشکار می‌کنند که افراد قدیمی پروژه دیگر قادر به دیدن آن‌ها نیستند.
آیا شما هم در چنین موقعیتی قرار گرفته‌اید؟ یا شاید خودتان آغازگر چنین زنجیره‌ای بوده‌اید؟ تجربه‌ها و دیدگاه‌های خود را در نظرات به اشتراک بگذارید! 😊
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
چرا جدول‌ها فقط چند دیو در کنار هم نیستند؟ 🤨
هنگام طراحی جدول‌ها در وب، بسیاری از توسعه‌دهندگان یک اشتباه کلاسیک مرتکب می‌شوند: به جای استفاده از تگ‌های <table>، از تگ‌های عادی مثل <div> یا حتی <span> بهره می‌برند. شاید این کار به نظر «انعطاف‌پذیرتر» یا «ساده‌تر» برسد، اما در واقع، این راهی به سوی مشکلات پیچیده است. چرا استفاده از جدول‌های معنایی این‌قدر اهمیت دارد؟
استفاده از تگ‌های معنایی نه تنها یک روش خوب است، بلکه منطقی‌ترین راه‌حل است. بیایید بررسی کنیم چرا جدول‌ها شایسته برخوردی خاص هستند.
➡️ معنای «معنایی» در HTML چیست؟
تگ‌های HTML فقط برای «محصور کردن محتوا» نیستند. هر تگ معنای خاص و وظیفه‌ای مشخص دارد. تگ‌های جدول (<table>, <tr>, <th>, <td>) فقط روشی برای زیبا نمایش دادن داده‌ها نیستند، بلکه ابزاری برای انتقال این مفهوم‌اند که «این داده‌ها در یک ساختار جدولی قرار دارند، که در آن ردیف‌ها، ستون‌ها و سرستون‌ها اهمیت دارند».
برای مرورگرها، موتورهای جستجو، اسکرین‌ریدرها و حتی خود شما در آینده، تگ‌های معنایی پیام می‌دهند: «این یک جدول است، مانند جدول با آن رفتار کن!»
🚨 چرا استفاده از دیو برای جدول‌ها اشتباه است؟
✅ فاقد ساختار مشخص
در جدول‌هایی که با <div> ساخته شده‌اند، همه‌چیز پیچیده می‌شود. ردیف‌ها کجا هستند؟ سلول‌ها چطور؟ چنین جدولی معنای ساختاری «ردیف‌ها و ستون‌های مرتبط» را منتقل نمی‌کند.
✅ اسکرین‌ریدرها را گیج می‌کند
افرادی با توانایی‌های محدود، مثل نابینایان، نمی‌توانند داده‌ها را درک کنند. تگ‌های <table> به‌صورت پیش‌فرض از دسترس‌پذیری (Accessibility) پشتیبانی می‌کنند.
✅ زحمت اضافی برای شما
اگر بخواهید رفتار و استایل جدول را با استفاده از <div> پیاده‌سازی کنید، باید خودتان دستی ستون‌ها و ردیف‌ها را مدیریت کنید و به سازگاری واکنش‌گرا (Responsive) هم فکر کنید. این در حالی است که تگ‌های جدول در اکثر موارد رفتار مناسب را از پیش می‌دانند.
📊 چه زمانی از جدول استفاده کنیم؟
✅ برای داده‌های جدولی
نمونه: جدول زمان‌بندی، لیست قیمت، گزارش‌ها، یا جداول مقایسه‌ای.
✅ برای نمایش ارتباط‌ها
جدول فقط شامل ردیف‌ها و ستون‌ها نیست؛ بلکه ابزاری برای نشان دادن روابط بین داده‌هاست.
✅ وقتی دسترس‌پذیری مهم است
جدول‌های معنایی به‌صورت خودکار با فناوری‌های دسترس‌پذیری سازگارند.
❌ چه زمانی از جدول استفاده نکنیم؟
✅ برای طراحی صفحه‌ها
طراحی صفحات با جدول‌ها یک روش منسوخ‌شده از دهه‌ی ۲۰۰۰ است؛ از آن صرف‌نظر کنید.
✅ برای لیست‌ها یا کارت‌ها
وقتی داده‌ها به هم مرتبط نیستند، از جدول استفاده نکنید.
استفاده از <div> برای ساخت جدول مثل ساخت دوچرخه‌ای است که شما باید خودتان چرخ، ترمز و پدال‌هایش را هم طراحی کنید. اما جدول‌های معنایی مثل یک پورشه هستند که آماده‌ی حرکت است، زمان شما را صرفه‌جویی می‌کند و احترام کاربران را حفظ می‌کند.
جدول‌ها طراحی شده‌اند تا زندگی را ساده‌تر کنند – از آن‌ها هوشمندانه و درست استفاده کنید! 🚀
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
هنگام طراحی جدول‌ها در وب، بسیاری از توسعه‌دهندگان یک اشتباه کلاسیک مرتکب می‌شوند: به جای استفاده از تگ‌های <table>، از تگ‌های عادی مثل <div> یا حتی <span> بهره می‌برند. شاید این کار به نظر «انعطاف‌پذیرتر» یا «ساده‌تر» برسد، اما در واقع، این راهی به سوی مشکلات پیچیده است. چرا استفاده از جدول‌های معنایی این‌قدر اهمیت دارد؟
استفاده از تگ‌های معنایی نه تنها یک روش خوب است، بلکه منطقی‌ترین راه‌حل است. بیایید بررسی کنیم چرا جدول‌ها شایسته برخوردی خاص هستند.
➡️ معنای «معنایی» در HTML چیست؟
تگ‌های HTML فقط برای «محصور کردن محتوا» نیستند. هر تگ معنای خاص و وظیفه‌ای مشخص دارد. تگ‌های جدول (<table>, <tr>, <th>, <td>) فقط روشی برای زیبا نمایش دادن داده‌ها نیستند، بلکه ابزاری برای انتقال این مفهوم‌اند که «این داده‌ها در یک ساختار جدولی قرار دارند، که در آن ردیف‌ها، ستون‌ها و سرستون‌ها اهمیت دارند».
برای مرورگرها، موتورهای جستجو، اسکرین‌ریدرها و حتی خود شما در آینده، تگ‌های معنایی پیام می‌دهند: «این یک جدول است، مانند جدول با آن رفتار کن!»
🚨 چرا استفاده از دیو برای جدول‌ها اشتباه است؟
✅ فاقد ساختار مشخص
در جدول‌هایی که با <div> ساخته شده‌اند، همه‌چیز پیچیده می‌شود. ردیف‌ها کجا هستند؟ سلول‌ها چطور؟ چنین جدولی معنای ساختاری «ردیف‌ها و ستون‌های مرتبط» را منتقل نمی‌کند.
✅ اسکرین‌ریدرها را گیج می‌کند
افرادی با توانایی‌های محدود، مثل نابینایان، نمی‌توانند داده‌ها را درک کنند. تگ‌های <table> به‌صورت پیش‌فرض از دسترس‌پذیری (Accessibility) پشتیبانی می‌کنند.
✅ زحمت اضافی برای شما
اگر بخواهید رفتار و استایل جدول را با استفاده از <div> پیاده‌سازی کنید، باید خودتان دستی ستون‌ها و ردیف‌ها را مدیریت کنید و به سازگاری واکنش‌گرا (Responsive) هم فکر کنید. این در حالی است که تگ‌های جدول در اکثر موارد رفتار مناسب را از پیش می‌دانند.
📊 چه زمانی از جدول استفاده کنیم؟
✅ برای داده‌های جدولی
نمونه: جدول زمان‌بندی، لیست قیمت، گزارش‌ها، یا جداول مقایسه‌ای.
✅ برای نمایش ارتباط‌ها
جدول فقط شامل ردیف‌ها و ستون‌ها نیست؛ بلکه ابزاری برای نشان دادن روابط بین داده‌هاست.
✅ وقتی دسترس‌پذیری مهم است
جدول‌های معنایی به‌صورت خودکار با فناوری‌های دسترس‌پذیری سازگارند.
❌ چه زمانی از جدول استفاده نکنیم؟
✅ برای طراحی صفحه‌ها
طراحی صفحات با جدول‌ها یک روش منسوخ‌شده از دهه‌ی ۲۰۰۰ است؛ از آن صرف‌نظر کنید.
✅ برای لیست‌ها یا کارت‌ها
وقتی داده‌ها به هم مرتبط نیستند، از جدول استفاده نکنید.
استفاده از <div> برای ساخت جدول مثل ساخت دوچرخه‌ای است که شما باید خودتان چرخ، ترمز و پدال‌هایش را هم طراحی کنید. اما جدول‌های معنایی مثل یک پورشه هستند که آماده‌ی حرکت است، زمان شما را صرفه‌جویی می‌کند و احترام کاربران را حفظ می‌کند.
جدول‌ها طراحی شده‌اند تا زندگی را ساده‌تر کنند – از آن‌ها هوشمندانه و درست استفاده کنید! 🚀
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
👍3👌1
### چند نقل‌قول درباره TypeScript
«TypeScript مجموعه‌ای از کارهای اضافی است برای حل مسائلی که من ندارم، به روش‌هایی که دوست ندارم.»
*کایل سیمپسون*، نویسنده مجموعه کتاب‌های بسیار تأثیرگذار «شما JS را نمی‌شناسید».
«ما کدهای خود را به TypeScript بازنویسی کردیم و سی درصد بیشتر باگ دریافت کردیم.»
«اگر از قبل سیستم بسیار سخت‌گیرانه‌ای برای لینتینگ دارید و پوشش تست‌های بالایی نیز وجود دارد، زمانی که برای تلاش برای کارکرد صحیح TypeScript صرف می‌کنید، تنها ضرر به همراه خواهد داشت. این مسیر را تنها زمانی دنبال کنید که سبک کدنویسی آن برای تیم جذاب باشد.»
«نود و پنج درصد امکاناتی که TypeScript ارائه می‌دهد، با تلاش کمتر و ابزارهای دیگر مانند لینتینگ سخت‌گیرانه و JSDocs قابل دستیابی است.»
«من حدود ده پروژه‌ی کدنویسی TypeScript را بررسی کرده‌ام، اما در هیچ‌کدام واقعاً نتوانستم کد را بخوانم. آن‌قدر زشت و بدساختار است که تعجب می‌کنم چه کسی این هیولا را طراحی کرده است؟»
«جاوااسکریپت مشکلاتی دارد. اگر مدت طولانی با آن کار کنید، با این مشکلات مواجه می‌شوید و باید راه‌حلی برایشان پیدا کنید. TypeScript بسیاری از این مشکلات را به‌طور پیش‌فرض حل می‌کند. به همین دلیل، برای کسانی که از زبان دیگری آمده‌اند و علاقه‌ای به یادگیری عمیق جاوااسکریپت ندارند، گزینه‌ی خوبی است.»
«من نگرانم که توسعه‌دهندگان تازه‌کار که می‌خواهند در آینده به توسعه‌دهندگان حرفه‌ای جاوااسکریپت تبدیل شوند، فرصت یادگیری چگونگی مدیریت مشکلات جاوااسکریپت را از دست بدهند، در حالی که همچنان از امکانات زبان‌های با نوع‌گذاری آزاد بهره می‌برند. می‌بینم که آن‌ها TypeScript را پیدا کرده و از آن به‌عنوان عصا استفاده می‌کنند، بدون اینکه درک کنند جاوااسکریپت به‌تنهایی چه قابلیت‌هایی دارد.»
🔗https://dev.to/thejaredwilcurt/quotes-about-typescript-2ohf
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
«TypeScript مجموعه‌ای از کارهای اضافی است برای حل مسائلی که من ندارم، به روش‌هایی که دوست ندارم.»
*کایل سیمپسون*، نویسنده مجموعه کتاب‌های بسیار تأثیرگذار «شما JS را نمی‌شناسید».
«ما کدهای خود را به TypeScript بازنویسی کردیم و سی درصد بیشتر باگ دریافت کردیم.»
«اگر از قبل سیستم بسیار سخت‌گیرانه‌ای برای لینتینگ دارید و پوشش تست‌های بالایی نیز وجود دارد، زمانی که برای تلاش برای کارکرد صحیح TypeScript صرف می‌کنید، تنها ضرر به همراه خواهد داشت. این مسیر را تنها زمانی دنبال کنید که سبک کدنویسی آن برای تیم جذاب باشد.»
«نود و پنج درصد امکاناتی که TypeScript ارائه می‌دهد، با تلاش کمتر و ابزارهای دیگر مانند لینتینگ سخت‌گیرانه و JSDocs قابل دستیابی است.»
«من حدود ده پروژه‌ی کدنویسی TypeScript را بررسی کرده‌ام، اما در هیچ‌کدام واقعاً نتوانستم کد را بخوانم. آن‌قدر زشت و بدساختار است که تعجب می‌کنم چه کسی این هیولا را طراحی کرده است؟»
«جاوااسکریپت مشکلاتی دارد. اگر مدت طولانی با آن کار کنید، با این مشکلات مواجه می‌شوید و باید راه‌حلی برایشان پیدا کنید. TypeScript بسیاری از این مشکلات را به‌طور پیش‌فرض حل می‌کند. به همین دلیل، برای کسانی که از زبان دیگری آمده‌اند و علاقه‌ای به یادگیری عمیق جاوااسکریپت ندارند، گزینه‌ی خوبی است.»
«من نگرانم که توسعه‌دهندگان تازه‌کار که می‌خواهند در آینده به توسعه‌دهندگان حرفه‌ای جاوااسکریپت تبدیل شوند، فرصت یادگیری چگونگی مدیریت مشکلات جاوااسکریپت را از دست بدهند، در حالی که همچنان از امکانات زبان‌های با نوع‌گذاری آزاد بهره می‌برند. می‌بینم که آن‌ها TypeScript را پیدا کرده و از آن به‌عنوان عصا استفاده می‌کنند، بدون اینکه درک کنند جاوااسکریپت به‌تنهایی چه قابلیت‌هایی دارد.»
🔗https://dev.to/thejaredwilcurt/quotes-about-typescript-2ohf
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
DEV Community
Quotes about TypeScript
I've been in the industry for a while now and have had the fortune to talk with many people at...
👍4❤1👎1
پیشنهاد می‌کنم در نظرات، سه موردی را به اشتراک بگذارید که کار شما را راحت‌تر و مؤثرتر می‌کند. چیزهایی که خلاقانه و غیرمعمول هستند، نه صرفاً موارد بدیهی و ضروری مانند Vite.
برای شروع:
1. ویرایشگر IDE Cursor (دستیار مبتنی بر هوش مصنوعی)
2. پیکربندی @sxzz/eslint-config ([لینک](https://github.com/sxzz/eslint-config))
شما چه ابزارها و راهکارهای خاصی دارید؟ 🌟
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
برای شروع:
1. ویرایشگر IDE Cursor (دستیار مبتنی بر هوش مصنوعی)
2. پیکربندی @sxzz/eslint-config ([لینک](https://github.com/sxzz/eslint-config))
شما چه ابزارها و راهکارهای خاصی دارید؟ 🌟
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
👍2
در همین حال، نتایج نظرسنجی State of JS 2024 منتشر شد! (لینک: stateofjs.com)
Vite و Vue همچنان موقعیت‌های پیشرو خود را تقویت کرده‌اند و نشان دادند که چرا انتخاب اول بسیاری از توسعه‌دهندگان هستند.
و اما ایوان یو، بی‌شک یکی از برجسته‌ترین و تأثیرگذارترین شخصیت‌های دنیای فرانت‌اند در سال‌های اخیر است.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
Vite و Vue همچنان موقعیت‌های پیشرو خود را تقویت کرده‌اند و نشان دادند که چرا انتخاب اول بسیاری از توسعه‌دهندگان هستند.
و اما ایوان یو، بی‌شک یکی از برجسته‌ترین و تأثیرگذارترین شخصیت‌های دنیای فرانت‌اند در سال‌های اخیر است.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
👍10👎1🔥1👏1
This media is not supported in your browser
VIEW IN TELEGRAM
میلاد با سعادت حضرت جواد الأئمة
🔹 علَيْكُمْ بِطَلَبِ الْعِلْمِ، فَإنَّ طَلَبَهُ فَريضَةٌ وَالْبَحْثَ عَنْهُ نافِلَةٌ، وَ هُوَ صِلَةُ بَيْنَ الاْخْوانِ، وَ دَليلٌ عَلَى الْمُرُوَّةِ، وَ تُحْفَةٌ فِى الْمَجالِسِ، وَ صاحِبٌ فِى السَّفَرِ، وَ أنْسٌ فِى الْغُرْبَةِ.
(بحارالانوار، ج۷۵، ص۸۰)
🔹 بر شما باد به تحصيل علم و معرفت، چون فراگيرى آن واجب و بحث پيرامون آن مستحب و پُرفائده است. علم وسيله كمک به دوستان و برادران است، دليل و نشانه مروّت و جوانمردى است، هديه و سرگرمى در مجالس است، همدم و رفيق انسان در مسافرت است؛ و انيس و مونس انسان در تنهایى است.
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
🔹 علَيْكُمْ بِطَلَبِ الْعِلْمِ، فَإنَّ طَلَبَهُ فَريضَةٌ وَالْبَحْثَ عَنْهُ نافِلَةٌ، وَ هُوَ صِلَةُ بَيْنَ الاْخْوانِ، وَ دَليلٌ عَلَى الْمُرُوَّةِ، وَ تُحْفَةٌ فِى الْمَجالِسِ، وَ صاحِبٌ فِى السَّفَرِ، وَ أنْسٌ فِى الْغُرْبَةِ.
(بحارالانوار، ج۷۵، ص۸۰)
🔹 بر شما باد به تحصيل علم و معرفت، چون فراگيرى آن واجب و بحث پيرامون آن مستحب و پُرفائده است. علم وسيله كمک به دوستان و برادران است، دليل و نشانه مروّت و جوانمردى است، هديه و سرگرمى در مجالس است، همدم و رفيق انسان در مسافرت است؛ و انيس و مونس انسان در تنهایى است.
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
❤14👎9👍1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
ابزار جذاب برای انیمیشن اعداد - Number Flow
این یک کامپوننت است که به اعداد در رابط کاربری جان می‌بخشد. از فریم‌ورک‌های React، Vue و Svelte پشتیبانی می‌کند، بدون وابستگی به کتابخانه‌های خارجی کار می‌کند و بسیار انعطاف‌پذیر است.
✨ ویژگی‌های Number Flow:
قابلیت تغییر استایل و فرمت اعداد براساس تنظیمات محلی.
افزودن انیمیشن‌ها و امکاناتی مانند پیشوندها و پسوندها.
ایده‌آل برای استفاده در نمودارها، نمایش قیمت‌ها، تایمرها و داده‌های عددی دیگر.
🔗 http://number-flow.barvian.me/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
این یک کامپوننت است که به اعداد در رابط کاربری جان می‌بخشد. از فریم‌ورک‌های React، Vue و Svelte پشتیبانی می‌کند، بدون وابستگی به کتابخانه‌های خارجی کار می‌کند و بسیار انعطاف‌پذیر است.
✨ ویژگی‌های Number Flow:
قابلیت تغییر استایل و فرمت اعداد براساس تنظیمات محلی.
افزودن انیمیشن‌ها و امکاناتی مانند پیشوندها و پسوندها.
ایده‌آل برای استفاده در نمودارها، نمایش قیمت‌ها، تایمرها و داده‌های عددی دیگر.
🔗 http://number-flow.barvian.me/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
👍2🔥1
ویژگی غیرمعمولی به نام
همیشه برام جالب بود که چطور گوشی من «متوجه» می‌شود که باید یک رمز عبور وارد کنم و به طور خودکار پیشنهاد می‌دهد که رمز عبور مناسبی تولید کند؟
من جواب این سوال رو پیدا کردم — این ویژگی ممکنه با ویژگی
این ویژگی کمک می‌کند تا الزامات رمز عبور تعیین شوند، به طوری که مدیران رمز عبور و مرورگرها بتونند رمز عبورهای مناسب رو برای کاربران تولید کنند.
چیزی که می‌توان از طریق
✅ حداقل و حداکثر طول رمز عبور؛
✅ نمادهای ضروری مانند اعداد یا علائم خاص؛
✅ الزامات مربوط به حروف بزرگ یا کوچک.
👀 نکته‌ای که باید به آن توجه کرد این است که در حال حاضر هیچ مشخصات رسمی کاملی برای ویژگی
نظر من:
اضافه کردن ویژگی
با این حال، مهم است که اطمینان حاصل شود:
✅ پشتیبانی گسترده از این ویژگی در مرورگرها؛
✅ حفاظت دقیق از آسیب‌پذیری‌های احتمالی تا این ویژگی نقطه ضعف امنیتی نشود.
نظر شما چیه؟ به نظرتون هنگام پیاده‌سازی چنین ابزاری باید به چه نکاتی توجه کرد؟ شاید شما هم با مشکلاتی در زمینه تولید رمز عبور در سایت‌ها مواجه شده‌اید؟ 🧐
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
passwordrules 😒همیشه برام جالب بود که چطور گوشی من «متوجه» می‌شود که باید یک رمز عبور وارد کنم و به طور خودکار پیشنهاد می‌دهد که رمز عبور مناسبی تولید کند؟
من جواب این سوال رو پیدا کردم — این ویژگی ممکنه با ویژگی
passwordrules مرتبط باشه، که من از طریق سایت 1Password (https://developer.1password.com/docs/web/compatible-website-design/#provide-password-requirements) باهاش آشنا شدم.این ویژگی کمک می‌کند تا الزامات رمز عبور تعیین شوند، به طوری که مدیران رمز عبور و مرورگرها بتونند رمز عبورهای مناسب رو برای کاربران تولید کنند.
چیزی که می‌توان از طریق
passwordrules مشخص کرد:✅ حداقل و حداکثر طول رمز عبور؛
✅ نمادهای ضروری مانند اعداد یا علائم خاص؛
✅ الزامات مربوط به حروف بزرگ یا کوچک.
<input type="password"
passwordrules="minlength: 8; required: upper; required: digit; required: special;">
👀 نکته‌ای که باید به آن توجه کرد این است که در حال حاضر هیچ مشخصات رسمی کاملی برای ویژگی
passwordrules وجود ندارد، اما بحث درباره این ویژگی (https://github.com/whatwg/html/issues/3518) از سال ۲۰۱۸ در جریان است، که نشان‌دهنده علاقه‌مندی به این ایده است. اگر این ویژگی به استاندارد تبدیل شود، فرایند مدیریت رمز عبورها برای کاربران بسیار ساده‌تر شده و امنیت آن‌ها افزایش خواهد یافت.نظر من:
اضافه کردن ویژگی
passwordrules یک قدم بزرگ به سمت استانداردسازی الزامات رمز عبور خواهد بود. کاربران قادر خواهند بود به راحتی رمز عبورهای مطمئنی بسازند که با تمامی شرایط سایت همخوانی داشته باشند و احتمال خطا در هنگام ثبت‌نام کاهش پیدا خواهد کرد. 👍با این حال، مهم است که اطمینان حاصل شود:
✅ پشتیبانی گسترده از این ویژگی در مرورگرها؛
✅ حفاظت دقیق از آسیب‌پذیری‌های احتمالی تا این ویژگی نقطه ضعف امنیتی نشود.
نظر شما چیه؟ به نظرتون هنگام پیاده‌سازی چنین ابزاری باید به چه نکاتی توجه کرد؟ شاید شما هم با مشکلاتی در زمینه تولید رمز عبور در سایت‌ها مواجه شده‌اید؟ 🧐
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
1Password
Design your website to work best with 1Password | 1Password Developer
Learn how to make sure 1Password correctly fills forms and generates passwords on your website by following these design guidelines.
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
ابزاری جذاب دیگر را کشف کردم: Swapy
Swapy ابزاری است برای ایجاد رابط‌های کشیدن و رها کردن (drag-and-drop) تنها با چند خط کد.
ویژگی‌ها:
- قابل استفاده با هر فریمورکی مانند React، Vue، Angular، Svelte یا حتی بدون فریمورک.
- تنظیمات منعطف برای مشخص کردن اسلات‌ها و عناصر قابل جابه‌جایی.
- امکان افزودن انیمیشن‌ها و ردیابی تغییرات.
- نصب ساده و استفاده بسیار آسان.
برای شروع کافی است دستور زیر را اجرا کنید:
🔗 https://swapy.tahazsh.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
Swapy ابزاری است برای ایجاد رابط‌های کشیدن و رها کردن (drag-and-drop) تنها با چند خط کد.
ویژگی‌ها:
- قابل استفاده با هر فریمورکی مانند React، Vue، Angular، Svelte یا حتی بدون فریمورک.
- تنظیمات منعطف برای مشخص کردن اسلات‌ها و عناصر قابل جابه‌جایی.
- امکان افزودن انیمیشن‌ها و ردیابی تغییرات.
- نصب ساده و استفاده بسیار آسان.
برای شروع کافی است دستور زیر را اجرا کنید:
npm install swapy
🔗 https://swapy.tahazsh.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
👍3🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
🌸 جشـن مـیـــلاد امیرالمؤمنین علی(علیه‌السلام)
امام(علیه السلام) مى فرماید:
«اگر با این شمشیرم بر بن بینى مؤمن بزنم که مرا دشمن بدارد دشمن نخواهد داشت و اگر تمام دنیا را بر منافق بریزم که مرا دوست بدارد دوست نخواهد داشت»;
(لَوْ ضَرَبْتُ خَیْشُومَ الْمُؤْمِنِ بِسَیْفِی هَذَا عَلَى أَنْ یُبْغِضَنِی; مَا أَبْغَضَنِی; وَلَوْ صَبَبْتُ الدُّنْیَا بِجَمَّاتِهَا عَلَى الْمُنَافِقِ عَلى أَنْ یُحِبَّنِی مَا أَحَبَّنِی).
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
امام(علیه السلام) مى فرماید:
«اگر با این شمشیرم بر بن بینى مؤمن بزنم که مرا دشمن بدارد دشمن نخواهد داشت و اگر تمام دنیا را بر منافق بریزم که مرا دوست بدارد دوست نخواهد داشت»;
(لَوْ ضَرَبْتُ خَیْشُومَ الْمُؤْمِنِ بِسَیْفِی هَذَا عَلَى أَنْ یُبْغِضَنِی; مَا أَبْغَضَنِی; وَلَوْ صَبَبْتُ الدُّنْیَا بِجَمَّاتِهَا عَلَى الْمُنَافِقِ عَلى أَنْ یُحِبَّنِی مَا أَحَبَّنِی).
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
❤14🤬5👎1🤯1
روش شیک برای کوتاه کردن متن طولانی 💃
ترفند این است که یک پسو‌دوالمان را روی متن قرار دهید و به آن یک گرادیان خطی از چپ به راست اعمال کنید که از شفاف به رنگ جامد تغییر کند تا افکت محو شدن ایجاد شود.
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
ترفند این است که یک پسو‌دوالمان را روی متن قرار دهید و به آن یک گرادیان خطی از چپ به راست اعمال کنید که از شفاف به رنگ جامد تغییر کند تا افکت محو شدن ایجاد شود.
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
👍4❤1
آیا تا به حال دقت کرده‌اید که هنگام کپی کردن متن از برخی سایت‌ها، به طور خودکار لینک منبع نیز اضافه می‌شود؟ 🧐
این یک ترفند محبوب است که وب‌سایت‌ها از آن برای یادآوری منبع اصلی متن استفاده می‌کنند. اگر شما هم قصد دارید چنین قابلیتی را به سایت خود اضافه کنید، با استفاده از جاوااسکریپت می‌توانید این کار را به سادگی انجام دهید! 🚀
بیایید مراحل پیاده‌سازی را بررسی کنیم:
۱️⃣ ردیابی رویداد کپی
هنگامی که کاربر متنی را کپی می‌کند، می‌توان این عمل را با استفاده از مدیریت‌کننده رویداد copy ردیابی کرد.
۲️⃣ دریافت متن انتخاب‌شده
با استفاده از متد
۳️⃣ اضافه کردن منبع
یک رشته متنی شامل اطلاعات اضافی، مانند آدرس وب‌سایت یا امضا، ایجاد کنید و آن را با متن انتخاب‌شده ترکیب کنید.
۴️⃣ به‌روزرسانی محتوای کلیپ‌بورد
با متد
۵️⃣ جلوگیری از رفتار پیش‌فرض
برای جلوگیری از کپی شدن تنها متن انتخاب‌شده توسط مرورگر، از متد
حالا هر زمان که کاربر متنی را از سایت شما کپی کند، اطلاعات اضافی نیز به طور خودکار به کلیپ‌بورد اضافه می‌شود. 👍
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
این یک ترفند محبوب است که وب‌سایت‌ها از آن برای یادآوری منبع اصلی متن استفاده می‌کنند. اگر شما هم قصد دارید چنین قابلیتی را به سایت خود اضافه کنید، با استفاده از جاوااسکریپت می‌توانید این کار را به سادگی انجام دهید! 🚀
بیایید مراحل پیاده‌سازی را بررسی کنیم:
۱️⃣ ردیابی رویداد کپی
هنگامی که کاربر متنی را کپی می‌کند، می‌توان این عمل را با استفاده از مدیریت‌کننده رویداد copy ردیابی کرد.
۲️⃣ دریافت متن انتخاب‌شده
با استفاده از متد
window.getSelection().toString() می‌توان متن انتخاب‌شده توسط کاربر را استخراج کرد.۳️⃣ اضافه کردن منبع
یک رشته متنی شامل اطلاعات اضافی، مانند آدرس وب‌سایت یا امضا، ایجاد کنید و آن را با متن انتخاب‌شده ترکیب کنید.
۴️⃣ به‌روزرسانی محتوای کلیپ‌بورد
با متد
event.clipboardData.setData() متن جدید را به کلیپ‌بورد انتقال دهید.۵️⃣ جلوگیری از رفتار پیش‌فرض
برای جلوگیری از کپی شدن تنها متن انتخاب‌شده توسط مرورگر، از متد
event.preventDefault() استفاده کنید.حالا هر زمان که کاربر متنی را از سایت شما کپی کند، اطلاعات اضافی نیز به طور خودکار به کلیپ‌بورد اضافه می‌شود. 👍
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
👏3👍1
📱 بهینه‌سازی شرایط با استفاده از و && در جاوااسکریپت
استفاده از عملگرهای و && می‌تواند کد را ساده‌تر کرده و از بررسی‌های غیرضروری جلوگیری کند:
🔸 عملگر || (OR):
این عملگر به شما اجازه می‌دهد که یک مقدار پیش‌فرض برای متغیر تعیین کنید اگر مقدار اصلی آن خالی یا نامعتبر باشد.
🔸 عملگر && (AND):
این عملگر امکان انجام عملی را تنها در صورت معتبر بودن مقدار یک متغیر فراهم می‌کند.
در این مثال:
🔸 متغیر `name` مقدار "مهمان" دریافت می‌کند، اگر `user.name` تعریف نشده باشد:
این خط بررسی می‌کند که آیا
🔸 پیام تنها در صورتی ارسال می‌شود که `user` وجود داشته باشد:
این خط اطمینان حاصل می‌کند که تابع
این رویکرد از بروز خطاهای احتمالی جلوگیری کرده و کد را تمیزتر می‌کند. 😊
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
استفاده از عملگرهای
🔸 عملگر || (OR):
این عملگر به شما اجازه می‌دهد که یک مقدار پیش‌فرض برای متغیر تعیین کنید اگر مقدار اصلی آن خالی یا نامعتبر باشد.
🔸 عملگر && (AND):
این عملگر امکان انجام عملی را تنها در صورت معتبر بودن مقدار یک متغیر فراهم می‌کند.
در این مثال:
🔸 متغیر `name` مقدار "مهمان" دریافت می‌کند، اگر `user.name` تعریف نشده باشد:
let name = user.name || "مهمان";
این خط بررسی می‌کند که آیا
user.name مقدار معتبری دارد یا خیر. اگر تعریف نشده یا مقدار آن خالی باشد، مقدار پیش‌فرض "مهمان" به name اختصاص داده می‌شود.🔸 پیام تنها در صورتی ارسال می‌شود که `user` وجود داشته باشد:
user && sendMessage(user);
این خط اطمینان حاصل می‌کند که تابع
sendMessage تنها زمانی اجرا می‌شود که user وجود داشته باشد (یعنی مقدار آن undefined یا null نباشد). این رویکرد از بروز خطاهای احتمالی جلوگیری کرده و کد را تمیزتر می‌کند. 😊
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
👍4❤2🙏1
🖤 وفات حضرت زینب(س)
قسمتی از خطبه حضرت زینب سلام الله علیها در کاخ یزید لعنت الله علیه:
ای یزید آیا گمان می بری این که اطراف زمین و آفاق آسمان را بر ما تنگ گرفتی و راه چاره را بر ما بستی که ما را به مانند کنیزان به اسیری برند، ما نزد خدا خوار و تو سربلند گشته و دارای مقام و منزلت شده ای، پس خود را بزرگ پنداشته به خود بالیدی، شادمان و مسرور گشتی که دیدی دنیا چند روزی به کام تو شده و کارها بر وفق مراد تو می چرخد، و حکومتی که حق ما بود در اختیار تو قرار گرفته است، آرام باش، آهسته تر. آیا فراموش کرده ای قول خداوند متعال را «و کسانی که کافر شدند، گمان نکنند مهلتی که به آنان می دهیم به سودشان خواهد بود، جز این نیست که مهلتشان می دهیم تا بر گناه خود بیفزایند، و برای آنان عذابی خوار کننده است»
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
قسمتی از خطبه حضرت زینب سلام الله علیها در کاخ یزید لعنت الله علیه:
ای یزید آیا گمان می بری این که اطراف زمین و آفاق آسمان را بر ما تنگ گرفتی و راه چاره را بر ما بستی که ما را به مانند کنیزان به اسیری برند، ما نزد خدا خوار و تو سربلند گشته و دارای مقام و منزلت شده ای، پس خود را بزرگ پنداشته به خود بالیدی، شادمان و مسرور گشتی که دیدی دنیا چند روزی به کام تو شده و کارها بر وفق مراد تو می چرخد، و حکومتی که حق ما بود در اختیار تو قرار گرفته است، آرام باش، آهسته تر. آیا فراموش کرده ای قول خداوند متعال را «و کسانی که کافر شدند، گمان نکنند مهلتی که به آنان می دهیم به سودشان خواهد بود، جز این نیست که مهلتشان می دهیم تا بر گناه خود بیفزایند، و برای آنان عذابی خوار کننده است»
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
❤16👎4🤬2👍1😡1
مقایسه عملکرد سیستم های واکنش پذیری Vue 2 و Vue 3
🔗https://stackblitz.com/edit/sb1-ftgjrkge?file=performance.js
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
🔗https://stackblitz.com/edit/sb1-ftgjrkge?file=performance.js
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
❤2👍1
می‌توان از AbortController نه تنها برای لغو درخواست‌های شبکه‌ای، بلکه برای لغو تقریباً هر نوع رویدادی دیگر مانند **setTimeout**، انیمیشن‌ها یا کلیک روی دکمه نیز استفاده کرد.
گاهی اوقات این روش راحت‌تر از استفاده از روش‌های اشتراک و لغو اشتراک (unsubscribe/subscribe) است.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
const abortController = new AbortController();
button.addEventListener(
'click',
() => console.log('clicked'),
{ signal: abortController.signal }
);
abortController.abort();
گاهی اوقات این روش راحت‌تر از استفاده از روش‌های اشتراک و لغو اشتراک (unsubscribe/subscribe) است.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
👍2
ویدیو دوبله شده در مورد Install ESLint Prettier extensions for VSCode [+لینک]
Prettier و ESLint هر دو ابزارهایی برای بهبود کد هستند، اما نقش‌های متفاوتی دارند.
Prettier یک فرمت‌کننده کد است که به طور خودکار کد شما را قالب‌بندی می‌کند و آن را مرتب می‌کند تا خواناتر شود. این ابزار بر نحوه نگارش کد تمرکز دارد.
ESLint اما یک ابزار تحلیل استاتیک کد است که به شما کمک می‌کند تا خطاهای رایج در کد را شناسایی کنید و همچنین می‌تواند به شما در رعایت قواعد کدنویسی کمک کند.
در واقع، Prettier به ظاهر کد می‌پردازد، در حالی که ESLint به کیفیت و صحت کد. معمولاً از هر دو به صورت مکمل استفاده می‌شود.
🔗https://www.aparat.com/v/mpo29n3
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript
Prettier و ESLint هر دو ابزارهایی برای بهبود کد هستند، اما نقش‌های متفاوتی دارند.
Prettier یک فرمت‌کننده کد است که به طور خودکار کد شما را قالب‌بندی می‌کند و آن را مرتب می‌کند تا خواناتر شود. این ابزار بر نحوه نگارش کد تمرکز دارد.
ESLint اما یک ابزار تحلیل استاتیک کد است که به شما کمک می‌کند تا خطاهای رایج در کد را شناسایی کنید و همچنین می‌تواند به شما در رعایت قواعد کدنویسی کمک کند.
در واقع، Prettier به ظاهر کد می‌پردازد، در حالی که ESLint به کیفیت و صحت کد. معمولاً از هر دو به صورت مکمل استفاده می‌شود.
🔗https://www.aparat.com/v/mpo29n3
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript
🔥3