{"id":10092,"date":"2021-08-26T16:10:41","date_gmt":"2021-08-26T14:10:41","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-52\/"},"modified":"2022-09-19T13:16:38","modified_gmt":"2022-09-19T11:16:38","slug":"frontend-thursday-vol-52","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/","title":{"rendered":"Frontend Thursday vol. 52 (Annual Edition)"},"content":{"rendered":"<p>To ju\u017c 52 edycja naszego frontendowca przegl\u0105du, a to oznacza, \u017ce przygotowujemy dla Was nasze podsumowania ju\u017c od ponad roku! Aby uczci\u0107 to donios\u0142e wydarzenie postanowili\u015bmy wybra\u0107 11, naszym zdaniem, najciekawszych trend\u00f3w i wydarze\u0144 minionego roku (kolejno\u015b\u0107 dobrana losowo). Na starcie ostrzegam: przygotujcie sobie spory kubek z kaw\u0105, bo to nie b\u0119dzie kr\u00f3tka lektura (ale za to jaka ciekawa!) \u2615\ufe0f<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif\" alt=\"\" \/><\/figure>\n<h1 id=\"1-react-17-i-react-server-components\">1. React 17 i React Server Components<\/h1>\n<p>W pa\u017adzierniku 2020 powitali\u015bmy kolejn\u0105 du\u017c\u0105 wersj\u0119 Reacta. Pomimo du\u017cego numerka (17), wydanie nie zawiera\u0142o nowych funkcjonalno\u015bci i skupia\u0142o si\u0119 na u\u0142atwieniu bardziej granularnych aktualizacji w przysz\u0142o\u015bci (zamiast migrowa\u0107 ca\u0142\u0105 aplikacj\u0119 za jednym razem, mo\u017cliwe ma by\u0107 migrowanie jej po kawa\u0142ku i wsp\u00f3\u0142istnienie kilku wersji Reacta w jednej aplikacji).<\/p>\n<p>Kiedy ju\u017c utwierdzi\u0142em si\u0119 w przekonaniu, \u017ce React popad\u0142 w stagnacj\u0119, tu\u017c przed \u015bwi\u0119tami Bo\u017cego Narodzenia z tego prze\u015bwiadczenia wybudzi\u0142 mnie Dan Abramov przedstawiaj\u0105c React Server Components. Koncepcja ta to wariancja Server Side Renderingu, kt\u00f3ra pozwala renderowa\u0107 cz\u0119\u015b\u0107 komponent\u00f3w po stronie klienta, a cz\u0119\u015b\u0107 po stronie serwera. Podej\u015bcie to minimalizuje ilo\u015b\u0107 kodu wysy\u0142anego do przegl\u0105darki (biblioteki importowane przez komponenty renderowane na serwerze nie s\u0105 pobierane przez klienta) i daje dost\u0119p do typowo serwerowych interfejs\u00f3w z poziomu Reacta (bazy danych, system plik\u00f3w). Oczywi\u015bcie rozwi\u0105zanie ma te\u017c swoje ograniczenia: komponenty renderowane na serwerze nie mog\u0105 przechowywa\u0107 stanu i obs\u0142ugiwa\u0107 interaktywnych akcji. Nie wiadomo, kiedy i czy React Server Components osi\u0105gn\u0105 status produkcyjny, ale zdecydowanie pomys\u0142 ten by\u0142 jednym z najwi\u0119kszych w ostatnich miesi\u0105cach powiew\u00f3w \u015bwie\u017co\u015bci we Frontendowym \u015awiecie.<\/p>\n<p>Je\u015bli jeste\u015bmy ju\u017c w kontek\u015bcie React, to warto wspomnie\u0107 r\u00f3wnie\u017c o powstaniu React Working Group, kt\u00f3re to ma by\u0107 przestrzeni\u0105 do komunikacji mi\u0119dzy spo\u0142eczno\u015bci\u0105, a lud\u017ami stoj\u0105cymi za implementacj\u0105 nowych funkcjonalno\u015bci. Grupa ta powsta\u0142a przy okazji og\u0142oszenia alfy Reacta 18, kt\u00f3ra w odr\u00f3\u017cnieniu od wersji 17, zawiera\u0107 b\u0119dzie ca\u0142\u0105 mas\u0119 nowych interesuj\u0105cych funkcji (mi\u0119dzy innymi wsparcie dla Suspense w Server Side Renderingu i lepsze batchowanie render\u00f3w). Pozostaje tylko cierpliwie czeka\u0107 na wersj\u0119 beta i oficjaln\u0105 wydanie.<\/p>\n<h3 id=\"przeczytaj-wi%C4%99cej\">Przeczytaj wi\u0119cej:<\/h3>\n<p><a href=\"https:\/\/reactjs.org\/blog\/2020\/12\/21\/data-fetching-with-react-server-components.html\"><em>https<\/em>:\/\/reactjs.org\/blog\/2020\/12\/21\/data-fetching-with-react-server-components.html<\/a><br \/>\n<a href=\"https:\/\/reactjs.org\/blog\/2021\/06\/08\/the-plan-for-react-18.html\">https:\/\/reactjs.org\/blog\/2021\/06\/08\/the-plan-for-react-18.html<\/a><\/p>\n<h1 id=\"2-angular-11-angular-12%E2%80%A6-nudy\">2. Angular 11, Angular 12\u2026 nudy!<\/h1>\n<p>Na przestrzeni ostatnich 12 miesi\u0119cy dostali\u015bmy dwie nowe wersje Angulara, i szczerze m\u00f3wi\u0105c, by\u0142y to dwa wydania nudne jak flaki z olejem. W ramach wersji 11 w \u017cycie wdro\u017cona zosta\u0142a \u201cOperacja Byelog\u201d, w ramach kt\u00f3rej otagowany zosta\u0142 ca\u0142y backlog b\u0142\u0119d\u00f3w i feature requests zg\u0142oszonych przez spo\u0142eczno\u015b\u0107 (uda\u0142o si\u0119 nawet wdro\u017cy\u0107 w \u017cycie kilka z nich). Opr\u00f3cz tego dosz\u0142o automatyczne inlineowanie czcionek, upi\u0119kszone logi i przy\u015bpieszone buildy. Wersja 12 w por\u00f3wnaniu z 11 wygl\u0105da odrobin\u0119 ciekawiej. Dostali\u015bmy w niej pe\u0142ne wsparcie dla Webpack 5, deprekacje View Engine i Protractora oraz kilka drobnych usprawnie\u0144. Reasumuj\u0105c Angular rozwija si\u0119 stabilnie, a na horyzoncie jak na razie brak wi\u0119kszych rewolucji (chyba jedyn\u0105, kt\u00f3ra przychodzi mi do g\u0142owy jest rozpocz\u0119cie prac nad opcjonalnymi modu\u0142ami, ale nie wiadomo jednak, kiedy ma to szans\u0119 trafi\u0107 w nasze r\u0119ce).<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb14a8cbe.gif\" alt=\"\" \/><figcaption>Teraz pewnie wszyscy ziewaj\u0105 przed ekranami &#8211; przepraszam, nie mog\u0142em si\u0119 powstrzyma\u0107<\/figcaption><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-1\">Przeczytaj wi\u0119cej:<\/h3>\n<p><a href=\"https:\/\/vived.io\/frontend-thursday-vol-32\/\">https:\/\/blog.vived.io\/frontend-thursday-vol-32\/<\/a><br \/>\n<a href=\"https:\/\/github.com\/angular\/protractor\/issues\/5502\">https:\/\/github.com\/angular\/protractor\/issues\/5502<\/a><\/p>\n<h1 id=\"3-vue-30\">3. Vue 3.0<\/h1>\n<p>Spo\u015br\u00f3d trzech najwi\u0119kszych frontendowych framework\u00f3w zdecydowanie najwi\u0119cej dzia\u0142o si\u0119 w obozie Vue. Po prawie dw\u00f3ch latach developmentu i trzech miesi\u0105cach otwartej bety, trzecia wersja Vue doczeka\u0142a si\u0119 oficjalnego releasu wersji 3.0. Framework otrzyma\u0142 wiele od dawna wyczekiwanych usprawnie\u0144. Virtual DOM zosta\u0142 przepisany w celu poprawy wydajno\u015bci i lepszej obs\u0142ugi TypeScriptu. Dodane zosta\u0142o nowe Composition API, kt\u00f3re wielu uwa\u017ca za reactowe hooki zrobione dobrze. Opr\u00f3cz tego w nowej wersji znajdziemy Conditional Suspend Rendering, nierenderowane w HTML fragmenty czy natywne wsparcie dla portali (i musicie przyzna\u0107, \u017ce wida\u0107 tutaj wiele inspiracji z ekosystemu Reacta).<br \/>\nVue 3.1 dostarczy\u0142 narz\u0119dzie u\u0142atwiaj\u0105ce migracj\u0119 z wersji 2, a Vue 3.2 dalsze ulepszenia w kierunku wsparcia WebComponent\u00f3w oraz Server Side Renderingu. Warto wspomnie\u0107 r\u00f3wnie\u017c, \u017ce Vuex, czyli najpopularniejszej w tym \u015brodowisku biblioteki do zarz\u0105dzania stanem, r\u00f3wnie\u017c wspiera ju\u017c Vue w wersji 3,0. No i oficjalnym narz\u0119dziem do budowaniu Vue jest niezwykle szybki Vite, kt\u00f3ry to r\u00f3wnie\u017c niedawno doczeka\u0142 si\u0119 kolejnej du\u017cej wersji.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb14cb3e0.png\" alt=\"\" \/><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-2\">Przeczytaj wi\u0119cej:<\/h3>\n<p><a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3-one-piece.html\">https:\/\/blog.vuejs.org\/posts\/vue-3-one-piece.html<\/a><br \/>\n<a href=\"https:\/\/blog.ninja-squad.com\/2021\/06\/07\/what-is-new-vue-3.1\/\">https:\/\/blog.ninja-squad.com\/2021\/06\/07\/what-is-new-vue-3.1\/<\/a><br \/>\n<a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3.2.html\">https:\/\/blog.vuejs.org\/posts\/vue-3.2.html<\/a><\/p>\n<h1 id=\"4-du%C5%BCe-pieni%C4%85dze-nowo-powstaj%C4%85ce-firmy-i-upadek-babela\">4. Du\u017ce pieni\u0105dze, nowo powstaj\u0105ce firmy i upadek Babela<\/h1>\n<p>Pieni\u0105dze rz\u0105dz\u0105 \u015bwiatem i nie inaczej jest w przypadku naszego ma\u0142ego frontendowego \u015bwiatka. A je\u015bli chodzi o finanse, to mam wra\u017cenie, \u017ce w minionych 52 tygodniach naprawd\u0119 sporo si\u0119 dzia\u0142o. Na pocz\u0105tek we\u017amy na tapet\u0119 trend, jakim by\u0142o powstanie firm wok\u00f3\u0142 otwarto \u017ar\u00f3d\u0142owych projekt\u00f3w, czyli Rome i Deno. Opr\u00f3cz uruchomienia dzia\u0142alno\u015bci, obu tym projektom uda\u0142o si\u0119 zgromadzi\u0107 od inwestor\u00f3w odpowiednio 5 i 4.5 miliona dolar\u00f3w i zatrudni\u0107 co najmniej kilku deweloper\u00f3w w pe\u0142nym wymiarze czasowym. W przypadku Deno mo\u017cna ju\u017c m\u00f3wi o pozytywnych efektach tego dzia\u0142ania: nowe wersje \u015brodowiska uruchomieniowego pojawiaj\u0105 si\u0119 regularnie, i co do zasady zawieraj\u0105 przynajmniej jedn\u0105 now\u0105 ciekaw\u0105 funkcjonalno\u015b\u0107. Abstrahuj\u0105c od konkretnych przypadk\u00f3w tych firm: dobrze widzie\u0107, \u017ce s\u0105 na rynku ludzie i organizacje gotowe zainwestowa\u0107 w otwarto \u017ar\u00f3d\u0142owe projekty. Pozostaje tylko mie\u0107 nadziej\u0119, \u017ce Deno i Rome odnios\u0105 sukces i przetr\u0105 drog\u0119 dla podobnych inwestycji w przysz\u0142o\u015bci.<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb15420ce.gif\" alt=\"\" \/><figcaption>Tw\u00f3rcy Deno i Rome, 2021 &#8211; koloryzowane<\/figcaption><\/figure>\n<p>Nie dla wszystkich ten rok by\u0142 jednak r\u00f3wnie kolorowy. Na blogu Babela opublikowana zosta\u0142a notatka informuj\u0105ca, \u017ce osobom odpowiedzialnym za utrzymanie i rozw\u00f3j narz\u0119dzia zaczyna brakowa\u0107 pieni\u0119dzy. Je\u015bli interesuj\u0105 Was twarde dane, to Babel do gromadzenia \u015brodk\u00f3w korzysta z OpenCollective, a dane o bud\u017cecie s\u0105 publicznie dost\u0119pne. W momencie publikacji artyku\u0142u Babel dysponowa\u0142 oko\u0142o 15 tysi\u0105cami dolar\u00f3w miesi\u0119cznego bud\u017cetu, co nie starcza\u0142o na op\u0142acenie trzech pracuj\u0105cych nad nim deweloper\u00f3w. Zaoszcz\u0119dzone w lepszych czasach pieni\u0105dze mia\u0142y wystarczy\u0107 na utrzymanie zatrudnienia do ko\u0144ca 2021 roku, ale warto nadmieni\u0107, \u017ce Babel oryginalnie aspirowa\u0142 do zatrudnienia a\u017c 4 deweloper\u00f3w.<\/p>\n<p>Jak to si\u0119 sta\u0142o, \u017ce narz\u0119dzie u\u017cywane przez wi\u0119kszo\u015b\u0107 JavaScript developer\u00f3w prawie zbankrutowa\u0142o? Babel w ostatnich latach, dzi\u0119ki coraz prostszej konfiguracji \u015brodowisk deweloperskich \u00a0sta\u0142 si\u0119 dla wi\u0119kszo\u015bci programist\u00f3w prze\u017aroczysty. Mog\u0142oby si\u0119 wydawa\u0107, \u017ce og\u0142oszenie tak dramatycznych informacji sk\u0142oni do refleksji i szybko znajd\u0105 si\u0119 maj\u0119tni sponsorzy chc\u0105cy wesprze\u0107 projekt. Jak si\u0119 jednak okaza\u0142o, za notatk\u0105 nie pop\u0142yn\u0105\u0142 strumie\u0144 monet, a w internecie zawrza\u0142o. Zapytacie, dlaczego? Ot\u00f3\u017c do tej pory a\u017c 10 tysi\u0119cy dolar\u00f3w z miesi\u0119cznego bud\u017cetu wp\u0142ywa\u0142o na konto jednego dewelopera i nie by\u0142a to wcale osoba z najwi\u0119ksz\u0105 liczb\u0105 kontrybucji. Na Twitterze rozgorza\u0142a dysputa na temat odpowiedzialno\u015bci osoby utrzymuj\u0105cej projekt Open Source, w kt\u00f3rej g\u0142os zabra\u0142y nawet takie tuzy jak Evan You (tw\u00f3rca Vue), czy Sebastian McKenzie (tw\u00f3rca Rome). Z jednej strony jasnym jest, \u017ce zbieranie funduszy, pisanie notatek o nowych funkcjonalno\u015bciach i og\u00f3lnie poj\u0119ta promocja, to r\u00f3wnie\u017c praca, za kt\u00f3r\u0105 nale\u017cy si\u0119 wynagrodzenie, a z drugiej stawiane jest pytanie o granic\u0119 mi\u0119dzy dostarczaniem nowych funkcji, a czasem po\u015bwi\u0119conym na inne aktywno\u015bci. Atmosfer\u0119 podgrzewa\u0142 jeszcze dysonans mi\u0119dzy zarobkami Hernego (g\u0142\u00f3wnego maintenera Babela) i pozosta\u0142ych deweloper\u00f3w (10000$ vs 2000$). Co prawda, wraz z publikacj\u0105 wspomnianej wy\u017cej notatki, og\u0142oszono r\u00f3wnie\u017c wyr\u00f3wnanie zarobk\u00f3w wszystkich os\u00f3b zaanga\u017cowanych w projekt, ale wielu zarzuca, \u017ce to w\u0142a\u015bnie niesprawiedliwy podzia\u0142 bud\u017cetu doprowadzi\u0142 do obecnej sytuacji.<\/p>\n<p>Od publikacji wspomnianego artyku\u0142u min\u0119\u0142o ju\u017c kilka miesi\u0119cy i wydaje si\u0119, \u017ce Babel przeszed\u0142 przez ten kryzys wizerunkowy bez szwanku. Obecnie z OpenCollective wynika, \u017ce projekt miesi\u0119cznie gromadzi oko\u0142o 20000$, a to w zupe\u0142no\u015bci wystarcza na op\u0142acenie trzech deweloper\u00f3w.<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1578f87.gif\" alt=\"\" \/><figcaption>Historia Babela bez dw\u00f3ch zda\u0144 zas\u0142uguje na tytu\u0142 frontendowej dramy roku.<\/figcaption><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-3\">Przeczytaj wi\u0119cej:<\/h3>\n<p><a href=\"https:\/\/techcrunch.com\/2021\/06\/23\/vercel-raises-102m-series-c-for-its-next-js-based-front-end-development-platform\/\">https:\/\/techcrunch.com\/2021\/06\/23\/vercel-raises-102m-series-c-for-its-next-js-based-front-end-development-platform\/<\/a><br \/>\n<a href=\"https:\/\/deno.com\/blog\/the-deno-company\">https:\/\/deno.com\/blog\/the-deno-company<\/a><br \/>\n<a href=\"https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/\">https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/<\/a><br \/>\n<a href=\"https:\/\/babeljs.io\/blog\/2021\/05\/10\/funding-update.html\">https:\/\/babeljs.io\/blog\/2021\/05\/10\/funding-update.html<\/a><br \/>\n<a href=\"https:\/\/news.ycombinator.com\/item?id=27116357\">https:\/\/news.ycombinator.com\/item?id=27116357<\/a><\/p>\n<h1 id=\"5-kontrowersje-wok%C3%B3%C5%82-floc-i-supercookies\">5. Kontrowersje wok\u00f3\u0142 FLoC i Supercookies<\/h1>\n<p>Temat Supercookies i FLoC to chyba najbardziej burzogenny temat ostatnich miesi\u0119cy. Pierwsze z tych tajemniczych okre\u015ble\u0144 zosta\u0142o ukute pocz\u0105tkiem roku przez Firefoxa i jest synonimem na ca\u0142y zbi\u00f3r sprytnych rozwi\u0105za\u0144 maj\u0105cych na celu \u015bledzenie interakcji u\u017cytkownika pomi\u0119dzy witrynami, zazwyczaj w celu lepszej personalizacji reklam (jako przyk\u0142ad Mozilla poda\u0142a wykorzystanie do tego cache\u2019u przegl\u0105darki). Na tym etapie wszystkie przegl\u0105darki, poza Chrome, chwal\u0105 si\u0119 specjalnym wsparcie dla blokowania Supercookies. Dlaczego Google zwleka z wprowadzeniem takiej funkcjonalno\u015bci? No c\u00f3\u017c, je\u015bli jednym z Waszych g\u0142\u00f3wnych \u017ar\u00f3de\u0142 dochodu by\u0142yby targetowane reklamy, to prawdopodobnie te\u017c kr\u0119ciliby\u015bcie nosem na takie rozwi\u0105zanie&#8230;<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb15a7f42.png\" alt=\"\" \/><\/figure>\n<p>Google zdaje sobie jednak spraw\u0119 z trendu dbania o prywatno\u015b\u0107 w sieci i dlatego zaproponowa\u0142 swoj\u0105 alternatyw\u0119 dla Supercookies, czyli FLoC (Federated Learning of Cohorts). Algorytm ten po stronie klienta analizuje histori\u0119 przegl\u0105dania i przypisuje u\u017cytkownika do odpowiedniej kohorty. W ten spos\u00f3b dane o aktywno\u015bci u\u017cytkownika nigdy nie opuszczaj\u0105 jego przegl\u0105darki, a reklamodawcy nie trac\u0105 mo\u017cliwo\u015bci dobrego targetowania swoich reklam. Na papierze plan brzmi ca\u0142kiem nie\u017ale, ale je\u015bli zag\u0142\u0119bi\u0107 si\u0119 w szczeg\u00f3\u0142y, to okazuje si\u0119, \u017ce nie jest ju\u017c tak optymistycznie. Do tej pory, je\u015bli dana strona chcia\u0142a jednoznacznie zidentyfikowa\u0107 u\u017cytkownika, to prawdopodobnie musia\u0142a przeanalizowa\u0107 kilka milion\u00f3w rekord\u00f3w. Po wdro\u017ceniu nowego rozwi\u0105zania liczba ta zmniejszy si\u0119 do kilku tysi\u0119cy, bo strony b\u0119d\u0105 mog\u0142y odczyta\u0107 id kohorty i w ten spos\u00f3b mocno zaw\u0119zi\u0107 obszar poszukiwa\u0144. Ponadto, je\u015bli na stronie logujemy si\u0119 za pomoc\u0105 maila, to natychmiast b\u0119dzie ona w stanie powi\u0105za\u0107 nas z naszymi zainteresowaniami, a nawet zapisa\u0107 je u siebie na serwerze. FLoC domy\u015blnie analizuje r\u00f3wnie\u017c wszystkie strony na jakie wchodzimy (w tym te rz\u0105dowe czy powi\u0105zane z naszymi danymi zdrowotnymi), a nie tak jak to mia\u0142o miejsce do tej pory, gdzie \u015bledzeni byli\u015bmy tylko na stronach do kt\u00f3rych za\u0142\u0105czono odpowiedni skrypt of Google\u2019a albo Facebooka.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb16dece3.png\" alt=\"\" \/><\/figure>\n<p>Sw\u00f3j publiczny sprzeciw przeciwko FLoC wyrazi\u0142o sporo firm zajmuj\u0105cych si\u0119 prywatno\u015bci\u0105 (mi\u0119dzy innymi Brave i DuckDuckGo), a presja ze strony u\u017cytkownik\u00f3w zmusi\u0142a Google do odroczenia globalnego wdro\u017cenia algorytmu do swojej przegl\u0105darki do 2023 roku. Dodatkowy czas firma z Mountain View zamierza wykorzysta\u0107 na rozpocz\u0119ciu publicznych dyskusji dotycz\u0105cych prywatno\u015bci w kontek\u015bcie personalizacji reklam, jak i negocjacjach z innymi du\u017cymi graczami w \u015bwiecie przegl\u0105darek i e-commerce.<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1807fd8.gif\" alt=\"\" \/><figcaption>Je\u015bli ju\u017c nawet sam Google po cichu przyznaje, \u017ce FLoC ma swoje wady, to znaczy, \u017ce nad algorytmem naprawd\u0119 zacz\u0119\u0142y rozci\u0105ga\u0107 si\u0119 ciemne chmury. Ciekawe, jak Google wybrnie teraz z tego problemu.<\/figcaption><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-4\">Przeczytaj wi\u0119cej:<\/h3>\n<p><a href=\"https:\/\/brave.com\/why-brave-disables-floc\/\">https:\/\/brave.com\/why-brave-disables-floc\/<\/a><br \/>\n<a href=\"https:\/\/www.eff.org\/deeplinks\/2021\/03\/googles-floc-terrible-idea\">https:\/\/www.eff.org\/deeplinks\/2021\/03\/googles-floc-terrible-idea<\/a><br \/>\n<a href=\"https:\/\/arstechnica.com\/gadgets\/2021\/06\/google-delays-floc-rollout-until-2023\/\">https:\/\/arstechnica.com\/gadgets\/2021\/06\/google-delays-floc-rollout-until-2023\/<\/a><\/p>\n<h1 id=\"6-hermes-dzia%C5%82a-na-ios\">6. Hermes dzia\u0142a na iOS<\/h1>\n<p>W minionych dwunastu miesi\u0105cach otrzymali\u015bmy dwie nowe nowe wersje React Native (0.64 i 0.65), ale ci\u0119\u017cko doszukiwa\u0107 si\u0119 w nich rewolucji. Wi\u0119kszo\u015b\u0107 zmian dotyczy\u0142a usprawnie\u0144 wydajno\u015bci, accessibility, czy kompatybilno\u015bci z procesorami M1. W tym szarym \u0142ez padole znalaz\u0142a si\u0119 jednak jedna funkcja, kt\u00f3ra wzbudzi\u0142a sporo zamieszania: wsparcie dla silnika Hermes na urz\u0105dzeniach z systemem iOS.<\/p>\n<p>Je\u015bli \u017cyjecie poza ba\u0144k\u0105 React Native i nie kojarzycie Hermesa, to jest to silnik JavaScriptu od samego Facebooka, kt\u00f3ry ma redukowa\u0107 Time to Interactive, by\u0107 przystosowanym do urz\u0105dze\u0144 mobilnych i tworzony jest od pocz\u0105tku z my\u015bl\u0105 o dobrym wsparciu dla React Native. Jako przyk\u0142adowe usprawnienie niech pos\u0142u\u017cy nam dodany w ostatnim releasie Garbage Collector (o pasuj\u0105cej do konwencji nazwie Hades), kt\u00f3ry skraca faz\u0119 stop-the-world nawet 30 krotnie i zmniejsza zu\u017cycie procesora nawet o 50%.<\/p>\n<p>Dlaczego jest to wa\u017cne wydarzenie? Ot\u00f3\u017c Apple od lat narzuca wszystkim rozwijany przez siebie silnik JavaScriptCore. Od tej regu\u0142y do tej pory nie by\u0142o wyj\u0105tk\u00f3w i nawet Chrome na mobilnych urz\u0105dzeniach z jab\u0142uszkiem pod spodem, u\u017cywa\u0142 silnika Safari. To co umo\u017cliwi\u0142o powstanie Hermesa na urz\u0105dzenia z iOS, to drobna zmiana w regulaminie AppStore m\u00f3wi\u0105ca, \u017ce ograniczenie dotyczy tylko interpretowanego kodu (Hermes pakowany jest do plik\u00f3w binarnych). Niestety nie oznacza to, \u017ce szybko zobaczymy na iPhonach Chrome z v8 (z drugiej strony mo\u017ce to i dobrze, bo Safari jest ostatni\u0105 przystani\u0105 powstrzymuj\u0105c\u0105 dominacj\u0119 v8 na rynku).<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1837c2d.gif\" alt=\"\" \/><figcaption>Osoba odpowiedzialna za konwencj\u0119 nazewnicz\u0105 Hermes i Hadesa zdecydowanie zas\u0142uguje na podwy\u017ck\u0119<\/figcaption><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-5\">Przeczytaj wi\u0119cej:<\/h3>\n<p><a href=\"https:\/\/reactnative.dev\/blog\/2021\/03\/12\/version-0.64\">https:\/\/reactnative.dev\/blog\/2021\/03\/12\/version-0.64<\/a><br \/>\n<a href=\"https:\/\/www.reddit.com\/r\/reactnative\/comments\/j8gzjz\/hermes_is_coming_to_ios\/\">https:\/\/www.reddit.com\/r\/reactnative\/comments\/j8gzjz\/hermes_is_coming_to_ios\/<\/a><br \/>\n<a href=\"https:\/\/reactnative.dev\/blog\/2021\/08\/17\/version-065\">https:\/\/reactnative.dev\/blog\/2021\/08\/17\/version-065<\/a><br \/>\n<a href=\"https:\/\/hermesengine.dev\/docs\/hades\/\">https:\/\/hermesengine.dev\/docs\/hades\/<\/a><\/p>\n<h1 id=\"7-internet-explorer-11-w-ko%C5%84cu-umiera\">7. Internet Explorer 11 w ko\u0144cu umiera<\/h1>\n<p>Projekty og\u0142aszaj\u0105ce koniec wsparcia dla Internet Explorera 11 wyrasta\u0142y w tym roku, jak grzyby po deszczu. Angular oznaczy\u0142 wsparcie dla IE 11 jako deprecated i usunie je ca\u0142kowicie wraz z pojawieniem si\u0119 Angulara 13. Vue og\u0142osi\u0142o usuni\u0119cie ze swojej roadmapy dla wersji 3 implementacj\u0119 kompatybilno\u015bci z IE 11. Przed kilkoma tygodniami AWS og\u0142osi\u0142 koniec wsparcia dla IE 11 przez Amazon Web Services. List\u0119 zamyka sama firma matka przegl\u0105darki, kt\u00f3ra opr\u00f3cz og\u0142oszenia ko\u0144ca wsparcia dla IE 11 w produktach \u200b\u200bMicrosoft 365, og\u0142osi\u0142a r\u00f3wnie\u017c, \u017ce 15 czerwca 2022 roku 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<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1866764.png\" alt=\"\" \/><\/figure>\n<p>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<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1953cdf.png\" alt=\"\" \/><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-6\">Przeczytaj wi\u0119cej:<\/h3>\n<p><a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2021\/05\/19\/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge\/\">https:\/\/blogs.windows.com\/windowsexperience\/2021\/05\/19\/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge\/<\/a><br \/>\n<a href=\"https:\/\/github.com\/vuejs\/rfcs\/discussions\/296\">https:\/\/github.com\/vuejs\/rfcs\/discussions\/296<\/a><br \/>\n<a href=\"https:\/\/github.com\/angular\/angular\/issues\/41840\">https:\/\/github.com\/angular\/angular\/issues\/41840<\/a><br \/>\n<a href=\"https:\/\/aws.amazon.com\/blogs\/aws\/heads-up-aws-support-for-internet-explorer-11-is-ending\/\">https:\/\/aws.amazon.com\/blogs\/aws\/heads-up-aws-support-for-internet-explorer-11-is-ending\/<\/a><\/p>\n<h1 id=\"9-nodejs-w-przegl%C4%85darce-czyli-webcontainers\">9. Node.js w przegl\u0105darce, czyli WebContainers<\/h1>\n<p>Jak dzi\u015b pami\u0119tam, jak\u0105 fal\u0119 zainteresowania w sieci wzbudzi\u0142o og\u0142oszenie na Google I\/O przez StackBlitz WebContainers. Czym jest ta tajemnicza technologia? Ot\u00f3\u017c jest to \u015brodowiska uruchomieniowe Node.js, dzia\u0142aj\u0105ce ca\u0142kowicie w przegl\u0105darce i oparte g\u0142\u00f3wnie na WebAssembly. Do pe\u0142nego szcz\u0119\u015bcia potrzebne s\u0105 jeszcze integracje z systemem operacyjny i na tym polu nie jest idealnie, ale ludziom ze StackBlitz uda\u0142o si\u0119 dowie\u015b\u0107 ca\u0142kiem sporo (np. emulacja fs jest mo\u017cliwa dzi\u0119ki wykorzystaniu File System Access API). W architektur\u0119 rozwi\u0105zania uwik\u0142any jest te\u017c ServiceWorker, kt\u00f3ry przechwytuje odpowiednie requesty i przekierowuje je do naszego WebContainer (dzi\u0119ki jego obecno\u015bci ca\u0142e rozwi\u0105zanie dzia\u0142a r\u00f3wnie\u017c offline).<\/p>\n<p>W tej beczce miodu jest te\u017c niestety \u0142y\u017cka dziegciu (a nawet kilka!). Z poziomu WebContainers nie po\u0142\u0105czymy si\u0119 z baz\u0105 danych, bo przegl\u0105darki nie mog\u0105 komunikowa\u0107 si\u0119 za pomoc\u0105 niestandardowych protoko\u0142\u00f3w (tutaj zesp\u00f3\u0142 StackBlitz liczy na pojawienie si\u0119 w przysz\u0142o\u015bci w przegl\u0105darkach Native Sockets). Ponadto na ten moment WebContainers dzia\u0142aj\u0105 tylko w silnikach opartych na Chromium, wi\u0119c nie u\u015bwiadczymy ich chocia\u017cby na mobilnych urz\u0105dzeniach z jab\u0142uszkiem czy w Firefox (co mo\u017ce bole\u0107 podw\u00f3jnie, bo to w\u0142a\u015bnie Mozilla utrzymuje, zdaniem wielu, najlepszy silnik WASM). Opr\u00f3cz tego lista wspieranych framework\u00f3w jest raczej kr\u00f3tka, aczkolwiek trzeba przyzna\u0107, \u017ce zawiera chyba wszystkie najpopularniejsze opcje (Express.js, Koa, NestJS, Next.js, Nuxt) Je\u015bli WebContainers aspiruj\u0105 do zostania w pe\u0142ni funkcjonalnym \u015brodowiskiem deweloperskim, to przed nimi jeszcze d\u0142uga droga, ale jak na wersj\u0119 beta to jest naprawd\u0119 nie\u017ale.<\/p>\n<h3 id=\"przeczytaj-wi%C4%99cej-7\">Przeczytaj wi\u0119cej:<\/h3>\n<p><a href=\"https:\/\/blog.stackblitz.com\/posts\/introducing-webcontainers\/\">https:\/\/blog.stackblitz.com\/posts\/introducing-webcontainers\/<\/a><br \/>\n<a href=\"https:\/\/twitter.com\/stackblitz\/status\/1395409316270772224\">https:\/\/twitter.com\/stackblitz\/status\/1395409316270772224<\/a><\/p>\n<h1 id=\"9-tailwind-20-i-kompilator-jit-dla-tailwinda\">9. Tailwind 2.0 i kompilator JIT dla Tailwinda<\/h1>\n<p>Zdaniem wielu podej\u015bcie utilty-first idealnie pasuje do wsp\u00f3\u0142czesnych frontendowych framework\u00f3w i prawdopodobnie w\u0142a\u015bnie z tego powodu jego popularno\u015b\u0107 nieustannie ro\u015bnie Jak wynika z State of CSS 2020, jest to framework generuj\u0105cy najwi\u0119ksze zainteresowanie w swojej kategorii. Ponadto wzgl\u0119dem 2019 roku zaliczy\u0142 on wzrost o 20 punkt\u00f3w procentowych, je\u015bli chodzi o wdro\u017cenie na produkcj\u0119. Na tym etapie mo\u017cemy ju\u017c m\u00f3wi\u0107 o tym, \u017ce zast\u0105pi\u0142 on na tronie cssowych framework\u00f3w Bootstrapa.<\/p>\n<p>W listopadzie 2020 doczekali\u015bmy si\u0119 Tailwinda w wersji 2.0, a wraz z ni\u0105 mi\u0119dzy innymi rozszerzon\u0105 palet\u0119 kolor\u00f3w, nowy breakpoint dla najwi\u0119kszych ekran\u00f3w i wsparcie dla dark-mode. Na najciekawsze nowo\u015bci musieli\u015bmy jednak poczeka\u0107 do marca 2021 roku, kiedy to ukaza\u0142 si\u0119 kompilator Just-In-Time dla Tailwinda. Przy wykorzystaniu zwyk\u0142ego kompilatora do przegl\u0105darki dostarczany by\u0142 poka\u017any plik zawieraj\u0105cy ca\u0142ego Tailwinda (czasami maj\u0105cego nawet 10MB!). W trybie produkcyjnym natomiast standardem by\u0142o odchudzanie paczki przy pomocy PurgeCSS. Nowy Kompilator zupe\u0142nie zmienia to zachowanie i teraz zar\u00f3wno w trybie produkcyjnym, jak i deweloperskim wraz z dodaniem kolejnej klasy do elementu, dynamicznie pojawia\u0107 si\u0119 ona b\u0119dzie w wynikowych plikach styli. Nie wp\u0142ynie to znacz\u0105co na rozmiar bundla, ale za to poprawi developer experience &#8211; w trakcie developmentu przegl\u0105darka b\u0119dzie musia\u0142a obs\u0142ugiwa\u0107 o rz\u0105d wielko\u015bci mniejszy plik CSS. Nie s\u0105 to (niestety) jedyne zmiany, jakie wprowadza nowy kompilator. Nowy spos\u00f3b generowania klas umo\u017cliwia specyfikacj\u0119 jednostek w pikselach i kolor\u00f3w w postaci hexa. Jest to rozwi\u0105zanie niezwykle wygodne, ale wydaje si\u0119 r\u00f3wnie\u017c niepokoj\u0105co zbli\u017cone do inline styles. No c\u00f3\u017c, z wielk\u0105 moc\u0105 idzie wielka odpowiedzialno\u015b\u0107 &#8211; zobaczymy, czy programi\u015bci sprostaj\u0105 temu wyzwaniu.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1a015c5.png\" alt=\"\" \/><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-8\">Przeczytaj wi\u0119cej:<\/h3>\n<p><a href=\"https:\/\/blog.tailwindcss.com\/just-in-time-the-next-generation-of-tailwind-css\">https:\/\/blog.tailwindcss.com\/just-in-time-the-next-generation-of-tailwind-css<\/a><br \/>\n<a href=\"https:\/\/blog.tailwindcss.com\/tailwindcss-v2\">https:\/\/blog.tailwindcss.com\/tailwindcss-v2<\/a><\/p>\n<h1 id=\"10-webpack-5\">10. Webpack 5<\/h1>\n<p>Webpack od dawna jest bran\u017cowym standardem i pomimo rosn\u0105cej konkurencji (a szczeg\u00f3lnie ciekawie wygl\u0105da zw\u0142aszcza ta oparta o esbuild) na razie nic nie zapowiada jego schy\u0142ku. Prawie r\u00f3wno rok temu ukaza\u0142a si\u0119 d\u0142ugo oczekiwana wersja 5 tego narz\u0119dzia do pakowania aplikacji i gdyby\u015bmy mieli tutaj przyjrze\u0107 si\u0119 wszystkim nowo\u015bciom, jakie wprowadzono, to c\u00f3\u017c, prawdopodobnie musieliby\u015bmy dwukrotnie wyd\u0142u\u017cy\u0107 ten artyku\u0142 . W zwi\u0105zku z tym wspomn\u0119 tylko o jednej funkcjonalno\u015bci, o kt\u00f3rej na przestrzeni ostatniego roku by\u0142o najg\u0142o\u015bniej, a jest ni\u0105 Module Federation. Funkcjonalno\u015b\u0107 ta ma umo\u017cliwia\u0107 dynamiczne doczytanie innej aplikacji i wsp\u00f3\u0142dzielenie zale\u017cno\u015bci. Je\u015bli co\u015b Wam to przypomina to dobrze kombinujecie: Module Federation to feature zaprojektowany, aby wspiera\u0107 mikrofrontendy (kt\u00f3re swoj\u0105 drog\u0105 zas\u0142uguj\u0105 chyba na tytu\u0142 najgor\u0119tszego catch phrase zesz\u0142ego roku).<\/p>\n<p>Warto napomkn\u0105\u0107 r\u00f3wnie\u017c, \u017ce rynek szybko postanowi\u0142 nadgoni\u0107 standard i narz\u0119dzia daj\u0105ce wsparcie dla Webpacka 5 wyrasta\u0142y jak grzyby po deszczy (wspomnijmy chocia\u017cby Angulara czy Nexta). No i nie by\u0142o chyba takiej notatki o wsparciu dla Webpacka 5, w kt\u00f3rej nie wspomniano by o Module Federation i mikrofrontendach.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1a37329.jpg\" alt=\"\" \/><\/figure>\n<h2 id=\"przeczytaj-wiecej\" data-num=1>Przeczytaj wi\u0119cej:<\/h2>\n<p><a href=\"https:\/\/webpack.js.org\/blog\/2020-10-10-webpack-5-release\/\">https:\/\/webpack.js.org\/blog\/2020-10-10-webpack-5-release\/<\/a><br \/>\n<a href=\"https:\/\/webpack.js.org\/concepts\/module-federation\/\">https:\/\/webpack.js.org\/concepts\/module-federation\/<\/a><br \/>\n<a href=\"https:\/\/scriptedalchemy.medium.com\/webpack-5-module-federation-stitching-two-simple-bundles-together-fe4e6a069716\">https:\/\/scriptedalchemy.medium.com\/webpack-5-module-federation-stitching-two-simple-bundles-together-fe4e6a069716<\/a><br \/>\n<a href=\"https:\/\/nextjs.org\/docs\/messages\/webpack5\">https:\/\/nextjs.org\/docs\/messages\/webpack5<\/a><\/p>\n<h1 id=\"11-mdn-web-docs-umiera-powstaje-open-web-docs\">11. MDN Web Docs umiera, powstaje Open Web Docs<\/h1>\n<p>Nie jest tajemnic\u0105, \u017ce Mozlilla w ostatnim okresie nie najlepiej radzi sobie, je\u015bli chodzi o kwestie finansowe. Skutkiem zaistnia\u0142ej sytuacji by\u0142y ci\u0119cia koszt\u00f3w, redukcje etat\u00f3w i przerzuceniem ludzi do rozwoju potencjalnie dochodowych produkt\u00f3w (takich jak na przyk\u0142ad niedawno opublikowany VPN wbudowany w Firefox). Na restrukturyzacji firmy ucierpia\u0142 niestety zesp\u00f3\u0142 odpowiedzialny za MDN Web Docs &#8211; dokumentacji, z kt\u00f3r\u0105 do czynienia mia\u0142 chyba ka\u017cdy deweloper.<\/p>\n<p>\u015awiat nienawidzi jednak pr\u00f3\u017cni i nied\u0142ugo po og\u0142oszeniu redukcji etat\u00f3w w Mozilli, \u015bwiat\u0142o dzienne ujrza\u0142o Open Web Docs. Nie dajcie si\u0119 zmyli\u0107 nazwie &#8211; to nie jest kolejna innowacyjna biblioteka, a organizacja, kt\u00f3ra za zadanie wzi\u0119\u0142a sobie wspieranie otwartych dokumentacji weba (w tym wspomnianego wcze\u015bniej MDN Web Docs). Open Web Docs do tej pory otrzyma\u0142o ju\u017c spory zastrzyk got\u00f3wki, bo opr\u00f3cz indywidualnych deweloper\u00f3w, finansowo wspar\u0142y j\u0105 Google, Microsoft i Facebook wp\u0142acaj\u0105c po 250 tysi\u0119cy dolar\u00f3w. Pozostaje tylko trzyma\u0107 kciuki za dalsze wsparcie od najwi\u0119kszych graczy i czeka\u0107 na rezultaty pracy &#8211; w ko\u0144cu dobrej dokumentacji nigdy za wiele.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1a6453d.png\" alt=\"\" \/><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-10\">Przeczytaj wi\u0119cej:<\/h3>\n<p><a href=\"https:\/\/opencollective.com\/open-web-docs#category-ABOUT\">https:\/\/opencollective.com\/open-web-docs#category-ABOUT<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Przygotowujemy cotygodniowe przegl\u0105dy ju\u017c od ponad roku i dlatego najwy\u017csza pora przyjrze\u0107 si\u0119 najwa\u017cniejszym trendom i wydarzeniom z tego okresu. \u0141apcie kubek gor\u0105cej kawy i zapraszamy do lektury!<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-10092","post","type-post","status-publish","format-standard","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"estimated_reading_time":"17"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Frontend Thursday vol. 52 (Annual Edition) - Vived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 52 (Annual Edition) - Vived\" \/>\n<meta property=\"og:description\" content=\"Przygotowujemy cotygodniowe przegl\u0105dy ju\u017c od ponad roku i dlatego najwy\u017csza pora przyjrze\u0107 si\u0119 najwa\u017cniejszym trendom i wydarzeniom z tego okresu. \u0141apcie kubek gor\u0105cej kawy i zapraszamy do lektury!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-26T14:10:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 52 (Annual Edition)\",\"datePublished\":\"2021-08-26T14:10:41+00:00\",\"dateModified\":\"2022-09-19T11:16:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/\"},\"wordCount\":3556,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/\",\"name\":\"Frontend Thursday vol. 52 (Annual Edition) - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif\",\"datePublished\":\"2021-08-26T14:10:41+00:00\",\"dateModified\":\"2022-09-19T11:16:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 52 (Annual Edition)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frontend Thursday vol. 52 (Annual Edition) - Vived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 52 (Annual Edition) - Vived","og_description":"Przygotowujemy cotygodniowe przegl\u0105dy ju\u017c od ponad roku i dlatego najwy\u017csza pora przyjrze\u0107 si\u0119 najwa\u017cniejszym trendom i wydarzeniom z tego okresu. \u0141apcie kubek gor\u0105cej kawy i zapraszamy do lektury!","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/","og_site_name":"Vived","article_published_time":"2021-08-26T14:10:41+00:00","article_modified_time":"2022-09-19T11:16:38+00:00","og_image":[{"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif","type":"","width":"","height":""}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 52 (Annual Edition)","datePublished":"2021-08-26T14:10:41+00:00","dateModified":"2022-09-19T11:16:38+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/"},"wordCount":3556,"commentCount":0,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif","articleSection":["Frontend"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/","name":"Frontend Thursday vol. 52 (Annual Edition) - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif","datePublished":"2021-08-26T14:10:41+00:00","dateModified":"2022-09-19T11:16:38+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-52\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 52 (Annual Edition)"}]},{"@type":"WebSite","@id":"https:\/\/vived.io\/pl\/#website","url":"https:\/\/vived.io\/pl\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vived.io\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/vived.io\/pl\/#organization","name":"Vived","url":"https:\/\/vived.io\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","width":136,"height":45,"caption":"Vived"},"image":{"@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","caption":"Tomasz Borowicz"}}]}},"blocks_vived":[{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"To ju\u017c 52 edycja naszego frontendowca przegl\u0105du, a to oznacza, \u017ce przygotowujemy dla Was nasze podsumowania ju\u017c od ponad roku! Aby uczci\u0107 to donios\u0142e wydarzenie postanowili\u015bmy wybra\u0107 11, naszym zdaniem, najciekawszych trend\u00f3w i wydarze\u0144 minionego roku (kolejno\u015b\u0107 dobrana losowo). Na starcie ostrzegam: przygotujcie sobie spory kubek z kaw\u0105, bo to nie b\u0119dzie kr\u00f3tka lektura (ale za to jaka ciekawa!) \u2615\ufe0f\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif\" alt=\"\" \/><\/figure>\n<h1 id=\"1-react-17-i-react-server-components\">1. React 17 i React Server Components<\/h1>\nW pa\u017adzierniku 2020 powitali\u015bmy kolejn\u0105 du\u017c\u0105 wersj\u0119 Reacta. Pomimo du\u017cego numerka (17), wydanie nie zawiera\u0142o nowych funkcjonalno\u015bci i skupia\u0142o si\u0119 na u\u0142atwieniu bardziej granularnych aktualizacji w przysz\u0142o\u015bci (zamiast migrowa\u0107 ca\u0142\u0105 aplikacj\u0119 za jednym razem, mo\u017cliwe ma by\u0107 migrowanie jej po kawa\u0142ku i wsp\u00f3\u0142istnienie kilku wersji Reacta w jednej aplikacji).\n\nKiedy ju\u017c utwierdzi\u0142em si\u0119 w przekonaniu, \u017ce React popad\u0142 w stagnacj\u0119, tu\u017c przed \u015bwi\u0119tami Bo\u017cego Narodzenia z tego prze\u015bwiadczenia wybudzi\u0142 mnie Dan Abramov przedstawiaj\u0105c React Server Components. Koncepcja ta to wariancja Server Side Renderingu, kt\u00f3ra pozwala renderowa\u0107 cz\u0119\u015b\u0107 komponent\u00f3w po stronie klienta, a cz\u0119\u015b\u0107 po stronie serwera. Podej\u015bcie to minimalizuje ilo\u015b\u0107 kodu wysy\u0142anego do przegl\u0105darki (biblioteki importowane przez komponenty renderowane na serwerze nie s\u0105 pobierane przez klienta) i daje dost\u0119p do typowo serwerowych interfejs\u00f3w z poziomu Reacta (bazy danych, system plik\u00f3w). Oczywi\u015bcie rozwi\u0105zanie ma te\u017c swoje ograniczenia: komponenty renderowane na serwerze nie mog\u0105 przechowywa\u0107 stanu i obs\u0142ugiwa\u0107 interaktywnych akcji. Nie wiadomo, kiedy i czy React Server Components osi\u0105gn\u0105 status produkcyjny, ale zdecydowanie pomys\u0142 ten by\u0142 jednym z najwi\u0119kszych w ostatnich miesi\u0105cach powiew\u00f3w \u015bwie\u017co\u015bci we Frontendowym \u015awiecie.\n\nJe\u015bli jeste\u015bmy ju\u017c w kontek\u015bcie React, to warto wspomnie\u0107 r\u00f3wnie\u017c o powstaniu React Working Group, kt\u00f3re to ma by\u0107 przestrzeni\u0105 do komunikacji mi\u0119dzy spo\u0142eczno\u015bci\u0105, a lud\u017ami stoj\u0105cymi za implementacj\u0105 nowych funkcjonalno\u015bci. Grupa ta powsta\u0142a przy okazji og\u0142oszenia alfy Reacta 18, kt\u00f3ra w odr\u00f3\u017cnieniu od wersji 17, zawiera\u0107 b\u0119dzie ca\u0142\u0105 mas\u0119 nowych interesuj\u0105cych funkcji (mi\u0119dzy innymi wsparcie dla Suspense w Server Side Renderingu i lepsze batchowanie render\u00f3w). Pozostaje tylko cierpliwie czeka\u0107 na wersj\u0119 beta i oficjaln\u0105 wydanie.\n<h3 id=\"przeczytaj-wi%C4%99cej\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/reactjs.org\/blog\/2020\/12\/21\/data-fetching-with-react-server-components.html\"><em>https<\/em>:\/\/reactjs.org\/blog\/2020\/12\/21\/data-fetching-with-react-server-components.html<\/a>\n<a href=\"https:\/\/reactjs.org\/blog\/2021\/06\/08\/the-plan-for-react-18.html\">https:\/\/reactjs.org\/blog\/2021\/06\/08\/the-plan-for-react-18.html<\/a>\n<h1 id=\"2-angular-11-angular-12%E2%80%A6-nudy\">2. Angular 11, Angular 12\u2026 nudy!<\/h1>\nNa przestrzeni ostatnich 12 miesi\u0119cy dostali\u015bmy dwie nowe wersje Angulara, i szczerze m\u00f3wi\u0105c, by\u0142y to dwa wydania nudne jak flaki z olejem. W ramach wersji 11 w \u017cycie wdro\u017cona zosta\u0142a \u201cOperacja Byelog\u201d, w ramach kt\u00f3rej otagowany zosta\u0142 ca\u0142y backlog b\u0142\u0119d\u00f3w i feature requests zg\u0142oszonych przez spo\u0142eczno\u015b\u0107 (uda\u0142o si\u0119 nawet wdro\u017cy\u0107 w \u017cycie kilka z nich). Opr\u00f3cz tego dosz\u0142o automatyczne inlineowanie czcionek, upi\u0119kszone logi i przy\u015bpieszone buildy. Wersja 12 w por\u00f3wnaniu z 11 wygl\u0105da odrobin\u0119 ciekawiej. Dostali\u015bmy w niej pe\u0142ne wsparcie dla Webpack 5, deprekacje View Engine i Protractora oraz kilka drobnych usprawnie\u0144. Reasumuj\u0105c Angular rozwija si\u0119 stabilnie, a na horyzoncie jak na razie brak wi\u0119kszych rewolucji (chyba jedyn\u0105, kt\u00f3ra przychodzi mi do g\u0142owy jest rozpocz\u0119cie prac nad opcjonalnymi modu\u0142ami, ale nie wiadomo jednak, kiedy ma to szans\u0119 trafi\u0107 w nasze r\u0119ce).\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb14a8cbe.gif\" alt=\"\" \/>\n<figcaption>Teraz pewnie wszyscy ziewaj\u0105 przed ekranami - przepraszam, nie mog\u0142em si\u0119 powstrzyma\u0107<\/figcaption><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-1\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/vived.io\/frontend-thursday-vol-32\/\">https:\/\/blog.vived.io\/frontend-thursday-vol-32\/<\/a>\n<a href=\"https:\/\/github.com\/angular\/protractor\/issues\/5502\">https:\/\/github.com\/angular\/protractor\/issues\/5502<\/a>\n<h1 id=\"3-vue-30\">3. Vue 3.0<\/h1>\nSpo\u015br\u00f3d trzech najwi\u0119kszych frontendowych framework\u00f3w zdecydowanie najwi\u0119cej dzia\u0142o si\u0119 w obozie Vue. Po prawie dw\u00f3ch latach developmentu i trzech miesi\u0105cach otwartej bety, trzecia wersja Vue doczeka\u0142a si\u0119 oficjalnego releasu wersji 3.0. Framework otrzyma\u0142 wiele od dawna wyczekiwanych usprawnie\u0144. Virtual DOM zosta\u0142 przepisany w celu poprawy wydajno\u015bci i lepszej obs\u0142ugi TypeScriptu. Dodane zosta\u0142o nowe Composition API, kt\u00f3re wielu uwa\u017ca za reactowe hooki zrobione dobrze. Opr\u00f3cz tego w nowej wersji znajdziemy Conditional Suspend Rendering, nierenderowane w HTML fragmenty czy natywne wsparcie dla portali (i musicie przyzna\u0107, \u017ce wida\u0107 tutaj wiele inspiracji z ekosystemu Reacta).\nVue 3.1 dostarczy\u0142 narz\u0119dzie u\u0142atwiaj\u0105ce migracj\u0119 z wersji 2, a Vue 3.2 dalsze ulepszenia w kierunku wsparcia WebComponent\u00f3w oraz Server Side Renderingu. Warto wspomnie\u0107 r\u00f3wnie\u017c, \u017ce Vuex, czyli najpopularniejszej w tym \u015brodowisku biblioteki do zarz\u0105dzania stanem, r\u00f3wnie\u017c wspiera ju\u017c Vue w wersji 3,0. No i oficjalnym narz\u0119dziem do budowaniu Vue jest niezwykle szybki Vite, kt\u00f3ry to r\u00f3wnie\u017c niedawno doczeka\u0142 si\u0119 kolejnej du\u017cej wersji.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb14cb3e0.png\" alt=\"\" \/><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-2\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3-one-piece.html\">https:\/\/blog.vuejs.org\/posts\/vue-3-one-piece.html<\/a>\n<a href=\"https:\/\/blog.ninja-squad.com\/2021\/06\/07\/what-is-new-vue-3.1\/\">https:\/\/blog.ninja-squad.com\/2021\/06\/07\/what-is-new-vue-3.1\/<\/a>\n<a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3.2.html\">https:\/\/blog.vuejs.org\/posts\/vue-3.2.html<\/a>\n<h1 id=\"4-du%C5%BCe-pieni%C4%85dze-nowo-powstaj%C4%85ce-firmy-i-upadek-babela\">4. Du\u017ce pieni\u0105dze, nowo powstaj\u0105ce firmy i upadek Babela<\/h1>\nPieni\u0105dze rz\u0105dz\u0105 \u015bwiatem i nie inaczej jest w przypadku naszego ma\u0142ego frontendowego \u015bwiatka. A je\u015bli chodzi o finanse, to mam wra\u017cenie, \u017ce w minionych 52 tygodniach naprawd\u0119 sporo si\u0119 dzia\u0142o. Na pocz\u0105tek we\u017amy na tapet\u0119 trend, jakim by\u0142o powstanie firm wok\u00f3\u0142 otwarto \u017ar\u00f3d\u0142owych projekt\u00f3w, czyli Rome i Deno. Opr\u00f3cz uruchomienia dzia\u0142alno\u015bci, obu tym projektom uda\u0142o si\u0119 zgromadzi\u0107 od inwestor\u00f3w odpowiednio 5 i 4.5 miliona dolar\u00f3w i zatrudni\u0107 co najmniej kilku deweloper\u00f3w w pe\u0142nym wymiarze czasowym. W przypadku Deno mo\u017cna ju\u017c m\u00f3wi o pozytywnych efektach tego dzia\u0142ania: nowe wersje \u015brodowiska uruchomieniowego pojawiaj\u0105 si\u0119 regularnie, i co do zasady zawieraj\u0105 przynajmniej jedn\u0105 now\u0105 ciekaw\u0105 funkcjonalno\u015b\u0107. Abstrahuj\u0105c od konkretnych przypadk\u00f3w tych firm: dobrze widzie\u0107, \u017ce s\u0105 na rynku ludzie i organizacje gotowe zainwestowa\u0107 w otwarto \u017ar\u00f3d\u0142owe projekty. Pozostaje tylko mie\u0107 nadziej\u0119, \u017ce Deno i Rome odnios\u0105 sukces i przetr\u0105 drog\u0119 dla podobnych inwestycji w przysz\u0142o\u015bci.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb15420ce.gif\" alt=\"\" \/>\n\n<figcaption>Tw\u00f3rcy Deno i Rome, 2021 - koloryzowane<\/figcaption><\/figure>\nNie dla wszystkich ten rok by\u0142 jednak r\u00f3wnie kolorowy. Na blogu Babela opublikowana zosta\u0142a notatka informuj\u0105ca, \u017ce osobom odpowiedzialnym za utrzymanie i rozw\u00f3j narz\u0119dzia zaczyna brakowa\u0107 pieni\u0119dzy. Je\u015bli interesuj\u0105 Was twarde dane, to Babel do gromadzenia \u015brodk\u00f3w korzysta z OpenCollective, a dane o bud\u017cecie s\u0105 publicznie dost\u0119pne. W momencie publikacji artyku\u0142u Babel dysponowa\u0142 oko\u0142o 15 tysi\u0105cami dolar\u00f3w miesi\u0119cznego bud\u017cetu, co nie starcza\u0142o na op\u0142acenie trzech pracuj\u0105cych nad nim deweloper\u00f3w. Zaoszcz\u0119dzone w lepszych czasach pieni\u0105dze mia\u0142y wystarczy\u0107 na utrzymanie zatrudnienia do ko\u0144ca 2021 roku, ale warto nadmieni\u0107, \u017ce Babel oryginalnie aspirowa\u0142 do zatrudnienia a\u017c 4 deweloper\u00f3w.\n\nJak to si\u0119 sta\u0142o, \u017ce narz\u0119dzie u\u017cywane przez wi\u0119kszo\u015b\u0107 JavaScript developer\u00f3w prawie zbankrutowa\u0142o? Babel w ostatnich latach, dzi\u0119ki coraz prostszej konfiguracji \u015brodowisk deweloperskich \u00a0sta\u0142 si\u0119 dla wi\u0119kszo\u015bci programist\u00f3w prze\u017aroczysty. Mog\u0142oby si\u0119 wydawa\u0107, \u017ce og\u0142oszenie tak dramatycznych informacji sk\u0142oni do refleksji i szybko znajd\u0105 si\u0119 maj\u0119tni sponsorzy chc\u0105cy wesprze\u0107 projekt. Jak si\u0119 jednak okaza\u0142o, za notatk\u0105 nie pop\u0142yn\u0105\u0142 strumie\u0144 monet, a w internecie zawrza\u0142o. Zapytacie, dlaczego? Ot\u00f3\u017c do tej pory a\u017c 10 tysi\u0119cy dolar\u00f3w z miesi\u0119cznego bud\u017cetu wp\u0142ywa\u0142o na konto jednego dewelopera i nie by\u0142a to wcale osoba z najwi\u0119ksz\u0105 liczb\u0105 kontrybucji. Na Twitterze rozgorza\u0142a dysputa na temat odpowiedzialno\u015bci osoby utrzymuj\u0105cej projekt Open Source, w kt\u00f3rej g\u0142os zabra\u0142y nawet takie tuzy jak Evan You (tw\u00f3rca Vue), czy Sebastian McKenzie (tw\u00f3rca Rome). Z jednej strony jasnym jest, \u017ce zbieranie funduszy, pisanie notatek o nowych funkcjonalno\u015bciach i og\u00f3lnie poj\u0119ta promocja, to r\u00f3wnie\u017c praca, za kt\u00f3r\u0105 nale\u017cy si\u0119 wynagrodzenie, a z drugiej stawiane jest pytanie o granic\u0119 mi\u0119dzy dostarczaniem nowych funkcji, a czasem po\u015bwi\u0119conym na inne aktywno\u015bci. Atmosfer\u0119 podgrzewa\u0142 jeszcze dysonans mi\u0119dzy zarobkami Hernego (g\u0142\u00f3wnego maintenera Babela) i pozosta\u0142ych deweloper\u00f3w (10000$ vs 2000$). Co prawda, wraz z publikacj\u0105 wspomnianej wy\u017cej notatki, og\u0142oszono r\u00f3wnie\u017c wyr\u00f3wnanie zarobk\u00f3w wszystkich os\u00f3b zaanga\u017cowanych w projekt, ale wielu zarzuca, \u017ce to w\u0142a\u015bnie niesprawiedliwy podzia\u0142 bud\u017cetu doprowadzi\u0142 do obecnej sytuacji.\n\nOd publikacji wspomnianego artyku\u0142u min\u0119\u0142o ju\u017c kilka miesi\u0119cy i wydaje si\u0119, \u017ce Babel przeszed\u0142 przez ten kryzys wizerunkowy bez szwanku. Obecnie z OpenCollective wynika, \u017ce projekt miesi\u0119cznie gromadzi oko\u0142o 20000$, a to w zupe\u0142no\u015bci wystarcza na op\u0142acenie trzech deweloper\u00f3w.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1578f87.gif\" alt=\"\" \/>\n\n<figcaption>Historia Babela bez dw\u00f3ch zda\u0144 zas\u0142uguje na tytu\u0142 frontendowej dramy roku.<\/figcaption><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-3\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/techcrunch.com\/2021\/06\/23\/vercel-raises-102m-series-c-for-its-next-js-based-front-end-development-platform\/\">https:\/\/techcrunch.com\/2021\/06\/23\/vercel-raises-102m-series-c-for-its-next-js-based-front-end-development-platform\/<\/a>\n<a href=\"https:\/\/deno.com\/blog\/the-deno-company\">https:\/\/deno.com\/blog\/the-deno-company<\/a>\n<a href=\"https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/\">https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/<\/a>\n<a href=\"https:\/\/babeljs.io\/blog\/2021\/05\/10\/funding-update.html\">https:\/\/babeljs.io\/blog\/2021\/05\/10\/funding-update.html<\/a>\n<a href=\"https:\/\/news.ycombinator.com\/item?id=27116357\">https:\/\/news.ycombinator.com\/item?id=27116357<\/a>\n<h1 id=\"5-kontrowersje-wok%C3%B3%C5%82-floc-i-supercookies\">5. Kontrowersje wok\u00f3\u0142 FLoC i Supercookies<\/h1>\nTemat Supercookies i FLoC to chyba najbardziej burzogenny temat ostatnich miesi\u0119cy. Pierwsze z tych tajemniczych okre\u015ble\u0144 zosta\u0142o ukute pocz\u0105tkiem roku przez Firefoxa i jest synonimem na ca\u0142y zbi\u00f3r sprytnych rozwi\u0105za\u0144 maj\u0105cych na celu \u015bledzenie interakcji u\u017cytkownika pomi\u0119dzy witrynami, zazwyczaj w celu lepszej personalizacji reklam (jako przyk\u0142ad Mozilla poda\u0142a wykorzystanie do tego cache\u2019u przegl\u0105darki). Na tym etapie wszystkie przegl\u0105darki, poza Chrome, chwal\u0105 si\u0119 specjalnym wsparcie dla blokowania Supercookies. Dlaczego Google zwleka z wprowadzeniem takiej funkcjonalno\u015bci? No c\u00f3\u017c, je\u015bli jednym z Waszych g\u0142\u00f3wnych \u017ar\u00f3de\u0142 dochodu by\u0142yby targetowane reklamy, to prawdopodobnie te\u017c kr\u0119ciliby\u015bcie nosem na takie rozwi\u0105zanie...\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb15a7f42.png\" alt=\"\" \/><\/figure>\nGoogle zdaje sobie jednak spraw\u0119 z trendu dbania o prywatno\u015b\u0107 w sieci i dlatego zaproponowa\u0142 swoj\u0105 alternatyw\u0119 dla Supercookies, czyli FLoC (Federated Learning of Cohorts). Algorytm ten po stronie klienta analizuje histori\u0119 przegl\u0105dania i przypisuje u\u017cytkownika do odpowiedniej kohorty. W ten spos\u00f3b dane o aktywno\u015bci u\u017cytkownika nigdy nie opuszczaj\u0105 jego przegl\u0105darki, a reklamodawcy nie trac\u0105 mo\u017cliwo\u015bci dobrego targetowania swoich reklam. Na papierze plan brzmi ca\u0142kiem nie\u017ale, ale je\u015bli zag\u0142\u0119bi\u0107 si\u0119 w szczeg\u00f3\u0142y, to okazuje si\u0119, \u017ce nie jest ju\u017c tak optymistycznie. Do tej pory, je\u015bli dana strona chcia\u0142a jednoznacznie zidentyfikowa\u0107 u\u017cytkownika, to prawdopodobnie musia\u0142a przeanalizowa\u0107 kilka milion\u00f3w rekord\u00f3w. Po wdro\u017ceniu nowego rozwi\u0105zania liczba ta zmniejszy si\u0119 do kilku tysi\u0119cy, bo strony b\u0119d\u0105 mog\u0142y odczyta\u0107 id kohorty i w ten spos\u00f3b mocno zaw\u0119zi\u0107 obszar poszukiwa\u0144. Ponadto, je\u015bli na stronie logujemy si\u0119 za pomoc\u0105 maila, to natychmiast b\u0119dzie ona w stanie powi\u0105za\u0107 nas z naszymi zainteresowaniami, a nawet zapisa\u0107 je u siebie na serwerze. FLoC domy\u015blnie analizuje r\u00f3wnie\u017c wszystkie strony na jakie wchodzimy (w tym te rz\u0105dowe czy powi\u0105zane z naszymi danymi zdrowotnymi), a nie tak jak to mia\u0142o miejsce do tej pory, gdzie \u015bledzeni byli\u015bmy tylko na stronach do kt\u00f3rych za\u0142\u0105czono odpowiedni skrypt of Google\u2019a albo Facebooka.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb16dece3.png\" alt=\"\" \/><\/figure>\nSw\u00f3j publiczny sprzeciw przeciwko FLoC wyrazi\u0142o sporo firm zajmuj\u0105cych si\u0119 prywatno\u015bci\u0105 (mi\u0119dzy innymi Brave i DuckDuckGo), a presja ze strony u\u017cytkownik\u00f3w zmusi\u0142a Google do odroczenia globalnego wdro\u017cenia algorytmu do swojej przegl\u0105darki do 2023 roku. Dodatkowy czas firma z Mountain View zamierza wykorzysta\u0107 na rozpocz\u0119ciu publicznych dyskusji dotycz\u0105cych prywatno\u015bci w kontek\u015bcie personalizacji reklam, jak i negocjacjach z innymi du\u017cymi graczami w \u015bwiecie przegl\u0105darek i e-commerce.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1807fd8.gif\" alt=\"\" \/>\n\n<figcaption>Je\u015bli ju\u017c nawet sam Google po cichu przyznaje, \u017ce FLoC ma swoje wady, to znaczy, \u017ce nad algorytmem naprawd\u0119 zacz\u0119\u0142y rozci\u0105ga\u0107 si\u0119 ciemne chmury. Ciekawe, jak Google wybrnie teraz z tego problemu.<\/figcaption><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-4\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/brave.com\/why-brave-disables-floc\/\">https:\/\/brave.com\/why-brave-disables-floc\/<\/a>\n<a href=\"https:\/\/www.eff.org\/deeplinks\/2021\/03\/googles-floc-terrible-idea\">https:\/\/www.eff.org\/deeplinks\/2021\/03\/googles-floc-terrible-idea<\/a>\n<a href=\"https:\/\/arstechnica.com\/gadgets\/2021\/06\/google-delays-floc-rollout-until-2023\/\">https:\/\/arstechnica.com\/gadgets\/2021\/06\/google-delays-floc-rollout-until-2023\/<\/a>\n<h1 id=\"6-hermes-dzia%C5%82a-na-ios\">6. Hermes dzia\u0142a na iOS<\/h1>\nW minionych dwunastu miesi\u0105cach otrzymali\u015bmy dwie nowe nowe wersje React Native (0.64 i 0.65), ale ci\u0119\u017cko doszukiwa\u0107 si\u0119 w nich rewolucji. Wi\u0119kszo\u015b\u0107 zmian dotyczy\u0142a usprawnie\u0144 wydajno\u015bci, accessibility, czy kompatybilno\u015bci z procesorami M1. W tym szarym \u0142ez padole znalaz\u0142a si\u0119 jednak jedna funkcja, kt\u00f3ra wzbudzi\u0142a sporo zamieszania: wsparcie dla silnika Hermes na urz\u0105dzeniach z systemem iOS.\n\nJe\u015bli \u017cyjecie poza ba\u0144k\u0105 React Native i nie kojarzycie Hermesa, to jest to silnik JavaScriptu od samego Facebooka, kt\u00f3ry ma redukowa\u0107 Time to Interactive, by\u0107 przystosowanym do urz\u0105dze\u0144 mobilnych i tworzony jest od pocz\u0105tku z my\u015bl\u0105 o dobrym wsparciu dla React Native. Jako przyk\u0142adowe usprawnienie niech pos\u0142u\u017cy nam dodany w ostatnim releasie Garbage Collector (o pasuj\u0105cej do konwencji nazwie Hades), kt\u00f3ry skraca faz\u0119 stop-the-world nawet 30 krotnie i zmniejsza zu\u017cycie procesora nawet o 50%.\n\nDlaczego jest to wa\u017cne wydarzenie? Ot\u00f3\u017c Apple od lat narzuca wszystkim rozwijany przez siebie silnik JavaScriptCore. Od tej regu\u0142y do tej pory nie by\u0142o wyj\u0105tk\u00f3w i nawet Chrome na mobilnych urz\u0105dzeniach z jab\u0142uszkiem pod spodem, u\u017cywa\u0142 silnika Safari. To co umo\u017cliwi\u0142o powstanie Hermesa na urz\u0105dzenia z iOS, to drobna zmiana w regulaminie AppStore m\u00f3wi\u0105ca, \u017ce ograniczenie dotyczy tylko interpretowanego kodu (Hermes pakowany jest do plik\u00f3w binarnych). Niestety nie oznacza to, \u017ce szybko zobaczymy na iPhonach Chrome z v8 (z drugiej strony mo\u017ce to i dobrze, bo Safari jest ostatni\u0105 przystani\u0105 powstrzymuj\u0105c\u0105 dominacj\u0119 v8 na rynku).\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1837c2d.gif\" alt=\"\" \/>\n\n<figcaption>Osoba odpowiedzialna za konwencj\u0119 nazewnicz\u0105 Hermes i Hadesa zdecydowanie zas\u0142uguje na podwy\u017ck\u0119<\/figcaption><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-5\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/reactnative.dev\/blog\/2021\/03\/12\/version-0.64\">https:\/\/reactnative.dev\/blog\/2021\/03\/12\/version-0.64<\/a>\n<a href=\"https:\/\/www.reddit.com\/r\/reactnative\/comments\/j8gzjz\/hermes_is_coming_to_ios\/\">https:\/\/www.reddit.com\/r\/reactnative\/comments\/j8gzjz\/hermes_is_coming_to_ios\/<\/a>\n<a href=\"https:\/\/reactnative.dev\/blog\/2021\/08\/17\/version-065\">https:\/\/reactnative.dev\/blog\/2021\/08\/17\/version-065<\/a>\n<a href=\"https:\/\/hermesengine.dev\/docs\/hades\/\">https:\/\/hermesengine.dev\/docs\/hades\/<\/a>\n<h1 id=\"7-internet-explorer-11-w-ko%C5%84cu-umiera\">7. Internet Explorer 11 w ko\u0144cu umiera<\/h1>\nProjekty og\u0142aszaj\u0105ce koniec wsparcia dla Internet Explorera 11 wyrasta\u0142y w tym roku, jak grzyby po deszczu. Angular oznaczy\u0142 wsparcie dla IE 11 jako deprecated i usunie je ca\u0142kowicie wraz z pojawieniem si\u0119 Angulara 13. Vue og\u0142osi\u0142o usuni\u0119cie ze swojej roadmapy dla wersji 3 implementacj\u0119 kompatybilno\u015bci z IE 11. Przed kilkoma tygodniami AWS og\u0142osi\u0142 koniec wsparcia dla IE 11 przez Amazon Web Services. List\u0119 zamyka sama firma matka przegl\u0105darki, kt\u00f3ra opr\u00f3cz og\u0142oszenia ko\u0144ca wsparcia dla IE 11 w produktach \u200b\u200bMicrosoft 365, og\u0142osi\u0142a r\u00f3wnie\u017c, \u017ce 15 czerwca 2022 roku 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!).\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1866764.png\" alt=\"\" \/><\/figure>\nJe\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.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1953cdf.png\" alt=\"\" \/><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-6\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2021\/05\/19\/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge\/\">https:\/\/blogs.windows.com\/windowsexperience\/2021\/05\/19\/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge\/<\/a>\n<a href=\"https:\/\/github.com\/vuejs\/rfcs\/discussions\/296\">https:\/\/github.com\/vuejs\/rfcs\/discussions\/296<\/a>\n<a href=\"https:\/\/github.com\/angular\/angular\/issues\/41840\">https:\/\/github.com\/angular\/angular\/issues\/41840<\/a>\n<a href=\"https:\/\/aws.amazon.com\/blogs\/aws\/heads-up-aws-support-for-internet-explorer-11-is-ending\/\">https:\/\/aws.amazon.com\/blogs\/aws\/heads-up-aws-support-for-internet-explorer-11-is-ending\/<\/a>\n<h1 id=\"9-nodejs-w-przegl%C4%85darce-czyli-webcontainers\">9. Node.js w przegl\u0105darce, czyli WebContainers<\/h1>\nJak dzi\u015b pami\u0119tam, jak\u0105 fal\u0119 zainteresowania w sieci wzbudzi\u0142o og\u0142oszenie na Google I\/O przez StackBlitz WebContainers. Czym jest ta tajemnicza technologia? Ot\u00f3\u017c jest to \u015brodowiska uruchomieniowe Node.js, dzia\u0142aj\u0105ce ca\u0142kowicie w przegl\u0105darce i oparte g\u0142\u00f3wnie na WebAssembly. Do pe\u0142nego szcz\u0119\u015bcia potrzebne s\u0105 jeszcze integracje z systemem operacyjny i na tym polu nie jest idealnie, ale ludziom ze StackBlitz uda\u0142o si\u0119 dowie\u015b\u0107 ca\u0142kiem sporo (np. emulacja fs jest mo\u017cliwa dzi\u0119ki wykorzystaniu File System Access API). W architektur\u0119 rozwi\u0105zania uwik\u0142any jest te\u017c ServiceWorker, kt\u00f3ry przechwytuje odpowiednie requesty i przekierowuje je do naszego WebContainer (dzi\u0119ki jego obecno\u015bci ca\u0142e rozwi\u0105zanie dzia\u0142a r\u00f3wnie\u017c offline).\n\nW tej beczce miodu jest te\u017c niestety \u0142y\u017cka dziegciu (a nawet kilka!). Z poziomu WebContainers nie po\u0142\u0105czymy si\u0119 z baz\u0105 danych, bo przegl\u0105darki nie mog\u0105 komunikowa\u0107 si\u0119 za pomoc\u0105 niestandardowych protoko\u0142\u00f3w (tutaj zesp\u00f3\u0142 StackBlitz liczy na pojawienie si\u0119 w przysz\u0142o\u015bci w przegl\u0105darkach Native Sockets). Ponadto na ten moment WebContainers dzia\u0142aj\u0105 tylko w silnikach opartych na Chromium, wi\u0119c nie u\u015bwiadczymy ich chocia\u017cby na mobilnych urz\u0105dzeniach z jab\u0142uszkiem czy w Firefox (co mo\u017ce bole\u0107 podw\u00f3jnie, bo to w\u0142a\u015bnie Mozilla utrzymuje, zdaniem wielu, najlepszy silnik WASM). Opr\u00f3cz tego lista wspieranych framework\u00f3w jest raczej kr\u00f3tka, aczkolwiek trzeba przyzna\u0107, \u017ce zawiera chyba wszystkie najpopularniejsze opcje (Express.js, Koa, NestJS, Next.js, Nuxt) Je\u015bli WebContainers aspiruj\u0105 do zostania w pe\u0142ni funkcjonalnym \u015brodowiskiem deweloperskim, to przed nimi jeszcze d\u0142uga droga, ale jak na wersj\u0119 beta to jest naprawd\u0119 nie\u017ale.\n<h3 id=\"przeczytaj-wi%C4%99cej-7\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/blog.stackblitz.com\/posts\/introducing-webcontainers\/\">https:\/\/blog.stackblitz.com\/posts\/introducing-webcontainers\/<\/a>\n<a href=\"https:\/\/twitter.com\/stackblitz\/status\/1395409316270772224\">https:\/\/twitter.com\/stackblitz\/status\/1395409316270772224<\/a>\n<h1 id=\"9-tailwind-20-i-kompilator-jit-dla-tailwinda\">9. Tailwind 2.0 i kompilator JIT dla Tailwinda<\/h1>\nZdaniem wielu podej\u015bcie utilty-first idealnie pasuje do wsp\u00f3\u0142czesnych frontendowych framework\u00f3w i prawdopodobnie w\u0142a\u015bnie z tego powodu jego popularno\u015b\u0107 nieustannie ro\u015bnie Jak wynika z State of CSS 2020, jest to framework generuj\u0105cy najwi\u0119ksze zainteresowanie w swojej kategorii. Ponadto wzgl\u0119dem 2019 roku zaliczy\u0142 on wzrost o 20 punkt\u00f3w procentowych, je\u015bli chodzi o wdro\u017cenie na produkcj\u0119. Na tym etapie mo\u017cemy ju\u017c m\u00f3wi\u0107 o tym, \u017ce zast\u0105pi\u0142 on na tronie cssowych framework\u00f3w Bootstrapa.\n\nW listopadzie 2020 doczekali\u015bmy si\u0119 Tailwinda w wersji 2.0, a wraz z ni\u0105 mi\u0119dzy innymi rozszerzon\u0105 palet\u0119 kolor\u00f3w, nowy breakpoint dla najwi\u0119kszych ekran\u00f3w i wsparcie dla dark-mode. Na najciekawsze nowo\u015bci musieli\u015bmy jednak poczeka\u0107 do marca 2021 roku, kiedy to ukaza\u0142 si\u0119 kompilator Just-In-Time dla Tailwinda. Przy wykorzystaniu zwyk\u0142ego kompilatora do przegl\u0105darki dostarczany by\u0142 poka\u017any plik zawieraj\u0105cy ca\u0142ego Tailwinda (czasami maj\u0105cego nawet 10MB!). W trybie produkcyjnym natomiast standardem by\u0142o odchudzanie paczki przy pomocy PurgeCSS. Nowy Kompilator zupe\u0142nie zmienia to zachowanie i teraz zar\u00f3wno w trybie produkcyjnym, jak i deweloperskim wraz z dodaniem kolejnej klasy do elementu, dynamicznie pojawia\u0107 si\u0119 ona b\u0119dzie w wynikowych plikach styli. Nie wp\u0142ynie to znacz\u0105co na rozmiar bundla, ale za to poprawi developer experience - w trakcie developmentu przegl\u0105darka b\u0119dzie musia\u0142a obs\u0142ugiwa\u0107 o rz\u0105d wielko\u015bci mniejszy plik CSS. Nie s\u0105 to (niestety) jedyne zmiany, jakie wprowadza nowy kompilator. Nowy spos\u00f3b generowania klas umo\u017cliwia specyfikacj\u0119 jednostek w pikselach i kolor\u00f3w w postaci hexa. Jest to rozwi\u0105zanie niezwykle wygodne, ale wydaje si\u0119 r\u00f3wnie\u017c niepokoj\u0105co zbli\u017cone do inline styles. No c\u00f3\u017c, z wielk\u0105 moc\u0105 idzie wielka odpowiedzialno\u015b\u0107 - zobaczymy, czy programi\u015bci sprostaj\u0105 temu wyzwaniu.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1a015c5.png\" alt=\"\" \/><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-8\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/blog.tailwindcss.com\/just-in-time-the-next-generation-of-tailwind-css\">https:\/\/blog.tailwindcss.com\/just-in-time-the-next-generation-of-tailwind-css<\/a>\n<a href=\"https:\/\/blog.tailwindcss.com\/tailwindcss-v2\">https:\/\/blog.tailwindcss.com\/tailwindcss-v2<\/a>\n<h1 id=\"10-webpack-5\">10. Webpack 5<\/h1>\nWebpack od dawna jest bran\u017cowym standardem i pomimo rosn\u0105cej konkurencji (a szczeg\u00f3lnie ciekawie wygl\u0105da zw\u0142aszcza ta oparta o esbuild) na razie nic nie zapowiada jego schy\u0142ku. Prawie r\u00f3wno rok temu ukaza\u0142a si\u0119 d\u0142ugo oczekiwana wersja 5 tego narz\u0119dzia do pakowania aplikacji i gdyby\u015bmy mieli tutaj przyjrze\u0107 si\u0119 wszystkim nowo\u015bciom, jakie wprowadzono, to c\u00f3\u017c, prawdopodobnie musieliby\u015bmy dwukrotnie wyd\u0142u\u017cy\u0107 ten artyku\u0142 . W zwi\u0105zku z tym wspomn\u0119 tylko o jednej funkcjonalno\u015bci, o kt\u00f3rej na przestrzeni ostatniego roku by\u0142o najg\u0142o\u015bniej, a jest ni\u0105 Module Federation. Funkcjonalno\u015b\u0107 ta ma umo\u017cliwia\u0107 dynamiczne doczytanie innej aplikacji i wsp\u00f3\u0142dzielenie zale\u017cno\u015bci. Je\u015bli co\u015b Wam to przypomina to dobrze kombinujecie: Module Federation to feature zaprojektowany, aby wspiera\u0107 mikrofrontendy (kt\u00f3re swoj\u0105 drog\u0105 zas\u0142uguj\u0105 chyba na tytu\u0142 najgor\u0119tszego catch phrase zesz\u0142ego roku).\n\nWarto napomkn\u0105\u0107 r\u00f3wnie\u017c, \u017ce rynek szybko postanowi\u0142 nadgoni\u0107 standard i narz\u0119dzia daj\u0105ce wsparcie dla Webpacka 5 wyrasta\u0142y jak grzyby po deszczy (wspomnijmy chocia\u017cby Angulara czy Nexta). No i nie by\u0142o chyba takiej notatki o wsparciu dla Webpacka 5, w kt\u00f3rej nie wspomniano by o Module Federation i mikrofrontendach.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1a37329.jpg\" alt=\"\" \/><\/figure>\n<h2 id=\"przeczytaj-wi%C4%99cej-9\">Przeczytaj wi\u0119cej:<\/h2>\n<a href=\"https:\/\/webpack.js.org\/blog\/2020-10-10-webpack-5-release\/\">https:\/\/webpack.js.org\/blog\/2020-10-10-webpack-5-release\/<\/a>\n<a href=\"https:\/\/webpack.js.org\/concepts\/module-federation\/\">https:\/\/webpack.js.org\/concepts\/module-federation\/<\/a>\n<a href=\"https:\/\/scriptedalchemy.medium.com\/webpack-5-module-federation-stitching-two-simple-bundles-together-fe4e6a069716\">https:\/\/scriptedalchemy.medium.com\/webpack-5-module-federation-stitching-two-simple-bundles-together-fe4e6a069716<\/a>\n<a href=\"https:\/\/nextjs.org\/docs\/messages\/webpack5\">https:\/\/nextjs.org\/docs\/messages\/webpack5<\/a>\n<h1 id=\"11-mdn-web-docs-umiera-powstaje-open-web-docs\">11. MDN Web Docs umiera, powstaje Open Web Docs<\/h1>\nNie jest tajemnic\u0105, \u017ce Mozlilla w ostatnim okresie nie najlepiej radzi sobie, je\u015bli chodzi o kwestie finansowe. Skutkiem zaistnia\u0142ej sytuacji by\u0142y ci\u0119cia koszt\u00f3w, redukcje etat\u00f3w i przerzuceniem ludzi do rozwoju potencjalnie dochodowych produkt\u00f3w (takich jak na przyk\u0142ad niedawno opublikowany VPN wbudowany w Firefox). Na restrukturyzacji firmy ucierpia\u0142 niestety zesp\u00f3\u0142 odpowiedzialny za MDN Web Docs - dokumentacji, z kt\u00f3r\u0105 do czynienia mia\u0142 chyba ka\u017cdy deweloper.\n\n\u015awiat nienawidzi jednak pr\u00f3\u017cni i nied\u0142ugo po og\u0142oszeniu redukcji etat\u00f3w w Mozilli, \u015bwiat\u0142o dzienne ujrza\u0142o Open Web Docs. Nie dajcie si\u0119 zmyli\u0107 nazwie - to nie jest kolejna innowacyjna biblioteka, a organizacja, kt\u00f3ra za zadanie wzi\u0119\u0142a sobie wspieranie otwartych dokumentacji weba (w tym wspomnianego wcze\u015bniej MDN Web Docs). Open Web Docs do tej pory otrzyma\u0142o ju\u017c spory zastrzyk got\u00f3wki, bo opr\u00f3cz indywidualnych deweloper\u00f3w, finansowo wspar\u0142y j\u0105 Google, Microsoft i Facebook wp\u0142acaj\u0105c po 250 tysi\u0119cy dolar\u00f3w. Pozostaje tylko trzyma\u0107 kciuki za dalsze wsparcie od najwi\u0119kszych graczy i czeka\u0107 na rezultaty pracy - w ko\u0144cu dobrej dokumentacji nigdy za wiele.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1a6453d.png\" alt=\"\" \/><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-10\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/opencollective.com\/open-web-docs#category-ABOUT\">https:\/\/opencollective.com\/open-web-docs#category-ABOUT<\/a>","innerContent":["To ju\u017c 52 edycja naszego frontendowca przegl\u0105du, a to oznacza, \u017ce przygotowujemy dla Was nasze podsumowania ju\u017c od ponad roku! Aby uczci\u0107 to donios\u0142e wydarzenie postanowili\u015bmy wybra\u0107 11, naszym zdaniem, najciekawszych trend\u00f3w i wydarze\u0144 minionego roku (kolejno\u015b\u0107 dobrana losowo). Na starcie ostrzegam: przygotujcie sobie spory kubek z kaw\u0105, bo to nie b\u0119dzie kr\u00f3tka lektura (ale za to jaka ciekawa!) \u2615\ufe0f\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1477c8a.gif\" alt=\"\" \/><\/figure>\n<h1 id=\"1-react-17-i-react-server-components\">1. React 17 i React Server Components<\/h1>\nW pa\u017adzierniku 2020 powitali\u015bmy kolejn\u0105 du\u017c\u0105 wersj\u0119 Reacta. Pomimo du\u017cego numerka (17), wydanie nie zawiera\u0142o nowych funkcjonalno\u015bci i skupia\u0142o si\u0119 na u\u0142atwieniu bardziej granularnych aktualizacji w przysz\u0142o\u015bci (zamiast migrowa\u0107 ca\u0142\u0105 aplikacj\u0119 za jednym razem, mo\u017cliwe ma by\u0107 migrowanie jej po kawa\u0142ku i wsp\u00f3\u0142istnienie kilku wersji Reacta w jednej aplikacji).\n\nKiedy ju\u017c utwierdzi\u0142em si\u0119 w przekonaniu, \u017ce React popad\u0142 w stagnacj\u0119, tu\u017c przed \u015bwi\u0119tami Bo\u017cego Narodzenia z tego prze\u015bwiadczenia wybudzi\u0142 mnie Dan Abramov przedstawiaj\u0105c React Server Components. Koncepcja ta to wariancja Server Side Renderingu, kt\u00f3ra pozwala renderowa\u0107 cz\u0119\u015b\u0107 komponent\u00f3w po stronie klienta, a cz\u0119\u015b\u0107 po stronie serwera. Podej\u015bcie to minimalizuje ilo\u015b\u0107 kodu wysy\u0142anego do przegl\u0105darki (biblioteki importowane przez komponenty renderowane na serwerze nie s\u0105 pobierane przez klienta) i daje dost\u0119p do typowo serwerowych interfejs\u00f3w z poziomu Reacta (bazy danych, system plik\u00f3w). Oczywi\u015bcie rozwi\u0105zanie ma te\u017c swoje ograniczenia: komponenty renderowane na serwerze nie mog\u0105 przechowywa\u0107 stanu i obs\u0142ugiwa\u0107 interaktywnych akcji. Nie wiadomo, kiedy i czy React Server Components osi\u0105gn\u0105 status produkcyjny, ale zdecydowanie pomys\u0142 ten by\u0142 jednym z najwi\u0119kszych w ostatnich miesi\u0105cach powiew\u00f3w \u015bwie\u017co\u015bci we Frontendowym \u015awiecie.\n\nJe\u015bli jeste\u015bmy ju\u017c w kontek\u015bcie React, to warto wspomnie\u0107 r\u00f3wnie\u017c o powstaniu React Working Group, kt\u00f3re to ma by\u0107 przestrzeni\u0105 do komunikacji mi\u0119dzy spo\u0142eczno\u015bci\u0105, a lud\u017ami stoj\u0105cymi za implementacj\u0105 nowych funkcjonalno\u015bci. Grupa ta powsta\u0142a przy okazji og\u0142oszenia alfy Reacta 18, kt\u00f3ra w odr\u00f3\u017cnieniu od wersji 17, zawiera\u0107 b\u0119dzie ca\u0142\u0105 mas\u0119 nowych interesuj\u0105cych funkcji (mi\u0119dzy innymi wsparcie dla Suspense w Server Side Renderingu i lepsze batchowanie render\u00f3w). Pozostaje tylko cierpliwie czeka\u0107 na wersj\u0119 beta i oficjaln\u0105 wydanie.\n<h3 id=\"przeczytaj-wi%C4%99cej\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/reactjs.org\/blog\/2020\/12\/21\/data-fetching-with-react-server-components.html\"><em>https<\/em>:\/\/reactjs.org\/blog\/2020\/12\/21\/data-fetching-with-react-server-components.html<\/a>\n<a href=\"https:\/\/reactjs.org\/blog\/2021\/06\/08\/the-plan-for-react-18.html\">https:\/\/reactjs.org\/blog\/2021\/06\/08\/the-plan-for-react-18.html<\/a>\n<h1 id=\"2-angular-11-angular-12%E2%80%A6-nudy\">2. Angular 11, Angular 12\u2026 nudy!<\/h1>\nNa przestrzeni ostatnich 12 miesi\u0119cy dostali\u015bmy dwie nowe wersje Angulara, i szczerze m\u00f3wi\u0105c, by\u0142y to dwa wydania nudne jak flaki z olejem. W ramach wersji 11 w \u017cycie wdro\u017cona zosta\u0142a \u201cOperacja Byelog\u201d, w ramach kt\u00f3rej otagowany zosta\u0142 ca\u0142y backlog b\u0142\u0119d\u00f3w i feature requests zg\u0142oszonych przez spo\u0142eczno\u015b\u0107 (uda\u0142o si\u0119 nawet wdro\u017cy\u0107 w \u017cycie kilka z nich). Opr\u00f3cz tego dosz\u0142o automatyczne inlineowanie czcionek, upi\u0119kszone logi i przy\u015bpieszone buildy. Wersja 12 w por\u00f3wnaniu z 11 wygl\u0105da odrobin\u0119 ciekawiej. Dostali\u015bmy w niej pe\u0142ne wsparcie dla Webpack 5, deprekacje View Engine i Protractora oraz kilka drobnych usprawnie\u0144. Reasumuj\u0105c Angular rozwija si\u0119 stabilnie, a na horyzoncie jak na razie brak wi\u0119kszych rewolucji (chyba jedyn\u0105, kt\u00f3ra przychodzi mi do g\u0142owy jest rozpocz\u0119cie prac nad opcjonalnymi modu\u0142ami, ale nie wiadomo jednak, kiedy ma to szans\u0119 trafi\u0107 w nasze r\u0119ce).\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb14a8cbe.gif\" alt=\"\" \/>\n<figcaption>Teraz pewnie wszyscy ziewaj\u0105 przed ekranami - przepraszam, nie mog\u0142em si\u0119 powstrzyma\u0107<\/figcaption><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-1\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/vived.io\/frontend-thursday-vol-32\/\">https:\/\/blog.vived.io\/frontend-thursday-vol-32\/<\/a>\n<a href=\"https:\/\/github.com\/angular\/protractor\/issues\/5502\">https:\/\/github.com\/angular\/protractor\/issues\/5502<\/a>\n<h1 id=\"3-vue-30\">3. Vue 3.0<\/h1>\nSpo\u015br\u00f3d trzech najwi\u0119kszych frontendowych framework\u00f3w zdecydowanie najwi\u0119cej dzia\u0142o si\u0119 w obozie Vue. Po prawie dw\u00f3ch latach developmentu i trzech miesi\u0105cach otwartej bety, trzecia wersja Vue doczeka\u0142a si\u0119 oficjalnego releasu wersji 3.0. Framework otrzyma\u0142 wiele od dawna wyczekiwanych usprawnie\u0144. Virtual DOM zosta\u0142 przepisany w celu poprawy wydajno\u015bci i lepszej obs\u0142ugi TypeScriptu. Dodane zosta\u0142o nowe Composition API, kt\u00f3re wielu uwa\u017ca za reactowe hooki zrobione dobrze. Opr\u00f3cz tego w nowej wersji znajdziemy Conditional Suspend Rendering, nierenderowane w HTML fragmenty czy natywne wsparcie dla portali (i musicie przyzna\u0107, \u017ce wida\u0107 tutaj wiele inspiracji z ekosystemu Reacta).\nVue 3.1 dostarczy\u0142 narz\u0119dzie u\u0142atwiaj\u0105ce migracj\u0119 z wersji 2, a Vue 3.2 dalsze ulepszenia w kierunku wsparcia WebComponent\u00f3w oraz Server Side Renderingu. Warto wspomnie\u0107 r\u00f3wnie\u017c, \u017ce Vuex, czyli najpopularniejszej w tym \u015brodowisku biblioteki do zarz\u0105dzania stanem, r\u00f3wnie\u017c wspiera ju\u017c Vue w wersji 3,0. No i oficjalnym narz\u0119dziem do budowaniu Vue jest niezwykle szybki Vite, kt\u00f3ry to r\u00f3wnie\u017c niedawno doczeka\u0142 si\u0119 kolejnej du\u017cej wersji.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb14cb3e0.png\" alt=\"\" \/><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-2\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3-one-piece.html\">https:\/\/blog.vuejs.org\/posts\/vue-3-one-piece.html<\/a>\n<a href=\"https:\/\/blog.ninja-squad.com\/2021\/06\/07\/what-is-new-vue-3.1\/\">https:\/\/blog.ninja-squad.com\/2021\/06\/07\/what-is-new-vue-3.1\/<\/a>\n<a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3.2.html\">https:\/\/blog.vuejs.org\/posts\/vue-3.2.html<\/a>\n<h1 id=\"4-du%C5%BCe-pieni%C4%85dze-nowo-powstaj%C4%85ce-firmy-i-upadek-babela\">4. Du\u017ce pieni\u0105dze, nowo powstaj\u0105ce firmy i upadek Babela<\/h1>\nPieni\u0105dze rz\u0105dz\u0105 \u015bwiatem i nie inaczej jest w przypadku naszego ma\u0142ego frontendowego \u015bwiatka. A je\u015bli chodzi o finanse, to mam wra\u017cenie, \u017ce w minionych 52 tygodniach naprawd\u0119 sporo si\u0119 dzia\u0142o. Na pocz\u0105tek we\u017amy na tapet\u0119 trend, jakim by\u0142o powstanie firm wok\u00f3\u0142 otwarto \u017ar\u00f3d\u0142owych projekt\u00f3w, czyli Rome i Deno. Opr\u00f3cz uruchomienia dzia\u0142alno\u015bci, obu tym projektom uda\u0142o si\u0119 zgromadzi\u0107 od inwestor\u00f3w odpowiednio 5 i 4.5 miliona dolar\u00f3w i zatrudni\u0107 co najmniej kilku deweloper\u00f3w w pe\u0142nym wymiarze czasowym. W przypadku Deno mo\u017cna ju\u017c m\u00f3wi o pozytywnych efektach tego dzia\u0142ania: nowe wersje \u015brodowiska uruchomieniowego pojawiaj\u0105 si\u0119 regularnie, i co do zasady zawieraj\u0105 przynajmniej jedn\u0105 now\u0105 ciekaw\u0105 funkcjonalno\u015b\u0107. Abstrahuj\u0105c od konkretnych przypadk\u00f3w tych firm: dobrze widzie\u0107, \u017ce s\u0105 na rynku ludzie i organizacje gotowe zainwestowa\u0107 w otwarto \u017ar\u00f3d\u0142owe projekty. Pozostaje tylko mie\u0107 nadziej\u0119, \u017ce Deno i Rome odnios\u0105 sukces i przetr\u0105 drog\u0119 dla podobnych inwestycji w przysz\u0142o\u015bci.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb15420ce.gif\" alt=\"\" \/>\n\n<figcaption>Tw\u00f3rcy Deno i Rome, 2021 - koloryzowane<\/figcaption><\/figure>\nNie dla wszystkich ten rok by\u0142 jednak r\u00f3wnie kolorowy. Na blogu Babela opublikowana zosta\u0142a notatka informuj\u0105ca, \u017ce osobom odpowiedzialnym za utrzymanie i rozw\u00f3j narz\u0119dzia zaczyna brakowa\u0107 pieni\u0119dzy. Je\u015bli interesuj\u0105 Was twarde dane, to Babel do gromadzenia \u015brodk\u00f3w korzysta z OpenCollective, a dane o bud\u017cecie s\u0105 publicznie dost\u0119pne. W momencie publikacji artyku\u0142u Babel dysponowa\u0142 oko\u0142o 15 tysi\u0105cami dolar\u00f3w miesi\u0119cznego bud\u017cetu, co nie starcza\u0142o na op\u0142acenie trzech pracuj\u0105cych nad nim deweloper\u00f3w. Zaoszcz\u0119dzone w lepszych czasach pieni\u0105dze mia\u0142y wystarczy\u0107 na utrzymanie zatrudnienia do ko\u0144ca 2021 roku, ale warto nadmieni\u0107, \u017ce Babel oryginalnie aspirowa\u0142 do zatrudnienia a\u017c 4 deweloper\u00f3w.\n\nJak to si\u0119 sta\u0142o, \u017ce narz\u0119dzie u\u017cywane przez wi\u0119kszo\u015b\u0107 JavaScript developer\u00f3w prawie zbankrutowa\u0142o? Babel w ostatnich latach, dzi\u0119ki coraz prostszej konfiguracji \u015brodowisk deweloperskich \u00a0sta\u0142 si\u0119 dla wi\u0119kszo\u015bci programist\u00f3w prze\u017aroczysty. Mog\u0142oby si\u0119 wydawa\u0107, \u017ce og\u0142oszenie tak dramatycznych informacji sk\u0142oni do refleksji i szybko znajd\u0105 si\u0119 maj\u0119tni sponsorzy chc\u0105cy wesprze\u0107 projekt. Jak si\u0119 jednak okaza\u0142o, za notatk\u0105 nie pop\u0142yn\u0105\u0142 strumie\u0144 monet, a w internecie zawrza\u0142o. Zapytacie, dlaczego? Ot\u00f3\u017c do tej pory a\u017c 10 tysi\u0119cy dolar\u00f3w z miesi\u0119cznego bud\u017cetu wp\u0142ywa\u0142o na konto jednego dewelopera i nie by\u0142a to wcale osoba z najwi\u0119ksz\u0105 liczb\u0105 kontrybucji. Na Twitterze rozgorza\u0142a dysputa na temat odpowiedzialno\u015bci osoby utrzymuj\u0105cej projekt Open Source, w kt\u00f3rej g\u0142os zabra\u0142y nawet takie tuzy jak Evan You (tw\u00f3rca Vue), czy Sebastian McKenzie (tw\u00f3rca Rome). Z jednej strony jasnym jest, \u017ce zbieranie funduszy, pisanie notatek o nowych funkcjonalno\u015bciach i og\u00f3lnie poj\u0119ta promocja, to r\u00f3wnie\u017c praca, za kt\u00f3r\u0105 nale\u017cy si\u0119 wynagrodzenie, a z drugiej stawiane jest pytanie o granic\u0119 mi\u0119dzy dostarczaniem nowych funkcji, a czasem po\u015bwi\u0119conym na inne aktywno\u015bci. Atmosfer\u0119 podgrzewa\u0142 jeszcze dysonans mi\u0119dzy zarobkami Hernego (g\u0142\u00f3wnego maintenera Babela) i pozosta\u0142ych deweloper\u00f3w (10000$ vs 2000$). Co prawda, wraz z publikacj\u0105 wspomnianej wy\u017cej notatki, og\u0142oszono r\u00f3wnie\u017c wyr\u00f3wnanie zarobk\u00f3w wszystkich os\u00f3b zaanga\u017cowanych w projekt, ale wielu zarzuca, \u017ce to w\u0142a\u015bnie niesprawiedliwy podzia\u0142 bud\u017cetu doprowadzi\u0142 do obecnej sytuacji.\n\nOd publikacji wspomnianego artyku\u0142u min\u0119\u0142o ju\u017c kilka miesi\u0119cy i wydaje si\u0119, \u017ce Babel przeszed\u0142 przez ten kryzys wizerunkowy bez szwanku. Obecnie z OpenCollective wynika, \u017ce projekt miesi\u0119cznie gromadzi oko\u0142o 20000$, a to w zupe\u0142no\u015bci wystarcza na op\u0142acenie trzech deweloper\u00f3w.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1578f87.gif\" alt=\"\" \/>\n\n<figcaption>Historia Babela bez dw\u00f3ch zda\u0144 zas\u0142uguje na tytu\u0142 frontendowej dramy roku.<\/figcaption><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-3\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/techcrunch.com\/2021\/06\/23\/vercel-raises-102m-series-c-for-its-next-js-based-front-end-development-platform\/\">https:\/\/techcrunch.com\/2021\/06\/23\/vercel-raises-102m-series-c-for-its-next-js-based-front-end-development-platform\/<\/a>\n<a href=\"https:\/\/deno.com\/blog\/the-deno-company\">https:\/\/deno.com\/blog\/the-deno-company<\/a>\n<a href=\"https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/\">https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/<\/a>\n<a href=\"https:\/\/babeljs.io\/blog\/2021\/05\/10\/funding-update.html\">https:\/\/babeljs.io\/blog\/2021\/05\/10\/funding-update.html<\/a>\n<a href=\"https:\/\/news.ycombinator.com\/item?id=27116357\">https:\/\/news.ycombinator.com\/item?id=27116357<\/a>\n<h1 id=\"5-kontrowersje-wok%C3%B3%C5%82-floc-i-supercookies\">5. Kontrowersje wok\u00f3\u0142 FLoC i Supercookies<\/h1>\nTemat Supercookies i FLoC to chyba najbardziej burzogenny temat ostatnich miesi\u0119cy. Pierwsze z tych tajemniczych okre\u015ble\u0144 zosta\u0142o ukute pocz\u0105tkiem roku przez Firefoxa i jest synonimem na ca\u0142y zbi\u00f3r sprytnych rozwi\u0105za\u0144 maj\u0105cych na celu \u015bledzenie interakcji u\u017cytkownika pomi\u0119dzy witrynami, zazwyczaj w celu lepszej personalizacji reklam (jako przyk\u0142ad Mozilla poda\u0142a wykorzystanie do tego cache\u2019u przegl\u0105darki). Na tym etapie wszystkie przegl\u0105darki, poza Chrome, chwal\u0105 si\u0119 specjalnym wsparcie dla blokowania Supercookies. Dlaczego Google zwleka z wprowadzeniem takiej funkcjonalno\u015bci? No c\u00f3\u017c, je\u015bli jednym z Waszych g\u0142\u00f3wnych \u017ar\u00f3de\u0142 dochodu by\u0142yby targetowane reklamy, to prawdopodobnie te\u017c kr\u0119ciliby\u015bcie nosem na takie rozwi\u0105zanie...\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb15a7f42.png\" alt=\"\" \/><\/figure>\nGoogle zdaje sobie jednak spraw\u0119 z trendu dbania o prywatno\u015b\u0107 w sieci i dlatego zaproponowa\u0142 swoj\u0105 alternatyw\u0119 dla Supercookies, czyli FLoC (Federated Learning of Cohorts). Algorytm ten po stronie klienta analizuje histori\u0119 przegl\u0105dania i przypisuje u\u017cytkownika do odpowiedniej kohorty. W ten spos\u00f3b dane o aktywno\u015bci u\u017cytkownika nigdy nie opuszczaj\u0105 jego przegl\u0105darki, a reklamodawcy nie trac\u0105 mo\u017cliwo\u015bci dobrego targetowania swoich reklam. Na papierze plan brzmi ca\u0142kiem nie\u017ale, ale je\u015bli zag\u0142\u0119bi\u0107 si\u0119 w szczeg\u00f3\u0142y, to okazuje si\u0119, \u017ce nie jest ju\u017c tak optymistycznie. Do tej pory, je\u015bli dana strona chcia\u0142a jednoznacznie zidentyfikowa\u0107 u\u017cytkownika, to prawdopodobnie musia\u0142a przeanalizowa\u0107 kilka milion\u00f3w rekord\u00f3w. Po wdro\u017ceniu nowego rozwi\u0105zania liczba ta zmniejszy si\u0119 do kilku tysi\u0119cy, bo strony b\u0119d\u0105 mog\u0142y odczyta\u0107 id kohorty i w ten spos\u00f3b mocno zaw\u0119zi\u0107 obszar poszukiwa\u0144. Ponadto, je\u015bli na stronie logujemy si\u0119 za pomoc\u0105 maila, to natychmiast b\u0119dzie ona w stanie powi\u0105za\u0107 nas z naszymi zainteresowaniami, a nawet zapisa\u0107 je u siebie na serwerze. FLoC domy\u015blnie analizuje r\u00f3wnie\u017c wszystkie strony na jakie wchodzimy (w tym te rz\u0105dowe czy powi\u0105zane z naszymi danymi zdrowotnymi), a nie tak jak to mia\u0142o miejsce do tej pory, gdzie \u015bledzeni byli\u015bmy tylko na stronach do kt\u00f3rych za\u0142\u0105czono odpowiedni skrypt of Google\u2019a albo Facebooka.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb16dece3.png\" alt=\"\" \/><\/figure>\nSw\u00f3j publiczny sprzeciw przeciwko FLoC wyrazi\u0142o sporo firm zajmuj\u0105cych si\u0119 prywatno\u015bci\u0105 (mi\u0119dzy innymi Brave i DuckDuckGo), a presja ze strony u\u017cytkownik\u00f3w zmusi\u0142a Google do odroczenia globalnego wdro\u017cenia algorytmu do swojej przegl\u0105darki do 2023 roku. Dodatkowy czas firma z Mountain View zamierza wykorzysta\u0107 na rozpocz\u0119ciu publicznych dyskusji dotycz\u0105cych prywatno\u015bci w kontek\u015bcie personalizacji reklam, jak i negocjacjach z innymi du\u017cymi graczami w \u015bwiecie przegl\u0105darek i e-commerce.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1807fd8.gif\" alt=\"\" \/>\n\n<figcaption>Je\u015bli ju\u017c nawet sam Google po cichu przyznaje, \u017ce FLoC ma swoje wady, to znaczy, \u017ce nad algorytmem naprawd\u0119 zacz\u0119\u0142y rozci\u0105ga\u0107 si\u0119 ciemne chmury. Ciekawe, jak Google wybrnie teraz z tego problemu.<\/figcaption><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-4\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/brave.com\/why-brave-disables-floc\/\">https:\/\/brave.com\/why-brave-disables-floc\/<\/a>\n<a href=\"https:\/\/www.eff.org\/deeplinks\/2021\/03\/googles-floc-terrible-idea\">https:\/\/www.eff.org\/deeplinks\/2021\/03\/googles-floc-terrible-idea<\/a>\n<a href=\"https:\/\/arstechnica.com\/gadgets\/2021\/06\/google-delays-floc-rollout-until-2023\/\">https:\/\/arstechnica.com\/gadgets\/2021\/06\/google-delays-floc-rollout-until-2023\/<\/a>\n<h1 id=\"6-hermes-dzia%C5%82a-na-ios\">6. Hermes dzia\u0142a na iOS<\/h1>\nW minionych dwunastu miesi\u0105cach otrzymali\u015bmy dwie nowe nowe wersje React Native (0.64 i 0.65), ale ci\u0119\u017cko doszukiwa\u0107 si\u0119 w nich rewolucji. Wi\u0119kszo\u015b\u0107 zmian dotyczy\u0142a usprawnie\u0144 wydajno\u015bci, accessibility, czy kompatybilno\u015bci z procesorami M1. W tym szarym \u0142ez padole znalaz\u0142a si\u0119 jednak jedna funkcja, kt\u00f3ra wzbudzi\u0142a sporo zamieszania: wsparcie dla silnika Hermes na urz\u0105dzeniach z systemem iOS.\n\nJe\u015bli \u017cyjecie poza ba\u0144k\u0105 React Native i nie kojarzycie Hermesa, to jest to silnik JavaScriptu od samego Facebooka, kt\u00f3ry ma redukowa\u0107 Time to Interactive, by\u0107 przystosowanym do urz\u0105dze\u0144 mobilnych i tworzony jest od pocz\u0105tku z my\u015bl\u0105 o dobrym wsparciu dla React Native. Jako przyk\u0142adowe usprawnienie niech pos\u0142u\u017cy nam dodany w ostatnim releasie Garbage Collector (o pasuj\u0105cej do konwencji nazwie Hades), kt\u00f3ry skraca faz\u0119 stop-the-world nawet 30 krotnie i zmniejsza zu\u017cycie procesora nawet o 50%.\n\nDlaczego jest to wa\u017cne wydarzenie? Ot\u00f3\u017c Apple od lat narzuca wszystkim rozwijany przez siebie silnik JavaScriptCore. Od tej regu\u0142y do tej pory nie by\u0142o wyj\u0105tk\u00f3w i nawet Chrome na mobilnych urz\u0105dzeniach z jab\u0142uszkiem pod spodem, u\u017cywa\u0142 silnika Safari. To co umo\u017cliwi\u0142o powstanie Hermesa na urz\u0105dzenia z iOS, to drobna zmiana w regulaminie AppStore m\u00f3wi\u0105ca, \u017ce ograniczenie dotyczy tylko interpretowanego kodu (Hermes pakowany jest do plik\u00f3w binarnych). Niestety nie oznacza to, \u017ce szybko zobaczymy na iPhonach Chrome z v8 (z drugiej strony mo\u017ce to i dobrze, bo Safari jest ostatni\u0105 przystani\u0105 powstrzymuj\u0105c\u0105 dominacj\u0119 v8 na rynku).\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1837c2d.gif\" alt=\"\" \/>\n\n<figcaption>Osoba odpowiedzialna za konwencj\u0119 nazewnicz\u0105 Hermes i Hadesa zdecydowanie zas\u0142uguje na podwy\u017ck\u0119<\/figcaption><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-5\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/reactnative.dev\/blog\/2021\/03\/12\/version-0.64\">https:\/\/reactnative.dev\/blog\/2021\/03\/12\/version-0.64<\/a>\n<a href=\"https:\/\/www.reddit.com\/r\/reactnative\/comments\/j8gzjz\/hermes_is_coming_to_ios\/\">https:\/\/www.reddit.com\/r\/reactnative\/comments\/j8gzjz\/hermes_is_coming_to_ios\/<\/a>\n<a href=\"https:\/\/reactnative.dev\/blog\/2021\/08\/17\/version-065\">https:\/\/reactnative.dev\/blog\/2021\/08\/17\/version-065<\/a>\n<a href=\"https:\/\/hermesengine.dev\/docs\/hades\/\">https:\/\/hermesengine.dev\/docs\/hades\/<\/a>\n<h1 id=\"7-internet-explorer-11-w-ko%C5%84cu-umiera\">7. Internet Explorer 11 w ko\u0144cu umiera<\/h1>\nProjekty og\u0142aszaj\u0105ce koniec wsparcia dla Internet Explorera 11 wyrasta\u0142y w tym roku, jak grzyby po deszczu. Angular oznaczy\u0142 wsparcie dla IE 11 jako deprecated i usunie je ca\u0142kowicie wraz z pojawieniem si\u0119 Angulara 13. Vue og\u0142osi\u0142o usuni\u0119cie ze swojej roadmapy dla wersji 3 implementacj\u0119 kompatybilno\u015bci z IE 11. Przed kilkoma tygodniami AWS og\u0142osi\u0142 koniec wsparcia dla IE 11 przez Amazon Web Services. List\u0119 zamyka sama firma matka przegl\u0105darki, kt\u00f3ra opr\u00f3cz og\u0142oszenia ko\u0144ca wsparcia dla IE 11 w produktach \u200b\u200bMicrosoft 365, og\u0142osi\u0142a r\u00f3wnie\u017c, \u017ce 15 czerwca 2022 roku 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!).\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1866764.png\" alt=\"\" \/><\/figure>\nJe\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.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1953cdf.png\" alt=\"\" \/><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-6\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/blogs.windows.com\/windowsexperience\/2021\/05\/19\/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge\/\">https:\/\/blogs.windows.com\/windowsexperience\/2021\/05\/19\/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge\/<\/a>\n<a href=\"https:\/\/github.com\/vuejs\/rfcs\/discussions\/296\">https:\/\/github.com\/vuejs\/rfcs\/discussions\/296<\/a>\n<a href=\"https:\/\/github.com\/angular\/angular\/issues\/41840\">https:\/\/github.com\/angular\/angular\/issues\/41840<\/a>\n<a href=\"https:\/\/aws.amazon.com\/blogs\/aws\/heads-up-aws-support-for-internet-explorer-11-is-ending\/\">https:\/\/aws.amazon.com\/blogs\/aws\/heads-up-aws-support-for-internet-explorer-11-is-ending\/<\/a>\n<h1 id=\"9-nodejs-w-przegl%C4%85darce-czyli-webcontainers\">9. Node.js w przegl\u0105darce, czyli WebContainers<\/h1>\nJak dzi\u015b pami\u0119tam, jak\u0105 fal\u0119 zainteresowania w sieci wzbudzi\u0142o og\u0142oszenie na Google I\/O przez StackBlitz WebContainers. Czym jest ta tajemnicza technologia? Ot\u00f3\u017c jest to \u015brodowiska uruchomieniowe Node.js, dzia\u0142aj\u0105ce ca\u0142kowicie w przegl\u0105darce i oparte g\u0142\u00f3wnie na WebAssembly. Do pe\u0142nego szcz\u0119\u015bcia potrzebne s\u0105 jeszcze integracje z systemem operacyjny i na tym polu nie jest idealnie, ale ludziom ze StackBlitz uda\u0142o si\u0119 dowie\u015b\u0107 ca\u0142kiem sporo (np. emulacja fs jest mo\u017cliwa dzi\u0119ki wykorzystaniu File System Access API). W architektur\u0119 rozwi\u0105zania uwik\u0142any jest te\u017c ServiceWorker, kt\u00f3ry przechwytuje odpowiednie requesty i przekierowuje je do naszego WebContainer (dzi\u0119ki jego obecno\u015bci ca\u0142e rozwi\u0105zanie dzia\u0142a r\u00f3wnie\u017c offline).\n\nW tej beczce miodu jest te\u017c niestety \u0142y\u017cka dziegciu (a nawet kilka!). Z poziomu WebContainers nie po\u0142\u0105czymy si\u0119 z baz\u0105 danych, bo przegl\u0105darki nie mog\u0105 komunikowa\u0107 si\u0119 za pomoc\u0105 niestandardowych protoko\u0142\u00f3w (tutaj zesp\u00f3\u0142 StackBlitz liczy na pojawienie si\u0119 w przysz\u0142o\u015bci w przegl\u0105darkach Native Sockets). Ponadto na ten moment WebContainers dzia\u0142aj\u0105 tylko w silnikach opartych na Chromium, wi\u0119c nie u\u015bwiadczymy ich chocia\u017cby na mobilnych urz\u0105dzeniach z jab\u0142uszkiem czy w Firefox (co mo\u017ce bole\u0107 podw\u00f3jnie, bo to w\u0142a\u015bnie Mozilla utrzymuje, zdaniem wielu, najlepszy silnik WASM). Opr\u00f3cz tego lista wspieranych framework\u00f3w jest raczej kr\u00f3tka, aczkolwiek trzeba przyzna\u0107, \u017ce zawiera chyba wszystkie najpopularniejsze opcje (Express.js, Koa, NestJS, Next.js, Nuxt) Je\u015bli WebContainers aspiruj\u0105 do zostania w pe\u0142ni funkcjonalnym \u015brodowiskiem deweloperskim, to przed nimi jeszcze d\u0142uga droga, ale jak na wersj\u0119 beta to jest naprawd\u0119 nie\u017ale.\n<h3 id=\"przeczytaj-wi%C4%99cej-7\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/blog.stackblitz.com\/posts\/introducing-webcontainers\/\">https:\/\/blog.stackblitz.com\/posts\/introducing-webcontainers\/<\/a>\n<a href=\"https:\/\/twitter.com\/stackblitz\/status\/1395409316270772224\">https:\/\/twitter.com\/stackblitz\/status\/1395409316270772224<\/a>\n<h1 id=\"9-tailwind-20-i-kompilator-jit-dla-tailwinda\">9. Tailwind 2.0 i kompilator JIT dla Tailwinda<\/h1>\nZdaniem wielu podej\u015bcie utilty-first idealnie pasuje do wsp\u00f3\u0142czesnych frontendowych framework\u00f3w i prawdopodobnie w\u0142a\u015bnie z tego powodu jego popularno\u015b\u0107 nieustannie ro\u015bnie Jak wynika z State of CSS 2020, jest to framework generuj\u0105cy najwi\u0119ksze zainteresowanie w swojej kategorii. Ponadto wzgl\u0119dem 2019 roku zaliczy\u0142 on wzrost o 20 punkt\u00f3w procentowych, je\u015bli chodzi o wdro\u017cenie na produkcj\u0119. Na tym etapie mo\u017cemy ju\u017c m\u00f3wi\u0107 o tym, \u017ce zast\u0105pi\u0142 on na tronie cssowych framework\u00f3w Bootstrapa.\n\nW listopadzie 2020 doczekali\u015bmy si\u0119 Tailwinda w wersji 2.0, a wraz z ni\u0105 mi\u0119dzy innymi rozszerzon\u0105 palet\u0119 kolor\u00f3w, nowy breakpoint dla najwi\u0119kszych ekran\u00f3w i wsparcie dla dark-mode. Na najciekawsze nowo\u015bci musieli\u015bmy jednak poczeka\u0107 do marca 2021 roku, kiedy to ukaza\u0142 si\u0119 kompilator Just-In-Time dla Tailwinda. Przy wykorzystaniu zwyk\u0142ego kompilatora do przegl\u0105darki dostarczany by\u0142 poka\u017any plik zawieraj\u0105cy ca\u0142ego Tailwinda (czasami maj\u0105cego nawet 10MB!). W trybie produkcyjnym natomiast standardem by\u0142o odchudzanie paczki przy pomocy PurgeCSS. Nowy Kompilator zupe\u0142nie zmienia to zachowanie i teraz zar\u00f3wno w trybie produkcyjnym, jak i deweloperskim wraz z dodaniem kolejnej klasy do elementu, dynamicznie pojawia\u0107 si\u0119 ona b\u0119dzie w wynikowych plikach styli. Nie wp\u0142ynie to znacz\u0105co na rozmiar bundla, ale za to poprawi developer experience - w trakcie developmentu przegl\u0105darka b\u0119dzie musia\u0142a obs\u0142ugiwa\u0107 o rz\u0105d wielko\u015bci mniejszy plik CSS. Nie s\u0105 to (niestety) jedyne zmiany, jakie wprowadza nowy kompilator. Nowy spos\u00f3b generowania klas umo\u017cliwia specyfikacj\u0119 jednostek w pikselach i kolor\u00f3w w postaci hexa. Jest to rozwi\u0105zanie niezwykle wygodne, ale wydaje si\u0119 r\u00f3wnie\u017c niepokoj\u0105co zbli\u017cone do inline styles. No c\u00f3\u017c, z wielk\u0105 moc\u0105 idzie wielka odpowiedzialno\u015b\u0107 - zobaczymy, czy programi\u015bci sprostaj\u0105 temu wyzwaniu.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1a015c5.png\" alt=\"\" \/><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-8\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/blog.tailwindcss.com\/just-in-time-the-next-generation-of-tailwind-css\">https:\/\/blog.tailwindcss.com\/just-in-time-the-next-generation-of-tailwind-css<\/a>\n<a href=\"https:\/\/blog.tailwindcss.com\/tailwindcss-v2\">https:\/\/blog.tailwindcss.com\/tailwindcss-v2<\/a>\n<h1 id=\"10-webpack-5\">10. Webpack 5<\/h1>\nWebpack od dawna jest bran\u017cowym standardem i pomimo rosn\u0105cej konkurencji (a szczeg\u00f3lnie ciekawie wygl\u0105da zw\u0142aszcza ta oparta o esbuild) na razie nic nie zapowiada jego schy\u0142ku. Prawie r\u00f3wno rok temu ukaza\u0142a si\u0119 d\u0142ugo oczekiwana wersja 5 tego narz\u0119dzia do pakowania aplikacji i gdyby\u015bmy mieli tutaj przyjrze\u0107 si\u0119 wszystkim nowo\u015bciom, jakie wprowadzono, to c\u00f3\u017c, prawdopodobnie musieliby\u015bmy dwukrotnie wyd\u0142u\u017cy\u0107 ten artyku\u0142 . W zwi\u0105zku z tym wspomn\u0119 tylko o jednej funkcjonalno\u015bci, o kt\u00f3rej na przestrzeni ostatniego roku by\u0142o najg\u0142o\u015bniej, a jest ni\u0105 Module Federation. Funkcjonalno\u015b\u0107 ta ma umo\u017cliwia\u0107 dynamiczne doczytanie innej aplikacji i wsp\u00f3\u0142dzielenie zale\u017cno\u015bci. Je\u015bli co\u015b Wam to przypomina to dobrze kombinujecie: Module Federation to feature zaprojektowany, aby wspiera\u0107 mikrofrontendy (kt\u00f3re swoj\u0105 drog\u0105 zas\u0142uguj\u0105 chyba na tytu\u0142 najgor\u0119tszego catch phrase zesz\u0142ego roku).\n\nWarto napomkn\u0105\u0107 r\u00f3wnie\u017c, \u017ce rynek szybko postanowi\u0142 nadgoni\u0107 standard i narz\u0119dzia daj\u0105ce wsparcie dla Webpacka 5 wyrasta\u0142y jak grzyby po deszczy (wspomnijmy chocia\u017cby Angulara czy Nexta). No i nie by\u0142o chyba takiej notatki o wsparciu dla Webpacka 5, w kt\u00f3rej nie wspomniano by o Module Federation i mikrofrontendach.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1a37329.jpg\" alt=\"\" \/><\/figure>\n<h2 id=\"przeczytaj-wi%C4%99cej-9\">Przeczytaj wi\u0119cej:<\/h2>\n<a href=\"https:\/\/webpack.js.org\/blog\/2020-10-10-webpack-5-release\/\">https:\/\/webpack.js.org\/blog\/2020-10-10-webpack-5-release\/<\/a>\n<a href=\"https:\/\/webpack.js.org\/concepts\/module-federation\/\">https:\/\/webpack.js.org\/concepts\/module-federation\/<\/a>\n<a href=\"https:\/\/scriptedalchemy.medium.com\/webpack-5-module-federation-stitching-two-simple-bundles-together-fe4e6a069716\">https:\/\/scriptedalchemy.medium.com\/webpack-5-module-federation-stitching-two-simple-bundles-together-fe4e6a069716<\/a>\n<a href=\"https:\/\/nextjs.org\/docs\/messages\/webpack5\">https:\/\/nextjs.org\/docs\/messages\/webpack5<\/a>\n<h1 id=\"11-mdn-web-docs-umiera-powstaje-open-web-docs\">11. MDN Web Docs umiera, powstaje Open Web Docs<\/h1>\nNie jest tajemnic\u0105, \u017ce Mozlilla w ostatnim okresie nie najlepiej radzi sobie, je\u015bli chodzi o kwestie finansowe. Skutkiem zaistnia\u0142ej sytuacji by\u0142y ci\u0119cia koszt\u00f3w, redukcje etat\u00f3w i przerzuceniem ludzi do rozwoju potencjalnie dochodowych produkt\u00f3w (takich jak na przyk\u0142ad niedawno opublikowany VPN wbudowany w Firefox). Na restrukturyzacji firmy ucierpia\u0142 niestety zesp\u00f3\u0142 odpowiedzialny za MDN Web Docs - dokumentacji, z kt\u00f3r\u0105 do czynienia mia\u0142 chyba ka\u017cdy deweloper.\n\n\u015awiat nienawidzi jednak pr\u00f3\u017cni i nied\u0142ugo po og\u0142oszeniu redukcji etat\u00f3w w Mozilli, \u015bwiat\u0142o dzienne ujrza\u0142o Open Web Docs. Nie dajcie si\u0119 zmyli\u0107 nazwie - to nie jest kolejna innowacyjna biblioteka, a organizacja, kt\u00f3ra za zadanie wzi\u0119\u0142a sobie wspieranie otwartych dokumentacji weba (w tym wspomnianego wcze\u015bniej MDN Web Docs). Open Web Docs do tej pory otrzyma\u0142o ju\u017c spory zastrzyk got\u00f3wki, bo opr\u00f3cz indywidualnych deweloper\u00f3w, finansowo wspar\u0142y j\u0105 Google, Microsoft i Facebook wp\u0142acaj\u0105c po 250 tysi\u0119cy dolar\u00f3w. Pozostaje tylko trzyma\u0107 kciuki za dalsze wsparcie od najwi\u0119kszych graczy i czeka\u0107 na rezultaty pracy - w ko\u0144cu dobrej dokumentacji nigdy za wiele.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128bb1a6453d.png\" alt=\"\" \/><\/figure>\n<h3 id=\"przeczytaj-wi%C4%99cej-10\">Przeczytaj wi\u0119cej:<\/h3>\n<a href=\"https:\/\/opencollective.com\/open-web-docs#category-ABOUT\">https:\/\/opencollective.com\/open-web-docs#category-ABOUT<\/a>"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/comments?post=10092"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10092\/revisions"}],"predecessor-version":[{"id":10625,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10092\/revisions\/10625"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}