Witamy w drugiej edycji Chrome Dev Insider, w której podajemy informacje o nowościach w społeczności i przeglądarce Chrome. Oto nowy odcinek z wydarzeniami dla wtajemniczonych poświęconymi naszemu podejściu do naszej pracy. Przedstawiamy w nim najważniejsze zmiany, na które warto zwrócić uwagę.
Mam na imię Rachel Andrew i pracuję w zespole ds. relacji z deweloperami Chrome w swoich witrynach web.dev i developer.chrome.com. Zajmuję się internetem od ponad 20 lat, skupiając się na otwartych standardach internetowych i usługach porównywania cen. Należę też do grupy roboczej ds. usług porównywania cen.
Dwa miesiące temu zakończyliśmy Google I/O, podczas którego poinformowaliśmy o tym, jak pomagamy deweloperom w zwiększaniu szybkości i wydajności korzystania z internetu przy jednoczesnym zachowaniu bezpieczeństwa i prywatności danych użytkowników.
Jedną z rzeczy, które się zwróciły (i cieszymy się, że społeczność to dostrzegliśmy!), to ogromna wysiłka zespołu na rzecz tworzenia kolejnych funkcji CSS i interfejsu w internecie. W tym wydaniu Chrome Dev Insider poznasz kulisy tej pracy, dowiesz się, jak pracujemy nad wspieraniem deweloperów CSS i UI, a także co Cię czeka w przyszłości. Dlatego tak się cieszę, że mogę prowadzić to wydanie newslettera The Insider.
O tym się mówi
W pierwszym newsletterze Chrome Dev Insider opublikowaliśmy informacje na temat inicjatyw Compat 2021 i Interop 2022, w ramach których dostawcy przeglądarek i gracze w ekosystemie nawiązali współpracę, aby udostępnić więcej funkcji internetowych obsługiwanych przez wszystkie przeglądarki. Inicjatywa kładzie nacisk na CSS, ponieważ niezgodność przeglądarek jest jednym z największych wyzwań dla programistów CSS.
Dla większości użytkowników to nie jest wiadomość, ale z entuzjazmem obserwujemy postępy, jakie zrobiliśmy w przeglądarkach.
Na początku ubiegłego miesiąca ogłosiliśmy wprowadzenie bumperów w Safari 16.0 w wersji beta, które zawierają przydatne funkcje, takie jak Zapytania dotyczące kontenerów, podgdzie i inspektor Flexbox. Ostatnie wersje Firefoksa i Chrome zawierały wiele ciekawych funkcji i poprawek. Co miesiąc w nowej serii postów na platformie internetowej omawiam najważniejsze funkcje przeglądarek w stabilnych i beta.
Informacje dla wtajemniczonych: wspieranie deweloperów CSS i UI
Rok 2022 zapowiada się bardzo obiecująco w zakresie funkcji CSS, dlatego uznaliśmy, że to doskonała okazja, aby opowiedzieć kulisy naszej pracy. Spotkałam się z Uną Kravets, kierowniczą korporacji DevRel ds. UI i Devtools w firmie, oraz Nicole Sullivan, naszej menedżerki produktu ds. interfejsów internetowych, która zajmuje się interfejsami API CSS i HTML, aby opowiedzieć o tym, jak Chrome pomaga deweloperom UI.
Zacznijmy od Was obu. Czy chcesz nam powiedzieć coś więcej o sobie?
Nicole: Jestem menedżerem produktu ds. interfejsu internetowego w Chrome. Zajmuję się przede wszystkim nowymi interfejsami API CSS i HTML oraz programistami i projektantami, którzy tworzą UI. Pojawia się fascynująca branża, w której wprowadzamy kilka naprawdę ważnych interfejsów API, takich jak Container Zapytania, Zakres i rytm pionowy – mamy nadzieję.
Una: Kieruję zespołami ds. interfejsu internetowego i narzędzi deweloperskich w Narzędziach deweloperskich. Skupiamy się na wspieraniu inżynierów UI w platformie internetowej i dbamy o to, aby mieli narzędzia potrzebne do osiągnięcia sukcesu. Obejmuje to interfejsy API CSS i komponenty HTML oraz funkcje Narzędzi deweloperskich, które pozwalają obserwować aktywne zmiany i uzyskiwać opinie.
Od kilku lat pomoc dla programistów UI w Chrome nabiera tempa. Jak myślisz, dlaczego tak długo to trwało? Co było największym wyzwaniem?
Una: Musieliśmy trochę popracować, by pokazać, jak ważna jest ta praca i dlaczego powinna być priorytetem. Zaczęliśmy od badania DNA MDN w 2019 roku, w którym stwierdzono, że interfejs użytkownika jest jednym z najpoważniejszych problemów na platformie. Od tego czasu wykorzystujemy dane jako nasz przewodnik po MDN oraz naszych wewnętrznych ankietach zadowolenia deweloperów. W efekcie udało nam się uzyskać większe poparcie na najwyższym szczeblu organizacji i potraktować priorytetowo prace inżynieryjne wokół niektórych najbardziej pożądanych funkcji dla programistów w interfejsie, które są w większości uwzględniane w inicjatywach takich jak Compat 2021 i Interop 2022.
Nicole: Poza zdobyciem poparcia na najwyższym szczeblu organizacji musieliśmy też znaleźć odpowiedni sposób na przekazanie tych interfejsów API deweloperom. Kiedy dołączyłem do Chrome, zepsułam to zadanie w projekcie Layered APIs (w skrócie LAPI). Platformy LAPI miały na celu zapewnienie deweloperom możliwości skorzystania z prostych komponentów. Nadal uważam, że wynik był doskonały, ale popełnialiśmy wiele błędów. Najpierw skupiliśmy się na wyświetlanych powiadomieniach i liście wirtualnej. Przystępność wypowiedzi jest praktycznie niemożliwa, a wirtualna lista jest jednym z najtrudniejszych elementów do zapewnienia jej poprawności. Nasze intencje były dobre, ale program nie pomagał deweloperom, dlatego wycofaliśmy ten projekt. Trudno jest się tego nauczyć, ale każdy błąd napędza do renesansu CSS i HTML, który mamy obecnie.
Porozmawiajmy o LAPI. Co się stało?
Nicole: W przypadku LAPI wiedzieliśmy, że w internecie potrzebne jest doświadczenie programistów komponentów, które było bliższe tworzeniu natywnego interfejsu użytkownika. Wyraźnie było widać, że wypracowanie na nowo wynalazku wstrzymuje programistów. Nie potrafię policzyć, ile kart udało mi się stworzyć w mojej karierze! Staraliśmy się rozwiązać ten problem, przesyłając JavaScript do przeglądarki, co było bardzo trudne. Nikt wcześniej nie używał języka JavaScript w przeglądarce i nie było jasne, jak powinien on współdziałać z kodem C++ działającym w trybie renderowania przeglądarki. Wysłuchaliśmy opinii innych dostawców przeglądarek (Dziękuję, Mozilli!) i postanowiliśmy zrezygnować z tego podejścia. Dzięki otwartemu interfejsowi udało nam się znaleźć coś znacznie lepszego. Opierając się na kodach HTML i CSS, otrzymujemy elastyczne, deklaratywne rozwiązania. Dzięki temu, że funkcja ta działa deklaratywnie, możemy osadzić ułatwienia dostępu w sposób, który nie byłby tak łatwy w obsłudze języka JavaScript. Z ekscytacją patrzę w przyszłość. Pracujemy nad obsługą menu wyboru, wyskakującego okienka, etykietki, nawigacji, akordeonu, kart, karuzeli i przełącznika, które są niezwykle istotne w projektowaniu interfejsu.
Dzięki temu wiele się dowiedzieliśmy. Wiem, że są też inne inicjatywy w tej dziedzinie, takie jak CSS Houdini. O co chodzi?
Una: Tak, CSS Houdini to kolejne miejsce, w którym uczyliśmy się od naszej społeczności. Istnieje mnóstwo przydatnych funkcji Houdini, ale wiele z nich jest zbyt niskich, aby stały się szersze i bardziej przydatne. Zdaliśmy sobie sprawę, że wdrożenie niskopoziomowych interfejsów API nie musi ułatwiać deweloperom korzystania. Zamiast tego skupienie się na rozwiązaniach i potrzebach wyższego poziomu pomogło uzyskać obsługę różnych przeglądarek i uzyskać dostęp do kolejnych elementów tego ekosystemu. Obecnie śledzimy postępy na stronie https://ishoudinireadyyet.com/.
Jeśli mowa o obsłudze różnych przeglądarek, inicjatywy takie jak Interop 2022 i Open UI (Otwarty interfejs) przynoszą społeczności istotne korzyści. Jakie są opinie deweloperów?
Una: Jednym z głównych problemów zgłaszanych przez programistów jest „umożliwienie działania projektowania tak samo w różnych przeglądarkach”. Aby rozwiązać ten problem, współpracujemy z innymi dostawcami przeglądarek, aby nadać priorytet wybranym funkcjom dla programistów i nadać im priorytet. Opinie, które otrzymaliśmy od naszej społeczności, są niezwykle pozytywne. Poza tym dzięki staraniom o nazwie RenderingNG udało nam się uzyskać znacznie lepsze wyniki niektórych z tych funkcji. Programiści cieszą się, że te wyczekiwane funkcje, o które prosili od lat, w końcu są już w pracy i dostępne w różnych przeglądarkach.
Nicole: Ekscytacja w społeczności jest emocjonalna. Możesz zobaczyć to na Twitterze. :)
Współpraca z ekosystemem okazała się kluczem do sukcesu w zakresie żyje łatwiej. Wiem, że Pana/Pani zespół wykonał dużo pracy. Chcesz podać więcej szczegółów?
Nicole: Nieustannie podziwiam projekty tworzone przez programistów w internecie. Deweloperzy tworzą niesamowite elementy – od najmniejszej biblioteki po pełne platformy. To świetna społeczność twórców. Aby zwiększyć swoją komunikację z tymi projektami, Chrome musi wykonać jeszcze kilka czynności.
Kilka lat temu zaczęliśmy na przykład korzystać z platform JavaScript takich jak React czy Angular. A także metaplatformy, takie jak Next, Nuxt i Gatsby. W zeszłym roku zaczęliśmy korzystać z narzędzi i platform UI takich jak Sass, Bootstrap i Material. Mam nadzieję, że w nadchodzącym roku uda nam się nawiązać współpracę z GreenSock i innymi narzędziami, żyje łatwiej. Właśnie widziałam Cassie Evans z GreenSock na konferencji Smashing Conference i bardzo podekscytowała mnie praca z ludźmi w branży animacji.
Gdzie dostrzegamy największe możliwości dla ekosystemu interfejsu internetowego?
Una: Jeśli chodzi o wielkie możliwości, mam wrażenie, że stale doskonalimy nasze rozwiązania internetowe. Nowe interfejsy API, takie jak zapytania dotyczące kontenerów i funkcje multimediów związane z preferencjami użytkownika w usłudze porównywania cen, zmieniają sposób, w jaki programiści wyświetlają elastyczne projektowanie. Bardzo podoba mi się również możliwości współpracy podczas projektowania, dzięki którym deweloperzy i projektanci mogą współpracować z użytkownikami odwiedzającymi ich witryny.
Nicole, co planuje Pana/Pani zespół na przyszłość?
Nicole: Nie wszystko sprowadza się do wysyłki, ale na razie wiele rzeczy, które mi się podoba, to:
Nie wspomnieliśmy wcześniej, że umożliwiamy elastyczne projektowanie oparte na komponentach. Zawiera narzędzia do projektowania systemów kolorów, dzięki którym projektanci mogą dostosować się do preferencji użytkownika, na przykład w trybie ciemnym. Na przykład przestrzeń kolorów OKLCH utrzymuje stabilną jasność niezależnie od odcieni. Projektanci mogą wybierać różne kolory do budowania relacji między nimi, ale nie skończyć z efektami błotnistymi paletami.
Pracujemy również nad niektórymi z najczęściej żądanych interfejsów API, takimi jak zapytania dotyczące kontenerów, warstwy kaskadowe, selektor nadrzędny (:has), style zakresu i zagnieżdżanie. Deweloperzy potrzebują ich, aby móc tworzyć elastyczne systemy projektowe pełne komponentów wielokrotnego użytku.
Ciekawe są też animacje z linkami do przewijania. Bardzo podoba mi się demonstracja Steve'a Gardnera. Podczas przewijania wyświetla się płynne przewijanie, a zimne animacje samolotu. Choć te tytuły są ciekawe, może być trudno wybrać ich prawidłowe rozwiązanie, zwłaszcza jeśli weźmiemy pod uwagę ułatwienia dostępu. Obecnie przeprowadzamy testy tej funkcji z myślą o użytkownikach.
Najbardziej podobają mi się wbudowane elementy interfejsu internetowego. Programiści wciąż tworzą ten sam zestaw kart, więc przeglądarka może w tym pomóc. W sekcji Otwórz UI pracujemy nad komponentami takimi jak menu wyboru, wyskakujące okienko, etykietka, karty, elementy nawigacyjne, akordeon i przełącznik. Sprawdzamy, jak by wyglądało włączenie ułatwień dostępu w elementach podstawowych przeglądarek, tak aby z czasem internet mógł stać się domyślnie dostępny. Programiści mogą skupić się na bardziej złożonych i szczegółowych problemach, a przeglądarka obsługuje podstawowe informacje, takie jak sposób wyświetlania kart. To prawdopodobnie potrzebuje osobnego posta, więc na razie nic nie zrobię.
Planujemy nadal usprawniać współdziałanie przeglądarek. Współpraca z członkami firm WebKit i Gecko nad zapewnieniem spójności sposobu tworzenia aplikacji sprawiła nam przyjemność. Usłyszeliśmy od deweloperów głośno, że chcą tego osiągnąć.
Przypominamy, że interfejs Shared Element Migrates API opracowany przez zespół Seamless Web zmieni sposób projektowania stron internetowych. Wszystkie te subtelne przejścia, które pozwolą projektantom orientować się w projektach w przestrzeni fizycznej, będą nie tylko łatwe, ale też możliwe. Jake Archibald ma świetną prezentację.
Być może, jeśli standardy pójdą w tym roku, może nawet spojrzymy na rytm pionowy. Możemy rozbudować układ LayoutNG, który daje dostęp do tak wielu funkcji.
Dziękujemy. Jesteśmy pewni, że cała społeczność, tak jak nasza, cieszy się na obserwowanie coraz to nowego udoskonaleń i funkcji w świecie interfejsu internetowego. Przed nami jeszcze mnóstwo pogadać, więc od czego powinien zacząć podróż?
Una: podczas sesji Co nowego na platformie internetowej na konferencji I/O omówimy najważniejsze funkcje, które wprowadzamy w tym roku. Adam Argyle napisał też ciekawy artykuł na temat wszystkich nowych i zbliżających się stron docelowych w usługach porównywania cen. Na bieżąco koncentrowałbym się na wersjach stabilnych i informuję o nadchodzących pracach nadchodzących. Warto zapoznać się z serią Nowości w platformie internetowej. Zasubskrybowanie newslettera web.dev spowoduje udostępnienie tych treści deweloperom Odebrane. Dla deweloperów, którzy chcą się zaangażować i pomóc we wszystkim, warto dołączyć do Open UI.
Najważniejsze nadchodzące zmiany
Zgodnie z naszą tradycją informujemy o nadchodzących zmianach, o których warto pamiętać podczas tworzenia stron internetowych.
Ogranicz maksymalny wiek plików cookie do 400 dni
- Aktualizacja: jeśli pliki cookie są ustawione z wyraźnym atrybutem
Expires/Max-Age, wartość będzie teraz ograniczona do maksymalnie 400 dni do przodu. Wcześniej nie było takiego limitu, a pliki cookie mogą wygasać na wiele tysięcy lat w przyszłości. Ten limit ma na celu znalezienie równowagi między typowymi wzorcami użytkowania a poszanowaniem prywatności użytkownika. Każda witryna odwiedzana częściej niż co 400 dni może odświeżać pliki cookie, aby zapewnić ciągłość usługi, a użytkownicy mogą mieć pewność, że pliki cookie nie pozostaną w przeglądarce przez tysiące lat bez użycia. - Przybliżony harmonogram: dostawa w Chrome 104 (stabilna od 2 sierpnia 2022 r.).
- Wezwanie do działania od dewelopera: deweloperzy mogą być zmuszeni do częstszego odświeżania plików cookie podczas odwiedzania swoich stron. W przeciwnym razie użytkownicy mogą zostać wylogowani po 400 dniach od pierwszego ustawienia pliku cookie.
Mam nadzieję, że podobało Ci się to wydanie Chrome Dev Insider. Jeśli Ci umknęło, zobacz pierwszy. W następnym kwartale zamierzamy udostępnić Ci jeszcze więcej funkcji.
Tymczasem dziel się z nami opinią o tym wydaniu Chrome Dev Insider i powiedz nam, co możemy zrobić, aby go ulepszyć.
Jak oceniasz to wydanie The Chrome Dev Insider? Prześlij opinię.