ویدیو دوبله شده در مورد Git Submodules [+لینک]
زیرماژول‌ها در Git به شما این امکان را می‌دهند که یک مخزن Git را به عنوان زیرمجموعه‌ای از مخزن دیگری نگهداری کنید. این ویژگی زمانی مفید است که بخواهید یک پروژه بزرگتر (مخزن اصلی) را به بخش‌های کوچک‌تر تقسیم کنید، یا از پروژه‌های دیگر به عنوان وابستگی (dependency) در پروژه خود استفاده کنید.



🔗https://www.aparat.com/v/rnwwb88
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

ده نکته برای نوشتن کد تمیز در Vue.js

۱. استفاده منطقی از Composition API
کدهای بزرگ را به اجزای کوچک‌تر و قابل استفاده مجدد تقسیم کنید تا ساختار ماژولار و خوانایی حفظ شود.

۲. پیروی از قواعد نام‌گذاری در Vue
برای نام فایل‌های کامپوننت‌ها از PascalCase و در صورت نیاز برای استفاده در قالب‌ها از kebab-case استفاده کنید.

۳. اجتناب از استفاده بیش از حد از Vuex یا Pinia
وضعیت‌های موقتی رابط کاربری (مانند نمایش یا عدم نمایش پنجره‌ها) را در کامپوننت‌های محلی نگه دارید و از مدیریت وضعیت جهانی پرهیز کنید.
مثال: برای وضعیت‌های موقتی از ref یا reactive استفاده کنید.

۴. استفاده کارآمد از Slots
از اسلات‌های نام‌گذاری‌شده برای انعطاف‌پذیری بیشتر در کامپوننت‌های قابل استفاده مجدد بهره بگیرید و نحوه استفاده از آن‌ها را مستند کنید.
مثال: کامپوننتی به نام Card ایجاد کنید که شامل <slot name="header"></slot> برای سفارشی‌سازی عنوان‌ها باشد.

۵. استفاده از Scoped Styles
از سبک‌های محدوده‌دار (<style scoped>) استفاده کنید تا از تداخل CSS با سایر بخش‌های برنامه جلوگیری شود.
مثال: سبک‌های خاص کامپوننت را بدون تأثیرگذاری روی دیگر بخش‌ها اعمال کنید.

۶. نوشتن کامپوننت‌های قابل استفاده مجدد
عناصر رابط کاربری را به کامپوننت‌های خاص و قابل استفاده مجدد تقسیم کنید و از طراحی بیش از حد کلی پرهیز کنید.
مثال: به جای کدنویسی ثابت دکمه‌ها، کامپوننتی به نام Button ایجاد کنید که از Propها برای انواع سبک‌ها پشتیبانی کند.

۷. مدیریت کدهای ناهمگام
از async/await برای درخواست‌های API استفاده کنید و خطاها را با یک تابع مرکزی مدیریت کنید.

۸. مستندسازی Props و Eventها
‏Props و Eventها را به وضوح تعریف و مستند کنید. از ابزارهایی مانند defineProps و defineEmits یا TypeScript برای خوانایی و اطمینان از صحت نوع‌ها استفاده کنید.
مثال: در Vue ۳ از defineProps و defineEmits بهره بگیرید.

۹. لینت کردن کد
‏ESLint و Prettier را با تنظیمات خاص Vue پیکربندی کنید تا کیفیت و یکپارچگی کد تضمین شود.

۱۰. ساده‌سازی قالب‌ها
از منطق‌های پیچیده در قالب‌ها خودداری کنید و به جای آن از ویژگی‌های محاسبه‌شده یا متدها استفاده کنید.
مثال: به جای v-if="list.filter(item => item.active).length > 0" از ویژگی محاسبه‌شده‌ای مانند activeItems استفاده کنید.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

نمونه‌ای از "نشت" استایل‌ها در Vue 3 با استفاده از Scoped Styles

<!-- A.vue -->
<div class="a" />

<!-- B.vue -->
<div class="b">
  <div class="a">
    <A /> <!-- اوه، مشکل! -->
  </div>
</div>

در این مثال، دو کامپوننت A.vue و B.vue هر دو از کلاسی با نام مشابه a استفاده می‌کنند. این مسئله حتی با وجود استفاده از scoped styles می‌تواند منجر به نشت استایل‌ها شود.
برای مشاهده و تست این مسئله می‌توانید از لینک زیر استفاده کنید

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

🔗https://play.vuejs.org/#eNqdUj1PwzAQ/SvWzSgZYCoFKaAOMAACRi/GuQYXx7Z8Timq+t85O7S0AlWIKfH7sN7d8xqaEKrlgDCBKeloQhKEaQiX0pk++JhEI+bR90JCVTdZKeFcOumm9ShnIR8S9sGqhHyatmYptFVEFxJeJDAkxAGovkCGG1GPfM2CbN59927kI6UPi4K0D9gyUimxzjbtrY8T0UVEx6k2JVaWsgZOILHBzU1XLcg7nrB4JGjfB2Mx3odkvCMJk/G2zClr/fttwVIc8GSL61fUb7/gC1plTMJDRMK45PXsuKRih2mkZ093uOL/Hdn7drCsPkI+Ink75Iyj7GpwLcfe05W0N6Un47pnmq0SOtoOlYNm5aboJXB510dG/457Wp0VH2+Ut1ha//E+/tZ/rtoI1YuI7f+6ZeNhs7D5BMkN50M=
#️⃣#tip #vue
👥@IR_javascript_group
🆔@IR_javascript

آیا تا به حال به این فکر کرده‌اید که چرا در CSS از :hover و ::before استفاده می‌شود؟ به نظر می‌رسد تفاوت چندانی بین آن‌ها وجود ندارد، اما در واقع این تفاوت اساسی است! بیایید با هم بررسی کنیم.

✨ یک دونقطه (:) — شبه‌کلاس‌ها
شبه‌کلاس‌ها حالات یک عنصر یا ویژگی‌های آن را در ساختار DOM توصیف می‌کنند.

نمونه‌ها:
✅ :hover — عنصری که ماوس روی آن قرار گرفته است.
✅ :focus — عنصری که در حالت فوکوس است.
✅ :nth-child(۲) — دومین عنصر فرزند.

button:hover {
  background-color: lightblue; /* تغییر رنگ هنگام قرار گرفتن ماوس */
}

✨ دو دونقطه (::) — شبه‌عنصرها
شبه‌عنصرها به شما امکان می‌دهند عناصر اضافی ایجاد کنید که در HTML وجود ندارند، مثلاً افزودن متن قبل یا بعد از یک عنصر.

نمونه‌ها:
✅ ::before — عنصر مجازی قبل از عنصر اصلی.
✅ ::after — عنصر مجازی بعد از عنصر اصلی.
✅ ::placeholder — متن جای‌نگه‌دار در فیلد ورودی.

button::after {
  content: ' →'; /* افزودن فلش بعد از متن دکمه */
}

🕰 لحظه‌ای تاریخی
قبل از CSS3، همه چیز با یک دونقطه نوشته می‌شد، مثلاً :before و :after. اما بعداً تصمیم گرفته شد تا حالات (:) از عناصر (::) به صورت بصری جدا شوند.

مرورگرهای مدرن از هر دو حالت پشتیبانی می‌کنند، اما ::before و ::after به عنوان فرم صحیح‌تر در نظر گرفته می‌شوند.

💡 چگونه به خاطر بسپاریم؟
👀 اگر این یک حالت از عنصر است — از یک دونقطه (:) استفاده کنید.
👀 اگر در حال ایجاد بخش مجازی از یک عنصر هستید — از دو دونقطه (::) استفاده کنید.

یک مثال گویاتر از هزار کلمه:

/* شبه‌کلاس: حالت */
button:hover {
  background-color: lightblue;
}

/* شبه‌عنصر: ایجاد */
button::before {
  content: '🔥';
}

نتیجه: یک دکمه با یک شعله قبل از متن که هنگام قرار گرفتن ماوس روی آن، رنگش تغییر می‌کند! 👍.

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

انیمیشن‌های مبتنی بر اسکرول 🤩

یک رویکرد جدید برای ایجاد انیمیشن‌ها که اسکرول کردن را نه تنها به عنوان یک روش ناوبری، بلکه به عنوان ابزاری مهم برای کنترل انیمیشن‌ها معرفی می‌کند.

این روش به شما امکان می‌دهد انیمیشن را به یک محدوده خاص از اسکرول با استفاده از ویژگی‌های animation-timeline و animation-range متصل کنید. به جای اینکه انیمیشن بر اساس زمان فعال شود، آن را به موقعیت صفحه گره می‌زنید.

در ادامه، ویژگی‌های اصلی و نحوه عملکرد آن‌ها را بررسی می‌کنیم:
‏✅ `animation-timeline` — این ویژگی انیمیشن شما را به یک تایم‌لاین مبتنی بر اسکرول متصل می‌کند. منبعی را مشخص می‌کند که وضعیت انیمیشن به آن وابسته است (مثلاً اسکرول یک عنصر یا صفحه).

animation-timeline: scroll(root);

‏✅ `animation-range` — محدوده‌ای از اسکرول را تعیین می‌کند که در آن انیمیشن اتفاق می‌افتد. این ویژگی برای اتصال انیمیشن به بخش‌ها یا محدوده‌های خاص صفحه مفید است.

animation-range: 0% 50%; /* انیمیشن در نیمه اول اسکرول اتفاق می‌افتد */

منابع مفید:
⛓️ انیمیشن‌های مبتنی بر اسکرول در CSS: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations)
⛓️ نمونه پیاده‌سازی: [CodePen](https://codepen.io/katrin_profrontend/pen/RNbgWaO)

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


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

اصول اصلی توسعه مبتنی بر رویکرد محلی (Local-First)

توسعه مبتنی بر رویکرد محلی شباهت‌هایی با روش‌های offline-first دارد، اما فراتر رفته و توجه بیشتری به کنترل کاربر و مالکیت داده‌ها می‌کند. در ادامه، اصول کلیدی که یک برنامه وب واقعاً مبتنی بر رویکرد محلی را تعریف می‌کنند، آورده شده‌اند:

- دسترسی فوری: کاربران می‌توانند بدون نیاز به انتظار برای بارگیری یا همگام‌سازی داده‌ها، بلافاصله به کار خود دسترسی داشته باشند (بدون نمایش اسپینرهای انتظار).

- استقلال از دستگاه: داده‌ها به‌راحتی در دستگاه‌های مختلف در دسترس هستند.

- استقلال از شبکه: وظایف اصلی بدون نیاز به اتصال به اینترنت قابل انجام هستند.

- سهولت در همکاری: برنامه از همکاری آسان پشتیبانی می‌کند، حتی در سناریوهای آفلاین.

- داده‌های پایدار (Future-Proof): داده‌های کاربران در طول زمان قابل دسترسی و استفاده باقی می‌مانند، بدون توجه به تغییرات در نرم‌افزار.

- امنیت داخلی: امنیت و حریم خصوصی از جنبه‌های اساسی طراحی هستند.

- کنترل کاربر: کاربران مالکیت کامل داده‌های خود را دارند و آن‌ها را کنترل می‌کنند.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

آیا ارزش دارد که یادگیری فرانت‌اند را آغاز کنیم، در حالی که هوش مصنوعی تقریباً به "سنیور" تبدیل شده است؟ 🙁

هر بار که فناوری‌ها جهش می‌کنند، سوال نگران‌کننده‌ای مطرح می‌شود: «آیا حالا دیگر به انسان‌ها نیازی نیست؟» در حال حاضر، هوش مصنوعی واقعاً شگفت‌انگیز است: کد می‌نویسد، باگ‌ها را پیدا می‌کند و راه‌حل‌ها را بهینه می‌کند. اما بیایید بررسی کنیم که آیا او می‌تواند توسعه‌دهندگان را جایگزین کند یا فقط نقش آن‌ها را تغییر خواهد داد؟

🤖 هوش مصنوعی چه کارهایی می‌تواند انجام دهد و چه کارهایی نمی‌تواند؟

🔢 هوش مصنوعی در حال حاضر می‌تواند:
✅ کدهای الگو را تولید کند؛
✅ راه‌حل‌هایی بر اساس داده‌های موجود پیشنهاد دهد؛
✅ بهینه‌سازی‌ها را انجام دهد.

🔢 اما هنوز درک نمی‌کند:
✅ زمینه‌های کسب‌وکار. او نمی‌داند که چرا یک محصول باید این مشکل خاص را حل کند و نه مشکل دیگری؛
✅ نیازهای کاربران. هوش مصنوعی احساس نمی‌کند که چه چیزی رابط کاربری را راحت می‌کند و چه چیزی آزاردهنده است؛
✅ راه‌حل‌های خلاقانه. او در چارچوب داده‌ها و الگوریتم‌های شناخته شده عمل می‌کند و چیزی جدید نمی‌سازد.

کد تنها یک ابزار است و نه هدف. ارزش واقعی در یک توسعه‌دهنده، توانایی تفکر، درک مشکلات و ساخت معماری است و نه صرفاً تولید خطوط کد.

🤖 هوش مصنوعی ≠ چوب جادو

به نظر می‌رسد که هوش مصنوعی به زودی به یک توسعه‌دهنده کامل تبدیل خواهد شد، اما در واقعیت همه چیز بسیار پیچیده‌تر است.

برای مثال:
✅ او تنها بر اساس آنچه که قبلاً وجود دارد، آموزش می‌بیند. اگر یک وظیفه منحصر به فرد باشد یا نیاز به رویکرد غیرمعمولی داشته باشد، هوش مصنوعی غالباً نمی‌تواند آن را انجام دهد؛
✅ بسیاری از نمونه‌های کدی که او تولید می‌کند، از ایده‌آل فاصله دارند. اغلب نیاز به دست یک متخصص با تجربه است تا همه چیز را به حالت عملی درآورد.

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

💡 چرا باید فرانت‌اند را یاد بگیریم؟
✅ هوش مصنوعی یک دستیار است، نه رقیب. او کار را تسریع می‌کند و بارهای تکراری را از دوش برمی‌دارد، اما تمام زنجیره تولید محصول را نمی‌بندد؛
✅ فناوری‌ها در حال تکامل هستند. ما دیگر مانند سال‌های دو هزار وب‌سایت نمی‌نویسیم، اما تقاضا برای توسعه‌دهندگان فرانت‌اند همچنان در حال افزایش است؛
✅ فرانت‌اند شغل آینده است. توانایی ترکیب خلاقیت با منطق و فناوری‌ها این حوزه را خاص می‌کند؛
✅ تقاضا برای محصولات دیجیتال تنها در حال افزایش است. هوش مصنوعی ایده‌ها را نمی‌سازد و نمی‌داند که فردا چه چیزی برای مردم لازم خواهد بود — این وظیفه انسان است.

⚡️ چه مهارت‌هایی را باید توسعه دهیم؟
✅ یادگیری فناوری‌های پایه؛
✅ یادگیری تفکر سیستمی. طراحی معماری، درک تعامل بین بک‌اند و فرانت‌اند؛
✅ توسعه مهارت‌های نرم. توانایی توضیح ایده، کار با افراد و حل تعارضات به طور فزاینده‌ای مهم‌تر می‌شود؛
✅ استفاده از هوش مصنوعی. یاد بگیرید که چگونه به درستی پرامپت‌ها را بنویسید و در صورت نیاز آن‌ها را اصلاح کنید.

🚀 آیا هوش مصنوعی توسعه‌دهندگان را جایگزین خواهد کرد؟
چند سال پیش گفته می‌شد که React و Angular همه طراحان را جایگزین خواهند کرد: "چرا باید HTML بنویسیم، وقتی که همه چیز را می‌توان در کامپوننت‌ها جمع کرد؟" سال‌ها گذشت و چه چیزی می‌بینیم؟ طراحان نه تنها ناپدید نشده‌اند، بلکه سازگار شده و به مهندسان فرانت‌اند تبدیل شده‌اند که با کامپوننت‌ها، استایل‌ها و معماری کار می‌کنند. علاوه بر این، هنوز هم تقاضا برای طراحان واقعی و باکیفیت وجود دارد!

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

دنیا در حال پیشرفت است و این فوق‌العاده است. بنابراین لپ‌تاپ خود را بردارید، ویرایشگر کد را باز کنید و به یاد داشته باشید: هوش مصنوعی در خدمت شماست، نه جایگزین شما. 💻
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

### رازهای DevTools در Chrome: چگونه $ و $$ کار با DOM را سرعت می‌بخشند؟

اگر هنوز برای جستجوی عناصر DOM در کنسول، از دستورات طولانی مانند document.querySelector و document.querySelectorAll استفاده می‌کنید، وقت آن است که با ابرقهرمانان DevTools یعنی $ و $$ آشنا شوید! 🚀

✅ $ – جستجوی سریع یک عنصر
برای یافتن اولین عنصر با کلاس خاص، کافی است بنویسید:

$('.my-class')

این دستور معادل کوتاه شده‌ی زیر است:

document.querySelector('.my-class')

خواناتر و جمع‌وجورتر، این‌طور نیست؟

✅ $$ – جستجوی تمامی عناصر
اگر به تمام عناصر با یک کلاس نیاز دارید، این دستور به کار می‌آید:

$$('.my-class')

نتیجه یک آرایه شامل تمام عناصری است که دارای این کلاس هستند. معادل آن در حالت معمولی به شکل زیر است:

document.querySelectorAll('.my-class')

علاوه بر این، می‌توانید مستقیماً از متدهایی مانند .forEach() یا .map() استفاده کنید:

$$('.my-class').forEach(el => el.style.color = 'red');

### چرا این روش مفید است؟
✅ صرفه‌جویی در زمان – دستورات کوتاه‌تر، سرعت بیشتر.
✅ دسترسی مستقیم به DOM در کنسول – برای بررسی یا ویرایش سریع.
✅ اشکال‌زدایی مؤثرتر – به‌راحتی متن، استایل یا انتخابگرها را تغییر دهید:

$('.my-button').textContent = 'روی من کلیک کن!';
$$('img').forEach(img => img.style.border = '۲px solid blue');

💟💟 شما از چه ترفندهای دیگری در DevTools استفاده می‌کنید؟ تجربیات خود را در نظرات به اشتراک بگذارید! 👇

#️⃣#tip
👥@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

### چند نقل‌قول درباره TypeScript

‏«TypeScript مجموعه‌ای از کارهای اضافی است برای حل مسائلی که من ندارم، به روش‌هایی که دوست ندارم.»
*کایل سیمپسون*، نویسنده مجموعه کتاب‌های بسیار تأثیرگذار «شما JS را نمی‌شناسید».

«ما کدهای خود را به TypeScript بازنویسی کردیم و سی درصد بیشتر باگ دریافت کردیم.»

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

«نود و پنج درصد امکاناتی که TypeScript ارائه می‌دهد، با تلاش کمتر و ابزارهای دیگر مانند لینتینگ سخت‌گیرانه و JSDocs قابل دستیابی است.»

«من حدود ده پروژه‌ی کدنویسی TypeScript را بررسی کرده‌ام، اما در هیچ‌کدام واقعاً نتوانستم کد را بخوانم. آن‌قدر زشت و بدساختار است که تعجب می‌کنم چه کسی این هیولا را طراحی کرده است؟»

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

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


🔗https://dev.to/thejaredwilcurt/quotes-about-typescript-2ohf
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

پیشنهاد می‌کنم در نظرات، سه موردی را به اشتراک بگذارید که کار شما را راحت‌تر و مؤثرتر می‌کند. چیزهایی که خلاقانه و غیرمعمول هستند، نه صرفاً موارد بدیهی و ضروری مانند Vite.

برای شروع:

1. ویرایشگر IDE Cursor (دستیار مبتنی بر هوش مصنوعی)
2. پیکربندی @sxzz/eslint-config ([لینک](https://github.com/sxzz/eslint-config))

شما چه ابزارها و راهکارهای خاصی دارید؟ 🌟

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

در همین حال، نتایج نظرسنجی State of JS 2024 منتشر شد! (لینک: stateofjs.com)

Vite و Vue همچنان موقعیت‌های پیشرو خود را تقویت کرده‌اند و نشان دادند که چرا انتخاب اول بسیاری از توسعه‌دهندگان هستند.

و اما ایوان یو، بی‌شک یکی از برجسته‌ترین و تأثیرگذارترین شخصیت‌های دنیای فرانت‌اند در سال‌های اخیر است.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

میلاد با سعادت حضرت جواد الأئمة
🔹 علَيْكُمْ بِطَلَبِ الْعِلْمِ، فَإنَّ طَلَبَهُ فَريضَةٌ وَالْبَحْثَ عَنْهُ نافِلَةٌ، وَ هُوَ صِلَةُ بَيْنَ الاْخْوانِ، وَ دَليلٌ عَلَى الْمُرُوَّةِ، وَ تُحْفَةٌ فِى الْمَجالِسِ، وَ صاحِبٌ فِى السَّفَرِ، وَ أنْسٌ فِى الْغُرْبَةِ.
(بحارالانوار، ج۷۵، ص۸۰)

🔹 بر شما باد به تحصيل علم و معرفت، چون فراگيرى آن واجب و بحث پيرامون آن مستحب و پُرفائده است. علم وسيله كمک به دوستان و برادران است، دليل و نشانه مروّت و جوانمردى است، هديه و سرگرمى در مجالس است، همدم و رفيق انسان در مسافرت است؛ و انيس و مونس انسان در تنهایى است.

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

ابزار جذاب برای انیمیشن اعداد - Number Flow

این یک کامپوننت است که به اعداد در رابط کاربری جان می‌بخشد. از فریم‌ورک‌های React، Vue و Svelte پشتیبانی می‌کند، بدون وابستگی به کتابخانه‌های خارجی کار می‌کند و بسیار انعطاف‌پذیر است.

✨ ویژگی‌های Number Flow:

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

🔗 http://number-flow.barvian.me/
#️⃣#npm_module
👥@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