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

منجا: Fruit Ninja با جاوا اسکریپت
معرفی منجا:

منجا یک بازی جذاب شبیه به Fruit Ninja است که با استفاده از زبان برنامه نویسی جاوا اسکریپت و بدون نیاز به هیچ فریم‌ورک خارجی توسعه یافته است. این بازی به عنوان جانشین معنوی Fruit Ninja شناخته می‌شود و با ارائه ظاهری هندسی و منحصر به فرد، تجربه‌ای جدید و سرگرم‌کننده را به ارمغان می‌آورد.

در منجا، وظیفه‌ی شما برش و نابودی بلوک‌های رنگارنگی است که از جهات مختلف به سمت شما پرتاب می‌شوند. برای انجام این کار، باید از انگشت یا موس خود برای هدایت تیغه و برش دقیق بلوک‌ها استفاده کنید. دقت داشته باشید که نباید اجازه دهید هیچ بلوکی از صفحه بازی خارج شود، در غیر این صورت امتیاز خود را از دست خواهید داد.
🔗https://codepen.io/MillerTime/details/BexBbE

#️⃣#code
🆔@IR_javascript

👍3

282 views_, 08:30

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

This media is not supported in your browser

VIEW IN TELEGRAM

‏vscodethemes یک وب‌سایت است که به شما امکان می‌دهد تم‌های مختلفی را برای ویرایشگر کد VS Code خود پیدا کنید. این وب‌سایت شامل طیف گسترده‌ای از تم‌ها در سبک‌ها و رنگ‌های مختلف است، بنابراین مطمئناً تم مورد علاقه خود را پیدا خواهید کرد.

🔗https://vscodethemes.com/

#️⃣#tool
🆔@IR_javascript

👍2

335 views_, 16:30

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

استفاده از gap به جای margin

چرا استفاده از gap بهتر از margin است؟

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

CSS
.container {
  display: grid;
  gap: 20px; 
}

در این مثال، ازgap برای تعریف فاصله بین آیتم‌های .item در داخل container استفاده شده است. با این کار دیگر نیازی به تعریف margin جداگانه برای هر آیتم نیست.

نکاتی برای استفاده از gap:

از row-gap و column-gap برای تنظیم فاصله در راستای افقی و عمودی به طور جداگانه استفاده کنید.
‏gap به طور پیش فرض برای هر دو جهت افقی و عمودی اعمال می‌شود.
#️⃣#tip
🆔@IR_javascript

👍4

148 views_, 00:30

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

0:11

This media is not supported in your browser

VIEW IN TELEGRAM

‏NEAT یک ابزار آنلاین و رایگان است که به شما امکان می‌دهد انیمیشن‌های گرادیانتی جذاب و چشم‌نواز برای وب‌سایت خود ایجاد کنید. با استفاده از این ابزار، می‌توانید بدون نیاز به دانش برنامه‌نویسی یا CSS، انیمیشن‌های سفارشی و متحرک بسازید و به وب‌سایت خود ظاهری منحصر به فرد و پویا ببخشید.

🔗https://neat.firecms.co/

#️⃣#tool
🆔@IR_javascript

👍3

282 views_, 08:30

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

رازهای بارگذاری سریع‌تر صفحات وب

‏Prefetch:

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

مزایای Prefetch:

کاهش زمان بارگذاری صفحه
بهبود تجربه کاربری
کاهش بار سرور

‏Preload شبیه به Prefetch است، اما با یک تفاوت ظریف Preload به طور خاص به مرورگر می‌گوید که منابع مشخص شده "ضروری" هستند و باید "بلافاصله" بارگیری شوند. این روش برای منابعی که برای نمایش اولیه صفحه ضروری هستند، مانند فایل CSS اصلی یا اسکریپت جاوا اسکریپت، بسیار مفید است.

مزایای Preload:

بارگذاری سریع‌تر محتوای اصلی
بهبود زمان اولین محتوای قابل مشاهده
تجربه کاربری روان‌تر

استفاده از Prefetch و Preload با هم:
‏Prefetch را برای منابعی که احتمالاً در آینده مورد نیاز خواهند بود، اما ضروری نیستند، و Preload را برای منابعی که برای نمایش اولیه صفحه ضروری هستند، استفاده کنید.
#️⃣#tip
🆔@IR_javascript

🔥2❤1👍1

275 views_, 16:31

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

This media is not supported in your browser

VIEW IN TELEGRAM

‏CSS Shape — ابزاری که می‌توانند برای ایجاد طیف وسیع‌تری از اشکال مورد استفاده قرار بگیرند.

نکات برجسته:

تنوع باورنکردنی اشکال
قابلیت برش و پیکربندی برخی از اشکال
سادگی و ظرافت در طراحی

کاربردها:

ایجاد دکمه‌ها و آیکون‌های جذاب
طراحی جداکننده‌ها و بخش‌های مختلف صفحه
افزودن جزئیات بصری به طرح کلی

🆔https://css-tricks.com/the-shapes-of-css/

#️⃣#tip
🆔@IR_javascript

👍1

285 views_, 00:30

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

0:05

This media is not supported in your browser

VIEW IN TELEGRAM

View transitions (Chrome 115+)

🔗https://codepen.io/joshsanger-the-looper/pen/WNLoaOg

#️⃣#code
🆔@IR_javascript

👍1

224 views_, 08:30

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

امروز می‌خواهیم به سراغ ابزاری به نام qnm برویم که برای جستجوی بسته‌های نصب‌شده در پوشه node_modules کاربرد دارد.

اما چرا به چنین ابزاری نیاز داریم؟

دلایل متعددی برای استفاده از qnm وجود دارد. به عنوان مثال، این ابزار می‌تواند به شما کمک کند تا:

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

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

🔗 https://github.com/ranyitz/qnm

#️⃣#npm_module
🆔@IR_javascript

240 views_, 16:30

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

This media is not supported in your browser

VIEW IN TELEGRAM

3D Card

🔗https://codepen.io/gayane-gasparyan/pen/wvxewXO
🔗https://codepen.io/t_afif/full/mdzxJaa

#️⃣#code
🆔@IR_javascript

139 views_, 00:30

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

جیتر: ابزاری برای خلق انیمیشن‌
جیتر یک پلتفرم آنلاین برای طراحی و ساخت انیمیشن‌های جذاب و تعاملی است. این ابزار به عنوان جایگزینی برای نرم‌افزار After Effects شناخته می‌شود و به کاربران امکان می‌دهد تا بدون نیاز به دانش فنی عمیق، انیمیشن‌های باکیفیت و حرفه‌ای را خلق کنند.
همچنین امکان وارد کردن پروژه های خود از Figma وجود دارد.

🔗https://www.youtube.com/watch?v=jdNvHs8l0Bs
🔗https://jitter.video/

#️⃣#tool
🆔@IR_javascript

183 views_, 08:30

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

مجموعه ای از کارهای جالبی که می توانید با تگ <a> انجام دهید
#️⃣#tip
🆔@IR_javascript

👍6

273 views_, 16:30

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

چیدمان وب سایت تکمن

فرمت: figma
زبان: ru
سختی: سخت
ریسپانسیو: true

🔗https://www.figma.com/file/pweFVR5zMQtFCqZdjNlQrl/Takman-for-Markup-(Copy)?type=design&node-id=0%3A1&mode=design&t=I3ZcpDp495IGmbb8-1

#️⃣#design
🆔@IR_javascript

151 views_, 00:30

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

بازگشت به صفحه قبل در مرورگر
‏History API به شما امکان می‌دهد تاریخچه مرورگر را در یک جلسه مرور (session) مدیریت کنید. با استفاده از History API، می‌توانید در تاریخچه مرورگر به جلو و عقب بروید و محتوای آن را کنترل کنید.

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

history.back();
history.go(-1);

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

history.forward();
history.go(1);

ملاحظات:

روش‌های history.back(), history.forward(), و history.go() غیرهمزمان هستند. به این معنی که کد شما بلافاصله پس از اجرای این روش‌ها ادامه می‌یابد، بدون اینکه منتظر بماند تا صفحه جدید بارگیری شود.
اگر در ابتدای تاریخچه مرورگر خود هستید، استفاده از history.back() هیچ کاری انجام نمی‌دهد.
اگر در انتهای تاریخچه مرورگر خود هستید، استفاده از history.forward() هیچ کاری انجام نمی‌دهد.
#️⃣#tip
🆔@IR_javascript

👍2👏2

247 views_, 08:30

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

شبه کلاس CSS :hover و کاربرد آن در دستگاه‌های لمسی
شبه کلاس CSS :hover برای اعمال استایل‌های خاص به عناصر زمانی که کاربر ماوس را روی آنها حرکت می‌دهد، استفاده می‌شود. این شبه کلاس در دستگاه‌های دارای "ماوس" به خوبی کار می‌کند، اما در صفحه‌های لمسی می‌تواند هنگام اسکرول کردن صفحه، اثرات ناخواسته‌ای ایجاد کند.

برای حل این مشکل، می‌توان از media query برای محدود کردن عملکرد :hover به دستگاه‌های دارای "ماوس" استفاده کرد.

نحوه محدود کردن :hover به دستگاه‌های دارای "ماوس":

@media (hover: hover) {
  .card:hover {
    /* Add hover styles.. */
  }
}

در کد بالا، media query فقط در صورتی اعمال می‌شود که دستگاه از "ماوس" یا ترکبال پشتیبانی کند. در این حالت، استایل‌های hover فقط برای .card زمانی که ماوس روی آن حرکت می‌کند، اعمال می‌شوند.

نکته:

‏media query (hover: hover) فقط در مرورگرهای مدرن پشتیبانی می‌شود. برای پشتیبانی از مرورگرهای قدیمی، می‌توانید از media query‌های جایگزین مانند (pointer: none) استفاده کنید.

🔗https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

#️⃣#tip #css
🆔@IR_javascript

👍1

271 views_, 16:40

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

‏WebSocket امکان ایجاد یک اتصال برای تبادل داده‌ها بصورت rael time بدون نیاز به درخواست‌ها و پاسخ‌های مداوم فراهم میکند.
در متد send() می‌تواند هم داده‌های متنی (string) و هم داده‌های دودویی (مانند Blob، ArrayBuffer) را ارسال کند. بنابراین، اگر نیاز به ارسال یک object دارید، JSON.stringify() را فراموش نکنید.
هنگام دریافت داده، متن همیشه به صورت رشته‌ای دریافت می‌شود، اما برای داده‌های دودویی، می‌توانیم یکی از موارد زیر را انتخاب کنیم: Blob یا ArrayBuffer:

// انتخاب فرمت داده برای داده‌های دودویی: Blob
ws.binaryType = 'blob'; // به طور پیش فرض، اما می‌توانید 'arraybuffer' را نیز مشخص کنید

// هندلر رویداد دریافت پیام از سرور
ws.onmessage = function(event) {
  if (event.data instanceof Blob) {
    //  Handling of received data in Blob format
    console.log('Received data in Blob format:', event.data);
  } else {
    //  Handling of received data as a string
    console.log('Received text data:', event.data);
  }
};

اما در مورد اشکال‌زدایی: در مرورگر Dev Tools => Network => WS

#️⃣#tip
🆔@IR_javascript

👍1

242 views_, 00:31

About

Blog

Apps

Platform