Comiesięczna aktualizacja tworzenia stron internetowych 7⁄2018: praktyczna dostępność, błędy projektowe i kontrola funkcji

Sieć nadal mnie zadziwia. Przy całej tej różnorodności i różnych zmianach w platformie trudno jest dostrzec prosty wzór — jeśli w ogóle jest (tylko) jeden. Ale wspaniale jest zobaczyć, co się zmienia, jakie funkcje są dodawane do platformy, które są przestarzałe i jak przeglądarki wdrażają coraz więcej technologii, aby chronić użytkownika przed złośliwymi atakami na witryny. Interesujące jest to, że te funkcje bezpieczeństwa cieszą się w dzisiejszych czasach tak samo dużym zainteresowaniem, jak funkcjami dla programistów; pokazuje to, jak ważna jest prywatność i bezpieczeństwo oraz jak niestabilna i niepewna była sieć w przeszłości.

Ale najlepsze w tym wszystkim jest to, że pokazuje, jak ważne jest trzymanie się rzeczy, które dają nam ludzie. Zamiast wdrażać własne rozwiązania do wszystkiego, często znacznie lepiej jest ponownie wykorzystać istniejący system. Nie tylko bezpieczniej jest na nim polegać, ale także mniej pracy, a bardziej integruje rozszerzenie natywnego elementu DOM o niestandardowy element (zamiast pisać własny niestandardowy element od zera). Jeśli zastanawiamy się, czy powinniśmy zbudować własną wersję SSL, czy użyć do tego istniejącego oprogramowania, dlaczego mielibyśmy budować klikalny element oparty na niczym, zamiast zmieniać zachowanie elementu a lub button ? I po co mielibyśmy sami sprawdzać walidację hosta zasobów, skoro przeglądarka już udostępnia nam do tego API? Wszystkie artykuły z tego tygodnia są poświęcone tym tematom.

Inną rzeczą, która utkwiła mi w głowie, jest artykuł Andrei Giammarchi, „A Bloatless Web”, w którym opisuje, jak ślepo używamy Babel jako programistów, kiedy piszemy JavaScript, aby móc pisać nowoczesny ECMAScript. Ale zwykle nie zdajemy sobie sprawy, że transpilacja całego naszego nowoczesnego kodu w nowoczesnych przeglądarkach nie jest najskuteczniejszym sposobem. Cieszę się, że Andrea ma kilka pomysłów, jak możemy poprawić tę sytuację i poprawić wydajność naszych aplikacji internetowych. Czy nie byłoby wspaniale obsłużyć jedną trzecią rozmiaru pakietu, nie transpilując już kodu dla każdej przeglądarki?

Aktualności

• Izolacja witryny skutecznie utrudnia niezaufanym witrynom dostęp lub kradzież informacji z kont w innych witrynach. Chrome 67 jest teraz dostarczany z nim, a funkcja blokowania odczytu między źródłami (CORB) nie będzie już ładować, np. plik JSON jako obraz. Ale co więcej, te zmiany oznaczają, że układ całej strony nie jest już gwarantowany, aby był synchroniczny. Ta nowa funkcja ma wpływ na Ciebie, jeśli odczytujesz obliczone rozmiary z elementu w JavaScript lub używasz detektorów zdarzeń unload . Upewnij się, że wiesz o tym i sprawdź, czy Twoje witryny nadal działają zgodnie z oczekiwaniami.
• Do tej pory wiemy trochę o politykach bezpieczeństwa treści — funkcji, która pozwala programistom ograniczać obciążenie niektórych zasobów za pomocą nazw hostów. Ale dostawcy przeglądarek wymyślili teraz coś nowego: Zasady dotyczące funkcji. Pozwala to programistom internetowym na selektywne włączanie, wyłączanie lub modyfikowanie zachowania niektórych interfejsów API i funkcji internetowych w przeglądarce. To jak CSP, ale zamiast kontrolować bezpieczeństwo, kontroluje funkcje, a Eric Bidelman napisał wprowadzenie do Polityki funkcji, wyjaśniając wszystko.
• Zespół przeglądarki Brave pokazuje swoją najnowszą funkcję, aby chronić prywatność swoich użytkowników: karty, które łączą się przez sieć Tor.

Ogólny

• Anton Sten pyta, czy wartości sektora technologicznego są naruszone? Analizowanie strategii marketingowych Apple, Microsoft, Google, Amazon, ale także małych innych firm i tego, jak możemy wykonywać naprawdę celową pracę i trzymać się naszych wartości, zamiast traktować je jako materiał marketingowy, którego nie musimy szanować ani trzymać się.
• Teraz, gdy sektor technologiczny na świecie szybko przekształca wszystkie rzeczy na świecie w rzeczy cyfrowe, wielu wezwało do większej etyki w naszej dziedzinie. W wielu przypadkach jest to dość niejasny cel, więc zastosujmy go do jednej części cyfrowej: rozwoju front-endu. Jak możemy być bardziej etyczni jako front-end developerzy, jakie rzeczy możemy zrobić? Hidde de Vries napisał o tym artykuł.

Bezpieczeństwo

• Dane klientów Ticketmaster zostały naruszone i, jak się wydaje, wynika to z dostosowanej pojedynczej linii kodu, która zawiera skrypt innej firmy.

UI/UX

• Eugen Esanu pokazuje dziesięć drobnych błędów projektowych, które wciąż popełniamy i co możemy zamiast tego zrobić, aby nasz projekt był bardziej przyjazny dla użytkownika.

Prywatność

• Jest to interesujący raport o tym, jak Google pozwala zewnętrznym deweloperom aplikacji na odczytywanie wiadomości e-mail od użytkowników Google, gdy udzielają oni uprawnień podczas autoryzacji aplikacji. Problem polega na tym, że nie można łatwo temu zapobiec i może to mieć spory wpływ, jeśli używasz Gmaila w swojej firmie, ponieważ może to wpływać na politykę prywatności i podlega RODO.

Wydajność sieciowa

• Max Bock o tym, jak możemy budować komponenty, które reagują na rzeczywistą prędkość połączenia urządzenia za pomocą Network Information API. I pomimo tego, że obecnie jest dostępny tylko w przeglądarkach internetowych Chrome i Samsung, warto go wypróbować i być może już go tym użytkownikom podać.
• Od czasu do czasu możemy przeczytać artykuły wspominające o znaczeniu optymalizacji selektorów CSS w celu poprawy wydajności. Wynika to z badań przeprowadzonych kilka lat temu, ale Ivan Curic zbadał to ponownie i odkrył, że nie ma to znaczenia.

Dostępność

• Zespół programistów firmy Microsoft udostępnia listę odtwarzania wideo o praktycznej dostępności, w tym o tym, jak zoptymalizować prezentacje lub język do włączenia lub jak zbudować odpowiednią funkcję „pomijania nawigacji” w Twojej witrynie.
• Sara Novak opowiada, jak udało jej się okazać empatię, eksperymentując z daltonizmem, aby zrozumieć, jak inni ludzie inaczej odbierają świat.
• Narzędzia programistyczne przeglądarki Firefox mają teraz tryb inspektora ułatwień dostępu . Oto jak go aktywować i jak z niego korzystać.

JavaScript

• Leon Revill pokazuje nam, jak możemy rozszerzyć istniejące natywne elementy DOM o Web Components. Jest to niezwykle pomocne i przydatne, ponieważ możemy nie tylko zaoszczędzić dużo czasu, korzystając z gotowych szablonów dla niestandardowych elementów, ale także uzyskać wszystkie optymalizacje i ustawienia domyślne (semantykę, dostępność, funkcjonalność przeglądarki) za darmo i nadal możemy budować własne zachowanie na górze z tego. Przynajmniej, gdybyśmy w ogóle mogli używać elementów niestandardowych, ale to już inna historia.
• Gerardo Rodriguez pokazuje, jak łatwo możemy nie zoptymalizować witryn pod kątem wydajności za pomocą Service Workers i Fetch API oraz jak może to spowodować wyjątek limitu w przeglądarkach. Na szczęście odkrył przyczynę tego i ustawiając odpowiednie nagłówki CORS, Gerardo w końcu rozwiązał zagadkę nieprzezroczystych odpowiedzi w pojedynczej pamięci podręcznej i powiedział nam, jak uniknąć problemów.
• Filepond to fajny program do przesyłania plików JavaScript o otwartym kodzie źródłowym. Rik Schennink dzieli się wyzwaniami związanymi z jego budowaniem.
• Andrea Giammarchi o problemie łączenia JavaScript z Babel i dlaczego transpilowanie kodu nie jest już najlepszym rozwiązaniem. Zamiast tego powinniśmy pomyśleć o tym, jak obsługiwać różne pakiety w zależności od obsługi przeglądarki, aby zmniejszyć rozmiar pakietu i poprawić wydajność.
• Justin Fuller dzieli się trzema wspaniałymi nowymi funkcjami, które wkrótce pojawią się w JavaScript, które pomogą nam napisać kod, który będzie łatwiejszy do zrozumienia, takie jak tworzenie łańcuchów operacyjnych, koalescencja zerowa lub operator potoku.
• Addy Osmani i Mathias Bynens napisali wstępny wstęp o tym, jak możemy dziś używać modułów JavaScript w sieci.

CSS

• Seria artykułów opisująca, w jaki sposób możemy sfałszować siatkę automatycznego umieszczania z lukami w Internet Explorerze.
• CSS Grid jest fajny, ale często słyszę, że ludzie nie mogą go używać, ponieważ IE11 nie obsługuje go dobrze. Ale to nie do końca prawda, ponieważ IE11 ma dostępną wcześniejszą wersję CSS Grid, którą możemy łatwo transpilować za pomocą autoprefixera. Daniel Tonon wyjaśnia różnice w CSS Grid i jakich funkcji możemy, a których nie możemy używać, i będzie kontynuował, podając jeszcze więcej wskazówek.
• Dla wielu osób CSS Grid jest wciąż bardzo nowy, jest bardzo wydajny i pomaga nam rozwiązać wiele problemów podczas tworzenia układów opartych na siatce w CSS. Ale w obecnej wersji jest kilka rzeczy, które wciąż nie są możliwe. CSS Grid level 2 przyniesie nam sub-siatki, a Rachel Andrew wyjaśnia, do czego tego potrzebujesz.
• Czy CSS w JS jest dobry? Czy to po prostu złe? Dlaczego ciągle wpadamy w pułapkę kłótni, gdy nie ma wyraźnych zwycięzców i jak możemy zrobić lepiej, uznając ewolucję i postrzegając rzeczy w kontekście.

Życie zawodowe

• Dlaczego pojęcie cierpliwości i dążenie do zbudowania czegoś trwałego powinno zyskać więcej uwagi w biznesie. Kilka myśli, które przyszły mi do głowy podczas czytania innego artykułu i wydaje się, że wielu osobom podoba się pomysł za tym.
• Ethan Marcotte o tym, jak podchodzi do wyboru klientów i dlaczego uważa, że ​​ważne jest, aby wybierać tylko tych klientów, których można wesprzeć etycznie. Ale to również pokazuje, jak czasami może to być trudne, jak pokazują ostatnie dyskusje na temat współpracy biznesowej Microsoftu z podmiotami prawnymi.