جاوااسکریپت | 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

👍1

170 views_, 16:33

جاوااسکریپت | JavaScript

مرتب نگه داشتن head

با یک اسکریپت جالب برخورد کردم که امکان انجام یک حسابرسی بسیار سریع و اصلاح نسبتاً سریع ترتیب تگ‌ها درون <head> را فراهم می‌کند.

یک قطعه CSS از هری رابرتز وجود دارد که ترتیب نادرست تگ‌های سیستمی را برجسته می‌کند. این فایل ct.css نام دارد [+لینک]. همچنین یک ارائه درباره این قطعه وجود دارد. هری یک متخصص فوق‌العاده در زمینه عملکرد وب است و اسلایدهای او [+لینک] بسیار متقاعدکننده هستند.

اسکریپت capo.js تقریباً همان کار را انجام می‌دهد، با این تفاوت که نتایج حسابرسی را در کنسول نمایش می‌دهد و پیشنهاد می‌کند چگونه متا تگ‌ها، نشانه‌گذاری و سایر محتوای <head> را بهتر مرتب کنیم تا مهم‌ترین اطلاعات برای بارگذاری سریع صفحه در اولویت قرار گیرند و بقیه موارد بعداً بارگذاری شوند.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

Speaker Deck

Get Your Head Straight

Despite being the only section of a website that a user never sees, the HEAD is arguably the most important. It is bound to its own unique set of rules …

164 views_, 16:35

جاوااسکریپت | 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

164 views_, 16:36

جاوااسکریپت | JavaScript

Quicklink

یک کتابخانه کوچک جاوااسکریپت که برای شناسایی لینک‌هایی طراحی شده است که وارد ناحیه قابل مشاهده مرورگر (viewport) می‌شوند و منابعی را که این لینک‌ها به آن‌ها اشاره دارند، به‌صورت خودکار پیش‌بارگذاری می‌کند. این کتابخانه DOM را تحلیل می‌کند، لینک‌هایی را که در دید کاربر قرار دارند شناسایی می‌کند و بارگذاری منابع مرتبط (مانند تصاویر، اسکریپت‌ها یا داده‌های دیگر) را آغاز می‌کند و آن‌ها را در کش ذخیره می‌کند تا دسترسی بعدی سریع‌تر شود. این ویژگی به‌ویژه برای بهینه‌سازی عملکرد صفحات وب مفید است، زیرا زمان بارگذاری هنگام کلیک روی لینک‌ها را کاهش می‌دهد.

🔗https://getquick.link/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

❤1

232 views_, 16:36

جاوااسکریپت | JavaScript

0:17

This media is not supported in your browser

VIEW IN TELEGRAM

و در گوشش، با زمزمه‌ای جانکاه صحبت کرد ... .
◾️سالروز شهادت حضرت فاطمه زهرا (ص)

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

❤5

177 views_, 18:52

جاوااسکریپت | JavaScript

qrframe

یک ابزار تولید QR کد مبتنی بر کد است که به شما امکان می‌دهد QR کدها را به‌صورت برنامه‌نویسی شده ایجاد کنید.

🔗https://github.com/zhengkyl/qrframe
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

👍1

272 views_, 16:32

جاوااسکریپت | 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

👍2

144 views_, 16:34

جاوااسکریپت | JavaScript

واقعیتی جالب: مغز انسان قادر نیست چیزی کاملاً نو از هیچ بیافریند؛ هر ایده‌ای در واقع ترکیبی از دانسته‌ها و تجربیاتی است که پیش‌تر در ذهن وجود داشته‌اند. در نتیجه، میزان خلاقیت ما به‌طور مستقیم به کیفیت محتوایی که مصرف می‌کنیم وابسته است. اگر ورودی ذهن شما فقط شامل میم‌ها و ویدیوهای کوتاه باشد، تبریک می‌گویم — تمام ایده‌هایتان هم بی‌ارزش خواهند بود (طبق برخی پژوهش‌ها، هرچند من منبعش را نمی‌دهم).
اما اگر خوراک ذهنی‌تان مثلاً کتاب‌ها و مقالات فنی باشد، مغز شما شروع می‌کند به تولید ایده‌هایی بیشتر و عمیق‌تر برای حل مسائل فنی در کد یا پروژه‌های واقعی.

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

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

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

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

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

👍2

152 views_, 11:44

جاوااسکریپت | JavaScript

0:08

This media is not supported in your browser

VIEW IN TELEGRAM

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

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

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

🔥3👍2

151 views_, 16:32

جاوااسکریپت | JavaScript

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

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

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

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

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

👏1

230 views_, 16:31

جاوااسکریپت | JavaScript

