وب‌سرویس مجید

پروژه‌های متن‌باز | OpenSource Projects

این یک تمپلیت از پروژه‌های Svelte با قابلیت SSR (ServerSide Rendering) است که به توسعه‌دهندگان کمک می‌کند تا به راحتی شروع به ساخت اپلیکیشن‌های پویا و سریع کنند. کاربرد: این تمپلیت برای ساخت اپلیکیشن‌های وب با عملکرد بالا و بهینه‌سازی شده برای موتورهای جستجو (SEO) مناسب است. با استفاده از SSR، صفحات ...

  • #Svelte
  • #SSR
  • #WebDevelopment
  • #Frontend
  • #Template
  • #JavaScript
  • #TypeScript
  • #Vite
  • #SEO
  • #SvelteKit

این یک کامپوننت هوشمند popover برای فریم‌ورک Svelte است که به توسعه‌دهندگان کمک می‌کند تا المان‌های تعاملی مانند منوهای کوچک، توضیحات ابزار یا محتوای اضافی را در کنار یک عنصر هدف نمایش دهند. کاربرد: این کامپوننت برای نمایش محتوای کوتاه و مرتبط در نزدیکی یک عنصر (مثل دکمه یا لینک) طراحی شده و با توجه ...

  • #svelte
  • #popover
  • #ui_components
  • #tooltip
  • #context_menu
  • #responsive_ui
  • #web_dev
  • #frontend
  • #javascript
  • #smart_positioning

کاربرد: یک پیش‌پردازنده جادویی برای Svelte که بهت اجازه می‌ده تا از زبان‌های محبوب استایل و اسکریپت مثل TypeScript، SCSS، PostCSS، Pug و CoffeeScript به راحتی داخل کامپوننت‌های Svelte استفاده کنی. بدون نیاز به تنظیمات پیچیده، با پیش‌فرض‌های هوشمند کار می‌کنه. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌ ...

  • #svelte
  • #typescript
  • #scss
  • #postcss
  • #pug
  • #preprocessor
  • #webdev
  • #frontend
  • #javascript
  • #coffeescript

این پروژه به تو اجازه میده تا در فریم‌ورک Svelte به راحتی رویدادها رو با استفاده از دستور on: دلیگیت (delegate) کنی این یعنی می‌تونی رویدادها رو در سطح بالاتری از DOM داشته باشی و عملکرد بهتری داشته باشی، بدون نیاز به اضافه کردن رویداد به هر المان جداگانه. کاربرد: این ابزار برای بهینه‌سازی مدیریت رو ...

  • #svelte
  • #event_delegation
  • #web_development
  • #frontend
  • #javascript
  • #performance
  • #ui_optimization
  • #sveltekit
  • #delegate_events
  • #web_apps

این یک store برای فریم‌ورک Svelte است که می‌تواند مقادیر قبلی یک متغیر را به خاطر بسپارد. کاربرد: وقتی توی یک کامپوننت Svelte نیاز داری بدونی مقدار قبلی یک متغیر چی بوده، این ابزار کمکت می‌کنه. در چه شرایطی بهتره استفاده بشه؟ وقتی تغییرات حالت (state) رو ردیابی می‌کنی، مثل تشخیص اینکه کاربر از کدوم ...

  • #Svelte
  • #Store
  • #StateManagement
  • #PreviousValue
  • #ReactiveProgramming
  • #WebDev
  • #Frontend
  • #JavaScript
  • #DevTools
  • #UIUX

این مجموعه‌ای از ابزارها و قابلیت‌های مفید برای استفاده در پروژه‌های Svelte و SvelteKit هست که توسط توسعه‌دهنده‌ای با نام vnphanquang ساخته شده. این کتابخانه شامل اکشن‌ها، استورها و دیگر اجزای قابل استفاده مجدد هست که کار توسعه رو راحت‌تر می‌کنه. کاربرد: این پکیج به تو کمک می‌کنه بدون نوشتن کدهای تک ...

  • #svelte
  • #sveltekit
  • #webdev
  • #frontend
  • #javascript
  • #typescript
  • #open_source
  • #ui
  • #ux
  • #reusable_components

این ابزار یک کتابخانهٔ سبک و قدرتمند برای تولید کد QR با قابلیت‌های زیبا و عملیاتی است که در پروژه‌های Svelte به راحتی یکپارچه می‌شود. کاربرد: این کتابخانه به شما امکان می‌دهد تا کدهای QR را با سبک دلخواه، اضافه کردن لوگو در مرکز، و تنظیم نرخ تصحیح خطا (Error Correction Level) ایجاد کنید تا حتی در ص ...

  • #QRCodeGenerator
  • #Svelte
  • #WebDev
  • #ErrorCorrection
  • #CustomQR
  • #LogoQR
  • #Frontend
  • #JavaScript
  • #SvelteKit
  • #UIUX

این پروژه نشان می‌دهد که چگونه می‌توان از کامپوننت‌های React درون یک برنامه Svelte استفاده کرد. این یک نمونه عملی برای ترکیب دو فریم‌ورک محبوب جاوااسکریپت در یک محیط واحد است. کاربرد: این پروژه به توسعه‌دهندگان کمک می‌کند تا در پروژه‌های موجود Svelte، کامپوننت‌های React را بدون نیاز به بازنویسی از ص ...

  • #Svelte
  • #React
  • #MicroFrontends
  • #WebComponents
  • #JavaScript
  • #Frontend
  • #HybridApp
  • #UIIntegration
  • #ComponentInterop
  • #WebDev

این پروژه یک اکشن (action) برای فریم‌ورک Svelte ارائه می‌دهد که اثر ریپل (Ripple) مشابه المان‌های متریال دیزاین را به راحتی به المان‌های DOM اضافه می‌کند. کاربرد: این اکشن برای ایجاد فیدبک بصری هنگام تعامل کاربر با دکمه‌ها، کارت‌ها یا هر المان قابل کلیک دیگر استفاده می‌شه. این اثر کاربرپسند بودن راب ...

  • #svelte
  • #ripple_effect
  • #web_development
  • #ui_ux
  • #material_design
  • #frontend
  • #javascript
  • #actions
  • #user_experience
  • #interactive_design

این یک کامپوننت مسیریابی (Router) برای فریم‌ورک Svelte است که به توسعه‌دهندگان اجازه می‌دهد تا بین صفحات مختلف در یک برنامه تک‌صفحه‌ای (SPA) بدون نیاز به بارگذاری مجدد، حرکت کنند. کاربرد: این روتر برای مدیریت مسیرها و نمایش کامپوننت‌های مختلف بر اساس URL استفاده می‌شه. مناسب برنامه‌های تعاملی با تغی ...

  • #svelte
  • #router
  • #singlepageapp
  • #webdev
  • #frontend
  • #javascript
  • #spa
  • #routing
  • #ui
  • #webcomponents

این یک کتابخانهٔ فرم‌ساز مبتنی بر JSON Schema برای فریم‌ورک Svelte است که به توسعه‌دهندگان اجازه می‌دهد به‌راحتی فرم‌های پویا ایجاد کنند. ️ کاربرد: این پروژه برای ساخت فرم‌های ورودی داده به صورت خودکار از روی یک ساختار JSON Schema طراحی شده. بدون نیاز به نوشتن کدهای تکراری برای هر فیلد، فرم به‌صورت ...

  • #svelte
  • #jsonschema
  • #formgenerator
  • #dynamicforms
  • #webdev
  • #frontend
  • #javascript
  • #ui
  • #devtools
  • #opensource

انتخابگری هوشمند و سبک برای فریم‌ورک Svelte که به توسعه‌دهندگان اجازه می‌دهد تا کامپوننت‌های داده‌ای تعاملی و واکنش‌گرا ایجاد کنند. کاربرد: این کامپوننت برای پیاده‌سازی فیلدهای انتخاب (Select) در فرم‌ها و رابط‌های کاربری مبتنی بر Svelte طراحی شده. قابلیت‌هایی مثل جست‌وجوی لحظه‌ای، انتخاب چندگانه و پ ...

  • #svelte
  • #select_component
  • #web_development
  • #ui_components
  • #javascript
  • #frontend
  • #reactive_ui
  • #form_elements
  • #dynamic_select
  • #searchable_dropdown

این مجموعه شامل آیکون‌های ساده و مینیمال است که به صورت کامپوننت‌های سوئیت (Svelte) پیاده‌سازی شده‌اند. کاربرد: استفاده از این آیکون‌ها در پروژه‌های سوئیت برای نمایش لوگوهای برنامه‌ها، فریم‌ورک‌ها، زبان‌های برنامه‌نویسی و خدمات مختلف بدون نیاز به بارگذاری تصاویر یا فونت‌های سنگین. در چه شرایطی بهتره ...

  • #Svelte
  • #Icons
  • #SimpleIcons
  • #WebDevelopment
  • #UIComponents
  • #DeveloperTools
  • #OpenSource
  • #Frontend
  • #DesignSystem
  • #SVGIcons

ویرایشگی قدرتمند برای Svelte با استفاده از Slate.js که امکان ساخت ویرایشگرهای متنی سفارشی رو فراهم می‌کنه ️ کاربرد: این پروژه لایه نمایشی Svelte رو برای کتابخانه Slate فراهم می‌کنه و به تو اجازه می‌ده تا ویرایشگرهای متنی پیچیده مثل ویرایشگرهای Word یا Notion رو با قابلیت‌های سفارشی توسعه بدی ️ در چه ...

  • #svelte
  • #slatejs
  • #text_editor
  • #web_development
  • #custom_editor
  • #rich_text
  • #frontend
  • #developer_tools
  • #notion_clone
  • #markdown_editor

این یک کامپوننت نوتیفیکیشن (توست) برای فریم‌ورک Svelte است که با الهام از کتابخانه @emilkowalski/sonner ساخته شده و تجربه‌ی نمایش پیام‌های موقت را ساده و زیبا می‌کند. کاربرد: وقتی می‌خوای به کاربر اطلاع بدی که یه عملیات مثلاً ذخیره، حذف یا ورود موفقیت‌آمیز بوده، از این کامپوننت استفاده می‌کنی. این ت ...

  • #svelte
  • #toast
  • #notifications
  • #ui_components
  • #web_dev
  • #frontend
  • #javascript
  • #ux
  • #developer_tools
  • #sveltekit

این یک بستهٔ جاوااسکریپت است که قابلیت کشیدن و رها کردن (Drag & Drop) برای لیست‌ها در فریم‌ورک Svelte فراهم می‌کند. این ابزار یک پوشش (wrapper) از کتابخانهٔ معروف SortableJS برای استفاده آسان در پروژه‌های Svelte ارائه می‌دهد. کاربرد: این کتابخانه به تو اجازه می‌دهد تا به راحتی لیست‌های قابل مرتب‌ساز ...

  • #svelte
  • #drag_and_drop
  • #sortablejs
  • #web_development
  • #ui_components
  • #javascript
  • #frontend
  • #dnd
  • #component_library
  • #web_apps

کاربرد: این پروژه تعاملات صوتی رو در برنامه‌های Svelte ساده می‌کنه. به کمک این ابزار می‌تونی به راحتی صدا پخش کنی، حجم رو تنظیم کنی، لوپ بزنی یا رویدادهای صوتی رو مدیریت کنی، بدون نیاز به کدهای پیچیده. در چه شرایطی بهتره استفاده بشه؟ اگر داری یه اپلیکیشن تعاملی با قابلیت‌های صوتی می‌سازی — مثل بازی‌ ...

  • #svelte
  • #sound
  • #webaudio
  • #ui_effects
  • #interactive_apps
  • #audio_library
  • #web_development
  • #frontend
  • #sound_interaction
  • #javascript

