گوگل کروم بازی دایناسور (T-Rex) را به‌صورت بی‌پایان در حالت عدم اتصال به اینترنت ارائه می‌دهد. بیایید کلاه هکرهایمان را به سر بگذاریم و کمی با این بازی دست‌کاری کنیم.

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

function dispatchKey(type, key) {
    document.dispatchEvent(new KeyboardEvent(type, {keyCode: key}));
}
setInterval(function () {
    const KEY_CODE_SPACE_BAR = 32
    const KEY_CODE_ARROW_DOWN = 40
    const CANVAS_HEIGHT = Runner.instance_.dimensions.HEIGHT
    const DINO_HEIGHT = Runner.instance_.tRex.config.HEIGHT

    const obstacle = Runner.instance_.horizon.obstacles[0]
    const speed = Runner.instance_.currentSpeed

    if (obstacle) {
        const w = obstacle.width
        const x = obstacle.xPos // measured from left of canvas
        const y = obstacle.yPos // measured from top of canvas
        const yFromBottom = CANVAS_HEIGHT - y - obstacle.typeConfig.height
        const isObstacleNearby = x < 25 * speed - w / 2

        if (isObstacleNearby) {
            if (yFromBottom > DINO_HEIGHT) {
                // Pterodactyl going from above, do nothing
            } else if (y > CANVAS_HEIGHT / 2) {
                // Jump
                dispatchKey("keyup", KEY_CODE_ARROW_DOWN)
                dispatchKey("keydown", KEY_CODE_SPACE_BAR)
            } else {
                // Duck
                dispatchKey("keydown", KEY_CODE_ARROW_DOWN)
            }
        }
    }
}, Runner.instance_.msPerFrame);

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد شش سبک محبوب‌ معماری API [+لینک]
با میلیاردها درخواست API که روزانه انجام می‌شود، درک سبک‌های معماری API اهمیت بیشتری پیدا کرده است. این سبک‌ها ستون فقرات دنیای دیجیتال امروزی را تشکیل می‌دهند و واسط‌های برنامه‌نویسی کاربردی (API) نقش کلیدی در توسعه نرم‌افزارهای مدرن دارند.

🔗https://aparat.com/v/uka260b
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

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

امروز، HTML <dialog> این کار را به‌راحتی و بدون دردسر انجام می‌دهد.

در اینجا یک مثال از یک مدال در ۳۰ خط کد با اورلی، امکان بسته شدن با کلیک خارج از پنجره و فشردن دکمه ESC، همراه با پشتیبانی از دسترس‌پذیری و دیگر استانداردهای W3C آورده شده است:

<script setup lang="ts">
import { ref } from "vue";

const dialog = ref(null);

function show() {
  dialog.value.showModal();
}
function close() {
  dialog.value.close();
}

function onClick($event) {
  if ($event.target === dialog.value) {
    dialog.value.close();
  }
}

defineExpose({ show, close });
</script>

<template>
  <dialog
    ref="dialog"
    role="textbox"
    tabindex="0"
    @click="onClick"
  >
    <slot />
  </dialog>
</template>

<style scoped></style>

استفاده:

const holaModal = useTemplateRef("holaModal");

// holaModal.value.show();
...
<ModalDialog ref="holaModal">
  <div>Hola!</div>
  <button @click="holaModal.close()">
    Close
  </button>
</ModalDialog>

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

شهادت مظلومانه دخت پیامبر ام ابیها مظلومه عالم خلقت حضرت فاطمه الزهرا سلام الله بر تمامی شیعیان تسلیت باد .

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

سوئیچ روان بین ویدیو و پیش‌نمایش کوچک 🎥

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

امروز، راهکاری برای این مشکل با استفاده از جاوااسکریپت و IntersectionObserver به اشتراک می‌گذارم. 🚀

چه چیزی را می‌خواهیم پیاده‌سازی کنیم؟ ✅ ویدیو در بخش اصلی در حال پخش باقی می‌ماند تا زمانی که در دید کاربر باشد؛
✅ وقتی ویدیو از دید خارج می‌شود، به شکل یک پیش‌نمایش کوچک در گوشه‌ی صفحه ظاهر شده و به پخش خود ادامه می‌دهد؛
✅ پیش‌نمایش کوچک با ویدیوی اصلی همگام است: زمان فعلی و وضعیت (پخش/توقف) کاملاً با هم هماهنگ هستند؛
✅ وقتی ویدیوی اصلی دوباره به دید کاربر برمی‌گردد، مجدداً فعال می‌شود و پیش‌نمایش کوچک محو می‌شود.
و تمام این فرآیند به‌صورت روان و بدون اشکال انجام می‌شود.
نمونه کد در لینک زیر


🔗 https://codepen.io/katrin_profrontend/pen/ogvjJVx
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

در اینجا فهرستی از جایگزین‌های رایگان، متن‌باز، در دسترس و قابل میزبانی شخصی برای برخی از سرویس‌ها و نرم‌افزارهای پولی آورده شده است:

Notion → Appflowy
Zoom → Jitsi
Jira → Plane
Airtable → NocoDB
Vercel → Coolify
Heroku → Dokku
Firebase → Pocketbase، Appwrite، Convex، Supabase
Shopify → Prestashop
GitHub → GitLab
Slack → Mattermost
Salesforce CRM → ERPNext
Dropbox → NextCloud
Mailchimp → Mautic
Trello → Wekan
Docusign → Docuseal
Calendly → Cal.com
Datadog → Prometheus
Google Analytics → Matomo
Microsoft Office 365 → LibreOffice
Asana → OpenProject
این جایگزین‌ها ابزارهایی قدرتمند و انعطاف‌پذیر برای صرفه‌جویی در هزینه‌ها هستند و امکان کنترل بیشتر بر داده‌ها را نیز فراهم می‌کنند.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

نسخه ۴.۵.۰ از Vue Router منتشر شد! 🎉

نکته برجسته:
به پیشنهاد ایوان یو، یک پراپ جدید به نام view-transition به کامپوننت RouterLink اضافه شده است. این پراپ از API انتقال نمای بومی (View Transitions API) استفاده می‌کند که برای انتقال بین مسیرها (routes) طراحی شده است.

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

<template>
  <RouterLink to="/some-page" view-transition>
    رفتن به صفحه‌ای دیگر
  </RouterLink>
</template>

قابلیت سفارشی‌سازی:
انیمیشن‌های مربوط به این API را می‌توان با استایل‌های CSS به دلخواه تنظیم کرد.

مقایسه با قابلیت‌های قبلی:
سرعت بیشتر: ممکن است سریع‌تر از کامپوننت <Transition> باشد.
سادگی در کدنویسی: نسبت به استفاده از ساختار router-view با <Transition>، نوشتار کوتاه‌تر و ساده‌تری دارد.
محدودیت‌ها: برای انتقال‌های ساده مناسب است، اما به اندازه <Transition> قدرتمند و انعطاف‌پذیر نیست.
منبع:
View Transitions API - MDN
این قابلیت جدید تجربه کار با Vue Router را برای انتقال‌های ساده و کارآمدتر بهبود می‌بخشد. 🌟
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

به کاربران اجازه دهید تا به‌طور بصری عناصر DOM را انتخاب کنند

از viselect استفاده کنید اگر تعداد زیادی عنصر دارید و می‌خواهید کاربران بتوانند آن‌ها را به صورت گروهی، تک‌تک یا حتی در چندین گروه انتخاب کنند. می‌توانید از آن به صورت مستقل استفاده کنید یا آن را با P/React یا Vue.js یکپارچه کنید.

ویژگی‌های کلیدی:

🌟 بسته‌بندی مدرن
🔩 اندازه فشرده (~۴ کیلوبایت)
👌 استفاده ساده
⚡️ بهینه‌سازی بالا
✔️ بدون وابستگی‌ها
📱 پشتیبانی از دستگاه‌های موبایل و ورودی لمسی
🖱 پشتیبانی از اسکرول عمودی و افقی
🖼 یکپارچگی با فریم‌ورک‌های اصلی (در حال توسعه)

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

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

🔗https://component-party.dev/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

جاوا اسکریپت زیبا ... .
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

Floating UI
یک کتابخانه کوچک است که به شما کمک می‌کند تا عناصر "شناور" مانند تولتیپ‌ها، پاپ‌آپ‌ها، منوهای کشویی و موارد دیگر را ایجاد کنید.

🔗https://floating-ui.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

اگر به دنبال (snippets) برای Vue در VS Code هستید، باید بدانید که میان حجم زیادی از گزینه‌های موجود، انتخاب مناسب می‌تواند چالش‌برانگیز باشد.

یک گزینه مناسب می تواند Vue 3 VS Code Snippets باشد


🔗https://marketplace.visualstudio.com/items?itemName=exer7um.vue-3-vscode-snippets
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

مرتب‌سازی: وقتی sort نتایج غیرمنتظره می‌دهد چه باید کرد؟ 😬

بیایید چند مثال را بررسی کنیم تا بهتر بفهمیم روش sort چگونه کار می‌کند و ببینیم چگونه localeCompare می‌تواند در مواقعی که مرتب‌سازی استاندارد کافی نیست، به ما کمک کند.

🧩 مثال ۱: رشته‌ها
فرض کنید آرایه زیر را داریم:

const words = ['ج', 'چ', 'خ', 'ح'];

حالا sort را اعمال می‌کنیم و نتیجه را مشاهده می‌کنیم:

console.log(words.sort());  //['ج', 'ح', 'خ', 'چ']

در نگاه اول، نتیجه ممکن است عجیب به نظر برسد. چرا «چ» در انتهای لیست قرار گرفته است؟ ❔

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

🧩 مثال ۲: مرتب‌سازی اعداد
حالا آرایه‌ای از اعداد را در نظر بگیرید که به‌صورت رشته ذخیره شده‌اند:

const numbers = ['۱۲', '۱۱', '۲'];

sort را اعمال می‌کنیم:

console.log(numbers.sort());  // ['۱۱', '۱۲', '۲']

چرا «۲» در انتهای لیست قرار گرفته است؟ این به این دلیل است که sort عناصر را به‌عنوان رشته مقایسه می‌کند، نه عدد. در ترتیب الفبایی، «۲» پس از «۱» قرار می‌گیرد، بنابراین نتیجه برای اعداد نادرست به نظر می‌رسد.

بیایید این مشکل را با استفاده از یک تابع سفارشی مقایسه حل کنیم:

console.log(numbers.sort((a, b) => a - b));  // ['۲', '۱۱', '۱۲']

اکنون همه چیز همان‌طور که انتظار داشتیم عمل می‌کند، اما فقط برای اعداد.

اگر به بومی‌سازی نیاز داشته باشیم؟
روش‌های فوق ممکن است برای موارد ساده کافی باشند، اما اگر بخواهیم قوانین زبان خاصی را رعایت کنیم چه؟ مثلاً مرتب‌سازی بر اساس قواعد الفبای فارسی یا پردازش صحیح رشته‌هایی که شامل اعداد هستند؟

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

🧩 استفاده از localeCompare:
با استفاده از localeCompare، می‌توانیم قوانین بومی را اعمال کنیم و مطمئن شویم که مرتب‌سازی بر اساس قواعد زبان مورد نظر انجام می‌شود.

const words = ['ج', 'چ', 'خ', 'ح'];
console.log(words.sort((a, b) => a.localeCompare(b, 'fa'))); 
// ['ج', 'چ', 'ح', 'خ']

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

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

MagicQuill

نسخه‌ای مشابه فتوشاپ که با قابلیت‌های پیشرفته هوش مصنوعی ارائه شده و رایگان به‌صورت مستقیم در مرورگر قابل استفاده است!
کافی است با ابزار مورد نظر، ناحیه‌ای را انتخاب کنید؛ سپس می‌توانید رنگ آن را تغییر دهید، اشیاء را حذف کنید یا موارد جدیدی ایجاد کنید.

🔗https://huggingface.co/spaces/AI4Editing/MagicQuill
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ویژگی‌های منطقی CSS 🤨

بین‌المللی‌سازی فقط به ترجمه رابط‌های کاربری مربوط نمی‌شود. این یعنی ایجاد سایتی که برای کاربران از هر شهری به یک اندازه راحت باشد. اما مشکل اینجاست: جهت‌های متنی (LTR و RTL) اغلب به معمایی واقعی برای توسعه‌دهندگان تبدیل می‌شوند. 🫤

برای مثال: ✅ متن‌های انگلیسی و روسی از چپ به راست (LTR) نوشته می‌شوند، بنابراین فاصله‌ها و تنظیمات پیش‌فرض به درستی عمل می‌کنند؛ ✅ اما متن‌های عربی و عبری از راست به چپ (RTL) خوانده می‌شوند و ویژگی‌هایی مانند margin-left یا text-align: left طراحی را خراب می‌کنند.

چه کار باید کرد؟ آیا باید استایل‌ها را برای هر زبان به صورت دستی تغییر داد؟ یا CSS را کپی کرد؟ خوشبختانه، CSS مدت‌هاست که راه‌حل این مشکل را آماده کرده است — ویژگی‌های منطقی. 👍

به جای اینکه به جهت‌های فیزیکی مانند margin-left یا padding-bottom وابسته شویم، ویژگی‌های منطقی مانند margin-inline-start و padding-block-end به ویژگی‌های زبانی و فرهنگی سازگار می‌شوند.

چطور کار می‌کند؟ ✅ inline — محور افقی. به عنوان مثال: margin-inline-start، padding-inline-end، border-inline-end؛ ✅ block — محور عمودی. به عنوان مثال: margin-block-start، padding-block-end، border-block-end.

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

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

کدام شغل سخت‌تر است: فول‌استک یا دواپس؟

👍 فول‌استک: کارهای بیشتری بر عهده دارد.
❤️ دواپس: هیچ‌کس نمی‌فهمد چه کاری انجام می‌دهی.

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript