نوشته های HosseinJc

فرم‌سازی در Vue به ساده‌ترین شکل ممکن با Vueform

HosseinJc — Wed, 20 May 2026 13:30:42 +0330

این پروژه واقعا کاربردیه و کسایی که vue کار میکنند به نظمر حتما باید بشناسند این رو. با این پروژه من یک کرادجنریتور ساختم که توی داشبردهام ازش استفاده میکنم.خود سایتش یه فرم بیلدر داره که میتونی فرمتون رو بسازید و فقط کانفیگش رو کپی کنید داخل پروژتون همچنین یه دستیار Ai داره که صرفا بهش میگید چی میخواید و تمام.بریم سراغشVueform چیست و چرا بین دولوپرها محبوب شده؟Vueform یک ابزار حرفه‌ای برای ساخت فرم در اکوسیستم Vue.js است که تمرکز اصلی‌اش روی اینه که ساخت فرم‌های پیچیده رو سریع، استاندارد و بدون دردسر کنه.در واقع Vueform فقط یه “فرم‌ساز ساده” نیست؛ بیشتر شبیه یک Form Engine کامل هست که هم UI آماده میده، هم validation، هم state management و هم قابلیت توسعه بالا.سایت رسمی: Vueformسازگاری با Tailwind و استایل‌دهی مدرنیکی از نکات مهم Vueform اینه که خیلی خوب با ابزارهای مدرن UI مثل Tailwind CSS سازگاره.یعنی چی دقیقاً؟می‌تونی استایل‌های پیش‌فرض Vueform رو نگه دارییا به راحتی override کنی با کلاس‌های Tailwindیا حتی فرم رو کامل “headless style” کنی و خودت UI رو از صفر طراحی کنیاین یعنی Vueform تو رو محدود نمی‌کنه؛ برعکس، خودش رو با استایل سیستم تو هماهنگ می‌کنه.تم‌ها (Themes) و استایل‌های آمادهVueform چند تا theme از پیش طراحی‌شده داره که باعث میشه بدون حتی یک خط CSS، فرم‌های حرفه‌ای داشته باشی.ویژگی تم‌ها:طراحی آماده (Modern / Clean / Minimal)هماهنگ با UI های امروزیمناسب dark/light modeقابل شخصی‌سازی کامل (colors, spacing, border radius و ...)در عمل تو می‌تونی:با یک theme شروع کنیبعدش کم‌کم customize کنییا کلاً سیستم طراحی خودت رو جایگزین کنیمعماری فنی Vueform (چرا حرفه‌ای حساب میشه؟)Vueform فقط چند input ساده نیست. ساختارش این شکلیه:1. Schema-based Formفرم‌ها معمولاً با یک schema تعریف میشن، یعنی:ساختار فرم جدا از UI تعریف میشهداده‌ها تمیز و قابل مدیریت هستنبرای فرم‌های بزرگ خیلی بهینه‌تره2. Reactive State Managementهمه input ها reactive هستن (بر پایه Vue reactivity system)، یعنی:تغییر یک فیلد = آپدیت فوری stateبدون نیاز به مدیریت دستی پیچیده3. Validation Engine داخلیVueform خودش یک سیستم validation داره که می‌تونه:required fieldsemail / number / pattern validationconditional rulesasync validation (مثلاً چک کردن یوزرنیم از API)رو پشتیبانی کنه.4. Component-based Architectureهر input در Vueform یک کامپوننت مستقل و قابل reuse هست:text inputselectcheckboxdate pickerfile uploadو حتی می‌تونی کامپوننت سفارشی خودت رو هم اضافه کنی.چرا Vueform از فرم‌های معمولی بهتره؟اگر بخوای با Vue معمولی یا حتی کتابخونه‌های ساده‌تر کار کنی:باید validation رو خودت هندل کنیstate management پیچیده میشهUI و logic قاطی میشهدر پروژه‌های بزرگ خیلی سریع messy میشهولی Vueform این‌ها رو جدا می‌کنه:UI + Logic + Validation = Modular & cleanمناسب چه پروژه‌هایی هست؟Vueform بیشتر به درد این سناریوها می‌خوره:داشبوردهای حرفه‌ای (Admin Panel)فرم‌های چندمرحله‌ای (Multi-step forms)سیستم‌های ثبت‌نام پیچیدهفرم‌های سازمانی (Enterprise forms)پروژه‌هایی که scalability مهمهچند نمونه کاربردی از Vueform در عملبرای اینکه بهتر بفهمیم Vueform چطور کار می‌کنه، چند سناریوی واقعی رو با هم ببینیم.1) فرم ثبت‌نام ساده (Sign Up Form)یه فرم معمولی ولی تمیز:نام کاربریایمیلرمز عبورتکرار رمزدر Vueform این مدل فرم‌ها معمولاً با schema ساخته میشن:{ type: 'form', elements: { name: { type: 'text', label: 'نام کامل', rules: ['required'] }, email: { type: 'text', inputType: 'email', label: 'ایمیل', rules: ['required', 'email'] }, password: { type: 'text', inputType: 'password', label: 'رمز عبور', rules: ['required', 'min:8'] } } }📌 نکته:دیگه لازم نیست دستی state و validation بنویسی، همه چیز declarative هست.2) فرم تماس با ما (Contact Form)این یکی خیلی رایجه:نامایمیلموضوعپیامVueform اینجا خیلی به درد می‌خوره چون validation رو خودش هندل می‌کنه:{ type: 'form', elements: { full_name: { type: 'text', label: 'نام', rules: ['required'] }, email: { type: 'text', inputType: 'email', label: 'ایمیل', rules: ['required', 'email'] }, message: { type: 'textarea', label: 'پیام شما', rules: ['required', 'min:20'] } } }📌 اینجا Vueform خودش:error message ها رو نمایش میدهvalidation لحظه‌ای انجام میدهUI رو مرتب نگه میداره3) فرم چندمرحله‌ای (Multi-Step Form)این یکی جاییه که Vueform واقعاً می‌درخشه.مثلاً:مرحله 1: اطلاعات شخصیمرحله 2: اطلاعات حسابمرحله 3: تایید نهاییVueform اینو خیلی clean مدیریت می‌کنه:step navigationحفظ state بین مراحلvalidation در هر مرحله📌 چیزی که معمولاً تو Vue خام خیلی دردسر داره، اینجا آماده‌ست.4) فرم آپلود فایل (File Upload Form)مثلاً برای CV یا مدارک:آپلود رزومه PDFآپلود تصویر پروفایلمحدودیت حجم فایلVueform اینجا هم built-in support داره:drag & drop uploadprogress barfile validation (size/type)5) فرم داینامیک (Conditional Form)یکی از حرفه‌ای‌ترین use case ها:مثلاً:👉 اگر کاربر گفت “شرکت هستم”➡ فیلدهای شرکت نمایش داده بشه👉 اگر گفت “فریلنسر هستم”➡ فیلدهای شخصی ساده بمونهVueform اینو با conditional logic هندل می‌کنه:show/hide fieldsتغییر validation بر اساس شرایطفرم کاملاً dynamic

