Comiesięczna aktualizacja tworzenia stron internetowych 5⁄2018: wydajność przeglądarki, iteracja zero i uwierzytelnianie internetowe
Opublikowany: 2022-03-10Jako programiści często mówimy o wydajności i żądamy od przeglądarek szybszego renderowania. Ale kiedy w końcu to zrobią, wymagamy jeszcze większej wydajności.
Alex Russel z zespołu Chrome podzielił się teraz kilkoma przemyśleniami na temat programistów nadużywających wydajności przeglądarek i wyjaśnia, dlaczego strony internetowe wciąż są wolne, mimo że przeglądarki zostały na nowo wyposażone w niezwykle szybkie silniki renderujące. Jest to zgodne z artykułem Olivera Williamsa, w którym stwierdza, że skupiamy się na niewłaściwych rzeczach i zamiast dostarczać najszybsze rozwiązania dla wolniejszych komputerów i przeglądarek, udostępniamy jeszcze większe pakiety z wypełnianiami i transpilowanym kodem do każdą przeglądarkę.
Z pewnością nie jest łatwo wyrwać się z tego schematu i ograniczyć rozmiar pakietu do minimum w interesie użytkownika, ale mamy technologie, które to umożliwiają. Przyjrzyjmy się więc nietradycyjnym sposobom i częściej zastanówmy się nad rzeczywistym doświadczeniem użytkownika — przed zdefiniowaniem przepływu pracy projektu, a nie później.
Lista kontrolna wydajności front-endu 2021
Aby pomóc Ci zapewnić szybkie i płynne wrażenia, Vitaly Friedman podsumował wszystko, co musisz wiedzieć, aby zoptymalizować wydajność swojej witryny, w jednej poręcznej liście kontrolnej.
Przejdź do powiązanego artykułu ↬
Aktualności
- Firefox 60 jest już dostępny i zawiera moduły ECMAScript, a także interfejs API uwierzytelniania internetowego.
- Chrome 66 jest teraz stabilny, wprowadzając kilka ważnych aktualizacji dotyczących dźwięku. Po ujawnieniu błędu spowodowanego przez nowo wprowadzoną ochronę użytkownika przed autoodtwarzaniem w tle, który powodował poważne problemy z klientami WebRTC, Chrome ogłosił jednak, że cofnie automatyczne blokowanie i opóźni je do Chrome 70 (na jesieni), aby programiści mają więcej czasu na dostosowanie bazy kodu.
- Ponieważ Chrome 66 jest już wydany, a najnowsza wersja Firefox ma się pojawić w następnej kolejności, dwie główne przeglądarki nie ufają teraz wszystkim certyfikatom firmy Symantec, które zostały wydane przed czerwcem 2016 r. — i zaufaj mi, gdy mówię, że jest wiele witryn, które wciąż się nie zmieniły ich certyfikaty, których dotyczy problem, i dlatego będą niedostępne dla użytkowników teraz (Chrome) lub wkrótce (Firefox).
- Github Pages oferuje teraz obsługę HTTPS dla domen niestandardowych. Wcześniej HTTPS był dostępny tylko dla poddomen
*.github.io
lub za pośrednictwem dostawców zewnętrznych, takich jak Cloudflare. - Wkrótce pojawi się Chrome 67 i wycofa kilka rzeczy, zanim całkowicie usunie obsługę dwóch wersji później, w tym przypinania kluczy publicznych opartych na HTTP (HPKP) i pamięci podręcznej AppCache w niezabezpieczonych kontekstach.
- Kwietniowa aktualizacja systemu Windows 10 przyniosła EdgeHTML 17 z wyciszonymi kartami, autouzupełnianiem formularzy, nowym trybem „drukowania witryny” w celu oszczędzania zasobów, pracowników usług i powiadomień push. Dodano również zmienne czcionki, przechwytywanie ekranu w RTC za pośrednictwem interfejsu API przechwytywania mediów, integralność Subresource Integrity (SRI) oraz obsługę nagłówka
Upgrade-Insecure-Requests
. Spory krok naprzód! - NPM w wersji 6 jest tutaj z kilkoma ważnymi ulepszeniami bezpieczeństwa. Od teraz nie tylko masz nowe polecenie
npm audit
do audytu zależności pod kątem luk w zabezpieczeniach, ale npm zrobi to automatycznie i zgłosi się podczas instalacji zależności. Nowa wersja zawiera równieżnpm ci
, aby przyspieszyć zadania CI i kilka innych ulepszeń. - Węzeł 10 jest już z generatorami i obsługą funkcji asynchronicznych, pełną obsługą N-API i obsługą protokołu Inspector. W październiku stanie się kolejną wersją długoterminowego wsparcia.
- Sonarwhal, narzędzie Microsoft do najlepszych praktyk w zakresie kodowania, jest już dostępne w pierwszej stabilnej wersji.
Ogólny
- Oliver Williams napisał o tym, jak ważne jest, abyśmy przemyśleli sposób, w jaki tworzymy strony internetowe i wdrażamy „progresywne ulepszanie”, aby sieć działała świetnie dla wszystkich. W końcu to my pogarszamy wrażenia naszych użytkowników, gdy na ślepo transpilujemy cały nasz kod ECMAScript lub serwujemy tony wypełniaczy JavaScript tym, którzy już używają wolnych maszyn i starego oprogramowania.
- Ian Feather ujawnia, że wygasa około 1% wszystkich żądań JavaScript w BuzzFeed. To około 13 milionów żądań miesięcznie. Dobre przypomnienie, jak ważne jest zapewnienie solidnego powrotu, stopniowego ulepszania i obejścia.
- Nowa dyrektywa RODO (ogólne rozporządzenie o ochronie danych) już wkrótce nadejdzie i chociaż nasze skrzynki odbiorcze są pełne aktualizacji polityki prywatności, jedną rzeczą, która wciąż jest bardzo niejasna, jest to, które usługi mogą już świadczyć tak zwane DPA (umowy o przetwarzaniu danych). Joschi Kuphal gromadzi usługi, które oferują DPA, abyśmy mogli je łatwo wyszukać i zobaczyć, jak możemy uzyskać kopię, aby dalej korzystać z ich usług. Możesz pomóc, przyczyniając się do tego zasobu za pośrednictwem żądań ściągnięcia.
- Jared M. Spool podsumował, dlaczego użytkownicy czasami nienawidzą dokonywanych przez nas wyborów projektowych, ale ogólnie nie zmieniają lub nie przeprojektowują.
- Wspaniała wiadomość od Adobe dotycząca ich produktu do prototypowania Xd: od teraz oprogramowanie będzie bezpłatne dla każdego, kto ma nowy plan startowy. Jedyne różnice w porównaniu z płatnymi planami to ograniczona przestrzeń dyskowa, tylko jeden udostępniony prototyp (ale tyle nieudostępnionych, ile chcesz) i tylko bezpłatna biblioteka Typekit. Zespół Xd poprawił również integrację Sketch i Photoshop, a teraz możesz zamieniać symbole, wklejać do wielu obszarów roboczych i chronić specyfikacje projektu za pomocą hasła.
- Mei Zhang uczy nas lepszych zasad projektowania produktów za pomocą jednej karty produktu.