این یک ابزار چندسکویی و دوستدار توسعه‌دهنده برای ساخت قطعات جاوااسکریپتی است که به راحتی قابل تعبیه در هر محیطی هستند. ️ کاربرد: این ابزار به توسعه‌دهندگان کمک می‌کنه تا کامپوننت‌های ساده یا پیچیده سوئلت (Svelte) رو به صورت مستقل و بدون نیاز به فریم‌ورک اضافی، به عنوان یک اسکریپت جاوااسکریپتی تحویل ...

  • #Svelte
  • #JavaScript
  • #EmbeddableWidgets
  • #WebComponents
  • #FrontendDev
  • #DeveloperTools
  • #StandaloneJS
  • #WidgetLibrary
  • #CrossPlatform
  • #NoFramework

این کتابخانه مجموعه‌ای از کامپوننت‌های Bootstrap 5 را برای فریم‌ورک Svelte (نسخه ۴ به بالا) فراهم می‌کند تا توسعه‌دهندگان بتوانند به راحتی از امکانات زیبایی و واکنش‌گرایی بوت‌استرپ در پروژه‌های سوئلت استفاده کنند. کاربرد: این کتابخانه به شما کمک می‌کند تا رابط‌های کاربری مدرن و واکنش‌گرا با ترکیب قد ...

  • #Svelte
  • #Bootstrap5
  • #UIComponents
  • #WebDevelopment
  • #SvelteKit
  • #Frontend
  • #ResponsiveDesign
  • #OpenSource
  • #ComponentLibrary
  • #ModernWeb

این یک الگوی شروع سریع برای توسعه‌ی برنامه‌های وب با ترکیب Svelte و Tailwind CSS نسخه 2.0 است. کاربرد: این پروژه به تو کمک می‌کنه بدون دردسرهای پیکربندی، یک محیط توسعه‌ی تمیز و سریع با Svelte و Tailwind CSS راه‌اندازی کنی. در چه شرایطی بهتره استفاده بشه؟ اگر می‌خوای یک پروژه‌ی جدید وب با عملکرد بالا ...

  • #svelte
  • #tailwindcss
  • #webdev
  • #starter_template
  • #frontend
  • #javascript
  • #ui_design
  • #productivity
  • #coding
  • #webdevelopment

این یک الگوی آماده برای ساخت افزونه‌های کروم است که با Svelte، TailwindCSS، Jest و Rollup ساخته شده. ️ کاربرد: این پروژه به تو کمک می‌کنه تا سریع یک افزونه مرورگری با رابط کاربری زیبا و عملکرد بالا بسازی. با استفاده از Svelte برای منطق و رابط، TailwindCSS برای استایل‌دهی سریع و جذاب، Jest برای تست و ...

  • #Svelte
  • #TailwindCSS
  • #ChromeExtension
  • #Rollup
  • #Jest
  • #WebExtensions
  • #Frontend
  • #Boilerplate
  • #DeveloperTools

یک کلاینت تلگرام برای دستگاه‌های KaiOS که با فریم‌ورک Svelte ساخته شده است کاربرد: این پروژه به کاربران کمک می‌کنه تا روی گوشی‌های ساده و کم‌قدرت KaiOS (مثل نوکیا ۸۰۰۰ ۴G) از تلگرام استفاده کنند، بدون نیاز به مرورگر سنگین یا اپلیکیشن‌های پیچیده در چه شرایطی بهتره استفاده بشه؟ وقتی دستگاه شما قدرت پر ...

  • #TelegramClient
  • #KaiOS
  • #Svelte
  • #LightweightApp
  • #WebApp
  • #LowEndDevices
  • #PWA
  • #MessagingApp
  • #OpenSource
  • #MobileWeb

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

  • #svelte
  • #telinput
  • #phoneinput
  • #internationalphone
  • #formcomponents
  • #uiux
  • #webdevelopment
  • #frontend
  • #componentlibrary
  • #userexperience

این یک نسخهٔ شخصی از تمپلیت رسمی Svelte است که پشتیبانی از HMR (Hot Module Replacement) به آن اضافه شده است. این بدین معناست که در حین توسعه، تغییرات کدها بدون نیاز به ریلود کامل صفحه اعمال می‌شوند و تجربهٔ توسعه را سریع‌تر و روان‌تر می‌کند. کاربرد: این تمپلیت برای توسعه‌دهندگانی مناسب است که می‌خوا ...

این یک کامپوننت انتقال (Transition) برای فریم‌ورک Svelte است که به توسعه‌دهندگان امکان می‌دهد تا انیمیشن‌های زیبا و روان را به راحتی در کامپوننت‌های خود پیاده‌سازی کنند. کاربرد: این کامپوننت برای ایجاد افکت‌های بصری هنگام نمایش یا پنهان‌کردن عناصر در رابط کاربری استفاده می‌شه، مثل نمایش با فیِیدین، ...

  • #svelte
  • #transition
  • #animation
  • #ui
  • #ux
  • #webdev
  • #frontend
  • #components
  • #javascript
  • #webdesign

این یک تمپلیت آماده از Svelte با پشتیبانی کامل از TypeScript برای نسخه ۳ این فریم‌ورک است. ایده‌آل برای توسعه‌دهندگانی که می‌خواهند با قابلیت‌های TypeScript مثل تایپ‌های استاتیک، اینتِلیسنس بهتر و کاهش باگ در کُد، شروع به ساخت کامپوننت‌های Svelte کنند. کاربرد: این تمپلیت به عنوان یک پایهٔ آماده برای ...

  • #svelte
  • #typescript
  • #webdev
  • #frontend
  • #template
  • #javascript
  • #ui
  • #framework
  • #coding
  • #devtools

