{"id":15055,"date":"2023-03-10T14:45:40","date_gmt":"2023-03-10T13:45:40","guid":{"rendered":"https:\/\/vived.io\/?p=15055"},"modified":"2023-03-10T14:48:38","modified_gmt":"2023-03-10T13:48:38","slug":"co-w-chrome-piszczy-frontend-weekly-vol-128","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/co-w-chrome-piszczy-frontend-weekly-vol-128\/","title":{"rendered":"Co w Chrome piszczy | Frontend Weekly vol. 128"},"content":{"rendered":"\n

1. Co w Chrome piszczy<\/h2>\n\n\n\n

W zesz\u0142ym tygodniu sporo uwagi po\u015bwi\u0119cili\u015bmy przegl\u0105darce od Apple, dlatego w tym tygodniu przyjrzymy si\u0119 troch\u0119 co w trawie piszczy po drugiej stronie balustrady. Co prawda nowo\u015bci w Chrome to eksperymentalne funkcjonalno\u015bci, niemniej jednak, jest si\u0119 czym ekscytowa\u0107. <\/p>\n\n\n\n

Tooltipy na jakie wszyscy zas\u0142ugujemy<\/h3>\n\n\n\n

Od lat tworzenie atrakcyjnych tooltip\u00f3w by\u0142o udr\u0119k\u0105 dla Fontend Developer\u00f3w. Teoretycznie jeste\u015bmy w stanie stowrzy\u0107 Tooltip przy u\u017cyciu samych CSS’\u00f3w. W praktyce szybko okazuje si\u0119, \u017ce w ten spos\u00f3b nie jeste\u015bmy w stanie zaimplementowa\u0107 opytmalnego pozycjonowania. Dobrze zaprogramowany Tooltop zawsze zmie\u015bci si\u0119 na ekranie i zawsze zachowuje odpowiednie proporcje wzgl\u0119dem elemntu do kt\u00f3rego jest zaczepiony. Niestety, bez JavaScriptu i skomplikowanych bibliotek ani rusz.<\/p>\n\n\n\n

W najnowszym Chrome za eksperymentaln\u0105 flag\u0105 dodana zosta\u0142a funkcja anchor<\/code>, kt\u00f3ra zmienia zasady gry. Dzi\u0119ki niej mo\u017cemy dowolnie pozycjonowa\u0107 nasze Tooltipy w CSS’ach, a skomplikowan\u0105 logik\u0105 pozycjonowania zajmie si\u0119 Chrome. Funkcja anchor<\/code> przyjmuje trzy argumenty (ID kotwicy, stron\u0119 (top\/bottom\/left\/righ), domy\u015bln\u0105 warto\u015b\u0107) i zwraca relatywn\u0105 wsp\u00f3\u0142rz\u0119dn\u0105 wzgl\u0119dem kotwicy. Opr\u00f3cz samej funkcji anchor<\/code> w nasze r\u0119ce trafia te\u017c propery anchor-scroll<\/code>, kt\u00f3re umo\u017cliwi nam reagowanie na scroll przegl\u0105darki i funkcja anchor-size<\/code>, kt\u00f3re pozwoli pozyjnonowa\u0107 Tooltip w zale\u017cno\u015bci od wielko\u015bci elementu do kt\u00f3rego zaczepiamy Tooltip. <\/p>\n\n\n\n

.anchor {\n  anchor-name: --my-anchor;\n}\n\n.tooltip {\n  bottom: anchor(--my-anchor top);\n  left: calc(anchor(--my-anchor center) - (var(--boat-size) * 0.5));\n   width: calc(4 * anchor-size(--my-anchor width));\n}<\/code><\/pre>\n\n\n\n
Tether elements to each other with CSS anchor positioning<\/a><\/p>\n\n\n\n
Nag\u0142\u00f3wki na jakie wszyscy zas\u0142ugujemy<\/h3>\n\n\n\n
Kolejn\u0105 eksperymentaln\u0105 funkcjonalno\u015bci\u0105 w najnowszym Chrome jest property text-wrap:balance<\/code>, kt\u00f3ra pozwala nam zbalansowa\u0107 d\u0142ugo\u015b\u0107 linii w danym tek\u015bcie. Co wa\u017cne, tekst nie mo\u017ce przekracza\u0107 4 linijek, dlatego nowe property nada sie tylko do stylowania nag\u0142\u00f3wk\u00f3w i kt\u00f3tkich opis\u00f3w pod zdj\u0119ciami czy snippetami kodu.<\/p>\n\n\n\n
h1, h2, h3, h4, h5, h6, caption, figcaption {\n    text-wrap: balance;\n}<\/code><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Balance your headers and captions with new balance property<\/a><\/p>\n\n\n\n
Headless Chrome na jaki wszyscy zas\u0142ugujemy<\/h3>\n\n\n\n
Czy wiecie, \u017ce headless Chrome, kt\u00f3rego u\u017cywacie w testach E2E, tak naprawd\u0119 ma niewiele wsp\u00f3lnego z Chrome, kt\u00f3ry zainstalowany jest na waszych komputerach? Okazuje si\u0119, \u017ce Chrome Headless jest osobn\u0105 przegl\u0105dark\u0105 rozwijan\u0105 przez zesp\u00f3\u0142. A\u017c ci\u0119\u017cko w to uwierzy\u0107, patrz\u0105c na poziom feature parity jaki uda\u0142o si\u0119 osi\u0105gn\u0105\u0107. Bior\u0105c pod uwag\u0119 wysi\u0142ek jaki musia\u0142 zosta\u0107 w\u0142o\u017cony w utrzymanie drugiej przegl\u0105dark, nie dziwi decyzja, \u017ceby po\u0142\u0105czy\u0107 obie wersje Chrome.<\/p>\n\n\n\n
Do najnowszego Chrome trafi\u0142a flaga, --headless=new<\/code>, kt\u00f3ra uruchamia now\u0105 zunifikowana przegl\u0105dark\u0119 w trybie headless. Chrome nadal rozwija\u0142 b\u0119dzie star\u0105 alternatywn\u0105 wersj\u0119 przegl\u0105darki (ze wzgl\u0119du na kompatyblino\u015b\u0107 wsteczn\u0105, to ona b\u0119dzie si\u0119 uruchami\u0107 z flg\u0105 --headless<\/code>), ale zesp\u00f3l liczy na to, \u017ce z czasem uda si\u0119 j\u0105 jako\u015b wygasi\u0107.<\/p>\n\n\n\n
Chrome\u2019s Headless mode gets an upgrade<\/a><\/p>\n\n\n\n
2. Por\u00f3wnanie framework\u00f3w do Server Side Renderigu<\/h2>\n\n\n\n
Raporty i podsumowania, to to co lubimy w Vived najbardziej. W minioym tygodniu ukaza\u0142y si\u0119 dwa bardzo ciekawe zestawienia por\u00f3wnuj\u0105ce frameworki do renderowania po stronie serwera. <\/p>\n\n\n\n
Pierwsze z nich zosta\u0142o przygotowane przez zesp\u00f3\u0142 Astro i bazuje na rzeczywistych danych u\u017cytkownik\u00f3w zebranych przez Chrome. TLDR;<\/strong> We wszystkich analizowanych kategoriach wygrywa Astro, SvelteKit i Remix, zostawiaj\u0105c w tyle Next.js, Nuxt czy WordPress. Na wyniki nale\u017cy jednak patrze\u0107 troch\u0119 przez palce. Po pierwsze, frameworki, kt\u00f3re zosta\u0142y z ty\u0142u maj\u0105 ju\u017c swoje lata i sporo z nich to od dawna nie utrzymywane projekty. Po drugie, wysuwaj\u0105ce si\u0119 na czo\u0142o frameworki stoj\u0105 za ma\u0142ym procentem stron w internecie i u\u017cywane s\u0105 g\u0142\u00f3wnie przez technologicznych pasjonat\u00f3w.<\/p>\n\n\n\n
2023 Web Framework Performance Report<\/a><\/p>\n\n\n\n
Drugi raport przygotowany zosta\u0142 przez tw\u00f3rc\u0119 Eleventy i skupia si\u0119 na przeprowadzonych lokalnie testach. Pod uwag\u0119 wzi\u0119ty zosta\u0142 czas budowania aplikacji, rozmiar paczki wysy\u0142anej do klienta czy ilo\u015b\u0107 zewn\u0119trznych dependencji. TLDR;<\/strong> W wi\u0119kszo\u015bci analizowanych kategorii na czo\u0142o ponownie wysuwa si\u0119 Eleventy, Astro i SvelteKit. Tym razem pozosta\u0142e frameworki nie pozostaj\u0105 jednak daleko w tyle i w zale\u017cno\u015bci od kategorii w pierwszej tr\u00f3jce przewija si\u0119 chocia\u017cby Next.js czy ma\u0142o znany Enhance.<\/p>\n\n\n\n
The javascript site generator review, 2023<\/a><\/p>\n\n\n\n
3. O co chodzi z tymi React Server Components?<\/h2>\n\n\n\n
O React Server Components sporo si\u0119 m\u00f3wi, ale tak naprawd\u0119 ci\u0119\u017cko znale\u017a\u0107 zwi\u0119z\u0142e i dobre wyt\u0142umaczenie tej koncepcji. Na ratunek jak zwykle przychodzi Josh W Comeau, kt\u00f3rego mo\u017cecie kojarzy\u0107 z \u015bwietnych publikacji na temat Reacta. Co prawda tym razem nie mamy do czynienia z blogpostem, a z Twitterowym w\u0105tkiem dotycz\u0105cym po\u0142\u0105czenia Styled Components z React Server Components, ale jest to najlepsze przedstawienie tematu jakie do tej pory widzia\u0142em.<\/p>\n\n\n\n
\n
\ud83c\udf20 One of the hot new features in Next 13 is the integration of React Server Components (RSC). I've seen a lot of confusion about how this feature interacts with \ud83d\udc85 styled-components, and other CSS-in-JS tools.

I wanna share what I've learned.<\/p>— Josh W. Comeau (@JoshWComeau) March 2, 2023<\/a><\/blockquote>