Frontend Thursday vol. 38

1. Microsoft ogłasza datę końca wsparcia dla IE 11 na Windows 10

W tym tygodniu ponownie mogliśmy wyzerować licznik dni, od kiedy ktoś ogłosił koniec wsparcia dla IE 11! Tym razem jest to jednak wydarzenie szczególne, bo po raz kolejny chodzi o firmę matkę samej przeglądarki (przyp: kilka miesięcy temu ogłoszono wycofanie wsparcia dla IE 11 w produktach oferowanych w ramach Microsoft 365). Przechodząc do konkretów: 15 czerwca 2022 roku Microsoft przestanie wspierać IE 11 w wersji dla systemu Windows 10. Niestety w przypadku pozostałych wersji ,nie jest już tak kolorowo, bo na Windows 7 i 8 IE 11 będzie wspierany do 1 października 2023, a na wersji serwerowej i IoT aż do 1 września 2029 (auć!).

Jeśli pracujecie w organizacji, która wykorzystuje aplikacje działające tylko na IE 11 ( z wyliczeń Microsoftu wynika, że na jeden biznes przypada 1,678 takich aplikacji) to nie musicie szykować się na koniec świata. Silnik stojący za pradziadkiem współczesnych przeglądarek nadal będzie utrzymywany, a wraz z nim tryb kompatybilności wstecznej dla Edge. Jeśli chodzi natomiast o ciekawostki, o których wszyscy oprócz mnie słyszeli, to Internet Explorer oferuje opcję wyświetlenia banera zachęcającego do migracji na nowszą przeglądarkę i umożliwia łatwe przeniesienia historii, ciasteczek i haseł.

Co ta zmiana oznacza dla nas deweloperów? Przede wszystkim możemy liczyć na to, że coraz więcej twórców bibliotek i frameworków pójdzie teraz w ślady Vue i Angulara, porzucając całkowicie wsparcie dla Internet Explorera. Dzięki temu ich kod powinien stać się czytelniejszy i wydajniejszy. No i oczywiście wszyscy uciemiężeni utrzymywaniem wsparcia dla Internet Explorera mogą już powoli oczekiwać upragnionej wolności.

Źródła:

https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/
https://docs.microsoft.com/en-us/microsoft-edge/web-platform/ie-to-microsoft-edge-redirection
https://techcommunity.microsoft.com/t5/windows-it-pro-blog/internet-explorer-11-desktop-app-retirement-faq/ba-p/2366549

2. Przyszłość CSS: @container

Tworzenie responsywnych webowych aplikacji na papierze zazwyczaj reklamowane jest jako proste, szybkie i przyjemne. W praktyce okazuje się, że nie każdy przypadek da się obsłużyć prostym @media-query, a połączenie responsywności i reużywalności komponentów potrafi przyprawić o zawrót głowy. Odpowiedzią na ten problem ma być @container, który trafił do trzeciej fazy prac W3C i jest już eksperymentalnie dostępny w Chrome Canary.

Czym jest @container? W skrócie jest to @media-query, ale zamiast odnosić się do ekranu, odnosimy się do komponentu rodzica. Pozwala to na tworzenie reużywalnych komponentów, które będą się różnie zachowywać w zależności od tego, gdzie je umieścimy. Future is now, old man! Ja nie mogę się już doczekać, kiedy ten feature trafi w moje ręce!

@container (max-width: 850px) {
  .links {
    display: none;
  }
  .time {
    font-size: 1.25rem;
  }
  /* ... */
}
/* when the parent container is smaller than 650px,
decrease the .card element's grid gap to 1rem */
@container (max-width: 650px) {
  .card {
    gap: 1rem;
  }
  /* ... */
}

Przykładowy snippet z podlinkowanego w źródle tutoriala. Wygląda to naprawdę ciekawie!

Źródła:

https://css-tricks.com/next-gen-css-container/

3. zx – nowe narzędzie do pisania skryptów od Google

W minionym tygodniu w JavaScriptowym świecie zrobiło się sporo szumu wokół zx, czyli nowego narzędzia do pisania skryptów od Google. Zx oferuje przede wszystkim prostotę: koniec z obsługą child processes i całą masą wygodnych, a także prostych funkcji dostarczonych out of the box.

#!/usr/bin/env zx
await $`ls -1 | wc -l`
let branch = await $`git branch --show-current`
await $`printf ${branch} | wc` // The new line trimmed from stdout.
let foo = `hi; echo 'oops'`
await $`echo ${foo} | wc` // Vars properly quoted.
// We can use import and require together.
let path = await import('path')
let {name} = require(path.join(__dirname, '..', 'package.json'))
console.log(chalk.black.bgCyanBright(name))

Przykładowy skrypt w zx

Wygląda dosyć ciekawie, ale w mojej głowie pali się lekko czerwona lampka. Co prawda, narzędzie znajduje się na Githubie Google, wspierane jest przez ludzi z Google, ale sam Google umywa ręce od oficjalnego wsparcia. Równie podejrzanie wygląda historia wersji w npm registry. Narzędzie powstało już 5 lat temu, wersja 1.0.0 ukazała się 3 lata temu, a wersja 1.0.1 dopiero niespełna miesiąc temu. Biblioteką interesowało się tylko kilka osób tygodniowo, co może sugerować, że używał go jakiś zespół wewnątrz Google’a, ale to tylko moje luźne przemyślenia. Wnioski? Na ten moment raczej nie użyłbym zx do wsparcia kluczowego procesu w biznesie, ale już do ułatwienia sobie codziennej pracy, czemu nie.

Źródła:

https://github.com/google/zx

4. Material You

Pomimo braku deweloperskich konkretów na samej konferencji, nie mogłem się powstrzymać przed podzieleniem się z wami chociaż jednym newsem z Google IO (jeśli chcecie więcej, to w sobotę Artur na pewno przyjrzy się dokładniej wszystkiemu, co działo się tam działo). Informacja, którą dla Was wybrałem, to ogłoszenie nowej wersji Material Design, która stawiać ma przede wszystkim na personalizację. Nowa wersja trafi do Androida 12, a już dzisiaj można jej wersję beta testować na telefonach od Google’a.

Co będzie wyróżniało nową wersję? UI i UX Designerzy prawdopodobnie byliby w stanie przygotować pracę doktorską na ten temat, ale to co mnie rzuciło się w oczy, to przede wszystkim możliwość personalizacji kolorów na niespotykaną do tej pory skalę. Android automatycznie wykrywał będzie paletę kolorów na podstawie tapety, a następnie aplikował ją do wszystkich systemowych aplikacji. To co szczególnie ciekawe dla frontendowców to fakt, że mimochodem ludzie z Google’a wspomnieli, że personalizacja w przyszłości działać będzie również w aplikacjach webowych. Co prawda nie udało mi się znaleźć żadnych danych na temat API, ale podskórnie wyczuwam, że po Dark Mode kolejną modą może stać się pełna personalizacja kolorów.