ویژگی غیرمعمولی به نام 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

ابزاری جذاب دیگر را کشف کردم: Swapy

Swapy ابزاری است برای ایجاد رابط‌های کشیدن و رها کردن (drag-and-drop) تنها با چند خط کد.

ویژگی‌ها:
- قابل استفاده با هر فریمورکی مانند React، Vue، Angular، Svelte یا حتی بدون فریمورک.
- تنظیمات منعطف برای مشخص کردن اسلات‌ها و عناصر قابل جابه‌جایی.
- امکان افزودن انیمیشن‌ها و ردیابی تغییرات.
- نصب ساده و استفاده بسیار آسان.

برای شروع کافی است دستور زیر را اجرا کنید:

npm install swapy

🔗 https://swapy.tahazsh.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

🌸 جشـن‌ مـیـــلاد امیرالمؤمنین علی(علیه‌السلام)

امام(علیه السلام) مى فرماید:
«اگر با این شمشیرم بر بن بینى مؤمن بزنم که مرا دشمن بدارد دشمن نخواهد داشت و اگر تمام دنیا را بر منافق بریزم که مرا دوست بدارد دوست نخواهد داشت»;
(لَوْ ضَرَبْتُ خَیْشُومَ الْمُؤْمِنِ بِسَیْفِی هَذَا عَلَى أَنْ یُبْغِضَنِی; مَا أَبْغَضَنِی; وَلَوْ صَبَبْتُ الدُّنْیَا بِجَمَّاتِهَا عَلَى الْمُنَافِقِ عَلى أَنْ یُحِبَّنِی مَا أَحَبَّنِی).

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

آیا تا به حال دقت کرده‌اید که هنگام کپی کردن متن از برخی سایت‌ها، به طور خودکار لینک منبع نیز اضافه می‌شود؟ 🧐

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

بیایید مراحل پیاده‌سازی را بررسی کنیم:

۱️⃣ ردیابی رویداد کپی
هنگامی که کاربر متنی را کپی می‌کند، می‌توان این عمل را با استفاده از مدیریت‌کننده رویداد copy ردیابی کرد.

۲️⃣ دریافت متن انتخاب‌شده
با استفاده از متد window.getSelection().toString() می‌توان متن انتخاب‌شده توسط کاربر را استخراج کرد.

۳️⃣ اضافه کردن منبع
یک رشته متنی شامل اطلاعات اضافی، مانند آدرس وب‌سایت یا امضا، ایجاد کنید و آن را با متن انتخاب‌شده ترکیب کنید.

۴️⃣ به‌روزرسانی محتوای کلیپ‌بورد
با متد event.clipboardData.setData() متن جدید را به کلیپ‌بورد انتقال دهید.

۵️⃣ جلوگیری از رفتار پیش‌فرض
برای جلوگیری از کپی شدن تنها متن انتخاب‌شده توسط مرورگر، از متد event.preventDefault() استفاده کنید.

حالا هر زمان که کاربر متنی را از سایت شما کپی کند، اطلاعات اضافی نیز به طور خودکار به کلیپ‌بورد اضافه می‌شود. 👍



#️⃣#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

🖤 وفات حضرت زینب(س)

قسمتی از خطبه حضرت زینب سلام الله علیها در کاخ یزید لعنت الله علیه:

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


#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

مقایسه عملکرد سیستم های واکنش پذیری Vue 2 و Vue 3

🔗https://stackblitz.com/edit/sb1-ftgjrkge?file=performance.js
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

می‌توان از AbortController نه تنها برای لغو درخواست‌های شبکه‌ای، بلکه برای لغو تقریباً هر نوع رویدادی دیگر مانند **setTimeout**، انیمیشن‌ها یا کلیک روی دکمه نیز استفاده کرد.

const abortController = new AbortController();

button.addEventListener(
  'click',
  () => console.log('clicked'),
  { signal: abortController.signal }
);

abortController.abort();

گاهی اوقات این روش راحت‌تر از استفاده از روش‌های اشتراک و لغو اشتراک (unsubscribe/subscribe) است.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد 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

// useUserService.ts

function isAuthenticated() {
  return !!user.value;
}

// کامپوننت A

<script>
const { isAuthenticated } = useUserService();
</script>