- W tym miesiącu przejęcie części usługi DNS Route 53 firmy Amazon umożliwiło atakującym kontrolę i potencjalne przechwycenie ruchu klientów korzystających z usługi. To po raz kolejny pokazuje, jak podatna jest kluczowa część Internetu, DNS.
- Najnowsza wersja Firefoksa jest obsługiwana przez Web Authentication API — duży krok w kierunku wyeliminowania haseł. Interfejs API umożliwia logowanie się za pomocą klucza sprzętowego, takiego jak YubiKey, jeśli zarówno przeglądarka, jak i usługa sieciowa obsługują nową technologię. Warto zauważyć, że Chrome 67 beta już udostępnia API. Ich zespół napisał przewodnik techniczny dotyczący wdrażania.
- Począwszy od Firefoksa 60, będziemy mogli określić atrybut tej
same-site
dla plików cookie. Umożliwi to aplikacji internetowej poinformowanie przeglądarki, że pliki cookie powinny być wysyłane tylko wtedy, gdy żądanie pochodzi ze strony internetowej, z której pochodzi plik cookie. Przeczytaj więcej szczegółów w poście na blogu z ogłoszeniem.
- Lista kontrolna RODO jest kolejnym pomocnym źródłem informacji dla osób, które mogą sprawdzić, czy witryna jest zgodna z nadchodzącą dyrektywą UE.
- Bloomberg opublikował artykuł o projekcie pi-hole w zakresie ochrony prywatności typu open source, dlaczego istnieje i co chce osiągnąć. Korzystam z oprogramowania codziennie, aby nie śledzić całej mojej sieci domowej i służbowej.

- Postgres 10 jest tu już od dłuższego czasu, ale osobiście starałem się znaleźć dobre informacje na temat korzystania z tych wszystkich niesamowitych funkcji, które ze sobą niesie. Gabriel Enslein udostępnia teraz aktualizacje wydajności Postgres 10 na slajdzie, rzucając światło na sposób korzystania z wbudowanej obsługi JSON, natywne partycjonowanie dla dużych zestawów danych, odporność indeksu mieszającego i nie tylko.
- Andrew Betts odkrył, że wiele stron internetowych używa przestarzałych nagłówków. Opowiada teraz, dlaczego powinniśmy porzucić stare nagłówki i które z nich wyświetlać.
- Marcy Sutton opowiada, jak Wikipedia zbudowała swoją nową funkcję podglądu linków w przystępny sposób, aby ludzie mogli łatwo używać klawiatury i myszy do uruchamiania nakładki. Możesz również przeczytać więcej o tym, jak ta funkcja została zbudowana w tym poście przez projektanta Wikipedii Nirzara Pangarkara.
- Scott O'Hara wyjaśnia różnice między
hidden
anone
słów kluczowych w ARIA i kiedy powinniśmy ich używać.

- Tabele CSS, o których rzadko mówi się od lat, są nadal używane na większości stron internetowych do pokazywania (i jest to całkowicie poprawny sposób) danych w tabelach. Ale ponieważ domyślnie nie reagują, zawsze mieliśmy problemy z ich responsywnością i większość z nas używała JavaScript, aby działały na ekranach urządzeń mobilnych. Lea Verou znalazła teraz dwa nowe sposoby uzyskania responsywnych tabel za pomocą CSS: jeden to użycie
text-shadow
do kopiowania tekstu do innych wierszy, drugi używaelement()
do skopiowania całego<thead>
do innych wierszy — wciąż próbuję zrozumieć, jak Lea znalazła te rozwiązania, ale to jest niesamowite! - Rachel Andrew napisała artykuł o tworzeniu i dostarczaniu arkuszy stylów do druku w 2018 roku oraz o tym, dlaczego mają one duże znaczenie dla użytkowników, nawet jeśli nie posiadają już drukarki.
- Osvaldas Valutis opowiada, jak zaimplementować tak zwany wzorzec nawigacji „Priority Plus” głównie za pomocą CSS, przynajmniej w nowoczesnych przeglądarkach. Jeśli potrzebujesz wspierać starsze przeglądarki, będziesz musiał rozszerzyć to rozwiązanie dalej, ale to świetny początek zaimplementowania takiego wzorca bez zbytniego JavaScriptu.
- Rachel Andrew dzieli się tym, co nadchodzi w specyfikacjach CSS Grid Level 2 i Subgrid, i wyjaśnia, co to jest, co może rozwiązać i jak z niego korzystać, gdy tylko będą dostępne w przeglądarkach.
- Chris Ashton „używał sieci przez jeden dzień z wyłączonym JavaScriptem”. W tym artykule podkreślono, jak ważne jest myślenie o możliwych błędach JavaScript na stronach internetowych i dlaczego ma znaczenie, czy zapewniasz awaryjne, czy nie.
- Sam Thorogood opowiada, w jaki sposób możemy zbudować „natywną funkcję cofania i ponawiania dla sieci”, używaną w wielu edytorach tekstu, grach, planowaniu lub oprogramowaniu graficznym oraz w innych sytuacjach, takich jak zmiana kolejności przeciągania i upuszczania. I chociaż nie jest to łatwe do zbudowania, artykuł wyjaśnia koncepcje i aspekty techniczne, które pomogą nam zrozumieć tę skomplikowaną sprawę.
- Jest nowy sposób na zaimplementowanie zapytań o elementy/kontenery w Twojej aplikacji: eqio to mała biblioteka wykorzystująca IntersectionObserver.
- Johannes Seitz dzieli się swoimi przemyśleniami na temat zarządzania projektami na początku projektów. Nazywa metodę „Iteracją Zero”. Interesująca koncepcja umożliwiająca lepsze zrozumienie zakresu i zagrożeń związanych z projektem w czasie, gdy nadal nie masz wystarczającego doświadczenia z samym projektem, ale musisz zbudować mapę drogową, aby rozpocząć.
- Arestia Rosenberg opowiada, dlaczego jej najważniejszą radą dla freelancerów jest „pochylanie się do chwili”. Chodzi o wykonywanie pracy, kiedy możesz i wykorzystanie swojej szansy na zrobienie czegoś innego, kiedy nie czujesz, że możesz pracować wydajnie. W końcu podsumowanie daje szczęśliwe życie i większą produktywność. Osobiście rozszerzyłbym to na wszystkich ludzi, którzy mogą to zrobić, ale oczywiście najlepiej pasuje to do freelancerów.
- Sam Altman dzieli się kilkoma przydatnymi wskazówkami dotyczącymi produktywności, które nie są tylko listą „dziesięciu rzeczy do zrobienia”, ale naprawdę pomocnymi przemyśleniami na temat tego, jak myśleć o byciu produktywnym.
- Ethan Marcotte omawia kwestie etyczne z Google Duplex, który ma na celu naśladowanie ludzkiego głosu tak dobrze, że ludzie nie zauważają, czy to maszyna, czy człowiek. Choć brzmi to dość interesująco z technicznego punktu widzenia, posunie debatę na temat fałszywych wiadomości znacznie dalej i spowoduje większe trudności w rozróżnieniu między tym, co powiedział człowiek, a tym, co naśladowała maszyna.
- Nasz świat jest zbudowany na obietnicach, a oto dlaczego tak ważne jest, aby dotrzymać obietnic, nawet jeśli czasami jest to trudne.
- Założę się, że większość z was nie słyszała jeszcze o Palantir. Firma jest finansowana przez Petera Thiel i jest firmą zajmującą się eksploracją danych, która ma zamiar zebrać jak najwięcej danych o wszystkich na świecie. Wiadomo, że współpracuje z różnymi organami ścigania, a nawet ma powiązania ze służbami wojskowymi. Nie wiadomo, co robią z danymi i jakie dane od nas mają. W tej chwili mam tylko nadzieję, że ta firma bardzo ucierpi z powodu unijnej dyrektywy RODO i że Unia Europejska spróbuje powstrzymać ich niekontrolowane gromadzenie danych. Wygląda na to, że praktyki Facebooka w zakresie danych są niczym w porównaniu z Palantirem.
- Naukowcy biją na alarm po analizie, która wykazała, że zakup nowego smartfona zużywa tyle samo energii, co korzystanie z istniejącego telefonu przez całą dekadę. Myślę, że w najbliższym czasie nie zastąpię mojego iPhone’a 7 — to wciąż absolutnie świetne urządzenie i w sam raz do tego, co z nim robię.
- Anton Sten dzieli się swoimi przemyśleniami na temat Vanity Metrics, popularnego sposobu udostępniania liczb i statystyk poza kontekstem. A ponieważ zdał sobie sprawę, jakie mają znaczenie, myśli inaczej o większości powszechnie czytelnych danych, takich jak dane dotyczące inwestycji lub użytkowania usług. Czytanie jednej liczby bez kontekstu do porównania nie ma żadnego znaczenia. Powinniśmy o tym pamiętać.
Mamy nadzieję, że podobała Ci się ta aktualizacja tworzenia stron internetowych. Kolejny planowany jest na piątek 15 czerwca. Bądźcie czujni.
