mjml - šablony pro responzivní emaily poměrně snadno a celkem rychle

Už přes dva roky mám v konceptu postu o mjml poznámku "ROZPRACOVANÉ!". To jsme se s mjml našli poprvé, když jsem připravoval layout emailového newsletteru pro jistý projekt. No a po dvou letech jsme se našli znovu, tentokrát při přípravě layoutu obecných emailů.

mjml je šablonovací systém pro generování responzivních emailů. Všecky ty hnusy tabulek v tabulkách, inline styly, definice písma pro každý element a jiná zvěrstva řeší sám. Samosebou ne vše je v každém mailovacím programu nebo službě stoprocentní, ale to není snad ani email v prostém textu.

Pro editaci lze využít jak online mjml editor, editor mjml-app se zabudovanou validací i kompilací, editor Atom s pluginem, stejně tak Sublime text, tak jakýkoliv textový editor, balíček pro node.js (npm) a příkazový řádek. Také lze využít drag&drop online editor služby Mailjet.

Ostatně pomocí čeho mjml soubor připravit je popsáno v podrobné dokumentaci...

Před dvěma lety jsem bojoval s několika problémy, které, jak se ukázalo, způsobily různé verze mjml - dokumentace, ukázkové šablony, pluginy do Atomu byly pro verzi 3.3.5, ale aktuální verze mjml byla 4.0.3 a některé komponenty byly změněné a migrace z verze 3 na 4 (lze příkazem i v online editoru) nefungovala správně. Po downgradu na 3.3.5 mi zmizelo několik problematických momentů a vygenerované html konečně vypadalo správně. To jen jako upozornění, že ne vždy jde vše hladce.

Samostatná kapitola jsou obrázky. Výsledný email musí obsahovat absolutní url na obrázky, při vývoji je ale snazší pracovat s relativní cestou. S tím je třeba se nějak vypořádat. Pro správnou funkci preview pluginu do Atomu jsem si tehdy musel "dát obrázky na web", jinak se vůbec nezobrazovaly.

Je tu ale i možnost vložit obrázky přímo do emailu pomocí mjml-with-images-loader pro Webpack, ale ještě jsem to nezkoušel.

Ohledně obrázků v emailech jsem studoval ještě A Guide for SVG Support in Email | CSS-Tricks, SVG | Campaign Monitor a How to Embed Images in Your Emails: The Facts | SendGrid.

Pro integraci do Symfony potažmo Twigu existuje balík Symfony bundle for MJML nebo AssoconnectMJMLBundle (o čemž je článek Using MJML email templates with Symfony).

Vybrat a implementovat jeden z nich mě ještě čeká.

P.F. 2020

Všechno nejlepší v novém roce!

Edge pořád neumí ES6

Prosluněné dny hladkého vývoje webu na Linuxu, laděného pod Chrome a dolaďovaného pro Firefox, narušila zapeklitá chyba v Edge: SCRIPT1028: Expected identifier, string or number.
Dalo mi to trochu pátrání krzevá balíčky, dokumentaci, odborné weby a fóra (včetně výše uvedeného), než jsem došel k poznání, že celý problém působí rest parametry či spread operátory (či syntax), vymoženosti JavaScriptu ES6.
Ta se mi tam dostala z Bootstrapu zakompilovaného do js balíčku. Takže taková ta neopravitelná věc. Díky, EasyAdmin. :(
Přeskočme několik hodin usedavého pláče a přistupme rovnou k řešení: nenechme inkriminovaný javascript natahovat na web rovnou (jako hotový asset), ale přidejme ho přes webpack (nebo snad něco jiného? Možná tak Webpack Encore) projektu a profiltrujme ho přes Babel, kterým ty moderní zrůdnosti, jak si jistě myslí u Microsoftu, odstraníme.
Hurá! Web funguje a pochvala od projekťáka nás nemine. ;)

• Rest parameters and spread operator
• Rest parameters - JavaScript | MDN
• Spread syntax - JavaScript | MDN
• Can I use... rest parameters
• Can I use... spread

Jak ladit web pro MSIE/Edge na Linuxu?

To si tak už kolik měsíců v kuse vesele vyvíjíte web na Linuxu a výsledek jen občas zkontrolujete na Windows v prohlížeči Edge a pro klid duše i MSIE (i když to už jen tak pro formu a nejhůř ve verzi 10). No dobře, hlavní projekt si přeci jen zbaběle nastavíte tak, aby se na něj dalo "koukat" i z vedlejšího počítače a kontrolujete jej i při vývoji.
Pak se ale objeví zapeklitost na dalším projektu. Rozstřelit si nastavení nechcete... Pátráte, jak tedy na Linuxu ladit webovou aplikaci pro Explorer a najdete celkem optimální řešení:

1. nainstalujte si VirtualBox od Oracle
   (drobná nepěknost - v menu na Ubuntu Mate se objeví až po restartu)
2. stáhněte si "virtuální počítač" přímo od Microsoftu
   (vyberte si od Win7 s IE8 po Win10 s Edge)
3. importujte virtuální stroj do VirtualBoxu a polaďte si nastavení
   (třeba podle Set Up a Windows 10 Virtual Machine and Run Internet Explorer 11 and Edge on Mac or Linux | Viget)

A máte na dobrém počítači slušně běžící Windows na 90 dnů trápení zdarma!

Ještě se dostat na localhost vašeho počítače... Podle virtualbox - How to access localhost:8080 running on ubuntu from windows running into virtual box? - Ask Ubuntu stačí projekt(y) zadat do hosts, ale s ip adresou 10.0.2.2.

Pak už je na čase ponořit se do práce... ;)

Jak dostat font-display do fontů z Googlu

Při dalším ladění "našeho projektu" jsem se rozhodl vyřešit poznámku v Pagespeed Insights / Lighthouse (po pravdě jsem to vyzkoumal v Auditu v Nástrojích pro vývojáře v prohlížeči Chrome):
Diagnostika - Zajistěte, aby text při načítání webfontů zůstal viditelný
Pomocí funkce font-display stylů CSS zajistěte, aby byl text při načítání webfontů viditelný uživatelům. Další informace.
"Další informace" odkazují na článek Controlling Font Performance with font-display, podle kterého je třeba doplnit do definice písma přístup k vykreslení
@font-face {font-display: fallback; ... }
Prosté? Ne tak moc, když importujete, a chcete importovat, webová písma přímo od Googlu. Jako třeba
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext');
Je tu takový drobný paradox, jak poznamenávají v článku Google Fonts and font-display s osvětlením situace dalšími užitečnými tipy:

Google Developers suggests using Lighthouse -> Lighthouse warns about not using font-display on loading fonts -> Web page uses Google Fonts the way it's suggested on Google Fonts -> Google Fonts doesn't supports font-display -> Facepalm.

Jednoho by z toho...

Ale zpět k projektu. Máme tu {less}, Grunt (zatím ještě) a Node (samozřejmě). Importované definice se do výsledného stylu vloží celé. Někdo přeci musel už připravit nějaký plugin... Dva dny jsem (mimo jiné práce) hledal, ale nenalézal. Našel jsem a vyzkoušel nějaké jiné pluginy, ale bez úspěchu.

A pak najednou na mě vyskočí přesně to, co hledám od začátku: dkrnl/postcss-font-display. Tento PostCSS plugin vloží do všech definic @font-face ve style kýžený parametr font-display. Hotovo. Uff :-)