یک توسعه دهنده خوب بودن، فقط به معنی تولید محصولات خوب نیست؛ بلکه به معنی پیشروی با تغییرات روز نیز است. به روز بودن با دنیای همیشه در حال تغییر، کلید موفقیت است.
اما این به این معنی نیست که باید در تمام کنفرانس‌ها، ملاقات‌ها، رویداد‌ها شرکت کنید و تمام تکنیک‌های جدید را به کار بگیرید. چه مسئله اصلاحاتی در Codepen باشد، یا چه در GitHub، جامعه توسعه دهندگان تقریبا هر روز ایده‌های جالبی می دهند.
دنیای وب به معنی دست و پنجه نرم کردن با چنین مواردی است. مواردی مانند مولد‌ها، پلتفرم‌های آنلاین، Boilerplateها و ... تمام این کامپوننت‌های نرم افزاری برای همکاری در جریانات کاری ساخته شدند. اما وقتی مسئله ساخت وبسایت است، همگی به دنبال پلاگین‌های جاوااسکریپت هستیم که پاسخ سریعی به مشکلات ما می‌دهند.
برای مثال، Moon.js. این کتابخانه کوچک که تنها ۷ کیلوبایت حجم دارد، به طور ویژه برای رابط‌های کاربری آزمایشی ساخته شده است. این کتابخانه درست به مانند Vue یا React، کامپوننت‌هایی دارد که به شما اجازه می‌دهند در کمترین زمان بهترین رابط‌های کاربری را بسازید.
Tippy.js، با هدف پیشرفت بخش آموزنده پروژه با ارائه نکاتی غافلگیر کننده به کاربر ساخته شده است. این پلاگین می تواند Tooltipهایی را ساخته، و به پروژه اضافه کند. گزینه‌های سفارشی سازی بسیار گسترده هستند. شما می‌توانید سطوح، پیکان‌ها، انیمیشن‌ها و حتی تم‌ها را نیز تعیین کنید.
اگر به چیزی بیش از یک اعلان کوچک نیاز دارید، می‌توانید از صفحات اعلان که شامل پیشنهاد‌ها و داده‌های اضافی هستند، استفاده کنید. در این صورت، Modaal باید انتخاب اول شما باشد. این پلاگین ترکیب متفکرانه‌ای از کیفیت، انعطاف و دسترسی است. این پلاگین قابلیت اعمال شدن به هر نوعی از محتویات شامل عکس‌ها، ویدیو‌ها و گالری‌ها را دارد.
شاید هم به دنبال یک فیلد ورودی تاریخ برای پروژه خود باشید، که در این صورت باید Datedropper را در نظر داشته باشید.
گرچه این پلاگین در سال 2015 ساخته شده است، اما پیشرفت‌های زیادی به خود دیده است،که باعث می‌شوند یک کتابخانه jQuery قابل اعتماد برای ساخت ورودی‌های تاریخ خوب باشد.
تقریبا هر جنبه‌ای از رابط کاربری، می‌تواند با کمک پلاگین‌ها انجام شود. چه یک منوی راهنمای کشویی ظریف باشد که می‌تواند به کمک Canvi ساخته شود، یا چه دسته‌ای از نمودار‌ها که می‌توانند به کمک Billboard.js یا Markvis، که شامل تمام ابزار لازم برای شبیه‌سازی‌های موثر داده، و انجام خودکار تمام کار‌های سخت را دارد، باشد. محدوده استفاده از آن‌ها بسیار گسترده است. گرچه، نیازی نیست این را به شما بگویم. بیایید به ادامه مجموعه برویم.
گزینه های بعدی، Fitty و MediumLightbox هستند.
Fitty راهی برای جای دادن متون در محفظه‌ای مشخص است، و MediumLightbox جایگزین سبکی برای Lightbox معروف است، که قابلیت بزرگنمایی را به عکس‌ها می دهد.
یکی از رایج‌‌ترین ویژگی‌های رابط‌های مدرن، یعنی پنل‌های چسبان (Sticky Panel) را در نظر بگیرید. تقریبا هر وبسایتی از موقعیت گذاری چسبان برای فراهم کردن ویژگی‌های بیشتر هنگام مرور وبسایت برای کاربران استفاده می‌کند. مثلا یک دکمه «برو به بالا» یا «منوی اصلی». اگر چنین چیزی را در پروژه خود نیاز دارید، می توانید به سراغ StickyBits یا Sticky Sidebar بروید.
این پلاگین‌های جاوااسکریپت راه خوبی برای ساخت کامپوننت‌های چسبان هستند. گزینه اول برای ساخت Headerها، و گزینه دوم برای نوار‌های کناری مناسب است.
کمی جذابیت اضافه کنید
گذشتن از بخش عملگرای رابط کاربری کافی نیست، وب اپلیکیشن‌های امروزی نوعی فاکتور سرگرمی نیاز دارند. فرایند طراحی نیاز به چیزی دارد که تجربه کاربر را بهتر کند و اکتشاف پروژه را لذت بخش کند. قطعا اولین و معروف‌ترین انتخاب، تعاملاتی هستند که تجربه کاربر را از زوایای مختلف پیشرفت می‌دهند. در اینجا، پیشنهاد می‌کنم که Micron و AnimatePlus را به کار بگیرید.
Micron دقیقا به درد چنین مواقعی می‌خورد. این کتابخانه جاوااسکریپت مجوعه‌ای از تعاملات است، که می‌توانند به سادگی و با استفاده از صفاتی خاص به عناصر DOM اضافه شوند.
AnimatePlus یک کتابخانه سبک برای به حرکت در آوردن عناصر HTML یا SVG است. با استفاده از این پکیج، می‌توانید شدت، مدت، تاخیر، جهت، حلقه، سرعت و بسیاری فاکتور‌های دیگر را کنترل کنید.
اگر فقط می‌خواهید رابط کاربری خود را با کمی ویژگی‌های لذت بخش پیشرفت دهید، باید به سراغ Moving Letters، PixelWave، Blotter.js و Bubbly Bg بروید. این چهار ابزار حس پر زرق و برقی به پروژه می‌دهند. بیایید نگاهی به هر کدام داشته باشیم.
Moving Letter برای کلمات متحرک استفاده می‌شود. این پلاگین مجموعه‌ای کوچک است، که توسط Tobia Ahlin با استعداد، کسی که راه‌های زیادی برای فن چاپ (Typography) را توسعه داد، ساخته شده است. در کنار هر افکت، یک قطعه کد وجود دارد که به سادگی می‌توانید به پروژه‌تان اضافه کنید.
درست مثل مثال قبلی، Blotter.js نیز برای ساخت افکت متن است.
Pixelwave ابزاری برای قرار دادن Transition میان صفحات یا اسلاید‌ها با استفاده از یک افکت هندسی ساده است.
Bubbly.bg نیز ابزاری برای ساخت یک نقاشی با یک انیمیشن حباب است، که کل دید کاربر را فرا می‌گیرد.
افکت‌های قبلی زیبا و دوست داشتنی هستند، اما کوچک و کوتاه‌اند. اگر به دنبال راهی عجیب‌تر و گسترده‌تر برای تحت تاثیر قرار دادن کاربران هستید، می‌توانید نگاهی به CSS Doodle، Draggable و Pts.js بیندازید.
این پلاگین‌ها از دسته‌های مختلفی هستند و کار‌های متفاوتی انجام می‌دهند، اما یک چیز مشترک دارند: آن‌ها می‌توانند به رابط‌های کاربری فاکتور‌های جالبی بدهند.
CSS Doodle یک کامپوننت وب است که شما را قادر می‌سازد به طور برنامه نویسی الگو‌هایی با استفاده از CSS خالص بکشید.
Draggable یک کتابخانه سبک برای اضافه کردن عملکرد کشیدن و انداختن (Drag and drop) به پروژه شما است. این پلاگین کاملا قابل دسترسی، قابل دسته بندی، قابل تعویض و قابل انعطاف است.
در Pts.js، هدف ساخت یک بلوک ساده است که آن‌را به بلوک‌های دیگر متصل می‌کنید و مجموعه‌ای از نقاط را می‌سازید. می‌توانید از آن برای ساخت شاهکارهایی بر پایه ذرات بسازید.
آخرین ابزار Emergence.js است. بر خلاف پلاگین‌های قبلی که اساسا راه حل‌هایی از پیش ساخته شده هستند که از قوانین خود پیروی می‌کنند، Emergence.js یک ابزار انعطاف پذیر است که پایه‌ای محکم برای آزمایشات فراهم می‌کند. هدف این پلاگین، تشخیص میزان در دیدرس بودن عناصری خاص در مرورگر است، تا بتوانید ویرایش‌های مورد نظر را انجام دهید.
نتیجه گیری
پلاگین‌های جاوااسکریپت مانند دستیار‌های شخصی هستند. مطمئنا هر کاری که توسط آن‌ها انجام می‌شود، می‌تواند توسط خود توسعه دهنده نیز انجام شود؛ اما وقتی که کار‌های مهم‌تری دارید، چرا باید وقت خود را بر روی این موارد بگذارید؟ از پلاگین‌ها برای صرف کردن وقت خود بر روی مواردی که مهم‌تر هستند استفاده کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید