{"id":10078,"date":"2021-09-23T14:59:02","date_gmt":"2021-09-23T12:59:02","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-56\/"},"modified":"2022-09-19T13:16:37","modified_gmt":"2022-09-19T11:16:37","slug":"frontend-thursday-vol-56","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/","title":{"rendered":"Frontend Thursday vol. 56"},"content":{"rendered":"\n<h2 id=\"1-beta-gatsby-4\" data-num=1>1. Beta Gatsby 4<\/h2>\n\n\n\n<p>P\u00f3\u0142tora roku od pojawienia si\u0119 Gatsby 3, doczekali\u015bmy si\u0119 bety Gatsby 4. Nowo\u015bci jest sporo, ale zacznijmy od `Deffered Static Generation`. Jest to mo\u017cliwo\u015bci od\u0142o\u017cenia generowania statycznej wersji strony do momentu, kiedy odwiedzi j\u0105 pierwszy u\u017cytkownik. Po wizycie\u00a0 pierwszego u\u017cytkownika, wygenerowana strona zostaje zapisana w cache i jest serwowana dla kolejnych odwiedzaj\u0105cych. Je\u015bli zastanawiacie si\u0119 nad przypadkiem u\u017cycia dla tej funkcjonalno\u015bci, to pomy\u015blcie o blogach zawieraj\u0105cych setki wpis\u00f3w, w tym wiele przestarza\u0142ych i rzadko odwiedzanych. Od teraz Gatsby b\u0119dzie umo\u017cliwia\u0142 znacz\u0105 redukcj\u0119 czasu budowania aplikacji, poprzez ograniczenie renderowanych w tym procesie stron, do wpis\u00f3w z kilku ostatnich miesi\u0119cy. Oczywi\u015bcie, odb\u0119dzie si\u0119 to kosztem wolniejszego \u0142adowania starych post\u00f3w dla u\u017cytkownika, ale zak\u0142adaj\u0105c, \u017ce s\u0105 to rzadko odwiedzane strony, mo\u017cemy sobie na to pozwoli\u0107.<\/p>\n\n\n\n<p>Je\u015bli narzekacie na d\u0142ugi czas budowania w Gatsby 3, to jeszcze nie koniec czekaj\u0105cych na Was dobrych wiadomo\u015bci. Najnowsza wersja biblioteki dodaje wsparcie dla wsp\u00f3\u0142bie\u017cnego pobierania danych, co r\u00f3wnie\u017c znacz\u0105co przy\u015bpiesza ca\u0142y proces.<\/p>\n\n\n\n<p>Opr\u00f3cz opisanych powy\u017cej zmian, pojawi\u0142o si\u0119 te\u017c kilka nowo\u015bci dotycz\u0105cych chmury oferowanej przez Gatsby. Nie podejmuje si\u0119 opisania szczeg\u00f3\u0142\u00f3w tych nowo\u015bci, wi\u0119c wszystkich zainteresowanych zapraszam do zamieszczonych pod artyku\u0142em \u017ar\u00f3de\u0142.<\/p>\n\n\n\n<p>\u015aledz\u0105c spo\u0142eczno\u015b\u0107 Reacta troch\u0119 z zewn\u0105trz zastanawiam si\u0119, jak wygl\u0105da obecny rozk\u0142ad si\u0142 mi\u0119dzy Gatsby i Next.js. Jeszcze niedawno to Gatsby by\u0142 rynkowym standardem, tymczasem przygl\u0105daj\u0105c si\u0119 statystykom z npm trends nie spos\u00f3b nie odnie\u015b\u0107 wra\u017cenia, \u017ce czasy \u015bwietno\u015bci ma on ju\u017c dawno za sob\u0105. A Wy macie na ten temat jakie\u015b przemy\u015blenia? Zapraszamy do dyskusji na naszym facebooku!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"415\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.40.58-1024x415.png\" alt=\"\" class=\"wp-image-2651\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.40.58-1024x415.png 1024w, https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.40.58-300x122.png 300w, https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.40.58-768x311.png 768w, https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.40.58-1536x622.png 1536w, https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.40.58-2048x830.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.gatsbyjs.com\/gatsby-4\/\">https:\/\/www.gatsbyjs.com\/gatsby-4\/<\/a><\/p>\n\n\n\n<h2 id=\"2-mui-v5-0\" data-num=2>2. MUI v5.0<\/h2>\n\n\n\n<p>Kojarzycie bibliotek\u0119 Material &#8211; UI (implementacja Material Design dla Reacta)? Je\u015bli tak, to zanotujcie sobie, \u017ce od wersji 5 zmieni\u0142a ona swoj\u0105 nazw\u0119 na MUI. Jak motywuj\u0105 tw\u00f3rcy, nowa nazwa by\u0142a potrzebna ze wzgl\u0119du na rozszerzenie odpowiedzialno\u015bci projektu. Od teraz dobrze znana biblioteka komponent\u00f3w dost\u0119pna jest jako MUI Core, a do rodziny produkt\u00f3w, nad kt\u00f3rymi pracuje zesp\u00f3\u0142, do\u0142\u0105czy\u0142 MUI X. Nowa biblioteka ma dostarcza\u0107 komponenty do budowania wydajnych aplikacji do prezentacji du\u017cej ilo\u015bci danych.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"460\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-10.22.10-1024x460.png\" alt=\"\" class=\"wp-image-2652\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-10.22.10-1024x460.png 1024w, https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-10.22.10-300x135.png 300w, https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-10.22.10-768x345.png 768w, https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-10.22.10.png 1258w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p>Je\u015bli pracujecie z Material-UI to pewnie interesuje Was co nowego trafi\u0142o do biblioteki. W wersji 5.0 tw\u00f3rcy skupiali si\u0119, przede wszystkim, na ulepszeniu do\u015bwiadcze\u0144 deweloper\u00f3w (dobrze wiedzie\u0107, \u017ce kto\u015b o nas my\u015bli &lt;3). Najwi\u0119ksz\u0105 zmian\u0105 jest migracja z JSS do emotion. Jest to odpowied\u017a na trendy, w kierunku kt\u00f3rych rozwija si\u0119 \u015brodowisko Reacta, ale r\u00f3wnie\u017c inwestycja w wydajno\u015b\u0107 (przyk\u0142adowo, komponent Box jest teraz od 5 do nawet 10 krotnie wydajniejszy). Mi\u0142\u0105 niespodziank\u0105 jest obecno\u015b\u0107 wrappera, umo\u017cliwiaj\u0105cego zast\u0105pienie emotion styled-components. Je\u015bli nie jeste\u015bcie jeszcze gotowi na porzucenie JSS, to wci\u0105\u017c dost\u0119pna jest paczka @mui\/styles, dzi\u0119ki kt\u00f3rej b\u0119dzie to mo\u017cliwe.<\/p>\n\n\n\n<p>To nie koniec, je\u015bli chodzi o usprawnienia dotycz\u0105ce stylowania. Cz\u0119\u015b\u0107 komponent\u00f3w dosta\u0142a tajemnicze property `sx`, kt\u00f3re umo\u017cliwia przekazanie obiektu, kt\u00f3rego klucze i warto\u015bci niepokoj\u0105co przypominaj\u0105 tailwinda.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">&lt;Slider sx={{ my: 1 }} \/&gt;\n&lt;Typography sx={{ color: &#039;grey.600&#039; }}&gt;<\/code><\/pre>\n\n\n\n<p>Kolejna nowo\u015b\u0107 to mo\u017cliwo\u015b\u0107 dynamicznego definiowania kolor\u00f3w i wariant\u00f3w komponent\u00f3w przy u\u017cyciu ThemeProvidera. Jak t\u0142umacz\u0105 tw\u00f3rcy ma to zredukowa\u0107 boilerplate, jaki generowa\u0142o tworzenie w\u0142asnych opakowa\u0144 na podstawowe komponenty. Wygl\u0105da to naprawd\u0119 fajnie, ale sk\u0142adnia z `declare module` troch\u0119 k\u0142uje w oczy.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">const theme = createTheme({\n  components: {\n    MuiButton: {\n      variants: [\n        {\n          props: { variant: &#039;dashed&#039; },\n          style: {\n            textTransform: &#039;none&#039;,\n            border: `2px dashed grey${blue[500]}`,\n          },\n        },\n        {\n          props: { variant: &#039;dashed&#039;, color: &#039;secondary&#039; },\n          style: {\n            border: `4px dashed ${red[500]}`,\n          },\n        },\n      ],\n    },\n  },\n});\n\ndeclare module &#039;@mui\/material\/Button&#039; {\n  interface ButtonPropsVariantOverrides {\n    dashed: true;\n  }\n}\n\n&lt;ThemeProvider theme={theme}&gt;\n  &lt;Button variant=&quot;dashed&quot; sx={{ m: 1 }}&gt;\n    Dashed\n  &lt;\/Button&gt;\n  &lt;Button variant=&quot;dashed&quot; color=&quot;secondary&quot; sx={{ m: 1 }}&gt;\n    Secondary\n  &lt;\/Button&gt;\n&lt;\/ThemeProvider&gt;\n<\/code><\/pre>\n\n\n\n<p>Na koniec warto wspomnie\u0107 jeszcze, \u017ce tw\u00f3rcy zmigrowali si\u0119 z Enzyme do Testing Library i przepisali znaczn\u0105 cz\u0119\u015b\u0107 kodu na TypeScript. Oczywi\u015bcie zmian i nowo\u015bci jest wi\u0119cej, wi\u0119c wszystkich zainteresowanych odsy\u0142amy do poni\u017cszych \u017ar\u00f3de\u0142.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/mui.com\/blog\/mui-core-v5\/\">https:\/\/mui.com\/blog\/mui-core-v5\/<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/mui.com\/x\/\">https:\/\/mui.com\/x\/<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/mui.com\/blog\/material-ui-is-now-mui\/\">https:\/\/mui.com\/blog\/material-ui-is-now-mui\/<\/a><\/p>\n\n\n\n<h2 id=\"bonus-quake-w-13kb\" data-num=3>Bonus: Quake w 13kB<\/h2>\n\n\n\n<p>W ostatnim tygodniu w sieci zosta\u0142a opublikowana implementacja tego pierwszego, kt\u00f3ra wa\u017cy zaledwie 13kB. Ca\u0142o\u015b\u0107 oparta jest o Canvas i dzia\u0142a ca\u0142kiem sprawnie. Je\u015bli b\u0119dziecie si\u0119 nudzi\u0107 na kolejnym korporacyjnym spotkaniu, to warto z czystej ciekawo\u015bci sprawdzi\u0107 to w\u0142asnor\u0119cznie.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"250\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/big.jpeg\" alt=\"\" class=\"wp-image-2653\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/big.jpeg 400w, https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/big-300x188.jpeg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><figcaption>Kto\u015b powinien przygotowa\u0107 licznik odliczaj\u0105cy dni od ostatniej kreatywnej re-implementacji Quake\u2019a albo Doom\u2019a.<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/js13kgames.com\/entries\/q1k3\">https:\/\/js13kgames.com\/entries\/q1k3<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>W tym tygodniu mamy dla Was bet\u0119 Gatsby 4.0 i \u015bwie\u017co wydany MUI 5.0 (dawniej Material-UI)<\/p>\n","protected":false},"author":12,"featured_media":7707,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-10078","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"estimated_reading_time":"4","weekly_summary":true},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Frontend Thursday vol. 56 - 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-56\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 56 - Vived\" \/>\n<meta property=\"og:description\" content=\"W tym tygodniu mamy dla Was bet\u0119 Gatsby 4.0 i \u015bwie\u017co wydany MUI 5.0 (dawniej Material-UI)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-23T12:59:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.50.25.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3360\" \/>\n\t<meta property=\"og:image:height\" content=\"1754\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 56\",\"datePublished\":\"2021-09-23T12:59:02+00:00\",\"dateModified\":\"2022-09-19T11:16:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/\"},\"wordCount\":746,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.50.25.png\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/\",\"name\":\"Frontend Thursday vol. 56 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.50.25.png\",\"datePublished\":\"2021-09-23T12:59:02+00:00\",\"dateModified\":\"2022-09-19T11:16:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.50.25.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.50.25.png\",\"width\":3360,\"height\":1754},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 56\"}]},{\"@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. 56 - 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-56\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 56 - Vived","og_description":"W tym tygodniu mamy dla Was bet\u0119 Gatsby 4.0 i \u015bwie\u017co wydany MUI 5.0 (dawniej Material-UI)","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/","og_site_name":"Vived","article_published_time":"2021-09-23T12:59:02+00:00","article_modified_time":"2022-09-19T11:16:37+00:00","og_image":[{"width":3360,"height":1754,"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.50.25.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 56","datePublished":"2021-09-23T12:59:02+00:00","dateModified":"2022-09-19T11:16:37+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/"},"wordCount":746,"commentCount":0,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.50.25.png","articleSection":["Frontend"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/","name":"Frontend Thursday vol. 56 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.50.25.png","datePublished":"2021-09-23T12:59:02+00:00","dateModified":"2022-09-19T11:16:37+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.50.25.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.50.25.png","width":3360,"height":1754},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-56\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 56"}]},{"@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. Beta Gatsby 4<\/h2>\n","innerContent":["\n<h2>1. Beta Gatsby 4<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>P\u00f3\u0142tora roku od pojawienia si\u0119 Gatsby 3, doczekali\u015bmy si\u0119 bety Gatsby 4. Nowo\u015bci jest sporo, ale zacznijmy od `Deffered Static Generation`. Jest to mo\u017cliwo\u015bci od\u0142o\u017cenia generowania statycznej wersji strony do momentu, kiedy odwiedzi j\u0105 pierwszy u\u017cytkownik. Po wizycie\u00a0 pierwszego u\u017cytkownika, wygenerowana strona zostaje zapisana w cache i jest serwowana dla kolejnych odwiedzaj\u0105cych. Je\u015bli zastanawiacie si\u0119 nad przypadkiem u\u017cycia dla tej funkcjonalno\u015bci, to pomy\u015blcie o blogach zawieraj\u0105cych setki wpis\u00f3w, w tym wiele przestarza\u0142ych i rzadko odwiedzanych. Od teraz Gatsby b\u0119dzie umo\u017cliwia\u0142 znacz\u0105 redukcj\u0119 czasu budowania aplikacji, poprzez ograniczenie renderowanych w tym procesie stron, do wpis\u00f3w z kilku ostatnich miesi\u0119cy. Oczywi\u015bcie, odb\u0119dzie si\u0119 to kosztem wolniejszego \u0142adowania starych post\u00f3w dla u\u017cytkownika, ale zak\u0142adaj\u0105c, \u017ce s\u0105 to rzadko odwiedzane strony, mo\u017cemy sobie na to pozwoli\u0107.<\/p>\n","innerContent":["\n<p>P\u00f3\u0142tora roku od pojawienia si\u0119 Gatsby 3, doczekali\u015bmy si\u0119 bety Gatsby 4. Nowo\u015bci jest sporo, ale zacznijmy od `Deffered Static Generation`. Jest to mo\u017cliwo\u015bci od\u0142o\u017cenia generowania statycznej wersji strony do momentu, kiedy odwiedzi j\u0105 pierwszy u\u017cytkownik. Po wizycie\u00a0 pierwszego u\u017cytkownika, wygenerowana strona zostaje zapisana w cache i jest serwowana dla kolejnych odwiedzaj\u0105cych. Je\u015bli zastanawiacie si\u0119 nad przypadkiem u\u017cycia dla tej funkcjonalno\u015bci, to pomy\u015blcie o blogach zawieraj\u0105cych setki wpis\u00f3w, w tym wiele przestarza\u0142ych i rzadko odwiedzanych. Od teraz Gatsby b\u0119dzie umo\u017cliwia\u0142 znacz\u0105 redukcj\u0119 czasu budowania aplikacji, poprzez ograniczenie renderowanych w tym procesie stron, do wpis\u00f3w z kilku ostatnich miesi\u0119cy. Oczywi\u015bcie, odb\u0119dzie si\u0119 to kosztem wolniejszego \u0142adowania starych post\u00f3w dla u\u017cytkownika, ale zak\u0142adaj\u0105c, \u017ce s\u0105 to rzadko odwiedzane strony, mo\u017cemy sobie na to pozwoli\u0107.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli narzekacie na d\u0142ugi czas budowania w Gatsby 3, to jeszcze nie koniec czekaj\u0105cych na Was dobrych wiadomo\u015bci. Najnowsza wersja biblioteki dodaje wsparcie dla wsp\u00f3\u0142bie\u017cnego pobierania danych, co r\u00f3wnie\u017c znacz\u0105co przy\u015bpiesza ca\u0142y proces.<\/p>\n","innerContent":["\n<p>Je\u015bli narzekacie na d\u0142ugi czas budowania w Gatsby 3, to jeszcze nie koniec czekaj\u0105cych na Was dobrych wiadomo\u015bci. Najnowsza wersja biblioteki dodaje wsparcie dla wsp\u00f3\u0142bie\u017cnego pobierania danych, co r\u00f3wnie\u017c znacz\u0105co przy\u015bpiesza ca\u0142y proces.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Opr\u00f3cz opisanych powy\u017cej zmian, pojawi\u0142o si\u0119 te\u017c kilka nowo\u015bci dotycz\u0105cych chmury oferowanej przez Gatsby. Nie podejmuje si\u0119 opisania szczeg\u00f3\u0142\u00f3w tych nowo\u015bci, wi\u0119c wszystkich zainteresowanych zapraszam do zamieszczonych pod artyku\u0142em \u017ar\u00f3de\u0142.<\/p>\n","innerContent":["\n<p>Opr\u00f3cz opisanych powy\u017cej zmian, pojawi\u0142o si\u0119 te\u017c kilka nowo\u015bci dotycz\u0105cych chmury oferowanej przez Gatsby. Nie podejmuje si\u0119 opisania szczeg\u00f3\u0142\u00f3w tych nowo\u015bci, wi\u0119c wszystkich zainteresowanych zapraszam do zamieszczonych pod artyku\u0142em \u017ar\u00f3de\u0142.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>\u015aledz\u0105c spo\u0142eczno\u015b\u0107 Reacta troch\u0119 z zewn\u0105trz zastanawiam si\u0119, jak wygl\u0105da obecny rozk\u0142ad si\u0142 mi\u0119dzy Gatsby i Next.js. Jeszcze niedawno to Gatsby by\u0142 rynkowym standardem, tymczasem przygl\u0105daj\u0105c si\u0119 statystykom z npm trends nie spos\u00f3b nie odnie\u015b\u0107 wra\u017cenia, \u017ce czasy \u015bwietno\u015bci ma on ju\u017c dawno za sob\u0105. A Wy macie na ten temat jakie\u015b przemy\u015blenia? Zapraszamy do dyskusji na naszym facebooku!<\/p>\n","innerContent":["\n<p>\u015aledz\u0105c spo\u0142eczno\u015b\u0107 Reacta troch\u0119 z zewn\u0105trz zastanawiam si\u0119, jak wygl\u0105da obecny rozk\u0142ad si\u0142 mi\u0119dzy Gatsby i Next.js. Jeszcze niedawno to Gatsby by\u0142 rynkowym standardem, tymczasem przygl\u0105daj\u0105c si\u0119 statystykom z npm trends nie spos\u00f3b nie odnie\u015b\u0107 wra\u017cenia, \u017ce czasy \u015bwietno\u015bci ma on ju\u017c dawno za sob\u0105. A Wy macie na ten temat jakie\u015b przemy\u015blenia? Zapraszamy do dyskusji na naszym facebooku!<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":2651,"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\/2021\/09\/Screenshot-2021-09-23-at-14.40.58-1024x415.png\" alt=\"\" class=\"wp-image-2651\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-14.40.58-1024x415.png\" alt=\"\" class=\"wp-image-2651\"\/><\/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:\/\/www.gatsbyjs.com\/gatsby-4\/\">https:\/\/www.gatsbyjs.com\/gatsby-4\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/www.gatsbyjs.com\/gatsby-4\/\">https:\/\/www.gatsbyjs.com\/gatsby-4\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. MUI v5.0<\/h2>\n","innerContent":["\n<h2>2. MUI v5.0<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kojarzycie bibliotek\u0119 Material - UI (implementacja Material Design dla Reacta)? Je\u015bli tak, to zanotujcie sobie, \u017ce od wersji 5 zmieni\u0142a ona swoj\u0105 nazw\u0119 na MUI. Jak motywuj\u0105 tw\u00f3rcy, nowa nazwa by\u0142a potrzebna ze wzgl\u0119du na rozszerzenie odpowiedzialno\u015bci projektu. Od teraz dobrze znana biblioteka komponent\u00f3w dost\u0119pna jest jako MUI Core, a do rodziny produkt\u00f3w, nad kt\u00f3rymi pracuje zesp\u00f3\u0142, do\u0142\u0105czy\u0142 MUI X. Nowa biblioteka ma dostarcza\u0107 komponenty do budowania wydajnych aplikacji do prezentacji du\u017cej ilo\u015bci danych.<\/p>\n","innerContent":["\n<p>Kojarzycie bibliotek\u0119 Material - UI (implementacja Material Design dla Reacta)? Je\u015bli tak, to zanotujcie sobie, \u017ce od wersji 5 zmieni\u0142a ona swoj\u0105 nazw\u0119 na MUI. Jak motywuj\u0105 tw\u00f3rcy, nowa nazwa by\u0142a potrzebna ze wzgl\u0119du na rozszerzenie odpowiedzialno\u015bci projektu. Od teraz dobrze znana biblioteka komponent\u00f3w dost\u0119pna jest jako MUI Core, a do rodziny produkt\u00f3w, nad kt\u00f3rymi pracuje zesp\u00f3\u0142, do\u0142\u0105czy\u0142 MUI X. Nowa biblioteka ma dostarcza\u0107 komponenty do budowania wydajnych aplikacji do prezentacji du\u017cej ilo\u015bci danych.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":2652,"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\/2021\/09\/Screenshot-2021-09-23-at-10.22.10-1024x460.png\" alt=\"\" class=\"wp-image-2652\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/Screenshot-2021-09-23-at-10.22.10-1024x460.png\" alt=\"\" class=\"wp-image-2652\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli pracujecie z Material-UI to pewnie interesuje Was co nowego trafi\u0142o do biblioteki. W wersji 5.0 tw\u00f3rcy skupiali si\u0119, przede wszystkim, na ulepszeniu do\u015bwiadcze\u0144 deweloper\u00f3w (dobrze wiedzie\u0107, \u017ce kto\u015b o nas my\u015bli &lt;3). Najwi\u0119ksz\u0105 zmian\u0105 jest migracja z JSS do emotion. Jest to odpowied\u017a na trendy, w kierunku kt\u00f3rych rozwija si\u0119 \u015brodowisko Reacta, ale r\u00f3wnie\u017c inwestycja w wydajno\u015b\u0107 (przyk\u0142adowo, komponent Box jest teraz od 5 do nawet 10 krotnie wydajniejszy). Mi\u0142\u0105 niespodziank\u0105 jest obecno\u015b\u0107 wrappera, umo\u017cliwiaj\u0105cego zast\u0105pienie emotion styled-components. Je\u015bli nie jeste\u015bcie jeszcze gotowi na porzucenie JSS, to wci\u0105\u017c dost\u0119pna jest paczka @mui\/styles, dzi\u0119ki kt\u00f3rej b\u0119dzie to mo\u017cliwe.<\/p>\n","innerContent":["\n<p>Je\u015bli pracujecie z Material-UI to pewnie interesuje Was co nowego trafi\u0142o do biblioteki. W wersji 5.0 tw\u00f3rcy skupiali si\u0119, przede wszystkim, na ulepszeniu do\u015bwiadcze\u0144 deweloper\u00f3w (dobrze wiedzie\u0107, \u017ce kto\u015b o nas my\u015bli &lt;3). Najwi\u0119ksz\u0105 zmian\u0105 jest migracja z JSS do emotion. Jest to odpowied\u017a na trendy, w kierunku kt\u00f3rych rozwija si\u0119 \u015brodowisko Reacta, ale r\u00f3wnie\u017c inwestycja w wydajno\u015b\u0107 (przyk\u0142adowo, komponent Box jest teraz od 5 do nawet 10 krotnie wydajniejszy). Mi\u0142\u0105 niespodziank\u0105 jest obecno\u015b\u0107 wrappera, umo\u017cliwiaj\u0105cego zast\u0105pienie emotion styled-components. Je\u015bli nie jeste\u015bcie jeszcze gotowi na porzucenie JSS, to wci\u0105\u017c dost\u0119pna jest paczka @mui\/styles, dzi\u0119ki kt\u00f3rej b\u0119dzie to mo\u017cliwe.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>To nie koniec, je\u015bli chodzi o usprawnienia dotycz\u0105ce stylowania. Cz\u0119\u015b\u0107 komponent\u00f3w dosta\u0142a tajemnicze property `sx`, kt\u00f3re umo\u017cliwia przekazanie obiektu, kt\u00f3rego klucze i warto\u015bci niepokoj\u0105co przypominaj\u0105 tailwinda.<\/p>\n","innerContent":["\n<p>To nie koniec, je\u015bli chodzi o usprawnienia dotycz\u0105ce stylowania. Cz\u0119\u015b\u0107 komponent\u00f3w dosta\u0142a tajemnicze property `sx`, kt\u00f3re umo\u017cliwia przekazanie obiektu, kt\u00f3rego klucze i warto\u015bci niepokoj\u0105co przypominaj\u0105 tailwinda.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">&lt;Slider sx={{ my: 1 }} \/>\n&lt;Typography sx={{ color: 'grey.600' }}><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">&lt;Slider sx={{ my: 1 }} \/>\n&lt;Typography sx={{ color: 'grey.600' }}><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kolejna nowo\u015b\u0107 to mo\u017cliwo\u015b\u0107 dynamicznego definiowania kolor\u00f3w i wariant\u00f3w komponent\u00f3w przy u\u017cyciu ThemeProvidera. Jak t\u0142umacz\u0105 tw\u00f3rcy ma to zredukowa\u0107 boilerplate, jaki generowa\u0142o tworzenie w\u0142asnych opakowa\u0144 na podstawowe komponenty. Wygl\u0105da to naprawd\u0119 fajnie, ale sk\u0142adnia z `declare module` troch\u0119 k\u0142uje w oczy.<\/p>\n","innerContent":["\n<p>Kolejna nowo\u015b\u0107 to mo\u017cliwo\u015b\u0107 dynamicznego definiowania kolor\u00f3w i wariant\u00f3w komponent\u00f3w przy u\u017cyciu ThemeProvidera. Jak t\u0142umacz\u0105 tw\u00f3rcy ma to zredukowa\u0107 boilerplate, jaki generowa\u0142o tworzenie w\u0142asnych opakowa\u0144 na podstawowe komponenty. Wygl\u0105da to naprawd\u0119 fajnie, ale sk\u0142adnia z `declare module` troch\u0119 k\u0142uje w oczy.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">const theme = createTheme({\n  components: {\n    MuiButton: {\n      variants: [\n        {\n          props: { variant: 'dashed' },\n          style: {\n            textTransform: 'none',\n            border: `2px dashed grey${blue[500]}`,\n          },\n        },\n        {\n          props: { variant: 'dashed', color: 'secondary' },\n          style: {\n            border: `4px dashed ${red[500]}`,\n          },\n        },\n      ],\n    },\n  },\n});\n\ndeclare module '@mui\/material\/Button' {\n  interface ButtonPropsVariantOverrides {\n    dashed: true;\n  }\n}\n\n&lt;ThemeProvider theme={theme}>\n  &lt;Button variant=\"dashed\" sx={{ m: 1 }}>\n    Dashed\n  &lt;\/Button>\n  &lt;Button variant=\"dashed\" color=\"secondary\" sx={{ m: 1 }}>\n    Secondary\n  &lt;\/Button>\n&lt;\/ThemeProvider>\n<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">const theme = createTheme({\n  components: {\n    MuiButton: {\n      variants: [\n        {\n          props: { variant: 'dashed' },\n          style: {\n            textTransform: 'none',\n            border: `2px dashed grey${blue[500]}`,\n          },\n        },\n        {\n          props: { variant: 'dashed', color: 'secondary' },\n          style: {\n            border: `4px dashed ${red[500]}`,\n          },\n        },\n      ],\n    },\n  },\n});\n\ndeclare module '@mui\/material\/Button' {\n  interface ButtonPropsVariantOverrides {\n    dashed: true;\n  }\n}\n\n&lt;ThemeProvider theme={theme}>\n  &lt;Button variant=\"dashed\" sx={{ m: 1 }}>\n    Dashed\n  &lt;\/Button>\n  &lt;Button variant=\"dashed\" color=\"secondary\" sx={{ m: 1 }}>\n    Secondary\n  &lt;\/Button>\n&lt;\/ThemeProvider>\n<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na koniec warto wspomnie\u0107 jeszcze, \u017ce tw\u00f3rcy zmigrowali si\u0119 z Enzyme do Testing Library i przepisali znaczn\u0105 cz\u0119\u015b\u0107 kodu na TypeScript. Oczywi\u015bcie zmian i nowo\u015bci jest wi\u0119cej, wi\u0119c wszystkich zainteresowanych odsy\u0142amy do poni\u017cszych \u017ar\u00f3de\u0142.<\/p>\n","innerContent":["\n<p>Na koniec warto wspomnie\u0107 jeszcze, \u017ce tw\u00f3rcy zmigrowali si\u0119 z Enzyme do Testing Library i przepisali znaczn\u0105 cz\u0119\u015b\u0107 kodu na TypeScript. Oczywi\u015bcie zmian i nowo\u015bci jest wi\u0119cej, wi\u0119c wszystkich zainteresowanych odsy\u0142amy do poni\u017cszych \u017ar\u00f3de\u0142.<\/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:\/\/mui.com\/blog\/mui-core-v5\/\">https:\/\/mui.com\/blog\/mui-core-v5\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/mui.com\/blog\/mui-core-v5\/\">https:\/\/mui.com\/blog\/mui-core-v5\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/mui.com\/x\/\">https:\/\/mui.com\/x\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/mui.com\/x\/\">https:\/\/mui.com\/x\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/mui.com\/blog\/material-ui-is-now-mui\/\">https:\/\/mui.com\/blog\/material-ui-is-now-mui\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/mui.com\/blog\/material-ui-is-now-mui\/\">https:\/\/mui.com\/blog\/material-ui-is-now-mui\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>Bonus: Quake w 13kB<\/h2>\n","innerContent":["\n<h2>Bonus: Quake w 13kB<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W ostatnim tygodniu w sieci zosta\u0142a opublikowana implementacja tego pierwszego, kt\u00f3ra wa\u017cy zaledwie 13kB. Ca\u0142o\u015b\u0107 oparta jest o Canvas i dzia\u0142a ca\u0142kiem sprawnie. Je\u015bli b\u0119dziecie si\u0119 nudzi\u0107 na kolejnym korporacyjnym spotkaniu, to warto z czystej ciekawo\u015bci sprawdzi\u0107 to w\u0142asnor\u0119cznie.<\/p>\n","innerContent":["\n<p>W ostatnim tygodniu w sieci zosta\u0142a opublikowana implementacja tego pierwszego, kt\u00f3ra wa\u017cy zaledwie 13kB. Ca\u0142o\u015b\u0107 oparta jest o Canvas i dzia\u0142a ca\u0142kiem sprawnie. Je\u015bli b\u0119dziecie si\u0119 nudzi\u0107 na kolejnym korporacyjnym spotkaniu, to warto z czystej ciekawo\u015bci sprawdzi\u0107 to w\u0142asnor\u0119cznie.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":2653,"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\/2021\/09\/big.jpeg\" alt=\"\" class=\"wp-image-2653\"\/><figcaption>Kto\u015b powinien przygotowa\u0107 licznik odliczaj\u0105cy dni od ostatniej kreatywnej re-implementacji Quake\u2019a albo Doom\u2019a.<\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/09\/big.jpeg\" alt=\"\" class=\"wp-image-2653\"\/><figcaption>Kto\u015b powinien przygotowa\u0107 licznik odliczaj\u0105cy dni od ostatniej kreatywnej re-implementacji Quake\u2019a albo Doom\u2019a.<\/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:\/\/js13kgames.com\/entries\/q1k3\">https:\/\/js13kgames.com\/entries\/q1k3<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/js13kgames.com\/entries\/q1k3\">https:\/\/js13kgames.com\/entries\/q1k3<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10078","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=10078"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10078\/revisions"}],"predecessor-version":[{"id":10621,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10078\/revisions\/10621"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/7707"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}