Acrobatic Preloader

🔗https://codepen.io/jkantner/pen/VwrYggy
#️⃣#code
🆔@IR_javascript

‏استفاده از WebGL برای ایجاد گرافیک سه‌بعدی در برنامه‌های وب

‏WebGL یک API برای ایجاد گرافیک سه‌بعدی تعاملی در برنامه‌های وب ارائه می‌دهد و کتابخانه Three.js این فرآیند را ساده‌تر می‌کند.
#️⃣#tip
🆔@IR_javascript

‏Talend API Tester: ابزاری قدرتمند برای تست API
‏Talend API Tester یک ابزار جامع و کاربر پسند برای تعامل با APIهای HTTP و REST است. این ابزار به شما امکان می دهد تا به راحتی APIها را کشف کنید، درخواست ها را ارسال کنید، پاسخ ها را بررسی کنید و رفتار API را تأیید کنید.
🔗https://chromewebstore.google.com/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm
#️⃣#tool
🆔@IR_javascript

شمارنده قیمت

این شمارنده قیمت به شما امکان می دهد قیمت را با استفاده از نقاط مشخص شده روی اعداد تنظیم کنید. شما می توانید نوار لغزنده را به طور مستقیم به نقطه دلخواه خود بکشید یا روی هر نقطه از مقیاس کلیک کنید.

🔗https://codepen.io/konstantindenerz/pen/zYJzvEQ
#️⃣#code
🆔@IR_javascript

‏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