‏**jscanify** یک اسکنر اسناد موبایل رایگان و متن‌باز است که کاملاً با جاوااسکریپت پیاده‌سازی شده و از OpenCV.js قدرت می‌گیرد. این ابزار از Node.js، React، Angular و Vue پشتیبانی می‌کند.


### ویژگی‌ها:
✅ تشخیص و برجسته‌سازی اسناد
✅ اسکن اسناد با اصلاح اعوجاج
✅ امکان خروجی گرفتن به فرمت PDF

🔗https://colonelparrot.github.io/jscanify/
#️⃣#npm_module
👥@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

### پشتیبانی رسمی ESLint از بررسی کدهای CSS

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

‏upfetch: یک ابزار پیشرفته برای ساخت کلاینت fetch
یک کتابخانه TypeScript برای بهبود fetch با قابلیت‌های اعتبارسنجی طرحواره (Schema Validation)، تجزیه خودکار پاسخ‌ها و ایمنی نوعی (Type-Safety)، در حالی که همچنان از همان API آشنای fetch استفاده می‌کند.

🔗https://github.com/L-Blondy/up-fetch
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

بهینه‌سازی قالب‌بندی تاریخ:

‏date.toLocaleString() یک تابع نسبتاً کند است.
‏new Intl.DateTimeFormat() ده برابر سریع‌تر عمل می‌کند.
استفاده از قالب‌بندی سفارشی می‌تواند سرعت را تقریباً یک مرتبه دیگر افزایش دهد.
هنگام استفاده از Intl، بهترین روش این است که به‌جای ایجاد مجدد این شیء در هر بار استفاده، آن را یکبار ایجاد و بازاستفاده کنید.


🔗https://jsbenchmark.com/#eyJjYXNlcyI6W3siaWQiOiJTblotMU1PaGZxSTlKNnFHUlE5UVEiLCJjb2RlIjoiRGF0ZS50b0xvY2FsZVN0cmluZygpIiwibmFtZSI6ImRhdGUudG9Mb2NhbGVTdHJpbmcoKSIsImRlcGVuZGVuY2llcyI6W119LHsiaWQiOiJZc2JrVjRGLXNSdWU0MjZyQjM4RU8iLCJjb2RlIjoibmV3IEludGwuRGF0ZVRpbWVGb3JtYXQoKSIsIm5hbWUiOiJuZXcgSW50bC5EYXRlVGltZUZvcm1hdCgpIiwiZGVwZW5kZW5jaWVzIjpbXX1dLCJjb25maWciOnsibmFtZSI6IkJhc2ljIGV4YW1wbGUiLCJwYXJhbGxlbCI6dHJ1ZSwiZ2xvYmFsVGVzdENvbmZpZyI6eyJkZXBlbmRlbmNpZXMiOltdfSwiZGF0YUNvZGUiOiJyZXR1cm4gWy4uLkFycmF5KDEwMDApLmtleXMoKV0ifX0
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏bundlejs - بررسی سریع اندازه‌ی (bundle) حجم پکیج‌های npm

🔗https://bundlejs.com/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

Monolith

ابزاری برای ذخیره‌سازی کامل صفحات وب همراه با تمامی فایل‌های جاوا اسکریپت، 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

ابزار Chrome DevTools امکان تغییر پاسخ درخواست‌ها را برای کار محلی فراهم می‌کند

گاهی اوقات در فرآیند توسعه، شرایطی پیش می‌آید که لازم است با داده‌های خاصی کار کنید، حتی اگر هنوز آماده نباشند یا تغییر کرده باشند. به‌عنوان‌مثال، ممکن است بخواهید واکنش رابط کاربری را به داده‌های مشخصی آزمایش کنید، اما نمی‌خواهید منتظر پاسخ سرور بمانید یا کد آن را به‌صورت دستی تغییر دهید.

