Click To Zoom Calendar

🔗https://codepen.io/Hyperplexed/pen/qBVPaNV

#️⃣#code
🆔@IR_javascript

ردیابی paste متن

اخیراً در حال بررسی شرایط مربوط به ایجاد و ورود رمز عبور یکبار مصرف بودم. که متوجه شدم که به طور معمول، کاربر کد را کپی می کند و آن را در یک کادر متنی paste می کند. چگونه می توان این را پیاده سازی کرد؟

‏clipboardData یک شیء ارائه شده توسط رویداد (رویداد چسباندن یا کپی کردن) است که به حافظه پنهان مرتبط است. این شیء متدی به نام getData دارد که برای استخراج داده ها از حافظه پنهان استفاده می شود. این متد یک آرگومان را می پذیرد که نوع داده ای که می خواهید از حافظه پنهان دریافت کنید را مشخص می کند.

بنابراین، می توانیم از کد زیر استفاده کنیم:

input.addEventListener('paste', (e) => {
  e.preventDefault();
  const pastedText = e.clipboardData.getData('text');
  const digits = pastedText.split('');
  otpInputs.forEach((input, index) => input.value = digits[index] ?? '');
  otpInputs[digits.length - 1].focus();
});

به این ترتیب، رویداد paste و متد event.clipboardData.getData به ایجاد برنامه های وب تعاملی و کاربرپسندتر برای کاربران کمک می کند.

#️⃣#tip
🆔@IR_javascript

شک ندارم که پس از مرگ ملائک گویند
از دل قبر خودت خیز که مهمان داری
ما سراسیمه بپرسیم که آن مهمان کیست
و بگویند که مهمان ز خراسان داری[1]

#️⃣#event
🆔@IR_javascript

تبدیل اشیاء به مقادیر اولیه در جاوا اسکریپت
تبدیل اشیاء به مقادیر اولیه طبق قوانین خاصی انجام می شود که به اشیاء اجازه می دهد تا در صورت نیاز به مقادیر اولیه (عدد، رشته یا مقدار منطقی) تبدیل شوند. من خلاصه ای از این موضوع با مثال هایی تهیه کرده ام:

روش های تبدیل اشیاء به مقادیر اولیه:
روش toString(): یک رشته از شیء را برمی گرداند.
روش valueOf(): مقدار اولیه شیء را برمی گرداند.
ترتیب تبدیل:
اگر شیء در یک زمینه عددی استفاده شود، ابتدا متد valueOf() فراخوانی می شود.
اگر شیء در یک زمینه رشته ای استفاده شود، ابتدا روش toString() فراخوانی می شود.
مثال:

const exampleObj = {
  prop1: 42,
  toString() {
    return `The value is: ${this.prop1}`;
  },
  valueOf() {
    return this.prop1;
  }
};

// تبدیل به عدد
console.log(+exampleObj); // 42
console.log(Number(exampleObj)); // 42

// تبدیل به رشته
console.log(`${exampleObj}`); // "The value is: 42"
console.log(String(exampleObj)); // "The value is: 42"

درک نحوه تبدیل اشیاء به مقادیر اولیه می تواند به شما در نوشتن کد تمیزتر و کارآمدتر کمک کند

#️⃣#tip
🆔@IR_javascript

رنگ تم مرورگر
این ویژگی به شما امکان می دهد رنگ نوار آدرس مرورگر و نوار بالای آن را در دستگاه های تلفن همراه تغییر دهید.
برای تنظیم رنگ دلخواه، یک تگ <meta> با یک آتریبوت content که مقدار آن رنگ مورد نظر شما است، به کد HTML خود اضافه کنید.

<meta name="theme-color" content="#50a2de">

#️⃣#tip
🆔@IR_javascript

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

🔗https://measuremate.xyz/
#️⃣#tool
🆔@IR_javascript

با استفاده از این هرم ساده کیفیت کد، می‌توانید درخواست‌های pull خود را نه تنها جذاب، بلکه مفیدتر نیز کنید
این هرم برای بحث در مورد کیفیت کد است. از موارد اساسی تا مواردی که کد شما را واقعاً زیبا می‌کند.
نکات:
این هرم فقط یک راهنما است و می‌توانید آن را متناسب با نیازهای خودتان تنظیم کنید.
مهم است که در طول کدنویسی به طور مؤثر با یکدیگر ارتباط برقرار کنید.
هدف بهبود کیفیت کد و کمک به توسعه‌دهندگان برای یادگیری و رشد است.


#️⃣#tip
🆔@IR_javascript

تجرید (انتزاع) داده در JavaScript
در برنامه‌نویسی، تجرید داده به فرآیند پنهان کردن جزئیات پیاده‌سازی داده و ارائه یک رابط برای کار با آن داده‌ها اشاره دارد. این امر به توسعه‌دهندگان اجازه می‌دهد تا از داده‌ها بدون نیاز به دانستن نحوه ذخیره و پردازش آنها در سطح داخلی استفاده کنند.

در JavaScript، تجرید داده معمولاً با استفاده از اشیاء و توابع پیاده‌سازی می‌شود. به عنوان مثال، می‌توانید یک شیء برای نشان دادن یک کاربر با ویژگی‌هایی مانند نام، سن، ایمیل و روش‌هایی برای کار با آن داده‌ها مانند تغییر نام یا ارسال ایمیل ایجاد کنید.

