خب، ابزاری که به خلق چنین اثری کمک کرده، 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

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

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

بله، می‌توان از سرویس‌هایی مانند 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

اسپلاید (Splide) با تایپ‌اسکریپت (TypeScript) نوشته شده است. سبک، سریع، و دارای انبوهی از قابلیت‌های یکپارچه‌سازی است. ده‌ها مثال استفاده بلافاصله در صفحه‌ی اصلی موجود است. به سئوی صفحات آسیبی نمی‌زند. امتیاز لایت‌هاوس (Lighthouse) نیز بسیار سبز است.

هیچ وابستگی‌ای ندارد و از IEده (Internet Explorer 10) به بعد پشتیبانی می‌کند.


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

یک کتابخانهٔ متن‌باز از کامپوننت‌های Vue ۳ برای بصری‌سازی داده که کاربران را توانمند می‌کند و برای روایت بیانی، روان و مؤثرِ داده‌ها طراحی شده است.

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

یک ماژول برای برنامه‌های Nuxt.
وظیفهٔ آن این است که به توسعه‌دهنده کمک کند تا نکات و هشدارهای مرتبط با عملکرد، دسترس‌پذیری (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

Perspective 4.0

مولفه تحلیل داده و تجسم داده با عملکرد بالا
(وب‌سایت رسمی: https://perspective-dev.github.io/)

در ابتدا توسط شرکت جی‌پی مورگان ساخته شده، این مولفه تجسم داده که با زبان ++C توسعه یافته و به WebAssembly کامپایل شده، برای مجموعه‌داده‌های بزرگ و جریانی در زمان واقعی بسیار مناسب است. در نسخه‌ی نمایشی صفحه‌ی اصلی، می‌توانید انواع تجسم را با سرعت تا ۱۰۰۰ تغییر در ثانیه آزمایش کنید.


#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

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

کتابخانهٔ مجازی‌سازی لیست‌ها virtua
این کتابخانه:

پشتیبانی از ارتفاع پویا برای آیتم‌ها به‌صورت پیش‌فرض؛

اسکرول بی‌نهایت؛

قابلیت اشغال کامل ارتفاع پنجره؛

پشتیبانی از RSC؛

و فقط محدود به React نیست — Vue، Solid و Svelte را هم پوشش می‌دهد.

راه‌حلی مدرن، تمیز و واقعاً شایستهٔ توجه.

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

ابزاری تعاملی برای نمایش و کنترل داده‌ها در محور زمان است؛ دقیقاً مشابه نمونه‌ای که در تصویر دیده می‌شود. این کتابخانه برای مصورسازی تاریخ‌ها


🔗https://visjs.github.io/vis-timeline/examples/timeline/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

حذف پس‌زمینه در مرورگر
حذف پس‌زمینه را مستقیماً در مرورگر خود انجام دهید؛ این ابزار با WebGPU کار می‌کند و از مدل «آر‌اِم‌بی‌جی نسخهٔ یک‌ممیز‌چهار» از هاجینگ فِیس استفاده می‌کند.

🔗https://github.com/ducan-ne/remove-bg
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript