Draw With WebGL Flowers 2

🔗https://codepen.io/ksenia-k/pen/RwqrxBG
#️⃣#code
🆔@IR_javascript

‏Codeium یک ابزار هوش مصنوعی قدرتمند است که به برنامه‌نویسان در انجام وظایف مختلف، از جمله نوشتن کد، رفع اشکال و تست، کمک می‌کند. این ابزار با استفاده از یادگیری ماشین و پردازش زبان طبیعی، می‌تواند کد را به طور خودکار تکمیل کند، اشکالات را شناسایی کند و راه حل‌های خلاقانه ارائه دهد.
در نظرسنجی اخیر Stack Overflow، Codeium به عنوان پربازده‌ترین و کاربرپسندترین دستیار هوش مصنوعی برای برنامه‌نویسی انتخاب شد. این نظرسنجی از بیش از 10000 توسعه‌دهنده در سراسر جهان نظرسنجی کرد و نشان داد که Codeium به طور قابل توجهی به برنامه‌نویسان در انجام وظایف خود کمک می‌کند.

🔗https://stackoverflow.blog/2024/05/29/developers-get-by-with-a-little-help-from-ai-stack-overflow-knows-code-assistant-pulse-survey-results/
#️⃣#tool
🆔@IR_javascript

شبه عنصر ::first-line
این شبه عنصر به شما امکان می دهد اولین خط عنصر متنی را به صورت جداگانه استایل دهید. این عنصر اغلب برای ایجاد جلوه های تایپوگرافی مانند افزایش اندازه فونت یا تغییر رنگ اولین خط استفاده می شود.

خواص قابل قبول:

color: رنگ اولین خط
background-color: رنگ پس زمینه
font-family: قلم اولین خط
font-size: اندازه فونت
font-weight: ضخامت فونت
line-height: ارتفاع خط
text-decoration: تزیین متن (زیرخط، خط خطی)
text-transform: تبدیل متن (حروف بزرگ، حروف کوچک)
word-spacing: فاصله بین کلمات
letter-spacing: فاصله بین حروف
text-indent: فرورفتگی اولین خط
در عمل، این شبه عنصر اغلب برای عناوین مقالات و پست ها استفاده می شود.
#️⃣#tip #css
🆔@IR_javascript

فشرده سازی کد
افزونه Better Minify در vs_code به شما امکان می دهد کدهای HTML، CSS، JS و بسیاری از زبان های دیگر را فشرده کنید.

هنگام استفاده از دستور "minify files" بر روی یک فایل انتخابی، فایلی با نام "نام فایل.min.ext" در دایرکتوری فعلی ایجاد می شود.

#️⃣#tool
🆔@IR_javascript

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


🔗https://draggabilly.desandro.com/

#️⃣#npm_module
🆔@IR_javascript

هر آنچه برای ساخت آسان وب‌سایت‌های ریسپانسیو و بی‌نقص نیاز دارید، در این نرم افزار وجود دارد

تمامی دستگاه‌ها به طور همزمان
تمامی دستگاه‌ها را به صورت همزمان و در کنار هم مشاهده کنید. دیگر نیازی به کلنجار رفتن با ابزار تغییر سایز مرورگر نیست. همه چیز به طور همزمان در یک نگاه قابل مشاهده است.

تعاملات آینه شده
هر کلیک، اسکرول یا ناوبری که در یک دستگاه انجام می‌دهید، به صورت لحظه‌ای در تمام دستگاه‌ها تکرار می‌شود.

تعویض سریع بین محیط‌های مختلف
ترکیب‌های دستگاهی مورد علاقه خود را به عنوان «مجموعه پیش‌نمایش» ذخیره کنید و هنگام تست به سرعت بین آن‌ها جابجا شوید.

