🎨 #12 Container queries, słówko o Tailwind

CSS container queries

Kiedyś, gdy jeszcze więcej czasu spędzałem w CSS, potrzebowałem stworzyć responsywny layout na podstawie rozmiaru rodzica. Niestety nie istniało żadne natywne rozwiązanie w CSS, więc zostało użycie JS.
Ale od (nie)dawna mamy taką możliwość - @container.

TLDR;
- kontener musi mieć określony container-type, idealnie jeśli dodasz do tego container-name,
- ustawiasz query: @container NAME i dalej standardowo np. (min-width: 300px.

O szczegółach przeczytasz w artykule Ahmada. Wsparcie przeglądarek jest na tyle dobre, że nie zawahałbym się użyć tego produkcyjnie.

Słowo o Tailwind CSS

Gdy pierwszy raz usłyszałem o Tailwind CSS nie byłem zbyt optymistycznie nastawiony do niego. Ale po pierwszym użyciu w projekcie przekonałem się do tego narzędzia. I idealnie się sprawdził na dwóch hackathonach 🧑‍💻.

Wpis Jake'a jest bardzo subiektywny, ale nie sposób się z nim nie zgodzić - po co mam się uczyć nowego narzędzia, które i tak wymaga ode mnie znajomość CSS, skoro i tak tego CSS znam i używam na co dzień 🤔?
Z drugiej strony Tailwind ma fajną bibliotekę komponentów, z których w kilka chwil spokładam prosty landing page, z czego na pewno skorzystam nie raz.

Cache'owanie odpowiedzi z API

Piszesz aplikację, w której do pobierania danych z API musisz przekazać w nagłówku 🔑api key, który otrzymasz po odpytaniu dedykowanego enpointu - brzmi znajomo?

W artykule The Best New Way To Cache API Responses with Angular & RxJs przeczytasz o kilku sposobach na optymalizację tego mechanizmu:

🔃 pobieranie klucza przy każdym requeście,
〰️ cache'owanie klucza "wiecznie", a ponawianie dopiero gdy docelowe zapytanie zwróci błąd,
⏳ odświeżanie klucza co pewien czas,
🦥 "lazy way" + cache'owanie przez pewien czas.

Polecajka - Warp

Terminal, z którego korzystam już dłuższy czas, napisany w RUST, w którym tekst wprowadzasz niczym w edytorze kodu 🎹.
Do tego dochodzi wygodna nawigacja po wprowadzanych komendach, wsparcie AI, podpowiadanie poleceń. Czego chcieć więcej 🤷‍♂️.