{"id":10141,"date":"2021-05-06T12:58:48","date_gmt":"2021-05-06T10:58:48","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-36\/"},"modified":"2022-09-19T13:16:43","modified_gmt":"2022-09-19T11:16:43","slug":"frontend-thursday-vol-36","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/","title":{"rendered":"Frontend Thursday vol. 36"},"content":{"rendered":"<h1 id=\"1-rxjs-70-nareszcie-opuszcza-bet%C4%99\">1. RxJS 7.0 nareszcie opuszcza bet\u0119<\/h1>\n<p>RxJS 7.0 w wersji beta zosta\u0142 opublikowany w kwietniu zesz\u0142ego roku. W tym tygodniu, po ponad 12 miesi\u0105cach oczekiwania, wreszcie doczekali\u015bmy si\u0119 wydania stabilnej wersji. Je\u015bli macie wolne p\u00f3\u0142 godziny, to zach\u0119cam do ogl\u0105dni\u0119cia podlinkowanego poni\u017cej przegl\u0105du zmian od Bena Lesh (tw\u00f3rcy biblioteki). Materia\u0142, co prawda kr\u0105\u017cy ju\u017c w sieci prawie tak d\u0142ugo, jak sama wersja beta, ale nadal mo\u017cna uzna\u0107 go za aktualny. Dla wszystkich zabieganych tradycyjnie przygotowali\u015bmy te\u017c telegraficzny skr\u00f3t zmian. \u00a0<\/p>\n<div class=\"embed-responsive embed-responsive-16by9\"><iframe loading=\"lazy\" title=\"State of RxJS | Ben Lesh | ng-conf: Hardwired\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/OC6g4yFsw0w?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<p>Zacznijmy od frazesu, kt\u00f3ry musi pojawi\u0107 si\u0119 przy okazji ka\u017cdej wi\u0119kszej biblioteki: wraz z now\u0105 wersj\u0105 poprawiona zosta\u0142a stabilno\u015b\u0107 i inferowanie typ\u00f3w. Co ciekawe pojawi\u0142o si\u0119 r\u00f3wnie\u017c kilka alias\u00f3w na istniej\u0105ce funkcje, kt\u00f3re maj\u0105 lepiej opisywa\u0107 ich dzia\u0142anie.<\/p>\n<p>Oklepane formu\u0142ki mamy za sob\u0105, wi\u0119c przejd\u017amy do konkret\u00f3w. Chyba najciekawsz\u0105 zmian\u0105 jest deprekacja metody .toPromise() i zast\u0105pienie jej dwoma bardziej opisowymi metodami. Kto korzystaj\u0105c z toPromise() nigdy nie zapomnia\u0142, \u017ce strumie\u0144 musi zosta\u0107 zamkni\u0119ty, niech pierwszy rzuci kamieniem (albo komentarzem na naszym Facebooku!). Nigdy wi\u0119cej source$.pipe(take(1)).toPromise(). I jak tu si\u0119 nie cieszy\u0107?<\/p>\n<pre><code class=\"language-js\">const value_1 = await lastValueFrom(source$)\nconsole.log(value_1);\nconst value_2 = await firstValueFrom(source$);\nconsole.log(value_2);<\/code><\/pre>\n<p>Na tym rzecz jasna zmiany si\u0119 nie ko\u0144cz\u0105. Nowa wersja RxJS wspiera AsyncIterable we wszystkich miejscach, gdzie wspierany jest Promise i Observable.<\/p>\n<pre><code class=\"language-js\">async function* asyncTicker(message: string) {\n\tlet n = 0;\n\twhile(true) {\n\t\tawait sleep(100);\n\t\tyield message + \u2018 \u2018 + n++;\n\t}\n}\nof(&#039;Async Iterables!&#039;)\n\t.pipe(concatMap(msg =&gt; asyncTicker(msg))\n\t.subscribe(it =&gt; console.log(it));<\/code><\/pre>\n<p>Opr\u00f3cz tego dodana zosta\u0142a funkcja animationFrames(), kt\u00f3ra w wygodny spos\u00f3b pozwala zasubskrybowa\u0107 si\u0119 na klatki animacji i zwraca czas, jaki up\u0142yn\u0105\u0142 od poprzedniej klatki. S\u0105 przypadki, kiedy pomo\u017ce to w wygodny spos\u00f3b tworzy\u0107 animacje, ale naprawd\u0119 elegancki spos\u00f3b to CSS animations i Web Animations API.<\/p>\n<pre><code class=\"language-js\">animationFrame()\n    .subscribe(ellapsed =&gt;\n    \tconsole.log(`Time since last frame: ${ellapsed}`)\n    );<\/code><\/pre>\n<p>Je\u015bli chodzi o breaking changes to my\u015bl\u0119, \u017ce warto wspomnie\u0107 tu o dw\u00f3ch z nich. Pierwsza dotyczy metody toPromise(), kt\u00f3ra zwraca\u0107 b\u0119dzie od teraz T | undefined. Jest to zmiana tylko w typowaniu, bo funkcja ta chyba od zawsze zwraca\u0142a undefined, je\u015bli strumie\u0144 zako\u0144czy\u0142 si\u0119 bez wyemitowania warto\u015bci. Niemniej jednak naprawa b\u0142\u0119d\u00f3w kompilacji mo\u017ce by\u0107 deczko uci\u0105\u017cliwa. Druga zmiana to usuni\u0119cie wsparcia dla subskrybcji z trzema funkcjami jako argumenty. Od teraz mo\u017cliwe b\u0119dzie albo podanie jednej funkcji albo obiektu, kt\u00f3ry zawiera\u0142 b\u0119dzie odpowiednio nazwane funkcje.<\/p>\n<h2 id=\"zrodla\" data-num=1>\u0179r\u00f3d\u0142a:<\/h2>\n<p><a href=\"https:\/\/github.com\/ReactiveX\/rxjs\/blob\/master\/CHANGELOG.md\">https:\/\/github.com\/ReactiveX\/rxjs\/blob\/master\/CHANGELOG.md<\/a><\/p>\n<h1 id=\"2-powstaje-rome-tools-inc\">2. Powstaje Rome Tools, Inc.<\/h1>\n<p>Powstanie Rome rok temu wzbudzi\u0142o spore zainteresowanie, ale szczerze m\u00f3wi\u0105c od tego czasu niewiele o nim s\u0142ysza\u0142em. Je\u015bli omin\u0119\u0142y Was zesz\u0142oroczne newsy, to Rome jest narz\u0119dziem od tw\u00f3rcy Babela i Yarna, kt\u00f3re obiecuje po\u0142\u0105czy\u0107 funkcjonalno\u015bci wielu narz\u0119dzi przydatnych w pracy z JavaScript, HTML i CSS w jednym miejscu. Rome ma instalowa\u0107 dependencje, sprawdza\u0107 kod, uruchamia\u0107 testy i budowa\u0107 paczki z kodem, a wszystko to z poziomu jednego CLI. Je\u015bli jeste\u015bcie zainteresowani zg\u0142\u0119bianiem tematu, to zosta\u0142 on dosy\u0107 dobrze opisany w po\u015bcie og\u0142aszaj\u0105cym powstanie projektu, kt\u00f3ry znajdziecie <a href=\"https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/\">tutaj<\/a>. Dlaczego wracamy dzi\u015b do tego narz\u0119dzia? Tw\u00f3rcy Rome zebrali 4.5 miliona dolar\u00f3w, otwieraj\u0105 w\u0142asn\u0105 firm\u0119 i obiecuj\u0105 zwi\u0119kszy\u0107 liczb\u0119 os\u00f3b zaanga\u017cowanych w projekt na pe\u0142ny etat. Patrz\u0105c na to, \u017ce kilka tygodni temu informowali\u015bmy Was <a href=\"https:\/\/deno.com\/blog\/the-deno-company\">o powstaniu Deno Company<\/a>, chyba mo\u017cemy m\u00f3wi\u0107 tutaj o ciekawym trendzie w\u015br\u00f3d rozwi\u0105za\u0144 Open Sourcowych. Czas poka\u017ce, czy takie podej\u015bcie wyjdzie wszystkim na dobre, ale na razie trzymamy kciuki za obydwa projekty.<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>A co je\u015bli wszystkie drogi prowadz\u0105 do Rzymu i wszystkie inne narz\u0119dzia s\u0105 z g\u00f3ry skazane na pora\u017ck\u0119?<\/figcaption><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a:<\/h3>\n<p><a href=\"https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/\">https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/<\/a><\/p>\n<h1 id=\"3v8-v91\">3.V8 v9.1<\/h1>\n<p>W tym tygodniu dostali\u015bmy kolejn\u0105 wersj\u0119 V8, a wraz z ni\u0105 jedn\u0105 szczeg\u00f3lnie przydatn\u0105 funkcjonalno\u015b\u0107: top level async await. Czy tylko ja na ni\u0105 czeka\u0142em? <\/p>\n<pre><code class=\"language-js\">\/\/ ---PREVIOUSLY---\nawait Promise.resolve(console.log(&#039;&#039;));\n\/\/ \u2192 SyntaxError: await is only valid in async function\n(async function() {\n\tawait Promise.resolve(console.log(&#039;&#039;));\n\/\/ \u2192 \n}());\n\/\/ ---NOW---\nawait Promise.resolve(console.log(&#039;&#039;));\n\/\/ \u2192 <\/code><\/pre>\n<p>Rzecz jasna nie jedyna nowo\u015b\u0107, ale notatka od tw\u00f3rc\u00f3w V8 podlinkowana poni\u017cej jest na tyle zwi\u0119z\u0142a, \u017ce chyba nie ma sensu pr\u00f3bowa\u0107 streszcza\u0107 jej jeszcze bardziej.<\/p>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-2\">\u0179r\u00f3d\u0142a:<\/h3>\n<p><a href=\"https:\/\/v8.dev\/blog\/v8-release-91\">https:\/\/v8.dev\/blog\/v8-release-91<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. RxJS 7.0 nareszcie opuszcza bet\u0119 RxJS 7.0 w wersji beta zosta\u0142 opublikowany w kwietniu zesz\u0142ego roku. W tym tygodniu, po ponad 12 miesi\u0105cach oczekiwania, wreszcie doczekali\u015bmy si\u0119 wydania stabilnej wersji. Je\u015bli macie wolne p\u00f3\u0142 godziny, to zach\u0119cam do ogl\u0105dni\u0119cia podlinkowanego poni\u017cej przegl\u0105du zmian od Bena Lesh (tw\u00f3rcy biblioteki). Materia\u0142, co prawda kr\u0105\u017cy ju\u017c w [&hellip;]<\/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-10141","post","type-post","status-publish","format-standard","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"estimated_reading_time":"3"},"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. 36 - 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-36\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 36 - Vived\" \/>\n<meta property=\"og:description\" content=\"1. RxJS 7.0 nareszcie opuszcza bet\u0119 RxJS 7.0 w wersji beta zosta\u0142 opublikowany w kwietniu zesz\u0142ego roku. W tym tygodniu, po ponad 12 miesi\u0105cach oczekiwania, wreszcie doczekali\u015bmy si\u0119 wydania stabilnej wersji. Je\u015bli macie wolne p\u00f3\u0142 godziny, to zach\u0119cam do ogl\u0105dni\u0119cia podlinkowanego poni\u017cej przegl\u0105du zmian od Bena Lesh (tw\u00f3rcy biblioteki). Materia\u0142, co prawda kr\u0105\u017cy ju\u017c w [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-06T10:58:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.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-36\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 36\",\"datePublished\":\"2021-05-06T10:58:48+00:00\",\"dateModified\":\"2022-09-19T11:16:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/\"},\"wordCount\":702,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.gif\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/\",\"name\":\"Frontend Thursday vol. 36 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.gif\",\"datePublished\":\"2021-05-06T10:58:48+00:00\",\"dateModified\":\"2022-09-19T11:16:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.gif\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 36\"}]},{\"@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. 36 - 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-36\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 36 - Vived","og_description":"1. RxJS 7.0 nareszcie opuszcza bet\u0119 RxJS 7.0 w wersji beta zosta\u0142 opublikowany w kwietniu zesz\u0142ego roku. W tym tygodniu, po ponad 12 miesi\u0105cach oczekiwania, wreszcie doczekali\u015bmy si\u0119 wydania stabilnej wersji. Je\u015bli macie wolne p\u00f3\u0142 godziny, to zach\u0119cam do ogl\u0105dni\u0119cia podlinkowanego poni\u017cej przegl\u0105du zmian od Bena Lesh (tw\u00f3rcy biblioteki). Materia\u0142, co prawda kr\u0105\u017cy ju\u017c w [&hellip;]","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/","og_site_name":"Vived","article_published_time":"2021-05-06T10:58:48+00:00","article_modified_time":"2022-09-19T11:16:43+00:00","og_image":[{"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.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-36\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 36","datePublished":"2021-05-06T10:58:48+00:00","dateModified":"2022-09-19T11:16:43+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/"},"wordCount":702,"commentCount":0,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.gif","articleSection":["Frontend"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/","name":"Frontend Thursday vol. 36 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.gif","datePublished":"2021-05-06T10:58:48+00:00","dateModified":"2022-09-19T11:16:43+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.gif","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-36\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 36"}]},{"@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-rxjs-70-nareszcie-opuszcza-bet%C4%99\">1. RxJS 7.0 nareszcie opuszcza bet\u0119<\/h1><p>RxJS 7.0 w wersji beta zosta\u0142 opublikowany w kwietniu zesz\u0142ego roku. W tym tygodniu, po ponad 12 miesi\u0105cach oczekiwania, wreszcie doczekali\u015bmy si\u0119 wydania stabilnej wersji. Je\u015bli macie wolne p\u00f3\u0142 godziny, to zach\u0119cam do ogl\u0105dni\u0119cia podlinkowanego poni\u017cej przegl\u0105du zmian od Bena Lesh (tw\u00f3rcy biblioteki). Materia\u0142, co prawda kr\u0105\u017cy ju\u017c w sieci prawie tak d\u0142ugo, jak sama wersja beta, ale nadal mo\u017cna uzna\u0107 go za aktualny. Dla wszystkich zabieganych tradycyjnie przygotowali\u015bmy te\u017c telegraficzny skr\u00f3t zmian. \u00a0<\/p>\n    https:\/\/www.youtube.com\/watch?v=OC6g4yFsw0w\n    <p>Zacznijmy od frazesu, kt\u00f3ry musi pojawi\u0107 si\u0119 przy okazji ka\u017cdej wi\u0119kszej biblioteki: wraz z now\u0105 wersj\u0105 poprawiona zosta\u0142a stabilno\u015b\u0107 i inferowanie typ\u00f3w. Co ciekawe pojawi\u0142o si\u0119 r\u00f3wnie\u017c kilka alias\u00f3w na istniej\u0105ce funkcje, kt\u00f3re maj\u0105 lepiej opisywa\u0107 ich dzia\u0142anie.<\/p><p>Oklepane formu\u0142ki mamy za sob\u0105, wi\u0119c przejd\u017amy do konkret\u00f3w. Chyba najciekawsz\u0105 zmian\u0105 jest deprekacja metody .toPromise() i zast\u0105pienie jej dwoma bardziej opisowymi metodami. Kto korzystaj\u0105c z toPromise() nigdy nie zapomnia\u0142, \u017ce strumie\u0144 musi zosta\u0107 zamkni\u0119ty, niech pierwszy rzuci kamieniem (albo komentarzem na naszym Facebooku!). Nigdy wi\u0119cej source$.pipe(take(1)).toPromise(). I jak tu si\u0119 nie cieszy\u0107?<\/p><pre><code class=\"language-js\">const value_1 = await lastValueFrom(source$)\nconsole.log(value_1);\nconst value_2 = await firstValueFrom(source$);\nconsole.log(value_2);<\/code><\/pre><p>Na tym rzecz jasna zmiany si\u0119 nie ko\u0144cz\u0105. Nowa wersja RxJS wspiera AsyncIterable we wszystkich miejscach, gdzie wspierany jest Promise i Observable.<\/p><pre><code class=\"language-js\">async function* asyncTicker(message: string) {\n\tlet n = 0;\n\twhile(true) {\n\t\tawait sleep(100);\n\t\tyield message + \u2018 \u2018 + n++;\n\t}\n}\nof('Async Iterables!')\n\t.pipe(concatMap(msg =&gt; asyncTicker(msg))\n\t.subscribe(it =&gt; console.log(it));<\/code><\/pre><p>Opr\u00f3cz tego dodana zosta\u0142a funkcja animationFrames(), kt\u00f3ra w wygodny spos\u00f3b pozwala zasubskrybowa\u0107 si\u0119 na klatki animacji i zwraca czas, jaki up\u0142yn\u0105\u0142 od poprzedniej klatki. S\u0105 przypadki, kiedy pomo\u017ce to w wygodny spos\u00f3b tworzy\u0107 animacje, ale naprawd\u0119 elegancki spos\u00f3b to CSS animations i Web Animations API.<\/p><pre><code class=\"language-js\">animationFrame()\n    .subscribe(ellapsed =&gt;\n    \tconsole.log(`Time since last frame: ${ellapsed}`)\n    );<\/code><\/pre><p>Je\u015bli chodzi o breaking changes to my\u015bl\u0119, \u017ce warto wspomnie\u0107 tu o dw\u00f3ch z nich. Pierwsza dotyczy metody toPromise(), kt\u00f3ra zwraca\u0107 b\u0119dzie od teraz T | undefined. Jest to zmiana tylko w typowaniu, bo funkcja ta chyba od zawsze zwraca\u0142a undefined, je\u015bli strumie\u0144 zako\u0144czy\u0142 si\u0119 bez wyemitowania warto\u015bci. Niemniej jednak naprawa b\u0142\u0119d\u00f3w kompilacji mo\u017ce by\u0107 deczko uci\u0105\u017cliwa. Druga zmiana to usuni\u0119cie wsparcia dla subskrybcji z trzema funkcjami jako argumenty. Od teraz mo\u017cliwe b\u0119dzie albo podanie jednej funkcji albo obiektu, kt\u00f3ry zawiera\u0142 b\u0119dzie odpowiednio nazwane funkcje.<\/p><h2 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a:<\/h2><p><a href=\"https:\/\/github.com\/ReactiveX\/rxjs\/blob\/master\/CHANGELOG.md\">https:\/\/github.com\/ReactiveX\/rxjs\/blob\/master\/CHANGELOG.md<\/a><\/p><h1 id=\"2-powstaje-rome-tools-inc\">2. Powstaje Rome Tools, Inc.<\/h1><p>Powstanie Rome rok temu wzbudzi\u0142o spore zainteresowanie, ale szczerze m\u00f3wi\u0105c od tego czasu niewiele o nim s\u0142ysza\u0142em. Je\u015bli omin\u0119\u0142y Was zesz\u0142oroczne newsy, to Rome jest narz\u0119dziem od tw\u00f3rcy Babela i Yarna, kt\u00f3re obiecuje po\u0142\u0105czy\u0107 funkcjonalno\u015bci wielu narz\u0119dzi przydatnych w pracy z JavaScript, HTML i CSS w jednym miejscu. Rome ma instalowa\u0107 dependencje, sprawdza\u0107 kod, uruchamia\u0107 testy i budowa\u0107 paczki z kodem, a wszystko to z poziomu jednego CLI. Je\u015bli jeste\u015bcie zainteresowani zg\u0142\u0119bianiem tematu, to zosta\u0142 on dosy\u0107 dobrze opisany w po\u015bcie og\u0142aszaj\u0105cym powstanie projektu, kt\u00f3ry znajdziecie <a href=\"https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/\">tutaj<\/a>. Dlaczego wracamy dzi\u015b do tego narz\u0119dzia? Tw\u00f3rcy Rome zebrali 4.5 miliona dolar\u00f3w, otwieraj\u0105 w\u0142asn\u0105 firm\u0119 i obiecuj\u0105 zwi\u0119kszy\u0107 liczb\u0119 os\u00f3b zaanga\u017cowanych w projekt na pe\u0142ny etat. Patrz\u0105c na to, \u017ce kilka tygodni temu informowali\u015bmy Was <a href=\"https:\/\/deno.com\/blog\/the-deno-company\">o powstaniu Deno Company<\/a>, chyba mo\u017cemy m\u00f3wi\u0107 tutaj o ciekawym trendzie w\u015br\u00f3d rozwi\u0105za\u0144 Open Sourcowych. Czas poka\u017ce, czy takie podej\u015bcie wyjdzie wszystkim na dobre, ale na razie trzymamy kciuki za obydwa projekty.<\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>A co je\u015bli wszystkie drogi prowadz\u0105 do Rzymu i wszystkie inne narz\u0119dzia s\u0105 z g\u00f3ry skazane na pora\u017ck\u0119?<\/figcaption><\/figure><h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/\">https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/<\/a><\/p><h1 id=\"3v8-v91\">3.V8 v9.1<\/h1><p>W tym tygodniu dostali\u015bmy kolejn\u0105 wersj\u0119 V8, a wraz z ni\u0105 jedn\u0105 szczeg\u00f3lnie przydatn\u0105 funkcjonalno\u015b\u0107: top level async await. Czy tylko ja na ni\u0105 czeka\u0142em? <\/p><pre><code class=\"language-js\">\/\/ ---PREVIOUSLY---\nawait Promise.resolve(console.log(''));\n\/\/ \u2192 SyntaxError: await is only valid in async function\n(async function() {\n\tawait Promise.resolve(console.log(''));\n\/\/ \u2192 \n}());\n\/\/ ---NOW---\nawait Promise.resolve(console.log(''));\n\/\/ \u2192 <\/code><\/pre><p>Rzecz jasna nie jedyna nowo\u015b\u0107, ale notatka od tw\u00f3rc\u00f3w V8 podlinkowana poni\u017cej jest na tyle zwi\u0119z\u0142a, \u017ce chyba nie ma sensu pr\u00f3bowa\u0107 streszcza\u0107 jej jeszcze bardziej.<\/p><h3 id=\"%C5%BAr%C3%B3d%C5%82a-2\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/v8.dev\/blog\/v8-release-91\">https:\/\/v8.dev\/blog\/v8-release-91<\/a><\/p>","innerContent":["<h1 id=\"1-rxjs-70-nareszcie-opuszcza-bet%C4%99\">1. RxJS 7.0 nareszcie opuszcza bet\u0119<\/h1><p>RxJS 7.0 w wersji beta zosta\u0142 opublikowany w kwietniu zesz\u0142ego roku. W tym tygodniu, po ponad 12 miesi\u0105cach oczekiwania, wreszcie doczekali\u015bmy si\u0119 wydania stabilnej wersji. Je\u015bli macie wolne p\u00f3\u0142 godziny, to zach\u0119cam do ogl\u0105dni\u0119cia podlinkowanego poni\u017cej przegl\u0105du zmian od Bena Lesh (tw\u00f3rcy biblioteki). Materia\u0142, co prawda kr\u0105\u017cy ju\u017c w sieci prawie tak d\u0142ugo, jak sama wersja beta, ale nadal mo\u017cna uzna\u0107 go za aktualny. Dla wszystkich zabieganych tradycyjnie przygotowali\u015bmy te\u017c telegraficzny skr\u00f3t zmian. \u00a0<\/p>\n    https:\/\/www.youtube.com\/watch?v=OC6g4yFsw0w\n    <p>Zacznijmy od frazesu, kt\u00f3ry musi pojawi\u0107 si\u0119 przy okazji ka\u017cdej wi\u0119kszej biblioteki: wraz z now\u0105 wersj\u0105 poprawiona zosta\u0142a stabilno\u015b\u0107 i inferowanie typ\u00f3w. Co ciekawe pojawi\u0142o si\u0119 r\u00f3wnie\u017c kilka alias\u00f3w na istniej\u0105ce funkcje, kt\u00f3re maj\u0105 lepiej opisywa\u0107 ich dzia\u0142anie.<\/p><p>Oklepane formu\u0142ki mamy za sob\u0105, wi\u0119c przejd\u017amy do konkret\u00f3w. Chyba najciekawsz\u0105 zmian\u0105 jest deprekacja metody .toPromise() i zast\u0105pienie jej dwoma bardziej opisowymi metodami. Kto korzystaj\u0105c z toPromise() nigdy nie zapomnia\u0142, \u017ce strumie\u0144 musi zosta\u0107 zamkni\u0119ty, niech pierwszy rzuci kamieniem (albo komentarzem na naszym Facebooku!). Nigdy wi\u0119cej source$.pipe(take(1)).toPromise(). I jak tu si\u0119 nie cieszy\u0107?<\/p><pre><code class=\"language-js\">const value_1 = await lastValueFrom(source$)\nconsole.log(value_1);\nconst value_2 = await firstValueFrom(source$);\nconsole.log(value_2);<\/code><\/pre><p>Na tym rzecz jasna zmiany si\u0119 nie ko\u0144cz\u0105. Nowa wersja RxJS wspiera AsyncIterable we wszystkich miejscach, gdzie wspierany jest Promise i Observable.<\/p><pre><code class=\"language-js\">async function* asyncTicker(message: string) {\n\tlet n = 0;\n\twhile(true) {\n\t\tawait sleep(100);\n\t\tyield message + \u2018 \u2018 + n++;\n\t}\n}\nof('Async Iterables!')\n\t.pipe(concatMap(msg =&gt; asyncTicker(msg))\n\t.subscribe(it =&gt; console.log(it));<\/code><\/pre><p>Opr\u00f3cz tego dodana zosta\u0142a funkcja animationFrames(), kt\u00f3ra w wygodny spos\u00f3b pozwala zasubskrybowa\u0107 si\u0119 na klatki animacji i zwraca czas, jaki up\u0142yn\u0105\u0142 od poprzedniej klatki. S\u0105 przypadki, kiedy pomo\u017ce to w wygodny spos\u00f3b tworzy\u0107 animacje, ale naprawd\u0119 elegancki spos\u00f3b to CSS animations i Web Animations API.<\/p><pre><code class=\"language-js\">animationFrame()\n    .subscribe(ellapsed =&gt;\n    \tconsole.log(`Time since last frame: ${ellapsed}`)\n    );<\/code><\/pre><p>Je\u015bli chodzi o breaking changes to my\u015bl\u0119, \u017ce warto wspomnie\u0107 tu o dw\u00f3ch z nich. Pierwsza dotyczy metody toPromise(), kt\u00f3ra zwraca\u0107 b\u0119dzie od teraz T | undefined. Jest to zmiana tylko w typowaniu, bo funkcja ta chyba od zawsze zwraca\u0142a undefined, je\u015bli strumie\u0144 zako\u0144czy\u0142 si\u0119 bez wyemitowania warto\u015bci. Niemniej jednak naprawa b\u0142\u0119d\u00f3w kompilacji mo\u017ce by\u0107 deczko uci\u0105\u017cliwa. Druga zmiana to usuni\u0119cie wsparcia dla subskrybcji z trzema funkcjami jako argumenty. Od teraz mo\u017cliwe b\u0119dzie albo podanie jednej funkcji albo obiektu, kt\u00f3ry zawiera\u0142 b\u0119dzie odpowiednio nazwane funkcje.<\/p><h2 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a:<\/h2><p><a href=\"https:\/\/github.com\/ReactiveX\/rxjs\/blob\/master\/CHANGELOG.md\">https:\/\/github.com\/ReactiveX\/rxjs\/blob\/master\/CHANGELOG.md<\/a><\/p><h1 id=\"2-powstaje-rome-tools-inc\">2. Powstaje Rome Tools, Inc.<\/h1><p>Powstanie Rome rok temu wzbudzi\u0142o spore zainteresowanie, ale szczerze m\u00f3wi\u0105c od tego czasu niewiele o nim s\u0142ysza\u0142em. Je\u015bli omin\u0119\u0142y Was zesz\u0142oroczne newsy, to Rome jest narz\u0119dziem od tw\u00f3rcy Babela i Yarna, kt\u00f3re obiecuje po\u0142\u0105czy\u0107 funkcjonalno\u015bci wielu narz\u0119dzi przydatnych w pracy z JavaScript, HTML i CSS w jednym miejscu. Rome ma instalowa\u0107 dependencje, sprawdza\u0107 kod, uruchamia\u0107 testy i budowa\u0107 paczki z kodem, a wszystko to z poziomu jednego CLI. Je\u015bli jeste\u015bcie zainteresowani zg\u0142\u0119bianiem tematu, to zosta\u0142 on dosy\u0107 dobrze opisany w po\u015bcie og\u0142aszaj\u0105cym powstanie projektu, kt\u00f3ry znajdziecie <a href=\"https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/\">tutaj<\/a>. Dlaczego wracamy dzi\u015b do tego narz\u0119dzia? Tw\u00f3rcy Rome zebrali 4.5 miliona dolar\u00f3w, otwieraj\u0105 w\u0142asn\u0105 firm\u0119 i obiecuj\u0105 zwi\u0119kszy\u0107 liczb\u0119 os\u00f3b zaanga\u017cowanych w projekt na pe\u0142ny etat. Patrz\u0105c na to, \u017ce kilka tygodni temu informowali\u015bmy Was <a href=\"https:\/\/deno.com\/blog\/the-deno-company\">o powstaniu Deno Company<\/a>, chyba mo\u017cemy m\u00f3wi\u0107 tutaj o ciekawym trendzie w\u015br\u00f3d rozwi\u0105za\u0144 Open Sourcowych. Czas poka\u017ce, czy takie podej\u015bcie wyjdzie wszystkim na dobre, ale na razie trzymamy kciuki za obydwa projekty.<\/p><figure class=\"kg-card kg-image-card kg-card-hascaption\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0aa6b0062.gif\" class=\"kg-image\" alt loading=\"lazy\"><figcaption>A co je\u015bli wszystkie drogi prowadz\u0105 do Rzymu i wszystkie inne narz\u0119dzia s\u0105 z g\u00f3ry skazane na pora\u017ck\u0119?<\/figcaption><\/figure><h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/\">https:\/\/rome.tools\/blog\/announcing-rome-tools-inc\/<\/a><\/p><h1 id=\"3v8-v91\">3.V8 v9.1<\/h1><p>W tym tygodniu dostali\u015bmy kolejn\u0105 wersj\u0119 V8, a wraz z ni\u0105 jedn\u0105 szczeg\u00f3lnie przydatn\u0105 funkcjonalno\u015b\u0107: top level async await. Czy tylko ja na ni\u0105 czeka\u0142em? <\/p><pre><code class=\"language-js\">\/\/ ---PREVIOUSLY---\nawait Promise.resolve(console.log(''));\n\/\/ \u2192 SyntaxError: await is only valid in async function\n(async function() {\n\tawait Promise.resolve(console.log(''));\n\/\/ \u2192 \n}());\n\/\/ ---NOW---\nawait Promise.resolve(console.log(''));\n\/\/ \u2192 <\/code><\/pre><p>Rzecz jasna nie jedyna nowo\u015b\u0107, ale notatka od tw\u00f3rc\u00f3w V8 podlinkowana poni\u017cej jest na tyle zwi\u0119z\u0142a, \u017ce chyba nie ma sensu pr\u00f3bowa\u0107 streszcza\u0107 jej jeszcze bardziej.<\/p><h3 id=\"%C5%BAr%C3%B3d%C5%82a-2\">\u0179r\u00f3d\u0142a:<\/h3><p><a href=\"https:\/\/v8.dev\/blog\/v8-release-91\">https:\/\/v8.dev\/blog\/v8-release-91<\/a><\/p>"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10141","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=10141"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10141\/revisions"}],"predecessor-version":[{"id":10641,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10141\/revisions\/10641"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}