بر اساس نتایج StateOfReact 2024، Vite از Webpack پیشی گرفته و در دنیای توسعه‌دهندگان React محبوب‌تر شده است، به‌طوری که رهبران این حوزه اکنون پیشنهاد می‌کنند که از Vite استفاده شود.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
👍2
ویژگی CSS
مثال‌ها:
ویژگی‌های مهم این روش:
- ایجاد عناصر واکنش‌گرا بدون استفاده از رسانه‌پرس‌ها (media queries).
- استفاده از واحدهای مختلف اندازه‌گیری برای هر مقدار.
- قابل استفاده برای هر ویژگی CSS که از مقادیر عددی پشتیبانی می‌کند.
این ویژگی به شما این امکان را می‌دهد که تنظیمات اندازه‌گیری دقیق‌تری داشته باشید که به طور خودکار با تغییر اندازه صفحه سازگار می‌شوند، در حالی که همچنان محدوده‌های مشخص‌شده را حفظ می‌کنند.
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
clamp() به شما امکان می‌دهد که عناصر واکنش‌گرا (adaptive) ایجاد کنید که بسته به اندازه صفحه تغییر می‌کنند، اما در عین حال از مرزهای تعیین‌شده خارج نمی‌شوند.مثال‌ها:
h1 {
font-size: clamp(24px, 4vw, 48px);
}
.container {
width: clamp(300px, 50%, 900px);
}
.element {
padding: clamp(10px, 2vw, 1.5rem);
}ویژگی‌های مهم این روش:
- ایجاد عناصر واکنش‌گرا بدون استفاده از رسانه‌پرس‌ها (media queries).
- استفاده از واحدهای مختلف اندازه‌گیری برای هر مقدار.
- قابل استفاده برای هر ویژگی CSS که از مقادیر عددی پشتیبانی می‌کند.
این ویژگی به شما این امکان را می‌دهد که تنظیمات اندازه‌گیری دقیق‌تری داشته باشید که به طور خودکار با تغییر اندازه صفحه سازگار می‌شوند، در حالی که همچنان محدوده‌های مشخص‌شده را حفظ می‌کنند.
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
💚 حلول ماه رمضان
🔻خوشا آنان که در راه خدایند
🔻خرما نتوان خورد ازين خار که کشتيم ______ ديبا نتوان بافت ازين پشم که رشتيم ...
🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
🔻خوشا آنان که در راه خدایند
🔻خرما نتوان خورد ازين خار که کشتيم ______ ديبا نتوان بافت ازين پشم که رشتيم ...
🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
❤16👎5
تبدیل از snake_case به camelCase 🤨
اخیراً مسئله‌ای پیش آمد که باید یک رشته را از حالت snake_case به camelCase تبدیل می‌کردم.
در ابتدا فکر کردم باید وقت زیادی را صرف درک جزئیات مختلف کنم، اما بعد از کمی تفکر، راه‌حل بسیار ساده‌تر از آنچه که انتظار داشتم شد. 🙂
🤔 تحلیل راه‌حل:
متد
در هر بار تطابق با عبارت منظم، این تابع فراخوانی می‌شود و آرگومان‌های زیر را دریافت می‌کند:
۱️⃣ آرگومان اول: این مقدار، کل رشته‌ای است که پیدا شده است.
در مورد ما، این رشته ترکیب نماد زیرخط و حرف بعدی است (برای مثال، "_w" در رشته "hello_world"). ما این آرگومان را با نام
۲️⃣ آرگومان دوم: مقدار گروه اول که در عبارت منظم مشخص شده است (یعنی حرف کوچک بعد از زیرخط، مانند "w"). این مقدار را
۳️⃣ آرگومان سوم: شاخصی که نشان‌دهنده موقعیت شروع تطابق است. در این راه‌حل از این آرگومان استفاده نمی‌شود.
۴️⃣ آرگومان چهارم: رشته اصلی‌ای که متد
🤔 این چگونه کار می‌کند:
✅ دریافت حرف:
هنگام یافتن تطابق (برای مثال، "_w")، تابع بازگشتی حرف "w" را از گروه استخراج شده دریافت می‌کند.
✅ تبدیل حرف:
با استفاده از متد `toUpperCase()`، حرف "w" به "W" تبدیل می‌شود.
✅ جایگزینی:
تابع "W" را باز می‌گرداند و در فرآیند جایگزینی، نماد زیرخط حذف می‌شود زیرا در رشته بازگشتی نخواهد بود.
مثال عملکرد:
"hello_world" ➡️ "helloWorld"
به این ترتیب، استفاده از تابع بازگشتی به ما این امکان را می‌دهد که بخش‌های پیدا شده از رشته را به صورت داینامیک به شکل دلخواه تبدیل کنیم. 😉
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
اخیراً مسئله‌ای پیش آمد که باید یک رشته را از حالت snake_case به camelCase تبدیل می‌کردم.
در ابتدا فکر کردم باید وقت زیادی را صرف درک جزئیات مختلف کنم، اما بعد از کمی تفکر، راه‌حل بسیار ساده‌تر از آنچه که انتظار داشتم شد. 🙂
function toCamelCase(str) {
return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
}🤔 تحلیل راه‌حل:
متد
replace در جاوااسکریپت نه تنها به ما این امکان را می‌دهد که بخش‌های پیدا شده از رشته را با مقدار ثابت جایگزین کنیم، بلکه می‌توانیم با استفاده از یک تابع بازگشتی، پردازش داینامیک انجام دهیم.در هر بار تطابق با عبارت منظم، این تابع فراخوانی می‌شود و آرگومان‌های زیر را دریافت می‌کند:
۱️⃣ آرگومان اول: این مقدار، کل رشته‌ای است که پیدا شده است.
در مورد ما، این رشته ترکیب نماد زیرخط و حرف بعدی است (برای مثال، "_w" در رشته "hello_world"). ما این آرگومان را با نام
_ مشخص می‌کنیم زیرا به آن نیازی نداریم.۲️⃣ آرگومان دوم: مقدار گروه اول که در عبارت منظم مشخص شده است (یعنی حرف کوچک بعد از زیرخط، مانند "w"). این مقدار را
letter می‌نامیم.۳️⃣ آرگومان سوم: شاخصی که نشان‌دهنده موقعیت شروع تطابق است. در این راه‌حل از این آرگومان استفاده نمی‌شود.
۴️⃣ آرگومان چهارم: رشته اصلی‌ای که متد
replace روی آن فراخوانی شده است. این هم در اینجا استفاده نمی‌شود.🤔 این چگونه کار می‌کند:
✅ دریافت حرف:
هنگام یافتن تطابق (برای مثال، "_w")، تابع بازگشتی حرف "w" را از گروه استخراج شده دریافت می‌کند.
✅ تبدیل حرف:
با استفاده از متد `toUpperCase()`، حرف "w" به "W" تبدیل می‌شود.
✅ جایگزینی:
تابع "W" را باز می‌گرداند و در فرآیند جایگزینی، نماد زیرخط حذف می‌شود زیرا در رشته بازگشتی نخواهد بود.
مثال عملکرد:
"hello_world" ➡️ "helloWorld"
به این ترتیب، استفاده از تابع بازگشتی به ما این امکان را می‌دهد که بخش‌های پیدا شده از رشته را به صورت داینامیک به شکل دلخواه تبدیل کنیم. 😉
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
👍5
در Chrome Canary هم‌اکنون قابلیت‌های جدیدی برای آزمایش توابع سفارشی CSS در حال تست هستند.
یک تابع سفارشی را می‌توان به‌عنوان یک ویژگی سفارشی پیشرفته در نظر گرفت که به‌جای جایگزینی با یک مقدار ثابت، مقدار جایگزین را بر اساس پارامترهای تابع و مقادیر ویژگی‌های سفارشی در زمان فراخوانی محاسبه می‌کند.
جالب است که می‌توان داخل بدنه این توابع، مثلا از
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
@function --negate(--value) {
result: calc(-1 * var(--value));
}
:root {
padding: --negate(1px); /* = -1px */
}یک تابع سفارشی را می‌توان به‌عنوان یک ویژگی سفارشی پیشرفته در نظر گرفت که به‌جای جایگزینی با یک مقدار ثابت، مقدار جایگزین را بر اساس پارامترهای تابع و مقادیر ویژگی‌های سفارشی در زمان فراخوانی محاسبه می‌کند.
جالب است که می‌توان داخل بدنه این توابع، مثلا از
@media نیز استفاده کرد.#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
ویدیو دوبله شده در مورد برنامه ریزی به روش بولت ژورنال [+لینک]
بولت ژورنال، نام یکی از بهترین روش‌ها و سیستم‌های برنامه‌ریزی در دنیا است که توسط رایدر کارول ابداع شده است. این روش آنقدر عالی بود که به سرعت در تمامی دنیا فراگیر شد. علاوه بر آن، این روش بر خلاف سایر روش‌های برنامه‌ریزی، بسیار ساده است و شما برای آغاز آن فقط به یک خودکار و دفتر نیاز دارید؛ اما در عین سادگی، با یادگیری روش بولت ژورنال، خواهید توانست که برای اهداف و چشم‌انداز خود برنامه‌ریزی جامع و کاملی داشته باشید، بازدهی خود را افزایش دهید و استرس از دست دادن کاری را نداشته باشید.
🔗https://aparat.com/v/ixc1845
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript
بولت ژورنال، نام یکی از بهترین روش‌ها و سیستم‌های برنامه‌ریزی در دنیا است که توسط رایدر کارول ابداع شده است. این روش آنقدر عالی بود که به سرعت در تمامی دنیا فراگیر شد. علاوه بر آن، این روش بر خلاف سایر روش‌های برنامه‌ریزی، بسیار ساده است و شما برای آغاز آن فقط به یک خودکار و دفتر نیاز دارید؛ اما در عین سادگی، با یادگیری روش بولت ژورنال، خواهید توانست که برای اهداف و چشم‌انداز خود برنامه‌ریزی جامع و کاملی داشته باشید، بازدهی خود را افزایش دهید و استرس از دست دادن کاری را نداشته باشید.
🔗https://aparat.com/v/ixc1845
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript
jsbenchmark.com
یک سرویس بسیار کاربردی برای سنجش عملکرد بخش‌های کوچک کد است.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
یک سرویس بسیار کاربردی برای سنجش عملکرد بخش‌های کوچک کد است.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
Media is too big
VIEW IN TELEGRAM
حالت بخار (Vapor Mode) در Vue.js یک استراتژی کامپایل جایگزین است که برای بهبود عملکرد برنامه‌های Vue.js طراحی شده است. این حالت به جای استفاده از Virtual DOM (VDOM)، کامپوننت‌ها را مستقیماً به HTML تبدیل می‌کند
vapor mode در vue 3.6 اضافه خواهد شد
#️⃣#tip #vue #dub
👥@IR_javascript_group
🆔@IR_javascript
vapor mode در vue 3.6 اضافه خواهد شد
#️⃣#tip #vue #dub
👥@IR_javascript_group
🆔@IR_javascript
🔥2🤯1
**jscanify** یک اسکنر اسناد موبایل رایگان و متن‌باز است که کاملاً با جاوااسکریپت پیاده‌سازی شده و از OpenCV.js قدرت می‌گیرد. این ابزار از Node.js، React، Angular و Vue پشتیبانی می‌کند.
### ویژگی‌ها:
✅ تشخیص و برجسته‌سازی اسناد
✅ اسکن اسناد با اصلاح اعوجاج
✅ امکان خروجی گرفتن به فرمت PDF
🔗https://colonelparrot.github.io/jscanify/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
### ویژگی‌ها:
✅ تشخیص و برجسته‌سازی اسناد
✅ اسکن اسناد با اصلاح اعوجاج
✅ امکان خروجی گرفتن به فرمت PDF
🔗https://colonelparrot.github.io/jscanify/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
👍2👏1
زمانی که شفافیت رنگ یک دردسر می‌شود
آیا تا به حال سعی کرده‌اید رنگی را در CSS شفاف کنید؟ به نظر ساده می‌رسد، اما اگر طراح فقط یک کد HEX بدون شفافیت به شما داده باشد، ماجرا به یک چالش تبدیل می‌شود...
- روش اول: تبدیل دستی HEX به RGBA. برای این کار، یک مبدل باز کنید، مثلاً کد
- روش دوم: استفاده از HEX با کانال آلفا (
- روش سوم: کاملاً شفافیت را فراموش کنید و تظاهر کنید که همه‌چیز از ابتدا همین‌طور بوده است!
اما حالا تابع color-mix() در CSS همه چیز را آسان کرده است:
کاملاً مشخص است: پنجاه درصد رنگ، پنجاه درصد شفافیت – و تمام!
### color-mix() چیست؟
این یک تابع در CSS است که امکان ترکیب دو رنگ را با نسبت‌های مشخص در یک مدل رنگی معین فراهم می‌کند.
و voilà! تابع خودش رنگ را می‌گیرد، آن را با شفافیت ترکیب می‌کند و نتیجه دلخواه را ارائه می‌دهد—بدون نیاز به مبدل‌ها، بدون حفظ کردن مقادیر عجیب HEX**، و بدون دردسر.
طبق داده‌های **Can I Use**، این ویژگی **نود و یک و هفتاد و شش صدم درصد پشتیبانی دارد.
نکته: اگر از SASS/SCSS استفاده می‌کنید، کار را می‌توان حتی راحت‌تر کرد:
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
آیا تا به حال سعی کرده‌اید رنگی را در CSS شفاف کنید؟ به نظر ساده می‌رسد، اما اگر طراح فقط یک کد HEX بدون شفافیت به شما داده باشد، ماجرا به یک چالش تبدیل می‌شود...
- روش اول: تبدیل دستی HEX به RGBA. برای این کار، یک مبدل باز کنید، مثلاً کد
#003366 را وارد کنید، مقدار ۰.۵ را به کانال آلفا اضافه کنید و در نهایت نتیجه را کپی کنید: rgba(26, 135, 69, 0.5);
- روش دوم: استفاده از HEX با کانال آلفا (
#00336680). اما به خاطر سپردن اینکه دو رقم آخر چه میزان شفافیت را نشان می‌دهند، خود یک چالش جداگانه است! - روش سوم: کاملاً شفافیت را فراموش کنید و تظاهر کنید که همه‌چیز از ابتدا همین‌طور بوده است!
اما حالا تابع color-mix() در CSS همه چیز را آسان کرده است:
color: color-mix(in srgb, #003366 50%, transparent);
کاملاً مشخص است: پنجاه درصد رنگ، پنجاه درصد شفافیت – و تمام!
### color-mix() چیست؟
این یک تابع در CSS است که امکان ترکیب دو رنگ را با نسبت‌های مشخص در یک مدل رنگی معین فراهم می‌کند.
و voilà! تابع خودش رنگ را می‌گیرد، آن را با شفافیت ترکیب می‌کند و نتیجه دلخواه را ارائه می‌دهد—بدون نیاز به مبدل‌ها، بدون حفظ کردن مقادیر عجیب HEX**، و بدون دردسر.
طبق داده‌های **Can I Use**، این ویژگی **نود و یک و هفتاد و شش صدم درصد پشتیبانی دارد.
نکته: اگر از SASS/SCSS استفاده می‌کنید، کار را می‌توان حتی راحت‌تر کرد:
color: rgba(#003366, 0.5);
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript
❤1
### پشتیبانی رسمی ESLint از بررسی کدهای CSS
ESLint حالا از CSS نیز پشتیبانی می‌کند و گامی دیگر به سمت تبدیل شدن به یک پلتفرم همه‌منظوره برای بررسی کیفیت کدهای منبع برداشته است.
#### نحوه فعال‌سازی
برای بررسی CSS در ESLint، می‌توانید پلاگین رسمی @eslint/css را نصب کرده و در پیکربندی خود اضافه کنید:
#### قوانین اصلی
این پلاگین شامل قوانین مختلفی برای بهبود کیفیت کدهای CSS است، مانند:
- جلوگیری از وارد کردن تکراری فایل‌های CSS
- جلوگیری از بلوک‌های خالی
- جلوگیری از استفاده از دستورات نامعتبر
- الزام به استفاده از ویژگی‌های استاندارد و ضروری
#### قابلیت‌های پیشرفته
- تحلیل خطاها با خطایابی منعطف: در حالت عادی، ESLint تمام خطاهای نحوی CSS را گزارش می‌کند، اما می‌توان آن را به گونه‌ای تنظیم کرد که مانند مرورگرها، برخی خطاهای کوچک را نادیده بگیرد.
- پشتیبانی از سینتکس سفارشی: امکان تعریف دستورات و ویژگی‌های سفارشی برای پروژه‌های خاص، مانند Tailwind CSS**، وجود دارد.
#### نتیجه‌گیری
افزودن پشتیبانی از **CSS به ESLint باعث می‌شود که توسعه‌دهندگان بتوانند کیفیت کدهای خود را در تمام بخش‌های پروژه، از جاوا اسکریپت گرفته تا استایل‌ها، یکپارچه حفظ کنند. این قابلیت جدید، با ارائه قوانین دقیق و پشتیبانی از سفارشی‌سازی، نوشتن CSS تمیز و بهینه را آسان‌تر می‌کند.
ESLint یک پروژه متن‌باز است که توسط داوطلبان مدیریت می‌شود. در صورت استفاده مداوم از آن، حمایت از این پروژه می‌تواند به بهبود و توسعه بیشتر آن کمک کند.
🔗https://eslint.org/blog/2025/02/eslint-css-support/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
ESLint حالا از CSS نیز پشتیبانی می‌کند و گامی دیگر به سمت تبدیل شدن به یک پلتفرم همه‌منظوره برای بررسی کیفیت کدهای منبع برداشته است.
#### نحوه فعال‌سازی
برای بررسی CSS در ESLint، می‌توانید پلاگین رسمی @eslint/css را نصب کرده و در پیکربندی خود اضافه کنید:
npm install @eslint/css -D
import css from "@eslint/css";
export default [
{
files: ["**/*.css"],
plugins: { css },
language: "css/css",
rules: {
"css/no-duplicate-imports": "error",
},
},
];
#### قوانین اصلی
این پلاگین شامل قوانین مختلفی برای بهبود کیفیت کدهای CSS است، مانند:
- جلوگیری از وارد کردن تکراری فایل‌های CSS
- جلوگیری از بلوک‌های خالی
- جلوگیری از استفاده از دستورات نامعتبر
- الزام به استفاده از ویژگی‌های استاندارد و ضروری
#### قابلیت‌های پیشرفته
- تحلیل خطاها با خطایابی منعطف: در حالت عادی، ESLint تمام خطاهای نحوی CSS را گزارش می‌کند، اما می‌توان آن را به گونه‌ای تنظیم کرد که مانند مرورگرها، برخی خطاهای کوچک را نادیده بگیرد.
- پشتیبانی از سینتکس سفارشی: امکان تعریف دستورات و ویژگی‌های سفارشی برای پروژه‌های خاص، مانند Tailwind CSS**، وجود دارد.
#### نتیجه‌گیری
افزودن پشتیبانی از **CSS به ESLint باعث می‌شود که توسعه‌دهندگان بتوانند کیفیت کدهای خود را در تمام بخش‌های پروژه، از جاوا اسکریپت گرفته تا استایل‌ها، یکپارچه حفظ کنند. این قابلیت جدید، با ارائه قوانین دقیق و پشتیبانی از سفارشی‌سازی، نوشتن CSS تمیز و بهینه را آسان‌تر می‌کند.
ESLint یک پروژه متن‌باز است که توسط داوطلبان مدیریت می‌شود. در صورت استفاده مداوم از آن، حمایت از این پروژه می‌تواند به بهبود و توسعه بیشتر آن کمک کند.
🔗https://eslint.org/blog/2025/02/eslint-css-support/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
eslint.org
ESLint now officially supports linting of CSS - ESLint - Pluggable JavaScript Linter
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
👍2
upfetch: یک ابزار پیشرفته برای ساخت کلاینت fetch
یک کتابخانه TypeScript برای بهبود fetch با قابلیت‌های اعتبارسنجی طرحواره (Schema Validation)، تجزیه خودکار پاسخ‌ها و ایمنی نوعی (Type-Safety)، در حالی که همچنان از همان API آشنای fetch استفاده می‌کند.
🔗https://github.com/L-Blondy/up-fetch
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
یک کتابخانه TypeScript برای بهبود fetch با قابلیت‌های اعتبارسنجی طرحواره (Schema Validation)، تجزیه خودکار پاسخ‌ها و ایمنی نوعی (Type-Safety)، در حالی که همچنان از همان API آشنای fetch استفاده می‌کند.
🔗https://github.com/L-Blondy/up-fetch
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
❤3👍1
بهینه‌سازی قالب‌بندی تاریخ:
date.toLocaleString() یک تابع نسبتاً کند است.
new Intl.DateTimeFormat() ده برابر سریع‌تر عمل می‌کند.
استفاده از قالب‌بندی سفارشی می‌تواند سرعت را تقریباً یک مرتبه دیگر افزایش دهد.
هنگام استفاده از Intl، بهترین روش این است که به‌جای ایجاد مجدد این شیء در هر بار استفاده، آن را یکبار ایجاد و بازاستفاده کنید.
🔗https://jsbenchmark.com/#eyJjYXNlcyI6W3siaWQiOiJTblotMU1PaGZxSTlKNnFHUlE5UVEiLCJjb2RlIjoiRGF0ZS50b0xvY2FsZVN0cmluZygpIiwibmFtZSI6ImRhdGUudG9Mb2NhbGVTdHJpbmcoKSIsImRlcGVuZGVuY2llcyI6W119LHsiaWQiOiJZc2JrVjRGLXNSdWU0MjZyQjM4RU8iLCJjb2RlIjoibmV3IEludGwuRGF0ZVRpbWVGb3JtYXQoKSIsIm5hbWUiOiJuZXcgSW50bC5EYXRlVGltZUZvcm1hdCgpIiwiZGVwZW5kZW5jaWVzIjpbXX1dLCJjb25maWciOnsibmFtZSI6IkJhc2ljIGV4YW1wbGUiLCJwYXJhbGxlbCI6dHJ1ZSwiZ2xvYmFsVGVzdENvbmZpZyI6eyJkZXBlbmRlbmNpZXMiOltdfSwiZGF0YUNvZGUiOiJyZXR1cm4gWy4uLkFycmF5KDEwMDApLmtleXMoKV0ifX0
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
date.toLocaleString() یک تابع نسبتاً کند است.
new Intl.DateTimeFormat() ده برابر سریع‌تر عمل می‌کند.
استفاده از قالب‌بندی سفارشی می‌تواند سرعت را تقریباً یک مرتبه دیگر افزایش دهد.
هنگام استفاده از Intl، بهترین روش این است که به‌جای ایجاد مجدد این شیء در هر بار استفاده، آن را یکبار ایجاد و بازاستفاده کنید.
🔗https://jsbenchmark.com/#eyJjYXNlcyI6W3siaWQiOiJTblotMU1PaGZxSTlKNnFHUlE5UVEiLCJjb2RlIjoiRGF0ZS50b0xvY2FsZVN0cmluZygpIiwibmFtZSI6ImRhdGUudG9Mb2NhbGVTdHJpbmcoKSIsImRlcGVuZGVuY2llcyI6W119LHsiaWQiOiJZc2JrVjRGLXNSdWU0MjZyQjM4RU8iLCJjb2RlIjoibmV3IEludGwuRGF0ZVRpbWVGb3JtYXQoKSIsIm5hbWUiOiJuZXcgSW50bC5EYXRlVGltZUZvcm1hdCgpIiwiZGVwZW5kZW5jaWVzIjpbXX1dLCJjb25maWciOnsibmFtZSI6IkJhc2ljIGV4YW1wbGUiLCJwYXJhbGxlbCI6dHJ1ZSwiZ2xvYmFsVGVzdENvbmZpZyI6eyJkZXBlbmRlbmNpZXMiOltdfSwiZGF0YUNvZGUiOiJyZXR1cm4gWy4uLkFycmF5KDEwMDApLmtleXMoKV0ifX0
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
👍2
bundlejs - بررسی سریع اندازه‌ی (bundle) حجم پکیج‌های npm
🔗https://bundlejs.com/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
🔗https://bundlejs.com/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
Monolith
ابزاری برای ذخیره‌سازی کامل صفحات وب همراه با تمامی فایل‌های جاوا اسکریپت، CSS، تصاویر و سایر اجزای صفحه.
🔗https://github.com/Y2Z/monolith
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
ابزاری برای ذخیره‌سازی کامل صفحات وب همراه با تمامی فایل‌های جاوا اسکریپت، CSS، تصاویر و سایر اجزای صفحه.
🔗https://github.com/Y2Z/monolith
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
### پنج اصل کلیدی در ارتباط با مدیر
ارتباط مؤثر با مدیر تنها یک مهارت نیست، بلکه یک استراتژی مهم است که بر موفقیت پروژه، فضای تیمی و اعتبار حرفه‌ای شما تأثیر می‌گذارد. در اینجا پنج اصل را معرفی می‌کنیم که به شما کمک می‌کند گفت‌وگویی سازنده داشته باشید و خود را به‌عنوان یک متخصص ارزشمند نشان دهید.
---
### ۱. رویکرد فعال به‌جای صرفاً بیان مشکلات
به‌جای اینکه فقط درباره‌ی مشکلات گزارش دهید، راهکارهای پیشنهادی ارائه کنید. این کار نشان‌دهنده‌ی حرفه‌ای بودن و توانایی شما در پذیرش مسئولیت است.
❌ مدیر! در ماژول X یک خطا وجود دارد، چه‌کار کنیم؟
✅ در ماژول X مشکلی پیدا کردم که ممکن است بر پایداری تأثیر بگذارد. دو راهکار داریم:
- بازنگری کد (Refactoring) که زمان بیشتری می‌برد اما راه‌حل بلندمدت است.
- اصلاح متمرکز (Hotfix) که در مدت کوتاه‌تر انجام می‌شود، اما ممکن است نیاز به بررسی‌های بعدی داشته باشد.
کدام مسیر را انتخاب می‌کنیم؟
---
### ۲. وضوح و اختصار در بیان مطالب
مدیران برای وقت خود ارزش زیادی قائل‌اند**، بنابراین باید **مختصر، شفاف و بدون جزئیات اضافی صحبت کنید.
❌ بخش اصلی کار تمام شده، ولی هنوز چند جزئیات باقی مانده که باید اصلاح شوند. در مجموع، همه‌چیز کار می‌کند، اما چند نکته هست که…
✅ بخش اصلی تکمیل شد، در حال نهایی‌سازی جزئیات هستم. برای اضافه کردن X، حدود Y زمان نیاز دارم. نکته‌ی دیگری هست که باید در نظر بگیرم؟
---
### ۳. توانایی پرسیدن سؤالات درست
سؤالات هوشمندانه نه‌تنها به دریافت اطلاعات کمک می‌کند، بلکه نشان‌دهنده‌ی تفکر تحلیلی و درک عمیق شما از مسئله است.
❌ نمی‌دانم با این تسک چه‌کار کنم!
✅ آیا درست متوجه شدم که در این تسک باید داده‌های X، Y و Z را ترکیب کنیم و سپس آن‌ها را به‌صورت نمودارهایی با خطوط مشخص نمایش دهیم؟
---
### ۴. پذیرش مسئولیت و ارائه راه‌حل
همه اشتباه می‌کنند، اما تفاوت در نحوه‌ی واکنش به آن است. توجیه کردن اشتباهات باعث کاهش اعتماد می‌شود، درحالی‌که پذیرش مسئولیت و ارائه‌ی راهکار نشان‌دهنده‌ی بلوغ حرفه‌ای شماست.
❌ به دلیل حجم کاری بالا، نتوانستم این ریسک را در نظر بگیرم.
✅ ریسک‌ها را به‌درستی ارزیابی نکردم، که روی زمان‌بندی تأثیر گذاشت. برای جلوگیری از تکرار این مشکل، فرآیند برنامه‌ریزی را اصلاح کردم.
---
### ۵. ایجاد اعتماد و درک متقابل
ارتباط حرفه‌ای فقط به منطق وابسته نیست**؛ بلکه شامل **درک احساسات و شرایط نیز می‌شود.
❌ مشکل پیش‌بینی‌نشده‌ای پیش آمده، باید سریعاً کاری انجام دهیم!
✅ یک چالش غیرمنتظره ایجاد شده که ممکن است این بخش‌ها را تحت تأثیر قرار دهد. بیایید بررسی کنیم که بهترین راه‌حل چیست؟
---
### نتیجه‌گیری
ارتباط با مدیر فقط انتقال اطلاعات نیست!
بلکه ابزاری برای تأثیرگذاری بر فرآیندها، تقویت اعتماد و رشد حرفه‌ای شما است.
✨ شما چه اصولی را برای بهبود ارتباطات خود با مدیر رعایت می‌کنید؟
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
ارتباط مؤثر با مدیر تنها یک مهارت نیست، بلکه یک استراتژی مهم است که بر موفقیت پروژه، فضای تیمی و اعتبار حرفه‌ای شما تأثیر می‌گذارد. در اینجا پنج اصل را معرفی می‌کنیم که به شما کمک می‌کند گفت‌وگویی سازنده داشته باشید و خود را به‌عنوان یک متخصص ارزشمند نشان دهید.
---
### ۱. رویکرد فعال به‌جای صرفاً بیان مشکلات
به‌جای اینکه فقط درباره‌ی مشکلات گزارش دهید، راهکارهای پیشنهادی ارائه کنید. این کار نشان‌دهنده‌ی حرفه‌ای بودن و توانایی شما در پذیرش مسئولیت است.
❌ مدیر! در ماژول X یک خطا وجود دارد، چه‌کار کنیم؟
✅ در ماژول X مشکلی پیدا کردم که ممکن است بر پایداری تأثیر بگذارد. دو راهکار داریم:
- بازنگری کد (Refactoring) که زمان بیشتری می‌برد اما راه‌حل بلندمدت است.
- اصلاح متمرکز (Hotfix) که در مدت کوتاه‌تر انجام می‌شود، اما ممکن است نیاز به بررسی‌های بعدی داشته باشد.
کدام مسیر را انتخاب می‌کنیم؟
---
### ۲. وضوح و اختصار در بیان مطالب
مدیران برای وقت خود ارزش زیادی قائل‌اند**، بنابراین باید **مختصر، شفاف و بدون جزئیات اضافی صحبت کنید.
❌ بخش اصلی کار تمام شده، ولی هنوز چند جزئیات باقی مانده که باید اصلاح شوند. در مجموع، همه‌چیز کار می‌کند، اما چند نکته هست که…
✅ بخش اصلی تکمیل شد، در حال نهایی‌سازی جزئیات هستم. برای اضافه کردن X، حدود Y زمان نیاز دارم. نکته‌ی دیگری هست که باید در نظر بگیرم؟
---
### ۳. توانایی پرسیدن سؤالات درست
سؤالات هوشمندانه نه‌تنها به دریافت اطلاعات کمک می‌کند، بلکه نشان‌دهنده‌ی تفکر تحلیلی و درک عمیق شما از مسئله است.
❌ نمی‌دانم با این تسک چه‌کار کنم!
✅ آیا درست متوجه شدم که در این تسک باید داده‌های X، Y و Z را ترکیب کنیم و سپس آن‌ها را به‌صورت نمودارهایی با خطوط مشخص نمایش دهیم؟
---
### ۴. پذیرش مسئولیت و ارائه راه‌حل
همه اشتباه می‌کنند، اما تفاوت در نحوه‌ی واکنش به آن است. توجیه کردن اشتباهات باعث کاهش اعتماد می‌شود، درحالی‌که پذیرش مسئولیت و ارائه‌ی راهکار نشان‌دهنده‌ی بلوغ حرفه‌ای شماست.
❌ به دلیل حجم کاری بالا، نتوانستم این ریسک را در نظر بگیرم.
✅ ریسک‌ها را به‌درستی ارزیابی نکردم، که روی زمان‌بندی تأثیر گذاشت. برای جلوگیری از تکرار این مشکل، فرآیند برنامه‌ریزی را اصلاح کردم.
---
### ۵. ایجاد اعتماد و درک متقابل
ارتباط حرفه‌ای فقط به منطق وابسته نیست**؛ بلکه شامل **درک احساسات و شرایط نیز می‌شود.
❌ مشکل پیش‌بینی‌نشده‌ای پیش آمده، باید سریعاً کاری انجام دهیم!
✅ یک چالش غیرمنتظره ایجاد شده که ممکن است این بخش‌ها را تحت تأثیر قرار دهد. بیایید بررسی کنیم که بهترین راه‌حل چیست؟
---
### نتیجه‌گیری
ارتباط با مدیر فقط انتقال اطلاعات نیست!
بلکه ابزاری برای تأثیرگذاری بر فرآیندها، تقویت اعتماد و رشد حرفه‌ای شما است.
✨ شما چه اصولی را برای بهبود ارتباطات خود با مدیر رعایت می‌کنید؟
#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
👍2
ابزار Chrome DevTools امکان تغییر پاسخ درخواست‌ها را برای کار محلی فراهم می‌کند
گاهی اوقات در فرآیند توسعه، شرایطی پیش می‌آید که لازم است با داده‌های خاصی کار کنید، حتی اگر هنوز آماده نباشند یا تغییر کرده باشند. به‌عنوان‌مثال، ممکن است بخواهید واکنش رابط کاربری را به داده‌های مشخصی آزمایش کنید، اما نمی‌خواهید منتظر پاسخ سرور بمانید یا کد آن را به‌صورت دستی تغییر دهید.
در چنین مواردی، Chrome DevTools یک روش کاربردی برای پوشش‌دهی (Override) پاسخ‌های درخواست‌ها ارائه می‌دهد که به شما اجازه می‌دهد داده‌ها را به‌صورت محلی تغییر داده و به کار خود ادامه دهید.
مرحله اول: رفتن به تب "Network"
وارد بخش Network در DevTools شوید. در این قسمت، تمام درخواست‌های شبکه‌ای که هنگام بارگیری صفحه یا تعامل با آن اجرا می‌شوند، نمایش داده می‌شوند.
مرحله دوم: انتخاب درخواست موردنظر برای تغییر
در لیست درخواست‌ها، آن موردی را که قصد تغییر آن را دارید، پیدا کنید.
مرحله سوم: استفاده از قابلیت "Override content" (پوشش‌دهی محتوا)
برای تغییر پاسخ درخواست، باید این قابلیت را فعال کنید. دو روش برای این کار وجود دارد:
۱. روی "Override content" کلیک کنید و سپس پوشه‌ای را برای ذخیره فایل‌های تغییر داده‌شده انتخاب کنید.
۲. به تب "Sources" (منابع) بروید. سپس، دایرکتوری‌ای را روی رایانه خود مشخص کنید که فایل‌های پاسخ‌های تغییر داده‌شده در آن ذخیره شوند. همچنین باید این پوشه را تأیید کرده و اجازه دسترسی کامل به آن را بدهید. این کار باعث می‌شود Chrome بتواند فایل‌های محلی شما را به‌عنوان پاسخ جدید درخواست‌ها مورد استفاده قرار دهد.
مرحله چهارم: ذخیره داده‌های سفارشی
پاسخ انتخاب‌شده، به‌طور خودکار در دایرکتوری مشخص‌شده در مرحله سوم ذخیره می‌شود. سپس کافی است فایل را باز کرده و محتوای آن را مطابق نیاز خود ویرایش کنید، برای مثال، یک JSON سفارشی را در آن قرار دهید و فایل را ذخیره کنید.
پس از تنظیم پوشش‌دهی محتوا، تنها کاری که باقی می‌ماند این است که صفحه را دوباره بارگیری کنید یا درخواست موردنظر را مجدداً اجرا کنید. Chrome از فایل محلی شما به‌جای داده‌های سرور استفاده خواهد کرد و می‌توانید به کار با داده‌های دلخواه خود ادامه دهید.
نکته: اگر بخواهید از دایرکتوری انتخاب‌شده صرف‌نظر کنید، کافی است روی دکمه "✖️" کنار گزینه "اجازه پوشش‌دهی محلی" کلیک کنید.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
گاهی اوقات در فرآیند توسعه، شرایطی پیش می‌آید که لازم است با داده‌های خاصی کار کنید، حتی اگر هنوز آماده نباشند یا تغییر کرده باشند. به‌عنوان‌مثال، ممکن است بخواهید واکنش رابط کاربری را به داده‌های مشخصی آزمایش کنید، اما نمی‌خواهید منتظر پاسخ سرور بمانید یا کد آن را به‌صورت دستی تغییر دهید.
در چنین مواردی، Chrome DevTools یک روش کاربردی برای پوشش‌دهی (Override) پاسخ‌های درخواست‌ها ارائه می‌دهد که به شما اجازه می‌دهد داده‌ها را به‌صورت محلی تغییر داده و به کار خود ادامه دهید.
مرحله اول: رفتن به تب "Network"
وارد بخش Network در DevTools شوید. در این قسمت، تمام درخواست‌های شبکه‌ای که هنگام بارگیری صفحه یا تعامل با آن اجرا می‌شوند، نمایش داده می‌شوند.
مرحله دوم: انتخاب درخواست موردنظر برای تغییر
در لیست درخواست‌ها، آن موردی را که قصد تغییر آن را دارید، پیدا کنید.
مرحله سوم: استفاده از قابلیت "Override content" (پوشش‌دهی محتوا)
برای تغییر پاسخ درخواست، باید این قابلیت را فعال کنید. دو روش برای این کار وجود دارد:
۱. روی "Override content" کلیک کنید و سپس پوشه‌ای را برای ذخیره فایل‌های تغییر داده‌شده انتخاب کنید.
۲. به تب "Sources" (منابع) بروید. سپس، دایرکتوری‌ای را روی رایانه خود مشخص کنید که فایل‌های پاسخ‌های تغییر داده‌شده در آن ذخیره شوند. همچنین باید این پوشه را تأیید کرده و اجازه دسترسی کامل به آن را بدهید. این کار باعث می‌شود Chrome بتواند فایل‌های محلی شما را به‌عنوان پاسخ جدید درخواست‌ها مورد استفاده قرار دهد.
مرحله چهارم: ذخیره داده‌های سفارشی
پاسخ انتخاب‌شده، به‌طور خودکار در دایرکتوری مشخص‌شده در مرحله سوم ذخیره می‌شود. سپس کافی است فایل را باز کرده و محتوای آن را مطابق نیاز خود ویرایش کنید، برای مثال، یک JSON سفارشی را در آن قرار دهید و فایل را ذخیره کنید.
پس از تنظیم پوشش‌دهی محتوا، تنها کاری که باقی می‌ماند این است که صفحه را دوباره بارگیری کنید یا درخواست موردنظر را مجدداً اجرا کنید. Chrome از فایل محلی شما به‌جای داده‌های سرور استفاده خواهد کرد و می‌توانید به کار با داده‌های دلخواه خود ادامه دهید.
نکته: اگر بخواهید از دایرکتوری انتخاب‌شده صرف‌نظر کنید، کافی است روی دکمه "✖️" کنار گزینه "اجازه پوشش‌دهی محلی" کلیک کنید.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
💚 ولادت امام حسن مجتبی (ع)
زیباترینِ زیباها در دنیا چیست
🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
زیباترینِ زیباها در دنیا چیست
🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
❤12👎3🤬2
درک تفاوت بین firstElementChild**، **children[0] و childNodes[0]
هنگامی که می‌خواهیم اولین عنصر درون یک کانتینر را دریافت کنیم، دو روش در دسترس داریم:
- استفاده از children[0] یا childNodes[0]
- استفاده از firstElementChild
اما کدام روش بهتر است؟ بیایید بررسی کنیم.
### تفاوت بین childNodes و children
هنگامی که از container.childNodes[0] استفاده می‌کنیم، تمام گره‌ها در نتیجه لحاظ می‌شوند:
- عناصر (div**، **p**، **ul و ...)
- گره‌های متنی (فاصله‌ها، کاراکترهای خط جدید)
- کامنت‌ها
این مسئله ممکن است باعث بروز خطاهای غیرمنتظره شود. برای مثال:
در اینجا، به جای یک عنصر، یک گره متنی دریافت می‌کنیم که ممکن است بر منطق اسکریپت تأثیر بگذارد.
### چرا firstElementChild بهتر است؟
هم children[0] و هم firstElementChild فقط عناصر را در نظر می‌گیرند و از گره‌های متنی و کامنت‌ها چشم‌پوشی می‌کنند. بنابراین، استفاده از آن‌ها امن‌تر است:
هر دو روش به‌درستی کار می‌کنند، اما firstElementChild خواناتر و ساده‌تر است. علاوه بر این، از نظر عملکرد نیز کمی سریع‌تر از سایر روش‌ها عمل می‌کند.
پس برای پایداری و سادگی**، **firstElementChild گزینه‌ای مطمئن و مناسب است!
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
هنگامی که می‌خواهیم اولین عنصر درون یک کانتینر را دریافت کنیم، دو روش در دسترس داریم:
- استفاده از children[0] یا childNodes[0]
- استفاده از firstElementChild
اما کدام روش بهتر است؟ بیایید بررسی کنیم.
### تفاوت بین childNodes و children
هنگامی که از container.childNodes[0] استفاده می‌کنیم، تمام گره‌ها در نتیجه لحاظ می‌شوند:
- عناصر (div**، **p**، **ul و ...)
- گره‌های متنی (فاصله‌ها، کاراکترهای خط جدید)
- کامنت‌ها
این مسئله ممکن است باعث بروز خطاهای غیرمنتظره شود. برای مثال:
const firstItem = container.childNodes[0];
console.log(firstItem); // ممکن است فاصله یا کاراکتر خط جدید را برگرداند!
در اینجا، به جای یک عنصر، یک گره متنی دریافت می‌کنیم که ممکن است بر منطق اسکریپت تأثیر بگذارد.
### چرا firstElementChild بهتر است؟
هم children[0] و هم firstElementChild فقط عناصر را در نظر می‌گیرند و از گره‌های متنی و کامنت‌ها چشم‌پوشی می‌کنند. بنابراین، استفاده از آن‌ها امن‌تر است:
const firstItem1 = container.children[0];
const firstItem2 = container.firstElementChild;
console.log(firstItem1 === firstItem2); // true
هر دو روش به‌درستی کار می‌کنند، اما firstElementChild خواناتر و ساده‌تر است. علاوه بر این، از نظر عملکرد نیز کمی سریع‌تر از سایر روش‌ها عمل می‌کند.
پس برای پایداری و سادگی**، **firstElementChild گزینه‌ای مطمئن و مناسب است!
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
👍1👏1
Chroma.js
یک کتابخانه‌ی کوچک جاوا اسکریپت بدون وابستگی (با حجمی در حدود سیزده و نیم کیلوبایت) است که برای انجام تبدیل‌های رنگی و ایجاد مقیاس‌های رنگی به کار می‌رود. این کتابخانه امکان خواندن رنگ‌ها از فرمت‌های مختلف**، **تحلیل و تغییر آن‌ها و همچنین تولید پالت‌های رنگی برای بصری‌سازی داده‌ها را فراهم می‌کند.
🔗https://gka.github.io/chroma.js/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
یک کتابخانه‌ی کوچک جاوا اسکریپت بدون وابستگی (با حجمی در حدود سیزده و نیم کیلوبایت) است که برای انجام تبدیل‌های رنگی و ایجاد مقیاس‌های رنگی به کار می‌رود. این کتابخانه امکان خواندن رنگ‌ها از فرمت‌های مختلف**، **تحلیل و تغییر آن‌ها و همچنین تولید پالت‌های رنگی برای بصری‌سازی داده‌ها را فراهم می‌کند.
🔗https://gka.github.io/chroma.js/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript