Aktualnie coraz większa liczba organizacji w Polsce skupia się na rozwoju “front-endowym”, jest to spowodowane tym, że każdy chcę poszerzyć swoje horyzonty, a integracja z potencjalnym klientem/odwiedzającym jest coraz ważniejsze i wzbudza zaufanie.

Dzięki temu dana marka/firma jest w stanie piąć się po drabinkach biznesu w sieci.

Ten artykuł będzie miał za zadanie ukazać Ci najważniejsze narzędzia/wtyczki, które przydadzą Ci się na samym początku drogi front-end developra.

1. Edytor kodu

Na pierwszy rzut oka logiczne, jednak wiele osób, które rozpoczyna drogę z “kodowaniem” bierze przykład z “świata youtube” – gdzie wielu twórców na tej platformie korzysta z notepada++ – nie popełniaj tego błędu!

Polecane edytory

• Visual Studio Code
• Sublime Text 3
• Brackets
• Atom

Opisze tutaj VCS’a dlatego, że aktualnie sam z niego korzystam.

Największa zaletą tego edytora jest możliwość doinstalowania wtyczki, która kompiluje kod z SASS’a na CSS, dodatkowym atutem jest możliwość łatwego podpięcia GitHuba

Dlaczego wybrać jeden z czterech wymienionych edytorów ? 

• Charakterystyczna paleta poleceń – możliwość wywołania również kombinacja klawiszy
• Łatwa możliwość rozbudowy edytora – duża liczba wtyczek w sieci
• Emmet – dwa kliknięcia do zainstalowania – duże łatwiejsze pisania html

2. PerfectPixel by WellDoneCode

Wtyczka do chrome, która ma za zadania odwzorować projekt graficzny na stronie www w taki sposób, aby elementy, rozmiar czcionki zachowały proporcje względem projektu.

Wiele osób nie zdaje sobie sprawy jakie znaczenie mają pixele przy budowie UX – interakcja człowieka z komputerem w celu wzbudzeniu pozytywnych emocji podczas odwiedzania naszego projektu, aplikacji.

Perfect Pixel to must have każdego szanującego front-endowca, w pewnym etapie narzędzie będzie dla Ciebie codziennością – na samym początku będzie bardzo irytujące, dlatego tez nie możesz się poddawać !

3. SASS

Sass jest to jeden z tzw. “preprocesorów” CSS.

Jego głównym zadaniem jest przyspieszenia pisania CSS’ów – wydajniejsza praca z arkuszami stylów. Dzięki temu “narzędziu” możemy podzielić projekt tak naprawdę na elementy pierwsze, a na samym końcu złączyć je jednym kliknięciem – jedną z głównych cech jest posiadania m.in zmiennych, pętli, instrukcji warunkowych.

Gdy zdecydujesz się na korzystanie z SASS’a dobrym wyjściem jest wykorzystanie VCS’a, który ułatwi Ci kompilacje kodu z SASS do CSS

4. GITHUB

Używanie kontroli wersji ułatwia działanie wielu programistów nad jednym projektem – edytacja jednego pliku jest możliwa, a dodatkowo zmiany nie nadpiszą pracy innych osób !

Większość szanowanych się pracodawców żąda od potencjalnego pracownika przesłanie linku do repozytorium dzięki, któremu będą w stanie zweryfikować na jakim etapie działania jesteś

5. Chrome DevTools 

Według statystyk 44.5% użytkowników korzysta z Google Chrome, większość osób nie zdaje sobie sprawy jaki potencjał skrywa w sobie owa przeglądarka.

Dla nas “front-endowców” najważniejszym aspektem jest narzędzie developera, które możemy uruchomić za pomocą “zbadaj element” lub poprzez naciśnięcie klawisza F12.

Dlaczego warto poświęcić czas narzędziom Google ?

Odpowiedź jest bardzo prosta, owe narzędzia pozwolą Ci debugować HTML, CSS, JS w czasie rzeczywistym.

Dzięki, że dotarłeś, aż tutaj !

P.s napisz w komentarzu jakich narzędzie używasz.

Essa!