Frontend Thursday vol. 28

Hej
Kolejny tydzień za nami więc nadszedł czas na kolejną edycję naszego przeglądu nowości ze świata Frontendu. Łapcie gorącą kawę ☕️ i zapraszam do lektury

1. @font-face incremental loading

W tym tygodniu w repozytorium CSS Working Group Specifications (część W3C) pojawił się draft funkcjonalności, która wywoła stosunkowo duże zamieszanie, jak na swój było nie było jeszcze wczesny status. Inkrementalne wsparcie dla @font-face ma umożliwić załadowanie tylko tych znaków z czcionki, które rzeczywiście są używane na stronie oraz dynamiczne doładowywanie kolejnych w miarę potrzeby. Z powodów bezpieczeństwa niestety niezbędne będzie dodanie również szumu do pobieranych danych – bez tego możliwe byłoby częściowe śledzenie treści strony, czy danych wypełnianych przez użytkownika po stronie serwera hostującego czcionki

@font-face {
    font-family: "MyIncrementallyLoadedWebFont";
    src: url("MyIncrementallyLoadedWebFont.otf") format(opentype supports incremental);
}

Propozycja API nowej funkcjonalności

Przeglądając Twittera nie sposób oprzeć się wrażeniu, że wprowadzenie takiej funkcjonalności znacząco przyśpieszy pierwsze ładowanie strony. Nikt jednak nie dzieli się statystykami, więc ja osobiście mocno powątpiewam w `istotność` tego feature. Większość z nas tworzy strony, które wymagają załadowania zdecydowanej większości czcionki, a warto pamiętać, że czcionki to zazwyczaj nie są największe pliki, jakie zaciągają nasze strony. 30% przyśpieszenie w ładowaniu czcionek brzmi naprawdę ambitnie, ale w kontekście ładowania całej strony, liczba ta przestaje robić aż takie wrażenie.

Czy uważam więc, że cała funkcjonalność jest bez sensu? Zdecydowanie nie. W przypadku alfabetów bardziej rozbudowanych niż łaciński procentowy zysk, może być sporo większy. Poza tym część funkcjonalność na pewno znajdzie swoje miejsce na prostych dobrze zoptymalizowanych stronach oraz na takich, gdzie potrzebujemy więcej niż 2 czcionek, z czego większość wykorzystana jest tylko do jednego krótkiego nagłówka.

Kiedy możemy spodziewać się wsparcia dla zaproponowanej funkcjonalności? Niestety raczej niezbyt szybko. W podlinkowanym niżej drafcie funkcjonalności możemy znaleźć informację, że sposób komunikacji z serwerem nie jest jeszcze ustalony. Moim zdaniem oznacza to, że przed nami jeszcze długa droga, zanim zobaczymy realne efekty. Tymczasem, jeśli wyjątkowo spodobała Wam się ta funkcjonalność, to nic nie stoi na przeszkodzie, żebyście zapakowali swoje czcionki, w taki sposób aby pozbyć się zbędnych znaków (lub przygotowali osobną czcionkę dla każdego znak). Znacie jakieś platformy, które bawią się w takie super-optymalizacje? Jeśli tak to koniecznie dajcie znać!

Źródła:

https://twitter.com/PixelAmbacht/status/1368864628491616259?s=09
https://github.com/w3c/csswg-drafts/issues/6063

2. New TypeScript handbook

TypeScript twardo stoi na pozycji lidera, jeśli chodzi o tzw. JavaScript Flavours. Najlepiej świadczy o tym pojawienie się w zeszłym tygodniu dużej wersji ReScript (dawniej Reason), która rozeszła się po sieci echem wielokrotnie mniejszym niż kolejna minor wersja TypeScriptu. Jednym z powodów, dla których wszyscy pokochali TypeScript jest dobra dokumentacja.Tym większy podziw budzi fakt, że ludzie z Microsoftu nie spoczywają na laurach i postanowił przepisać od zera podręcznik do TypeScriptu.

Wiem, że są wśród nas osoby o odmiennym zdaniu na temat dokumentacji TypeScriptu. Jestem ciekaw ciekaw czego Wam najbardziej brakuje.

Motywacje do tego przedsięwzięcia były jak najbardziej słuszne. Po pierwsze poprzedni podręcznik powstał już kilka lat temu i od tego czasu JavaScript mocno poszedł do przodu. Oznacza to, że część problemów mocno eksploatowanych w starym podręczniku, dziś omija programistów wchodzących w świat TypeScriptu. Pod drugie podjęto decyzję o porzuceniu tłumaczeniu zasad działania JavaScriptu w samym podręczniku. W sieci jest sporo dobrej jakości treści do nauki JavaScriptu, a jako że TypeScript jest rozszerzeniem tegoż, to nie sposób nauczyć się tego drugiego, nie poznając najpierw podstaw tego pierwszego.

Jeśli korzystacie już na co dzień z TypeScriptu, to w podręczniku raczej nie znajdziecie dla siebie nic ciekawego. Warto natomiast zapisać sobie link do niego, żeby mieć pod ręką dobry materiał do polecania wszystkim, którzy zastanawiają się, od czego zacząć naukę TypeScriptu.

Źródła:

https://devblogs.microsoft.com/typescript/announcing-the-new-typescript-handbook/

3. Speeding up Google Chrome’s release cycle

Tydzień temu przyglądaliśmy się nowym funkcjonalnościom DevTools Chrome’a. Od teraz będziemy musieli to robić trochę częściej, bo Chrome przyśpiesza swój cykl releasowania z 6 tygodni do 4 tygodni. Oznacza to, że Google będzie teraz wypuszczał nową wersję swojej przeglądarki z taką samą częstotliwością jak Mozilla. Z jednej strony to dobrze, z drugiej strony obawiam się, że szybki cykl releasowania będzie kolejnym gwoździem do trumny dla tych, którzy próbują jeszcze stawić czoła wielkiemu G.

PS: Nowy cykl releasowania Chrome oznacza również nowy cykl releasowanie V8