{"id":13011,"date":"2022-12-09T14:04:02","date_gmt":"2022-12-09T13:04:02","guid":{"rendered":"https:\/\/vived.io\/state-of-css-2022-is-here-frontend-weekly-vol-106\/"},"modified":"2022-12-09T14:35:54","modified_gmt":"2022-12-09T13:35:54","slug":"state-of-css-2022-is-here-frontend-weekly-vol-106","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/","title":{"rendered":"State of CSS 2022 is here! | Frontend Weekly vol. 106"},"content":{"rendered":"\n<h2 id=\"1-state-of-css-2022\" data-num=1>1. State of CSS 2022<\/h2>\n\n\n\n<p>Mamy to! Wreszcie nasta\u0142 ten czas w roku, kiedy nasze Vivedowe przegl\u0105dy zalej\u0105 statystyki i podsumowania. W tym roku gor\u0105cy sezon otwiera State of CSS 2022!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"270\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-19.gif\" alt=\"\" class=\"wp-image-13017\"\/><figcaption>Tak b\u0119d\u0105 wygl\u0105da\u0107 nasze weekly, przez nast\u0119pne miesi\u0105ce &#8211; przygotujcie si\u0119!<\/figcaption><\/figure><\/div>\n\n\n<p>Je\u015bli szukacie w internecie podsumowania nowo\u015bci z CSS z kilku ostatnich lat, to nie znajdziecie lepszego \u017ar\u00f3d\u0142a ni\u017c State of CSS. Wi\u0119kszo\u015bci pyta\u0144 towarzysz\u0105 linki do \u201cCan I Use\u201d i dokumentacji MDN. Na podstawie rozk\u0142adu odpowiedzi \u0142atwo te\u017c wyczu\u0107, kt\u00f3rymi funkcjonalno\u015bciami nale\u017cy ju\u017c si\u0119 zainteresowa\u0107, \u017ceby nie pozosta\u0107 w tyle za rynkowymi standardami. Poni\u017cej podziel\u0119 si\u0119 z Wami kilkoma moimi spostrze\u017ceniami po przeczytaniu wynik\u00f3w ankiety, ale nie traktujcie tego jako dog\u0142\u0119bnego podsumowania i odkryjcie ankiet\u0119 na w\u0142asn\u0105 r\u0119k\u0119.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Bootstrap to CSSowy jQuery&nbsp;<\/h3>\n\n\n\n<p>Bootstrap od samego pocz\u0105tku ankiety State of CSS jest najcz\u0119\u015bciej u\u017cywanym frameworkiem CSS. W tym roku przewaga nad drugim Tailwindem wynios\u0142a ponad 30 punkt\u00f3w procentowych. Nigdy nie by\u0142 to natomiast najbardziej lubiany framework w\u015br\u00f3d deweloper\u00f3w, a z roku na rok jego liczby lec\u0105 na \u0142eb na szyj\u0119. Czy tylko ja dostrzegam tutaj mocn\u0105 analogi\u0119 do sytuacji jQuery w \u015brodowisku JS?<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-20.gif\" alt=\"\" class=\"wp-image-13019\" width=\"480\" height=\"400\"\/><figcaption>Kiedy do\u0142\u0105czas do projektu i widzisz zale\u017cno\u015b\u0107 na Bootstrapa<\/figcaption><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Utility-first first for the win<\/h3>\n\n\n\n<p>W kategorii satysfakcji z framework\u00f3w CSS dwa pierwsze miejsca zaj\u0119\u0142y Tailwind i PureCSS. Oba te rozwi\u0105zania to biblioteki utility-first, a przewaga nad trzecim Ant Design by\u0142a spora i wynios\u0142a ponad 20 punkt\u00f3w procentowych. Wszystkie znaki na niebie wskazuj\u0105, \u017ce deweloperzy pokochali inline styles na sterydach (bo tak pieszczotliwie niekt\u00f3rzy nazywaj\u0105 podej\u015bcie utility-first), a stylowanie komponent\u00f3w przekazali w r\u0119ce bibliotek (takich jak Material UI czy Chakra) zamiast framework\u00f3w CSS (takich jak Bootstrap czy Ant Design).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"556\" height=\"500\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-59.jpeg\" alt=\"\" class=\"wp-image-13022\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-59.jpeg 556w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-59-300x270.jpeg 300w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><figcaption>To jest coraz mniej popularna opinia, ale od czasu do czasu temat wraca jak bumerang<\/figcaption><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">CSS staje si\u0119 nudny?<\/h3>\n\n\n\n<p>Je\u015bli spojrzycie na kategori\u0119 CSS Frameworks i CSS-in-JS, to na pewno od razu rzuci si\u0119 Wam w oczy brak nowych \u201cb\u0142yszcz\u0105cych\u201d rozwi\u0105za\u0144. Wygl\u0105da na to, \u017ce jako spo\u0142eczno\u015b\u0107 bardzo dojrzeli\u015bmy, wreszcie dopracowali\u015bmy nasze narz\u0119dzia i wydajemy si\u0119 zadowoleni z obecnego stanu rzeczy.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"400\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-21.gif\" alt=\"\" class=\"wp-image-13024\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">W CSS wreszcie zaczyna si\u0119 dzia\u0107!&nbsp;<\/h3>\n\n\n\n<p>Interop, to inicjatywa w kt\u00f3rej udzia\u0142 bierze Chrome, Firefox i Safari, kt\u00f3ra na celu ma usprawni\u0107 Developer Experience Web Developer\u00f3w. W du\u017cej mierze dzi\u0119ki jej dzia\u0142alno\u015bci w tym roku do wszystkich trzech przegl\u0105darek trafi\u0142y Container Queries (tl;dr; Media Queries zrobione jak nale\u017cy) i selektor `:has()`. S\u0105 to dwie od dawna wyczekiwane funkcjonalno\u015bci, kt\u00f3re naprawd\u0119 rewolucjonizuj\u0105 CSSy. O ile o tej pierwszej s\u0142ysza\u0142o prawie 90% deweloper\u00f3w, to o tej drugiej nie s\u0142ysza\u0142 tylko co trzeci respondent. Je\u015bli i dla Was jest to pierwsza styczno\u015b\u0107 z tymi funkcjonalno\u015bciami, to najwy\u017cszy czas nadrobi\u0107 zaleg\u0142o\u015bci.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"400\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-23.gif\" alt=\"\" class=\"wp-image-13028\"\/><figcaption>Tak zareagowa\u0142em, kiedy dowiedzia\u0142em si\u0119, \u017ce Container Queries dzia\u0142aj\u0105 w Chrome, Safari i Firefox<\/figcaption><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Deweloperzy testuj\u0105 aplikacje na tabletach i czytnikach ekranu<\/h3>\n\n\n\n<p>No dobra, troch\u0119 przekoloryzowa\u0142em\u2026 30% deweloper\u00f3w testuje swoje aplikacje na tabletach i 10% na czytnikach ekran\u00f3w. Na swoj\u0105 obron\u0119 powiem jednak, \u017ce jestem urodzonym pesymist\u0105 i spodziewa\u0142em si\u0119, \u017ce liczby te b\u0119d\u0105 co najmniej dwukrotnie mniejsze. Zw\u0142aszcza bior\u0105c pod uwag\u0119 jaki procent ruchu w internecie stanowi\u0105 tego typu urz\u0105dzenia.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"383\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-24.gif\" alt=\"\" class=\"wp-image-13030\"\/><figcaption>Je\u015bli nie wierzycie w m\u00f3j pesymizm to zapytajcie moich wsp\u00f3\u0142pracownik\u00f3w \ud83d\ude09<\/figcaption><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Istniej\u0105 deweloperzy, kt\u00f3rzy do buduj\u0105 aplikacje w Brave i Safari<\/h3>\n\n\n\n<p>Przez d\u0142ugi czas my\u015bla\u0142em, \u017ce budowanie webowych aplikacji na Safari jest swego rodzaju memem. W ko\u0144cu narz\u0119dzia deweloperskie w Chrome s\u0105 obecnie nie do pobicia. Jak si\u0119 okazuje \u017cy\u0142em w ba\u0144ce. Co trzeci respondent ankiety deklaruje, \u017ce jako podstawowej przegl\u0105darki do developmentu aplikacji u\u017cywa Safari, co 5 deklaruje w ten spos\u00f3b Edge, a co 10 Brave. W pytaniu tym mo\u017cna by\u0142o jednak zaznaczy\u0107 wi\u0119cej ni\u017c jedn\u0105 odpowied\u017a i co\u015b czuj\u0119 w ko\u015bciach, \u017ce niekt\u00f3rzy mocno tutaj przy kolorowali.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"408\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-22.gif\" alt=\"\" class=\"wp-image-13026\"\/><figcaption>Tak reaguje, kiedy widz\u0119 ludzi, kt\u00f3rzy u\u017cywaj\u0105 Safari zamiast Chrome do dewelopmentu aplikacji <\/figcaption><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/2022.stateofcss.com\/en-US\/\">https:\/\/2022.stateofcss.com\/en-US\/<\/a><\/p>\n\n\n\n<h2 id=\"2-codux-pierwsze-dedykowane-ide-dla-reacta\" data-num=2>2. Codux &#8211; pierwsze dedykowane IDE dla Reacta<\/h2>\n\n\n\n<p>W zesz\u0142ym tygodniu jeden z wsp\u00f3\u0142za\u0142o\u017cycieli Wix zaprezentowa\u0142 \u015bwiatu nowy produkt w portfolio firmy &#8211; Codux. Reklamuje si\u0119 on jako pierwsze IDE dedykowane dla Reacta, ale w rzeczywisto\u015bci jest to kolejne narz\u0119dzie low-code. Jest ono o tyle ciekawe, \u017ce jako \u017ar\u00f3d\u0142o prawdy wykorzystuje Reactowy kod. Co jeszcze ciekawsze, Codux umo\u017cliwia modyfikowanie komponent\u00f3w zar\u00f3wno przez kod jak i interfejs u\u017cytkownika.\u00a0<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"550\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/4eqcmrhljdchui78fism.jpeg\" alt=\"\" class=\"wp-image-13032\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/4eqcmrhljdchui78fism.jpeg 880w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/4eqcmrhljdchui78fism-300x188.jpeg 300w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/4eqcmrhljdchui78fism-768x480.jpeg 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/figure><\/div>\n\n\n<p>Na ten moment Codux jest w otwartej becia i nie wiadomo kiedy wydana zostanie jego finalna wersja. Spr\u00f3bowa\u0142em pobra\u0107 aplikacj\u0119 i przetestowa\u0107 j\u0105 na w\u0142asnej sk\u00f3rze. Wydaje si\u0119 odrobin\u0119 oci\u0119\u017ca\u0142a i toporna (to akurat mo\u017cna zrzuci\u0107 na barki wersji beta), a odnalezienie si\u0119 w interfejsie u\u017cytkownika zaj\u0119\u0142o mi chwil\u0119. Na pochwa\u0142\u0119 zas\u0142uguje natomiast wyb\u00f3r edytora kodu &#8211; je\u015bli oczy i palce mnie nie myl\u0105, to tw\u00f3rcy IDE zdecydowali si\u0119 skorzysta\u0107 z odpowiednio ostylowanego VSCode.<\/p>\n\n\n\n<p>Pod sk\u00f3r\u0105 przeczuwam, \u017ce w rozwi\u0105zaniu jest spora dawka potencja\u0142u. Wyobra\u017acie sobie sytuacj\u0119, kiedy Designer lub Product Owner mo\u017ce samodzielnie przygotowa\u0107 pierwsz\u0105 wersj\u0119 komponentu. Potem programista przeprowadza drobny refactoring i wrzuca aplikacj\u0119 na produkcj\u0119. Kiedy designer chce wprowadzi\u0107 poprawki, to po prostu wyklikuje je na interfejsie u\u017cytkownika. Jako \u017ce to kod jest \u017ar\u00f3d\u0142em prawdy, to programi\u015bcie zostaje tylko oceni\u0107, czy Codux zbytnio nie namiesza\u0142 i czy uwzgl\u0119dni\u0142 wszystkie przypadki brzegowe. W mojej g\u0142owie jest to taka Figma, ale \u017ar\u00f3d\u0142em prawdy nie jest tajemniczy format danych, a Reactowy kod. Dzi\u0119ki takiemu podej\u015bciu zar\u00f3wno programi\u015bci jak i designerzy pracuj\u0105 na wsp\u00f3lnym materiale \u017ar\u00f3d\u0142owym.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"634\" height=\"500\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/73q8i0.jpeg\" alt=\"\" class=\"wp-image-13034\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/73q8i0.jpeg 634w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/73q8i0-300x237.jpeg 300w\" sizes=\"auto, (max-width: 634px) 100vw, 634px\" \/><\/figure><\/div>\n\n\n<p>Jak to zwykle bywa, w ca\u0142ej tej beczce miodu jest te\u017c \u0142y\u017cka dziegciu. Po pierwsze, wykorzystanie jako \u017ar\u00f3d\u0142a prawdy Reactowego kodu sprawa, \u017ce designerzy w d\u0142u\u017cszej perspektywie zmuszeni b\u0119d\u0105 zrozumie\u0107 podstawy HTML\u2019a, CSS\u2019a i samego Reacta. Po drugie Codux generuje kod w bardzo konkretny i mocno zopiniowany spos\u00f3b. Je\u015bli nie przypadnie on Wam do gustu, albo b\u0119dziecie chcieli skorzysta\u0107 z innego zestawu bibliotek, to utoni\u0119cie w morzu refactoringu. W takiej sytuacji wszystkim na zdrowie wyjdzie designowanie w jednym narz\u0119dziu i programowanie w drugim (np. Figma + Storybook).&nbsp;<\/p>\n\n\n\n<p>Podsumowuj\u0105c, w Codux drzemie ca\u0142kiem spory potencja\u0142, ale przed tw\u00f3rcami jeszcze bardzo du\u017co pracy. Wydaje mi si\u0119 te\u017c, \u017ce g\u0142\u00f3wnym beneficjentem IDE nie b\u0119d\u0105 programi\u015bci, a w\u0142a\u015bnie osoby nie techniczne jak Designerzy czy Product Ownerzy.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/dev.to\/codux\/introducing-codux-15j5\">https:\/\/dev.to\/codux\/introducing-codux-15j5<\/a><\/p>\n\n\n\n<h2 id=\"3-storybook-szykuje-wsparcie-dla-nextjs-nuxt-sveltekit-i-remix\" data-num=3>3. Storybook szykuje wsparcie dla NextJS, Nuxt, SvelteKit i Remix<\/h2>\n\n\n\n<p>W ostatnich latach popularno\u015b\u0107 Storybooka nieustannie wzrasta. Programi\u015bci wykorzystuj\u0105 go nie tylko do publikowania w sieci swoich bibliotek komponent\u00f3w, ale r\u00f3wnie\u017c jako lekkie, dobrze wyizolowane \u015brodowisko deweloperskie. Wszystkie fan\u00f3w Storybooka na pewno ucieszy fakt, \u017ce jego tw\u00f3rcy przebudowali znaczn\u0105 jego cz\u0119\u015b\u0107, tak aby u\u0142atwi\u0107 integracj\u0119 z kolejnymi frameworkami. W wersji 7.0, kt\u00f3ra premier\u0119 ma mie\u0107 jeszcze przed ko\u0144cem roku, dodane zostanie wsparcie dla Next.js. Nast\u0119pnie tw\u00f3rcy zabior\u0105 si\u0119 z Nuxt, SvelteKit i Remixa.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"827\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-61.jpeg\" alt=\"\" class=\"wp-image-13036\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-61.jpeg 500w, https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-61-181x300.jpeg 181w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/storybook.js.org\/blog\/framework-api\/\">https:\/\/storybook.js.org\/blog\/framework-api\/<\/a><\/p>\n\n\n\n<h2 id=\"4-honeypot-pracuje-nad-filmem-dokumentalnym-o-react\" data-num=4>4. Honeypot pracuje nad filmem dokumentalnym o React<\/h2>\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.js: The Documentary [OFFICIAL TRAILER]\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/gmp0istg5xo?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","protected":false},"excerpt":{"rendered":"<p>W tym tygodniu w sieci wyl\u0105dowa\u0142y wyniki tegorocznej ankiety State of CSS! Z tej okazji zrobimy sobie szybki przegl\u0105d statystyk, kt\u00f3re szczeg\u00f3lnie nas zaskoczy\u0142y.<\/p>\n","protected":false},"author":12,"featured_media":13005,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[275,389,393],"class_list":["post-13011","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl","tag-css-pl","tag-react-pl","tag-storybook-pl"],"acf":{"estimated_reading_time":"5","feature_image_visible":false,"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-1.png","feature_image_blog":{"ID":13007,"id":13007,"title":"pexels-lukas-669612","filename":"pexels-lukas-669612.jpg","filesize":187942,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-lukas-669612.jpg","link":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/pexels-lukas-669612-2\/","alt":"","author":"12","description":"","caption":"","name":"pexels-lukas-669612-2","status":"inherit","uploaded_to":13011,"date":"2022-12-09 12:59:46","modified":"2022-12-09 13:05:42","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/vived.io\/wp-includes\/images\/media\/default.png","width":1280,"height":848,"sizes":{"thumbnail":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-lukas-669612-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-lukas-669612-300x199.jpg","medium-width":300,"medium-height":199,"medium_large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-lukas-669612-768x509.jpg","medium_large-width":768,"medium_large-height":509,"large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-lukas-669612-1024x678.jpg","large-width":1024,"large-height":678,"1536x1536":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-lukas-669612.jpg","1536x1536-width":1280,"1536x1536-height":848,"2048x2048":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-lukas-669612.jpg","2048x2048-width":1280,"2048x2048-height":848,"gform-image-choice-sm":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-lukas-669612.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":199,"gform-image-choice-md":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-lukas-669612.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":265,"gform-image-choice-lg":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/pexels-lukas-669612.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":398}}},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>State of CSS 2022 is here! | Frontend Weekly vol. 106 - 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\/state-of-css-2022-is-here-frontend-weekly-vol-106\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"State of CSS 2022 is here! | Frontend Weekly vol. 106 - Vived\" \/>\n<meta property=\"og:description\" content=\"W tym tygodniu w sieci wyl\u0105dowa\u0142y wyniki tegorocznej ankiety State of CSS! Z tej okazji zrobimy sobie szybki przegl\u0105d statystyk, kt\u00f3re szczeg\u00f3lnie nas zaskoczy\u0142y.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-09T13:04:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-09T13:35:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"State of CSS 2022 is here! | Frontend Weekly vol. 106\",\"datePublished\":\"2022-12-09T13:04:02+00:00\",\"dateModified\":\"2022-12-09T13:35:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/\"},\"wordCount\":1284,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-1.png\",\"keywords\":[\"CSS\",\"react\",\"Storybook\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/\",\"url\":\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/\",\"name\":\"State of CSS 2022 is here! | Frontend Weekly vol. 106 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-1.png\",\"datePublished\":\"2022-12-09T13:04:02+00:00\",\"dateModified\":\"2022-12-09T13:35:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-1.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-1.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"State of CSS 2022 is here! | Frontend Weekly vol. 106\"}]},{\"@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":"State of CSS 2022 is here! | Frontend Weekly vol. 106 - 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\/state-of-css-2022-is-here-frontend-weekly-vol-106\/","og_locale":"pl_PL","og_type":"article","og_title":"State of CSS 2022 is here! | Frontend Weekly vol. 106 - Vived","og_description":"W tym tygodniu w sieci wyl\u0105dowa\u0142y wyniki tegorocznej ankiety State of CSS! Z tej okazji zrobimy sobie szybki przegl\u0105d statystyk, kt\u00f3re szczeg\u00f3lnie nas zaskoczy\u0142y.","og_url":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/","og_site_name":"Vived","article_published_time":"2022-12-09T13:04:02+00:00","article_modified_time":"2022-12-09T13:35:54+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-1.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\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"State of CSS 2022 is here! | Frontend Weekly vol. 106","datePublished":"2022-12-09T13:04:02+00:00","dateModified":"2022-12-09T13:35:54+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/"},"wordCount":1284,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-1.png","keywords":["CSS","react","Storybook"],"articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/","url":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/","name":"State of CSS 2022 is here! | Frontend Weekly vol. 106 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-1.png","datePublished":"2022-12-09T13:04:02+00:00","dateModified":"2022-12-09T13:35:54+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-1.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/Frontend-Weekly-1200x628_V2-1.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/state-of-css-2022-is-here-frontend-weekly-vol-106\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"State of CSS 2022 is here! | Frontend Weekly vol. 106"}]},{"@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. State of CSS 2022<\/h2>\n","innerContent":["\n<h2>1. State of CSS 2022<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Mamy to! Wreszcie nasta\u0142 ten czas w roku, kiedy nasze Vivedowe przegl\u0105dy zalej\u0105 statystyki i podsumowania. W tym roku gor\u0105cy sezon otwiera State of CSS 2022!<\/p>\n","innerContent":["\n<p>Mamy to! Wreszcie nasta\u0142 ten czas w roku, kiedy nasze Vivedowe przegl\u0105dy zalej\u0105 statystyki i podsumowania. W tym roku gor\u0105cy sezon otwiera State of CSS 2022!<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13017,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-19.gif\" alt=\"\" class=\"wp-image-13017\"\/><figcaption>Tak b\u0119d\u0105 wygl\u0105da\u0107 nasze weekly, przez nast\u0119pne miesi\u0105ce - przygotujcie si\u0119!<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-19.gif\" alt=\"\" class=\"wp-image-13017\"\/><figcaption>Tak b\u0119d\u0105 wygl\u0105da\u0107 nasze weekly, przez nast\u0119pne miesi\u0105ce - przygotujcie si\u0119!<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli szukacie w internecie podsumowania nowo\u015bci z CSS z kilku ostatnich lat, to nie znajdziecie lepszego \u017ar\u00f3d\u0142a ni\u017c State of CSS. Wi\u0119kszo\u015bci pyta\u0144 towarzysz\u0105 linki do \u201cCan I Use\u201d i dokumentacji MDN. Na podstawie rozk\u0142adu odpowiedzi \u0142atwo te\u017c wyczu\u0107, kt\u00f3rymi funkcjonalno\u015bciami nale\u017cy ju\u017c si\u0119 zainteresowa\u0107, \u017ceby nie pozosta\u0107 w tyle za rynkowymi standardami. Poni\u017cej podziel\u0119 si\u0119 z Wami kilkoma moimi spostrze\u017ceniami po przeczytaniu wynik\u00f3w ankiety, ale nie traktujcie tego jako dog\u0142\u0119bnego podsumowania i odkryjcie ankiet\u0119 na w\u0142asn\u0105 r\u0119k\u0119.<\/p>\n","innerContent":["\n<p>Je\u015bli szukacie w internecie podsumowania nowo\u015bci z CSS z kilku ostatnich lat, to nie znajdziecie lepszego \u017ar\u00f3d\u0142a ni\u017c State of CSS. Wi\u0119kszo\u015bci pyta\u0144 towarzysz\u0105 linki do \u201cCan I Use\u201d i dokumentacji MDN. Na podstawie rozk\u0142adu odpowiedzi \u0142atwo te\u017c wyczu\u0107, kt\u00f3rymi funkcjonalno\u015bciami nale\u017cy ju\u017c si\u0119 zainteresowa\u0107, \u017ceby nie pozosta\u0107 w tyle za rynkowymi standardami. Poni\u017cej podziel\u0119 si\u0119 z Wami kilkoma moimi spostrze\u017ceniami po przeczytaniu wynik\u00f3w ankiety, ale nie traktujcie tego jako dog\u0142\u0119bnego podsumowania i odkryjcie ankiet\u0119 na w\u0142asn\u0105 r\u0119k\u0119.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Bootstrap to CSSowy jQuery&nbsp;<\/h3>\n","innerContent":["\n<h3>Bootstrap to CSSowy jQuery&nbsp;<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Bootstrap od samego pocz\u0105tku ankiety State of CSS jest najcz\u0119\u015bciej u\u017cywanym frameworkiem CSS. W tym roku przewaga nad drugim Tailwindem wynios\u0142a ponad 30 punkt\u00f3w procentowych. Nigdy nie by\u0142 to natomiast najbardziej lubiany framework w\u015br\u00f3d deweloper\u00f3w, a z roku na rok jego liczby lec\u0105 na \u0142eb na szyj\u0119. Czy tylko ja dostrzegam tutaj mocn\u0105 analogi\u0119 do sytuacji jQuery w \u015brodowisku JS?<\/p>\n","innerContent":["\n<p>Bootstrap od samego pocz\u0105tku ankiety State of CSS jest najcz\u0119\u015bciej u\u017cywanym frameworkiem CSS. W tym roku przewaga nad drugim Tailwindem wynios\u0142a ponad 30 punkt\u00f3w procentowych. Nigdy nie by\u0142 to natomiast najbardziej lubiany framework w\u015br\u00f3d deweloper\u00f3w, a z roku na rok jego liczby lec\u0105 na \u0142eb na szyj\u0119. Czy tylko ja dostrzegam tutaj mocn\u0105 analogi\u0119 do sytuacji jQuery w \u015brodowisku JS?<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13019,"width":480,"height":400,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-20.gif\" alt=\"\" class=\"wp-image-13019\" width=\"480\" height=\"400\"\/><figcaption>Kiedy do\u0142\u0105czas do projektu i widzisz zale\u017cno\u015b\u0107 na Bootstrapa<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-20.gif\" alt=\"\" class=\"wp-image-13019\" width=\"480\" height=\"400\"\/><figcaption>Kiedy do\u0142\u0105czas do projektu i widzisz zale\u017cno\u015b\u0107 na Bootstrapa<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Utility-first first for the win<\/h3>\n","innerContent":["\n<h3>Utility-first first for the win<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W kategorii satysfakcji z framework\u00f3w CSS dwa pierwsze miejsca zaj\u0119\u0142y Tailwind i PureCSS. Oba te rozwi\u0105zania to biblioteki utility-first, a przewaga nad trzecim Ant Design by\u0142a spora i wynios\u0142a ponad 20 punkt\u00f3w procentowych. Wszystkie znaki na niebie wskazuj\u0105, \u017ce deweloperzy pokochali inline styles na sterydach (bo tak pieszczotliwie niekt\u00f3rzy nazywaj\u0105 podej\u015bcie utility-first), a stylowanie komponent\u00f3w przekazali w r\u0119ce bibliotek (takich jak Material UI czy Chakra) zamiast framework\u00f3w CSS (takich jak Bootstrap czy Ant Design).<\/p>\n","innerContent":["\n<p>W kategorii satysfakcji z framework\u00f3w CSS dwa pierwsze miejsca zaj\u0119\u0142y Tailwind i PureCSS. Oba te rozwi\u0105zania to biblioteki utility-first, a przewaga nad trzecim Ant Design by\u0142a spora i wynios\u0142a ponad 20 punkt\u00f3w procentowych. Wszystkie znaki na niebie wskazuj\u0105, \u017ce deweloperzy pokochali inline styles na sterydach (bo tak pieszczotliwie niekt\u00f3rzy nazywaj\u0105 podej\u015bcie utility-first), a stylowanie komponent\u00f3w przekazali w r\u0119ce bibliotek (takich jak Material UI czy Chakra) zamiast framework\u00f3w CSS (takich jak Bootstrap czy Ant Design).<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13022,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-59.jpeg\" alt=\"\" class=\"wp-image-13022\"\/><figcaption>To jest coraz mniej popularna opinia, ale od czasu do czasu temat wraca jak bumerang<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-59.jpeg\" alt=\"\" class=\"wp-image-13022\"\/><figcaption>To jest coraz mniej popularna opinia, ale od czasu do czasu temat wraca jak bumerang<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>CSS staje si\u0119 nudny?<\/h3>\n","innerContent":["\n<h3>CSS staje si\u0119 nudny?<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Je\u015bli spojrzycie na kategori\u0119 CSS Frameworks i CSS-in-JS, to na pewno od razu rzuci si\u0119 Wam w oczy brak nowych \u201cb\u0142yszcz\u0105cych\u201d rozwi\u0105za\u0144. Wygl\u0105da na to, \u017ce jako spo\u0142eczno\u015b\u0107 bardzo dojrzeli\u015bmy, wreszcie dopracowali\u015bmy nasze narz\u0119dzia i wydajemy si\u0119 zadowoleni z obecnego stanu rzeczy.<\/p>\n","innerContent":["\n<p>Je\u015bli spojrzycie na kategori\u0119 CSS Frameworks i CSS-in-JS, to na pewno od razu rzuci si\u0119 Wam w oczy brak nowych \u201cb\u0142yszcz\u0105cych\u201d rozwi\u0105za\u0144. Wygl\u0105da na to, \u017ce jako spo\u0142eczno\u015b\u0107 bardzo dojrzeli\u015bmy, wreszcie dopracowali\u015bmy nasze narz\u0119dzia i wydajemy si\u0119 zadowoleni z obecnego stanu rzeczy.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13024,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-21.gif\" alt=\"\" class=\"wp-image-13024\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-21.gif\" alt=\"\" class=\"wp-image-13024\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>W CSS wreszcie zaczyna si\u0119 dzia\u0107!&nbsp;<\/h3>\n","innerContent":["\n<h3>W CSS wreszcie zaczyna si\u0119 dzia\u0107!&nbsp;<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Interop, to inicjatywa w kt\u00f3rej udzia\u0142 bierze Chrome, Firefox i Safari, kt\u00f3ra na celu ma usprawni\u0107 Developer Experience Web Developer\u00f3w. W du\u017cej mierze dzi\u0119ki jej dzia\u0142alno\u015bci w tym roku do wszystkich trzech przegl\u0105darek trafi\u0142y Container Queries (tl;dr; Media Queries zrobione jak nale\u017cy) i selektor `:has()`. S\u0105 to dwie od dawna wyczekiwane funkcjonalno\u015bci, kt\u00f3re naprawd\u0119 rewolucjonizuj\u0105 CSSy. O ile o tej pierwszej s\u0142ysza\u0142o prawie 90% deweloper\u00f3w, to o tej drugiej nie s\u0142ysza\u0142 tylko co trzeci respondent. Je\u015bli i dla Was jest to pierwsza styczno\u015b\u0107 z tymi funkcjonalno\u015bciami, to najwy\u017cszy czas nadrobi\u0107 zaleg\u0142o\u015bci.<\/p>\n","innerContent":["\n<p>Interop, to inicjatywa w kt\u00f3rej udzia\u0142 bierze Chrome, Firefox i Safari, kt\u00f3ra na celu ma usprawni\u0107 Developer Experience Web Developer\u00f3w. W du\u017cej mierze dzi\u0119ki jej dzia\u0142alno\u015bci w tym roku do wszystkich trzech przegl\u0105darek trafi\u0142y Container Queries (tl;dr; Media Queries zrobione jak nale\u017cy) i selektor `:has()`. S\u0105 to dwie od dawna wyczekiwane funkcjonalno\u015bci, kt\u00f3re naprawd\u0119 rewolucjonizuj\u0105 CSSy. O ile o tej pierwszej s\u0142ysza\u0142o prawie 90% deweloper\u00f3w, to o tej drugiej nie s\u0142ysza\u0142 tylko co trzeci respondent. Je\u015bli i dla Was jest to pierwsza styczno\u015b\u0107 z tymi funkcjonalno\u015bciami, to najwy\u017cszy czas nadrobi\u0107 zaleg\u0142o\u015bci.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13028,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-23.gif\" alt=\"\" class=\"wp-image-13028\"\/><figcaption>Tak zareagowa\u0142em, kiedy dowiedzia\u0142em si\u0119, \u017ce Container Queries dzia\u0142aj\u0105 w Chrome, Safari i Firefox<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-23.gif\" alt=\"\" class=\"wp-image-13028\"\/><figcaption>Tak zareagowa\u0142em, kiedy dowiedzia\u0142em si\u0119, \u017ce Container Queries dzia\u0142aj\u0105 w Chrome, Safari i Firefox<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Deweloperzy testuj\u0105 aplikacje na tabletach i czytnikach ekranu<\/h3>\n","innerContent":["\n<h3>Deweloperzy testuj\u0105 aplikacje na tabletach i czytnikach ekranu<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>No dobra, troch\u0119 przekoloryzowa\u0142em\u2026 30% deweloper\u00f3w testuje swoje aplikacje na tabletach i 10% na czytnikach ekran\u00f3w. Na swoj\u0105 obron\u0119 powiem jednak, \u017ce jestem urodzonym pesymist\u0105 i spodziewa\u0142em si\u0119, \u017ce liczby te b\u0119d\u0105 co najmniej dwukrotnie mniejsze. Zw\u0142aszcza bior\u0105c pod uwag\u0119 jaki procent ruchu w internecie stanowi\u0105 tego typu urz\u0105dzenia.<\/p>\n","innerContent":["\n<p>No dobra, troch\u0119 przekoloryzowa\u0142em\u2026 30% deweloper\u00f3w testuje swoje aplikacje na tabletach i 10% na czytnikach ekran\u00f3w. Na swoj\u0105 obron\u0119 powiem jednak, \u017ce jestem urodzonym pesymist\u0105 i spodziewa\u0142em si\u0119, \u017ce liczby te b\u0119d\u0105 co najmniej dwukrotnie mniejsze. Zw\u0142aszcza bior\u0105c pod uwag\u0119 jaki procent ruchu w internecie stanowi\u0105 tego typu urz\u0105dzenia.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13030,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-24.gif\" alt=\"\" class=\"wp-image-13030\"\/><figcaption>Je\u015bli nie wierzycie w m\u00f3j pesymizm to zapytajcie moich wsp\u00f3\u0142pracownik\u00f3w ;)<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-24.gif\" alt=\"\" class=\"wp-image-13030\"\/><figcaption>Je\u015bli nie wierzycie w m\u00f3j pesymizm to zapytajcie moich wsp\u00f3\u0142pracownik\u00f3w ;)<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>Istniej\u0105 deweloperzy, kt\u00f3rzy do buduj\u0105 aplikacje w Brave i Safari<\/h3>\n","innerContent":["\n<h3>Istniej\u0105 deweloperzy, kt\u00f3rzy do buduj\u0105 aplikacje w Brave i Safari<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Przez d\u0142ugi czas my\u015bla\u0142em, \u017ce budowanie webowych aplikacji na Safari jest swego rodzaju memem. W ko\u0144cu narz\u0119dzia deweloperskie w Chrome s\u0105 obecnie nie do pobicia. Jak si\u0119 okazuje \u017cy\u0142em w ba\u0144ce. Co trzeci respondent ankiety deklaruje, \u017ce jako podstawowej przegl\u0105darki do developmentu aplikacji u\u017cywa Safari, co 5 deklaruje w ten spos\u00f3b Edge, a co 10 Brave. W pytaniu tym mo\u017cna by\u0142o jednak zaznaczy\u0107 wi\u0119cej ni\u017c jedn\u0105 odpowied\u017a i co\u015b czuj\u0119 w ko\u015bciach, \u017ce niekt\u00f3rzy mocno tutaj przy kolorowali.<\/p>\n","innerContent":["\n<p>Przez d\u0142ugi czas my\u015bla\u0142em, \u017ce budowanie webowych aplikacji na Safari jest swego rodzaju memem. W ko\u0144cu narz\u0119dzia deweloperskie w Chrome s\u0105 obecnie nie do pobicia. Jak si\u0119 okazuje \u017cy\u0142em w ba\u0144ce. Co trzeci respondent ankiety deklaruje, \u017ce jako podstawowej przegl\u0105darki do developmentu aplikacji u\u017cywa Safari, co 5 deklaruje w ten spos\u00f3b Edge, a co 10 Brave. W pytaniu tym mo\u017cna by\u0142o jednak zaznaczy\u0107 wi\u0119cej ni\u017c jedn\u0105 odpowied\u017a i co\u015b czuj\u0119 w ko\u015bciach, \u017ce niekt\u00f3rzy mocno tutaj przy kolorowali.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13026,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-22.gif\" alt=\"\" class=\"wp-image-13026\"\/><figcaption>Tak reaguje, kiedy widz\u0119 ludzi, kt\u00f3rzy u\u017cywaj\u0105 Safari zamiast Chrome do dewelopmentu aplikacji <\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/giphy-22.gif\" alt=\"\" class=\"wp-image-13026\"\/><figcaption>Tak reaguje, kiedy widz\u0119 ludzi, kt\u00f3rzy u\u017cywaj\u0105 Safari zamiast Chrome do dewelopmentu aplikacji <\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/2022.stateofcss.com\/en-US\/\">https:\/\/2022.stateofcss.com\/en-US\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/2022.stateofcss.com\/en-US\/\">https:\/\/2022.stateofcss.com\/en-US\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. Codux - pierwsze dedykowane IDE dla Reacta<\/h2>\n","innerContent":["\n<h2>2. Codux - pierwsze dedykowane IDE dla Reacta<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W zesz\u0142ym tygodniu jeden z wsp\u00f3\u0142za\u0142o\u017cycieli Wix zaprezentowa\u0142 \u015bwiatu nowy produkt w portfolio firmy - Codux. Reklamuje si\u0119 on jako pierwsze IDE dedykowane dla Reacta, ale w rzeczywisto\u015bci jest to kolejne narz\u0119dzie low-code. Jest ono o tyle ciekawe, \u017ce jako \u017ar\u00f3d\u0142o prawdy wykorzystuje Reactowy kod. Co jeszcze ciekawsze, Codux umo\u017cliwia modyfikowanie komponent\u00f3w zar\u00f3wno przez kod jak i interfejs u\u017cytkownika.\u00a0<\/p>\n","innerContent":["\n<p>W zesz\u0142ym tygodniu jeden z wsp\u00f3\u0142za\u0142o\u017cycieli Wix zaprezentowa\u0142 \u015bwiatu nowy produkt w portfolio firmy - Codux. Reklamuje si\u0119 on jako pierwsze IDE dedykowane dla Reacta, ale w rzeczywisto\u015bci jest to kolejne narz\u0119dzie low-code. Jest ono o tyle ciekawe, \u017ce jako \u017ar\u00f3d\u0142o prawdy wykorzystuje Reactowy kod. Co jeszcze ciekawsze, Codux umo\u017cliwia modyfikowanie komponent\u00f3w zar\u00f3wno przez kod jak i interfejs u\u017cytkownika.\u00a0<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13032,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/4eqcmrhljdchui78fism.jpeg\" alt=\"\" class=\"wp-image-13032\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/4eqcmrhljdchui78fism.jpeg\" alt=\"\" class=\"wp-image-13032\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na ten moment Codux jest w otwartej becia i nie wiadomo kiedy wydana zostanie jego finalna wersja. Spr\u00f3bowa\u0142em pobra\u0107 aplikacj\u0119 i przetestowa\u0107 j\u0105 na w\u0142asnej sk\u00f3rze. Wydaje si\u0119 odrobin\u0119 oci\u0119\u017ca\u0142a i toporna (to akurat mo\u017cna zrzuci\u0107 na barki wersji beta), a odnalezienie si\u0119 w interfejsie u\u017cytkownika zaj\u0119\u0142o mi chwil\u0119. Na pochwa\u0142\u0119 zas\u0142uguje natomiast wyb\u00f3r edytora kodu - je\u015bli oczy i palce mnie nie myl\u0105, to tw\u00f3rcy IDE zdecydowali si\u0119 skorzysta\u0107 z odpowiednio ostylowanego VSCode.<\/p>\n","innerContent":["\n<p>Na ten moment Codux jest w otwartej becia i nie wiadomo kiedy wydana zostanie jego finalna wersja. Spr\u00f3bowa\u0142em pobra\u0107 aplikacj\u0119 i przetestowa\u0107 j\u0105 na w\u0142asnej sk\u00f3rze. Wydaje si\u0119 odrobin\u0119 oci\u0119\u017ca\u0142a i toporna (to akurat mo\u017cna zrzuci\u0107 na barki wersji beta), a odnalezienie si\u0119 w interfejsie u\u017cytkownika zaj\u0119\u0142o mi chwil\u0119. Na pochwa\u0142\u0119 zas\u0142uguje natomiast wyb\u00f3r edytora kodu - je\u015bli oczy i palce mnie nie myl\u0105, to tw\u00f3rcy IDE zdecydowali si\u0119 skorzysta\u0107 z odpowiednio ostylowanego VSCode.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Pod sk\u00f3r\u0105 przeczuwam, \u017ce w rozwi\u0105zaniu jest spora dawka potencja\u0142u. Wyobra\u017acie sobie sytuacj\u0119, kiedy Designer lub Product Owner mo\u017ce samodzielnie przygotowa\u0107 pierwsz\u0105 wersj\u0119 komponentu. Potem programista przeprowadza drobny refactoring i wrzuca aplikacj\u0119 na produkcj\u0119. Kiedy designer chce wprowadzi\u0107 poprawki, to po prostu wyklikuje je na interfejsie u\u017cytkownika. Jako \u017ce to kod jest \u017ar\u00f3d\u0142em prawdy, to programi\u015bcie zostaje tylko oceni\u0107, czy Codux zbytnio nie namiesza\u0142 i czy uwzgl\u0119dni\u0142 wszystkie przypadki brzegowe. W mojej g\u0142owie jest to taka Figma, ale \u017ar\u00f3d\u0142em prawdy nie jest tajemniczy format danych, a Reactowy kod. Dzi\u0119ki takiemu podej\u015bciu zar\u00f3wno programi\u015bci jak i designerzy pracuj\u0105 na wsp\u00f3lnym materiale \u017ar\u00f3d\u0142owym.<\/p>\n","innerContent":["\n<p>Pod sk\u00f3r\u0105 przeczuwam, \u017ce w rozwi\u0105zaniu jest spora dawka potencja\u0142u. Wyobra\u017acie sobie sytuacj\u0119, kiedy Designer lub Product Owner mo\u017ce samodzielnie przygotowa\u0107 pierwsz\u0105 wersj\u0119 komponentu. Potem programista przeprowadza drobny refactoring i wrzuca aplikacj\u0119 na produkcj\u0119. Kiedy designer chce wprowadzi\u0107 poprawki, to po prostu wyklikuje je na interfejsie u\u017cytkownika. Jako \u017ce to kod jest \u017ar\u00f3d\u0142em prawdy, to programi\u015bcie zostaje tylko oceni\u0107, czy Codux zbytnio nie namiesza\u0142 i czy uwzgl\u0119dni\u0142 wszystkie przypadki brzegowe. W mojej g\u0142owie jest to taka Figma, ale \u017ar\u00f3d\u0142em prawdy nie jest tajemniczy format danych, a Reactowy kod. Dzi\u0119ki takiemu podej\u015bciu zar\u00f3wno programi\u015bci jak i designerzy pracuj\u0105 na wsp\u00f3lnym materiale \u017ar\u00f3d\u0142owym.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13034,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/73q8i0.jpeg\" alt=\"\" class=\"wp-image-13034\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/73q8i0.jpeg\" alt=\"\" class=\"wp-image-13034\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Jak to zwykle bywa, w ca\u0142ej tej beczce miodu jest te\u017c \u0142y\u017cka dziegciu. Po pierwsze, wykorzystanie jako \u017ar\u00f3d\u0142a prawdy Reactowego kodu sprawa, \u017ce designerzy w d\u0142u\u017cszej perspektywie zmuszeni b\u0119d\u0105 zrozumie\u0107 podstawy HTML\u2019a, CSS\u2019a i samego Reacta. Po drugie Codux generuje kod w bardzo konkretny i mocno zopiniowany spos\u00f3b. Je\u015bli nie przypadnie on Wam do gustu, albo b\u0119dziecie chcieli skorzysta\u0107 z innego zestawu bibliotek, to utoni\u0119cie w morzu refactoringu. W takiej sytuacji wszystkim na zdrowie wyjdzie designowanie w jednym narz\u0119dziu i programowanie w drugim (np. Figma + Storybook).&nbsp;<\/p>\n","innerContent":["\n<p>Jak to zwykle bywa, w ca\u0142ej tej beczce miodu jest te\u017c \u0142y\u017cka dziegciu. Po pierwsze, wykorzystanie jako \u017ar\u00f3d\u0142a prawdy Reactowego kodu sprawa, \u017ce designerzy w d\u0142u\u017cszej perspektywie zmuszeni b\u0119d\u0105 zrozumie\u0107 podstawy HTML\u2019a, CSS\u2019a i samego Reacta. Po drugie Codux generuje kod w bardzo konkretny i mocno zopiniowany spos\u00f3b. Je\u015bli nie przypadnie on Wam do gustu, albo b\u0119dziecie chcieli skorzysta\u0107 z innego zestawu bibliotek, to utoni\u0119cie w morzu refactoringu. W takiej sytuacji wszystkim na zdrowie wyjdzie designowanie w jednym narz\u0119dziu i programowanie w drugim (np. Figma + Storybook).&nbsp;<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Podsumowuj\u0105c, w Codux drzemie ca\u0142kiem spory potencja\u0142, ale przed tw\u00f3rcami jeszcze bardzo du\u017co pracy. Wydaje mi si\u0119 te\u017c, \u017ce g\u0142\u00f3wnym beneficjentem IDE nie b\u0119d\u0105 programi\u015bci, a w\u0142a\u015bnie osoby nie techniczne jak Designerzy czy Product Ownerzy.&nbsp;<\/p>\n","innerContent":["\n<p>Podsumowuj\u0105c, w Codux drzemie ca\u0142kiem spory potencja\u0142, ale przed tw\u00f3rcami jeszcze bardzo du\u017co pracy. Wydaje mi si\u0119 te\u017c, \u017ce g\u0142\u00f3wnym beneficjentem IDE nie b\u0119d\u0105 programi\u015bci, a w\u0142a\u015bnie osoby nie techniczne jak Designerzy czy Product Ownerzy.&nbsp;<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/dev.to\/codux\/introducing-codux-15j5\">https:\/\/dev.to\/codux\/introducing-codux-15j5<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/dev.to\/codux\/introducing-codux-15j5\">https:\/\/dev.to\/codux\/introducing-codux-15j5<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>3. Storybook szykuje wsparcie dla NextJS, Nuxt, SvelteKit i Remix<\/h2>\n","innerContent":["\n<h2>3. Storybook szykuje wsparcie dla NextJS, Nuxt, SvelteKit i Remix<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W ostatnich latach popularno\u015b\u0107 Storybooka nieustannie wzrasta. Programi\u015bci wykorzystuj\u0105 go nie tylko do publikowania w sieci swoich bibliotek komponent\u00f3w, ale r\u00f3wnie\u017c jako lekkie, dobrze wyizolowane \u015brodowisko deweloperskie. Wszystkie fan\u00f3w Storybooka na pewno ucieszy fakt, \u017ce jego tw\u00f3rcy przebudowali znaczn\u0105 jego cz\u0119\u015b\u0107, tak aby u\u0142atwi\u0107 integracj\u0119 z kolejnymi frameworkami. W wersji 7.0, kt\u00f3ra premier\u0119 ma mie\u0107 jeszcze przed ko\u0144cem roku, dodane zostanie wsparcie dla Next.js. Nast\u0119pnie tw\u00f3rcy zabior\u0105 si\u0119 z Nuxt, SvelteKit i Remixa.<\/p>\n","innerContent":["\n<p>W ostatnich latach popularno\u015b\u0107 Storybooka nieustannie wzrasta. Programi\u015bci wykorzystuj\u0105 go nie tylko do publikowania w sieci swoich bibliotek komponent\u00f3w, ale r\u00f3wnie\u017c jako lekkie, dobrze wyizolowane \u015brodowisko deweloperskie. Wszystkie fan\u00f3w Storybooka na pewno ucieszy fakt, \u017ce jego tw\u00f3rcy przebudowali znaczn\u0105 jego cz\u0119\u015b\u0107, tak aby u\u0142atwi\u0107 integracj\u0119 z kolejnymi frameworkami. W wersji 7.0, kt\u00f3ra premier\u0119 ma mie\u0107 jeszcze przed ko\u0144cem roku, dodane zostanie wsparcie dla Next.js. Nast\u0119pnie tw\u00f3rcy zabior\u0105 si\u0119 z Nuxt, SvelteKit i Remixa.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":13036,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-61.jpeg\" alt=\"\" class=\"wp-image-13036\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/12\/download-61.jpeg\" alt=\"\" class=\"wp-image-13036\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/storybook.js.org\/blog\/framework-api\/\">https:\/\/storybook.js.org\/blog\/framework-api\/<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/storybook.js.org\/blog\/framework-api\/\">https:\/\/storybook.js.org\/blog\/framework-api\/<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>4. Honeypot pracuje nad filmem dokumentalnym o React<\/h2>\n","innerContent":["\n<h2>4. Honeypot pracuje nad filmem dokumentalnym o React<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/embed","attrs":{"url":"https:\/\/www.youtube.com\/watch?v=gmp0istg5xo","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=gmp0istg5xo\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=gmp0istg5xo\n<\/div><\/figure>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/13011","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=13011"}],"version-history":[{"count":4,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/13011\/revisions"}],"predecessor-version":[{"id":13038,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/13011\/revisions\/13038"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/13005"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=13011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=13011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=13011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}