همه می‌دانند که پیکربندی Frontend بسیار پیچیده‌تر از آنی است که باید باشد.
در این مقاله، این موارد را پوشش خواهیم داد:
- یک مفهوم ویرایشگر جدید برای توسع وب
- چگونه این ویرایشگر جریان کاری شما را هم برای ویرایش محتویات و هم ویرایش کد بسیار آسان‌تر می‌کند
- چگونه می‌توانید از هدر رفتن مقدار زیادی زمان جلوگیری کنید
جدول محتویات:
- یک مفهوم جدید
- ویرایش‌های محتویات و کد ساده‌تر
- جلوگیری از هدر رفتن زمان بر روی پروژه‌ها
- ادامه دادن به سمت جلو
بیایید شروع کنیم...
یک مفهوم جدید
در آخرین پروژه تیم من، ما دقیقا همان قدر زمان که به کدنویسی اختصاص دادیم را صرف راه‌اندازی کردیم.
پس تصمیم گرفتیم که یک ویرایشگر کد آنلاین با یک مفهوم جدید بسازیم:
هر چیزی که می‌سازید می‌تواند به هر وبسایتی و بدون هیچ‌گونه پیکربندی اضافه شود.
شما این امکانات ماژولار (به نام «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ها به هر صفحه‌ای، ما می‌خواستیم این جریان کاری برای دو چیز خوب باشد:
- توسعه دهندگانی که ویرایش کد انجام می‌دهند
- غیر توسعه دهندگانی که ویرایش محتویات انجام می‌دهند
این ویرایشگر کد، هر چیزی که توسعه دهندگان از یک پلتفرم مدرن انتظار داشته باشند را دارد:
- پیش‌نمایش زنده به همراه refresh در هنگام ذخیره
- کمپایل خودکار برای ES6، SCSS، JSX، Handlebarها و...
- پشتیبانی React، Vue، Angular و jQuery
- استایل‌های داخلی برای Bootstrap، Materialize و Bulma
- سندنگاری و پشتیبانی عالی
این ویرایشگر کد برای ویرایش متن، تصویر و... در دسترس است. این یعنی غیر توسعه دهندگان می‌توانند وبسایت‌های خود را هدایت دهند و خودشان ویرایش‌ها را انجام دهند.
وقتی که وارد این ویرایشگر شده‌اید و در حال بررسی وبسایت خود هستید، یک مداد در سمت راست صفحه ظاهر می‌شود. کلیک بر روی آن، یک کاربر را قادر می‌سازد تا محتویات را ویرایش کرده و منتشر کند.
این یعنی شما، گروهتان و یا مشتریانتان می‌توانند مستقیما محتویات صفحه شما را ویرایش کنند.
جلوگیری از هدر رفتن زمان بر روی پروژه‌ها
هدف کلی این کار، این است که توسعه دهندگان بارور و خوشحالی داشته باشیم. برای ما، این یعنی عدم هدر دادن وقت بر روی راه‌اندازی، و در عوض تمرکز بر روی کد.
به عنوان یک مثال سریع، به شما نحوه اضافه کردن و سفارشی‌سازی یک mod را در یک موقعیت استفاده رایج نشان خواهم داد: اضافه کردن بخش اطلاعات به یک صفحه ورودی
فرض کنید که من می‌خواهم برخی امکانات را به روشی جالب مکاتبه کنم. در ابتدا، در کتابخانه modها به دنبال یک مورد اینچنینی خواهم گشت:
سپس، این مورد را از کتابخانه در پروژه خود کپی می‌کنم، سپس محتویات و CSS را با ویرایشگر آنلاین سفارشی‌سازی می‌کنم تا زمانی که آنچه می‌خواهم را داشته باشم:
در آخر، دستورالعمل‌های مربوط به کپی کردن آن در صفحه خود را دنبال می‌کنم:
و حال در صفحه ورودی من قرار گرفته است و کار می‌کند:
احتمالا این کار از هدر رفتن یک ساعت از زمان من، شاید هم بیشتر جلوگیری کرد. همچنین من یک عنصر صفحه ورودی پرکاربرد دارم که می‌توانم کپی کنم و در پروژه‌های دیگر هم استفاده کنم.
همچنین من پی برده‌ام که وقتی به جای ابزار ساخت بر روی کد تمرکز می‌کنم، رسیدن به یک کار با کیفیت بسیار آسان‌تر است.
در اینجا، یک کاربر غیر فنی می‌تواند بدون کمک من محتویات را ویرایش کند، و من حتی می‌توانم بدون استقرار مجدد وبسایت خود، کد آن را ویرایش کنم.
ادامه دادن به سمت جلو
ما بسیار خوشحالیم که در حال حاضر نیز هزاران توسعه دهنده در حال استفاده از این ابزار در پروژه‌های خود هستند، و همینطور که این جامعه رشد می‌کند، هدف ما این است که به ساخت و به اشتراک گذاری modهای اوپن سورس ادامه دهیم.
این ویرایشگر کد جدید را امتحان کنید: https://anymod.com
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید