{"id":10011,"date":"2022-02-03T18:55:56","date_gmt":"2022-02-03T17:55:56","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/"},"modified":"2022-09-19T13:16:32","modified_gmt":"2022-09-19T11:16:32","slug":"frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/","title":{"rendered":"Frontend Thursday vol. 74 – Chrome 98 i 99, fetch API dla Node"},"content":{"rendered":"\n

1. Nowo\u015bci w Chrome 98 i 99<\/h2>\n\n\n\n

Zazwyczaj nie informujemy Was o kolejnych wydaniach Chrome, ale do wydanego w tym tygodniu Chrome 98 i do zbli\u017caj\u0105cego si\u0119 Chrome 99 trafi\u0142y naprawd\u0119 ciekawe funkcjonalno\u015bci. Zacznijmy od tego z czego mo\u017cecie cieszy\u0107 si\u0119 ju\u017c dzi\u015b, czyli wsparcia dla czcionek w formacie COLRv1 w Chrome 98. Poprzednik nowego formatu, czyli COLORv0 umo\u017cliwia\u0142 definiowanie czcionek wraz z kolorami. COLORv1 dodaje funkcjonalno\u015b\u0107 gradient\u00f3w oraz znane z SVG funkcjonalno\u015bci kompozycji i mieszania. Ponadto nowy format umo\u017cliwia ponowne wykorzystywanie raz zdefiniowanych kszta\u0142t\u00f3w, co w specyficznych przypadkach prowadzi do sporej optymalizacji.<\/p>\n\n\n\n

Po co nam programistom format umo\u017cliwiaj\u0105cy tak zaawansowane kolorowanie czcionek? Oczywist\u0105 odpowiedzi\u0105 jest mo\u017cliwo\u015b\u0107 tworzenia zwariowanych nag\u0142\u00f3wk\u00f3w bez potrzeby generowania dedykowanych obrazk\u00f3w w formacie SVG. Ciekawsz\u0105 odpowiedzi\u0105 jak\u0105 stawia Google jest wsparcie dla w\u0142asnych emoji czy kolorowych ikon. Na papierze wygl\u0105da to dobrze, ale mnie osobi\u015bcie niepokoi rozjazd w sposobie wspierania w\u0142asnych emoji pomi\u0119dzy przegl\u0105darkami. Trzymam kciuki, \u017ceby wsparcie dla COLORv1 pojawi\u0142o si\u0119 r\u00f3wnie\u017c w Safari i Firefox.<\/p>\n\n\n\n

\"\"
Tak niesamowite nag\u0142\u00f3wki b\u0119dziecie mogli tworzy\u0107 dzi\u0119ki nowemu formatowi czcionek od Google. A\u017c przypominaj\u0105 si\u0119 czasy ClipArt\u00f3w\u2026<\/figcaption><\/figure>\n\n\n\n

Przejd\u017amy teraz do nowo\u015bci zmierzaj\u0105cych do Chrome 99. Przegl\u0105darki od dawna dostarczaj\u0105 natywne komponenty, kt\u00f3re umo\u017cliwiaj\u0105 wyb\u00f3r daty, czasu czy koloru. Do tej pory jedyn\u0105 mo\u017cliwo\u015bci\u0105 otworzenia tych komponent\u00f3w by\u0142o umieszczenie na stronie inputu z odpowiednio ustawionym typem i pozostawienie reszty u\u017cytkownikowi. Programi\u015bci chc\u0105cy z poziomu kodu otworzy\u0107 podobny komponent skazani byli na korzystanie z zewn\u0119trznych bibliotek, kt\u00f3re z r\u00f3\u017cnym skutkiem pr\u00f3bowa\u0142y emulowa\u0107 odpowiednie komponenty. Od Chrome 99 mo\u017cliwe b\u0119dzie otworzenie natywnych komponent\u00f3w wyboru z poziomu API. Niestety, aby to zrobi\u0107 nadal niezb\u0119dna b\u0119dzie obecno\u015b\u0107 odpowiedniego inputa i wyst\u0105pienie interakcji ze strony u\u017cytkownika. Podobnie jak w przypadku COLORv1, tu r\u00f3wnie\u017c czekamy na wsparcie ze strony pozosta\u0142ych przegl\u0105darek.<\/p>\n\n\n\n

<input type="date">\n<button>Show the date picker<\/button>\n\n<script>\n  const button = document.querySelector("button");\n  const dateInput = document.querySelector("input");\n\n  button.addEventListener("click", () => {\n    try {\n      dateInput.showPicker();\n      \/\/ A date picker is shown.\n    } catch (error) {\n      \/\/ Use external library when this fails.\n    }\n  });\n<\/script>\n<\/code><\/pre>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/developer.chrome.com\/blog\/show-picker\/<\/a>
https:\/\/developer.chrome.com\/blog\/colrv1-fonts\/<\/a><\/p>\n\n\n\n
2. Node wreszcie otrzyma\u0142 wsparcie dla fetch API<\/h2>\n\n\n\n
Do Node 18 za flag\u0105 `–experimental-fetch` trafi\u0142o wreszcie wsparcie dla fetch API znanego z przegl\u0105darek! Je\u015bli funkcjonalno\u015b\u0107 ta kiedy\u015b wyjdzie z fazy eksperymentu, to b\u0119dzie to gigantyczny krok dla kompatybilno\u015bci bibliotek przeznaczonych dla przegl\u0105darek i serwer\u00f3w. Wspomnijmy chocia\u017cby, o mo\u017cliwo\u015bci uwsp\u00f3lnienia kodu odpowiedzialnego za komunikacj\u0119 z serwerem dla aplikacji renderowanej po stronie serwera i po stronie klienta. <\/p>\n\n\n\n
Na razie b\u0105d\u017acie jednak uwa\u017cni, gdy\u017c wsparcie dostarczone jest przez integracj\u0119 z bibliotek\u0105 Undici, kt\u00f3ra w swojej dokumentacji wyra\u017anie zaznacza, \u017ce metoda fetch() nie jest jeszcze w pe\u0142ni kompatybilna z wersj\u0105 przegl\u0105darkow\u0105. Na przetestowanie zmian osobi\u015bcie przyjdzie nam te\u017c troch\u0119 poczeka\u0107, bo premiera Node 18 zapowiedziana jest na 19-04-2022.<\/p>\n\n\n\n
\"\"
Chyba wszyscy programi\u015bci JS widz\u0105c informacj\u0119 o wsparciu dla fetch API zmierzaj\u0105cym do Node.js<\/figcaption><\/figure><\/div>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/github.com\/nodejs\/node\/pull\/41749<\/a>
https:\/\/undici.nodejs.org\/#\/?id=undicifetchinput-init-promise<\/a><\/p>\n\n\n\n
3. Storybook przygotowa\u0142 plugin do Figmy<\/h2>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Storybook w ostatnich miesi\u0105cach pokazuje nowe funkcjonalno\u015bci i pluginy szybciej ni\u017c dobrze rozgrzany karabin maszynowy. Kilka dni temu firma zaprezentowa\u0142a kolejn\u0105 mo\u017cliwo\u015b\u0107 integracji i tym razem pad\u0142o na chyba najpopularniejsze narz\u0119dzie dla UI Designer\u00f3w, czyli Figm\u0119. Przygotowany plugin umo\u017cliwia po\u0142\u0105czenie designu komponent\u00f3w  z odpowiednikami w Storybook. Niestety nie zapewni to 100% zgodno\u015bci design\u00f3w z implementacj\u0105, ale pozwoli designerom zobaczy\u0107 jak w obecnej wersji biblioteki prezentuje si\u0119 wybrany komponent. Podgl\u0105d zaimplementowanego komponentu uruchamiany jest w interaktywnym trybie wewn\u0105trz figmy, co pozwala w prosty spos\u00f3b por\u00f3wnywa\u0107 design z implementacj\u0105.<\/p>\n\n\n\n
\"\"
P\u00f3\u0142 \u017cartem, p\u00f3\u0142 serio czekam jeszcze na mo\u017cliwo\u015b\u0107 por\u00f3wnywania designu z implementacj\u0105 co do pixela.<\/figcaption><\/figure><\/div>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/storybook.js.org\/blog\/figma-plugin-sneak-peek\/<\/a><\/p>\n\n\n\n
4. WebVM: wirtualna maszyna x86 w przegl\u0105darce<\/h2>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Na zako\u0144czenie mam dla was raczej ciekawostk\u0119, ni\u017c narz\u0119dzie z kt\u00f3rego rzeczywi\u015bcie skorzystacie w pracy. WebVM to wirtualna maszyna x86 oparta o debiana i\u00a0 uruchamiana ca\u0142kowicie w przegl\u0105darce klienta. Jako silnik wykorzystany zosta\u0142 CheerpX, czyli napisana w C++ wirtualna maszyna. Nast\u0119pnie kod \u017ar\u00f3d\u0142owy skompilowany zosta\u0142 przy u\u017cyciu narz\u0119dzi Cheerp, kt\u00f3re transformuje kod napisany w C lub C++ do postaci miksu JavaScriptu i WebAssembly. Co ciekawe CheerpX wykorzystywany jest te\u017c do emulacji martwej ju\u017c technologii Flash. Je\u015bli jeste\u015bcie ciekawi jak emulowany jest system plik\u00f3w lub jak w locie na apodstwie x86 generwoany jest WASM to zach\u0119cam do zerkni\u0119cia w \u017ar\u00f3d\u0142a.<\/p>\n\n\n\n
\u017br\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/leaningtech.com\/webvm-server-less-x86-virtual-machines-in-the-browser\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Po ostatnich szalonych tygodniach doczekali\u015bmy wreszcie spokojniejszego czsasu. W 73 edycji naszego przegl\u0105dy przyjrzymy si\u0119 nowo\u015bciom w Chrome 98 i 99, fetch API zmierzaj\u0105cemu do Node 18 i nowemu pluginowi do Figmy od Storybooka. Rozsi\u0105d\u017acie si\u0119 wygodnie i zapraszamy do lektury!<\/p>\n","protected":false},"author":12,"featured_media":7923,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-10011","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/FRONTEND.png","estimated_reading_time":"4","feature_image_visible":false},"yoast_head":"\nFrontend Thursday vol. 74 - Chrome 98 i 99, fetch API dla Node - 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-74-chrome-98-i-99-fetch-api-dla-node\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 74 - Chrome 98 i 99, fetch API dla Node - Vived\" \/>\n<meta property=\"og:description\" content=\"Po ostatnich szalonych tygodniach doczekali\u015bmy wreszcie spokojniejszego czsasu. W 73 edycji naszego przegl\u0105dy przyjrzymy si\u0119 nowo\u015bciom w Chrome 98 i 99, fetch API zmierzaj\u0105cemu do Node 18 i nowemu pluginowi do Figmy od Storybooka. Rozsi\u0105d\u017acie si\u0119 wygodnie i zapraszamy do lektury!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-03T17:55:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/FRONTEND.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<meta name=\"twitter:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/FRONTEND.png\" \/>\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-74-chrome-98-i-99-fetch-api-dla-node\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 74 – Chrome 98 i 99, fetch API dla Node\",\"datePublished\":\"2022-02-03T17:55:56+00:00\",\"dateModified\":\"2022-09-19T11:16:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/\"},\"wordCount\":794,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/pexels-deepanker-verma-1482061-scaled.jpg\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/\",\"name\":\"Frontend Thursday vol. 74 - Chrome 98 i 99, fetch API dla Node - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/pexels-deepanker-verma-1482061-scaled.jpg\",\"datePublished\":\"2022-02-03T17:55:56+00:00\",\"dateModified\":\"2022-09-19T11:16:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/pexels-deepanker-verma-1482061-scaled.jpg\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/pexels-deepanker-verma-1482061-scaled.jpg\",\"width\":2560,\"height\":1708},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 74 – Chrome 98 i 99, fetch API dla Node\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Frontend Thursday vol. 74 - Chrome 98 i 99, fetch API dla Node - 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-74-chrome-98-i-99-fetch-api-dla-node\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 74 - Chrome 98 i 99, fetch API dla Node - Vived","og_description":"Po ostatnich szalonych tygodniach doczekali\u015bmy wreszcie spokojniejszego czsasu. W 73 edycji naszego przegl\u0105dy przyjrzymy si\u0119 nowo\u015bciom w Chrome 98 i 99, fetch API zmierzaj\u0105cemu do Node 18 i nowemu pluginowi do Figmy od Storybooka. Rozsi\u0105d\u017acie si\u0119 wygodnie i zapraszamy do lektury!","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/","og_site_name":"Vived","article_published_time":"2022-02-03T17:55:56+00:00","article_modified_time":"2022-09-19T11:16:32+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/FRONTEND.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","twitter_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/FRONTEND.png","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 74 – Chrome 98 i 99, fetch API dla Node","datePublished":"2022-02-03T17:55:56+00:00","dateModified":"2022-09-19T11:16:32+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/"},"wordCount":794,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/pexels-deepanker-verma-1482061-scaled.jpg","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/","name":"Frontend Thursday vol. 74 - Chrome 98 i 99, fetch API dla Node - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/pexels-deepanker-verma-1482061-scaled.jpg","datePublished":"2022-02-03T17:55:56+00:00","dateModified":"2022-09-19T11:16:32+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/pexels-deepanker-verma-1482061-scaled.jpg","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/pexels-deepanker-verma-1482061-scaled.jpg","width":2560,"height":1708},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-74-chrome-98-i-99-fetch-api-dla-node\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 74 – Chrome 98 i 99, fetch API dla Node"}]},{"@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 id=\"1-nowosci-w-chrome-98-i-99\">1. Nowo\u015bci w Chrome 98 i 99<\/h2>\n","innerContent":["\n<h2 id=\"1-nowosci-w-chrome-98-i-99\">1. Nowo\u015bci w Chrome 98 i 99<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zazwyczaj nie informujemy Was o kolejnych wydaniach Chrome, ale do wydanego w tym tygodniu Chrome 98 i do zbli\u017caj\u0105cego si\u0119 Chrome 99 trafi\u0142y naprawd\u0119 ciekawe funkcjonalno\u015bci. Zacznijmy od tego z czego mo\u017cecie cieszy\u0107 si\u0119 ju\u017c dzi\u015b, czyli wsparcia dla czcionek w formacie COLRv1 w Chrome 98. Poprzednik nowego formatu, czyli COLORv0 umo\u017cliwia\u0142 definiowanie czcionek wraz z kolorami. COLORv1 dodaje funkcjonalno\u015b\u0107 gradient\u00f3w oraz znane z SVG funkcjonalno\u015bci kompozycji i mieszania. Ponadto nowy format umo\u017cliwia ponowne wykorzystywanie raz zdefiniowanych kszta\u0142t\u00f3w, co w specyficznych przypadkach prowadzi do sporej optymalizacji.<\/p>\n","innerContent":["\n<p>Zazwyczaj nie informujemy Was o kolejnych wydaniach Chrome, ale do wydanego w tym tygodniu Chrome 98 i do zbli\u017caj\u0105cego si\u0119 Chrome 99 trafi\u0142y naprawd\u0119 ciekawe funkcjonalno\u015bci. Zacznijmy od tego z czego mo\u017cecie cieszy\u0107 si\u0119 ju\u017c dzi\u015b, czyli wsparcia dla czcionek w formacie COLRv1 w Chrome 98. Poprzednik nowego formatu, czyli COLORv0 umo\u017cliwia\u0142 definiowanie czcionek wraz z kolorami. COLORv1 dodaje funkcjonalno\u015b\u0107 gradient\u00f3w oraz znane z SVG funkcjonalno\u015bci kompozycji i mieszania. Ponadto nowy format umo\u017cliwia ponowne wykorzystywanie raz zdefiniowanych kszta\u0142t\u00f3w, co w specyficznych przypadkach prowadzi do sporej optymalizacji.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Po co nam programistom format umo\u017cliwiaj\u0105cy tak zaawansowane kolorowanie czcionek? Oczywist\u0105 odpowiedzi\u0105 jest mo\u017cliwo\u015b\u0107 tworzenia zwariowanych nag\u0142\u00f3wk\u00f3w bez potrzeby generowania dedykowanych obrazk\u00f3w w formacie SVG. Ciekawsz\u0105 odpowiedzi\u0105 jak\u0105 stawia Google jest wsparcie dla w\u0142asnych emoji czy kolorowych ikon. Na papierze wygl\u0105da to dobrze, ale mnie osobi\u015bcie niepokoi rozjazd w sposobie wspierania w\u0142asnych emoji pomi\u0119dzy przegl\u0105darkami. Trzymam kciuki, \u017ceby wsparcie dla COLORv1 pojawi\u0142o si\u0119 r\u00f3wnie\u017c w Safari i Firefox.<\/p>\n","innerContent":["\n<p>Po co nam programistom format umo\u017cliwiaj\u0105cy tak zaawansowane kolorowanie czcionek? Oczywist\u0105 odpowiedzi\u0105 jest mo\u017cliwo\u015b\u0107 tworzenia zwariowanych nag\u0142\u00f3wk\u00f3w bez potrzeby generowania dedykowanych obrazk\u00f3w w formacie SVG. Ciekawsz\u0105 odpowiedzi\u0105 jak\u0105 stawia Google jest wsparcie dla w\u0142asnych emoji czy kolorowych ikon. Na papierze wygl\u0105da to dobrze, ale mnie osobi\u015bcie niepokoi rozjazd w sposobie wspierania w\u0142asnych emoji pomi\u0119dzy przegl\u0105darkami. Trzymam kciuki, \u017ceby wsparcie dla COLORv1 pojawi\u0142o si\u0119 r\u00f3wnie\u017c w Safari i Firefox.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"id":3785,"sizeSlug":"large","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-03-at-18.24.56-1024x361.png\" alt=\"\" class=\"wp-image-3785\"\/><figcaption>Tak niesamowite nag\u0142\u00f3wki b\u0119dziecie mogli tworzy\u0107 dzi\u0119ki nowemu formatowi czcionek od Google. A\u017c przypominaj\u0105 si\u0119 czasy ClipArt\u00f3w\u2026<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-03-at-18.24.56-1024x361.png\" alt=\"\" class=\"wp-image-3785\"\/><figcaption>Tak niesamowite nag\u0142\u00f3wki b\u0119dziecie mogli tworzy\u0107 dzi\u0119ki nowemu formatowi czcionek od Google. A\u017c przypominaj\u0105 si\u0119 czasy ClipArt\u00f3w\u2026<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Przejd\u017amy teraz do nowo\u015bci zmierzaj\u0105cych do Chrome 99. Przegl\u0105darki od dawna dostarczaj\u0105 natywne komponenty, kt\u00f3re umo\u017cliwiaj\u0105 wyb\u00f3r daty, czasu czy koloru. Do tej pory jedyn\u0105 mo\u017cliwo\u015bci\u0105 otworzenia tych komponent\u00f3w by\u0142o umieszczenie na stronie inputu z odpowiednio ustawionym typem i pozostawienie reszty u\u017cytkownikowi. Programi\u015bci chc\u0105cy z poziomu kodu otworzy\u0107 podobny komponent skazani byli na korzystanie z zewn\u0119trznych bibliotek, kt\u00f3re z r\u00f3\u017cnym skutkiem pr\u00f3bowa\u0142y emulowa\u0107 odpowiednie komponenty. Od Chrome 99 mo\u017cliwe b\u0119dzie otworzenie natywnych komponent\u00f3w wyboru z poziomu API. Niestety, aby to zrobi\u0107 nadal niezb\u0119dna b\u0119dzie obecno\u015b\u0107 odpowiedniego inputa i wyst\u0105pienie interakcji ze strony u\u017cytkownika. Podobnie jak w przypadku COLORv1, tu r\u00f3wnie\u017c czekamy na wsparcie ze strony pozosta\u0142ych przegl\u0105darek.<\/p>\n","innerContent":["\n<p>Przejd\u017amy teraz do nowo\u015bci zmierzaj\u0105cych do Chrome 99. Przegl\u0105darki od dawna dostarczaj\u0105 natywne komponenty, kt\u00f3re umo\u017cliwiaj\u0105 wyb\u00f3r daty, czasu czy koloru. Do tej pory jedyn\u0105 mo\u017cliwo\u015bci\u0105 otworzenia tych komponent\u00f3w by\u0142o umieszczenie na stronie inputu z odpowiednio ustawionym typem i pozostawienie reszty u\u017cytkownikowi. Programi\u015bci chc\u0105cy z poziomu kodu otworzy\u0107 podobny komponent skazani byli na korzystanie z zewn\u0119trznych bibliotek, kt\u00f3re z r\u00f3\u017cnym skutkiem pr\u00f3bowa\u0142y emulowa\u0107 odpowiednie komponenty. Od Chrome 99 mo\u017cliwe b\u0119dzie otworzenie natywnych komponent\u00f3w wyboru z poziomu API. Niestety, aby to zrobi\u0107 nadal niezb\u0119dna b\u0119dzie obecno\u015b\u0107 odpowiedniego inputa i wyst\u0105pienie interakcji ze strony u\u017cytkownika. Podobnie jak w przypadku COLORv1, tu r\u00f3wnie\u017c czekamy na wsparcie ze strony pozosta\u0142ych przegl\u0105darek.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\"><input type=\"date\">\n<button>Show the date picker<\/button>\n\n<script>\n  const button = document.querySelector(\"button\");\n  const dateInput = document.querySelector(\"input\");\n\n  button.addEventListener(\"click\", () => {\n    try {\n      dateInput.showPicker();\n      \/\/ A date picker is shown.\n    } catch (error) {\n      \/\/ Use external library when this fails.\n    }\n  });\n<\/script>\n<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\"><input type=\"date\">\n<button>Show the date picker<\/button>\n\n<script>\n  const button = document.querySelector(\"button\");\n  const dateInput = document.querySelector(\"input\");\n\n  button.addEventListener(\"click\", () => {\n    try {\n      dateInput.showPicker();\n      \/\/ A date picker is shown.\n    } catch (error) {\n      \/\/ Use external library when this fails.\n    }\n  });\n<\/script>\n<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"zrodla\">\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3 id=\"zrodla\">\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:\/\/developer.chrome.com\/blog\/show-picker\/\">https:\/\/developer.chrome.com\/blog\/show-picker\/<\/a><br><a href=\"https:\/\/developer.chrome.com\/blog\/colrv1-fonts\/\">https:\/\/developer.chrome.com\/blog\/colrv1-fonts\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/developer.chrome.com\/blog\/show-picker\/\">https:\/\/developer.chrome.com\/blog\/show-picker\/<\/a><br><a href=\"https:\/\/developer.chrome.com\/blog\/colrv1-fonts\/\">https:\/\/developer.chrome.com\/blog\/colrv1-fonts\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 id=\"2-node-wreszcie-otrzymal-wsparcie-dla-fetch-api\">2. Node wreszcie otrzyma\u0142 wsparcie dla fetch API<\/h2>\n","innerContent":["\n<h2 id=\"2-node-wreszcie-otrzymal-wsparcie-dla-fetch-api\">2. Node wreszcie otrzyma\u0142 wsparcie dla fetch API<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Do Node 18 za flag\u0105 `--experimental-fetch` trafi\u0142o wreszcie wsparcie dla fetch API znanego z przegl\u0105darek! Je\u015bli funkcjonalno\u015b\u0107 ta kiedy\u015b wyjdzie z fazy eksperymentu, to b\u0119dzie to gigantyczny krok dla kompatybilno\u015bci bibliotek przeznaczonych dla przegl\u0105darek i serwer\u00f3w. Wspomnijmy chocia\u017cby, o mo\u017cliwo\u015bci uwsp\u00f3lnienia kodu odpowiedzialnego za komunikacj\u0119 z serwerem dla aplikacji renderowanej po stronie serwera i po stronie klienta. <\/p>\n","innerContent":["\n<p>Do Node 18 za flag\u0105 `--experimental-fetch` trafi\u0142o wreszcie wsparcie dla fetch API znanego z przegl\u0105darek! Je\u015bli funkcjonalno\u015b\u0107 ta kiedy\u015b wyjdzie z fazy eksperymentu, to b\u0119dzie to gigantyczny krok dla kompatybilno\u015bci bibliotek przeznaczonych dla przegl\u0105darek i serwer\u00f3w. Wspomnijmy chocia\u017cby, o mo\u017cliwo\u015bci uwsp\u00f3lnienia kodu odpowiedzialnego za komunikacj\u0119 z serwerem dla aplikacji renderowanej po stronie serwera i po stronie klienta. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na razie b\u0105d\u017acie jednak uwa\u017cni, gdy\u017c wsparcie dostarczone jest przez integracj\u0119 z bibliotek\u0105 Undici, kt\u00f3ra w swojej dokumentacji wyra\u017anie zaznacza, \u017ce metoda fetch() nie jest jeszcze w pe\u0142ni kompatybilna z wersj\u0105 przegl\u0105darkow\u0105. Na przetestowanie zmian osobi\u015bcie przyjdzie nam te\u017c troch\u0119 poczeka\u0107, bo premiera Node 18 zapowiedziana jest na 19-04-2022.<\/p>\n","innerContent":["\n<p>Na razie b\u0105d\u017acie jednak uwa\u017cni, gdy\u017c wsparcie dostarczone jest przez integracj\u0119 z bibliotek\u0105 Undici, kt\u00f3ra w swojej dokumentacji wyra\u017anie zaznacza, \u017ce metoda fetch() nie jest jeszcze w pe\u0142ni kompatybilna z wersj\u0105 przegl\u0105darkow\u0105. Na przetestowanie zmian osobi\u015bcie przyjdzie nam te\u017c troch\u0119 poczeka\u0107, bo premiera Node 18 zapowiedziana jest na 19-04-2022.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3786,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/giphy-4.gif\" alt=\"\" class=\"wp-image-3786\"\/><figcaption>Chyba wszyscy programi\u015bci JS widz\u0105c informacj\u0119 o wsparciu dla fetch API zmierzaj\u0105cym do Node.js<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/giphy-4.gif\" alt=\"\" class=\"wp-image-3786\"\/><figcaption>Chyba wszyscy programi\u015bci JS widz\u0105c informacj\u0119 o wsparciu dla fetch API zmierzaj\u0105cym do Node.js<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"zrodla-1\">\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3 id=\"zrodla-1\">\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:\/\/github.com\/nodejs\/node\/pull\/41749\">https:\/\/github.com\/nodejs\/node\/pull\/41749<\/a><br><a href=\"https:\/\/undici.nodejs.org\/#\/?id=undicifetchinput-init-promise\">https:\/\/undici.nodejs.org\/#\/?id=undicifetchinput-init-promise<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/github.com\/nodejs\/node\/pull\/41749\">https:\/\/github.com\/nodejs\/node\/pull\/41749<\/a><br><a href=\"https:\/\/undici.nodejs.org\/#\/?id=undicifetchinput-init-promise\">https:\/\/undici.nodejs.org\/#\/?id=undicifetchinput-init-promise<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 id=\"3-storybook-przygotowal-plugin-do-figmy\">3. Storybook przygotowa\u0142 plugin do Figmy<\/h2>\n","innerContent":["\n<h2 id=\"3-storybook-przygotowal-plugin-do-figmy\">3. Storybook przygotowa\u0142 plugin do Figmy<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3793,"sizeSlug":"large","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/storybook-connect-hero-1-1024x660.gif\" alt=\"\" class=\"wp-image-3793\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/storybook-connect-hero-1-1024x660.gif\" alt=\"\" class=\"wp-image-3793\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Storybook w ostatnich miesi\u0105cach pokazuje nowe funkcjonalno\u015bci i pluginy szybciej ni\u017c dobrze rozgrzany karabin maszynowy. Kilka dni temu firma zaprezentowa\u0142a kolejn\u0105 mo\u017cliwo\u015b\u0107 integracji i tym razem pad\u0142o na chyba najpopularniejsze narz\u0119dzie dla UI Designer\u00f3w, czyli Figm\u0119. Przygotowany plugin umo\u017cliwia po\u0142\u0105czenie designu komponent\u00f3w  z odpowiednikami w Storybook. Niestety nie zapewni to 100% zgodno\u015bci design\u00f3w z implementacj\u0105, ale pozwoli designerom zobaczy\u0107 jak w obecnej wersji biblioteki prezentuje si\u0119 wybrany komponent. Podgl\u0105d zaimplementowanego komponentu uruchamiany jest w interaktywnym trybie wewn\u0105trz figmy, co pozwala w prosty spos\u00f3b por\u00f3wnywa\u0107 design z implementacj\u0105.<\/p>\n","innerContent":["\n<p>Storybook w ostatnich miesi\u0105cach pokazuje nowe funkcjonalno\u015bci i pluginy szybciej ni\u017c dobrze rozgrzany karabin maszynowy. Kilka dni temu firma zaprezentowa\u0142a kolejn\u0105 mo\u017cliwo\u015b\u0107 integracji i tym razem pad\u0142o na chyba najpopularniejsze narz\u0119dzie dla UI Designer\u00f3w, czyli Figm\u0119. Przygotowany plugin umo\u017cliwia po\u0142\u0105czenie designu komponent\u00f3w  z odpowiednikami w Storybook. Niestety nie zapewni to 100% zgodno\u015bci design\u00f3w z implementacj\u0105, ale pozwoli designerom zobaczy\u0107 jak w obecnej wersji biblioteki prezentuje si\u0119 wybrany komponent. Podgl\u0105d zaimplementowanego komponentu uruchamiany jest w interaktywnym trybie wewn\u0105trz figmy, co pozwala w prosty spos\u00f3b por\u00f3wnywa\u0107 design z implementacj\u0105.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3788,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/giphy-3.gif\" alt=\"\" class=\"wp-image-3788\"\/><figcaption>P\u00f3\u0142 \u017cartem, p\u00f3\u0142 serio czekam jeszcze na mo\u017cliwo\u015b\u0107 por\u00f3wnywania designu z implementacj\u0105 co do pixela.<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/giphy-3.gif\" alt=\"\" class=\"wp-image-3788\"\/><figcaption>P\u00f3\u0142 \u017cartem, p\u00f3\u0142 serio czekam jeszcze na mo\u017cliwo\u015b\u0107 por\u00f3wnywania designu z implementacj\u0105 co do pixela.<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"zrodla-2\">\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3 id=\"zrodla-2\">\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:\/\/storybook.js.org\/blog\/figma-plugin-sneak-peek\/\">https:\/\/storybook.js.org\/blog\/figma-plugin-sneak-peek\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/storybook.js.org\/blog\/figma-plugin-sneak-peek\/\">https:\/\/storybook.js.org\/blog\/figma-plugin-sneak-peek\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 id=\"4-webvm-wirtualna-maszyna-x86-w-przegladarce\">4. WebVM: wirtualna maszyna x86 w przegl\u0105darce<\/h2>\n","innerContent":["\n<h2 id=\"4-webvm-wirtualna-maszyna-x86-w-przegladarce\">4. WebVM: wirtualna maszyna x86 w przegl\u0105darce<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3789,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/1_en0eK_11xULHPZftaG7aPQ.png\" alt=\"\" class=\"wp-image-3789\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/02\/1_en0eK_11xULHPZftaG7aPQ.png\" alt=\"\" class=\"wp-image-3789\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na zako\u0144czenie mam dla was raczej ciekawostk\u0119, ni\u017c narz\u0119dzie z kt\u00f3rego rzeczywi\u015bcie skorzystacie w pracy. WebVM to wirtualna maszyna x86 oparta o debiana i\u00a0 uruchamiana ca\u0142kowicie w przegl\u0105darce klienta. Jako silnik wykorzystany zosta\u0142 CheerpX, czyli napisana w C++ wirtualna maszyna. Nast\u0119pnie kod \u017ar\u00f3d\u0142owy skompilowany zosta\u0142 przy u\u017cyciu narz\u0119dzi Cheerp, kt\u00f3re transformuje kod napisany w C lub C++ do postaci miksu JavaScriptu i WebAssembly. Co ciekawe CheerpX wykorzystywany jest te\u017c do emulacji martwej ju\u017c technologii Flash. Je\u015bli jeste\u015bcie ciekawi jak emulowany jest system plik\u00f3w lub jak w locie na apodstwie x86 generwoany jest WASM to zach\u0119cam do zerkni\u0119cia w \u017ar\u00f3d\u0142a.<\/p>\n","innerContent":["\n<p>Na zako\u0144czenie mam dla was raczej ciekawostk\u0119, ni\u017c narz\u0119dzie z kt\u00f3rego rzeczywi\u015bcie skorzystacie w pracy. WebVM to wirtualna maszyna x86 oparta o debiana i\u00a0 uruchamiana ca\u0142kowicie w przegl\u0105darce klienta. Jako silnik wykorzystany zosta\u0142 CheerpX, czyli napisana w C++ wirtualna maszyna. Nast\u0119pnie kod \u017ar\u00f3d\u0142owy skompilowany zosta\u0142 przy u\u017cyciu narz\u0119dzi Cheerp, kt\u00f3re transformuje kod napisany w C lub C++ do postaci miksu JavaScriptu i WebAssembly. Co ciekawe CheerpX wykorzystywany jest te\u017c do emulacji martwej ju\u017c technologii Flash. Je\u015bli jeste\u015bcie ciekawi jak emulowany jest system plik\u00f3w lub jak w locie na apodstwie x86 generwoany jest WASM to zach\u0119cam do zerkni\u0119cia w \u017ar\u00f3d\u0142a.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 id=\"zrodla-3\">\u017br\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3 id=\"zrodla-3\">\u017br\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:\/\/leaningtech.com\/webvm-server-less-x86-virtual-machines-in-the-browser\/\">https:\/\/leaningtech.com\/webvm-server-less-x86-virtual-machines-in-the-browser\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/leaningtech.com\/webvm-server-less-x86-virtual-machines-in-the-browser\/\">https:\/\/leaningtech.com\/webvm-server-less-x86-virtual-machines-in-the-browser\/<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10011","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=10011"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10011\/revisions"}],"predecessor-version":[{"id":10603,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10011\/revisions\/10603"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/7923"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}