چگونه باید پارامترها را به‌درستی در نشانی اینترنتی (URL) ارسال کرد؟ 🤔

هنگام ارسال پارامترها از طریق نشانی اینترنتی، بسیار مهم است که آن‌ها را به‌درستی کُدگذاری کنیم. این کار باعث می‌شود درخواست‌ها به‌درستی اجرا شوند و داده‌ها دچار اعوجاج نشوند. در JavaScript چند تابع مفید برای این کار وجود دارد: encodeURIComponent()`، `encodeURI() و URLSearchParams. بیایید ببینیم هرکدام چه کاری انجام می‌دهند و در چه شرایطی بهتر است از آن‌ها استفاده شود. 😁

---

### ۱️⃣ encodeURIComponent()

از این تابع برای کُدگذاری مقدار پارامترها در نشانی اینترنتی استفاده می‌شود. این تابع تضمین می‌کند که همهٔ نویسه‌های خاص (مانند فاصله، علامت &، علامت =، یا /) به معادل‌های ایمن درصدی‌شان تبدیل شوند.

نمونه:

const name = "Katerina & Pro Frontend";
const encodedName = encodeURIComponent(name);
console.log(encodedName); // Katerina%20%26%20Pro%20Frontend

➡️ همیشه زمانی که مقدار پارامترها (مثل نام یا شهر) را کُدگذاری می‌کنید از encodeURIComponent() استفاده کنید تا از تفسیر نادرست نویسه‌هایی مانند فاصله یا علامت & جلوگیری شود.

---

### ۲️⃣ encodeURI()

از این تابع برای کُدگذاری کل نشانی اینترنتی استفاده می‌شود، اما نویسه‌هایی مانند ?, &, = و / را که بخشی از ساختار درخواست هستند، دست‌نخورده باقی می‌گذارد. این روش زمانی مفید است که می‌خواهید کل URL را کُدگذاری کنید، اما نمی‌خواهید جداکننده‌های پارامترها تغییر کنند.

نمونه:

const url = "https://example.com/search?channel=Katerina | Pro Frontend";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // https://example.com/search?channel=Katerina%20%7C%20Pro%20Frontend

➡️ از encodeURI() برای کُدگذاری کل URL (هم مسیر و هم پارامترها) استفاده کنید، در حالی که ساختار کلی پرس‌وجو را حفظ می‌کنید.

---

### ۳️⃣ URLSearchParams

این شیء برای کار آسان‌تر با پارامترهای URL طراحی شده است. به‌طور خودکار مقادیر پارامترها را کُدگذاری می‌کند و متدهایی برای افزودن، حذف یا تغییر آن‌ها در اختیار می‌گذارد که کار با داده‌های پویا را ساده‌تر می‌کند.

const params = new URLSearchParams();
params.append('name', 'John Doe');
console.log(params.toString()); // 'name=John+Doe' — 

---

### در نتیجه:

✔️ encodeURIComponent() — برای کُدگذاری مقادیر پارامترها (مانند name=Katerina & Pro Frontend)

✔️ encodeURI() — برای کُدگذاری کل نشانی اینترنتی همراه با ساختار پرس‌وجو

✔️ URLSearchParams — برای افزودن، ویرایش و مدیریت آسان پارامترهای URL


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

آشنایی با navigator.userAgent 🧐

این ویژگی رشته‌ای است که توسط شیء navigator برگردانده می‌شود و شامل اطلاعاتی دربارهٔ مرورگر، سیستم‌عامل و دستگاه کاربر است.

به کمک آن می‌توان وب‌سایت را متناسب با مرورگر یا دستگاه خاصی تنظیم و بهینه کرد. 😁

---

### 🔹 نمونهٔ رشته:

"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36"

---

### اجزای اصلی رشتهٔ userAgent:

⏺️ Mozilla/5.0 — برچسب تاریخی؛
⏺️ Macintosh; Intel Mac OS X 10_15_7 — اطلاعات مربوط به سیستم‌عامل؛
⏺️ AppleWebKit/537.36 — موتور رندر مرورگر؛
⏺️ Chrome/141.0.0.0 — نسخهٔ مرورگر؛
⏺️ Safari/537.36 — اجزای تکمیلی.

---

### 🎯 چرا این اطلاعات مفید است؟

✔️ تشخیص دستگاه و پلتفرم: می‌توان فهمید کاربر از موبایل، تبلت یا رایانهٔ شخصی استفاده می‌کند.
✔️ سازگاری: دانستن نوع مرورگر کمک می‌کند سایت با ویژگی‌ها و محدودیت‌های آن تطبیق یابد.
✔️ طراحی واکنش‌گرا: نمایش درست و بهینهٔ سایت روی دستگاه‌های گوناگون را ممکن می‌سازد.

---

### 💡 نمونهٔ استفاده از userAgent:

if (/Chrome/.test(navigator.userAgent)) {
    console.log("کاربر از مرورگر Chrome استفاده می‌کند");
}

---

### ⚠️ نکات مهم:

✔️ قابل تغییر بودن رشته: کاربران می‌توانند با افزونه‌ها مقدار userAgent را تغییر دهند.
✔️ دقت پایین اطلاعات: برخی مرورگرها خود را به‌جای مرورگر دیگر معرفی می‌کنند.

برای نتایج قابل‌اعتمادتر، بهتر است به‌جای تکیه بر userAgent از روش feature detection (شناسایی قابلیت‌ها) استفاده کنید — که در پست بعدی درباره‌اش صحبت خواهیم کرد. 😉


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

گاهی به‌نظر می‌رسد که فهمیدن وضعیت کلیدهای ترکیبی مانند Shift**، **Control**، **Alt یا Meta کار پیچیده‌ای است. 🙈

«اصلاً چطور باید این کار را انجام داد؟ آیا باید هر کلید را جداگانه بررسی کنیم؟» 🤔

نگران نباشید — راه‌حل وجود دارد و بسیار ساده‌تر از چیزی است که تصور می‌کنید! تنها چیزی که نیاز دارید، متد `getModifierState()` در جاوااسکریپت است که در رویدادهای صفحه‌کلید در دسترس می‌باشد.

این متد به شما اجازه می‌دهد به‌راحتی بفهمید آیا یک کلید ترکیبی (مثلاً Shift یا Ctrl یا Alt) در لحظهٔ وقوع رویداد فشرده شده است یا نه.

---

### 💡 نمونهٔ استفاده:

document.addEventListener('keydown', function(event) {
  if (event.getModifierState('Shift')) {
    console.log('کلید Shift فشرده شده است!');
  }
  if (event.getModifierState('Control')) {
    console.log('کلید Control فشرده شده است!');
  }
});

متد getModifierState() مقدار true برمی‌گرداند اگر کلید ترکیبی در آن لحظه فشرده شده باشد، و در غیر این صورت false. به همین سادگی! 😁

---

### 🎯 مثال کاربردی

فرض کنید می‌خواهیم از رفتار پیش‌فرض مرورگر هنگام فشردن ترکیب Ctrl + S (ذخیرهٔ صفحه) جلوگیری کنیم:

document.addEventListener('keydown', function(event) {
  if (event.getModifierState('Control') && event.key === 's') {
    event.preventDefault(); // جلوگیری از عملکرد پیش‌فرض
    console.log('عملیات ذخیره‌سازی لغو شد!');
  }
});

---

### ✅ نتیجه

با استفاده از تنها چند خط کد و متد **getModifierState()**، می‌توانیم به‌سادگی وضعیت کلیدهای ترکیبی موردنیاز را بررسی و کنترل کنیم. 👍


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

نوآوری‌های CSS — کنترل حداکثری با انتخابگر :nth-child() و دستور جدید OF S

