Dragscroll
اسکرول محتوا با موس اغلب محدود به استفاده از نوارهای اسکرول استاندارد است. کتابخانه dragscroll رفتار اسکرول با کشیدن (drag) را به رابط‌های دسکتاپ اضافه می‌کند، رفتاری که کاربران در دستگاه‌های لمسی به آن عادت دارند.
این ابزار برای گالری‌ها، نقشه‌ها یا هر کانتینری با اسکرول افقی بسیار مفید خواهد بود.
🔗http://asvd.github.io/dragscroll/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
اسکرول محتوا با موس اغلب محدود به استفاده از نوارهای اسکرول استاندارد است. کتابخانه dragscroll رفتار اسکرول با کشیدن (drag) را به رابط‌های دسکتاپ اضافه می‌کند، رفتاری که کاربران در دستگاه‌های لمسی به آن عادت دارند.
این ابزار برای گالری‌ها، نقشه‌ها یا هر کانتینری با اسکرول افقی بسیار مفید خواهد بود.
🔗http://asvd.github.io/dragscroll/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
Cornerstone3D ساخت اپلیکیشن‌های تحت وب برای تصویربرداری پزشکی
مجموعه‌ای از کتابخانه‌های جاوااسکریپت که امکان ساخت ابزارهایی مانند نمایشگر سه‌بعدی سی‌تی‌اسکن، نمایشگر و بسیاری موارد دیگر را فراهم می‌آورد. این پروژه امکانات گسترده‌ای دارد و همراه با آموزش‌های فراوان ارائه شده است.
🔗cornerstonejs.org
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
مجموعه‌ای از کتابخانه‌های جاوااسکریپت که امکان ساخت ابزارهایی مانند نمایشگر سه‌بعدی سی‌تی‌اسکن، نمایشگر و بسیاری موارد دیگر را فراهم می‌آورد. این پروژه امکانات گسترده‌ای دارد و همراه با آموزش‌های فراوان ارائه شده است.
🔗cornerstonejs.org
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
👎1🤯1
**Mediabunny** یک کتابخانهٔ جاوااسکریپت برای خواندن، نوشتن و تبدیل فایل‌های رسانه‌ای مانند MP4، WebM و MP3 است، مستقیماً در مرورگر اجرا می‌شود. هدف آن ارائهٔ یک مجموعهٔ کامل برای عملیات رسانه‌ای با کارایی بالا روی وب است.
این کتابخانه از صفر و با TypeScript خالص نوشته شده، هیچ وابستگی‌ای ندارد، بسیار سریع است و از قابلیت tree-shaking پشتیبانی کامل می‌کند؛ به این معنا که فقط کدهایی که استفاده می‌کنید وارد پروژه می‌شوند. می‌توان آن را شبیه FFmpeg تصور کرد، اما به‌طور کامل برای وب از پایه ساخته شده است.
🔗https://mediabunny.dev/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
این کتابخانه از صفر و با TypeScript خالص نوشته شده، هیچ وابستگی‌ای ندارد، بسیار سریع است و از قابلیت tree-shaking پشتیبانی کامل می‌کند؛ به این معنا که فقط کدهایی که استفاده می‌کنید وارد پروژه می‌شوند. می‌توان آن را شبیه FFmpeg تصور کرد، اما به‌طور کامل برای وب از پایه ساخته شده است.
🔗https://mediabunny.dev/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
❤2🔥1
**Peaks.js نسخهٔ چهار: کامپوننت رابط کاربری برای تعامل با نمودار موج صدا**
این پروژه که در اصل از بخش تحقیق و توسعهٔ بی‌بی‌سی شکل گرفته است، موج‌های صوتی را روی یک عنصر Canvas رندر می‌کند و امکان اسکرول، زوم و تعاملاتی مشابه آنچه در ویرایشگرهای صوتی می‌بینید را فراهم می‌آورد.
🔗https://codeberg.org/chrisn/peaks.js
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
این پروژه که در اصل از بخش تحقیق و توسعهٔ بی‌بی‌سی شکل گرفته است، موج‌های صوتی را روی یک عنصر Canvas رندر می‌کند و امکان اسکرول، زوم و تعاملاتی مشابه آنچه در ویرایشگرهای صوتی می‌بینید را فراهم می‌آورد.
🔗https://codeberg.org/chrisn/peaks.js
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
👍2
خسته شدید هر بار از کنسول راحت خود بیرون بیایید و به caniuse.com بروید تا ببینید کدام مرورگرها از subgrid پشتیبانی می‌کنند؟
معرفی می‌کنم caniuse-cli
مثال استفاده:
برای zsh هم قابلیت autocomplete دارد.
🔗https://www.npmjs.com/package/@bramus/caniuse-cli
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
معرفی می‌کنم caniuse-cli
مثال استفاده:
$ caniuse "viewport units"
$ caniuse @property
برای zsh هم قابلیت autocomplete دارد.
🔗https://www.npmjs.com/package/@bramus/caniuse-cli
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
❤1
LeaderLine
این کتابخانه برای ترسیم خطوط SVG میان عناصر دلخواه DOM طراحی شده است. ابزار به‌صورت خودکار مسیر و موقعیت خط را محاسبه کرده و هنگام اسکرول یا تغییر اندازه‌ی صفحه آن را به‌روزرسانی می‌کند. این قابلیت برای ایجاد ارتباط‌های بصری، حاشیه‌نویسی‌ها یا نمودارهای ساده در رابط کاربری بسیار مناسب است.
🔗https://anseki.github.io/leader-line/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
این کتابخانه برای ترسیم خطوط SVG میان عناصر دلخواه DOM طراحی شده است. ابزار به‌صورت خودکار مسیر و موقعیت خط را محاسبه کرده و هنگام اسکرول یا تغییر اندازه‌ی صفحه آن را به‌روزرسانی می‌کند. این قابلیت برای ایجاد ارتباط‌های بصری، حاشیه‌نویسی‌ها یا نمودارهای ساده در رابط کاربری بسیار مناسب است.
🔗https://anseki.github.io/leader-line/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
👍1
بستهٔ @unpic/vue قابلیت‌های قدرتمند و مدرن بهینه‌سازی تصویر را با حداقل پیکربندی به برنامه‌های Vue شما می‌آورد. با پشتیبانی درونی از بارگذاری تنبل، واکنش‌گرایی و انتخاب خودکار فرمت، هم در زمان توسعه صرفه‌جویی می‌شود و هم کارایی کلی به‌طور چشمگیری بهبود پیدا می‌کند.
+پشتیبانی از تصاویر واکنش‌گرا با استفاده از srcset
+بارگذاری تنبل به‌صورت پیش‌فرض
+انتخاب خودکار فرمت (برای نمونه WebP یا AVIF)
+سازگاری با سرویس‌هایی مانند Cloudinary، Imgix، Vercel، Sanity و بسیاری دیگر
🔗https://unpic.pics/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
+پشتیبانی از تصاویر واکنش‌گرا با استفاده از srcset
+بارگذاری تنبل به‌صورت پیش‌فرض
+انتخاب خودکار فرمت (برای نمونه WebP یا AVIF)
+سازگاری با سرویس‌هایی مانند Cloudinary، Imgix، Vercel، Sanity و بسیاری دیگر
🔗https://unpic.pics/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
🔥2
مسدود کردن dev-tool
اگر امکانش رو دارید به این سایت [+لینک] بروید و با هر روشی dev-tools رو باز کنید
پکیجی برای غیرفعال‌سازی ابزارهای توسعه‌دهنده‌ی وب از طریق دکمه‌ی F12، کلیک راست و منوی مرورگر
🔗https://theajack.github.io/disable-devtool/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
اگر امکانش رو دارید به این سایت [+لینک] بروید و با هر روشی dev-tools رو باز کنید
پکیجی برای غیرفعال‌سازی ابزارهای توسعه‌دهنده‌ی وب از طریق دکمه‌ی F12، کلیک راست و منوی مرورگر
🔗https://theajack.github.io/disable-devtool/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
🥰1😁1
Quicklink
یک کتابخانه کوچک جاوااسکریپت که برای شناسایی لینک‌هایی طراحی شده است که وارد ناحیه قابل مشاهده مرورگر (viewport) می‌شوند و منابعی را که این لینک‌ها به آن‌ها اشاره دارند، به‌صورت خودکار پیش‌بارگذاری می‌کند. این کتابخانه DOM را تحلیل می‌کند، لینک‌هایی را که در دید کاربر قرار دارند شناسایی می‌کند و بارگذاری منابع مرتبط (مانند تصاویر، اسکریپت‌ها یا داده‌های دیگر) را آغاز می‌کند و آن‌ها را در کش ذخیره می‌کند تا دسترسی بعدی سریع‌تر شود. این ویژگی به‌ویژه برای بهینه‌سازی عملکرد صفحات وب مفید است، زیرا زمان بارگذاری هنگام کلیک روی لینک‌ها را کاهش می‌دهد.
🔗https://getquick.link/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
یک کتابخانه کوچک جاوااسکریپت که برای شناسایی لینک‌هایی طراحی شده است که وارد ناحیه قابل مشاهده مرورگر (viewport) می‌شوند و منابعی را که این لینک‌ها به آن‌ها اشاره دارند، به‌صورت خودکار پیش‌بارگذاری می‌کند. این کتابخانه DOM را تحلیل می‌کند، لینک‌هایی را که در دید کاربر قرار دارند شناسایی می‌کند و بارگذاری منابع مرتبط (مانند تصاویر، اسکریپت‌ها یا داده‌های دیگر) را آغاز می‌کند و آن‌ها را در کش ذخیره می‌کند تا دسترسی بعدی سریع‌تر شود. این ویژگی به‌ویژه برای بهینه‌سازی عملکرد صفحات وب مفید است، زیرا زمان بارگذاری هنگام کلیک روی لینک‌ها را کاهش می‌دهد.
🔗https://getquick.link/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
❤1
qrframe
یک ابزار تولید QR کد مبتنی بر کد است که به شما امکان می‌دهد QR کدها را به‌صورت برنامه‌نویسی شده ایجاد کنید.
🔗https://github.com/zhengkyl/qrframe
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
یک ابزار تولید QR کد مبتنی بر کد است که به شما امکان می‌دهد QR کدها را به‌صورت برنامه‌نویسی شده ایجاد کنید.
🔗https://github.com/zhengkyl/qrframe
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
👍1
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
این ابزار کد 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
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
به‌ویژه مسئله‌ی درک و خوانایی همیشه مطرح است — آیا گروه‌های گیرنده را به‌درستی در توالی شرایط قرار داده‌اید؟ خروجی مورد انتظار چیست؟ و اصلاً آیا در عبارت منظم فعلی خطایی وجود دارد یا نه؟
بله، می‌توان از سرویس‌هایی مانند regex101.com استفاده کرد، اما گاهی دوست داریم همه‌چیز را بدون ترک محیط توسعه انجام دهیم.
به‌تازگی راه‌حل بسیار خوبی برای این مشکل معرفی شده است — ArkRegex، که نوعی انتزاع (abstraction) بر پایه‌ی new RegExp() است و علاوه بر آن، اطلاعات توضیحی و اعتبارسنجی در سطح تایپ‌های TypeScript ارائه می‌دهد.
🔗https://arktype.io/docs/blog/arkregex
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
ظر شما درباره‌ی اشکال‌زدایی (Debugging) در دستگاه‌های همراه چیست؟ صادقانه بگویید. به نظر من که یک شکنجه است.
بله، می‌توانید تلفن را با کابل به کامپیوتر وصل کنید و از کنسول مرورگر دسکتاپ استفاده نمایید. یا از مرورگر کیوی (Kiwi Browser) درتلفن همراه استفاده کنیم
ولی در وب ویو ها چه کنیم
ارودا (Eruda) یک کنسول تعبیه‌شدنی (Embeddable) برای مرورگرهای موبایل: https://github.com/liriliri/eruda
نمونه‌ی نمایشی: https://eruda.liriliri.io/
در اصل، شبیه به یک کپی بسیار ساده شده از ابزارهای توسعه وب کروم به نظر می‌رسد و کاملاً می‌تواند در اشکال‌زدایی به شما کمک کند، به خصوص با توجه به تعداد افزونه‌های رسمی و غیر رسمی مختلف، از نمایش بصری لمس‌ها گرفته تا پس‌زمینه‌ی پیکسل-پرفکت.
🔗https://eruda.liriliri.io
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
بله، می‌توانید تلفن را با کابل به کامپیوتر وصل کنید و از کنسول مرورگر دسکتاپ استفاده نمایید. یا از مرورگر کیوی (Kiwi Browser) درتلفن همراه استفاده کنیم
ولی در وب ویو ها چه کنیم
ارودا (Eruda) یک کنسول تعبیه‌شدنی (Embeddable) برای مرورگرهای موبایل: https://github.com/liriliri/eruda
نمونه‌ی نمایشی: https://eruda.liriliri.io/
در اصل، شبیه به یک کپی بسیار ساده شده از ابزارهای توسعه وب کروم به نظر می‌رسد و کاملاً می‌تواند در اشکال‌زدایی به شما کمک کند، به خصوص با توجه به تعداد افزونه‌های رسمی و غیر رسمی مختلف، از نمایش بصری لمس‌ها گرفته تا پس‌زمینه‌ی پیکسل-پرفکت.
🔗https://eruda.liriliri.io
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
اسپلاید (Splide) با تایپ‌اسکریپت (TypeScript) نوشته شده است. سبک، سریع، و دارای انبوهی از قابلیت‌های یکپارچه‌سازی است. ده‌ها مثال استفاده بلافاصله در صفحه‌ی اصلی موجود است. به سئوی صفحات آسیبی نمی‌زند. امتیاز لایت‌هاوس (Lighthouse) نیز بسیار سبز است.
هیچ وابستگی‌ای ندارد و از IEده (Internet Explorer 10) به بعد پشتیبانی می‌کند.
🔗https://splidejs.com/#example=rendering--jelly-slider
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
هیچ وابستگی‌ای ندارد و از IEده (Internet Explorer 10) به بعد پشتیبانی می‌کند.
🔗https://splidejs.com/#example=rendering--jelly-slider
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
👍1
یک کتابخانهٔ متن‌باز از کامپوننت‌های Vue ۳ برای بصری‌سازی داده که کاربران را توانمند می‌کند و برای روایت بیانی، روان و مؤثرِ داده‌ها طراحی شده است.
🔗https://vue-data-ui.graphieros.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
🔗https://vue-data-ui.graphieros.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
❤1🔥1👏1
یک ماژول برای برنامه‌های Nuxt.
وظیفهٔ آن این است که به توسعه‌دهنده کمک کند تا نکات و هشدارهای مرتبط با عملکرد، دسترس‌پذیری (A11Y)، امنیت و دیگر جنبه‌های مهم برنامه را مشاهده کند.
این ماژول در DevTools مربوط به Nuxt ادغام می‌شود و یک پنل بصری ارائه می‌دهد که در آن می‌توان دید چه چیزی ضعیف عمل می‌کند، کجا کندی وجود دارد، بار روی کدام بخش است و موارد مشابه.
🔗https://github.com/nuxt/hints
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
وظیفهٔ آن این است که به توسعه‌دهنده کمک کند تا نکات و هشدارهای مرتبط با عملکرد، دسترس‌پذیری (A11Y)، امنیت و دیگر جنبه‌های مهم برنامه را مشاهده کند.
این ماژول در DevTools مربوط به Nuxt ادغام می‌شود و یک پنل بصری ارائه می‌دهد که در آن می‌توان دید چه چیزی ضعیف عمل می‌کند، کجا کندی وجود دارد، بار روی کدام بخش است و موارد مشابه.
🔗https://github.com/nuxt/hints
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
یک چیز پیدا کردم که واقعاً شگفت‌انگیز است. باز هم یک شاهکار دیگر با Shadow DOM — این بار یک فرازبانی برای توصیف الگوها.
خلاصه اینکه می‌توان پس‌زمینه‌های فوق‌العاده ساخت، بدون آنکه خود را به قابلیت‌های گرادیانت‌های معمول محدود کنید.
اسم این ابزار <css-doodle/> است.
در آن می‌توانید الگوی دلخواه‌تان را با استفاده از قوانین CSS و یک‌سری توابع ساده مثل flip، reverse، shape، random و غیره توصیف کنید؛ یک زبان کاملاً اعلامی و قدرتمند.
نمونه‌های بسیار زیاد، جامعهٔ بزرگ. مثلاً خود نویسنده توضیح داده چطور می‌توان یک نقش کلاسیک چینی را فقط با توابع flip–invert–reverse ساخت.
در کل، ابزار واقعاً شگفت‌انگیزی است.
🔗https://css-doodle.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
خلاصه اینکه می‌توان پس‌زمینه‌های فوق‌العاده ساخت، بدون آنکه خود را به قابلیت‌های گرادیانت‌های معمول محدود کنید.
اسم این ابزار <css-doodle/> است.
در آن می‌توانید الگوی دلخواه‌تان را با استفاده از قوانین CSS و یک‌سری توابع ساده مثل flip، reverse، shape، random و غیره توصیف کنید؛ یک زبان کاملاً اعلامی و قدرتمند.
نمونه‌های بسیار زیاد، جامعهٔ بزرگ. مثلاً خود نویسنده توضیح داده چطور می‌توان یک نقش کلاسیک چینی را فقط با توابع flip–invert–reverse ساخت.
در کل، ابزار واقعاً شگفت‌انگیزی است.
🔗https://css-doodle.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
Perspective 4.0
مولفه تحلیل داده و تجسم داده با عملکرد بالا
(وب‌سایت رسمی: https://perspective-dev.github.io/)
در ابتدا توسط شرکت جی‌پی مورگان ساخته شده، این مولفه تجسم داده که با زبان ++C توسعه یافته و به WebAssembly کامپایل شده، برای مجموعه‌داده‌های بزرگ و جریانی در زمان واقعی بسیار مناسب است. در نسخه‌ی نمایشی صفحه‌ی اصلی، می‌توانید انواع تجسم را با سرعت تا ۱۰۰۰ تغییر در ثانیه آزمایش کنید.
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
مولفه تحلیل داده و تجسم داده با عملکرد بالا
(وب‌سایت رسمی: https://perspective-dev.github.io/)
در ابتدا توسط شرکت جی‌پی مورگان ساخته شده، این مولفه تجسم داده که با زبان ++C توسعه یافته و به WebAssembly کامپایل شده، برای مجموعه‌داده‌های بزرگ و جریانی در زمان واقعی بسیار مناسب است. در نسخه‌ی نمایشی صفحه‌ی اصلی، می‌توانید انواع تجسم را با سرعت تا ۱۰۰۰ تغییر در ثانیه آزمایش کنید.
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript