یک ویرایشگر کد جدید برای وب

ترجمه و تالیف : عرفان کاکایی
تاریخ انتشار : 13 خرداد 98
خواندن در 2 دقیقه
دسته بندی ها : طراحی وب

همه می‌دانند که پیکربندی Frontend بسیار پیچیده‌تر از آنی است که باید باشد.

در این مقاله، این موارد را پوشش خواهیم داد:

  • یک مفهوم ویرایشگر جدید برای توسع وب
  • چگونه این ویرایشگر جریان کاری شما را هم برای ویرایش محتویات و هم ویرایش کد بسیار آسان‌تر می‌کند
  • چگونه می‌توانید از هدر رفتن مقدار زیادی زمان جلوگیری کنید

جدول محتویات:

  1. یک مفهوم جدید
  2. ویرایش‌های محتویات و کد ساده‌تر
  3. جلوگیری از هدر رفتن زمان بر روی پروژه‌ها
  4. ادامه دادن به سمت جلو

بیایید شروع کنیم...

یک مفهوم جدید

در آخرین پروژه تیم من، ما دقیقا همان قدر زمان که به کدنویسی اختصاص دادیم را صرف راه‌اندازی کردیم.

پس تصمیم گرفتیم که یک ویرایشگر کد آنلاین با یک مفهوم جدید بسازیم:

هر چیزی که می‌سازید می‌تواند به هر وبسایتی و بدون هیچ‌گونه پیکربندی اضافه شود.

یک ویرایشگر کد جدید برای وب

شما این امکانات ماژولار (به نام «mods») را با paste کردن دو چیز در HTML خود، به صفحه خود اضافه می‌کنید:

۱. یک تگ script در head.

۲. یک عنصر <div> برای هر mod.

این صفحه، ۴ مورد از این modها را بر روی خود دارد، و همه آن‌ها به طور خودکار کار می‌کنند:

<html>

<head>

  <title>Anymod example</title>

  <!-- Script tag -->

  <script id="Anymod-script">

    (function (m,o,d,u,l,a,r,i,z,e) {

      u[m]={Project:o,rq:[],Opts:r,ready:function(j){u[m].rq.push(j)}};function j(s){return encodeURIComponent(btoa(s))};z=l.getElementById(m+'-'+a);r=u.location;

      e=[d+'/page/'+o+'/'+j(r.pathname)+'/'+j(r.host)+'?t='+Date.now(),d];e.map(function(w){i=l.createElement(a);i.defer=1;i.src=w;z.parentNode.insertBefore(i,z);});

    })('Anymod','8PP6M2','https://cdn.anymod.com/v2',window,document,'script',{});

  </script>

  <!-- /Script tag -->

</head>

<body>

  <!-- Side nav with button -->

  <div id="anymod-aklor"></div>

  <!-- Content section -->

  <div id="anymod-nbonb"></div>

  <!-- Dark contact form -->

  <div id="anymod-lmkrl"></div>

  <!-- Scroll magic panels -->

  <div id="anymod-nbrob"></div>

</body>

</html>

ساده‌ترین را برای تجربه این مسئله، این است که کد بالا را به عنوان یک فایل HTML دانلود کنید و آن را در مرورگر خود ببینید: دانلود فایل HTML

دو mod اول، یک نوار کناری و یک بخش محتویات هستند:

یک ویرایشگر کد جدید برای وب

پس از آن،‌ یک فرم ارتباط که به طور خودکار کار می‌کند:

یک ویرایشگر کد جدید برای وب

و در نهایت، برخی پنل‌های scroll magic:

یک ویرایشگر کد جدید برای وب

تمام این موراد و صدها مورد دیگر در این کتابخانه، همگی اوپن سورس هستند.

این کدها ساخته شده‌اند تا نقاط شروع سریعی برای شما باشند تا بتوانید آن‌ها را اضافه کرده و هرگونه که می‌خواید گسترش دهید، و سپس در هر پروژه‌ای و با هر پشتوانه فناوری‌ای استفاده کنید.

همه چیز بیشتر بر روی ساختن متمرکز است، تا پیکربندی.

ویرایش‌های محتویات و کد ساده‌تر

در کنار اضافه کردن سریع modها به هر صفحه‌ای، ما می‌خواستیم این جریان کاری برای دو چیز خوب باشد:

  1. توسعه دهندگانی که ویرایش کد انجام می‌دهند
  2. غیر توسعه دهندگانی که ویرایش محتویات انجام می‌دهند

این ویرایشگر کد، هر چیزی که توسعه دهندگان از یک پلتفرم مدرن انتظار داشته باشند را دارد:

  • پیش‌نمایش زنده به همراه refresh در هنگام ذخیره
  • کمپایل خودکار برای ES6، SCSS، JSX، Handlebarها و...
  • پشتیبانی React، Vue، Angular و jQuery
  • استایل‌های داخلی برای Bootstrap، Materialize و Bulma
  • سندنگاری و پشتیبانی عالی

یک ویرایشگر کد جدید برای وب

این ویرایشگر کد برای ویرایش متن، تصویر و... در دسترس است. این یعنی غیر توسعه دهندگان می‌توانند وبسایت‌های خود را هدایت دهند و خودشان ویرایش‌ها را انجام دهند.

وقتی که وارد این ویرایشگر شده‌اید و در حال بررسی وبسایت خود هستید، یک مداد در سمت راست صفحه ظاهر می‌شود. کلیک بر روی آن، یک کاربر را قادر می‌سازد تا محتویات را ویرایش کرده و منتشر کند.

یک ویرایشگر کد جدید برای وب

این یعنی شما، گروهتان و یا مشتریانتان می‌توانند مستقیما محتویات صفحه شما را ویرایش کنند.

جلوگیری از هدر رفتن زمان بر روی پروژه‌ها

هدف کلی این کار، این است که توسعه دهندگان بارور و خوشحالی داشته باشیم. برای ما، این یعنی عدم هدر دادن وقت بر روی راه‌اندازی، و در عوض تمرکز بر روی کد.

به عنوان یک مثال سریع، به شما نحوه اضافه کردن و سفارشی‌سازی یک mod را در یک موقعیت استفاده رایج نشان خواهم داد: اضافه کردن بخش اطلاعات به یک صفحه ورودی

فرض کنید که من می‌خواهم برخی امکانات را به روشی جالب مکاتبه کنم. در ابتدا، در کتابخانه modها به دنبال یک مورد اینچنینی خواهم گشت:

یک ویرایشگر کد جدید برای وب

سپس، این مورد را از کتابخانه در پروژه خود کپی می‌کنم، سپس محتویات و CSS را با ویرایشگر آنلاین سفارشی‌سازی می‌کنم تا زمانی که آنچه می‌خواهم را داشته باشم:

یک ویرایشگر کد جدید برای وب

در آخر، دستورالعمل‌های مربوط به کپی کردن آن در صفحه خود را دنبال می‌کنم:

یک ویرایشگر کد جدید برای وب

و حال در صفحه ورودی من قرار گرفته است و کار می‌کند:

یک ویرایشگر کد جدید برای وب

احتمالا این کار از هدر رفتن یک ساعت از زمان من، شاید هم بیشتر جلوگیری کرد. همچنین من یک عنصر صفحه ورودی پرکاربرد دارم که می‌توانم کپی کنم و در پروژه‌های دیگر هم استفاده کنم.

همچنین من پی برده‌ام که وقتی به جای ابزار ساخت بر روی کد تمرکز می‌کنم، رسیدن به یک کار با کیفیت بسیار آسان‌تر است.

در اینجا، یک کاربر غیر فنی می‌تواند بدون کمک من محتویات را ویرایش کند، و من حتی می‌توانم بدون استقرار مجدد وبسایت خود، کد آن را ویرایش کنم.

ادامه دادن به سمت جلو

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

این ویرایشگر کد جدید را امتحان کنید: https://anymod.com

منبع

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید