Comiesięczna aktualizacja tworzenia stron internetowych 5⁄2018: wydajność przeglądarki, iteracja zero i uwierzytelnianie internetowe

Opublikowany: 2022-03-10
Szybkie podsumowanie ↬ Co wydarzyło się w społeczności internetowej w ciągu ostatnich czterech tygodni? Anselm Hannemann podsumował wszystko, co nowe i ważne, w jednej poręcznej liście lektur.

Jako 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 ↬

Więcej po skoku! Kontynuuj czytanie poniżej ↓

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.
## UI/UX
  • 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.
Zasady projektowania produktów
Jak stworzyć spójne, harmonijne doświadczenie użytkownika podczas projektowania kart produktów? Mei Zhang dzieli się cennymi wskazówkami. (Źródło obrazu)
## Bezpieczeństwo
  • 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.
## Prywatność
  • 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.
Lista kontrolna zgodności z RODO
Osiągnięcie zgodności z RODO nie powinno być problemem. Lista kontrolna zgodności z RODO pomoże Ci lepiej widzieć. (Źródło obrazu)
## Wydajność sieciowa
  • 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ć.
## Dostępność
  • 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 a none słów kluczowych w ARIA i kiedy powinniśmy ich używać.
Podglądy stron
Podglądy stron otwierają możliwości w wielu obszarach, jak wyjaśnia Nirzar Pangarkar. (Źródło zdjęcia: Nirzar Pangarkar)
## CSS
  • 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żywa element() 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.
## JavaScript
  • 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.
## Życie zawodowe
  • 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.
## Wyjście poza…
  • 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.