انتخاب دقیق عناصر با استفاده از ساختار of S در CSS
یکی از مفیدترین نوآوری‌های CSS، ساختار of S است که به شما امکان می‌دهد عناصر خاصی را از یک لیست انتخابگرها انتخاب کنید.
نحوه عملکرد:
ساختار of S به دنبال عناصری می‌گردد که با همه انتخابگرهای لیست مطابقت داشته باشند و سپس فقط آنهایی را که با اولین انتخابگر لیست نیز مطابقت دارند، انتخاب می‌کند.
مثال:
فرض کنید کد HTML زیر را دارید:
در این مثال، CSS عنصری را که با همه انتخابگرهای لیست (container, :nth-child(2), و .highlight) مطابقت دارند، انتخاب می‌کند.
تنها عنصری که با همه این معیارها مطابقت دارد، span با متن "5" است، زیرا:
داخل یک div با کلاس container قرار دارد.
فرزند دوم div با کلاس container است.
دارای کلاس highlight است.
بنابراین، فقط span با متن "5" به رنگ قرمز در می‌آید.
#️⃣#tip #css
🆔@IR_javascript
یکی از مفیدترین نوآوری‌های CSS، ساختار of S است که به شما امکان می‌دهد عناصر خاصی را از یک لیست انتخابگرها انتخاب کنید.
نحوه عملکرد:
ساختار of S به دنبال عناصری می‌گردد که با همه انتخابگرهای لیست مطابقت داشته باشند و سپس فقط آنهایی را که با اولین انتخابگر لیست نیز مطابقت دارند، انتخاب می‌کند.
مثال:
فرض کنید کد HTML زیر را دارید:
<body>
<div class="container">
<span>1</span>
<span class="highlight">2</span>
<span>3</span>
<span>4</span>
<span class="highlight">5</span>
<span class="highlight">6</span>
</div>
</body>
.container :nth-child(2 of .highlight) {
color: red;
}در این مثال، CSS عنصری را که با همه انتخابگرهای لیست (container, :nth-child(2), و .highlight) مطابقت دارند، انتخاب می‌کند.
تنها عنصری که با همه این معیارها مطابقت دارد، span با متن "5" است، زیرا:
داخل یک div با کلاس container قرار دارد.
فرزند دوم div با کلاس container است.
دارای کلاس highlight است.
بنابراین، فقط span با متن "5" به رنگ قرمز در می‌آید.
#️⃣#tip #css
🆔@IR_javascript
انتخاب سریع عناصر با $ و $$
می‌توانیم از $ و $$ برای انتخاب سریع عناصر به ترتیب تک عنصری و چند عنصری استفاده کنیم.
$ و $$ از عبارات انتخابگر استاندارد CSS به عنوان ورودی استفاده می‌کنند.
$(selector) → اولین عنصری که با selector مطابقت دارد را انتخاب می‌کند.
$$(selector) → تمام عناصر را که با selector مطابقت دارند، انتخاب می‌کند.
#️⃣#tip
🆔@IR_javascript
می‌توانیم از $ و $$ برای انتخاب سریع عناصر به ترتیب تک عنصری و چند عنصری استفاده کنیم.
$ و $$ از عبارات انتخابگر استاندارد CSS به عنوان ورودی استفاده می‌کنند.
$(selector) → اولین عنصری که با selector مطابقت دارد را انتخاب می‌کند.
$$(selector) → تمام عناصر را که با selector مطابقت دارند، انتخاب می‌کند.
#️⃣#tip
🆔@IR_javascript
🔥1
Tidy.js یک کتابخانه برای کار با داده‌ها در JavaScript است که برای ساده‌سازی دستکاری داده‌ها در برنامه‌های JavaScript شما طراحی شده است.
مزایای استفاده از Tidy.js:
سادگی: Tidy.js برای استفاده آسان طراحی شده است و دارای یک رابط کاربری ساده و قابل فهم است.
قدرت: Tidy.js طیف گسترده‌ای از ابزارها را برای دستکاری داده‌ها ارائه می‌دهد که می‌تواند نیازهای مختلف برنامه‌های شما را برآورده کند.
خوانایی: Tidy.js از یک API واضح و خوانا استفاده می‌کند که کد شما را تمیز و قابل نگهداری نگه می‌دارد.
🔗https://github.com/pbeshai/tidy
#️⃣#npm_module
🆔@IR_javascript
مزایای استفاده از Tidy.js:
سادگی: Tidy.js برای استفاده آسان طراحی شده است و دارای یک رابط کاربری ساده و قابل فهم است.
قدرت: Tidy.js طیف گسترده‌ای از ابزارها را برای دستکاری داده‌ها ارائه می‌دهد که می‌تواند نیازهای مختلف برنامه‌های شما را برآورده کند.
خوانایی: Tidy.js از یک API واضح و خوانا استفاده می‌کند که کد شما را تمیز و قابل نگهداری نگه می‌دارد.
🔗https://github.com/pbeshai/tidy
#️⃣#npm_module
🆔@IR_javascript
نحوه تشخیص وضعیت اتصال به شبکه در JavaScript
می‌توانیم از رویدادهای online و offline برای دریافت اطلاعیه‌ها در مورد تغییرات وضعیت اتصال به شبکه استفاده کنیم.
#️⃣#tip
🆔@IR_javascript
می‌توانیم از رویدادهای online و offline برای دریافت اطلاعیه‌ها در مورد تغییرات وضعیت اتصال به شبکه استفاده کنیم.
window.addEventListener('offline', (event) => {
console.log('User is offline');
});
window.addEventListener('online', (event) => {
console.log('User is online');
});
#️⃣#tip
🆔@IR_javascript
👍3
شبه‌کلاس ::firstletter
این شبه‌کلاس به شما امکان می‌دهد اولین حرف یک عنصر متنی را به صورت جداگانه استایل‌دهی کنید. این کار اغلب برای ایجاد حروف درشت در ابتدای پاراگراف یا سایر افکت‌های تایپوگرافی استفاده می‌شود.
#️⃣#tip #css
🆔@IR_javascript
این شبه‌کلاس به شما امکان می‌دهد اولین حرف یک عنصر متنی را به صورت جداگانه استایل‌دهی کنید. این کار اغلب برای ایجاد حروف درشت در ابتدای پاراگراف یا سایر افکت‌های تایپوگرافی استفاده می‌شود.
#️⃣#tip #css
🆔@IR_javascript
👍3
نحوه انتخاب عنصری در CSS که دقیقاً 5 فرزند مستقیم دارد
در CSS، می‌توانید از ترکیب شبه‌کلاس‌ها و انتخابگرها برای انتخاب عناصر با ویژگی‌های خاص استفاده کنید. در این مورد، می‌خواهیم عنصری را انتخاب کنیم که دقیقاً 5 فرزند مستقیم داشته باشد.
راه حل:
می‌توانید از کد زیر استفاده کنید:
#️⃣#tip #css
🆔@IR_javascript
در CSS، می‌توانید از ترکیب شبه‌کلاس‌ها و انتخابگرها برای انتخاب عناصر با ویژگی‌های خاص استفاده کنید. در این مورد، می‌خواهیم عنصری را انتخاب کنیم که دقیقاً 5 فرزند مستقیم داشته باشد.
راه حل:
می‌توانید از کد زیر استفاده کنید:
.box:has(> :nth-child(5):last-child) {
background-color: green;
}#️⃣#tip #css
🆔@IR_javascript
👍1
Codeium یک ابزار هوش مصنوعی قدرتمند است که به برنامه‌نویسان در انجام وظایف مختلف، از جمله نوشتن کد، رفع اشکال و تست، کمک می‌کند. این ابزار با استفاده از یادگیری ماشین و پردازش زبان طبیعی، می‌تواند کد را به طور خودکار تکمیل کند، اشکالات را شناسایی کند و راه حل‌های خلاقانه ارائه دهد.
در نظرسنجی اخیر Stack Overflow، Codeium به عنوان پربازده‌ترین و کاربرپسندترین دستیار هوش مصنوعی برای برنامه‌نویسی انتخاب شد. این نظرسنجی از بیش از 10000 توسعه‌دهنده در سراسر جهان نظرسنجی کرد و نشان داد که Codeium به طور قابل توجهی به برنامه‌نویسان در انجام وظایف خود کمک می‌کند.
🔗https://stackoverflow.blog/2024/05/29/developers-get-by-with-a-little-help-from-ai-stack-overflow-knows-code-assistant-pulse-survey-results/
#️⃣#tool
🆔@IR_javascript
در نظرسنجی اخیر Stack Overflow، Codeium به عنوان پربازده‌ترین و کاربرپسندترین دستیار هوش مصنوعی برای برنامه‌نویسی انتخاب شد. این نظرسنجی از بیش از 10000 توسعه‌دهنده در سراسر جهان نظرسنجی کرد و نشان داد که Codeium به طور قابل توجهی به برنامه‌نویسان در انجام وظایف خود کمک می‌کند.
🔗https://stackoverflow.blog/2024/05/29/developers-get-by-with-a-little-help-from-ai-stack-overflow-knows-code-assistant-pulse-survey-results/
#️⃣#tool
🆔@IR_javascript
👍1
شبه عنصر ::first-line
این شبه عنصر به شما امکان می دهد اولین خط عنصر متنی را به صورت جداگانه استایل دهید. این عنصر اغلب برای ایجاد جلوه های تایپوگرافی مانند افزایش اندازه فونت یا تغییر رنگ اولین خط استفاده می شود.
خواص قابل قبول:
color: رنگ اولین خط
background-color: رنگ پس زمینه
font-family: قلم اولین خط
font-size: اندازه فونت
font-weight: ضخامت فونت
line-height: ارتفاع خط
text-decoration: تزیین متن (زیرخط، خط خطی)
text-transform: تبدیل متن (حروف بزرگ، حروف کوچک)
word-spacing: فاصله بین کلمات
letter-spacing: فاصله بین حروف
text-indent: فرورفتگی اولین خط
در عمل، این شبه عنصر اغلب برای عناوین مقالات و پست ها استفاده می شود.
#️⃣#tip #css
🆔@IR_javascript
این شبه عنصر به شما امکان می دهد اولین خط عنصر متنی را به صورت جداگانه استایل دهید. این عنصر اغلب برای ایجاد جلوه های تایپوگرافی مانند افزایش اندازه فونت یا تغییر رنگ اولین خط استفاده می شود.
خواص قابل قبول:
color: رنگ اولین خط
background-color: رنگ پس زمینه
font-family: قلم اولین خط
font-size: اندازه فونت
font-weight: ضخامت فونت
line-height: ارتفاع خط
text-decoration: تزیین متن (زیرخط، خط خطی)
text-transform: تبدیل متن (حروف بزرگ، حروف کوچک)
word-spacing: فاصله بین کلمات
letter-spacing: فاصله بین حروف
text-indent: فرورفتگی اولین خط
در عمل، این شبه عنصر اغلب برای عناوین مقالات و پست ها استفاده می شود.
#️⃣#tip #css
🆔@IR_javascript
فشرده سازی کد
افزونه Better Minify در vs_code به شما امکان می دهد کدهای HTML، CSS، JS و بسیاری از زبان های دیگر را فشرده کنید.
هنگام استفاده از دستور "minify files" بر روی یک فایل انتخابی، فایلی با نام "نام فایل.min.ext" در دایرکتوری فعلی ایجاد می شود.
#️⃣#tool
🆔@IR_javascript
افزونه Better Minify در vs_code به شما امکان می دهد کدهای HTML، CSS، JS و بسیاری از زبان های دیگر را فشرده کنید.
هنگام استفاده از دستور "minify files" بر روی یک فایل انتخابی، فایلی با نام "نام فایل.min.ext" در دایرکتوری فعلی ایجاد می شود.
#️⃣#tool
🆔@IR_javascript
Draggabilly
Draggabilly یک کتابخانه JavaScript سبک وزن است که به شما امکان می دهد عناصر HTML را در صفحات وب قابل کشیدن و رها کردن کنید. این کتابخانه از انواع مختلف ورودی، از جمله صفحه نمایش های لمسی پشتیبانی می کند، که آن را برای استفاده در همه دستگاه های مدرن مناسب می کند.
🔗https://draggabilly.desandro.com/
#️⃣#npm_module
🆔@IR_javascript
Draggabilly یک کتابخانه JavaScript سبک وزن است که به شما امکان می دهد عناصر HTML را در صفحات وب قابل کشیدن و رها کردن کنید. این کتابخانه از انواع مختلف ورودی، از جمله صفحه نمایش های لمسی پشتیبانی می کند، که آن را برای استفاده در همه دستگاه های مدرن مناسب می کند.
🔗https://draggabilly.desandro.com/
#️⃣#npm_module
🆔@IR_javascript
👍2
هر آنچه برای ساخت آسان وب‌سایت‌های ریسپانسیو و بی‌نقص نیاز دارید، در این نرم افزار وجود دارد
تمامی دستگاه‌ها به طور همزمان
تمامی دستگاه‌ها را به صورت همزمان و در کنار هم مشاهده کنید. دیگر نیازی به کلنجار رفتن با ابزار تغییر سایز مرورگر نیست. همه چیز به طور همزمان در یک نگاه قابل مشاهده است.
تعاملات آینه شده
هر کلیک، اسکرول یا ناوبری که در یک دستگاه انجام می‌دهید، به صورت لحظه‌ای در تمام دستگاه‌ها تکرار می‌شود.
تعویض سریع بین محیط‌های مختلف
ترکیب‌های دستگاهی مورد علاقه خود را به عنوان «مجموعه پیش‌نمایش» ذخیره کنید و هنگام تست به سرعت بین آن‌ها جابجا شوید.
پروفایل‌های گسترده‌ی دستگاه‌ها
ابزار Responsively به صورت پیش‌فرض با مجموعه‌ای بزرگ از پروفایل‌های دستگاه‌ها عرضه می‌شود. همچنین می‌توانید دستگاه‌های دلخواه خود را نیز اضافه کنید.
🔗https://responsively.app/
#️⃣#tool
🆔@IR_javascript
تمامی دستگاه‌ها به طور همزمان
تمامی دستگاه‌ها را به صورت همزمان و در کنار هم مشاهده کنید. دیگر نیازی به کلنجار رفتن با ابزار تغییر سایز مرورگر نیست. همه چیز به طور همزمان در یک نگاه قابل مشاهده است.
تعاملات آینه شده
هر کلیک، اسکرول یا ناوبری که در یک دستگاه انجام می‌دهید، به صورت لحظه‌ای در تمام دستگاه‌ها تکرار می‌شود.
تعویض سریع بین محیط‌های مختلف
ترکیب‌های دستگاهی مورد علاقه خود را به عنوان «مجموعه پیش‌نمایش» ذخیره کنید و هنگام تست به سرعت بین آن‌ها جابجا شوید.
پروفایل‌های گسترده‌ی دستگاه‌ها
ابزار Responsively به صورت پیش‌فرض با مجموعه‌ای بزرگ از پروفایل‌های دستگاه‌ها عرضه می‌شود. همچنین می‌توانید دستگاه‌های دلخواه خود را نیز اضافه کنید.
🔗https://responsively.app/
#️⃣#tool
🆔@IR_javascript
👍1🔥1
API تمام صفحه—یک رابط کاربری است که به شما امکان می دهد عناصر صفحه HTML را در حالت تمام صفحه نمایش دهید. این رابط کاربری توسط مرورگرهای وب پشتیبانی می شود و می تواند برای ایجاد تجربیات کاربری جذاب و فراگیر مورد استفاده قرار گیرد.
موارد استفاده از API تمام صفحه:
پخش ویدیو: یکی از رایج ترین موارد استفاده از API تمام صفحه، پخش ویدیو است. هنگامی که روی دکمه تمام صفحه در یک پخش کننده ویدیو کلیک می کنید، از این API برای نمایش ویدیو در تمام عرض و ارتفاع صفحه نمایش شما استفاده می شود.
نمایش تصاویر: می توانید از API تمام صفحه برای نمایش تصاویر در اندازه بزرگتر و با جزئیات بیشتر استفاده کنید. این می تواند برای عکاسان، هنرمندان یا هر کسی که بخواهد تصاویر خود را به روشی فراگیر به اشتراک بگذارد مفید باشد.
نمایش اسلایدها: API تمام صفحه برای نمایش اسلایدها نیز ایده آل است. این می تواند برای ارائه ها، سخنرانی ها یا هر موقعیتی که بخواهید محتوای خود را به روشی بصری و جذاب ارائه دهید، مفید باشد.
نمایش بازی ها: برخی از بازی های وب از API تمام صفحه برای ایجاد تجربه ای فراگیرتر برای بازیکنان استفاده می کنند.
نحوه استفاده از API تمام صفحه:
استفاده از API تمام صفحه نسبتاً ساده است. برای نمایش یک عنصر در حالت تمام صفحه، می توانید از روش requestFullscreen() در آن عنصر استفاده کنید. به عنوان مثال، کد زیر عنصر با شناسه target را در حالت تمام صفحه نمایش می دهد:
برای خروج از حالت تمام صفحه، می توانید از روش exitFullscreen() در شیء Document استفاده کنید. به عنوان مثال، کد زیر از حالت تمام صفحه خارج می شود:
🔗https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_requestfullscreen
#️⃣#tip
🆔@IR_javascript
موارد استفاده از API تمام صفحه:
پخش ویدیو: یکی از رایج ترین موارد استفاده از API تمام صفحه، پخش ویدیو است. هنگامی که روی دکمه تمام صفحه در یک پخش کننده ویدیو کلیک می کنید، از این API برای نمایش ویدیو در تمام عرض و ارتفاع صفحه نمایش شما استفاده می شود.
نمایش تصاویر: می توانید از API تمام صفحه برای نمایش تصاویر در اندازه بزرگتر و با جزئیات بیشتر استفاده کنید. این می تواند برای عکاسان، هنرمندان یا هر کسی که بخواهد تصاویر خود را به روشی فراگیر به اشتراک بگذارد مفید باشد.
نمایش اسلایدها: API تمام صفحه برای نمایش اسلایدها نیز ایده آل است. این می تواند برای ارائه ها، سخنرانی ها یا هر موقعیتی که بخواهید محتوای خود را به روشی بصری و جذاب ارائه دهید، مفید باشد.
نمایش بازی ها: برخی از بازی های وب از API تمام صفحه برای ایجاد تجربه ای فراگیرتر برای بازیکنان استفاده می کنند.
نحوه استفاده از API تمام صفحه:
استفاده از API تمام صفحه نسبتاً ساده است. برای نمایش یک عنصر در حالت تمام صفحه، می توانید از روش requestFullscreen() در آن عنصر استفاده کنید. به عنوان مثال، کد زیر عنصر با شناسه target را در حالت تمام صفحه نمایش می دهد:
const element = document.getElementById('target');
element.requestFullscreen();برای خروج از حالت تمام صفحه، می توانید از روش exitFullscreen() در شیء Document استفاده کنید. به عنوان مثال، کد زیر از حالت تمام صفحه خارج می شود:
document.exitFullscreen();
🔗https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_requestfullscreen
#️⃣#tip
🆔@IR_javascript
👍2
آیا از این قابلیت‌های پنهان جاوا اسکریپت که همین حالا می‌توانید استفاده کنید، خبر داشتید؟
جاوا اسکریپت به عنوان یک زبان برنامه‌نویسی به طور مداوم در حال پیشرفت است و ویژگی‌های جدیدی به آن اضافه می‌شود که باعث قدرتمندتر شدن آن شده‌اند. کارهایی که قبلا نیازمند خطوط کد زیادی بودند، حالا تنها با فراخوانی یک متد قابل انجام هستند.
در اینجا به ۵ مورد از این ویژگی‌ها که شاید از وجود آن‌ها بی‌خبر باشید اشاره می‌کنیم
#️⃣#tip
🆔@IR_javascript
جاوا اسکریپت به عنوان یک زبان برنامه‌نویسی به طور مداوم در حال پیشرفت است و ویژگی‌های جدیدی به آن اضافه می‌شود که باعث قدرتمندتر شدن آن شده‌اند. کارهایی که قبلا نیازمند خطوط کد زیادی بودند، حالا تنها با فراخوانی یک متد قابل انجام هستند.
در اینجا به ۵ مورد از این ویژگی‌ها که شاید از وجود آن‌ها بی‌خبر باشید اشاره می‌کنیم
#️⃣#tip
🆔@IR_javascript
🔥1
در دنیای وب، انیمیشن نقش مهمی در ایجاد رابط کاربری جذاب و پویا ایفا می‌کند. روش‌های مختلفی برای ایجاد انیمیشن در وب وجود دارد، از جمله CSS Animations، SVG Animations و JavaScript Animations. در میان این روش‌ها، requestAnimationFrame (rAF) به عنوان یک ابزار قدرتمند و کارآمد برای ایجاد انیمیشن‌های روان و بهینه شناخته می‌شود.
rAF چیست؟
requestAnimationFrame یک API مرورگر است که به شما امکان می‌دهد انیمیشن‌های روان و بهینه را در وب ایجاد کنید. این API جایگزینی برای روش‌های سنتی مانند setInterval و setTimeout است که می‌توانند باعث ایجاد انیمیشن‌های ناهموار و ناکارآمد شوند.
نحوه عملکرد rAF:
rAF با هماهنگ‌سازی با نرخ تازه‌سازی صفحه‌نمایش کار می‌کند تا انیمیشن‌ها را در فواصل زمانی مناسب رندر کند. این امر باعث می‌شود انیمیشن‌ها روان‌تر و بدون لرزش یا پرش به نظر برسند. علاوه بر این، rAF فقط زمانی که مرورگر برای رندر فریم بعدی آماده است، فراخوانی می‌شود. این امر باعث می‌شود از مصرف غیرضروری منابع CPU و GPU جلوگیری شود و انیمیشن‌ها به طور کارآمدتر اجرا شوند.
#️⃣#tip
🆔@IR_javascript
rAF چیست؟
requestAnimationFrame یک API مرورگر است که به شما امکان می‌دهد انیمیشن‌های روان و بهینه را در وب ایجاد کنید. این API جایگزینی برای روش‌های سنتی مانند setInterval و setTimeout است که می‌توانند باعث ایجاد انیمیشن‌های ناهموار و ناکارآمد شوند.
نحوه عملکرد rAF:
rAF با هماهنگ‌سازی با نرخ تازه‌سازی صفحه‌نمایش کار می‌کند تا انیمیشن‌ها را در فواصل زمانی مناسب رندر کند. این امر باعث می‌شود انیمیشن‌ها روان‌تر و بدون لرزش یا پرش به نظر برسند. علاوه بر این، rAF فقط زمانی که مرورگر برای رندر فریم بعدی آماده است، فراخوانی می‌شود. این امر باعث می‌شود از مصرف غیرضروری منابع CPU و GPU جلوگیری شود و انیمیشن‌ها به طور کارآمدتر اجرا شوند.
#️⃣#tip
🆔@IR_javascript
🔥2