تگ <mark> برای برجسته‌سازی متن
از تگ <mark> در HTML برای برجسته‌سازی و جلب توجه خواننده به بخشی از متن استفاده می‌شود. این تگ باعث می‌شود متن داخل آن به صورت بصری با پس‌زمینه یا رنگ متفاوتی نمایش داده شود (معمولاً زرد روی زمینه روشن).
موارد استفاده از تگ <mark>:
برجسته‌سازی متن مرتبط بر اساس فعالیت کاربر: برای مثال، هنگام جستجو در یک وب‌سایت، می‌توانید از این تگ برای برجسته‌سازی کلمات کلیدی موجود در متن نتایج استفاده کنید و به کاربر کمک کنید تا به سرعت بخش‌های مرتبط را پیدا کند.
برجسته‌سازی نقل قول‌ها: می‌توانید از تگ <mark> برای برجسته‌سازی بخشی از متنی که از منبع دیگری نقل شده است، استفاده کنید. این کار به خواننده کمک می‌کند تا به راحتی بین متن اصلی و نقل قول تمایز قائل شود.
#️⃣#tip
🆔@IR_javascript
از تگ <mark> در HTML برای برجسته‌سازی و جلب توجه خواننده به بخشی از متن استفاده می‌شود. این تگ باعث می‌شود متن داخل آن به صورت بصری با پس‌زمینه یا رنگ متفاوتی نمایش داده شود (معمولاً زرد روی زمینه روشن).
موارد استفاده از تگ <mark>:
برجسته‌سازی متن مرتبط بر اساس فعالیت کاربر: برای مثال، هنگام جستجو در یک وب‌سایت، می‌توانید از این تگ برای برجسته‌سازی کلمات کلیدی موجود در متن نتایج استفاده کنید و به کاربر کمک کنید تا به سرعت بخش‌های مرتبط را پیدا کند.
برجسته‌سازی نقل قول‌ها: می‌توانید از تگ <mark> برای برجسته‌سازی بخشی از متنی که از منبع دیگری نقل شده است، استفاده کنید. این کار به خواننده کمک می‌کند تا به راحتی بین متن اصلی و نقل قول تمایز قائل شود.
#️⃣#tip
🆔@IR_javascript
مجموعه ای از 5 قطعه کد جالب و مفید CSS که می تواند برخی از مشکلات رایج را حل کند
#️⃣#tip #css
🆔@IR_javascript
#️⃣#tip #css
🆔@IR_javascript
👍2
مفهوم "بستن" (Closure) در JavaScript
در JavaScript، بستن (Closure) ترکیبی از یک تابع و محیط واژه‌شناختی (Lexical Environment) است که در آن تابع تعریف شده است. بستن به تابع اجازه می‌دهد تا به متغیرهای موجود در محیط واژه‌شناختی بیرونی خود، حتی پس از حذف شدن آن محیط، دسترسی داشته باشد.
به عبارت دیگر، یک تابع می‌تواند مقادیر متغیرهایی را که در هنگام تعریف آن وجود داشته‌اند، به خاطر بسپارد و حتی بعد از اینکه از آن تابع خارج شدید، به آنها دسترسی داشته باشد.
در این مثال، innerFunction به outerVariable که در outerFunction تعریف شده است، دسترسی دارد. حتی زمانی که outerFunction اجرا می‌شود و از دامنه آن خارج می‌شویم، innerFunction همچنان می‌تواند به outerVariable به دلیل بستن دسترسی داشته باشد.
#️⃣#tip
🆔@IR_javascript
در JavaScript، بستن (Closure) ترکیبی از یک تابع و محیط واژه‌شناختی (Lexical Environment) است که در آن تابع تعریف شده است. بستن به تابع اجازه می‌دهد تا به متغیرهای موجود در محیط واژه‌شناختی بیرونی خود، حتی پس از حذف شدن آن محیط، دسترسی داشته باشد.
به عبارت دیگر، یک تابع می‌تواند مقادیر متغیرهایی را که در هنگام تعریف آن وجود داشته‌اند، به خاطر بسپارد و حتی بعد از اینکه از آن تابع خارج شدید، به آنها دسترسی داشته باشد.
function outerFunction() {
var outerVariable = 'Hello';
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
var closure = outerFunction();
closure(); // Output: Hello
در این مثال، innerFunction به outerVariable که در outerFunction تعریف شده است، دسترسی دارد. حتی زمانی که outerFunction اجرا می‌شود و از دامنه آن خارج می‌شویم، innerFunction همچنان می‌تواند به outerVariable به دلیل بستن دسترسی داشته باشد.
#️⃣#tip
🆔@IR_javascript
👍1
هدف از دستور @property
دستور @property به توسعه‌دهندگان این امکان را می‌دهد که به صورت صریح، «خصوصیات سفارشی CSS» را تعریف کنند. این کار مزایای متعددی به همراه دارد:
بررسی و محدود کردن نوع داده: ما می‌توانیم نوع داده‌ی یک خصوصیت سفارشی را مشخص کنیم، مانند <number> (عدد)، <color> (رنگ)، یا <length> (طول). این کار به جلوگیری از خطا کمک می‌کند و اطمینان می‌دهد که خصوصیات سفارشی به درستی استفاده می‌شوند.
تنظیم مقادیر پیش‌فرض: می‌توانیم با استفاده از خاصیت initial-value، یک مقدار پیش‌فرض برای خصوصیت سفارشی که به این روش تعریف شده است، تعیین کنیم. این کار باعث می‌شود که اگر در قسمت‌های دیگر استایل‌شیت مقدار دیگری برای این خصوصیت تنظیم نشده باشد، یک مقدار پیش‌فرض داشته باشیم.
تعریف رفتار ارث‌بری: می‌توانیم انتخاب کنیم که یک خصوصیت سفارشی، قابلیت ارث‌بری مقادیر از عناصر والد خود را داشته باشد یا خیر.
در جاوااسکریپت، می‌توانیم متغیرهای CSS @property را کنترل کنیم:
دستور @property به توسعه‌دهندگان این امکان را می‌دهد که به صورت صریح، «خصوصیات سفارشی CSS» را تعریف کنند. این کار مزایای متعددی به همراه دارد:
بررسی و محدود کردن نوع داده: ما می‌توانیم نوع داده‌ی یک خصوصیت سفارشی را مشخص کنیم، مانند <number> (عدد)، <color> (رنگ)، یا <length> (طول). این کار به جلوگیری از خطا کمک می‌کند و اطمینان می‌دهد که خصوصیات سفارشی به درستی استفاده می‌شوند.
تنظیم مقادیر پیش‌فرض: می‌توانیم با استفاده از خاصیت initial-value، یک مقدار پیش‌فرض برای خصوصیت سفارشی که به این روش تعریف شده است، تعیین کنیم. این کار باعث می‌شود که اگر در قسمت‌های دیگر استایل‌شیت مقدار دیگری برای این خصوصیت تنظیم نشده باشد، یک مقدار پیش‌فرض داشته باشیم.
تعریف رفتار ارث‌بری: می‌توانیم انتخاب کنیم که یک خصوصیت سفارشی، قابلیت ارث‌بری مقادیر از عناصر والد خود را داشته باشد یا خیر.
html {
--stop: 50%;
}@property --stop {
syntax: "<percentage>";
initial-value: 50%;
inherits: false;
}در جاوااسکریپت، می‌توانیم متغیرهای CSS @property را کنترل کنیم:
//ثبت مقدار متغیر
window.CSS.registerProperty({
name: '--foo',
syntax: '<color>',
initialValue: '#c0ffee',
inherits: true,
});
//تنظیم مقدار متغیر
document.documentElement.style.setProperty("--foo", "pink");
document.querySelector(".element").style.setProperty("--foo", "red");
//دریافت مقدار متغیر
document.querySelector(".element").style.getPropertyValue("--foo");
👍1
انتخاب دقیق عناصر با استفاده از ساختار 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