Witamy w drugim wydaniu Chrome Dev Insider, w którym informujemy o nowościach w społeczności i na forum Chrome. Oto nowy odcinek z relacjami od wtajemniczonych o tym, jak podchodzimy do naszej pracy. Opisujemy w nim najważniejsze informacje, na które warto zwrócić uwagę.
nazywam się Rachel Andrew i pracuję w zespole Chrome ds. relacji z deweloperami, jestem kierownikiem ds. treści w witrynach web.dev i developer.chrome.com. Pracuję w internecie od ponad 20 lat, koncentrując się na otwartych standardach internetowych i usługach porównywania cen, oraz należę do grupy roboczej ds. usług porównywania cen.
Dwa miesiące temu zakończyło się wydarzenie Google I/O, podczas którego przedstawiliśmy najważniejsze informacje o tym, jak pomagamy deweloperom zwiększyć szybkość i wydajność sieci przy jednoczesnym zapewnieniu bezpieczeństwa i prywatności danych użytkowników.
Jedną z rzeczy, które zwróciły naszą uwagę (i cieszymy się, że społeczność to doceniła), to ogrom pracy zespołu, który wkłada dużo pracy we wprowadzenie większej liczby funkcji CSS i interfejsu w internecie. W tym wydaniu magazynu Chrome Dev Insider dowiesz się, kto stoi za tymi zmianami, jak staramy się wspierać programistów CSS i interfejsów oraz co nas czeka. Dlatego z przyjemnością poprowadzimy tę edycję newslettera Insider.
O tym się mówi
W pierwszym wydaniu kanału Chrome Dev Insider zamieściliśmy pewne informacje na temat inicjatyw Compat 2021 i Interop 2022, w ramach których dostawcy przeglądarek i gracze ekosystemu współpracują, aby udostępniać w internecie więcej funkcji obsługiwanych przez wszystkie przeglądarki. Inicjatywa kładzie duży nacisk na CSS, ponieważ niezgodność przeglądarek to jedno z największych wyzwań, z jakimi spotykają się programiści CSS.
Dla większości osób ta wiadomość może nie być wiadomością, ale cieszy nas obserwowanie naszych postępów w różnych przeglądarkach.
Na początku zeszłego miesiąca informowaliśmy w Safari o ogłoszeniu wersji bumperów w przeglądarce Safari 16.0 w wersji beta, która obejmuje takie funkcje jak Zapytania o kontenery, subgrid i inspektor Flexbox. Najnowsze wersje przeglądarek Firefox i Chrome zawierają wiele ciekawych funkcji i poprawek. W serii postów o nowych nawykach na platformie internetowej co miesiąc wymieniam najważniejsze kwestie dotyczące przeglądarek stabilnych i beta.
Informacja od wtajemniczonych: pomoc dla programistów CSS i UI
Rok 2022 zapowiada się niezwykle ciekawym rokiem dla funkcji CSS, dlatego uznaliśmy, że to dobry moment, aby zajrzeć za kulisy. Spotkałam się z Una Kravets, kierownikiem ds. interfejsu internetowego i Devtools, oraz Nicole Sullivan, naszą menedżerką ds. interfejsu internetowego, która zajmuje się interfejsami API CSS i HTML, aby porozmawiać o drodze Chrome do wspierania deweloperów UI.
Zacznijmy od Ciebie. Czy możemy powiedzieć coś więcej o sobie?
Nicole: Jestem menedżerką produktu ds. interfejsu internetowego w Chrome. Specjalnie zajmuję się nowymi interfejsami API CSS i HTML oraz programistami i projektantami, którzy tworzą UI. To ekscytująca przestrzeń, w której pojawiają się naprawdę ważne interfejsy API, takie jak Zapytania o kontenery, Zakres i rytm pionowy (mamy nadzieję!).
Una: zarządzam zespołami ds. interfejsu internetowego i narzędzi deweloperskich. Skupiamy się na wspieraniu inżynierów interfejsu użytkownika platformy internetowej i zapewniamy im narzędzia niezbędne do osiągnięcia sukcesu. Obejmuje to interfejsy CSS API i komponenty HTML oraz funkcje DevTools, które pozwalają zobaczyć aktywne zmiany i opinie.
W ciągu ostatnich kilku lat liczba osób tworzących interfejs w Chrome nabrała tempa. Jak myślisz, dlaczego przybycie tutaj trwało tak długo? Jakie były największe wyzwania?
Una: musieliśmy wykonać pewne działania, aby pokazać, jak ważna jest ta praca i dlaczego powinna być priorytetem. Zaczęliśmy od ankiety MDN na temat DNA w 2019 roku, w której zidentyfikowaliśmy interfejs użytkownika jako największe problemy platformy. Od tego czasu nadal używamy tych danych do badania MDN oraz naszych wewnętrznych ankiet badających zadowolenie programistów. W rezultacie udało nam się zdobyć przewagę nad liderami i skoncentrować się na pracach inżynieryjnych nad najpopularniejszymi funkcjami dla programistów w obszarze interfejsu, które również są wykorzystywane w takich inicjatywach jak Compat 2021 i Interop 2022.
Nicole: Oprócz zachęcenia przywódców trzeba było też znaleźć właściwy sposób na udostępnienie tych interfejsów API deweloperom. Gdy dołączyłam do Chrome, pomyliłam się w projekcie o nazwie Layered APIs (w skrócie LAPI). Interfejsy LAPI, których celem jest zapewnienie deweloperom łatwego korzystania z komponentów. Nadal uważam, że była to świetny wynik, ale popełniliśmy wiele błędów. Skupiliśmy się najpierw na komunikatach wyświetlanych w reklamach i liście wirtualnej. Udostępnianie tostów jest niemal niemożliwe, a wirtualna lista jest jednym z najtrudniejszych elementów do zrobienia. Nasze intencje były dobre, ale nie pomagały one deweloperom, dlatego wycofaliśmy projekt. Trudno jest opanować tę trudną metodę, ale każda pomyłka napędza renesansowy styl CSS i HTML, który mamy obecnie w zanadrzu.
Porozmawiajmy teraz o interfejsach LAPI. Co się stało?
Nicole: w przypadku interfejsów LAPI wiedzieliśmy, że internet wymaga dodawania komponentów do tworzenia komponentów natywnych. I jasno było jasne, że odbudowanie kierownictwa powstrzymuje programistów. Nie jestem w stanie liczyć kart stworzonych w mojej karierze! Chcieliśmy jednak rozwiązać ten problem, przesyłając JavaScript w przeglądarce, co było bardzo trudne. Nikt wcześniej nie wysyłał kodu JavaScript w przeglądarce i nie było jasne, w jaki sposób powinien on współdziałać z kodem C++ działającym w mechanizmie renderowania przeglądarki. Wysłuchaliśmy opinii innych dostawców przeglądarek (dziękujemy, Mozilla!) i zrezygnowaliśmy z tego podejścia. W rezultacie udało nam się znaleźć coś znacznie lepszego dzięki otwartemu interfejsowi użytkownika. Dzięki korzystaniu z HTML i CSS otrzymujemy elastyczne, deklaratywne rozwiązania. Ponieważ funkcja ta jest deklaratywne, możemy wprowadzać ułatwienia dostępu w sposób, który nie byłby tak łatwy jak w przypadku JavaScriptu. Jestem pod wrażeniem. Pracujemy nad obsługą wyboru menu, wyskakującego okienka, etykietki, nawigacji, akordeonu, kart, karuzeli i przełącznika, które są naprawdę ważnymi wzorcami projektowania interfejsu.
Tak wiele się dowiedzieliśmy. Wiem, że są też inne inicjatywy w tej branży, np. CSS Houdini. Jaka powinna być historia?
Una: 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 rzadko używanych, aby można je było uwzględnić w szerzeniu i wspierać. Zdaliśmy sobie sprawę, że wdrożenie niskopoziomowych interfejsów API nie musi ułatwiać deweloperom pracy. Zamiast tego koncentracja na rozwiązaniach wyższego poziomu i potrzebach umożliwiła uzyskanie obsługi w różnych przeglądarkach oraz stron docelowych niezbędnych do dynamiki zmian w ekosystemie. Obecnie śledzimy postępy na stronie https://ishoudinireadyyet.com/.
Jeśli mowa o obsłudze aplikacji w różnych przeglądarkach, inicjatywy takie jak Interop 2022 czy Open UI przynoszą społeczności wyjątkowo pozytywne efekty. Co słyszycie od deweloperów?
Una: jedną z największych przeszkód zgłaszanych przez deweloperów jest „ujednolicenie działania interfejsu w różnych przeglądarkach”. Aby rozwiązać ten problem, współpracujemy z innymi dostawcami przeglądarek, aby ustalić priorytety i przygotować najczęściej wybierane funkcje dla programistów. Opinie społeczności są bardzo pozytywne. Poza tym dzięki dużej zmianie architektury RenderingNG udało się znacznie poprawić wydajność niektórych z tych funkcji. Programiści są podekscytowani, że oczekiwane przez nich funkcje, o które prosili już od lat, zostały wreszcie dopracowane i zaczną działać w różnych przeglądarkach.
Nicole: Jesteśmy podekscytowani. Możesz go zobaczyć na Twitterze. :)
Okazuje się, że praca z ekosystemem ma kluczowe znaczenie dla każdego sukcesu, który staramy się ułatwiać deweloperom. Wiem, że Pana/Pani zespół dużo pracuje. Czy chcesz podać nam więcej informacji?
Nicole: Przede wszystkim jestem pod wrażeniem projektów, które programiści tworzą w internecie. Od najmniejszej biblioteki po całe platformy – deweloperzy tworzą niesamowite rzeczy. To wspaniała społeczność twórców. Chrome podejmuje wiele działań, aby jeszcze lepiej pomagać w realizacji tych projektów.
Na przykład kilka lat temu rozpoczęliśmy pracę z platformami JavaScript, takimi jak React i Angular. I metastruktury – na przykład Next, Nuxt i Gatsby. W zeszłym roku zaczęliśmy tak samo korzystać z narzędzi i platform interfejsu użytkownika, takich jak Sass, Bootstrap i Material. Mam nadzieję, że w tym roku uda nam się nawiązać współpracę z GreenSock i innymi narzędziami, które ułatwią deweloperom życie. Właśnie zobaczyłam, jak Cassie Evans z GreenSock przemawia na Smashing Conference. Byłam bardzo podekscytowana współpracą z twórcami animacji.
Gdzie dostrzegamy największe możliwości dla ekosystemu interfejsu internetowego?
Una: jeśli chodzi o wielkie możliwości, czuję, że nie są one jeszcze niczym potężne, jeśli chodzi o możliwości niestandardowe w przeglądarce. Nowe interfejsy API, takie jak zapytania o kontener i funkcje multimediów dotyczące preferencji użytkownika CSS, zmieniają sposób, w jaki deweloperzy postrzegają projekt elastyczny. Cieszy mnie również możliwości współpracy przy projektowaniu, które umożliwiają programistom i projektantom współpracę z użytkownikami ich stron.
Nicole, jaki jest następny krok w planach Pana/Pani zespołu?
Nicole: Nie wszystkie eksploracje zmieniają się w coś, co można łatwo wysłać, ale jest wiele rzeczy, które mnie teraz najbardziej ekscytują:
Nie skupiając się już na pierwszej kwestii, wprowadzamy elastyczne projektowanie oparte na komponentach. Zawiera narzędzia do projektowania systemów kolorów, które pozwalają projektantom dostosować się do preferencji użytkownika, np. trybu ciemnego. Na przykład przestrzeń kolorów OKLCH zachowuje spójność jasności we wszystkich barwach. Projektanci mogą przejść od doboru kolorów, aby projektować zależności między nimi, i nie muszą tracić błotnistej palety.
Pracujemy też nad interfejsami API o największej potrzebie, takimi jak zapytania dotyczące kontenerów, warstwy kaskadowe, selektor nadrzędny (:has), style zakresu i zagnieżdżanie. Deweloperzy potrzebują ich, aby tworzyć elastyczne systemy projektowania z komponentami wielokrotnego użytku.
Kolejną ciekawą funkcją jest przewijanie połączonych animacji. Podoba mi się prezentacja Steve'a Gardnera. Jego płynne przewijanie i niesamowite animacje samolotów uruchamiane podczas przewijania. Choć te funkcje są ciekawe, czasem trudno jest je dopasować, zwłaszcza jeśli wziąć pod uwagę ułatwienia dostępu. Dlatego właśnie testujemy dostępność tej funkcji przez użytkowników.
Najbardziej podobają mi się wbudowane elementy sterujące interfejsu internetowego. Programiści ciągle tworzą ten sam zestaw kart. Myślę, że może Ci w tym pomóc przeglądarka. W sekcji Otwórz interfejs pracujemy nad takimi komponentami jak menu wyboru, wyskakujące okienko, etykietka, karty, nawigacja, akordeon i przełącznik. Sprawdzamy, jak mogłoby wyglądać wprowadzenie ułatwień dostępu w tych podstawowych elementach przeglądarki, aby z czasem sieć stała się domyślnie dostępna. Programiści mogą się wtedy skupić na bardziej złożonych i złożonych problemach, a podstawowe kwestie, takie jak sposób działania kart, mogą być obsługiwane przez przeglądarkę. Prawdopodobnie ten post wymaga osobnego posta, więc na razie nic nie zrobię.
Na koniec będziemy nadal inwestować w współdziałanie między przeglądarkami. Współpraca z pracownikami WebKit i Gecko w celu zapewnienia spójności środowiska programistycznego była dla nas niezwykłą przyjemnością. Deweloperzy głośno i wyraźnie słyszeli, że oczekują tego rozwiązania.
Co prawda, nowy interfejs Shared Element Transitions API od zespołu Seamless Web zmieni sposób projektowania stron internetowych. Te wszystkie subtelne przejścia, które pozwalają projektantom orientować się w projektach w przestrzeni fizycznej, będą nie tylko możliwe, ale też łatwe. Jake Archibald ma świetny przykład.
Być może, jeśli standardy będą w porządku, moglibyśmy w tym roku spojrzeć na pionowy rytm! Możemy korzystać z platformy LayoutNG, która daje dostęp do tak wielu funkcji.
Dziękuję. Jestem pewien, że cała społeczność, tak jak my, jest zadowolony(a) z nowego tempa wprowadzania ulepszeń i funkcji w świecie interfejsu internetowego. Jest jeszcze sporo do zrobienia – od czego warto zacząć?
Una: podczas sesji I/O Co nowego na platformie internetowej omówimy najważniejsze funkcje dostępne w tym roku. Adam Argyle napisał też świetny artykuł na temat wszystkich nowych i zbliżających się stron docelowych związanych z usługami porównywania cen. Na razie skoncentrowałbym się na wersjach stabilnych i uważał tylko, że planowane są inne prace. Zachęcam do zapoznania się z Twoją świetną serią Nowość w internecie. Zasubskrybowanie newslettera web.dev spowoduje też, że te treści trafią do skrzynki odbiorczej dewelopera. Dla deweloperów, którzy chcą się zaangażować i pomóc w tym wszystkim, dołączenie do Open UI to jeden z najlepszych sposobów na jej zastosowanie.
Najważniejsze informacje
Trzymamy się tradycji, aby informować Cię o nadchodzących zmianach, o których warto pamiętać podczas tworzenia witryny.
Ogranicz maksymalny wiek dla plików cookie do 400 dni
- Aktualizacja: gdy pliki cookie zostaną ustawione 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 limitów, a pliki cookie mogły wygasnąć nawet kilkaset lat w przyszłości. Celem tego limitu jest znalezienie równowagi między typowymi wzorcami użytkowania i 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ść działania 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 czas dostawy: dostawa w Chrome 104 (wersja stabilna od 2 sierpnia 2022 r.).
- Wezwanie do działania dla deweloperów: deweloperzy mogą wymagać częstszego odświeżania plików cookie, gdy użytkownicy odwiedzają ich strony. W przeciwnym razie użytkownicy mogą zostać wylogowani po upływie 400 dni od początkowego skonfigurowania pliku cookie.
Mam nadzieję, że podobało Ci się czytanie tego wydania newslettera Chrome Dev Insider. Jeśli jeszcze go nie znasz, oto pierwszy. Liczymy, że w kolejnym kwartale uda nam się zdobyć ich więcej.
Tymczasem podziel się z nami swoją opinią o tym wydaniu Chrome Dev Insider i co możemy zrobić, aby go ulepszyć.
Jak oceniasz to wydanie The Chrome Dev Insider? Podziel się opinią