این پروژه ترکیبی از Svelte، TypeScript و Parcel است که یک محیط توسعهٔ سریع و بدون پیچیدگی برای ساخت برنامه‌های کاربردی وب فراهم می‌کند. کاربرد: این قالب برای توسعه‌دهندگانی مناسب است که می‌خواهند با استفاده از Svelte به عنوان فریم‌ورک جلویی، TypeScript برای تایپ‌دهی قوی و Parcel به عنوان باندلر بدون ...

  • #Svelte
  • #TypeScript
  • #Parcel
  • #WebDev
  • #Frontend
  • #JavaScript
  • #Bundler
  • #UI
  • #DevTools
  • #FastDevelopment

این پروژه ترکیبی از Svelte، TypeScript و Rollup است که یک محیط توسعه قدرتمند و بهینه‌شده برای ساخت کامپوننت‌های وب سبک و پویا فراهم می‌کند. کاربرد: این ترکیب برای ساخت برنامه‌های کاربردی وب با عملکرد بالا، کد تمیز و قابل نگهداری مناسب است. TypeScript به شما کمک می‌کند خطاها را در زمان توسعه بگیرید و ...

  • #svelte
  • #typescript
  • #rollup
  • #webdev
  • #frontend
  • #javascript
  • #components
  • #buildtool
  • #minimal
  • #moderndev

این پروژه مجموعه‌ای از تنظیمات مختلف برای کار با Svelte همراه با TypeScript و PostCSS (با Tailwind) رو ارائه می‌ده. ️ کاربرد: کمک می‌کنه تا بدون دردسر شروع به ساخت پروژه‌های Svelte با پشتیبانی از TypeScript و استایل‌های مدرن با Tailwind کنی. همچنین تست‌هایی از تنظیمات مختلف با باندلرها مثل Vite، Web ...

  • #Svelte
  • #TypeScript
  • #TailwindCSS
  • #Vite
  • #Webpack
  • #Rollup
  • #PostCSS
  • #Frontend
  • #WebDev
  • #BuildTools

این مجموعه شامل کامپوننت‌ها، اکشن‌ها، استورها و ابزارهای کاربردی برای فریم‌ورک Svelte است که به توسعه‌دهندگان کمک می‌کند تا برنامه‌های پویا و تعاملی بسازند. ️ کاربرد: این کتابخانه به شما کمک می‌کند تا با استفاده از امکانات آماده، زمان توسعه را کاهش دهید و روی تجربه کاربری غنی‌تری تمرکز کنید. در چه ش ...

  • #svelte
  • #webdev
  • #ux
  • #ui
  • #javascript
  • #frontend
  • #components
  • #stores
  • #actions
  • #sveltekit

این پروژه شامل کامپوننت‌های لیست و شبکهٔ مجازی (Virtual List و Virtual Grid) برای فریم‌ورک Svelte است. کاربرد: وقتی بخواهی تعداد زیادی آیتم رو در یک لیست یا شبکه نمایش بدی، رندر کردن همه‌شون یک‌جا می‌تونه عملکرد رو کند کنه. این کامپوننت‌ها فقط آیتم‌هایی که کاربر می‌بینه رو رندر می‌کنن و بقیه رو مخفی ...

  • #svelte
  • #virtual_list
  • #performance
  • #web_dev
  • #ui_components
  • #grid_layout
  • #frontend
  • #javascript
  • #responsive_design
  • #lazy_rendering

این پروژه یک الگوی آماده برای ساخت Web Component با استفاده از فریم‌ورک Svelte است. ️ کاربرد: این بومی‌سازی شده برای توسعه‌دهندگانی که می‌خوان بدون نیاز به فریم‌ورک‌های سنگین، کامپوننت‌های قابل استفاده مجدد در هر پروژه HTML5 بسازن. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای یک کامپوننت رابط کاربری ...

  • #web_components
  • #svelte
  • #html5
  • #reusable_ui
  • #frontend_dev
  • #component_library
  • #web_dev
  • #javascript
  • #ui_kit
  • #custom_elements

این پروژه چه کاری انجام میده؟ با استفاده از svelteworkerstore، میتونی عملیات سنگین رو از اصل برنامه جدا کنی و توی Web Workers اجراشون کنی، بدون اینکه رابط کاربری قفل بشه. این کتابخونه بهت اجازه میده استورهای Svelte رو به صورت چندنخی (multithreaded) مدیریت کنی و عملکرد اپلیکیشن‌های تو رو به شدت بهبود ...

  • #Svelte
  • #WebWorkers
  • #Multithreading
  • #Performance
  • #SvelteKit
  • #Frontend
  • #JavaScript
  • #UI
  • #Optimization
  • #WorkerStore

یک سیستم مدیریت محتوا سبک، سریع و مبتنی بر گیت است که به عنوان جایگزینی مدرن برای Netlify CMS یا Decap CMS طراحی شده. این ابزار برای توسعه‌دهندگانی مناسب است که به دنبال یک CMS بدون فریم‌ورک (frameworkagnostic) هستند و می‌خواهند بدون وابستگی به پلتفرم خاصی، محتوای سایتشان را مدیریت کنند. کاربرد: مدی ...

  • #headlessCMS
  • #GitBased
  • #StaticSites
  • #Svelte
  • #OpenSource
  • #i18n
  • #MobileFriendly
  • #Lightweight
  • #JAMstack
  • #ContentManagement