در چنین مواردی، Chrome DevTools یک روش کاربردی برای پوشش‌دهی (Override) پاسخ‌های درخواست‌ها ارائه می‌دهد که به شما اجازه می‌دهد داده‌ها را به‌صورت محلی تغییر داده و به کار خود ادامه دهید.

مرحله اول: رفتن به تب "Network"
وارد بخش Network در DevTools شوید. در این قسمت، تمام درخواست‌های شبکه‌ای که هنگام بارگیری صفحه یا تعامل با آن اجرا می‌شوند، نمایش داده می‌شوند.

مرحله دوم: انتخاب درخواست موردنظر برای تغییر
در لیست درخواست‌ها، آن موردی را که قصد تغییر آن را دارید، پیدا کنید.

مرحله سوم: استفاده از قابلیت "Override content" (پوشش‌دهی محتوا)
برای تغییر پاسخ درخواست، باید این قابلیت را فعال کنید. دو روش برای این کار وجود دارد:
۱. روی "Override content" کلیک کنید و سپس پوشه‌ای را برای ذخیره فایل‌های تغییر داده‌شده انتخاب کنید.
۲. به تب "Sources" (منابع) بروید. سپس، دایرکتوری‌ای را روی رایانه خود مشخص کنید که فایل‌های پاسخ‌های تغییر داده‌شده در آن ذخیره شوند. همچنین باید این پوشه را تأیید کرده و اجازه دسترسی کامل به آن را بدهید. این کار باعث می‌شود Chrome بتواند فایل‌های محلی شما را به‌عنوان پاسخ جدید درخواست‌ها مورد استفاده قرار دهد.

مرحله چهارم: ذخیره داده‌های سفارشی
پاسخ انتخاب‌شده، به‌طور خودکار در دایرکتوری مشخص‌شده در مرحله سوم ذخیره می‌شود. سپس کافی است فایل را باز کرده و محتوای آن را مطابق نیاز خود ویرایش کنید، برای مثال، یک JSON سفارشی را در آن قرار دهید و فایل را ذخیره کنید.

پس از تنظیم پوشش‌دهی محتوا، تنها کاری که باقی می‌ماند این است که صفحه را دوباره بارگیری کنید یا درخواست موردنظر را مجدداً اجرا کنید. Chrome از فایل محلی شما به‌جای داده‌های سرور استفاده خواهد کرد و می‌توانید به کار با داده‌های دلخواه خود ادامه دهید.

نکته: اگر بخواهید از دایرکتوری انتخاب‌شده صرف‌نظر کنید، کافی است روی دکمه "✖️" کنار گزینه "اجازه پوشش‌دهی محلی" کلیک کنید.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

💚 ولادت امام حسن مجتبی (ع)
زیباترینِ زیباها در دنیا چیست

🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

درک تفاوت بین firstElementChild**، **children[0] و childNodes[0]

هنگامی که می‌خواهیم اولین عنصر درون یک کانتینر را دریافت کنیم، دو روش در دسترس داریم:
- استفاده از 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

Chroma.js

یک کتابخانه‌ی کوچک جاوا اسکریپت بدون وابستگی (با حجمی در حدود سیزده و نیم کیلوبایت) است که برای انجام تبدیل‌های رنگی و ایجاد مقیاس‌های رنگی به کار می‌رود. این کتابخانه امکان خواندن رنگ‌ها از فرمت‌های مختلف**، **تحلیل و تغییر آن‌ها و همچنین تولید پالت‌های رنگی برای بصری‌سازی داده‌ها را فراهم می‌کند.

🔗https://gka.github.io/chroma.js/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

یک JSON Viewer جالب پیدا کردم!
برای دیباگ در پنل مدیریت و بررسی داده‌ها واقعاً کاربردی است. 🔍🚀

🔗https://github.com/andypf/json-viewer
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

ورودی‌های بهتر برای موبایل
به شما کمک می‌کند تا عنصر <input> و ویژگی‌های مناسب آن را انتخاب کنید، به‌گونه‌ای که استفاده از آن در دستگاه‌های موبایل راحت و کاربرپسند باشد.

