{"id":10036,"date":"2021-12-09T19:19:04","date_gmt":"2021-12-09T18:19:04","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-67\/"},"modified":"2022-09-19T13:16:34","modified_gmt":"2022-09-19T11:16:34","slug":"frontend-thursday-vol-67","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/","title":{"rendered":"Frontend Thursday vol. 67"},"content":{"rendered":"\n<h2 id=\"1-lepsze-wsparcie-dla-custom-elements-w-react\" data-num=1>1. Lepsze wsparcie dla Custom Elements w React<\/h2>\n\n\n\n<p>Custom Elements szczyt swojej popularno\u015bci maj\u0105 ju\u017c za sob\u0105, ale uda\u0142o im si\u0119 znale\u017a\u0107 swoj\u0105 nisz\u0119, kt\u00f3r\u0105 s\u0105 biblioteki komponent\u00f3w. Wykorzystuj\u0105c natywn\u0105 funkcjonalno\u015b\u0107 przegl\u0105darek zapewniamy, \u017ce z naszych komponent\u00f3w b\u0119d\u0105 mog\u0142y korzysta\u0107 zespo\u0142y pisz\u0105ce w dowolnym frameworku. Wi\u0119kszo\u015b\u0107 framework\u00f3w radzi\u0142a sobie dobrze z integracj\u0105 z Custom Elements, ale niechlubnym wyj\u0105tkiem by\u0142 React. Ca\u0142e szcz\u0119\u015bcie wygl\u0105da na to, \u017ce sytuacja ma si\u0119 wreszcie zmieni\u0107, bo za eksperymentaln\u0105 flag\u0119 trafi\u0142o usprawnione przekazywanie parametr\u00f3w do Custom Elements.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"625\" height=\"500\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7ots.jpeg\" alt=\"\" class=\"wp-image-3389\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7ots.jpeg 625w, https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7ots-300x240.jpeg 300w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/figure><\/div>\n\n\n\n<p>Zanim wejdziemy w szczeg\u00f3\u0142y, cofnijmy si\u0119 jeszcze o krok i przyjrzyjmy si\u0119 temu jak teraz przekazywane s\u0105 parametry do Custom Elements. Mo\u017cemy robi\u0107 to na dwa sposoby: w JSX jako atrybut lub jako property wykorzystuj\u0105c referencj\u0119 do obiektu.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/attribute binding\n&lt;custom-component foo=&quot;bar&quot; \/&gt;\n\n\/\/property binding\ncustomComponent.foo = &quot;bar&quot;;<\/code><\/pre>\n\n\n\n<p>Na pierwszy rzut oka wszystko wygl\u0105da w porz\u0105dku, ale je\u015bli chcemy przekaza\u0107 z\u0142o\u017cony obiekt (na przyk\u0142ad tablic\u0119) jako property w JSX to nie jeste\u015bmy w stanie tego zrobi\u0107. Pr\u00f3ba naiwnego przypisania spowoduje przekszta\u0142cenie obiektu do stringa, co spowoduje, \u017ce customowy komponent otrzyma warto\u015b\u0107 [object Object]. Problem ten da si\u0119 obej\u015b\u0107 wykorzystuj\u0105c referencj\u0119 do obiektu, ale chyba wszyscy zgodzimy si\u0119, \u017ce nie by\u0142o to eleganckie rozwi\u0105zanie.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\"> \/\/ This will result in something like: &lt;custom-component foo=\u201d[object Object]&quot; \/&gt;\n&lt;custom-component foo={someObject}&quot; \/&gt;\n\n\/\/ This will work as expected\n&lt;custom-component ref={el =&gt; el.foo = someObject}\/&gt; \n<\/code><\/pre>\n\n\n\n<p>Nowa funkcjonalno\u015b\u0107 dostarczona za odpowiedni\u0105 flag\u0105 sprawia, \u017ce React w przypadku przypisania warto\u015bci do custom-element sprawdzi jej typ i w zale\u017cno\u015bci od niego przeka\u017ce j\u0105 jako atrybut, property lub event-listener. Dan Abramov przygotowa\u0142 demo wykorzystuj\u0105ce Custom Elements z Vaadin, kt\u00f3re mo\u017cecie znale\u017a\u0107 tutaj.<\/p>\n\n\n\n<p>Je\u015bli jeste\u015bcie ciekawi jakie alternatywne rozwi\u0105zania by\u0142y rozwa\u017cane i dlaczego podj\u0119to takie, a nie inne decyzje to w <a href=\"https:\/\/www.reddit.com\/r\/javascript\/comments\/rbv9pe\/react_has_shipped_experimental_support_for_custom\/\">RFC na Githubie<\/a> znajdziecie naprawd\u0119 d\u0142ug\u0105 i wyczerpuj\u0105c\u0105 dyskusj\u0119 na ten temat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/github.com\/facebook\/react\/issues\/11347\">https:\/\/github.com\/facebook\/react\/issues\/11347<\/a><br><a href=\"https:\/\/docs.google.com\/document\/d\/1wwL_YZ5TnYorEEr2Lkeh9rgbnsynDXXI7tCejVcpE6I\/edit#\">https:\/\/docs.google.com\/document\/d\/1wwL_YZ5TnYorEEr2Lkeh9rgbnsynDXXI7tCejVcpE6I\/edit#<\/a><br><a href=\"https:\/\/codesandbox.io\/s\/shy-tdd-8b4tq?file=\/src\/App.js\">https:\/\/codesandbox.io\/s\/shy-tdd-8b4tq?file=\/src\/App.js<\/a><br><a href=\"https:\/\/www.reddit.com\/r\/javascript\/comments\/rbv9pe\/react_has_shipped_experimental_support_for_custom\/\">https:\/\/www.reddit.com\/r\/javascript\/comments\/rbv9pe\/react_has_shipped_experimental_support_for_custom\/<\/a><\/p>\n\n\n\n<h2 id=\"2-react-conf-2021-i-reacteurope\" data-num=2>2. React Conf 2021 i ReactEurope<\/h2>\n\n\n\n<p>Fani Reacta zdecydowanie maj\u0105 co robi\u0107 przed \u015bwi\u0119tami bo w tym tygodniu mamy urodzaj du\u017cych konferencji Reactowych. Dzisiaj rano odby\u0142o si\u0119 React Conf 2021, ale je\u015bli si\u0119 nie za\u0142apali\u015bcie to jeszcze nic straconego. Jutro rano odb\u0119dzie si\u0119 retransmisja konferencji,a p\u00f3\u017aniej nagrania maj\u0105 trafi\u0107 na YouTube. Kiedy to si\u0119 stanie mo\u017cecie liczy\u0107 na to, \u017ce na pewno damy Wam o tym zna\u0107 w jednym z podsumowa\u0144.<\/p>\n\n\n\n<p>Opr\u00f3cz ReactConf2021 w tym tygodniu b\u0119dzie mie\u0107 miejsce r\u00f3wnie\u017c ReactEurope. Warsztaty maj\u0105 miejsce ju\u017c dzisiaj, ale sama konferencja odb\u0119dzie si\u0119 jutro i mo\u017cecie zapisa\u0107 si\u0119 na ni\u0105 za darmo tutaj.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"699\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7pgv.jpeg\" alt=\"\" class=\"wp-image-3390\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7pgv.jpeg 500w, https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7pgv-215x300.jpeg 215w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/conf.reactjs.org\/\">https:\/\/conf.reactjs.org\/<\/a><br><a href=\"https:\/\/www.react-europe.org\/\">https:\/\/www.react-europe.org\/<\/a><\/p>\n\n\n\n<h2 id=\"bonus\" data-num=3>Bonus<\/h2>\n\n\n\n<p>Je\u015bli pomimo dw\u00f3ch du\u017cych Reactowych konferencji maj\u0105cych miejsce w tym tygodniu wci\u0105\u017c jeste\u015bcie g\u0142odni materia\u0142\u00f3w Video to kilka dni temu do sieci trafi\u0142a pr\u00f3bna rozmowa rekrutacyjna przeprowadzona z Danem Abramov (jedna z twarzy Reacta, cz\u0142owiek kt\u00f3ry macza\u0142 swoje r\u0119ce zar\u00f3wno w React Hooks jak i React Server Components) z Benem Awad (cz\u0142owiek odpowiedzialny za tindera dla programist\u00f3w dostarczonego jako wtyczka do VSCode). Ca\u0142o\u015b\u0107 ca\u0142kiem przyjemnie si\u0119 ogl\u0105da, a mo\u017ce przy okazji nauczycie si\u0119 czego\u015b ciekawego.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"embed-responsive embed-responsive-16by9\"><iframe loading=\"lazy\" title=\"Coding Interview with Dan Abramov\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/XEt09iK8IXs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"420\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7ox1.jpeg\" alt=\"\" class=\"wp-image-3391\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7ox1.jpeg 598w, https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7ox1-300x211.jpeg 300w\" sizes=\"auto, (max-width: 598px) 100vw, 598px\" \/><figcaption>Kradzione z twittera, niestety nie mog\u0119 teraz dokopa\u0107 si\u0119 do \u017ar\u00f3d\u0142a\u00a0<br><\/figcaption><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u015awi\u0119ta coraz bli\u017cej wi\u0119c frontendowy \u015bwiat powoli zwalnia. Mimo tego w tym tygodniu w \u015bwiecie Reacta wydarzy\u0142o si\u0119 ca\u0142kiem sporo. Przygotujcie sobie gor\u0105c\u0105 herbat\u0119 \ud83e\uded6 i zapraszamy do lektury! \ud83d\udcb8 <\/p>\n","protected":false},"author":12,"featured_media":7752,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-10036","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7ots.png","estimated_reading_time":"3","feature_image_visible":false},"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. 67 - 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-67\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 67 - Vived\" \/>\n<meta property=\"og:description\" content=\"\u015awi\u0119ta coraz bli\u017cej wi\u0119c frontendowy \u015bwiat powoli zwalnia. Mimo tego w tym tygodniu w \u015bwiecie Reacta wydarzy\u0142o si\u0119 ca\u0142kiem sporo. Przygotujcie sobie gor\u0105c\u0105 herbat\u0119 \ud83e\uded6 i zapraszamy do lektury! \ud83d\udcb8\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-09T18:19:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-09-at-19.15.24.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3360\" \/>\n\t<meta property=\"og:image:height\" content=\"1754\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-09-at-19.15.24.png\" \/>\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-67\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 67\",\"datePublished\":\"2021-12-09T18:19:04+00:00\",\"dateModified\":\"2022-09-19T11:16:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/\"},\"wordCount\":601,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/\",\"name\":\"Frontend Thursday vol. 67 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"datePublished\":\"2021-12-09T18:19:04+00:00\",\"dateModified\":\"2022-09-19T11:16:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"width\":2000,\"height\":1210},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 67\"}]},{\"@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. 67 - 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-67\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 67 - Vived","og_description":"\u015awi\u0119ta coraz bli\u017cej wi\u0119c frontendowy \u015bwiat powoli zwalnia. Mimo tego w tym tygodniu w \u015bwiecie Reacta wydarzy\u0142o si\u0119 ca\u0142kiem sporo. Przygotujcie sobie gor\u0105c\u0105 herbat\u0119 \ud83e\uded6 i zapraszamy do lektury! \ud83d\udcb8","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/","og_site_name":"Vived","article_published_time":"2021-12-09T18:19:04+00:00","article_modified_time":"2022-09-19T11:16:34+00:00","og_image":[{"width":3360,"height":1754,"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-09-at-19.15.24.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","twitter_image":"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-09-at-19.15.24.png","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 67","datePublished":"2021-12-09T18:19:04+00:00","dateModified":"2022-09-19T11:16:34+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/"},"wordCount":601,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/","name":"Frontend Thursday vol. 67 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","datePublished":"2021-12-09T18:19:04+00:00","dateModified":"2022-09-19T11:16:34+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","width":2000,"height":1210},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-67\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 67"}]},{"@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":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>1. Lepsze wsparcie dla Custom Elements w React<\/h2>\n","innerContent":["\n<h2>1. Lepsze wsparcie dla Custom Elements w React<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Custom Elements szczyt swojej popularno\u015bci maj\u0105 ju\u017c za sob\u0105, ale uda\u0142o im si\u0119 znale\u017a\u0107 swoj\u0105 nisz\u0119, kt\u00f3r\u0105 s\u0105 biblioteki komponent\u00f3w. Wykorzystuj\u0105c natywn\u0105 funkcjonalno\u015b\u0107 przegl\u0105darek zapewniamy, \u017ce z naszych komponent\u00f3w b\u0119d\u0105 mog\u0142y korzysta\u0107 zespo\u0142y pisz\u0105ce w dowolnym frameworku. Wi\u0119kszo\u015b\u0107 framework\u00f3w radzi\u0142a sobie dobrze z integracj\u0105 z Custom Elements, ale niechlubnym wyj\u0105tkiem by\u0142 React. Ca\u0142e szcz\u0119\u015bcie wygl\u0105da na to, \u017ce sytuacja ma si\u0119 wreszcie zmieni\u0107, bo za eksperymentaln\u0105 flag\u0119 trafi\u0142o usprawnione przekazywanie parametr\u00f3w do Custom Elements.<\/p>\n","innerContent":["\n<p>Custom Elements szczyt swojej popularno\u015bci maj\u0105 ju\u017c za sob\u0105, ale uda\u0142o im si\u0119 znale\u017a\u0107 swoj\u0105 nisz\u0119, kt\u00f3r\u0105 s\u0105 biblioteki komponent\u00f3w. Wykorzystuj\u0105c natywn\u0105 funkcjonalno\u015b\u0107 przegl\u0105darek zapewniamy, \u017ce z naszych komponent\u00f3w b\u0119d\u0105 mog\u0142y korzysta\u0107 zespo\u0142y pisz\u0105ce w dowolnym frameworku. Wi\u0119kszo\u015b\u0107 framework\u00f3w radzi\u0142a sobie dobrze z integracj\u0105 z Custom Elements, ale niechlubnym wyj\u0105tkiem by\u0142 React. Ca\u0142e szcz\u0119\u015bcie wygl\u0105da na to, \u017ce sytuacja ma si\u0119 wreszcie zmieni\u0107, bo za eksperymentaln\u0105 flag\u0119 trafi\u0142o usprawnione przekazywanie parametr\u00f3w do Custom Elements.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3389,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7ots.jpeg\" alt=\"\" class=\"wp-image-3389\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7ots.jpeg\" alt=\"\" class=\"wp-image-3389\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zanim wejdziemy w szczeg\u00f3\u0142y, cofnijmy si\u0119 jeszcze o krok i przyjrzyjmy si\u0119 temu jak teraz przekazywane s\u0105 parametry do Custom Elements. Mo\u017cemy robi\u0107 to na dwa sposoby: w JSX jako atrybut lub jako property wykorzystuj\u0105c referencj\u0119 do obiektu.<\/p>\n","innerContent":["\n<p>Zanim wejdziemy w szczeg\u00f3\u0142y, cofnijmy si\u0119 jeszcze o krok i przyjrzyjmy si\u0119 temu jak teraz przekazywane s\u0105 parametry do Custom Elements. Mo\u017cemy robi\u0107 to na dwa sposoby: w JSX jako atrybut lub jako property wykorzystuj\u0105c referencj\u0119 do obiektu.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/attribute binding\n&lt;custom-component foo=\"bar\" \/>\n\n\/\/property binding\ncustomComponent.foo = \"bar\";<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">\/\/attribute binding\n&lt;custom-component foo=\"bar\" \/>\n\n\/\/property binding\ncustomComponent.foo = \"bar\";<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na pierwszy rzut oka wszystko wygl\u0105da w porz\u0105dku, ale je\u015bli chcemy przekaza\u0107 z\u0142o\u017cony obiekt (na przyk\u0142ad tablic\u0119) jako property w JSX to nie jeste\u015bmy w stanie tego zrobi\u0107. Pr\u00f3ba naiwnego przypisania spowoduje przekszta\u0142cenie obiektu do stringa, co spowoduje, \u017ce customowy komponent otrzyma warto\u015b\u0107 [object Object]. Problem ten da si\u0119 obej\u015b\u0107 wykorzystuj\u0105c referencj\u0119 do obiektu, ale chyba wszyscy zgodzimy si\u0119, \u017ce nie by\u0142o to eleganckie rozwi\u0105zanie.<\/p>\n","innerContent":["\n<p>Na pierwszy rzut oka wszystko wygl\u0105da w porz\u0105dku, ale je\u015bli chcemy przekaza\u0107 z\u0142o\u017cony obiekt (na przyk\u0142ad tablic\u0119) jako property w JSX to nie jeste\u015bmy w stanie tego zrobi\u0107. Pr\u00f3ba naiwnego przypisania spowoduje przekszta\u0142cenie obiektu do stringa, co spowoduje, \u017ce customowy komponent otrzyma warto\u015b\u0107 [object Object]. Problem ten da si\u0119 obej\u015b\u0107 wykorzystuj\u0105c referencj\u0119 do obiektu, ale chyba wszyscy zgodzimy si\u0119, \u017ce nie by\u0142o to eleganckie rozwi\u0105zanie.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":[],"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\"> \/\/ This will result in something like: &lt;custom-component foo=\u201d[object Object]\" \/>\n&lt;custom-component foo={someObject}\" \/>\n\n\/\/ This will work as expected\n&lt;custom-component ref={el => el.foo = someObject}\/> \n<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\"> \/\/ This will result in something like: &lt;custom-component foo=\u201d[object Object]\" \/>\n&lt;custom-component foo={someObject}\" \/>\n\n\/\/ This will work as expected\n&lt;custom-component ref={el => el.foo = someObject}\/> \n<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nowa funkcjonalno\u015b\u0107 dostarczona za odpowiedni\u0105 flag\u0105 sprawia, \u017ce React w przypadku przypisania warto\u015bci do custom-element sprawdzi jej typ i w zale\u017cno\u015bci od niego przeka\u017ce j\u0105 jako atrybut, property lub event-listener. Dan Abramov przygotowa\u0142 demo wykorzystuj\u0105ce Custom Elements z Vaadin, kt\u00f3re mo\u017cecie znale\u017a\u0107 tutaj.<\/p>\n","innerContent":["\n<p>Nowa funkcjonalno\u015b\u0107 dostarczona za odpowiedni\u0105 flag\u0105 sprawia, \u017ce React w przypadku przypisania warto\u015bci do custom-element sprawdzi jej typ i w zale\u017cno\u015bci od niego przeka\u017ce j\u0105 jako atrybut, property lub event-listener. Dan Abramov przygotowa\u0142 demo wykorzystuj\u0105ce Custom Elements z Vaadin, kt\u00f3re mo\u017cecie znale\u017a\u0107 tutaj.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli jeste\u015bcie ciekawi jakie alternatywne rozwi\u0105zania by\u0142y rozwa\u017cane i dlaczego podj\u0119to takie, a nie inne decyzje to w <a href=\"https:\/\/www.reddit.com\/r\/javascript\/comments\/rbv9pe\/react_has_shipped_experimental_support_for_custom\/\">RFC na Githubie<\/a> znajdziecie naprawd\u0119 d\u0142ug\u0105 i wyczerpuj\u0105c\u0105 dyskusj\u0119 na ten temat.<\/p>\n","innerContent":["\n<p>Je\u015bli jeste\u015bcie ciekawi jakie alternatywne rozwi\u0105zania by\u0142y rozwa\u017cane i dlaczego podj\u0119to takie, a nie inne decyzje to w <a href=\"https:\/\/www.reddit.com\/r\/javascript\/comments\/rbv9pe\/react_has_shipped_experimental_support_for_custom\/\">RFC na Githubie<\/a> znajdziecie naprawd\u0119 d\u0142ug\u0105 i wyczerpuj\u0105c\u0105 dyskusj\u0119 na ten temat.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/github.com\/facebook\/react\/issues\/11347\">https:\/\/github.com\/facebook\/react\/issues\/11347<\/a><br><a href=\"https:\/\/docs.google.com\/document\/d\/1wwL_YZ5TnYorEEr2Lkeh9rgbnsynDXXI7tCejVcpE6I\/edit#\">https:\/\/docs.google.com\/document\/d\/1wwL_YZ5TnYorEEr2Lkeh9rgbnsynDXXI7tCejVcpE6I\/edit#<\/a><br><a href=\"https:\/\/codesandbox.io\/s\/shy-tdd-8b4tq?file=\/src\/App.js\">https:\/\/codesandbox.io\/s\/shy-tdd-8b4tq?file=\/src\/App.js<\/a><br><a href=\"https:\/\/www.reddit.com\/r\/javascript\/comments\/rbv9pe\/react_has_shipped_experimental_support_for_custom\/\">https:\/\/www.reddit.com\/r\/javascript\/comments\/rbv9pe\/react_has_shipped_experimental_support_for_custom\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/github.com\/facebook\/react\/issues\/11347\">https:\/\/github.com\/facebook\/react\/issues\/11347<\/a><br><a href=\"https:\/\/docs.google.com\/document\/d\/1wwL_YZ5TnYorEEr2Lkeh9rgbnsynDXXI7tCejVcpE6I\/edit#\">https:\/\/docs.google.com\/document\/d\/1wwL_YZ5TnYorEEr2Lkeh9rgbnsynDXXI7tCejVcpE6I\/edit#<\/a><br><a href=\"https:\/\/codesandbox.io\/s\/shy-tdd-8b4tq?file=\/src\/App.js\">https:\/\/codesandbox.io\/s\/shy-tdd-8b4tq?file=\/src\/App.js<\/a><br><a href=\"https:\/\/www.reddit.com\/r\/javascript\/comments\/rbv9pe\/react_has_shipped_experimental_support_for_custom\/\">https:\/\/www.reddit.com\/r\/javascript\/comments\/rbv9pe\/react_has_shipped_experimental_support_for_custom\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. React Conf 2021 i ReactEurope<\/h2>\n","innerContent":["\n<h2>2. React Conf 2021 i ReactEurope<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Fani Reacta zdecydowanie maj\u0105 co robi\u0107 przed \u015bwi\u0119tami bo w tym tygodniu mamy urodzaj du\u017cych konferencji Reactowych. Dzisiaj rano odby\u0142o si\u0119 React Conf 2021, ale je\u015bli si\u0119 nie za\u0142apali\u015bcie to jeszcze nic straconego. Jutro rano odb\u0119dzie si\u0119 retransmisja konferencji,a p\u00f3\u017aniej nagrania maj\u0105 trafi\u0107 na YouTube. Kiedy to si\u0119 stanie mo\u017cecie liczy\u0107 na to, \u017ce na pewno damy Wam o tym zna\u0107 w jednym z podsumowa\u0144.<\/p>\n","innerContent":["\n<p>Fani Reacta zdecydowanie maj\u0105 co robi\u0107 przed \u015bwi\u0119tami bo w tym tygodniu mamy urodzaj du\u017cych konferencji Reactowych. Dzisiaj rano odby\u0142o si\u0119 React Conf 2021, ale je\u015bli si\u0119 nie za\u0142apali\u015bcie to jeszcze nic straconego. Jutro rano odb\u0119dzie si\u0119 retransmisja konferencji,a p\u00f3\u017aniej nagrania maj\u0105 trafi\u0107 na YouTube. Kiedy to si\u0119 stanie mo\u017cecie liczy\u0107 na to, \u017ce na pewno damy Wam o tym zna\u0107 w jednym z podsumowa\u0144.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Opr\u00f3cz ReactConf2021 w tym tygodniu b\u0119dzie mie\u0107 miejsce r\u00f3wnie\u017c ReactEurope. Warsztaty maj\u0105 miejsce ju\u017c dzisiaj, ale sama konferencja odb\u0119dzie si\u0119 jutro i mo\u017cecie zapisa\u0107 si\u0119 na ni\u0105 za darmo tutaj.<\/p>\n","innerContent":["\n<p>Opr\u00f3cz ReactConf2021 w tym tygodniu b\u0119dzie mie\u0107 miejsce r\u00f3wnie\u017c ReactEurope. Warsztaty maj\u0105 miejsce ju\u017c dzisiaj, ale sama konferencja odb\u0119dzie si\u0119 jutro i mo\u017cecie zapisa\u0107 si\u0119 na ni\u0105 za darmo tutaj.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3390,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7pgv.jpeg\" alt=\"\" class=\"wp-image-3390\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7pgv.jpeg\" alt=\"\" class=\"wp-image-3390\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/conf.reactjs.org\/\">https:\/\/conf.reactjs.org\/<\/a><br><a href=\"https:\/\/www.react-europe.org\/\">https:\/\/www.react-europe.org\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/conf.reactjs.org\/\">https:\/\/conf.reactjs.org\/<\/a><br><a href=\"https:\/\/www.react-europe.org\/\">https:\/\/www.react-europe.org\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>Bonus<\/h2>\n","innerContent":["\n<h2>Bonus<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli pomimo dw\u00f3ch du\u017cych Reactowych konferencji maj\u0105cych miejsce w tym tygodniu wci\u0105\u017c jeste\u015bcie g\u0142odni materia\u0142\u00f3w Video to kilka dni temu do sieci trafi\u0142a pr\u00f3bna rozmowa rekrutacyjna przeprowadzona z Danem Abramov (jedna z twarzy Reacta, cz\u0142owiek kt\u00f3ry macza\u0142 swoje r\u0119ce zar\u00f3wno w React Hooks jak i React Server Components) z Benem Awad (cz\u0142owiek odpowiedzialny za tindera dla programist\u00f3w dostarczonego jako wtyczka do VSCode). Ca\u0142o\u015b\u0107 ca\u0142kiem przyjemnie si\u0119 ogl\u0105da, a mo\u017ce przy okazji nauczycie si\u0119 czego\u015b ciekawego.<\/p>\n","innerContent":["\n<p>Je\u015bli pomimo dw\u00f3ch du\u017cych Reactowych konferencji maj\u0105cych miejsce w tym tygodniu wci\u0105\u017c jeste\u015bcie g\u0142odni materia\u0142\u00f3w Video to kilka dni temu do sieci trafi\u0142a pr\u00f3bna rozmowa rekrutacyjna przeprowadzona z Danem Abramov (jedna z twarzy Reacta, cz\u0142owiek kt\u00f3ry macza\u0142 swoje r\u0119ce zar\u00f3wno w React Hooks jak i React Server Components) z Benem Awad (cz\u0142owiek odpowiedzialny za tindera dla programist\u00f3w dostarczonego jako wtyczka do VSCode). Ca\u0142o\u015b\u0107 ca\u0142kiem przyjemnie si\u0119 ogl\u0105da, a mo\u017ce przy okazji nauczycie si\u0119 czego\u015b ciekawego.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/embed","attrs":{"url":"https:\/\/www.youtube.com\/watch?v=XEt09iK8IXs","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=XEt09iK8IXs\n<\/div><\/figure>\n","innerContent":["\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=XEt09iK8IXs\n<\/div><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3391,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7ox1.jpeg\" alt=\"\" class=\"wp-image-3391\"\/><figcaption>Kradzione z twittera, niestety nie mog\u0119 teraz dokopa\u0107 si\u0119 do \u017ar\u00f3d\u0142a\u00a0<br><\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5x7ox1.jpeg\" alt=\"\" class=\"wp-image-3391\"\/><figcaption>Kradzione z twittera, niestety nie mog\u0119 teraz dokopa\u0107 si\u0119 do \u017ar\u00f3d\u0142a\u00a0<br><\/figcaption><\/figure><\/div>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10036","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=10036"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10036\/revisions"}],"predecessor-version":[{"id":10610,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10036\/revisions\/10610"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/7752"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}