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

Postcss-grid-kiss

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

طبیعتا وقتی از آرایش شبکه ای (Grid Layout) استفاده می کنید، CSS شما ظاهری شبیه به این را خواهد داشت:


body {
  display: grid;
  align-content: space-between;
  grid-template-rows: 120px 1fr 60px; 
  grid-template-columns: 150px 1fr;
  grid-template-areas:   "header  header"  "sidebar main  "  "footer  footer"
} 
body >
 header {
  grid-area: header; 
 align-self: start
}
 body > .sidebar {
  grid-area: sidebar
}
 body >
 main {
  grid-area: main
}
 body > footer {  grid-area: footer;  justify-self: center;  align-self: end}

اما با استفاده از postcss-grid-kiss، چیزی شبیه به این را خواهید نوشت:


body {  grid-kiss:    "+------------------------------+      "    "|           header ↑           | ۱۲۰px"    "+------------------------------+      "    "                                      "    "+--۱۵۰px---+  +----- auto -----+      "    "| .sidebar |  |      main      | auto "    "+----------+  +----------------+      "    "                                      "    "+------------------------------+      "    "|              ↓               |      "    "|         → footer ←           | ۶۰px "    "+------------------------------+      "}

بله درست می بینید. در واقع شما آرایش وبسایت خود را با استفاده از کاراکتر های ASCII به عنوان مقادیر خصوصیت grid-kiss رسم می کنید. سپس این پلاگین کد را نسبت به معادل CSS معتبر، مشابه با آنچه که در اولین بلوک کد ها می بینید پردازش می کند.

این سند شامل یک بخش است که می توانید سینتکس را امتحان کنید. برنامه نویسان می توانند کلید insert بر روی کیبورد خود را تبدیل کرده و از ویژگی چند مکان نمایی ویرایشگر متنی خود برای کارامد تر ساختن رسم شبکه استفاده کنند.

MJML App

ایمیل HTML در حال رونق گرفتن است و همانطور که احتمالا توجه کرده اید منابع و ابزار هایی هر ماه در حال انتشار است تا به کدنویسی و طراحی newsletter های ایمیل های واکنشگرا(Responsive) کمک کند. MJML app یک اپلیکیشن دسکتاپی native می باشد که به شما این امکان را می دهد تا ایمیل های HTML واکنشگرا را با استفاده از MJML که یک فریم ورک زبان مارک آپ سفارشی می باشد ایجاد و ویرایش کنید.

اپلیکیشن ایمیل ساز MJML
اپلیکیشن ایمیل ساز MJML

فریم ورک و اپلیکیشنش هر دو در اوایل امسال منتشر شدند و اپلیکشن بر روی ویندوز، OSX و لینوکس موجود می شود. ویرایشگر میتواند از بین theme های مختلف انتخاب کرده و یک نمایش split-screen با پیش نمایش زنده ارائه می دهد.

در اینجا یک مثال ساده از سینتکس MJML را می بینید:


<mjml>  <mj-body>    <mj-container>      <mj-section>        <mj-column>           <mj-text>Testing</mj-text>         </mj-column>      </mj-section>    </mj-container>  </mj-body></mjml>

این کد سپس به یک HTML معتبر رندر می شود. خیلی شلوغ است اما همان چیزی است که یک زبان و اپلیکیشن را تا این حد مفید و کاربردی می سازد- لازم نیست نگران هماهنگ سازی موارد باشید، این اپلیکیشن تمام کارها را برایتان انجام می دهد.

این اپلیکیشن به شما این امکان را می دهد که خروجی را به صورت MJML یا HTML صادر کنید و می توانید به سرعت تمپلیت های خود را به صورت Gist های بی نام ذخیره کنید.

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

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

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

Author: Summit

پژوهشگر, نویسنده و علاقه مند به تکنولوژی های مختلف وب هستم, ایده های زیادی در ذهن دارم که امیدوارم بتوانم به نوبت آنها را عملی کنم

پاسخ دهید

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