{"id":10123,"date":"2021-06-18T10:05:00","date_gmt":"2021-06-18T08:05:00","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-42\/"},"modified":"2022-09-19T13:16:41","modified_gmt":"2022-09-19T11:16:41","slug":"frontend-thursday-vol-42","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/","title":{"rendered":"Frontend Thursday (Friday?) vol. 42"},"content":{"rendered":"

1. V8 – Import assertions i JSON modules<\/h1>\n

Pojawienie si\u0119 w Chrome 91 import assertions i JSON modules jakim\u015b cudem przemkn\u0119\u0142o poza naszym radarem. Na szcz\u0119\u015bcie Google w swoim stylu nie omieszka\u0142 pochwali\u0107 si\u0119 t\u0105 funkcjonalno\u015bci\u0105 w osobnym blogpo\u015bcie. Ca\u0142o\u015b\u0107 jest o tyle ciekawa, \u017ce nowo\u015bci te nie przesz\u0142y jeszcze w ca\u0142o\u015bci procesu grupy TC39, wi\u0119c oficjalnie nie s\u0105 cz\u0119\u015bci\u0105 specyfikacji JavaScript. Przejd\u017amy jednak do konkret\u00f3w i w telegraficznym skr\u00f3cie przyjrzyjmy si\u0119, o co chodzi.<\/p>\n

Do tej pory, je\u015bli chcieli\u015bmy zaimportowa\u0107 plik JSON do naszego kodu (i nie chcieli\u015bmy u\u017cywa\u0107 pluginu do Webpacka), to zmuszeni byli\u015bmy opakowa\u0107 go w zmienn\u0105 i wyeksportowa\u0107 j\u0105 z pliku. Od teraz dzi\u0119ki po\u0142\u0105czeniu import assertions i JSON modules mo\u017cliwe b\u0119dzie importowanie plik\u00f3w JSON do naszego kodu w spos\u00f3b analogiczny do standardowych import\u00f3w.<\/p>\n

\/\/ foo.json\n{ "answer": 42 }\n\/\/ main.mjs\nimport json from '.\/foo.json' assert { type: 'json' };\nconsole.log(json.answer); \/\/ 42<\/code><\/pre>\n
Je\u015bli zastanawiacie si\u0119, dlaczego s\u0142owo kluczowe assert jest nam w og\u00f3le potrzebne, to jak zwykle odpowiedzi\u0105 jest bezpiecze\u0144stwo. W teorii ca\u0142y mechanizm mo\u017cna by oprze\u0107 o MIME Type, ale cz\u0119sto importujemy pliki od zewn\u0119trznych dostawc\u00f3w, kt\u00f3rzy mogliby podmieni\u0107 plik na taki, kt\u00f3ry wykonuje na naszym serwerze sw\u00f3j kod. Dzi\u0119ki odpowiedniej asercji taki atak sko\u0144czy si\u0119 fiaskiem.<\/p>\n
Przygl\u0105daj\u0105c si\u0119 draftowi import assertions, mo\u017cemy oczekiwa\u0107, \u017ce wkr\u00f3tce mo\u017cliwe b\u0119dzie importowanie tak\u017ce innych typ\u00f3w plik\u00f3w. Draft na ten moment wspomina o plikach WebAssembly, ale w mojej g\u0142owie k\u0142\u0119bi si\u0119 kilka pomys\u0142\u00f3w, o kt\u00f3re mo\u017cna by rozszerzy\u0107 ten mechanizm.<\/p>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/v8.dev\/features\/import-assertions<\/a><\/p>\n
2. Chrome memory inspector<\/h1>\n
Macie czasem ochot\u0119 wsi\u0105\u015b\u0107 do wehiku\u0142u czasu i wybra\u0107 si\u0119 w podr\u00f3\u017c do czas\u00f3w studi\u00f3w, zaj\u0119\u0107 z Assemblera i mikrokontroler\u00f3w? Dzi\u0119ki in\u017cynierom z Google mo\u017cecie wybra\u0107 si\u0119 na tak\u0105 wycieczk\u0119 ju\u017c dzi\u015b, bo do Chrome trafi\u0142 inspektor Memory Inspector umo\u017cliwiaj\u0105cy analiz\u0119 pami\u0119ci dla ArrayBuffer, TypedArray, DataView i Wasm Memory. W mojej karierze nigdy jeszcze nie pojawi\u0142a si\u0119 potrzeba tak dog\u0142\u0119bnej analizy, ale czuj\u0119 w ko\u015bciach, \u017ce ma\u0142y promil programist\u00f3w (zw\u0142aszcza tych korzystaj\u0105cych z WASM) jest teraz bardzo wdzi\u0119czny ludziom odpowiedzialnym za t\u0119 funkcj\u0119.<\/p>\n
\"\"<\/figure>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/developer.chrome.com\/blog\/memory-inspector\/<\/a><\/p>\n
3. Google przedstawia projekt Aurora<\/h1>\n
W dzisiejszym przegl\u0105dzie chyba ka\u017cdy punkt w mniejszym lub wi\u0119kszym stopniu obraca si\u0119 wok\u00f3\u0142 Google. Tym razem gigant z Mountain View chwali si\u0119 projektem o kodowej nazwie Aurora, w ramach kt\u00f3rego niewielki zesp\u00f3\u0142 b\u0119dzie wsp\u00f3\u0142pracowa\u0107 bezpo\u015brednio z tw\u00f3rcami framework\u00f3w w celu wprowadzania usprawnie\u0144 i optymalizacji. Nie jest to zupe\u0142nie nowa inicjatywa, bo w ramach dotychczasowych dzia\u0142a\u0144 wprowadzono ju\u017c kilka usprawnie\u0144 do Angulara i Next.js (np. automatyczne inlineowani czcionek w Angularze czy nowy komponent do \u0142adowania obraz\u00f3w w Next.js). W 2021 mo\u017cemy spodziewa\u0107 si\u0119 jeszcze kilku usprawnie\u0144, bo w planach jest praca nad zgodno\u015bci\u0105 najlepszych praktyk w\u015br\u00f3d wszystkich popularnych framework\u00f3w, optymalizacja pocz\u0105tkowego \u0142adowania stron i \u0142adowania zewn\u0119trznych skrypt\u00f3w.<\/p>\n
\"\"<\/figure>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/web.dev\/introducing-aurora\/<\/a><\/p>\n
4. Storybook dla Angular 12<\/h1>\n
Nowy silnik renderowania dla Angulara pojawi\u0142 si\u0119 ju\u017c prawie p\u00f3\u0142tora roku temu (ale\u017c ten czas leci ), ale dopiero teraz doczekali\u015bmy wersji Storybooka, kt\u00f3ra b\u0119dzie wspiera\u0107 ten silnik \u00a0(no prawie, bo p\u00f3ki co dost\u0119pny jest tylko RC, ale na dniach mo\u017cemy spodziewa\u0107 si\u0119 wersji bez przyrostka). Do nowej wersji trafia te\u017c wsparcie dla Webpack 5, z kt\u00f3rego korzysta Angular 12. Raczej nie ma tutaj powod\u00f3w do ekscytacji, ale podrzucamy Wam t\u0119 informacj\u0119, bo by\u0107 mo\u017ce jeste\u015bcie tak samo jak my zblokowani z migracj\u0105 do nowego Angulara w\u0142a\u015bnie ze wzgl\u0119du na problemy z kompatybilno\u015bci\u0105 z Storybookiem.<\/p>\n
\"\"<\/figure>\n
\u0179r\u00f3d\u0142a:<\/h3>\n
https:\/\/storybook.js.org\/blog\/storybook-for-angular-12\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
W tym tygodniu mamy dla Was import assertions i JSON modules w v8, nowy Chrome Memory Inspector, og\u0142oszenie projektu Aurora i d\u0142ugo wyczekiwany Storybook ze wsparciem dla Angulara 12.<\/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-10123","post","type-post","status-publish","format-standard","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"estimated_reading_time":"3"},"yoast_head":"\nFrontend Thursday (Friday?) vol. 42 - 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-42\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday (Friday?) vol. 42 - Vived\" \/>\n<meta property=\"og:description\" content=\"W tym tygodniu mamy dla Was import assertions i JSON modules w v8, nowy Chrome Memory Inspector, og\u0142oszenie projektu Aurora i d\u0142ugo wyczekiwany Storybook ze wsparciem dla Angulara 12.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-18T08:05: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_610d0952ef96f.png\" \/>\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-42\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday (Friday?) vol. 42\",\"datePublished\":\"2021-06-18T08:05:00+00:00\",\"dateModified\":\"2022-09-19T11:16:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/\"},\"wordCount\":658,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0952ef96f.png\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/\",\"name\":\"Frontend Thursday (Friday?) vol. 42 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0952ef96f.png\",\"datePublished\":\"2021-06-18T08:05:00+00:00\",\"dateModified\":\"2022-09-19T11:16:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0952ef96f.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0952ef96f.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday (Friday?) vol. 42\"}]},{\"@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 (Friday?) vol. 42 - 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-42\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday (Friday?) vol. 42 - Vived","og_description":"W tym tygodniu mamy dla Was import assertions i JSON modules w v8, nowy Chrome Memory Inspector, og\u0142oszenie projektu Aurora i d\u0142ugo wyczekiwany Storybook ze wsparciem dla Angulara 12.","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/","og_site_name":"Vived","article_published_time":"2021-06-18T08:05: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_610d0952ef96f.png","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-42\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday (Friday?) vol. 42","datePublished":"2021-06-18T08:05:00+00:00","dateModified":"2022-09-19T11:16:41+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/"},"wordCount":658,"commentCount":0,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0952ef96f.png","articleSection":["Frontend"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/","name":"Frontend Thursday (Friday?) vol. 42 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0952ef96f.png","datePublished":"2021-06-18T08:05:00+00:00","dateModified":"2022-09-19T11:16:41+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0952ef96f.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0952ef96f.png"},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-42\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday (Friday?) vol. 42"}]},{"@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-v8import-assertions-i-json-modules\">1. V8 - Import assertions i JSON modules<\/h1>\nPojawienie si\u0119 w Chrome 91 import assertions i JSON modules jakim\u015b cudem przemkn\u0119\u0142o poza naszym radarem. Na szcz\u0119\u015bcie Google w swoim stylu nie omieszka\u0142 pochwali\u0107 si\u0119 t\u0105 funkcjonalno\u015bci\u0105 w osobnym blogpo\u015bcie. Ca\u0142o\u015b\u0107 jest o tyle ciekawa, \u017ce nowo\u015bci te nie przesz\u0142y jeszcze w ca\u0142o\u015bci procesu grupy TC39, wi\u0119c oficjalnie nie s\u0105 cz\u0119\u015bci\u0105 specyfikacji JavaScript. Przejd\u017amy jednak do konkret\u00f3w i w telegraficznym skr\u00f3cie przyjrzyjmy si\u0119, o co chodzi.\n\nDo tej pory, je\u015bli chcieli\u015bmy zaimportowa\u0107 plik JSON do naszego kodu (i nie chcieli\u015bmy u\u017cywa\u0107 pluginu do Webpacka), to zmuszeni byli\u015bmy opakowa\u0107 go w zmienn\u0105 i wyeksportowa\u0107 j\u0105 z pliku. Od teraz dzi\u0119ki po\u0142\u0105czeniu import assertions i JSON modules mo\u017cliwe b\u0119dzie importowanie plik\u00f3w JSON do naszego kodu w spos\u00f3b analogiczny do standardowych import\u00f3w.\n<pre><code class=\"language-js\">\/\/ foo.json\n{ \"answer\": 42 }\n\/\/ main.mjs\nimport json from '.\/foo.json' assert { type: 'json' };\nconsole.log(json.answer); \/\/ 42<\/code><\/pre>\nJe\u015bli zastanawiacie si\u0119, dlaczego s\u0142owo kluczowe assert jest nam w og\u00f3le potrzebne, to jak zwykle odpowiedzi\u0105 jest bezpiecze\u0144stwo. W teorii ca\u0142y mechanizm mo\u017cna by oprze\u0107 o MIME Type, ale cz\u0119sto importujemy pliki od zewn\u0119trznych dostawc\u00f3w, kt\u00f3rzy mogliby podmieni\u0107 plik na taki, kt\u00f3ry wykonuje na naszym serwerze sw\u00f3j kod. Dzi\u0119ki odpowiedniej asercji taki atak sko\u0144czy si\u0119 fiaskiem.\n\nPrzygl\u0105daj\u0105c si\u0119 draftowi import assertions, mo\u017cemy oczekiwa\u0107, \u017ce wkr\u00f3tce mo\u017cliwe b\u0119dzie importowanie tak\u017ce innych typ\u00f3w plik\u00f3w. Draft na ten moment wspomina o plikach WebAssembly, ale w mojej g\u0142owie k\u0142\u0119bi si\u0119 kilka pomys\u0142\u00f3w, o kt\u00f3re mo\u017cna by rozszerzy\u0107 ten mechanizm.\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/v8.dev\/features\/import-assertions\">https:\/\/v8.dev\/features\/import-assertions<\/a>\n<h1 id=\"2-chrome-memory-inspector\">2. Chrome memory inspector<\/h1>\nMacie czasem ochot\u0119 wsi\u0105\u015b\u0107 do wehiku\u0142u czasu i wybra\u0107 si\u0119 w podr\u00f3\u017c do czas\u00f3w studi\u00f3w, zaj\u0119\u0107 z Assemblera i mikrokontroler\u00f3w? Dzi\u0119ki in\u017cynierom z Google mo\u017cecie wybra\u0107 si\u0119 na tak\u0105 wycieczk\u0119 ju\u017c dzi\u015b, bo do Chrome trafi\u0142 inspektor Memory Inspector umo\u017cliwiaj\u0105cy analiz\u0119 pami\u0119ci dla ArrayBuffer, TypedArray, DataView i Wasm Memory. W mojej karierze nigdy jeszcze nie pojawi\u0142a si\u0119 potrzeba tak dog\u0142\u0119bnej analizy, ale czuj\u0119 w ko\u015bciach, \u017ce ma\u0142y promil programist\u00f3w (zw\u0142aszcza tych korzystaj\u0105cych z WASM) jest teraz bardzo wdzi\u0119czny ludziom odpowiedzialnym za t\u0119 funkcj\u0119.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image aligncenter\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0952ef96f.png\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/developer.chrome.com\/blog\/memory-inspector\/\">https:\/\/developer.chrome.com\/blog\/memory-inspector\/<\/a>\n<h1 id=\"3-google-przedstawia-projekt-aurora\">3. Google przedstawia projekt Aurora<\/h1>\nW dzisiejszym przegl\u0105dzie chyba ka\u017cdy punkt w mniejszym lub wi\u0119kszym stopniu obraca si\u0119 wok\u00f3\u0142 Google. Tym razem gigant z Mountain View chwali si\u0119 projektem o kodowej nazwie Aurora, w ramach kt\u00f3rego niewielki zesp\u00f3\u0142 b\u0119dzie wsp\u00f3\u0142pracowa\u0107 bezpo\u015brednio z tw\u00f3rcami framework\u00f3w w celu wprowadzania usprawnie\u0144 i optymalizacji. Nie jest to zupe\u0142nie nowa inicjatywa, bo w ramach dotychczasowych dzia\u0142a\u0144 wprowadzono ju\u017c kilka usprawnie\u0144 do Angulara i Next.js (np. automatyczne inlineowani czcionek w Angularze czy nowy komponent do \u0142adowania obraz\u00f3w w Next.js). W 2021 mo\u017cemy spodziewa\u0107 si\u0119 jeszcze kilku usprawnie\u0144, bo w planach jest praca nad zgodno\u015bci\u0105 najlepszych praktyk w\u015br\u00f3d wszystkich popularnych framework\u00f3w, optymalizacja pocz\u0105tkowego \u0142adowania stron i \u0142adowania zewn\u0119trznych skrypt\u00f3w.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image aligncenter\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0953a68ee.png\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-2\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/web.dev\/introducing-aurora\/\">https:\/\/web.dev\/introducing-aurora\/<\/a>\n<h1 id=\"4-storybook-dla-angular-12\">4. Storybook dla Angular 12<\/h1>\nNowy silnik renderowania dla Angulara pojawi\u0142 si\u0119 ju\u017c prawie p\u00f3\u0142tora roku temu (ale\u017c ten czas leci ), ale dopiero teraz doczekali\u015bmy wersji Storybooka, kt\u00f3ra b\u0119dzie wspiera\u0107 ten silnik \u00a0(no prawie, bo p\u00f3ki co dost\u0119pny jest tylko RC, ale na dniach mo\u017cemy spodziewa\u0107 si\u0119 wersji bez przyrostka). Do nowej wersji trafia te\u017c wsparcie dla Webpack 5, z kt\u00f3rego korzysta Angular 12. Raczej nie ma tutaj powod\u00f3w do ekscytacji, ale podrzucamy Wam t\u0119 informacj\u0119, bo by\u0107 mo\u017ce jeste\u015bcie tak samo jak my zblokowani z migracj\u0105 do nowego Angulara w\u0142a\u015bnie ze wzgl\u0119du na problemy z kompatybilno\u015bci\u0105 z Storybookiem.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image aligncenter\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d095453648.gif\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-3\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/storybook.js.org\/blog\/storybook-for-angular-12\/\">https:\/\/storybook.js.org\/blog\/storybook-for-angular-12\/<\/a>","innerContent":["<h1 id=\"1-v8import-assertions-i-json-modules\">1. V8 - Import assertions i JSON modules<\/h1>\nPojawienie si\u0119 w Chrome 91 import assertions i JSON modules jakim\u015b cudem przemkn\u0119\u0142o poza naszym radarem. Na szcz\u0119\u015bcie Google w swoim stylu nie omieszka\u0142 pochwali\u0107 si\u0119 t\u0105 funkcjonalno\u015bci\u0105 w osobnym blogpo\u015bcie. Ca\u0142o\u015b\u0107 jest o tyle ciekawa, \u017ce nowo\u015bci te nie przesz\u0142y jeszcze w ca\u0142o\u015bci procesu grupy TC39, wi\u0119c oficjalnie nie s\u0105 cz\u0119\u015bci\u0105 specyfikacji JavaScript. Przejd\u017amy jednak do konkret\u00f3w i w telegraficznym skr\u00f3cie przyjrzyjmy si\u0119, o co chodzi.\n\nDo tej pory, je\u015bli chcieli\u015bmy zaimportowa\u0107 plik JSON do naszego kodu (i nie chcieli\u015bmy u\u017cywa\u0107 pluginu do Webpacka), to zmuszeni byli\u015bmy opakowa\u0107 go w zmienn\u0105 i wyeksportowa\u0107 j\u0105 z pliku. Od teraz dzi\u0119ki po\u0142\u0105czeniu import assertions i JSON modules mo\u017cliwe b\u0119dzie importowanie plik\u00f3w JSON do naszego kodu w spos\u00f3b analogiczny do standardowych import\u00f3w.\n<pre><code class=\"language-js\">\/\/ foo.json\n{ \"answer\": 42 }\n\/\/ main.mjs\nimport json from '.\/foo.json' assert { type: 'json' };\nconsole.log(json.answer); \/\/ 42<\/code><\/pre>\nJe\u015bli zastanawiacie si\u0119, dlaczego s\u0142owo kluczowe assert jest nam w og\u00f3le potrzebne, to jak zwykle odpowiedzi\u0105 jest bezpiecze\u0144stwo. W teorii ca\u0142y mechanizm mo\u017cna by oprze\u0107 o MIME Type, ale cz\u0119sto importujemy pliki od zewn\u0119trznych dostawc\u00f3w, kt\u00f3rzy mogliby podmieni\u0107 plik na taki, kt\u00f3ry wykonuje na naszym serwerze sw\u00f3j kod. Dzi\u0119ki odpowiedniej asercji taki atak sko\u0144czy si\u0119 fiaskiem.\n\nPrzygl\u0105daj\u0105c si\u0119 draftowi import assertions, mo\u017cemy oczekiwa\u0107, \u017ce wkr\u00f3tce mo\u017cliwe b\u0119dzie importowanie tak\u017ce innych typ\u00f3w plik\u00f3w. Draft na ten moment wspomina o plikach WebAssembly, ale w mojej g\u0142owie k\u0142\u0119bi si\u0119 kilka pomys\u0142\u00f3w, o kt\u00f3re mo\u017cna by rozszerzy\u0107 ten mechanizm.\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/v8.dev\/features\/import-assertions\">https:\/\/v8.dev\/features\/import-assertions<\/a>\n<h1 id=\"2-chrome-memory-inspector\">2. Chrome memory inspector<\/h1>\nMacie czasem ochot\u0119 wsi\u0105\u015b\u0107 do wehiku\u0142u czasu i wybra\u0107 si\u0119 w podr\u00f3\u017c do czas\u00f3w studi\u00f3w, zaj\u0119\u0107 z Assemblera i mikrokontroler\u00f3w? Dzi\u0119ki in\u017cynierom z Google mo\u017cecie wybra\u0107 si\u0119 na tak\u0105 wycieczk\u0119 ju\u017c dzi\u015b, bo do Chrome trafi\u0142 inspektor Memory Inspector umo\u017cliwiaj\u0105cy analiz\u0119 pami\u0119ci dla ArrayBuffer, TypedArray, DataView i Wasm Memory. W mojej karierze nigdy jeszcze nie pojawi\u0142a si\u0119 potrzeba tak dog\u0142\u0119bnej analizy, ale czuj\u0119 w ko\u015bciach, \u017ce ma\u0142y promil programist\u00f3w (zw\u0142aszcza tych korzystaj\u0105cych z WASM) jest teraz bardzo wdzi\u0119czny ludziom odpowiedzialnym za t\u0119 funkcj\u0119.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image aligncenter\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0952ef96f.png\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/developer.chrome.com\/blog\/memory-inspector\/\">https:\/\/developer.chrome.com\/blog\/memory-inspector\/<\/a>\n<h1 id=\"3-google-przedstawia-projekt-aurora\">3. Google przedstawia projekt Aurora<\/h1>\nW dzisiejszym przegl\u0105dzie chyba ka\u017cdy punkt w mniejszym lub wi\u0119kszym stopniu obraca si\u0119 wok\u00f3\u0142 Google. Tym razem gigant z Mountain View chwali si\u0119 projektem o kodowej nazwie Aurora, w ramach kt\u00f3rego niewielki zesp\u00f3\u0142 b\u0119dzie wsp\u00f3\u0142pracowa\u0107 bezpo\u015brednio z tw\u00f3rcami framework\u00f3w w celu wprowadzania usprawnie\u0144 i optymalizacji. Nie jest to zupe\u0142nie nowa inicjatywa, bo w ramach dotychczasowych dzia\u0142a\u0144 wprowadzono ju\u017c kilka usprawnie\u0144 do Angulara i Next.js (np. automatyczne inlineowani czcionek w Angularze czy nowy komponent do \u0142adowania obraz\u00f3w w Next.js). W 2021 mo\u017cemy spodziewa\u0107 si\u0119 jeszcze kilku usprawnie\u0144, bo w planach jest praca nad zgodno\u015bci\u0105 najlepszych praktyk w\u015br\u00f3d wszystkich popularnych framework\u00f3w, optymalizacja pocz\u0105tkowego \u0142adowania stron i \u0142adowania zewn\u0119trznych skrypt\u00f3w.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image aligncenter\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d0953a68ee.png\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-2\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/web.dev\/introducing-aurora\/\">https:\/\/web.dev\/introducing-aurora\/<\/a>\n<h1 id=\"4-storybook-dla-angular-12\">4. Storybook dla Angular 12<\/h1>\nNowy silnik renderowania dla Angulara pojawi\u0142 si\u0119 ju\u017c prawie p\u00f3\u0142tora roku temu (ale\u017c ten czas leci ), ale dopiero teraz doczekali\u015bmy wersji Storybooka, kt\u00f3ra b\u0119dzie wspiera\u0107 ten silnik \u00a0(no prawie, bo p\u00f3ki co dost\u0119pny jest tylko RC, ale na dniach mo\u017cemy spodziewa\u0107 si\u0119 wersji bez przyrostka). Do nowej wersji trafia te\u017c wsparcie dla Webpack 5, z kt\u00f3rego korzysta Angular 12. Raczej nie ma tutaj powod\u00f3w do ekscytacji, ale podrzucamy Wam t\u0119 informacj\u0119, bo by\u0107 mo\u017ce jeste\u015bcie tak samo jak my zblokowani z migracj\u0105 do nowego Angulara w\u0142a\u015bnie ze wzgl\u0119du na problemy z kompatybilno\u015bci\u0105 z Storybookiem.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image aligncenter\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d095453648.gif\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-3\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/storybook.js.org\/blog\/storybook-for-angular-12\/\">https:\/\/storybook.js.org\/blog\/storybook-for-angular-12\/<\/a>"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10123","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=10123"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10123\/revisions"}],"predecessor-version":[{"id":10635,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10123\/revisions\/10635"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}