1. Just-In-Time: The Next Generation of Tailwind CSS
Pojawienie się nowego kompilatora do Tailwinda było moim zdaniem najciekawszym wydarzeniem minionego tygodnia. Jeśli jeszcze jakimś cudem nie słyszeliście o samym frameworku, to najwyższa pora to nadrobić. W raporcie State of CSS 2020 w kategorii frameworków do stylowania Tailwind zajął pierwsze miejsce pod względem satysfakcji i generowanego w sieci zainteresowania, a w kategorii wdrożenia na produkcję zaliczył imponujący wzrost z 9 na 4 miejsce. Nawet jeśli na pierwszy rzut oka nie przemawia do Was podejście utility-first, to i tak dajcie mu szansę – w sieci natknąłem się przynajmniej na kilka osób, które zaczynały z sceptycznym nastawieniem i kończyły kompletnie zakochane.
Wróćmy tymczasem do głównego tematu, czyli nowego kompilatora Tailwinda. Do tej pory w trybie deweloperskim do przeglądarki dostarczany był pokaźny plik zawierający całego Tailwinda (czasami mającego nawet 10MB!). W trybie produkcyjnym natomiast standardem było odchudzanie paczki przy pomocy PurgeCSS.Zależność ta przy pomocy RegeExpa wyszukiwała wszystkie klasy znajdujące się w templateach jeszcze na etapie budowania (rochę więcej na ten temat znajdziecie w samej dokumentacji). Kompilator Just-In-Time zupełnie zmienia to zachowanie. Od teraz zarówno w trybie produkcyjnym, jak i deweloperskim wraz z dodaniem kolejnej klasy do elementu, będzie się ona dynamicznie pojawiać w wynikowych plikach stylu. Nie wpłynie to znacząco na rozmiar bundla, ale za to mocno poprawi developer experience – w trakcie developmentu przeglądarka będzie musiała obsługiwać o rząd wielkości mniejszy plik CSS.
Nie są to (niestety) jedyne zmiany, jakie wprowadza nowy kompilator. Nowy sposób generowania klas umożliwia specyfikację jednostek w pikselach i kolorów w postaci hexa.
<!-- Sizes and positioning -->
<img class="absolute w-[762px] h-[918px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" src="/crazy-background-image.png">
<!-- Colors -->
<button class="bg-[#1da1f1]">Share on Twitter</button>
<!-- Complex grids -->
<div class="grid-cols-[1fr,700px,2fr]">
<!-- ... -->
</div>Na pewno jest to rozwiązanie wygodne, ale w moich oczach aż nazbyt wygodne. Argument twórcy kompilatora, mówiący o synergii tego rozwiązania z Tailwindowymi breakpointami, jak najbardziej do mnie przemawia (do tej pory jeśli chcieliśmy nadać własny styl w zależności od wielkości ekranu, należało zduplikować element i wykorzystać klasę {breakpoint}:visible). Obawiam się tylko, że bez trzymania odpowiedniej dyscypliny taka funkcjonalność może doprowadzić do zalania naszego kodu magicznymi liczbami i kolorami. Wielu programistów na breakpointach zapewne się nie zatrzyma… No cóż, może moja wiara w programistyczna brać jest zbyt mała i taka funkcjonalność jednak nie wpłynie negatywnie na code basy używające Tailwinda? Czas pokaże…
Źródła:
https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css
Zainstaluj teraz i czytaj tylko dobre teksty!
2. Updates from the 81st meeting of TC39
W tym tygodniu miało również miejsce zebranie JavaScriptowej starszyzny, czyli TC39 Meeting (jeśli zastanawiacie się, czy porównywanie TC39 do indiańskiej starszyzny kiedykolwiek mi się znudzi to śpieszę z wyjaśnieniem: nie). Jeśli śledzicie nasze JVM-owe podsumowania, to pewnie orientujecie się, nad jakimi funkcjonalnościami trwają w tym środowisku prace: rekordy, pattern matching, współbieżność. Jeśli natomiast przyjrzeć się, nad czym pracuje się w środowisku JavaScriptowym, to ciężko nie odnieść wrażenia, że mówimy o języku rozwijającym się zdecydowanie mniej prężnie. Po raz kolejny najważniejszym tematem omawianym podczas spotkania były funkcje dotyczące ulepszenia obsługi czasu i daty. Zdecydowanie jest to temat istotny, no ale ile można…
Skończmy jednak narzekać i zerknijmy na to, w jaki sposób tym razem zaatakowano ten problem. Do etapu trzeciego prac nad specyfikacją JavaScript trafił obiekt Temporal. Ma on być dostępny globalnie – podobnie jak znany większości obiekt Math. Temporal ma udostępniać API do wygodnego operowania na datach, stawiając na obsługę stref czasowych i różnych rodzajów kalendarzy (pisał ktoś z Was kiedyś aplikację wspierającą kalendarz żydowski albo kalendarz buddyjski?). API jest na tyle rozbudowane, że nie ma sensu dzielić się nim w tym blogpoście więc wszystkich zainteresowanych odsyłam do źródła.
Źródła:
https://dev.to/hemanth/updates-from-the-81st-meeting-of-tc39-2b3p
Zainstaluj teraz i czytaj tylko dobre teksty!
3. Introducing Relay Hooks: Improved React APIs for Relay
Na początku przyznam się, że GraphQL to jeden z tych pociągów, który odjechał beze mnie. Nigdy nie miałem okazji pobawić się tym narzędziem w bardziej zaawansowanym projekcie i moja wiedza nigdy nie wyszła poza proste tutoriale. Z racji tego bardzo ciężko jest mi zarówno porównać Appollo do Relay (patrząc tylko na pobrania z npm to Apollo wygrywa około trzykrotnie) i ocenić, jak duże usprawnienia wprowadził Facebook w swoim kliencie (który btw wykorzystywany jest w nowej wersji webowego Facebooka, więc bez wątpienia jest to coś production ready). Jeśli jest z nami ktoś, kto ma na ten temat lepszą wiedzę, bądź ciekawą opinię to zapraszamy do komentowania na naszym Facebooku (z odrobiną szczęścia może nawet zostanie zacytowani w tym blogpoście). Ja tymczasem zostawiam Was z blogpostem opisującym nową wersję Relay, bo zdecydowanie jest to duże wydarzenie dla wszystkich korzystających z GraphQL.
PS. Wertując informacje o Relay i GraphQL odkopałem świetny dokument o powstawaniu GraphQL. Jeśli jeszcze nie widzieliście i macie wolne pół godziny, to gorąco polecam.
Źródła:
Pamiętajcie, żeby spróbować Vived, jeśli chcesz otrzymywać tego typu treści spersonalizowane pod Ciebie!
