• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Prośba o ocenę strony

VPS Starter Arubacloud
+8 głosów
1,086 wizyt
pytanie zadane 30 czerwca 2017 w Nasze projekty przez Assasz Nałogowiec (30,460 p.)

Witam.

Po rocznej przygodzie z web developmentem (takiej bardziej intensywnej) postanowiłem napisać małą stronę o sobie, która to spełniałaby rolę mojej wizytówki i małego portfolio z wybranymi projektami. Strona jest już gotowa, by ujrzeć światło dzienne, dlatego wczoraj wrzuciłem ją na hosting i sobie śmiga. 

Tutaj link.

Teraz chciałbym poznać opinie innych, szczególnie doświadczonych web developerów, na temat kwestii technicznej (w tym celu zostawiłem na razie kompresję plików, by dało się je odczytać), a także wizualnej. Może coś dodać, zmienić? A może walnąłem jakiś błąd w angielskiej wersji językowej? Konstruktywna krytyka mile widziana :)

Pozdrawiam i z góry dzięki za oceny.

 

komentarz 30 czerwca 2017 przez Tomek Sochacki Ekspert (227,510 p.)
Jeszcze taka mała uwaga, robisz stronę w wersji angielskiej, co traktowałbym jako ewentualny pracodawca jako jasną informację, że znasz język w dobrym stopniu. Nie twierdzę, że tak nie jest to już pozostawiam do Twojej oceny. Jeśli znasz to oki, bardzo dobry pomysł, ale jeśli nie znasz to przemyśl tą wersję eng.

8 odpowiedzi

0 głosów
odpowiedź 30 czerwca 2017 przez Shaoi Mądrala (7,020 p.)
wybrane 30 czerwca 2017 przez Assasz
 
Najlepsza
<link rel="shortcut icon" href="https://pawelantosiak.com/images/logo-inverse.png">
  • W zupełności wystarczy samo icon.
  • Po wyłączeniu JS widzę tylko preloader.
<div class="logo">
    <img src="https://pawelantosiak.com/images/logo.png" alt="Logo">
</div>
  • Logo powinno być h1. Img posiada zły alt.
<ul>
    <a href="#about">
      <li>about</li>
    </a>
    <a href="#skills">
      <li>skills</li>
    </a>
    <a href="#work">
      <li>work</li>
    </a>
    <a href="#contact">
      <li>contact</li>
    </a>
</ul>
  • To powinno być li > a. Ponadto ul powinno mieć id. Patrz niżej.
<div class="toggle-sidebar">
    <span class="fa fa-fw fa-bars" aria-label="Toggle sidebar"></span>
</div>
  • To powinien być button. Oraz posiadać odpowiednie ARIA, + etykietę, która możesz ukryć za pomocą .visuallyhidden.
<div class="scroll-progress">
    <div class="progress-bar"></div>
</div>
  • Pusty div. W tym celu używa się tagu progress.
<h1>Hi, my name is Paweł</h1>
<span>and I <span class="typed"></span></span>
  • h1 powinno być h2, a co do spana dlaczego nie:
<p>and I <span class="typed"></span></p>
<section id="about" class="primary-section">
<img src="https://pawelantosiak.com/images/photo.jpg" class="my-photo" alt="My photo">
  • Nieodpowiedni alt.
<a href="https://pawelantosiak.com/cv.pdf" class="centered" target="_blank" rel="noopener noreferrer">
  <button type="button" class="button-secondary">Moje CV</button>
</a>
  • Button w linku? To powinno być po prostu link. Co do rel`a się nie wypowiem.
<div id="php" class="progress-bar"></div>
  • Kolejne puste tagi. Podarowałbym sobie tę sekcję, tym bardziej, iż tak na prawdę nie jesteś w stanie tego przeliczać.
  • Klasy powinny być abstrakcyjne. Co jeżeli kiedyś zmienisz zdanie? > .justified. Ponadto nie powinno się stosować justowania textu.
  • Labele powinny być textem. Te ikonki nie każdemu dużo mówią. Polecam obejrzeć.
<output class="alert">
    <span></span>
</output>
  • Kolejny pusty tag.
  • Polecam zapoznać się z artykułem na temat ikon.
  • Nadużywasz target="_blank".
  • Focusy są słabo widoczne.
  • Gdzie się podział boczny pasek postępu? Teraz jestem skazany na scroll`a bądź klawiaturę, przy czym w tej drugiej opcji występują spore wady.
komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)
  • W zupełności wystarczy samo icon.

Ok, poprawię.

  • Po wyłączeniu JS widzę tylko preloader. 

No cóż, bez JSa nie będzie także działała obsługa poczty... JS jest mimo wszystko istotnym elementem strony. Bez tego preloadera nie schowam, musiałbym go chyba definitywnie wywalić.

  • Logo powinno być h1. Img posiada zły alt.

Ale logo nie pełni roli nagłówka, lecz napis wyświetlający się na samej górze, to jedynie hmm... dekoracja menu. Jaki alt zatem powinien mieć img?

 

  • To powinno być li > a. Ponadto ul powinno mieć id. Patrz niżej.

Chciałem, aby element listy był klikalny na całej szerokości, chociaż można to zmienić. Z tym id... to jakaś reguła, jest bardziej semantycznie czy jak? Bo w tym przypadku id nie ma żadnego zastosowania. Ale mogę dodać dla samej zasady.

  • To powinien być button. Oraz posiadać odpowiednie ARIA, + etykietę, która możesz ukryć za pomocą .visuallyhidden

W zasadzie to masz rację, nie pomyślałem o tym. Po prostu walnąłem ikonę i tyle.

  • Pusty div. W tym celu używa się tagu proggres.

Chciałem tak zrobić, ale o ile dobrze pamiętam, IE miał z tym problem. Ostatecznie postawiłem na tradycyjne rozwiązanie. Tak samo w przypadku innych progress barów.

  • h1 powinno być h2, a co do spana dlaczego nie:

Ten napis traktuję jako mój główny nagłówek, co do spana: też pomyślałem, że p będzie lepszy, ale zrobiłem przez spana i już potem nie chciało mi się styli zmieniać ;) 

 W wersji polskiej id powinien być po polsku.

W porządku, poprawię to. 

  • Nieodpowiedni alt.

To samo co wyżej, dlaczego nie odpowiedni? Mógłbyś to rozwinąć? Jaki powinien zatem być? Wydawało mi się, że alty mają opisywać obrazek.

  • Button w linku? To powinno być po prostu link. Co do rel`a się nie wypowiem.

Racja, poprawię to. A co do rela, co jest w nim takiego złego, że się nawet nie wypowiesz? Jakiś karygodny błąd?

 

  • Klasy powinny być abstrakcyjne. Co jeżeli kiedyś zmienisz zdanie? > .justified. Ponadto nie powinno się stosować justowania textu.

Klasa ta to taki mały helper, całkowicie niezależny więc spełnia swoje zadanie. Chyba, że czegoś nie rozumiem. I dlaczego nie powinno się używać justowania?

 

  • Labele powinny być textem. Te ikonki nie każdemu dużo mówią. Polecam obejrzeć.

Obejrzę. Myślałem że połączenie ikony (z aria-label) z placeholderem będzie wystarczające.

  • Kolejny pusty tag.

Chciałem to dodawać dynamicznie przez JSa, ale psuł się wtedy efekt pojawiania się, a w JS nie mogłem jakoś tego zrobić, po prostu pojawiał się dymek i tyle. 

  • Polecam zapoznać się z artykułem na temat ikon.

Czytałem już wcześniej. Może nie jest idealnie, ale jakiś standard jest. Dodatkowo zrobiłem podmiankę ikon na obrazki dla IE, który nie czyta żadnych fontów.

  • Nadużywasz target="_blank".

A jak inaczej mam otworzyć nową kartę? Ja osobiście nie lubię, jak jakieś zewnętrzne strony otwierają mi się w tej samej karcie. Co do bezpieczeństwa: po to zastosowałem rel. 

  • Focusy są słabo widoczne.

Moim zdaniem są dobrze widoczne, ale może nie jestem wyczulony na takie rzeczy. 

  • Gdzie się podział boczny pasek postępu? Teraz jestem skazany na scroll`a bądź klawiaturę, przy czym w tej drugiej opcji występują spore wady.

Rzeczywiście, nie pomyślałem o tym, pewnie dlatego, że sam z niego rzadko używam (zwłaszcza na takich małych stronach mając nawigację). Dodam go. 

Dzięki za uwagi, wykorzystam je w mniejszym lub większym stopniu ;)

komentarz 30 czerwca 2017 przez Shaoi Mądrala (7,020 p.)
edycja 30 czerwca 2017 przez Shaoi

Ale logo nie pełni roli nagłówka, lecz napis wyświetlający się na samej górze, to jedynie hmm... dekoracja menu. Jaki alt zatem powinien mieć img?

Przyjeło się, iż logo jest nagłówkiem pierwszego stopnia. W tym wypadku alt to  nazwa Twojej strony / Imię i nazwisko.

Chciałem, aby element listy był klikalny na całej szerokości, chociaż można to zmienić. Z tym id... to jakaś reguła, jest bardziej semantycznie czy jak? Bo w tym przypadku id nie ma żadnego zastosowania. Ale mogę dodać dla samej zasady.

Nadajesz po prostu dla linku display: block, i po sprawie. Co do id - button powinien posiadac aria-control. Chociaż w tym wypadku chyba nie do menu, a aside.

Chciałem tak zrobić, ale o ile dobrze pamiętam, IE miał z tym problem. Ostatecznie postawiłem na tradycyjne rozwiązanie. Tak samo w przypadku innych progress barów.

Nie zmienia to faktu, iż div jest nadal pusty. + dla wspierania IE na tagi semantyczne:

<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Dodaj do HEAD.

To samo co wyżej, dlaczego nie odpowiedni? Mógłbyś to rozwinąć? Jaki powinien zatem być? Wydawało mi się, że alty mają opisywać obrazek.

Alty powinny opisywać to, co się na obrazku znajduję. Dlatego też alt="My photo" jest złym altem.

Racja, poprawię to. A co do rela, co jest w nim takiego złego, że się nawet nie wypowiesz? Jakiś karygodny błąd?

Nie wypowiem się, gdyż nie pamiętam co to za rel.

Klasa ta to taki mały helper, całkowicie niezależny więc spełnia swoje zadanie. Chyba, że czegoś nie rozumiem. I dlaczego nie powinno się używać justowania?

Jeżeli kiedyś zmienisz styl, na np: center, wtedy klasa nie będzie mówiła prawdy.

Co do samego justowania - to nie gazeta, ponadto jest to złe pod względem UX.

Chciałem to dodawać dynamicznie przez JSa, ale psuł się wtedy efekt pojawiania się, a w JS nie mogłem jakoś tego zrobić, po prostu pojawiał się dymek i tyle. 

Nie zmienia to faktu, iż jest to pusty tag.

Moim zdaniem są dobrze widoczne, ale może nie jestem wyczulony na takie rzeczy.

Klikam TAB, mam słabo widoczny focus na przyciskach (np: MY CV). Jeszcze kij ze mną, ale starsi ludzie już mogą tego nie dostrzec, i co wtedy?

komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)

Przyjeło się, iż logo jest nagłówkiem pierwszego stopnia. W tym wypadku alt to  nazwa Twojej strony / Imię i nazwisko.

Ok, poprawię alty. Co do logo to się jeszcze wstrzymam, bo jestem średnio do tego przekonany - może ktoś jeszcze się wypowie.

 Nadajesz po prostu dla linku display: block, i po sprawie. Co do id - button powinien posiadac aria-control. Chociaż w tym wypadku chyba nie do menu, a aside.