🔗https://better-mobile-inputs.netlify.app/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

💚 یَا مُقَلِّبَ الْقُلُوبِ وَ الْأَبْصَارِ؛ یَا مُدَبِّرَ اللَّیْلِ وَ النَّهَارِ؛ یَا مُحَوِّلَ الْحَوْلِ وَ الْأَحْوَالِ؛ حَوِّلْ حَالَنَا إِلَی أَحْسَنِ الْحَالِ

🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

⚫️ Gridstack.js

یک کتابخانه‌ی جاوا اسکریپت برای ایجاد چیدمان‌های شبکه‌ای پویا و قابل تنظیم با قابلیت کشیدن و رها کردن (drag-and-drop). با استفاده از آن، می‌توان به‌راحتی عناصر صفحه را سازمان‌دهی کرده و آن‌ها را به موقعیت‌های دلخواه منتقل کرد. Gridstack.js برای طراحی پنل‌های تعاملی، داشبوردها و سایر رابط‌های کاربری انعطاف‌پذیر و پویا ایده‌آل است.

🔗https://gridstackjs.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

امام صادق عليه السلام:

سرنوشت (مُقَدَّر شدن)، در شب نوزدهم است
و محكم ساختن، در شب بيست و يكم
و امضا (حتمى سازى)، در شب بيست و سوم
التَّقديرُ في لَيلَةِ تِسعَ عَشرَةَ، والإبرامُ في لَيلَةِ إحدى وعِشرينَ، وَالإِمضاءُ في لَيلَةِ ثَلاثٍ وعِشرينَ

الكافی جلد4 صفحه159

🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

Gremlins.js
ابزاری برای آزمایش رابط‌های کاربری است که اقدامات تصادفی کاربر، مانند کلیک‌ها، سوایپ‌ها و ورود متن را شبیه‌سازی می‌کند. این ابزار با تقلید از رفتار نامنظم کاربران، به شناسایی باگ‌های غیرمنتظره و مشکلات عملکردی در برنامه‌های وب کمک می‌کند.

🔗https://marmelab.com/blog/2020/06/02/gremlins-2.html
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

آیا طراحی ایمیل مثل کابوس است؟

اگر فکر می‌کنید که طراحی واکنش‌گرا برای تمام مرورگرها کار سختی است، پس بهتر است سعی کنید یک ایمیل طراحی کنید که در Gmail، Outlook، Yahoo و ده‌ها سرویس ایمیل دیگر کاملاً یکسان نمایش داده شود...

طراحی ایمیل یک کار کاملاً خاص و منحصربه‌فرد است که در آن نمی‌توان از بخش زیادی از قابلیت‌های HTML و CSS استفاده کرد. موتورهای پردازش ایمیل‌ها آن‌قدر قدیمی هستند که بسیاری از آن‌ها همچنان نیاز به استفاده از جداول برای طراحی دارند، درست مثل دهه نود میلادی! اما چرا این‌گونه است؟ چند دلیل اصلی را می‌توان برای این موضوع برشمرد:

### ۱. دلیل تاریخی
معمولاً طراحی ایمیل‌ها یک کار نسبتاً ساده است. به همین دلیل، بسیاری از سرویس‌های ایمیل زحمت به‌روزرسانی موتورهای پردازش خود را به خود نمی‌دهند، چراکه این کار از نظر تجاری سود چندانی ندارد. به‌عنوان مثال، هیچ تفاوتی بین طراحی یک ایمیل حاوی کد تأیید ورود با استفاده از جداول یا Flexbox از لحاظ عملکرد وجود ندارد.

### ۲. مسائل امنیتی
اگر کمی عمیق‌تر بررسی کنیم، متوجه می‌شویم که بسیاری از محدودیت‌های موجود دلایل امنیتی دارند. روش‌های زیادی برای ارسال درخواست از داخل یک ایمیل وجود دارد، مانند:

@font-face { src: url(...) }  
background-image: url(...)  
list-style-image: url(...)  

<form action="https://.../steal.php" method="get">

و بسیاری موارد دیگر. در تمامی این مثال‌ها، ایمیل تلاش می‌کند داده‌ای را از یک منبع خارجی دریافت کند که می‌تواند برای ردیابی کاربر استفاده شود. برای مثال، می‌توان با باز کردن یک ایمیل، آی‌پی واقعی کاربر را از طریق بارگذاری یک تصویر رهگیری کرد.

همچنین، ویژگی position: fixed در ایمیل‌ها ممنوع شده است، زیرا می‌توان از آن برای حملات فیشینگ استفاده کرد. به‌عنوان مثال، یک هکر می‌تواند یک پنجره‌ی ثابت را روی محتوای ایمیل نمایش دهد که از کاربر می‌خواهد رمز عبور خود را وارد کند و این پنجره کاملاً مشابه رابط کاربری سرویس ایمیل خواهد بود.

### اما خبر خوب اینجاست: اوضاع خیلی بهتر شده است!
‏- Outlook اکنون از موتور رندرینگ Edge به جای Microsoft Word استفاده می‌کند (بله، باور کنید! تا سال دو هزار و بیست و دو ایمیل‌ها واقعاً با موتور Word پردازش می‌شدند!).
- تقریباً تمامی سرویس‌های ایمیل، تگ <div /> را به‌درستی پردازش می‌کنند.
- پشتیبانی از media queries در بسیاری از سرویس‌های ایمیل اضافه شده است.
- و بسیاری پیشرفت‌های دیگر.

### ابزارهای جدید، دنیای طراحی ایمیل را متحول کرده‌اند
ابزارهای مدرنی برای طراحی ایمیل ایجاد شده‌اند که بسیاری از مشکلات را از پیش حل کرده‌اند. یکی از این ابزارها MJML است که در گذشته تغییرات بزرگی ایجاد کرد، و در سال‌های اخیر، فریمورک‌هایی مانند react-email و vue-email بسیار محبوب شده‌اند.

مزایای react-email :
✔️ پشتیبانی از Tailwind CSS
✔️ نسخه‌ای شبیه به Storybook برای پیش‌نمایش قالب‌ها
✔️ امکان استفاده از فونت‌های سفارشی
✔️ مجموعه‌ای از قالب‌های آماده و نمونه کدها
‏✔️ Markdown برای نوشتن متن‌ها
✔️ برطرف کردن مشکلات مربوط به سرویس‌های مختلف ایمیل

و همه‌ی این‌ها در یک بسته‌ی کامل و کاربرپسند ارائه شده که از کامپوننت‌محوری پشتیبانی می‌کند، بدون نیاز به ارسال پیامک تأیید یا حتی ثبت‌نام!

به نظر من، در دنیای امروز طراحی ایمیل‌ها بسیار راحت‌تر و بهینه‌تر شده است، و این را مدیون جامعه‌ی برنامه‌نویسی هستیم. اگر تا به حال از طراحی ایمیل دوری کرده‌اید، پیشنهاد می‌کنم نگاهی به آن بیندازید—این حوزه هم جذابیت‌های خاص خودش را دارد!

و در نهایت، اگر به دنبال یک ابزار عالی هستید، react-email را امتحان کنید—ابزاری کارآمد و لذت‌بخش.


#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

🖤 شهادت امام علی (ع)
امام على عليه السلام:
هر كه درباره بسيارى از امور بى اعتنايى و چشم پوشى نكند، زندگيش تيره شود
مَن لَم يَتَغافَلْ و لا يَغُضَّ عَن كَثيرٍ مِنَ الاُمورِ تَنَغَّصَت عِيشَتُهُ
غررالحكم حدیث9149

🔗 [+لینک ویدیو]
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript