سلام 👋،
به‌عنوان یک توسعه‌دهنده وب تمام پشته، از اشتراک‌گذاری کتابخانه‌های جاوا اسکریپت مورد علاقه‌ام، که در گذشته از آنها استفاده کرده‌ام و قویاً برای هر پروژه جدیدی پیشنهاد می‌دهم، هیجان‌زده هستم. در طول این پست، کتابخانه های مورد علاقه خود را برجسته می کنم، همچنین می خواهم توصیه های شما را در بخش نظرات بشنوم. اگر پیشنهادی برای کتابخانه های عالی دارید، من همه گوش هستم! بیایید شروع کنیم و به چند ابزار برای کمک به ما در مسیر توسعه وب نگاه کنیم. کدنویسی و کاوش مبارک!
یک تولید کننده شناسه رشته ای کوچک، ایمن، سازگار با URL و منحصر به فرد برای جاوا اسکریپت.
Nano ID ثابت کرده است که در زمینه تولید اسلاگ و مسیرهای منحصر به فرد برای داده های کاربر مانند پروژه ها و انجمن ها، یک تغییر دهنده بازی است. اگر با URL های پویا کار می کنید و نیاز به ساخت آیتم های تولید شده توسط کاربر دارید که ممکن است در سایت ها یا قالب های مختلف نشان داده شوند، Nano ID یک ابزار ضروری است.
یکی از مهمترین مزایای استفاده از Nano ID نسبت به سایر ژنراتورها عبارتند از:
- کم اهمیت. 130 بایت (مینی شده و گیزیپ شده). بدون وابستگی Size Limit اندازه را کنترل می کند.
- بی خطر. از یک ژنراتور تصادفی سخت افزاری استفاده می کند. قابل استفاده به صورت خوشه ای
- شناسه های کوتاه. از الفبای بزرگتر از UUID (A-Za-z0-9_-) استفاده می کند. بنابراین اندازه شناسه از 36 به 21 نماد کاهش یافت.
- قابل حمل. Nano ID به 20 زبان برنامه نویسی منتقل شد.
کار با Nano ID ساده است. تولید شناسه ها بسیار آسان است، کافی است مثال زیر را دنبال کنید:
import { nanoid } from 'nanoid'
model.id = nanoid() //=> "some_thing_unique"
آیا قبلاً از فرم ها استفاده کرده اید؟ اگر فرم طولانی با محدودیت‌های خاصی دارید، مانند عنوانی که باید 20 کاراکتر داشته باشد یا رمز عبوری که باید به اندازه کافی طولانی باشد، پردازش داده‌های کاربر ممکن است دشوار باشد. تنظیم چیزها به طور سنتی زمان می برد، و برخی افراد عاقل قبلاً هشدار داده بودند که هرگز به داده های کاربر اعتماد نکنید. من دو کتابخانه اختصاصی برای کمک به شما در اینجا دارم.
اعتبار سنجی طرحواره TypeScript-first با استنتاج نوع ایستا
Zod یک کتابخانه تعریف و اعتبارسنجی طرحواره است که به طور کامل در TypeScript نوشته شده است. من از کلمه “طرحواره” برای اشاره به هر نوع داده، از یک متن اولیه گرفته تا یک شی تودرتو پیچیده استفاده کردم.
Zod به گونه ای ساخته شده است که تا حد امکان برنامه نویس پسند باشد. هدف حذف اعلان‌های نوع اضافی است. با Zod، شما یک بار اعتبار سنج را مشخص می کنید و Zod نوع استاتیک TypeScript را برای شما استنباط می کند. انواع ساده تر را می توان به راحتی ترکیب کرد تا ساختارهای داده پیچیده تری را تشکیل دهد.
سایر ویژگی های قابل توجه عبارتند از:
- هیچ وابستگی وجود ندارد.
- Node.js و تمام مرورگرهای معاصر پشتیبانی می شوند.
- 8 کیلوبایت کوچک شده و فشرده شده است
- روش‌های غیرقابل تغییر (برای مثال، ()optional) یک نمونه جدید ایجاد می‌کنند
- رابطی که مختصر و زنجیره ای است
- رویکرد کاربردی تجزیه و تحلیل است اما اعتبار سنجی نیست.
- همچنین با جاوا اسکریپت ساده کار می کند! TypeScript لازم نیست.
قدرتمندترین زبان توصیف طرحواره و اعتبارسنجی داده برای جاوا اسکریپت.
Joi به شما امکان می دهد داده های خود را با استفاده از زبانی ساده، شهودی و خوانا توصیف کنید.
من از هر دو مورد ذکر شده در پروژه های مختلف استفاده کرده ام و متوجه شدم که ZOD در موقعیت من کاربرپسندتر است. با این حال، Joi ممکن است انتخاب بهتری برای شما باشد.
لطفا به من بگویید کدام یک از زود و جوی را ترجیح می دهید. شما همچنین می توانید هر انتخاب قابل مقایسه ای را که در دسترس است اضافه کنید 🙂
من دائماً به دنبال راهی برای نمایش مطالب markdown به عنوان یک توسعه دهنده بودم. میکند. از طرف دیگر کتابخانه زیر قادر به انجام این عملکرد است. جایی که می توانید یک علامت گذاری بنویسید و به صورت HTML با استایل مناسب به سبک GitHub ارائه می شود.
یک ویرایشگر نشانه گذاری اولیه با پیش نمایش ساخته شده با React.js و TypeScript. این React Component سعی میکند یک ویرایشگر اصلی Markdown با برجسته‌سازی نحو ارائه کند.
به یاد می‌آورم که به دنبال گزینه‌هایی برای رندر کردن علامت‌گذاری در NextJS بودم و با این بسته برخورد کردم که به خوبی کار کرد. این به من در راه اندازی سایت وبلاگم کمک کرد.
امکانات
- 📑 تورفتگی خط یا متن انتخابی با فشار دادن کلید تب، با تورفتگی قابل تنظیم.
- ♻️ بر اساس کپسوله سازی ناحیه متنی، به هیچ ویرایشگر کد مدرنی بستگی ندارد.
- 😻 پشتیبانی از نشانه گذاری با طعم GitHub.
- 🌒 از حالت تاریک / حالت شب پشتیبانی کنید.
- 💡 از next.js پشتیبانی کنید.
اگر برنامه شما برای ایجاد صفحه به یک منبع داده خارجی و غیره متکی باشد، مدیریت وضعیت های بارگیری در یک برنامه Nextjs بسیار مهم است.
من این کتابخانه را در حین شرکت در یک پروژه متن باز از طریق Hacktoberfest کشف کردم.
یک مؤلفه نوار بارگذاری بالای Next.js
این بسته یک چیز را بسیار خوب انجام می دهد: بازخوردی را برای کاربران در هنگام حرکت در وب سایت ها ارائه می دهد.
یک نوار پیشرفت در بالای درخت HTML ظاهر می شود و با بارگیری صفحه در سمت مشتری از بین می رود. این مقداری ورودی به کاربر نهایی ارائه کرد که به نظر من وقتی لازم بود کاربر احساس کند چیزی در راه است مفید بود :D.
همچنین می‌توانید لودر را بر اساس موضوع برنامه و رفتاری که می‌خواهید قرار دهید پیکربندی کنید.
- رنگ: برای تغییر رنگ پیش فرض TopLoader.
- موقعیت اولیه: برای تغییر موقعیت اولیه TopLoader بر حسب درصد، : 0.08 = 8%.
- crawlSpeed: افزایش سرعت تاخیر بر حسب میلی ثانیه.
- سرعت: سرعت انیمیشن برای TopLoader در ms
- تسهیل: تنظیمات انیمیشن با استفاده از easing (رشته کاهش CSS).
- ارتفاع: ارتفاع TopLoader بر حسب پیکسل.
- خزیدن: رفتار افزایش خودکار برای TopLoader.
- نشان دادن اسپینر: نشان دادن اسپینر یا نه.
- سایه: یک سایه صاف برای TopLoader. (برای غیرفعال کردن آن روی false تنظیم کنید)
وقتی روی یک پروژه بزرگ با تعداد کمی از دوستان کار می کنید، مهم است که از طریق تعهد خود به خوبی ارتباط برقرار کنید و گاهی اوقات ما تنبل هستیم، که باعث می شود تعهدی ساختاریافته برای دیگران نداشته باشیم که آنها بتوانند درک کنند. برای حل این مشکل ما به روشی نیاز داریم تا مجموعه ای از قوانین را توصیف کنیم که برای هر تعهدی که در پروژه انجام می دهید اعمال می شود.
آره!! ما در مورد هاسکی صحبت می کنیم 😀
هاسکی تعهدات و 🐶 پف شما را بهبود می بخشد!
می‌توانید از آن برای پر کردن پیام‌های commit، اجرای آزمایش‌ها، کد لینت و غیره در هنگام commit یا فشار استفاده کنید. هاسکی از تمام قلاب های Git پشتیبانی می کند.
برای کسب اطلاعات بیشتر می توانید به این سند مراجعه کنید.
اینها چند کتابخانه هستند که به نظرم مفید بوده و ترجیح می دهم در پروژه هایم از آنها استفاده کنم. اگر از این پست قدردانی کردید و کتابخانه های مفید جدیدی پیدا کردید، لطفاً نظر خود را بنویسید و لایک کنید.
ممنون 😍 که تا آخر خوندید. اگر این را مفید می دانید، لطفاً آن را با دوستان توسعه دهنده خود به اشتراک بگذارید.
