دربارهٔ مشکل مرکزچینی عمودی محتوا در CSS می‌توان افسانه‌ها نوشت

خیلی هم غم‌انگیز است که این داستان‌ها کم‌کم به پایان می‌رسند، زیرا حالا ما نه تنها Flex و Grid را داریم، بلکه یک ویژگی ساده و قابل‌فهم به نام align-content هم در دسترس است

بله، این ویژگی از دیرباز پایه‌ای برای مدل‌های Flex و Grid بوده است، اما از نسخه‌های جدید مرورگرها — Chrome 123**، **Firefox 125 و Safari 17.4 — پشتیبانی می‌شود و اکنون در مدل بلوکی (Block Layout) هم قابل استفاده است! 🎉

مثال ساده:

.container {
  align-content: center;
}

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

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

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

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

می‌دونید اگه توی فایرفاکس داخل یه فیلد <input type="number"> به‌جای عدد، چیزی مثل lol بنویسید چی می‌شه؟

هیچی! قبول می‌کنه 😐

یعنی همون «lol» رو جلوی چشم‌تون نشون می‌ده، انگار که یه عدد درسته. ولی وقتی مقدارش رو توی DOM بخونید، خالیه. یعنی مرورگر می‌گه: «باشه بهت نشونش دادم، ولی اصلاً حسابش نمی‌کنم.» شاهکاره واقعاً!

این یه باگه که از سال ۲۰۱۷ توی Bugzilla بازه و هنوزم وصله نشده:
[Bugzilla #1398528](https://bugzilla.mozilla.org/show_bug.cgi?id=1398528)

طبق استاندارد WHATWG**، ورودی از نوع number فقط باید رشته‌های عددی رو قبول کنه. ولی فایرفاکس هرچی رو قبول می‌کنه — حروف، ایموجی، هرچی بخوای. فقط پشت‌صحنه مقدارش خالی می‌شه. یعنی می‌بینی چی تایپ کردی، ولی مرورگر اون رو معتبر نمی‌دونه. نتیجه؟ تجربه کاربری افتضاح.

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

بریم سراغ کروم:
کروم بعضی وقتا اجازه می‌ده توی فیلد number حرف **e رو بنویسید، چون ممکنه بخواید عددی مثل 1e10 (فرمت علمی) رو وارد کنید. اما اگه فقط «e» رو بنویسید… فیلد معتبر می‌شه! 😆

جالب‌تر اینکه 1e- رو هم معتبر می‌دونه، ولی 1ee نه.

از اون طرف اگه توی لوکالی باشید که جداکننده اعشار نقطه است، نوشتن 1,5 (با ویرگول) یا قبول می‌شه یا نمی‌شه — بستگی داره به نسخه‌ی مرورگر، وضعیت ماه و احتمالاً میزان قهوه‌ای که برنامه‌نویس کروم خورده!

نتیجه نهایی:

* فایرفاکس: هرچی بنویسی (حتی «سلام») نشون می‌ده، ولی زیرش خالیه.
* کروم: یه فیلتر داره، ولی اونم نصفه‌نیمه و پر از تناقض.

پس چی کار کنیم؟ خودمون کد بزنیم برای اعتبارسنجی، چون امیدی به مرورگرها نیست.

الان این باگ وارد سال هشتم شده، همچنان با برچسب «NEW» خوابیده و با توجه به بحث‌ها، به این زودی هم درست نمی‌شه.

پ.ن. فایرفاکس اخیراً توی نسخه انگلیسیش، خطای اعتبارسنجی رو به زبان فنلاندی نشون داده! 🤦‍♂️

پ.ن.۲. تازه جدای اینا، اصلاً خیلی‌ها معتقدن که <input type="number"> به‌خودش هیچ فایده‌ای نداره و حتی مضر هم هست

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

Capture node screenshot
این قابلیت در DevTools کروم و فایرفاکس به شما اجازه می‌دهد که یک عنصر مشخص (یا همان نود) در صفحه را به‌صورت تصویر ذخیره کنید، بدون اینکه نیاز باشد کل صفحه را اسکرول کنید یا اسکرین‌شات بگیرید.

روش کار به‌طور خلاصه:

1. باز کردن DevTools:

* در کروم یا فایرفکس، کلید F12 یا Ctrl+Shift+I را فشار دهید.

2. انتخاب نود موردنظر:

* در تب Elements یا Inspector**، روی عنصر HTML که می‌خواهید اسکرین‌شاتش را بگیرید کلیک کنید.

3. **گرفتن اسکرین‌شات:

* در کروم: راست‌کلیک روی نود → گزینه‌ی Capture node screenshot را انتخاب کنید.
* در فایرفکس: راست‌کلیک روی نود → گزینه‌ی Take a screenshot of node یا مشابه آن را انتخاب کنید.

DevTools سپس همان بخش خاص را پردازش کرده و یک تصویر PNG از آن نود ایجاد می‌کند.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

### fetchpriority در HTML

مرورگر برای نمایش صفحه نیاز دارد منابع لازم مثل CSS، JS، تصاویر و ویدیو را دانلود کند. اول HTML دریافت و تحلیل می‌شود و همزمان اسکنر پیش‌بارگذاری منابع را پیدا و دانلود می‌کند. همه منابع براساس اولویت در شبکه بارگذاری می‌شوند.

ویژگی fetchpriority به شما اجازه می‌دهد اولویت بارگذاری منابع را مشخص کنید:

* high → اولویت بالا
* low → اولویت پایین
* auto → رفتار پیش‌فرض مرورگر

می‌توان از این ویژگی در عناصر زیر استفاده کرد: <link>`، <script>، <img> و <iframe>`.

<img src="lcp-image.jpg" fetchpriority="high">

---

### کاربردهای متداول

* بارگذاری تصاویر مهم صفحه (مثلاً تصاویر LCP) با اولویت بالا
* کاهش اولویت تصاویر غیرضروری (مثل تصاویر کاروسل)
* پیش‌بارگذاری منابع کم‌اهمیت با اولویت پایین
* افزایش یا کاهش اولویت اسکریپت‌ها بسته به نیاز

همچنین می‌توان اولویت را هنگام فراخوانی fetch() مشخص کرد:

const response = await fetch('/resource', { priority: 'low' });

---

### نکته مهم

‏`fetchpriority` ابزار جدیدی است برای کنترل هوشمندانه بارگذاری منابع و مکمل روش‌های قدیمی مثل:

* loading در <img> و <iframe>
* preload در <video> و <link>
* defer و async در <script>

برای جزئیات بیشتر می‌توانید مقاله کامل را در web.dev بخوانید:
[https://web.dev/articles/fetch-priority](https://web.dev/articles/fetch-priority)


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ماشین قابل‌آموزش (Teachable Machine) یک آزمایش تعاملی است که یادگیری ماشین را برای همه ساده‌تر می‌کند؛ به‌طوری‌که مستقیماً در مرورگر اجرا می‌شود و هیچ نیازی به کدنویسی ندارد. روشی سریع و ساده برای ساخت مدل‌های یادگیری ماشین جهت استفاده در وب‌سایت‌ها، اپلیکیشن‌ها و موارد دیگر — بدون نیاز به دانش تخصصی یا کدنویسی.


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

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

🔗https://www.namasha.com/v/IM2n2FnC
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

چگونگی تست WebKit یا Safari روی ویندوز و لینوکس
به سادگی از BrowserStack استفاده کنید
اما مشکل اینجاست که همه نمی‌توانند حتی ۱۵۰ دلار در سال برای پلن فریلنسری هزینه کنند… آیا راهی وجود دارد؟

بله، راه وجود دارد!

‏BrowserStack به‌طور فعال از پروژه‌های Open Source پشتیبانی می‌کند و لایسنس یک‌ساله رایگان ارائه می‌دهد!

اگر پروژه‌ی شما چنین شرایطی دارد، کافی است به این صفحه
بروید و لینک مخزن (repository) خود را وارد کنید.

نکته مهم: باید لایسنس مناسب داشته باشید. لیست کامل را پیدا نکردم، اما مطمئنم که GPL، BSD و MIT پوشش داده شده‌اند. من هم خودم Creative Commons Attribution 4.0 International را وارد کردم.
دسترسی هر سال تمدید می‌شود تا زمانی که مخزن در دسترس باشد


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

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

🔗https://www.aparat.com/v/phnxki9?playlist=20513366
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

سیگنال: جادوی واکنش‌گرایی در برنامه‌نویسی

باور دارم که درک چگونگی کارکرد یک پدیده، لذت بیشتری به زندگی شما می‌بخشد؛ زیرا باعث می‌شود در آنچه انجام می‌دهید توانمندتر باشید.
بسیاری از چارچوب‌های دیگر همچون Angular، Solid، Vue و Qwik نیز چنین رویکردی دارند. حتی پیشنهادی برای افزودن سیگنال‌ها به خود زبان جاوااسکریپت هم ارائه شده است.

🔹 اجزای اصلی سیگنال
۱. مقدار (value): همان داده‌ای که نگه‌داری می‌شود.
۲. مشترکان (subscribers): توابعی که باید در صورت تغییر مقدار اجرا شوند.
۳. اثرها (effects): توابعی که به تغییر سیگنال واکنش نشان می‌دهند.

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

function state(value) {
  const signal = { value, subscribers: new Set() }
  return signal
}

برای واکنش به تغییرات سیگنال، به «اثرها» نیاز داریم. اثرها همان توابعی هستند که هنگام تغییر سیگنال اجرا می‌شوند.

let activeEffect = null

function effect(fn) {
  // تنظیم اثر فعال
  activeEffect = fn
  // اجرای اثر
  fn()
}

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

let activeEffect = fn

function get(signal) {
  // افزودن اثر به مشترکان
  signal.subscribers.add(activeEffect)
  // بازگرداندن مقدار
  return signal.value
}

سپس، هنگامی که مقداری در سیگنال نوشته می‌شود، مشترکان آگاه می‌شوند

function set(signal, value) {
  // به‌روزرسانی مقدار
  signal.value = value
  // آگاه‌سازی مشترکان
  signal.subscribers.forEach(effect => effect())
}

از این پس تنها کافی است حالت (state) را به‌روزرسانی کنید؛ رابط کاربری در هر نقطه‌ای که از آن استفاده شده باشد تغییر خواهد کرد. اگر با الگوی «ناظر» (observer) آشنا باشید، سیگنال‌ها نوعی نسخه‌ی پیشرفته‌تر از observable هستند و چارچوب‌هایی مانند Svelte کارهای پیچیده‌ی بسیاری در پشت صحنه انجام می‌دهند تا عملکرد آن‌ها بهینه باشد.

به‌عنوان نمونه، یک شمارنده با پیاده‌سازی ساده‌ی سیگنال‌ها در یک فایل HTML معمولی:

<script type="module">
  import { state, set, get, effect } from './signals.js'

  // ایجاد سیگنال
  const count = state(0)

  // اتصال به عناصر DOM
  const btn = document.querySelector('button')
  btn.onclick = () => set(count, get(count) + 1)

  // ایجاد اثر برای قالب
  effect(() => btn.textContent = get(count))
</script>

<button>0</button>

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

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

برای افزودن اسکریپت‌ها به صفحه از عنصر <script> استفاده می‌شود. اسکریپت‌ها انواع مختلفی دارند که بر رفتار و شیوه‌ی بارگذاری آن‌ها تأثیر می‌گذارد.

## 🔹 اسکریپت کلاسیک

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

<script>
  console.log("Hello from classic script!");
</script>

---

## 🔹 اسکریپت داده (type="not-javascript")

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

<script type="not-javascript">
  {
    "user": "Ali",
    "role": "admin"
  }
</script>

---

## 🔹 اسکریپت خارجی کلاسیک

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

<script src="/script.js"></script>

📄 در فایل script.js می‌نویسیم:

console.log("Loaded from external file!");

---

## 🔹 اسکریپت خارجی با async

وقتی async بذاریم، فایل هم‌زمان با پردازش صفحه بارگذاری میشه. ولی به محض اینکه کامل دانلود بشه، اجرا میشه و پردازش صفحه رو همون لحظه متوقف می‌کنه.

<script src="/script.js" async></script>

---

## 🔹 اسکریپت خارجی با defer

اینجا فایل بارگذاری میشه، اما اجرای اون تا وقتی کل DOM آماده نشه عقب میفته. به همین خاطر همیشه مطمئنی به ترتیب ظاهر شدنش در HTML اجرا میشه.

<script src="/script.js" defer></script>

---

## 🔹 اسکریپت با async defer

اگه هر دو ویژگی رو با هم بذاریم، در عمل مثل async رفتار می‌کنه و defer نادیده گرفته میشه.

<script src="/script.js" async defer></script>

---

## 🔹 اسکریپت ماژول (type="module")

اینجا میشه از import و export استفاده کرد. ماژول‌ها مثل defer هستن: در زمان بارگذاری پارسر رو متوقف نمی‌کنن و بعد از آماده شدن DOM اجرا می‌شن.

<script type="module">
  import { sayHello } from "./utils.js";
  sayHello("Ali");
</script>

📄 در فایل utils.js:

export function sayHello(name) {
  console.log("Hello, " + name);
}

---

## 🔹 ماژول با async

همه‌ی وابستگی‌های ماژول به صورت موازی بارگذاری میشن. وقتی آخرینش آماده شد، ماژول اجرا میشه.

<script type="module" src="/main.js" async></script>

---

## 🔹 اسکریپت با nomodule

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

<script src="/fallback.js" nomodule></script>

---

## 🔹 نقشه‌ی واردات (type="importmap")

به مرورگر می‌گه چطور اسم‌های مستعار ماژول‌ها رو به مسیر واقعی فایل‌ها وصل کنه.

<script type="importmap">
{
  "imports": {
    "lib": "/js/library-v1.js"
  }
}
</script>

<script type="module">
  import { doSomething } from "lib";
  doSomething();
</script>

---

## 🔹 قوانین بارگذاری پیش‌دستانه (type="speculationrules")

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

<script type="speculationrules">
{
  "prefetch": [
    { "source": "document", "urls": ["/next-page.html"] }
  ]
}
</script>

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript