{"id":10129,"date":"2021-06-03T10:26:45","date_gmt":"2021-06-03T08:26:45","guid":{"rendered":"https:\/\/vived.io\/frontend-thursdaty-vol-40\/"},"modified":"2022-09-19T13:16:42","modified_gmt":"2022-09-19T11:16:42","slug":"frontend-thursdaty-vol-40","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursdaty-vol-40\/","title":{"rendered":"Frontend Thursdaty vol. 40"},"content":{"rendered":"

1. Sparkplug<\/h1>\n

Usprawnienieniom w V8 zazwyczaj towarzysz\u0105 szczeg\u00f3\u0142owo opisuj\u0105ce je blogposty, kt\u00f3re dla stereotypowego frontend developera s\u0105 niema\u0142\u0105 przepraw\u0105. Wyrwanie z wysokopoziomowego \u015bwiata JavaScriptu do niskopoziomowego \u015bwiata kompilator\u00f3w i interpreter\u00f3w potrafi by\u0107 bolesne i zmusza do od\u015bwie\u017cenia od dawna zakurzonej wiedzy ze studi\u00f3w. Nie inaczej jest i tym razem. Wraz z Chrome 91 Google postanowi\u0142 wzbogaci\u0107 sw\u00f3j silnik sk\u0142adaj\u0105cy si\u0119 z zap\u0142onu (Ignition) i turbiny (TurboFan) o jeszcze jedn\u0105 cz\u0119\u015b\u0107: \u015bwiece (Sparkplug). \u00a0Nowa cz\u0119\u015b\u0107 znajduje miejsce po\u015brodku znanych ju\u017c z poprzednich wersji element\u00f3w i b\u0119dzie odpowiedzialna za nie zoptymalizowan\u0105 kompilacj\u0119 JavaScriptu.<\/p>\n

Nie odwa\u017c\u0119 si\u0119 podj\u0105\u0107 pr\u00f3by wyja\u015bnienia Wam w przejrzysty i zwi\u0119z\u0142y spos\u00f3b, dlaczego wprowadzenie dodatkowego kroku do pipeline’u jest dobrym pomys\u0142em. Je\u015bli macie ochot\u0119 zagotowa\u0107 troch\u0119 Wasze szare kom\u00f3rki, to mo\u017cecie spr\u00f3bowa\u0107 doj\u015b\u0107 do tego sami, czytaj\u0105c podlinkowany poni\u017cej blogpost (kt\u00f3rego autorem jest osoba o wyj\u0105tkowo Polskim nazwisku!). Je\u015bli natomiast z racji d\u0142ugiego weekendu wolicie troch\u0119 odpocz\u0105\u0107 to zostawi\u0119 Was z TLDR, kt\u00f3re powinno w zupe\u0142no\u015bci Wam wystarczy\u0107: V8 w nowej wersji przy\u015bpieszy\u0142 o kolejne +\/- 10%.<\/p>\n

\"\"
Autor Frontendowego Czwartku czytaj\u0105c o internalach V8<\/figcaption><\/figure>\n

\u0179r\u00f3d\u0142a:<\/h3>\n

https:\/\/v8.dev\/blog\/sparkplug<\/a><\/p>\n

2. Jest 27<\/h1>\n

Jest zdaje si\u0119 powoli stawa\u0107 standardem je\u015bli chodzi o biblioteki do frontendowych test\u00f3w, dlatego nie spos\u00f3b przej\u015b\u0107 oboj\u0119tnie obok pierwszego od roku du\u017cego wydania tej biblioteki. Stety (albo niestety) w nowej wersji nie znajdziemy ekscytuj\u0105cych nowo\u015bci, a raczej powolne zmiany w dobrym kierunku. Mamy tu przede wszystkim ulepszenia w domy\u015blnej konfiguracji, kt\u00f3re w Jest 28 doprowadzi\u0107 maj\u0105 do podzia\u0142u biblioteki na wi\u0119cej mniejszych podpakiet\u00f3w. Znajdziemy tu wi\u0119c podmian\u0119 podstawowego test runnera z jest-jasmine2 na jest-circus (kt\u00f3ry od dawna by\u0142 ju\u017c tym domy\u015blnym w aplikacjach generowanych przez create-react-app) oraz zmian\u0119 domy\u015blnego \u015brodowiska uruchomieniowego z jsdom na node (co w przypadku test\u00f3w nie potrzebuj\u0105cych emulacji DOMu ma znacz\u0105co poprawi\u0107 wydajno\u015b\u0107). Jest te\u017c oczywi\u015bcie kilka mniejszych nowo\u015bci, np. interaktywny tryb ma umo\u017cliwia\u0107 przechodzenie przez spadaj\u0105ce testy. Je\u015bli nie dotyczy Was kr\u00f3tka lista breaking changes, to migracja powinna by\u0107 stosunkowo szybka i raczej mo\u017cecie bez obaw wrzuci\u0107 j\u0105 na wasz backlog.<\/p>\n

\"\"<\/figure>\n

\u0179r\u00f3d\u0142a:<\/h3>\n

https:\/\/jestjs.io\/blog\/2021\/05\/25\/jest-27<\/a><\/p>\n

3. Nowe sposoby minimalizacji negatywnych efekt\u00f3w do\u0142adowywania czcionek<\/h1>\n

Layout Shift od dawna prze\u015bladuje wszystkich, kt\u00f3rzy agresywnie optymalizuj\u0105 swoje strony i aplikacje. Migotanie, wywo\u0142ane zmian\u0105 czcionki, dla jednych jest z\u0142em koniecznym, aby dostarczy\u0107 odwiedzaj\u0105cymu\u017cytkownikom tre\u015b\u0107 tak szybko jak to mo\u017cliwe, a dla drugich jest niedopuszczalnym uszczerbkiem w do\u015bwiadczeniu u\u017cytkownika, kt\u00f3ry tak naprawd\u0119 wola\u0142by poczeka\u0107 odrobin\u0119 d\u0142u\u017cej i unikn\u0105\u0107 niechcianych \u201cskok\u00f3w\u201d. Na szcz\u0119\u015bcie istniej\u0105 spore szanse, \u017ce sp\u00f3r pomi\u0119dzy tymi dwoma stronami wreszcie ujrzy sw\u00f3j koniec.o przegl\u0105darek ju\u017c wkr\u00f3tce ma trafi\u0107 bowiem zestaw nowych parametr\u00f3w css: ascent-override, descent-override, line-gap-override i size-adjust. Za ich pomoc\u0105 mo\u017cliwe b\u0119dzie zmodyfikowanie zast\u0119pczych czcionek w taki spos\u00f3b, \u017ce skoki wywo\u0142ane zmian\u0105 czcionek b\u0119d\u0105 prawie niewidoczne. Wygl\u0105da to naprawd\u0119 ciekawie i je\u015bli chcecie spr\u00f3bowa\u0107 nowo\u015bci w akcji to wszystkie opr\u00f3cz size-adjust znajdziecie w Chrome (a brakuj\u0105ce size-adjust w Chrome w wersji Canary).<\/p>\n

\n
\n

Excited for the CSS „size-adjust” descriptor for fonts: reduce layout shifts by matching up a fallback font and primary web font through a scale factor for glyphs (percentage).<\/p>\n

See https:\/\/t.co\/mdRW2BMg6A<\/a> by @cramforce<\/a> for a demo (Chrome Canary\/FF Nightly with flags) pic.twitter.com\/hEg1HfUJlT<\/a><\/p>\n

\u2014 Addy Osmani (@addyosmani) May 22, 2021<\/a><\/p><\/blockquote>\n