{"id":10098,"date":"2021-08-12T14:53:24","date_gmt":"2021-08-12T12:53:24","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-50\/"},"modified":"2022-09-19T13:16:39","modified_gmt":"2022-09-19T11:16:39","slug":"frontend-thursday-vol-50","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/","title":{"rendered":"Frontend Thursday vol. 50"},"content":{"rendered":"<h2 id=\"1-wydano-vue-3-2\" data-num=1><a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3.2.html\">1. Wydano Vue 3.2<\/a><\/h2>\n<p>Ale si\u0119 ostatnio dzieje w \u015bwiatku Vue. Dopiero co tydzie\u0144 temu opisywali\u015bmy ostateczne przyklepanie tego najbardziej gor\u0105cego chi\u0144skiego towaru eksportowego \u015bwiata frontendu, to jeszcze w tym tygodniu ukaza\u0142a si\u0119 jego kolejna du\u017ca edycja. Co prawda do\u015b\u0107 niepozorny numerek 3.2 mo\u017ce nie robi wi\u0119kszego wra\u017cenia, ale pami\u0119tajmy, \u017ce to nie Google Chrome czy Firefox strzelaj\u0105ce nowymi majorami jak z karabinu.<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img loading=\"lazy\" decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/1_giphy-12.gif\" alt=\"\" width=\"480\" height=\"362\" \/><figcaption>Obie przegl\u0105darki ju\u017c nied\u0142ugo dobij\u0105 setki &#8211; ciekawe, czy ich tw\u00f3rcy szykuj\u0105 nam z tej okazji jak\u0105\u015b niespodziank\u0119.<\/figcaption><\/figure>\n<p>Nowe wydanie, o przepi\u0119knej nazwie Quintessential Quintuplets &#8211; co (chyba) nale\u017cy t\u0142umaczy\u0107 jako \u201ckwintesencjonalne pi\u0119cioraczki\u201d, poza sztampami typu \u201cpoprawa wydajno\u015bci\u201d przynosi te\u017c kilka bardziej mi\u0119sistych dodatk\u00f3w. Przyk\u0142adowo, eksperymentalna funkcjonalno\u015b\u0107 Single File Components &#8211; pliki z rozszerzeniem *.vue, zawieraj\u0105ce ca\u0142o\u015b\u0107 logiki, templatingu oraz stylowania konkretnego komponentu &#8211; doczeka\u0142y si\u0119 stabilnej wersji. ygl\u0105da to w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">&lt;script setup&gt;\n\timport { ref } from &#039;vue&#039;\n\tconst color = ref(&#039;red&#039;)\n&lt;\/script&gt;\n&lt;template&gt;\n\t&lt;button @click=&quot;color = color === &#039;red&#039; ? &#039;green&#039; : &#039;red&#039;&quot;&gt;\n\tColor is: {{ color }}\n\t&lt;\/button&gt;\n&lt;\/template&gt;\n&lt;style scoped&gt;\n\tbutton {\n\t\tcolor: v-bind(color);\n\t}\n&lt;\/style&gt;<\/code><\/pre>\n<p>Dla kogo\u015b, kto ma do\u015bwiadczenie z innymi frameworkami, pewnie jest to dosy\u0107 nietypowy spos\u00f3b dystrybucji kodu, aczkolwiek wci\u0105\u017c pami\u0119tam konsternacje, jak\u0105 w\u015br\u00f3d programist\u00f3w wzbudza\u0142y pliki *.jsx, dzi\u015b stanowi\u0105ce bardzo naturalny fragment ekosystemu.<\/p>\n<p>Vue 3.2 to r\u00f3wnie\u017c dalsze ulepszenia w kierunku wsparcia WebComponent\u00f3w oraz Server Side Rendering. Te pierwsze doczeka\u0142y si\u0119 mo\u017cliwo\u015bci banalnego tworzenia z \u201cnatywnych\u201d, vueowych komponent\u00f3w przy pomocy metody `defineCustomElement`, a tak\u017ce mocno rozbudowanej <a href=\"https:\/\/v3.vuejs.org\/guide\/web-components.html\">sekcji w dokumentacji<\/a>. SSR przynosi za\u015b mo\u017cliwo\u015b\u0107 renderowania aplikacji nie tylko w ramach runtime Node.js, ale r\u00f3wnie\u017c nowoczesnych rozwi\u0105za\u0144 takich jak Service Worker czy CloudFlare Workers.<\/p>\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img loading=\"lazy\" decoding=\"async\" class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/5_image-8.png\" alt=\"\" width=\"595\" height=\"605\" \/><figcaption>Wyczuwam w tym mocny uk\u0142on w stron\u0119 tak zwanego JAMStacka.<\/figcaption><\/figure>\n<p>Vue zdecydowanie idzie w ciekawym kierunku, wybieraj\u0105c dla siebie dosy\u0107 nieszablonow\u0105 \u015bcie\u017ck\u0119 i nie boj\u0105c si\u0119 wprowadza\u0107 sporych innowacji. B\u0119dziemy przygl\u0105da\u0107 si\u0119 dalszym poczynaniom tw\u00f3rc\u00f3w frameworku.<\/p>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a<\/h3>\n<ul>\n<li><a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3.2.html\">Vue 3.2 Released! | The Vue Point<\/a><\/li>\n<li><a href=\"https:\/\/v3.vuejs.org\/guide\/web-components.html\">Vue and Web Components | Vue.js<\/a><\/li>\n<\/ul>\n<h2 id=\"2-firefox-chce-jeszcze-bardziej-chronic-nasza-prywatnosc\" data-num=2><a href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/91.0\/releasenotes\/\">2. Firefox chce JESZCZE BARDZIEJ chroni\u0107 nasz\u0105 prywatno\u015b\u0107<\/a><\/h2>\n<p>Dopiero co wspomnia\u0142em o tym, jak kosmiczne numeracje maj\u0105 nowe wersje przegl\u0105darek, a tu prosz\u0119, przychodzi nam opisywa\u0107 w\u0142a\u015bnie dziewi\u0119\u0107dziesi\u0105te pierwsze (!) wydanie Firefoxa.<\/p>\n<p>\u017byjemy w czasach, \u017ce nowe wersje przegl\u0105darek przestaj\u0105 budzi\u0107 jakie\u015b du\u017ce emocje i raczej nie przykuwaj\u0105 wi\u0119kszej uwagi. Jednak czasem zdarza si\u0119, \u017ce w tym przyp\u0142ywie drobnych ulepsze\u0144 (wszyscy czekali\u015bmy na wi\u0119ksze bezpiecze\u0144stwo Gamepad API, prawda) pojawiaj\u0105 si\u0119 rzeczy realnie interesuj\u0105ce. Tak dzieje si\u0119 w przypadku nowego podej\u015bcia do Cookies przegl\u0105darki, kt\u00f3re zaprezentowali nam tw\u00f3rcy z Mozilli.<\/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_6128baf450c58.png\" alt=\"\" \/><\/figure>\n<p>Od pewnego czasu popularnym terminem (spopularyzowanym zreszt\u0105 przez nikogo innego jak w\u0142a\u015bnie tw\u00f3rc\u00f3w przegl\u0105darki z liskiem w logo) s\u0105 tak zwane Super Cookies. S\u0105 to szczeg\u00f3lnie mocne third-party cookies, kt\u00f3re potrafi\u0105 \u015bledzi\u0107 u\u017cytkownika nawet wtedy, gdy ten my\u015bli, \u017ce pozby\u0142 si\u0119 wszelkich zwi\u0105zk\u00f3w z dan\u0105 witryn\u0105. Rozwi\u0105zaniem zaproponowanym przez Firefox jest tak zwane <a href=\"https:\/\/blog.mozilla.org\/security\/2021\/08\/10\/firefox-91-introduces-enhanced-cookie-clearing\/\">ulepszone czyszczenie plik\u00f3w cookie (Enhanced Cookie Clearing).<\/a><\/p>\n<p>Przed ulepszonym czyszczeniem plik\u00f3w cookie, Firefox usuwa\u0142 dane tylko dla domeny okre\u015blonej przez u\u017cytkownika. Oznacza\u0142o to, \u017ce je\u015bli mia\u0142by\u015b wyczy\u015bci\u0107 pami\u0119\u0107 dla vived.io, Firefox usun\u0105\u0142 pami\u0119\u0107 vived.io i pozostawi\u0142 pami\u0119\u0107 wszelkich osadzonych na niej witryn (jak na przyk\u0142ad te powsta\u0142e w wyniku dodania na stronie \u201clajka\u201d Facebooka). Oznacza\u0142o to, \u017ce Facebook m\u00f3g\u0142 Ci\u0119 zidentyfikowa\u0107 i dalej \u015bledzi\u0107 przy nast\u0119pnej wizycie na vived.io. Teraz Firefox b\u0119dzie automatycznie pozbywa\u0142 si\u0119 r\u00f3wnie\u017c tych danych.<\/p>\n<p>Firefox przynosi te\u017c do\u015b\u0107 ciekaw\u0105 now\u0105 lokalizacj\u0119. \u00a0Ot\u00f3\u017c przegl\u0105darka posiada teraz r\u00f3wnie\u017c wersje dla <a href=\"https:\/\/pl.wikipedia.org\/wiki\/J%C4%99zyk_scots\">j\u0119zyka scots<\/a>. Informacja ta jest o tyle ciekawa, \u017ce pomimo i\u017c jest to j\u0119zyk u\u017cywany przez ponad milion mieszka\u0144c\u00f3w Szkocji, to Firefox jest jedn\u0105 z pierwszych du\u017cych aplikacji, kt\u00f3ra doda\u0142a dla niego wsparcie. Ca\u0142o\u015b\u0107 obi\u0142a si\u0119 nawet o <a href=\"https:\/\/www.thenational.scot\/news\/19494171.major-web-browser-first-available-scots-language\/\">narodowo\u015bciowe szkockie media<\/a>.<\/p>\n<p>Mo\u017cna to por\u00f3wna\u0107 do stworzenia kaszubskiego wariantu Firefoxa. Oba j\u0119zyki zreszt\u0105 maj\u0105 do\u015b\u0107 podobne wsparcie w standardach mi\u0119dzynarodowych, bowiem swoje kody dosta\u0142y dopiero w drugim wariancie ISO-639.<\/p>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a<\/h3>\n<ul>\n<li><a href=\"https:\/\/v8.dev\/blog\/v8-release-93\">V8 release v9.3 &#8211; Sparkplug batch compilation<\/a><\/li>\n<li><a href=\"https:\/\/pl.wikipedia.org\/wiki\/Algorytm_Nagle%27a\">Algorytm Nagle&#8217;a \u2013 Wikipedia, wolna encyklopedia<\/a><\/li>\n<li><a href=\"https:\/\/v8.dev\/features\/object-has-own\">Object.hasOwn \u00b7 V8<\/a><\/li>\n<li><a href=\"https:\/\/v8.dev\/features\/error-cause\">Error causes \u00b7 V8<\/a><\/li>\n<\/ul>\n<h2 id=\"3-v8-wprowadza-triki-przyspieszajace-chrome-spoiler-batching\" data-num=3><a href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/91.0\/releasenotes\/\">3. V8 wprowadza triki przy\u015bpieszaj\u0105ce Chrome (spoiler: batching) <\/a><\/h2>\n<p>Numeracja przegl\u0105darek rz\u0105dzi dzisiejsz\u0105 edycj\u0105, poniewa\u017c wraz z wersj\u0105 beta Chrome 93 ukaza\u0142a si\u0119 te\u017c nowa edycja V8 &#8211; silnika nap\u0119dzaj\u0105cego rozwi\u0105zanie Google.<\/p>\n<p>O Chromie mo\u017ce sobie jeszcze pogadamy, kiedy jego najnowsza edycja si\u0119 ustabilizuje, ale V8 w wersji 9.3 (czy to nie jest nieco rozs\u0105dniejsza numeracja?) posiada zmiany, na kt\u00f3rych chcieliby\u015bmy na moment zawiesi\u0107 oko. Powa\u017cnemu rozwini\u0119ciu uleg\u0142 bowiem Sparkplug, najnowszy z kluczowych komponent\u00f3w V8 &#8211; dodatkowy krok kompilacji, znajduj\u0105cy si\u0119 mi\u0119dzy interpretacj\u0105 bytecode (za kt\u00f3r\u0105 odpowiada Ignition &#8211; zap\u0142onu), a optymalizacj\u0105 kodu (co jest domen\u0105 TurboFana &#8211; \u015bwiec\u0105). In\u017cynierowie w Google pewnie w\u0142a\u015bnie w tej chwili zastanawiaj\u0105 si\u0119, jak dalej t\u0119 metafor\u0119 silnika rozwija\u0107. Czekam na \u201cuszczelk\u0119 pod g\u0142owic\u0105\u201d w V8.<\/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_6128baf5861e6.png\" alt=\"\" \/><\/figure>\n<p>O wdro\u017ceniu Sparkplug (co t\u0142umaczy\u0107 mo\u017cna na \u201c\u015bwiec\u0119 silnikow\u0105\u201d) przeczyta\u0107 mogli\u015bcie <a href=\"https:\/\/vived.io\/frontend-thursdaty-vol-40\/\">w naszej 40. edycji<\/a>, jednak zmiany z nowej wersji s\u0105 bardzo interesuj\u0105ce, dotykaj\u0105 bowiem domeny bezpiecze\u0144stwa. Ten po\u015bredni kompilator z powod\u00f3w bezpiecze\u0144stwa zmuszony jest u\u017cywa\u0107 metod zapisu do pami\u0119ci, kt\u00f3re posiadaj\u0105 pewien narzut wydajno\u015bciowy. W wi\u0119kszo\u015bci przypadk\u00f3w jest on niezauwa\u017calny, jednak mamy tutaj do czynienia z V8, a V8 jest w dzisiejszych czasach niezwykle wy\u017cy\u0142owanym oprogramowaniem, gdzie ka\u017cdy szczeg\u00f3\u0142 ma znaczenie. Okazuje si\u0119, \u017ce spos\u00f3b zapisu do pami\u0119ci r\u00f3wnie\u017c. Skoro jednak ka\u017cdorazowe wrzucenie danych do pami\u0119ci obarczone jest narzutem. Dlatego te\u017c tw\u00f3rcy wykorzystali tutaj jeden z do\u015b\u0107 standardowych trade-off\u00f3w <a href=\"https:\/\/pl.wikipedia.org\/wiki\/Algorytm_Nagle%27a\">znany z HTTP<\/a>, ale nie tylko: je\u015bli pojedyncze przes\u0142anie informacji jest drogie &#8211; batchuj. W ten spos\u00f3b nasza \u015awieca w znacz\u0105cy spos\u00f3b mo\u017ce ograniczy\u0107 ilo\u015b\u0107 odwo\u0142a\u0144 do pami\u0119ci, co jak twierdz\u0105 V8 redukuje efektywny czas kompilacji o nawet ponad 40%.<\/p>\n<p>To jednak nie wszystko. Wersja 8.3 przynosi te\u017c drobne, ale interesuj\u0105ce dodatki, je\u015bli chodzi o \u201cfeatury\u201d samego JavaScripta. Jednym z nich jest <a href=\"https:\/\/v8.dev\/features\/object-has-own\">alias nad Object.hasOwnProperty<\/a>, maj\u0105cy u\u0142atwi\u0107 u\u017cywanie tej metody w sytuacjach, gdy chcemy potraktowa\u0107 obiekt jako jeden z parametr\u00f3w wywo\u0142ania.<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">Object.hasOwn({ prop: 42 }, &#039;prop&#039;)<\/code><\/pre>\n<p>Druga ze zmian za\u015b to <a href=\"https:\/\/v8.dev\/features\/error-cause\">rozszerzenie obiektu Error o mo\u017cli<br \/>\nwo\u015b\u0107 przekazania dodatkowej przyczyny<\/a>, co mo\u017ce by\u0107 przydatne przy \u0142\u0105czeniu b\u0142\u0119d\u00f3w w logiczny ci\u0105g przyczynowo skutkowy:<\/p>\n<pre><code class=\"language-javascript\" data-line=\"\">const parentError = new Error(&#039;parent&#039;);\nconst error = new Error(&#039;parent&#039;, { cause: parentError });\nconsole.log(error.cause === parentError);<\/code><\/pre>\n<p>Wszystkie te dobroci ju\u017c nied\u0142ugo znajdziecie na swoich komputerach w Chrome 93.<\/p>\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-2\">\u0179r\u00f3d\u0142a<\/h3>\n<ul>\n<li><a href=\"https:\/\/v8.dev\/blog\/v8-release-93\">V8 release v9.3 &#8211; Sparkplug batch compilation<\/a><\/li>\n<li><a href=\"https:\/\/pl.wikipedia.org\/wiki\/Algorytm_Nagle%27a\">Algorytm Nagle&#8217;a \u2013 Wikipedia, wolna encyklopedia<\/a><\/li>\n<li><a href=\"https:\/\/v8.dev\/features\/object-has-own\">Object.hasOwn \u00b7 V8<\/a><\/li>\n<li><a href=\"https:\/\/v8.dev\/features\/error-cause\">Error causes \u00b7 V8<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>W dniu dzisiejszym trzy du\u017ce wydania: nowe Vue, dziewi\u0119\u0107dziesi\u0105ta pierwsza edycja Firefoxa z mas\u0105 usprawnie\u0144 do promocji oraz mega interesuj\u0105ce z in\u017cynierskiego punktu widzenia zmiany. Zapraszamy do lektury \ud83e\udd73<\/p>\n","protected":false},"author":10,"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-10098","post","type-post","status-publish","format-standard","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"estimated_reading_time":"6"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Frontend Thursday vol. 50 - 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-50\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 50 - Vived\" \/>\n<meta property=\"og:description\" content=\"W dniu dzisiejszym trzy du\u017ce wydania: nowe Vue, dziewi\u0119\u0107dziesi\u0105ta pierwsza edycja Firefoxa z mas\u0105 usprawnie\u0144 do promocji oraz mega interesuj\u0105ce z in\u017cynierskiego punktu widzenia zmiany. Zapraszamy do lektury \ud83e\udd73\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-12T12:53:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/1_giphy-12.gif\" \/>\n<meta name=\"author\" content=\"Artur Skowro\u0144ski\" \/>\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-50\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/frontend-thursday-vol-50\\\/\"},\"author\":{\"name\":\"Artur Skowro\u0144ski\",\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#\\\/schema\\\/person\\\/0eb0878110cb27edfbfe46e841fe6db3\"},\"headline\":\"Frontend Thursday vol. 50\",\"datePublished\":\"2021-08-12T12:53:24+00:00\",\"dateModified\":\"2022-09-19T11:16:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/frontend-thursday-vol-50\\\/\"},\"wordCount\":1146,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/frontend-thursday-vol-50\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vived.io\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/1_giphy-12.gif\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/vived.io\\\/pl\\\/frontend-thursday-vol-50\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/frontend-thursday-vol-50\\\/\",\"url\":\"https:\\\/\\\/vived.io\\\/pl\\\/frontend-thursday-vol-50\\\/\",\"name\":\"Frontend Thursday vol. 50 - Vived\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/frontend-thursday-vol-50\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/frontend-thursday-vol-50\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vived.io\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/1_giphy-12.gif\",\"datePublished\":\"2021-08-12T12:53:24+00:00\",\"dateModified\":\"2022-09-19T11:16:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/frontend-thursday-vol-50\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vived.io\\\/pl\\\/frontend-thursday-vol-50\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/frontend-thursday-vol-50\\\/#primaryimage\",\"url\":\"https:\\\/\\\/vived.io\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/1_giphy-12.gif\",\"contentUrl\":\"https:\\\/\\\/vived.io\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/1_giphy-12.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vived.io\\\/pl\\\/frontend-thursday-vol-50\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\\\/\\\/vived.io\\\/pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 50\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#website\",\"url\":\"https:\\\/\\\/3.68.244.71\\\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/3.68.244.71\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#organization\",\"name\":\"Vived\",\"url\":\"https:\\\/\\\/3.68.244.71\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#\\\/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:\\\/\\\/3.68.244.71\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/3.68.244.71\\\/#\\\/schema\\\/person\\\/0eb0878110cb27edfbfe46e841fe6db3\",\"name\":\"Artur Skowro\u0144ski\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/29055786486c8b9dc1507f2744221c5bdb8d7ef6e6217ced0326dd3296aea6ed?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/29055786486c8b9dc1507f2744221c5bdb8d7ef6e6217ced0326dd3296aea6ed?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/29055786486c8b9dc1507f2744221c5bdb8d7ef6e6217ced0326dd3296aea6ed?s=96&d=mm&r=g\",\"caption\":\"Artur Skowro\u0144ski\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frontend Thursday vol. 50 - 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-50\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 50 - Vived","og_description":"W dniu dzisiejszym trzy du\u017ce wydania: nowe Vue, dziewi\u0119\u0107dziesi\u0105ta pierwsza edycja Firefoxa z mas\u0105 usprawnie\u0144 do promocji oraz mega interesuj\u0105ce z in\u017cynierskiego punktu widzenia zmiany. Zapraszamy do lektury \ud83e\udd73","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/","og_site_name":"Vived","article_published_time":"2021-08-12T12:53:24+00:00","article_modified_time":"2022-09-19T11:16:39+00:00","og_image":[{"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/1_giphy-12.gif","type":"","width":"","height":""}],"author":"Artur Skowro\u0144ski","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/"},"author":{"name":"Artur Skowro\u0144ski","@id":"https:\/\/3.68.244.71\/#\/schema\/person\/0eb0878110cb27edfbfe46e841fe6db3"},"headline":"Frontend Thursday vol. 50","datePublished":"2021-08-12T12:53:24+00:00","dateModified":"2022-09-19T11:16:39+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/"},"wordCount":1146,"commentCount":0,"publisher":{"@id":"https:\/\/3.68.244.71\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/1_giphy-12.gif","articleSection":["Frontend"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/","name":"Frontend Thursday vol. 50 - Vived","isPartOf":{"@id":"https:\/\/3.68.244.71\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/1_giphy-12.gif","datePublished":"2021-08-12T12:53:24+00:00","dateModified":"2022-09-19T11:16:39+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/1_giphy-12.gif","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/1_giphy-12.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-50\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 50"}]},{"@type":"WebSite","@id":"https:\/\/3.68.244.71\/#website","url":"https:\/\/3.68.244.71\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/3.68.244.71\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/3.68.244.71\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/3.68.244.71\/#organization","name":"Vived","url":"https:\/\/3.68.244.71\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/3.68.244.71\/#\/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:\/\/3.68.244.71\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/3.68.244.71\/#\/schema\/person\/0eb0878110cb27edfbfe46e841fe6db3","name":"Artur Skowro\u0144ski","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/secure.gravatar.com\/avatar\/29055786486c8b9dc1507f2744221c5bdb8d7ef6e6217ced0326dd3296aea6ed?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/29055786486c8b9dc1507f2744221c5bdb8d7ef6e6217ced0326dd3296aea6ed?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/29055786486c8b9dc1507f2744221c5bdb8d7ef6e6217ced0326dd3296aea6ed?s=96&d=mm&r=g","caption":"Artur Skowro\u0144ski"}}]}},"blocks_vived":[{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"<h2 id=\"1-wydano-vue-32-%F0%9F%A5%B3\"><a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3.2.html\">1. Wydano Vue 3.2<\/a><\/h2>\nAle si\u0119 ostatnio dzieje w \u015bwiatku Vue. Dopiero co tydzie\u0144 temu opisywali\u015bmy ostateczne przyklepanie tego najbardziej gor\u0105cego chi\u0144skiego towaru eksportowego \u015bwiata frontendu, to jeszcze w tym tygodniu ukaza\u0142a si\u0119 jego kolejna du\u017ca edycja. Co prawda do\u015b\u0107 niepozorny numerek 3.2 mo\u017ce nie robi wi\u0119kszego wra\u017cenia, ale pami\u0119tajmy, \u017ce to nie Google Chrome czy Firefox strzelaj\u0105ce nowymi majorami jak z karabinu.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/1_giphy-12.gif\" alt=\"\" width=\"480\" height=\"362\" \/>\n<figcaption>Obie przegl\u0105darki ju\u017c nied\u0142ugo dobij\u0105 setki - ciekawe, czy ich tw\u00f3rcy szykuj\u0105 nam z tej okazji jak\u0105\u015b niespodziank\u0119.<\/figcaption><\/figure>\nNowe wydanie, o przepi\u0119knej nazwie Quintessential Quintuplets - co (chyba) nale\u017cy t\u0142umaczy\u0107 jako \u201ckwintesencjonalne pi\u0119cioraczki\u201d, poza sztampami typu \u201cpoprawa wydajno\u015bci\u201d przynosi te\u017c kilka bardziej mi\u0119sistych dodatk\u00f3w. Przyk\u0142adowo, eksperymentalna funkcjonalno\u015b\u0107 Single File Components - pliki z rozszerzeniem *.vue, zawieraj\u0105ce ca\u0142o\u015b\u0107 logiki, templatingu oraz stylowania konkretnego komponentu - doczeka\u0142y si\u0119 stabilnej wersji. ygl\u0105da to w nast\u0119puj\u0105cy spos\u00f3b:\n<pre><code class=\"language-javascript\">&lt;script setup&gt;\n\timport { ref } from 'vue'\n\tconst color = ref('red')\n&lt;\/script&gt;\n&lt;template&gt;\n\t&lt;button @click=\"color = color === 'red' ? 'green' : 'red'\"&gt;\n\tColor is: {{ color }}\n\t&lt;\/button&gt;\n&lt;\/template&gt;\n&lt;style scoped&gt;\n\tbutton {\n\t\tcolor: v-bind(color);\n\t}\n&lt;\/style&gt;<\/code><\/pre>\nDla kogo\u015b, kto ma do\u015bwiadczenie z innymi frameworkami, pewnie jest to dosy\u0107 nietypowy spos\u00f3b dystrybucji kodu, aczkolwiek wci\u0105\u017c pami\u0119tam konsternacje, jak\u0105 w\u015br\u00f3d programist\u00f3w wzbudza\u0142y pliki *.jsx, dzi\u015b stanowi\u0105ce bardzo naturalny fragment ekosystemu.\n\nVue 3.2 to r\u00f3wnie\u017c dalsze ulepszenia w kierunku wsparcia WebComponent\u00f3w oraz Server Side Rendering. Te pierwsze doczeka\u0142y si\u0119 mo\u017cliwo\u015bci banalnego tworzenia z \u201cnatywnych\u201d, vueowych komponent\u00f3w przy pomocy metody `defineCustomElement`, a tak\u017ce mocno rozbudowanej <a href=\"https:\/\/v3.vuejs.org\/guide\/web-components.html\">sekcji w dokumentacji<\/a>. SSR przynosi za\u015b mo\u017cliwo\u015b\u0107 renderowania aplikacji nie tylko w ramach runtime Node.js, ale r\u00f3wnie\u017c nowoczesnych rozwi\u0105za\u0144 takich jak Service Worker czy CloudFlare Workers.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/5_image-8.png\" alt=\"\" width=\"595\" height=\"605\" \/>\n\n<figcaption>Wyczuwam w tym mocny uk\u0142on w stron\u0119 tak zwanego JAMStacka.<\/figcaption><\/figure>\nVue zdecydowanie idzie w ciekawym kierunku, wybieraj\u0105c dla siebie dosy\u0107 nieszablonow\u0105 \u015bcie\u017ck\u0119 i nie boj\u0105c si\u0119 wprowadza\u0107 sporych innowacji. B\u0119dziemy przygl\u0105da\u0107 si\u0119 dalszym poczynaniom tw\u00f3rc\u00f3w frameworku.\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a<\/h3>\n<ul>\n \t<li><a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3.2.html\">Vue 3.2 Released! | The Vue Point<\/a><\/li>\n \t<li><a href=\"https:\/\/v3.vuejs.org\/guide\/web-components.html\">Vue and Web Components | Vue.js<\/a><\/li>\n<\/ul>\n<h2 id=\"2-firefox-chce-jeszcze-bardziej-chroni%C4%87-nasz%C4%85-prywatno%C5%9B%C4%87-%F0%9F%A6%8A\"><a href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/91.0\/releasenotes\/\">2. Firefox chce JESZCZE BARDZIEJ chroni\u0107 nasz\u0105 prywatno\u015b\u0107<\/a><\/h2>\nDopiero co wspomnia\u0142em o tym, jak kosmiczne numeracje maj\u0105 nowe wersje przegl\u0105darek, a tu prosz\u0119, przychodzi nam opisywa\u0107 w\u0142a\u015bnie dziewi\u0119\u0107dziesi\u0105te pierwsze (!) wydanie Firefoxa.\n\n\u017byjemy w czasach, \u017ce nowe wersje przegl\u0105darek przestaj\u0105 budzi\u0107 jakie\u015b du\u017ce emocje i raczej nie przykuwaj\u0105 wi\u0119kszej uwagi. Jednak czasem zdarza si\u0119, \u017ce w tym przyp\u0142ywie drobnych ulepsze\u0144 (wszyscy czekali\u015bmy na wi\u0119ksze bezpiecze\u0144stwo Gamepad API, prawda) pojawiaj\u0105 si\u0119 rzeczy realnie interesuj\u0105ce. Tak dzieje si\u0119 w przypadku nowego podej\u015bcia do Cookies przegl\u0105darki, kt\u00f3re zaprezentowali nam tw\u00f3rcy z Mozilli.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128baf450c58.png\" alt=\"\" \/><\/figure>\nOd pewnego czasu popularnym terminem (spopularyzowanym zreszt\u0105 przez nikogo innego jak w\u0142a\u015bnie tw\u00f3rc\u00f3w przegl\u0105darki z liskiem w logo) s\u0105 tak zwane Super Cookies. S\u0105 to szczeg\u00f3lnie mocne third-party cookies, kt\u00f3re potrafi\u0105 \u015bledzi\u0107 u\u017cytkownika nawet wtedy, gdy ten my\u015bli, \u017ce pozby\u0142 si\u0119 wszelkich zwi\u0105zk\u00f3w z dan\u0105 witryn\u0105. Rozwi\u0105zaniem zaproponowanym przez Firefox jest tak zwane <a href=\"https:\/\/blog.mozilla.org\/security\/2021\/08\/10\/firefox-91-introduces-enhanced-cookie-clearing\/\">ulepszone czyszczenie plik\u00f3w cookie (Enhanced Cookie Clearing).<\/a>\n\nPrzed ulepszonym czyszczeniem plik\u00f3w cookie, Firefox usuwa\u0142 dane tylko dla domeny okre\u015blonej przez u\u017cytkownika. Oznacza\u0142o to, \u017ce je\u015bli mia\u0142by\u015b wyczy\u015bci\u0107 pami\u0119\u0107 dla vived.io, Firefox usun\u0105\u0142 pami\u0119\u0107 vived.io i pozostawi\u0142 pami\u0119\u0107 wszelkich osadzonych na niej witryn (jak na przyk\u0142ad te powsta\u0142e w wyniku dodania na stronie \u201clajka\u201d Facebooka). Oznacza\u0142o to, \u017ce Facebook m\u00f3g\u0142 Ci\u0119 zidentyfikowa\u0107 i dalej \u015bledzi\u0107 przy nast\u0119pnej wizycie na vived.io. Teraz Firefox b\u0119dzie automatycznie pozbywa\u0142 si\u0119 r\u00f3wnie\u017c tych danych.\n\nFirefox przynosi te\u017c do\u015b\u0107 ciekaw\u0105 now\u0105 lokalizacj\u0119. \u00a0Ot\u00f3\u017c przegl\u0105darka posiada teraz r\u00f3wnie\u017c wersje dla <a href=\"https:\/\/pl.wikipedia.org\/wiki\/J%C4%99zyk_scots\">j\u0119zyka scots<\/a>. Informacja ta jest o tyle ciekawa, \u017ce pomimo i\u017c jest to j\u0119zyk u\u017cywany przez ponad milion mieszka\u0144c\u00f3w Szkocji, to Firefox jest jedn\u0105 z pierwszych du\u017cych aplikacji, kt\u00f3ra doda\u0142a dla niego wsparcie. Ca\u0142o\u015b\u0107 obi\u0142a si\u0119 nawet o <a href=\"https:\/\/www.thenational.scot\/news\/19494171.major-web-browser-first-available-scots-language\/\">narodowo\u015bciowe szkockie media<\/a>.\n\nMo\u017cna to por\u00f3wna\u0107 do stworzenia kaszubskiego wariantu Firefoxa. Oba j\u0119zyki zreszt\u0105 maj\u0105 do\u015b\u0107 podobne wsparcie w standardach mi\u0119dzynarodowych, bowiem swoje kody dosta\u0142y dopiero w drugim wariancie ISO-639.\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a<\/h3>\n<ul>\n \t<li><a href=\"https:\/\/v8.dev\/blog\/v8-release-93\">V8 release v9.3 - Sparkplug batch compilation<\/a><\/li>\n \t<li><a href=\"https:\/\/pl.wikipedia.org\/wiki\/Algorytm_Nagle%27a\">Algorytm Nagle'a \u2013 Wikipedia, wolna encyklopedia<\/a><\/li>\n \t<li><a href=\"https:\/\/v8.dev\/features\/object-has-own\">Object.hasOwn \u00b7 V8<\/a><\/li>\n \t<li><a href=\"https:\/\/v8.dev\/features\/error-cause\">Error causes \u00b7 V8<\/a><\/li>\n<\/ul>\n<h2 id=\"3-v8-wprowadza-triki-przy%C5%9Bpieszaj%C4%85ce-chrome-spoiler-batching-%F0%9F%8F%8E\"><a href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/91.0\/releasenotes\/\">3. V8 wprowadza triki przy\u015bpieszaj\u0105ce Chrome (spoiler: batching) <\/a><\/h2>\nNumeracja przegl\u0105darek rz\u0105dzi dzisiejsz\u0105 edycj\u0105, poniewa\u017c wraz z wersj\u0105 beta Chrome 93 ukaza\u0142a si\u0119 te\u017c nowa edycja V8 - silnika nap\u0119dzaj\u0105cego rozwi\u0105zanie Google.\n\nO Chromie mo\u017ce sobie jeszcze pogadamy, kiedy jego najnowsza edycja si\u0119 ustabilizuje, ale V8 w wersji 9.3 (czy to nie jest nieco rozs\u0105dniejsza numeracja?) posiada zmiany, na kt\u00f3rych chcieliby\u015bmy na moment zawiesi\u0107 oko. Powa\u017cnemu rozwini\u0119ciu uleg\u0142 bowiem Sparkplug, najnowszy z kluczowych komponent\u00f3w V8 - dodatkowy krok kompilacji, znajduj\u0105cy si\u0119 mi\u0119dzy interpretacj\u0105 bytecode (za kt\u00f3r\u0105 odpowiada Ignition - zap\u0142onu), a optymalizacj\u0105 kodu (co jest domen\u0105 TurboFana - \u015bwiec\u0105). In\u017cynierowie w Google pewnie w\u0142a\u015bnie w tej chwili zastanawiaj\u0105 si\u0119, jak dalej t\u0119 metafor\u0119 silnika rozwija\u0107. Czekam na \u201cuszczelk\u0119 pod g\u0142owic\u0105\u201d w V8.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128baf5861e6.png\" alt=\"\" \/><\/figure>\nO wdro\u017ceniu Sparkplug (co t\u0142umaczy\u0107 mo\u017cna na \u201c\u015bwiec\u0119 silnikow\u0105\u201d) przeczyta\u0107 mogli\u015bcie <a href=\"https:\/\/vived.io\/frontend-thursdaty-vol-40\/\">w naszej 40. edycji<\/a>, jednak zmiany z nowej wersji s\u0105 bardzo interesuj\u0105ce, dotykaj\u0105 bowiem domeny bezpiecze\u0144stwa. Ten po\u015bredni kompilator z powod\u00f3w bezpiecze\u0144stwa zmuszony jest u\u017cywa\u0107 metod zapisu do pami\u0119ci, kt\u00f3re posiadaj\u0105 pewien narzut wydajno\u015bciowy. W wi\u0119kszo\u015bci przypadk\u00f3w jest on niezauwa\u017calny, jednak mamy tutaj do czynienia z V8, a V8 jest w dzisiejszych czasach niezwykle wy\u017cy\u0142owanym oprogramowaniem, gdzie ka\u017cdy szczeg\u00f3\u0142 ma znaczenie. Okazuje si\u0119, \u017ce spos\u00f3b zapisu do pami\u0119ci r\u00f3wnie\u017c. Skoro jednak ka\u017cdorazowe wrzucenie danych do pami\u0119ci obarczone jest narzutem. Dlatego te\u017c tw\u00f3rcy wykorzystali tutaj jeden z do\u015b\u0107 standardowych trade-off\u00f3w <a href=\"https:\/\/pl.wikipedia.org\/wiki\/Algorytm_Nagle%27a\">znany z HTTP<\/a>, ale nie tylko: je\u015bli pojedyncze przes\u0142anie informacji jest drogie - batchuj. W ten spos\u00f3b nasza \u015awieca w znacz\u0105cy spos\u00f3b mo\u017ce ograniczy\u0107 ilo\u015b\u0107 odwo\u0142a\u0144 do pami\u0119ci, co jak twierdz\u0105 V8 redukuje efektywny czas kompilacji o nawet ponad 40%.\n\nTo jednak nie wszystko. Wersja 8.3 przynosi te\u017c drobne, ale interesuj\u0105ce dodatki, je\u015bli chodzi o \u201cfeatury\u201d samego JavaScripta. Jednym z nich jest <a href=\"https:\/\/v8.dev\/features\/object-has-own\">alias nad Object.hasOwnProperty<\/a>, maj\u0105cy u\u0142atwi\u0107 u\u017cywanie tej metody w sytuacjach, gdy chcemy potraktowa\u0107 obiekt jako jeden z parametr\u00f3w wywo\u0142ania.\n<pre><code class=\"language-javascript\">Object.hasOwn({ prop: 42 }, 'prop')<\/code><\/pre>\nDruga ze zmian za\u015b to <a href=\"https:\/\/v8.dev\/features\/error-cause\">rozszerzenie obiektu Error o mo\u017cli\nwo\u015b\u0107 przekazania dodatkowej przyczyny<\/a>, co mo\u017ce by\u0107 przydatne przy \u0142\u0105czeniu b\u0142\u0119d\u00f3w w logiczny ci\u0105g przyczynowo skutkowy:\n<pre><code class=\"language-javascript\">const parentError = new Error('parent');\nconst error = new Error('parent', { cause: parentError });\nconsole.log(error.cause === parentError);<\/code><\/pre>\nWszystkie te dobroci ju\u017c nied\u0142ugo znajdziecie na swoich komputerach w Chrome 93.\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-2\">\u0179r\u00f3d\u0142a<\/h3>\n<ul>\n \t<li><a href=\"https:\/\/v8.dev\/blog\/v8-release-93\">V8 release v9.3 - Sparkplug batch compilation<\/a><\/li>\n \t<li><a href=\"https:\/\/pl.wikipedia.org\/wiki\/Algorytm_Nagle%27a\">Algorytm Nagle'a \u2013 Wikipedia, wolna encyklopedia<\/a><\/li>\n \t<li><a href=\"https:\/\/v8.dev\/features\/object-has-own\">Object.hasOwn \u00b7 V8<\/a><\/li>\n \t<li><a href=\"https:\/\/v8.dev\/features\/error-cause\">Error causes \u00b7 V8<\/a><\/li>\n<\/ul>","innerContent":["<h2 id=\"1-wydano-vue-32-%F0%9F%A5%B3\"><a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3.2.html\">1. Wydano Vue 3.2<\/a><\/h2>\nAle si\u0119 ostatnio dzieje w \u015bwiatku Vue. Dopiero co tydzie\u0144 temu opisywali\u015bmy ostateczne przyklepanie tego najbardziej gor\u0105cego chi\u0144skiego towaru eksportowego \u015bwiata frontendu, to jeszcze w tym tygodniu ukaza\u0142a si\u0119 jego kolejna du\u017ca edycja. Co prawda do\u015b\u0107 niepozorny numerek 3.2 mo\u017ce nie robi wi\u0119kszego wra\u017cenia, ale pami\u0119tajmy, \u017ce to nie Google Chrome czy Firefox strzelaj\u0105ce nowymi majorami jak z karabinu.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/1_giphy-12.gif\" alt=\"\" width=\"480\" height=\"362\" \/>\n<figcaption>Obie przegl\u0105darki ju\u017c nied\u0142ugo dobij\u0105 setki - ciekawe, czy ich tw\u00f3rcy szykuj\u0105 nam z tej okazji jak\u0105\u015b niespodziank\u0119.<\/figcaption><\/figure>\nNowe wydanie, o przepi\u0119knej nazwie Quintessential Quintuplets - co (chyba) nale\u017cy t\u0142umaczy\u0107 jako \u201ckwintesencjonalne pi\u0119cioraczki\u201d, poza sztampami typu \u201cpoprawa wydajno\u015bci\u201d przynosi te\u017c kilka bardziej mi\u0119sistych dodatk\u00f3w. Przyk\u0142adowo, eksperymentalna funkcjonalno\u015b\u0107 Single File Components - pliki z rozszerzeniem *.vue, zawieraj\u0105ce ca\u0142o\u015b\u0107 logiki, templatingu oraz stylowania konkretnego komponentu - doczeka\u0142y si\u0119 stabilnej wersji. ygl\u0105da to w nast\u0119puj\u0105cy spos\u00f3b:\n<pre><code class=\"language-javascript\">&lt;script setup&gt;\n\timport { ref } from 'vue'\n\tconst color = ref('red')\n&lt;\/script&gt;\n&lt;template&gt;\n\t&lt;button @click=\"color = color === 'red' ? 'green' : 'red'\"&gt;\n\tColor is: {{ color }}\n\t&lt;\/button&gt;\n&lt;\/template&gt;\n&lt;style scoped&gt;\n\tbutton {\n\t\tcolor: v-bind(color);\n\t}\n&lt;\/style&gt;<\/code><\/pre>\nDla kogo\u015b, kto ma do\u015bwiadczenie z innymi frameworkami, pewnie jest to dosy\u0107 nietypowy spos\u00f3b dystrybucji kodu, aczkolwiek wci\u0105\u017c pami\u0119tam konsternacje, jak\u0105 w\u015br\u00f3d programist\u00f3w wzbudza\u0142y pliki *.jsx, dzi\u015b stanowi\u0105ce bardzo naturalny fragment ekosystemu.\n\nVue 3.2 to r\u00f3wnie\u017c dalsze ulepszenia w kierunku wsparcia WebComponent\u00f3w oraz Server Side Rendering. Te pierwsze doczeka\u0142y si\u0119 mo\u017cliwo\u015bci banalnego tworzenia z \u201cnatywnych\u201d, vueowych komponent\u00f3w przy pomocy metody `defineCustomElement`, a tak\u017ce mocno rozbudowanej <a href=\"https:\/\/v3.vuejs.org\/guide\/web-components.html\">sekcji w dokumentacji<\/a>. SSR przynosi za\u015b mo\u017cliwo\u015b\u0107 renderowania aplikacji nie tylko w ramach runtime Node.js, ale r\u00f3wnie\u017c nowoczesnych rozwi\u0105za\u0144 takich jak Service Worker czy CloudFlare Workers.\n<figure class=\"kg-card kg-image-card kg-card-hascaption\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/5_image-8.png\" alt=\"\" width=\"595\" height=\"605\" \/>\n\n<figcaption>Wyczuwam w tym mocny uk\u0142on w stron\u0119 tak zwanego JAMStacka.<\/figcaption><\/figure>\nVue zdecydowanie idzie w ciekawym kierunku, wybieraj\u0105c dla siebie dosy\u0107 nieszablonow\u0105 \u015bcie\u017ck\u0119 i nie boj\u0105c si\u0119 wprowadza\u0107 sporych innowacji. B\u0119dziemy przygl\u0105da\u0107 si\u0119 dalszym poczynaniom tw\u00f3rc\u00f3w frameworku.\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a\">\u0179r\u00f3d\u0142a<\/h3>\n<ul>\n \t<li><a href=\"https:\/\/blog.vuejs.org\/posts\/vue-3.2.html\">Vue 3.2 Released! | The Vue Point<\/a><\/li>\n \t<li><a href=\"https:\/\/v3.vuejs.org\/guide\/web-components.html\">Vue and Web Components | Vue.js<\/a><\/li>\n<\/ul>\n<h2 id=\"2-firefox-chce-jeszcze-bardziej-chroni%C4%87-nasz%C4%85-prywatno%C5%9B%C4%87-%F0%9F%A6%8A\"><a href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/91.0\/releasenotes\/\">2. Firefox chce JESZCZE BARDZIEJ chroni\u0107 nasz\u0105 prywatno\u015b\u0107<\/a><\/h2>\nDopiero co wspomnia\u0142em o tym, jak kosmiczne numeracje maj\u0105 nowe wersje przegl\u0105darek, a tu prosz\u0119, przychodzi nam opisywa\u0107 w\u0142a\u015bnie dziewi\u0119\u0107dziesi\u0105te pierwsze (!) wydanie Firefoxa.\n\n\u017byjemy w czasach, \u017ce nowe wersje przegl\u0105darek przestaj\u0105 budzi\u0107 jakie\u015b du\u017ce emocje i raczej nie przykuwaj\u0105 wi\u0119kszej uwagi. Jednak czasem zdarza si\u0119, \u017ce w tym przyp\u0142ywie drobnych ulepsze\u0144 (wszyscy czekali\u015bmy na wi\u0119ksze bezpiecze\u0144stwo Gamepad API, prawda) pojawiaj\u0105 si\u0119 rzeczy realnie interesuj\u0105ce. Tak dzieje si\u0119 w przypadku nowego podej\u015bcia do Cookies przegl\u0105darki, kt\u00f3re zaprezentowali nam tw\u00f3rcy z Mozilli.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128baf450c58.png\" alt=\"\" \/><\/figure>\nOd pewnego czasu popularnym terminem (spopularyzowanym zreszt\u0105 przez nikogo innego jak w\u0142a\u015bnie tw\u00f3rc\u00f3w przegl\u0105darki z liskiem w logo) s\u0105 tak zwane Super Cookies. S\u0105 to szczeg\u00f3lnie mocne third-party cookies, kt\u00f3re potrafi\u0105 \u015bledzi\u0107 u\u017cytkownika nawet wtedy, gdy ten my\u015bli, \u017ce pozby\u0142 si\u0119 wszelkich zwi\u0105zk\u00f3w z dan\u0105 witryn\u0105. Rozwi\u0105zaniem zaproponowanym przez Firefox jest tak zwane <a href=\"https:\/\/blog.mozilla.org\/security\/2021\/08\/10\/firefox-91-introduces-enhanced-cookie-clearing\/\">ulepszone czyszczenie plik\u00f3w cookie (Enhanced Cookie Clearing).<\/a>\n\nPrzed ulepszonym czyszczeniem plik\u00f3w cookie, Firefox usuwa\u0142 dane tylko dla domeny okre\u015blonej przez u\u017cytkownika. Oznacza\u0142o to, \u017ce je\u015bli mia\u0142by\u015b wyczy\u015bci\u0107 pami\u0119\u0107 dla vived.io, Firefox usun\u0105\u0142 pami\u0119\u0107 vived.io i pozostawi\u0142 pami\u0119\u0107 wszelkich osadzonych na niej witryn (jak na przyk\u0142ad te powsta\u0142e w wyniku dodania na stronie \u201clajka\u201d Facebooka). Oznacza\u0142o to, \u017ce Facebook m\u00f3g\u0142 Ci\u0119 zidentyfikowa\u0107 i dalej \u015bledzi\u0107 przy nast\u0119pnej wizycie na vived.io. Teraz Firefox b\u0119dzie automatycznie pozbywa\u0142 si\u0119 r\u00f3wnie\u017c tych danych.\n\nFirefox przynosi te\u017c do\u015b\u0107 ciekaw\u0105 now\u0105 lokalizacj\u0119. \u00a0Ot\u00f3\u017c przegl\u0105darka posiada teraz r\u00f3wnie\u017c wersje dla <a href=\"https:\/\/pl.wikipedia.org\/wiki\/J%C4%99zyk_scots\">j\u0119zyka scots<\/a>. Informacja ta jest o tyle ciekawa, \u017ce pomimo i\u017c jest to j\u0119zyk u\u017cywany przez ponad milion mieszka\u0144c\u00f3w Szkocji, to Firefox jest jedn\u0105 z pierwszych du\u017cych aplikacji, kt\u00f3ra doda\u0142a dla niego wsparcie. Ca\u0142o\u015b\u0107 obi\u0142a si\u0119 nawet o <a href=\"https:\/\/www.thenational.scot\/news\/19494171.major-web-browser-first-available-scots-language\/\">narodowo\u015bciowe szkockie media<\/a>.\n\nMo\u017cna to por\u00f3wna\u0107 do stworzenia kaszubskiego wariantu Firefoxa. Oba j\u0119zyki zreszt\u0105 maj\u0105 do\u015b\u0107 podobne wsparcie w standardach mi\u0119dzynarodowych, bowiem swoje kody dosta\u0142y dopiero w drugim wariancie ISO-639.\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-1\">\u0179r\u00f3d\u0142a<\/h3>\n<ul>\n \t<li><a href=\"https:\/\/v8.dev\/blog\/v8-release-93\">V8 release v9.3 - Sparkplug batch compilation<\/a><\/li>\n \t<li><a href=\"https:\/\/pl.wikipedia.org\/wiki\/Algorytm_Nagle%27a\">Algorytm Nagle'a \u2013 Wikipedia, wolna encyklopedia<\/a><\/li>\n \t<li><a href=\"https:\/\/v8.dev\/features\/object-has-own\">Object.hasOwn \u00b7 V8<\/a><\/li>\n \t<li><a href=\"https:\/\/v8.dev\/features\/error-cause\">Error causes \u00b7 V8<\/a><\/li>\n<\/ul>\n<h2 id=\"3-v8-wprowadza-triki-przy%C5%9Bpieszaj%C4%85ce-chrome-spoiler-batching-%F0%9F%8F%8E\"><a href=\"https:\/\/www.mozilla.org\/en-US\/firefox\/91.0\/releasenotes\/\">3. V8 wprowadza triki przy\u015bpieszaj\u0105ce Chrome (spoiler: batching) <\/a><\/h2>\nNumeracja przegl\u0105darek rz\u0105dzi dzisiejsz\u0105 edycj\u0105, poniewa\u017c wraz z wersj\u0105 beta Chrome 93 ukaza\u0142a si\u0119 te\u017c nowa edycja V8 - silnika nap\u0119dzaj\u0105cego rozwi\u0105zanie Google.\n\nO Chromie mo\u017ce sobie jeszcze pogadamy, kiedy jego najnowsza edycja si\u0119 ustabilizuje, ale V8 w wersji 9.3 (czy to nie jest nieco rozs\u0105dniejsza numeracja?) posiada zmiany, na kt\u00f3rych chcieliby\u015bmy na moment zawiesi\u0107 oko. Powa\u017cnemu rozwini\u0119ciu uleg\u0142 bowiem Sparkplug, najnowszy z kluczowych komponent\u00f3w V8 - dodatkowy krok kompilacji, znajduj\u0105cy si\u0119 mi\u0119dzy interpretacj\u0105 bytecode (za kt\u00f3r\u0105 odpowiada Ignition - zap\u0142onu), a optymalizacj\u0105 kodu (co jest domen\u0105 TurboFana - \u015bwiec\u0105). In\u017cynierowie w Google pewnie w\u0142a\u015bnie w tej chwili zastanawiaj\u0105 si\u0119, jak dalej t\u0119 metafor\u0119 silnika rozwija\u0107. Czekam na \u201cuszczelk\u0119 pod g\u0142owic\u0105\u201d w V8.\n<figure class=\"kg-card kg-image-card\"><img class=\"kg-image\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/08\/img_6128baf5861e6.png\" alt=\"\" \/><\/figure>\nO wdro\u017ceniu Sparkplug (co t\u0142umaczy\u0107 mo\u017cna na \u201c\u015bwiec\u0119 silnikow\u0105\u201d) przeczyta\u0107 mogli\u015bcie <a href=\"https:\/\/vived.io\/frontend-thursdaty-vol-40\/\">w naszej 40. edycji<\/a>, jednak zmiany z nowej wersji s\u0105 bardzo interesuj\u0105ce, dotykaj\u0105 bowiem domeny bezpiecze\u0144stwa. Ten po\u015bredni kompilator z powod\u00f3w bezpiecze\u0144stwa zmuszony jest u\u017cywa\u0107 metod zapisu do pami\u0119ci, kt\u00f3re posiadaj\u0105 pewien narzut wydajno\u015bciowy. W wi\u0119kszo\u015bci przypadk\u00f3w jest on niezauwa\u017calny, jednak mamy tutaj do czynienia z V8, a V8 jest w dzisiejszych czasach niezwykle wy\u017cy\u0142owanym oprogramowaniem, gdzie ka\u017cdy szczeg\u00f3\u0142 ma znaczenie. Okazuje si\u0119, \u017ce spos\u00f3b zapisu do pami\u0119ci r\u00f3wnie\u017c. Skoro jednak ka\u017cdorazowe wrzucenie danych do pami\u0119ci obarczone jest narzutem. Dlatego te\u017c tw\u00f3rcy wykorzystali tutaj jeden z do\u015b\u0107 standardowych trade-off\u00f3w <a href=\"https:\/\/pl.wikipedia.org\/wiki\/Algorytm_Nagle%27a\">znany z HTTP<\/a>, ale nie tylko: je\u015bli pojedyncze przes\u0142anie informacji jest drogie - batchuj. W ten spos\u00f3b nasza \u015awieca w znacz\u0105cy spos\u00f3b mo\u017ce ograniczy\u0107 ilo\u015b\u0107 odwo\u0142a\u0144 do pami\u0119ci, co jak twierdz\u0105 V8 redukuje efektywny czas kompilacji o nawet ponad 40%.\n\nTo jednak nie wszystko. Wersja 8.3 przynosi te\u017c drobne, ale interesuj\u0105ce dodatki, je\u015bli chodzi o \u201cfeatury\u201d samego JavaScripta. Jednym z nich jest <a href=\"https:\/\/v8.dev\/features\/object-has-own\">alias nad Object.hasOwnProperty<\/a>, maj\u0105cy u\u0142atwi\u0107 u\u017cywanie tej metody w sytuacjach, gdy chcemy potraktowa\u0107 obiekt jako jeden z parametr\u00f3w wywo\u0142ania.\n<pre><code class=\"language-javascript\">Object.hasOwn({ prop: 42 }, 'prop')<\/code><\/pre>\nDruga ze zmian za\u015b to <a href=\"https:\/\/v8.dev\/features\/error-cause\">rozszerzenie obiektu Error o mo\u017cli\nwo\u015b\u0107 przekazania dodatkowej przyczyny<\/a>, co mo\u017ce by\u0107 przydatne przy \u0142\u0105czeniu b\u0142\u0119d\u00f3w w logiczny ci\u0105g przyczynowo skutkowy:\n<pre><code class=\"language-javascript\">const parentError = new Error('parent');\nconst error = new Error('parent', { cause: parentError });\nconsole.log(error.cause === parentError);<\/code><\/pre>\nWszystkie te dobroci ju\u017c nied\u0142ugo znajdziecie na swoich komputerach w Chrome 93.\n<h3 id=\"%C5%BAr%C3%B3d%C5%82a-2\">\u0179r\u00f3d\u0142a<\/h3>\n<ul>\n \t<li><a href=\"https:\/\/v8.dev\/blog\/v8-release-93\">V8 release v9.3 - Sparkplug batch compilation<\/a><\/li>\n \t<li><a href=\"https:\/\/pl.wikipedia.org\/wiki\/Algorytm_Nagle%27a\">Algorytm Nagle'a \u2013 Wikipedia, wolna encyklopedia<\/a><\/li>\n \t<li><a href=\"https:\/\/v8.dev\/features\/object-has-own\">Object.hasOwn \u00b7 V8<\/a><\/li>\n \t<li><a href=\"https:\/\/v8.dev\/features\/error-cause\">Error causes \u00b7 V8<\/a><\/li>\n<\/ul>"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10098","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\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/comments?post=10098"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10098\/revisions"}],"predecessor-version":[{"id":10627,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10098\/revisions\/10627"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}