ماسکیتو: جام مقدس پوشاندن ورودی

اگر تا به حال روی فرم‌های کاربری پیچیده کار کرده‌اید، قطعاً به یک راه‌حل پوشش نیاز دارید. شما می خواهید اعداد شما به درستی قالب بندی شوند، بنابراین برای کاربران آسان است که مطمئن شوند مقدار صحیح را در یک نگاه وارد کرده اند. یا شماره کارت اعتباری را با یک کارت واقعی مقایسه کنید، تلفن یا تاریخ تولد یا زمان ملاقات آنها را وارد کنید. ماسک کردن موارد استفاده زیادی در وب دارد اما یافتن راه حل خوب کار آسانی نیست. در بسیاری از مواقع پنهان کردن کتابخانه ها می تواند باعث ناامیدی هم برای توسعه دهندگان و هم برای کاربران شود. مشکلات رایج عبارتند از پرش کردن، مشکلات با نمادهای اضافه شده مانند خط تیره یا براکت، تکمیل خودکار مرورگر یا خطا در ارائه سمت سرور و API پیچیده.

ما با این مشکلات بیگانه نبودیم و در مقطعی تصمیم گرفتیم منابع جدی را به راه حل خود اختصاص دهیم. امروز می خواهم آن را به شما ارائه دهم و توضیح دهم که چرا ارزش توجه شما را دارد.

ماسکیتو چیست و چرا باید به آن اهمیت دهید؟

Maskito مجموعه ای از کتابخانه ها برای پوشاندن ورودی با تمرکز بر UX و DX است. می توانید پورتال اسناد گسترده ما را بررسی کنید. در آنجا می‌توانید نمونه‌های فراوانی را بیابید، و همچنین توضیح دقیقی از API پیدا کنید. بخش “شروع به کار” اصول اولیه را توضیح می دهد و به سرعت شما را با مفاهیم و موارد استفاده آشنا می کند. همچنین می‌توانید مقاله فنی‌تر توسعه‌دهنده اصلی Maskito را بخوانید نیکیتا بارسوکوف.

البته ماسکیتو تنها راه حلی نیست که می توانید پیدا کنید. اما من معتقدم چیزهای خاصی وجود دارد که آن را از اکثر گزینه های موجود در حال حاضر متمایز می کند. از این رو عنوان جاه طلبانه این مقاله است. بیایید به طور خلاصه بررسی کنیم که چرا باید Maskito را در نظر بگیرید اگر به دنبال راه حلی برای ماسک کردن پروژه خود هستید.

توسط شرکت پشتیبانی می شود

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

تیم ما در حال حاضر مجموعه‌ای از پروژه‌های مورد استقبال، به‌ویژه در اکوسیستم Angular، مانند Taiga UI، ng-polymorpheus و Web API برای Angular دارد تا به چند مورد اشاره کنیم. ما آنها را بسیار جدی می‌گیریم، زیرا پروژه‌ها یا سرگرمی‌های حیوان خانگی نیستند (اگرچه ما آنها را طوری دوست داریم که انگار هستند). بنابراین می‌توانید انتظار داشته باشید که اسناد ما به راحتی قابل پیمایش باشند، نمونه‌ها فراوان باشند و ارتباطات بدون زحمت انجام شود.

چارچوب آگنوستیک

چه از React، Vue یا Angular برای محصول خود استفاده کنید یا به فریمورک دیگری یا حتی وانیلی جاوا اسکریپت تکیه کنید – Maskito شما را تحت پوشش قرار داد. بسته اصلی ما بدون وابستگی است و می توان از آن در هر برنامه کاربردی frontend استفاده کرد. و همچنین از پیش تنظیمات ماسک که در زیر به آنها خواهیم پرداخت.

در زمان نوشتن بسته‌های اختصاصی برای استفاده راحت از Maskito در React، Vue و Angular داریم. از آنجایی که API عمومی نسبتاً مختصر است، گسترش پشتیبانی به سایر چارچوب‌های محبوب آسان است. پیکربندی پوشش واقعی یکسان است و می توان به راحتی در پروژه ها و معماری های مختلف به اشتراک گذاشت.

محیط زیست آگنوستیک

