Korzystałem z sieci przez jeden dzień z wyłączoną obsługą JavaScript

Ten artykuł jest częścią serii, w której staram się korzystać z sieci pod różnymi ograniczeniami, reprezentując daną grupę demograficzną użytkownika. Mam nadzieję podnieść rangę trudności, z jakimi borykają się prawdziwi ludzie, których można uniknąć, jeśli projektujemy i rozwijamy się w sposób zgodny z ich potrzebami. W tym tygodniu wyłączam JavaScript.

Dlaczego noscript ma znaczenie

Po pierwsze, aby wyjaśnić, istnieje różnica między obsługą środowiska noscript a używaniem noscript . Generalnie nie podoba mi się tag noscript , ponieważ fragmentuje twoją stronę internetową na wersje JavaScript i inne niż JavaScript, zamiast pracować na tej samej linii bazowej treści, co powoduje, że doświadczenia stają się bałaganem i rzeczy są pomijane.

Możesz mieć wiele przydatnych treści w tagach noscript , ale jeśli używam przeglądarki obsługującej JavaScript, nie zobaczę tego — utknę w oczekiwaniu na pobranie środowiska JS. Kiedy odnoszę się do doświadczenia „noscript”, mam na myśli ogólnie doświadczenie korzystania ze strony internetowej bez JavaScript , a nie wyraźne użycie tagu.

Więc kogo obchodzi użytkownicy, którzy nie mają JavaScript? Czy tacy użytkownicy noscript w ogóle już istnieją?

Cóż, istnieją, choć w niewielkich ilościach: około 0,2% użytkowników w Wielkiej Brytanii ma wyłączoną obsługę JavaScript. Ale patrząc na liczbę użytkowników, którzy wyraźnie wyłączyli JavaScript, nie ma sensu.

Przypomina mi się ten cytat Jake'a Archibalda:

„Wszyscy Twoi użytkownicy nie korzystają z JS, gdy pobierają Twój JS”.

Pomyśl o tych użytkownikach, którzy mają włączoną obsługę JavaScript, ale nie mają możliwości obsługi tego języka z wielu powodów, w tym blokowanie korporacyjne lub lokalne lub usuwanie elementów JavaScript, istniejące błędy JavaScript w przeglądarce z dodatków i pasków narzędzi przeglądarki, sieci błędy i tak dalej. BuzzFeed niedawno ujawnił, że około 1% żądań dla ich JavaScriptu wygasa, co odpowiada 13 milionom nieudanych żądań miesięcznie.

Czasami problem nie dotyczy użytkownika, ale CDN dostarczającego JavaScript. Pamiętasz, jak w lutym 2017 r. padły serwery Amazona? Miliony witryn, które opierają się na JavaScript dostarczanym przez sieci CDN Amazona, znalazły się w poważnych tarapatach, co kosztowało firmy z indeksu S&P 500 150 milionów dolarów podczas czterogodzinnej awarii.

Pomyśl także o wschodzących rynkach światowych; kraje wciąż walczą o zbudowanie sieci szybkiego Internetu, a populacje nie mogą sobie pozwolić na szybki sprzęt do uruchamiania kodu JavaScript intensywnie korzystającego z procesora. Albo pomyśl o ugruntowanych rynkach, na których nawet iPhone X z połączeniem 4G nie jest odporny na skutki częściowo załadowanej strony internetowej, przerwanej przez pociąg wjeżdżający do tunelu.

Sieć jest wrogim, nieprzewidywalnym środowiskiem, dlatego wielu programistów kieruje się zasadą progresywnego ulepszania, aby budować swoje witryny na bazie semantycznego HTML, warstw CSS i dyskretnego JavaScriptu. Chciałem zobaczyć, ile witryn stosuje to w praktyce. Czy jest lepszy sposób niż całkowite wyłączenie JavaScript?

Jak wyłączyć JavaScript?

Jeśli chcesz samodzielnie odtworzyć mój eksperyment, możesz wyłączyć JavaScript, zagłębiając się w ustawienia w Chrome:

• Otwórz Narzędzia programistyczne (Chrome -> Widok -> Narzędzia programistyczne lub ⌥⌘I na klawiaturze)
• Otwórz podmenu programisty (trzy kropki obok ikony zamykania w Narzędziach programisty)
• Wybierz „Ustawienia” z tego podmenu
• Znajdź sekcję „Debugger” i zaznacz pole „Wyłącz JavaScript”

Lub, tak jak ja, możesz użyć doskonałego rozszerzenia Toggle JavaScript Chrome, które pozwala wyłączyć JS jednym kliknięciem.

Tworzenie posta WordPress z wyłączonym JavaScript

Po wyłączeniu JavaScript, moim pierwszym wyjściem było przejście do mojej osobistej witryny z portfolio — która działa na WordPress — w celu spisania moich doświadczeń w czasie rzeczywistym.

WordPress jest w rzeczywistości bardzo przyjazny dla skryptów, więc mogłem zacząć pisać ten post bez żadnych trudności, chociaż brakowało niektórych funkcji formatowania tekstu i osadzania multimediów, do których jestem przyzwyczajony.

Porównajmy ekran posta WordPressa z JavaScriptem i bez niego:

Czułem się całkiem komfortowo bez pasków narzędzi, dopóki nie musiałem osadzić zrzutów ekranu w moim poście. Bez przycisku „Dodaj multimedia” musiałem przejść do oddzielnych ekranów, aby przesłać swoje pliki. Ma to sens, ponieważ treść „przesyłania w tle” wymaga Ajax, który wymaga JavaScript. Ale byłem dość zaskoczony, że osobny ekran multimediów również wymagał JavaScript!

Na szczęście pojawił się widok awaryjny:

Po przesłaniu obrazu musiałem ręcznie napisać tag HTML img w moim poście oraz skopiować i wkleić do niego adres URL obrazu. Nie było możliwości określenia adresu URL miniatury przesłanego obrazu, a wszelkie napisy, które napisałem, również musiały zostać ręcznie skopiowane. Wkrótce znudziło mi się to podejście i planowałem wrócić następnego dnia i ponownie wstawić wszystkie obrazy, kiedy pozwoliłbym sobie na ponowne użycie JavaScript.

Postanowiłem przyjrzeć się, jak radził sobie front-end mojej witryny.

Przeglądanie mojej witryny bez JavaScript

Byłem mile zaskoczony, że moja strona bez JS wyglądała w dużej mierze tak samo:

Przyjrzyjmy się bliżej temu embed na Twitterze:

Poniżej zgięcia mojej strony umieściłem również trochę treści z Instagrama, które dobrze pasowały do ​​doświadczenia z noscript .

Wreszcie, mam osadzony GitHub na mojej stronie. GitHub nie oferuje natywnego osadzania, więc używam nieoficjalnych kart GitHub autorstwa Hsiaoming Yang.

Miałem nadzieję, że w połowie zaszokowa cię statystykami przed i po ( megabajty JS dla małej embed! Koniec świata! Pozbądźmy się JavaScript! ), a w połowie miałem nadzieję, że będzie to bardzo niewielka różnica ( progresywne ulepszanie! Prowadząc przykładem !Jestem dobrym programistą! ).

Porównajmy wagi stron z JavaScriptem i bez niego. Po pierwsze, za pomocą JavaScript:

Teraz bez JavaScriptu:

Ze względu na stylizowany tweet, osadzenie na GitHubie i pełnowartościowe osadzenie na Instagramie, moja strona rozrasta się o dodatkowe 600 KB. Mam też śledzenie Google Analytics i kilka nerdy ukrytych interaktywnych funkcji. Biorąc wszystko pod uwagę, 600 KB nie wydaje się przesadą — chociaż jestem trochę zaskoczony liczbą dodatkowych żądań, które przeglądarka musi wysłać, aby to wszystko się wydarzyło.

Cała zawartość jest nadal dostępna bez JavaScript, wszystkie menu są nadal dostępne i z wyjątkiem osadzania na Twitterze, trudno byłoby zorientować się, że JavaScript jest wyłączony. W rezultacie moja witryna przechodzi poziom walidacji NOSCRIPT-5 — najlepszą możliwą ocenę niezgodną z językiem JavaScript.

