Witamy w drugim wydaniu Chrome Dev Insider, w którym dzielimy się nowościami i ciekawostkami ze społeczności i zespołu Chrome. To nowy odcinek z serii „Od kuchni”, w którym opowiadamy o naszym podejściu do pracy i przedstawiamy najważniejsze aktualizacje, na które warto zwrócić uwagę.
Nazywam się Rachel Andrew i jestem kierownikiem ds. treści na stronach web.dev i developer.chrome.com w zespole ds. relacji z programistami Chrome. Od ponad 20 lat pracuję w internecie, koncentrując się na otwartych standardach internetowych i CSS. Jestem członkiem grupy roboczej CSS.
Dwa miesiące temu zakończyliśmy konferencję Google I/O, na której przedstawiliśmy najważniejsze nowości dotyczące tego, jak wspieramy deweloperów w tworzeniu szybszych i wydajniejszych stron internetowych, które jednocześnie zapewniają bezpieczeństwo i prywatność danych użytkowników.
Jedną z rzeczy, które się wyróżniały (i cieszymy się, że zwróciła na to uwagę społeczność!), jest ogromna ilość pracy, jaką zespół wkłada w obsługę większej liczby funkcji CSS i interfejsu w internecie. W tym wydaniu Chrome Dev Insider pokażemy Ci, kto stoi za tą pracą, jak wspieramy programistów CSS i UI oraz co nas czeka w przyszłości. Dlatego z przyjemnością prowadzę to wydanie newslettera Insider.
O tym się mówi
W pierwszym Chrome Dev Insider podzieliliśmy się informacjami o inicjatywach Compat 2021 i Interop 2022, w ramach których dostawcy przeglądarek i podmioty z ekosystemu współpracują, aby wprowadzać do internetu więcej funkcji obsługiwanych przez wszystkie przeglądarki. Inicjatywa ta koncentruje się na CSS, ponieważ niezgodność przeglądarek jest jednym z największych wyzwań dla programistów CSS.
Dla większości z Was nie będzie to nowość, ale cieszymy się, że udało nam się już osiągnąć postęp w różnych przeglądarkach.
W zeszłym miesiącu Safari ogłosiło wprowadzenie dużej aktualizacji w postaci wersji beta Safari 16.0, która zawiera ciekawe funkcje, takie jak zapytania o kontenery, podsiatka i inspektor flexboxa. Ostatnie wersje Firefoxa i Chrome zawierają wiele ciekawych funkcji i poprawek. Co miesiąc omawiam najważniejsze nowości w stabilnych i beta wersjach przeglądarek w mojej serii postów Nowości na platformie internetowej.
Informacje z pierwszej ręki: wspieranie deweloperów CSS i UI
Rok 2022 okazał się ekscytujący pod względem funkcji CSS, dlatego uznaliśmy, że warto pokazać Ci, jak to wygląda od kuchni. Porozmawiałem z Uną Kravets, kierowniczką ds. relacji z programistami w zespole Web UI i Devtools, oraz z Nicole Sullivan, menedżerką produktu w zespole Web UI, która zajmuje się interfejsami API CSS i HTML, o tym, jak Chrome wspiera programistów interfejsów.
Zacznijmy od Was. Powiedzcie nam coś więcej o sobie.
Nicole: jestem menedżerką produktu ds. interfejsu internetowego w Chrome. Skupiam się na nowych interfejsach API CSS i HTML oraz na programistach i projektantach, którzy tworzą interfejsy. To ekscytująca przestrzeń, w której pojawiają się bardzo ważne interfejsy API, takie jak zapytania o kontenery, zakres i (miejmy nadzieję!) rytm pionowy.
Una: kieruję zespołami DevRel ds. interfejsu internetowego i Narzędzi deweloperskich. Skupiamy się na wspieraniu inżynierów interfejsu użytkownika na platformie internetowej i zapewniamy im narzędzia potrzebne do osiągnięcia sukcesu. Obejmuje to interfejsy API CSS i komponenty HTML, a także funkcje Narzędzi deweloperskich, które umożliwiają wyświetlanie aktywnych zmian i opinii.
W ciągu ostatnich kilku lat Chrome znacznie rozwinął się pod względem obsługi deweloperów interfejsu. Dlaczego tak długo to trwało? Jakie były największe wyzwania?
Una: Musieliśmy wykonać pewną pracę, aby pokazać, jak ważne jest to zadanie i dlaczego powinno być priorytetem. Zaczęliśmy od ankiety MDN DNA w 2019 r., która wykazała, że interfejs użytkownika jest jednym z największych problemów na platformie. Od tego czasu nadal korzystamy z danych jako przewodnika w MDN i w naszych wewnętrznych ankietach dotyczących zadowolenia deweloperów. Dzięki temu udało nam się uzyskać większe poparcie kierownictwa i mogliśmy nadać priorytet pracom inżynieryjnym związanym z niektórymi z najczęściej zgłaszanych funkcji dla deweloperów w przestrzeni interfejsu, które stanowią też większość inicjatyw takich jak Compat 2021 i Interop 2022.
Nicole: Oprócz uzyskania poparcia kierownictwa musieliśmy też znaleźć odpowiedni sposób na udostępnienie tych interfejsów API deweloperom. Gdy zaczynałem pracę w zespole Chrome, popełniłem ten błąd w projekcie o nazwie Layered API (w skrócie LAPIs). Interfejsy LAPI miały zapewnić deweloperom możliwość łatwego dodawania komponentów. Nadal uważam, że to świetny wynik, ale popełniliśmy wiele błędów. Najpierw skupiliśmy się na powiadomieniach typu toast i wirtualnej liście. Wyświetlanie powiadomień jest prawie niemożliwe w sposób dostępny, a lista wirtualna jest jednym z najtrudniejszych do prawidłowego wdrożenia komponentów. Nasze intencje były dobre, ale nie pomagało to deweloperom, więc zakończyliśmy ten projekt. Trudno się uczyć na własnych błędach, ale każdy z nich napędza renesans CSS i HTML, który właśnie się dokonuje.
Porozmawiajmy trochę więcej o interfejsach LAPI. Co się tam stało?
Nicole: W przypadku interfejsów LAPI wiedzieliśmy, że w internecie potrzebne jest środowisko deweloperskie komponentów typu „plug-in”, które byłoby bliższe tworzeniu natywnego interfejsu. Było jasne, że wymyślanie koła na nowo hamuje rozwój deweloperów. Nie zliczę, ile kart stworzyłem w swojej karierze! Próbowaliśmy rozwiązać ten problem, dostarczając JavaScript wraz z przeglądarką, co było bardzo trudne. Nikt wcześniej nie udostępniał JavaScriptu w przeglądarce i nie było jasne, jak powinien on współdziałać z kodem C++, który obsługuje silnik renderowania przeglądarki. Posłuchaliśmy innych dostawców przeglądarek (dziękujemy, Mozilla!) i wycofaliśmy się z tego podejścia. Dzięki temu udało nam się znaleźć znacznie lepsze rozwiązanie w postaci Open UI. Dzięki wykorzystaniu HTML i CSS uzyskujemy elastyczne, deklaratywne rozwiązania. Dzięki temu, że jest deklaratywny, możemy wbudować ułatwienia dostępu w sposób, który nie byłby tak łatwy w przypadku JavaScriptu. Jestem bardzo podekscytowany tym, dokąd to zmierza. Pracujemy nad obsługą elementów selectmenu, popup, tooltip, nav, accordion, tabs, carousel i toggle, które są bardzo ważnymi wzorcami projektowania interfejsu.
Wiele się nauczyliśmy. Wiem, że w tej dziedzinie były też inne inicjatywy, takie jak CSS Houdini. Jaka jest historia?
Una: Tak, CSS Houdini to kolejne miejsce, w którym uczymy się od społeczności. Istnieje wiele przydatnych funkcji Houdini, ale wiele z nich było zbyt niskiego poziomu, aby zyskać szersze zastosowanie i wsparcie. Zauważyliśmy, że wdrożenie interfejsów API niskiego poziomu niekoniecznie zmniejsza trudności deweloperów. Zamiast tego skupiliśmy się na rozwiązaniach i potrzebach wyższego rzędu, co pomogło nam uzyskać obsługę w różnych przeglądarkach i osiągnąć postęp w ekosystemie. Postępy śledzimy na stronie https://ishoudinireadyyet.com/.
Jeśli chodzi o obsługę różnych przeglądarek, inicjatywy takie jak Interop 2022 i Open UI przynoszą społeczności znaczące korzyści. Co mówią programiści?
Una: jednym z największych problemów, o jakich mówią nam deweloperzy, jest „zapewnienie, że projekt działa tak samo w różnych przeglądarkach”. Aby to osiągnąć, współpracujemy z innymi dostawcami przeglądarek, aby priorytetowo traktować i wdrażać niektóre z najczęściej zgłaszanych funkcji dla deweloperów. Opinie społeczności są w większości pozytywne. Dodatkowo dzięki dużemu projektowi przebudowy architektury o nazwie RenderingNG udało się wprowadzić niektóre z tych funkcji w znacznie wydajniejszy sposób. Deweloperzy cieszą się, że te długo oczekiwane funkcje, o które prosili od lat, są wreszcie wdrażane i działają w różnych przeglądarkach.
Nicole: W społeczności czuć podekscytowanie. Możesz go zobaczyć na Twitter. :)
Współpraca z ekosystemem okazała się kluczowa dla naszych sukcesów w ułatwianiu życia deweloperom. Wiem, że Twój zespół wykonał tam wiele pracy. Chcesz podać więcej szczegółów?
Nicole: Po pierwsze, jestem pod ciągłym wrażeniem projektów, które deweloperzy tworzą w internecie. Deweloperzy tworzą niesamowite rzeczy – od najmniejszych bibliotek po pełne platformy. To fantastyczna społeczność twórców. Chrome podejmuje wiele działań, aby być bardziej powiązanym z tymi projektami.
Na przykład kilka lat temu zaczęliśmy pracować z platformami JavaScript, takimi jak React i Angular. oraz metaframeworki, np. Next, Nuxt i Gatsby. W zeszłym roku zaczęliśmy robić to samo w przypadku narzędzi i frameworków interfejsu, takich jak Sass, Bootstrap i Material. Mam nadzieję, że w przyszłym roku uda nam się nawiązać współpracę z GreenSock i innymi narzędziami, które ułatwiają pracę programistom. Właśnie widziałem wystąpienie Cassie Evans z GreenSock na konferencji Smashing Conference. Bardzo mnie to zachęciło do współpracy z osobami z branży animacji.
Gdzie widzimy największe możliwości rozwoju ekosystemu interfejsu internetowego?
Una: Jeśli chodzi o duże możliwości, to myślę, że dopiero zaczynamy odkrywać, co jest możliwe w przypadku dostosowywanych stron internetowych. Nowe interfejsy API, takie jak zapytania o kontenery i funkcje multimedialne preferencji użytkownika CSS, zmieniają sposób, w jaki deweloperzy postrzegają elastyczne projektowanie. Cieszę się też z możliwości współpracy przy projektowaniu, które umożliwiają programistom i projektantom pracę w jedności z użytkownikami odwiedzającymi ich witryny.
Nicole, co Twój zespół ma w planach?
Nicole: Nie wszystkie eksploracje kończą się czymś, co można wdrożyć, ale jest wiele rzeczy, które mnie teraz bardzo ekscytują:
Una wspomniała o pierwszej kwestii, czyli o umożliwieniu elastycznego projektowania opartego na komponentach. Zawiera narzędzia do projektowania systemów kolorów, dzięki czemu projektanci mogą uwzględniać preferencje użytkowników, takie jak tryb ciemny. Na przykład przestrzeń kolorów OKLCH zachowuje spójną jasność w przypadku różnych odcieni. Projektanci mogą przejść od wyboru kolorów do projektowania relacji między nimi, nie uzyskując przy tym palet o mętnych kolorach.
Pracujemy też nad niektórymi z najczęściej zgłaszanych interfejsów API, takimi jak zapytania o kontenery, warstwy kaskadowe, selektor nadrzędny (:has), style ograniczone do zakresu i zagnieżdżanie. Deweloperzy potrzebują ich do tworzenia elastycznych systemów projektowania pełnych komponentów wielokrotnego użytku.
Animacje przewijania to kolejna ciekawa funkcja. Bardzo podoba mi się demo Steve'a Gardnera. Ma płynne przewijanie i fajne animacje samolotów, które są wywoływane podczas przewijania. Chociaż są one zabawne, trudno je dobrze wykonać, zwłaszcza z uwzględnieniem dostępności. Dlatego obecnie przeprowadzamy testy funkcji pod kątem ułatwień dostępu z udziałem użytkowników.
Najbardziej cieszą mnie wbudowane elementy sterujące interfejsu internetowego. Deweloperzy wciąż tworzą te same zestawy kart, więc myślę, że przeglądarka może im w tym pomóc. W projekcie Open UI pracujemy nad komponentami takimi jak menu wyboru, wyskakujące okienko, etykietka, karty, nawigacja, akordeon i przełącznik. Sprawdzamy, jak można wbudować ułatwienia dostępu w te podstawowe elementy przeglądarki, aby z czasem internet stał się dostępny domyślnie. Dzięki temu programiści mogą skupić się na bardziej złożonych i zniuansowanych problemach, a podstawowe kwestie, takie jak działanie kart, mogą być obsługiwane przez przeglądarkę. Prawdopodobnie wymaga to osobnego posta, więc na razie na tym zakończę.
Na koniec będziemy nadal inwestować w współdziałanie przeglądarek. Współpraca z zespołami WebKit i Gecko w celu zapewnienia spójności w zakresie wrażeń programistów była bardzo owocna. Deweloperzy jasno wyrazili swoje oczekiwania w tym zakresie.
A jeśli jeszcze nie znasz interfejsu Shared Element Transitions API zespołu Seamless Web, to wiedz, że zmieni on sposób projektowania stron internetowych. Wszystkie te subtelne przejścia, które pozwalają projektantom orientować swoje projekty w przestrzeni fizycznej, będą nie tylko możliwe, ale też łatwe. Jake Archibald ma świetną wersję demonstracyjną.
Jeśli standardy będą dobrze się rozwijać, być może jeszcze w tym roku przyjrzymy się rytmowi pionowemu. Możemy korzystać z LayoutNG, co otwiera przed nami wiele możliwości.
Dziękuję Wam. Jesteśmy pewni, że cała społeczność, podobnie jak my, z radością przyjmie nowe ulepszenia i funkcje, które pojawią się w interfejsie internetowym. Jest jeszcze wiele do zrozumienia, więc od czego Twoim zdaniem należy zacząć tę przygodę?
Una: podczas sesji Co nowego na platformie internetowej na konferencji I/O omówimy najważniejsze funkcje, które pojawią się w tym roku. Adam Argyle napisał też świetny artykuł o wszystkich nowych i nadchodzących funkcjach CSS. Na razie skupiłbym się na stabilnych wersjach i śledził postępy prac nad innymi funkcjami. Świetnym źródłem informacji na ten temat jest Twoja seria Nowości na platformie internetowej. Subskrypcja newslettera web.dev spowoduje, że deweloperzy będą otrzymywać te treści w swojej skrzynce odbiorczej. Deweloperzy, którzy chcą się zaangażować i pomóc w tych działaniach, mogą dołączyć do Open UI. To jeden z najlepszych sposobów na wsparcie tych prac.
Najważniejsze nadchodzące aktualizacje
Zgodnie z tradycją informujemy Cię o nadchodzącej zmianie, o której warto pamiętać podczas tworzenia treści internetowych.
Ogranicz maksymalny wiek plików cookie do 400 dni.
- Zmiana: gdy pliki cookie są ustawiane z wyraźnym atrybutem
Expires/Max-Age, wartość będzie teraz ograniczona do maksymalnie 400 dni w przyszłości. Wcześniej nie było limitu i pliki cookie mogły wygasnąć za kilka tysięcy lat. Celem tego limitu jest zachowanie równowagi między typowymi wzorcami użytkowania a poszanowaniem prywatności użytkowników. Każda witryna odwiedzana częściej niż co 400 dni może odświeżać pliki cookie, aby zapewnić ciągłość usługi. Użytkownicy mogą mieć pewność, że pliki cookie nie będą zalegać w ich przeglądarce przez tysiąclecia bez użycia. - Szacowany harmonogram: wprowadzenie w Chrome 104 (wersja stabilna 2 sierpnia 2022 r.).
- Wezwanie do działania dla deweloperów: deweloperzy mogą częściej niż dotychczas odświeżać pliki cookie, gdy użytkownicy odwiedzają ich witryny. W przeciwnym razie użytkownicy mogą zostać wylogowani po 400 dniach od pierwszego ustawienia pliku cookie.
Mamy nadzieję, że spodobało Ci się to wydanie Chrome Dev Insider. Jeśli umknął Ci pierwszy, znajdziesz go tutaj. W przyszłym kwartale udostępnimy Ci więcej informacji.
Do tego czasu podziel się z nami swoją opinią o tej edycji Chrome Dev Insider i powiedz nam, co możemy zrobić, aby ją ulepszyć.
Jak oceniasz tę edycję newslettera The Chrome Dev Insider? Podziel się swoją opinią