Dawno nie było na WebKrytyku normalnej, tradycyjnej recenzji strony (a bo tu jakiś szablon, tu jakiś kurs…). Pora to nadrobić. Dzisiaj padło na stronę TheDev.pl. Domena fajna, ale też wymagająca. Sprawdźmy, co się pod nią kryje.
- Pierwsza rzecz, jaka uderza, to skrajny minimalizm. Strona składa się raptem z trzech linków i logotypu.
- Prawdę mówiąc nie bardzo rozumiem, czemu ta strona nie jest zrobiona w modelu one-page, który akurat tutaj sprawdziłby się wyśmienicie. Zwłaszcza, że np. podstrona Kontakt zawiera tylko jeden link do maila.
- Na stronie głównej nawigacja klawiaturą jest możliwa (widać dokładnie, gdzie jest focus), niemniej na podstronie Portolio – już nie. Problem sprawiają poszczególne prace, które nie reagują na focus z poziomu klawiatury.
- Przy przełączaniu między podstronami pojawia się bardzo brzydki poziomy pasek przewijania.
- Strona totalnie nie działa bez JS. I zanim wybrzmi standardowa odpowiedź
Co za debil wyłącza JS?!!!
– każdy może nie mieć JS. - Strona główna dostępna jest pod dwoma adresami:
http://thedev.plihttp://thedev.pl/home. Ten drugi jest całkowicie niepotrzebny i może być z powodzeniem usunięty na rzecz standardowego/. -
Przejdźmy do kodu, który okazuje się wydmuszką. Bez działającego JS-a nie jest ustawiony nawet tytuł strony, wszystko zależne jest od Angulara.
I to mnie strasznie dziwi, bo nie widzę absolutnie żadnego powodu, dla którego Angular miałby być tutaj wykorzystywany. Przecież ta strona ma 3 podstrony, z których na jednej jest akapit tekstu, na drugiej jeden link… Wykorzystanie tutaj czegokolwiek ponad generator statycznej strony wydaje się przeinżynierowaniem. Zwłaszcza, że wygenerowanie 3 plików HTML nie stanowi większego wyzwania, a na pewno będzie wydajniejsze niż składanie wszystkiego przy pomocy frameworka – zwłaszcza, że treści jest na tyle mało. I zwłaszcza, że przy dobrze dobranym cache i zastosowaniu nowych technologii naprawdę można wycisnąć o wiele więcej niż to, co jest obecnie.
Warto także zauważyć, że brak treści na stronie jest uważany za złą praktykę nawet w wypadku aplikacji internetowych – co raportuje m.in. Lighthouse.
- Jak bardzo Angular jest tutaj armatą na muchę, wskazuje już sam plik JS aplikacji, w którym jedyne, co jest, to… obsługa poszczególnych adresów. Nie widzę najmniejszego sensu w emulacji serwera po stronie przeglądarki.
-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>Specyfikacja HTML ostrzega przed tym.
I w sumie tyle, za dużo więcej nie da się powiedzieć, bo… nic więcej nie ma. A to, co jest, jest praktycznie książkowym przykładem przeinżynierowania.
„Strona główna dostępna jest pod dwoma adresami” Ba! nawet pod sześcioma!
– http://thedev.pl/
– http://thedev.pl/home
– http://thedev.pl/index.html
– http://www.thedev.pl/
– http://www.thedev.pl/home
– http://www.thedev.pl/index.html
Brak określonego języka strony. Keywordsy są niepotrzebne. Obrazki nie są w formacie jpg/svg – ważą zdecydowanie za dużo! Podobny problem jest z fontami.
Wisienka na torcie niezminifikowanych zasobów – angular-route.js
210kb JS-a, żeby obsłużyć 3 ścieżki routingu – szanuję mocno. Obstawiam, że prosty router – z obsługą History API – można zamknąć w 50 linijkach kodu. Hmm… i tak na stronie nie ma żadnych bombastycznych przejść – może w theDev nikt nie słyszał o przyjaznych adresach?
Myślałeś może o tym by ocenić… Webkrytyk.pl? Jestem ciekaw co napisałbyś o jej obsłudze na smartfonach 🙂
Wiem o tym, będę musiał się w końcu pochylić nad tym problemem, ale nie mam czasu w chwili obecnej 🙁 W końcu pewnie stanie na tym, że przełączę WK „tymczasowo” na gotową, responsywną skórkę, heh.
Sam wiesz, że najlepiej byłoby wywalić WP. Przy takiej częstotliwości wpisów nie ma WP żadnego sensu.
O naprawie WK (problemów spodoowanych przestarzałą skórką i WP) mówisz od 2 lat. A przynajmniej jakbyś sam, np. w jekyllu prowadził WK to nie byłoby gadania komentujących o brzydkim kodzie WK.
Właściwie wystarczy wziąć gotowy theme do jekyla, poprawić HTML żeby był najwyższej jakości i gotowe. Jak chcesz to mogę CI pomóc z tym.
Planuję przejść na generator pokroju Jekylla, ale myślałem raczej o czymś autorskim, a przynajmniej z mocno zmodyfikowanym kodem. Jekyll sam w sobie jest cienki jak pasztetowa…
Ale pomoc bardzo mile widziana 🙂
Dlaczego nie nagrywasz własnych kursów HTML i CSS oraz JS i PHP jak Zelent?
Bo wolę pisać niż nagrywać. Ale w sumie mógłbym spróbować.
Czekam na poradnik do GitHyba.
przydałoby się
Sam jestem w trakcie tworzenia podobnej strony internetowej i tu pytanie – czy warto jest używać Jekylla czy jest jakieś inne narzędzie do generowania statycznych stron godne polecenia?
Do wyboru, do koloru 😉 https://www.staticgen.com/