Wstęp
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!
Strefa komentarzy
Polecany hosting
