Ścieżka nawigacyjna
Treść główna
Możliwość tworzenia stron internetowych jest o tyle elastyczna, że możemy tego dokonać w prawie każdym edytorze tekstowym i na prawie każdym komputerze. Pomimo tego, czy nie lepiej jest skorzystać z narzędzi ułatwiających nam życie i znacząco przyspieszających naszą pracę? Istnieje spora liczba aplikacji na różne systemy operacyjne. Kwestia tylko, które z nich wybrać? Właśnie na to pytanie w niniejszym wpisie chciałbym Wam odpowiedzieć. Na podstawie własnego doświadczenia opiszę Wam co dokładnie, w chwili obecnej, ułatwia mi pracę w web developingu.
Hardware
Zacznę może paroma słowami od sprzętu komputerowego. Abyśmy mogli w pełni cieszyć się stuprocentową koncentracją, motywacją i zaangażowaniem nad aktualnie tworzonym przez nas projektem, potrzebny jest hardware, który będzie stabilnie utrzymywał wszystkie nasze aplikacje. Zaufajcie mi, nie ma nic gorszego jak moment, kiedy którykolwiek z naszych aktualnie wykorzystywanych programów zatnie się na parę chwil. Pomimo że trwałoby to nawet z 5 - 15 sekund, potrafi całkowicie zburzyć nasze skupienie nad aktualnym zadaniem. Ponadto, w czasie gdy "aplikacja nie odpowiada" zapewne przejdziemy na przeglądarkę, w oczekiwaniu na przywrócenie stanu aplikacji, i sprawdzimy "Facebooki". Tam zapewne upatrzymy coś ciekawego, i tak minie nam kolejne pół minuty. Po tym czasie zdajemy sobie sprawę, że program wrócił do siebie, i możemy kontynuować pracę... ale co my ostatnio robiliśmy? No właśnie, kolejnych parę chwil na przypomnienie sobie czym niedawno się zajmowaliśmy. Wyobraźmy sobie teraz, że tak może być co parę momentów. Masakra! Dlatego w moim mniemaniu też ważne jest (lecz niekonieczne) kupno odpowiedniego sprzętu.
Gorzej, jak pojawi się "bluescreen", ale o nieco innej treści niż ta ;)
Pomimo że nie jestem fanem, można nabyć komputer firmy Apple. Jest to dość drogie rozwiązanie, ale z tego co mi wiadomo, w pełni spełnia swoje wymogi. Wszelkie aplikacje tworzone są specjalnie dla tego sprzętu (a nie sprzęt dla aplikacji), dlatego też nie powinny się "zwieszać". Nie bez powodu wielu grafików, programistów i DJ-ów korzysta z tego sprzętu.
Innym wyjściem, a zarazem bardziej przeze mnie preferowanym, jest kupno stacjonarnego PC lub laptopa. W tym przypadku praktycznie nie jesteśmy niczym ograniczeni - możemy zbudować stosowny dla nas zestaw w przystępnej cenie. Konstruując swojego "peceta" dla web developingu powinniśmy mieć główną uwagę na ilość RAM (przynajmniej 8GB), procesor (Intel i3 powinien wystarczyć) oraz dysk SSD (wystarczy 128GB dla 64-bitowego systemu operacyjnego). W późniejszym czasie możemy dorzucić jakąś lepszą kartę graficzną, i mamy dobry sprzęt dla gier komputerowych :). Wszystko jest po to, aby nasz komputerek udźwignął aplikacje umożliwiające nam solidną pracę, a niektóre z nich potrafią "zjeść" nawet do 3GB pamięci RAM.
Idąc dalej w stronę hardware'u, chciałbym jeszcze o czymś wspomnieć. Jedną z tych najbardziej pomocnych Wam rzeczy będzie drugi wyświetlacz. Zaufajcie mi, różnica w pracy na przynajmniej dwóch monitorach, względem jednego, jest jak dzień do nocy. Na jednym z nich można wtedy umieścić edytor tekstowy, a na drugim przeglądarkę internetową. Zawsze to jakieś ułatwienie i mniej klikania :). Pewnie teraz sobie pomyślicie, że Was nie stać na taki wydatek. Odpowiem Wam, że do tego nie trzeba wielkich pieniędzy. Jeden ze swoich monitorów, 24-calowego DELL 2407WFPb, nabyłem na OLX.pl za niecałe 300 PLN (i to jeszcze znalazłem wystawiającego ten przedmiot z miasta, w którym obecnie mieszkam!).
Software
Przejdźmy w końcu do oprogramowania. Ze względu, iż nie przepadam za produktami firmy Apple, a na Linuksach nie czuję się komfortowo, moim pierwszorzędnym systemem operacyjnym był, jest i prawdopodobnie będzie Microsoft Windows. W chwili obecnej z numerkiem 8.1, lecz czekam z niecierpliwością na innowacyjną "dziesiątkę" (pewnie nie tylko ja). W związku z tym, wszystkie aplikacje, jakie będę w tym artykule opisywał, są właśnie na ten system (możliwe, że są dostępne również i na inne, ale tego nie sprawdzałem).
Edytor tekstowy
Zacznijmy od podstaw, czyli edytora do naszego kodu. Istnieje ich multum! Niektóre są proste, a inne bardziej zaawansowane i skupiają wiele funkcjonalności (tak zwane IDE, czyli "Zintegrowane środowisko programistyczne"). Są one jednak równocześnie dość "ciężkie", zarówno objętościowo, jak i pod względem "zjadania" pamięci RAM. Ja preferuję dwa następujące:
Pierwszy z nich jest edytorem, w którym siedzę w 90% przypadków. Służy mi w momentach, kiedy solidnie przysiadam do konkretnego projektu. Posiada wiele bardzo potrzebnych mi funkcjonalności, takich jak, między innymi:
- podpowiadanie i kolorowanie składni;
- automatyczne informowanie o błędach w składni;
- pełne wsparcie dla obiektowego programowania w PHP;
- automatyczne formatowanie tekstu;
- integracja z systemem Composer;
- integracja z systemami kontroli wersji (SVN/Git);
- integracja z preprocesorami CSS;
- możliwość podłączenia się z serwerem FTP;
- dostępność wielu dodatkowych wtyczek napisanych przez community (np. używany przeze mnie show-path-in-title).
Jedynym jego mankamentem (przeze mnie zauważonym) jest wymienione już korzystanie z zasobów komputera. NetBeans potrafi niekiedy zająć nawet do 2 GB pamięci RAM. Nie bez powodu więc wcześniej wyraźnie zaznaczyłem, aby Wasz sprzęt miał jej nieco więcej.
Drugi edytor tekstowy, będący znacząco ulepszoną wersją domyślnie dostarczanego przez firmę Microsoft Notepada, wykorzystywany jest do mniejszych zadań. Występuje u mnie wiele przypadków, kiedy to muszę dokonać szybkiej modyfikacji. W takich momentach, zamiast odpalać "intenetowe fasolki", które włączałyby się o kilka razy dłużej, szybko dokonuję zmian w Notepad++. Ten program również przydaje się w przypadkach, kiedy dany format pliku nie jest wspierany przez NetBeansa lub w momentach, gdy muszę dokonać zmiany kodowania znaków danego pliku.
Przeglądarka
W przypadku przeglądarek zapewne nikogo nie oświecę swoją oryginalnością, gdyż odpowiedź jest tylko jedna. Należy mieć zainstalowane wszystkie najpopularniejsze przeglądarki. Mówię tutaj o Google Chrome, Mozilla Firefox, Opera, Internet Explorer (domyślnie dostępna w systemach Windows) oraz przeglądarka Safari od Apple. Na każdej z nich wypada sprawdzić nasz projekt, gdyż niestety każda z nich (w szczególności IE) rządzi się swoimi prawami.
Najczęściej używanymi przeze mnie przeglądarkami są pierwsze dwie wymienione. Na nich też chciałbym skupić swoją główną uwagę. Produkt od firmy Google służy mi zazwyczaj do "googlowania", rzeczy biurowych, wykonywania screenshotów i paru innych, jak np. korzystania w Facebooka :). Wydaje mi się ona po prostu najszybsza i najwygodniejsza. Mam na niej zainstalowane następujące dodatki:
- AdBlock
Tradycyjne blokowanie reklam. - Stylish
Umożliwia zmiany w ostylowaniu CSS stron internetowych (pozwala mi m.in. usunąć emikony z Facebooka :D). - Full Page Screen Capture
Do tworzenia screenshotów aktualnie wyświetlanej strony (w całości!).
Firefox natomiast daje mi na tyle duży zestaw całkiem fajnych dodatkowych, a zarazem darmowych narzędzi do web developingu, że stał się jednym z najważniejszych tak ułatwiających mi pracę programem. Z tego też powodu jest to przeglądarka, która służy mi roboczo do tworzenia stron internetowych. Poniżej zamieszczam listę wszystkich rozszerzeń, z których obecnie korzystam:
- Firebug
Wyjątkowy w swoim rodzaju wspomagacz przeglądania i edycji kodu źródłowego strony internetowej z wieloma innymi funkcjonalnościami. Bardzo przyjemny interfejs. - ColorZilla
Narzędzie do odczytywania kolorów wskazanego przez użytkownika punktu. Ponadto, ma możliwość wygenerowania listy kolorów z jakich aktualnie strona internetowa korzysta oraz posiada generator gradientów. - HTML Validator
Pomaga w walidacji kodu HTML. - Web Developer
Zestaw przeróżnych funkcjonalności dla Web developera. - Pixel Perfect
Umożliwia dostosowanie szablonu projektu co do jednego piksela, poprzez nałożenie przezroczystej warstwy z obrazkiem projektu na nasz dotychczas zakodowany projekt; - Wappalyzer
Addon umożliwia sprawdzenie z czego korzysta dana strona internetowa (jakiego CMSa lub bibliotek, a także w jakim języku została napisana i na jakiej wersji serwera się znajduje).
Na koniec chciałbym jeszcze dodać, że Firefox ma wbudowaną możliwość współdzielenia ekranu. Jest to idealne rozwiązanie, jeśli chcemy przeszkolić naszego klienta w momencie, kiedy dzieli nas dość konkretna odległość. Ponadto, przeglądarka udostępnia system deweloperski, za pomocą którego możemy podłączyć wersję desktopową z wersją dostępną na naszym smartfonie.
Inne, warte wspomnienia
Będąc web developerem, nie mogę skupić się jedynie na kodzie. Aby strona miała o wiele większe i ważniejsze funkcjonalności, potrzeba nam współpracy z bazami danych. Nie ukrywając, do tej pory miałem do czynienia jedynie z bazami MySQL i PostgreSQL. Do obu z nich w pełni wystarczały mi oprogramowania dostarczane przez ich twórców. W pierwszym przypadku jest to MySQL Workbench, w drugim pgAdmin. Wydaje mi się jednak, że wspomniane już graficzne systemy do zarządzania bazą danych są przyjemniejsze dla oczu i bardzo wygodnie się z nich korzysta (chociażby dlatego, że nie trzeba czekać aż zakładka się odświeży, w przeciwieństwie do np. phpMyAdmina dla MySQL).
Korzystam z Workbencha już od wielu lat, i nigdy się na nim nie zawiodłem (no, poza drobnymi problemami podczas instalacji, o których aż tak nie warto wspominać).
Osoby pracujące na Linuksach mają możliwość stworzenia wirtualnego pulpitu. W systemach Microsoftu niestety ta funkcjonalność ma przybyć wraz z wyjściem Windowsa 10. Na pomoc może jednak przyjść malutki program o nazwie Dexpot. Polecam, gdyż jest łatwy w użyciu, a i można jego możliwości wygodnie podpiąć pod skróty klawiszowe.
Dodam jeszcze kilka słów na temat programów graficznych. Uważam, że Adobe Photoshop był i będzie niezastąpionym programem do cięcia szablonów graficznych. Istnieją jednak jego darmowe odpowiedniki. Po więcej informacji odsyłam Was do następującego artykułu autorstwa David Nielda (dostępny w języku angielskim):
The Best Photoshop Alternatives That Are Totally Free
Napiszcie mi w komentarzach czy z jakiegokolwiek z przedstawionych programów korzystaliście i czy je polecacie :).
Narzędzia ON-LINE
Idąc już w stronę końca tego wpisu, chciałbym jeszcze zaprezentować Wam parę stron internetowych wspomagających mnie w pomniejszych czynnościach:
- Stitches
Program do generowania sprite'ów (łączenie wielu obrazków w jeden). - ajaxload.info
Strona generująca paski / kółka progresu (np. kiedy ładujemy dane technologią AJAX). - favicon-generator.org
Strona wspomagająca mnie w generowaniu favicon. - pixabay.com
Strona, na której można znaleźć darmowe obrazki, których użyć możemy nawet i do celów komercyjnych. - wave.webaim.org
Walidator sprawdzania poprawności strony pod kierunkiem osób niepełnosprawnych. Czyli mówi nam, czy strona jest "dostępna". - caniuse.com
Strona, na której znajdę informacje, czy dana funkcjonalność kodu CSS wspierana jest przez wyznaczone przeze mnie przeglądarki. - Format CSS Code
Narzędzie do formatowania kodu CSS według swoich potrzeb (niestety NetBeans nie dostarcza takiego narzędzia). - jsfiddle.net
Pozwala na przetestowanie działania konkretnego kodu JavaScript. Umożliwia przesłanie dostępu do innej osoby, aby mogła go zweryfikować lub zmodyfikować na swoje potrzeby.
Pierwsze koty za płoty
Chciałbym jeszcze tylko wspomnieć, że już od wieeelu miesięcy korzystam z bardzo przyjemnej w użyciu aplikacji do tworzenia screenshotów lub "skrawków" ekranu. Chciałbym jednak o niej napisać całkowicie osobny wpis, który zapoczątkuje serię artykułów. Zamierzam w niej skupiać się na konkretnych bibliotekach bądź programach, które pomogły lub pomagają mi w web developingu (i nie tylko, gdyż wyżej wspomniany program może się przydać każdemu).
Przedstawiłem Wam wszystkie (mam nadzieję) narzędzia z jakich korzystam pracując nad stronami internetowymi. Jeśli o jakichś zapomniałem, na pewno uzupełnię post i poinformuje o tym na moim profilu na Facebooku :). Dajcie mi znać jak według Was mój pierwszy wpis wypadł i oceniając / komentując mnie miejcie proszę wzgląd, że to pierwszy artykuł tego bloga. Napiszcie też z jakich narzędzi Wy korzystacie :).
Z okazji, że dotarliście do końca, chcę Wam jeszcze pokazać jak bardzo z tego powodu się cieszę:
Pozdrawiam serdecznie i do następnego wpisu :)!
Dodaj komentarz