{"id":10111,"date":"2021-07-15T12:51:35","date_gmt":"2021-07-15T10:51:35","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-46\/"},"modified":"2022-09-19T13:16:40","modified_gmt":"2022-09-19T11:16:40","slug":"frontend-thursday-vol-46","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/","title":{"rendered":"Frontend Thursday vol. 46"},"content":{"rendered":"<h1 id=\"1-vue-3-b%C4%99dzie-wspiera%C4%87-eksport-komponent%C3%B3w-jako-custom-elements\">1. Vue 3 b\u0119dzie wspiera\u0107 eksport komponent\u00f3w jako Custom Elements<\/h1>\n<p>Web Components na papierze s\u0105 \u015bwietn\u0105 koncepcj\u0105. Zamiast tworzy\u0107 bibliotek\u0119 podstawowych komponent\u00f3w w wybranym frameworku, mo\u017cemy postawi\u0107 na webowy standard i w efekcie nie uzale\u017cnia\u0107 si\u0119 od jednego konkretnego rozwi\u0105zania na najbli\u017cszych kilka lat. Niestety Web Components do dzisiaj nie zyska\u0142y (IMO) nale\u017cnej im popularno\u015bci i nie zmieni\u0142y tego nawet biblioteki takie jak Stencil.js, czy lit-elements, kt\u00f3re naprawia\u0142y wi\u0119kszo\u015b\u0107 problem\u00f3w ze standardowym API. W moim sercu ro\u015bnie jednak ziarnko nadziei, bo zar\u00f3wno Angular, jak i Vue coraz przychylniej patrz\u0105 na ten standard. Angular umo\u017cliwia eksportowanie komponent\u00f3w jako Custom Elements ju\u017c od wersji 6, a Vue 2 posiada\u0142o podobn\u0105 opcje przy wykorzystaniu biblioteki `@vue\/web-component-wrapper`. W tym tygodniu natomiast tw\u00f3rca Vue podzieli\u0142 si\u0119 na Twitterze informacj\u0105, \u017ce wsparcie dla Web Components zmierza do Vue 3 i b\u0119dzie ono cz\u0119\u015bci\u0105 biblioteki standardowej.<\/p>\n<figure class=\"kg-card kg-embed-card\">\n<blockquote class=\"twitter-tweet\">\n<p dir=\"ltr\" lang=\"en\">Coming soon: Core API for turning any Vue 3 component into a custom element.<\/p>\n<p>Works with most Vue APIs including props, emits, and even provide\/inject between nested Vue custom elements. Slots will render as native slot elements. <a href=\"https:\/\/t.co\/T4X1LL1fwj\">pic.twitter.com\/T4X1LL1fwj<\/a><\/p>\n<p>\u2014 Evan You (@youyuxi) <a href=\"https:\/\/twitter.com\/youyuxi\/status\/1414594164168269828?ref_src=twsrc%5Etfw\">July 12, 2021<\/a><\/p><\/blockquote>\n<p><script async=\"\" src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/figure>\n<p>Jak pewnie zauwa\u017cyli\u015bcie, do pe\u0142ni szcz\u0119\u015bcia brakuje nam jeszcze wsparcia najwi\u0119kszego gracza z wielkiej tr\u00f3jki, czyli Reacta. Co prawda ju\u017c teraz przy odrobinie zaparcia da si\u0119 zapakowa\u0107 reactowe komponenty w Custom Elements, ale fajnie by\u0142oby zobaczy\u0107 bardziej natywne podej\u015bcie. A no i samo wykorzystanie Custom Elements w Reactie mog\u0142oby by\u0107 troch\u0119 \u0142atwiejsze.<\/p>\n<h1 id=\"2-angular-team-rozpocz%C4%85%C5%82-prac%C4%99-nad-samodzielnymi-komponentami\">2. Angular Team rozpocz\u0105\u0142 prac\u0119 nad samodzielnymi komponentami<\/h1>\n<p>Je\u015bli \u015bledzicie nowo\u015bci dotycz\u0105ce roadmapy Angulara, to mogli\u015bcie spodziewa\u0107 si\u0119 tej informacji: rozpocz\u0119te zosta\u0142y prace nad komponentami dzia\u0142aj\u0105cymi bez angularowych modu\u0142\u00f3w. Na razie mamy do czynienia ze spikiem rozwi\u0105zania, wi\u0119c przed nami jeszcze ustalenie ostatecznego API i prawdopodobnie RFC do spo\u0142eczno\u015bci. Oznacza to, \u017ce samodzielnych komponent\u00f3w raczej nie zobaczymy w Angularze 13, ale ich pojawienie si\u0119 w w wersji 14 jest jak najbardziej realne. Osobi\u015bcie czekam z niecierpliwo\u015bci\u0105, bo modu\u0142y od zawsze by\u0142y dla mnie zb\u0119dnym kodem do utrzymania (szczeg\u00f3lnie irytuj\u0105cym, \u017ce w Vived stosujemy konwencj\u0119 jeden modu\u0142 &#8211; jeden komponent).<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.gif\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a:<\/h3>\n<p><a href=\"https:\/\/github.com\/angular\/angular\/pull\/42831\">https:\/\/github.com\/angular\/angular\/pull\/42831<\/a><\/p>\n<h1 id=\"3-dlaczego-npm-audit-nie-dzia%C5%82a\">3. Dlaczego npm audit nie dzia\u0142a<\/h1>\n<p>Sezon og\u00f3rkowy trwa w najlepsze, dlatego mam dla Was kolejn\u0105 nienewsow\u0105 rekomendacj\u0119, do przeczytania przy kawie. Przyznajcie si\u0119, kiedy po raz ostatni analizowali\u015bcie podatno\u015bci, jakie wypisuje npm przy instalacji zale\u017cno\u015bci? Je\u015bli tak samo jak ja dawno nauczyli\u015bcie si\u0119 je ignorowa\u0107, to podlinkowany artyku\u0142 przypomni wam nie tylko jak z\u0142y jest &#8222;developer experience&#8221; npm, ale te\u017c jakie kara mo\u017ce si\u0119 wi\u0105za\u0107 z tego typu zaniechaniem. Warto przeczyta\u0107, chocia\u017cby po to, aby przy kolejnym audycie lepiej wyt\u0142umaczy\u0107 si\u0119 z setek wy\u015bwietlanych na czerwono podatno\u015bci.<\/p>\n<figure class=\"kg-card kg-image-card\"><img decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044c997c7.png\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a:<\/h3>\n<p><a href=\"https:\/\/overreacted.io\/npm-audit-broken-by-design\/\">https:\/\/overreacted.io\/npm-audit-broken-by-design\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>W dzisiejszej edycji mamy dla Was wsparcie dla Custom Elements w Vue 3, rozpocz\u0119cie prac nad komponentami dzia\u0142aj\u0105cymi bez modu\u0142\u00f3w w Angularze i kawa\u0142ek dobrego tekstu o tym jak (nie)dzia\u0142\u0105 npm audit.<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-10111","post","type-post","status-publish","format-standard","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"estimated_reading_time":"2"},"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. 46 - 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-46\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 46 - Vived\" \/>\n<meta property=\"og:description\" content=\"W dzisiejszej edycji mamy dla Was wsparcie dla Custom Elements w Vue 3, rozpocz\u0119cie prac nad komponentami dzia\u0142aj\u0105cymi bez modu\u0142\u00f3w w Angularze i kawa\u0142ek dobrego tekstu o tym jak (nie)dzia\u0142\u0105 npm audit.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-15T10:51:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.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-46\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 46\",\"datePublished\":\"2021-07-15T10:51:35+00:00\",\"dateModified\":\"2022-09-19T11:16:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/\"},\"wordCount\":506,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.gif\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/\",\"name\":\"Frontend Thursday vol. 46 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.gif\",\"datePublished\":\"2021-07-15T10:51:35+00:00\",\"dateModified\":\"2022-09-19T11:16:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.gif\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 46\"}]},{\"@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. 46 - 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-46\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 46 - Vived","og_description":"W dzisiejszej edycji mamy dla Was wsparcie dla Custom Elements w Vue 3, rozpocz\u0119cie prac nad komponentami dzia\u0142aj\u0105cymi bez modu\u0142\u00f3w w Angularze i kawa\u0142ek dobrego tekstu o tym jak (nie)dzia\u0142\u0105 npm audit.","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/","og_site_name":"Vived","article_published_time":"2021-07-15T10:51:35+00:00","article_modified_time":"2022-09-19T11:16:40+00:00","og_image":[{"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.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-46\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 46","datePublished":"2021-07-15T10:51:35+00:00","dateModified":"2022-09-19T11:16:40+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/"},"wordCount":506,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.gif","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/","name":"Frontend Thursday vol. 46 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.gif","datePublished":"2021-07-15T10:51:35+00:00","dateModified":"2022-09-19T11:16:40+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.gif","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-46\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 46"}]},{"@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-vue-3-b%C4%99dzie-wspiera%C4%87-eksport-komponent%C3%B3w-jako-custom-elements\">1. Vue 3 b\u0119dzie wspiera\u0107 eksport komponent\u00f3w jako Custom Elements<\/h1>\nWeb Components na papierze s\u0105 \u015bwietn\u0105 koncepcj\u0105. Zamiast tworzy\u0107 bibliotek\u0119 podstawowych komponent\u00f3w w wybranym frameworku, mo\u017cemy postawi\u0107 na webowy standard i w efekcie nie uzale\u017cnia\u0107 si\u0119 od jednego konkretnego rozwi\u0105zania na najbli\u017cszych kilka lat. Niestety Web Components do dzisiaj nie zyska\u0142y (IMO) nale\u017cnej im popularno\u015bci i nie zmieni\u0142y tego nawet biblioteki takie jak Stencil.js, czy lit-elements, kt\u00f3re naprawia\u0142y wi\u0119kszo\u015b\u0107 problem\u00f3w ze standardowym API. W moim sercu ro\u015bnie jednak ziarnko nadziei, bo zar\u00f3wno Angular, jak i Vue coraz przychylniej patrz\u0105 na ten standard. Angular umo\u017cliwia eksportowanie komponent\u00f3w jako Custom Elements ju\u017c od wersji 6, a Vue 2 posiada\u0142o podobn\u0105 opcje przy wykorzystaniu biblioteki `@vue\/web-component-wrapper`. W tym tygodniu natomiast tw\u00f3rca Vue podzieli\u0142 si\u0119 na Twitterze informacj\u0105, \u017ce wsparcie dla Web Components zmierza do Vue 3 i b\u0119dzie ono cz\u0119\u015bci\u0105 biblioteki standardowej.\n<figure class=\"kg-card kg-embed-card\">\n<blockquote class=\"twitter-tweet\">\n<p dir=\"ltr\" lang=\"en\">Coming soon: Core API for turning any Vue 3 component into a custom element.<\/p>\nWorks with most Vue APIs including props, emits, and even provide\/inject between nested Vue custom elements. Slots will render as native slot elements. <a href=\"https:\/\/t.co\/T4X1LL1fwj\">pic.twitter.com\/T4X1LL1fwj<\/a>\n\n\u2014 Evan You (@youyuxi) <a href=\"https:\/\/twitter.com\/youyuxi\/status\/1414594164168269828?ref_src=twsrc%5Etfw\">July 12, 2021<\/a><\/blockquote>\n<script async=\"\" src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/figure>\nJak pewnie zauwa\u017cyli\u015bcie, do pe\u0142ni szcz\u0119\u015bcia brakuje nam jeszcze wsparcia najwi\u0119kszego gracza z wielkiej tr\u00f3jki, czyli Reacta. Co prawda ju\u017c teraz przy odrobinie zaparcia da si\u0119 zapakowa\u0107 reactowe komponenty w Custom Elements, ale fajnie by\u0142oby zobaczy\u0107 bardziej natywne podej\u015bcie. A no i samo wykorzystanie Custom Elements w Reactie mog\u0142oby by\u0107 troch\u0119 \u0142atwiejsze.\n<h1 id=\"2-angular-team-rozpocz%C4%85%C5%82-prac%C4%99-nad-samodzielnymi-komponentami\">2. Angular Team rozpocz\u0105\u0142 prac\u0119 nad samodzielnymi komponentami<\/h1>\nJe\u015bli \u015bledzicie nowo\u015bci dotycz\u0105ce roadmapy Angulara, to mogli\u015bcie spodziewa\u0107 si\u0119 tej informacji: rozpocz\u0119te zosta\u0142y prace nad komponentami dzia\u0142aj\u0105cymi bez angularowych modu\u0142\u00f3w. Na razie mamy do czynienia ze spikiem rozwi\u0105zania, wi\u0119c przed nami jeszcze ustalenie ostatecznego API i prawdopodobnie RFC do spo\u0142eczno\u015bci. Oznacza to, \u017ce samodzielnych komponent\u00f3w raczej nie zobaczymy w Angularze 13, ale ich pojawienie si\u0119 w w wersji 14 jest jak najbardziej realne. Osobi\u015bcie czekam z niecierpliwo\u015bci\u0105, bo modu\u0142y od zawsze by\u0142y dla mnie zb\u0119dnym kodem do utrzymania (szczeg\u00f3lnie irytuj\u0105cym, \u017ce w Vived stosujemy konwencj\u0119 jeden modu\u0142 - jeden komponent).\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.gif\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/github.com\/angular\/angular\/pull\/42831\">https:\/\/github.com\/angular\/angular\/pull\/42831<\/a>\n<h1 id=\"3-dlaczego-npm-audit-nie-dzia%C5%82a\">3. Dlaczego npm audit nie dzia\u0142a<\/h1>\nSezon og\u00f3rkowy trwa w najlepsze, dlatego mam dla Was kolejn\u0105 nienewsow\u0105 rekomendacj\u0119, do przeczytania przy kawie. Przyznajcie si\u0119, kiedy po raz ostatni analizowali\u015bcie podatno\u015bci, jakie wypisuje npm przy instalacji zale\u017cno\u015bci? Je\u015bli tak samo jak ja dawno nauczyli\u015bcie si\u0119 je ignorowa\u0107, to podlinkowany artyku\u0142 przypomni wam nie tylko jak z\u0142y jest \"developer experience\" npm, ale te\u017c jakie kara mo\u017ce si\u0119 wi\u0105za\u0107 z tego typu zaniechaniem. Warto przeczyta\u0107, chocia\u017cby po to, aby przy kolejnym audycie lepiej wyt\u0142umaczy\u0107 si\u0119 z setek wy\u015bwietlanych na czerwono podatno\u015bci.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044c997c7.png\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/overreacted.io\/npm-audit-broken-by-design\/\">https:\/\/overreacted.io\/npm-audit-broken-by-design\/<\/a>","innerContent":["<h1 id=\"1-vue-3-b%C4%99dzie-wspiera%C4%87-eksport-komponent%C3%B3w-jako-custom-elements\">1. Vue 3 b\u0119dzie wspiera\u0107 eksport komponent\u00f3w jako Custom Elements<\/h1>\nWeb Components na papierze s\u0105 \u015bwietn\u0105 koncepcj\u0105. Zamiast tworzy\u0107 bibliotek\u0119 podstawowych komponent\u00f3w w wybranym frameworku, mo\u017cemy postawi\u0107 na webowy standard i w efekcie nie uzale\u017cnia\u0107 si\u0119 od jednego konkretnego rozwi\u0105zania na najbli\u017cszych kilka lat. Niestety Web Components do dzisiaj nie zyska\u0142y (IMO) nale\u017cnej im popularno\u015bci i nie zmieni\u0142y tego nawet biblioteki takie jak Stencil.js, czy lit-elements, kt\u00f3re naprawia\u0142y wi\u0119kszo\u015b\u0107 problem\u00f3w ze standardowym API. W moim sercu ro\u015bnie jednak ziarnko nadziei, bo zar\u00f3wno Angular, jak i Vue coraz przychylniej patrz\u0105 na ten standard. Angular umo\u017cliwia eksportowanie komponent\u00f3w jako Custom Elements ju\u017c od wersji 6, a Vue 2 posiada\u0142o podobn\u0105 opcje przy wykorzystaniu biblioteki `@vue\/web-component-wrapper`. W tym tygodniu natomiast tw\u00f3rca Vue podzieli\u0142 si\u0119 na Twitterze informacj\u0105, \u017ce wsparcie dla Web Components zmierza do Vue 3 i b\u0119dzie ono cz\u0119\u015bci\u0105 biblioteki standardowej.\n<figure class=\"kg-card kg-embed-card\">\n<blockquote class=\"twitter-tweet\">\n<p dir=\"ltr\" lang=\"en\">Coming soon: Core API for turning any Vue 3 component into a custom element.<\/p>\nWorks with most Vue APIs including props, emits, and even provide\/inject between nested Vue custom elements. Slots will render as native slot elements. <a href=\"https:\/\/t.co\/T4X1LL1fwj\">pic.twitter.com\/T4X1LL1fwj<\/a>\n\n\u2014 Evan You (@youyuxi) <a href=\"https:\/\/twitter.com\/youyuxi\/status\/1414594164168269828?ref_src=twsrc%5Etfw\">July 12, 2021<\/a><\/blockquote>\n<script async=\"\" src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/figure>\nJak pewnie zauwa\u017cyli\u015bcie, do pe\u0142ni szcz\u0119\u015bcia brakuje nam jeszcze wsparcia najwi\u0119kszego gracza z wielkiej tr\u00f3jki, czyli Reacta. Co prawda ju\u017c teraz przy odrobinie zaparcia da si\u0119 zapakowa\u0107 reactowe komponenty w Custom Elements, ale fajnie by\u0142oby zobaczy\u0107 bardziej natywne podej\u015bcie. A no i samo wykorzystanie Custom Elements w Reactie mog\u0142oby by\u0107 troch\u0119 \u0142atwiejsze.\n<h1 id=\"2-angular-team-rozpocz%C4%85%C5%82-prac%C4%99-nad-samodzielnymi-komponentami\">2. Angular Team rozpocz\u0105\u0142 prac\u0119 nad samodzielnymi komponentami<\/h1>\nJe\u015bli \u015bledzicie nowo\u015bci dotycz\u0105ce roadmapy Angulara, to mogli\u015bcie spodziewa\u0107 si\u0119 tej informacji: rozpocz\u0119te zosta\u0142y prace nad komponentami dzia\u0142aj\u0105cymi bez angularowych modu\u0142\u00f3w. Na razie mamy do czynienia ze spikiem rozwi\u0105zania, wi\u0119c przed nami jeszcze ustalenie ostatecznego API i prawdopodobnie RFC do spo\u0142eczno\u015bci. Oznacza to, \u017ce samodzielnych komponent\u00f3w raczej nie zobaczymy w Angularze 13, ale ich pojawienie si\u0119 w w wersji 14 jest jak najbardziej realne. Osobi\u015bcie czekam z niecierpliwo\u015bci\u0105, bo modu\u0142y od zawsze by\u0142y dla mnie zb\u0119dnym kodem do utrzymania (szczeg\u00f3lnie irytuj\u0105cym, \u017ce w Vived stosujemy konwencj\u0119 jeden modu\u0142 - jeden komponent).\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044bd41e1.gif\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/github.com\/angular\/angular\/pull\/42831\">https:\/\/github.com\/angular\/angular\/pull\/42831<\/a>\n<h1 id=\"3-dlaczego-npm-audit-nie-dzia%C5%82a\">3. Dlaczego npm audit nie dzia\u0142a<\/h1>\nSezon og\u00f3rkowy trwa w najlepsze, dlatego mam dla Was kolejn\u0105 nienewsow\u0105 rekomendacj\u0119, do przeczytania przy kawie. Przyznajcie si\u0119, kiedy po raz ostatni analizowali\u015bcie podatno\u015bci, jakie wypisuje npm przy instalacji zale\u017cno\u015bci? Je\u015bli tak samo jak ja dawno nauczyli\u015bcie si\u0119 je ignorowa\u0107, to podlinkowany artyku\u0142 przypomni wam nie tylko jak z\u0142y jest \"developer experience\" npm, ale te\u017c jakie kara mo\u017ce si\u0119 wi\u0105za\u0107 z tego typu zaniechaniem. Warto przeczyta\u0107, chocia\u017cby po to, aby przy kolejnym audycie lepiej wyt\u0142umaczy\u0107 si\u0119 z setek wy\u015bwietlanych na czerwono podatno\u015bci.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_610d044c997c7.png\" alt=\"\" \/><\/figure>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a:<\/h3>\n<a href=\"https:\/\/overreacted.io\/npm-audit-broken-by-design\/\">https:\/\/overreacted.io\/npm-audit-broken-by-design\/<\/a>"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10111","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=10111"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10111\/revisions"}],"predecessor-version":[{"id":10631,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10111\/revisions\/10631"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}