ترجمهٔ روان به فارسی:
فرض کنید در CSS یک گرید ۵×۵ دارید. داخل این گرید عناصری با اندازههای مختلف قرار گرفتهاند، اما به موقعیتهای مشخصی ثابت نشدهاند.
در چنین حالتی، استفاده از حالت `dense` برای ویژگی `grid-auto-flow` باعث میشود خانههای خالیای که توسط عناصر قبلی ایجاد شدهاند، پر شوند. به این شکل، عناصر بعدی که اندازهشان اجازه میدهد، به این فضاهای خالی منتقل میشوند.
این قابلیت مثلاً برای گالری تصاویر بسیار مفید است؛ جایی که عناصر (تصاویر) اندازههای تصادفی و متفاوتی دارند.
نمونه کد:
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
فرض کنید در CSS یک گرید ۵×۵ دارید. داخل این گرید عناصری با اندازههای مختلف قرار گرفتهاند، اما به موقعیتهای مشخصی ثابت نشدهاند.
در چنین حالتی، استفاده از حالت `dense` برای ویژگی `grid-auto-flow` باعث میشود خانههای خالیای که توسط عناصر قبلی ایجاد شدهاند، پر شوند. به این شکل، عناصر بعدی که اندازهشان اجازه میدهد، به این فضاهای خالی منتقل میشوند.
این قابلیت مثلاً برای گالری تصاویر بسیار مفید است؛ جایی که عناصر (تصاویر) اندازههای تصادفی و متفاوتی دارند.
نمونه کد:
.grid {
grid-template-rows: repeat(5, 10rem);
grid-template-columns: repeat(5, 10rem);
}
.item-2 {
grid-row-end: span 2;
grid-column-end: span 2;
}#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
👏1
نکتهٔ CSS: سلکتور اتریبیوت بدون حساسیت به حروف بزرگ و کوچک
در CSS میتوانیم با اضافه کردن حرف i به سلکتور اتریبیوت، کاری کنیم که انتخاب عناصر نسبت به حروف بزرگ و کوچک حساس نباشد.
یعنی فرقی نمیکند مقدار اتریبیوت با حروف بزرگ نوشته شده باشد یا کوچک؛ در هر صورت انتخاب میشود.
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
در CSS میتوانیم با اضافه کردن حرف i به سلکتور اتریبیوت، کاری کنیم که انتخاب عناصر نسبت به حروف بزرگ و کوچک حساس نباشد.
یعنی فرقی نمیکند مقدار اتریبیوت با حروف بزرگ نوشته شده باشد یا کوچک؛ در هر صورت انتخاب میشود.
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
👍3
آیا میدانستید دکمهٔ ارسال فرم میتواند خارج از خود فرم قرار بگیرد؟
در بیشتر مواقع، دکمهٔ ارسال را داخل تگ <form> قرار میدهیم و این کار کاملاً درست است.
اما گاهی بهدلیل محدودیتهای چیدمان (layout) یا دلایل دیگر، منطقیتر است که دکمهٔ ارسال بیرون از تگ <form> قرار داده شود.
در این حالت میتوانیم بهسادگی با استفاده از ویژگیهای form و id دکمه را به فرم موردنظر متصل کنیم.
به همین روش، در صورت نیاز میتوان سایر عناصر کنترلی مثل textarea، checkbox و موارد مشابه را هم به یک فرم خاص مرتبط کرد، حتی اگر خارج از آن فرم قرار داشته باشند.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
در بیشتر مواقع، دکمهٔ ارسال را داخل تگ <form> قرار میدهیم و این کار کاملاً درست است.
اما گاهی بهدلیل محدودیتهای چیدمان (layout) یا دلایل دیگر، منطقیتر است که دکمهٔ ارسال بیرون از تگ <form> قرار داده شود.
در این حالت میتوانیم بهسادگی با استفاده از ویژگیهای form و id دکمه را به فرم موردنظر متصل کنیم.
به همین روش، در صورت نیاز میتوان سایر عناصر کنترلی مثل textarea، checkbox و موارد مشابه را هم به یک فرم خاص مرتبط کرد، حتی اگر خارج از آن فرم قرار داشته باشند.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
👍2
این ۴ خط را به فایل `.vscode/settings.json` اضافه کنید تا تجربهٔ توسعهتان بلافاصله راحتتر و خواناتر شود.
با این تنظیمات، نام تبها در VS Code واضحتر نمایش داده میشود (مثلاً مشخص میشود هر
نتیجه:
وقتی چندین فایل
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
با این تنظیمات، نام تبها در VS Code واضحتر نمایش داده میشود (مثلاً مشخص میشود هر
page یا layout مربوط به کدام پوشه است):{
"workbench.editor.customLabels.patterns": {
"**/app/**/{page,layout,index}.{ts,tsx}": "(${dirname})/${filename}.${extname}",
"**/index.{ts,tsx}": "${dirname}/index.${extname}"
}
}نتیجه:
وقتی چندین فایل
page.tsx یا layout.tsx باز دارید، دیگر همه شبیه هم دیده نمیشوند و سریعتر متوجه میشوید هر فایل به کدام مسیر یا بخش پروژه تعلق دارد.#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
غولِ دوستداشتنی ما: TypeScript به محبوبترین زبان برنامهنویسی در GitHub تبدیل شد 🥳
و اگر JavaScript و TypeScript را با هم حساب کنیم، اختلاف با بقیه زبانها واقعاً چشمگیر میشود.
گزارش کامل GitHub برای سال ۲۰۲۵:
https://github.blog/news-insights/octoverse/octoverse-a-new-developer-joins-github-every-second-as-ai-leads-typescript-to-1/
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
و اگر JavaScript و TypeScript را با هم حساب کنیم، اختلاف با بقیه زبانها واقعاً چشمگیر میشود.
گزارش کامل GitHub برای سال ۲۰۲۵:
https://github.blog/news-insights/octoverse/octoverse-a-new-developer-joins-github-every-second-as-ai-leads-typescript-to-1/
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript