{"id":9941,"date":"2022-07-22T14:30:31","date_gmt":"2022-07-22T12:30:31","guid":{"rendered":"https:\/\/vived.io\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/"},"modified":"2022-09-19T13:16:25","modified_gmt":"2022-09-19T11:16:25","slug":"facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/","title":{"rendered":"Facebook szyfruje parametry \u015bledz\u0105ce – Frontend Weekly vol. 97"},"content":{"rendered":"\n

1. Facebook idzie na wojn\u0119 z Firefox i Brave?<\/h2>\n\n\n\n

Po aferach takich jak Cambridge Analitica \u015bwiadomo\u015b\u0107 ludzi w kwestii prywatno\u015bci w mediach spo\u0142eczno\u015bciowych znacz\u0105co wzros\u0142a. Ci\u0119\u017cko mi powiedzie\u0107 jak du\u017ce odwzorowania ma to w ca\u0142okszta\u0142cie spo\u0142ecze\u0144stwa (prawdopodobnie niewielkie), ale w\u015br\u00f3d moich koleg\u00f3w programist\u00f3w coraz wi\u0119kszy odsetek korzysta z Brave lub z mechanizm\u00f3w ochrony przed \u015bledzeniem Firefox i Safari. <\/p>\n\n\n\n

Na ca\u0142ym zjawisku najbardziej obrywaj\u0105 dostawcy reklam, kt\u00f3rzy powoli trac\u0105 mo\u017cliwo\u015b\u0107 ich personalizacji. Nie czekaj\u0105 oni jednak bezsilnie i nieustannie pracuj\u0105 nad rozwi\u0105zaniami, kt\u00f3re zadowol\u0105 obie strony konfliktu. Najlepszym tego przyk\u0142adem b\u0119dzie Google, kt\u00f3ry po pora\u017cce FLoC (alternatywy dla \u015bledzenia przez ciasteczka) pracuje a\u017c nad pi\u0119cioma potencjalnym algorytmami.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Kilka tygodni temu ukaza\u0142a si\u0119 aktualizacja Firefox, kt\u00f3ra do pakietu funkcjonalno\u015bci ochrony przed \u015bledzeniem do\u0142o\u017cy\u0142a mo\u017cliwo\u015b\u0107 usuwania najpopularniejszych \u015bledz\u0105cych query params. Nie jest to funkcjonalno\u015b\u0107 zupe\u0142nie nowa, bo na przyk\u0142ad Brave oferuje j\u0105 ju\u017c od d\u0142u\u017cszego czasu, Jest to jednak pierwszy przypadek, kiedy funkcjonalno\u015b\u0107 ta trafi\u0142a do pierwszoligowej przegl\u0105darki.<\/p>\n\n\n\n

Co wa\u017cne, nie m\u00f3wimy tu o wszystkich \u015bledz\u0105cych query params, ale o tych szczeg\u00f3lnie z\u0142o\u015bliwych. Przyk\u0142adowo znane z Google Analytics \u2018utm_medium\u2019, \u2018utm_source\u2019, \u2018utm_medium\u2019 i `gclid` pozosta\u0142y nietkni\u0119te. Analogiczne facebookowe `fbclid` usuwane jest ca\u0142kowicie. Dlaczego? Informacji na ten temat nie znalaz\u0142em ani w release note Firefox, ani w opisuj\u0105cych je mediach.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Na odpowied\u017a firmy Marka Zuckerberga nie musieli\u015bmy czeka\u0107 d\u0142ugo. Facebook usun\u0105\u0142 wszystkie linki z parametrem `fbclid` i zamieni\u0142 je tajemniczymi nowymi parametrami takimi jak`__cft__[0]` czy` __tn__`. Ich usuni\u0119cie nie jest mo\u017cliwe, gdy\u017c koduj\u0105 one zar\u00f3wno informacj\u0119 o lokalizacji na jak\u0105 przenie\u015b\u0107 nale\u017cy u\u017cytkownika jak i identyfikator \u015bledz\u0105cy. Ca\u0142o\u015b\u0107 zaszyfrowana jest nieznanym jeszcze publicznie algorytmem, wi\u0119c nie ma sposobu na pozbycie si\u0119 z\u0142o\u015bliwego identyfikatora \u015bledz\u0105cego nie psuj\u0105c jednocze\u015bnie samego linku.<\/p>\n\n\n\n

Przedstawiciele Facebooka broni\u0105 si\u0119, twierdz\u0105c, \u017ce nowa funkcjonalno\u015b\u0107 ma na celu nie tyle obron\u0119 przed wycinaniem parametr\u00f3w \u015bledz\u0105cych, co obron\u0119 przed scrapperami. Znaj\u0105c identyfikator u\u017cytkownika czy strony, taki scrapper by\u0142 w stanie pobra\u0107 publiczne posty umieszczone na tablicy. Poprzez zaszyfrowanie adresu nie b\u0119dzie to ju\u017c mo\u017cliwe. No c\u00f3\u017c, zimna wojna o prywatno\u015b\u0107 u\u017cytkownik\u00f3w trwa nadal.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n

https:\/\/www.bleepingcomputer.com\/news\/security\/new-firefox-privacy-feature-strips-urls-of-tracking-parameters\/<\/a>
https:\/\/www.ghacks.net\/2022\/07\/17\/facebook-has-started-to-encrypt-links-to-counter-privacy-improving-url-stripping\/<\/a><\/p>\n\n\n\n

2. React Native – Hermes coraz bli\u017cej<\/h2>\n\n\n\n

O nowym silniku renderowania React Native s\u0142yszy si\u0119 ju\u017c od dawna. Po raz pierwszy zosta\u0142 on zaprezentowany \u015bwiatu w po\u0142owie 2019 roku i dzia\u0142a\u0142 tylko na Androidzie. <\/p>\n\n\n\n

Troch\u0119 ponad rok temu zesp\u00f3\u0142 Facebooka przygotowa\u0142 r\u00f3wnie\u017c wersj\u0119 na system iOS, czym wywo\u0142a\u0142 ma\u0142\u0105 furor\u0119. By\u0142 to bowiem pierwszy przypadek kiedy na urz\u0105dzeniach z jab\u0142uszkiem dzia\u0142a\u0142 inny silnik JavaScript ni\u017c Applowy Webkit.<\/p>\n\n\n\n

Niespe\u0142na p\u00f3\u0142 roku temu, zesp\u00f3\u0142 React Native og\u0142osi\u0142, \u017ce Hermes stanie si\u0119 domy\u015blnym silnikiem JavaScript dla ich frameworku. Dzisiaj stoimy u progu tej historycznej zmiany, bo React Native 0.70, kt\u00f3ry ostatecznie j\u0105 przypiecz\u0119tuje, uka\u017ce si\u0119 ju\u017c za kilka tygodni.<\/p>\n\n\n\n

\"\"
Nie mia\u0142em jeszcze okazji osobi\u015bcie korzysta\u0107 z Hermes, ale lista niewspieranych funkcjonalno\u015bci wygl\u0105da niepokoj\u0105co.
<\/figcaption><\/figure>\n\n\n\n

Hermes jest szybszy od aktualnie u\u017cywanego silnika JSC. Jest tak przede wszystkim ze wzgl\u0119du na przeniesienie parsowania i wst\u0119pnej kompilacji z inicjalizacji aplikacji do procesu jej budowania. Dzi\u0119ki temu jednemu sprytnemu trikowi, pocz\u0105tkowy czas uruchamiania aplikacji spad\u0142 o ponad 50%\u00a0 procent.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Nie poruszamy tematu Hermes bez przyczyny. Zesp\u00f3\u0142 React Native na swoim blogu przygotowa\u0142 notatk\u0119 przygotowuj\u0105c\u0105 deweloper\u00f3w na t\u0105 historyczn\u0105 zmian\u0119. Znajdziecie w niej ca\u0142\u0105 niezb\u0119dn\u0105 dokumentacj\u0119 i gar\u015b\u0107 ciekawych benchmark\u00f3w. Je\u015bli jeste\u015bcie g\u0142odni szczeg\u00f3\u0142\u00f3w, to zapraszam do linku, kt\u00f3ry znajdziecie w \u017ar\u00f3d\u0142ach.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n

\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n

https:\/\/reactnative.dev\/blog\/2022\/07\/08\/hermes-as-the-default<\/a><\/p>\n\n\n\n

3. Jednolity stan, czyli dlaczego frontendowe frameworki s\u0105 jak fizyka kwantowa<\/h2>\n\n\n\n

Je\u015bli my\u015blicie, \u017ce sezon og\u00f3rkowy trwa w\u0142a\u015bnie w najlepsze to\u2026 no c\u00f3\u017c, macie racj\u0119. Ze wzgl\u0119du na to, \u017ce nowo\u015bci nie dopisa\u0142y, na zako\u0144czenie dzisiejszego przegl\u0105du przyjrzymy si\u0119 ciekawemu Twitterowym w\u0105tkowi (orygina\u0142 znajdziecie w \u017ar\u00f3d\u0142ach – ja w trosce o Wasz\u0105 wygod\u0119 skopiuj\u0119 snippety kodu tutaj). Okazuje si\u0119 bowiem, \u017ce prosty, kilkulinijkowy kod przet\u0142umaczony do najpopularniejszych obecnie framework\u00f3w daje kompletnie r\u00f3\u017cne rezultaty.<\/p>\n\n\n\n

import React, { useState, useMemo, useRef } from 'react';\n\nexport default function App() {\n  const [count, setCount] = useState(0);\n  const doubleCount = useMemo(() => count * 2, [count]);\n  const elem = useRef();\n\n  return (\n    <button\n      ref={elem}\n      onClick={() => {\n        setCount(count + 1);\n        console.log(count, doubleCount, elem.current.textContent);\n      }}\n    >\n      {doubleCount}\n    <\/button>\n  );\n}<\/code><\/pre>\n\n\n\n
Playground<\/a><\/p>\n\n\n\n
React podczas renderu utrzymuje sta\u0142e referencje obiekt\u00f3w, a efekty aktualizacji stanu widoczne b\u0119d\u0105 dopiero podczas kolejnego renderowania.<\/p>\n\n\n\n
Wynik: 0 0 0<\/p>\n\n\n\n
\n\n\n\n
<script setup>\nimport { ref, computed } from 'vue'\n\nconst elem = ref()\nconst count = ref(0)\nconst doubleCount = computed(() => count.value * 2)\n\nfunction handleClick() {\n  count.value++\n  console.log(count.value, doubleCount.value, elem.value.textContent)\n}\n<\/script>\n\n<template>\n  <button ref="elem" @click="handleClick">{{ doubleCount }}<\/button>\n<\/template><\/code><\/pre>\n\n\n\n
Playground<\/a><\/p>\n\n\n\n
Vue natychmiast aktualizuje modyfikowan\u0105 zmienn\u0105 i jej zale\u017cno\u015bci, ale od\u015bwie\u017cenie HTML\u2019a nast\u0119puje z op\u00f3\u017anieniem.\u00a0<\/p>\n\n\n\n
Wynik: 1 2 0<\/p>\n\n\n\n
\n\n\n\n
<script>\n  let count = 0;\n  let elem;\n  $: doubleCount = count * 2;\n\n  function handleClick() {\n    count++;\n    console.log(count, doubleCount, elem.textContent);\n  }\n<\/script>\n\n<button bind:this="{elem}" on:click="{handleClick}">{doubleCount}<\/button><\/code><\/pre>\n\n\n\n
Playground<\/a><\/p>\n\n\n\n
Svelte natychmiast aktualizuje zmienn\u0105, ale nie przelicza zale\u017cno\u015bci i nie od\u015bwie\u017ca warto\u015bci w DOM.\u00a0<\/p>\n\n\n\n
Wynik: 1 0 0\u00a0<\/p>\n\n\n\n
\n\n\n\n
const App: Component = () => {\n  let elem: any;\n  const [count, setCount] = createSignal(0);\n  const doubleCount = createMemo(() => count() * 2);\n\n  return (\n    <button\n      ref={elem}\n      onClick={() => {\n        setCount(count() + 1);\n        console.log(count(), doubleCount(), elem.textContent);\n      }}\n    >\n      {doubleCount()}\n    <\/button>\n  );\n};\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
Playground<\/a><\/p>\n\n\n\n
SolidJS to jedyny framework, kt\u00f3ry wraz z aktualizacj\u0105 stanu od\u015bwie\u017ca zar\u00f3wno warto\u015b\u0107 zmiennej i jej zale\u017cno\u015bci jak i HTML.<\/p>\n\n\n\n
Wynik: 1 2 2<\/p>\n\n\n\n
\n\n\n\n
@Component({\n  selector: 'my-app',\n  template:\n    '<button #ref (click)="handleClick()">{{ doubleCount$ | async }}<\/button>',\n  styleUrls: []\n})\nexport class AppComponent {\n  @ViewChild('ref') button: any;\n\n  readonly count$ = new BehaviorSubject(0);\n  readonly doubleCount$ = this.count$.pipe(map((it) => it * 2));\n\n  constructor() {}\n\n  async handleClick(): Promise<void> {\n    const count = await firstValueFrom(this.count$);\n    this.count$.next(count + 1);\n    console.log(\n      await firstValueFrom(this.count$),\n      await firstValueFrom(this.doubleCount$),\n      this.button.nativeElement.innerHTML\n    );\n  }\n}<\/code><\/pre>\n\n\n\n
Playground<\/a><\/p>\n\n\n\n
Pewnie zauwa\u017cyli\u015bcie, \u017ce w\u015br\u00f3d wymienionych w twitteromy w\u0105tku framework\u00f3w brakuje Angulara. Jest tak zapewne dlatego, \u017ce nie posiada on analogicznego API  hook\u00f3w. Posiada on natomiast dobr\u0105 integracj\u0119 z RxJS, kt\u00f3ra w wi\u0119kszo\u015bci przypadk\u00f3w mo\u017ce zast\u0105pi\u0107 hooki. Powy\u017cej znajdziecie moj\u0105 Angularow\u0105 implementacj\u0119.<\/p>\n\n\n\n
Wynik: 1 2 0<\/p>\n\n\n\n
\n\n\n\n
Kt\u00f3re rozwi\u0105zanie jest najbardziej czytelne? Ku mojemu zaskoczeniu, wyniki wszystkich framework\u00f3w s\u0105 sensowne. Ja najbardziej sk\u0142aniam si\u0119 ku funkcyjnemu podej\u015bciu Reacta (zmiana warto\u015bci zmiennych jest r\u00f3wnoznaczna z kolejnym wywo\u0142aniem funkcji) i zr\u00f3wnowa\u017conemu podej\u015bciu Vue i Angulara (zmienne od\u015bwie\u017cane s\u0105 natychmiast, ale ci\u0119\u017cka operacja renderowania odk\u0142adana jest na koniec wykonania funkcji). A Wy co s\u0105dzicie na ten temat?<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/dev.to\/this-is-learning\/the-cost-of-consistency-in-ui-frameworks-4agi<\/a>
https:\/\/twitter.com\/ryancarniato\/status\/1353801009844240389<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Wojna pomi\u0119dzy przegl\u0105darkami dbaj\u0105cymi o prywatno\u015b\u0107 u\u017cytkownik\u00f3w, a serwisami personalizuj\u0105cym reklamy trwa ju\u017c od dobrych paru lat. W minionym tygodniu pod przykrywk\u0105 dbania o u\u017cytkownik\u00f3w Facebook zaprezentowa\u0142 now\u0105 bro\u0144 w swoim arsenale – szyfrowanie query params.<\/p>\n","protected":false},"author":12,"featured_media":8922,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-9941","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"feature_image_visible":false,"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/FRONTEND-3.png","feature_image_blog":{"ID":8923,"id":8923,"title":"download (13)","filename":"download-13.jpeg","filesize":86645,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-13.jpeg","link":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/download-13-2\/","alt":"","author":"12","description":"","caption":"","name":"download-13-2","status":"inherit","uploaded_to":9941,"date":"2022-07-22 12:29:26","modified":"2022-07-22 12:29:26","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/vived.io\/wp-includes\/images\/media\/default.png","width":666,"height":375,"sizes":{"thumbnail":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-13-150x150.jpeg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-13-300x169.jpeg","medium-width":300,"medium-height":169,"medium_large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-13.jpeg","medium_large-width":666,"medium_large-height":375,"large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-13.jpeg","large-width":666,"large-height":375,"1536x1536":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-13.jpeg","1536x1536-width":666,"1536x1536-height":375,"2048x2048":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-13.jpeg","2048x2048-width":666,"2048x2048-height":375,"gform-image-choice-sm":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-13.jpeg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":169,"gform-image-choice-md":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-13.jpeg","gform-image-choice-md-width":400,"gform-image-choice-md-height":225,"gform-image-choice-lg":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-13.jpeg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":338}},"estimated_reading_time":"6"},"yoast_head":"\nFacebook szyfruje parametry \u015bledz\u0105ce - Frontend Weekly vol. 97 - 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\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Facebook szyfruje parametry \u015bledz\u0105ce - Frontend Weekly vol. 97 - Vived\" \/>\n<meta property=\"og:description\" content=\"Wojna pomi\u0119dzy przegl\u0105darkami dbaj\u0105cymi o prywatno\u015b\u0107 u\u017cytkownik\u00f3w, a serwisami personalizuj\u0105cym reklamy trwa ju\u017c od dobrych paru lat. W minionym tygodniu pod przykrywk\u0105 dbania o u\u017cytkownik\u00f3w Facebook zaprezentowa\u0142 now\u0105 bro\u0144 w swoim arsenale - szyfrowanie query params.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-22T12:30:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/FRONTEND-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Facebook szyfruje parametry \u015bledz\u0105ce – Frontend Weekly vol. 97\",\"datePublished\":\"2022-07-22T12:30:31+00:00\",\"dateModified\":\"2022-09-19T11:16:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/\"},\"wordCount\":1004,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/FRONTEND-3.png\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/\",\"url\":\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/\",\"name\":\"Facebook szyfruje parametry \u015bledz\u0105ce - Frontend Weekly vol. 97 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/FRONTEND-3.png\",\"datePublished\":\"2022-07-22T12:30:31+00:00\",\"dateModified\":\"2022-09-19T11:16:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/FRONTEND-3.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/FRONTEND-3.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Facebook szyfruje parametry \u015bledz\u0105ce – Frontend Weekly vol. 97\"}]},{\"@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":"Facebook szyfruje parametry \u015bledz\u0105ce - Frontend Weekly vol. 97 - 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\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/","og_locale":"pl_PL","og_type":"article","og_title":"Facebook szyfruje parametry \u015bledz\u0105ce - Frontend Weekly vol. 97 - Vived","og_description":"Wojna pomi\u0119dzy przegl\u0105darkami dbaj\u0105cymi o prywatno\u015b\u0107 u\u017cytkownik\u00f3w, a serwisami personalizuj\u0105cym reklamy trwa ju\u017c od dobrych paru lat. W minionym tygodniu pod przykrywk\u0105 dbania o u\u017cytkownik\u00f3w Facebook zaprezentowa\u0142 now\u0105 bro\u0144 w swoim arsenale - szyfrowanie query params.","og_url":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/","og_site_name":"Vived","article_published_time":"2022-07-22T12:30:31+00:00","article_modified_time":"2022-09-19T11:16:25+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/FRONTEND-3.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Facebook szyfruje parametry \u015bledz\u0105ce – Frontend Weekly vol. 97","datePublished":"2022-07-22T12:30:31+00:00","dateModified":"2022-09-19T11:16:25+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/"},"wordCount":1004,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/FRONTEND-3.png","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/","url":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/","name":"Facebook szyfruje parametry \u015bledz\u0105ce - Frontend Weekly vol. 97 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/FRONTEND-3.png","datePublished":"2022-07-22T12:30:31+00:00","dateModified":"2022-09-19T11:16:25+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/FRONTEND-3.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/FRONTEND-3.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/facebook-szyfruje-parametry-sledzace-frontend-weekly-vol-97\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Facebook szyfruje parametry \u015bledz\u0105ce – Frontend Weekly vol. 97"}]},{"@type":"WebSite","@id":"https:\/\/vived.io\/pl\/#website","url":"https:\/\/vived.io\/pl\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vived.io\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/vived.io\/pl\/#organization","name":"Vived","url":"https:\/\/vived.io\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","width":136,"height":45,"caption":"Vived"},"image":{"@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","caption":"Tomasz Borowicz"}}]}},"blocks_vived":[{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>1. Facebook idzie na wojn\u0119 z Firefox i Brave?<\/h2>\n","innerContent":["\n<h2>1. Facebook idzie na wojn\u0119 z Firefox i Brave?<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Po aferach takich jak Cambridge Analitica \u015bwiadomo\u015b\u0107 ludzi w kwestii prywatno\u015bci w mediach spo\u0142eczno\u015bciowych znacz\u0105co wzros\u0142a. Ci\u0119\u017cko mi powiedzie\u0107 jak du\u017ce odwzorowania ma to w ca\u0142okszta\u0142cie spo\u0142ecze\u0144stwa (prawdopodobnie niewielkie), ale w\u015br\u00f3d moich koleg\u00f3w programist\u00f3w coraz wi\u0119kszy odsetek korzysta z Brave lub z mechanizm\u00f3w ochrony przed \u015bledzeniem Firefox i Safari. <\/p>\n","innerContent":["\n<p>Po aferach takich jak Cambridge Analitica \u015bwiadomo\u015b\u0107 ludzi w kwestii prywatno\u015bci w mediach spo\u0142eczno\u015bciowych znacz\u0105co wzros\u0142a. Ci\u0119\u017cko mi powiedzie\u0107 jak du\u017ce odwzorowania ma to w ca\u0142okszta\u0142cie spo\u0142ecze\u0144stwa (prawdopodobnie niewielkie), ale w\u015br\u00f3d moich koleg\u00f3w programist\u00f3w coraz wi\u0119kszy odsetek korzysta z Brave lub z mechanizm\u00f3w ochrony przed \u015bledzeniem Firefox i Safari. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na ca\u0142ym zjawisku najbardziej obrywaj\u0105 dostawcy reklam, kt\u00f3rzy powoli trac\u0105 mo\u017cliwo\u015b\u0107 ich personalizacji. Nie czekaj\u0105 oni jednak bezsilnie i nieustannie pracuj\u0105 nad rozwi\u0105zaniami, kt\u00f3re zadowol\u0105 obie strony konfliktu. Najlepszym tego przyk\u0142adem b\u0119dzie Google, kt\u00f3ry po pora\u017cce FLoC (alternatywy dla \u015bledzenia przez ciasteczka) pracuje a\u017c nad pi\u0119cioma potencjalnym algorytmami.<\/p>\n","innerContent":["\n<p>Na ca\u0142ym zjawisku najbardziej obrywaj\u0105 dostawcy reklam, kt\u00f3rzy powoli trac\u0105 mo\u017cliwo\u015b\u0107 ich personalizacji. Nie czekaj\u0105 oni jednak bezsilnie i nieustannie pracuj\u0105 nad rozwi\u0105zaniami, kt\u00f3re zadowol\u0105 obie strony konfliktu. Najlepszym tego przyk\u0142adem b\u0119dzie Google, kt\u00f3ry po pora\u017cce FLoC (alternatywy dla \u015bledzenia przez ciasteczka) pracuje a\u017c nad pi\u0119cioma potencjalnym algorytmami.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":5992,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-11.jpeg\" alt=\"\" class=\"wp-image-5992\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-11.jpeg\" alt=\"\" class=\"wp-image-5992\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kilka tygodni temu ukaza\u0142a si\u0119 aktualizacja Firefox, kt\u00f3ra do pakietu funkcjonalno\u015bci ochrony przed \u015bledzeniem do\u0142o\u017cy\u0142a mo\u017cliwo\u015b\u0107 usuwania najpopularniejszych \u015bledz\u0105cych query params. Nie jest to funkcjonalno\u015b\u0107 zupe\u0142nie nowa, bo na przyk\u0142ad Brave oferuje j\u0105 ju\u017c od d\u0142u\u017cszego czasu, Jest to jednak pierwszy przypadek, kiedy funkcjonalno\u015b\u0107 ta trafi\u0142a do pierwszoligowej przegl\u0105darki.<\/p>\n","innerContent":["\n<p>Kilka tygodni temu ukaza\u0142a si\u0119 aktualizacja Firefox, kt\u00f3ra do pakietu funkcjonalno\u015bci ochrony przed \u015bledzeniem do\u0142o\u017cy\u0142a mo\u017cliwo\u015b\u0107 usuwania najpopularniejszych \u015bledz\u0105cych query params. Nie jest to funkcjonalno\u015b\u0107 zupe\u0142nie nowa, bo na przyk\u0142ad Brave oferuje j\u0105 ju\u017c od d\u0142u\u017cszego czasu, Jest to jednak pierwszy przypadek, kiedy funkcjonalno\u015b\u0107 ta trafi\u0142a do pierwszoligowej przegl\u0105darki.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Co wa\u017cne, nie m\u00f3wimy tu o wszystkich \u015bledz\u0105cych query params, ale o tych szczeg\u00f3lnie z\u0142o\u015bliwych. Przyk\u0142adowo znane z Google Analytics \u2018utm_medium\u2019, \u2018utm_source\u2019, \u2018utm_medium\u2019 i `gclid` pozosta\u0142y nietkni\u0119te. Analogiczne facebookowe `fbclid` usuwane jest ca\u0142kowicie. Dlaczego? Informacji na ten temat nie znalaz\u0142em ani w release note Firefox, ani w opisuj\u0105cych je mediach.<\/p>\n","innerContent":["\n<p>Co wa\u017cne, nie m\u00f3wimy tu o wszystkich \u015bledz\u0105cych query params, ale o tych szczeg\u00f3lnie z\u0142o\u015bliwych. Przyk\u0142adowo znane z Google Analytics \u2018utm_medium\u2019, \u2018utm_source\u2019, \u2018utm_medium\u2019 i `gclid` pozosta\u0142y nietkni\u0119te. Analogiczne facebookowe `fbclid` usuwane jest ca\u0142kowicie. Dlaczego? Informacji na ten temat nie znalaz\u0142em ani w release note Firefox, ani w opisuj\u0105cych je mediach.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":5993,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6njkrv.jpeg\" alt=\"\" class=\"wp-image-5993\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6njkrv.jpeg\" alt=\"\" class=\"wp-image-5993\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na odpowied\u017a firmy Marka Zuckerberga nie musieli\u015bmy czeka\u0107 d\u0142ugo. Facebook usun\u0105\u0142 wszystkie linki z parametrem `fbclid` i zamieni\u0142 je tajemniczymi nowymi parametrami takimi jak`__cft__[0]` czy` __tn__`. Ich usuni\u0119cie nie jest mo\u017cliwe, gdy\u017c koduj\u0105 one zar\u00f3wno informacj\u0119 o lokalizacji na jak\u0105 przenie\u015b\u0107 nale\u017cy u\u017cytkownika jak i identyfikator \u015bledz\u0105cy. Ca\u0142o\u015b\u0107 zaszyfrowana jest nieznanym jeszcze publicznie algorytmem, wi\u0119c nie ma sposobu na pozbycie si\u0119 z\u0142o\u015bliwego identyfikatora \u015bledz\u0105cego nie psuj\u0105c jednocze\u015bnie samego linku.<\/p>\n","innerContent":["\n<p>Na odpowied\u017a firmy Marka Zuckerberga nie musieli\u015bmy czeka\u0107 d\u0142ugo. Facebook usun\u0105\u0142 wszystkie linki z parametrem `fbclid` i zamieni\u0142 je tajemniczymi nowymi parametrami takimi jak`__cft__[0]` czy` __tn__`. Ich usuni\u0119cie nie jest mo\u017cliwe, gdy\u017c koduj\u0105 one zar\u00f3wno informacj\u0119 o lokalizacji na jak\u0105 przenie\u015b\u0107 nale\u017cy u\u017cytkownika jak i identyfikator \u015bledz\u0105cy. Ca\u0142o\u015b\u0107 zaszyfrowana jest nieznanym jeszcze publicznie algorytmem, wi\u0119c nie ma sposobu na pozbycie si\u0119 z\u0142o\u015bliwego identyfikatora \u015bledz\u0105cego nie psuj\u0105c jednocze\u015bnie samego linku.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Przedstawiciele Facebooka broni\u0105 si\u0119, twierdz\u0105c, \u017ce nowa funkcjonalno\u015b\u0107 ma na celu nie tyle obron\u0119 przed wycinaniem parametr\u00f3w \u015bledz\u0105cych, co obron\u0119 przed scrapperami. Znaj\u0105c identyfikator u\u017cytkownika czy strony, taki scrapper by\u0142 w stanie pobra\u0107 publiczne posty umieszczone na tablicy. Poprzez zaszyfrowanie adresu nie b\u0119dzie to ju\u017c mo\u017cliwe. No c\u00f3\u017c, zimna wojna o prywatno\u015b\u0107 u\u017cytkownik\u00f3w trwa nadal.<\/p>\n","innerContent":["\n<p>Przedstawiciele Facebooka broni\u0105 si\u0119, twierdz\u0105c, \u017ce nowa funkcjonalno\u015b\u0107 ma na celu nie tyle obron\u0119 przed wycinaniem parametr\u00f3w \u015bledz\u0105cych, co obron\u0119 przed scrapperami. Znaj\u0105c identyfikator u\u017cytkownika czy strony, taki scrapper by\u0142 w stanie pobra\u0107 publiczne posty umieszczone na tablicy. Poprzez zaszyfrowanie adresu nie b\u0119dzie to ju\u017c mo\u017cliwe. No c\u00f3\u017c, zimna wojna o prywatno\u015b\u0107 u\u017cytkownik\u00f3w trwa nadal.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":5994,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-12.jpeg\" alt=\"\" class=\"wp-image-5994\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-12.jpeg\" alt=\"\" class=\"wp-image-5994\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/www.bleepingcomputer.com\/news\/security\/new-firefox-privacy-feature-strips-urls-of-tracking-parameters\/\">https:\/\/www.bleepingcomputer.com\/news\/security\/new-firefox-privacy-feature-strips-urls-of-tracking-parameters\/<\/a><br><a href=\"https:\/\/www.ghacks.net\/2022\/07\/17\/facebook-has-started-to-encrypt-links-to-counter-privacy-improving-url-stripping\/\">https:\/\/www.ghacks.net\/2022\/07\/17\/facebook-has-started-to-encrypt-links-to-counter-privacy-improving-url-stripping\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/www.bleepingcomputer.com\/news\/security\/new-firefox-privacy-feature-strips-urls-of-tracking-parameters\/\">https:\/\/www.bleepingcomputer.com\/news\/security\/new-firefox-privacy-feature-strips-urls-of-tracking-parameters\/<\/a><br><a href=\"https:\/\/www.ghacks.net\/2022\/07\/17\/facebook-has-started-to-encrypt-links-to-counter-privacy-improving-url-stripping\/\">https:\/\/www.ghacks.net\/2022\/07\/17\/facebook-has-started-to-encrypt-links-to-counter-privacy-improving-url-stripping\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. React Native - Hermes coraz bli\u017cej<\/h2>\n","innerContent":["\n<h2>2. React Native - Hermes coraz bli\u017cej<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>O nowym silniku renderowania React Native s\u0142yszy si\u0119 ju\u017c od dawna. Po raz pierwszy zosta\u0142 on zaprezentowany \u015bwiatu w po\u0142owie 2019 roku i dzia\u0142a\u0142 tylko na Androidzie. <\/p>\n","innerContent":["\n<p>O nowym silniku renderowania React Native s\u0142yszy si\u0119 ju\u017c od dawna. Po raz pierwszy zosta\u0142 on zaprezentowany \u015bwiatu w po\u0142owie 2019 roku i dzia\u0142a\u0142 tylko na Androidzie. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Troch\u0119 ponad rok temu zesp\u00f3\u0142 Facebooka przygotowa\u0142 r\u00f3wnie\u017c wersj\u0119 na system iOS, czym wywo\u0142a\u0142 ma\u0142\u0105 furor\u0119. By\u0142 to bowiem pierwszy przypadek kiedy na urz\u0105dzeniach z jab\u0142uszkiem dzia\u0142a\u0142 inny silnik JavaScript ni\u017c Applowy Webkit.<\/p>\n","innerContent":["\n<p>Troch\u0119 ponad rok temu zesp\u00f3\u0142 Facebooka przygotowa\u0142 r\u00f3wnie\u017c wersj\u0119 na system iOS, czym wywo\u0142a\u0142 ma\u0142\u0105 furor\u0119. By\u0142 to bowiem pierwszy przypadek kiedy na urz\u0105dzeniach z jab\u0142uszkiem dzia\u0142a\u0142 inny silnik JavaScript ni\u017c Applowy Webkit.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Niespe\u0142na p\u00f3\u0142 roku temu, zesp\u00f3\u0142 React Native og\u0142osi\u0142, \u017ce Hermes stanie si\u0119 domy\u015blnym silnikiem JavaScript dla ich frameworku. Dzisiaj stoimy u progu tej historycznej zmiany, bo React Native 0.70, kt\u00f3ry ostatecznie j\u0105 przypiecz\u0119tuje, uka\u017ce si\u0119 ju\u017c za kilka tygodni.<\/p>\n","innerContent":["\n<p>Niespe\u0142na p\u00f3\u0142 roku temu, zesp\u00f3\u0142 React Native og\u0142osi\u0142, \u017ce Hermes stanie si\u0119 domy\u015blnym silnikiem JavaScript dla ich frameworku. Dzisiaj stoimy u progu tej historycznej zmiany, bo React Native 0.70, kt\u00f3ry ostatecznie j\u0105 przypiecz\u0119tuje, uka\u017ce si\u0119 ju\u017c za kilka tygodni.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"id":5995,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-22-at-14.13.24.png\" alt=\"\" class=\"wp-image-5995\"\/><figcaption>Nie mia\u0142em jeszcze okazji osobi\u015bcie korzysta\u0107 z Hermes, ale lista niewspieranych funkcjonalno\u015bci wygl\u0105da niepokoj\u0105co.<br><\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/Screenshot-2022-07-22-at-14.13.24.png\" alt=\"\" class=\"wp-image-5995\"\/><figcaption>Nie mia\u0142em jeszcze okazji osobi\u015bcie korzysta\u0107 z Hermes, ale lista niewspieranych funkcjonalno\u015bci wygl\u0105da niepokoj\u0105co.<br><\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Hermes jest szybszy od aktualnie u\u017cywanego silnika JSC. Jest tak przede wszystkim ze wzgl\u0119du na przeniesienie parsowania i wst\u0119pnej kompilacji z inicjalizacji aplikacji do procesu jej budowania. Dzi\u0119ki temu jednemu sprytnemu trikowi, pocz\u0105tkowy czas uruchamiania aplikacji spad\u0142 o ponad 50%\u00a0 procent.<\/p>\n","innerContent":["\n<p>Hermes jest szybszy od aktualnie u\u017cywanego silnika JSC. Jest tak przede wszystkim ze wzgl\u0119du na przeniesienie parsowania i wst\u0119pnej kompilacji z inicjalizacji aplikacji do procesu jej budowania. Dzi\u0119ki temu jednemu sprytnemu trikowi, pocz\u0105tkowy czas uruchamiania aplikacji spad\u0142 o ponad 50%\u00a0 procent.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":5996,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/HermesOSSChainReact_blog_FIN_1-1.gif\" alt=\"\" class=\"wp-image-5996\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/HermesOSSChainReact_blog_FIN_1-1.gif\" alt=\"\" class=\"wp-image-5996\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nie poruszamy tematu Hermes bez przyczyny. Zesp\u00f3\u0142 React Native na swoim blogu przygotowa\u0142 notatk\u0119 przygotowuj\u0105c\u0105 deweloper\u00f3w na t\u0105 historyczn\u0105 zmian\u0119. Znajdziecie w niej ca\u0142\u0105 niezb\u0119dn\u0105 dokumentacj\u0119 i gar\u015b\u0107 ciekawych benchmark\u00f3w. Je\u015bli jeste\u015bcie g\u0142odni szczeg\u00f3\u0142\u00f3w, to zapraszam do linku, kt\u00f3ry znajdziecie w \u017ar\u00f3d\u0142ach.<\/p>\n","innerContent":["\n<p>Nie poruszamy tematu Hermes bez przyczyny. Zesp\u00f3\u0142 React Native na swoim blogu przygotowa\u0142 notatk\u0119 przygotowuj\u0105c\u0105 deweloper\u00f3w na t\u0105 historyczn\u0105 zmian\u0119. Znajdziecie w niej ca\u0142\u0105 niezb\u0119dn\u0105 dokumentacj\u0119 i gar\u015b\u0107 ciekawych benchmark\u00f3w. Je\u015bli jeste\u015bcie g\u0142odni szczeg\u00f3\u0142\u00f3w, to zapraszam do linku, kt\u00f3ry znajdziecie w \u017ar\u00f3d\u0142ach.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"id":5997,"sizeSlug":"large","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/hermes-default-ios-data-1024x536.png\" alt=\"\" class=\"wp-image-5997\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/hermes-default-ios-data-1024x536.png\" alt=\"\" class=\"wp-image-5997\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":5998,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/hermes-default-ios-video.gif\" alt=\"\" class=\"wp-image-5998\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/hermes-default-ios-video.gif\" alt=\"\" class=\"wp-image-5998\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/reactnative.dev\/blog\/2022\/07\/08\/hermes-as-the-default\">https:\/\/reactnative.dev\/blog\/2022\/07\/08\/hermes-as-the-default<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/reactnative.dev\/blog\/2022\/07\/08\/hermes-as-the-default\">https:\/\/reactnative.dev\/blog\/2022\/07\/08\/hermes-as-the-default<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>3. Jednolity stan, czyli dlaczego frontendowe frameworki s\u0105 jak fizyka kwantowa<\/h2>\n","innerContent":["\n<h2>3. Jednolity stan, czyli dlaczego frontendowe frameworki s\u0105 jak fizyka kwantowa<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli my\u015blicie, \u017ce sezon og\u00f3rkowy trwa w\u0142a\u015bnie w najlepsze to\u2026 no c\u00f3\u017c, macie racj\u0119. Ze wzgl\u0119du na to, \u017ce nowo\u015bci nie dopisa\u0142y, na zako\u0144czenie dzisiejszego przegl\u0105du przyjrzymy si\u0119 ciekawemu Twitterowym w\u0105tkowi (orygina\u0142 znajdziecie w \u017ar\u00f3d\u0142ach - ja w trosce o Wasz\u0105 wygod\u0119 skopiuj\u0119 snippety kodu tutaj). Okazuje si\u0119 bowiem, \u017ce prosty, kilkulinijkowy kod przet\u0142umaczony do najpopularniejszych obecnie framework\u00f3w daje kompletnie r\u00f3\u017cne rezultaty.<\/p>\n","innerContent":["\n<p>Je\u015bli my\u015blicie, \u017ce sezon og\u00f3rkowy trwa w\u0142a\u015bnie w najlepsze to\u2026 no c\u00f3\u017c, macie racj\u0119. Ze wzgl\u0119du na to, \u017ce nowo\u015bci nie dopisa\u0142y, na zako\u0144czenie dzisiejszego przegl\u0105du przyjrzymy si\u0119 ciekawemu Twitterowym w\u0105tkowi (orygina\u0142 znajdziecie w \u017ar\u00f3d\u0142ach - ja w trosce o Wasz\u0105 wygod\u0119 skopiuj\u0119 snippety kodu tutaj). Okazuje si\u0119 bowiem, \u017ce prosty, kilkulinijkowy kod przet\u0142umaczony do najpopularniejszych obecnie framework\u00f3w daje kompletnie r\u00f3\u017cne rezultaty.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import React, { useState, useMemo, useRef } from 'react';\n\nexport default function App() {\n  const [count, setCount] = useState(0);\n  const doubleCount = useMemo(() => count * 2, [count]);\n  const elem = useRef();\n\n  return (\n    <button\n      ref={elem}\n      onClick={() => {\n        setCount(count + 1);\n        console.log(count, doubleCount, elem.current.textContent);\n      }}\n    >\n      {doubleCount}\n    <\/button>\n  );\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">import React, { useState, useMemo, useRef } from 'react';\n\nexport default function App() {\n  const [count, setCount] = useState(0);\n  const doubleCount = useMemo(() => count * 2, [count]);\n  const elem = useRef();\n\n  return (\n    <button\n      ref={elem}\n      onClick={() => {\n        setCount(count + 1);\n        console.log(count, doubleCount, elem.current.textContent);\n      }}\n    >\n      {doubleCount}\n    <\/button>\n  );\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":{"align":"center"},"innerBlocks":[],"innerHTML":"\n<p class=\"has-text-align-center\"><a href=\"https:\/\/stackblitz.com\/edit\/react-zkg3dv?file=src\/App.js\" target=\"_blank\" rel=\"noreferrer noopener\">Playground<\/a><\/p>\n","innerContent":["\n<p class=\"has-text-align-center\"><a href=\"https:\/\/stackblitz.com\/edit\/react-zkg3dv?file=src\/App.js\" target=\"_blank\" rel=\"noreferrer noopener\">Playground<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>React podczas renderu utrzymuje sta\u0142e referencje obiekt\u00f3w, a efekty aktualizacji stanu widoczne b\u0119d\u0105 dopiero podczas kolejnego renderowania.<\/p>\n","innerContent":["\n<p>React podczas renderu utrzymuje sta\u0142e referencje obiekt\u00f3w, a efekty aktualizacji stanu widoczne b\u0119d\u0105 dopiero podczas kolejnego renderowania.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wynik: 0 0 0<\/p>\n","innerContent":["\n<p>Wynik: 0 0 0<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/separator","attrs":[],"innerBlocks":[],"innerHTML":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","innerContent":["\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\"><script setup>\nimport { ref, computed } from 'vue'\n\nconst elem = ref()\nconst count = ref(0)\nconst doubleCount = computed(() => count.value * 2)\n\nfunction handleClick() {\n  count.value++\n  console.log(count.value, doubleCount.value, elem.value.textContent)\n}\n<\/script>\n\n<template>\n  <button ref=\"elem\" @click=\"handleClick\">{{ doubleCount }}<\/button>\n<\/template><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\"><script setup>\nimport { ref, computed } from 'vue'\n\nconst elem = ref()\nconst count = ref(0)\nconst doubleCount = computed(() => count.value * 2)\n\nfunction handleClick() {\n  count.value++\n  console.log(count.value, doubleCount.value, elem.value.textContent)\n}\n<\/script>\n\n<template>\n  <button ref=\"elem\" @click=\"handleClick\">{{ doubleCount }}<\/button>\n<\/template><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":{"align":"center"},"innerBlocks":[],"innerHTML":"\n<p class=\"has-text-align-center\"><a href=\"https:\/\/sfc.vuejs.org\/#eNpVUcFuwjAM\/RUrl5UB6bQjKmgTv5FLCS4ra5wocdikqv8+Z4Wpu9nPfs9+9qjeQ9C3jGqnmmRjHxgScg4HQ70LPjKMELHbgPUuZMYzTNBF7+BJSE+GDFlPiQEHdLAvrdXqgVmfie\/gyx969vk04PFee8hW1Qr2h5mib+2QEZ7hVUiGukyWe0\/w0dJZmENvP6V7NATL\/vV6Bij5AfXgL9WiuFmOfUBl5znWjN989MRILDMnQ009X0PuIAmjC0PLKBlAc8rMso7Y2htVRIyCN1vWknyxpFGHcfznd5qaemaLUlMvZNVGzffeujboa\/IkH\/m1aO6FZNRuNl0wuX7JZR5zSLu6Tp0tf7wm7eOllkhHmdg71Jjc9hT9V8IowkYVCXE4qekH6vm0GQ==\" target=\"_blank\" rel=\"noreferrer noopener\">Playground<\/a><\/p>\n","innerContent":["\n<p class=\"has-text-align-center\"><a href=\"https:\/\/sfc.vuejs.org\/#eNpVUcFuwjAM\/RUrl5UB6bQjKmgTv5FLCS4ra5wocdikqv8+Z4Wpu9nPfs9+9qjeQ9C3jGqnmmRjHxgScg4HQ70LPjKMELHbgPUuZMYzTNBF7+BJSE+GDFlPiQEHdLAvrdXqgVmfie\/gyx969vk04PFee8hW1Qr2h5mib+2QEZ7hVUiGukyWe0\/w0dJZmENvP6V7NATL\/vV6Bij5AfXgL9WiuFmOfUBl5znWjN989MRILDMnQ009X0PuIAmjC0PLKBlAc8rMso7Y2htVRIyCN1vWknyxpFGHcfznd5qaemaLUlMvZNVGzffeujboa\/IkH\/m1aO6FZNRuNl0wuX7JZR5zSLu6Tp0tf7wm7eOllkhHmdg71Jjc9hT9V8IowkYVCXE4qekH6vm0GQ==\" target=\"_blank\" rel=\"noreferrer noopener\">Playground<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Vue natychmiast aktualizuje modyfikowan\u0105 zmienn\u0105 i jej zale\u017cno\u015bci, ale od\u015bwie\u017cenie HTML\u2019a nast\u0119puje z op\u00f3\u017anieniem.\u00a0<\/p>\n","innerContent":["\n<p>Vue natychmiast aktualizuje modyfikowan\u0105 zmienn\u0105 i jej zale\u017cno\u015bci, ale od\u015bwie\u017cenie HTML\u2019a nast\u0119puje z op\u00f3\u017anieniem.\u00a0<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wynik: 1 2 0<\/p>\n","innerContent":["\n<p>Wynik: 1 2 0<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/separator","attrs":[],"innerBlocks":[],"innerHTML":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","innerContent":["\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\"><script>\n  let count = 0;\n  let elem;\n  $: doubleCount = count * 2;\n\n  function handleClick() {\n    count++;\n    console.log(count, doubleCount, elem.textContent);\n  }\n<\/script>\n\n<button bind:this=\"{elem}\" on:click=\"{handleClick}\">{doubleCount}<\/button><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\"><script>\n  let count = 0;\n  let elem;\n  $: doubleCount = count * 2;\n\n  function handleClick() {\n    count++;\n    console.log(count, doubleCount, elem.textContent);\n  }\n<\/script>\n\n<button bind:this=\"{elem}\" on:click=\"{handleClick}\">{doubleCount}<\/button><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":{"align":"center"},"innerBlocks":[],"innerHTML":"\n<p class=\"has-text-align-center\"><a href=\"https:\/\/svelte.dev\/repl\/2c55788d8ffd4458bfe9bcb5f58956db?version=3.49.0\">Playground<\/a><\/p>\n","innerContent":["\n<p class=\"has-text-align-center\"><a href=\"https:\/\/svelte.dev\/repl\/2c55788d8ffd4458bfe9bcb5f58956db?version=3.49.0\">Playground<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Svelte natychmiast aktualizuje zmienn\u0105, ale nie przelicza zale\u017cno\u015bci i nie od\u015bwie\u017ca warto\u015bci w DOM.\u00a0<\/p>\n","innerContent":["\n<p>Svelte natychmiast aktualizuje zmienn\u0105, ale nie przelicza zale\u017cno\u015bci i nie od\u015bwie\u017ca warto\u015bci w DOM.\u00a0<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wynik: 1 0 0\u00a0<\/p>\n","innerContent":["\n<p>Wynik: 1 0 0\u00a0<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/separator","attrs":[],"innerBlocks":[],"innerHTML":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","innerContent":["\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">const App: Component = () => {\n  let elem: any;\n  const [count, setCount] = createSignal(0);\n  const doubleCount = createMemo(() => count() * 2);\n\n  return (\n    <button\n      ref={elem}\n      onClick={() => {\n        setCount(count() + 1);\n        console.log(count(), doubleCount(), elem.textContent);\n      }}\n    >\n      {doubleCount()}\n    <\/button>\n  );\n};\n\nexport default App;\n<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">const App: Component = () => {\n  let elem: any;\n  const [count, setCount] = createSignal(0);\n  const doubleCount = createMemo(() => count() * 2);\n\n  return (\n    <button\n      ref={elem}\n      onClick={() => {\n        setCount(count() + 1);\n        console.log(count(), doubleCount(), elem.textContent);\n      }}\n    >\n      {doubleCount()}\n    <\/button>\n  );\n};\n\nexport default App;\n<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":{"align":"center"},"innerBlocks":[],"innerHTML":"\n<p class=\"has-text-align-center\"><a href=\"https:\/\/stackblitz.com\/edit\/vitejs-vite-nt5drz\">Playground<\/a><\/p>\n","innerContent":["\n<p class=\"has-text-align-center\"><a href=\"https:\/\/stackblitz.com\/edit\/vitejs-vite-nt5drz\">Playground<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>SolidJS to jedyny framework, kt\u00f3ry wraz z aktualizacj\u0105 stanu od\u015bwie\u017ca zar\u00f3wno warto\u015b\u0107 zmiennej i jej zale\u017cno\u015bci jak i HTML.<\/p>\n","innerContent":["\n<p>SolidJS to jedyny framework, kt\u00f3ry wraz z aktualizacj\u0105 stanu od\u015bwie\u017ca zar\u00f3wno warto\u015b\u0107 zmiennej i jej zale\u017cno\u015bci jak i HTML.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wynik: 1 2 2<\/p>\n","innerContent":["\n<p>Wynik: 1 2 2<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/separator","attrs":[],"innerBlocks":[],"innerHTML":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","innerContent":["\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":[],"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">@Component({\n  selector: 'my-app',\n  template:\n    '<button #ref (click)=\"handleClick()\">{{ doubleCount$ | async }}<\/button>',\n  styleUrls: []\n})\nexport class AppComponent {\n  @ViewChild('ref') button: any;\n\n  readonly count$ = new BehaviorSubject(0);\n  readonly doubleCount$ = this.count$.pipe(map((it) => it * 2));\n\n  constructor() {}\n\n  async handleClick(): Promise<void> {\n    const count = await firstValueFrom(this.count$);\n    this.count$.next(count + 1);\n    console.log(\n      await firstValueFrom(this.count$),\n      await firstValueFrom(this.doubleCount$),\n      this.button.nativeElement.innerHTML\n    );\n  }\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">@Component({\n  selector: 'my-app',\n  template:\n    '<button #ref (click)=\"handleClick()\">{{ doubleCount$ | async }}<\/button>',\n  styleUrls: []\n})\nexport class AppComponent {\n  @ViewChild('ref') button: any;\n\n  readonly count$ = new BehaviorSubject(0);\n  readonly doubleCount$ = this.count$.pipe(map((it) => it * 2));\n\n  constructor() {}\n\n  async handleClick(): Promise<void> {\n    const count = await firstValueFrom(this.count$);\n    this.count$.next(count + 1);\n    console.log(\n      await firstValueFrom(this.count$),\n      await firstValueFrom(this.doubleCount$),\n      this.button.nativeElement.innerHTML\n    );\n  }\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":{"align":"center"},"innerBlocks":[],"innerHTML":"\n<p class=\"has-text-align-center\"><a href=\"https:\/\/stackblitz.com\/edit\/angular-ivy-5mlazt?file=src\/app\/app.component.ts\">Playground<\/a><\/p>\n","innerContent":["\n<p class=\"has-text-align-center\"><a href=\"https:\/\/stackblitz.com\/edit\/angular-ivy-5mlazt?file=src\/app\/app.component.ts\">Playground<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Pewnie zauwa\u017cyli\u015bcie, \u017ce w\u015br\u00f3d wymienionych w twitteromy w\u0105tku framework\u00f3w brakuje Angulara. Jest tak zapewne dlatego, \u017ce nie posiada on analogicznego API  hook\u00f3w. Posiada on natomiast dobr\u0105 integracj\u0119 z RxJS, kt\u00f3ra w wi\u0119kszo\u015bci przypadk\u00f3w mo\u017ce zast\u0105pi\u0107 hooki. Powy\u017cej znajdziecie moj\u0105 Angularow\u0105 implementacj\u0119.<\/p>\n","innerContent":["\n<p>Pewnie zauwa\u017cyli\u015bcie, \u017ce w\u015br\u00f3d wymienionych w twitteromy w\u0105tku framework\u00f3w brakuje Angulara. Jest tak zapewne dlatego, \u017ce nie posiada on analogicznego API  hook\u00f3w. Posiada on natomiast dobr\u0105 integracj\u0119 z RxJS, kt\u00f3ra w wi\u0119kszo\u015bci przypadk\u00f3w mo\u017ce zast\u0105pi\u0107 hooki. Powy\u017cej znajdziecie moj\u0105 Angularow\u0105 implementacj\u0119.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wynik: 1 2 0<\/p>\n","innerContent":["\n<p>Wynik: 1 2 0<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/separator","attrs":[],"innerBlocks":[],"innerHTML":"\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","innerContent":["\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kt\u00f3re rozwi\u0105zanie jest najbardziej czytelne? Ku mojemu zaskoczeniu, wyniki wszystkich framework\u00f3w s\u0105 sensowne. Ja najbardziej sk\u0142aniam si\u0119 ku funkcyjnemu podej\u015bciu Reacta (zmiana warto\u015bci zmiennych jest r\u00f3wnoznaczna z kolejnym wywo\u0142aniem funkcji) i zr\u00f3wnowa\u017conemu podej\u015bciu Vue i Angulara (zmienne od\u015bwie\u017cane s\u0105 natychmiast, ale ci\u0119\u017cka operacja renderowania odk\u0142adana jest na koniec wykonania funkcji). A Wy co s\u0105dzicie na ten temat?<\/p>\n","innerContent":["\n<p>Kt\u00f3re rozwi\u0105zanie jest najbardziej czytelne? Ku mojemu zaskoczeniu, wyniki wszystkich framework\u00f3w s\u0105 sensowne. Ja najbardziej sk\u0142aniam si\u0119 ku funkcyjnemu podej\u015bciu Reacta (zmiana warto\u015bci zmiennych jest r\u00f3wnoznaczna z kolejnym wywo\u0142aniem funkcji) i zr\u00f3wnowa\u017conemu podej\u015bciu Vue i Angulara (zmienne od\u015bwie\u017cane s\u0105 natychmiast, ale ci\u0119\u017cka operacja renderowania odk\u0142adana jest na koniec wykonania funkcji). A Wy co s\u0105dzicie na ten temat?<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/dev.to\/this-is-learning\/the-cost-of-consistency-in-ui-frameworks-4agi\">https:\/\/dev.to\/this-is-learning\/the-cost-of-consistency-in-ui-frameworks-4agi<\/a><br><a href=\"https:\/\/twitter.com\/ryancarniato\/status\/1353801009844240389\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/twitter.com\/ryancarniato\/status\/1353801009844240389<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/dev.to\/this-is-learning\/the-cost-of-consistency-in-ui-frameworks-4agi\">https:\/\/dev.to\/this-is-learning\/the-cost-of-consistency-in-ui-frameworks-4agi<\/a><br><a href=\"https:\/\/twitter.com\/ryancarniato\/status\/1353801009844240389\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/twitter.com\/ryancarniato\/status\/1353801009844240389<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9941","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=9941"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9941\/revisions"}],"predecessor-version":[{"id":10467,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9941\/revisions\/10467"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/8922"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=9941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=9941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=9941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}