Co w Chrome piszczy | Frontend Weekly vol. 128

1. Co w Chrome piszczy

W zeszłym tygodniu sporo uwagi poświęciliśmy przeglądarce od Apple, dlatego w tym tygodniu przyjrzymy się trochę co w trawie piszczy po drugiej stronie balustrady. Co prawda nowości w Chrome to eksperymentalne funkcjonalności, niemniej jednak, jest się czym ekscytować.

Tooltipy na jakie wszyscy zasługujemy

Od lat tworzenie atrakcyjnych tooltipów było udręką dla Fontend Developerów. Teoretycznie jesteśmy w stanie stowrzyć Tooltip przy użyciu samych CSS’ów. W praktyce szybko okazuje się, że w ten sposób nie jesteśmy w stanie zaimplementować opytmalnego pozycjonowania. Dobrze zaprogramowany Tooltop zawsze zmieści się na ekranie i zawsze zachowuje odpowiednie proporcje względem elemntu do którego jest zaczepiony. Niestety, bez JavaScriptu i skomplikowanych bibliotek ani rusz.

W najnowszym Chrome za eksperymentalną flagą dodana została funkcja anchor, która zmienia zasady gry. Dzięki niej możemy dowolnie pozycjonować nasze Tooltipy w CSS’ach, a skomplikowaną logiką pozycjonowania zajmie się Chrome. Funkcja anchor przyjmuje trzy argumenty (ID kotwicy, stronę (top/bottom/left/righ), domyślną wartość) i zwraca relatywną współrzędną względem kotwicy. Oprócz samej funkcji anchor w nasze ręce trafia też propery anchor-scroll, które umożliwi nam reagowanie na scroll przeglądarki i funkcja anchor-size, które pozwoli pozyjnonować Tooltip w zależności od wielkości elementu do którego zaczepiamy Tooltip.

.anchor {
  anchor-name: --my-anchor;
}

.tooltip {
  bottom: anchor(--my-anchor top);
  left: calc(anchor(--my-anchor center) - (var(--boat-size) * 0.5));
   width: calc(4 * anchor-size(--my-anchor width));
}

Tether elements to each other with CSS anchor positioning

Nagłówki na jakie wszyscy zasługujemy

Kolejną eksperymentalną funkcjonalnością w najnowszym Chrome jest property text-wrap:balance, która pozwala nam zbalansować długość linii w danym tekście. Co ważne, tekst nie może przekraczać 4 linijek, dlatego nowe property nada sie tylko do stylowania nagłówków i któtkich opisów pod zdjęciami czy snippetami kodu.

h2, h2, h3, h4, h5, h6, caption, figcaption {
    text-wrap: balance;
}

Balance your headers and captions with new balance property

Headless Chrome na jaki wszyscy zasługujemy

Czy wiecie, że headless Chrome, którego używacie w testach E2E, tak naprawdę ma niewiele wspólnego z Chrome, który zainstalowany jest na waszych komputerach? Okazuje się, że Chrome Headless jest osobną przeglądarką rozwijaną przez zespół. Aż ciężko w to uwierzyć, patrząc na poziom feature parity jaki udało się osiągnąć. Biorąc pod uwagę wysiłek jaki musiał zostać włożony w utrzymanie drugiej przeglądark, nie dziwi decyzja, żeby połączyć obie wersje Chrome.

Do najnowszego Chrome trafiła flaga, --headless=new, która uruchamia nową zunifikowana przeglądarkę w trybie headless. Chrome nadal rozwijał będzie starą alternatywną wersję przeglądarki (ze względu na kompatybliność wsteczną, to ona będzie się uruchamić z flgą --headless), ale zespól liczy na to, że z czasem uda się ją jakoś wygasić.

Chrome’s Headless mode gets an upgrade

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. Porównanie frameworków do Server Side Renderigu

Raporty i podsumowania, to to co lubimy w Vived najbardziej. W minioym tygodniu ukazały się dwa bardzo ciekawe zestawienia porównujące frameworki do renderowania po stronie serwera.

Pierwsze z nich zostało przygotowane przez zespół Astro i bazuje na rzeczywistych danych użytkowników zebranych przez Chrome. TLDR; We wszystkich analizowanych kategoriach wygrywa Astro, SvelteKit i Remix, zostawiając w tyle Next.js, Nuxt czy WordPress. Na wyniki należy jednak patrzeć trochę przez palce. Po pierwsze, frameworki, które zostały z tyłu mają już swoje lata i sporo z nich to od dawna nie utrzymywane projekty. Po drugie, wysuwające się na czoło frameworki stoją za małym procentem stron w internecie i używane są głównie przez technologicznych pasjonatów.

2023 Web Framework Performance Report

Drugi raport przygotowany został przez twórcę Eleventy i skupia się na przeprowadzonych lokalnie testach. Pod uwagę wzięty został czas budowania aplikacji, rozmiar paczki wysyłanej do klienta czy ilość zewnętrznych dependencji. TLDR; W większości analizowanych kategorii na czoło ponownie wysuwa się Eleventy, Astro i SvelteKit. Tym razem pozostałe frameworki nie pozostają jednak daleko w tyle i w zależności od kategorii w pierwszej trójce przewija się chociażby Next.js czy mało znany Enhance.

The javascript site generator review, 2023

3. O co chodzi z tymi React Server Components?

O React Server Components sporo się mówi, ale tak naprawdę ciężko znaleźć zwięzłe i dobre wytłumaczenie tej koncepcji. Na ratunek jak zwykle przychodzi Josh W Comeau, którego możecie kojarzyć z świetnych publikacji na temat Reacta. Co prawda tym razem nie mamy do czynienia z blogpostem, a z Twitterowym wątkiem dotyczącym połączenia Styled Components z React Server Components, ale jest to najlepsze przedstawienie tematu jakie do tej pory widziałem.

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

4. Civet

Na zakończenie dzisiejszego przeglądu mała ciekawostka dla wszystkich znudzonych tempem rozwoju TypeScript. Civiet to nowy język kompilowany do JavaScript i TypeScript, który oferuje implementację wielu funkcjonalności, które od dłuższego czasu tkwią w TC39 Pipeline (np. Pattern Matching, Pipe Operator). Czy TypeScript ma się czego obawaić? Raczej nie. Czy Civet szturmem zawojuje serca deweloperów? Raczej nie. Czy Civet wygląda interesująco? Zdecydowanie tak!

// Pattern Matching
switch x
  0
    console.log("zero")
  /^\s+$/
    console.log("whitespace")
  [{type: "text", content}, ...rest]
    console.log("leading text", content)

// Single-Argument Function Shorthand
x.map .name
x.map &.profile?.name[0...3]
x.map &.callback a, b
x.map &+1
x.map -&

// Pipelines
data
  |> Object.keys
  |> console.log

Civer – The Modern Way to Write TypeScript