مثال تجرید داده ساده در JavaScript:

// ایجاد یک نمونه کاربر جدید
let user1 = new User("Алиса", 18, "alice@example.com");
// تغییر نام کاربر
user1.changeName("Вовчик");
// ارسال ایمیل به کاربر
user1.sendEmail("Привет, Вовчик! Добро пожаловать на наш сайт.");

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

#️⃣#tip
🆔@IR_javascript

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


🔗https://focastock.com/
#️⃣#tool
🆔@IR_javascript

‏Fluid برای Tailwind CSS: استایل‌های واکنش‌گرا روان‌تر با کد کمتر.

پیشوند ~ یک style را fluid می‌کند
ابزارهای سیال دارای یک مقدار شروع و پایان هستند که با / از هم جدا شده‌اند
ابزارهای سیال زمانی که اندازه پنجره دید بین نقطه شروع و پایان آن‌ها قرار گیرد، بین مقدار شروع و پایان خود درون‌یابی می‌کنند.
نقاطه شروع و پایان به صورت پیش فرض به کوچکترین و بزرگترین صفحه نمایش تنظیم می‌شوند، اما می‌توان آن‌ها را برای هر ابزار به صورت سفارشی یا لغو کرد.

🔗https://fluid.tw/
#️⃣#tool
🆔@IR_javascript

بحران آتنا: یک بازی باکیفیت ساخته شده با جاوااسکریپت

بحران آتنا یک بازی استراتژی نوبت به نوبت تجاری است که در فروشگاه استیم در دسترس است، اما حالا موتور و ابزارهای آن به صورت متن‌باز [Open Source] منتشر شده‌اند.

🔗https://cpojer.net/posts/athena-crisis-open-source
#️⃣#code
🆔@IR_javascript

با استفاده از (container query)، می‌توانیم کامپوننت‌ها این قابلیت را بدهیم که بر اساس عرضه‌ی محتوای خودشان و نه کل صفحه (viewport) گسترش پیدا کنند.

.main {
  container-name: main;
  container-type: inline-size;
}

@container main (min-width: 370px) {
  .search-label,
  .filter-label {
    display: block;
  }
}

🔗https://ishadeed.com/article/css-container-query-guide/
#️⃣#tip #css
🆔@IR_javascript

واحد های اندازه گیری CSS (قسمت سوم)

واحدهای اندازه‌گیری معرفی شده در container queries، ویژگی جدیدی در CSS هستند که به شما این امکان را می‌دهند تا استایل‌ها را بر اساس ابعاد یک container مشخص کنید. با استفاده از این واحدها، می‌توانید ابعاد المان‌ها را نسبت به ابعاد container تنظیم کنید، که باعث افزایش انعطاف‌پذیری و قابلیت استفاده در containerهای مختلف می‌شود[1].

‏cqw معادل با 1% از عرض container است
‏cqh با 1% از ارتفاع آن
‏cqi و cqb به ترتیب به 1% از اندازه inline و block container اشاره دارند
‏cqmin و cqmax کمترین و بیشترین مقدار از cqi و cqb را نشان می‌دهند

با استفاده از این واحدها، می‌توانید به راحتی استایل‌ها را با توجه به ابعاد متغیر container تنظیم کرده و واکنش مناسبی نسبت به تغییرات در ابعاد container نشان دهید[1].

🔗https://ishadeed.com/article/css-container-query-guide/
#️⃣#tip #css #واحد_های_اندازه_گیری
🆔@IR_javascript

‏Flagpack مجموعه ای از بیش از 250 پرچم کشورها را در اختیار شما قرار می دهد که به صورت PNG و SVG ارائه می شوند.
علاوه بر این، Flagpack شامل فایل های منبع Figma و Sketch برای تمام پرچم ها است، به طوری که می توانید آنها را به راحتی سفارشی کنید.
و کامپوننت های آماده برای React، Vue و Svelte را نیز ارائه می دهد، بنابراین می توانید پرچم ها را به سرعت و به آسانی به وب سایت خود اضافه کنید.
تحت مجوز MIT منتشر شده است، بنابراین می توانید با خیال راحت از آن در پروژه های خود استفاده کنید.

🔗https://flagpack.xyz/
#️⃣#tool
🆔@IR_javascript

‏CSS برای تکمیل توابع ریاضی قدیمی (مانند calc()) توابع ریاضی جدید زیادی اضافه کرده است. همه آنها در نهایت یک مقدار عددی را نشان می دهند، اما ظرافت های نحوه عملکرد آنها همیشه از ابتدا واضح نیست.

در CSS، تابع rem , mod دسترسی داریم. این تابع دو پارامتر می گیرد، درست مانند عملگر باقی‌مانده (%) در جاوااسکریپت که با دو عدد کار می کند. از نظر ریاضی، عدد اول معرفِ صورتِ‌ کسر (dividend) و عدد دوم معرفِ مخرج کسر (divisor) است.
اما در عمل این دو تابع تفاوت هایی را در محاسبه باقی مانده در اعداد منفی نشان می دهند
به طور کلی اگر می خواهید باقی مانده یک مقدار را محاسبه کنید rem رفتار مناسب تری را نشان می دهد

🔗https://danielcwilson.com/posts/mathematicss-rem-mod/
#️⃣#tip #css
🆔@IR_javascript