منبع باز با ابزار طراحی با Penpot ملاقات می کند – مجله Smashing

Penpot یک ابزار طراحی رایگان و متن باز است که امکان همکاری واقعی بین طراحان و توسعه دهندگان را فراهم می کند. طراحان می‌توانند نمونه‌های اولیه تعاملی و سیستم‌های طراحی را در مقیاس ایجاد کنند، در حالی که توسعه‌دهندگان از کد آماده برای استفاده لذت می‌برند و گردش کار خود را آسان و سریع می‌کنند، زیرا با فناوری‌های وب ساخته شده است، در مرورگر کار می‌کند و قبلاً 33K شروع در GitHub داشته است.

رابط کاربری بصری است و انجام کارها را آسان می کند، حتی برای کسی که طراح نیست (مقصر است!). شما می توانید کارها را به همان روش و با همان کیفیتی که با سایر ابزارهای محبوب تر و منبع بسته مانند Figma انجام می دهید.

چرا منبع باز مهم است

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

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

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

وقتی کارت‌ها درست بازی می‌شوند و تیم می‌تواند از مزایای بلندمدت استفاده کند، منبع باز تجاری یک استراتژی برد-برد است.

معرفی: سیستم پلاگین Penpot

در مورد توسعه پذیری منبع باز، Penpot دارای PenpotHub خانه منبع باز است قالب ها و تازه منتشر شده افزونه گالری بنابراین اکنون، اگر عملکردی از دست رفته است، نیازی نیست که فوراً به کد پایه بروید – می توانید یک افزونه برای دستیابی به آنچه نیاز دارید ایجاد کنید. و حتی می توانید آن را از لوکال هاست سرو کنید!

ایجاد پلاگین Penpot

وقتی نوبت به پلاگین ها می رسد، ایجاد آن بسیار ارگونومیک است. اول، از قبل قالب‌هایی برای چند فریم‌ورک تنظیم شده است، و من یکی برای SolidJS در این روابط عمومی ایجاد کردم – قدرت منبع باز!

هنگام استفاده از Vite، افزونه ها برنامه های یک صفحه ای هستند. اگر تا به حال یک برنامه Hello World با Vite ساخته اید، آنچه را که برای ایجاد یک افزونه لازم است دارید. علاوه بر این، تیم Penpot دارای چند بسته است که می‌تواند به شما در این فرآیند کمک کند:

npm install @penpot/plugin-styles

این به شما امکان می دهد با یک بارگذار CSS یا یک وارد کردن CSS از آن وارد کنید @penpot/plugin-styles/styles.css. API جاوا اسکریپت از طریق شی پنجره در دسترس است، اما اگر افزونه شما در TypeScript است، باید آن را آموزش دهید:

npm add -D @penpot/plugin-types

با آن انواع در شما node_modules، می توانید پاپ آپ را باز کنید tsconfig.json و اضافه کنید types به compilerOptions.

{
  "compilerOptions": {
    "types": ("@penpot/plugin-types")
  }
}

و اکنون، ارائه‌دهنده خدمات زبان در ویرایشگر شما و کامپایلر TypeScript می‌پذیرند که penpot یک فضای نام معتبر است، و شما تکمیل خودکار برای APIهای Penpot در کل پروژه خود خواهید داشت. به عنوان مثال، تعریف افزونه شما به شکل زیر خواهد بود:

penpot.ui.open("Your Plugin Name", "", {
  width: 500,
  height: 600
})

آخرین مرحله این است که یک مانیفست افزونه را در a تعریف کنید manifest.json فایل و مطمئن شوید که در فهرست خروجی Vite قرار دارد. مانیفست نشان می‌دهد که هر دارایی کجاست و افزونه شما برای کار کردن به چه مجوزهایی نیاز دارد:

{
  "name": "Your Plugin Name",
  "description": "A Super plugin that will win Penpot Plugin Contest",
  "code": "/plugin.js",
  "icon": "/icon.png",
  "permissions": (
    "content:read",
    "content:write",
    "library:read",
    "library:write",
    "user:read",
    "comment:read",
    "comment:write",
    "allow:downloads"
  )
}

هنگامی که راه اندازی اولیه انجام شد، ارتباط بین Penpot API و رابط افزونه با یک سیستم پیام رسانی دو طرفه انجام می شود که تفاوت چندانی با کاری که با Web-Worker انجام می دهید نیست.

بنابراین، برای ارسال پیام از پلاگین خود به Penpot API، می توانید موارد زیر را انجام دهید:

penpot.ui.sendMessage("Hello from my Plugin");

و برای دریافت مجدد آن، باید یک شنونده رویداد به آن اضافه کنید window شی (حوزه سطح بالای) افزونه شما:

window.addEventListener("message", event => {
  console.log("Received from Pendpot::: ", event.data);
})

یک نکته عملکرد سریع: اگر پلاگین پیچیده تری با نماها و شاید حتی مسیرهای مختلف ایجاد می کنید، باید یک منطق پاکسازی داشته باشید. اکثر فریم ورک ها ارگونومی مناسبی برای این کار ارائه می دهند. برای مثال، React این کار را از طریق عبارات بازگشت خود انجام می دهد.

useEffect(() => {
  function handleMessage(e) {
    console.log("Received from Pendpot::: ", event.data);
  }
  window.addEventListener('message', handleMessage);
  
  return () => window.removeEventListener('message', handleMessage);
}, ());

و جامد دارد onMount و onCleanup کمک کننده برای آن:

onMount(() => {
  function handleMessage(e) {
    console.log("Received from Penpot::: ", event.data);
  }
  window.addEventListener('message', handleMessage);
})

onCleanup(() => {
  window.removeEventListener('message', handleMessage);
})

یا با @solid-primitive/event-listener کتابخانه کمکی، بنابراین به طور خودکار حذف می شود:

import { makeEventListener } from "@solid-primitives/event-listener";

function Component() {
  
  const clear = makeEventListener(window, "message", handleMessage);
  
  // ...
  return (Hello!)
}

در اسناد رسمی، یک راهنمای گام به گام وجود دارد که شما را در فرآیند ایجاد، آزمایش و انتشار افزونه راهنمایی می کند. حتی به شما کمک خواهد کرد.

بنابراین، منتظر چه چیزی هستید؟

مسابقه پلاگین: تصور کنید، بسازید، برنده شوید

خوب، شاید شما منتظر یک فشار انگیزه هستید. تیم Penpot به این فکر کرد، به همین دلیل است که آنها یک مسابقه پلاگین را شروع می کنند!

برای این مسابقه، آنها یک پلاگین کاملا کاربردی می خواهند. باید منبع باز و شامل مستندات جامع باشد. جزئیات ویژگی ها، نصب و استفاده از آن. جایزه اول 1000 دلار آمریکا است و معیارها نوآوری، عملکرد، قابلیت استفاده، عملکرد و کیفیت کد است. این مسابقه از 15 نوامبر تا 15 دسامبر برگزار می شود.

افکار نهایی

اگر تصمیم به ساختن یک افزونه دارید، دوست دارم بدانم در حال ساخت چه چیزی هستید و چه پشته ای را انتخاب کرده اید. لطفاً در نظرات زیر یا در BlueSky به من اطلاع دهید!

(Yk)