15 Błędów Web Developerów | www.tworcastron.

pl

1
15 Błędów Web Developerów | www.tworcastron.pl

15 Najczęstszych błędów

Web Developerów

Czyli o czym musisz pamiętać, zanim

zaczniesz kodować strony internetowe.

2
15 Błędów Web Developerów | www.tworcastron.pl

Najczęstsze błędy

web developera

Dużo przemyśleń, niesamodzielność

Nie zrozum mnie źle. Planowanie jest dobre. Baa! Praktycznie każdy projekt
powinieneś dobrze zaplanować przed jego rozpoczęciem. Nie wpadnij jednak w
dziwny nawyk wielu początkujących programistów, którzy piszą na forach
tematy typu „Potrzebuję aplikację X, która robi Y. Kto może mi to napisać?”. Za
dużo rozmyślania, za mało szukania odpowiedzi na własną rękę.
Nie zliczę sytuacji, gdzie kopiowałem treść tematu do Google i w ciągu 10
sekund miałem gotową odpowiedź.

Fora są świetnych narzędziem rozwiązywania problemów. Szanuj czas

wszystkich, którzy na nich pomagają innym i proś nie o gotowe rozwiązania, ale
o wskazówki (sprawdzając wcześniej czy ktoś tego problemu już przypadkiem
nie rozwiązał). Dzięki temu z pewnością nauka będzie dużo skuteczniejsza.

3
15 Błędów Web Developerów | www.tworcastron.pl

Tak samo będzie to wyglądało w pracy. Jeśli zamieszasz pracować jako

programista w jakiejś firmie, powinieneś potrafić samemu wyszukiwać
odpowiedzi na swoje pytania. Jasne, że będą tam też inni programiści, którzy
mogliby Ci pomóc. Jednak oni mają swoją pracę i jeśli nie próbowałeś wcześniej
samemu rozwiązać problemu, to lepiej nawet do nich nie podchodź;)

Korzystanie z polskiego internetu

Mam tutaj na myśli, że sporo osób szuka odpowiedzi na swoje problemy

wyłącznie na polskich forach. Niestety nasz język nie jest „oficjalnym” językiem
internetu i odpowiedzi będzie o wiele mniej.. lub wcale.

Jeśli szukasz odpowiedzi na swój problem wpisując polskie frazy i nic się nie
pojawi, to na 90%, gdybyś wpisał to samo po angielsku, odpowiedzi znajdziesz
wiele. Może nie jest to błąd, raczej utrudnianie sobie pracy.

Uczenie się przestarzałych technologii

Nikt kto zabiera się za naukę czegokolwiek, nie będzie uczył się przestarzałych i
nieaktualnych rzeczy (a przynajmniej nie świadomie). Dlatego dotyczy do
głównie początkujących web developerów.

Przykład? W trakcie pisania tego poradnika najnowszą wersją PHP jest wersja

4
15 Błędów Web Developerów | www.tworcastron.pl

7.0, natomiast wersja 5.x w ciągu półtora miesiąca przestanie być rozwijana.
Mimo to wiele osób zaczynających naukę PHP wzoruje się w dalszym ciągu na
wersjach 5.x, w której jest wiele różnic.
Później podczas pracy w nowym środowisku, nagle okaże się, że Twoja aplikacja
nie działa jak powinna.

Jeden z moich wykładowców na Politechnice Lubelskiej uważał, że jeśli dana

technologia ma 6 lat to jest już niewiele warta. Coś w tym jest. Pamiętaj o tym, a
gdy uczysz się nowych technologii miej pewność, że są one aktualne.

Jest to mega ważne podczas nauki z książek, a szczególnie tłumaczonych z

innych języków. Z reguły mija rok, zanim autor napisze książkę, następnie 1-3
lata, zanim książka zostanie przetłumaczona na nasz język. Gdy ją kupisz i
zobaczysz, że została wydana rok temu – może się okazać, że była pisana już
nawet 4 lata temu.

Powtarzanie kodu

Znowu błąd głównie początkujących, którzy nie weszli jeszcze na poziom

programowania obiektowego, ale są na etapie programowanie strukturalnego.
Napisałem, głównie ponieważ część programistów mimo pisania kodu obiektowo
lubi powtarzać ten sam kod wielokrotnie.

Osobiście jestem zwolennikiem, aby do programowania obiektowego iść

5
15 Błędów Web Developerów | www.tworcastron.pl

możliwie szybko. Nie potrzebujesz znać wszystkich funkcji, aby poznać jak
działają metody i klasy. Programowanie obiektowe to trochę teorii, ale przede
wszystkim sposób myślenia.

Zamienne stosowanie tagów HTML(5)

<div> <section> <span> a co to za różnica? Język HTML zawierał na początku

swojego istnienia zaledwie 22 tagi. Gdyby chcieli, aby tagi było można dowolnie
zamieniać zależnie do humoru, to nie dodawali by ich więcej;)

