AdrianBienias.pl

13 czerwca 2014 przez Comandeer | Opublikowany w Strony WWW

Tagi: ,

5

Sesja idzie, człowiek ma coraz więcej czasu, to też popada w filozoficzny nastrój i częściej spogląda w gwiazdy. Ten trend nie ominął także i mnie. Spoglądałem zatem w gwiazdy, aż w końcu przypomniało mi się, że swego czasu widziałem gwiazdę w Internecie?

Tym sposobem powróciłem do dawno odwiedzonego bloga Adriana Bieniasa. Jako stetryczały starzec umysłowy postanowiłem pogderać jak zawsze.

  • Widać, że autor postanowił postawić na silną markę – siebie samego. W chwili obecnej takie promowanie nazwiska może być jeszcze bardziej widowiskowego, dzięki nowej domenie .guru. AdrianBienias.guru zdecydowanie wygląda ładniej.
  • Nie powitał mnie wkurzający komunikat o cookies. Prawdę powiedziawszy komunikat jest tak mało denerwujący, że przez dłuższą chwilę myślałem, że go nie ma. Ale jest – w stopce, tam, gdzie powinien być.
  • Skąd skojarzenie z gwiazdami? Wystarczy spojrzeć w tło – wspaniała galaktyka. Oczywista aluzja do autora bloga, który – jak widać jest gwiazdorskim e-biznesmenem i dobrym grafikiem ery Web 2.0 – mamy gradienty, refleksy w kawie, zdjęcia przypięte spinaczem? Jednym słowem: wszystkie niezbędne elementy.
  • Strona jakich dużo w Sieci – krótkie, acz treściwe porady webmasterskie (nawet mi się zdarzy skrobnąć takie czasami!).
  • Jednakowoż nie byłbym sobą, gdybym tej założonej z góry treściwości nie sprawdził. Na próbkę wybrałem nieśmiertelny formularz kontaktowy w PHP. Wówczas odkryłem, że cała ta strona jest de facto video blogiem. Filmik o formularzu trwa prawie pół godziny – wydaje mi się, że ciut za długo. No ok, ale pooglądam? I co widzę?

    • Bootstrap atakuje – w końcu tworzymy prosty formularz kontaktowy. Otóż nie – Bootstrap i prostota są zwalczającymi się od wieków antagonizmami i tłukę to od dawna. Albo tradycyjne OOCSS, albo sensowny BEM. Natomiast tej dziwnej hybrydzie od Twittera mówię twarde i zdecydowane raczej nie!
    • Ale wracając do filmiku – mowa jest o drugim filmiku, mówiącym o zakładaniu konta hostingowego. Tutaj wręcz się prosi, żeby do filmiku dodać odpowiednią notkę, odsyłającą do wspomnianego poradnika.
    • Ok, lecimy dalej: tutek jest o formularzu w PHP i autor nawet już wspomniał, że potrzebujemy serwera HTTP, jednak i tak zamienia URI // na http://, bo w Windowsie stwarza to problemy? Ale nie na serwerze a tam będzie to odpalane. Całkowicie nie rozumiem tej zmiany – to wszak rozwiązanie tymczasowego pseudoproblemu.
    • Natomiast przy wklejaniu adresu pluginu jQuery Validation, autor zupełnie nie zwraca uwagi na to, że tym samym strona będzie ciągnąć skrypty z dwóch różnych CDN. To najprawdopodobniej wprowadzi opóźnienie wczytania strony.
    • Wcięcia w kodzie – cóż, przy wklejeniu zajęłoby raptem z kilka sekund odpowiednie stabowanie całości (w Sublime są to aż 2 sekundy).
    • Błąd z textarea[rows] jest niepotrzebny. Taka wtopa IMO powinna zostać wycięta i zastąpiona poprawnym fragmentem. Chyba, że tu chodzi o jakiś efekt psychologiczny (Autor też człowiek? Naturalność sytuacji?) – jednak czy to aby nie za sprytne.
    • Duży plus za zwrócenie uwagi na label!
    • Jednakże brakuje pól formularzy z HTML5 – jeśli korzystamy z HTML5 Boilerplate, to używajmy go po coś.
    • Mieszanie polskich i angielskich nazw w kodzie (#formularzKontaktowy vs .inputSubject) – trochę konsekwencji!
    • jQuery Validation Plugin, opisywany w tutorialu, jest w stanie walidować formularz dzięki atrybutom z HTML5 – w wypadku przedstawionego formularza jest to rozwiązanie o niebo lepsze od customowych zasad. Czemu? Bo działa bez JS. No i nie wymaga dodatkowego nakładu pracy.
    • Nie wiem czy można w kontekście odwołania do zewnętrznego pliku w form[action] podminowuje wiarę w wiedzę autora. Wszak jest to jedna z podstawowych kwestii związanych z formularzami – takie rzeczy autor winien sprawdzić przed przystąpieniem do tworzenia zasobu.
    • Co mamy po stronie PHP? Skopiowany z manuala prymitywny przykład wykorzystania mail. Ale to jeszcze nie jest najgorsze – po stronie PHP NIE MA JAKIEJKOLWIEK WALIDACJI!!! To nawet nie jest ignoracja – to jest grzech przeciwko Internetowi. userowi się nie ufa. To podstawowa mantra webmastera. Amen
    • Czego brakuje – oprócz walidacji? IMO wartałoby wspomnieć o PHPMailerze, który rozwiązuje 90% problemów, które mogą wystąpić przy zabawie mailami w PHP. Byłoby to od razu doskonałym wstępem do Composera. I zanim mi ktoś zarzuci, że wszak to miał być zwykły tutek o prostym formularzu – tak się właśnie powinno uczyć PHP. Brakuje mi solidnej treści po polsku o obiektowym, użytecznym PHP.
  • Tyle o warstwie treściowej. Przejdźmy do techniczniejszych szczegółów. Z czystej ciekawości przeszedłem do podstrony Kontakt, aby sprawdzić czy i tutaj autor użył label. Niestety, tutaj go już nie ma a to podstawowy błąd dostępności. Dodatkowo CAPTCHA jest tak prosta do złamania, że można by ją po prostu wsadzać do pola jako domyślną wartość.
  • Jeśli jeszcze górne menu jest widoczne przy TAB-owaniu, tak już boczne i większość treści nie jest. To drugi z podstawowych błędów dostępności. A wystarczyło przepisać style z :hover na :focus.
  • Zajrzałem w zakładkę O mnie. W oczy – oprócz nieprzeliczonej liczby znanych autorowi programów graficznych – rzuciła mi się w oczy ikonka CSS. Tak, to ikonka z W3Schools?
  • Ok, lecimy po kodzie. Na dobry początek – walidator. Co prawda niby tylko 4 błędy, ale jak widać ostatni błąd zabił walidator.
  • Outline jest całkowicie płaski i pozbawiony sensu (np czemu wyszukiwarka jest podsekcją sekcji o stronach ze zdjęciami royalty free?).
  • Szybkość wczytywania nie jest najlepsza – wypadałoby poprawić, zwłaszcza na mobilnych.
  • W kodzie oczywiście stary, dobry HTML5, który czasami dostaje schizofrenii i twierdzi, że ma X-a. Albo wszędzie wciskamy dodatkowy, niepotrzebny slash, albo nigdzie – bądźmy konsekwentni.
  • Mamy określony język strony – za to plus.
  • [rel^=shortcut] to wymysł IE. Najlepiej po prostu mieć plik /favicon.ico.
  • Mamy tu marnotrawienie transferu przez niepotrzebne [type] dla skryptów i stylów.
  • Wiele za wiele CSS i JS, który dodatkowo jest ładowany w head, zamiast na dole strony.
  • /*
    Theme Name: Responsive Theme Adrian Bienias Blog
    Author: Adrian Bienias
    Author URI: http://adrianbienias.pl/
    Version: 4.0
    */

    Zapewne to bannerowy komentarz z głównego arkusza, czyż nie? Otóż jednak nie – to? cała zawartość jednego z arkuszy. Jeśli to pozostałość z przyzwyczajeń preprocesorowych, to trzeba zwrócić uwagę na jedną rzecz: preprocesory działają przed publikacją, żeby nie produkować takich krzaków.

  • Całość stoi na Bootstrapie, co oznacza tyle, że kod HTML na pewno będzie udziwniony.
  • <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    	<span class="icon-bar"></span>
    	<span class="icon-bar"></span>
    	<span class="icon-bar"></span>
    </a>

    Dokładnie to miałem na myśli.

  • a.brand winno być głównym nagłówkiem strony. No i logo nie powinno mieć w [alt] określenia logo. Opis obrazka powinien opisywać jego funkcję a nie to, czym jest.
  • W HTML-u 5 divitis to jeszcze gorsze przewinienie. Mamy tyle semantycznych elementów a i tak wszędzie dostajemy nicniemówiący kontener.
  • <div class="navbar-margin-bottom"></div>

    Pusty element = zbędny element. Do takich rzeczy od dobrych 5 lat służą pseudoelementy. Ten element jest dodatkowo całkowicie bezsensowny, gdyż nawet nie ma przypisanych stylów.

  • <div id="facebook"><a href="https://www.facebook.com/pages/Adrian-Bienias/311593262189052" target="_blank"></a></div>

    Pusty element klikalny to całkowity bezsens. Kolejna osoba nieszanująca niepełnosprawnych. Tutaj powinien zostać zastosowany image replacement. Dodatkowo grzech [target]u, pomijając fakt, że socjalki to jednak lista.

  • W wyszukiwarce brak label (które można ukryć przez technikę .visuallyhidden) – podstawowy błąd dostępności.
  • <button type="submit" id="submit" class="btn"><span class="icon-search"></span></button>

    Kolejny pusty element klikalny. A wystarczy znać podstawy ARIA, by wiedzieć jak ładnie połączyć ikonkę z dostępnym opisem ([aria-label] lub .visuallyhidden).

  • Wyszukiwarka to pierwszy nagłówek na stronie i od razu otrzymujemy h3. To tak jakby zacząć tytułować książkę od podtytułu śródsekcji przedmowy.
  • <div class="clear"></div>

    To już jest po prostu nieznajomość narzędzi, z których się korzysta. Bootstrap ma wbudowaną klasę .clearfix, żeby nie używać takich potworków.

  • W artykułach brakuje microdata/mikroformatów.
  • Tagi to lista. Przecinki i umieszcenie w jednej linijce można spokojnie osiągnąć w CSS.
  • <a href="http://adrianbienias.pl/premiera-kursu-php-od-podstaw/"></p>

    To chyba jakaś niedokończona rzecz.

  • <div>Przejdź do artykułu</div>

    Brawa za prawidłowe wykorzystanie niełamliwej spacji. Szkoda, że ta perełka gubi się wśród masakrycznego kodu przycisku.

  • Przez cały kod de facto powtarzają się te same błędy i schematy postępowania – nic ciekawego się tam nie dzieje.
  • A na końcu body kolejne kilkanaście skryptów JS. To boli.

Bombastyczny wygląd niestety w tym wypadku nie przysłania niedoskonałości treściowych i technicznych. Z jednej strony widać, że autor ma pewien zasób wiedzy, jednak z drugiej ewidentnie mu go brakuje (brak walidacji w PHP). Jak pod względem zdolności graficznych nic do zarzucenia nie mam, tak pod względem programistycznym – jak najbardziej.

Komentarze 5 komentarzy

Hej. Kolejna świetna krytyka. Tak BTW, czy w czasach walidacji Formularzy przez sam HTML5 warto zabezpieczać się PHP, kiedy nawet już IE sobie ładnie z tym radzi?

@Patryk: cześć,
OCZYWIŚCIE że trzeba. Walidacja po stronie klienta to tylko dodatek, który ma sprawić że w wypadku błędów formularz nie wyczyści się i tak dalej, uprzyjemniacz dla użytkownika po prostu.

Walidacja po stronie serwera jest jedyną pewną metodą. Co po walidacji po stronie klienta, skoro kod ten można zmienić? Przykładowa i najprostsza metoda, choć nie jedyna: otwieram firebuga, kasuję [type=”email”] i pcham do formularza jakiś syf, który rozsypie stronę. Zajmie to około 5 sekund. Walidacji po stronie serwera natomiast nie obejdziesz, może mieć ona niedociągnięcia, ale nigdy jej nie „wyłączysz” bez dostępu do tego serwera.

Pozdrawiam,
Sobak.

A tam, nikt nie babrze się w dev toolsach, żeby zmieniać kod HTML formularza. Odpala się konsolę, składa odpowiednie żądanie w cURL-u i nawet nie czeka aż lisek się zagrzeje 😉

Proponuje odskoczyć trochę od krytyki stron i na podstawie ich zrobić w następnym artykule jakiś poradnik, co robić, jak powinno coś wyglądać, co zachować, a czego trzymać się z daleka i jakich błędów nie popełniać.

Myślę, że jest to dobry pomysł i dla czytelników bardzo przydatny 😉

Miło mi, że chciało Ci się tak dogłębnie przeanalizować moją stronę 🙂
Fakt do wszystkich błędów przyznaję się bez bicia i uważam Twoją krytykę za jedną z najkompetentniejszych jakie kiedykolwiek było dane mi na mój temat czytać/słyszeć.

Niemniej mam na swoją obronę pewną ideologię, którą zaraziłem się z książki Kamila Cebulskiego bodajże „Efekt Motyla”. Pisał on, że nie ma sensu być perfekcjonistą i on np. robiąc literówkę w mailu w ogóle jej nie poprawia. Szkoda mu czasu – przekaz jest zachowany, a takich poprawek w ciągu całego życia można uzbierać na łączną sumę nawet lat z naszego życia.

Oczywiście wiem, że na moich stronach czy w moich kursach mogą pojawiać się błędy. I tak jak napisałeś – liczę, że ludzie zdają sobie sprawę, że jestem człowiekiem 🙂

Perfekcjonizm jest efektowny ale nie jest efektywny.
Zmianę szablonu planuję już od dłuższego czasu – niestety doba ma tylko 24h a liczba projektów i pomysłów, które staram się realizować często wykracza poza moje czasowe możliwości.
Cały czas walczę więc z kompromisem perfekcjonizmu, który konkuruje z mierzalnymi (finansowymi) efektami mojej pracy.

Napisz komentarz

Uwaga! Uprasza się komentujących, którzy chcą obrazić autora, aby najpierw dokonali niezbędnego researchu jego osoby. Z góry dziękujemy za poświęcony czas.