This media is not supported in your browser
VIEW IN TELEGRAM
تشخیص زمانی که کاربر بین تبهای مرورگر جابهجا میشود و تغییر favicon
این ترفند را میتوان با استفاده از Page Visibility API پیادهسازی کرد.
Page Visibility API یک رابط برنامهنویسی مرورگر است که قابل مشاهده بودن صفحه را بررسی میکند. این API کمک میکند تا تشخیص دهیم آیا صفحهی جاری پنهان یا کوچک شده است و از این طریق امکان کنترل رفتار صفحه و مدیریت استفاده از منابع فراهم میشود.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
این ترفند را میتوان با استفاده از Page Visibility API پیادهسازی کرد.
Page Visibility API یک رابط برنامهنویسی مرورگر است که قابل مشاهده بودن صفحه را بررسی میکند. این API کمک میکند تا تشخیص دهیم آیا صفحهی جاری پنهان یا کوچک شده است و از این طریق امکان کنترل رفتار صفحه و مدیریت استفاده از منابع فراهم میشود.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
نود و نه درصد توسعهدهندگان از این ترفند در Chrome DevTools خبر ندارند 🤯
میتوانید تم تاریک را روی هر سایتی فعال کنید، حتی اگر آن سایت خود تم تاریک نداشته باشد. برای این کار، DevTools را باز کرده، روی آیکون قلممو کلیک کنید و گزینهی Automatic Dark Mode را انتخاب نمایید.
این روش برای زمانی که در حال طراحی تم تاریک برای وبسایت خود هستید ایدهآل است — شما فوراً پیشنمایشی از رابط کاربری تقریباً نود درصدی دریافت میکنید.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
میتوانید تم تاریک را روی هر سایتی فعال کنید، حتی اگر آن سایت خود تم تاریک نداشته باشد. برای این کار، DevTools را باز کرده، روی آیکون قلممو کلیک کنید و گزینهی Automatic Dark Mode را انتخاب نمایید.
این روش برای زمانی که در حال طراحی تم تاریک برای وبسایت خود هستید ایدهآل است — شما فوراً پیشنمایشی از رابط کاربری تقریباً نود درصدی دریافت میکنید.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
❤2
This media is not supported in your browser
VIEW IN TELEGRAM
نکتهای درباره Chrome DevTools: بررسی سبکهای placeholder
بهطور پیشفرض، Chrome DevTools سبکهای ::placeholder را هنگام بازرسی عناصر نمایش نمیدهد.
میتوان با فعال کردن تنظیم Show user agent shadow DOM، shadow DOM مرورگر را که برای عناصر داخلی مختلف مانند <input>، <progress>، <video> و غیره ایجاد میشود، مشاهده کرد.
با بررسی این عناصر shadow DOM که توسط user agent ایجاد شدهاند، میتوان سبکهای placeholder، نوار لغزندهی ورودیهای نوع range و موارد مشابه را مشاهده و ویرایش کرد.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
بهطور پیشفرض، Chrome DevTools سبکهای ::placeholder را هنگام بازرسی عناصر نمایش نمیدهد.
میتوان با فعال کردن تنظیم Show user agent shadow DOM، shadow DOM مرورگر را که برای عناصر داخلی مختلف مانند <input>، <progress>، <video> و غیره ایجاد میشود، مشاهده کرد.
با بررسی این عناصر shadow DOM که توسط user agent ایجاد شدهاند، میتوان سبکهای placeholder، نوار لغزندهی ورودیهای نوع range و موارد مشابه را مشاهده و ویرایش کرد.
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
پژوهشگران ۳۷ هزار رزومهٔ جعلی از فارغالتحصیلان را ارسال کردند و بررسی کردند که چه کسانی بیشتر به مصاحبه دعوت میشوند [+لینک].
در این رزومهها همهچیز بهصورت تصادفی تغییر داده شده بود: رشتهٔ تحصیلی، دورههای کارآموزی، تحصیل در خارج از کشور و مهارتهای کامپیوتری. نتایج جالبی که بهطور غیرمنتظره جواب داد:
— کارآموزیهایی که بر توسعهٔ مهارتهای نرم (Soft Skills) تمرکز دارند؛ آن هم حتی در درخواست برای موقعیتهای شغلی تحلیلی(فقط بلد بودن کافی نیست شرکتها به این هم توجه میکنند که آیا طرف «مهارتهای انسانی» دارد یا نه) .
— تحصیل در خارج از کشور، همانطور که انتظار میرفت، شانس پیدا کردن سریع اولین شغل را افزایش میدهد.
— ترکیب برنامهنویسی + تحلیل دادهها یک امتیاز خیلی بزرگ برای دریافت تماس مجدد (دعوت به مصاحبه) ایجاد میکند. در حالی که هرکدام از این مهارتها بهتنهایی چنین اثری ندارند.
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
در این رزومهها همهچیز بهصورت تصادفی تغییر داده شده بود: رشتهٔ تحصیلی، دورههای کارآموزی، تحصیل در خارج از کشور و مهارتهای کامپیوتری. نتایج جالبی که بهطور غیرمنتظره جواب داد:
— کارآموزیهایی که بر توسعهٔ مهارتهای نرم (Soft Skills) تمرکز دارند؛ آن هم حتی در درخواست برای موقعیتهای شغلی تحلیلی(فقط بلد بودن کافی نیست شرکتها به این هم توجه میکنند که آیا طرف «مهارتهای انسانی» دارد یا نه) .
— تحصیل در خارج از کشور، همانطور که انتظار میرفت، شانس پیدا کردن سریع اولین شغل را افزایش میدهد.
— ترکیب برنامهنویسی + تحلیل دادهها یک امتیاز خیلی بزرگ برای دریافت تماس مجدد (دعوت به مصاحبه) ایجاد میکند. در حالی که هرکدام از این مهارتها بهتنهایی چنین اثری ندارند.
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
Ssrn
Unbundling the Effects of College on First-Job Search: Returns to Majors, Minors, and Extracurriculars
We analyze the initial job-market matching of new US college graduates with a largescale audit study conducted during 2016 and 2017, in which 36,880 resumes of
ترجمهٔ روان به فارسی:
فرض کنید در 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