<template>
  <p v-if="isAuthenticated()">سلام</p>
</template>

توابع در Vue رفتار متفاوتی از توابع معمولی دارند.

در این مثال، تابع isAuthenticated() مانند یک computed عمل می‌کند و هر بار که مقدار user تغییر کند یا کامپوننت A دوباره رندر شود، فراخوانی خواهد شد.

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

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


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

یک کتابخانه جالب از الگوهای هندسی رایگان است.

🔗http://mazeletter.xyz/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

Intl.DurationFormat: زمان تحت کنترل ⏳

در برخی موارد، نیاز است که مدت زمان را به شکلی راحت و قابل درک برای کاربر نمایش دهیم. به عنوان مثال، تایمرها، گزارش‌ها یا حتی زمان باقی‌مانده برای بارگذاری. برای چنین مواقعی اکنون یک راه‌حل واقعی در دسترس است — Intl.DurationFormat (اما مراقب باشید - پشتیبانی از آن تنها ۸۲٪ است، و متاسفانه هنوز در Firefox پشتیبانی نمی‌شود).

چطور در عمل به نظر می‌رسد؟

const durationFormatter = new Intl.DurationFormat('fa', {
  style: 'long', // می‌تواند 'long'، 'short' یا 'narrow' باشد
});

const duration = { hours: 2, minutes: 5, seconds: 32 };
console.log(durationFormatter.format(duration)); // خروجی: "۲ ساعت ۵ دقیقه ۳۲ ثانیه"

چرا این مفید است:

✅ لکالیزه کردن: پشتیبانی از زبان‌های مختلف، که به‌طور خودکار با قوانین هر منطقه تنظیم می‌شود.
✅ انعطاف‌پذیری: می‌توانید واحدهای مورد نظر خود را تنظیم کنید: اگر می‌خواهید فقط دقیقه و ثانیه نمایش داده شود، به راحتی امکان‌پذیر است!

❗️ برای مطالعه بیشتر: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DurationFormat)

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

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

Wow.js

یک کتابخانه JavaScript است که انیمیشن‌ها را به عناصر صفحه هنگام اسکرول اضافه می‌کند. این کتابخانه به‌طور خودکار عناصری که وارد ناحیه قابل مشاهده پنجره مرورگر می‌شوند را شناسایی کرده و انیمیشن‌های CSS را به آن‌ها اعمال می‌کند.


🔗 https://www.delac.io/WOW/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

پس‌زمینه‌ی پیکسلی در حال درخشش که هنگام حرکت موس روی عنصر فعال می‌شود

🔗https://codepen.io/hexagoncircle/pen/KwPpdBZ
#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

سایت مفید AngryTools که شامل ابزارهای مختلفی برای توسعه وب است.

به عنوان مثال، ابزارهایی برای ایجاد انیمیشن‌های CSS یا تولیدکننده Flexbox.

🔗https://angrytools.com/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

شهادت امام موسی کاظم (ع)

امام موسی کاظم عليه‌السلام:
سه دسته در روز قيامت، روزى كه سايه و پناهى جز سايه خداوند نيست، در سايه و پناه خدا هستند:
۱. مردى كه زمينه ازدواج برادر مسلمانش را آماده نمايد.
۲. مردى كه خدمتگزارى به برادر مسلمانش بدهد.
۳. كسى كه سرّ برادر مسلمانش را بپوشاند.

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

همه با *Container size queries* آشنا هستند، اما هنوز بسیاری از افراد از *Container style queries* بی‌خبرند.

هدف از این ویژگی، استایل‌دهی به المان‌ها بر اساس زمینه و ویژگی‌های کانتینر والد است.

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

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

.card {
  /* ...استایل‌های کارت... */
}

@container style(--background-color: #333) {
  .card {
    /* استایل‌ها برای کارت زمانی که پس‌زمینه والد آن تیره باشد */
    color: white;
  }
}

در برنامه‌ریزی‌ها، پشتیبانی از تابع style() نه تنها برای ویژگی‌های سفارشی CSS بلکه برای ویژگی‌های ساده‌تر مانند style(color: green) نیز در نظر گرفته شده است.

این ویژگی در همه جا پشتیبانی می‌شود، به جز در مرورگر Firefox.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript