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

نمونه ای از پیاده سازی تم های روشن و تاریک با استفاده از CSS خالص

<body>
  <label>
    <input id="dark" type="checkbox">
    Dark mode
  </label>
</body>

body {
  --fg: black;
  --bg: white;
  color: var(--fg);
  background-color: var(--bg);
}

body:has(#dark:checked) {
  --fg: white;
  --bg: black;
}

#️⃣#tip #css
🆔@IR_javascript

👍2

289 views_, 16:30

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

#️⃣#challenge
🆔@IR_javascript

243 views_, 00:30

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

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

Anonymous Quiz

60 voters242 views_, 00:30

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

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

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

#️⃣#tip
🆔@IR_javascript

👍2

190 views_, 08:31

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

1:42

This media is not supported in your browser

VIEW IN TELEGRAM

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

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

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

#️⃣#event
🆔@IR_javascript

❤8👎4

171 views_, edited 11:29

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

با استفاده از دستور 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

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

This media is not supported in your browser

VIEW IN TELEGRAM

ایجاد انیمیشن در 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

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

استفاده از 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

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

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

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

#️⃣#tip #css
🆔@IR_javascript

259 views_, 15:30

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

‏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

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

0:06

This media is not supported in your browser

VIEW IN TELEGRAM

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

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

#️⃣#code
🆔@IR_javascript

👍1

393 views_, 07:31

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

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

ویژگی 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

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

‏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

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

0:04

This media is not supported in your browser

VIEW IN TELEGRAM

Glowy hover effect

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

#️⃣#code
🆔@IR_javascript

229 views_, 07:30

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

This media is not supported in your browser

VIEW IN TELEGRAM

‏ 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

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

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

#️⃣#tip
🆔@IR_javascript

👍2

303 views_, 23:30

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

0:14

This media is not supported in your browser

VIEW IN TELEGRAM

Responsive Portfolio

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

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

#️⃣#code
🆔@IR_javascript

👍1

233 views_, 07:30

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

This media is not supported in your browser

VIEW IN TELEGRAM

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

🔗https://www.cssportal.com

#️⃣#tool
🆔@IR_javascript

👍1

523 views_, 15:30

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

This media is not supported in your browser

VIEW IN TELEGRAM

ویژگی scroll-padding

به شما امکان می دهد در فاصله معینی از لبه ظرف، scroll را متوقف کنید

.scroll-container {
  scroll-padding: 50px 0 0 50px;
}

🔗https://css-tricks.com/almanac/properties/s/scroll-padding/

#️⃣#tip
🆔@IR_javascript

👍4

331 views_, 23:30

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

‏نظرات پیشرفته
‏Better Comments یک افزونه برای VSCode است که به شما کمک می کند نظرات را در کد خود ساختار بهتری داشته باشید. این قابلیت دسته بندی نظرات و برجسته کردن آنها در رنگ های مختلف را ارائه می دهد که به شما کمک می کند نکات مهم، وظایف یا نظرات را برجسته کنید.

#️⃣#tool
🆔@IR_javascript

👍1

317 views_, 07:30

About

Blog

Apps

Platform