Kaptain Kitty
انتشار :۱۶ دی ۱۳۹۵
بازدید :123 بار

یک سال دیگر گذشت و همانطور که همه ی ما انتظار داشتیم انفجار نوآوری، از هم گسیختگی و نابودی در پلتفرم های وب ادامه دارد و یک سیل عظیم از ابزار ها و تکنولوژی های جدید که نوید می دهند زندگی ما برنامه نویسان را ساده تر کنند.

ما در سه قسمت می خواهیم ابزارهای متنوع و جالبی را که امسال ارائه شدند به شما معرفی کنیم.

قسمت های دوم و سوم را می توانید از طریق لینک های زیر مطالعه کنید:

ابزار های front-end جالب در سال ۲۰۱۶ – قسمت دوم

ابزار های front-end جالب در سال ۲۰۱۶ – قسمت سوم

 

طبق معمول، آپدیت هایی را در ابزار های محبوب مانند React و  Angular JS مشاهده کردیم، در حالی که ابزار های جدید مانند فریم ورک Vue.js پا به صحنه گذاشته و خیلی زود طیف زیادی از توجهات را به خود جلب کرد.

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

Modaal

همیشه اینطور به نظر میرسد که ابزارهایی که با قابلیت دسترسی پذیری ارائه می شوند خیلی در صنعت آی تی مورد اقبال قرار نگرفته اند. بنابراین اولین موردی که می خواهیم در اینجا معرفی کنیم این پلاگین Modal انعطاف پذیر و سهل الاستفاده می باشد.

پلاگین Modaal

پلاگین Modaal

یافتن پلاگین پنجره ی مودال کار سختی نیست اما به ندرت میتوان پلاگینی یافت که تقریبا تمام باکس ها را بر حسب کارایی و مشخصات بررسی کند. این پنجره ی مودال دقیقا همانطور که پیش بینی میشود رفتار می کند- responsive است و عملکرد های آن دقیقا بر اساس تعامل کاربری می باشد (مثلا وقتی دکمه ی ESC را بزنید، برنامه بسته می شود)، تقریبا تمام انواع محتوا را می پذیرد، دارای پشتیبانی تمام صفحه است، رویداد های callback را برای قبل و بعد باز و بسته شدن ارائه می دهد و کلی ویژگی های دیگر.

تنها مشکل Modaal این است که این ابزار در حال حاضر از jQuery به عنوان dependency استفاده می کند که با jQuery slim build به خوبی کار نمی کند. در نسخه ی ۲٫۰ نیز تست شده و انتظار می رود که با jQuery 1.11.2 وبالاتر نیز کار کند.

Jam API

این وب سرویس برای موارد مختلفی به کار آید و لزوما تنها به برنامه نویسی front-end مرتبط نیست. آن را می توان اینگونه توصیف کرد: “سرویسی که به شما این امکان را می دهد که هر سایتی را به یک API با دسترسی به JSON تبدیل کنید که از سلکتور های CSS استفاده می کند”. پس Jam API ابزاری است که به شما امکان جمع کردن محتوا از وب سایت های دیگر و انتشار آن در وبسایت خودتان را می دهد (content scrape) – اما بخش CSS در واقع این ابزار را برای برنامه نویسان front end جالب توجه می سازد.

ابزار فوق العاده ی JAM API

ابزار فوق العاده ی JAM API

برای استفاده از این API، باید یک درخواست POST به وبسایت Jam API ارسال کنید که حاوی URL وبسایتی باشد که می خواهید کار content scrape را بر روی آن اجرا کنید. این کد بر اساس اینکه از Node، Ruby و غیره استفاده می کنید متفاوت خواهد بود. ما مثال JavaScript را توسعه دادیم که آنها در منبع GitHub خود قرار داده اند. با استفاده از آن مثال توانستیم یک ابزار ساده برای امکان نمایش مقادیر ممکن برای هر یک از خصوصیات CSS بسازیم که از وبسایت CSS Values برداشته شده است.

البته این مثال هدف خاصی را دنبال نمی کند زیرا وبسایت CSS Values دیگر این مثال را ندارد اما این راهی ساده برای نشان دادن نحوه ی کار Jam API می باشد. بخش کلیدی JavaScript این است:


body: JSON.stringify({

url: 'http://cssvalues.com',

json_data: '{"values": "#' + prop + ' ul"}'

})

در اینجا من URL وبسایتی که می خواهم محتوای آن را scrape کنم وارد می کنم سپس از یک سلکتور CSS برای تعیین بخشی از صفحه که می خواهیم محتوا از آن برداشته شود استفاده می کنم. بنابراین اگر کاربر خصوصیت  displayرا وارد کند، جاوا اسکریپت به صورت زیر محاسبه می کند:


body: JSON.stringify({  url: 'http://cssvalues.com',  json_data: '{"values": "#display ul"}'})

با ایجاد سایت توسط خودم، میدانم که هر یک از بخش های خصوصیت CSS دارای یک ID می باشد که با نام آن خصوصیت منطبق است. و همچنین می دانم که هر خصوصیت، مقادیر خود را در تگ UL فهرست می کند. بنابراین اگر با ساختار HTML آشنایی داشته باشید، به دست آوردن آن مقادیر با استفاده از سرویس مفیدی مانند این، کاری ساده و پیش پا افتاده است.

 

قسمت های دوم و سوم را می توانید از طریق لینک های زیر مطالعه کنید:

ابزار های front-end جالب در سال ۲۰۱۶ – قسمت دوم

ابزار های front-end جالب در سال ۲۰۱۶ – قسمت سوم

Ajax DevTools Timeline Viewer jQuery Postcss-grid-kiss آژاکس آموزش فریم ورک جاوااسکریپت ابزار Notification Logger اپلیکیشن ایمیل ساز MJML پلاگین Modaal جاوااسکریپت طراحی responsive فریم ورک jquery فریم ورک جاوا اسکریپت فریم ورک چیست کتابخانه ی Intercooler.js
مطالب مرتبط

در سپتامبر سال گذشته، فریم ورک محبوب جاوا اسکریپت Vue.js نسخه ی v2 خود را منتشر کرد و از آن وقت تا کنون من واقعا مشتاق بودم آن را امتحان کنم تا ببینم کار کردن با آن چطور است. به عنوان کسی که با فریم ورک Angular و فریم ورک React هم آشنایی کامل دارد، […]

یکی از معضلات برنامه نویسی وب برای موبایل این است که سرعت اجرای وب اپلیکیشن ها روی مرورگر ها کم و نسبتا آزاردهنده است. البته راه های زیادی برای حل این مشکل وجود دارد. یکی از این راه ها استفاده از ابزار Google AMP می باشد. این پروژه به طور رسمی در ۷ اکتبر سال […]

سال ۲۰۱۶ بر طبق دیدگاه شما سالی به یاد ماندنی، عجیب و تا حدی سرشار از پیروزی و یا وحشت آور بوده باشد. تمرکز به تنهایی بر روی جاوا اسکریپت در مقایسه با سایر رویداد های سال ۲۰۱۶ ممکن است نامعقول و کم اهمیت به نظر برسد اما جاوا اسکریپت بخش عظیمی از زندگی کاری […]

Postcss-grid-kiss وقتی برای اولین بار با این مورد مواجه شدم، فکر کردم فقط یک شوخی است. اما همانطور که واضح است یک پلاگین واقعی PostCSS می باشد و هدف آن ساده سازی سینتکس Grid جدید W3C می باشد. طبیعتا وقتی از آرایش شبکه ای (Grid Layout) استفاده می کنید، CSS شما ظاهری شبیه به این را […]

نظراتتان را برایمان بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب ما تو این شبکه های اجتماعی هم پخش میشه