W porządku, dostosuję menu do twoich uwag. 

Nie zmienia to faktu, iż div jest nadal pusty. + dla wspierania IE na tagi semantyczne:

Dodaj do HEAD.

Dzięki, dodam. Swoją drogą poczytałem trochę na temat pustych divów i okazuje się, że chodzi o szybkość, im mniej elementów DOM tym lepiej, a puste nic nie wnoszą. Aczkolwiek nie ma takiej reguły, są przypadki, kiedy to jest uzasadnione. W końcu jeśli zamienię to na progressy, to elementów będzie nadal tyle samo.

Alty powinny opisywać to, co się na obrazku znajduję. Dlatego też alt="My photo" jest złym altem.

No w porządku, ale co powinno być w tym przypadku? "Moja morda" nie wygląda za dobrze, no chyba, że imię i nazwisko jak wspomniałeś ;)

Nie wypowiem się, gdyż nie pamiętam co to za rel.

Służy do zablokowania dostępu do openera dla strony linkowanej. 

https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

Dlatego nie uważam też, że nadużywam blanka.

Jeżeli kiedyś zmienisz styl, na np: center, wtedy klasa nie będzie mówiła prawdy.

Co do samego justowania - to nie gazeta, ponadto jest to złe pod względem UX.

Ale jeśli bym chciał zmienić styl, to wtedy wystarczy, że zmienię klasę, zamiast grzebać w CSS. Co do justowania - może rzeczywiście, na telefonie średnio to wygląda, jakoś mi to wcześniej nie przeszkadzało. Proponujesz zatem jakiś align left czy center?

Klikam TAB, mam słabo widoczny focus na przyciskach (np: MY CV). Jeszcze kij ze mną, ale starsi ludzie już mogą tego nie dostrzec, i co wtedy?

Ok, myślałem, że masz na myśli focusy inputów. Buttony chyba nie mają focusa wcale, albo jakiś wbudowany xd Wezmę to pod uwagę.

komentarz 30 czerwca 2017 przez Comandeer Guru (599,730 p.)

Służy do zablokowania dostępu do openera dla strony linkowanej. 

https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

Dlatego nie uważam też, że nadużywam blanka.

Przy [target=_blank] problemem jest UX, jaki to rozwiązanie wprowadza, nie bezpieczeństwo. Jeśli link jest otwierany w nowej stronie, warto o tym użytkownika poinformować. 

komentarz 30 czerwca 2017 przez Shaoi Mądrala (7,020 p.)
edycja 30 czerwca 2017 przez Shaoi

Dzięki, dodam. Swoją drogą poczytałem trochę na temat pustych divów i okazuje się, że chodzi o szybkość, im mniej elementów DOM tym lepiej, a puste nic nie wnoszą. Aczkolwiek nie ma takiej reguły, są przypadki, kiedy to jest uzasadnione. W końcu jeśli zamienię to na progressy, to elementów będzie nadal tyle samo.

Puste tagi to złe tagi. Lecz tak, są wyjątki. Przeczytaj oceny innych stron. Wzmianka o tym była bardzo często. Czy naprawdę takim problemem jest wstawienie do nich choćby początkowej zawartości?

Ale jeśli bym chciał zmienić styl, to wtedy wystarczy, że zmienię klasę, zamiast grzebać w CSS. Co do justowania - może rzeczywiście, na telefonie średnio to wygląda, jakoś mi to wcześniej nie przeszkadzało. Proponujesz zatem jakiś align left czy center?

Przy tak małej stronie - faktycznie, jednakże przy większych projektach jest to problematyczne. Poza tym warto nauczyć się dobrych nawyków.

Ok, myślałem, że masz na myśli focusy inputów. Buttony chyba nie mają focusa wcale, albo jakiś wbudowany xd Wezmę to pod uwagę.

Domyślnym fokusem jest outline.

komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)