آموزش تبدیل تصویر و پی دی اف به متن خیلی سریع و رایگان (ایرانی🇮🇷)

HosseinJc — Wed, 13 May 2026 14:41:58 +0330

اگه تا حالا یه عکس داشتی که روش متن بود و می‌خواستی همونو تبدیل کنی به متن قابل کپی، احتمالاً به مشکل خوردی 😅اینجاست که سایت mrocr.ir به کارت میاد.این سایت در واقع یه ابزار OCR هست؛ یعنی متن داخل عکس رو می‌خونه و برات تبدیلش می‌کنه به نوشته قابل ادیت.OCR یعنی چی اصلاً؟OCR مخفف Optical Character Recognition هست (ترجمه خودمونی: تبدیل عکس به متن 😄)یعنی چی؟یعنی مثلا:از یه جزوه عکس گرفتییا یه اسکرین‌شات از متن داریسایت میاد اون عکس رو اسکن می‌کنه و متن داخلش رو بیرون می‌کشه.چطور با mrocr.ir کار کنیم؟کار باهاش خیلی راحته، پیچیدگی خاصی نداره 👇1. وارد سایت شواول برو به سایت:👉 mrocr.ir2. عکس یا فایل رو آپلود کنتو صفحه اصلی یه گزینه آپلود داری.اونجا:عکس یا PDF رو انتخاب کنآپلودش کن4. دکمه تبدیل رو بزنبعد از آپلود، یه دکمه مثل “شروع” یا “تبدیل” هست.روش کلیک کن و صبر کن.5. متن رو بگیر و استفاده کنبعد از چند ثانیه، سایت متن رو برات درمیاره.حالا می‌تونی:کپی کنیتو Word بذارییا ویرایشش کنیاین سایت به چه درد می‌خوره؟خیلی جاها به کارت میاد 👇تایپ نکردن جزوه‌های طولانی 😎تبدیل اسکن کتاب به متناستخراج متن از عکس‌های آموزشیاستفاده برای تحقیق و مقاله

چطور یه نقشه درست‌حسابی به سایت‌مون اضافه کنیم؟ (بدون دردسر)

HosseinJc — Tue, 12 May 2026 14:31:28 +0330

ساخت نقشه تعاملیاگه یه سایت داری و هنوز توش نقشه نزاشتی، یه چیزی کم داره 😄فرقی نمی‌کنه سایتت فروشگاهیه، شرکتیه یا حتی یه وبلاگ ساده—نقشه می‌تونه خیلی کاربردی‌ترش کنه.تو این پست می‌خوام خیلی ساده بگم چطور نقشه رو به سایتت اضافه کنی، اونم با کمک ابزارهای MapTiler.irداخل بخش ساخت نقشه تعاملی برید نقشه خودتون رو بسازید.https://maptiler.ir/map-selectorاصلاً چرا نقشه بذاریم تو سایت؟بذار ساده بگم:کاربر سریع می‌فهمه کجاییبیشتر بهت اعتماد می‌کنهراحت‌تر پیدات می‌کنهسایتت حرفه‌ای‌تر به نظر میادمثلاً خودت وقتی میری یه سایت و آدرس داره ولی نقشه نداره، حس خوبی می‌گیری؟ معمولاً نه!1. بذارش تو سایت با iframe (خیلی کاربردی)این همون چیزیه که تو اکثر سایت‌ها می‌بینی 👇یعنی نقشه مستقیم داخل سایتت نمایش داده میشه.مزیتش:خیلی سریع راه میفتهنیاز به دانش خاصی ندارهتو وردپرس هم راحت استفاده میشه📌 بهترین گزینه برای صفحه «تماس با ما»2. حرفه‌ای بازی دربیار (با API)اگه یه کم فنی‌تر هستی، اینجا دیگه می‌تونی خفن‌بازی دربیاری 😎با API می‌تونی:چندتا لوکیشن بزاریمارکر سفارشی داشته باشینقشه تعاملی بسازییعنی کاربر با نقشه بازی کنه، زوم کنه، کلیک کنه و…📌 مناسب پروژه‌های جدی و اپلیکیشن‌ها

هوش مصنوعی و ترس از آینده شغلی

HosseinJc — Tue, 12 May 2026 09:31:32 +0330

