오픈 소스는 Penpot (Smashing Magazine)을 사용한 디자인 툴링을 충족합니다
Penpot은 디자이너와 개발자 간의 진정한 협업을 허용하는 무료 오픈 소스 디자인 도구입니다. 디자이너는 대화 형 프로토 타입과 디자인 시스템을 규모로 만들 수있는 반면, 개발자는 즉시 사용 가능한 코드를 즐기고 웹 기술로 구축되고 브라우저에서 작동하며 이미 33K 스타트를 통과했기 때문에 워크 플로우를 쉽고 빠르게 만듭니다.
UI는 직관적 인 느낌이 들며 디자이너가 아닌 사람 (청구 된 유죄!)에게도 일을 쉽게 수행 할 수 있습니다. Figma와 같은 다른 인기 있고 폐쇄 자원 도구와 같은 방식으로 같은 방식으로 작업을 수행 할 수 있습니다.
오픈 소스가 중요한 이유
매일 Commercial Open-Source와 함께 일하는 사람으로서, 나는 사용자에게 더 가까워지고 다음 단계의 배송을 잠금 해제하는 방법으로 강력하게 믿습니다. 오픈 소스가되면 도구에 대한 완전히 새로운 수준의 책임과 유연성이 만듭니다.
개발자는 다른 품종의 사용자입니다. 우리가 UX에서 기발한 틈새를 쳤을 때, 우리의 첫 번째 본능은 형사를 플레이하고 왜 우리가하고있는 일에 그 패턴이 아픈 엄지 손가락으로 튀어 나온 이유를 알아내는 것입니다. 코드가 오픈 소스 인 경우 소스에 뛰어 들어 이미 해결 방법에 대한 제안서로 문제를 일으키는 것은 드문 일이 아닙니다. 적어도 그게 꿈입니다.
게다가 오픈 소스가되면 당신과 당신의 팀은 셀프 호스트개인 정보 보호 및 제어의 추가 계층 또는 최소한 비용 효율적인 솔루션을 제공합니다.
카드가 제대로 플레이되고 팀이 장기 혜택을 줄 수 있으면 상업 오픈 소스는 상생 전략입니다.
소개 : Penpot 플러그인 시스템
Open-Source의 확장성에 대해 Penpot은 Open-Source를위한 펜 팟 튜브를 가지고 있습니다. 템플릿 그리고 새로 석방되었습니다 플러그인 갱도. 이제 기능이 누락 된 경우 코드 기반으로 바로 이동할 필요가 없습니다. 필요한 것을 달성하기 위해 플러그인을 만들 수 있습니다. 그리고 당신은 LocalHost에서 그것을 제공 할 수도 있습니다!
펜 포트 플러그인 생성
플러그인과 관련하여 하나를 만드는 것은 매우 인체 공학적입니다. 먼저, 이미 몇 가지 프레임 워크를위한 템플릿이 이미 설정되어 있으며이 PR에서 Open-Source의 힘을 위해 Solidjs를 위해 하나를 만들었습니다!
Vite를 사용하는 경우 플러그인은 단일 페이지 응용 프로그램입니다. Vite가있는 Hello World 앱을 구축 한 적이 있다면 플러그인을 만드는 데 필요한 것이 있습니다. 게다가 Penpot 팀에는 몇 가지 패키지가있어 프로세스에서 헤드 스타트를 제공 할 수 있습니다.
npm install @penpot/plugin-styles
이를 통해 CSS 로더 또는 CSS 가져 오기로 가져올 수 있습니다. @penpot/plugin-styles/styles.css. JavaScript API는 Window 객체를 통해 사용할 수 있지만 플러그인이 TypeScript에있는 경우 다음을 가르쳐야합니다.
npm add -D @penpot/plugin-types
당신의 유형과 함께 node_modules당신은 팝업 할 수 있습니다 tsconfig.json 추가하십시오 types 에 compilerOptions.
{
"compilerOptions": {
"types": ["@penpot/plugin-types"]
}
}
그리고 당신은 이제 당신의 편집자에 언어 서비스 제공 업체가 있으며 Typescript 컴파일러는 Penpot이 유효한 네임 스페이스임을 수락 할 것입니다. 전체 프로젝트 전체에서 Penpot API에 대한 자동 완성이 있습니다. 예를 들어 플러그인을 정의하면 다음과 같습니다.
penpot.ui.open("Your Plugin Name", "", {
width: 500,
height: 600
})
마지막 단계는 플러그인을 정의하는 것입니다. 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와 플러그인 인터페이스 간의 통신은 양방향 메시징 시스템으로 수행됩니다. 웹 작업자와는 다르지 않습니다.
따라서 플러그인에서 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 팀은 그것에 대해 생각했기 때문에 플러그인 콘테스트를 시작하는 이유입니다!
이 콘테스트에서는 완벽하게 기능적인 플러그인을 원합니다. 오픈 소스 여야하며 포괄적 인 문서를 포함해야합니다. 기능, 설치 및 사용에 대해 자세히 설명합니다. 첫 번째상은 US $ 1000이며 기준은 혁신, 기능, 유용성, 성능 및 코드 품질입니다. 대회는 11 월 15 일부터 12 월 15 일까지 진행됩니다.
최종 생각
플러그인을 만들기로 결정했다면, 나는 당신이 무엇을 만들고 무엇을 선택했는지 알고 싶습니다. 아래 의견이나 블루스키에 알려주십시오!
(YK)
Post Comment