Wydarzenie poza 2022 Denver zapakowane wczoraj. I chociaż tym razem nie udało mi się zdążyć na wszystkie trzy dni, udało mi się złapać wczorajszą akcję — i to było niesamowite. Nie jestem zbyt towarzyska ani towarzyska, ale to była pierwsza konferencja, na której byłem od co najmniej kilku lat, a osobiste spotkanie z ludźmi było niesamowicie odświeżające.
Oczywiście robiłem notatki! Pomyślałem, że opublikuję je tutaj, ponieważ dzielenie się to troska. Przynajmniej tak powiedział mi mój sześciolatek pewnego dnia, prosząc o ugryzienie deseru zeszłej nocy.
Podzielę to na głośnik. Uczciwe ostrzeżenie: Chodzi mi o odręczne notatki i ładny wizualny facet, więc moje notatki są mniej… uporządkowane niż większość. A te notatki to tylko rzeczy, które mnie wyróżniały. Może nawet nie były głównym pomysłem prezentera, ale przykuły moją uwagę!
Chris Coyier: Strony internetowe są teraz dobre
Chris wygłaszał tę przemowę już wcześniej (połączyliśmy to tylko w zeszłym tygodniu), ale tym razem znacznie go rozszerzyliśmy, szczególnie o szczegóły dotyczące jednostki względne kontenera które w połączeniu z clamp(), zapewnij dokładniejszą reakcję, ponieważ wartości odnoszą się do kontenera, a nie widocznego obszaru. Wiesz więc, jak często używamy szerokości widocznego obszaru (vh) jednostki dla typu płynu?
font-size: clamp(1rem, 1rem + 2vw, 2rem);Cóż, możemy użyć jednostki względnej kontenera, takiej jak zapytanie kontenera rozmiar w wierszu (cqi) zamiast tego, gdzie 1cqi jest równy 1% rozmiaru wbudowanego kontenera (oto projekt specyfikacji na ten temat):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);Chris mówił również sporo o korzyściach płynących z wydajności hosting na krawędzi. Pewnie nie jest to niespodzianką, bo jest napisany o tym tutaj więcej niż kilka razy. Nawet jako ktoś, kto już czytał te artykuły, szczerze nie zdawałem sobie sprawy z pełnej koncepcji przetwarzania na krawędzi.
Pomysł jest zwodniczo prosty: globalne sieci CDN mogą służyć majątek szybko, ponieważ hostują je geograficznie blisko użytkownika. To dość standardowa praktyka przy serwowaniu obrazów rastrowych. Rozszerzył się jednak na pliki statyczne, takie jak te same pliki HTML, CSS i JavaScript, które napędzają witrynę — buduj je z wyprzedzeniem i obsługują już skompilowane i zoptymalizowane pliki z szybkiego globalnego CDN. To cała koncepcja Jamstack!
Ale co, jeśli nadal potrzebujesz od niego odpowiedzi serwera? To nie jest zbyt ostre, prawda? Cóż, teraz mamy programy obsługi, które mogą działać na jednym adresie URL, pobierając dane z wyprzedzeniem i wstrzykując je przed renderowaniem — bezpośrednio z CDN. Jasne, w tle dzieje się dodatkowa praca. Mimo to fakt, że możemy dynamicznie pobierać dane, wstrzykiwać je, wstępnie budować, obsługiwać statycznie na żądanie, a geograficznie bliższy użytkownikowi sprawia, że jest to niesamowicie szybkie.
Tolu Adegbite: Jak wygrywać w ARIA i wpływać na dostępność sieci
Dobry Boże, to była doskonała prezentacja! Tolu Adegbite tak intensywnie nauczyła mnie WAI-ARIA, że trudno mi było zapisać wszystkie klejnoty, które dzieliła – Role! Stany! Etykietowanie! Opisy! Wszystko było wyjątkowo dobrze oprawione i wiem, że będę wracał do tego raz za razem.
Ale jedną konkretną rzeczą, która zwróciła moją uwagę, jest dostępność wbudowanego SVG. Mimo że SVG jest powiązany z innymi rodzajami zasobów projektowych, fakt, że pod koniec dnia jest znacznikiem, wyróżnia go, ponieważ nie zawsze jest identyfikowany jako obraz.
Technologia wspomagająca jest bardziej skłonna do odczytywania wbudowanego SVG jako obrazu, nadając mu odpowiednią dostępną rolę i etykietę:
Miriam Suzanne: Kaskadowe warstwy !ważności
Hej, kolejny absolwent CSS-Tricks! Miriam poświęca mnóstwo czasu i wysiłku na Specyfikacja warstw kaskadowych. Napisała też wielki stary przewodnik o nich tutaj w CSS-Tricks i rozmawialiśmy o nich na An Event Apart.
Najbardziej utkwiło we mnie to, jak wielka jest to zmiana mentalna. Koncepcja sama w sobie nie jest skomplikowana. Ogłosić @layer u góry dokumentu CSS ułóż listę warstw w kolejności ich szczegółowości, a następnie napisz style w tych warstwach. Ale dla starego dinozaura, takiego jak ja, który od jakiegoś czasu pisze CSS, będę musiał przyzwyczaić się do tego, że kaskadowe warstwy umożliwiają prostemu selektorowi klas pokonanie czegoś, co zwykle ma wyższą specyfikę, jak dowód tożsamości.
🤯
Miriam przypomniała również, że warstwy kaskadowe to tylko jedno narzędzie, które mamy w naszym pasku narzędzi do zarządzania specyficznością, oprócz selektorów, które wpływają na specyficzność (np. :is(), :where(), :has()).
Aha, i to jest ciekawa ciekawostka. Przypomniała sobie, że Miriam przemierzając historię specyficzności w CSS !important został pierwotnie zaprojektowany jako narzędzie dla użytkowników do nadpisywania stylów agenta użytkownika i autora. Ale gdzieś dalej, przyjęliśmy to, aby wymusić styl autorski na szczycie. Warstwy kaskadowe pomagają usunąć pretekst potrzebuję użyć !important ponieważ dają nam moc do „priorytetuj warstwy i chronić dziedzictwo".
To pięknie powiedziane, Miriam!
Dave Rupert: Odblokowywanie zaległości w zakresie ułatwień dostępu
Wyobraź sobie, że budzisz się pewnego dnia z setkami powiadomień GitHub o zgłoszonych problemach w Twojej witrynie. Gdzie w ogóle zaczynasz? Może zamknij laptopa i zamiast tego załóż kanał korzeniowy? To przydarzyło się Dave'owi! Automatyczny audyt dostępności zwrócił ogromną ilość błędów i przypisał je jako zgłoszenia do naprawy przez Dave'a.
Zauważył jednak pewien wzorzec po przejściu arkusza kalkulacyjnego Excela z tymi problemami, przeniesieniu ich do Notion dla lepszego widoku, ukryciu niepotrzebnych kolumn, skategoryzowaniu wszystkiego i wyświetleniu wyników w logicznych grupach. Wiele zgłoszonych problemów to ten sam problem powtarzający się na wielu stronach. Tylko dlatego, że test automatyczny zwraca garść błędów, nie oznacza, że wszystkie są unikalne. To zredukowało niezły kawałek biletów.
Następnie pokazał, jak – przy stosunkowo niewielkim wysiłku – zaległości w sprawach zmniejszyły się o prawie 50%.
Jest tam wiele do zebrania, zwłaszcza jeśli chodzi o to, jak przetwarzamy i organizujemy naszą pracę. Najważniejszym wnioskiem dla mnie jest to, że Dave powiedział, że musimy kłaść nacisk na jednostki i interakcje ponad procesy i narzędzia. Narzędzia takie jak to, które skanuje błędy ułatwień dostępu, są pomocne, ale mogą nie opowiedzieć całej historii. Zamiast brać ich za słowa, warto zadawać pytania i zdobywać więcej kontekstu przed zanurzeniem się w bałaganie.
Jako bonus, reorganizacja problemów w Notion pozwoliła Dave'owi pogrupować problemy w sposób, który wyraźnie pokazuje, jakie upośledzenia jego produkt aktywnie dyskryminował, co dało mu większą empatię dla tych pomyłek i jak nadać im priorytety.
Jeszcze jedna wirtualna sesja Hui Jing Chen zakończyła ten dzień, ale trzeba przyznać, że przegapiłem około połowy tego, ponieważ prowadziłem rozmowę na korytarzu. Rozmowa była tego warta, chociaż jestem przygnębiony, przegapiłem prezentację. Będę obejrzał film, kiedy zostanie opublikowany!