Ocena noscript przez ashton.codes: NOSCRIPT-5.

Co to jest? Nie słyszałeś o systemie klasyfikacji noscript ? Byłbym bardzo zaskoczony, gdybyś to zrobił, bo właśnie to wymyśliłem. To mój przydatny mały wskaźnik użyteczności witryny bez JavaScript, a co za tym idzie, jest całkiem dobrym wskaźnikiem tego, jak dobra jest witryna w stopniowym ulepszaniu zawartości.

noscript System Klasyfikacji

Witryny — a dokładniej ich poszczególne strony — zwykle należą do jednej z następujących kategorii:

• NOSCRIPT-5
  Witryna jest praktycznie nie do odróżnienia od wersji witryny obsługującej język JavaScript.
• NOSCRIPT-4
  Witryna zapewnia identyczność funkcjonalności dla noscript, ale w tym celu linki lub przekierowania do oddzielnej wersji witryny.
• NOSCRIPT-3
  Witryna w dużej mierze działa bez JavaScript, ale niektóre niekluczowe funkcje są nieobsługiwane lub wyglądają na uszkodzone.
• NOSCRIPT-2
  Witryna oferuje komunikat, że ich przeglądarka nie jest obsługiwana.
• NOSCRIPT-1
  Wygląda na to, że witryna się ładuje, ale użytkownik w ogóle nie może korzystać z kluczowych funkcji.
• NOSCRIPT-0
  Witryna w ogóle się nie ładuje i nie oferuje żadnych informacji zwrotnych dla użytkownika.

Przyjrzyjmy się niektórym popularnym witrynom i zobaczmy, jakie są ich wyniki.

Amazonka

Od jakiegoś czasu mam na oku mały robot-odkurzacz. Moja dzierżawa nie zezwala na żadne zwierzęta, a to jest kolejna najlepsza rzecz, gdy tylko przyjrzysz się jej wyłupiastym oczom.

Na pierwszy rzut oka Amazon wykonuje robotę łamania za pomocą rozwiązania innego niż JavaScript, chociaż brakuje głównego obrazu produktu.

Po bliższym przyjrzeniu się, w wersji noscript było trochę zepsutych. Chciałbym przejrzeć je jeden po drugim i zaproponować rozwiązanie dla każdego.

Brak zdjęć z galerii

Chciałem zobaczyć kilka zdjęć produktów, ale klikanie w miniatury nic mi nie dało.

Sprawa

Potencjalne rozwiązanie

Byłoby miło, gdyby te miniatury były linkami do pełnego obrazu, otwierającego się w nowej karcie. Można je następnie stopniowo rozszerzać do galerii obrazów za pomocą JavaScript:

• Przejmij zdarzenie kliknięcia linku miniatury;
• Chwyć atrybut href ;
• Zaktualizuj atrybut src głównego obrazu o wartość atrybutu href .

Link „Zgłoś nieprawidłowe informacje o produkcie” dotyczy tylko języka JavaScript

Czy ta funkcja naprawdę jest tak powszechnie używana, że ​​warto pobrać dodatkowe bajty JavaScriptu do wszystkich użytkowników, aby otwierała się jako zintegrowany modalny na stronie?

Sprawa

Potencjalne rozwiązanie

Zintegrowany formularz modalny Amazon wymaga do działania JavaScript. Uczyniłbym „funkcję raportu” jako samodzielny formularz pod osobnym adresem URL , np. /report-product?product-id=123 . To może być stopniowo rozszerzane do zintegrowanego modu przy użyciu Ajax do oddzielnego pobierania HTML.

Recenzje są domyślnie widoczne tylko częściowo

Sprawa

Potencjalne rozwiązanie

Dlaczego nie wyświetlić domyślnie całej recenzji, a następnie użyć JavaScript, aby skrócić tekst recenzji i dodać link „Czytaj więcej”?

Warto zaznaczyć, że tytuł recenzji jest linkiem do recenzji na samodzielnej stronie, więc przynajmniej nadal możliwe jest zapoznanie się z treścią.

Ogólnie byłem mile zaskoczony, jak dobrze strona działała bez JavaScriptu. Równie dobrze mogłaby to być pusta biała strona. Jednak brak zdjęć produktów oznacza, że ​​brakuje nam naprawdę podstawowej funkcji — uważam, że bardzo ważne jest, aby zobaczyć, co kupujesz! — więc szkoda, że ​​nie mogliśmy wisieć na torcie i przyznać mu oceny NOSCRIPT-5.

Ocena noscript Amazon: NOSCRIPT-3. Kąt

Wciąż nie zdecydowałem, który produkt chcę kupić, więc zwróciłem się do Camel Camel Camel, narzędzia do śledzenia cen Amazon.

Wielbłąd Wielbłąd Wielbłąd

Chciałem zdecydować między iLife V3s Pro a iLife A4s, więc udałem się na https://uk.camelcamelcamel.com/. Początkowo witryna wyglądała nie do odróżnienia od wersji obsługującej JavaScript.

Niestety wykres historii cen się nie wyrenderował. Zapewnił zastępczy tekst alternatywny, ale tekst alternatywny nie dał mi żadnego pojęcia, czy trend cenowy rośnie, czy nie.

Ogólna sugestia: zawsze podawaj sensowny tekst alternatywny . Niekoniecznie muszę widzieć wykres, ale byłbym wdzięczny za podsumowanie tego, co zawiera. Być może w tym przypadku może to być „wykres historii cen Amazon pokazujący, że cena tego przedmiotu pozostała w dużej mierze niezmieniona od marca 2017 r.” Ale automatyczne generowanie takiego podsumowania jest wprawdzie trudne i podatne na anomalie.

Konkretna sugestia dla tego przypadku użycia: pokaż obraz . Wykres w wersji skryptowej witryny jest w rzeczywistości samodzielnym obrazem, więc nie ma powodu, dla którego nie mógłby zostać wyświetlony w wersji noscript !

Mimo to główna treść pod wykresem dała mi informacje, które musiałem wiedzieć.

W tabeli przedstawiono parzystość funkcji potrzebną do zabezpieczenia oceny NOSCRIPT-5. Zdejmuję ci kapelusz, Camel Camel Camel!

Wielbłąd Wielbłąd Wielbłąd noscript Ocena: NOSCRIPT-5

Produkty Google

W tym momencie otrzymałem niespodziewanie telefon: znajomy zadzwonił do mnie i zapytał o spotkanie w tym tygodniu. Poszedłem więc do Kalendarza Google, aby sprawdzić moją dostępność. Google miał inne pomysły!

Byłem rozczarowany, że nie było powrotu do noscript — Google jest zwykle całkiem niezły w tego typu rzeczach.

Nie spodziewałbym się, że będę mógł dodawać/edytować/usuwać wpisy do mojego kalendarza, ale powinno być możliwe udostępnienie widoku mojego kalendarza tylko do odczytu jako podstawowej zawartości .

Ocena noscript w Kalendarzu Google: NOSCRIPT-0

Zainteresowany tym, jak Google zarządza innymi produktami, rzuciłem okiem na Arkusze kalkulacyjne Google:

W tym przypadku strona zawodzi o wiele bardziej wdzięcznie. Mogę przynajmniej przeczytać zawartość arkusza kalkulacyjnego, nawet jeśli nie mogę go edytować. Dlaczego kalendarz nie oferuje tego samego rozwiązania awaryjnego?

Nie mam sugestii dotyczących ulepszenia arkuszy kalkulacyjnych Google! Dobrze radzi sobie z informowaniem użytkownika, jeśli w środowisku noscript brakuje podstawowej funkcjonalności .

Ocena noscript w arkuszach kalkulacyjnych Google: NOSCRIPT-2

Ta ocena nie jest tak zła! Nie wszystkie strony będą w stanie oferować obsługę noscript , ale przynajmniej jeśli są szczere i szczere (tj. powiedzą „tak, nie będziemy próbować niczego ci dać”), co przygotuje cię — użytkownik noscript — na wypadek niepowodzenia. Nie zmarnujesz kilku cennych sekund, próbując wypełnić formularz, który nigdy nie zostanie wysłany, ani zacząć czytać artykułu, który następnie będzie musiał użyć Ajax do odzyskania reszty jego zawartości.

