‏GPT-4 به طور محدود در افزونه هوش مصنوعی IDE Codeium در دسترس است

نسخه محدود GPT-4 اکنون در افزونه هوش مصنوعی IDE Codeium در دسترس است. شما می توانید برای امتحان رایگان آن از طریق لینک زیر ثبت نام کنید ممکن است تا باز شدن دسترسی 24 ساعت طول بکشد

🔗https://codeium.com/waitlist/gpt-4?referrer=chat_homepage
#️⃣#tool
🆔@IR_javascript

‏JSDoc 3 یک ابزار تولید مستندات API برای جاوااسکریپت است، مشابه Javadoc یا phpDocumentor.

با JSDoc 3، شما می توانید توضیحات مربوط به API را به صورت مستقیم درون کد منبع خود، در کنار کد اصلی، اضافه کنید. ابزار JSDoc سپس کد منبع شما را اسکن کرده و یک وب سایت مستندات HTML برایتان تولید می کند.

🔗https://codeium.com/waitlist/gpt-4?referrer=chat_homepage
#️⃣#npm_module
🆔@IR_javascript

Storyset

کتابخانه ای رایگان از تصاویر گرافیکی قابل تنظیم برای پروژه شما

‏Storyset یک وب سایت است که مجموعه ای از تصاویر گرافیکی با کیفیت بالا را به صورت رایگان ارائه می دهد. این تصاویر را می توانید برای استفاده در وب سایت، اپلیکیشن، ارائه، یا هر نوع پروژه دیگری دانلود و به دلخواه خودتان تنظیم کنید.

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

Ecommerce App
🔗https://www.figma.com/community/file/1364542582137903412

#️⃣#design
🆔@IR_javascript

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

🔗https://www.brizy.cloud/
#️⃣#tool
🆔@IR_javascript

اگر به دنبال یک کتابخانه UI جدید برای پروژه خود هستید، Ark گزینه ای عالی است که باید در نظر بگیرید. این کتابخانه مدرن، قدرتمند و قابل دسترس است و توسط تیمی از توسعه‌دهندگان پشتیبانی می‌شود.
‏ Ark یک کتابخانه بدون سر است، به این معنی که هیچ سبک پیش‌فرضی ندارد و به شما امکان می‌دهد تا ظاهر UI خود را با استفاده از سیستم‌های مختلف استایل مانند CSS Modules یا Emotion کاملاً سفارشی کنید.

🔗https://ark-ui.com/
#️⃣#npm_module
🆔@IR_javascript

ماشین‌ها منطق را کنترل می‌کنند، شما رابط کاربری را کنترل کنید

‏Zag، رفتار و منطق درونی کامپوننت‌های رابط کاربری شما را مدیریت می‌کند. این به شما امکان می‌دهد تا بر جنبه بصری تمرکز کنید و از راه‌حل‌های استایل‌دهی مورد علاقه خود مانند Material UI یا Tailwind CSS برای ایجاد یک رابط کاربری زیبا و سازگار با سیستم طراحی خود استفاده کنید.

<script setup>
import * as numberInput from "@zag-js/number-input";
import { normalizeProps, useMachine } from "@zag-js/vue";
import { computed } from "vue";
const [state, send] = useMachine(numberInput.machine({ id: "1" }));
const api = computed(() =>
  numberInput.connect(state.value, send, normalizeProps)
);
</script>
<template>
  <div ref="ref" v-bind="api.rootProps">
    <label v-bind="api.labelProps">Enter number</label>
    <div>
      <button v-bind="api.decrementTriggerProps">DEC</button>
      <input v-bind="api.inputProps" />
      <button v-bind="api.incrementTriggerProps">INC</button>
    </div>
  </div>
</template>

🔗https://zagjs.com/
#️⃣#npm_module
🆔@IR_javascript

Revealing Slider

🔗https://codepen.io/Prakash286/pen/RwgPPba
#️⃣#code
🆔@IR_javascript

‏WebRTC (Real-time Communication) یک API قدرتمند در مرورگر وب است که امکان ایجاد برنامه‌های ارتباطی در زمان واقعی مانند ویدئو چت، تماس صوتی و اشتراک‌گذاری صفحه را بدون نیاز به افزونه یا پلتفرم‌های شخص ثالث فراهم می‌کند.

#️⃣#tip
🆔@IR_javascript

‏InYourFace یک افزونه VSCode است که به اشتباهات کد شما واکنش نشان می دهد. اما این واکنش ها توسط هر کسی انجام نمی شوند، بلکه توسط چهره شخصیت اصلی بازی افسانه ای DOOM، که از دوران DOS و Windows 95 به یادگار مانده است، انجام می شوند!

هر بار که در کد شما خطایی پیدا می شود، این افزونه یک "Ouch Face" (صورت آخ و اوخ) مربوطه را نمایش می دهد که فرآیند اشکال زدایی را تعاملی تر و سرگرم کننده تر می کند.

#️⃣#tool
🆔@IR_javascript

Old Film Effect

🔗https://codepen.io/josetxu/pen/yLjwOwQ
#️⃣#code
🆔@IR_javascript

‏Husky یک ابزار JavaScript برای مدیریت Git-hooks است که به شما امکان می دهد اسکریپت های سفارشی را در رویدادهای خاص Git اجرا کنید. مثلا قبل از هر کامیتی تست کد به صورت خودکار اجرا شود.

‏مزایای استفاده از Husky:

خودکارسازی وظایف Git: به شما امکان می دهد وظایف Git مانند فرمت، لینت و تست کد خود را به طور خودکار انجام دهید.
افزایش کیفیت کد: Husky به شما کمک می کند تا کد با کیفیت بالاتری بنویسید.
کاهش خطا: Husky به شما کمک می کند تا از خطاهای رایج Git جلوگیری کنید.

#️⃣#npm_module
🆔@IR_javascript

‏Craftum یک ژنراتور لندینگ پیج با هوش مصنوعی است که به شما امکان می دهد با استفاده از قدرت هوش مصنوعی، در عرض 3 دقیقه یک صفحه فرود (لندینگ پیج) بر اساس درخواست خود ایجاد کنید. پس از ایجاد، می توانید سایت خود را به طور آزادانه در ویرایشگر Craftum ویرایش کنید.


🔗https://ai.craftum.com/?utm_source=telegram&utm_medium=post&utm_campaign=frontend_g&utm_content=22-05
#️⃣#tool
🆔@IR_javascript

Social share button

🔗https://codepen.io/yancy/pen/qyMdod
#️⃣#code
🆔@IR_javascript

پیش نمایش SVG
ویرایش فایل های SVG در فرآیند صفحه آرایی دشوار است؟ افزونه SVG Previewer در vscode با ارائه امکانات کاربردی کار با این فایل ها را آسان تر می کند: تغییر مقیاس، تنظیم رنگ پس زمینه و مشاهده اندازه فایل.

#️⃣#tool
🆔@IR_javascript

‏API کلیپ بورد به شما امکان می دهد تا داده ها را از کلیپ بورد بخوانید و در آن بنویسید.

در اینجا یک نمونه کد جاوا اسکریپت برای کپی کردن متن از یک عنصر با کلاس .content به کلیپ بورد با استفاده از API کلیپ بورد آورده شده است:

document.querySelector('.copy').addEventListener('click', () => {
  const txt = document.querySelector('.content').value;
  navigator.clipboard.writeText(txt);
});

#️⃣#tip
🆔@IR_javascript

تشخیص تم سیستم

‏Media Expression prefers-color-scheme می تواند برای تعیین اینکه کاربر از چه تم رنگی (روشن یا تیره) در سیستم عامل خود استفاده می کند، به کار رود.

‏window.matchMedia به شما امکان می دهد از طریق JS به Media Expressions دسترسی داشته باشید و به رویدادهای آنها گوش دهید.

‏در اینجا یک نمونه کد جاوا اسکریپت برای تشخیص تم سیستم با استفاده از Media Expression prefers-color-scheme آورده شده است:

const mediaQueryList = window.matchMedia('(prefers-color-scheme: light)');

if (mediaQueryList.matches) {
  console.log('تم سیستم روشن است');
} else {
  console.log('تم سیستم تیره است');
}

#️⃣#tip
🆔@IR_javascript

بارگذاری تصاویر با توجه به اندازه صفحه نمایش برای افزایش کارایی
برای بهبود عملکرد وب سایت خود، می توانید از ویژگی های srcset و sizes تگ <img> در HTML استفاده کنید تا تصاویر را فقط با اندازه مناسب برای دستگاه کاربر بارگیری کنید.


#️⃣#tip
🆔@IR_javascript

Preloader
🔗https://codepen.io/lexadio19/pen/vYJbmrE
#️⃣#code
🆔@IR_javascript