اول از همه اینو بدون: هوش مصنوعی قرار نیست یه شبه بیاد همه رو بیکار کنه. تغییرش آروم‌آرومه، ولی پیوسته‌ست. یعنی چی؟ یعنی یه شغل کامل حذف نمی‌شه، بلکه تیکه‌تیکه تغییر می‌کنه.مثلاً فرض کن یه کارمند اداری قبلاً روزی ۸ ساعت فقط دیتا وارد می‌کرد. الان شاید ۴ ساعتش رو هوش مصنوعی انجام بده، ولی اون آدم می‌تونه وقتش رو بذاره روی کارهای مهم‌تر مثل تحلیل یا تصمیم‌گیری. پس شغلش از بین نرفته، شکلش عوض شده.حالا یه نکته مهم 👇هوش مصنوعی بیشتر از اینکه «شغل‌ها» رو حذف کنه، «وظیفه‌ها» رو حذف می‌کنه.یعنی توی هر کاری، اون بخش‌های تکراری، قابل پیش‌بینی و قانون‌مند سریع‌تر اتوماتیک می‌شن. ولی کارهایی که نیاز به این چیزا دارن، هنوز دست آدم‌هاست:خلاقیت (ایده دادن، نوآوری)ارتباط انسانی (مذاکره، همدلی)قضاوت (تصمیم‌های پیچیده)مسئولیت‌پذیریمثلاً:یه پزشک؟ AI می‌تونه کمک کنه تشخیص بده، ولی تصمیم نهایی و ارتباط با بیمار هنوز با آدمهیه طراح؟ AI می‌تونه طرح اولیه بده، ولی ایده خاص و سلیقه انسانی مهمهیه معلم؟ AI می‌تونه درس توضیح بده، ولی انگیزه دادن و درک دانش‌آموز کار آدمهحالا برسیم به یه سوال مهم‌تر:کی‌ها بیشتر در خطرن؟معمولاً این‌ها:کارهای خیلی تکراری (مثل اپراتورهای ساده)کارهایی که قانون مشخص دارن (مثلاً بعضی کارهای حسابداری پایه)کارهایی که نیاز به خلاقیت یا تعامل انسانی کم دارنو برعکس، کی‌ها جلو می‌افتن؟کسایی که بلد باشن با AI کار کنن (نه اینکه ازش بترسن)کسایی که مدام یاد می‌گیرنکسایی که چندتا مهارت با هم دارن (مثلاً هم فنی هم ارتباطی)یه مثال خیلی واقعی:الان یه تولیدکننده محتوا اگه از AI استفاده کنه، می‌تونه ۳ برابر سریع‌تر کار کنه. یعنی AI جای اون رو نگرفته، بلکه تبدیلش کرده به نسخه قوی‌تر خودش.آخرش چی می‌مونه؟ یه جمع‌بندی ساده 👇دنیا داره می‌ره به سمتی که:«تنهایی بلد بودن یه مهارت» کافی نیست«یاد گرفتن مداوم» تبدیل می‌شه به مهارت اصلیو «کار کردن کنار هوش مصنوعی» می‌شه یه مزیت خیلی بزرگپس بهترین کاری که می‌تونی بکنی اینه که به جای اینکه بپرسی «AI شغلمو می‌گیره؟»از خودت بپرسی:👉 «چطور می‌تونم از AI استفاده کنم که کارم بهتر بشه؟»

بهترین مخازن (mirror) برای هر زبان برنامه نویسی

HosseinJc — Mon, 11 May 2026 13:41:49 +0330

سلام بر همه دولوپرهای ایرانی 👋اگه تو ایران برنامه‌نویسی می‌کنی، احتمالاً این سناریو برات خیلی آشناست:یه پروژه رو بالا میاری، می‌خوای pip install یا npm install بزنی، بعد یا سرعت داغونه، یا نصفه دانلود می‌کنه، یا کلاً timeout می‌خوری 😐وقتی نتونی راحت پکیج بگیری، کل flow کارت به‌هم می‌ریزه. به‌جای اینکه تمرکزت روی کد زدن باشه، باید درگیر اینترنت، VPN، retry و این داستان‌ها بشی.ولی خب، یه نکته مثبت هم هست. تو این مدت، یه سری mirror و مخزن داخلی تو ایران راه افتاده که واقعاً کار رو خیلی راحت‌تر می‌کنن. سرعت بهتره، پایدارتره و حداقل برای کار روزمره خیلی به درد می‌خورن.امروز می‌خوام چندتا از این مخازن ایرانی رو معرفی کنم که بتونن یه کم از این دردسرها رو کم کنن 👇آروان:برای مخازن توزیع‌های مختلف لینوکس به نظرم خیلی عملکردش خوبه و واقعاً کار راه‌اندازه 👌https://arvancloud.ir/dev/linux-repositoryلیارا:تقریباً برای هر چیزی یه میرور داره؛ از پایتون گرفته تا npm و کلی چیز دیگه، کامل و کاربردی 👍https://liara.ir/mirrors/چطور از این میرورها استفاده کنیم؟ 🤔بسته به این‌که با چی کار می‌کنی، روش اتصال فرق داره. چندتا از رایج‌ترین‌ها رو می‌گم:🐍 برای Python (pip):می‌تونی موقت اینجوری نصب کنی:pip install package-name -i https://package-mirror.liara.ir/repository/pypi/یا دائمی تنظیمش کنی:لینوکس / مک:mkdir -p ~/.pip nano ~/.pip/pip.confبعد اینو اضافه کن:[global] index-url = https://package-mirror.liara.ir/repository/pypi/ویندوز:%APPDATA%\pip\pip.ini🟢 برای Node.js (npm):تنظیم موقت:npm install --registry=https://package-mirror.liara.ir/repository/npm/تنظیم دائمی:npm config set registry https://package-mirror.liara.ir/repository/npm/🐧 برای Ubuntu / Debian:فایل سورس لیست رو باز کن:sudo nano /etc/apt/sources.listبعد لینک‌های اصلی رو با میرور (مثلاً آروان) جایگزین کن، مثل:deb https://mirror.arvancloud.ir/ubuntu/ jammy main restricted universe multiverseبعد:sudo apt update🐳 برای Docker:اگه pull کردن ایمیج‌ها سخته، می‌تونی mirror registry ست کنی:{ "registry-mirrors": ["https://docker-mirror.liara.ir"] }مسیر فایل:/etc/docker/daemon.jsonبعدش:sudo systemctl restart docker💡 نکته:اگه یه میرور کند شد، سریع سوییچ کن به یکی دیگه. همیشه ۲-۳ تا گزینه داشته باشی خیلی کارت رو راه می‌ندازه.

چشم نامرئی در خانه: دیدن افراد با امواج وای‌فای

HosseinJc — Sun, 10 May 2026 11:10:40 +0330

اخیرا این پروژه رو بررسی میکردم خیلی پروژه جذابی بود ، اینم لینکش برای دوستان برنامه نویسhttps://github.com/ruvnet/RuViewراستش اول که دیدمش، فکر کردم یه چیز عجیب‌غریبه 😄ولی اگه خیلی ساده بگم:👉 این پروژه می‌گه:ما می‌تونیم فقط با وای‌فای بفهمیم توی یه اتاق چی داره اتفاق می‌افته — بدون دوربین!یعنی چی دقیقاً؟وقتی وای‌فای توی خونه یا محل کار روشنه، امواج رادیویی پخش می‌کنهبدن آدم این امواج رو تغییر می‌ده (حتی وقتی فقط نفس می‌کشه)این پروژه این تغییرات رو می‌گیره و تحلیل می‌کنهبعدش حدس می‌زنه:چند نفر توی اتاق هستنکجا ایستادنحتی ممکنه نفس کشیدن یا ضربان قلب رو هم تشخیص بده📦 به زبان خیلی ساده‌ترانگار:📡 وای‌فای = چشم نامرئی🧍‍♂️ آدم = چیزی که جلوی این چشم حرکت می‌کنهو این پروژه تلاش می‌کنه از روی “اختلال امواج” بفهمه چی داره می‌گذره.🏠 کاربردهاشطبق توضیحات خودش، می‌گه می‌تونه برای این کارها استفاده بشه:مراقبت از سالمندان (مثلاً تشخیص زمین خوردن)فهمیدن اینکه یه اتاق خالیه یا نهکنترل چراغ و کولر بر اساس حضور آدمشمارش افراد توی فروشگاه یا ادارهحتی پیدا کردن آدم زیر آوار (!)👍 نکات جالبش❌ دوربین نمی‌خواد → حریم خصوصی بهتر🌙 تو تاریکی هم کار می‌کنه🧱 حتی از پشت دیوار هم ممکنه کار کنه💸 ارزونه (می‌گه با یه چیپ ارزون esp32 هم راه میفته تو ایران حدود یک میلیون تومن هزینش هست)

بیس مپ ایرانی در ArcGIS pro و Qgis

HosseinJc — Sat, 09 May 2026 15:30:17 +0330

من برگشتم با ادامه همون پست قبلی 👇این بار می‌خوایم خیلی کاربردی بریم سراغ اینکه چطور از تایل‌هایMapTilerداخل نرم‌افزارهای GIS استفاده کنیم.اگر با ArcGIS یا QGIS کار می‌کنید، این دقیقاً همون چیزیه که کارتون رو سریع‌تر و حرفه‌ای‌تر می‌کنه.📌 استفاده در ArcGISداخل ArcGIS، شما می‌تونید به‌جای بیس‌مپ‌های پیش‌فرض، از تایل‌های خارجی استفاده کنید. برای این کار:از نوار بالا برو روی Mapگزینه Add Data → Data From Path رو بزنآدرس XYZ Tile رو به این شکل وارد کن:https://satellite.maptiler.ir/{z}/{x}/{y}(لینک دقیق رو از سایت MapTiler برمی‌داری)روی Add بزن، تموم 👌💡 نکته:حتما از نسخه های جدید ArcGIS استفاده کنید. نسخه های قدیمی پشتیبانی نمیکنند.📌 استفاده در QGISتو QGIS کار حتی راحت‌تره 😄از پنل Browser برید به بخش XYZ Tilesروی اون راست‌کلیک کنید و New Connection رو بزنیدیه اسم دلخواه بدید (مثلاً: MapTiler)آدرس XYZ Tile رو به این شکل وارد کن:https://satellite.maptiler.ir/{z}/{x}/{y}OK کنید و بعد لایه رو Drag & Drop کنید داخل پروژه