Puste tagi to złe tagi. Lecz tak, są wyjątki. Przeczytaj oceny innych stron. Wzmianka o tym była bardzo często. Czy naprawdę takim problemem jest wstawienie do nich choćby początkowej zawartości?

Wstawianie zawartości dla samej zasady? Może być problemem, kiedy zawartość jest dodawana dynamicznie. Można co prawda wtedy dodać sam element, kiedy jest potrzebny, ale w przypadku mojego outputa psuje to efekt, a na tym zależy mi bardziej - myślę zatem, że jest to uzasadnione. A progressy poprawię (o ile tym razem będą działać jak należy).

Przy tak małej stronie - faktycznie, jednakże przy większych projektach jest to problematyczne. Poza tym warto nauczyć się dobrych nawyków.

A czy Bootstrap np. nie korzysta z takiego rozwiązania? Nie twierdzę co prawda, że to dobry nawyk, bo nie mnie to oceniać - frameworki nie zawsze kultywują dobre praktyki. 

Domyślnym fokusem jest outline.

Który jest wyłączony ;)  

@Comandeer

Przy [target=_blank] problemem jest UX, jaki to rozwiązanie wprowadza, nie bezpieczeństwo. Jeśli link jest otwierany w nowej stronie, warto o tym użytkownika poinformować. 

O tym nie pomyślałem, dla mnie naturalnym ruchem jest otwieranie takich rzeczy w nowych kartach, ale być może za bardzo patrzę na to przez mój osobisty pryzmat ;) Sugerujesz zatem wywalić blanki? Bo jak mogę informować o otwarciu w nowej karcie, przez title? Nie zauważyłem chyba nigdzie takich praktyk. 

komentarz 30 czerwca 2017 przez Comandeer Guru (599,730 p.)

Wstawianie zawartości dla samej zasady? Może być problemem, kiedy zawartość jest dodawana dynamicznie.

No tak. Zasada brzmi: dostarcz użytkownikowi sensowną treść. Najczęściej dynamiczna zawartość może mieć statyczny fallback.

 A czy Bootstrap np. nie korzysta z takiego rozwiązania? Nie twierdzę co prawda, że to dobry nawyk, bo nie mnie to oceniać - frameworki nie zawsze kultywują dobre praktyki. 

Dla dostępności warto stosować wyrównanie do lewej – mniej estetyczne, ale niemające takich problemów jak justowanie (np. nierównomierne światło w wierszu, co utrudnia czytanie).

 Bo jak mogę informować o otwarciu w nowej karcie, przez title? Nie zauważyłem chyba nigdzie takich praktyk. 

Zobacz sobie na stronie Strony Internetowej bez Barier (linki do stron laureatów).

komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)

No tak. Zasada brzmi: dostarcz użytkownikowi sensowną treść. Najczęściej dynamiczna zawartość może mieć statyczny fallback.

Możesz wytłumaczyć, co rozumiesz przez statyczny fallback? Nie obracam się za bardzo w takich tematach.

Dla dostępności warto stosować wyrównanie do lewej – mniej estetyczne, ale niemające takich problemów jak justowanie (np. nierównomierne światło w wierszu, co utrudnia czytanie).

 Zobacz sobie na stronie Strony Internetowej bez Barier (linki do stron laureatów).

Dzięki, zrobię tak.  

komentarz 30 czerwca 2017 przez Comandeer Guru (599,730 p.)
Statyczny fallback najprościej pokazać na przykładzie zegarka, który jest generowany na serwerze, a JS podmienia statyczny czas wygenerowany przez serwer nowymi wartościami.
komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)
Ok, rozumiem.

No to mam roboty na całą noc :) Dzięki wszystkim za wskazówki.
+1 głos
odpowiedź 30 czerwca 2017 przez Eryk Andrzejewski Mędrzec (164,260 p.)

Na kwestiach technicznych się zbytnio nie znam, więc nie będę się na ten temat wypowiadał. Ogólnie strona mi się podoba, fajna, ładna. wink

Tylko, że te paski postępu w umiejętnościach... Chyba bym sobie je darował. Wydaje mi się, że jeżeli wiesz, że nie wszystko jeszcze wiesz i umiesz, to raczej nie wiesz tego, ile jeszcze nie umiesz. laugh

Tak teraz włączyłem sobie wersję mobilną i uważam, że są trochę zbyt duże marginesy - może nieco byś je zmniejszył i powiększył czcionkę?

komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)
To prawda, ale chciałem się wpasować w obecne trendy ;) Do tego można w ten sposób mniej więcej zobrazować, co i na ile się umie. Dzięki za ocenę.

Co do marginesów - wezmę to pod uwagę. Może rzeczywiście są trochę duże na wersji mobilnej.
0 głosów
odpowiedź 30 czerwca 2017 przez E1 Obywatel (1,810 p.)
Przerobiłbym boczny panel. Na moje oko, po wysunięciu elementy stałej treści nie powinny się tak zachowywać. Żadnych przesunięć, niech to menu zasłania resztę na  szerokość swojego miejsca, a resztę strony może pokrywać lekki cień. Tak to widzę przy obecnym rozwiązaniu.
komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)
Mi właśnie bardzo podoba się ten efekt i raczej trudno będzie mi zmienić zdanie ;) Ale dzięki za uwagę.
0 głosów
odpowiedź 30 czerwca 2017 przez cezi Początkujący (380 p.)

Jak dla mnie super to wygląda. Masz literówkę w zdaniu. Uwielbiam tworzyć strony internetowodkąd odkryłem HTML i CSS pod koniec gimnazjum.

komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)
O dzięki, poprawię to.
0 głosów
odpowiedź 30 czerwca 2017 przez zgrybus Pasjonat (24,860 p.)
Błagam Cię. Usuń :hover na tym hamburger menu i daj go na "click". Proszę :)
komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)
Ale dlaczego? xd
komentarz 30 czerwca 2017 przez zgrybus Pasjonat (24,860 p.)
Bo jest to niewygodne i strasznie mylące. Widzisz hamburgera to klikasz :)
W ogóle nie trzeba na niego najechać, wystarczy na lewą stronę strony, napraw ;)
0 głosów
odpowiedź 30 czerwca 2017 przez kubaapk Nałogowiec (44,270 p.)
Wyrzuć paski z umiejętnościami, zamiast tego wypisz co umiesz, z czym pracowałeś.
komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)
Brałem pod uwagę wiele wariantów, w tym ten, ale ostatecznie wygrał element wizualny. Do tego wiele tego typu stron korzysta z progress barów. Ale zastanowię się jeszcze na tym... dzięki za uwagę.
0 głosów
odpowiedź 30 czerwca 2017 przez Arkadiusz Sikorski Pasjonat (20,160 p.)
Jedna z najfajniejszych stron, jakie widziałem, podoba mi się pomysł z paskami postępu, mają w sobie to "coś" ^_^
komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)
Dzięki ;)
0 głosów
odpowiedź 30 czerwca 2017 przez Tomek Sochacki Ekspert (227,510 p.)

W kwestiach wizualnych z zasady się nie wypowiadam, gdyż to akurat jest moja słaba strona...

O HTML/CSS widzę, że dostałeś sporo uwag/propozycji, ja natomiast chciałbym skupić się na MySQL. Podajesz jego znajomość na ponad 50% co wg mnie jest nieco ryzykowne, a wyjaśnię to na przykładzie bazy jaką udostępniach na projekcie Roshar:

  1. proponuję dać "DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci" dla tabel, polskie znaki diaktryczne są zawarte w unicode_ci, a nigdy nie masz pewności, czy nie będziesz chciał użyć znaków z innych alfabetów - zawsze tworząc bazę zadaj sobie pytanie "Czy jestem w 101% pewien, że nigdy nie użyję innych danych niż te, dla których robię ograniczenia?". W bazach danych nie ma "może", "chyba", jest albo TAK albo NIE.
  2. pole user jako TEXT wydaje mi się bez sensu. Dlaczego nie VARCHAR, z ograniczeniem np. do 50 czy 100 znaków?
  3. To samo pole link...
  4. pole date bez sensu jako text. Przemyśl co dokładnie tam potrzebujesz trzymać i daj np. DATE, DATETIME, TIMESTAMP itp. w zależności od typu danych i sposobu ich wykorzystania. I tutaj ponownie patrz pkt. 1. Jeśli dasz DATE to nie przechowujesz czasu. Zastanów się, czy istnieje ryzyko, że kiedyś będziesz musiał/chciał użyć czasu dodania rekordu? Jeśli tak to może DATETIME/TIMESTAMP (różnicę między nimi zostawiam jako kwestię do poczytania i własnej analizy).
  5. po co Ci zapis w id INT(11), chodzi mi o te 11? Czy wiesz do czego się to odnosi i jaki ma sens? Nie jest to błąd, ale wbrew pozorom nie oznacza to, że ograniczasz pole do maksymalnie 11 cyfr. Jest to powiązane z tzw. wypełnieniem ZEROFILL, co jednak przy indeksach raczej nie występuje. Możliwe, że masz to zrobione nieświadomie, bo wiele programów do MySQL dodaje to (11) ale warto wiedzieć czym to jest, a dokładniej czy nie jest.
  6. po co tak zmieniasz i latasz między różnymi kodowaniami znaków? Nie twierdzę, że to błąd, nie analizuję dokładnie całej aplikacji, ale zastanów się czy na pewno ma to sens.
  7. Jeżeli w INSERT INTO podajesz po kolei wszystkie pola z danej tabeli to nie musisz ich wyszczególniać, wystarczy INSERT INTO all_comments VALUES (), (), ()...
  8. dot. pkt. 7 - jeżeli zakładasz dla id AUTO_INCREMENT to nie podawaj ręcznie wartości id tylko przekaż null i numerację pozostaw bazie. Jest to bezpieczniejsze i de facto po to właśnie służy AUTO_INCREMENT
  9. nie określaj ręcznie wartości AUTO_INCREMENT, chyba, że w jakimś bardzo jasno określonym celu ale i tutaj zastanowiłbym się czy na pewno jest to dobra droga - jeśli tak uważasz, to cofnij się krok wstecz i jeszcze raz przeanalizuj strukturę i zobacz, czy ponownie dojdziesz do takich samych wniosków
  10. Indeksy, np. PRIMARY KEY możesz dodawać od razu podczas tworzenia tabeli, nie musisz później oddzielnie dodawać różnych indeksów (u Ciebie akurat tylko PK, ale są także inne),
  11. tabele komentarze_1, komentarze_2 itd. to w zasadzie takie same tabele. Po co tworzysz ich tyle? Nie lepiej jedną i ewentualnie dodać jakieś dodatkowe pole określające np. typ_komentarza (i tutaj będzie odniesienie do typ 1, typ 2 itp.).
  12. w powiązaniu z pkt. 10 - po co w kilku tabelach ręcznie podajesz pole user? Tylko prosisz się w ten sposób o problemy i błędy logiczne. Proponuję podawać id z tabeli, gdzie przechowujesz użytkowników i powiązać je tabelą pośrednią (tzw. relacja wiele do wielu, jeden do wielu itp.).

Taka uwaga generalna, to żebyś poczytał sobie o typach danych w MySQL, ich zakresach, możliwych wartościach itp. bo u Ciebie wszystko jest TEXT :)

Kolejna kwestia to poczytaj o takich tematach jak złączenia tabel (JOIN, LEFT JOIN, RIGHT JOIN i innych metodach), zabezpieczania w formie kluczy obcych FOREIGN KEY.

 

Nie odbieraj tych uwag jako jakąś mocną krytykę itp. Jesteś początkujący, więc daję Ci tylko wskazówki na co zwrócić uwagę, co poczytać itp. Do tego czasu proponuję jednak nieco zjechać z poziomem znajomości MySQL - nie mówię tego złośliwie, wręcz przeciwnie, zbyt wysoki poziom samooceny naraża Cię na pytania od potencjalnego pracodawcy i tutaj mógłbyś mieć pewne problemy.

Masz dobrą bazę do nauki refaktoryzacji i optymalizacji MySQL więc jeśli chcesz to spróbuj nad nią popracować i wróć w tym lub osobnym wątku to pomożemy ją doszlifować :)

Pozdrawiam

komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)
Łooo, błagam, nie oceniaj po tym projekcie xd Zaznaczyłem na GitHubie, żeby się nie śmiać - to moja pierwsza aplikacja. Dodałem ją z tego względu, że mimo wszystko jest dość rozbudowana i włożyłem w nią dużo własnej pracy mając zerowe doświadczenie.

Przez ostatni rok nauczyłem się naprawdę dużo na temat baz danych, MySQL oraz MS SQL którą mam na studiach. Ale dzięki za uwagi mimo wszystko ;)
komentarz 30 czerwca 2017 przez Tomek Sochacki Ekspert (227,510 p.)
Szczerze mówić nie czytałem zbyt dokładnie README i od razu wszedłem w plik z "bazą".

Wcale się nie śmieję, jestem daleki od śmiania się z kogokolwiek, zwróciłem tylko uwagę na kilak kwestii.

Ale nie ważne, zakładając, że faktycznie masz już dużo większą wiedzę z baz danych zastanów się, czy może jednak warto byłoby poprawić ten projekt? Powiem szczerze, nie chciało mi się analizować całego projektu, a że akurat w tej chwili robię sobie małą przerwę w pracy na bazie to postanowiłem właśnie ten fragment sprawdzić.

Pytanie czy ewentualny pracodawca również nie postąpi jak ja, czyli na szybko od razu sprawdzi jedną, wybraną przez siebie kwestię... co w tym wypadku mogłoby Cię odrzucić w rekrutacji... Możesz nawet super znać bazy, a szkoda gdybyś przez jakiś dawny projekt odpadał w przedbiegach :)
komentarz 30 czerwca 2017 przez Comandeer Guru (599,730 p.)

proponuję dać "DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci"

A ja proponuję zapomnieć o tym dziwnym tworze, jakim jest utf8_* w MySQL, i stosować utf8mb4_* ;) 

komentarz 30 czerwca 2017 przez Tomek Sochacki Ekspert (227,510 p.)
O widzisz, o tym nie wiedziałem :) Dzięki.
komentarz 30 czerwca 2017 przez Assasz Nałogowiec (30,460 p.)
Projekt jest naprawdę sporawy, myślę, że nie opłaca się go już poprawiać, musiałbym go przepisać chyba od nowa. Z drugiej strony jestem dumny, że coś takiego napisałem w taki właśnie sposób, a nie np z pomocą jakiegoś frameworka, z tego, że ustawiłem sobie wysoką poprzeczkę na samym początku i to zrealizowałem praktycznie do końca (napisałem na stronie, że projekt nie jest w pełni skończony, ale to naprawdę szczegóły, np. formatowanie tekstu na forum). Traktuję to trochę jako mój osobisty relikt :)

Mam jedynie nadzieję, że potencjalny pracodawca przeczyta chociaż opis obok ;)

Podobne pytania

0 głosów
3 odpowiedzi 447 wizyt
pytanie zadane 27 września 2019 w Nasze projekty przez WojtekW Nowicjusz (130 p.)
+9 głosów
5 odpowiedzi 610 wizyt
pytanie zadane 15 marca 2018 w Nasze projekty przez gremlin Dyskutant (7,600 p.)
0 głosów
1 odpowiedź 339 wizyt
pytanie zadane 25 maja 2017 w Nasze projekty przez Graatz Obywatel (1,480 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...