Maskito در همه مرورگرهای مدرن بدون توجه به محیطی که آن را اجرا می کنید کار می کند. می توانید از Web Components با Shadow DOM استفاده کنید یا از SSR برای بهبود زمان خود برای تعامل و SEO استفاده کنید — ورودی های شما با تلاش برای دسترسی به “پنجره” مشکلی برای شما ایجاد نمی کند. تحت nodejs یا درهم ریختگی با فوکوس کپسوله شده. همچنین روی دستگاه‌های لمسی و صفحه‌کلیدهای مجازی هم در ورودی‌ها و هم در عناصر متنی به درستی کار می‌کند. تعامل با کلیپ‌بورد، لغو/دوباره، کشیدن و رها کردن متن یا تکمیل خودکار مرورگر نیز توسط Maskito پوشش داده می‌شود.

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

کد کیفیت

Maskito توسط یک توسعه‌دهنده با تجربه و تیمی از مشارکت‌کنندگان با سابقه ارائه راه‌حل‌های پرکاربرد همه‌کاره و کتابخانه‌های منبع باز نگهداری می‌شود. چندین متخصص توسعه‌دهنده Google سرپرستی پروژه را بر عهده دارند و مطمئن می‌شوند که تصمیمات معماری به خوبی فکر شده و در درازمدت منطقی هستند.

همه کدها در TypeScript دقیق نوشته شده اند و با هزاران تست e2e پوشش داده شده و مشارکت های جامعه به طور کامل بررسی می شوند. ما خطوط لوله و خطوط لوله خودکار را پیکربندی دقیقی داریم که سال ها در پروژه های دیگر کامل کردیم تا مطمئن شویم که نقص فنی به انتشار نمی رسد. ما از آن در یک محصول تجاری چند میلیون کاربر استفاده می کنیم. به نفع ماست که کارت در تمام فیلدهای ورودی شما نپرد.

نه فقط ما

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

اما این فقط ما نیستیم – Ionic Framework، یک راه حل رابط کاربری چند پلتفرمی با نزدیک به 50 هزار ستاره در GitHub، Maskito را به عنوان توصیه رسمی کتابخانه ماسکینگ خود پذیرفته است. تیم آنها تحقیقی در مورد جایگزین های موجود انجام داد و گزینه ای را برای توسعه ماسک خود در نظر گرفت. آنها تصمیم گرفتند که Maskito نیازهای پایگاه کاربری بسیار متنوع آنها را برآورده کند و نمونه هایی از پوشاندن اجزای خود را به مستندات اضافه کردند.

آماده برای استفاده

Maskito با بسته ای اختصاصی از ماسک های آماده ارائه می شود. ما یک کتابخانه اجزای عظیم داریم که دارای قالب‌بندی اعداد، کارت‌های اعتباری، تلفن‌ها، تاریخ‌ها و غیره است. در ده‌ها برنامه کاربردی در سراسر اکوسیستم ما استفاده می‌شود، جایی که پوشش اضافی برای کدهای پستی، آدرس‌های IP، شماره سریال و غیره مورد نیاز است. پس از پیاده سازی و آزمایش مناسب، تمام موارد قابل اجرا استخراج شده و مجددا مورد استفاده قرار می گیرند.

این مجموعه‌ای از پیش‌تنظیمات در حال رشد است که می‌توانید آن‌ها را همانطور که هست بگیرید و مطمئن شوید که به درستی رفتار می‌کنند. می‌توانید در آن مشارکت کنید یا یک درخواست ویژگی برای یک راه‌حل خاص در مخزن GitHub ما مطرح کنید. این باعث می‌شود که Maskito آنقدر کوچک یا جامع باشد که شما نیاز دارید. بسته اصلی فقط حدود 3 کیلوبایت gzip است و هر قطعه از پیش تنظیم شده درختی قابل تکان است، بنابراین بسته نرم افزاری شما در دستان امن است.

خلاصه

Maskito برای استفاده شخصی و تجاری رایگان است و تحت مجوز Apache 2.0 منتشر شده است. من واقعاً به کاری که تیم انجام می دهد افتخار می کنم و معتقدم که بهترین راه حل برای این کار است. امیدوارم بتواند به شما کمک کند تا ایده های خود را برای کاربران و توسعه دهندگان خود به شیوه ای روان زنده کنید. Maskito را بررسی کنید و اگر آن را دوست دارید، با یک ستاره از ما حمایت کنید و ما را در انتشار این خبر یاری کنید. ماسک زدن به همه مبارک!