{"id":16381,"date":"2023-07-12T16:55:48","date_gmt":"2023-07-12T14:55:48","guid":{"rendered":"https:\/\/vived.io\/?p=16381"},"modified":"2023-07-12T17:01:09","modified_gmt":"2023-07-12T15:01:09","slug":"frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/","title":{"rendered":"Frontend Monthly #2 – Panda CSS i Angular z wsparciem dla if-else"},"content":{"rendered":"\n

Panda CSS – Universal, Type-Safe, CSS-in-JS<\/h2>\n\n\n\n

Sporo wody w Wi\u015ble up\u0142yn\u0119\u0142o od kiedy jaka\u015b biblioteka CSS-in-JS narobi\u0142a tyle szumu co Panda CSS. Nowo\u015b\u0107 spod r\u0105k tw\u00f3rc\u00f3w Chakra UI (jednej z najpopularniejszych bibliotek komponent\u00f3w dla Reacta) \u0142\u0105czy w sobie to co najlepsze w rozwi\u0105zaniach takich jak Tailwind CSS, Stitches czy Emotion. Zanim przejdziemy jednak do om\u00f3wienia konkret\u00f3w, zastan\u00f3wmy si\u0119 chwil\u0119 po co nam tak naprawd\u0119 kolejna biblioteka CSS-in-JS?<\/p>\n\n\n

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

Chakra UI do stylowania wykorzystuje popularn\u0105 bibliotek\u0119 Emotion. Jej zastosowanie wi\u0105\u017ce si\u0119 jednak z dwoma istotnymi konsekwencjami. Po pierwsze, biblioteka ta \u017ceby w og\u00f3le zacz\u0105\u0107 dzia\u0142a\u0107 potrzebuje wczyta\u0107 po stronie klienta sporo kodu. Po drugie, biblioteki tej nie da si\u0119 u\u017cy\u0107 w po\u0142\u0105czeniu z React Server Components – naj\u015bwie\u017cszym dzieckiem zespo\u0142u Reacta, o kt\u00f3rym wszyscy (\u0142\u0105cznie z nami) tr\u0105bi\u0105 na prawo i lewo. Te dwa czynniki z czasem zacz\u0119\u0142y coraz bardziej uwiera\u0107 zespo\u0142owi odpowiedzialnemu za rozw\u00f3j Chakra UI i dlatego zdecydowali si\u0119 oni stworzy\u0107 w\u0142asn\u0105 bibliotek\u0119 CSS-in-JS. <\/p>\n\n\n

\n
\"\"
Co ciekawe, z identycznym problemem mierzy si\u0119 te\u017c MUI (dawniej Material UI) – czy jej tw\u00f3rcy zdecyduj\u0105 si\u0119 na migracje do Panda CSS? Czas poka\u017ce, ale na pewno damy Wam o tym zna\u0107 w naszym raporcie \ud83d\ude09<\/figcaption><\/figure><\/div>\n\n\n

Na pierwszy rzut oka Panda CSS nie r\u00f3\u017cni si\u0119 zbytnio od Emotion. Diabe\u0142 tkwi jednak w szczeg\u00f3\u0142ach. Emotion generowa\u0142 unikalne nazwy klas dla ka\u017cdego wywo\u0142ania metody css()<\/code>. Panda CSS na etapie budowania aplikacji rozbija po kluczach obiekt przekazany do metody css()<\/code> i generuje klasy mocno przypominaj\u0105ce te znane z Tailwinda. Dzi\u0119ki temu, \u017ce nazwy klas generowane s\u0105 na etapie budowania aplikacji, Panda CSS nie potrzebuje dodatkowego kodu JavaScript po stronie klienta i mo\u017ce agresywnie zoptymalizowa\u0107 ilo\u015b\u0107 wysy\u0142anych CSS-\u00f3w.<\/p>\n\n\n\n

import { css } from '..\/styled-system\/css'\n\nfunction App() {\n  return (\n    \/\/\ud83d\udc47 Example usage of Panda CSS\n    <div className={css({\n      backgroundColor: 'gainsboro',\n      borderRadius: '9999px',\n      fontSize: '13px',\n      padding: '10px 15px'\n    })}>\n      <p>Hello World<\/p>\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
\/* Below file represents CSS output sent to the client *\/\n\n.bg_gainsboro {\n  background-color: gainsboro;\n}\n \n.rounded_9999px {\n  border-radius: 9999px;\n}\n\n.fs_13px {\n  font-size: 13px;\n}\n \n.p_10px_15px {\n  padding: 10px 15px;\n}<\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Panda CSS to nie tylko zero runtime, ale te\u017c paczka ciekawych usprawnie\u0144. Zacznijmy od Patterns, czyli paczki „przydasi\u00f3w” dzi\u0119ki kt\u00f3rym ju\u017c nigdy nie b\u0119dziecie musieli zastanawia\u0107 si\u0119 jak wy\u015brodkowa\u0107 div’a czy jak dok\u0142adnie wygl\u0105da sk\u0142adnia flex’a.<\/p>\n\n\n\n
import { center } from '..\/styled-system\/patterns'\n \nfunction App() {\n  return (\n    <div className={center({ bg: 'red.200' })}>\n      <Icon \/>\n    <\/div>\n  )\n}<\/code><\/pre>\n\n\n\n
import { flex } from '..\/styled-system\/patterns'\n \nfunction App() {\n  return (\n    <div className={flex({ direction: 'row', align: 'center' })}>\n      <div>First<\/div>\n      <div>Second<\/div>\n      <div>Third<\/div>\n    <\/div>\n  )\n}<\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Kolejna nowo\u015b\u0107, to „Recipies”, kt\u00f3re mocno inspirowane s\u0105 bibliotek\u0105 Class Variance Authority<\/a>. Dzi\u0119ki nim, mo\u017cemy definiowa\u0107 wiele r\u00f3\u017cnych wariant\u00f3w komponent\u00f3w, a nast\u0119pnie komponowa\u0107 je ze sob\u0105 zachowuj\u0105c pe\u0142ne bezpiecze\u0144stwo typ\u00f3w. Sk\u0142adnia na pierwszy rzut oka wydaje si\u0119 troch\u0119 przekomplikowana, ale ustandaryzowany spos\u00f3b na tworzenie wariant\u00f3w, kt\u00f3re s\u0105 czytelne dla naszych klient\u00f3w wydaje si\u0119 tego warta.<\/p>\n\n\n\n
import { cva } from '..\/styled-system\/css'\n \nconst button = cva({\n  base: {\n    display: 'flex'\n  },\n  variants: {\n    visual: {\n      solid: { bg: 'red.200', color: 'white' },\n      outline: { borderWidth: '1px', borderColor: 'red.200' }\n    },\n    size: {\n      sm: { padding: '4', fontSize: '12px' },\n      lg: { padding: '8', fontSize: '24px' }\n    }\n  }\n})<\/code><\/pre>\n\n\n\n
import { button } from '.\/button'\n \nconst Button = () => {\n  return (\n    <button className={button({ visual: 'solid', size: 'lg' })}>\n      Click Me\n    <\/button>\n  )\n}<\/code><\/pre>\n\n\n\n
Ostatni\u0105 nowo\u015bci\u0105 wart\u0105 wspomnienia s\u0105 Design Tokens. Co wa\u017cne, jest to implementacja do\u015b\u0107 zaawansowana, gdy\u017c mog\u0105 one bez problemu odnosi\u0107 si\u0119 do siebie nawzajem.<\/p>\n\n\n\n
export default defineConfig({\n  theme: {\n    \/\/ \ud83d\udc47 Define your tokens here\n    tokens: {\n      colors: {\n        primary: { value: '#0FEE0F' },\n        secondary: { value: '#EE0F0F' }\n      },\n      fonts: {\n        body: { value: 'system-ui, sans-serif' }\n      }\n    }\n  }\n})<\/code><\/pre>\n\n\n\n
import { css } from '..\/styled-system\/css'\n \nfunction App() {\n  return (\n    <p\n      className={css({\n        color: 'primary', \/\/ \ud83d\udc48 So you can later use them like this\n        fontFamily: 'body'\n      })}\n    >\n      Hello World\n    <\/p>\n  )\n}<\/code><\/pre>\n\n\n\n
\u0179r\u00f3d\u0142a<\/h3>\n\n\n\n
Panda CSS – Docs<\/a><\/p>\n\n\n\n
Angular – Built-In Control Flow<\/h2>\n\n\n\n
W ostatnich miesi\u0105cach Angular rozwija si\u0119 szybciej ni\u017c kiedykolwiek. Niespe\u0142na kilka tygodniu temu \u015bwiat\u0142o dzienne ujrza\u0142 Angular 16, a wraz z nim nowy reaktywny prymityw w postaci Signals. Teraz stoj\u0105cy za frameworkiem zesp\u00f3\u0142 zaprezentowa\u0142 kolejne RFC, tym razem dotycz\u0105ce Control Flow. Je\u015bli wszystko p\u00f3jdzie z planem, wy\u015ble ono na emerytur\u0119 znane nam od dawna dyrektywy strukturalne. <\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Zaraz, zaraz? Co jest nie tak ze znanymi od dawna strukturalnymi dyrektywami? Je\u015bli nie wiadomo o co chodzi, to zapewne chodzi o zone.js<\/code>, a w\u0142a\u015bciwie jego usuni\u0119cie. Dla przypomnienia, zone.js<\/code> to ma\u0142a biblioteka b\u0119d\u0105ca jednym z kamieni w\u0119gielnych Angulara. W uproszczeniu jest ona odpowiedzialna za przechwytywanie asynchronicznych wydarze\u0144 w przegl\u0105darce i informowaniu o nich Angulara, kt\u00f3ry nast\u0119pnie uruchamia mechanizm wykrywania zmian. Obecnie zesp\u00f3\u0142 z Google pracuje w pocie czo\u0142a, aby umo\u017cliwi\u0107 deweloperom tworzenie aplikacji pozbawionych zone.js. Strukturalne dyrektywy s\u0105 tak mocno zwi\u0105zane z architektur\u0105 zone.js<\/code>, \u017ce zesp\u00f3\u0142 zdecydowa\u0142, \u017ce najlepiej b\u0119dzie zaimplementowa\u0107 co\u015b zupe\u0142nie nowego i przy okazji nadrobi\u0107 braki strukturalnych dyrektyw. <\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Nowa sk\u0142adnia mocno inspirowana jest Svelte i co ciekawe, jest ona w 100% zgodna ze standardem HTML. Warto zwr\u00f3ci\u0107 uwag\u0119 na to, \u017ce nowa sk\u0142adnia to nie tylko s\u0142odzik syntaktyczny, ale tak\u017ce realne usprawnienia dla deweloper\u00f3w. If statement staje si\u0119 wreszcie pe\u0142noprawnym If-else statement (i nikt nie wm\u00f3wi mi, \u017ce stare rozwi\u0105zanie oparte o template, by\u0142o czytelne), switch statement podobnie jak w TypeScript b\u0119dzie w stanie zaw\u0119\u017ca\u0107 typy, a for-loop wymaga\u0107 b\u0119dzie parametru track<\/code> dzi\u0119ki czemu ci\u0119\u017cko b\u0119dzie zaimplementowa\u0107 nie optymaln\u0105 p\u0119tl\u0119. <\/p>\n\n\n\n
Currently (If Statement)<\/h4>\n\n\n\n
<div *ngIf="cond.expr(); else elseBlock">\n  Main case was true!\n<\/div>\n<ng-template #elseBlock>\n  <div *ngIf="other.expr(); else elseElseBlock">\n    Extra case was true!\n  <\/div>\n  <ng-template #elseElseBlock>\n    <div>False case!<\/div>\n  <\/ng-template>\n<\/ng-template><\/code><\/pre>\n\n\n\n
RFC (If Statement)<\/h4>\n\n\n\n
{#if cond.expr}\n  Main case was true!\n{:else if other.expr}\n  Extra case was true!\n{:else}\n  False case!\n{\/if}<\/code><\/pre>\n\n\n\n
Currently (Switch Statement)<\/h4>\n\n\n\n
<ng-container [ngSwitch]="cond.kind()">\n   <ng-container *ngSwitchCase="x">X case<\/ng-container>\n   <ng-container *ngSwitchCase="y">Y case<\/ng-container>\n   <ng-container *ngSwitchCase="z">Z case<\/ng-container>\n   <ng-container *ngSwitchDefault>No case matched<\/ng-container>\n<\/ng-container><\/code><\/pre>\n\n\n\n
RFC (Switch Statement)<\/h4>\n\n\n\n
{#switch cond.kind}\n  {:case x}\n    X case\n  {:case y}\n    Y case\n  {:case z}\n    Z case\n  {:default}\n    No case matched\n{\/switch}<\/code><\/pre>\n\n\n\n
Currently (For Statement)<\/h4>\n\n\n\n
<ng-container *ngFor="let item of items; trackBy: trackByFn">\n  {{item}}\n<\/ng-container>\n<ng-container *ngIf="items.length === 0">\n  There were no items in the list.\n<\/ng-container><\/code><\/pre>\n\n\n\n
RFC (For Statement)<\/h4>\n\n\n\n
{#for item of items; track item.id}\n  {{ item }}\n{:empty}\n  There were no items in the list.\n{\/for}<\/code><\/pre>\n\n\n\n
Opr\u00f3cz alternatyw dla znanych nam ju\u017c strukturalnych dyrektyw, zesp\u00f3\u0142 Angulara przygotowa\u0142 r\u00f3wnie\u017c RFC dla zupe\u0142nie nowej funkcjonalno\u015bci – leniwego \u0142adowania fragment\u00f3w szablon\u00f3w. Nowa „dyrektywa” oferuje wszystko czego mo\u017cecie potrzebowa\u0107 przy lazy loadingu – zaawansowane strategie \u0142adowania, obs\u0142ug\u0119 stanu \u0142adowania i b\u0142\u0119du, czy definicj\u0119 minimalnego czasu wy\u015bwietlania poszczeg\u00f3lnych wersji, w celu unikni\u0119cie mrugania.<\/p>\n\n\n\n
{#defer on interaction, timer(5s)}\n  <calendar-cmp \/>\n{:placeholder minimum 500ms}\n  <img src="placeholder.png" \/>\n{:loading}\n  <div class="loading">Loading the calendar...<\/div>\n{:error}\n  <p> Failed to load the calendar <\/p>\n  <p><strong>Error:<\/strong> {{$error.message}}<\/p>\n{\/defer}<\/code><\/pre>\n\n\n\n
\u0179r\u00f3d\u0142a<\/h3>\n\n\n\n
RFC: Built-In Control Flow<\/a>
RFC: Deferred Loading<\/a><\/p>\n\n\n\n
TypeScript 5.1<\/h2>\n\n\n\n
Kilka ostatnich wersji TypeScript przynios\u0142o nam naprawd\u0119 ciekawych funkcjonalno\u015bci. W wersji 4.9 dostali\u015bmy nowe s\u0142owo kluczowe satisfies<\/code>. W wersji 5.0 ca\u0142y codebase zosta\u0142 przepisany z archaicznych namespaces do modu\u0142\u00f3w, co przynios\u0142o spore usprawnienia wydajno\u015bci. Niestety wersja 5.1 nie przynosi zbyt wielu ciekawych nowinek…<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Najwi\u0119ksz\u0105 nowo\u015bci\u0105 w TypeScript 5.1 jest lepsze wnioskowanie typ\u00f3w dla funkcji nie zwieraj\u0105cych return statement. W czystym JavaScript je\u015bli funkcja nie zawiera return statement to zwraca ona warto\u015b\u0107 undefined. W TypeScript, je\u015bli funkcja nie zawiera return statement to musi by\u0107 otypowana jako void<\/code>. Ta drobna r\u00f3\u017cnica w zachowaniu potrafi\u0142a czasami by\u0107 irytuj\u0105ca, ale na szcz\u0119\u015bcie TypeScript 5.1 w ca\u0142o\u015bci j\u0105 naprawia.<\/p>\n\n\n\n
\/\/ \u2705 fine - we inferred that 'f1' returns 'void'\nfunction f1() {\n    \/\/ no returns\n}\n\/\/ \u2705 fine - 'void' doesn't need a return statement\nfunction f2(): void {\n    \/\/ no returns\n}\n\/\/ \u2705 fine - 'any' doesn't need a return statement\nfunction f3(): any {\n    \/\/ no returns\n}\n\/\/ \u274c error in TypeScript 5.0 \n\/\/   |A function whose declared type is neither |\n\/\/   |'void' nor 'any' must return a value.     |\n\/\/ \u2705 fine in TypeScript 5.1\nfunction f4(): undefined {\n    \/\/ no returns\n}<\/code><\/pre>\n\n\n\n
Kolejna nowo\u015b\u0107 to ca\u0142kowite rozdzielenie typ\u00f3w dla setter\u00f3w i getter\u00f3w. Co prawda do tej pory mog\u0142y si\u0119 one r\u00f3\u017cni\u0107, ale istnia\u0142 mi\u0119dzy nimi bardzo specyficzny kontrakt. Od teraz kontrakt ten przestaje mie\u0107 znaczenia i mog\u0105 one przyjmowa\u0107 zupe\u0142nie niezwi\u0105zane ze sob\u0105 typy.<\/p>\n\n\n\n
\/\/ \u274c error in TypeScript 5.0 \n\/\/ \u2705 fine in TypeScript 5.1\ninterface CSSStyleRule {\n    \/\/ ...\n    \/** Always reads as a `CSSStyleDeclaration` *\/\n    get style(): CSSStyleDeclaration;\n    \/** Can only write a `string` here. *\/\n    set style(newValue: string);\n    \/\/ ...\n}<\/code><\/pre>\n\n\n\n
\u0179r\u00f3d\u0142a<\/h3>\n\n\n\n
Announcing TypeScript 5.1<\/a><\/p>\n\n\n\n
Microsoft Clarity<\/h2>\n\n\n\n
W minionym miesi\u0105cu Microsoft podzieli\u0142 si\u0119 ze \u015bwiatem swoim rozwi\u0105zaniem do tworzenia map cieplnych stron i nagrywania sesji u\u017cytkownik\u00f3w. Co wa\u017cne, jest ono darmowe i korporacja z Redmond zapowiada, \u017ce takim pozostanie. Ponadto Microsoft sam intensywnie korzysta ju\u017c z tego narz\u0119dzia dla wewn\u0119trznych projekt\u00f3w. Nast\u0119pnym razem kiedy przyjdzie Wam wybiera\u0107 narz\u0119dzie do analityki waszej aplikacji, warto rozwa\u017cy\u0107 Microsoft Clarity jako darmow\u0105 ograniczon\u0105 w funkcjonalno\u015bci wersj\u0119 Hotjar’a.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
\u0179r\u00f3d\u0142a<\/h3>\n\n\n\n
See what your users want\u2014with Clarity<\/a><\/p>\n\n\n\n
State of CSS 2023<\/h2>\n\n\n\n
Kilka tygodni temu do sieci trafi\u0142a kolejna edycja ankiety State of CSS. Powtarzam to co roku i powt\u00f3rz\u0119 to te\u017c teraz: Je\u015bli szukacie czego\u015b co pozwoli Wam szybko i efektywnie nadrobi\u0107 nowo\u015bci ze \u015bwiata CSS-\u00f3w z kilku ostatnich lat, to State of CSS jest najlepszym miejscem \u017ceby to zrobi\u0107. Podsumowuj\u0105c, nie tylko macie okazj\u0119 przyczyni\u0107 si\u0119 dla dobra spo\u0142eczno\u015bci, ale r\u00f3wnie\u017c efektywnie i szybko nauczy\u0107 si\u0119 czego\u015b nowego.<\/p>\n\n\n
\n
\"\"
No ju\u017c! Prosz\u0119 wype\u0142nia\u0107 ankiet\u0119!<\/figcaption><\/figure><\/div>\n\n\n
\u0179r\u00f3d\u0142a<\/h3>\n\n\n\n
State of CSS 2023<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Z nieba leje si\u0119 \u017car, co oznacza, \u017ce wkroczyli\u015bmy w sezon og\u00f3rkowy. Frontendowy \u015bwiat zdaje si\u0119 jednak ignorowa\u0107 ten fakt, bo w minionym miesi\u0105cu dostali\u015bmy now\u0105 bibliotek\u0119 CSS-in-JS od tw\u00f3rc\u00f3w Chakra UI, prawdziwe if-else statement dla Angulara czy alternatyw\u0119 dla Hotjar od Microsoftu.<\/p>\n","protected":false},"author":12,"featured_media":16431,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273,1],"tags":[],"class_list":["post-16381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl","category-no-category"],"acf":{"feature_image_visible":false,"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/Frontend-Weekly-1200x628_V2_pl.png","feature_image_blog":{"ID":16420,"id":16420,"title":"vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9","filename":"vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9.png","filesize":1416541,"url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9.png","link":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9\/","alt":"","author":"12","description":"","caption":"","name":"vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9","status":"inherit","uploaded_to":16381,"date":"2023-07-10 18:38:14","modified":"2023-07-10 18:38:14","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/vived.io\/wp-includes\/images\/media\/default.png","width":1344,"height":896,"sizes":{"thumbnail":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9-300x200.png","medium-width":300,"medium-height":200,"medium_large":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9-768x512.png","medium_large-width":768,"medium_large-height":512,"large":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9-1024x683.png","large-width":1024,"large-height":683,"1536x1536":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9.png","1536x1536-width":1344,"1536x1536-height":896,"2048x2048":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9.png","2048x2048-width":1344,"2048x2048-height":896,"gform-image-choice-sm":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9.png","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":200,"gform-image-choice-md":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9.png","gform-image-choice-md-width":400,"gform-image-choice-md-height":267,"gform-image-choice-lg":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/vivedio_a_panda_eating_bamboo_in_a_jungle_c7346bb1-32d3-4016-820b-8d635c5694d9.png","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":400}},"estimated_reading_time":"8"},"yoast_head":"\nFrontend Monthly #2 - Panda CSS i Angular z wsparciem dla if-else - 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-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Frontend Monthly #2 - Panda CSS i Angular z wsparciem dla if-else - Vived\" \/>\n<meta property=\"og:description\" content=\"Z nieba leje si\u0119 \u017car, co oznacza, \u017ce wkroczyli\u015bmy w sezon og\u00f3rkowy. Frontendowy \u015bwiat zdaje si\u0119 jednak ignorowa\u0107 ten fakt, bo w minionym miesi\u0105cu dostali\u015bmy now\u0105 bibliotek\u0119 CSS-in-JS od tw\u00f3rc\u00f3w Chakra UI, prawdziwe if-else statement dla Angulara czy alternatyw\u0119 dla Hotjar od Microsoftu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-12T14:55:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-12T15:01:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/Frontend-Weekly-1200x628_V2_pl.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\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Frontend Monthly #2 – Panda CSS i Angular z wsparciem dla if-else\",\"datePublished\":\"2023-07-12T14:55:48+00:00\",\"dateModified\":\"2023-07-12T15:01:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/\"},\"wordCount\":1194,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/Frontend-Weekly-1200x628_V2_pl.png\",\"articleSection\":[\"Frontend\",\"No category\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/\",\"url\":\"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/\",\"name\":\"Frontend Monthly #2 - Panda CSS i Angular z wsparciem dla if-else - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/Frontend-Weekly-1200x628_V2_pl.png\",\"datePublished\":\"2023-07-12T14:55:48+00:00\",\"dateModified\":\"2023-07-12T15:01:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/Frontend-Weekly-1200x628_V2_pl.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/Frontend-Weekly-1200x628_V2_pl.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend Monthly #2 – Panda CSS i Angular z wsparciem dla if-else\"}]},{\"@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 Monthly #2 - Panda CSS i Angular z wsparciem dla if-else - 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-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/","og_locale":"pl_PL","og_type":"article","og_title":"Frontend Monthly #2 - Panda CSS i Angular z wsparciem dla if-else - Vived","og_description":"Z nieba leje si\u0119 \u017car, co oznacza, \u017ce wkroczyli\u015bmy w sezon og\u00f3rkowy. Frontendowy \u015bwiat zdaje si\u0119 jednak ignorowa\u0107 ten fakt, bo w minionym miesi\u0105cu dostali\u015bmy now\u0105 bibliotek\u0119 CSS-in-JS od tw\u00f3rc\u00f3w Chakra UI, prawdziwe if-else statement dla Angulara czy alternatyw\u0119 dla Hotjar od Microsoftu.","og_url":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/","og_site_name":"Vived","article_published_time":"2023-07-12T14:55:48+00:00","article_modified_time":"2023-07-12T15:01:09+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/Frontend-Weekly-1200x628_V2_pl.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Frontend Monthly #2 – Panda CSS i Angular z wsparciem dla if-else","datePublished":"2023-07-12T14:55:48+00:00","dateModified":"2023-07-12T15:01:09+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/"},"wordCount":1194,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/Frontend-Weekly-1200x628_V2_pl.png","articleSection":["Frontend","No category"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/","url":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/","name":"Frontend Monthly #2 - Panda CSS i Angular z wsparciem dla if-else - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/Frontend-Weekly-1200x628_V2_pl.png","datePublished":"2023-07-12T14:55:48+00:00","dateModified":"2023-07-12T15:01:09+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/Frontend-Weekly-1200x628_V2_pl.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/Frontend-Weekly-1200x628_V2_pl.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/frontend-monthly-2-panda-css-i-angular-z-wsparciem-dla-if-else\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Frontend Monthly #2 – Panda CSS i Angular z wsparciem dla if-else"}]},{"@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 class=\"wp-block-heading\">Panda CSS - Universal, Type-Safe, CSS-in-JS<\/h2>\n","innerContent":["\n<h2 class=\"wp-block-heading\">Panda CSS - Universal, Type-Safe, CSS-in-JS<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Sporo wody w Wi\u015ble up\u0142yn\u0119\u0142o od kiedy jaka\u015b biblioteka CSS-in-JS narobi\u0142a tyle szumu co Panda CSS. Nowo\u015b\u0107 spod r\u0105k tw\u00f3rc\u00f3w Chakra UI (jednej z najpopularniejszych bibliotek komponent\u00f3w dla Reacta) \u0142\u0105czy w sobie to co najlepsze w rozwi\u0105zaniach takich jak Tailwind CSS, Stitches czy Emotion. Zanim przejdziemy jednak do om\u00f3wienia konkret\u00f3w, zastan\u00f3wmy si\u0119 chwil\u0119 po co nam tak naprawd\u0119 kolejna biblioteka CSS-in-JS?<\/p>\n","innerContent":["\n<p>Sporo wody w Wi\u015ble up\u0142yn\u0119\u0142o od kiedy jaka\u015b biblioteka CSS-in-JS narobi\u0142a tyle szumu co Panda CSS. Nowo\u015b\u0107 spod r\u0105k tw\u00f3rc\u00f3w Chakra UI (jednej z najpopularniejszych bibliotek komponent\u00f3w dla Reacta) \u0142\u0105czy w sobie to co najlepsze w rozwi\u0105zaniach takich jak Tailwind CSS, Stitches czy Emotion. Zanim przejdziemy jednak do om\u00f3wienia konkret\u00f3w, zastan\u00f3wmy si\u0119 chwil\u0119 po co nam tak naprawd\u0119 kolejna biblioteka CSS-in-JS?<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":16382,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/ezgif-2-f0f0a1199d.jpeg\" alt=\"\" class=\"wp-image-16382\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/ezgif-2-f0f0a1199d.jpeg\" alt=\"\" class=\"wp-image-16382\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Chakra UI do stylowania wykorzystuje popularn\u0105 bibliotek\u0119 Emotion. Jej zastosowanie wi\u0105\u017ce si\u0119 jednak z dwoma istotnymi konsekwencjami. Po pierwsze, biblioteka ta \u017ceby w og\u00f3le zacz\u0105\u0107 dzia\u0142a\u0107 potrzebuje wczyta\u0107 po stronie klienta sporo kodu. Po drugie, biblioteki tej nie da si\u0119 u\u017cy\u0107 w po\u0142\u0105czeniu z React Server Components - naj\u015bwie\u017cszym dzieckiem zespo\u0142u Reacta, o kt\u00f3rym wszyscy (\u0142\u0105cznie z nami) tr\u0105bi\u0105 na prawo i lewo. Te dwa czynniki z czasem zacz\u0119\u0142y coraz bardziej uwiera\u0107 zespo\u0142owi odpowiedzialnemu za rozw\u00f3j Chakra UI i dlatego zdecydowali si\u0119 oni stworzy\u0107 w\u0142asn\u0105 bibliotek\u0119 CSS-in-JS. <\/p>\n","innerContent":["\n<p>Chakra UI do stylowania wykorzystuje popularn\u0105 bibliotek\u0119 Emotion. Jej zastosowanie wi\u0105\u017ce si\u0119 jednak z dwoma istotnymi konsekwencjami. Po pierwsze, biblioteka ta \u017ceby w og\u00f3le zacz\u0105\u0107 dzia\u0142a\u0107 potrzebuje wczyta\u0107 po stronie klienta sporo kodu. Po drugie, biblioteki tej nie da si\u0119 u\u017cy\u0107 w po\u0142\u0105czeniu z React Server Components - naj\u015bwie\u017cszym dzieckiem zespo\u0142u Reacta, o kt\u00f3rym wszyscy (\u0142\u0105cznie z nami) tr\u0105bi\u0105 na prawo i lewo. Te dwa czynniki z czasem zacz\u0119\u0142y coraz bardziej uwiera\u0107 zespo\u0142owi odpowiedzialnemu za rozw\u00f3j Chakra UI i dlatego zdecydowali si\u0119 oni stworzy\u0107 w\u0142asn\u0105 bibliotek\u0119 CSS-in-JS. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":16384,"width":482,"height":482,"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\/2023\/07\/1zdZAaYJxkT3vFAMoeOpoGO5iU5SWwD7HgdLLLmpziIw.png\" alt=\"\" class=\"wp-image-16384\" width=\"482\" height=\"482\"\/><figcaption class=\"wp-element-caption\">Co ciekawe, z identycznym problemem mierzy si\u0119 te\u017c MUI (dawniej Material UI) - czy jej tw\u00f3rcy zdecyduj\u0105 si\u0119 na migracje do Panda CSS? Czas poka\u017ce, ale na pewno damy Wam o tym zna\u0107 w naszym raporcie \ud83d\ude09<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/1zdZAaYJxkT3vFAMoeOpoGO5iU5SWwD7HgdLLLmpziIw.png\" alt=\"\" class=\"wp-image-16384\" width=\"482\" height=\"482\"\/><figcaption class=\"wp-element-caption\">Co ciekawe, z identycznym problemem mierzy si\u0119 te\u017c MUI (dawniej Material UI) - czy jej tw\u00f3rcy zdecyduj\u0105 si\u0119 na migracje do Panda CSS? Czas poka\u017ce, ale na pewno damy Wam o tym zna\u0107 w naszym raporcie \ud83d\ude09<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na pierwszy rzut oka Panda CSS nie r\u00f3\u017cni si\u0119 zbytnio od Emotion. Diabe\u0142 tkwi jednak w szczeg\u00f3\u0142ach. Emotion generowa\u0142 unikalne nazwy klas dla ka\u017cdego wywo\u0142ania metody <code>css()<\/code>. Panda CSS na etapie budowania aplikacji rozbija po kluczach  obiekt przekazany do metody <code>css()<\/code> i generuje klasy mocno przypominaj\u0105ce te znane z Tailwinda.  Dzi\u0119ki temu, \u017ce nazwy klas generowane s\u0105 na etapie budowania aplikacji, Panda CSS nie potrzebuje dodatkowego kodu JavaScript po stronie klienta i mo\u017ce agresywnie zoptymalizowa\u0107 ilo\u015b\u0107 wysy\u0142anych CSS-\u00f3w.<\/p>\n","innerContent":["\n<p>Na pierwszy rzut oka Panda CSS nie r\u00f3\u017cni si\u0119 zbytnio od Emotion. Diabe\u0142 tkwi jednak w szczeg\u00f3\u0142ach. Emotion generowa\u0142 unikalne nazwy klas dla ka\u017cdego wywo\u0142ania metody <code>css()<\/code>. Panda CSS na etapie budowania aplikacji rozbija po kluczach  obiekt przekazany do metody <code>css()<\/code> i generuje klasy mocno przypominaj\u0105ce te znane z Tailwinda.  Dzi\u0119ki temu, \u017ce nazwy klas generowane s\u0105 na etapie budowania aplikacji, Panda CSS nie potrzebuje dodatkowego kodu JavaScript po stronie klienta i mo\u017ce agresywnie zoptymalizowa\u0107 ilo\u015b\u0107 wysy\u0142anych CSS-\u00f3w.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { css } from '..\/styled-system\/css'\n\nfunction App() {\n  return (\n    \/\/\ud83d\udc47 Example usage of Panda CSS\n    <div className={css({\n      backgroundColor: 'gainsboro',\n      borderRadius: '9999px',\n      fontSize: '13px',\n      padding: '10px 15px'\n    })}>\n      <p>Hello World<\/p>\n    <\/div>\n  );\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { css } from '..\/styled-system\/css'\n\nfunction App() {\n  return (\n    \/\/\ud83d\udc47 Example usage of Panda CSS\n    <div className={css({\n      backgroundColor: 'gainsboro',\n      borderRadius: '9999px',\n      fontSize: '13px',\n      padding: '10px 15px'\n    })}>\n      <p>Hello World<\/p>\n    <\/div>\n  );\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"css"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">\/* Below file represents CSS output sent to the client *\/\n\n.bg_gainsboro {\n  background-color: gainsboro;\n}\n \n.rounded_9999px {\n  border-radius: 9999px;\n}\n\n.fs_13px {\n  font-size: 13px;\n}\n \n.p_10px_15px {\n  padding: 10px 15px;\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">\/* Below file represents CSS output sent to the client *\/\n\n.bg_gainsboro {\n  background-color: gainsboro;\n}\n \n.rounded_9999px {\n  border-radius: 9999px;\n}\n\n.fs_13px {\n  font-size: 13px;\n}\n \n.p_10px_15px {\n  padding: 10px 15px;\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":16395,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/download.jpeg\" alt=\"\" class=\"wp-image-16395\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/download.jpeg\" alt=\"\" class=\"wp-image-16395\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Panda CSS to nie tylko zero runtime, ale te\u017c paczka ciekawych usprawnie\u0144. Zacznijmy od Patterns, czyli paczki \"przydasi\u00f3w\" dzi\u0119ki kt\u00f3rym ju\u017c nigdy nie b\u0119dziecie musieli zastanawia\u0107 si\u0119 jak wy\u015brodkowa\u0107 div'a czy jak dok\u0142adnie wygl\u0105da sk\u0142adnia flex'a.<\/p>\n","innerContent":["\n<p>Panda CSS to nie tylko zero runtime, ale te\u017c paczka ciekawych usprawnie\u0144. Zacznijmy od Patterns, czyli paczki \"przydasi\u00f3w\" dzi\u0119ki kt\u00f3rym ju\u017c nigdy nie b\u0119dziecie musieli zastanawia\u0107 si\u0119 jak wy\u015brodkowa\u0107 div'a czy jak dok\u0142adnie wygl\u0105da sk\u0142adnia flex'a.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { center } from '..\/styled-system\/patterns'\n \nfunction App() {\n  return (\n    <div className={center({ bg: 'red.200' })}>\n      <Icon \/>\n    <\/div>\n  )\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { center } from '..\/styled-system\/patterns'\n \nfunction App() {\n  return (\n    <div className={center({ bg: 'red.200' })}>\n      <Icon \/>\n    <\/div>\n  )\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { flex } from '..\/styled-system\/patterns'\n \nfunction App() {\n  return (\n    <div className={flex({ direction: 'row', align: 'center' })}>\n      <div>First<\/div>\n      <div>Second<\/div>\n      <div>Third<\/div>\n    <\/div>\n  )\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { flex } from '..\/styled-system\/patterns'\n \nfunction App() {\n  return (\n    <div className={flex({ direction: 'row', align: 'center' })}>\n      <div>First<\/div>\n      <div>Second<\/div>\n      <div>Third<\/div>\n    <\/div>\n  )\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":16393,"width":535,"height":315,"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\/2023\/07\/1_rf4QAy4yYPdfuLsZ7NrHZA.jpeg\" alt=\"\" class=\"wp-image-16393\" width=\"535\" height=\"315\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/1_rf4QAy4yYPdfuLsZ7NrHZA.jpeg\" alt=\"\" class=\"wp-image-16393\" width=\"535\" height=\"315\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kolejna nowo\u015b\u0107, to \"Recipies\", kt\u00f3re mocno inspirowane s\u0105 bibliotek\u0105 <a href=\"https:\/\/cva.style\/docs\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Class Variance Authority<\/a>. Dzi\u0119ki nim, mo\u017cemy definiowa\u0107 wiele r\u00f3\u017cnych wariant\u00f3w komponent\u00f3w, a nast\u0119pnie komponowa\u0107 je ze sob\u0105 zachowuj\u0105c pe\u0142ne bezpiecze\u0144stwo typ\u00f3w. Sk\u0142adnia na pierwszy rzut oka wydaje si\u0119 troch\u0119 przekomplikowana, ale ustandaryzowany spos\u00f3b na tworzenie wariant\u00f3w, kt\u00f3re s\u0105 czytelne dla naszych klient\u00f3w wydaje si\u0119 tego warta.<\/p>\n","innerContent":["\n<p>Kolejna nowo\u015b\u0107, to \"Recipies\", kt\u00f3re mocno inspirowane s\u0105 bibliotek\u0105 <a href=\"https:\/\/cva.style\/docs\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Class Variance Authority<\/a>. Dzi\u0119ki nim, mo\u017cemy definiowa\u0107 wiele r\u00f3\u017cnych wariant\u00f3w komponent\u00f3w, a nast\u0119pnie komponowa\u0107 je ze sob\u0105 zachowuj\u0105c pe\u0142ne bezpiecze\u0144stwo typ\u00f3w. Sk\u0142adnia na pierwszy rzut oka wydaje si\u0119 troch\u0119 przekomplikowana, ale ustandaryzowany spos\u00f3b na tworzenie wariant\u00f3w, kt\u00f3re s\u0105 czytelne dla naszych klient\u00f3w wydaje si\u0119 tego warta.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { cva } from '..\/styled-system\/css'\n \nconst button = cva({\n  base: {\n    display: 'flex'\n  },\n  variants: {\n    visual: {\n      solid: { bg: 'red.200', color: 'white' },\n      outline: { borderWidth: '1px', borderColor: 'red.200' }\n    },\n    size: {\n      sm: { padding: '4', fontSize: '12px' },\n      lg: { padding: '8', fontSize: '24px' }\n    }\n  }\n})<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { cva } from '..\/styled-system\/css'\n \nconst button = cva({\n  base: {\n    display: 'flex'\n  },\n  variants: {\n    visual: {\n      solid: { bg: 'red.200', color: 'white' },\n      outline: { borderWidth: '1px', borderColor: 'red.200' }\n    },\n    size: {\n      sm: { padding: '4', fontSize: '12px' },\n      lg: { padding: '8', fontSize: '24px' }\n    }\n  }\n})<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { button } from '.\/button'\n \nconst Button = () => {\n  return (\n    <button className={button({ visual: 'solid', size: 'lg' })}>\n      Click Me\n    <\/button>\n  )\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { button } from '.\/button'\n \nconst Button = () => {\n  return (\n    <button className={button({ visual: 'solid', size: 'lg' })}>\n      Click Me\n    <\/button>\n  )\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Ostatni\u0105 nowo\u015bci\u0105 wart\u0105 wspomnienia s\u0105 Design Tokens. Co wa\u017cne, jest to implementacja do\u015b\u0107 zaawansowana, gdy\u017c mog\u0105 one bez problemu odnosi\u0107 si\u0119 do siebie nawzajem.<\/p>\n","innerContent":["\n<p>Ostatni\u0105 nowo\u015bci\u0105 wart\u0105 wspomnienia s\u0105 Design Tokens. Co wa\u017cne, jest to implementacja do\u015b\u0107 zaawansowana, gdy\u017c mog\u0105 one bez problemu odnosi\u0107 si\u0119 do siebie nawzajem.<\/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\">export default defineConfig({\n  theme: {\n    \/\/ \ud83d\udc47 Define your tokens here\n    tokens: {\n      colors: {\n        primary: { value: '#0FEE0F' },\n        secondary: { value: '#EE0F0F' }\n      },\n      fonts: {\n        body: { value: 'system-ui, sans-serif' }\n      }\n    }\n  }\n})<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">export default defineConfig({\n  theme: {\n    \/\/ \ud83d\udc47 Define your tokens here\n    tokens: {\n      colors: {\n        primary: { value: '#0FEE0F' },\n        secondary: { value: '#EE0F0F' }\n      },\n      fonts: {\n        body: { value: 'system-ui, sans-serif' }\n      }\n    }\n  }\n})<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { css } from '..\/styled-system\/css'\n \nfunction App() {\n  return (\n    <p\n      className={css({\n        color: 'primary', \/\/ \ud83d\udc48 So you can later use them like this\n        fontFamily: 'body'\n      })}\n    >\n      Hello World\n    <\/p>\n  )\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">import { css } from '..\/styled-system\/css'\n \nfunction App() {\n  return (\n    <p\n      className={css({\n        color: 'primary', \/\/ \ud83d\udc48 So you can later use them like this\n        fontFamily: 'body'\n      })}\n    >\n      Hello World\n    <\/p>\n  )\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a<\/h3>\n","innerContent":["\n<h3 class=\"wp-block-heading\">\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:\/\/panda-css.com\/docs\/overview\/getting-started\" target=\"_blank\" rel=\"noreferrer noopener\">Panda CSS - Docs<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/panda-css.com\/docs\/overview\/getting-started\" target=\"_blank\" rel=\"noreferrer noopener\">Panda CSS - Docs<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 class=\"wp-block-heading\">Angular - Built-In Control Flow<\/h2>\n","innerContent":["\n<h2 class=\"wp-block-heading\">Angular - Built-In Control Flow<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W ostatnich miesi\u0105cach Angular rozwija si\u0119 szybciej ni\u017c kiedykolwiek. Niespe\u0142na kilka tygodniu temu \u015bwiat\u0142o dzienne ujrza\u0142 Angular 16, a wraz z nim nowy reaktywny prymityw w postaci Signals. Teraz stoj\u0105cy za frameworkiem zesp\u00f3\u0142 zaprezentowa\u0142 kolejne RFC, tym razem dotycz\u0105ce Control Flow. Je\u015bli wszystko p\u00f3jdzie z planem, wy\u015ble ono na emerytur\u0119 znane nam od dawna dyrektywy strukturalne. <\/p>\n","innerContent":["\n<p>W ostatnich miesi\u0105cach Angular rozwija si\u0119 szybciej ni\u017c kiedykolwiek. Niespe\u0142na kilka tygodniu temu \u015bwiat\u0142o dzienne ujrza\u0142 Angular 16, a wraz z nim nowy reaktywny prymityw w postaci Signals. Teraz stoj\u0105cy za frameworkiem zesp\u00f3\u0142 zaprezentowa\u0142 kolejne RFC, tym razem dotycz\u0105ce Control Flow. Je\u015bli wszystko p\u00f3jdzie z planem, wy\u015ble ono na emerytur\u0119 znane nam od dawna dyrektywy strukturalne. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":16401,"width":414,"height":595,"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\/2023\/07\/1t9vDABrmpUqsPOT7RC5HDubS6b9OBdhuy7SZdeHfGgM.png\" alt=\"\" class=\"wp-image-16401\" width=\"414\" height=\"595\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/1t9vDABrmpUqsPOT7RC5HDubS6b9OBdhuy7SZdeHfGgM.png\" alt=\"\" class=\"wp-image-16401\" width=\"414\" height=\"595\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Zaraz, zaraz? Co jest nie tak ze znanymi od dawna strukturalnymi dyrektywami? Je\u015bli nie wiadomo o co chodzi, to zapewne chodzi o <code>zone.js<\/code>, a w\u0142a\u015bciwie jego usuni\u0119cie. Dla przypomnienia, <code>zone.js<\/code> to ma\u0142a biblioteka b\u0119d\u0105ca jednym z kamieni w\u0119gielnych Angulara. W uproszczeniu jest ona odpowiedzialna za przechwytywanie asynchronicznych wydarze\u0144 w przegl\u0105darce i informowaniu o nich Angulara, kt\u00f3ry nast\u0119pnie uruchamia mechanizm wykrywania zmian. Obecnie zesp\u00f3\u0142 z Google pracuje w pocie czo\u0142a, aby umo\u017cliwi\u0107 deweloperom tworzenie aplikacji pozbawionych zone.js. Strukturalne dyrektywy s\u0105 tak mocno zwi\u0105zane z architektur\u0105 <code>zone.js<\/code>, \u017ce zesp\u00f3\u0142 zdecydowa\u0142, \u017ce najlepiej b\u0119dzie zaimplementowa\u0107 co\u015b zupe\u0142nie nowego i przy okazji nadrobi\u0107 braki strukturalnych dyrektyw. <\/p>\n","innerContent":["\n<p>Zaraz, zaraz? Co jest nie tak ze znanymi od dawna strukturalnymi dyrektywami? Je\u015bli nie wiadomo o co chodzi, to zapewne chodzi o <code>zone.js<\/code>, a w\u0142a\u015bciwie jego usuni\u0119cie. Dla przypomnienia, <code>zone.js<\/code> to ma\u0142a biblioteka b\u0119d\u0105ca jednym z kamieni w\u0119gielnych Angulara. W uproszczeniu jest ona odpowiedzialna za przechwytywanie asynchronicznych wydarze\u0144 w przegl\u0105darce i informowaniu o nich Angulara, kt\u00f3ry nast\u0119pnie uruchamia mechanizm wykrywania zmian. Obecnie zesp\u00f3\u0142 z Google pracuje w pocie czo\u0142a, aby umo\u017cliwi\u0107 deweloperom tworzenie aplikacji pozbawionych zone.js. Strukturalne dyrektywy s\u0105 tak mocno zwi\u0105zane z architektur\u0105 <code>zone.js<\/code>, \u017ce zesp\u00f3\u0142 zdecydowa\u0142, \u017ce najlepiej b\u0119dzie zaimplementowa\u0107 co\u015b zupe\u0142nie nowego i przy okazji nadrobi\u0107 braki strukturalnych dyrektyw. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":16403,"width":446,"height":566,"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\/2023\/07\/1t8l8hrOiXtL5DD2K8dR7DKn7IsNYdovQcB8nEC3jN28.png\" alt=\"\" class=\"wp-image-16403\" width=\"446\" height=\"566\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/1t8l8hrOiXtL5DD2K8dR7DKn7IsNYdovQcB8nEC3jN28.png\" alt=\"\" class=\"wp-image-16403\" width=\"446\" height=\"566\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nowa sk\u0142adnia mocno inspirowana jest Svelte i co ciekawe, jest ona w 100% zgodna ze standardem HTML. Warto zwr\u00f3ci\u0107 uwag\u0119 na to, \u017ce nowa sk\u0142adnia to nie tylko s\u0142odzik syntaktyczny, ale tak\u017ce realne usprawnienia dla deweloper\u00f3w. If statement staje si\u0119 wreszcie pe\u0142noprawnym If-else statement (i nikt nie wm\u00f3wi mi, \u017ce stare rozwi\u0105zanie oparte o template, by\u0142o czytelne), switch statement podobnie jak w TypeScript b\u0119dzie w stanie zaw\u0119\u017ca\u0107 typy, a for-loop wymaga\u0107 b\u0119dzie parametru <code>track<\/code> dzi\u0119ki czemu ci\u0119\u017cko b\u0119dzie zaimplementowa\u0107 nie optymaln\u0105 p\u0119tl\u0119. <\/p>\n","innerContent":["\n<p>Nowa sk\u0142adnia mocno inspirowana jest Svelte i co ciekawe, jest ona w 100% zgodna ze standardem HTML. Warto zwr\u00f3ci\u0107 uwag\u0119 na to, \u017ce nowa sk\u0142adnia to nie tylko s\u0142odzik syntaktyczny, ale tak\u017ce realne usprawnienia dla deweloper\u00f3w. If statement staje si\u0119 wreszcie pe\u0142noprawnym If-else statement (i nikt nie wm\u00f3wi mi, \u017ce stare rozwi\u0105zanie oparte o template, by\u0142o czytelne), switch statement podobnie jak w TypeScript b\u0119dzie w stanie zaw\u0119\u017ca\u0107 typy, a for-loop wymaga\u0107 b\u0119dzie parametru <code>track<\/code> dzi\u0119ki czemu ci\u0119\u017cko b\u0119dzie zaimplementowa\u0107 nie optymaln\u0105 p\u0119tl\u0119. <\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":4},"innerBlocks":[],"innerHTML":"\n<h4 class=\"wp-block-heading\">Currently (If Statement)<\/h4>\n","innerContent":["\n<h4 class=\"wp-block-heading\">Currently (If Statement)<\/h4>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\"><div *ngIf=\"cond.expr(); else elseBlock\">\n  Main case was true!\n<\/div>\n<ng-template #elseBlock>\n  <div *ngIf=\"other.expr(); else elseElseBlock\">\n    Extra case was true!\n  <\/div>\n  <ng-template #elseElseBlock>\n    <div>False case!<\/div>\n  <\/ng-template>\n<\/ng-template><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\"><div *ngIf=\"cond.expr(); else elseBlock\">\n  Main case was true!\n<\/div>\n<ng-template #elseBlock>\n  <div *ngIf=\"other.expr(); else elseElseBlock\">\n    Extra case was true!\n  <\/div>\n  <ng-template #elseElseBlock>\n    <div>False case!<\/div>\n  <\/ng-template>\n<\/ng-template><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":4},"innerBlocks":[],"innerHTML":"\n<h4 class=\"wp-block-heading\">RFC (If Statement)<\/h4>\n","innerContent":["\n<h4 class=\"wp-block-heading\">RFC (If Statement)<\/h4>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">{#if cond.expr}\n  Main case was true!\n{:else if other.expr}\n  Extra case was true!\n{:else}\n  False case!\n{\/if}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">{#if cond.expr}\n  Main case was true!\n{:else if other.expr}\n  Extra case was true!\n{:else}\n  False case!\n{\/if}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":4},"innerBlocks":[],"innerHTML":"\n<h4 class=\"wp-block-heading\">Currently (Switch Statement)<\/h4>\n","innerContent":["\n<h4 class=\"wp-block-heading\">Currently (Switch Statement)<\/h4>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\"><ng-container [ngSwitch]=\"cond.kind()\">\n   <ng-container *ngSwitchCase=\"x\">X case<\/ng-container>\n   <ng-container *ngSwitchCase=\"y\">Y case<\/ng-container>\n   <ng-container *ngSwitchCase=\"z\">Z case<\/ng-container>\n   <ng-container *ngSwitchDefault>No case matched<\/ng-container>\n<\/ng-container><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\"><ng-container [ngSwitch]=\"cond.kind()\">\n   <ng-container *ngSwitchCase=\"x\">X case<\/ng-container>\n   <ng-container *ngSwitchCase=\"y\">Y case<\/ng-container>\n   <ng-container *ngSwitchCase=\"z\">Z case<\/ng-container>\n   <ng-container *ngSwitchDefault>No case matched<\/ng-container>\n<\/ng-container><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":4},"innerBlocks":[],"innerHTML":"\n<h4 class=\"wp-block-heading\">RFC (Switch Statement)<\/h4>\n","innerContent":["\n<h4 class=\"wp-block-heading\">RFC (Switch Statement)<\/h4>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">{#switch cond.kind}\n  {:case x}\n    X case\n  {:case y}\n    Y case\n  {:case z}\n    Z case\n  {:default}\n    No case matched\n{\/switch}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">{#switch cond.kind}\n  {:case x}\n    X case\n  {:case y}\n    Y case\n  {:case z}\n    Z case\n  {:default}\n    No case matched\n{\/switch}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":4},"innerBlocks":[],"innerHTML":"\n<h4 class=\"wp-block-heading\">Currently (For Statement)<\/h4>\n","innerContent":["\n<h4 class=\"wp-block-heading\">Currently (For Statement)<\/h4>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\"><ng-container *ngFor=\"let item of items; trackBy: trackByFn\">\n  {{item}}\n<\/ng-container>\n<ng-container *ngIf=\"items.length === 0\">\n  There were no items in the list.\n<\/ng-container><\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\"><ng-container *ngFor=\"let item of items; trackBy: trackByFn\">\n  {{item}}\n<\/ng-container>\n<ng-container *ngIf=\"items.length === 0\">\n  There were no items in the list.\n<\/ng-container><\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":4},"innerBlocks":[],"innerHTML":"\n<h4 class=\"wp-block-heading\">RFC (For Statement)<\/h4>\n","innerContent":["\n<h4 class=\"wp-block-heading\">RFC (For Statement)<\/h4>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">{#for item of items; track item.id}\n  {{ item }}\n{:empty}\n  There were no items in the list.\n{\/for}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">{#for item of items; track item.id}\n  {{ item }}\n{:empty}\n  There were no items in the list.\n{\/for}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Opr\u00f3cz alternatyw dla znanych nam ju\u017c strukturalnych dyrektyw, zesp\u00f3\u0142 Angulara przygotowa\u0142 r\u00f3wnie\u017c RFC dla zupe\u0142nie nowej funkcjonalno\u015bci - leniwego \u0142adowania fragment\u00f3w szablon\u00f3w. Nowa \"dyrektywa\" oferuje wszystko czego mo\u017cecie potrzebowa\u0107 przy lazy loadingu - zaawansowane strategie \u0142adowania, obs\u0142ug\u0119 stanu \u0142adowania i b\u0142\u0119du, czy definicj\u0119 minimalnego czasu wy\u015bwietlania poszczeg\u00f3lnych wersji, w celu unikni\u0119cie mrugania.<\/p>\n","innerContent":["\n<p>Opr\u00f3cz alternatyw dla znanych nam ju\u017c strukturalnych dyrektyw, zesp\u00f3\u0142 Angulara przygotowa\u0142 r\u00f3wnie\u017c RFC dla zupe\u0142nie nowej funkcjonalno\u015bci - leniwego \u0142adowania fragment\u00f3w szablon\u00f3w. Nowa \"dyrektywa\" oferuje wszystko czego mo\u017cecie potrzebowa\u0107 przy lazy loadingu - zaawansowane strategie \u0142adowania, obs\u0142ug\u0119 stanu \u0142adowania i b\u0142\u0119du, czy definicj\u0119 minimalnego czasu wy\u015bwietlania poszczeg\u00f3lnych wersji, w celu unikni\u0119cie mrugania.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"xml"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">{#defer on interaction, timer(5s)}\n  <calendar-cmp \/>\n{:placeholder minimum 500ms}\n  <img src=\"placeholder.png\" \/>\n{:loading}\n  <div class=\"loading\">Loading the calendar...<\/div>\n{:error}\n  <p> Failed to load the calendar <\/p>\n  <p><strong>Error:<\/strong> {{$error.message}}<\/p>\n{\/defer}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-xml\">{#defer on interaction, timer(5s)}\n  <calendar-cmp \/>\n{:placeholder minimum 500ms}\n  <img src=\"placeholder.png\" \/>\n{:loading}\n  <div class=\"loading\">Loading the calendar...<\/div>\n{:error}\n  <p> Failed to load the calendar <\/p>\n  <p><strong>Error:<\/strong> {{$error.message}}<\/p>\n{\/defer}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a<\/h3>\n","innerContent":["\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/github.com\/angular\/angular\/discussions\/50719\" target=\"_blank\" rel=\"noreferrer noopener\">RFC: Built-In Control Flow<\/a><br><a href=\"https:\/\/github.com\/angular\/angular\/discussions\/50716\" target=\"_blank\" rel=\"noreferrer noopener\">RFC: Deferred Loading<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/github.com\/angular\/angular\/discussions\/50719\" target=\"_blank\" rel=\"noreferrer noopener\">RFC: Built-In Control Flow<\/a><br><a href=\"https:\/\/github.com\/angular\/angular\/discussions\/50716\" target=\"_blank\" rel=\"noreferrer noopener\">RFC: Deferred Loading<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 class=\"wp-block-heading\">TypeScript 5.1<\/h2>\n","innerContent":["\n<h2 class=\"wp-block-heading\">TypeScript 5.1<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kilka ostatnich wersji TypeScript przynios\u0142o nam naprawd\u0119 ciekawych funkcjonalno\u015bci. W wersji 4.9 dostali\u015bmy nowe s\u0142owo kluczowe <code>satisfies<\/code>. W wersji 5.0 ca\u0142y codebase zosta\u0142 przepisany z archaicznych namespaces do modu\u0142\u00f3w, co przynios\u0142o spore usprawnienia wydajno\u015bci. Niestety wersja 5.1 nie przynosi zbyt wielu ciekawych nowinek...<\/p>\n","innerContent":["\n<p>Kilka ostatnich wersji TypeScript przynios\u0142o nam naprawd\u0119 ciekawych funkcjonalno\u015bci. W wersji 4.9 dostali\u015bmy nowe s\u0142owo kluczowe <code>satisfies<\/code>. W wersji 5.0 ca\u0142y codebase zosta\u0142 przepisany z archaicznych namespaces do modu\u0142\u00f3w, co przynios\u0142o spore usprawnienia wydajno\u015bci. Niestety wersja 5.1 nie przynosi zbyt wielu ciekawych nowinek...<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":16406,"width":483,"height":387,"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\/2023\/07\/download-1.jpeg\" alt=\"\" class=\"wp-image-16406\" width=\"483\" height=\"387\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/download-1.jpeg\" alt=\"\" class=\"wp-image-16406\" width=\"483\" height=\"387\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Najwi\u0119ksz\u0105 nowo\u015bci\u0105 w TypeScript 5.1 jest lepsze wnioskowanie typ\u00f3w dla funkcji nie zwieraj\u0105cych return statement. W czystym JavaScript je\u015bli funkcja nie zawiera return statement to zwraca ona warto\u015b\u0107 undefined. W TypeScript, je\u015bli funkcja nie zawiera return statement to musi by\u0107 otypowana jako <code>void<\/code>. Ta drobna r\u00f3\u017cnica w zachowaniu potrafi\u0142a czasami by\u0107 irytuj\u0105ca, ale na szcz\u0119\u015bcie TypeScript 5.1 w ca\u0142o\u015bci j\u0105 naprawia.<\/p>\n","innerContent":["\n<p>Najwi\u0119ksz\u0105 nowo\u015bci\u0105 w TypeScript 5.1 jest lepsze wnioskowanie typ\u00f3w dla funkcji nie zwieraj\u0105cych return statement. W czystym JavaScript je\u015bli funkcja nie zawiera return statement to zwraca ona warto\u015b\u0107 undefined. W TypeScript, je\u015bli funkcja nie zawiera return statement to musi by\u0107 otypowana jako <code>void<\/code>. Ta drobna r\u00f3\u017cnica w zachowaniu potrafi\u0142a czasami by\u0107 irytuj\u0105ca, ale na szcz\u0119\u015bcie TypeScript 5.1 w ca\u0142o\u015bci j\u0105 naprawia.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ \u2705 fine - we inferred that 'f1' returns 'void'\nfunction f1() {\n    \/\/ no returns\n}\n\/\/ \u2705 fine - 'void' doesn't need a return statement\nfunction f2(): void {\n    \/\/ no returns\n}\n\/\/ \u2705 fine - 'any' doesn't need a return statement\nfunction f3(): any {\n    \/\/ no returns\n}\n\/\/ \u274c error in TypeScript 5.0 \n\/\/   |A function whose declared type is neither |\n\/\/   |'void' nor 'any' must return a value.     |\n\/\/ \u2705 fine in TypeScript 5.1\nfunction f4(): undefined {\n    \/\/ no returns\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ \u2705 fine - we inferred that 'f1' returns 'void'\nfunction f1() {\n    \/\/ no returns\n}\n\/\/ \u2705 fine - 'void' doesn't need a return statement\nfunction f2(): void {\n    \/\/ no returns\n}\n\/\/ \u2705 fine - 'any' doesn't need a return statement\nfunction f3(): any {\n    \/\/ no returns\n}\n\/\/ \u274c error in TypeScript 5.0 \n\/\/   |A function whose declared type is neither |\n\/\/   |'void' nor 'any' must return a value.     |\n\/\/ \u2705 fine in TypeScript 5.1\nfunction f4(): undefined {\n    \/\/ no returns\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kolejna nowo\u015b\u0107 to ca\u0142kowite rozdzielenie typ\u00f3w dla setter\u00f3w i getter\u00f3w. Co prawda do tej pory mog\u0142y si\u0119 one r\u00f3\u017cni\u0107, ale istnia\u0142 mi\u0119dzy nimi bardzo specyficzny kontrakt. Od teraz kontrakt ten przestaje mie\u0107 znaczenia i mog\u0105 one przyjmowa\u0107 zupe\u0142nie niezwi\u0105zane ze sob\u0105 typy.<\/p>\n","innerContent":["\n<p>Kolejna nowo\u015b\u0107 to ca\u0142kowite rozdzielenie typ\u00f3w dla setter\u00f3w i getter\u00f3w. Co prawda do tej pory mog\u0142y si\u0119 one r\u00f3\u017cni\u0107, ale istnia\u0142 mi\u0119dzy nimi bardzo specyficzny kontrakt. Od teraz kontrakt ten przestaje mie\u0107 znaczenia i mog\u0105 one przyjmowa\u0107 zupe\u0142nie niezwi\u0105zane ze sob\u0105 typy.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"typescript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ \u274c error in TypeScript 5.0 \n\/\/ \u2705 fine in TypeScript 5.1\ninterface CSSStyleRule {\n    \/\/ ...\n    \/** Always reads as a `CSSStyleDeclaration` *\/\n    get style(): CSSStyleDeclaration;\n    \/** Can only write a `string` here. *\/\n    set style(newValue: string);\n    \/\/ ...\n}<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-typescript\">\/\/ \u274c error in TypeScript 5.0 \n\/\/ \u2705 fine in TypeScript 5.1\ninterface CSSStyleRule {\n    \/\/ ...\n    \/** Always reads as a `CSSStyleDeclaration` *\/\n    get style(): CSSStyleDeclaration;\n    \/** Can only write a `string` here. *\/\n    set style(newValue: string);\n    \/\/ ...\n}<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a<\/h3>\n","innerContent":["\n<h3 class=\"wp-block-heading\">\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:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-1\/\" target=\"_blank\" rel=\"noreferrer noopener\">Announcing TypeScript 5.1<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-5-1\/\" target=\"_blank\" rel=\"noreferrer noopener\">Announcing TypeScript 5.1<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 class=\"wp-block-heading\">Microsoft Clarity<\/h2>\n","innerContent":["\n<h2 class=\"wp-block-heading\">Microsoft Clarity<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>W minionym miesi\u0105cu Microsoft podzieli\u0142 si\u0119 ze \u015bwiatem swoim rozwi\u0105zaniem do tworzenia map cieplnych stron i nagrywania sesji u\u017cytkownik\u00f3w. Co wa\u017cne, jest ono darmowe i korporacja z Redmond zapowiada, \u017ce takim pozostanie. Ponadto Microsoft sam intensywnie korzysta ju\u017c z tego narz\u0119dzia dla wewn\u0119trznych projekt\u00f3w. Nast\u0119pnym razem kiedy przyjdzie Wam wybiera\u0107 narz\u0119dzie do analityki waszej aplikacji, warto rozwa\u017cy\u0107 Microsoft Clarity jako darmow\u0105 ograniczon\u0105 w funkcjonalno\u015bci wersj\u0119 Hotjar'a.<\/p>\n","innerContent":["\n<p>W minionym miesi\u0105cu Microsoft podzieli\u0142 si\u0119 ze \u015bwiatem swoim rozwi\u0105zaniem do tworzenia map cieplnych stron i nagrywania sesji u\u017cytkownik\u00f3w. Co wa\u017cne, jest ono darmowe i korporacja z Redmond zapowiada, \u017ce takim pozostanie. Ponadto Microsoft sam intensywnie korzysta ju\u017c z tego narz\u0119dzia dla wewn\u0119trznych projekt\u00f3w. Nast\u0119pnym razem kiedy przyjdzie Wam wybiera\u0107 narz\u0119dzie do analityki waszej aplikacji, warto rozwa\u017cy\u0107 Microsoft Clarity jako darmow\u0105 ograniczon\u0105 w funkcjonalno\u015bci wersj\u0119 Hotjar'a.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":16412,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/7s4jny.jpeg\" alt=\"\" class=\"wp-image-16412\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/7s4jny.jpeg\" alt=\"\" class=\"wp-image-16412\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a<\/h3>\n","innerContent":["\n<h3 class=\"wp-block-heading\">\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:\/\/clarity.microsoft.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">See what your users want\u2014with Clarity<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/clarity.microsoft.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">See what your users want\u2014with Clarity<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2 class=\"wp-block-heading\">State of CSS 2023<\/h2>\n","innerContent":["\n<h2 class=\"wp-block-heading\">State of CSS 2023<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Kilka tygodni temu do sieci trafi\u0142a kolejna edycja ankiety State of CSS. Powtarzam to co roku i powt\u00f3rz\u0119 to te\u017c teraz: Je\u015bli szukacie czego\u015b co pozwoli Wam szybko i efektywnie nadrobi\u0107 nowo\u015bci ze \u015bwiata CSS-\u00f3w z kilku ostatnich lat, to State of CSS jest najlepszym miejscem \u017ceby to zrobi\u0107. Podsumowuj\u0105c, nie tylko macie okazj\u0119 przyczyni\u0107 si\u0119 dla dobra spo\u0142eczno\u015bci, ale r\u00f3wnie\u017c efektywnie i szybko nauczy\u0107 si\u0119 czego\u015b nowego.<\/p>\n","innerContent":["\n<p>Kilka tygodni temu do sieci trafi\u0142a kolejna edycja ankiety State of CSS. Powtarzam to co roku i powt\u00f3rz\u0119 to te\u017c teraz: Je\u015bli szukacie czego\u015b co pozwoli Wam szybko i efektywnie nadrobi\u0107 nowo\u015bci ze \u015bwiata CSS-\u00f3w z kilku ostatnich lat, to State of CSS jest najlepszym miejscem \u017ceby to zrobi\u0107. Podsumowuj\u0105c, nie tylko macie okazj\u0119 przyczyni\u0107 si\u0119 dla dobra spo\u0142eczno\u015bci, ale r\u00f3wnie\u017c efektywnie i szybko nauczy\u0107 si\u0119 czego\u015b nowego.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":16408,"width":526,"height":347,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-rounded\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/giphy.gif\" alt=\"\" class=\"wp-image-16408\" width=\"526\" height=\"347\"\/><figcaption class=\"wp-element-caption\">No ju\u017c! Prosz\u0119 wype\u0142nia\u0107 ankiet\u0119!<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full is-resized is-style-rounded\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2023\/07\/giphy.gif\" alt=\"\" class=\"wp-image-16408\" width=\"526\" height=\"347\"\/><figcaption class=\"wp-element-caption\">No ju\u017c! Prosz\u0119 wype\u0142nia\u0107 ankiet\u0119!<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a<\/h3>\n","innerContent":["\n<h3 class=\"wp-block-heading\">\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:\/\/stateofcss.com\/en-us\/\" target=\"_blank\" rel=\"noreferrer noopener\">State of CSS 2023<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/stateofcss.com\/en-us\/\" target=\"_blank\" rel=\"noreferrer noopener\">State of CSS 2023<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/16381","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=16381"}],"version-history":[{"count":20,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/16381\/revisions"}],"predecessor-version":[{"id":16474,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/16381\/revisions\/16474"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/16431"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=16381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=16381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=16381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}