Witamy w drugim wydaniu newslettera Chrome Dev Insider, w którym informujemy o najnowszych i najciekawszych wydarzeniach w środowisku społeczności i Chrome. To nowy odcinek z opowiadaniami naszych pracowników o tym, jak podchodzimy do pracy, oraz krótki przegląd najważniejszych aktualizacji, na które warto zwrócić uwagę.
Nazywam się Rachel Andrew. Należę do zespołu ds. relacji z deweloperami Chrome i będę prowadzić treści na web.dev i developer.chrome.com. Pracuję w internecie od ponad 20 lat, głównie nad otwartymi standardami internetowymi i CSS. Jestem też członkiem grupy roboczej CSS.
Dwa miesiące temu zakończyliśmy konferencję Google I/O, podczas której ogłosiliśmy najważniejsze informacje o tym, jak wspieramy deweloperów w czynieniu internetu szybszym i bardziej wydajnym, przy jednoczesnym zachowaniu bezpieczeństwa i prywatności danych użytkowników.
Jedną z rzeczy, które najbardziej się wyróżniały (i z których społeczność zdaje sobie sprawę), jest ogromna ilość pracy, jaką zespół wkłada w obsługę w internecie większej liczby funkcji CSS i interfejsu użytkownika. W tym wydaniu Chrome Dev Insider poznasz osoby, które pracują nad tymi funkcjami, dowiesz się, jak wspieramy twórców interfejsów i aplikacji w zakresie CSS oraz co nas czeka w tej kwestii. Dlatego z przyjemnością przedstawiam Ci ten odcinek Insidera.
O tym się mówi
W pierwszym wydaniu Chrome Dev Insider udostępniliśmy informacje o inicjatywach Compat 2021 i Interop 2022, w ramach których producenci przeglądarek i uczestnicy ekosystemu współpracują ze sobą, aby udostępnić w internecie więcej funkcji obsługiwanych we wszystkich przeglądarkach. Inicjatywa koncentruje się na CSS, ponieważ niezgodność z przeglądarkami jest jednym z największych wyzwań dla programistów CSS.
Chociaż nie jest to nowość dla większości użytkowników, cieszy nas, że udało nam się już wprowadzić te zmiany w różnych przeglądarkach.
W początkowej fazie ubiegłego miesiąca Safari ogłosiło udostępnienie wersji bumper Safari 16.0 w wersji beta, która zawiera takie ciekawe funkcje jak Container Queries, subgrid i Flexbox Inspector. Ostatnie wersje Firefoxa i Chrome zawierały wiele ciekawych funkcji i poprawek. W cyklu postów Nowe na platformie internetowej omawiam najważniejsze funkcje w stabilnych i beta-wersjach przeglądarek.
Wskazówki: pomoc dla deweloperów CSS i UI
Rok 2022 okazał się ekscytującym okresem dla funkcji usługi porównywania cen, dlatego uznaliśmy, że to dobry moment, aby pokazać Ci, co dzieje się za kulisami. Rozmawiałem z Uną Kravets, kierowniczką zespołu ds. pomocy deweloperom w przygotowaniu interfejsu użytkownika i Narzędzi deweloperskich, oraz Nicole Sullivan, menedżerem produktu ds. interfejsu użytkownika, która specjalizuje się w interfejsach API CSS i HTML, o tym, jak Chrome pomaga deweloperom interfejsu użytkownika.
Zacznijmy od Was. Czy możesz opowiedzieć nam coś więcej o sobie?
Nicole: jestem menedżerem produktu odpowiedzialnym za interfejs internetowy w Chrome. Skupiam się głównie na nowych interfejsach API do obsługi CSS i HTML oraz na deweloperach i projektantach, którzy tworzą interfejs użytkownika. To ekscytująca dziedzina, w której pojawiają się ważne interfejsy API, takie jak zapytania dotyczące kontenera, zakres i (miejmy nadzieję!) rytm pionowy.
Una: kieruję zespołami ds. obsługi deweloperów interfejsu internetowego i Narzędzi deweloperskich. Skupiamy się na wspieraniu inżynierów interfejsu użytkownika na platformie internetowej i zapewnianiu im narzędzi niezbędnych do osiągnięcia sukcesu. Obejmuje to interfejsy API CSS i komponenty HTML oraz funkcje Narzędzi deweloperskich, które umożliwiają wyświetlanie bieżących zmian i opinii.
W ostatnich latach wsparcie Chrome dla deweloperów interfejsu użytkownika znacznie się rozwinęło. Dlaczego Twoim zdaniem zajęło to tak długo? Jakie były największe wyzwania?
Una: musieliśmy pokazać, jak ważna jest ta praca i dlaczego powinna być priorytetem. Zaczęliśmy od ankiety DNA MND z 2019 r., w której użytkownicy wskazali interfejs jako jeden z największych problemów na platformie. Od tego czasu korzystamy z danych w MDN i własnych wewnętrznych ankiet dotyczących zadowolenia deweloperów. Dzięki temu udało nam się uzyskać większe wsparcie kierownictwa i nadać priorytety pracy inżynierów w zakresie najbardziej pożądanych funkcji dla deweloperów w obszarze interfejsu użytkownika, które są też głównym celem inicjatyw takich jak Compat 2021 i Interop 2022.
Nicole: oprócz uzyskania poparcia kierownictwa musieliśmy też znaleźć odpowiedni sposób udostępnienia tych interfejsów API programistom. Gdy zaczynałam pracę w Chrome, popełniłam błąd w projekcie o nazwie Layered APIs (czyli LAPIs). LAPIs to komponenty, które mają ułatwiać deweloperom pracę. Nadal uważam, że to był świetny cel, ale popełniliśmy wiele błędów. Najpierw skupiliśmy się na powiadomieniach typu Toast i wirtualnej liście. Komunikaty typu toast są prawie niemożliwe do uczynienia dostępnymi, a lista wirtualna jest jednym z najtrudniejszych komponentów do prawidłowego stworzenia. Nasze intencje były dobre, ale nie pomagały deweloperom, więc zakończyliśmy ten projekt. Trudno jest uczyć się na własnych błędach, ale każdy błąd przyczynia się do renesansowego rozwoju CSS i HTML.
Porozmawiajmy teraz nieco więcej o LAPI. Co się stało?
Nicole: wiemy, że w przypadku interfejsów LAPI w internecie potrzebne są komponenty, które można wstawiać, a które są bliższe tworzeniu natywnych interfejsów. Było jasne, że wymyślanie koła na nowo hamowało deweloperów. Nie zliczę kart, które stworzyłem w swojej karierze. Próbowaliśmy rozwiązać ten problem, dołączając do przeglądarki JavaScript, co było bardzo trudne. Nikt wcześniej nie wprowadził JavaScriptu do przeglądarki, więc nie było jasne, jak powinien on współdziałać z kodem C++, który obsługuje mechanizm renderowania przeglądarki. Po wysłuchaniu opinii innych dostawców przeglądarek (dziękujemy, Mozilla!) zrezygnowaliśmy z tego podejścia i znaleźliśmy coś znacznie lepszego – Open UI. Dzięki korzystaniu z HTML i CSS możemy tworzyć elastyczne, deklaracyjne rozwiązania. Dzięki temu, że jest to język deklaratywny, możemy wbudować ułatwienia dostępu w sposób, który nie byłby tak łatwy do osiągnięcia za pomocą JavaScriptu. Cieszę się, że to się udało. Pracujemy nad obsługą menu wyboru, wyskakujących okienek, tekstów narzędziowych, nawigacji, menu rozwijanego, kart, przewijania i przełącznika, które są kluczowymi wzorcami projektowania interfejsu.
Dowiedzieliśmy się bardzo wiele. Wiem też, że w tej dziedzinie były też inne inicjatywy, np. CSS Houdini. Jaka jest historia?
Una: Tak, CSS Houdini to kolejne miejsce, w którym uczyliśmy się od społeczności. Istnieje mnóstwo przydatnych funkcji Houdini, ale wiele z nich było zbyt niskiego poziomu, aby mogły być powszechnie stosowane i obsługiwane. Zdaliśmy sobie sprawę, że implementacja interfejsów API na niskim poziomie niekoniecznie zmniejsza trudności, z jakimi borykają się deweloperzy. Zamiast tego skupiliśmy się na rozwiązaniach i potrzebach na wyższym poziomie, co pozwoliło nam uzyskać obsługę w różnych przeglądarkach i stronach docelowych, które są niezbędne do wprowadzenia zmian w ekosystemie. Obecnie śledzimy postępy na stronie https://ishoudinireadyyet.com/.
Mówiąc o obsługiwaniu wielu przeglądarek, warto wspomnieć o inicjatywach takich jak Interop 2022 i Open UI, które przynoszą społeczności znaczące korzyści. Co słyszysz od deweloperów?
Una: jednym z największych problemów, o których słyszymy od deweloperów, jest „ujednolicenie wyglądu w różnych przeglądarkach”. Współpracując z innymi dostawcami przeglądarek, ustaliliśmy priorytety i wprowadziliśmy niektóre z najczęściej żądanych funkcji dla deweloperów. Opinie społeczności były bardzo pozytywne. Dodatkowo dzięki gruntownej zmianie architektury o nazwie RenderingNG udało się wprowadzić niektóre z tych funkcji z większą wydajnością. Deweloperzy są podekscytowani, że te długo oczekiwane funkcje, o których od lat prosili, są wreszcie opracowywane i wprowadzane w różnych przeglądarkach.
Nicole: w społeczności panuje ogromne podekscytowanie. Możesz je zobaczyć na Twitter. :)
Współpraca z ekosystemem okazała się kluczowa dla naszego sukcesu w ułatwianiu życia deweloperom. Wiem, że Twój zespół wykonał w tej sprawie dużo pracy. Czy możesz podać więcej szczegółów?
Nicole: Po pierwsze, zawsze podziwiam projekty tworzone przez deweloperów w internecie. Od najmniejszych bibliotek po pełne frameworki – deweloperzy tworzą niesamowite rzeczy. To fantastyczna społeczność twórców. Chrome podejmuje wiele działań, aby lepiej współpracować z tymi projektami.
Na przykład kilka lat temu zaczęliśmy korzystać z ramek JavaScript, takich jak React i Angular. oraz metaramy, np. Next, Nuxt i Gatsby. W zeszłym roku zaczęliśmy robić to samo z narzędziami i ramami interfejsu użytkownika, takimi jak Sass, Bootstrap i Material. Mam nadzieję, że w przyszłym roku będziemy mogli współpracować z GreenSock i innymi narzędziami, które ułatwiają życie programistom. Właśnie słuchałem wystąpienia Cassie Evans z GreenSock na konferencji Smashing Conference i jestem bardzo podekscytowany możliwością współpracy z osobami zajmującymi się animacją.
Gdzie widzimy największe możliwości dla ekosystemu interfejsu internetowego?
Una: jeśli chodzi o wielkie możliwości, uważam, że dopiero zaczynamy odkrywać, co jest możliwe w zakresie dostosowywalnych doświadczeń w internecie. Nowe interfejsy API, takie jak zapytania o kontenery i funkcje multimediów w CSS dotyczących preferencji użytkownika, zmieniają sposób, w jaki deweloperzy postrzegają projektowanie elastyczne. Cieszę się też, że projektowanie w ramach współpracy umożliwia programistom i projektantom współpracę z użytkownikami odwiedzającymi ich witryny.
A co dalej, Nicole? Jakie są plany Twojego zespołu?
Nicole: Nie wszystkie eksploracje prowadzą do czegoś, co można wdrożyć, ale jest wiele rzeczy, które mnie obecnie bardzo ekscytują:
Una wspomniała już o pierwszym z nich: umożliwiamy projektowanie elastyczne oparte na komponentach. Zawiera on narzędzia do projektowania systemów kolorów, dzięki którym projektanci mogą uwzględniać preferencje użytkowników, np. tryb ciemny. Na przykład przestrzeń kolorów OKLCH zapewnia spójność jasności w różnych odcieniach. Projektanci mogą przejść od wybierania kolorów do projektowania relacji między kolorami, nie kończąc na paletach o mętnym wyglądzie.
Pracujemy też nad interfejsami API, które są najczęściej zgłaszane, np. zapytania dotyczące kontenera, warstwy kaskadowe, selektor rodzica (:has), style ograniczone i zagnieżdżanie. Deweloperzy potrzebują ich, aby tworzyć elastyczne systemy projektowania pełne komponentów wielokrotnego użytku.
Przewijanie połączonych animacji to kolejna zabawna funkcja. Bardzo podoba mi się prezentacja Steve'a Gardnera. W filmie widać płynne przewijanie i fajne animacje samolotów, które są uruchamiane podczas przewijania. Chociaż są one zabawne, ich prawidłowe wykonanie może być trudne, zwłaszcza jeśli weźmiemy pod uwagę potrzeby osób z ograniczonymi możliwościami. Obecnie przeprowadzamy testy dostępności tej funkcji z udziałem użytkowników.
Osobiście najbardziej ekscytuje mnie wbudowany interfejs użytkownika w przeglądarce. Deweloperzy wciąż tworzą te same zestawy kart, a przeglądarka może im w tym pomóc. W zespole Open UI pracujemy nad komponentami takimi jak menu wyboru, wyskakujące okienka, tooltipy, karty, nawigacja, menu rozkładane i przełączniki. Badamy, jak wdrożyć ułatwienia dostępu w tych podstawowych funkcjach przeglądarki, aby z czasem internet stał się domyślnie dostępny dla wszystkich. Dzięki temu programiści mogą skupić się na bardziej złożonych i subtelnych problemach, a przeglądarka może obsługiwać podstawowe funkcje, takie jak karta kart. Ten temat wymaga pewnie osobnego posta, więc na razie na tym poprzestanę.
W końcu nadal będziemy inwestować w interoperacyjność między przeglądarkami. Współpraca z zespółami WebKit i Gecko nad zapewnieniem spójności w procesie tworzenia była świetnym doświadczeniem. Słyszeliśmy wyraźnie, że deweloperzy tego chcą.
Jeśli jeszcze tego nie zrobiliście, to interfejs API Przejścia między elementami współdzielonymi zespołu Seamless Web zmieni sposób projektowania stron internetowych. Wszystkie te subtelne przejścia, które pozwalają projektantom na orientację w przestrzeni fizycznej, będą nie tylko możliwe, ale i łatwe. Jake Archibald ma świetne demo.
Jeśli wszystko pójdzie zgodnie z planem, w tym roku możemy nawet przyjrzeć się rytmowi pionowemu. Możemy tworzyć na podstawie LayoutNG, co umożliwia dostęp do wielu funkcji.
Dziękuję Wam. Jestem przekonany, że cała społeczność, podobnie jak my, z ciekawością śledzi tempo, w jakim wprowadzamy ulepszenia i nowe funkcje do interfejsu internetowego. Nadal jest wiele do zrobienia, więc od czego według Ciebie należy zacząć?
Una: podczas sesji na konferencji I/O Nowości na platformie internetowej omówiliśmy najważniejsze funkcje, które pojawią się w tym roku. Adam Argyle napisał też świetny artykuł o wszystkich nowych i nadchodzących stronach usług porównywania cen. Na bieżąco skupiam się na stabilnych wersjach, ale mam też na uwadze inne projekty. Wspaniałe artykuły z cyklu Nowości na platformie internetowej mogą Ci w tym pomóc. Subskrypcja newslettera web.dev spowoduje, że te treści trafią do skrzynki odbiorczej deweloperów. Jeśli chcesz się zaangażować i pomóc w tym zakresie, dołącz do Open UI.
Najważniejsze nadchodzące zmiany
Zgodnie z tradycją informujemy o nadchodzącej zmianie, którą należy wziąć pod uwagę podczas tworzenia stron internetowych.
Ogranicz maksymalny czas przechowywania plików cookie do 400 dni
- Zmiany: gdy pliki cookie są ustawiane za pomocą jawnego atrybutu
Expires/Max-Age, ich 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ąć dopiero po wielu tysiącleciach. Celem tego limitu jest zachowanie równowagi między typowymi wzorcami użytkowania a 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ść działania usługi. Użytkownicy mogą mieć pewność, że pliki cookie nie będą zalegać w ich przeglądarce przez tysiące lat bez użycia. - Przewidywany harmonogram: wdrożenie w Chrome 104 (wersja stabilna 2 sierpnia 2022 r.).
- Wezwanie do działania dla deweloperów: deweloperzy mogą potrzebować proaktywnego odświeżania plików cookie częściej niż do tej pory, gdy użytkownicy odwiedzają ich witryny. W przeciwnym razie użytkownicy mogą zostać wylogowani 400 dni po początkowym ustawieniu pliku cookie.
Mam nadzieję, że ten numer „Chrome Dev Insider” przypadł Ci do gustu. Jeśli Ci go brakowało, oto pierwszy. W najbliższym kwartale udostępnimy więcej informacji.
Do tego czasu powiedz nam, co myślisz o tym wydaniu Wiadomości dla deweloperów Chrome, i co możemy zrobić, aby było lepsze.
Jak oceniasz ten numer The Chrome Dev Insider? Prześlij opinię