Każdy tag ma swoją własną rolę, swoją funkcję (to właśnie jest semantyka, czyli
przypisanie tagom konkretnych funkcji). Po wydaniu HTML5 jeszcze bardziej się
to uwidoczniło. Dobrze dbać o semantykę kodu. Dzięki temu zarówno my, osoby
przejmujące nasz kod, oraz booty wyszukiwarek są w stanie określić, jak
zbudowana jest strona i kolokwialnie mówiąc wiedzą 'co jest co'.

Intro

Bardziej na zachodzie można zaobserwować lekką modę na różne powitalne

filmy, animacje. Nie twierdzę, że jest to złe, ale trzeba naprawdę dobrze je
zaplanować i przemyśleć wcześniej kilka razy. Intro trzeba zastosować
umiejętnie, a gdy już jest, to pilnuj aby użytkownik w każdej chwili mógł je
pominąć i od razu WIEDZIAŁ JAK to zrobić.

6
15 Błędów Web Developerów | www.tworcastron.pl

SEO to nie moja działka

„Ja jestem od zakodowania strony a nie od jej pozycjonowania... Jak mi zapłacą

za pozycjonowanie to przerobię kod.” Może przesadziłem ponieważ często kod
zły z perspektywy pozycjonowania, nie jest tworzony specjalnie, aby być złym.
Jest raczej wynikiem braku podstawowej wiedzy o pozycjonowaniu oraz (o czym
było wcześniej) o znaczeniu tagów (czyli o semantycznym kodowaniu).

To czy zastosujesz <article>, <div>, <head>, <aside> ma wręcz ogromne

znaczenie dla wyszukiwarek. To czy przy zdjęciach będziesz stosował atrybut
„alt” ma ogromne znaczenie dla wyszukiwarek. To czy nawigacje zamieścisz
pomiędzy <nav> a jedynie pomiędzy <ul> ma ogromne znaczenie dla
wyszukiwarek.

Jako web developer powinieneś znać chociaż podstawy SEO, szczególnie te, na
które masz bezpośredni wpływ (jak rola tagów).

Pełnoekranowe reklamy

Zmora użytkowników telefonów. Chociaż jeszcze jakiś czas temu można było
zaobserwować je na komputerach. Co robi większość użytkowników po tym jak
nagle na całym ekranie pojawi się reklama z małym 'x', który trzeba jeszcze

7
15 Błędów Web Developerów | www.tworcastron.pl

znaleźć? Wychodzi w trybie natychmiastowym. Jest to jeden ze skuteczniejszych

odstraszaczy.

Zbytnio zbliżone przyciski (na wersjach mobilnych)

Znów Ci użytkownicy mobilni. Skąd się bierze to, że często przyciski są blisko
siebie? W wielu przypadkach z tego, że strona tworzona jest na komputer, a
dopiero później dostosowywana do telefonów. Wtedy, gdy mamy coraz mniejsze
pole manewru i trzeba zmieścić wiele przycisków na dużo mniejszym ekranie, to
brakuje nam miejsca i wszystko się 'ścieśnia'.

Nie bez powodu istnieje zasada, że strona powinna być w pierwszej kolejności
projektowana na telefony a dopiero później na komputery.

Istnieje bardzo fajny „test zgodności z urządzeniami mobilnymi” Google, który

zwraca uwagę właśnie na takie rzeczy. Możesz go znaleźć pod adresem:
https://www.google.com/webmasters/tools/mobile-friendly/

Złe nazewnictwo klas (CSS)

„Ale jak można źle nazwać klasę?” Co prawda dla przeglądarek czy użytkownika
nie będzie to miało żadnego znaczenia. Bardziej dla Ciebie i przyszłych koderów.

8
15 Błędów Web Developerów | www.tworcastron.pl

Czym dokładnie jest złe nazewnictwo? Weźmy taki przykład:

Jak podpisałbyś klasy dla tych przycisków? Czy będzie to „button-orange” czy
„button_buy”, „button_add_cart”?

Jeśli to pierwsze, to co gdy trzeba będzie zmienić kolor przycisku na czerwony?

Nazwa zostanie a kolor się zmieni, a może trzeba będzie niepotrzebnie zmieniać
nazwy klasy w wielu miejscach.

Jest to oczywiste ale nie wszyscy się do tego stosują. Mam nadzieję, że
zauważyłeś, iż nawet dla przykładu nie używam języka polskiego.

Sposobów na jeszcze lepsze nazwy jest wiele. Jeśli chcesz zagłębić się w temat,
wyszukaj wgógluj frazę „metodyki CSS”.

Korzystanie z notatnika

9
15 Błędów Web Developerów | www.tworcastron.pl

Mam nadzieję, że już raczej z notatnika nie korzysta nikt:) Słowo „notatnik”
potraktowałem w sposób symboliczny. To, że korzystasz z jakiegoś edytora do
kodowania jest raczej normalne. Nie każdy jednak początkujący web developer
korzysta z wtyczek. Niestety edytory domyślnie są dosyć ograniczone w swojej
funkcjonalności i warto zadbać o dobrze przygotowanie edytora do pracy.

