‏Photopea: جایگزینی قدرتمند برای فتوشاپ در وب

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

شباهت به فتوشاپ:

‏Photopea رابط کاربری بسیار مشابهی با فتوشاپ دارد. این شامل پنل‌های ابزار آشنا، لایه‌ها، فیلترها و تنظیمات مختلف است. اگر قبلاً از فتوشاپ استفاده کرده باشید، به سرعت می‌توانید با Photopea کار کنید.
🔗https://www.photopea.com/
#️⃣#tool
🆔@IR_javascript

یارب العالمین

عید قربان مبارک باد🌸


#⃣#event
🆔@IR_javascript

واحد ‏In ارتفاع خط محاسبه شده عنصر را نشان می دهد که می تواند در حالات زیر بسیار مفید باشد:
اندازه آیکن های درون خط را تنظیم کنید و آن را با متن تراز کنید
ارتفاع متن را بر اساس تعداد خطوط تنظیم کنید
پس‌زمینه‌ای را برای هر خط تنظیم کنید

#️⃣#tip #css
🆔@IR_javascript

‏DrawKit یک منبع ارزشمند برای طراحان و توسعه‌دهندگان است که به دنبال تصاویر، انیمیشن‌ها و موکاپ‌های باکیفیت و رایگان برای پروژه‌های خود هستند. این کتابخانه جامع شامل طیف گسترده‌ای از تصاویر وکتور دسته‌بندی‌شده در موضوعات مختلف

🔗https://www.drawkit.com/
#️⃣#tool
🆔@IR_javascript

‏CesiumJS: کتابخانه‌ای قدرتمند برای ساخت نقشه‌های سه‌بعدی
‏CesiumJS یک کتابخانه JavaScript منبع‌باز است که به شما امکان می‌دهد گوی‌ها و نقشه‌های سه‌بعدی با کیفیت بالا را به صورت آنلاین ایجاد کنید. این کتابخانه با استفاده از WebGL، گرافیک سخت‌افزاری را به کار می‌گیرد و برای ارائه عملکرد، دقت، کیفیت بصری و سهولت استفاده بهینه شده است.
🔗https://cesium.com/

#️⃣#npm_module
🆔@IR_javascript

‏PerfectPixel: پلاگینی برای پیکسل‌نویسی دقیق وب‌سایت‌ها

‏PerfectPixel یک پلاگین مرورگر است که به شما امکان می‌دهد وب‌سایت‌ها را «پیکسل به پیکسل» طراحی کنید. این ابزار به شما کمک می‌کند تا بررسی کنید که تا چه حد طراحی شما به طرح اولیه نزدیک است. برای انجام این کار، کافی است پلاگین را نصب کرده و آن را در وب‌سایتی که می‌خواهید بررسی کنید، اجرا کنید.
🔗https://www.welldonecode.com/
#️⃣#tool
🆔@IR_javascript

‏KaTeX: سریع‌ترین کتابخانه برای ریاضی در وب
این روزها، تمام مقالات و پست‌های وبلاگ پر از نمادهای ریاضی است. پس چه بهتر از رویکردی مبتنی بر TeX برای نمایش آنها استفاده کنیم که کاملا روان باشد.

🔗https://katex.org

#️⃣#npm_module
🆔@IR_javascript

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

مزایای استفاده از ویژگی poster:

بهبود تجربه کاربری: نمایش یک تصویر به جای یک صفحه خالی هنگام بارگیری ویدیو، تجربه کاربری را بهبود می‌بخشد.
جذب توجه مخاطب: یک تصویر جذاب می‌تواند توجه مخاطب را به ویدیو جلب کند و آنها را به تماشای آن ترغیب کند.
ارائه اطلاعات اولیه: تصویر می‌تواند اطلاعات اولیه‌ای در مورد محتوای ویدیو به مخاطب ارائه دهد.

<video src="video.mp4" poster="poster.jpg">
</video>

#️⃣#tip
🆔@IR_javascript

‏Vite: رقیب قدرتمند Webpack در دنیای بسته‌بندی جاوا اسکریپت

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

برای درک بهتر این موضوع، بیایید به نموداری که در متن ارائه شده است نگاهی بیندازیم. این نمودار نشان می‌دهد که از بهار سال 2023، سهم Vite در میان پروژه‌های جدید به طور قابل‌توجهی افزایش یافته است. در حالی که Webpack همچنان سهم قابل‌توجهی در بازار دارد، Vite به سرعت در حال تصاحب سهم بازار از آن است.


#️⃣#tool
🆔@IR_javascript

قانون @starting-style برای انیمیشن‌های ورود
از @starting-style برای اعمال استایلی استفاده کنید که مرورگر قبل از باز شدن عنصر در صفحه باید داشته باشد. این حالت «قبل از باز شدن» است (جایی که از آن انیمیشن ورود را شروع می‌کنید).

/* 0. حالت قبل از باز شدن */
/* نقطه شروع برای انتقال */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/* 1. حالت باز بودن */
/* حالتی که عنصر باز است + منطق انتقال */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

#️⃣#tip #css
🆔@IR_javascript

‏JS2Flowchart: کتابخانه‌ای برای تبدیل کد جاوا اسکریپت به نمودار

کتابخانه‌ای است که برای تبدیل کد جاوا اسکریپت به نمودارهای بصری به کار می‌رود. این کتابخانه به شما امکان می‌دهد تا کد خود را به صورت بصری درک کنید، اشکال‌زدایی کنید و مستند کنید.
🔗https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

شبکه جادویی
شبکه جادویی (Magic Grid) یک کتابخانه جاوا اسکریپت برای ایجاد شبکه‌های پویا است. این کتابخانه روشی آسان برای سازماندهی عناصر در صفحه به صورت یک شبکه ارائه می‌دهد که به طور خودکار با اندازه‌های مختلف صفحه نمایش سازگار می‌شود.

🔗https://github.com/e-oj/Magic-Grid

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

اگر از کیبورد بیش از حد استفاده می کنید!
یا در کل با انگشتان‌تان زیاد از حد کار می‌کنید!
برگرفته از: @EslahiClub
#️⃣#exercise
👥@IR_javascript_group
🆔@IR_javascript

‏LokiJS یک کتابخانه جاوا اسکریپت است که یک پایگاه داده درون حافظه in-memory سبک وزن ارائه می‌دهد که برای استفاده در مرورگر یا در محیط Node.js طراحی شده است. این کتابخانه نیازی به نصب سرورها یا پلاگین‌های اضافی ندارد و به طور کامل در حافظه کار می‌کند که سرعت بالایی را برای عملیات ارائه می‌دهد.

🔗https://github.com/techfort/LokiJS

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏currentColor یک کلمه کلیدی CSS است که مقدار رنگ فعلی تعیین شده برای آن انتخابگر، چه به صورت صریح و چه به صورت ارثی، را به خود می‌گیرد.

.btn {
  padding: 0.5em 1.25em;
  text-transform: uppercase;
  text-decoration: none;
  background: white;
  color: limegreen;
  border: 1px solid currentColor;
  /* border نیز به رنگ limegreen خواهد بود */
}

‏currentColor اغلب در آیکون‌های SVG استفاده می‌شود تا رنگی را که به عنصر حاوی آن اعمال شده است، به خود آیکون منتقل کند. در این حالت، SVG از color: currentColor استفاده می‌کند. این امر در مجموعه‌های آیکون رایج معمولاً به این صورت است.

<div class="icon-wrapper">
  <svg fill="currentColor">
    </svg>
</div>

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

نقشه راه کوچک
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

اشهد ان علی ولی الله… عید سعید غدیر مبارک

امام صادق (علیه السلام) :
غذا دادن به یک مومن در روز عید غدیر ثواب اطعام یک میلیون پیامبر و صدیق «در راس آنها خود ائمه معصومین(علیها السلام)» و یک میلیون شهید «در راس آنها حضرت عباس(علیه السلام) و شهدای کربلا» و یک میلیون فرد صالح در حرم خداوند را دارد

🔗https://ghadir.org/etaam

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

سبک های نامگذاری متغیرها و توابع
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

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

نوار پیشرفت انیمیشنی
پیاده‌سازی این نوار پیشرفت بسیار ساده است و فقط به دو مرحله نیاز دارد:

1. استایل‌دهی CSS:

در این مرحله باید ظاهر نوار پیشرفت را با استفاده از CSS تعیین کنیم. این شامل رنگ، اندازه و شکل نوار می‌شود. همچنین باید انیمیشنی را به خود نوار اضافه کنیم تا ظاهر بارگیری جذاب‌تر شود.

2. کد جاوا اسکریپت برای انیمیشن:

در این پیاده‌سازی، ما بارگیری را از 0٪ تا 80٪ نشان می‌دهیم تا به طور واضح اثر پر شدن روان را نشان دهیم.

🔗https://codepen.io/katrin_profrontend/pen/ZENvOYV

#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

سلام دوستان
گروهمون هم افتتاح شده

🎉 ویژگی‌های گروه:

🔹 آموزش‌های کاربردی: از مبانی تا مباحث پیشرفته، هر چیزی که برای تسلط بر جاوااسکریپت نیاز دارید را بیاموزید.

🔹 پشتیبانی و مشاوره: سوالات خود را بپرسید و از تجربیات دیگران بهره‌مند شوید. ما اینجا هستیم تا شما را در هر مرحله از راه راهنمایی کنیم.

🔹 پروژه‌های تیمی: با دیگر اعضا پروژه‌های جذاب انجام دهید و مهارت‌های خود را به چالش بکشید.

🔹 منابع و مطالب به‌روز: از جدیدترین منابع، مقالات و دوره‌های آموزشی مطلع شوید و همیشه یک قدم جلوتر باشید.

🔹 رویدادها و چالش‌ها: در چالش‌های برنامه‌نویسی شرکت کنید، جوایز ببرید و لذت ببرید!

🔹 پرسش و پاسخ: هر سوالی دارید، بپرسید! اعضای گروه و متخصصین ما به سرعت به شما پاسخ خواهند داد و مشکلات شما را حل خواهند کرد.

به ما بپیوندید و عضوی از خانواده بزرگ برنامه‌نویسان جاوااسکریپت شوید. فرقی نمی‌کند تازه‌کار هستید یا حرفه‌ای، اینجا جایی برای همه ماست.

🚀 لینک عضویت: @IR_javascript_group
این گروه توسط همین کانال پشتیبانی می شود پس می توانید در مورد مطالب کانال در آنجا به بحث و تبادل نظر بپردازید
منتظرتان هستیم تا با هم دنیای برنامه‌نویسی را تسخیر کنیم! 🌍