Przydatne narzędzia

Question

Jakimi przydatnymi programami/ stronami posługujecie się podczas tworzenia stron, które o wiele ułatwiają tworzenie stron. Pozdrawiam!

Answer 1

Praca na systemie Windows

Sprzęt

• 2 monitory
• Jeszcze jeden monitor

Oprogramowanie

• Google Chrome
• Node + npm
• Jakaś powłoka na konsolę (np cmder)
• Lightshot - przydatny, jak trzeba coś szybko zmierzyć, albo komuś coś pokazać
• Flux - oczy to ważna część ciała w tej branży, nie ma co ich męczyć po nocach
• Czasem przydaje się postawić lokalny server na php + baza danych (XAMPP)
• Pakiet Adobe (Ps, AI) - od biedy GIMP + cokolwiek, co otworzy wektor
• (S)FTP? WinScp (warto spojrzeć na opcję synchronizacji z serwerem)
• No i oczywiście edytor (IDE odmóżdża). Imo 1 miejsce - atom.js (ale co kto lubi...)

Google Chrome - dodatki

• PerfectPixel - nie ma nic lepszego na upierdliwego klienta
• Styler - Niekoniecznie się przydaje przy devie.. ale w łatwy sposób można modyfikować strony pod siebie. (Na przykład dodać powiadomienia systemowe, kiedy na forum pasja informatyki ktoś dodaje pytanie z tagiem JavaScript)
• Livereload - Automatyczne odświeżanie resourców na stronie, po wemitowaniu przez server livereloada eventu o zmianach w plikach (można oczywiście skonfigurować wszystko ręcznie - co w wypadku pracy zdalnej jest nawet konieczne)
• CTRL + SHIFT + B - im mniej rzeczy rozprasza - tym lepiej

Atom - dodatki

• emmet - podstawa przy kodzeniu
• file-icons - miłe dla oka ikonki dla różnych typów plików
• Remote-FTP - oh... zdalnie ratuje życie
• atom-beautif - "Atomie, zrób mi tu proszę wcięcia" - Atom: "OK"
• Jakiś color picker

Mając już tak ustawione środowisko pracy, można zabierać się za narzędzia potrzebne do pisania kodu. Tutaj ich dobór zależy ściśle od wymagań jakie stawia przed nami projekt. Jednak zawsze można wypisać kilka pozycji, które często się powtarzają.

Task runner - GULP

Czemu akurat gulp? Najpopularniejszy - w dodatku dość prosty. Na początku spełni wszystkie wymagania developera. Do gulpa oczywiście wtyczki! Całe mnóstwo wtyczek...

• gulp-plumber - nikt nie lubi ponownie odpalać tasków po błedach
• gulp-livereload - życie staje się piękniejsze
• gulp-TwójPreprocesorDoCSSa
• gulp-autoprefixer - postCSS w akcji, po co pisać prefixy, jeśli może to zrobić za nas node?
• gulp-cssnano - minifikacja CSS-a
• gulp-rename, gulp-banner...

(PS Można podpiąć HTML pod livereload, taskiem, który nic nie robi)

---

System kontroli wersji, module bundlers, dokumentacja, testy, es6+, środowiska pod SPA - przydatne narzędzia to temat rzeka. JS fatigue mocno.

Oczywiście to subiektywna lista, która zmienia się z miesiąca na miesiąc. Może komuś coś z tego się przyda.

Answer 2

Jest bardzo dużo narzędzi. Ja najczęściej korzystam z gulpa a w edytorze tekstu mam zainstalowany Emmet. Ponadto czasami lubię zajrzeć na tą stronę z kolorami, gdy nie mam pomysłu na kolorystykę strony.