Znowu nie jest to może błąd, ale mocne utrudnianie sobie pracy. Można
pracować w 'czystym' edytorze, ale co powiesz na to, że z reguły instalacja ok. 5
wtyczek może 10-cio krotnie przyśpieszyć Twoją pracę?

Trzymanie się tego, co się już zna

Potrafisz już dobrze posługiwać się jakąś technologią. Jeśli pracujesz w PHP czy
JS to być może w końcu udało Ci się po wielu nieprzestanych nocach zapoznać
pierwszego frameworka.

Pewnie jesteś z tego dumny, i słusznie zresztą. Ważne tylko, abyś w tym
momencie nie zamknął się w swego rodzaju „strefie komfortu”. Brzmi jak
wykład motywacyjny... Mam na myśli to, że gdy poznasz jakąś technologię to
praca w niej będzie przyjemnością – proste i logiczne. Nie pozwól jednak, aby
taka wygodna pracy przeszkodziła Ci w poznawaniu nowych technologii.

Znasz już dobrze jakiś framework? Super, to znaczy, że pora na kolejny! Bez tego
ciężko będzie Ci iść do przodu oraz chociażby wyrobić sobie zdanie o

10
15 Błędów Web Developerów | www.tworcastron.pl

plusach/minusach różnych technologii.

Stylowanie w HTMLu

Mam nadzieję, że wiesz już o tym, że technologie należy rozdzielać. W plikach

HTML powinien być możliwie czysty HTML, natomiast wygląd elementów
powinien być zdefiniowany w oddzielnym pliku CSS a skrypty Javascript w
oddzielnym pliku JS.

Mimo rozdzielenia technologii w dalszym ciągu można zaobserwować używanie

atrybutu „style”. Niby wszystko jest zdefiniowane w CSS ale ktoś obniży na
koniec jakiś przycisk stosując „style='margin-top: 100px'” i całe rozdzielanie
kodu **** trafia.

Ładowanie wszystkiego wszędzie

Proste, małe strony mogą mieć po 2 pliki CSS i JS. Wtedy z reguły nie jest
problemem ładowanie ich na każdej podstronie. Ale takie strony są rzadkością,
częściej można zobaczyć, że na stronie ładowane jest po 8 i więcej plików JS i
CSS – a każdy swoje waży i opóźnia ładowanie się strony.

Należy sobie zadać pytanie, czy wszystkie te pliki są nam zawsze potrzebne?
Jeśli mamy oddzielny plik ze skryptem galerii zdjęć, to czy jest on nam potrzebny

11
15 Błędów Web Developerów | www.tworcastron.pl

na każdej stronie, czy tylko opóźnia jej załadowanie?

Staraj się ograniczać załączanie takich plików tylko do tych niezbędnych.

Niesprawdzanie typu danych

Błąd back-endu (najczęściej). Jeśli pracujesz na PHP to jestem pewny, że to

znasz. PHP w porównaniu do innych języków potrafi sam określić z jakim typem
danych ma do czynienia. Nie musisz definiować na starcie czy dany plik jest typu
Integer, Float czy Double. Z pewnością jest to wygodne i ja Ci nie powiem żebyś
nagle zaczął definiować wszystkie zmienne. Przynajmniej nie zawsze.

Są jednak sytuacje, gdzie wiele zmiennych wchodzi ze sobą w jakąś współpracę

(np. kalkulatory itd.) - dobrze wtedy przypilnować i sprawdzić czy wysłana
zmienna jest faktycznie tym typem, którego oczekujemy.

Jak pewnie wiesz. Formularze można łatwo oszukać na front-endzie (wystarczy

edytować kod prosto w przeglądarce)... Pewnie spodziewasz się, że powiem teraz
o walidacji formularzy w back-endzie.. jeśli tak to dobrze bo to bardzo ważne!
Jednak tym razem nie o to mi chodzi.

Przykład? W bazie danych masz tabelę o nazwie NIP (np. chcesz zapisać NIP
firmy) o typie INT (czyli Integer – liczba całkowita) natomiast użytkownik
będzie chciał wysłać do niej taką wartość: „123-34-57-89”.

12
15 Błędów Web Developerów | www.tworcastron.pl

Bardzo często NIP zapisuje się właśnie z myślnikami.. Jaki więc będzie efekt? W
bazie zapisze się liczba do pierwszego znaku, którego nie obsłuży, czyli „123”.
Błąd, który może być później trudny do wykrycia.

Podsumowanie

Kontynuację tego, którego poradnika znajdziesz na moim blogu

http://tworcastron.pl we wpisach „9 błędów web developera” oraz „9 nawyków
dobrego programowania”.

Gratuluję, że dotarłeś/aś do końca tej lektury. Jeśli uważasz, że treść, którą się
dzielę jest chociaż trochę wartościowa, to było warto:) Gdybyś chciał/a podzielić
się opinią na temat tego, krótkiego ebooka zapraszam do kontaktu
adam@tworcastron.pl

13