Frontend Thursdaty vol. 40

1. Sparkplug

Usprawnienieniom w V8 zazwyczaj towarzyszą szczegółowo opisujące je blogposty, które dla stereotypowego frontend developera są niemałą przeprawą. Wyrwanie z wysokopoziomowego świata JavaScriptu do niskopoziomowego świata kompilatorów i interpreterów potrafi być bolesne i zmusza do odświeżenia od dawna zakurzonej wiedzy ze studiów. Nie inaczej jest i tym razem. Wraz z Chrome 91 Google postanowił wzbogacić swój silnik składający się z zapłonu (Ignition) i turbiny (TurboFan) o jeszcze jedną część: świece (Sparkplug).  Nowa część znajduje miejsce pośrodku znanych już z poprzednich wersji elementów i będzie odpowiedzialna za nie zoptymalizowaną kompilację JavaScriptu.

Nie odważę się podjąć próby wyjaśnienia Wam w przejrzysty i zwięzły sposób, dlaczego wprowadzenie dodatkowego kroku do pipeline’u jest dobrym pomysłem. Jeśli macie ochotę zagotować trochę Wasze szare komórki, to możecie spróbować dojść do tego sami, czytając podlinkowany poniżej blogpost (którego autorem jest osoba o wyjątkowo Polskim nazwisku!). Jeśli natomiast z racji długiego weekendu wolicie trochę odpocząć to zostawię Was z TLDR, które powinno w zupełności Wam wystarczyć: V8 w nowej wersji przyśpieszył o kolejne +/- 10%.

Źródła:

https://v8.dev/blog/sparkplug

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. Jest 27

Jest zdaje się powoli stawać standardem jeśli chodzi o biblioteki do frontendowych testów, dlatego nie sposób przejść obojętnie obok pierwszego od roku dużego wydania tej biblioteki. Stety (albo niestety) w nowej wersji nie znajdziemy ekscytujących nowości, a raczej powolne zmiany w dobrym kierunku. Mamy tu przede wszystkim ulepszenia w domyślnej konfiguracji, które w Jest 28 doprowadzić mają do podziału biblioteki na więcej mniejszych podpakietów. Znajdziemy tu więc podmianę podstawowego test runnera z jest-jasmine2 na jest-circus (który od dawna był już tym domyślnym w aplikacjach generowanych przez create-react-app) oraz zmianę domyślnego środowiska uruchomieniowego z jsdom na node (co w przypadku testów nie potrzebujących emulacji DOMu ma znacząco poprawić wydajność). Jest też oczywiście kilka mniejszych nowości, np. interaktywny tryb ma umożliwiać przechodzenie przez spadające testy. Jeśli nie dotyczy Was krótka lista breaking changes, to migracja powinna być stosunkowo szybka i raczej możecie bez obaw wrzucić ją na wasz backlog.

Źródła:

https://jestjs.io/blog/2021/05/25/jest-27

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

3. Nowe sposoby minimalizacji negatywnych efektów doładowywania czcionek

Layout Shift od dawna prześladuje wszystkich, którzy agresywnie optymalizują swoje strony i aplikacje. Migotanie, wywołane zmianą czcionki, dla jednych jest złem koniecznym, aby dostarczyć odwiedzającymużytkownikom treść tak szybko jak to możliwe, a dla drugich jest niedopuszczalnym uszczerbkiem w doświadczeniu użytkownika, który tak naprawdę wolałby poczekać odrobinę dłużej i uniknąć niechcianych “skoków”. Na szczęście istnieją spore szanse, że spór pomiędzy tymi dwoma stronami wreszcie ujrzy swój koniec.o przeglądarek już wkrótce ma trafić bowiem zestaw nowych parametrów css: ascent-override, descent-override, line-gap-override i size-adjust. Za ich pomocą możliwe będzie zmodyfikowanie zastępczych czcionek w taki sposób, że skoki wywołane zmianą czcionek będą prawie niewidoczne. Wygląda to naprawdę ciekawie i jeśli chcecie spróbować nowości w akcji to wszystkie oprócz size-adjust znajdziecie w Chrome (a brakujące size-adjust w Chrome w wersji Canary).

@font-face {
	font-family: 'Lato';
	src: url('/static/fonts/Lato.woff2') format('woff2');
	font-weight: 400;
}
@font-face {
	font-family: "Lato-fallback";
	size-adjust: 97.38%;
	ascent-override: 99%;
	src: local("Arial");
}
h2 {
	font-family: Lato, Lato-fallback, sans-serif;
}

Źródła:

https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/