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

#️⃣#challenge
🆔@IR_javascript

243 views_, 00:30

در خروجی چه خواهد بود

Anonymous Quiz

60 voters242 views_, 00:30

استفاده از JavaScript Intl API برای قالب‌بندی اعداد، تاریخ‌ها و رشته‌ها با توجه به موقعیت مکانی کاربر

‏Intl API قابلیتی برای قالب بندی اعداد، تاریخ ها و رشته ها با توجه به موقعیت مکانی کاربر که اپ را برای کاربران بین المللی قابل دسترسی تر می کند.

#️⃣#tip
🆔@IR_javascript

👍2

190 views_, 08:31

1:42

لحظه تحویل سال در حرم امام رضا (ع)

🔹لحظاتی زیبا از نواختن اولین نقاره در سال ۱۴۰۳ از نقاره‌خانه حرم مطهر رضوی

سال نو تون مبارک 💚💚💚

#️⃣#event
🆔@IR_javascript

❤8👎4

171 views_, edited 11:29

با استفاده از دستور supports@ می توان پشتیبانی مرورگر را در مورد یک ویژگی بررسی کرد. یعنی آن ویژگی در مرورگر منظور کار می کند یا نه.

معمولا این کار توسط کتابخانه های جاوااسکریپت نظیر Modernizr انجام می شود اما این دستور این امکان را می دهد تا بتوان این آزمایش را در فایل CSS بدون نوشتن کد جاوااسکریپت انجام داد.

به عنوان مثال فرض کنید می خواهید از ماژول فلکس باکس استفاده کنید اما در عین حال می خواهید مراقب مرورگرهایی که این ماژول را پشتیبانی نمی کنند نیز باشید و برای آنها استایل مجزا بنویسید و راه حل دیگری برای آنها داشته باشید
🔗https://css-tricks.ir/reference/supports/

🔗https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports_static

#️⃣#tip #css
🆔@IR_javascript

👍2

307 views_, 16:30

ایجاد انیمیشن در svg با استفاده از تگ های animateTransform و animate

در انیمیشن بالا از css , js استفاده نشده و با استفاده از المان های animateTransform و animate متحرک شده اند

🔗https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateTransform

🔗https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

#️⃣#tip #html
🆔@IR_javascript

👍1

236 views_, 23:30

استفاده از AbortController برای لغو رویدادهای DOM

در مورد این روش چندین رویداد listener به طور همزمان با استفاده از AbortController حذف می شود.

🔗https://developer.mozilla.org/en-US/docs/Web/API/AbortController

🔗https://ditty.ir/posts/javascript-abortcontroller/nBwbX

#️⃣#tip
🆔@IR_javascript

254 views_, 07:31

‏border-image-source -- استفاده از تصویر و یا گرادیان برای border یک عنصر

🔗https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source

#️⃣#tip #css
🆔@IR_javascript

259 views_, 15:30

‏beforeunload

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

const beforeUnloadHandler = (event) => {
  // Recommended
  event.preventDefault();

  // Included for legacy support, e.g. Chrome/Edge < 119
  event.returnValue = true;
};

const nameInput = document.querySelector("#name");

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    window.addEventListener("beforeunload", beforeUnloadHandler);
  } else {
    window.removeEventListener("beforeunload", beforeUnloadHandler);
  }
});

🔗https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

#️⃣#tip
🆔@IR_javascript

👍2

320 views_, 23:30

0:06

‏login‏
یک فرم لاگین متفاوت و زیبا

🔗https://codepen.io/Anna_Batura/pen/ExKBXdd

#️⃣#code
🆔@IR_javascript

👍1

393 views_, 07:31

ایجاد متن گرادیان دار

ویژگی webkit-text-stroke به طور همزمان رنگ و ضخامت طرح را در اطراف حروف و نمادهای متن تنظیم می کند.اما همچنین برای ایجاد یک گرادیان باید 2 ویژگی دیگر اضافه کنید:
background-clip: text
background-image: linear-gradient

<h1>Stroke</h1>

body {
    background-color: #000119;
    display: grid;
    font-family: sans-serif;
    place-items: center;
  }
  h1 {
    background-clip: text;
    background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
    font-size: 100px;
    -webkit-text-stroke: transparent 6px;
  }

#️⃣#tip #css
🆔@IR_javascript

👍2

369 views_, 15:30

‏htmx به شما این امکان را می دهد که به AJAX، CSS Transitions، WebSockets و Server Sent Events به طور مستقیم در HTML با استفاده از attribute ها دسترسی داشته باشید، بنابراین می توانید رابط های کاربری مدرن را با سادگی و قدرت hypertext بسازید.
به طور مثال برای بروز رسانی محتوای عنصر بدون بارگیری مجدد صفحه

HTML:

 <button hx-get="/api/data" hx-target="#result">
دانلود داده ها
</button>
<div id="result"></div>

جاوا اسکریپت:

 // کنترل کننده رویداد که
// هنگامی که درخواست موفقیت آمیز بود، فراخوانی می شود
function updateResult(response) {
  document.querySelector('#result').innerHTML = response.text;
}

//  کنترل کننده رویداد را ثبت کنید
document.addEventListener('htmx:afterSwap', function(event) {
  if (event.detail.elt.id === 'result') {
    updateResult(event.detail.xhr);
  }
});

در این مثال، با کلیک بر روی دکمه "بارگیری داده ها" یک درخواست GET به /api/data ارسال می شود و نتیجه بدون بارگیری مجدد کل صفحه در داخل عنصر با id= result به روز می شود.

🔗https://htmx.org/

#️⃣#npm_module
🆔@IR_javascript

🔥1🤔1

329 views_, 23:31

0:04

Glowy hover effect

🔗https://codepen.io/inescodes/pen/PoxMyvX

#️⃣#code
🆔@IR_javascript

229 views_, 07:30

‏ Pico CSS یک چارچوب CSS مینیمالیستی و سبک برای HTML ‏

اصلاً لازم نیست با آن زحمتی بکشید چون تمامی style ها به عناصر html داده شده و اصلا نیازی به تعریف کلاس و style ندارید

می توانید Pico را با بیش از 130 متغیر CSS سفارشی کنید یا از SASS استفاده کنید.

برخلاف فریم ورک‌های حجیم و بارگذاری شده، Pico ماهیت سبک HTML را حفظ می‌کند، با اجتناب از اختصاصی بودن بیش از حد CSS، استفاده از حافظه را کاهش می‌دهد و تعداد فایل‌ها را برای بارگیری کاهش می‌دهد.
🔗https://picocss.com/

#️⃣#npm_module
🆔@IR_javascript

👍2❤1

303 views_, 15:31

گرد کردن اعداد در جاوا اسکریپت با استفاده از روش ریاضی

#️⃣#tip
🆔@IR_javascript

👍2

303 views_, 23:30

0:14

Responsive Portfolio

این یک صفحه نمونه کار کامل است که به سبک macOS با استفاده از HTML و CSS طراحی شده است.

🔗https://codepen.io/ecemgo/pen/WNmWVqb

#️⃣#code
🆔@IR_javascript

👍1

233 views_, 07:30

‏CSS Portal دارای نمونه های زیادی از CSS / HTML برای کمک به تمام نیازهای طراحی خود پیدا خواهید کرد. صدها ابزارو مولدهایی که می توانید آن را کپی کرده و در پروژه وب خود جایگذاری کنید.

🔗https://www.cssportal.com

#️⃣#tool
🆔@IR_javascript

👍1

523 views_, 15:30