ApiLabs.pl

Dawno nic już nie pisałem, więc pora to nadrobić (w sumie to już wakacje idą i mam sporo – naprawdę sporo – kandydatów do oceny; może by tak urządzić maratonik z jedną oceną na dzień?). Dawno też nie było żadnego prawdziwego profesjonalisty, co również dzisiaj nadrobimy. W sumie nadrobimy dzisiaj bardzo dużo rzeczy, więc żeby nie tracić czasu przedstawiam ApiLabs.pl – ludzi, którzy chcą programować za mnie.

  • Pewnie to zboczenie zawodowe, ale osobiście nazwa ApiLabs kojarzy mi się bardziej z jakąś darmową usługą/programem ułatwiającym tworzenie RESTful API niż firmą programistyczną.
  • Już na samym początku widać, że coś jest nie tak (zwłaszcza w lisku, ponieważ Chrome poprawnie wyświetla górną część strony).
  • Kolejna SPA. Nie jestem zwolennikiem tego typu rozwiązań. Sieć URI-ami stoi! Poza tym drażni mnie potrzeba scrollowania tak długich stron na mobilce. Tym bardziej, że menu jest nieruchome, więc jak se zjadę niżej, to trzeba ćwiczyć palca.
  • Najwidoczniej podejście mobile first zmienia się w mobile only. Wszak przy dotyku nie trzeba żadnych ramek wokół elementów, ale na komputerach już tak. Kolejna strona próbująca zmienić moje przyzwyczajenia.
  • Reszta strony jest przejrzysta, ładna, choć zdarzają się literówki (jest subtelna różnica między Ror a RoR) czy też błędy interpunkcyjne (Robimy to, co umiemy najlepiej). Niemniej jest ich na tyle mało i są tak drobne, że czepia się ich tylko taki skurczybyk, jak ja.
  • Natomiast na pewno zdecydowana większość będzie mieć zastrzeżenia do formularza kontaktowego. Niektóre etykiety pól są przypięte w kosmos – innymi słowy: są bezsensowne.
  • Przy danych kontaktowych, e-mail i telefon winny być klikalne. Zwłaszcza, że strona jest responsywna, więc na mobilce aż chce się pacnąć. No i jak podaje się miasto, to Google już nas przyzwyczaiło do tego, że gdzieś jest mapka.
  • Bardzo podoba mi się cennik. Jeśli czyta to jakiś potencjalny klient, to niech zapamięta, że Comandeer niżej nie schodzi (a co!).
  • A jak już przy linkach jesteśmy – //apilabs.pl/index.php#pricing wygląda po prostu ohydnie. Nie dość, że niepotrzebnie jest dorzucona nazwa pliku (wszak //apilabs.pl/#pricing odnosi się do tego samego), to jeszcze nazwa kotwicy jest po angielsku na polskiej stronie. Tak, wiem – sam twierdzę, że w kodzie wszelkie nazwy powinny być po angielsku, ale id używane do nawigacji winny być w języku strony. //apilabs.pl/#cennik byłoby tu najlepsze (ideałem byłoby po prostu //apilabs.pl/cennik, ale to wymagałoby zmiany architektury strony) – wiadomo do czego to odnośnik.
  • Przypomnijmy sobie obietnicę:

    Stosujemy PHP, Ror, MongoDB, MySQL, Redis, Node.js, JavaScript, HTML5, CSS3, Ajax.

    Cóż, teraz wypada sprawdzić czy to prawda. PHP już odkryliśmy (przez brzydki link), więc skupmy się na reszcie.

  • Walidator nie jest zadowolony, ale twierdzi, że to HTML5.
  • Outline nie zachwyca. Strona nazywa się ZAUFAJ NAM (oczywiście krzyk nieodzowny) a większość jej treści można odczytać z nagłówków. To oznacza, że najprawdopodobniej zostały tutaj użyte w nadmiarowej ilości. Ah, i śmieszą wpadki typu cENNIKnarastający krzyk?
  • Prędkością strona nie powala. Google PageSpeed pokazuje nawet tak podstawowy błąd, jak wyłączona kompresja.
  • Plus za określenie języka strony – wciąż jest to jedno z najczęstszych przeoczeń.
  • Deklaracja kodowania występuje na stronie 2 razy – raz w skróconej postaci a raz w starej, niepotrzebnie rozwlekłej. Chyba nie muszę mówić, że to niepotrzebne powtarzanie się.
  • Znaczniki Google+ są specjalnie traktowane, bo jako jedyne mają niepotrzebny, po-XML-owy slash. Z kolei CSS ma całkowicie niepotrzebny atrybut [type].
  • <meta name="description" content>

    Wieszczę duże sukcesy w pozycjonowaniu.

  • <meta http-equiv="X-UA-Compatible" content="IE=edge">

    Coś, co w istocie jest nagłówkiem HTTP, winno być nagłówkiem HTTP.

  • Strona ciągnie dane z dwóch (w przypadku starszych IE aż z 4) CDN-ów. W teorii powinno to przyspieszyć ściąganie zasobów, lecz w praktyce wychodzi to średnio.
  • 5 arkuszy stylów – o 4 za dużo.
  • Tego typu skrypt, który tutaj jest wstawiony w head, właśnie dla head został zaprojektowany, ale? okazuje się, że trzeba wiedzieć jak go wstawiać.
  • Strona korzysta z Bootstrapa, więc na 95% można oczekiwać udziwnionego kodu HTML.
  • <a href="/" class="pull-left scrollTo navbar-brand"><!--<i class="fa fa-flask"></i>--> <img src="img/apiLABS.png" alt="API LABS - usługi programistyczne" width="130" /></a>

    To powinno być głównym nagłówkiem strony.

  • <button id="mobileMenu" class="fa fa-bars" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"></button>

    Pusty element to zbędny element. Pusty klikalny element to bezsensowny element. Radzę poczytać o image replacement.

  • W nav brakuje nagłówka, natomiast linki niepotrzebnie krzyczą (od tego jest CSS i text-transform).
  • Obecne używanie section > article jest bez sensu. Tutaj znacznik artykułu zdaje się być tylko do stylowania. Zostawiłbym same sekcje.
  • Zgodnie ze specyfikacją HTML5, podtytuły nie powinny być tworzone na nagłówkach.
  • projektów

    Coś średnio z tym polskim językiem.

  • Wspaniały responsywny obrazek z całkowicie niepotrzebnymi stylami inline – Content Security Policy wycina je w pień.
  • Jak tworzy się listę usług? Na nagłówkach:

    <h3><i class="fa fa-globe fa-large"></i>  Dostarczamy oprogramowanie webowe</h3>
    <br>
    <h3><i class="fa fa-tablet"></i>   Tworzymy dla mobile i desktop</h3>

    Do tego całkowicie błędne użycie niełamliwej spacji. Co do ikonek, można pisać o nich elaboraty, więc powiem krótko: SVG jest lepsze.

  • I tam, gdzie sekcje winny być (sekcja CO OFERUJEMY, gdzie każda usługa to tak naprawdę sekcja), są zwykłe div.
  • Cytaty są co prawda odpowiednio oznaczone przy pomocy tagu q, jednak wydaje mi się, że lepiej wyglądałby tutaj blockquote.
  • Jedyny link zewnętrzny oczywiście musi mieć [target].
  • <label for="email" class="col-sm-2 control-label" id="captcha" style="font-size:14px;"></label>

    Średnio dostępny ten antyspam

  •  <div class="col-md-6">
    	<h4>API LABS Maciej Oleksy, ul. Semaforowa 67 lok. 5, 52-115 Wrocław, NIP: 899-235-50-11, REGON: 021962783</h4>
    	<p><i class="fa fa-map-marker rounded-icon"></i> Wrocław, Polska</p>
    	<p><i class="fa fa-envelope rounded-icon"></i> kontakt@apilabs.pl</p>
    	<p><i class="fa fa-phone rounded-icon"></i> +48 (71) 735 70 10 (pon-pt, godz. 9-17)</p>
    </div>

    Aż się prosi o włożenie w address (a być może i w dl). No i po co ten nagłówek?

  • Walidacja formularza zachodzi w JS – a przecież HTML5 ma natywny system walidacji.
  • Wkładanie kodu asynchronicznego wczytywania GA do synchronicznie wczytywanego pliku po prostu śmieszy. Rozumiem gdyby strona opierała się na CSP, ale się nie opiera. Tego typu praktyki zatem obniżają jedynie wydajność.
  • A co w CSS-ie?

     /**
    
    TABLE CONTENTS
    	---------------------------
    		01. Resets
    		02. Typography
    		03. Header
    		04. Home
    		05. Services
    		06. Portfolio
    		07. Team
    		08. Pricing
    		09. Brands
    		10. Contact
    		11. Footer
    		12. 404 NOT FOUND
    		13. Milestone
    		14. Pagination
    		15. Plugins
    			- parallax
    			- Easy Pie Chart
    			- Isotope
    			- Owl Carousel
    			- Pace Loader
    			- js animation
    			- bxslider
    		16. Misc / Globals
    		17. Responsive
    	---------------------------
     **/

    Ktoś chyba zapomniał co to build tools i zostawił kod na poziomie developerskim.

  • a, a:focus, a:hover, a:active {
      outline: 0;
    }

    Bardzo przemyślana decyzja.

Kolejna z cyklu stron profesjonalnie wyglądających, ale niekoniecznie profesjonalnych pod maską. Szkoda, że te rzeczy rzadko idą z sobą w parze.

PS co do propozycji napisania poradnika – w te wakacje (czyt. do września) powinien pojawić się mały, ciekawy projekt, który prawdopodobnie zadowoli wszystkich spragnionych wiedzy.

3 komentarze do “ApiLabs.pl”

  1. Świetny opis i czekam z niecierpliwością na projekt. Kiedy mam za zadanie szkolić nowych kadetów i wysyłać ich na jakiś kurs, pierwsze co robię, to odsyłam ich na tą stronę, dopiero potem odsyłam ich na kursy.

    Najlepsza nauka to nauka na błędach 😉

    1. Co do szablonu WK zgodzę się bez bicia – należy się mu trochę miłości 😉 Inna rzecz, że nigdzie się nie przedstawia jako mobile friendly, więc w sumie ciekawi mnie czemu Google stosuje jedną miarę do takich stron.

      Natomiast co do dziwnych dogmatów – konkrety. Wszystko, co jest zawarte w krytyce jest oparte na odpowiednich specyfikacjach W3C oraz ogólnie przyjętych dobrych praktykach i na wszystkie jestem w stanie znaleźć odpowiednie argumenty.

Skomentuj Paweł Bajor Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.