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 :-)

P.F. 2019

Všechno nejlepší do nového roku!