sobota 1. srpna 2020

Neseriózní Less.js v prohlížeči

Bez css preprocesoru jako je Less.js si dnes snad ani seriózní webařinu nedokážeme představit. Při normální seriózní práci si také neumíme představit, že by se kompilace less nespustila při buildu (nebo tak nějak jako podobně, prostě "pre-").

Ale občas se hodí zcela neseriózně zpracovat less v prohlížeči, třeba když připravujete jen takovou stránečku třeba pro náhled ikon, nebo tak něco, a chcete použít fragment stylů projektu v less. Není to žádný problém.

Podle Using Less.js - Browser Usage | Less.js potažmo less-docs/using-less-in-the-browser.md at master · less/less-docs · GitHub či LESS - Using Less In The Browser - Tutorialspoint a less.js - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites! necháme natáhnout script, případně doplníme konfiguraci, a podle css - Is it possible to inline LESS stylesheets? - Stack Overflow upravíme type, protože při naší neserióznosti máme styly přímo v html. Script pak musí být natažen až za styly! Výsledný kód pak bude vypadat nějak takto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        /* css */
    </style>
    <style type="text/less">
        /* less */
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.12.2/less.min.js"></script>
</head>
<body>
    <!-- obsah -->
</body>
</html>


pondělí 27. července 2020

Dvě verze PostgreSQL na jednom počítači? Jasně! A bez dockeru.

Začnu oblíbeným úvodem celebrit, vyjadřujících se k jakékoli problematice:
Nejsem odborník na to a to, ale osobně si myslím, že...
 S tímto na následující řádky nahlížejte prosím trocho shovívavěji. ;-)

Nicméně i já si osobně myslím, že problém souběžného vývoje několika projektů běžících na různých verzích databáze PostgreSQL celkem dobře řeší využití moderního nástroje Docker. Jenže ale protože ještě pořád nemáme rozchozeno a doladěno, co je pro vývoj třeba, rozhodl jsem se zkusit "starou" cestu spuštění databázových serveru současně. Na to jsem našel celkem podrobná návod Managing Multiple PostgreSQL Instances on Ubuntu/Debian - DZone Database potažmo Managing Multiple PostgreSQL Instances on Ubuntu/Debian - Percona Database Performance Blog, je to ten stejný postup od toho stejného autora.

Návod nebudu kopírovat, prostě a jednoduše při běžící verzi třeba 9.6 doinstalujte 11. Ta se neinstaluje "vedle", udělá si vlastní adresáře a spustí vlastní cluster s novým portem. Úplně bez problémů. Co byl problém tak to, že se mi zaboha nedařilo do databáze přihlásit. Defaultní uživatel postgres neměl heslo (?) a přitom všechny nástroje jej striktně vyžadují.

Pomohlo mi až, jak píší na PostgreSQL: How to change PostgreSQL user password? - Stack Overflow, přihlásit se do databáze bez hesla:

sudo -u postgres psql postgres -p 5435

A heslo nastavit:

ALTER USER postgres WITH PASSWORD 'postgres';

A pak jsem se už připojil a začal normálně pracovat. Podstatné je při všech operacích s databází nezapomenout na port! Port je to jediné, čím se databázové servery při většině operací rozlišují.




neděle 3. května 2020

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-TricksSVG | 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.S.: Po dalším průzkumu a samostudiu jsem nakonec jen "vypáral" z balíčku asi tak tři řádky kódu -  samotné zavolání kompilace mjml, protože jsem potřeboval přidat pro render další parametry, což balíček neumožňuje, a naopak zbytek funkcí jsem vůbec nepotřeboval.


pátek 2. srpna 2019

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. ;)




MAKE Magazine

Technology Review RSS Feeds

Nejčtenější příspěvky