strona do oceny - strona firmowa one-page

pytanie zadane 15 maja 2017 w Nasze projekty przez gremlin Dyskutant (7,600 p.)

Witam złowieszczo.

Jako, że oceniając moją poprzednią stronę dostałem wiele cennych wskazówek i uwag, pragnę się podzielić z Wami następną.

Jest to strona typu one-page, zawierająca takie elementy jak przyklejane menu, toggle elementów, scrollowanie do odpowiednich sekcji.

Użyte technologie: js, html, css.

Zwracam się do Was z prośbą o ocenę kodu oraz wyglądu strony, wskazanie ewentualnych błędów itp.

Link do strony: https://nilmergomino.github.io/2-strona-firmowa/

Link do repozytorium: https://github.com/NilmergOmino/2-strona-firmowa

Dziękuję za uwagę i poświęcony czas :)

komentarz 16 maja 2017 przez gremlin Dyskutant (7,600 p.)

Dzięki wszystkim za odpowiedzi i cenne uwagi.

Właśnie wprowadziłem zmiany uwzględniając wasze wskazówki.

Do tego poprawiłem trochę ten smooth-scroll bo miał małego buga którego nie wykryłem wcześniej z uwagi na rozkład elementów na stronie, otóż gdy jakiś element na dole strony do którego odwoływała się kotwica był niżej niż górna krawędź okna to funkcja chcąc do niego dotrzeć blokowała możliwość scrollowania i trzeba było kliknąć w menu na element który jest wyżej żeby odblokować. Ale już poprawiłem. Mam nadzieję, że dobrze.

Pozdrawiam złowieszczo. :)

8 odpowiedzi

odpowiedź 15 maja 2017 przez radek024 Szeryf (77,160 p.)

<link rel="stylesheet" href="css/responsive.css">

Nie ma sensu umieszczać styli responsywnych w taki sposób. Dajesz tylko zapytanie więcej - chyba, że użyjesz znacznika media i tam określisz dla jakiś rozdzielczości style mają się pobierać.

<img class="header__logo" src="img/logo.png" alt="Space Travels">

Wywal obrazek i zobacz - czy ten napis zupełnie odzwierciedla obrazek?

<footer class="main__footer">

Dla mnie nazwa klasy lekko nie pasuje do funkcji pełnionej przez element. Wiem, że BEM itd, ale czy nie jest to bardziej jakiś social-media?

section>article jakoś do mnie nie przemawia..

IMO to powinno być section, a article - divem, ewentulanie section(i wtedy div zostaje jako div).

main__travel-description_right - co jeżeli zmniejszymy stronę? Czy nadal element znajduje się po prawej stronie?
<span class="main__list-question-element" role="button" aria-pressed="false" aria-expanded="false" tabindex="0">Drugie pytanie</span>

Button odpowiada za działania wewnątrz strony - jak już dałeś role="button", to dlaczego nie zdecydowałeś się właśnie na buttona? :D

<li><a href="#">Polska Agencja Kosmiczna</a></li>

Powinien być atrybut title(do wcześniejszych też, jeżeli nie było).

Zobacz na outline - niektóre elementy nie mają nagłówków.
Responsywność jest OK - ale menu posiada za małą czcionkę. Mogą być trudności z kliknięciem.
Trochę za agresywny kolor dla social-mediów po hoverze.
Po stylach widzę, że używasz animacji o nazwie fade-in - w takim razie czy jest ona koniecznie potrzebna w JS? Masz zalinkowaną.

padding-left: 5%; display: block; padding-top: 5px; padding-bottom: 5px;

Trochę to nieschludne - zdecyduj się albo na % albo na px.

.main__question-article_hidden{
    display: none;
}

Poczytaj trochę o ukrywaniu elementów(słowo klucz: visuallyhidden).
Raz używasz nomemklatury kolorów pisemnej, raz RGB - zapisuj jednym sposobem.

.footer a

Nie stylizujemy po tagach! Ostatnie elementy a tu klops :D

outline: none;

http://www.outlinenone.com/

Mimo to ogółem jest OK, może jeszcze czcionka trochę nieczytelna - ale mogło być gorzej.

komentarz 15 maja 2017 przez gremlin Dyskutant (7,600 p.)

Wywal obrazek i zobacz - czy ten napis zupełnie odzwierciedla obrazek?

Logo jest jednocześnie linkiem na stronę główną dlatego logicznym wydało mi się, że alt powinien być nazwą tej firmy. A jeśli nie to czym?

Button odpowiada za działania wewnątrz strony - jak już dałeś role="button", to dlaczego nie zdecydowałeś się właśnie na buttona? :D

Jest to lista pytań, trochę dziwnie dawać do listy buttony, może się mylę, ale wydawało mi się to logiczniejsze, w końcu po coś ten role="button" wymyślili. Ale może się mylę.

Po stylach widzę, że używasz animacji o nazwie fade-in - w takim razie czy jest ona koniecznie potrzebna w JS? Masz zalinkowaną.

Animacja w js służy do jednokrotnego pojawiania się niektórych elementów podczas scrollowania z delikatnym ruchem w górę jednocześnie, korzysta ona z animacji w css. Oprócz tego w css jest jeszcze animacja zwykła fade-in. Nie wiem jak to pierwsze można osiągnąć za pomocą samego css.

outline: none;

Likwiduję outline ale nadaje specjalny wygląd dla focus taki sam jak dla hover, czytałem, że jest to prawidłowe, chyba, że jednak nie?

Dzięki za wyczerpującą ocenę i wskazówki :)

komentarz 15 maja 2017 przez radek024 Szeryf (77,160 p.)

Logo jest jednocześnie linkiem na stronę główną dlatego logicznym wydało mi się, że alt powinien być nazwą tej firmy. A jeśli nie to czym?

W takim razie jest ok - ale to one-page, a logo przewija do góry. O to mi chodziło :)

Jest to lista pytań, trochę dziwnie dawać do listy buttony, może się mylę, ale wydawało mi się to logiczniejsze, w końcu po coś ten role="button" wymyślili. Ale może się mylę.

Kwestia z rzeczy gusta i guściki - OK, jeżeli tak uważasz.

Animacja w js służy do jednokrotnego pojawiania się niektórych elementów podczas scrollowania z delikatnym ruchem w górę jednocześnie, korzysta ona z animacji w css. Oprócz tego w css jest jeszcze animacja zwykła fade-in. Nie wiem jak to pierwsze można osiągnąć za pomocą samego css.

I teraz już wiadomo dlaczego jest. W takim razie ten zarzut można wycofać.

Likwiduję outline ale nadaje specjalny wygląd dla focus taki sam jak dla hover, czytałem, że jest to prawidłowe, chyba, że jednak nie?

Trudno powiedzieć - ja byłbym za wystylizowaniem outline'u.

komentarz 15 maja 2017 przez gremlin Dyskutant (7,600 p.)

A i o co chodzi z tym title dla wszystkich linków? Nie jest to powielanie tego co i tak przeglądarka pokazuje po najechaniu na link? A jeżeli miałby być to jaki konkretnie? Adres docelowy?

komentarz 15 maja 2017 przez radek024 Szeryf (77,160 p.)

Opis, niekoniecznie identyczny co do treści linku. Chodzi o dostępność. Jeżeli uważasz, że link nie pełni ważnej funkcji, możesz opuścić sobie ten atrybut(podobnie jak alt w img).

komentarz 15 maja 2017 przez gremlin Dyskutant (7,600 p.)

No rozumiem, po prostu title sprawi, że pojawi się na hover dymek z tym opisem, a nie spotkałem się żeby na stronach takie dymki się pojawiały. No chyba, że w przypadku ikonek które mogą być mylące lub jakichś przycisków typu oddaj głos w górę będących samą strzałką. Stąd moje zdziwienie.

komentarz 15 maja 2017 przez Comandeer Guru (600,810 p.)

[title] dla linków i innych elementów nie ma za bardzo sensu jeśli jednocześnie nie implementujemy etykiet dla niemyszkowców.

Natomiast logo nie odsyła do góry strony tylko do index.html – jest zatem linkiem do głównej strony, stąd taki [alt] pasuje aż nadto. Inna rzecz, że nawet jeśli odsyłałby do góry strony, to semantycznie jest to odnośnik do strony głównej.

komentarz 16 maja 2017 przez niezalogowany

Co do outline: none - nie miałem problemu z poruszaniem się po stronie klawiaturą. Focusowane elementy zawsze były w widoczny sposób wyróżnione.

komentarz 16 maja 2017 przez Comandeer Guru (600,810 p.)

Dywagowałbym jedynie, czy wyróżnienie menu nie podpada pod operowanie jedynie kolorem.

komentarz 16 maja 2017 przez gremlin Dyskutant (7,600 p.)

hmmm, dla menu akurat jest outline przecież, tylko rodzaj linii się zmienia

.nav__link:focus{
    outline: 1px solid white;
    background-color: rgba(0,0,0,0.8);
}

odpowiedź 15 maja 2017 przez Comandeer Guru (600,810 p.)

Semantycznie section > article nie ma tu uzasadnienia. Nie da się bowiem wyjąć poszczególnych części "O nas" i prezentować samodzielnie – zatem to section, nie article. W drugą stronę dałoby się – "O nas" może stanowić samodzielną całość, więc zamiast section można zastosować article.
W nagłówku zastanowiłbym się nad zrobieniem jednego linka (wówczas logo miałoby pusty [alt]). Zastanawiam się nad tym, ponieważ przy obecnym kodzie czytniki ekranowe dostaną w swoim bezpośrednim sąsiedztwie dwa linki prowadzące do tego samego miejsca i to dodatkowo z tym samym tekstem.
No i poza tym teraz masz 2 adresy strony głównej: / i index.html. Linkowałbym zawsze do /.
W liście pytań i odpowiedzi zastosowałbym po prostu button. Zwłaszcza, że obsługa spacji nieco kuleje. No i nie wiem, czy nie zastosowałbym tutaj innego patternu: tablist.
W niektórych miejscach kontrast siada, np. rakieta na czarnym tle.

komentarz 15 maja 2017 przez gremlin Dyskutant (7,600 p.)

Dzięki wielkie za odpowiedź tu i w komentarzach :)

W przypadku tych buttonów, to i tak spacja nic by nie dała, bo założenie jest takie, że nie da się ukryć odpowiedzi nie odkrywając następnej. Nie wiem jak by to mogło wyglądać?

komentarz 15 maja 2017 przez Comandeer Guru (600,810 p.)

Naciśnięcie spacji ma aktywować dany przycisk bez przewijania strony. A tu naciśnięcie spacji przewija stronę.

odpowiedź 15 maja 2017 przez Mateusz Patalan Bywalec (2,140 p.)

Jestem pod wrażeniem. Zwłaszcza jako fan astronautyki i astronomii. A tak przy okazji... ile to kosztuję? Bo kolega pytał.

komentarz 15 maja 2017 przez gremlin Dyskutant (7,600 p.)

Na księżyc tanio, gorzej na marsa. ^^

komentarz 15 maja 2017 przez Mateusz Patalan Bywalec (2,140 p.)

Czy muszę się zaszczepić mnie rozwaliło.

odpowiedź 15 maja 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

UX:

Obiekt na fixed, warto mu było poprawić kolor, gdy jest w sekcji header. Zainteresuj się getClientBouncer oraz możliwościami jakie daje svg. Ostatecznie możesz na cache przeglądaki ładować inny obiekt Image (new Image). *Potem zauważyłem, że znasz tą właściwość.
Według mnie za duży kontrast między sekcjami (kolory). Po zrobieniu zrzutu, zdecydowanie ten niebiski nie pasuje.
Sekcja main-article, grid jest nierówny, ustaw dla square tą samą wielkość. Poczytaj o flexbox.
Czerwony i niebieski to zły pomysł. Sekcja: travels
questions jedno pytanie na bok ci ucieka. A nie to ficzer,
Czytaj więcej nie działa, odsyła na górę.
Słabo to wygląda: gradient . Sekcja: contact;
Według mnie za duża przerwa na dole . Sekcja footer.

CSS:

Metodyka nazewnictwa klas do mnie dociera.
Brak munifikacji.

HTML:

3 arkusze za dużo. Poczytaj o ---> @import.

JS:

Miłe zaskoczenie, spodziewałem się jQuery (Znajome animacje) a go nie było :) Duży plusik.
Własny scroll-smoth szacun, kiedyś próbowałem to napisać (jakiś rok temu) no niestety mi się nie udało.
Brak zastrzeżeń, przyczepił bym się jedynie do wywołowanie zdarzenia "load", zamiast "DomContentLoaded"

Ocena 7/10.

komentarz 15 maja 2017 przez gremlin Dyskutant (7,600 p.)

Nad wyglądem zdecydowanie muszę jeszcze popracować masz rację. Dzięki za wszystkie wskazówki. Logo jest kiepskie i nie do końca pasuje, ale to też dlatego, że nie skupiałem się na tym tylko je ściągnąłem z darmowych obrazów na pixabay :)

Co do JS, zastanawiałem się nad DOMContentLoaded, może Ty mi wytłumaczysz?

Z tego co czytałem to "load" czeka aż się wszystko załaduje a DOMContentLoaded tylko na elementy DOM, nie czeka nawet na CSS, skoro css nadaje wysokość elementów a moje zdarzenia dotyczą przenoszenia w konkretne miejsca, zmiany stylu itp. to czy powinny być ładowane zanim np. wysokość elementów zostanie ustalona? Bardzo możliwe, że ja to źle rozumiem.

Dzięki raz jeszcze za komentarz :)

edit: czytaj więcej miało w zamyśle gdzieś przenosić, nie tworzyłem żadnego działania dla niego

komentarz 15 maja 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Ok, faktycznie mój błąd, load w tym przypadku jest słusznym działaniem. Aczkolwiek wypadałoby by się spytać naszego eksperta od JS-a -> commandera.

komentarz 15 maja 2017 przez Comandeer Guru (600,810 p.)

3 arkusze za dużo. Poczytaj o ---> @import.

O @import to wypada zapomnieć.

Co do load: a po co na niego czekać skoro i tak pobierasz pozycję dopiero po kliknięciu na link w menu? W tym momencie już na pewno będą style wczytane ;)

komentarz 15 maja 2017 przez gremlin Dyskutant (7,600 p.)

No to może faktycznie DOMContentLoaded byłby lepszy, chociaż ta animacja na scroll dla pojawiających się elementów dotyczy również obrazków, to może wtedy lepiej "load"?

komentarz 15 maja 2017 przez Comandeer Guru (600,810 p.)

A czy ta animacja jest pokazywana przy starcie strony czy dopiero przy przewijaniu? Dopóki nie ustalasz na starcie na sztywno pozycji, gdzie się ma całość odpalać, to nie ma potrzeby zabawy z load.

1	komentarz 15 maja 2017 przez ShiroUmizake Nałogowiec (46,300 p.) Dlaczego o import mozna zapomniec?

1	komentarz 15 maja 2017 przez Comandeer Guru (600,810 p.) Bo praktycznie nikt go nie używa i psuje paralelne wczytywanie zasobów.

odpowiedź 15 maja 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Moi poprzednicy dali Ci dużo sugestii dot. CSS/HTML, ja natomiast chciałbym Ci wskazać kilka kwestii związanych z JS:

var listButtons = document.getElementsByClassName('main__list-question-element');
    articles = document.getElementsByClassName('main__question-article');

Na końcu linii, w której deklarujesz zmienną listButtons masz średnik. W takim przypadku kolejna zmienna "articles" zostanie zadeklarowana jako zmienna w zasięgu globalnym! Poczytaj o trybie ścisłym ('use strict'). Aby zastosować jedną instrukcję VAR do deklaracji kilku zmiennych to na końcu każdej deklaracji daj przecinek, a nie średnik.

raz stosujesz addEventListener, a raz "onclick", "onkeypress". Nie jest to błąd wpływający na działanie programu ale warto ujednolicić sposób przypisywania obsługi zdarzeń.

 for(var i=0; i<listButtons.length; i++)

Generalnie dobrą praktyką jest stosowanie w pętli for (drugi element) wartości obliczonych już wcześniej, czyli np. wejście do pętli ze zmienną i=0 oraz max=listButtons.length, a następnie przyrównywanie warunku i<max. W Twoim rozwiązaniu przy każdej iteracji musi nastąpić obliczenie łącznej ilości elementów. Co prawda współczesne przeglądarki z tego co wiem radzą sobie z tym, szczególnie jeśli nie iterujemy po elementach DOM ale polecam korzystanie z dobrych praktyk. Ponadto poczytaj sobie o metodach forEach, pętlach for-of itp.

Co prawda tych metod nie masz w pseudotablicy zwróconej przez getElementsByClassName, ale łatwo możesz sobie stworzyć "normalną" tablicę z Array.prototype poprzez:

let listButtons = [...document.getElementsByClassName('main__list-question-element')];

typeof listButtons.forEach; //'function'

Pomijam w tej chwili kwestię wydajności forEach vs for, gdyż w tego typu projektach jest to praktycznie niezauważalne. Osobiście preferuję stosowanie metod Array.prototype gdyż uważam to za bardziej czytelną formę - od razu widać czy tylko iterujemy "coś robiąc" forEach, czy potrzebujemy tablicę zwrotną (metoda map), filtrujemy dane (metoda filter) itp. itd. Ale to już kwestia indywidualnego wyboru sposobu pisania kodu.

Ponad to masz złą walidację adresu e-mail w polu formularza. Stosujesz tam walidację HTML5, ale niestety akurat w zakresie e-mail to html5 jest porażką... poprawny jest np. adres tomek@wp (brak ostatniej części domeny). Nie jest to błąd, ale jest to dobre miejsce np. do poćwiczenia prostych wyrażeń regularnych lub zapoznania się z zewnętrznymi bibliotekami walidującymi (choć akurat w kwestii e-mail to najczęściej walidują one wg. RFC).

Pokaż 9 poprzednich komentarzy

komentarz 15 maja 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Zależy od use-case'u i alfabetu, w jakim piszą Twoi użytkownicy ;)

W pełni się z tym zgadzam. Tym bardziej więc wzorce regexp dają nam pełną i świadomą kontrolę :)

Fakt, HTMLCollection jeszcze tej metody nie ma, niemniej już NodeList zwracany przez querySelectorAll – tak.

Zgadza się, dlatego szczególnie osoby początkujące jeśli będą to sobie "dodatkowo przerabiać" na tablicę z Array.prototype to oszczędzą sobie problemów analizowania łańcucha prototypów zwracanego obiektu. Fakt, że czasami wcale nie potrzebujemy iterować po takiej tablicy, a jedynie wyciągnąć określone elementy więc mój sposób tworzyłby niepotrzebną, dodatkową operację.

Które rozwiązanie jest najlepsze: pobieranie HTMLCollection, NodeList czy przerabianie ich na tablicę? Uważam, że wszystko zależy od sytuacji i celu, do jakiego potrzebujemy obiektu.

Wracając do metod get... konta query... to czytałem, że metody get.. są podobno szybsze gdyż nie muszą jakby analizować rodzaju selektora, ale z góry wiedzą co pobierają. Jak jest w praktyce tego nie wiem i szczerze mówiąc nie analizowałem. Pytanie tylko czy jeśli pobieramy kilka - kilkanaście elementów DOM (co często się zdarza na prostych stronkach) to czy ewentualne różnice w wydajności tych metoda faktycznie mają znaczenie.

komentarz 15 maja 2017 przez Comandeer Guru (600,810 p.)

Wracając do metod get... konta query... to czytałem, że metody get.. są podobno szybsze gdyż nie muszą jakby analizować rodzaju selektora, ale z góry wiedzą co pobierają. Jak jest w praktyce tego nie wiem i szczerze mówiąc nie analizowałem. Pytanie tylko czy jeśli pobieramy kilka - kilkanaście elementów DOM (co często się zdarza na prostych stronkach) to czy ewentualne różnice w wydajności tych metoda faktycznie mają znaczenie.

Różnica wywodzi się z czegoś innego: właśnie z faktu, że get… zwracają żywą kolekcję, a querySelectorAll – nie. Wszystkie biblioteki i silniki selektorów (jQuery, Sizzle itd.) z założenia operują na statycznej kolekcji, będącej snapshotem DOM-u w danej chwili – i to w sumie wynika ze zdrowego rozsądku. Bardzo trudno pracować na kodzie, w którym w każdym momencie kolekcja pobranych elementów może się zmienić.

Gdy przeglądarka konstruuje NodeList musi przelecieć cały DOM i pobrać wszystkie pasujące elementy. W przypadku HTMLCollection może z kolei trzymać referencję do aktualnego elementu, a kolejny pobrać dopiero po zmianie indeksu. To sprawia, że stworzenie takiej kolekcji i zwrócenie jej jest szybsze. Niemniej tego typu kolekcja jest nieprzewidywalna i niebezpieczna w użyciu – przykład.

komentarz 15 maja 2017 przez Tomek Sochacki Ekspert (227,510 p.)

Tego szczerze mówiąc nie wiedziałem. Generalnie wychodzę z założenia, żeby nie modyfikować tablic po których iteruję w trakcie tych iteracji, ale przykład ciekawy...

Oczywiście najpierw człowiek klika, a potem kończy czytać... :)

komentarz 16 maja 2017 przez niezalogowany
edycja 16 maja 2017

Tomasz Sochack, moim zdaniem za dużą wagę przykładasz do szybkości działania prostych rzeczy w kodzie. Pomijając już cuda na kiju, które tworzy JIT - dla UX nawet tysięczne części sekundy nie mają znaczenia. Używanie takich i takich metod, oraz napisanie o 10 znaków krótszego regexpa, żeby ugryźć kilka mikrosekund to sztuka dla sztuki.

raz stosujesz addEventListener, a raz "onclick", "onkeypress". Nie jest to błąd wpływający na działanie programu ale warto ujednolicić sposób przypisywania obsługi zdarzeń.

Ujednolicić do addEventListener

komentarz 16 maja 2017 przez Tomek Sochacki Ekspert (227,510 p.)

W Twoim rozwiązaniu przy każdej iteracji musi nastąpić obliczenie łącznej ilości elementów. Co prawda współczesne przeglądarki z tego co wiem radzą sobie z tym, szczególnie jeśli nie iterujemy po elementach DOM ale polecam korzystanie z dobrych praktyk. Ponadto poczytaj sobie o metodach forEach, pętlach for-of itp.

Pytanie tylko czy jeśli pobieramy kilka - kilkanaście elementów DOM (co często się zdarza na prostych stronkach) to czy ewentualne różnice w wydajności tych metoda faktycznie mają znaczenie.

Ja wcale nie twierdzę, żeby na siłę stosować jak najbardziej wydajne i szybkie rozwiązania. Wręcz przeciwnie, czasami lepiej skorzystać z jakieś wolniejszej metody ale lepiej obrazującej dany proces, jak stosowanie metod Array.prototype zamiast pętli for.

Uważam jedynie, że warto rozmawiać i poruszać kilka możliwości aby każdy świadomie mógł wybrać co jemu odpowiada najbardziej w konkretnej sytuacji. Co do regexp to może nieco niefortunnie stwierdziłem o robieniu krótszych i szybszych wzorców w tym akurat kontekście. Ponad to uważam (co pisałem też kiedyś w jednym z moich wpisów na blogu), że w wielu miejscach w ogóle wydajność możemy przenieść na nieco dalszy plan - tym bardziej, jeśli użytkownik w danym momencie może spodziewać się pewnego oczekiwania.

A co do skracania regexp to czasami warto spojrzeć nieco z boku na wzorzec i zastanowić się nad jego ewentualnym skróceniem aby w przyszłości analizując kod od razu wiedzieć, co dokładnie wzorzec ma szukać. Na przykład w wielu przypadkach wzorce zawierają nadmierną ilość sekwencji ucieczki, szczególnie przy podawaniu znaków jako zakresu w nawiasach [], gdzie większość znaków specjalnych zmienia swoje znaczenie. Takie regexp przesycone "\" czyta się dużo trudniej przez co potem panuje też i opinia o tym, że tematyka regexp to zło i trzeba tego unikać...

W bardziej rozbudowanych wzorcach polecam natomiast stosowanie komentarzy Niestety w JS nie da się włączyć trybu swobodnego stosowania białych znaków ale można to obejść poprzez tworzenie obiektu new RegExp(wzorzec z komentarzami) gdzie można stosować zapis wielolinijkowy i komenty.

odpowiedź 15 maja 2017 przez manjaro Nałogowiec (37,390 p.)

Kodu nie oceniam ale strona prezentuje się bardzo ładnie. Jeden element trochę się tylko rozjechał...

komentarz 15 maja 2017 przez gremlin Dyskutant (7,600 p.)

Kliknij na te elementy proszę, chyba, że coś nie działa. Powinny się zmieniać odpowiedzi na te pytania.

komentarz 15 maja 2017 przez manjaro Nałogowiec (37,390 p.)

A to tak ma działać to w takim razie bardzo przepraszam.

Jak dla mnie 10/10. Prostota i elegancja.

No dobra to jeszcze się doczepię - w sekcji "O nas" te bloczki bym wyrównał bo środkowy jest większy.

odpowiedź 15 maja 2017 przez Mikołaj Użytkownik (780 p.)

odpowiedź 18 maja 2017 przez Lu Kiss Dyskutant (7,600 p.)

Na tak prostą mini-stronkę ZA DUŻO css, ZA DUŻO js !

Powinno być maks 1 css i 1 js.

Tekstu nie justujemy, wygląda to masakrycznie.

meta keywords od 2009 jest olewany

komentarz 18 maja 2017 przez gremlin Dyskutant (7,600 p.)

Zarówno css i js nie wrzucałem do jednego pliku ani nie minifikowałem bo tak wygodniej i czytelniej mi się tworzyło i uznałem, że również ocenianie poukładanego kodu może być przyjemniejsze. W ostatecznej wersji na pewno te czynności zrobię. Ale dzięki za uwagę.

Co do justowania tekstu to nie wiem jak się do tego odnieść. Sprawdzałem zarówno left jak i center, lecz justify wydało mi się najprzyjemniejsze w odbiorze, ale może po prostu nie mam jeszcze do tego takiego oka. :)

Co do meta keywords, owszem z tego co słyszałem google się nim nie sugeruje ani trochę już, ale google nie jest jedyną wyszukiwarką.

But is there any advantage to using it? We say yes there is, even in 2017, not least because while Google’s content parsing algorithms are highly sophisticated, they are not the only game in town – Bing, Yandex, DuckDuckGo and Baidu are all popular search engines that use much more simpler indexing algorithms that still work like Google did 5 or 10 years ago, and without the braintrust that Google has, are unlikely to change their systems any time soon. But also dozens of other systems not directly related to search, such as Pinterest, Pocket and Digg, all of which can have a positive effect on your traffic, all still use the meta keywords as a simple way to understand what a site is about.