TypeScript 4.8 wreszcie trafił w nasze ręce - Frontend Weekly vol. 103

1. TypeScript 4.8

W zamierzchłych czasach każda kolejna premiera TypeScript wzbudzała moją ekscytację. Optional Chaining, Template Literal Types, Type-Only Imports, Variadic Tuple Types – to były funkcjonalności o których czytałem z wypiekami na twarzy i nie mogłem doczekać się, aż trafią w moje ręce.

Ostatnimi czasy sporo się jednak zmieniło. TypeScript stał się dojrzały językiem więc ekscytujące nowości stały się rzadkością. Nie inaczej jest też w przypadku najnowszego TypeScript 4.8, który skupia się na lepszej obsłudze kilku przypadków brzegowych oraz drobnych usprawnieniach wydajności.

Z dziennikarskiego obowiązku przytoczę Wam tutaj kilka najciekawszych moim zdaniem zmian. Jeśli jednak macie trochę więcej czasu, to jak zwykle polecam zanurzyć się w długą i dogłębną notatkę, którą przygotował Microsoft.

Zacznijmy od usprawnień Intersection Reduction oraz Union Compatibility. Pod tą skomplikowaną nazwą kryją się tak naprawdę dwie proste zmiany. Pierwsza z nich polega na utożsamieniu typu unknown z unią pustego obiektu, null i undefined.

function f(x: unknown, y: {} | null | undefined) {
    x = y; // always worked
    y = x; // used to error, now works
}

Druga zmiana polega na tym, że od teraz część wspólna między dowolnym typem obiektu i pustym obiektem będzie rozwijana po prostu jako ten obiekt. Zmiana ta pozwoliła zredefiniować typ NonNullable. W połączeniu ze zmianą z poprzedniego akapitu pozwala to na kilku naprawdę zgrabnych usprawnień w kodzie.

type NonNullable<T> = T & {};

function throwIfNullable<T>(value: T): NonNullable<T> {
    if (value === undefined || value === null) {
        throw Error("Nullable value!");
    }

    // Used to fail because 'T' was not assignable to 'NonNullable<T>'.
    // Now narrows to 'T & {}' and succeeds because that's just 'NonNullable<T>'.
    return value;
}

Na koniec zostawiłem sobie nowość, która w pierwszej chwili sprawiła, że mój mózg zaczął lekko parować. W dużym uproszczeniu słowo kluczowe infer pozwala nam wyekstraktować kawałek typu, tak aby wykorzystać go później, np. w Conditional Type. Od teraz będzie można go wykorzystywać również w Template String Type. Brzmi skomplikowanie i tak też wygląda.

// SomeNum used to be 'number'; now it's '100'.
type SomeNum = "100" extends `${infer U extends number}` ? U : never;

// SomeBigInt used to be 'bigint'; now it's '100n'.
type SomeBigInt = "100" extends `${infer U extends bigint}` ? U : never;

// SomeBool used to be 'boolean'; now it's 'true'.
type SomeBool = "true" extends `${infer U extends boolean}` ? U : never;

Oprócz opisanych przeze mnie nowości, Microsoft przygotował też szereg bufixów i usprawnień wydajności. Tak jak wspominałem, jeśli jesteście zainteresowani szczegółami, to najlepiej zrobicie jeśli natychmiast przejdziecie do notatki towarzyszącej wydaniu, którą znajdziecie w źródłach.

Źródła

https://devblogs.microsoft.com/typescript/announcing-typescript-4-8/

2. Gatsby wraca do gry

To zadziwiające jak w zaledwie kilka lat Gatsby przeszedł drogę od numeru jeden w kategori renderowania React po stronie serwera, do bycia jedną z wielu alternatyw dla Next.js. Gatsby nie składa jednak broni i po wydanym w zeszłym roku Gatsby 4 prezentuje teraz szereg nowych funkcjonalności, a wśród nich zupełnie nową strategię renderowania.

Nowa strategia nazywa się Reactive Site Generation i umożliwia automatyczne przerenderowanie wybranych stron za każdym razem kiedy aktualizujemy nasz CMS. Całość możliwa jest dzięki integracji z GraphQL i jak określają twórcy tej architektury, jest to hot reload dla produkcyjnych aplikacji.

Na swoim blogu zespół odpowiedzialny za Gartsby przygotował obszerną analizę wydajności. W zestawieniu pod uwagę wzięto zarówno kilka alternatywnych architektur jak i zastosowanie różnych dostępnych na rynku narzędzi. W rankingu tym Reactive Site Generation wygląda naprawde nieźle. Szkoda tylko, że wymaga ona vendor lock-in do dosyć niszowej chmury, a obsługiwane są tylko i wyłącznie wybrane narzędzia do CMS.

Źródła

https://www.gatsbyjs.com/blog/re-introducing-gatsby-a-reactive-site-generator/

3. Wtyczki do Chrome ukradły dane 1.4M użytkowników

Mówił Wam już ktoś, że instalowanie przeglądarkowych wtyczek to nie najlepszy pomysł jeśli chodzi o bezpieczeństwo? Jeśli nie, to ja właśnie mówię. Podczas gdy niesamowicie dużo uwagi poświęca się blokowaniu trackerów takich Google Analytics czy Facebook Pixel oraz bezpieczeństwu aplikacji mobilnych, tak wtyczki do przeglądarek zazwyczaj przechodzą poza wszelkimi radarami. Myślę, że to właśnie z tego powodu do dzisiaj nie są one przez nikogo weryfikowane i mają zaskakująco duże uprawnienia.

O tym jak niebezpieczne są przeglądarkowe wtyczki najlepiej przekonali się użytkownicy Netflix Party, Netflix Party 2, Screenshotting, FlipShope oraz AutoBuy. Jak donosi firma McAfee, wtyczki te były pobrane prawie półtora miliona razy i śledziły wszystkie storny odwiedzane przez ich użytkowników. Jeśli na serwerze do znajdował się link afiliacyjny dla danej strony, to był on przesyłany z powrotem do wtyczki.Ta otwierała adekwatny iframe lub odpowiednio modyfikowała ciasteczka, tak aby zgarnąć kilka groszy.

Osobiście wątpię, żeby celem właścicieli wymienionych wtyczek było dogłębne śledzenie ich użytkowników. Nie możemy być tego jednak w 100% pewni, a wtyczka chcąc podjąć takie działania powinna jasno informować o nich użytkowników. Mocno przypomina mi to kontrowersje wokół Brave, który przez pewien czas na kilku stronach również dokładał linki afiliacyjne. Jak widać, internetowa społeczność nie lubi kiedy ktoś próbuje na niej zarabiać bez jej wcześniejszej zgody.

Obecnie wszystkie wymienione wcześniej wtyczki zniknęły już z chrome web store. Niestety cały proces zajął kilka dni, a ponadto jeśli zainstalowaliście jedną z nieuczciwych wtyczek, to nadal musicie manualnie ją odinstalować.

O tym, w jak złym stanie jest bezpieczeństwo przeglądarkowych wtyczek niech poświadczy fakt, że nieuczciwa wtyczka Screenshotting w chrome web store posiadała odznakę Featured. Aby ją uzyskać przeglądarka musi zostać manualnie przetestowana przez pracownika Google i musi spełniać najwyższe standardy jeśli chodzi o doświadczenia użytkownika. Ewidentnie zawiódł tutaj czynnik ludzki, a co gorsza, przez kilka dni od wykrycia oszustwa, Google nadal rekomendował Screenshotting w swoim sklepie.

Źródła

https://www.bleepingcomputer.com/news/security/chrome-extensions-with-14-million-installs-steal-browsing-data/

Bonus: WebKit migruje do GitHuba

Jeśli podobnie jak ja myśleliście, że wszystkie poważne projekty już od dawna używają gita, to za chwilę czeka Was brutalne rozbicie bańki. WebKit, czyli silnik przeglądarki od Apple używanej przez co piątego użytkownika internetu, w minionym tygodniu został zmigrowany z Subversion do GitHuba.