{"id":10135,"date":"2021-05-20T17:05:00","date_gmt":"2021-05-20T15:05:00","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-38\/"},"modified":"2022-09-19T13:16:42","modified_gmt":"2022-09-19T11:16:42","slug":"frontend-thursday-vol-38","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-38\/","title":{"rendered":"Frontend Thursday vol. 38"},"content":{"rendered":"

1. Microsoft og\u0142asza dat\u0119 ko\u0144ca wsparcia dla IE 11 na Windows 10<\/h1>\n

W tym tygodniu ponownie mogli\u015bmy wyzerowa\u0107 licznik dni, od kiedy kto\u015b og\u0142osi\u0142 koniec wsparcia dla IE 11! Tym razem jest to jednak wydarzenie szczeg\u00f3lne, bo po raz kolejny chodzi o firm\u0119 matk\u0119 samej przegl\u0105darki (przyp: kilka miesi\u0119cy temu og\u0142oszono wycofanie wsparcia dla IE 11 w produktach oferowanych w ramach Microsoft 365). Przechodz\u0105c do konkret\u00f3w: 15 czerwca 2022 roku Microsoft przestanie wspiera\u0107 IE 11 w wersji dla systemu Windows 10. Niestety w przypadku pozosta\u0142ych wersji ,nie jest ju\u017c tak kolorowo, bo na Windows 7 i 8 IE 11 b\u0119dzie wspierany do 1 pa\u017adziernika 2023, a na wersji serwerowej i IoT a\u017c do 1 wrze\u015bnia 2029 (au\u0107!).<\/p>\n

Je\u015bli pracujecie w organizacji, kt\u00f3ra wykorzystuje aplikacje dzia\u0142aj\u0105ce tylko na IE 11 ( z wylicze\u0144 Microsoftu wynika, \u017ce na jeden biznes przypada 1,678 takich aplikacji) to nie musicie szykowa\u0107 si\u0119 na koniec \u015bwiata. Silnik stoj\u0105cy za pradziadkiem wsp\u00f3\u0142czesnych przegl\u0105darek nadal b\u0119dzie utrzymywany, a wraz z nim tryb kompatybilno\u015bci wstecznej dla Edge. Je\u015bli chodzi natomiast o ciekawostki, o kt\u00f3rych wszyscy opr\u00f3cz mnie s\u0142yszeli, to Internet Explorer oferuje opcj\u0119 wy\u015bwietlenia banera zach\u0119caj\u0105cego do migracji na nowsz\u0105 przegl\u0105dark\u0119 i umo\u017cliwia \u0142atwe przeniesienia historii, ciasteczek i hase\u0142.<\/p>\n

Co ta zmiana oznacza dla nas deweloper\u00f3w? Przede wszystkim mo\u017cemy liczy\u0107 na to, \u017ce coraz wi\u0119cej tw\u00f3rc\u00f3w bibliotek i framework\u00f3w p\u00f3jdzie teraz w \u015blady Vue i Angulara, porzucaj\u0105c ca\u0142kowicie wsparcie dla Internet Explorera. Dzi\u0119ki temu ich kod powinien sta\u0107 si\u0119 czytelniejszy i wydajniejszy. No i oczywi\u015bcie wszyscy uciemi\u0119\u017ceni utrzymywaniem wsparcia dla Internet Explorera mog\u0105 ju\u017c powoli oczekiwa\u0107 upragnionej wolno\u015bci.<\/p>\n

<\/figure>\n

\u0179r\u00f3d\u0142a:<\/h3>\n

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

2. Przysz\u0142o\u015b\u0107 CSS: @container<\/h1>\n

Tworzenie responsywnych webowych aplikacji na papierze zazwyczaj reklamowane jest jako proste, szybkie i przyjemne. W praktyce okazuje si\u0119, \u017ce nie ka\u017cdy przypadek da si\u0119 obs\u0142u\u017cy\u0107 prostym @media-query, a po\u0142\u0105czenie responsywno\u015bci i reu\u017cywalno\u015bci komponent\u00f3w potrafi przyprawi\u0107 o zawr\u00f3t g\u0142owy. Odpowiedzi\u0105 na ten problem ma by\u0107 @container, kt\u00f3ry trafi\u0142 do trzeciej fazy prac W3C i jest ju\u017c eksperymentalnie dost\u0119pny w Chrome Canary.<\/p>\n

Czym jest @container? W skr\u00f3cie jest to @media-query, ale zamiast odnosi\u0107 si\u0119 do ekranu, odnosimy si\u0119 do komponentu rodzica. Pozwala to na tworzenie reu\u017cywalnych komponent\u00f3w, kt\u00f3re b\u0119d\u0105 si\u0119 r\u00f3\u017cnie zachowywa\u0107 w zale\u017cno\u015bci od tego, gdzie je umie\u015bcimy. Future is now, old man! Ja nie mog\u0119 si\u0119 ju\u017c doczeka\u0107, kiedy ten feature trafi w moje r\u0119ce! <\/p>\n

\n
@container (max-width: 850px) {\n  .links {\n    display: none;\n  }\n  .time {\n    font-size: 1.25rem;\n  }\n  \/* ... *\/\n}\n\/* when the parent container is smaller than 650px,\ndecrease the .card element's grid gap to 1rem *\/\n@container (max-width: 650px) {\n  .card {\n    gap: 1rem;\n  }\n  \/* ... *\/\n}\n<\/code><\/pre>
Przyk\u0142adowy snippet z podlinkowanego w \u017ar\u00f3dle tutoriala. Wygl\u0105da to naprawd\u0119 ciekawie!<\/figcaption><\/figure>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/css-tricks.com\/next-gen-css-container\/<\/a><\/p>\n
3. zx – nowe narz\u0119dzie do pisania skrypt\u00f3w od Google<\/h1>\n
W minionym tygodniu w JavaScriptowym \u015bwiecie zrobi\u0142o si\u0119 sporo szumu wok\u00f3\u0142 zx, czyli nowego narz\u0119dzia do pisania skrypt\u00f3w od Google. \u00a0Zx oferuje przede wszystkim prostot\u0119: koniec z obs\u0142ug\u0105 child processes i ca\u0142\u0105 mas\u0105 wygodnych, a tak\u017ce \u00a0prostych funkcji dostarczonych out of the box. <\/p>\n
\n
#!\/usr\/bin\/env zx\nawait $`ls -1 | wc -l`\nlet branch = await $`git branch --show-current`\nawait $`printf ${branch} | wc` \/\/ The new line trimmed from stdout.\nlet foo = `hi; echo 'oops'`\nawait $`echo ${foo} | wc` \/\/ Vars properly quoted.\n\/\/ We can use import and require together.\nlet path = await import('path')\nlet {name} = require(path.join(__dirname, '..', 'package.json'))\nconsole.log(chalk.black.bgCyanBright(name))<\/code><\/pre>
Przyk\u0142adowy skrypt w zx<\/figcaption><\/figure>\n
Wygl\u0105da dosy\u0107 ciekawie, ale w mojej g\u0142owie pali si\u0119 lekko czerwona lampka. Co prawda, narz\u0119dzie znajduje si\u0119 na Githubie Google, wspierane jest przez ludzi z Google, ale sam Google umywa r\u0119ce od oficjalnego wsparcia. R\u00f3wnie podejrzanie wygl\u0105da historia wersji w npm registry. Narz\u0119dzie powsta\u0142o ju\u017c 5 lat temu, wersja 1.0.0 ukaza\u0142a si\u0119 3 lata temu, a wersja 1.0.1 \u00a0dopiero niespe\u0142na miesi\u0105c temu. Bibliotek\u0105 interesowa\u0142o si\u0119 tylko kilka os\u00f3b tygodniowo, co mo\u017ce sugerowa\u0107, \u017ce u\u017cywa\u0142 go jaki\u015b zesp\u00f3\u0142 wewn\u0105trz Google\u2019a, ale to tylko moje lu\u017ane przemy\u015blenia. Wnioski? Na ten moment raczej nie u\u017cy\u0142bym zx do wsparcia kluczowego procesu w biznesie, ale ju\u017c do u\u0142atwienia sobie codziennej pracy, czemu nie.<\/p>\n
\u0179r\u00f3d\u0142a:<\/h2>\n
https:\/\/github.com\/google\/zx<\/a><\/p>\n
4. Material You<\/h1>\n
Pomimo braku deweloperskich konkret\u00f3w na samej konferencji, nie mog\u0142em si\u0119 powstrzyma\u0107 przed podzieleniem si\u0119 z wami chocia\u017c jednym newsem z Google IO (je\u015bli chcecie wi\u0119cej, to w sobot\u0119 Artur na pewno przyjrzy si\u0119 dok\u0142adniej wszystkiemu, co dzia\u0142o si\u0119 tam dzia\u0142o). Informacja, kt\u00f3r\u0105 dla Was wybra\u0142em, to og\u0142oszenie nowej wersji Material Design, kt\u00f3ra stawia\u0107 ma przede wszystkim na personalizacj\u0119. Nowa wersja trafi do Androida 12, a ju\u017c dzisiaj mo\u017cna jej wersj\u0119 beta testowa\u0107 na telefonach od Google\u2019a.<\/p>\n
Co b\u0119dzie wyr\u00f3\u017cnia\u0142o now\u0105 wersj\u0119? UI i UX Designerzy prawdopodobnie byliby w stanie przygotowa\u0107 prac\u0119 doktorsk\u0105 na ten temat, ale to co mnie rzuci\u0142o si\u0119 w oczy, to przede wszystkim mo\u017cliwo\u015b\u0107 personalizacji kolor\u00f3w na niespotykan\u0105 do tej pory skal\u0119. Android automatycznie wykrywa\u0142 b\u0119dzie palet\u0119 kolor\u00f3w na podstawie tapety, a nast\u0119pnie aplikowa\u0142 j\u0105 do wszystkich systemowych aplikacji. To co szczeg\u00f3lnie ciekawe dla frontendowc\u00f3w to fakt, \u017ce mimochodem ludzie z Google\u2019a wspomnieli, \u017ce personalizacja w przysz\u0142o\u015bci dzia\u0142a\u0107 b\u0119dzie r\u00f3wnie\u017c w aplikacjach webowych. Co prawda nie uda\u0142o mi si\u0119 znale\u017a\u0107 \u017cadnych danych na temat API, ale podsk\u00f3rnie wyczuwam, \u017ce po Dark Mode kolejn\u0105 mod\u0105 mo\u017ce sta\u0107 si\u0119 pe\u0142na personalizacja kolor\u00f3w.<\/p>\n