Wróćmy teraz do mojego potencjalnego zakupu na Amazon. Przed dokonaniem zakupu chciałem zapoznać się z recenzjami innych firm.

Wyszukiwarka Google działa naprawdę dobrze bez JavaScript. Po prostu wygląda na trochę przestarzały, jak te stare witryny tylko na komputery stacjonarne w stałych rozdzielczościach.

Widok obrazów wygląda jeszcze bardziej inaczej i wolę go na kilka sposobów — ta wersja ładuje się bardzo szybko i wyświetla wymiary i rozmiar obrazu w kilobajtach pod każdą miniaturą:

Ocena noscript w wyszukiwarce Google: NOSCRIPT-5

Jeden z wyników wyszukiwania zaprowadził mnie do recenzji na YouTube. Kliknąłem, nie oczekując wiele. Miałem rację, że się nie ekscytowałem:

Naprawdę nie spodziewałbym się, że witryna taka jak YouTube będzie działać bez JavaScript. YouTube wymaga zaawansowanych funkcji przesyłania strumieniowego, nie wspominając o tym, że naraziłby się na kradzież kopii, gdyby zapewnił samodzielne pobieranie MP4 jako rozwiązanie awaryjne. W każdym razie żadna strona nie powinna wyglądać na zepsutą. Wpatrywałem się w ten ekran przez kilka sekund, zanim zdałem sobie sprawę, że nic więcej się nie wydarzy.

Sugestia : jeśli Twoja witryna nie jest w stanie zapewnić rozwiązania awaryjnego dla użytkowników noscript , należy co najmniej wyświetlić ostrzeżenie o noscript .

Ocena noscript YouTube: NOSCRIPT-0

Który?

Kliknąłem jeszcze kilka linków do recenzji. Który? strona porad całkowicie mnie zawiodła.

To była strona, która wyglądała, jakby ładowała się poprawnie, ale dopiero po przeczytaniu treści zdasz sobie sprawę, że w rzeczywistości brakuje niektórych kluczowych informacji. Te kluczowe informacje są absolutnie kluczowe dla celu strony i nie mogę ich uzyskać. Dlatego niestety jest to naruszenie NOSCRIPT-1.

Sugestia : jeśli treść Twojej witryny zawiera ajax, ta treść istnieje pod innym adresem URL. Podaj link do tej treści dla użytkowników noscript . Zawsze możesz ukryć link, gdy pomyślnie zaatakujesz Ajax z JavaScript.

Który? ocena noscript witryny: NOSCRIPT-1

Facebook

W końcu przyznaję, że tak naprawdę nie stać mnie teraz na próżnię. Postanowiłem więc wskoczyć do mediów społecznościowych.

Facebook flat-out odmawia załadowania bez JavaScript, ale oferuje opcję awaryjną. Oto nasz pierwszy przykład NOSCRIPT-4 — witryny, która oferuje osobną wersję swojej zawartości dla użytkowników noscript lub telefonów z internetem.

Wersja mobilna ładuje się natychmiast. Wygląda brzydko, ale wygląda na to, że otrzymuję tę samą treść, co normalnie. Co najważniejsze, mam parzystość funkcji : tutaj mogę osiągnąć te same rzeczy, co na stronie głównej.

Ocena noscript na Facebooku: NOSCRIPT-4

Strona załadowana błyskawicznie:

Mogłem zobaczyć tylko 7 pozycji w kanale wiadomości naraz, ale mogłem kliknąć „Zobacz więcej artykułów”, które przeniosą mnie na nową stronę, używając tradycyjnych technik paginacji.

Jestem pod wrażeniem, że mam możliwość „zareagowania” na komentarz na Facebooku, chociaż jest to zadanie na wielu ekranach:

Nic nie stoi na przeszkodzie, aby Facebook zbudował menu „reakcji” w najechaniu w języku innym niż JavaScript, ale żeby być uczciwym, jest to skierowane do urządzeń mobilnych, które nie są w stanie najechać kursorem.

Sugestia : Bądź kreatywny dzięki CSS. Może się okazać, że w ogóle nie potrzebujesz JavaScript.

Wkrótce w moim kanale wiadomości pojawił się film. (W tym momencie uświadomiłem sobie, o ile mniej treści wideo widziałem w wersji mobilnej w porównaniu z normalnym Facebookiem, co oznacza, że ​​w rzeczywistości widziałem statusy ludzi, a nie losowe wideo, które „lubili” — znaczna poprawa jeśli o mnie chodzi!)

Spodziewałem się, że wideo nie zadziała po kliknięciu, ale kliknięcie miniatury otworzyło wideo w nowej karcie:

Jestem mile zaskoczony, że cała funkcjonalność jest dostępna w tej wersji strony bez noscript . W końcu jednak znalazłem jedną funkcję, która była zbyt niezgrabna i nieporęczna, aby przejrzeć do końca: tworzenie albumu.

Chciałem wrzucić album ze zdjęciami na Facebooka, ale w noscript -land to bestia zadania. Polega na przesyłaniu jednego zdjęcia na raz, przechodząc przez dwa lub trzy ekrany dla każdego przesyłania. Desperacko próbowałem i nie udało mi się znaleźć opcji przesyłania zbiorczego.

Pracowitość tego dotarła do mnie po zdjęciu numer trzy (w moim albumie będzie ich znacznie więcej), więc postanowiłem to nazwać dzień i wrócić jutro, gdy będę miał JavaScript.

Świergot

Sprawy zrobiły się dziwne, kiedy poleciałem na Twittera.

Zaintrygował mnie ten mechanizm, więc sięgnąłem do kodu źródłowego, który w rzeczywistości był zaskakująco prosty:

 <noscript><meta http-equiv="refresh" content="0; URL=https://mobile.twitter.com/i/nojs_router?path=%2F"></noscript>

Choć to rozwiązanie jest tak piękne, proste, okazało się, że to doświadczenie jest dość niezgrabne, ponieważ we flashu, zanim zostałem przekierowany, zobaczyłem, że jedna z osób, które śledzę na Twitterze, zaręczyła się. Jego tweet nie pojawił się na górze wersji „mobilnej”, więc musiałem go poszukać.

Sugestia : Wbuduj okres prolongaty w logikę po stronie serwera, aby przekierowania i nieostrożne odświeżenia nie utraciły interesujących tweetów, zanim zdążysz je przeczytać.

Nie pamiętałem uchwytu mojego przyjaciela na Twitterze. Wyszukiwanie było trochę trudne — zacząłem naprawdę tęsknić za sugestiami autouzupełniania!

Na szczęście strona wyników wyszukiwania podniosła jego konto i udało mi się znaleźć jego tweeta. Udało mi się nawet odpowiedzieć.

Ocena noscript na Twitterze: NOSCRIPT-4

Może to wydawać się hojnym wynikiem, biorąc pod uwagę niezgrabność, ale pamiętaj, że kluczową rzeczą jest tutaj parzystość funkcji. Nie musi wyglądać pięknie.

Wypróbowałem kilka innych serwisów społecznościowych, które w przeciwieństwie do Twittera nie osiągnęły zawrotnego poziomu zgodności z NOSCRIPT-4.

Inne sieci społecznościowe

LinkedIn ma ładny, szyty na miarę ekran ładowania. Ale nigdy się nie ładuje, więc jedyne, co mogłem zrobić, to gapić się na logo.

Ocena noscript LinkedIn: NOSCRIPT-0

Instagram nie dał mi dosłownie nic. Pusta strona. Zupełnie inny smak NOSCRIPT-0.

Ocena noscript na Instagramie: NOSCRIPT-0

Byłem zaskoczony, że Instagram zawiódł tutaj tak spektakularnie, biorąc pod uwagę, że osadzony na Instagramie działał bezbłędnie na mojej stronie z portfolio. Wydaje mi się, że z embedem nigdy nie wiesz, jakie są oczekiwania strony trzeciej w zakresie obsługi przeglądarki, ale ponieważ odwiedzam witrynę bezpośrednio, Instagram z przyjemnością dzwoni do rezygnacji z pomocy.

wiadomości BBC

Udałem się do BBC, aby uzyskać moje wiadomości.

Menu jest trochę przesunięte, a kolumna dość wąska (zdecydowanie jest to wzorzec, który widzę na wielu stronach — dlaczego „brak JavaScriptu” oznacza „urządzenie mobilne”?), ale mam dostęp do treści.

Kliknąłem na zakładkę „Najczęściej czytane”, która przenosi mnie do innej części strony. Dzięki skryptom ten link do kotwicy jest stopniowo ulepszany, aby osiągnąć rzeczywiste zachowanie karty, co jest pięknym przykładem budowania z solidnego rdzenia HTML.

Jak dotąd jest to jedyny przykład linku kotwiczącego, na jaki natknąłem się w moim eksperymencie, a szkoda, ponieważ jest to fajna technika, która oszczędza dodatkowe ładowanie strony i nie pozwala na fragmentację witryny na wiele mikrostron.

Wygląda to jednak trochę dziwnie, uporządkowana lista CSS oznacza, że ​​mamy tutaj błąd podwójnej numeracji. Klikam na jedną z historii.

Nie mogę uzyskać dostępu do treści wideo, ale z powodu problemów z prawami podejrzewam, że BBC nie może zapewnić oddzielnego samodzielnego wideo, tak jak robi to Facebook. Transkrypcja byłaby jednak przyjemna — i korzystna dla nie tylko użytkowników noscript .

Sugestia : podaj tekstowe rozwiązania zastępcze dla treści audiowizualnych.

Aby być uczciwym, treść artykułu zasadniczo podsumowuje treść, która pojawia się w filmie, więc tak naprawdę nie brakuje mi informacji.

Strony artykułów i indeksów ładują się błyskawicznie, przy około 300 KB (głównie obrazy). Brakuje mi miniaturek innych artykułów na stronie i możliwości pełnego wykorzystania nieruchomości na moim ekranie — ale to nie powinno utrudniać oceny.

Ocena noscript BBC: NOSCRIPT-5

GitHub

GitHub wygląda prawie tak samo , jak jego odpowiednik z obsługą JavaScript. Wow! Ale myślę, że jest to strona stworzona przez programistów dla programistów.

Zrobiłem trochę sprzątania na GitHub, rozglądając się po repozytoriach i usuwając stare gałęzie. Przez chwilę naprawdę zapomniałem, że jestem na wersji innej niż JavaScript, dopóki nie natknąłem się na jeden mały błąd:

Potem zacząłem się zastanawiać: „Jak GitHub poradzi sobie z nakładaniem etykiet na problemy?” więc dałem temu szansę.

Nie udało mi się jednocześnie utworzyć problemu i dodać do niego etykiet. W rzeczywistości nie mogłem znaleźć żadnego sposobu na dodanie etykiety, nawet po utworzeniu pustego wydania. Szkoda, że ​​strona upadła na ostatniej przeszkodzie, ponieważ porównanie z wersją skryptową było prawie bezproblemowe.

Ocena noscript GitHub: NOSCRIPT-3

Chociaż GitHub wygląda niesamowicie — nigdy nie wiedziałbym, że mój JavaScript jest wyłączony — brak możliwości korzystania z tej samej kluczowej funkcjonalności, co wersja oskryptowana, jest bummerem. Nawet brzydko wyglądająca strona noscript uzyskałaby wyższy wynik, ponieważ funkcjonalność jest ważniejsza niż forma.

Bankowość internetowa

Jeśli jest miejsce, w którym oczekiwałem, że JavaScript będzie wymagany, to na stronie banku NatWest. Myliłem się.

Nie tylko działa, ale też trudno odróżnić ją od normalnej strony. Ekran logowania jest taki sam, jedyną różnicą jest to, że fokus nie przechodzi automatycznie przez każde pole po jego wypełnieniu.

Ocena noscript NatWest: NOSCRIPT-5

Różnorodny

W ciągu dnia natknąłem się na kilka innych witryn.

FreeAgent — witryna z oprogramowaniem podatkowym, z której korzystam jako wolny strzelec — nawet nie próbuje skorzystać z funkcji zastępczej noscript . Ale hej, to lepsze niż pokazywanie uszkodzonej witryny.

Ocena noscript FreeAgent: NOSCRIPT-2

Co zrozumiałe, CodePen również musi być NOSCRIPT-2.

Ocena noskryptów noscript : NOSCRIPT-2

Tonik, dostawca energii, nie pozwala mi się zalogować, ale wydaje się to raczej przeoczeniem niż świadomą decyzją:

Ocena noskryptu noscript : NOSCRIPT-1

M&S Energy pozwala mi się zalogować — tylko po to, by poinformować mnie, że potrzebuje JavaScript do zrobienia czegokolwiek przydatnego zdalnie.

Ocena noscript M&S: NOSCRIPT-1

Teraz przechodzę do mojego ulubionego zrzutu ekranu dnia.

Jeden z moich kolegów polecił kiedyś kurs Accessibility for Web Design, który dodałem do zakładek. Postanowiłem się temu dzisiaj przyjrzeć i zaśmiałem się z ironii tekstu alternatywnego:

Z tekstem alternatywnym „Personas: Accessibility for Web Design” nie jestem zbyt pewien, czego mi tu brakuje — czy jest to obraz? Film? PDF? Sam kurs?

Podpowiedź : to właściwie wideo, ale musisz być zalogowany, aby go obejrzeć.

Tekst alternatywny tak naprawdę nie wspiera swojego celu, częściowo dlatego, że jest wypełniany automatycznie. Jako społeczność programistów musimy być lepsi w tego typu rzeczach. Chyba nie przeczytałem dzisiaj żadnego użytecznego tekstu alternatywnego.

Streszczenie

Zacząłem ten eksperyment, aby zobaczyć, ile witryn zostało zaimplementowanych przy użyciu progresywnego ulepszania. Odwiedziłem tutaj tylko niewielką garstkę witryn, większość z nich to wielkie nazwiska z dużymi budżetami, więc interesujące jest obserwowanie szerokiej gamy obsługi braku JavaScript.

Interesujące jest to, że stosunkowo proste witryny — szczególnie Instagram i LinkedIn — mają tak słabą obsługę noscript . Uważam, że jest to częściowo spowodowane stale rosnącą popularnością frameworków JavaScript, takich jak React, Angular i Vue. Deweloperzy tworzą teraz „aplikacje internetowe”, a nie „witryny”, w celu odtworzenia wyglądu i działania aplikacji natywnych, a używanie JavaScript do zarządzania DOM jest najłatwiejszym sposobem tworzenia takich doświadczeń.

Istnieje niebezpieczeństwo, że coraz więcej witryn będzie wymagać JavaScript do renderowania jakiejkolwiek treści. Na szczęście zazwyczaj możliwe jest budowanie treści w ten sam, przyjazny dla programistów sposób, ale renderowany na serwerze, na przykład za pomocą Preact zamiast React. Podjęcie świadomej decyzji o dbaniu o noscript daje korzyści płynące z podstawowego doświadczenia, jak opisano na początku tego artykułu, a także może przyczynić się do szybszego postrzegania czasu ładowania.

Myślenie o aplikacji od podstaw może być dość zniechęcające, ale przyzwoite podstawowe doświadczenie jest zwykle możliwe i w wielu przypadkach obejmuje tylko proste poprawki. Dobre podstawowe doświadczenie wskazuje na dobrze zorganizowaną stronę internetową, co z kolei jest zwykle dobrym znakiem dla SEO i dostępności. Zwykle jest to dobrze zaprojektowana strona internetowa, ponieważ projektant i programista poświęcili czas i wysiłek na zastanowienie się nad tym, co jest naprawdę kluczowe dla tego doświadczenia. Progresywne ulepszanie oznacza bardziej niezawodne doświadczenia, mniej błędów w produkcji i mniej dziwactwa poszczególnych przeglądarek, ponieważ pozwalamy platformie wykonać zadanie, zamiast próbować pisać wszystko od zera.

Z jaką oceną noscript jest zgodna Twoja witryna? Daj nam znać w komentarzach!