Frontend Thursday vol. 68 – State of CSS 2021, Tailwind 3, React Forget

1. Tailwind v3.0

Czasami zdarza się, że tuż po opublikowaniu frontendowego czwartku w mediach pojawia się informacja o naprawdę dużym wydarzeniu, która powinna się w nim znaleźć. Taka sytuacja miała miejsce w zeszłym tygodniu, bo dosłownie godzinę po publikacji naszego podsumowania do sieci trafił Tailwind v3.0. Jest to pierwsza duża wersja od ponad roku i przynosi cały worek nowości. Jesteśmy trochę spóźnieni na całą zabawę, ale mimo wszystko przyjrzymy się zmianom z tego wydania.

Pojawienie się opcjonalnego kompilatora Just-In-Time w Tailwind v2.1 było sporym wydarzeniem. Tailwind v3 pozbywa się starego kompilatora i w jego miejsce domyślnie skonfigurowana jest wersja Just-In-Time. Stary kompilator w trybie deweloperskim do przeglądarki dostarczał 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. Kompilator Just-In-Time zupełnie zmienia to zachowanie. 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.

Zmiana domyślnego kompilatora umożliwiła twórcom frameworka rozszerzyć domyślną paletę kolorów (w końcu jeśli nie wykorzystacie jakiegoś koloru w aplikacji to nigdy nie pojawi się on w wygenerowanym kodzie). Wśród kolorów znajdziemy więc limonkowy, cyan, fuksję, róż czy rozszerzoną paletę szarości. Jeśli mówimy już o kolorach to warto też wspomnieć o pojawieniu się kolorowych cieni. Niby nic dużego, ale na pewno sporo z nas na tym skorzysta.

Wraz z nową wersją powitaliśmy również sporo całkowicie nowych API. Wśród nich znajdziemy między innymi: 

• Scroll snap API, czyli zbiór funkcjonalności potrzebnych do zaimplementowania efektu przyciągania podczas scrolowania
• Multi-column layout, czyli zbiór funkcjonalności umożliwiający wygodny podział na kolumny, który znamy chociażby z tradycyjnej prasy
• Print modifier, czyli zestaw modyfikatorów, który ułatwi stylowanie podglądu wydruku tworzonej  strony  
• Aspect ratio, czyli wygodne API, które umożliwi zdefiniowanie proporcji elementu
• Wsparcie dla RTL i LTR, czyli API do zmieniania kierunku tekstu

Jeśli jesteście zainteresowani szczegółami to w źródłach znajdziecie linki do obszernej dokumentacji. Jeśli wolicie wersję wideo to Adam Wathan nagrał prawie półgodzinne wideo, w którym przygląda się dokładnie wszystkim nowościom.

Źródła:

https://tailwindcss.com/blog/tailwindcss-v3#just-in-time-all-the-time
https://www.youtube.com/watch?v=TmWIrBPE6Bc
https://v2.tailwindcss.com/docs/just-in-time-mode

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. Deno dołącza do TC39 i nowości z ostatnich obrad

TC39 Working Group (ja lubię ich nazywać po prostu starszyzną plemienną) to grupa ludzi i organizacji odpowiedzialnych za rozwój oficjalnych standardów JavaScript. Jeśli zastanawialiście się dlaczego standard rozwija się tak powoli to jest to właśnie ich wina 😉 Jeśli nigdy nie mieliście okazji przeczytać o tym jak powstają nowe funkcjonalności to gorąco polecam ten artykuł.

Wracając do sedna tematu, do TC39 Working Group dołączyło Deno. Dla projektu oznacza to, że będzie mieć bezpośredni wpływ na to w którą stronę rozwija się język. Co za tym idzie, możemy oczekiwać, że kolejne wprowadzane funkcjonalności bez problemów i opóźnień trafią do Deno. Co więcej,funkcjonalności dostępne tylko w Deno mają szansę trafić do oficjalnej specyfikacji. Osobiście przyglądam się poczynaniom Deno z zapartym tchem i liczę na to, że za kilka lat będą stać na równi z node.js.

Zebrania TC39 trochę przyzwyczaiły już nas do nudy i literowaniem nad nowym API dla dat i czasu… i na pierwszym spotkaniu w którym brał udział przedstawiciel Deno nie było inaczej. Jedyną ciekawą nowością jest dotarcie do fazy trzeciej funkcji groupBy. Aż ciężko uwierzyć, że tak popularny język jak JavaScript może nie posiadać takiej funkcjonalności w 2021 roku…

const array = [1, 2, 3, 4, 5];

// groupBy groups items by arbitrary key.
// In this case, we're grouping by even/odd keys
array.groupBy((num, index, array) => {
  return num % 2 === 0 ? 'even': 'odd';
});

// =>  { odd: [1, 3, 5], even: [2, 4] }

Źródła:

https://dev.to/hemanth/updates-from-the-87th-meeting-of-tc39-44e4
https://deno.com/blog/deno-joins-tc39

