{"id":9992,"date":"2022-03-24T20:17:16","date_gmt":"2022-03-24T19:17:16","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/"},"modified":"2022-09-19T13:16:30","modified_gmt":"2022-09-19T11:16:30","slug":"frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/","title":{"rendered":"Frontend Thursday vol. 80 – nowo\u015bci w react-router i wskrzeszenie faker.js"},"content":{"rendered":"\n

1. Nowo\u015bci w react-router<\/h2>\n\n\n\n

Kojarzycie Remix – nowy framework do Server Side Renderingu od tw\u00f3rc\u00f3w react-router? Je\u015bli nie, to najwy\u017csza pora nadrobi\u0107 braki, bo w ostatnich tygodniach za spraw\u0105 licznych blog post\u00f3w i zbli\u017caj\u0105cej si\u0119 konferencji Remix Conf jest o nim coraz g\u0142o\u015bniej. Po 4 miesi\u0105cach od premiery framework zebra\u0142 solidn\u0105 baz\u0119 u\u017cytkownik\u00f3w i wiele wskazuje na to, \u017ce w przysz\u0142o\u015bci mo\u017ce sta\u0107 si\u0119 on g\u0142\u00f3wnym rywalem Next.js. W detale tej nowej zabawki zag\u0142\u0119biali\u015bmy si\u0119 w 65 edycji naszego przegl\u0105du<\/a> i tam odsy\u0142am wszystkich zainteresowanych.<\/p>\n\n\n\n

Nie bez przyczyny wpis po\u015bwi\u0119cony react-router zaczynam od przypomnienia czym jest Remix. Nowe funkcjonalno\u015bci zmierzaj\u0105ce do react-router silnie inspirowane s\u0105 potrzebami Remixa (chocia\u017c skorzystaj\u0105 z nich wszyscy), a o \u015bcis\u0142ej zale\u017cno\u015bci obu projekt\u00f3w najlepiej \u015bwiadczy fakt przeniesienia ich do wsp\u00f3lnego repozytorium.<\/p>\n\n\n\n

Obecnie standardowym podej\u015bciem do pobierania danych w react jest umieszczenie odpowiedniej logiki w komponentach. Rozwi\u0105zanie to dzia\u0142a jak najbardziej poprawnie, do momentu kiedy w grze nie pojawiaj\u0105 si\u0119 zagnie\u017cd\u017cone komponenty (a z takimi mamy do czynienia przy zagnie\u017cd\u017conym routingu). Komponent dziecko rozpoczyna pobieranie danych dopiero kiedy zostanie wyrenderowany, czyli w momencie kiedy rodzic sko\u0144czy pobiera\u0107 swoje dane. Taka architektura powoduje zb\u0119dne op\u00f3\u017anienia, negatywnie wp\u0142ywaj\u0105ce na do\u015bwiadczenia u\u017cytkownika.<\/p>\n\n\n\n

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

Zesp\u00f3\u0142 odpowiedzialny za rozw\u00f3j react-router chce rozwi\u0105za\u0107 ten problem dodaj\u0105c do komponentu Route parametr loader, kt\u00f3ry to odpowiedzialny b\u0119dzie za wczytywanie danych. Kiedy \u015bcie\u017cka w przegl\u0105darce zostanie dopasowana do odpowiednich Route r\u00f3wnolegle zostan\u0105 uruchomione funkcje loader na wszystkich z nich, a pobieranie danych b\u0119dzie odbywa\u0107 si\u0119 r\u00f3wnolegle. Z poziomu komponentu do pobranych danych b\u0119dzie mo\u017cna dosta\u0107 si\u0119 przy pomocy hook\u2019a useLoaderData.<\/p>\n\n\n\n

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

Do komponentu Route trafi\u0107 maj\u0105 jeszcze 2 nowe parametry: fallbackElement oraz exceptionElement. Do pierwszego z nich przekazywa\u0107 b\u0119dziemy komponent, kt\u00f3ry wy\u015bwietlany b\u0119dzie do czasu zako\u0144czenia wykonania funkcji loader. Drugi natomiast wy\u015bwietlany b\u0119dzie kiedy w funkcji loader wyst\u0105pi b\u0142\u0105d. Podobna logika jest nieod\u0142\u0105czn\u0105 cz\u0119\u015bci\u0105 prawie wszystkich aplikacji i mi\u0142o jest zobaczy\u0107, \u017ce zostanie ona w pewien spos\u00f3b ustandaryzowana. <\/p>\n\n\n\n

import * as React from "react";\nimport {\n  BrowserRouter,\n  Routes,\n  Route,\n  useLoaderData,\n  Form,\n} from "react-router-dom";\n\nReactDOM.render(\n  <BrowserRouter>\n    <Routes\n      fallbackElement={<BigSpinner \/>}\n      exceptionElement={<GlobalErrorPage \/>}\n    >\n      <Route\n        loader={({ signal }) => {\n          return fetch("\/api\/user.json", { signal });\n        }}\n      >\n        <Route\n          path="projects"\n          element={<Projects \/>}\n          exceptionElement={<TasksErrorPage \/>}\n          loader={async ({ signal }) => {\n            let res = await fetch("\/api\/tasks.json", { signal });\n\n            if (res.status === 404) {\n              throw { notFound: true };\n            }\n\n            return res.json();\n          }}\n        >\n          <Route\n            path=":projectId"\n            element={<Projects \/>}\n            loader={async ({ signal, params }) =>\n              fetch(`\/api\/projects\/${params.projectId}`, { signal })\n            }\n          \/>\n        <\/Route>\n        <Route index element={<Index \/>} \/>\n      <\/Route>\n    <\/Routes>\n  <\/BrowserRouter>\n);<\/code><\/pre>\n\n\n\n
function Root() {\n  let data = useLoaderData();\n\n  return (\n    <div>\n      <Header user={data.user} \/>\n      <Outlet \/>\n      <Footer \/>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n
W blogpo\u015bcie niestety nie znajdziemy informacji kiedy nowo\u015bci trafi\u0105 w r\u0119ce programist\u00f3w, ale ja czekam z niecierpliwo\u015bci\u0105.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/remix.run\/blog\/remixing-react-router<\/a><\/p>\n\n\n\n
2. Wskrzeszenie faker.js<\/h2>\n\n\n\n
Znikni\u0119cie faker.js (najpopularniejszej javascriptowej biblioteki do generowania mockowych danych) z npm by\u0142o jednym z g\u0142o\u015bniejszych wydarze\u0144 pocz\u0105tku tego roku. Marak Squires (tw\u00f3rca biblioteki) w ramach akcji maj\u0105cej na celu przypomnie\u0107 programistom o tajemniczej \u015bmierci aktywisty i wsp\u00f3\u0142za\u0142o\u017cyciela Reddita Aartona Swartz. W ramach swojej akcji Marak zwraca\u0142 r\u00f3wnie\u017c uwag\u0119 na brak finansowania projekt\u00f3w Open Source przez wielkie korporacji i zepsu\u0142 kilka innych utrzymywanych przez siebie bibliotek. Histori\u0119 faker.js relacjonowali\u015bmy na bie\u017c\u0105co w 70<\/a> i 71<\/a> edycji naszego przegl\u0105du.<\/p>\n\n\n\n
Zaistnia\u0142\u0105 sytuacja spotka\u0142a si\u0119 raczej z ch\u0142odn\u0105 reakcj\u0105 spo\u0142eczno\u015bci, a alternatywy i forki faker.js zacz\u0119\u0142y wyrasta\u0107 jak grzyby po deszczu. Wygl\u0105da na to, \u017ce sytuacja po burzy wreszcie si\u0119 ustabilizowa\u0142a i spo\u015br\u00f3d pretendent\u00f3w wy\u0142oni\u0142 si\u0119 jeden najpopularniejszy. Wskrzeszona biblioteka utrzymywana jest przez 9 programist\u00f3w z r\u00f3\u017cnych firm, co zapobiec ma podzieleniu losu oryginalnej biblioteki.<\/p>\n\n\n\n
\"\"
Gdyby biblioteka faker.js by\u0142a cz\u0142owiekiem, to tak w\u0142a\u015bnie by teraz wygl\u0105da\u0142a.<\/figcaption><\/figure><\/div>\n\n\n\n
W minionym tygodniu wspomniany najpopularniejszy fork doczeka\u0142 si\u0119 wersji 6.0. Znajdziemy w niej wsparcie dla ESM Modules oraz cz\u0119\u015bciowe wsparcie dla tree-shaking. Nowy faker przepisany zosta\u0142 r\u00f3wnie\u017c do TypeScript, dzi\u0119ki czemu paczka @types\/faker nie jest ju\u017c potrzebna. Przy okazji releasu zaprezentowano te\u017c roadmap\u0119 nadchodz\u0105cych funkcjonalno\u015bci, a w niej znajdziemy mi\u0119dzy innymi interaktywn\u0105 dokumentacj\u0119 czy wsparcie dla Node 18.<\/p>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/fakerjs.dev\/update.html<\/a>
https:\/\/github.com\/faker-js\/faker\/releases\/tag\/v6.0.0<\/a><\/p>\n\n\n\n
3. CSS-Tricks sprzedane<\/h2>\n\n\n\n
CSS Tricks to strona publikuj\u0105cy artyku\u0142y i tutoriale dotycz\u0105ce szeroko poj\u0119tego web developmentu, kt\u00f3ra cyklicznie pojawia si\u0119 w aplikacji Vived. Chyba ka\u017cdy frontend developer na jakim\u015b etapie mia\u0142 z ni\u0105 do czynienia, bo po MDN jest to zazwyczaj drugi wynik na jaki trafimyw Google. W minionym tygodniu za\u0142o\u017cyciel strony oraz autor znacz\u0105cej cz\u0119\u015bci blogpost\u00f3w og\u0142osi\u0142, \u017ce strona zosta\u0142a sprzedana DigitalOcean, a on sam powoli zamierza wycofa\u0107 si\u0119 z projektu. Nowi w\u0142a\u015bciciele portalu na szcz\u0119\u015bcie nie zamierzaj\u0105 p\u00f3ki co wprowadza\u0107 znacz\u0105cych zmian w jego funkcjonowaniu.<\/p>\n\n\n\n
\"\"
W tym miejscu osobi\u015bcie chcia\u0142bym podzi\u0119kowa\u0107 autorowi strony, bo jego praca niejednokrotnie pomaga\u0142a mi w codziennej pracy.<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Wpis na CSS-Tricks dotycz\u0105cy flex\u2019a to dla mnie prawdziwa legenda i chyba najcz\u0119\u015bciej wyszukiwana przeze mnie strona w Google. Odk\u0105d Chrome wprowadzi\u0142 specjalne dev-tools dla flexa zagl\u0105dam tam coraz rzadziej, ale na zawsze b\u0119dzie mia\u0142a ona specjalne miejsce w moich wspomnieniach.<\/figcaption><\/figure><\/div>\n\n\n\n
\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n
https:\/\/css-tricks.com\/css-tricks-is-joining-digitalocean\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
S\u0142yszeli\u015bcie ju\u017c o nowym frameworku Remix? Je\u015bli nie, to najwy\u017csza pora go pozna\u0107, bo wszystkie znaki na niebie i ziemi wskazuj\u0105, \u017ce b\u0119dzie mia\u0142 spory wp\u0142yw na bibliotek\u0119 react-router. Opr\u00f3cz nowo\u015bci zmierzaj\u0105cych do react-router mo\u017cemy, w minionym tygodniu wskrzeszona zosta\u0142a r\u00f3wnie\u017c biblioteka faker.js. Bez zb\u0119dnego przed\u0142u\u017cania \u0142apcie ciep\u0142\u0105 herbat\u0119 i zapraszamy na pierwsz\u0105 wiosenn\u0105 edycj\u0119 naszego przegl\u0105du.<\/p>\n","protected":false},"author":12,"featured_media":8002,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-9992","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\/03\/FRONTEND-2.png","feature_image_visible":false,"estimated_reading_time":"4","feature_image_blog":{"ID":8002,"id":8002,"title":"pexels-mads-thomsen-2739013","filename":"pexels-mads-thomsen-2739013-scaled.jpg","filesize":548610,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-scaled.jpg","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/pexels-mads-thomsen-2739013-2\/","alt":"","author":"12","description":"","caption":"","name":"pexels-mads-thomsen-2739013-2","status":"inherit","uploaded_to":9992,"date":"2022-03-24 14:23:18","modified":"2022-03-24 14:23:18","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/vived.io\/wp-includes\/images\/media\/default.png","width":2560,"height":1707,"sizes":{"thumbnail":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-300x200.jpg","medium-width":300,"medium-height":200,"medium_large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-768x512.jpg","medium_large-width":768,"medium_large-height":512,"large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-1024x683.jpg","large-width":1024,"large-height":683,"1536x1536":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-1536x1024.jpg","1536x1536-width":1536,"1536x1536-height":1024,"2048x2048":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-2048x1365.jpg","2048x2048-width":2048,"2048x2048-height":1365,"gform-image-choice-sm":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-scaled.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":200,"gform-image-choice-md":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-scaled.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":267,"gform-image-choice-lg":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-scaled.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":400}}},"yoast_head":"\nFrontend Thursday vol. 80 - nowo\u015bci w react-router i wskrzeszenie faker.js - 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-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 80 - nowo\u015bci w react-router i wskrzeszenie faker.js - Vived\" \/>\n<meta property=\"og:description\" content=\"S\u0142yszeli\u015bcie ju\u017c o nowym frameworku Remix? Je\u015bli nie, to najwy\u017csza pora go pozna\u0107, bo wszystkie znaki na niebie i ziemi wskazuj\u0105, \u017ce b\u0119dzie mia\u0142 spory wp\u0142yw na bibliotek\u0119 react-router. Opr\u00f3cz nowo\u015bci zmierzaj\u0105cych do react-router mo\u017cemy, w minionym tygodniu wskrzeszona zosta\u0142a r\u00f3wnie\u017c biblioteka faker.js. Bez zb\u0119dnego przed\u0142u\u017cania \u0142apcie ciep\u0142\u0105 herbat\u0119 i zapraszamy na pierwsz\u0105 wiosenn\u0105 edycj\u0119 naszego przegl\u0105du.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-24T19:17:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/FRONTEND-2.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\/03\/FRONTEND-2.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-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 80 – nowo\u015bci w react-router i wskrzeszenie faker.js\",\"datePublished\":\"2022-03-24T19:17:16+00:00\",\"dateModified\":\"2022-09-19T11:16:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/\"},\"wordCount\":860,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-scaled.jpg\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/\",\"name\":\"Frontend Thursday vol. 80 - nowo\u015bci w react-router i wskrzeszenie faker.js - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-scaled.jpg\",\"datePublished\":\"2022-03-24T19:17:16+00:00\",\"dateModified\":\"2022-09-19T11:16:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-scaled.jpg\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-scaled.jpg\",\"width\":2560,\"height\":1707},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 80 – nowo\u015bci w react-router i wskrzeszenie faker.js\"}]},{\"@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. 80 - nowo\u015bci w react-router i wskrzeszenie faker.js - 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-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 80 - nowo\u015bci w react-router i wskrzeszenie faker.js - Vived","og_description":"S\u0142yszeli\u015bcie ju\u017c o nowym frameworku Remix? Je\u015bli nie, to najwy\u017csza pora go pozna\u0107, bo wszystkie znaki na niebie i ziemi wskazuj\u0105, \u017ce b\u0119dzie mia\u0142 spory wp\u0142yw na bibliotek\u0119 react-router. Opr\u00f3cz nowo\u015bci zmierzaj\u0105cych do react-router mo\u017cemy, w minionym tygodniu wskrzeszona zosta\u0142a r\u00f3wnie\u017c biblioteka faker.js. Bez zb\u0119dnego przed\u0142u\u017cania \u0142apcie ciep\u0142\u0105 herbat\u0119 i zapraszamy na pierwsz\u0105 wiosenn\u0105 edycj\u0119 naszego przegl\u0105du.","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/","og_site_name":"Vived","article_published_time":"2022-03-24T19:17:16+00:00","article_modified_time":"2022-09-19T11:16:30+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/FRONTEND-2.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","twitter_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/FRONTEND-2.png","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 80 – nowo\u015bci w react-router i wskrzeszenie faker.js","datePublished":"2022-03-24T19:17:16+00:00","dateModified":"2022-09-19T11:16:30+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/"},"wordCount":860,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-scaled.jpg","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/","name":"Frontend Thursday vol. 80 - nowo\u015bci w react-router i wskrzeszenie faker.js - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-scaled.jpg","datePublished":"2022-03-24T19:17:16+00:00","dateModified":"2022-09-19T11:16:30+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-scaled.jpg","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/pexels-mads-thomsen-2739013-scaled.jpg","width":2560,"height":1707},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-80-nowosci-w-react-router-i-wskrzeszenie-faker-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 80 – nowo\u015bci w react-router i wskrzeszenie faker.js"}]},{"@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. Nowo\u015bci w react-router<\/h2>\n","innerContent":["\n<h2>1. Nowo\u015bci w react-router<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kojarzycie Remix - nowy framework do Server Side Renderingu od tw\u00f3rc\u00f3w react-router? Je\u015bli nie, to najwy\u017csza pora nadrobi\u0107 braki, bo w ostatnich tygodniach za spraw\u0105 licznych blog post\u00f3w i zbli\u017caj\u0105cej si\u0119 konferencji Remix Conf jest o nim coraz g\u0142o\u015bniej. Po 4 miesi\u0105cach od premiery framework zebra\u0142 solidn\u0105 baz\u0119 u\u017cytkownik\u00f3w i wiele wskazuje na to, \u017ce w przysz\u0142o\u015bci mo\u017ce sta\u0107 si\u0119 on g\u0142\u00f3wnym rywalem Next.js. W detale tej nowej zabawki zag\u0142\u0119biali\u015bmy si\u0119 w <a href=\"https:\/\/vived.io\/frontend-thursday-vol-65-remix-1-0-ember-4-0\/\">65 edycji naszego przegl\u0105du<\/a> i tam odsy\u0142am wszystkich zainteresowanych.<\/p>\n","innerContent":["\n<p>Kojarzycie Remix - nowy framework do Server Side Renderingu od tw\u00f3rc\u00f3w react-router? Je\u015bli nie, to najwy\u017csza pora nadrobi\u0107 braki, bo w ostatnich tygodniach za spraw\u0105 licznych blog post\u00f3w i zbli\u017caj\u0105cej si\u0119 konferencji Remix Conf jest o nim coraz g\u0142o\u015bniej. Po 4 miesi\u0105cach od premiery framework zebra\u0142 solidn\u0105 baz\u0119 u\u017cytkownik\u00f3w i wiele wskazuje na to, \u017ce w przysz\u0142o\u015bci mo\u017ce sta\u0107 si\u0119 on g\u0142\u00f3wnym rywalem Next.js. W detale tej nowej zabawki zag\u0142\u0119biali\u015bmy si\u0119 w <a href=\"https:\/\/vived.io\/frontend-thursday-vol-65-remix-1-0-ember-4-0\/\">65 edycji naszego przegl\u0105du<\/a> i tam odsy\u0142am wszystkich zainteresowanych.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nie bez przyczyny wpis po\u015bwi\u0119cony react-router zaczynam od przypomnienia czym jest Remix. Nowe funkcjonalno\u015bci zmierzaj\u0105ce do react-router silnie inspirowane s\u0105 potrzebami Remixa (chocia\u017c skorzystaj\u0105 z nich wszyscy), a o \u015bcis\u0142ej zale\u017cno\u015bci obu projekt\u00f3w najlepiej \u015bwiadczy fakt przeniesienia ich do wsp\u00f3lnego repozytorium.<\/p>\n","innerContent":["\n<p>Nie bez przyczyny wpis po\u015bwi\u0119cony react-router zaczynam od przypomnienia czym jest Remix. Nowe funkcjonalno\u015bci zmierzaj\u0105ce do react-router silnie inspirowane s\u0105 potrzebami Remixa (chocia\u017c skorzystaj\u0105 z nich wszyscy), a o \u015bcis\u0142ej zale\u017cno\u015bci obu projekt\u00f3w najlepiej \u015bwiadczy fakt przeniesienia ich do wsp\u00f3lnego repozytorium.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Obecnie standardowym podej\u015bciem do pobierania danych w react jest umieszczenie odpowiedniej logiki w komponentach. Rozwi\u0105zanie to dzia\u0142a jak najbardziej poprawnie, do momentu kiedy w grze nie pojawiaj\u0105 si\u0119 zagnie\u017cd\u017cone komponenty (a z takimi mamy do czynienia przy zagnie\u017cd\u017conym routingu). Komponent dziecko rozpoczyna pobieranie danych dopiero kiedy zostanie wyrenderowany, czyli w momencie kiedy rodzic sko\u0144czy pobiera\u0107 swoje dane. Taka architektura powoduje zb\u0119dne op\u00f3\u017anienia, negatywnie wp\u0142ywaj\u0105ce na do\u015bwiadczenia u\u017cytkownika.<\/p>\n","innerContent":["\n<p>Obecnie standardowym podej\u015bciem do pobierania danych w react jest umieszczenie odpowiedniej logiki w komponentach. Rozwi\u0105zanie to dzia\u0142a jak najbardziej poprawnie, do momentu kiedy w grze nie pojawiaj\u0105 si\u0119 zagnie\u017cd\u017cone komponenty (a z takimi mamy do czynienia przy zagnie\u017cd\u017conym routingu). Komponent dziecko rozpoczyna pobieranie danych dopiero kiedy zostanie wyrenderowany, czyli w momencie kiedy rodzic sko\u0144czy pobiera\u0107 swoje dane. Taka architektura powoduje zb\u0119dne op\u00f3\u017anienia, negatywnie wp\u0142ywaj\u0105ce na do\u015bwiadczenia u\u017cytkownika.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4075,"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\/03\/network1-1024x261.png\" alt=\"\" class=\"wp-image-4075\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/network1-1024x261.png\" alt=\"\" class=\"wp-image-4075\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zesp\u00f3\u0142 odpowiedzialny za rozw\u00f3j react-router chce rozwi\u0105za\u0107 ten problem dodaj\u0105c do komponentu Route parametr loader, kt\u00f3ry to odpowiedzialny b\u0119dzie za wczytywanie danych. Kiedy \u015bcie\u017cka w przegl\u0105darce zostanie dopasowana do odpowiednich Route r\u00f3wnolegle zostan\u0105 uruchomione funkcje loader na wszystkich z nich, a pobieranie danych b\u0119dzie odbywa\u0107 si\u0119 r\u00f3wnolegle. Z poziomu komponentu do pobranych danych b\u0119dzie mo\u017cna dosta\u0107 si\u0119 przy pomocy hook\u2019a useLoaderData.<\/p>\n","innerContent":["\n<p>Zesp\u00f3\u0142 odpowiedzialny za rozw\u00f3j react-router chce rozwi\u0105za\u0107 ten problem dodaj\u0105c do komponentu Route parametr loader, kt\u00f3ry to odpowiedzialny b\u0119dzie za wczytywanie danych. Kiedy \u015bcie\u017cka w przegl\u0105darce zostanie dopasowana do odpowiednich Route r\u00f3wnolegle zostan\u0105 uruchomione funkcje loader na wszystkich z nich, a pobieranie danych b\u0119dzie odbywa\u0107 si\u0119 r\u00f3wnolegle. Z poziomu komponentu do pobranych danych b\u0119dzie mo\u017cna dosta\u0107 si\u0119 przy pomocy hook\u2019a useLoaderData.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4076,"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\/03\/network2-1024x285.png\" alt=\"\" class=\"wp-image-4076\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/03\/network2-1024x285.png\" alt=\"\" class=\"wp-image-4076\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Do komponentu Route trafi\u0107 maj\u0105 jeszcze 2 nowe parametry: fallbackElement oraz exceptionElement. Do pierwszego z nich przekazywa\u0107 b\u0119dziemy komponent, kt\u00f3ry wy\u015bwietlany b\u0119dzie do czasu zako\u0144czenia wykonania funkcji loader. Drugi natomiast wy\u015bwietlany b\u0119dzie kiedy w funkcji loader wyst\u0105pi b\u0142\u0105d. Podobna logika jest nieod\u0142\u0105czn\u0105 cz\u0119\u015bci\u0105 prawie wszystkich aplikacji i mi\u0142o jest zobaczy\u0107, \u017ce zostanie ona w pewien spos\u00f3b ustandaryzowana. <\/p>\n","innerContent":["\n<p>Do komponentu Route trafi\u0107 maj\u0105 jeszcze 2 nowe parametry: fallbackElement oraz exceptionElement. Do pierwszego z nich przekazywa\u0107 b\u0119dziemy komponent, kt\u00f3ry wy\u015bwietlany b\u0119dzie do czasu zako\u0144czenia wykonania funkcji loader. Drugi natomiast wy\u015bwietlany b\u0119dzie kiedy w funkcji loader wyst\u0105pi b\u0142\u0105d. Podobna logika jest nieod\u0142\u0105czn\u0105 cz\u0119\u015bci\u0105 prawie wszystkich aplikacji i mi\u0142o jest zobaczy\u0107, \u017ce zostanie ona w pewien spos\u00f3b ustandaryzowana. <\/p>\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\">import * as React from \"react\";\nimport {\n  BrowserRouter,\n  Routes,\n  Route,\n  useLoaderData,\n  Form,\n} from \"react-router-dom\";\n\nReactDOM.render(\n  <BrowserRouter>\n    <Routes\n      fallbackElement={<BigSpinner \/>}\n      exceptionElement={<GlobalErrorPage \/>}\n    >\n      <Route\n        loader={({ signal }) => {\n          return fetch(\"\/api\/user.json\", { signal });\n        }}\n      >\n        <Route\n          path=\"projects\"\n          element={<Projects \/>}\n          exceptionElement={<TasksErrorPage \/>}\n          loader={async ({ signal }) => {\n            let res = await fetch(\"\/api\/tasks.json\", { signal });\n\n            if (res.status === 404) {\n              throw { notFound: true };\n            }\n\n            return res.json();\n          }}\n        >\n          <Route\n            path=\":projectId\"\n            element={<Projects \/>}\n            loader={async ({ signal, params }) =>\n              fetch(`\/api\/projects\/${params.projectId}`, { signal })\n            }\n          \/>\n        <\/Route>\n        <Route index element={<Index \/>} \/>\n      <\/Route>\n    <\/Routes>\n  <\/BrowserRouter>\n);<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import * as React from \"react\";\nimport {\n  BrowserRouter,\n  Routes,\n  Route,\n  useLoaderData,\n  Form,\n} from \"react-router-dom\";\n\nReactDOM.render(\n  <BrowserRouter>\n    <Routes\n      fallbackElement={<BigSpinner \/>}\n      exceptionElement={<GlobalErrorPage \/>}\n    >\n      <Route\n        loader={({ signal }) => {\n          return fetch(\"\/api\/user.json\", { signal });\n        }}\n      >\n        <Route\n          path=\"projects\"\n          element={<Projects \/>}\n          exceptionElement={<TasksErrorPage \/>}\n          loader={async ({ signal }) => {\n            let res = await fetch(\"\/api\/tasks.json\", { signal });\n\n            if (res.status === 404) {\n              throw { notFound: true };\n            }\n\n            return res.json();\n          }}\n        >\n          <Route\n            path=\":projectId\"\n            element={<Projects \/>}\n            loader={async ({ signal, params }) =>\n              fetch(`\/api\/projects\/${params.projectId}`, { signal })\n            }\n          \/>\n        <\/Route>\n        <Route index element={<Index \/>} \/>\n      <\/Route>\n    <\/Routes>\n  <\/BrowserRouter>\n);<\/code><\/pre>\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\">function Root() {\n  let data = useLoaderData();\n\n  return (\n    <div>\n      <Header user={data.user} \/>\n      <Outlet \/>\n      <Footer \/>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">function Root() {\n  let data = useLoaderData();\n\n  return (\n    <div>\n      <Header user={data.user} \/>\n      <Outlet \/>\n      <Footer \/>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W blogpo\u015bcie niestety nie znajdziemy informacji kiedy nowo\u015bci trafi\u0105 w r\u0119ce programist\u00f3w, ale ja czekam z niecierpliwo\u015bci\u0105.<\/p>\n","innerContent":["\n<p>W blogpo\u015bcie niestety nie znajdziemy informacji kiedy nowo\u015bci trafi\u0105 w r\u0119ce programist\u00f3w, ale ja czekam z niecierpliwo\u015bci\u0105.<\/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:\/\/remix.run\/blog\/remixing-react-router\">https:\/\/remix.run\/blog\/remixing-react-router<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/remix.run\/blog\/remixing-react-router\">https:\/\/remix.run\/blog\/remixing-react-router<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. Wskrzeszenie faker.js<\/h2>\n","innerContent":["\n<h2>2. Wskrzeszenie faker.js<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Znikni\u0119cie faker.js (najpopularniejszej javascriptowej biblioteki do generowania mockowych danych) z npm by\u0142o jednym z g\u0142o\u015bniejszych wydarze\u0144 pocz\u0105tku tego roku. Marak Squires (tw\u00f3rca biblioteki) w ramach akcji maj\u0105cej na celu przypomnie\u0107 programistom o tajemniczej \u015bmierci aktywisty i wsp\u00f3\u0142za\u0142o\u017cyciela Reddita Aartona Swartz. W ramach swojej akcji Marak zwraca\u0142 r\u00f3wnie\u017c uwag\u0119 na brak finansowania projekt\u00f3w Open Source przez wielkie korporacji i zepsu\u0142 kilka innych utrzymywanych przez siebie bibliotek. Histori\u0119 faker.js relacjonowali\u015bmy na bie\u017c\u0105co w <a href=\"https:\/\/vived.io\/frontend-thursday-vol-70-tajemnicze-znikniecie-faker-js-i-wschodzace-gwiazdy-2021\/\">70<\/a> i <a href=\"https:\/\/vived.io\/frontend-thursday-vol-71\/\">71<\/a> edycji naszego przegl\u0105du.<\/p>\n","innerContent":["\n<p>Znikni\u0119cie faker.js (najpopularniejszej javascriptowej biblioteki do generowania mockowych danych) z npm by\u0142o jednym z g\u0142o\u015bniejszych wydarze\u0144 pocz\u0105tku tego roku. Marak Squires (tw\u00f3rca biblioteki) w ramach akcji maj\u0105cej na celu przypomnie\u0107 programistom o tajemniczej \u015bmierci aktywisty i wsp\u00f3\u0142za\u0142o\u017cyciela Reddita Aartona Swartz. W ramach swojej akcji Marak zwraca\u0142 r\u00f3wnie\u017c uwag\u0119 na brak finansowania projekt\u00f3w Open Source przez wielkie korporacji i zepsu\u0142 kilka innych utrzymywanych przez siebie bibliotek. Histori\u0119 faker.js relacjonowali\u015bmy na bie\u017c\u0105co w <a href=\"https:\/\/vived.io\/frontend-thursday-vol-70-tajemnicze-znikniecie-faker-js-i-wschodzace-gwiazdy-2021\/\">70<\/a> i <a href=\"https:\/\/vived.io\/frontend-thursday-vol-71\/\">71<\/a> edycji naszego przegl\u0105du.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zaistnia\u0142\u0105 sytuacja spotka\u0142a si\u0119 raczej z ch\u0142odn\u0105 reakcj\u0105 spo\u0142eczno\u015bci, a alternatywy i forki faker.js zacz\u0119\u0142y wyrasta\u0107 jak grzyby po deszczu. Wygl\u0105da na to, \u017ce sytuacja po burzy wreszcie si\u0119 ustabilizowa\u0142a i spo\u015br\u00f3d pretendent\u00f3w wy\u0142oni\u0142 si\u0119 jeden najpopularniejszy. Wskrzeszona biblioteka utrzymywana jest przez 9 programist\u00f3w z r\u00f3\u017cnych firm, co zapobiec ma podzieleniu losu oryginalnej biblioteki.<\/p>\n","innerContent":["\n<p>Zaistnia\u0142\u0105 sytuacja spotka\u0142a si\u0119 raczej z ch\u0142odn\u0105 reakcj\u0105 spo\u0142eczno\u015bci, a alternatywy i forki faker.js zacz\u0119\u0142y wyrasta\u0107 jak grzyby po deszczu. Wygl\u0105da na to, \u017ce sytuacja po burzy wreszcie si\u0119 ustabilizowa\u0142a i spo\u015br\u00f3d pretendent\u00f3w wy\u0142oni\u0142 si\u0119 jeden najpopularniejszy. Wskrzeszona biblioteka utrzymywana jest przez 9 programist\u00f3w z r\u00f3\u017cnych firm, co zapobiec ma podzieleniu losu oryginalnej biblioteki.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4077,"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\/03\/giphy.gif\" alt=\"\" class=\"wp-image-4077\"\/><figcaption>Gdyby biblioteka faker.js by\u0142a cz\u0142owiekiem, to tak w\u0142a\u015bnie by teraz wygl\u0105da\u0142a.<\/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\/03\/giphy.gif\" alt=\"\" class=\"wp-image-4077\"\/><figcaption>Gdyby biblioteka faker.js by\u0142a cz\u0142owiekiem, to tak w\u0142a\u015bnie by teraz wygl\u0105da\u0142a.<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W minionym tygodniu wspomniany najpopularniejszy fork doczeka\u0142 si\u0119 wersji 6.0. Znajdziemy w niej wsparcie dla ESM Modules oraz cz\u0119\u015bciowe wsparcie dla tree-shaking. Nowy faker przepisany zosta\u0142 r\u00f3wnie\u017c do TypeScript, dzi\u0119ki czemu paczka @types\/faker nie jest ju\u017c potrzebna. Przy okazji releasu zaprezentowano te\u017c roadmap\u0119 nadchodz\u0105cych funkcjonalno\u015bci, a w niej znajdziemy mi\u0119dzy innymi interaktywn\u0105 dokumentacj\u0119 czy wsparcie dla Node 18.<\/p>\n","innerContent":["\n<p>W minionym tygodniu wspomniany najpopularniejszy fork doczeka\u0142 si\u0119 wersji 6.0. Znajdziemy w niej wsparcie dla ESM Modules oraz cz\u0119\u015bciowe wsparcie dla tree-shaking. Nowy faker przepisany zosta\u0142 r\u00f3wnie\u017c do TypeScript, dzi\u0119ki czemu paczka @types\/faker nie jest ju\u017c potrzebna. Przy okazji releasu zaprezentowano te\u017c roadmap\u0119 nadchodz\u0105cych funkcjonalno\u015bci, a w niej znajdziemy mi\u0119dzy innymi interaktywn\u0105 dokumentacj\u0119 czy wsparcie dla Node 18.<\/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:\/\/fakerjs.dev\/update.html\">https:\/\/fakerjs.dev\/update.html<\/a><br><a href=\"https:\/\/github.com\/faker-js\/faker\/releases\/tag\/v6.0.0\">https:\/\/github.com\/faker-js\/faker\/releases\/tag\/v6.0.0<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/fakerjs.dev\/update.html\">https:\/\/fakerjs.dev\/update.html<\/a><br><a href=\"https:\/\/github.com\/faker-js\/faker\/releases\/tag\/v6.0.0\">https:\/\/github.com\/faker-js\/faker\/releases\/tag\/v6.0.0<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>3. CSS-Tricks sprzedane<\/h2>\n","innerContent":["\n<h2>3. CSS-Tricks sprzedane<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>CSS Tricks to strona publikuj\u0105cy artyku\u0142y i tutoriale dotycz\u0105ce szeroko poj\u0119tego web developmentu, kt\u00f3ra cyklicznie pojawia si\u0119 w aplikacji Vived. Chyba ka\u017cdy frontend developer na jakim\u015b etapie mia\u0142 z ni\u0105 do czynienia, bo po MDN jest to zazwyczaj drugi wynik na jaki trafimyw Google. W minionym tygodniu za\u0142o\u017cyciel strony oraz autor znacz\u0105cej cz\u0119\u015bci blogpost\u00f3w og\u0142osi\u0142, \u017ce strona zosta\u0142a sprzedana DigitalOcean, a on sam powoli zamierza wycofa\u0107 si\u0119 z projektu. Nowi w\u0142a\u015bciciele portalu na szcz\u0119\u015bcie nie zamierzaj\u0105 p\u00f3ki co wprowadza\u0107 znacz\u0105cych zmian w jego funkcjonowaniu.<\/p>\n","innerContent":["\n<p>CSS Tricks to strona publikuj\u0105cy artyku\u0142y i tutoriale dotycz\u0105ce szeroko poj\u0119tego web developmentu, kt\u00f3ra cyklicznie pojawia si\u0119 w aplikacji Vived. Chyba ka\u017cdy frontend developer na jakim\u015b etapie mia\u0142 z ni\u0105 do czynienia, bo po MDN jest to zazwyczaj drugi wynik na jaki trafimyw Google. W minionym tygodniu za\u0142o\u017cyciel strony oraz autor znacz\u0105cej cz\u0119\u015bci blogpost\u00f3w og\u0142osi\u0142, \u017ce strona zosta\u0142a sprzedana DigitalOcean, a on sam powoli zamierza wycofa\u0107 si\u0119 z projektu. Nowi w\u0142a\u015bciciele portalu na szcz\u0119\u015bcie nie zamierzaj\u0105 p\u00f3ki co wprowadza\u0107 znacz\u0105cych zmian w jego funkcjonowaniu.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4078,"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\/03\/giphy-1.gif\" alt=\"\" class=\"wp-image-4078\"\/><figcaption>W tym miejscu osobi\u015bcie chcia\u0142bym podzi\u0119kowa\u0107 autorowi strony, bo jego praca niejednokrotnie pomaga\u0142a mi w codziennej pracy.<\/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\/03\/giphy-1.gif\" alt=\"\" class=\"wp-image-4078\"\/><figcaption>W tym miejscu osobi\u015bcie chcia\u0142bym podzi\u0119kowa\u0107 autorowi strony, bo jego praca niejednokrotnie pomaga\u0142a mi w codziennej pracy.<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":4079,"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\/03\/69u20j.jpeg\" alt=\"\" class=\"wp-image-4079\"\/><figcaption>Wpis na CSS-Tricks dotycz\u0105cy flex\u2019a to dla mnie prawdziwa legenda i chyba najcz\u0119\u015bciej wyszukiwana przeze mnie strona w Google. Odk\u0105d Chrome wprowadzi\u0142 specjalne dev-tools dla flexa zagl\u0105dam tam coraz rzadziej, ale na zawsze b\u0119dzie mia\u0142a ona specjalne miejsce w moich wspomnieniach.<\/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\/03\/69u20j.jpeg\" alt=\"\" class=\"wp-image-4079\"\/><figcaption>Wpis na CSS-Tricks dotycz\u0105cy flex\u2019a to dla mnie prawdziwa legenda i chyba najcz\u0119\u015bciej wyszukiwana przeze mnie strona w Google. Odk\u0105d Chrome wprowadzi\u0142 specjalne dev-tools dla flexa zagl\u0105dam tam coraz rzadziej, ale na zawsze b\u0119dzie mia\u0142a ona specjalne miejsce w moich wspomnieniach.<\/figcaption><\/figure><\/div>\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:\/\/css-tricks.com\/css-tricks-is-joining-digitalocean\/\">https:\/\/css-tricks.com\/css-tricks-is-joining-digitalocean\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/css-tricks.com\/css-tricks-is-joining-digitalocean\/\">https:\/\/css-tricks.com\/css-tricks-is-joining-digitalocean\/<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9992","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=9992"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9992\/revisions"}],"predecessor-version":[{"id":10517,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9992\/revisions\/10517"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/8002"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=9992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=9992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=9992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}