افزونه‌ی Save All Resources یک ابزار برای مرورگر Google Chrome است که به شما اجازه می‌دهد تمام فایل‌های یک وب‌سایت را (تقریباً هر چیزی که مرورگر برای نمایش آن سایت دانلود می‌کند) ذخیره کنید.

به زبان ساده، وقتی شما وارد یک سایت می‌شوید، مرورگر فایل‌هایی مثل HTML، CSS، JavaScript، عکس‌ها، فونت‌ها و حتی داده‌های JSON را بارگذاری می‌کند. این افزونه همه‌ی آن منابع را یکجا جمع می‌کند و به شما امکان می‌دهد با یک کلیک آن‌ها را به‌صورت فشرده (ZIP) دانلود کنید.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

👍1

313 views_, 16:36

جاوااسکریپت | JavaScript

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

بدیهی است که مخزن اصلی اکنون حذف شده است. ([https://github.com/rxliuli/apps.apple.com](https://github.com/rxliuli/apps.apple.com)) اما البته من یک نسخه‌ی پشتیبان از آن دارم، و باید گفت تماشای آن واقعاً جالب است!

همچنین کلون‌های متعددی هم به‌موقع ایجاد شدند؛ برای مثال این مخزن: ([https://github.com/minhducdz99/apps.apple.com](https://github.com/minhducdz99/apps.apple.com)).

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

خب، در سورس‌کدها چه چیز جالبی وجود دارد؟

پیش از هر چیز، پروژه با Svelte ساخته شده است. غیرمنتظره بود؟ نه چندان. اپل معمولاً فریم‌ورک‌های غیرمرسوم را ترجیح می‌دهد . اپل در زمانی که همه از Angular و Backbone استفاده می‌کردند، با SproutCore آغاز کرد و سپس به سراغ Ember.js رفت. حداقل Apple Music با آن نوشته شده بود.

در مرحله‌ی دوم، نویسندگان پروژه بدون هیچ خجالتی در کد نظر (Comment) گذاشته‌اند.
در مرحله‌ی سوم، ساختار عجیب مخزن و این‌همه کامپوننت عظیم، تجربه‌ی غریبی بود. ولی خب، هر تیمی سبک خودش را دارد.

و در نهایت، به‌نظر می‌رسد آن‌ها فریم‌ورک اختصاصی خودشان را برای مدیریت وضعیت، مسیرها و درخواست‌ها دارند — فریم‌ورکی به نام Jet. هنوز زود است که درباره‌ی میزان کارایی آن قضاوت کنیم.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

GitHub

GitHub - rxliuli/apps.apple.com: App Store web version

App Store web version. Contribute to rxliuli/apps.apple.com development by creating an account on GitHub.

❤3

240 views_, 16:31

جاوااسکریپت | JavaScript

0:10

This media is not supported in your browser

VIEW IN TELEGRAM

خب، ابزاری که به خلق چنین اثری کمک کرده، TypeGPU نام دارد. و کارش چیست؟

این ابزار کد TypeScript را به GLSL تبدیل می‌کند — بله، به همان زبان توصیف شیدرها! دقیق‌تر بگوییم، آن را به WGSL (WebGPU Shading Language) تبدیل می‌کند.

یعنی چه؟ یعنی شما منطق را درست مانند نوشتن در TypeScript توصیف می‌کنید، البته با در نظر گرفتن ویژگی‌های خاص شیدرها (مثلاً موازی‌سازی شدید محاسبات)، و در خروجی کدی دریافت می‌کنید که منطق و شیدرها در آن از هم جدا شده‌اند!

می‌توانید با یک مثال ساده شروع کنید، مثلاً این نمونه‌ی گرادیان: (https://docs.swmansion.com/TypeGPU/examples/#example=simple--gradient-tiles)،
تا کمی با مفهوم آن آشنا شوید.

🔗https://docs.swmansion.com/TypeGPU/examples/#example=rendering--jelly-slider
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

❤3

327 views_, 16:32

جاوااسکریپت | JavaScript

This media is not supported in your browser

VIEW IN TELEGRAM

👍1

201 views_, 16:31

جاوااسکریپت | JavaScript

چطور می‌توان یک عنصر را وادار کرد تا عرض خود را پله‌پله تغییر دهد**؟

فرض کنید می‌خواهید یک صفحه‌ی شطرنجی داشته باشید که در هر شرایطی یکپارچه باقی بماند.

امروز چند روش برای رسیدن به این هدف داریم:

**۱. از آنا تودور: ([https://twitter.com/anatudor](https://twitter.com/anatudor))
نمونه در CodePen: [https://codepen.io/thebabydino/pen/zYbZpBq](https://codepen.io/thebabydino/pen/zYbZpBq)

در این روش از تابع mod() استفاده می‌شود:

width: calc(95vmin + -1 * mod(95vmin, 15px));

اما مشکل این‌جاست که مرورگر Chrome هنوز از تابع mod پشتیبانی نمی‌کند... ولی ناامید نشوید!
دو روش دیگر هم از تمانی عفیف (Temani Afif) معروف به CSS Challenges داریم: ([https://twitter.com/ChallengesCss](https://twitter.com/ChallengesCss))

۲. روش دوم:
در واقع، نتیجه‌ی تابع بالا همان گرد کردن (rounding) است. و خوشبختانه، چنین تابعی هم در CSS وجود دارد! مثلاً:

min-width: round(95vmin, 15px);

نمونه: [https://codepen.io/alinaki/pen/VwRMpPY](https://codepen.io/alinaki/pen/VwRMpPY)

این ویژگی پیش‌تر در Chrome کار نمی‌کرد — تا نسخه‌ی صد و بیست و پنجم.
چرا؟ چون تیم Chrome تصمیم گرفت اول مثلثات را اضافه کند و ریاضیات ساده را بعداً :)

۳. و در نهایت روش سوم:
طبیعتاً با CSS Grid هم می‌شود:
[https://codepen.io/t_afif/pen/KKEXwmR](https://codepen.io/t_afif/pen/KKEXwmR)

و راز کار در این خط است:

grid-template-columns: repeat(auto-fill, 15px);

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

X (formerly Twitter)

Ana Tudor 🐯🖤🌻 (@anatudor) on X

Mad scientist. I keep chopped up bodies in my fridge. If that got a dafuq reaction, congrats, you're in the 0.01% who read it. I don't really have a fridge.

👍1

239 views_, 16:32

جاوااسکریپت | JavaScript

هفت مدیاکوئری برتر که در پروژه‌ها به کارتان می‌آیند 👍

---

✔️ width / height (ابعاد نمای دید – با سینتکس جدید بازه‌ای)

این مورد کلاسیک برای طراحی واکنش‌گراست، اما اکنون سینتکس بازه‌ای جدیدی دارد (مثل >، <، >=، <= و حتی 900px < width < 1200px) که باعث خوانایی بیشتر نسبت به حالت‌های min-/max- می‌شود.

از آن برای تنظیم شبکه (grid) یا کامپوننت‌ها در عرض‌های مختلف پنجره استفاده کنید.

@media (width > 900px) { /* دسکتاپ */ }
@media (900px < width < 1200px) { /* حالت میانی */ }

---

✔️ hover / pointer / any-hover / any-pointer (بررسی توانایی‌های ورودی دستگاه)

به جای حدس زدن اینکه کاربر با «تلفن، تبلت یا رایانه» است، مستقیماً قابلیت‌های ورودی دستگاه را بررسی کنید: آیا از اثر هاور پشتیبانی می‌کند؟ دقت اشاره‌گر چقدر است؟

/* ورودی اصلی — ماوس */
@media (hover: hover) and (pointer: fine) { ... }

/* صفحات لمسی (نقاط تماس درشت‌تر) */
@media (hover: none) and (pointer: coarse) { ... }

---

✔️ prefers-reduced-motion (کاهش یا حذف انیمیشن‌ها برای کاربران حساس به حرکت)

این ویژگی برای دسترس‌پذیری اهمیت زیادی دارد — به کمک آن می‌توان انیمیشن‌ها را برای افرادی با مشکلات تعادلی حذف یا ملایم کرد.

@media (prefers-reduced-motion: reduce) {
  .carousel { animation: none; }
}

---

✔️ prefers-color-scheme و forced-colors (حالت روشن/تاریک و حالت‌های کنتراست بالا)

⏺️ prefers-color-scheme — روش استاندارد برای هماهنگ شدن با حالت تاریک یا روشن.

⏺️ forced-colors — برای برطرف کردن مشکلات در حالت‌های کنتراست بالا (مثل Windows High Contrast) مفید است.
می‌توانید آن را با forced-color-adjust ترکیب کنید.

@media (prefers-color-scheme: dark) { ... }
@media (forced-colors: active) { /* اصلاحات برای کنتراست بالا */ }

---

✔️ resolution (برای بارگذاری تصاویر یا گرافیک با وضوح بالا)

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

background-image: url(image-1x.jpg);

@media (resolution > 1x) {
  background-image: url(image-2x.jpg);
}

---

✔️ orientation (جهت‌گیری — عمودی یا افقی)

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

@media (orientation: portrait) { ... }

---

✔️ inverted-colors (رنگ‌های معکوس) / جایگزین: prefers-contrast

inverted-colors زمانی مفید است که سیستم‌عامل یا مرورگر رنگ‌ها را معکوس می‌کند؛ این ویژگی به اصلاح نمایش سایه‌ها و رسانه‌ها کمک می‌کند.

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

👍3

162 views_, 16:34

جاوااسکریپت | JavaScript

جای‌گذاری تولتیپ‌ها و پنجره‌های کشویی.

در حال حاضر برای این کار از کتابخانه‌های جاوااسکریپتی نه‌چندان ساده مانند floating-ui استفاده می‌شود؛ کتابخانه‌هایی که به‌دلیل داشتن چنین قابلیت‌هایی هم حجم قابل‌توجهی دارند و هم بر کارایی اثر می‌گذارند.

اما راه‌حل بومی CSS اینجاست: CSS Anchor Positioning
(مستندات: developer.mozilla.org)

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

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

😁2

156 views_, 12:17

جاوااسکریپت | JavaScript

arkregexDemo.webm

2.5 MB

احتمالاً بسیاری از شما با مشکل نوشتن و نگهداری صحیح عبارات منظم (Regular Expressions) مواجه شده‌اید.

به‌ویژه مسئله‌ی درک و خوانایی همیشه مطرح است — آیا گروه‌های گیرنده را به‌درستی در توالی شرایط قرار داده‌اید؟ خروجی مورد انتظار چیست؟ و اصلاً آیا در عبارت منظم فعلی خطایی وجود دارد یا نه؟

بله، می‌توان از سرویس‌هایی مانند regex101.com استفاده کرد، اما گاهی دوست داریم همه‌چیز را بدون ترک محیط توسعه انجام دهیم.

به‌تازگی راه‌حل بسیار خوبی برای این مشکل معرفی شده است — ArkRegex، که نوعی انتزاع (abstraction) بر پایه‌ی new RegExp() است و علاوه بر آن، اطلاعات توضیحی و اعتبارسنجی در سطح تایپ‌های TypeScript ارائه می‌دهد.

🔗https://arktype.io/docs/blog/arkregex
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

204 views_, 16:35

جاوااسکریپت | JavaScript

افزونه‌ی PT Application Inspector آسیب‌پذیری‌ها و ویژگی‌های مستندسازی‌نشده را در کد منبع برنامه شناسایی می‌کند. افزون بر تحلیل کد، ماژول‌های داخلی آن خطاها را در فایل‌های پیکربندی و همچنین آسیب‌پذیری‌ها را در مؤلفه‌ها و کتابخانه‌های شخص‌ ثالثی که در توسعه‌ی برنامه استفاده شده‌اند، تشخیص می‌دهند.
حالا الگوریتم هوشمند فقط فهرستی از مشکلات ارائه نمی‌دهد، بلکه پیشنهاد می‌کند از کجا بررسی را آغاز کنید: کدام آسیب‌پذیری‌ها را باید ابتدا تأیید کرد و کدام را رد نمود. علاوه‌براین، موارد مشابه را گروه‌بندی می‌کند تا بتوانید آن‌ها را به‌صورت دسته‌جمعی پردازش کنید، نه جداگانه.

● مدیریت گروهی آسیب‌پذیری‌ها. در افزونه‌ی مخصوص IntelliJ IDEA سرانجام قابلیت موردانتظار مدیریت گروهی اضافه شده است. کافی است چند آسیب‌پذیری را در زبانه‌ی Detected Vulnerabilities (آسیب‌پذیری‌های شناسایی‌شده) تیک بزنید و وضعیت همه را یک‌جا تغییر دهید. برای کاربران VSCode وعده داده‌اند که این قابلیت تا پایان سال عرضه شود.

● کوپایلت مبتنی بر LLM (مدل زبانی بزرگ) — قابلیتی آزمایشی که فعلاً فقط برای کاربران IntelliJ فعال است. در این افزونه، یک دستیار هوش مصنوعی مبتنی بر YandexGPT برای تولید اصلاحات مستقیم در محیط IDE ادغام شده است. این سیستم در رفع خودکار کد کمک می‌کند: نه‌تنها آسیب‌پذیری را پیدا می‌کند، بلکه وصله‌ای آماده با پیش‌نمایش تغییرات ارائه می‌دهد. همچنین منطق اصلاح را توضیح می‌دهد — می‌توانید از آن بپرسید چرا این تغییر به این شکل انجام شده است. همه‌ی پیشنهادهای تولیدشده نیز در زبانه‌ی جدیدی با عنوان «How to Fix» (چگونه اصلاح کنیم) ذخیره می‌شوند.

این قابلیت به‌صورت پیش‌فرض غیرفعال است (باید از بخش تنظیمات فعال شود) و برای تمام آسیب‌پذیری‌ها به‌جز موارد ردشده یا مستثناشده عمل می‌کند.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

130 views_, 16:31

About

Blog

Apps

Platform