3. React Forget

Jeśli jesteście fanami Angulara i Vue, którzy czytając tytuł stwierdzili, że można wreszcie zapomnieć o React’cie – niestety to jeszcze nie czas. React Forget to nazwa kodowa biblioteki, która ma umożliwić całkowite pozbycie się z kodu hooka useMemo. Hook ten służy do zapamiętywania stanu pomiędzy renderami i przeliczania go tylko przy zmianie zdefiniowanych z góry parametrów. Standardowo wykorzystuje się go do optymalizacji ciężkich operacjach takich jak aplikowanie filtrów do tablicy. Niestety, z czasem zarządzanie useMemo potrafiło stać się bardzo skomplikowane, co w efekcie prowadzi do nieczytelnego kodu. Nowa bibliotek React Forget ma sama zająć się wymaganymi optymalizacją, dzięki czemu pozwoli deweloperom zapomnieć o useMemo. Na razie biblioteka nie jest jeszcze publiczna, ale jeśli ujrzy światło dzienne to może być sporym przełomem w świecie reacta.

4. State of CSS 2021

Wreszcie nastał ten czas, kiedy nasze przeglądy zmieniają się w przegląd wykresów i ciekawostek. W minionym tygodniu ukazał się raport State of CSS 2021 – to już trzecia edycja raportu, więc w końcu znajdziemy w nim również wykresy z analizą trendów na rynku. Zdecydowanie polecam przejrzeć raport samodzielnie, bo oprócz wykresów znajdziecie tam prawdziwą kopalnię wiedzy na temat mniej popularnych funkcjonalności czy listę blogów i osób, które warto obserwować w (może nasz blog też kiedyś zajmie tam swoje zaszczytne miejsce…). Tymczasem poniżej znajdziecie kilka moim zdaniem najciekawszych wniosków:

• Napływ nowych deweloperów w ostatnich latach zaczyna się stabilizować. Osoby z doświadczeniem mniejszym niż  2 lata to 10% rynku,  natomiast z doświadczeniem pomiędzy 2-5 lat to 20% rynku.
• ​​65% ankietowanych to mężczyźni
• Najwięcej deweloperów pracuje w średniej wielkości firmach (100-1000). Jestem ciekawy jak ankietę wypełniały osoby zatrudnione na JDG 😉
• Flexbox bez obaw można już nazywać rynkowym standardem. Prawie 99% respondentów wykorzystało go w ostatnim roku.
• CSS Grid zyskuje na popularności. W minionym roku korzystało z niego 83% respondentów, natomiast kolejne 16% jest świadomych jego istnienia. Co interesujące z subgrid korzystało tylko 13% respondentów, a prawie 30% nigdy o nich nie słyszało.
• Wśród preprocesorów deweloperzy najbardziej docenili PostCSS, jednak  jeśli chodzi o stosunek satysfakcji do wykorzystujących użytkowników to niepodzielnie króluje  Sass.
• Wśród frameworków z dużą przewagą najpopularniejszym rozwiązaniem pozostaje Bootstrap. Jeśli jednak chodzi o satysfakcję, to TailwindCSS nie ma realnej konkurencji.
• Najpopularniejszą przeglądarką do developmentu są Chrome (67%) i Firefox (47%). Zaskakują wysokie wyniki Safari (23%), Edge (16%) i Brave (10%)
• Pomimo gasnącej popularności tabletów, 40% respondentów deklaruje, że testuje na nich swoje aplikacje.
• Jeśli chodzi o dokumentację to króluje Stack Overflow i MDN. Na kolejnych miejscach uplasowały się W3Schools i Web.dev.
• Zdecydowana większość respondentów czerpie radość z pisania CSSów.
• Tylko 20% respondentów uważa, że CSS ewoluuje zbyt wolno

PS: Jeśli jesteście fanami wykresów to w minionym tygodniu ukazał się również Web Almanach 2021. Raport ten powstał na podstawie analizy kodu źródłowego ponad 8 milionów stron internetowych. Ostrzegam tylko, że jest to lektura na której można stracić wiele godzin (gdyby raport wydawany był w formie drukowanej to raczej nie odbiegałby grubością od przeciętnej powieści przygodowej)

Źródła:

https://2021.stateofcss.com/en-US/
https://almanac.httparchive.org/en/2021/

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!

Bonus

Jeśli pomimo tygodnia tak intensywnego w nowości nadal szukacie czegoś ciekawego to Dan Abramov opublikował na twitterze listę stu (powtarzam: stu) rzeczy, których nauczył się pracując nad Reactem.  Zdecydowanie  jest to ciekawa lista, na której chyba każdy znajdzie jakiś punkt, który chociaż odrobinę poszerzy jego horyzonty.

Ja tymczasem wracam do Advent of Code. Bawię się w tym roku jak nigdy – jeśli ktoś chce dołączyć to zapraszamy na naszą grupę na facebooku i do leaderboarda (join code: 1550550-c19ac226).