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

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

دسته ها :جاوا اسکریپت

انتشار :۱۶ دی ۱۳۹۵

---

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

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

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

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

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

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

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

Modaal

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

پلاگین 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

برای استفاده از این 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

Twitter Facebook Google+ Share on LinkedIn

مطالب مرتبط

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

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

schedule۱۶ دی ۱۳۹۵ visibility9

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

DevTools Timeline Viewer این یک ابزار رسمی از تیم ChromeDev Tools می باشد که به شما این امکان را می دهد تا URL ها را به راحتی برای رهگیری تایم لاین DevTool های خود نمایش داده و به اشتراک گذاری کنید. تب تایم لاین در بخش DevTools مرورگر کروم به شما این امکان را می […]

schedule۱۶ دی ۱۳۹۵ visibility9

Blisk مرورگر جدید برنامه نویسان وب

از کدام مرورگر برای کارهای روزانه ی برنامه نویسی اتان استفاده می کنید؟ قطعا یا Chrome و یا Firefox و می دانم که عده ی زیادی از مرورگر کروم استفاده می کنید. البته این سوال بیشتر، از برنامه نویسان کلاینت (جاوااسکریپت) پرسیده می شود. خود من از کروم استفاده می کنم. چرا که استانداردهای وب […]

schedule۸ تیر ۱۳۹۵ visibility839

تحلیلی بر ۳ فریم ورک حرفه ای و پیشرفته ی جاوا اسکریپت

  قطعا شما هم به این مشکل (دردسر) برخورده اید که در دنیای برنامه نویسی جاوا اسکریپت (کلاینت)، تکنولوژی ها به شدت در حال به روز شدن هستند و فرصت یاد گیری همه ی آنها وجود ندارد. با این حال برخی از این عناوین آنقدر مهم می شوند که نمی توان به راحتی از کنارشان […]

schedule۷ تیر ۱۳۹۵ visibility1067