با استفاده از شبه‌کلاس `:nth-child()` می‌توان عناصر موجود در DOM را بر اساس ترتیبشان انتخاب کرد. نحوۀ کلاسیک An+B به شما امکان می‌دهد انتخاب عناصر را با دقت بالا کنترل کنید.

برای نمونه:

* :nth-child(2) — انتخاب دومین فرزند.
* :nth-child(2n) — انتخاب تمام فرزندان زوج.
* :nth-child(2n+1) — انتخاب تمام فرزندان فرد.
و غیره...

اما حالا ویژگی جدیدی در سطح چهارم انتخابگرهای CSS معرفی شده است — یعنی سینتکس OF S. این قابلیت به شما اجازه می‌دهد ابتدا عناصر را بر اساس یک فیلتر مشخص (مثلاً کلاس یا نوع خاصی از عناصر) محدود کنید، و سپس از میان همان گروه، عناصر مورد نظر را بر اساس ترتیبشان انتخاب نمایید.

ساختار کلی:

:nth-child(An+B [of S])
:nth-last-child(An+B [of S])

در سطح چهارم انتخابگرهای CSS (Selectors Level 4) که در [W3C](https://www.w3.org/TR/selectors-4/) تعریف شده است، می‌توان به‌صورت اختیاری یک فهرست از انتخابگرها را در :nth-child() یا :nth-last-child() ارسال کرد.

---

### 📘 مثال

<div class="test-1">one</div>
<div class="test-2">two</div>
<div class="test-1">three</div>
<div class="test-2">four</div>

:nth-child(2 of .test-1, .test-2) {
  outline: 0.3rem dashed lightblue;
}

---

### 🔍 چگونه کار می‌کند؟

تصور کنید شبه‌کلاس :nth-child با دستور of S مانند یک فیلتر هوشمند عمل می‌کند.
ابتدا مرورگر همهٔ عناصری را که با انتخابگرهای .test-1 و .test-2 مطابقت دارند پیدا می‌کند. سپس از میان آن فهرست فیلترشده، دومین عنصر را انتخاب می‌کند و سبک (style) مورد نظر را به آن اعمال می‌کند.

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

---

با این قابلیت، دامنۀ کارهایی که می‌توان تنها با CSS انجام داد روزبه‌روز گسترده‌تر می‌شود — بدون نیاز به جاوااسکریپت! 🎨


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

چگونه بدون استفاده از <br> در CSS شکست خط ایجاد کنیم 🧐

یک ترفند جالب وجود دارد که با استفاده از نماد \A و سبک‌هایی مثل white-space: pre-wrap می‌توان شکست خط را در CSS ایجاد کرد. بیایید بررسی کنیم چگونه این کار انجام می‌شود!

📕 نماد `\A` چیست؟

در CSS، \A راهی برای وارد کردن شکست خط در ویژگی content است که معمولاً در پیش‌عنصرها (::before و ::after) استفاده می‌شود. به جای قرار دادن دستی <br>`، کافی است `\A را بنویسیم تا مرورگر بداند در این نقطه باید خط جدید شروع شود.

با این حال، برای کارکرد صحیح این روش، لازم است ویژگی white-space را اضافه کنیم، مثلاً با مقدار pre-wrap. این ویژگی به مرورگر می‌گوید: «شکست‌های خط را مانند تگ <pre> پردازش کن، ولی همچنین اجازه بده متن در صورت نیاز به خط بعد منتقل شود.»

مثال:

.text::before {
  content: "خط اول\Aخط دوم"; /* \A شکست خط ایجاد می‌کند */
  white-space: pre-wrap;       /* \A را به عنوان شکست خط پردازش می‌کند */
}

اینجا \A در ویژگی content شکست خط ایجاد می‌کند و white-space: pre-wrap به مرورگر کمک می‌کند این شکست را به درستی نمایش دهد.

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


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

EyeDropper API: انتخاب رنگ‌ها مستقیم از روی صفحه 🤩

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

EyeDropper API به توسعه‌دهندگان وب این امکان را می‌دهد که کاربران بتوانند با استفاده از ابزار قطره‌چکان (pipette) رنگ‌ها را مستقیماً از صفحه انتخاب کنند. پس از انتخاب، مقدار رنگ به صورت sRGBHex (مثل #ff5733) بازگردانده می‌شود.

---

### نمونه ساده استفاده:

if ("EyeDropper" in window) {
  const eyeDropper = new EyeDropper();
  eyeDropper.open()
    .then(result => {
      console.log("رنگ انتخاب‌شده:", result.sRGBHex);
      document.body.style.backgroundColor = result.sRGBHex;
    })
    .catch(err => {
      console.error("خطا:", err);
    });
}

---

### نحوه عملکرد 🧐

1. فراخوانی متد open() روی شیء `EyeDropper`؛
2. باز شدن ابزار قطره‌چکان در مرورگر؛
3. انتخاب رنگ توسط کاربر؛
4. بازگرداندن رنگ انتخاب‌شده در فرمت `#RRGGBB`.

---

### مزایای API

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

---

### محدودیت پشتیبانی

این API در حال حاضر فقط در Chrome، Edge و Opera پشتیبانی می‌شود. در مرورگرهای Safari و Firefox هنوز قابل استفاده نیست.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ترتیب عناصر در <head>

چند وقت یک‌بار به <head> پروژه‌های خود سر می‌زنید و بررسی می‌کنید که چه اتفاقی در آنجا می‌افتد؟ بهتر است این کار را به‌صورت دوره‌ای انجام دهید، زیرا محتوای <head> و ترتیب عناصر می‌تواند تأثیر منفی بر عملکرد سایت داشته باشد.

ابتدا باید از صحت ساختار اطمینان حاصل کرد. درون <head> تنها برخی عناصر مشخص مجاز هستند:

* یک عنصر <title>
* یک عنصر <base>
* صفر یا بیشتر عناصر <link>
* صفر یا بیشتر عناصر <meta>
* صفر یا بیشتر عناصر <script>
* صفر یا بیشتر عناصر <style>
* صفر یا بیشتر عناصر <template>
* صفر یا بیشتر عناصر <noscript>

اگر هر عنصر دیگری در <head> مشاهده شود، پارسر فوراً <head> را می‌بندد و عناصر باقی‌مانده را به <body> منتقل می‌کند.

مثال:

<head>
  <meta charset="utf-8">
  <title>سایت من</title>
  <img src="pixel.png">
  <link
    rel="preload"
    href="custom-font.woff2"
    as="font"
    type="font/woff2"
  >
  <link 
    rel="stylesheet"
    href="styles.css"
  >
  <script
    src="script.js"
    defer
  ></script>
</head>
<body>
  <!-- ... -->
</body>

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

<head>
  <meta charset="utf-8">
  <title>سایت من</title>
</head>
<body>
  <img src="pixel.png">
  <link
    rel="preload"
    href="custom-font.woff2"
    as="font"
    type="font/woff2"
  >
  <link 
    rel="stylesheet"
    href="styles.css"
  >
  <script
    src="script.js"
    defer
  ></script>
  <!-- ... -->
</body>

این موضوع پیامدهای مختلفی دارد، زیرا محل و اولویت عناصر در صف بارگذاری منابع، وضعیت مسدودسازی پارسر و عملکرد اسکریپت‌هایی که به <head> وابسته‌اند، تغییر می‌کند.

عناصر غیرمجاز در <head> معمولاً هنگام ادغام «پیکسل‌ها»، فریم‌های تحلیلی و دیگر افزونه‌های جانبی ظاهر می‌شوند و معمولاً شامل <img>`، <iframe> و <div>` هستند.

دستورالعمل‌های این افزونه‌ها اغلب پیشنهاد می‌کنند که کد مربوطه در ابتدای <body> قرار گیرد، اما گاهی همراه با <script> به <head> وارد می‌شوند. استفاده از ولیدیتور HTML می‌تواند چنین خطاهایی را شناسایی کند.

منبع دیگر مشکلات، ترتیب نادرست عناصر در <head> است. جابجایی ساده عناصر به ترتیب مناسب می‌تواند زمان بارگذاری را تا چند ثانیه کاهش دهد. در این زمینه، سخنرانی بسیار خوبی توسط هری رابرتز موجود است.

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

* ct.css — فایل استایلی که عناصر <head> را قابل مشاهده می‌کند و نقاط مشکل‌دار را برجسته می‌سازد.
* capo.js — قطعه کدی که محتوای <head> را تحلیل کرده و ترتیب فعلی و مرتب‌شده را در کنسول نمایش می‌دهد.

مدیران تگ نیز توجه ویژه‌ای می‌طلبند، زیرا از طریق آن‌ها اسکریپت‌های بازاریابی مختلف به‌طور غیرقابل کنترل وارد سایت شده و <head> را شلوغ می‌کنند.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

Intl.ListFormat — قالب‌بندی لیست

«می‌داند» چگونه عناصر را به‌درستی با ویرگول، حرف ربط و/یا، کوتاه‌سازی پیوندها و غیره ترکیب کند، بسته به زبان و سبک مورد استفاده. استفاده از آن بسیار ساده است، اما آشنایی با گزینه‌ها و «چالش‌های پنهان» باعث می‌شود نتیجه نهایی تمیزتر و حرفه‌ای‌تر باشد. 😁

✔️ آرایه‌ای از مقادیر را به رشته‌ای قابل خواندن برای انسان تبدیل می‌کند و قوانین زبان را رعایت می‌کند (مثال: سیب، موز و پرتقال)؛

✔️ امکان انتخاب نوع (conjunction / disjunction / unit) و سبک (long / short / narrow) را فراهم می‌کند؛

✔️ متدهای format() (برای خروجی رشته‌ای)، formatToParts() (برای دریافت بخش‌های ساختاریافته) و resolvedOptions() (برای مشاهده گزینه‌های اعمال‌شده واقعی) را ارائه می‌دهد.

const lf = new Intl.ListFormat('fa', { type: 'conjunction', style: 'long' });

lf.format(['سیب']); 
// "سیب"

lf.format(['سیب', 'موز']); 
// "سیب و موز"

lf.format(['سیب', 'موز', 'پرتقال']); 
// "سیب، موز و پرتقال"

new Intl.ListFormat('fa', { type: 'disjunction' })
  .format(['چای', 'قهوه', 'آب‌میوه']); 
// => "چای، قهوه یا آب‌میوه"

new Intl.ListFormat('en', { style: 'short' })
  .format(['A', 'B', 'C']); 
// => "A, B & C" (در انگلیسی short ممکن است از '&' استفاده شود)

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

نکته‌ی CSS: از ارقام جدولی (tabular numbers) برای نمایش تایمرها استفاده کنید

ویژگی font-variant-numeric مشخص می‌کند که اعداد چگونه نمایش داده شوند. با تنظیم مقدار آن روی tabular-nums، تمام اعداد با پهنای یکسان نمایش داده می‌شوند، که باعث می‌شود کاملاً منظم و در یک خط قرار بگیرند.


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

شعاع حاشیه منفی

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

روش‌های مختلفی برای این کار وجود دارد، از جمله ترفندهایی با استفاده از عناصر ماسک دارای موقعیت مطلق. در کل، پیاده‌سازی چنین بلوک‌هایی کار ساده‌ای نیست. اما تیم HTML Academy راه‌حلی ارائه داده است — کتابخانه‌ای به نام nebo.css (https://github.com/htmlacademy/nebo.css
).

Nebo مخفف negative border radius است، عبارتی که اغلب برای توصیف چنین افکت‌هایی به کار می‌رود. این کتابخانه یک فایل CSS با بیش از صد خط کد است که چند کلاس و مجموعه‌ای از ویژگی‌های سفارشی برای تنظیم دقیق در اختیار شما قرار می‌دهد.

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