{"id":10032,"date":"2021-12-16T19:03:59","date_gmt":"2021-12-16T18:03:59","guid":{"rendered":"https:\/\/vived.io\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/"},"modified":"2022-09-19T13:16:34","modified_gmt":"2022-09-19T11:16:34","slug":"frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/","title":{"rendered":"Frontend Thursday vol. 68 &#8211; State of CSS 2021, Tailwind 3, React Forget"},"content":{"rendered":"\n<h2 id=\"1-tailwind-v3-0\" data-num=1>1. Tailwind v3.0<\/h2>\n\n\n\n<p>Czasami zdarza si\u0119, \u017ce tu\u017c po opublikowaniu frontendowego czwartku w mediach pojawia si\u0119 informacja o naprawd\u0119 du\u017cym wydarzeniu, kt\u00f3ra powinna si\u0119 w nim znale\u017a\u0107. Taka sytuacja mia\u0142a miejsce w zesz\u0142ym tygodniu, bo dos\u0142ownie godzin\u0119 po publikacji naszego podsumowania do sieci trafi\u0142 Tailwind v3.0. Jest to pierwsza du\u017ca wersja od ponad roku i przynosi ca\u0142y worek nowo\u015bci. Jeste\u015bmy troch\u0119 sp\u00f3\u017anieni na ca\u0142\u0105 zabaw\u0119, ale mimo wszystko przyjrzymy si\u0119 zmianom z tego wydania.<\/p>\n\n\n\n<p>Pojawienie si\u0119 opcjonalnego kompilatora Just-In-Time w Tailwind v2.1 by\u0142o sporym wydarzeniem. Tailwind v3 pozbywa si\u0119 starego kompilatora i w jego miejsce domy\u015blnie skonfigurowana jest wersja Just-In-Time. Stary kompilator w trybie deweloperskim do przegl\u0105darki dostarcza\u0142 poka\u017any plik zawieraj\u0105cy ca\u0142ego Tailwinda (czasami maj\u0105cego nawet 10MB!). W trybie produkcyjnym natomiast standardem by\u0142o odchudzanie paczki przy pomocy PurgeCSS. Kompilator Just-In-Time zupe\u0142nie zmienia to zachowanie. Zar\u00f3wno w trybie produkcyjnym, jak i deweloperskim wraz z dodaniem kolejnej klasy do elementu, b\u0119dzie si\u0119 ona dynamicznie pojawia\u0107 w wynikowych plikach stylu. Nie wp\u0142ynie to znacz\u0105co na rozmiar bundla, ale za to mocno poprawi developer experience -w trakcie developmentu przegl\u0105darka b\u0119dzie musia\u0142a obs\u0142ugiwa\u0107 o rz\u0105d wielko\u015bci mniejszy plik CSS.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y3yvb.jpeg\" alt=\"\" class=\"wp-image-3455\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y3yvb.jpeg 500w, https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y3yvb-300x300.jpeg 300w, https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y3yvb-150x150.jpeg 150w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n\n<p>Zmiana domy\u015blnego kompilatora umo\u017cliwi\u0142a tw\u00f3rcom frameworka rozszerzy\u0107 domy\u015bln\u0105 palet\u0119 kolor\u00f3w (w ko\u0144cu je\u015bli nie wykorzystacie jakiego\u015b koloru w aplikacji to nigdy nie pojawi si\u0119 on w wygenerowanym kodzie). W\u015br\u00f3d kolor\u00f3w znajdziemy wi\u0119c limonkowy, cyan, fuksj\u0119, r\u00f3\u017c czy rozszerzon\u0105 palet\u0119 szaro\u015bci. Je\u015bli m\u00f3wimy ju\u017c o kolorach to warto te\u017c wspomnie\u0107 o pojawieniu si\u0119 kolorowych cieni. Niby nic du\u017cego, ale na pewno sporo z nas na tym skorzysta.<\/p>\n\n\n\n<p>Wraz z now\u0105 wersj\u0105 powitali\u015bmy r\u00f3wnie\u017c sporo ca\u0142kowicie nowych API. W\u015br\u00f3d nich znajdziemy mi\u0119dzy innymi:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Scroll snap AP<\/strong>I, czyli zbi\u00f3r funkcjonalno\u015bci potrzebnych do zaimplementowania efektu przyci\u0105gania podczas scrolowania<\/li><li><strong>Multi-column layout<\/strong>, czyli zbi\u00f3r funkcjonalno\u015bci umo\u017cliwiaj\u0105cy wygodny podzia\u0142 na kolumny, kt\u00f3ry znamy chocia\u017cby z tradycyjnej prasy<\/li><li><strong>Print modifier,<\/strong> czyli zestaw modyfikator\u00f3w, kt\u00f3ry u\u0142atwi stylowanie podgl\u0105du wydruku tworzonej\u00a0 strony\u00a0\u00a0<\/li><li><strong>Aspect ratio<\/strong>, czyli wygodne API, kt\u00f3re umo\u017cliwi zdefiniowanie proporcji elementu<\/li><li><strong>Wsparcie dla RTL i LTR<\/strong>, czyli API do zmieniania kierunku tekstu<\/li><\/ul>\n\n\n\n<p>Je\u015bli jeste\u015bcie zainteresowani szczeg\u00f3\u0142ami to w \u017ar\u00f3d\u0142ach znajdziecie linki do obszernej dokumentacji. Je\u015bli wolicie wersj\u0119 wideo to Adam Wathan nagra\u0142 prawie p\u00f3\u0142godzinne wideo, w kt\u00f3rym przygl\u0105da si\u0119 dok\u0142adnie wszystkim nowo\u015bciom.<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"embed-responsive embed-responsive-16by9\"><iframe loading=\"lazy\" title=\"Introducing Tailwind CSS v3.0\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/TmWIrBPE6Bc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p>https:\/\/tailwindcss.com\/blog\/tailwindcss-v3#just-in-time-all-the-time<br>https:\/\/www.youtube.com\/watch?v=TmWIrBPE6Bc<br>https:\/\/v2.tailwindcss.com\/docs\/just-in-time-mode<\/p>\n\n\n\n<h2 id=\"2-deno-dolacza-do-tc39-i-nowosci-z-ostatnich-obrad\" data-num=2>2. Deno do\u0142\u0105cza do TC39 i nowo\u015bci z ostatnich obrad<\/h2>\n\n\n\n<p>TC39 Working Group (ja lubi\u0119 ich nazywa\u0107 po prostu starszyzn\u0105 plemienn\u0105) to grupa ludzi i organizacji odpowiedzialnych za rozw\u00f3j oficjalnych standard\u00f3w JavaScript. Je\u015bli zastanawiali\u015bcie si\u0119 dlaczego standard rozwija si\u0119 tak powoli to jest to w\u0142a\u015bnie ich wina \ud83d\ude09 Je\u015bli nigdy nie mieli\u015bcie okazji przeczyta\u0107 o tym jak powstaj\u0105 nowe funkcjonalno\u015bci to gor\u0105co polecam <a href=\"https:\/\/nitayneeman.com\/posts\/introducing-all-stages-of-the-tc39-process-in-ecmascript\/\">ten artyku\u0142<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/giphy-1.gif\" alt=\"\" class=\"wp-image-3456\" width=\"442\" height=\"328\"\/><figcaption><em>Obrady TC39 Working Group &#8211; koloryzowane<\/em><\/figcaption><\/figure><\/div>\n\n\n\n<p>Wracaj\u0105c do sedna tematu, do TC39 Working Group do\u0142\u0105czy\u0142o Deno. Dla projektu oznacza to, \u017ce b\u0119dzie mie\u0107 bezpo\u015bredni wp\u0142yw na to w kt\u00f3r\u0105 stron\u0119 rozwija si\u0119 j\u0119zyk. Co za tym idzie, mo\u017cemy oczekiwa\u0107, \u017ce kolejne wprowadzane funkcjonalno\u015bci bez problem\u00f3w i op\u00f3\u017anie\u0144 trafi\u0105 do Deno. Co wi\u0119cej,funkcjonalno\u015bci dost\u0119pne tylko w Deno maj\u0105 szans\u0119 trafi\u0107 do oficjalnej specyfikacji. Osobi\u015bcie przygl\u0105dam si\u0119 poczynaniom Deno z zapartym tchem i licz\u0119 na to, \u017ce za kilka lat b\u0119d\u0105 sta\u0107 na r\u00f3wni z node.js.<\/p>\n\n\n\n<p>Zebrania TC39 troch\u0119 przyzwyczai\u0142y ju\u017c nas do nudy i literowaniem nad nowym API dla dat i czasu\u2026 i na pierwszym spotkaniu w kt\u00f3rym bra\u0142 udzia\u0142 przedstawiciel Deno nie by\u0142o inaczej. Jedyn\u0105 ciekaw\u0105 nowo\u015bci\u0105 jest dotarcie do fazy trzeciej funkcji groupBy. A\u017c ci\u0119\u017cko uwierzy\u0107, \u017ce tak popularny j\u0119zyk jak JavaScript mo\u017ce nie posiada\u0107 takiej funkcjonalno\u015bci w 2021 roku\u2026<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">const array = [1, 2, 3, 4, 5];\n\n\/\/ groupBy groups items by arbitrary key.\n\/\/ In this case, we&#039;re grouping by even\/odd keys\narray.groupBy((num, index, array) =&gt; {\n  return num % 2 === 0 ? &#039;even&#039;: &#039;odd&#039;;\n});\n\n\/\/ =&gt;  { odd: [1, 3, 5], even: [2, 4] }<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/dev.to\/hemanth\/updates-from-the-87th-meeting-of-tc39-44e4\">https:\/\/dev.to\/hemanth\/updates-from-the-87th-meeting-of-tc39-44e4<br><\/a><a href=\"https:\/\/deno.com\/blog\/deno-joins-tc39\">https:\/\/deno.com\/blog\/deno-joins-tc39<\/a><\/p>\n\n\n\n<h2 id=\"3-react-forget\" data-num=3>3. React Forget<\/h2>\n\n\n\n<p>Je\u015bli jeste\u015bcie fanami Angulara i Vue, kt\u00f3rzy czytaj\u0105c tytu\u0142 stwierdzili, \u017ce mo\u017cna wreszcie zapomnie\u0107 o React&#8217;cie &#8211; niestety to jeszcze nie czas. React Forget to nazwa kodowa biblioteki, kt\u00f3ra ma umo\u017cliwi\u0107 ca\u0142kowite pozbycie si\u0119 z kodu hooka useMemo. Hook ten s\u0142u\u017cy do zapami\u0119tywania stanu pomi\u0119dzy renderami i przeliczania go tylko przy zmianie zdefiniowanych z g\u00f3ry parametr\u00f3w. Standardowo wykorzystuje si\u0119 go do optymalizacji ci\u0119\u017ckich operacjach takich jak aplikowanie filtr\u00f3w do tablicy. Niestety, z czasem zarz\u0105dzanie useMemo potrafi\u0142o sta\u0107 si\u0119 bardzo skomplikowane, co w efekcie prowadzi do nieczytelnego kodu. Nowa bibliotek React Forget ma sama zaj\u0105\u0107 si\u0119 wymaganymi optymalizacj\u0105, dzi\u0119ki czemu pozwoli deweloperom zapomnie\u0107 o useMemo. Na razie biblioteka nie jest jeszcze publiczna, ale je\u015bli ujrzy \u015bwiat\u0142o dzienne to mo\u017ce by\u0107 sporym prze\u0142omem w \u015bwiecie reacta.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"embed-responsive embed-responsive-16by9\"><iframe loading=\"lazy\" title=\"React without memo\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/lGEMwh32soc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"487\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y3yi2.jpeg\" alt=\"\" class=\"wp-image-3457\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y3yi2.jpeg 512w, https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y3yi2-300x285.jpeg 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure><\/div>\n\n\n\n<h2 id=\"4-state-of-css-2021\" data-num=4>4. State of CSS 2021<\/h2>\n\n\n\n<p>Wreszcie nasta\u0142 ten czas, kiedy nasze przegl\u0105dy zmieniaj\u0105 si\u0119 w przegl\u0105d wykres\u00f3w i ciekawostek. W minionym tygodniu ukaza\u0142 si\u0119 raport State of CSS 2021 &#8211; to ju\u017c trzecia edycja raportu, wi\u0119c w ko\u0144cu znajdziemy w nim r\u00f3wnie\u017c wykresy z analiz\u0105 trend\u00f3w na rynku. Zdecydowanie polecam przejrze\u0107 raport samodzielnie, bo opr\u00f3cz wykres\u00f3w znajdziecie tam prawdziw\u0105 kopalni\u0119 wiedzy na temat mniej popularnych funkcjonalno\u015bci czy list\u0119 blog\u00f3w i os\u00f3b, kt\u00f3re warto obserwowa\u0107 w (mo\u017ce nasz blog te\u017c kiedy\u015b zajmie tam swoje zaszczytne miejsce\u2026). Tymczasem poni\u017cej znajdziecie kilka moim zdaniem najciekawszych wniosk\u00f3w:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Nap\u0142yw nowych deweloper\u00f3w w ostatnich latach zaczyna si\u0119 stabilizowa\u0107. Osoby z do\u015bwiadczeniem mniejszym ni\u017c\u00a0 2 lata to 10% rynku,\u00a0 natomiast z do\u015bwiadczeniem pomi\u0119dzy 2-5 lat to 20% rynku.<\/li><li>\u200b\u200b65% ankietowanych to m\u0119\u017cczy\u017ani<\/li><li>Najwi\u0119cej deweloper\u00f3w pracuje w \u015bredniej wielko\u015bci firmach (100-1000). Jestem ciekawy jak ankiet\u0119 wype\u0142nia\u0142y osoby zatrudnione na JDG \ud83d\ude09<\/li><li>Flexbox bez obaw mo\u017cna ju\u017c nazywa\u0107 rynkowym standardem. Prawie 99% respondent\u00f3w wykorzysta\u0142o go w ostatnim roku.<\/li><li>CSS Grid zyskuje na popularno\u015bci. W minionym roku korzysta\u0142o z niego 83% respondent\u00f3w, natomiast kolejne 16% jest \u015bwiadomych jego istnienia. Co interesuj\u0105ce z subgrid korzysta\u0142o tylko 13% respondent\u00f3w, a prawie 30% nigdy o nich nie s\u0142ysza\u0142o.<\/li><li>W\u015br\u00f3d preprocesor\u00f3w deweloperzy najbardziej docenili PostCSS, jednak\u00a0 je\u015bli chodzi o stosunek satysfakcji do wykorzystuj\u0105cych u\u017cytkownik\u00f3w to niepodzielnie kr\u00f3luje\u00a0 Sass.<\/li><li>W\u015br\u00f3d framework\u00f3w z du\u017c\u0105 przewag\u0105 najpopularniejszym rozwi\u0105zaniem pozostaje Bootstrap. Je\u015bli jednak chodzi o satysfakcj\u0119, to TailwindCSS nie ma realnej konkurencji.<\/li><li>Najpopularniejsz\u0105 przegl\u0105dark\u0105 do developmentu s\u0105 Chrome (67%) i Firefox (47%). Zaskakuj\u0105 wysokie wyniki Safari (23%), Edge (16%) i Brave (10%)<\/li><li>Pomimo gasn\u0105cej popularno\u015bci tablet\u00f3w, 40% respondent\u00f3w deklaruje, \u017ce testuje na nich swoje aplikacje.<\/li><li>Je\u015bli chodzi o dokumentacj\u0119 to kr\u00f3luje Stack Overflow i MDN. Na kolejnych miejscach uplasowa\u0142y si\u0119 W3Schools i Web.dev.<\/li><li>Zdecydowana wi\u0119kszo\u015b\u0107 respondent\u00f3w czerpie rado\u015b\u0107 z pisania CSS\u00f3w.<\/li><li>Tylko 20% respondent\u00f3w uwa\u017ca, \u017ce CSS ewoluuje zbyt wolno<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"270\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/giphy.gif\" alt=\"\" class=\"wp-image-3458\"\/><figcaption>Blog Vived co roku w grudniu i styczniu \ud83d\ude00<\/figcaption><\/figure><\/div>\n\n\n\n<p>PS: Je\u015bli jeste\u015bcie fanami wykres\u00f3w to w minionym tygodniu ukaza\u0142 si\u0119 r\u00f3wnie\u017c <a href=\"https:\/\/almanac.httparchive.org\/en\/2021\/\">Web Almanach 2021<\/a>. Raport ten powsta\u0142 na podstawie analizy kodu \u017ar\u00f3d\u0142owego ponad 8 milion\u00f3w stron internetowych. Ostrzegam tylko, \u017ce jest to lektura na kt\u00f3rej mo\u017cna straci\u0107 wiele godzin (gdyby raport wydawany by\u0142 w formie drukowanej to raczej nie odbiega\u0142by grubo\u015bci\u0105 od przeci\u0119tnej powie\u015bci przygodowej)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/2021.stateofcss.com\/en-US\/\">https:\/\/2021.stateofcss.com\/en-US\/<br><\/a>https:\/\/almanac.httparchive.org\/en\/2021\/<\/p>\n\n\n\n<h2 id=\"bonus\" data-num=5>Bonus<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/giphy-2.gif\" alt=\"\" class=\"wp-image-3459\" width=\"461\" height=\"346\"\/><\/figure><\/div>\n\n\n\n<p>Je\u015bli pomimo tygodnia tak intensywnego w nowo\u015bci nadal szukacie czego\u015b ciekawego to Dan Abramov opublikowa\u0142 na twitterze list\u0119 stu (powtarzam: <strong>stu<\/strong>) rzeczy, kt\u00f3rych nauczy\u0142 si\u0119 pracuj\u0105c nad Reactem.\u00a0 Zdecydowanie\u00a0 jest to ciekawa lista, na kt\u00f3rej chyba ka\u017cdy znajdzie jaki\u015b punkt, kt\u00f3ry chocia\u017c odrobin\u0119 poszerzy jego horyzonty.<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/twitter.com\/dan_abramov\/status\/1470613731071696896\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"780\" height=\"439\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y409i.jpeg\" alt=\"\" class=\"wp-image-3460\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y409i.jpeg 780w, https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y409i-300x169.jpeg 300w, https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y409i-768x432.jpeg 768w\" sizes=\"auto, (max-width: 780px) 100vw, 780px\" \/><\/figure><\/div>\n\n\n\n<p>Ja tymczasem wracam do Advent of Code. Bawi\u0119 si\u0119 w tym roku jak nigdy &#8211; je\u015bli kto\u015b chce do\u0142\u0105czy\u0107 to zapraszamy na <a href=\"https:\/\/www.facebook.com\/groups\/223069906571427\">nasz\u0105 grup\u0119 na facebooku<\/a> i do leaderboarda (join code: 1550550-c19ac226).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zazwyczaj tu\u017c przed \u015bwi\u0119tami \u015bwiat frontendowych nowinek zapada w zimowy sen. W tym roku mamy jednak do czynienia z anomali\u0105, bo miniony tydzie\u0144 to zatrz\u0119sienie ciekawych wyda\u0144 i nowinek. Bez przed\u0142u\u017cania zapraszamy na. kolejn\u0105 edycje naszego przegl\u0105du! \ud83c\udf84<\/p>\n","protected":false},"author":12,"featured_media":7752,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-10032","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\/2021\/12\/5y55m1.jpg","estimated_reading_time":"7","feature_image_visible":false},"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. 68 - State of CSS 2021, Tailwind 3, React Forget - 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-68-state-of-css-2021-tailwind-3-react-forget\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Thursday vol. 68 - State of CSS 2021, Tailwind 3, React Forget - Vived\" \/>\n<meta property=\"og:description\" content=\"Zazwyczaj tu\u017c przed \u015bwi\u0119tami \u015bwiat frontendowych nowinek zapada w zimowy sen. W tym roku mamy jednak do czynienia z anomali\u0105, bo miniony tydzie\u0144 to zatrz\u0119sienie ciekawych wyda\u0144 i nowinek. Bez przed\u0142u\u017cania zapraszamy na. kolejn\u0105 edycje naszego przegl\u0105du! \ud83c\udf84\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-16T18:03:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-16-at-18.57.09.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1004\" \/>\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\/2021\/12\/Screenshot-2021-12-16-at-18.57.09.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-68-state-of-css-2021-tailwind-3-react-forget\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Thursday vol. 68 &#8211; State of CSS 2021, Tailwind 3, React Forget\",\"datePublished\":\"2021-12-16T18:03:59+00:00\",\"dateModified\":\"2022-09-19T11:16:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/\"},\"wordCount\":1423,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/\",\"name\":\"Frontend Thursday vol. 68 - State of CSS 2021, Tailwind 3, React Forget - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"datePublished\":\"2021-12-16T18:03:59+00:00\",\"dateModified\":\"2022-09-19T11:16:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png\",\"width\":2000,\"height\":1210},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Thursday vol. 68 &#8211; State of CSS 2021, Tailwind 3, React Forget\"}]},{\"@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. 68 - State of CSS 2021, Tailwind 3, React Forget - 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-68-state-of-css-2021-tailwind-3-react-forget\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Thursday vol. 68 - State of CSS 2021, Tailwind 3, React Forget - Vived","og_description":"Zazwyczaj tu\u017c przed \u015bwi\u0119tami \u015bwiat frontendowych nowinek zapada w zimowy sen. W tym roku mamy jednak do czynienia z anomali\u0105, bo miniony tydzie\u0144 to zatrz\u0119sienie ciekawych wyda\u0144 i nowinek. Bez przed\u0142u\u017cania zapraszamy na. kolejn\u0105 edycje naszego przegl\u0105du! \ud83c\udf84","og_url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/","og_site_name":"Vived","article_published_time":"2021-12-16T18:03:59+00:00","article_modified_time":"2022-09-19T11:16:34+00:00","og_image":[{"width":1920,"height":1004,"url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-16-at-18.57.09.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","twitter_image":"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-16-at-18.57.09.png","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Thursday vol. 68 &#8211; State of CSS 2021, Tailwind 3, React Forget","datePublished":"2021-12-16T18:03:59+00:00","dateModified":"2022-09-19T11:16:34+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/"},"wordCount":1423,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/","url":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/","name":"Frontend Thursday vol. 68 - State of CSS 2021, Tailwind 3, React Forget - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","datePublished":"2021-12-16T18:03:59+00:00","dateModified":"2022-09-19T11:16:34+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2021\/10\/cat-frontent.png","width":2000,"height":1210},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-thursday-vol-68-state-of-css-2021-tailwind-3-react-forget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Thursday vol. 68 &#8211; State of CSS 2021, Tailwind 3, React Forget"}]},{"@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. Tailwind v3.0<\/h2>\n","innerContent":["\n<h2>1. Tailwind v3.0<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Czasami zdarza si\u0119, \u017ce tu\u017c po opublikowaniu frontendowego czwartku w mediach pojawia si\u0119 informacja o naprawd\u0119 du\u017cym wydarzeniu, kt\u00f3ra powinna si\u0119 w nim znale\u017a\u0107. Taka sytuacja mia\u0142a miejsce w zesz\u0142ym tygodniu, bo dos\u0142ownie godzin\u0119 po publikacji naszego podsumowania do sieci trafi\u0142 Tailwind v3.0. Jest to pierwsza du\u017ca wersja od ponad roku i przynosi ca\u0142y worek nowo\u015bci. Jeste\u015bmy troch\u0119 sp\u00f3\u017anieni na ca\u0142\u0105 zabaw\u0119, ale mimo wszystko przyjrzymy si\u0119 zmianom z tego wydania.<\/p>\n","innerContent":["\n<p>Czasami zdarza si\u0119, \u017ce tu\u017c po opublikowaniu frontendowego czwartku w mediach pojawia si\u0119 informacja o naprawd\u0119 du\u017cym wydarzeniu, kt\u00f3ra powinna si\u0119 w nim znale\u017a\u0107. Taka sytuacja mia\u0142a miejsce w zesz\u0142ym tygodniu, bo dos\u0142ownie godzin\u0119 po publikacji naszego podsumowania do sieci trafi\u0142 Tailwind v3.0. Jest to pierwsza du\u017ca wersja od ponad roku i przynosi ca\u0142y worek nowo\u015bci. Jeste\u015bmy troch\u0119 sp\u00f3\u017anieni na ca\u0142\u0105 zabaw\u0119, ale mimo wszystko przyjrzymy si\u0119 zmianom z tego wydania.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Pojawienie si\u0119 opcjonalnego kompilatora Just-In-Time w Tailwind v2.1 by\u0142o sporym wydarzeniem. Tailwind v3 pozbywa si\u0119 starego kompilatora i w jego miejsce domy\u015blnie skonfigurowana jest wersja Just-In-Time. Stary kompilator w trybie deweloperskim do przegl\u0105darki dostarcza\u0142 poka\u017any plik zawieraj\u0105cy ca\u0142ego Tailwinda (czasami maj\u0105cego nawet 10MB!). W trybie produkcyjnym natomiast standardem by\u0142o odchudzanie paczki przy pomocy PurgeCSS. Kompilator Just-In-Time zupe\u0142nie zmienia to zachowanie. Zar\u00f3wno w trybie produkcyjnym, jak i deweloperskim wraz z dodaniem kolejnej klasy do elementu, b\u0119dzie si\u0119 ona dynamicznie pojawia\u0107 w wynikowych plikach stylu. Nie wp\u0142ynie to znacz\u0105co na rozmiar bundla, ale za to mocno poprawi developer experience -w trakcie developmentu przegl\u0105darka b\u0119dzie musia\u0142a obs\u0142ugiwa\u0107 o rz\u0105d wielko\u015bci mniejszy plik CSS.<\/p>\n","innerContent":["\n<p>Pojawienie si\u0119 opcjonalnego kompilatora Just-In-Time w Tailwind v2.1 by\u0142o sporym wydarzeniem. Tailwind v3 pozbywa si\u0119 starego kompilatora i w jego miejsce domy\u015blnie skonfigurowana jest wersja Just-In-Time. Stary kompilator w trybie deweloperskim do przegl\u0105darki dostarcza\u0142 poka\u017any plik zawieraj\u0105cy ca\u0142ego Tailwinda (czasami maj\u0105cego nawet 10MB!). W trybie produkcyjnym natomiast standardem by\u0142o odchudzanie paczki przy pomocy PurgeCSS. Kompilator Just-In-Time zupe\u0142nie zmienia to zachowanie. Zar\u00f3wno w trybie produkcyjnym, jak i deweloperskim wraz z dodaniem kolejnej klasy do elementu, b\u0119dzie si\u0119 ona dynamicznie pojawia\u0107 w wynikowych plikach stylu. Nie wp\u0142ynie to znacz\u0105co na rozmiar bundla, ale za to mocno poprawi developer experience -w trakcie developmentu przegl\u0105darka b\u0119dzie musia\u0142a obs\u0142ugiwa\u0107 o rz\u0105d wielko\u015bci mniejszy plik CSS.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3455,"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\/12\/5y3yvb.jpeg\" alt=\"\" class=\"wp-image-3455\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y3yvb.jpeg\" alt=\"\" class=\"wp-image-3455\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zmiana domy\u015blnego kompilatora umo\u017cliwi\u0142a tw\u00f3rcom frameworka rozszerzy\u0107 domy\u015bln\u0105 palet\u0119 kolor\u00f3w (w ko\u0144cu je\u015bli nie wykorzystacie jakiego\u015b koloru w aplikacji to nigdy nie pojawi si\u0119 on w wygenerowanym kodzie). W\u015br\u00f3d kolor\u00f3w znajdziemy wi\u0119c limonkowy, cyan, fuksj\u0119, r\u00f3\u017c czy rozszerzon\u0105 palet\u0119 szaro\u015bci. Je\u015bli m\u00f3wimy ju\u017c o kolorach to warto te\u017c wspomnie\u0107 o pojawieniu si\u0119 kolorowych cieni. Niby nic du\u017cego, ale na pewno sporo z nas na tym skorzysta.<\/p>\n","innerContent":["\n<p>Zmiana domy\u015blnego kompilatora umo\u017cliwi\u0142a tw\u00f3rcom frameworka rozszerzy\u0107 domy\u015bln\u0105 palet\u0119 kolor\u00f3w (w ko\u0144cu je\u015bli nie wykorzystacie jakiego\u015b koloru w aplikacji to nigdy nie pojawi si\u0119 on w wygenerowanym kodzie). W\u015br\u00f3d kolor\u00f3w znajdziemy wi\u0119c limonkowy, cyan, fuksj\u0119, r\u00f3\u017c czy rozszerzon\u0105 palet\u0119 szaro\u015bci. Je\u015bli m\u00f3wimy ju\u017c o kolorach to warto te\u017c wspomnie\u0107 o pojawieniu si\u0119 kolorowych cieni. Niby nic du\u017cego, ale na pewno sporo z nas na tym skorzysta.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wraz z now\u0105 wersj\u0105 powitali\u015bmy r\u00f3wnie\u017c sporo ca\u0142kowicie nowych API. W\u015br\u00f3d nich znajdziemy mi\u0119dzy innymi:&nbsp;<\/p>\n","innerContent":["\n<p>Wraz z now\u0105 wersj\u0105 powitali\u015bmy r\u00f3wnie\u017c sporo ca\u0142kowicie nowych API. W\u015br\u00f3d nich znajdziemy mi\u0119dzy innymi:&nbsp;<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/list","attrs":[],"innerBlocks":[],"innerHTML":"\n<ul><li><strong>Scroll snap AP<\/strong>I, czyli zbi\u00f3r funkcjonalno\u015bci potrzebnych do zaimplementowania efektu przyci\u0105gania podczas scrolowania<\/li><li><strong>Multi-column layout<\/strong>, czyli zbi\u00f3r funkcjonalno\u015bci umo\u017cliwiaj\u0105cy wygodny podzia\u0142 na kolumny, kt\u00f3ry znamy chocia\u017cby z tradycyjnej prasy<\/li><li><strong>Print modifier,<\/strong> czyli zestaw modyfikator\u00f3w, kt\u00f3ry u\u0142atwi stylowanie podgl\u0105du wydruku tworzonej\u00a0 strony\u00a0\u00a0<\/li><li><strong>Aspect ratio<\/strong>, czyli wygodne API, kt\u00f3re umo\u017cliwi zdefiniowanie proporcji elementu<\/li><li><strong>Wsparcie dla RTL i LTR<\/strong>, czyli API do zmieniania kierunku tekstu<\/li><\/ul>\n","innerContent":["\n<ul><li><strong>Scroll snap AP<\/strong>I, czyli zbi\u00f3r funkcjonalno\u015bci potrzebnych do zaimplementowania efektu przyci\u0105gania podczas scrolowania<\/li><li><strong>Multi-column layout<\/strong>, czyli zbi\u00f3r funkcjonalno\u015bci umo\u017cliwiaj\u0105cy wygodny podzia\u0142 na kolumny, kt\u00f3ry znamy chocia\u017cby z tradycyjnej prasy<\/li><li><strong>Print modifier,<\/strong> czyli zestaw modyfikator\u00f3w, kt\u00f3ry u\u0142atwi stylowanie podgl\u0105du wydruku tworzonej\u00a0 strony\u00a0\u00a0<\/li><li><strong>Aspect ratio<\/strong>, czyli wygodne API, kt\u00f3re umo\u017cliwi zdefiniowanie proporcji elementu<\/li><li><strong>Wsparcie dla RTL i LTR<\/strong>, czyli API do zmieniania kierunku tekstu<\/li><\/ul>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli jeste\u015bcie zainteresowani szczeg\u00f3\u0142ami to w \u017ar\u00f3d\u0142ach znajdziecie linki do obszernej dokumentacji. Je\u015bli wolicie wersj\u0119 wideo to Adam Wathan nagra\u0142 prawie p\u00f3\u0142godzinne wideo, w kt\u00f3rym przygl\u0105da si\u0119 dok\u0142adnie wszystkim nowo\u015bciom.<\/p>\n","innerContent":["\n<p>Je\u015bli jeste\u015bcie zainteresowani szczeg\u00f3\u0142ami to w \u017ar\u00f3d\u0142ach znajdziecie linki do obszernej dokumentacji. Je\u015bli wolicie wersj\u0119 wideo to Adam Wathan nagra\u0142 prawie p\u00f3\u0142godzinne wideo, w kt\u00f3rym przygl\u0105da si\u0119 dok\u0142adnie wszystkim nowo\u015bciom.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/embed","attrs":{"url":"https:\/\/www.youtube.com\/watch?v=TmWIrBPE6Bc","type":"video","providerNameSlug":"youtube","responsive":true,"align":"center","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=TmWIrBPE6Bc\n<\/div><\/figure>\n","innerContent":["\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=TmWIrBPE6Bc\n<\/div><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>https:\/\/tailwindcss.com\/blog\/tailwindcss-v3#just-in-time-all-the-time<br>https:\/\/www.youtube.com\/watch?v=TmWIrBPE6Bc<br>https:\/\/v2.tailwindcss.com\/docs\/just-in-time-mode<\/p>\n","innerContent":["\n<p>https:\/\/tailwindcss.com\/blog\/tailwindcss-v3#just-in-time-all-the-time<br>https:\/\/www.youtube.com\/watch?v=TmWIrBPE6Bc<br>https:\/\/v2.tailwindcss.com\/docs\/just-in-time-mode<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. Deno do\u0142\u0105cza do TC39 i nowo\u015bci z ostatnich obrad<\/h2>\n","innerContent":["\n<h2>2. Deno do\u0142\u0105cza do TC39 i nowo\u015bci z ostatnich obrad<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>TC39 Working Group (ja lubi\u0119 ich nazywa\u0107 po prostu starszyzn\u0105 plemienn\u0105) to grupa ludzi i organizacji odpowiedzialnych za rozw\u00f3j oficjalnych standard\u00f3w JavaScript. Je\u015bli zastanawiali\u015bcie si\u0119 dlaczego standard rozwija si\u0119 tak powoli to jest to w\u0142a\u015bnie ich wina ;) Je\u015bli nigdy nie mieli\u015bcie okazji przeczyta\u0107 o tym jak powstaj\u0105 nowe funkcjonalno\u015bci to gor\u0105co polecam <a href=\"https:\/\/nitayneeman.com\/posts\/introducing-all-stages-of-the-tc39-process-in-ecmascript\/\">ten artyku\u0142<\/a>.<\/p>\n","innerContent":["\n<p>TC39 Working Group (ja lubi\u0119 ich nazywa\u0107 po prostu starszyzn\u0105 plemienn\u0105) to grupa ludzi i organizacji odpowiedzialnych za rozw\u00f3j oficjalnych standard\u00f3w JavaScript. Je\u015bli zastanawiali\u015bcie si\u0119 dlaczego standard rozwija si\u0119 tak powoli to jest to w\u0142a\u015bnie ich wina ;) Je\u015bli nigdy nie mieli\u015bcie okazji przeczyta\u0107 o tym jak powstaj\u0105 nowe funkcjonalno\u015bci to gor\u0105co polecam <a href=\"https:\/\/nitayneeman.com\/posts\/introducing-all-stages-of-the-tc39-process-in-ecmascript\/\">ten artyku\u0142<\/a>.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3456,"width":442,"height":328,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/giphy-1.gif\" alt=\"\" class=\"wp-image-3456\" width=\"442\" height=\"328\"\/><figcaption><em>Obrady TC39 Working Group - koloryzowane<\/em><\/figcaption><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/giphy-1.gif\" alt=\"\" class=\"wp-image-3456\" width=\"442\" height=\"328\"\/><figcaption><em>Obrady TC39 Working Group - koloryzowane<\/em><\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wracaj\u0105c do sedna tematu, do TC39 Working Group do\u0142\u0105czy\u0142o Deno. Dla projektu oznacza to, \u017ce b\u0119dzie mie\u0107 bezpo\u015bredni wp\u0142yw na to w kt\u00f3r\u0105 stron\u0119 rozwija si\u0119 j\u0119zyk. Co za tym idzie, mo\u017cemy oczekiwa\u0107, \u017ce kolejne wprowadzane funkcjonalno\u015bci bez problem\u00f3w i op\u00f3\u017anie\u0144 trafi\u0105 do Deno. Co wi\u0119cej,funkcjonalno\u015bci dost\u0119pne tylko w Deno maj\u0105 szans\u0119 trafi\u0107 do oficjalnej specyfikacji. Osobi\u015bcie przygl\u0105dam si\u0119 poczynaniom Deno z zapartym tchem i licz\u0119 na to, \u017ce za kilka lat b\u0119d\u0105 sta\u0107 na r\u00f3wni z node.js.<\/p>\n","innerContent":["\n<p>Wracaj\u0105c do sedna tematu, do TC39 Working Group do\u0142\u0105czy\u0142o Deno. Dla projektu oznacza to, \u017ce b\u0119dzie mie\u0107 bezpo\u015bredni wp\u0142yw na to w kt\u00f3r\u0105 stron\u0119 rozwija si\u0119 j\u0119zyk. Co za tym idzie, mo\u017cemy oczekiwa\u0107, \u017ce kolejne wprowadzane funkcjonalno\u015bci bez problem\u00f3w i op\u00f3\u017anie\u0144 trafi\u0105 do Deno. Co wi\u0119cej,funkcjonalno\u015bci dost\u0119pne tylko w Deno maj\u0105 szans\u0119 trafi\u0107 do oficjalnej specyfikacji. Osobi\u015bcie przygl\u0105dam si\u0119 poczynaniom Deno z zapartym tchem i licz\u0119 na to, \u017ce za kilka lat b\u0119d\u0105 sta\u0107 na r\u00f3wni z node.js.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zebrania TC39 troch\u0119 przyzwyczai\u0142y ju\u017c nas do nudy i literowaniem nad nowym API dla dat i czasu\u2026 i na pierwszym spotkaniu w kt\u00f3rym bra\u0142 udzia\u0142 przedstawiciel Deno nie by\u0142o inaczej. Jedyn\u0105 ciekaw\u0105 nowo\u015bci\u0105 jest dotarcie do fazy trzeciej funkcji groupBy. A\u017c ci\u0119\u017cko uwierzy\u0107, \u017ce tak popularny j\u0119zyk jak JavaScript mo\u017ce nie posiada\u0107 takiej funkcjonalno\u015bci w 2021 roku\u2026<\/p>\n","innerContent":["\n<p>Zebrania TC39 troch\u0119 przyzwyczai\u0142y ju\u017c nas do nudy i literowaniem nad nowym API dla dat i czasu\u2026 i na pierwszym spotkaniu w kt\u00f3rym bra\u0142 udzia\u0142 przedstawiciel Deno nie by\u0142o inaczej. Jedyn\u0105 ciekaw\u0105 nowo\u015bci\u0105 jest dotarcie do fazy trzeciej funkcji groupBy. A\u017c ci\u0119\u017cko uwierzy\u0107, \u017ce tak popularny j\u0119zyk jak JavaScript mo\u017ce nie posiada\u0107 takiej funkcjonalno\u015bci w 2021 roku\u2026<\/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\">const array = [1, 2, 3, 4, 5];\n\n\/\/ groupBy groups items by arbitrary key.\n\/\/ In this case, we're grouping by even\/odd keys\narray.groupBy((num, index, array) => {\n  return num % 2 === 0 ? 'even': 'odd';\n});\n\n\/\/ =>  { odd: [1, 3, 5], even: [2, 4] }<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">const array = [1, 2, 3, 4, 5];\n\n\/\/ groupBy groups items by arbitrary key.\n\/\/ In this case, we're grouping by even\/odd keys\narray.groupBy((num, index, array) => {\n  return num % 2 === 0 ? 'even': 'odd';\n});\n\n\/\/ =>  { odd: [1, 3, 5], even: [2, 4] }<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/dev.to\/hemanth\/updates-from-the-87th-meeting-of-tc39-44e4\">https:\/\/dev.to\/hemanth\/updates-from-the-87th-meeting-of-tc39-44e4<br><\/a><a href=\"https:\/\/deno.com\/blog\/deno-joins-tc39\">https:\/\/deno.com\/blog\/deno-joins-tc39<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/dev.to\/hemanth\/updates-from-the-87th-meeting-of-tc39-44e4\">https:\/\/dev.to\/hemanth\/updates-from-the-87th-meeting-of-tc39-44e4<br><\/a><a href=\"https:\/\/deno.com\/blog\/deno-joins-tc39\">https:\/\/deno.com\/blog\/deno-joins-tc39<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>3. React Forget<\/h2>\n","innerContent":["\n<h2>3. React Forget<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli jeste\u015bcie fanami Angulara i Vue, kt\u00f3rzy czytaj\u0105c tytu\u0142 stwierdzili, \u017ce mo\u017cna wreszcie zapomnie\u0107 o React'cie - niestety to jeszcze nie czas. React Forget to nazwa kodowa biblioteki, kt\u00f3ra ma umo\u017cliwi\u0107 ca\u0142kowite pozbycie si\u0119 z kodu hooka useMemo. Hook ten s\u0142u\u017cy do zapami\u0119tywania stanu pomi\u0119dzy renderami i przeliczania go tylko przy zmianie zdefiniowanych z g\u00f3ry parametr\u00f3w. Standardowo wykorzystuje si\u0119 go do optymalizacji ci\u0119\u017ckich operacjach takich jak aplikowanie filtr\u00f3w do tablicy. Niestety, z czasem zarz\u0105dzanie useMemo potrafi\u0142o sta\u0107 si\u0119 bardzo skomplikowane, co w efekcie prowadzi do nieczytelnego kodu. Nowa bibliotek React Forget ma sama zaj\u0105\u0107 si\u0119 wymaganymi optymalizacj\u0105, dzi\u0119ki czemu pozwoli deweloperom zapomnie\u0107 o useMemo. Na razie biblioteka nie jest jeszcze publiczna, ale je\u015bli ujrzy \u015bwiat\u0142o dzienne to mo\u017ce by\u0107 sporym prze\u0142omem w \u015bwiecie reacta.<\/p>\n","innerContent":["\n<p>Je\u015bli jeste\u015bcie fanami Angulara i Vue, kt\u00f3rzy czytaj\u0105c tytu\u0142 stwierdzili, \u017ce mo\u017cna wreszcie zapomnie\u0107 o React'cie - niestety to jeszcze nie czas. React Forget to nazwa kodowa biblioteki, kt\u00f3ra ma umo\u017cliwi\u0107 ca\u0142kowite pozbycie si\u0119 z kodu hooka useMemo. Hook ten s\u0142u\u017cy do zapami\u0119tywania stanu pomi\u0119dzy renderami i przeliczania go tylko przy zmianie zdefiniowanych z g\u00f3ry parametr\u00f3w. Standardowo wykorzystuje si\u0119 go do optymalizacji ci\u0119\u017ckich operacjach takich jak aplikowanie filtr\u00f3w do tablicy. Niestety, z czasem zarz\u0105dzanie useMemo potrafi\u0142o sta\u0107 si\u0119 bardzo skomplikowane, co w efekcie prowadzi do nieczytelnego kodu. Nowa bibliotek React Forget ma sama zaj\u0105\u0107 si\u0119 wymaganymi optymalizacj\u0105, dzi\u0119ki czemu pozwoli deweloperom zapomnie\u0107 o useMemo. Na razie biblioteka nie jest jeszcze publiczna, ale je\u015bli ujrzy \u015bwiat\u0142o dzienne to mo\u017ce by\u0107 sporym prze\u0142omem w \u015bwiecie reacta.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/embed","attrs":{"url":"https:\/\/www.youtube.com\/watch?v=lGEMwh32soc","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=lGEMwh32soc\n<\/div><\/figure>\n","innerContent":["\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=lGEMwh32soc\n<\/div><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3457,"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\/12\/5y3yi2.jpeg\" alt=\"\" class=\"wp-image-3457\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y3yi2.jpeg\" alt=\"\" class=\"wp-image-3457\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>4. State of CSS 2021<\/h2>\n","innerContent":["\n<h2>4. State of CSS 2021<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Wreszcie nasta\u0142 ten czas, kiedy nasze przegl\u0105dy zmieniaj\u0105 si\u0119 w przegl\u0105d wykres\u00f3w i ciekawostek. W minionym tygodniu ukaza\u0142 si\u0119 raport State of CSS 2021 - to ju\u017c trzecia edycja raportu, wi\u0119c w ko\u0144cu znajdziemy w nim r\u00f3wnie\u017c wykresy z analiz\u0105 trend\u00f3w na rynku. Zdecydowanie polecam przejrze\u0107 raport samodzielnie, bo opr\u00f3cz wykres\u00f3w znajdziecie tam prawdziw\u0105 kopalni\u0119 wiedzy na temat mniej popularnych funkcjonalno\u015bci czy list\u0119 blog\u00f3w i os\u00f3b, kt\u00f3re warto obserwowa\u0107 w (mo\u017ce nasz blog te\u017c kiedy\u015b zajmie tam swoje zaszczytne miejsce\u2026). Tymczasem poni\u017cej znajdziecie kilka moim zdaniem najciekawszych wniosk\u00f3w:<\/p>\n","innerContent":["\n<p>Wreszcie nasta\u0142 ten czas, kiedy nasze przegl\u0105dy zmieniaj\u0105 si\u0119 w przegl\u0105d wykres\u00f3w i ciekawostek. W minionym tygodniu ukaza\u0142 si\u0119 raport State of CSS 2021 - to ju\u017c trzecia edycja raportu, wi\u0119c w ko\u0144cu znajdziemy w nim r\u00f3wnie\u017c wykresy z analiz\u0105 trend\u00f3w na rynku. Zdecydowanie polecam przejrze\u0107 raport samodzielnie, bo opr\u00f3cz wykres\u00f3w znajdziecie tam prawdziw\u0105 kopalni\u0119 wiedzy na temat mniej popularnych funkcjonalno\u015bci czy list\u0119 blog\u00f3w i os\u00f3b, kt\u00f3re warto obserwowa\u0107 w (mo\u017ce nasz blog te\u017c kiedy\u015b zajmie tam swoje zaszczytne miejsce\u2026). Tymczasem poni\u017cej znajdziecie kilka moim zdaniem najciekawszych wniosk\u00f3w:<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/list","attrs":[],"innerBlocks":[],"innerHTML":"\n<ul><li>Nap\u0142yw nowych deweloper\u00f3w w ostatnich latach zaczyna si\u0119 stabilizowa\u0107. Osoby z do\u015bwiadczeniem mniejszym ni\u017c\u00a0 2 lata to 10% rynku,\u00a0 natomiast z do\u015bwiadczeniem pomi\u0119dzy 2-5 lat to 20% rynku.<\/li><li>\u200b\u200b65% ankietowanych to m\u0119\u017cczy\u017ani<\/li><li>Najwi\u0119cej deweloper\u00f3w pracuje w \u015bredniej wielko\u015bci firmach (100-1000). Jestem ciekawy jak ankiet\u0119 wype\u0142nia\u0142y osoby zatrudnione na JDG ;)<\/li><li>Flexbox bez obaw mo\u017cna ju\u017c nazywa\u0107 rynkowym standardem. Prawie 99% respondent\u00f3w wykorzysta\u0142o go w ostatnim roku.<\/li><li>CSS Grid zyskuje na popularno\u015bci. W minionym roku korzysta\u0142o z niego 83% respondent\u00f3w, natomiast kolejne 16% jest \u015bwiadomych jego istnienia. Co interesuj\u0105ce z subgrid korzysta\u0142o tylko 13% respondent\u00f3w, a prawie 30% nigdy o nich nie s\u0142ysza\u0142o.<\/li><li>W\u015br\u00f3d preprocesor\u00f3w deweloperzy najbardziej docenili PostCSS, jednak\u00a0 je\u015bli chodzi o stosunek satysfakcji do wykorzystuj\u0105cych u\u017cytkownik\u00f3w to niepodzielnie kr\u00f3luje\u00a0 Sass.<\/li><li>W\u015br\u00f3d framework\u00f3w z du\u017c\u0105 przewag\u0105 najpopularniejszym rozwi\u0105zaniem pozostaje Bootstrap. Je\u015bli jednak chodzi o satysfakcj\u0119, to TailwindCSS nie ma realnej konkurencji.<\/li><li>Najpopularniejsz\u0105 przegl\u0105dark\u0105 do developmentu s\u0105 Chrome (67%) i Firefox (47%). Zaskakuj\u0105 wysokie wyniki Safari (23%), Edge (16%) i Brave (10%)<\/li><li>Pomimo gasn\u0105cej popularno\u015bci tablet\u00f3w, 40% respondent\u00f3w deklaruje, \u017ce testuje na nich swoje aplikacje.<\/li><li>Je\u015bli chodzi o dokumentacj\u0119 to kr\u00f3luje Stack Overflow i MDN. Na kolejnych miejscach uplasowa\u0142y si\u0119 W3Schools i Web.dev.<\/li><li>Zdecydowana wi\u0119kszo\u015b\u0107 respondent\u00f3w czerpie rado\u015b\u0107 z pisania CSS\u00f3w.<\/li><li>Tylko 20% respondent\u00f3w uwa\u017ca, \u017ce CSS ewoluuje zbyt wolno<\/li><\/ul>\n","innerContent":["\n<ul><li>Nap\u0142yw nowych deweloper\u00f3w w ostatnich latach zaczyna si\u0119 stabilizowa\u0107. Osoby z do\u015bwiadczeniem mniejszym ni\u017c\u00a0 2 lata to 10% rynku,\u00a0 natomiast z do\u015bwiadczeniem pomi\u0119dzy 2-5 lat to 20% rynku.<\/li><li>\u200b\u200b65% ankietowanych to m\u0119\u017cczy\u017ani<\/li><li>Najwi\u0119cej deweloper\u00f3w pracuje w \u015bredniej wielko\u015bci firmach (100-1000). Jestem ciekawy jak ankiet\u0119 wype\u0142nia\u0142y osoby zatrudnione na JDG ;)<\/li><li>Flexbox bez obaw mo\u017cna ju\u017c nazywa\u0107 rynkowym standardem. Prawie 99% respondent\u00f3w wykorzysta\u0142o go w ostatnim roku.<\/li><li>CSS Grid zyskuje na popularno\u015bci. W minionym roku korzysta\u0142o z niego 83% respondent\u00f3w, natomiast kolejne 16% jest \u015bwiadomych jego istnienia. Co interesuj\u0105ce z subgrid korzysta\u0142o tylko 13% respondent\u00f3w, a prawie 30% nigdy o nich nie s\u0142ysza\u0142o.<\/li><li>W\u015br\u00f3d preprocesor\u00f3w deweloperzy najbardziej docenili PostCSS, jednak\u00a0 je\u015bli chodzi o stosunek satysfakcji do wykorzystuj\u0105cych u\u017cytkownik\u00f3w to niepodzielnie kr\u00f3luje\u00a0 Sass.<\/li><li>W\u015br\u00f3d framework\u00f3w z du\u017c\u0105 przewag\u0105 najpopularniejszym rozwi\u0105zaniem pozostaje Bootstrap. Je\u015bli jednak chodzi o satysfakcj\u0119, to TailwindCSS nie ma realnej konkurencji.<\/li><li>Najpopularniejsz\u0105 przegl\u0105dark\u0105 do developmentu s\u0105 Chrome (67%) i Firefox (47%). Zaskakuj\u0105 wysokie wyniki Safari (23%), Edge (16%) i Brave (10%)<\/li><li>Pomimo gasn\u0105cej popularno\u015bci tablet\u00f3w, 40% respondent\u00f3w deklaruje, \u017ce testuje na nich swoje aplikacje.<\/li><li>Je\u015bli chodzi o dokumentacj\u0119 to kr\u00f3luje Stack Overflow i MDN. Na kolejnych miejscach uplasowa\u0142y si\u0119 W3Schools i Web.dev.<\/li><li>Zdecydowana wi\u0119kszo\u015b\u0107 respondent\u00f3w czerpie rado\u015b\u0107 z pisania CSS\u00f3w.<\/li><li>Tylko 20% respondent\u00f3w uwa\u017ca, \u017ce CSS ewoluuje zbyt wolno<\/li><\/ul>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3458,"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\/12\/giphy.gif\" alt=\"\" class=\"wp-image-3458\"\/><figcaption>Blog Vived co roku w grudniu i styczniu :D<\/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\/12\/giphy.gif\" alt=\"\" class=\"wp-image-3458\"\/><figcaption>Blog Vived co roku w grudniu i styczniu :D<\/figcaption><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>PS: Je\u015bli jeste\u015bcie fanami wykres\u00f3w to w minionym tygodniu ukaza\u0142 si\u0119 r\u00f3wnie\u017c <a href=\"https:\/\/almanac.httparchive.org\/en\/2021\/\">Web Almanach 2021<\/a>. Raport ten powsta\u0142 na podstawie analizy kodu \u017ar\u00f3d\u0142owego ponad 8 milion\u00f3w stron internetowych. Ostrzegam tylko, \u017ce jest to lektura na kt\u00f3rej mo\u017cna straci\u0107 wiele godzin (gdyby raport wydawany by\u0142 w formie drukowanej to raczej nie odbiega\u0142by grubo\u015bci\u0105 od przeci\u0119tnej powie\u015bci przygodowej)<\/p>\n","innerContent":["\n<p>PS: Je\u015bli jeste\u015bcie fanami wykres\u00f3w to w minionym tygodniu ukaza\u0142 si\u0119 r\u00f3wnie\u017c <a href=\"https:\/\/almanac.httparchive.org\/en\/2021\/\">Web Almanach 2021<\/a>. Raport ten powsta\u0142 na podstawie analizy kodu \u017ar\u00f3d\u0142owego ponad 8 milion\u00f3w stron internetowych. Ostrzegam tylko, \u017ce jest to lektura na kt\u00f3rej mo\u017cna straci\u0107 wiele godzin (gdyby raport wydawany by\u0142 w formie drukowanej to raczej nie odbiega\u0142by grubo\u015bci\u0105 od przeci\u0119tnej powie\u015bci przygodowej)<\/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:\/\/2021.stateofcss.com\/en-US\/\">https:\/\/2021.stateofcss.com\/en-US\/<br><\/a>https:\/\/almanac.httparchive.org\/en\/2021\/<\/p>\n","innerContent":["\n<p><a href=\"https:\/\/2021.stateofcss.com\/en-US\/\">https:\/\/2021.stateofcss.com\/en-US\/<br><\/a>https:\/\/almanac.httparchive.org\/en\/2021\/<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>Bonus<\/h2>\n","innerContent":["\n<h2>Bonus<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3459,"width":461,"height":346,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/giphy-2.gif\" alt=\"\" class=\"wp-image-3459\" width=\"461\" height=\"346\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/giphy-2.gif\" alt=\"\" class=\"wp-image-3459\" width=\"461\" height=\"346\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli pomimo tygodnia tak intensywnego w nowo\u015bci nadal szukacie czego\u015b ciekawego to Dan Abramov opublikowa\u0142 na twitterze list\u0119 stu (powtarzam: <strong>stu<\/strong>) rzeczy, kt\u00f3rych nauczy\u0142 si\u0119 pracuj\u0105c nad Reactem.\u00a0 Zdecydowanie\u00a0 jest to ciekawa lista, na kt\u00f3rej chyba ka\u017cdy znajdzie jaki\u015b punkt, kt\u00f3ry chocia\u017c odrobin\u0119 poszerzy jego horyzonty.<\/p>\n","innerContent":["\n<p>Je\u015bli pomimo tygodnia tak intensywnego w nowo\u015bci nadal szukacie czego\u015b ciekawego to Dan Abramov opublikowa\u0142 na twitterze list\u0119 stu (powtarzam: <strong>stu<\/strong>) rzeczy, kt\u00f3rych nauczy\u0142 si\u0119 pracuj\u0105c nad Reactem.\u00a0 Zdecydowanie\u00a0 jest to ciekawa lista, na kt\u00f3rej chyba ka\u017cdy znajdzie jaki\u015b punkt, kt\u00f3ry chocia\u017c odrobin\u0119 poszerzy jego horyzonty.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/embed","attrs":{"url":"https:\/\/twitter.com\/dan_abramov\/status\/1470613731071696896","type":"rich","providerNameSlug":"twitter","responsive":true,"align":"center"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/twitter.com\/dan_abramov\/status\/1470613731071696896\n<\/div><\/figure>\n","innerContent":["\n<figure class=\"wp-block-embed aligncenter is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/twitter.com\/dan_abramov\/status\/1470613731071696896\n<\/div><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/separator","attrs":[],"innerBlocks":[],"innerHTML":"\n<hr class=\"wp-block-separator\"\/>\n","innerContent":["\n<hr class=\"wp-block-separator\"\/>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":3460,"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\/12\/5y409i.jpeg\" alt=\"\" class=\"wp-image-3460\"\/><\/figure><\/div>\n","innerContent":["\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2021\/12\/5y409i.jpeg\" alt=\"\" class=\"wp-image-3460\"\/><\/figure><\/div>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Ja tymczasem wracam do Advent of Code. Bawi\u0119 si\u0119 w tym roku jak nigdy - je\u015bli kto\u015b chce do\u0142\u0105czy\u0107 to zapraszamy na <a href=\"https:\/\/www.facebook.com\/groups\/223069906571427\">nasz\u0105 grup\u0119 na facebooku<\/a> i do leaderboarda (join code: 1550550-c19ac226).<\/p>\n","innerContent":["\n<p>Ja tymczasem wracam do Advent of Code. Bawi\u0119 si\u0119 w tym roku jak nigdy - je\u015bli kto\u015b chce do\u0142\u0105czy\u0107 to zapraszamy na <a href=\"https:\/\/www.facebook.com\/groups\/223069906571427\">nasz\u0105 grup\u0119 na facebooku<\/a> i do leaderboarda (join code: 1550550-c19ac226).<\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10032","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=10032"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10032\/revisions"}],"predecessor-version":[{"id":10609,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/10032\/revisions\/10609"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/7752"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=10032"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=10032"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=10032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}