نقشه ماهواره ای ولی ایرانی

HosseinJc — Wed, 06 May 2026 21:16:46 +0330

مپ تایلر ، نقشه ماهواره ای ایرانیمن برگشتم با یه پست دیگه… تو این روزای سخت، بیشتر از همیشه کنار همیم و سعی می‌کنیم چیزایی رو به اشتراک بذاریم که واقعا به درد بخوره.این بار می‌خوام از تجربه‌ام با یه سرویس نقشه بگم که به نظرم خیلی کاربردیه؛ مخصوصاً اگه برنامه‌نویس هستید، با GIS کار می‌کنید، یا به‌طور خاص با ابزارهایی مثل ArcGIS سر و کار دارید. خلاصه هر کاری که یه جوری به نقشه و داده‌های مکانی وصل باشه، این سرویس می‌تونه براتون مفید باشه.احتمالاً می‌دونید که نقشه‌هایی که امروز تو وب استفاده می‌شن، بیشتر به صورت «تایل» ارائه می‌شن؛ یعنی کل سطح زمین رو به مربع‌های کوچیک تقسیم کردن تا بارگذاریش سریع‌تر و استفاده ازش تو اپلیکیشن‌ها راحت‌تر باشه. سرویس‌های بزرگی مثل Google و Esri این خدمات رو ارائه میدن، ولی همیشه یه جای خالی برای یه سرویس بومی حس می‌شد.راستش رو بخواید، من خودم قبلاً نمونه ایرانی جدی تو این حوزه ندیده بودم، چون تولید و نگهداری تایل‌های نقشه کار ساده‌ای نیست. اما اخیراً با یه سرویس ایرانی آشنا شدم که واقعاً سورپرایزم کرد:MapTiler . irچیزی که برام جالب بود اینه که می‌تونید خیلی راحت ازش تو پروژه‌هاتون استفاده کنید؛ چه برای توسعه وب، چه برای اپلیکیشن‌های مکانی و حتی داخل نرم‌افزارهایی مثل ArcGIS.یه نکته مهم برای اونایی که با ArcGIS کار می‌کنن: خیلی‌ها فکر می‌کنن باید فقط از بیس‌مپ‌ها و لایه‌های پیش‌فرض خود نرم‌افزار استفاده کنن، در حالی که میشه سرویس‌های خارجی رو هم بهش اضافه کرد و از انعطاف بیشتری برخوردار شد. من تو پست بعدی حتماً توضیح می‌دم چطور میشه این کار رو انجام داد.نکته جالب دیگه اینکه اگه نیاز داشته باشید، می‌تونید این سرویس رو روی سرور شخصی خودتون (چه تو شرکت، چه خونه یا هر جای دیگه) هم پیاده‌سازی کنید. البته طبیعیه که این بخش دیگه رایگان نیست، ولی برای پروژه‌های جدی می‌تونه خیلی ارزشمند باشه.اگر شما هم تجربه‌ای تو این زمینه دارید یا از سرویس مشابهی استفاده کردید، خوشحال می‌شم نظرتون رو بدونم 🌱

OCR رایگان ایرانی

HosseinJc — Tue, 21 Apr 2026 13:00:18 +0330

MrOcrشرایط سختیه - وضعیت اینترنت رو همه میدونیماین ابزار رایگان رو بعداز سرچ های سخت و نفس گیر پیدا کردم - رایگان میتونید عکس او سی آر کنیدالبته مجانی مجانی نیست باید یه صلوات بفرستید موقع استفاده 😄MrOcr دات آی آرتا جایی که بتونم ابزار های خوب میزارم کارتون راه بیوفته - اگر موردی بود که نیاز داشتید بهم بگید