پروفایل‌های گسترده‌ی دستگاه‌ها
ابزار Responsively به صورت پیش‌فرض با مجموعه‌ای بزرگ از پروفایل‌های دستگاه‌ها عرضه می‌شود. همچنین می‌توانید دستگاه‌های دلخواه خود را نیز اضافه کنید.

🔗https://responsively.app/
#️⃣#tool
🆔@IR_javascript

‏API تمام صفحه—یک رابط کاربری است که به شما امکان می دهد عناصر صفحه HTML را در حالت تمام صفحه نمایش دهید. این رابط کاربری توسط مرورگرهای وب پشتیبانی می شود و می تواند برای ایجاد تجربیات کاربری جذاب و فراگیر مورد استفاده قرار گیرد.

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

نمایش تصاویر: می توانید از API تمام صفحه برای نمایش تصاویر در اندازه بزرگتر و با جزئیات بیشتر استفاده کنید. این می تواند برای عکاسان، هنرمندان یا هر کسی که بخواهد تصاویر خود را به روشی فراگیر به اشتراک بگذارد مفید باشد.

نمایش اسلایدها: API تمام صفحه برای نمایش اسلایدها نیز ایده آل است. این می تواند برای ارائه ها، سخنرانی ها یا هر موقعیتی که بخواهید محتوای خود را به روشی بصری و جذاب ارائه دهید، مفید باشد.

نمایش بازی ها: برخی از بازی های وب از API تمام صفحه برای ایجاد تجربه ای فراگیرتر برای بازیکنان استفاده می کنند.


نحوه استفاده از API تمام صفحه:
استفاده از API تمام صفحه نسبتاً ساده است. برای نمایش یک عنصر در حالت تمام صفحه، می توانید از روش requestFullscreen() در آن عنصر استفاده کنید. به عنوان مثال، کد زیر عنصر با شناسه target را در حالت تمام صفحه نمایش می دهد:

const element = document.getElementById('target');
element.requestFullscreen();

برای خروج از حالت تمام صفحه، می توانید از روش exitFullscreen() در شیء Document استفاده کنید. به عنوان مثال، کد زیر از حالت تمام صفحه خارج می شود:

document.exitFullscreen();

🔗https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_requestfullscreen
#️⃣#tip
🆔@IR_javascript

در دنیای وب، انیمیشن نقش مهمی در ایجاد رابط کاربری جذاب و پویا ایفا می‌کند. روش‌های مختلفی برای ایجاد انیمیشن در وب وجود دارد، از جمله CSS Animations، SVG Animations و JavaScript Animations. در میان این روش‌ها، requestAnimationFrame (rAF) به عنوان یک ابزار قدرتمند و کارآمد برای ایجاد انیمیشن‌های روان و بهینه شناخته می‌شود.

‏rAF چیست؟

‏requestAnimationFrame یک API مرورگر است که به شما امکان می‌دهد انیمیشن‌های روان و بهینه‌ را در وب ایجاد کنید. این API جایگزینی برای روش‌های سنتی مانند setInterval و setTimeout است که می‌توانند باعث ایجاد انیمیشن‌های ناهموار و ناکارآمد شوند.

نحوه عملکرد rAF:

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

#️⃣#tip
🆔@IR_javascript

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

مزایای شانس:

سادگی: شانس یک کتابخانه سبک و آسان برای استفاده است.
تنوع: شانس انواع مختلفی از داده‌های تصادفی از جمله رشته‌ها، اعداد، آرایه‌ها، اشیاء و غیره را تولید می‌کند.
کد باز: شانس یک کتابخانه متن باز است که تحت مجوز MIT منتشر شده است، به این معنی که می‌توانید به صورت رایگان از آن برای پروژه‌های شخصی و تجاری استفاده کنید.

Chance.first({ nationality: "it" });
// 'Alberto'

Chance.first({ gender: "female" });
// 'Emma'

chance.animal();
// 'Cobra'

🔗https://chancejs.com/

#️⃣#npm_module
🆔@IR_javascript

‏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