HEML 발표: 이메일용 오픈 소스 프레임워크

4091 단어 hemlemailopensourceshowdev
오늘 깨끗하고 반응이 빠른 이메일을 만들기 위한 오픈 소스 마크업 언어HEML,의 첫 번째 릴리스를 발표하게 되어 기쁩니다.

왜



HTML 이메일 작성에 익숙하지 않은 경우, it can be a painful process. 몇 달 전에 프런트 엔드에서 몇 가지 흥미로운 대화식 개발을 시작했습니다. 나는 병목 현상이 이메일을 보내거나 테스트하는 것이 아니라 단순히 이메일 자체를 구축하는 것임을 발견했습니다. 다음 회사 해커톤에서 이 문제를 해결하는 기회를 잡았고 HEML이 탄생했습니다.

HEML의 각 요소는 걱정 없이 보낼 수 있도록 이메일 준비 HTML로 렌더링됩니다. HEML은 또한 다양한 이메일 클라이언트의 CSS 버그 및 제한 사항을 해결합니다. 이러한 버그 중 하나의 훌륭한 예는 RGB 십진수 값을 사용하는 경우 전체 스타일 선언이 무시되는 Lotus Notes의 모호한 문제입니다. HEML이 해당 버그를 처리합니다.

우리의 목표



우리는 HEML이 개발자가 이메일에 더 쉽게 접근할 수 있도록 돕고 싶었습니다. 아이디어는 개발자가 Outlook(또는 다른 이메일 받은 편지함)과 씨름하지 않고 빠르게 뛰어들어 이메일을 작성할 수 있도록 하는 것입니다. 이를 위해 세 가지에 중점을 두었습니다.

네이티브 느낌

우리는 HEML이 HTML처럼 보이고 느껴지기를 원했습니다. 결과적으로 HTML을 최대한 가깝게 미러링하고 일반 CSS를 사용하여 스타일을 지정합니다.

앞으로 생각

HEML은 HTML과 CSS가 할 수 있는 모든 이점을 제한하지 않습니다. 점진적 향상을 장려합니다. Email doesn’t have to look the same everywhere.

확장 가능

HEML을 사용하면 사용자 정의 요소를 생성하고 공유하며 커뮤니티에서 만든 다른 요소를 가져올 수 있습니다.

HELM 사용



HEML을 사용하는 방법에는 몇 가지가 있습니다.

heml.io/editor에서 편집기를 사용하여 빠르게 시작하십시오.



로컬에서 사용하려면 다음을 사용하여 설치하십시오.

npm install -g heml
email.heml에서 HEML 이메일을 작성하십시오.


<heml>
  <head>
    <subject>Email Rox!</subject>
    <style>
      body { background: SkyBlue; }
      h1 { color: DarkViolet; }
    </style>
  </head>
  <body>
    <container>
      <marquee><h1>Hello world </h1></marquee>
    </container>
  </body>
</heml>

실행:

heml develop email.heml

이렇게 하면 변경할 때마다 브라우저를 자동으로 다시 로드하는 개발 서버가 시작됩니다.

이메일을 야생으로 보낼 준비가 되면 다음을 실행하세요.

heml build email.heml

이렇게 하면 보낼 준비가 된 email.html 파일이 생성됩니다.

한 번 돌려보세요!

이것은 어려운 문제에 대한 우리의 견해입니다. 이메일에 제시된 모든 문제를 해결하지는 못하지만 고유한 이메일 문제에 대한 솔루션을 만드는 데 도움이 될 수 있습니다. MJML , Foundation for Email 및 기타 여러 작업을 통해 이 문제를 단순화하기 위해 놀라운 작업을 수행했습니다. 이것이 똑같이 도움이 되기를 바랍니다!

그러니 시도해 보세요! 바라건대, 그것은 당신의 삶을 더 쉽게 만듭니다. 피드백, 제안 또는 버그가 있는 경우 let us know .

행복한 코딩!

게시물 Announcing HEML: An Open Source Framework for Email이 SparkPost에 처음 나타났습니다.
앱이 네이티브에 반응하는 작은 트릭 - 오버레이가 있는 사이드 메뉴
CSS flexbox로 해결한 웹 접근성의 실용 사례

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage