ویژگی CSS line-clamp به شما امکان می دهد متن را به تعداد مشخصی از خطوط محدود کنید و سپس بعد از آن ellipsis رخ خواهد داد.

p {
  width: 300px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#️⃣#tip #css
🆔@IR_javascript

اگر همه چیز به آرامی پیش برود، شما کندترین هستید

#️⃣#motivation
🆔@IR_javascript

Plotly 2.30: A JavaScript Graphing Library
‏Plotly.js یک کتابخانه ویژال سازی برای داده‌های جاوا اسکریپت است، و می تواند برای تولید ده ها نوع نمودار، از جمله نمودارهای آماری، نمودارهای سه بعدی، نمودارهای علمی، نمودارهای مالی و موارد دیگر استفاده شود.

🔗https://plotly.com/javascript/

#️⃣#npm_module
🆔@IR_javascript

Git-it
برنامه دسکتاپ برای آموزش کار با Git و GitHub
وظایف واقعی را ارائه می دهد، نه شبیه سازی یعنی پس از تکمیل تمام وظایف، مخازن آماده ای در GitHub خواهید داشت که برای یک نمونه کار ایده آل است.
🔗https://github.com/jlord/git-it-electron

#️⃣#npm_module
🆔@IR_javascript

اگر از فونت های شخص ثالث (مثلاً فونت های گوگل) استفاده می کنید، بهتر است آنها را نه در CSS خود، بلکه در index.html قرار دهید.

به این ترتیب، مرورگر قبل از دریافت فایل‌های CSS شما شروع به بارگیری آن‌ها می‌کند و سریع‌تر ظاهر می‌شوند و احتمال اینکه متن روی صفحه هنگام تغییر فونت از فونت پیش فرض ، «تکان‌دار یا پرش دار» شود، کاهش می‌یابد.

#️⃣#tip
🆔@IR_javascript

التماس دعا يعني چه؟

ﺧﺪﺍﻭﻧﺪ ﺑﻪ ﻣﻮسی ﻓﺮﻣﻮﺩ : ﺑﺎ ﺯﺑﺎنی ﺩﻋﺎ ﻛﻦ ﻛﻪ ﺑﺎ ﺁﻥ ﮔﻨﺎﻩ ﻧﻜﺮﺩﻩ ﺍی ﺗﺎ ﺩﻋﺎﻳﺖ ﻣﺴﺘﺠﺎﺏ ﺷﻮﺩ !
ﻣﻮسی ﻋﺮﺽ ﻛﺮﺩ : ﭼﮕﻮﻧﻪ؟

ﺧﺪﺍﻭﻧﺪ ﻓﺮﻣﻮﺩ : ﺑﻪ ﺩﻳﮕﺮﺍﻥ ﺑﮕﻮ ﺑﺮﺍﻳﺖ ﺩﻋﺎﻛﻨﻨﺪ ﭼﻮﻥ ﺗﻮ ﺑﺎ ﺯﺑﺎﻥ ﺁﻧﺎﻥ ﮔﻨﺎﻩ ﻧﻜﺮﺩﻩ ﺍی !!

(( و این است فلسفه ی التماس دعا))

" در این روز ها و شب های قدر نگاهم ﺑﻪ ﺩﻋﺎﯾﺘﺎﻥ است..."

التماس دعا🙏

#⃣#event
🆔@IR_javascript

5 روش برای تبدیل رشته به عدد در جاوا اسکریپت

const str = '2024'
console.log(typeof str)         // string

const num1 = +str
console.log(num1)               // 2024
console.log(typeof num1)        // number

const num2 = Number(str)
console.log(num2)               // 2024
console.log(typeof num2)        // number

const num3 = parseInt(str)
console.log(num3)               // 2024
console.log(typeof num3)        // number

const num4 = parseFloat(str)
console.log(num4)               // 2024
console.log(typeof num4)        // number

const num5 = str * 1
console.log(num5)               // 2024
console.log(typeof num5)        // number

#️⃣#tip
🆔@IR_javascript

Drag and Drop
‏استاندارد HTML5 دارای یک API است که به شما امکان می دهد افکت کشیدن و رها کردن را پیاده سازی کنید.

HTML:

<!-- با تنظیم ویژگی dragable روی true، عنصر را قابل کشیدن کنید-->
<h1 draggable="true">
  <img src="dancer.gif" width="66" height="66">
  I Like To <br>Move It
</h1>

CSS:

img {
  float: left;
}
h1 {
  cursor: move;
}

JS:

let x, y, tx = 0, ty = 0;
const el = document.querySelector("h1");

el.ondragstart = (e) => {
  x = e.x;
  y = e.y;
};

el.ondragend = (e) => {
  tx += e.x - x;
  ty += e.y - y;
  el.style.transform = `translate(${tx}px, ${ty}px)`;
};

🔗https://codepen.io/Frontend-Portal/pen/MWRbebp

#️⃣#tip
🆔@IR_javascript

Scroll-Driven Text Reveals

🔗https://codepen.io/jh3y/pen/eYbYydG

#️⃣#code
🆔@IR_javascript

‏ visibilitychange رویدادی جهت تعیین این که آیا تب در مرورگر در حال حاضر فعال است یا خیر
یک مورد ساده از آن برای اجرای مکث/شروع ویدیو بسته به وضعیت تب در تصویر فوق آمده است

🔗https://www.codewithshripal.com/playground/js/page-visibility-api

#️⃣#tip
🆔@IR_javascript

#️⃣#comic
🆔@IR_javascript

شمارنده‌های CSS به ما امکان می‌دهند که را بر اساس عناصر تکراری عدد تولید کنیم و بر اساس آن استایل‌بندی کنیم. شمارنده های CSS را به عنوان متغیرهایی در نظر بگیرید که مقادیر آنها قابل افزایش است.

ویژگی counter-reset:
[1] اولین مقدار نام شمارنده است
[2] به دنبال آن یک پارامتر اختیاری که مقدار شروع شمارنده را تعیین می کند (پیش فرض: 0). توجه داشته باشید که شمارنده همیشه شروع به شمارش به سمت بالا می کند، بنابراین اولین مقدار تولید شده در مورد ما 1 خواهد بود.

counter-reset: counterName 0;

ویژگی counter:
[1] اولین مقدار نام شمارنده است
[2] سبک شمارنده را "اعشاری" بودن تعریف کنید. مقادیر ممکن در اینجا مشابه مقادیر مورد استفاده برای ویژگی list-style-type است.

ویژگی counter-increment:
[1] اولین مقدار نام شمارنده است
[2] سپس از یک پارامتر اختیاری برای نشان دادن میزان افزایش شمارنده استفاده کنید.

counter-increment: counterName 1;
content: counter(counterName, decimal);

🔗https://webdesign.tutsplus.com/quick-tip-using-css-counters-to-style-incremental-elements--cms-23497t

#️⃣#tip #css
🆔@IR_javascript

اعمال مشترک شب قدر و اعمال مخصوص شب بيست ويكم ماه مبارک رمضان
التماس دعا

#️⃣#event
🆔@IR_javascript

Responsive Image Carousel

🔗https://codepen.io/noirsociety/pen/ZEwLGXB

#️⃣#code
🆔@IR_javascript

‏‌‎ Clamp کمک می‌کنه خیلی ساده‌تر عناصر توی صفحه رو Responsive کنیم. برای مثال اگه می‌خوایم اندازه یک عکس بر اساس سایز صفحه انعطاف‌پذیر اما کنترل‌شده باشه چنین دستوری می‌نویسیم:

img {
  width: clamp(200px, 100%, 400px);
}

با توجه به این کد، عرض تصویر ۱۰۰٪ هست، اما این عرض هیچوقت از ۴۰۰ پیکسل بیشتر و از ۲۰۰ پیکسل کمتر نمیشه. در واقع عرض تصویر بین ۲۰۰ و ۴۰۰ پیکسل شناور هست.این تابع می‌تونه جایگزینی برای توابعی مثل min و max و همچنین Media Query هایی باشه که برای Responsive کردن عناصر توی صفحه استفاده می‌شد.

🔗https://ditty.ir/posts/css-clamp/5jwZn
🔗https://developer.mozilla.org/en-US/docs/Web/CSS/clamp


#️⃣#tip #css
🆔@IR_javascript

‏Font-size clamp generator — با استفاده از این سایت می توانید فونت ریسپانسیو با استفاده از clamp () ایجاد کنید.

🔗https://clamp.font-size.app/

#️⃣#tool
🆔@IR_javascript