Przeminęło pływające etykiety i wyniki zielonych latarni morskich

Za kulisami Smashing zawsze coś się dzieje. W ciągu ostatnich miesięcy nieprzerwanie pracowaliśmy nad wydajnością witryny, ale usunęliśmy również pływające etykiety z naszych formularzy, przeprojektowaliśmy nasze komunikaty o błędach, przebudowaliśmy pulpit nawigacyjny członkostwa, zrefaktoryzowaliśmy i dostosowaliśmy nasze responsywne tabele oraz pracowaliśmy z nowymi autorzy o kilku nowych artykułach, które zostaną opublikowane w serwisie w ciągu najbliższych miesięcy. Oto twoja comiesięczna aktualizacja Smashing.

Pływające etykiety zniknęły

Po opublikowaniu artykułu Adama Silvera o tym, dlaczego pływające etykiety to zły pomysł, widzieliśmy ogromną dyskusję na Twitterze oraz w komentarzach na ich temat. Z pewnością można dzięki nim zaoszczędzić sporo miejsca w pionie, ale jego koszt wiąże się z wieloma problemami z dostępnością i autouzupełnianiem . Jak na ironię, w momencie publikacji tego artykułu pod koniec lutego, w większości naszych formularzy wciąż używaliśmy pływających etykiet i chcieliśmy sprawdzić, czy ich usunięcie rzeczywiście pomogłoby nam poprawić ogólne wrażenia z korzystania z witryny.

Więc usunęliśmy pływające etykiety i przeprojektowaliśmy pola wejściowe, umieszczając etykiety nad polem wejściowym, tak jak sugerował Adam. Skorzystaliśmy również z okazji, aby dodać kilka subtelnych poprawek do naszych rzeczywistych form i nadal nad tym pracujemy. Ale wynik już wyglądał lepiej.

Po kilku dniach udoskonaleń natknęliśmy się na problemy ze stylizacją funkcji autouzupełniania . Chcieliśmy dostosować rozmiar czcionki i czcionkę używaną z autouzupełnianiem za pomocą pseudoklasy CSS :-webkit-autofill — pasuje, gdy element <input> ma swoją wartość automatycznie wypełnianą przez przeglądarkę — ale nie jest to obsługiwane we wszystkich różnych przeglądarek i, szczerze mówiąc, spowodował sporo kłopotów, gdy automatycznie wypełniona wartość jest weryfikowana, gdy użytkownik opuści pole wejściowe.

W rzeczywistości musieliśmy przyjrzeć się różnym przypadkom dotyczącym projektu formularza:

• Co się dzieje, gdy w ogóle nie podaje się danych ?
• Co się stanie, gdy pobierzemy dane z localStorage i automatycznie podłączymy je do pól wejściowych, ale autouzupełnianie nie zostało aktywowane?
• Co się dzieje, gdy niektóre wartości są wypełniane automatycznie , a inne nie?
• Co dzieje się z walidacją inline i kiedy przeprowadzamy walidację?
• Co się stanie, jeśli niektóre automatycznie wypełnione pola wejściowe zawierają błędy ?
• Jak powinny wyglądać wartości wejściowe na :active i na :focus ?

Szczerze mówiąc, okazało się, że jest to całkiem królicza nora i w tej chwili wciąż zastanawiamy się nad wszystkimi tymi problemami. Biorąc pod uwagę, że zdecydowana większość naszych czytelników — wspaniałych ludzi takich jak Ty — korzysta z autouzupełniania, warto poświęcić czas na zaprojektowanie doświadczenia wokół tego.

Po drobnych poprawkach, około 2 tygodnie po opublikowaniu pierwszego artykułu Adama, wprowadziliśmy zmiany na żywo . Udało nam się rozwiązać wiele problemów związanych z dostępnością i układem na urządzeniach mobilnych, po prostu usuwając etykiety pływające. Ale nie możemy jeszcze powiedzieć, czy miało to jakikolwiek wpływ na wskaźniki biznesowe — cóż, aby to zobaczyć, będziemy musieli poczekać na wydanie dużej książki.

Zielone wyniki w latarni morskiej na urządzeniach mobilnych

Praca nad poprawą wydajności przez jakiś czas była nieustanną podróżą po SmashingMag. Pod koniec zeszłego roku zauważyliśmy, że w 2020 roku odnotowaliśmy spory spadek wydajności, więc zakasaliśmy rękawy i zabraliśmy się do pracy. Zmieniając sposób dostarczania CSS i JavaScript wylądowaliśmy w zielonym obszarze wyników dla większości stron witryny w widoku pulpitu; jednak wydajność na urządzeniach mobilnych była nadal dość niska , średnio między 60-70 punktami Lighthouse dla większości artykułów.

Ostatnim monitem o bardziej agresywną optymalizację był pulpit nawigacyjny „Core Web Vitals” w Google Search Console. 19 lutego ponad 3590 artykułów zostało oznaczonych słabym wynikiem CLS (>0,25) — na komputerach stacjonarnych i urządzeniach mobilnych. Najpierw pomyśleliśmy, że może to być związane z ostatnio wprowadzonymi zmianami banerów plików cookie, ale okazało się, że była to aktualizacja wyszukiwarki Google, która wydawała się bardziej agresywnie karać nas za wysoki CLS.

Zwróciliśmy się więc do Twittera, aby zapytać społeczność, czy ktoś ma dalsze sugestie dotyczące tego, co możemy zrobić. Opinie ludzi z całego świata były fantastyczne — z kilkoma dokładnymi recenzjami przesłanymi za pośrednictwem DM na Twitterze i ogólnymi przemyśleniami ludzi na temat tego, co możemy zrobić.

Patrick Meenan zasugerował opóźnienie instalacji Service Worker, którą wdrożyliśmy tego samego dnia. Najwyraźniej service worker instalował i aktywował przed LCP i powodował spory.

Gael Metais zasugerował bardziej agresywne podzbiór czcionek internetowych i zbadanie problemów z buforowaniem w naszych plikach AVIF. Następnego dnia zmieniliśmy czcionki i uruchomiliśmy je na żywo. Nie mogliśmy szybko rozwiązać problemu AVIF ze względu na sposób, w jaki działa obecnie zarządzanie mediami, ale wtedy Barry Pollard zasugerował, aby sprawdzić, czy użycie kodowania base64 dla obrazów pomoże.

Kodowanie Base64 wydawało się nieco dziwną koncepcją w świecie HTTP/2, ale zdecydowaliśmy się zbudować mały prototyp, aby sprawdzić, czy to pomaga. Więc tak było? O tak, na pewno tak.

Byliśmy bardzo zaskoczeni wczesnymi wynikami. Po kilku iteracjach udostępniliśmy nasze zdjęcia profilowe autora LCP w nieco zawiły, ale całkiem skuteczny sposób:

 <picture> <source type="image/avif"> <img src="https://.../author.jpg" loading="eager" decoding="async" width="200" height="200" alt=""> </picture>

• Jeśli przeglądarka obsługuje AVIF, pobiera zakodowany w base64 ciąg obrazu AVIF (brak żądania przeglądarki).
• Jeśli przeglądarka nie obsługuje AVIF, pobiera plik JPEG (prawidłowo buforowany),
• Negocjacja treści odbywa się poprzez <picture> + srcset w przeglądarce.

Działałoby to tylko w przypadku zdjęć profilowych autora LCP na stronie głównej i na stronach artykułów. W tej chwili około 35% naszego ruchu mobilnego odbywa się na iOS , więc ci użytkownicy nie uzyskiwaliby obrazów szybciej, ale zakodowanie tylko dużego obrazu JPEG lub zakodowanie zarówno plików AVIF, jak i JPEG niepotrzebnie nadwyręży HTML, co chcieliśmy unikać.

Następnie dostosowaliśmy naszą kompilację, aby automatycznie generowała ciągi base64 dla plików AVIF w czasie kompilacji (jeśli obrazy autora są dostępne jako obrazy AVIF). Ułatwia nam to również usunięcie go, gdy już go nie potrzebujemy.

Ponadto usunęliśmy duplikaty i nadmiarowości za pomocą YellowLab.Tools, zrefaktoryzowaliśmy niektóre CSS na podstawie raportów z narzędzi audytu CSS i dostosowaliśmy konfigurację listy przeglądarek, aby zmniejszyć optymalizację dla IE10 i IE11.

Ogólnie mamy:

• zmniejszono ładowność czcionek internetowych o 38%,
• zmniejszył rozmiar krytycznego CSS o 14%,
• zmniejszono rozmiar plików JS o 8%,
• (prawdopodobnie) zwiększył rozmiar HTML o około 1%,

Wpływ był całkiem zauważalny! Po raz pierwszy od lat znaleźliśmy się w zielonej strefie wyników 90–95 na urządzeniach mobilnych , a na komputerach robimy rundy w okolicach 96–100 . I to z uruchomioną w tle aplikacją React i mnóstwem skryptów dziejących się za kulisami.

Wciąż sporo pracy do wykonania, szczególnie w świecie JavaScript, ale wydaje się, że jesteśmy na dobrej drodze — a do tego właśnie zamierzamy zaimplementować f-mody z życzliwą i hojną pomocą Simona Hearne'a.

A co najlepsze: wszystkie zasługi należą się niesamowitej społeczności oraz hojnych, pełnych pasji i życzliwych ludzi, którzy przesyłają nam sugestie i wskazówki za pośrednictwem Twittera. Za to jesteśmy bardzo wdzięczni — to prawdziwa siła i życzliwość ludzi w społeczności. Dziękuję Ci! ️.

Nowa seria artykułów o rozbijaniu

Byliśmy jednak zajęci nie tylko optymalizacją wydajności i UX. Prawdopodobnie odwiedzasz tę stronę z powodu publikowanych przez nas artykułów, więc eksperymentowaliśmy z czymś nowym.

W marcu rozpoczęliśmy pracę nad nową serią artykułów poświęconych narzędziom i zasobom, które mogą pomóc Tobie jako projektantowi lub programiście stać się lepszym w pracy. Możesz je postrzegać jako dobre, staromodne podsumowania, ale poświęcamy trochę czasu na przygotowanie kawałków ze wskazówkami, których możesz używać od czasu do czasu .

Zaczęliśmy od oprzyrządowania wokół CSS, ale proszę oczekuj więcej podobnych elementów wokół wszystkiego innego front-endu. Mamy nadzieję, że będziesz z nimi na palcach, więc przygotuj się! A oto pierwsze artykuły, które opublikowaliśmy do tej pory:

• Narzędzia audytu CSS
• Generatory CSS

Kontaktujemy się również z nowymi autorami i mądrymi ludźmi, takimi jak Ty, do pracy nad interesującymi studiami przypadków z Twoich bieżących projektów. Dlatego skontaktuj się z nami, jeśli ostatnio pracowałeś nad interesującym i wymagającym projektem — czy to w zakresie dostępności, CSS/JS, wydajności, migracji, refaktoryzacji, czy w zasadzie cokolwiek innego. Nie martw się, jeśli nigdy wcześniej nie pisałeś — jesteśmy tutaj, aby Ci pomóc i poprowadzić.

Ponadto, jeśli wydałeś narzędzie typu open source i chciałbyś zwrócić na nie większą uwagę, daj nam również znać, a my również chętnie przedstawisz swój projekt w tym magazynie. I oczywiście, jeśli masz jakieś uwagi, zostaw komentarze tutaj i daj nam znać, co myślisz!

Nowe warsztaty online dotyczące rozbijania

Prawie rok temu zaczęliśmy prowadzić własne warsztaty online, a każdy z nich był niesamowitym przeżyciem dla całego naszego zespołu. Dzięki wspaniałym uczestnikom z całego świata, którzy spotykają się, aby razem uczyć się, tak wiele pomysłów zostało wprowadzonych w życie — zwłaszcza podczas sesji projektowania i kodowania na żywo.

Oto krótki przegląd warsztatów, które zaplanowaliśmy na najbliższe miesiące :

Ach, mamy też pakiety warsztatów, z których możesz wybrać 3, 5, a nawet 10 biletów na wybrane przez siebie warsztaty — trwające, nadchodzące lub przyszłe. Zachęcamy również do zapisania się tutaj, jeśli chcesz być pierwszym, który zostanie powiadomiony o nowych warsztatach. Dodatkowo masz również dostęp do biletów dla wczesnych ptaków .

Nasze bezpłatne spotkanie: Dołącz do Smashing Meets!

27 kwietnia możesz dołączyć do nas na żywo na Smashing Meets, przyjaznym i integracyjnym spotkaniu online dla osób pracujących w sieci. Ta edycja „ Actions Speak Louder ” obejmuje trzy niesamowite sesje, podczas których nasi eksperci będą projektować i kodować na żywo — aby pomóc niesamowitej organizacji pozarządowej w uzyskaniu lepszej witryny.

Smashing Meets jest bezpłatne dla wszystkich, więc powiedz znajomym i współpracownikom, aby się przyłączyli! Oczywiście chcielibyśmy, jeśli dołączysz do naszej społeczności i zostaniesz członkiem. Członkostwo Smashing zaczyna się już od 3 USD miesięcznie. Otrzymasz dostęp do wszystkich cyfrowych książek Smashing Books, seminariów internetowych oraz wiele gratisów i przyjaznych rabatów na wydarzenia, usługi i produkty.

Smashing Podcast: Dostrój się i zainspiruj się

W zeszłym roku co dwa tygodnie publikowaliśmy nowy odcinek Smashing Podcast, a opinie były niesamowite ! Z ponad 56 tys. pobrań (nieco ponad tysiąc tygodniowo i wciąż rośnie!), podcast miał 34 gości z różnym pochodzeniem i tak wiele do udostępnienia!

Jeśli nie widzisz tematu, który chciałbyś usłyszeć i dowiedzieć się więcej, nie wahaj się skontaktować się z gospodarzem Drew McLellan lub skontaktować się za pośrednictwem Twittera w dowolnym momencie — chcielibyśmy usłyszeć od Ciebie!

I wreszcie… nasz przyjazny biuletyn e-mailowy z rozbijaniem

Dzięki naszemu Biuletynowi Smashing staramy się dostarczać przydatnych, praktycznych ciekawostek i dzielić się przydatnymi rzeczami, nad którymi pracują ludzie w branży internetowej. Jest tak wielu utalentowanych ludzi pracujących nad wspaniałymi projektami i bylibyśmy wdzięczni za pomoc w rozpowszechnianiu informacji i przyznaniu im uznania, na jakie zasługują! Ponadto, dzięki subskrypcji, nie ma żadnych wysyłek stron trzecich ani ukrytych reklam, a Twoje wsparcie naprawdę pomaga nam opłacić rachunki. ️.

JavaScript, pakiety, frameworki

• Jakie jest właściwe narzędzie do tworzenia pakietów?
• Wybór odpowiedniego frameworka JavaScript
• this kontra that
• Wyszukiwanie operatora JavaScript
• Strategie migracji do TypeScript
• Lista czytelnicza programisty JavaScript

Techniki i narzędzia CSS

• Co oznacza 100%?
• Zaskakujące rzeczy, które CSS może animować
• Tworzenie losowości za pomocą czystego CSS
• Budowanie solidnych i nowoczesnych układów jednoliniowych
• Audyt CSS
• Zaawansowane selektory CSS
• Poprawa kontrastu za pomocą nakładki

Wydajność poczty e-mail i spotkania

• Kodowanie recenzji kodu za pomocą drabin opinii
• Znajdowanie czasu na to, co naprawdę ma znaczenie
• Lepsza poczta e-mail
• Synchronizuj motywy kolorów dla środowiska deweloperskiego
• Zbieranie opinii od klientów
• Jak napisać ogłoszenie o pracę

Dostępność frontonu

• Dostępne modalne
• Dostępne karty
• Wdrażanie nawigacji za pomocą klawiatury w całej aplikacji
• Znajdź i napraw problemy z dostępnością
• Wsparcie preferencji użytkownika z preferencjami prefers-reduced-*
• Dostępne autouzupełnianie
• Udostępnianie linków do ikon

To jest okład!

Uff, dzięki za przeczytanie do końca! Jesteśmy małym zespołem składającym się z nieco ponad 15 pełnych pasji i oddanych osób rozsianych po całym świecie i robimy co w naszej mocy, aby pomóc Tobie i naszej wspaniałej społeczności poprawić się w naszej pracy. Więc dzięki za bycie w pobliżu tak długo!

Szczerze mówiąc, nie możemy się doczekać, aż zobaczymy Cię online i osobiście, ale jedno jest pewne: szczerze doceniamy, że jesteś miażdżony miesiąc po miesiącu i za to jesteśmy dozgonnie wdzięczni. I oczywiście będziemy Cię na bieżąco informować o naszych aktualizacjach — na pewno! ;-) (Ale zawsze możesz też zapisać się do naszego newslettera!)

Pozostańcie miażdżący, wszyscy!