Frontend Thursday vol. 74 – Chrome 98 i 99, fetch API dla Node

1. Nowości w Chrome 98 i 99

Zazwyczaj nie informujemy Was o kolejnych wydaniach Chrome, ale do wydanego w tym tygodniu Chrome 98 i do zbliżającego się Chrome 99 trafiły naprawdę ciekawe funkcjonalności. Zacznijmy od tego z czego możecie cieszyć się już dziś, czyli wsparcia dla czcionek w formacie COLRv1 w Chrome 98. Poprzednik nowego formatu, czyli COLORv0 umożliwiał definiowanie czcionek wraz z kolorami. COLORv1 dodaje funkcjonalność gradientów oraz znane z SVG funkcjonalności kompozycji i mieszania. Ponadto nowy format umożliwia ponowne wykorzystywanie raz zdefiniowanych kształtów, co w specyficznych przypadkach prowadzi do sporej optymalizacji.

Po co nam programistom format umożliwiający tak zaawansowane kolorowanie czcionek? Oczywistą odpowiedzią jest możliwość tworzenia zwariowanych nagłówków bez potrzeby generowania dedykowanych obrazków w formacie SVG. Ciekawszą odpowiedzią jaką stawia Google jest wsparcie dla własnych emoji czy kolorowych ikon. Na papierze wygląda to dobrze, ale mnie osobiście niepokoi rozjazd w sposobie wspierania własnych emoji pomiędzy przeglądarkami. Trzymam kciuki, żeby wsparcie dla COLORv1 pojawiło się również w Safari i Firefox.

Przejdźmy teraz do nowości zmierzających do Chrome 99. Przeglądarki od dawna dostarczają natywne komponenty, które umożliwiają wybór daty, czasu czy koloru. Do tej pory jedyną możliwością otworzenia tych komponentów było umieszczenie na stronie inputu z odpowiednio ustawionym typem i pozostawienie reszty użytkownikowi. Programiści chcący z poziomu kodu otworzyć podobny komponent skazani byli na korzystanie z zewnętrznych bibliotek, które z różnym skutkiem próbowały emulować odpowiednie komponenty. Od Chrome 99 możliwe będzie otworzenie natywnych komponentów wyboru z poziomu API. Niestety, aby to zrobić nadal niezbędna będzie obecność odpowiedniego inputa i wystąpienie interakcji ze strony użytkownika. Podobnie jak w przypadku COLORv1, tu również czekamy na wsparcie ze strony pozostałych przeglądarek.

<input type="date">
<button>Show the date picker</button>

<script>
  const button = document.querySelector("button");
  const dateInput = document.querySelector("input");

  button.addEventListener("click", () => {
    try {
      dateInput.showPicker();
      // A date picker is shown.
    } catch (error) {
      // Use external library when this fails.
    }
  });
</script>

Źródła:

https://developer.chrome.com/blog/show-picker/
https://developer.chrome.com/blog/colrv1-fonts/

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. Node wreszcie otrzymał wsparcie dla fetch API

Do Node 18 za flagą `–experimental-fetch` trafiło wreszcie wsparcie dla fetch API znanego z przeglądarek! Jeśli funkcjonalność ta kiedyś wyjdzie z fazy eksperymentu, to będzie to gigantyczny krok dla kompatybilności bibliotek przeznaczonych dla przeglądarek i serwerów. Wspomnijmy chociażby, o możliwości uwspólnienia kodu odpowiedzialnego za komunikację z serwerem dla aplikacji renderowanej po stronie serwera i po stronie klienta. 

Na razie bądźcie jednak uważni, gdyż wsparcie dostarczone jest przez integrację z biblioteką Undici, która w swojej dokumentacji wyraźnie zaznacza, że metoda fetch() nie jest jeszcze w pełni kompatybilna z wersją przeglądarkową. Na przetestowanie zmian osobiście przyjdzie nam też trochę poczekać, bo premiera Node 18 zapowiedziana jest na 19-04-2022.

Źródła:

https://github.com/nodejs/node/pull/41749
https://undici.nodejs.org/#/?id=undicifetchinput-init-promise

3. Storybook przygotował plugin do Figmy

Storybook w ostatnich miesiącach pokazuje nowe funkcjonalności i pluginy szybciej niż dobrze rozgrzany karabin maszynowy. Kilka dni temu firma zaprezentowała kolejną możliwość integracji i tym razem padło na chyba najpopularniejsze narzędzie dla UI Designerów, czyli Figmę. Przygotowany plugin umożliwia połączenie designu komponentów  z odpowiednikami w Storybook. Niestety nie zapewni to 100% zgodności designów z implementacją, ale pozwoli designerom zobaczyć jak w obecnej wersji biblioteki prezentuje się wybrany komponent. Podgląd zaimplementowanego komponentu uruchamiany jest w interaktywnym trybie wewnątrz figmy, co pozwala w prosty sposób porównywać design z implementacją.

Źródła:

https://storybook.js.org/blog/figma-plugin-sneak-peek/

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!

4. WebVM: wirtualna maszyna x86 w przeglądarce

Na zakończenie mam dla was raczej ciekawostkę, niż narzędzie z którego rzeczywiście skorzystacie w pracy. WebVM to wirtualna maszyna x86 oparta o debiana i  uruchamiana całkowicie w przeglądarce klienta. Jako silnik wykorzystany został CheerpX, czyli napisana w C++ wirtualna maszyna. Następnie kod źródłowy skompilowany został przy użyciu narzędzi Cheerp, które transformuje kod napisany w C lub C++ do postaci miksu JavaScriptu i WebAssembly. Co ciekawe CheerpX wykorzystywany jest też do emulacji martwej już technologii Flash. Jeśli jesteście ciekawi jak emulowany jest system plików lub jak w locie na apodstwie x86 generwoany jest WASM to zachęcam do zerknięcia w źródła.

Żródła:

https://leaningtech.com/webvm-server-less-x86-virtual-machines-in-the-browser/