این یک فریم‌ورک Entity Component System (ECS) نوشته شده به زبان C است که برای توسعه بازی‌های سریع و کارآمد طراحی شده. کاربرد: این فریم‌ورک به توسعه‌دهندگان کمک می‌کند تا منطق بازی را به صورت ماژولار و با عملکرد بالا پیاده‌سازی کنند. مناسب پروژه‌هایی است که نیاز به مدیریت تعداد زیادی موجودیت (مثل واح ...

  • #ECS
  • #GameDevelopment
  • #CSharp
  • #EntityComponentSystem
  • #SveltoECS
  • #HighPerformance
  • #GameEngine
  • #DataOriented
  • #ModularDesign
  • #IndieDev

کاربرد: این کتابخانه مبتنی بر Svelte به تو اجازه میده رابط‌های کاربری مبتنی بر گره (Nodebased) و نمودارهای جریان (Flowchart) رو به راحتی بسازی. ️ این ابزار عالی برای ساخت ویرایشگرهای بصری، سیستم‌های گردش کار، ابزارهای اتوماسیون و هرچیزی هست که نیاز به ارتباط بصری بین بخش‌ها داشته باشه. در چه شرایطی ...

  • #Svelte
  • #Flowchart
  • #NodeEditor
  • #OpenSource
  • #WebDev
  • #UIComponents
  • #DeveloperTools
  • #NoCode
  • #Frontend
  • #DynamicUI

تبدیل SVG به JSX معتبر کاربرد: این ابزار به شما کمک می‌کنه تا فایل‌های SVG رو به کد JSX تبدیل کنید تا راحت‌تر بتوانید در پروژه‌های React از آن‌ها استفاده کنید. در چه شرایطی بهتره استفاده بشه؟ وقتی دارید روی یک پروژه فرانت‌اند کار می‌کنید و نیاز دارید آیکون‌ها یا گرافیک‌های SVG رو به صورت کامپوننت در ...

  • #SVGtoJSX
  • #ReactComponents
  • #FrontendTools
  • #WebDevelopment
  • #UIUX
  • #IconSystem
  • #DeveloperTools
  • #CodeConversion
  • #ReactJS
  • #SVGIcons

این ابزار یک تصویر بیت‌مپ رنگی را به یک تصویر وکتوری SVG با رنگ‌های دقیق تبدیل می‌کند. کاربرد: تبدیل تصاویر رستری مثل عکس‌ها یا لوگوها به فرمت SVG بدون از دست دادن کیفیت و با حفظ رنگ‌های اصلی. ️️ در چه شرایطی بهتره استفاده بشه؟ وقتی نیاز داری یک تصویر را به صورت وکتوری داشته باشی، مثلاً برای استفاده ...

  • #SVG
  • #Vectorization
  • #ImageConverter
  • #WebDesign
  • #LogoDesign
  • #Graphics
  • #RasterToVector
  • #tomayac
  • #DeveloperTools
  • #DesignTool

این یک افزونهٔ مرورگر متن‌باز است که به تو کمک می‌کنه تا به راحتی تصاویر SVG رو در صفحات وب پیدا کنی، ویرایششون کنی، بهینه‌سازی کنی و خروجی بگیری. ️ کاربرد: این ابزار برای طراحان، توسعه‌دهندگان و هر کسی که با گرافیک‌های برداری کار می‌کنه عالیه. می‌تونی بدون نیاز به ابزارهای سنگین، مستقیماً از داخل م ...

  • #SVG
  • #WebDevelopment
  • #BrowserExtension
  • #DesignTools
  • #Frontend
  • #OpenSource
  • #VectorGraphics
  • #Productivity
  • #DevTools
  • #Designers

این پروژه یک مجموعه از کامپوننت‌های SVG icon و ابزارهای مرتبط برای استفاده در پروژه‌های فرانت‌اند است. ️ کاربرد: این ابزار به تو کمک می‌کنه تا آیکون‌های SVG رو به صورت پویا، قابل تنظیم و بهینه در پروژه‌هات استفاده کنی. همچنین شامل ابزارهایی برای مدیریت، تولید و بهینه‌سازی آیکون‌هاست که توسعه رابط کا ...

  • #SVG
  • #Icons
  • #Frontend
  • #React
  • #Vue
  • #DesignSystem
  • #UIComponents
  • #WebDevelopment
  • #Tooling
  • #ComponentLibrary

این یک راه‌حل کوچک، هوشمند و قابل اعتماد برای درج فایل‌های SVG به صورت inline در DOM است. کاربرد: وقتی می‌خوای بدون دردسر فایل‌های SVG رو مستقیماً توی صفحه قرار بدی و بتونی اون‌ها رو با CSS یا JavaScript کنترل کنی، این ابزار عالیه! در چه شرایطی بهتره استفاده بشه؟ وقتی با ایکون‌های SVG کار می‌کنی، یا ...

  • #svg
  • #javascript
  • #webdev
  • #performance
  • #caching
  • #icons
  • #frontend
  • #lightweight
  • #DOM
  • #iconfu

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

  • #SVG
  • #JavaScript
  • #Animation
  • #WebDesign
  • #InteractiveGraphics
  • #VectorArt
  • #Frontend
  • #UI
  • #DataVisualization
  • #svgdotjs

کاربرد: این کتابخانه شامل مجموعه‌ای زیبا از لوگوهای SVG است که به راحتی قابل دسترسی و استفاده در پروژه‌های توسعه‌دهندگان هستند. این لوگوها با دقت طراحی شده‌اند و با فناوری‌های مدرن مانند SvelteKit و Tailwind CSS ساخته شده‌اند تا یکپارچه‌سازی آسانی داشته باشند. در چه شرایطی بهتره استفاده بشه؟ اگر دار ...

  • #SVG
  • #SvelteKit
  • #TailwindCSS
  • #DeveloperTools
  • #WebDesign
  • #OpenSource
  • #UIComponents
  • #Frontend
  • #LogoLibrary
  • #DesignSystem

کاربرد: ابزاری مبتنی بر Node.js برای بهینه‌سازی فایل‌های SVG هست که حجم فایل‌ها رو کم می‌کنه بدون اینکه کیفیت تصویر در بیاد. ️ در چه شرایطی بهتره استفاده بشه؟ وقتی داری روی پروژه‌های وب کار می‌کنی و می‌خوای فایل‌های SVG رو سبک‌تر کنی تا سرعت بارگذاری صفحه بهتر بشه. همچنین برای استفاده در محیط‌های تو ...

  • #SVG
  • #Optimization
  • #NodeJS
  • #WebPerformance
  • #Frontend
  • #BuildTools
  • #Graphics
  • #DeveloperTools
  • #WebDev
  • #SVGO

تبدیل فایل‌های SVG به کامپوننت‌های React با قابلیت شخصی‌سازی بالا کاربرد: این ابزار به تو اجازه می‌ده تا فایل‌های SVG رو به صورت کامپوننت‌های React استفاده کنی، بدون نیاز به کپی دستی یا استفاده از تگ img. این کار رندر بهتر، اندازه کمتر و کنترل بیشتر رو فراهم می‌کنه. در چه شرایطی بهتره استفاده بشه؟ و ...

  • #SVGtoReact
  • #ReactComponents
  • #WebDevelopment
  • #FrontendTools
  • #UIUX
  • #IconManagement
  • #ReactIcons
  • #DeveloperTools
  • #CodeOptimization
  • #GregBerge_SVGR

این افزونه مرورگر به شما امکان می‌دهد عکس‌هایی از وب‌سایت‌ها در فرمت SVG بگیرید که هم مقیاس‌پذیر باشند و هم از نظر معنایی و دسترسی‌پذیری (accessibility) مناسب عمل کنند. کاربرد: این ابزار برای طراحان، توسعه‌دهندگان و نویسندگان فنی عالی است؛ چون می‌تونن از بخش‌های مختلف یک صفحه وب عکس بگیرن بدون اینکه ...

  • #web_extension
  • #svg_screenshot
  • #accessibility
  • #developer_tools
  • #designers
  • #scalable_graphics
  • #browser_tool
  • #tech_documentation
  • #ui_design
  • #felixfbecker_svg_screenshots

این پروژه یک مجموعهٔ رایگان و قابل سفارش از بیش از ۱۰۰ شکل SVG است که به راحتی می‌توان در پروژه‌های طراحی و توسعهٔ وب استفاده کرد. این شکل‌ها با دقت طراحی شده‌اند و امکان اضافه کردن گرادیان و سایر افکت‌های زیبا به SVG را فراهم می‌کنند. کاربرد: این مجموعه برای طراحان و توسعه‌دهندگان وب عالی است که به ...

  • #SVG
  • #WebDesign
  • #Frontend
  • #UIComponents
  • #Gradients
  • #FreeResources
  • #DeveloperTools
  • #DesignSystem
  • #VectorGraphics
  • #CustomShapes

این ابزار یک تبدیل‌گر SVG به SwiftUI است که به تو اجازه می‌دهد فایل‌های SVG رو به شکل‌های خالص SwiftUI تبدیل کنی. ️ کاربرد: وقتی می‌خوای یک لوگو، آیکون یا طراحی برداری رو در اپلیکیشن iOS خودت با SwiftUI پیاده‌سازی کنی، به جای استفاده از تصاویر رستری یا SVG درون Web View، می‌تونی اون رو به یک Shape خ ...

  • #SVGtoSwiftUI
  • #SwiftUI
  • #iOSDev
  • #VectorGraphics
  • #Swift
  • #UIAutomation
  • #DesignToCode
  • #AppleDeveloper
  • #ShapeBuilder
  • #CodeGeneration

SVG Wave یک ابزار کوچک، رایگان و زیبا برای تولید امواج گرادیانی SVG است که می‌تواند طراحی بعدی شما را جذاب‌تر کند. کاربرد: این ابزار به شما کمک می‌کند تا به راحتی امواج نرم و مدرن با گرادیان‌های دلخواه بسازید و در پروژه‌های طراحی خود — مثل وب‌سایت‌ها، صفحه landing، بخش‌های هدر یا پس‌زمینه — استفاده ...

  • #SVG
  • #Gradient
  • #WebDesign
  • #LandingPage
  • #UIUX
  • #BackgroundGenerator
  • #MinimalDesign
  • #WaveEffect
  • #Frontend
  • #DesignTool

این کتابخانه جاوااسکریپت به تو اجازه می‌دهد به راحتی یک یا چند نقشه جهان با فرمت SVG در وب‌سایت‌ت قرار بدی که شامل تمام کشورها و تقسیمات سیاسی سطح دوم (مثل استان‌ها، ایالت‌ها و مناطق) هست. چطور کار می‌کنه؟ با استفاده از این کتابخانه، می‌تونی نقشه‌های تعاملی جهان رو به صورت SVG نمایش بدی، مناطق مختلف ...

  • #SVG_Map
  • #Interactive_Map
  • #JavaScript_Library
  • #Data_Visualization
  • #World_Map
  • #Geographic_Data
  • #Web_Development
  • #Client_Side
  • #Offline_Map
  • #Customizable_UI

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

  • #webhooks
  • #event_driven
  • #open_source
  • #svix
  • #api_integration
  • #microservices
  • #cloud_native
  • #developer_tools
  • #enterprise_ready
  • #realtime_messaging

یک کامپوننت ساده برای نمایش پیام‌های کوتاه (توست) در فریم‌ورک Svelte کاربرد: وقتی می‌خوای به کاربر پیام کوتاهی مثل «ذخیره شد» یا «خطا رخ داد» نشون بدی، از این کامپوننت استفاده می‌کنی. در چه شرایطی بهتره استفاده بشه؟ وقتی به دنبال یک راه حل سبک، تمیز و بدون وابستگی‌های اضافی برای مدیریت پیام‌های موقت ...

  • #Svelte
  • #ToastComponent
  • #UIComponents
  • #WebDevelopment
  • #Lightweight
  • #Frontend
  • #DevTools
  • #UserExperience

این یک دایرکتیو ساده سولت (Svelte) برای نمایش تولتیپ (Tooltip) است. ️ با استفاده از آن می‌توانید به هر المان HTML یک تولتیپ اضافه کنید که هنگام هاور کردن نمایش داده شود. کاربرد: این دایرکتیو برای افزودن توضیحات کوتاه به عناصر رابط کاربری مثل دکمه‌ها، آیکون‌ها یا لینک‌ها مناسب است. مثلاً وقتی کاربر ر ...

  • #tooltip
  • #Svelte
  • #UI
  • #directive
  • #webdev
  • #frontend
  • #lightweight
  • #components
  • #developer
  • #ux

چیزی که بهش نیاز داشتی برای نمایش وضعیت پیشرفت در اپلیکیشن‌های iOS و tvOS! کاربرد: این کتابخونه یه HUD (نمایشگر اطلاعات روی صفحه) سبک و تمیزه که به راحتی می‌تونی ازش برای نمایش بارگذاری، موفقیت، خطا یا پیام‌های موقت استفاده کنی. در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای کاربر رو بدون قطع جریان کا ...

  • #ProgressHUD
  • #iOS
  • #Swift
  • #UIKit
  • #LoadingIndicator
  • #UserExperience
  • #tvOS
  • #SVProgressHUD
  • #MobileDev
  • #SwiftUI

یک روتر مدرن برای فریم‌ورک Svelte که ساده، سبک و قدرتمند است و به توسعه‌دهندگان کمک می‌کند تا به راحتی مسیرهای صفحات را مدیریت کنند. کاربرد: این کتابخانه برای مدیریت مسیریابی (Routing) در برنامه‌های Svelte طراحی شده و امکان ناوبری بین صفحات بدون نیاز به بارگذاری مجدد را فراهم می‌کند. مناسب برای ساخت ...

  • #Svelte
  • #Routing
  • #SPA
  • #WebDev
  • #Frontend
  • #JavaScript
  • #TypeScript
  • #sv_router
  • #Lightweight
  • #ModernWeb

این یک کتابخانهٔ متن‌باز از کامپوننت‌های Svelte برای دسترسی‌پذیری (Accessibility) است که به توسعه‌دهندگان کمک می‌کند تا رابط‌های کاربریِ سازگار با استانداردهای دسترسی‌پذیری (مثل WCAG) بسازند. کاربرد: این کتابخانه برای ساخت کامپوننت‌های وب قابل دسترس (Accessible) در پروژه‌های Svelte طراحی شده و به به ...

  • #Svelte
  • #Accessibility
  • #OpenSource
  • #WebDev
  • #UIComponents
  • #a11y
  • #Frontend
  • #ComponentLibrary
  • #InclusiveDesign
  • #Svve11

کاربرد: این ماژول به تو امکان می‌ده تا به راحتی مستندات API خودت رو با استاندارد OpenAPI (همون Swagger) در فریم‌ورک NestJS ایجاد کنی. با استفاده از این ماژول، می‌تونی یک رابط کاربری تعاملی برای تست و نمایش API‌ها داشته باشی که هم برای توسعه‌دهندگان داخلی و هم خارجی خیلی مفیده. در چه شرایطی بهتره است ...

  • #swagger
  • #nestjs
  • #openapi
  • #api_documentation
  • #typescript
  • #backend
  • #nodejs
  • #web_services
  • #developer_tools
  • #rest_api

کاربرد: این ابزار با استفاده از تعریف OpenAPI (معروف به Swagger)، به‌صورت خودکار مستندات، کلاینت‌های API و استاب‌های سرور را با کمک تمپلیت‌های موجود تولید می‌کند. ️ در چه شرایطی بهتره استفاده بشه؟ وقتی یک API دارید و می‌خواهید به راحتی کلاینت‌های مختلف (مثل جاوا، پایتون، جاوااسکریپت و غیره) را برای ...

  • #API
  • #OpenAPI
  • #Swagger
  • #CodeGeneration
  • #DevTools
  • #Automation
  • #Backend
  • #Documentation
  • #ClientLibrary
  • #ServerStub

کاربرد: این پروژه به تو کمک می‌کنه تا مستندات APIهای REST خودت رو به صورت خودکار و با استاندارد Swagger (OpenAPI) تولید کنی. این کار دسترسی به API رو برای توسعه‌دهندگان دیگه آسون‌تر می‌کنه و امکان تست، استفاده و درک بهتر سرویس‌هات رو فراهم می‌آره. در چه شرایطی بهتره استفاده بشه؟ وقتی داری یه سرویس R ...

  • #API
  • #Swagger
  • #OpenAPI
  • #REST
  • #Java
  • #SpringBoot
  • #Documentation
  • #DeveloperTools
  • #JAX_RS
  • #API_Design

کاربرد: ویرایش و نوشتن مستندات API با فرمت OpenAPI (قبلی Swagger) به صورت آنلاین و تعاملی ️ در چه شرایطی بهتره استفاده بشه؟ وقتی می‌خوای یک فایل OpenAPI بنویسی، ساختارش رو ببینی، خطاها رو تشخیص بدی و مستندات رو به صورت زنده و بهمراه پیش‌نمایش تست کنی، این ابزار عالیه چند مثال از موارد استفاده نوشتن ...

  • #API_Documentation
  • #OpenAPI
  • #SwaggerEditor
  • #REST_API
  • #DeveloperTools
  • #CodeEditor
  • #API_Design
  • #YAML
  • #JSON
  • #WebDevelopment

این ابزار به تو کمک می‌کنه تا فایل‌های Swagger یا OpenAPI رو به کلاس‌های جاوا (POJOs) تبدیل کنی. ️ این کاربردش خیلی مفیده وقتی می‌خوای بدون دستکاری دستی، مدل‌های داده رو بر اساس ساختار API تولید کنی. کاربرد: این کتابخونه، اسپک OpenAPI یا Swagger رو می‌خونه و به صورت خودکار کلاس‌های جاوا می‌سازه که م ...

  • #api
  • #openapi
  • #swagger
  • #java
  • #pojo
  • #restapi
  • #devtools
  • #backend
  • #automation
  • #codegeneration

کاربرد: این ابزار به تو می‌ده تا عملکرد، سلامت و آمار استفاده از APIهای Node.js رو در میکروسرویس‌ها رصد کنی. ️ با استفاده از این کتابخانه، می‌تونی تماس‌های API رو ردیابی کنی، زمان پاسخ‌ها رو ببینی و آمار استفاده از هر endpoint رو جمع‌آوری کنی — همه‌ش بدون نیاز به ابزارهای خارجی پیچیده. در چه شرایطی ...

  • #API_Monitoring
  • #NodeJS
  • #Microservices
  • #Observability
  • #Performance
  • #HealthCheck
  • #SwaggerStats
  • #DevOps
  • #API_Tracing
  • #UsageAnalytics

این ابزار یک تبدیل‌گر از Swagger به GraphQL است که به تو امکان می‌دهد APIهای مبتنی بر Swagger (OpenAPI) رو به صورت یک سرویس GraphQL دربیاری. کاربرد: این ابزار برای تیم‌هایی عالیه که از APIهای REST با مستندات Swagger استفاده می‌کنن ولی می‌خوان از مزایای GraphQL مثل درخواست داده‌های دقیق و کاهش overfe ...

  • #SwaggerToGraphQL
  • #OpenAPI
  • #GraphQLAdapter
  • #APIIntegration
  • #RESTtoGraphQL
  • #Microservices
  • #DeveloperTools
  • #APIGateway
  • #YaraX
  • #GraphQLEverywhere

کاربرد: این ابزار یک رابط کاربری تعاملی برای مستندسازی APIها به صورت خودکار ایجاد می‌کنه. وقتی API شما از استاندارد OpenAPI (که قبلاً Swagger نام داشت) پیروی کنه، Swagger UI یک صفحه زیبا و قابل تست از طریق مرورگر تولید می‌کنه که توسعه‌دهندگان می‌تونن درخواست‌ها رو ببینن، تست کنن و نتایج رو مشاهده کن ...

  • #API_Documentation
  • #OpenAPI
  • #SwaggerUI
  • #REST_API
  • #Developer_Experience
  • #Live_Demo
  • #Microservices
  • #API_Testing
  • #Web_Development
  • #Interactive_Docs

کاربرد: این پروژه یک رابط کاربری تعاملی برای نمایش و تست مستندات API های RESTful فراهم می‌کنه. توسعه‌دهندگان می‌تونن بدون نوشتن کد، اندپوینت‌های API رو تست کنن و مستندات رو بصورت زنده ببینن. در چه شرایطی بهتره استفاده بشه؟ وقتی نیاز به مستندسازی خودکار API دارین وقتی تیم‌ها می‌خوان مستندات رو بصورت ...

  • #API_documentation
  • #SwaggerUI
  • #REST_API
  • #webjars
  • #interactive_docs
  • #SpringBoot
  • #API_testing
  • #developer_tools

Swagger + Gin SwaGin، یک چارچوب تحت وب مبتنی بر Gin و Swagger این ابزار ترکیبی از قدرت Gin برای ساخت APIهای سریع و Swagger برای مستندسازی زنده است، تا توسعه را ساده‌تر و حرفه‌ای‌تر کند کاربرد: ساخت APIهای RESTful با قابلیت مستندسازی خودکار و تعاملی توسعه‌دهندگان می‌توانند مستندات Swagger را بدون نیا ...

  • #Gin
  • #Swagger
  • #API_Development
  • #GoLang
  • #REST_API
  • #Web_Framework
  • #Documentation
  • #DevTools
  • #Backend
  • #OpenAPI

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

  • #AITracking
  • #OpenSource
  • #PyTorch
  • #LLM
  • #ModelMonitoring
  • #DeepLearning
  • #SelfHosted
  • #MLOps
  • #SwanLab
  • #AIResearch

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

  • #distributed_systems
  • #elixir
  • #erlang
  • #swarm
  • #fault_tolerance
  • #process_distribution
  • #clustering
  • #high_availability
  • #otp
  • #scalability

این ابزار به شما امکان می‌دهد تا وظایف زمان‌دار را در محیط Docker Swarm اجرا کنید، مثل cron در سیستم‌های لینوکسی. کاربرد: وقتی نیاز دارید یک کانتینر یا تسک را در زمان‌های مشخص (مثلاً هر روز صبح ۸، هر ۳۰ دقیقه یکبار و غیره) در محیط Docker Swarm اجرا کنید، از این ابزار استفاده می‌کنید. در چه شرایطی به ...

  • #docker_swarm
  • #cronjob
  • #automation
  • #devops
  • #container
  • #scheduled_tasks
  • #backup
  • #monitoring
  • #ci_cd
  • #swarm_tools

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

  • #PaaS
  • #SelfHosted
  • #DockerSwarm
  • #OpenSource
  • #DevOps
  • #WebHosting
  • #SSL
  • #Automation
  • #Metrics
  • #Swarmlet

این پروژه یک ابزار مدیریتی برای خوشه‌های Swarm است که یک لایه میانی وبی سبک و کارآمد ارائه می‌دهد و با رابط کاربری Swarm UI کار می‌کند. کاربرد: این ابزار به شما کمک می‌کند تا مدیریت، نظارت و کنترل خوشه‌های داکر سوارم را از طریق یک رابط وب ساده و کاربرپسند انجام دهید. ️ در چه شرایطی بهتره استفاده بشه ...

  • #SwarmOps
  • #DockerSwarm
  • #ContainerManagement
  • #DevOpsTool
  • #WebUI
  • #LightweightTool
  • #SwarmUI
  • #Infrastructure
  • #CloudOps
  • #ContainerOrchestration

کاربرد: این ابزار یک رابط کاربری سبک و دوستدار موبایل برای مدیریت خوشه‌های Docker Swarm هست ️. با استفاده از این ابزار می‌تونی بدون نیاز به دستورات پیچیده ترمینال، سرویس‌ها، استک‌ها، شبکه‌ها و ولوم‌ها رو مدیریت کنی. در چه شرایطی بهتره استفاده بشه؟ وقتی که داری از Docker Swarm برای اجرای برنامه‌های خ ...

  • #DockerSwarm
  • #ContainerManagement
  • #DevOpsTool
  • #LightweightUI
  • #Swarmpit
  • #Microservices
  • #DockerUI
  • #SwarmMonitoring
  • #EasyDeployment
  • #MobileFriendly