{"id":10127,"date":"2021-06-10T14:30:00","date_gmt":"2021-06-10T12:30:00","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-41\/"},"modified":"2022-09-19T13:16:41","modified_gmt":"2022-09-19T11:16:41","slug":"frontend-thursday-vol-41","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/","title":{"rendered":"Frontend Thursday vol. 41"},"content":{"rendered":"

1. Plany dla React 18<\/h1>\n

Je\u015bli por\u00f3wna\u0107 ilo\u015b\u0107 tre\u015bci z oficjalnych kana\u0142\u00f3w Angulara i Reacta, to nie spos\u00f3b nie uzna\u0107, \u017ce to w\u0142a\u015bnie framework od Google rozwija si\u0119 ostatnio pr\u0119\u017cniej. Je\u015bli natomiast przyjrze\u0107 si\u0119 sprawie g\u0142\u0119biej to okazuje si\u0119, \u017ce publikacje dotycz\u0105ce Reacta pojawiaj\u0105 si\u0119 rzadziej, ale jak ju\u017c si\u0119 pojawiaj\u0105 to zazwyczaj s\u0105 to niez\u0142e bomby. Nie inaczej jest i tym razem, bo po nijakim React 17, w tym tygodniu og\u0142oszona zosta\u0142a alfa Reacta 18, a wraz z ni\u0105 kilka naprawd\u0119 ciekawych nowo\u015bci.<\/p>\n

\"\"
Autor Frontendowego Czwartku dowiaduj\u0105cy si\u0119, \u017ce po p\u00f3\u0142 roku posuchy w \u015brodowisku Reacta wydarzy\u0142o si\u0119 co\u015b ciekawego<\/figcaption><\/figure>\n

Zanim przejdziemy do konkret\u00f3w zatrzymajmy jeszcze si\u0119 na chwil\u0119 przy zmianach dotycz\u0105cych community i rozwoju biblioteki. Nowej wersji Reacta towarzyszy powstanie 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. Dyskusje odbywa\u0107 si\u0119 b\u0119d\u0105 w ramach Github Discussions i na ten moment skupiaj\u0105 si\u0119 one wok\u00f3\u0142 og\u0142oszonej w\u0142a\u015bnie wersji alfa.<\/p>\n

\"\"
Przegl\u0105da\u0142em sobie pobie\u017cnie dyskusje tocz\u0105ce si\u0119 na React Working Group i musz\u0119 przyzna\u0107, \u017ce na ten moment ci\u0119\u017cko tam znale\u017a\u0107 pytania bez odpowiedzi, a w wi\u0119kszo\u015bci w\u0105tk\u00f3w udzielaj\u0105 si\u0119 znane nazwiska ze \u015brodowiska<\/figcaption><\/figure>\n

Co ciekawego znajdziemy w nowym Reactie? Lista nowo\u015bci jest kr\u00f3tka (blogpost og\u0142aszaj\u0105cy alf\u0119 skupia si\u0119 tylko na trzech), dlatego postaram si\u0119 pokr\u00f3tce przygl\u0105dn\u0105\u0107 im wszystkim. Zacznijmy od zmiany, kt\u00f3ra zaskoczy\u0142a mnie w negatywny spos\u00f3b, bo by\u0142em pewny, \u017ce React od dawna posiada tak\u0105 funkcjonalno\u015b\u0107. Jak si\u0119 okazuje, do tej pory React by\u0142 w stanie zagregowa\u0107 \u00a0kilka aktualizacji stanu w jednym renderze, ale tylko je\u015bli by\u0142y one wywo\u0142ane w ramach obs\u0142ugi przegl\u0105darkowych zdarze\u0144. Oznacza to, \u017ce je\u015bli wewn\u0105trz setTimeout lub then wywo\u0142ywali\u015bcie dwa setState to skutkowa\u0142o to dwoma renderami. No c\u00f3\u017c, na szcz\u0119\u015bcie od wersji 18 domy\u015blnie wszystkie aktualizacje b\u0119d\u0105 grupowane, a poprzednie zachowanie wymusi\u0107 b\u0119dzie mo\u017cna poprzez opakowanie setState w flushSync.<\/p>\n

function App() {\n  const [count, setCount] = useState(0);\n  const [flag, setFlag] = useState(false);\n  function handleClick() {\n    fetchSomething().then(() => {\n      setCount(c => c + 1); \/\/ In React 17 this causes a re-render\n      setFlag(f => !f); \/\/ In React 17 this causes a re-render\n      \/\/ React 18 and later will only re-render once at the end (that's batching!)\n    });\n  }\n  return (\n    <div>\n      <button onClick={handleClick}>Next<\/button>\n      <h1 style={{ color: flag ? "blue" : "black" }}>{count}<\/h1>\n    <\/div>\n  );<\/code><\/pre>\n
Kolejna nowo\u015b\u0107 na szcz\u0119\u015bcie zaskakuje w du\u017co bardziej pozytywny spos\u00f3b. Nowa metoda startTransition umo\u017cliwia zgrupowanie zmian, kt\u00f3re wymagaj\u0105 skomplikowanego re-renderu i wykonania ich nie blokuj\u0105c interakcji u\u017cytkownika ze stron\u0105. Co ciekawe je\u015bli startTransition zostanie wywo\u0142ane po raz kolejny zanim poprzednie wywo\u0142anie zostanie zako\u0144czone to React automatycznie anuluje t\u0105 starsz\u0105 tranzycj\u0119.<\/p>\n
import { startTransition } from 'react';\n\/\/ Urgent: Show what was typed\nsetInputValue(input);\n\/\/ Mark any state updates inside as transitions\nstartTransition(() => {\n  \/\/ Transition: Show the results\n  setSearchQuery(input);\n});\n<\/code><\/pre>\n
Na koniec zostawi\u0142em sobie moim zdaniem najwi\u0119ksz\u0105 bomb\u0119, czyli wsparcie Suspense w SSR. Jak ma to dzia\u0142a\u0107? Do tej pory SSR odbywa\u0142 si\u0119 w nast\u0119puj\u0105cych synchronicznych krokach: za\u0142aduj potrzebne dane, wyrenderuj HTML i prze\u015blij go do przegl\u0105darki, za\u0142aduj JavaScript, w\u0142\u0105cz JavaScript z za\u0142adowanym HTML\u2019em. W takim modelu wolno odpowiadaj\u0105ce API, lub spory bundle JavaScriptu powodowa\u0142 op\u00f3\u017anienia dla u\u017cytkownika. Od React 18, wykorzystuj\u0105c Suspens b\u0119dziemy mogli podzieli\u0107 nasze strony na mniejsze cz\u0119\u015bci, dla kt\u00f3rych cykl ten odbywa\u0142 si\u0119 b\u0119dzie niezale\u017cnie. Oznacza to, \u017ce przyk\u0142adowo wolne API do wczytywania komentarzy nie spowolni pojawienia si\u0119 tre\u015bci artyku\u0142u, a spory bundle dotycz\u0105cy paska nawigacji nie odsunie w czasie momentu, kiedy sekcja komentarzy stanie si\u0119 interaktywna.<\/p>\n
<Layout>\n  <NavBar \/>\n  <Suspense fallback={<BigSpinner \/>}>\n    <Suspense fallback={<SidebarGlimmer \/>}>\n      <Sidebar \/>\n    <\/Suspense>\n    <RightPane>\n      <Post \/>\n      <Suspense fallback={<CommentsGlimmer \/>}>\n        <Comments \/>\n      <\/Suspense>\n    <\/RightPane>\n  <\/Suspense>\n<\/Layout><\/code><\/pre>\n
Musz\u0119 przyzna\u0107, \u017ce przez ostatnie miesi\u0105ce troch\u0119 szyderczo patrzy\u0142em na tempo rozwoju React. Teraz React jednym blogpostem sprawi\u0142, \u017ce czuj\u0119 si\u0119 g\u0142upio bo przegl\u0105daj\u0105c nowo\u015bci dotycz\u0105ce Angulara z perspektywy czasu zdaj\u0105 si\u0119 jako\u015b wyj\u0105tkowo\u2026 b\u0142ahe.<\/p>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/reactjs.org\/blog\/2021\/06\/08\/the-plan-for-react-18.html<\/a>
\nhttps:\/\/github.com\/reactwg\/react-18\/discussions\/21<\/a>
\nhttps:\/\/github.com\/reactwg\/react-18\/discussions\/41<\/a>
\nhttps:\/\/github.com\/reactwg\/react-18\/discussions\/37<\/a>
\nhttps:\/\/github.com\/reactwg\/react-18<\/a><\/p>\n
2. Safari og\u0142asza wsparcie dla WebExtensions<\/h2>\n
W minionym tygodniu mia\u0142o miejsce WWDC, czyli ma\u0142e \u015bwi\u0119to wszystkich kochaj\u0105cych urz\u0105dzenia z jab\u0142kiem. Co prawda nie zapowiedziano oczekiwanych przez wszystkich nowych procesor\u00f3w z serii M, ale pojawi\u0142o si\u0119 kilka ciekawych og\u0142osze\u0144 (o kt\u00f3rych wi\u0119cej b\u0119dziecie mogli przeczyta\u0107 zapewne w naszej sobotniej edycji przegl\u0105du). Te kt\u00f3re interesuj\u0105 nas najbardziej to oczywi\u015bcie zmiany zmierzaj\u0105ce do Safari i WebKita.<\/p>\n
\"\"
Bez tego Pana konferencja Apple to ju\u017c nie to samo, ale trzeba przyzna\u0107, \u017ce od jakiego\u015b czasu przed ka\u017cdy ich eventem internet zapiera oddech w oczekiwaniu na to co zostanie pokazane<\/figcaption><\/figure>\n
W\u015br\u00f3d og\u0142oszonych nowo\u015bci szczeg\u00f3lnie wybija si\u0119 dodanie w Safari wsparcia dla WebExtenstion. Nie by\u0142oby w tym nic zaskakuj\u0105cego, gdyby nie fakt, \u017ce nowy format rozszerze\u0144 w odr\u00f3\u017cnieniu od obecnego AppExtensions, dost\u0119pny b\u0119dzie r\u00f3wnie\u017c na iPhonach i iPadach. Jest to o tyle ciekawe, \u017ce kilka dni po zapowiedzi ze strony Apple, powsta\u0142o WebExtensions Community Group Charter, w kt\u00f3rego sk\u0142adzie znajdziemy ludzi zar\u00f3wno z Apple jak i Google i kt\u00f3re to odpowiedzialne b\u0119dzie za wypracowanie wsp\u00f3lnego API. Je\u015bli WebExtensions pojawi\u0105 si\u0119 wkr\u00f3tce w Chrome to by\u0107 mo\u017ce po raz pierwszy mo\u017cliwe b\u0119dzie tworzenie mi\u0119dzy przegl\u0105darkowych rozszerze\u0144. A, no i dla u\u017cytkownik\u00f3w Safari wsp\u00f3\u0142dzielenie rozszerze\u0144 mi\u0119dzy urz\u0105dzeniami brzmi jak feature, kt\u00f3ry mo\u017ce w ko\u0144cu sk\u0142oni mnie do spr\u00f3bowania tej szata\u0144skiej przegl\u0105darki.<\/p>\n
Je\u015bli chodzi o pozosta\u0142e nowo\u015bci to raczej ci\u0119\u017cko doszuka\u0107 si\u0119 tutaj ju\u017c wi\u0119kszych sensacji. Mamy tutaj troch\u0119 usprawnie\u0144 dla automatycznego uzupe\u0142niania hase\u0142, troch\u0119 usprawnie\u0144 dla WebAssembly i generalnie ca\u0142kiem d\u0142ug\u0105 list\u0119 drobnych nowo\u015bci. Pe\u0142ne release notes Safari znajdziecie poni\u017cej, a ja je\u015bli mia\u0142bym wskaza\u0107 najbardziej oczekiwane przeze mnie zmiany to by\u0142yby to wsparcie dla aspect-ratio i top level await. No c\u00f3\u017c, nie bez przyczyna Safari nazywane jest wsp\u00f3\u0142czesnym Internet Explorerem \ud83d\ude09<\/p>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/webkit.org\/blog\/11700\/webkit-features-in-safari-at-wwdc21\/<\/a>
\nhttps:\/\/github.com\/w3c\/webextensions\/blob\/main\/charter.md#webextensions<\/a>
\nhttps:\/\/developer.apple.com\/documentation\/safari-release-notes\/safari-15-beta-release-notes<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
W tym tygodniu mamy dla Was plany na nowego Reacta i odrobin\u0119 nowo\u015bci z ostatniego WWDC.<\/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-10127","post","type-post","status-publish","format-standard","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"estimated_reading_time":"5"},"yoast_head":"\nFrontend Thursday vol. 41 - 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-41\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 41 - Vived\" \/>\n<meta property=\"og:description\" content=\"W tym tygodniu mamy dla Was plany na nowego Reacta i odrobin\u0119 nowo\u015bci z ostatniego WWDC.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-10T12:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097f206e8.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-41\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 41\",\"datePublished\":\"2021-06-10T12:30:00+00:00\",\"dateModified\":\"2022-09-19T11:16:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/\"},\"wordCount\":1017,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097f206e8.gif\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/\",\"name\":\"Frontend Thursday vol. 41 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097f206e8.gif\",\"datePublished\":\"2021-06-10T12:30:00+00:00\",\"dateModified\":\"2022-09-19T11:16:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097f206e8.gif\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097f206e8.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 41\"}]},{\"@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. 41 - 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-41\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 41 - Vived","og_description":"W tym tygodniu mamy dla Was plany na nowego Reacta i odrobin\u0119 nowo\u015bci z ostatniego WWDC.","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/","og_site_name":"Vived","article_published_time":"2021-06-10T12:30:00+00:00","article_modified_time":"2022-09-19T11:16:41+00:00","og_image":[{"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097f206e8.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-41\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 41","datePublished":"2021-06-10T12:30:00+00:00","dateModified":"2022-09-19T11:16:41+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/"},"wordCount":1017,"commentCount":0,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097f206e8.gif","articleSection":["Frontend"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/","name":"Frontend Thursday vol. 41 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097f206e8.gif","datePublished":"2021-06-10T12:30:00+00:00","dateModified":"2022-09-19T11:16:41+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097f206e8.gif","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097f206e8.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-41\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 41"}]},{"@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":"<h1 id=\"1-plany-dla-react-18\">1. Plany dla React 18<\/h1>\nJe\u015bli por\u00f3wna\u0107 ilo\u015b\u0107 tre\u015bci z oficjalnych kana\u0142\u00f3w Angulara i Reacta, to nie spos\u00f3b nie uzna\u0107, \u017ce to w\u0142a\u015bnie framework od Google rozwija si\u0119 ostatnio pr\u0119\u017cniej. Je\u015bli natomiast przyjrze\u0107 si\u0119 sprawie g\u0142\u0119biej to okazuje si\u0119, \u017ce publikacje dotycz\u0105ce Reacta pojawiaj\u0105 si\u0119 rzadziej, ale jak ju\u017c si\u0119 pojawiaj\u0105 to zazwyczaj s\u0105 to niez\u0142e bomby. Nie inaczej jest i tym razem, bo po nijakim React 17, w tym tygodniu og\u0142oszona zosta\u0142a alfa Reacta 18, a wraz z ni\u0105 kilka naprawd\u0119 ciekawych nowo\u015bci.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image aligncenter\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097f206e8.gif\" alt=\"\" \/>\n<figcaption>Autor Frontendowego Czwartku dowiaduj\u0105cy si\u0119, \u017ce po p\u00f3\u0142 roku posuchy w \u015brodowisku Reacta wydarzy\u0142o si\u0119 co\u015b ciekawego<\/figcaption><\/figure>\nZanim przejdziemy do konkret\u00f3w zatrzymajmy jeszcze si\u0119 na chwil\u0119 przy zmianach dotycz\u0105cych community i rozwoju biblioteki. Nowej wersji Reacta towarzyszy powstanie 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. Dyskusje odbywa\u0107 si\u0119 b\u0119d\u0105 w ramach Github Discussions i na ten moment skupiaj\u0105 si\u0119 one wok\u00f3\u0142 og\u0142oszonej w\u0142a\u015bnie wersji alfa.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image aligncenter\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097fcdbb2.gif\" alt=\"\" \/>\n\n<figcaption>Przegl\u0105da\u0142em sobie pobie\u017cnie dyskusje tocz\u0105ce si\u0119 na React Working Group i musz\u0119 przyzna\u0107, \u017ce na ten moment ci\u0119\u017cko tam znale\u017a\u0107 pytania bez odpowiedzi, a w wi\u0119kszo\u015bci w\u0105tk\u00f3w udzielaj\u0105 si\u0119 znane nazwiska ze \u015brodowiska<\/figcaption><\/figure>\nCo ciekawego znajdziemy w nowym Reactie? Lista nowo\u015bci jest kr\u00f3tka (blogpost og\u0142aszaj\u0105cy alf\u0119 skupia si\u0119 tylko na trzech), dlatego postaram si\u0119 pokr\u00f3tce przygl\u0105dn\u0105\u0107 im wszystkim. Zacznijmy od zmiany, kt\u00f3ra zaskoczy\u0142a mnie w negatywny spos\u00f3b, bo by\u0142em pewny, \u017ce React od dawna posiada tak\u0105 funkcjonalno\u015b\u0107. Jak si\u0119 okazuje, do tej pory React by\u0142 w stanie zagregowa\u0107 \u00a0kilka aktualizacji stanu w jednym renderze, ale tylko je\u015bli by\u0142y one wywo\u0142ane w ramach obs\u0142ugi przegl\u0105darkowych zdarze\u0144. Oznacza to, \u017ce je\u015bli wewn\u0105trz setTimeout lub then wywo\u0142ywali\u015bcie dwa setState to skutkowa\u0142o to dwoma renderami. No c\u00f3\u017c, na szcz\u0119\u015bcie od wersji 18 domy\u015blnie wszystkie aktualizacje b\u0119d\u0105 grupowane, a poprzednie zachowanie wymusi\u0107 b\u0119dzie mo\u017cna poprzez opakowanie setState w flushSync.\n<pre><code class=\"language-ts\">function App() {\n  const [count, setCount] = useState(0);\n  const [flag, setFlag] = useState(false);\n  function handleClick() {\n    fetchSomething().then(() => {\n      setCount(c => c + 1); \/\/ In React 17 this causes a re-render\n      setFlag(f => !f); \/\/ In React 17 this causes a re-render\n      \/\/ React 18 and later will only re-render once at the end (that's batching!)\n    });\n  }\n  return (\n    <div>\n      <button onClick={handleClick}>Next<\/button>\n      <h1 style={{ color: flag ? \"blue\" : \"black\" }}>{count}<\/h1>\n    <\/div>\n  );<\/code><\/pre>\nKolejna nowo\u015b\u0107 na szcz\u0119\u015bcie zaskakuje w du\u017co bardziej pozytywny spos\u00f3b. Nowa metoda startTransition umo\u017cliwia zgrupowanie zmian, kt\u00f3re wymagaj\u0105 skomplikowanego re-renderu i wykonania ich nie blokuj\u0105c interakcji u\u017cytkownika ze stron\u0105. Co ciekawe je\u015bli startTransition zostanie wywo\u0142ane po raz kolejny zanim poprzednie wywo\u0142anie zostanie zako\u0144czone to React automatycznie anuluje t\u0105 starsz\u0105 tranzycj\u0119.\n<pre><code class=\"language-ts\">import { startTransition } from 'react';\n\/\/ Urgent: Show what was typed\nsetInputValue(input);\n\/\/ Mark any state updates inside as transitions\nstartTransition(() => {\n  \/\/ Transition: Show the results\n  setSearchQuery(input);\n});\n<\/code><\/pre>\nNa koniec zostawi\u0142em sobie moim zdaniem najwi\u0119ksz\u0105 bomb\u0119, czyli wsparcie Suspense w SSR. Jak ma to dzia\u0142a\u0107? Do tej pory SSR odbywa\u0142 si\u0119 w nast\u0119puj\u0105cych synchronicznych krokach: za\u0142aduj potrzebne dane, wyrenderuj HTML i prze\u015blij go do przegl\u0105darki, za\u0142aduj JavaScript, w\u0142\u0105cz JavaScript z za\u0142adowanym HTML\u2019em. W takim modelu wolno odpowiadaj\u0105ce API, lub spory bundle JavaScriptu powodowa\u0142 op\u00f3\u017anienia dla u\u017cytkownika. Od React 18, wykorzystuj\u0105c Suspens b\u0119dziemy mogli podzieli\u0107 nasze strony na mniejsze cz\u0119\u015bci, dla kt\u00f3rych cykl ten odbywa\u0142 si\u0119 b\u0119dzie niezale\u017cnie. Oznacza to, \u017ce przyk\u0142adowo wolne API do wczytywania komentarzy nie spowolni pojawienia si\u0119 tre\u015bci artyku\u0142u, a spory bundle dotycz\u0105cy paska nawigacji nie odsunie w czasie momentu, kiedy sekcja komentarzy stanie si\u0119 interaktywna.\n<pre><code class=\"language-ts\"><Layout>\n  <NavBar \/>\n  <Suspense fallback={<BigSpinner \/>}>\n    <Suspense fallback={<SidebarGlimmer \/>}>\n      <Sidebar \/>\n    <\/Suspense>\n    <RightPane>\n      <Post \/>\n      <Suspense fallback={<CommentsGlimmer \/>}>\n        <Comments \/>\n      <\/Suspense>\n    <\/RightPane>\n  <\/Suspense>\n<\/Layout><\/code><\/pre>\nMusz\u0119 przyzna\u0107, \u017ce przez ostatnie miesi\u0105ce troch\u0119 szyderczo patrzy\u0142em na tempo rozwoju React. Teraz React jednym blogpostem sprawi\u0142, \u017ce czuj\u0119 si\u0119 g\u0142upio bo przegl\u0105daj\u0105c nowo\u015bci dotycz\u0105ce Angulara z perspektywy czasu zdaj\u0105 si\u0119 jako\u015b wyj\u0105tkowo\u2026 b\u0142ahe.\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a:<\/h3>\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<a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/21\">https:\/\/github.com\/reactwg\/react-18\/discussions\/21<\/a>\n<a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/41\">https:\/\/github.com\/reactwg\/react-18\/discussions\/41<\/a>\n<a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/37\">https:\/\/github.com\/reactwg\/react-18\/discussions\/37<\/a>\n<a href=\"https:\/\/github.com\/reactwg\/react-18\">https:\/\/github.com\/reactwg\/react-18<\/a>\n<h2 id=\"2-safari-og%C5%82asza-wsparcie-dla-webextensions\">2. Safari og\u0142asza wsparcie dla WebExtensions<\/h2>\nW minionym tygodniu mia\u0142o miejsce WWDC, czyli ma\u0142e \u015bwi\u0119to wszystkich kochaj\u0105cych urz\u0105dzenia z jab\u0142kiem. Co prawda nie zapowiedziano oczekiwanych przez wszystkich nowych procesor\u00f3w z serii M, ale pojawi\u0142o si\u0119 kilka ciekawych og\u0142osze\u0144 (o kt\u00f3rych wi\u0119cej b\u0119dziecie mogli przeczyta\u0107 zapewne w naszej sobotniej edycji przegl\u0105du). Te kt\u00f3re interesuj\u0105 nas najbardziej to oczywi\u015bcie zmiany zmierzaj\u0105ce do Safari i WebKita.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image aligncenter\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d09809dcae.gif\" alt=\"\" \/>\n\n<figcaption>Bez tego Pana konferencja Apple to ju\u017c nie to samo, ale trzeba przyzna\u0107, \u017ce od jakiego\u015b czasu przed ka\u017cdy ich eventem internet zapiera oddech w oczekiwaniu na to co zostanie pokazane<\/figcaption><\/figure>\nW\u015br\u00f3d og\u0142oszonych nowo\u015bci szczeg\u00f3lnie wybija si\u0119 dodanie w Safari wsparcia dla WebExtenstion. Nie by\u0142oby w tym nic zaskakuj\u0105cego, gdyby nie fakt, \u017ce nowy format rozszerze\u0144 w odr\u00f3\u017cnieniu od obecnego AppExtensions, dost\u0119pny b\u0119dzie r\u00f3wnie\u017c na iPhonach i iPadach. Jest to o tyle ciekawe, \u017ce kilka dni po zapowiedzi ze strony Apple, powsta\u0142o WebExtensions Community Group Charter, w kt\u00f3rego sk\u0142adzie znajdziemy ludzi zar\u00f3wno z Apple jak i Google i kt\u00f3re to odpowiedzialne b\u0119dzie za wypracowanie wsp\u00f3lnego API. Je\u015bli WebExtensions pojawi\u0105 si\u0119 wkr\u00f3tce w Chrome to by\u0107 mo\u017ce po raz pierwszy mo\u017cliwe b\u0119dzie tworzenie mi\u0119dzy przegl\u0105darkowych rozszerze\u0144. A, no i dla u\u017cytkownik\u00f3w Safari wsp\u00f3\u0142dzielenie rozszerze\u0144 mi\u0119dzy urz\u0105dzeniami brzmi jak feature, kt\u00f3ry mo\u017ce w ko\u0144cu sk\u0142oni mnie do spr\u00f3bowania tej szata\u0144skiej przegl\u0105darki.\n\nJe\u015bli chodzi o pozosta\u0142e nowo\u015bci to raczej ci\u0119\u017cko doszuka\u0107 si\u0119 tutaj ju\u017c wi\u0119kszych sensacji. Mamy tutaj troch\u0119 usprawnie\u0144 dla automatycznego uzupe\u0142niania hase\u0142, troch\u0119 usprawnie\u0144 dla WebAssembly i generalnie ca\u0142kiem d\u0142ug\u0105 list\u0119 drobnych nowo\u015bci. Pe\u0142ne release notes Safari znajdziecie poni\u017cej, a ja je\u015bli mia\u0142bym wskaza\u0107 najbardziej oczekiwane przeze mnie zmiany to by\u0142yby to wsparcie dla aspect-ratio i top level await. No c\u00f3\u017c, nie bez przyczyna Safari nazywane jest wsp\u00f3\u0142czesnym Internet Explorerem ;)\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/webkit.org\/blog\/11700\/webkit-features-in-safari-at-wwdc21\/\">https:\/\/webkit.org\/blog\/11700\/webkit-features-in-safari-at-wwdc21\/<\/a>\n<a href=\"https:\/\/github.com\/w3c\/webextensions\/blob\/main\/charter.md#webextensions\">https:\/\/github.com\/w3c\/webextensions\/blob\/main\/charter.md#webextensions<\/a>\n<a href=\"https:\/\/developer.apple.com\/documentation\/safari-release-notes\/safari-15-beta-release-notes\">https:\/\/developer.apple.com\/documentation\/safari-release-notes\/safari-15-beta-release-notes<\/a>","innerContent":["<h1 id=\"1-plany-dla-react-18\">1. Plany dla React 18<\/h1>\nJe\u015bli por\u00f3wna\u0107 ilo\u015b\u0107 tre\u015bci z oficjalnych kana\u0142\u00f3w Angulara i Reacta, to nie spos\u00f3b nie uzna\u0107, \u017ce to w\u0142a\u015bnie framework od Google rozwija si\u0119 ostatnio pr\u0119\u017cniej. Je\u015bli natomiast przyjrze\u0107 si\u0119 sprawie g\u0142\u0119biej to okazuje si\u0119, \u017ce publikacje dotycz\u0105ce Reacta pojawiaj\u0105 si\u0119 rzadziej, ale jak ju\u017c si\u0119 pojawiaj\u0105 to zazwyczaj s\u0105 to niez\u0142e bomby. Nie inaczej jest i tym razem, bo po nijakim React 17, w tym tygodniu og\u0142oszona zosta\u0142a alfa Reacta 18, a wraz z ni\u0105 kilka naprawd\u0119 ciekawych nowo\u015bci.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image aligncenter\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097f206e8.gif\" alt=\"\" \/>\n<figcaption>Autor Frontendowego Czwartku dowiaduj\u0105cy si\u0119, \u017ce po p\u00f3\u0142 roku posuchy w \u015brodowisku Reacta wydarzy\u0142o si\u0119 co\u015b ciekawego<\/figcaption><\/figure>\nZanim przejdziemy do konkret\u00f3w zatrzymajmy jeszcze si\u0119 na chwil\u0119 przy zmianach dotycz\u0105cych community i rozwoju biblioteki. Nowej wersji Reacta towarzyszy powstanie 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. Dyskusje odbywa\u0107 si\u0119 b\u0119d\u0105 w ramach Github Discussions i na ten moment skupiaj\u0105 si\u0119 one wok\u00f3\u0142 og\u0142oszonej w\u0142a\u015bnie wersji alfa.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image aligncenter\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d097fcdbb2.gif\" alt=\"\" \/>\n\n<figcaption>Przegl\u0105da\u0142em sobie pobie\u017cnie dyskusje tocz\u0105ce si\u0119 na React Working Group i musz\u0119 przyzna\u0107, \u017ce na ten moment ci\u0119\u017cko tam znale\u017a\u0107 pytania bez odpowiedzi, a w wi\u0119kszo\u015bci w\u0105tk\u00f3w udzielaj\u0105 si\u0119 znane nazwiska ze \u015brodowiska<\/figcaption><\/figure>\nCo ciekawego znajdziemy w nowym Reactie? Lista nowo\u015bci jest kr\u00f3tka (blogpost og\u0142aszaj\u0105cy alf\u0119 skupia si\u0119 tylko na trzech), dlatego postaram si\u0119 pokr\u00f3tce przygl\u0105dn\u0105\u0107 im wszystkim. Zacznijmy od zmiany, kt\u00f3ra zaskoczy\u0142a mnie w negatywny spos\u00f3b, bo by\u0142em pewny, \u017ce React od dawna posiada tak\u0105 funkcjonalno\u015b\u0107. Jak si\u0119 okazuje, do tej pory React by\u0142 w stanie zagregowa\u0107 \u00a0kilka aktualizacji stanu w jednym renderze, ale tylko je\u015bli by\u0142y one wywo\u0142ane w ramach obs\u0142ugi przegl\u0105darkowych zdarze\u0144. Oznacza to, \u017ce je\u015bli wewn\u0105trz setTimeout lub then wywo\u0142ywali\u015bcie dwa setState to skutkowa\u0142o to dwoma renderami. No c\u00f3\u017c, na szcz\u0119\u015bcie od wersji 18 domy\u015blnie wszystkie aktualizacje b\u0119d\u0105 grupowane, a poprzednie zachowanie wymusi\u0107 b\u0119dzie mo\u017cna poprzez opakowanie setState w flushSync.\n<pre><code class=\"language-ts\">function App() {\n  const [count, setCount] = useState(0);\n  const [flag, setFlag] = useState(false);\n  function handleClick() {\n    fetchSomething().then(() => {\n      setCount(c => c + 1); \/\/ In React 17 this causes a re-render\n      setFlag(f => !f); \/\/ In React 17 this causes a re-render\n      \/\/ React 18 and later will only re-render once at the end (that's batching!)\n    });\n  }\n  return (\n    <div>\n      <button onClick={handleClick}>Next<\/button>\n      <h1 style={{ color: flag ? \"blue\" : \"black\" }}>{count}<\/h1>\n    <\/div>\n  );<\/code><\/pre>\nKolejna nowo\u015b\u0107 na szcz\u0119\u015bcie zaskakuje w du\u017co bardziej pozytywny spos\u00f3b. Nowa metoda startTransition umo\u017cliwia zgrupowanie zmian, kt\u00f3re wymagaj\u0105 skomplikowanego re-renderu i wykonania ich nie blokuj\u0105c interakcji u\u017cytkownika ze stron\u0105. Co ciekawe je\u015bli startTransition zostanie wywo\u0142ane po raz kolejny zanim poprzednie wywo\u0142anie zostanie zako\u0144czone to React automatycznie anuluje t\u0105 starsz\u0105 tranzycj\u0119.\n<pre><code class=\"language-ts\">import { startTransition } from 'react';\n\/\/ Urgent: Show what was typed\nsetInputValue(input);\n\/\/ Mark any state updates inside as transitions\nstartTransition(() => {\n  \/\/ Transition: Show the results\n  setSearchQuery(input);\n});\n<\/code><\/pre>\nNa koniec zostawi\u0142em sobie moim zdaniem najwi\u0119ksz\u0105 bomb\u0119, czyli wsparcie Suspense w SSR. Jak ma to dzia\u0142a\u0107? Do tej pory SSR odbywa\u0142 si\u0119 w nast\u0119puj\u0105cych synchronicznych krokach: za\u0142aduj potrzebne dane, wyrenderuj HTML i prze\u015blij go do przegl\u0105darki, za\u0142aduj JavaScript, w\u0142\u0105cz JavaScript z za\u0142adowanym HTML\u2019em. W takim modelu wolno odpowiadaj\u0105ce API, lub spory bundle JavaScriptu powodowa\u0142 op\u00f3\u017anienia dla u\u017cytkownika. Od React 18, wykorzystuj\u0105c Suspens b\u0119dziemy mogli podzieli\u0107 nasze strony na mniejsze cz\u0119\u015bci, dla kt\u00f3rych cykl ten odbywa\u0142 si\u0119 b\u0119dzie niezale\u017cnie. Oznacza to, \u017ce przyk\u0142adowo wolne API do wczytywania komentarzy nie spowolni pojawienia si\u0119 tre\u015bci artyku\u0142u, a spory bundle dotycz\u0105cy paska nawigacji nie odsunie w czasie momentu, kiedy sekcja komentarzy stanie si\u0119 interaktywna.\n<pre><code class=\"language-ts\"><Layout>\n  <NavBar \/>\n  <Suspense fallback={<BigSpinner \/>}>\n    <Suspense fallback={<SidebarGlimmer \/>}>\n      <Sidebar \/>\n    <\/Suspense>\n    <RightPane>\n      <Post \/>\n      <Suspense fallback={<CommentsGlimmer \/>}>\n        <Comments \/>\n      <\/Suspense>\n    <\/RightPane>\n  <\/Suspense>\n<\/Layout><\/code><\/pre>\nMusz\u0119 przyzna\u0107, \u017ce przez ostatnie miesi\u0105ce troch\u0119 szyderczo patrzy\u0142em na tempo rozwoju React. Teraz React jednym blogpostem sprawi\u0142, \u017ce czuj\u0119 si\u0119 g\u0142upio bo przegl\u0105daj\u0105c nowo\u015bci dotycz\u0105ce Angulara z perspektywy czasu zdaj\u0105 si\u0119 jako\u015b wyj\u0105tkowo\u2026 b\u0142ahe.\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a:<\/h3>\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<a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/21\">https:\/\/github.com\/reactwg\/react-18\/discussions\/21<\/a>\n<a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/41\">https:\/\/github.com\/reactwg\/react-18\/discussions\/41<\/a>\n<a href=\"https:\/\/github.com\/reactwg\/react-18\/discussions\/37\">https:\/\/github.com\/reactwg\/react-18\/discussions\/37<\/a>\n<a href=\"https:\/\/github.com\/reactwg\/react-18\">https:\/\/github.com\/reactwg\/react-18<\/a>\n<h2 id=\"2-safari-og%C5%82asza-wsparcie-dla-webextensions\">2. Safari og\u0142asza wsparcie dla WebExtensions<\/h2>\nW minionym tygodniu mia\u0142o miejsce WWDC, czyli ma\u0142e \u015bwi\u0119to wszystkich kochaj\u0105cych urz\u0105dzenia z jab\u0142kiem. Co prawda nie zapowiedziano oczekiwanych przez wszystkich nowych procesor\u00f3w z serii M, ale pojawi\u0142o si\u0119 kilka ciekawych og\u0142osze\u0144 (o kt\u00f3rych wi\u0119cej b\u0119dziecie mogli przeczyta\u0107 zapewne w naszej sobotniej edycji przegl\u0105du). Te kt\u00f3re interesuj\u0105 nas najbardziej to oczywi\u015bcie zmiany zmierzaj\u0105ce do Safari i WebKita.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image aligncenter\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d09809dcae.gif\" alt=\"\" \/>\n\n<figcaption>Bez tego Pana konferencja Apple to ju\u017c nie to samo, ale trzeba przyzna\u0107, \u017ce od jakiego\u015b czasu przed ka\u017cdy ich eventem internet zapiera oddech w oczekiwaniu na to co zostanie pokazane<\/figcaption><\/figure>\nW\u015br\u00f3d og\u0142oszonych nowo\u015bci szczeg\u00f3lnie wybija si\u0119 dodanie w Safari wsparcia dla WebExtenstion. Nie by\u0142oby w tym nic zaskakuj\u0105cego, gdyby nie fakt, \u017ce nowy format rozszerze\u0144 w odr\u00f3\u017cnieniu od obecnego AppExtensions, dost\u0119pny b\u0119dzie r\u00f3wnie\u017c na iPhonach i iPadach. Jest to o tyle ciekawe, \u017ce kilka dni po zapowiedzi ze strony Apple, powsta\u0142o WebExtensions Community Group Charter, w kt\u00f3rego sk\u0142adzie znajdziemy ludzi zar\u00f3wno z Apple jak i Google i kt\u00f3re to odpowiedzialne b\u0119dzie za wypracowanie wsp\u00f3lnego API. Je\u015bli WebExtensions pojawi\u0105 si\u0119 wkr\u00f3tce w Chrome to by\u0107 mo\u017ce po raz pierwszy mo\u017cliwe b\u0119dzie tworzenie mi\u0119dzy przegl\u0105darkowych rozszerze\u0144. A, no i dla u\u017cytkownik\u00f3w Safari wsp\u00f3\u0142dzielenie rozszerze\u0144 mi\u0119dzy urz\u0105dzeniami brzmi jak feature, kt\u00f3ry mo\u017ce w ko\u0144cu sk\u0142oni mnie do spr\u00f3bowania tej szata\u0144skiej przegl\u0105darki.\n\nJe\u015bli chodzi o pozosta\u0142e nowo\u015bci to raczej ci\u0119\u017cko doszuka\u0107 si\u0119 tutaj ju\u017c wi\u0119kszych sensacji. Mamy tutaj troch\u0119 usprawnie\u0144 dla automatycznego uzupe\u0142niania hase\u0142, troch\u0119 usprawnie\u0144 dla WebAssembly i generalnie ca\u0142kiem d\u0142ug\u0105 list\u0119 drobnych nowo\u015bci. Pe\u0142ne release notes Safari znajdziecie poni\u017cej, a ja je\u015bli mia\u0142bym wskaza\u0107 najbardziej oczekiwane przeze mnie zmiany to by\u0142yby to wsparcie dla aspect-ratio i top level await. No c\u00f3\u017c, nie bez przyczyna Safari nazywane jest wsp\u00f3\u0142czesnym Internet Explorerem ;)\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/webkit.org\/blog\/11700\/webkit-features-in-safari-at-wwdc21\/\">https:\/\/webkit.org\/blog\/11700\/webkit-features-in-safari-at-wwdc21\/<\/a>\n<a href=\"https:\/\/github.com\/w3c\/webextensions\/blob\/main\/charter.md#webextensions\">https:\/\/github.com\/w3c\/webextensions\/blob\/main\/charter.md#webextensions<\/a>\n<a href=\"https:\/\/developer.apple.com\/documentation\/safari-release-notes\/safari-15-beta-release-notes\">https:\/\/developer.apple.com\/documentation\/safari-release-notes\/safari-15-beta-release-notes<\/a>"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10127","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=10127"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10127\/revisions"}],"predecessor-version":[{"id":10636,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10127\/revisions\/10636"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}