Jeśli stawiasz pierwsze kroki jako Junior Web Developer, możesz poczuć się przytłoczony liczbą istniejących narzędzi i rozwiązań dostępnych w internecie. Poradnik Kodilli pomoże Ci odnaleźć się w tym labiryncie.
Edytory kodu, wtyczki, rozszerzenia przeglądarek, programy do obróbki grafiki, platformy hostingowe... ta lista nie ma końca, a wybranie odpowiedniego narzędzia nie musi być wcale takie oczywiste.
Edytory kodu
Żeby zacząć pisać swój pierwszy kod, najpierw musisz wybrać edytor, w którym będziesz mógł to zrobić. Wachlarz możliwości jest szeroki: wersje płatne i bezpłatne, inne style, układy, funkcje. To, czego potrzebujesz, to szybki i przyjazny dla użytkownika interfejs.
1. Visual Studio Code - jest jednym z popularniejszych i zdobywających wiele pochlebnych recenzji edytorów, na co wskazuje Piotr Dobrowolski, Web Developer współpracujący z Kodillą Poza tym, że jest darmowy, zaletą jest też fakt, że można go zacząć używać właściwie od razu po pobraniu i instalacji. Nie wymaga dodatkowej konfiguracji ani wprowadzania specjalnych ustawień. To jednak nie znaczy, że poza podstawowym pakietem nie dostajesz niczego więcej. Warto rozważyć kilka dodatkowych rozszerzeń (szczegółowo omówimy je później). Po uruchomieniu Visual Studio i kliknięciu w kartę rozszerzeń po lewej stronie, zobaczysz listę wtyczek, z których najczęściej korzystają programiści. Dzięki temu nie będziesz musiał sam przedzierać się przez dostępne możliwości, ale od razu będziesz mógł skorzystać z tych najbardziej przydatnych.
2. Atom - kolejne narzędzie polecane przez wielu programistów. Podobnie jak VS jest całkowicie darmowy, a otwarty kod źródłowy jest dostępny w GitHubie, dzięki czemu każdy programista znający język JavaScript, może go rozszerzyć o dodatkowe funkcje.
3. Sublime Text - aplikacja stworzona w językach C++ i Python. Posiada podobne funkcjonalności, co dwa wyżej opisane. Możesz skorzystać z darmowej wersji testowej, która nie ma ograniczeń czasowych, posiada też dostęp do wszystkich funkcjonalności, jednak jej twórca zachęca do zakupu licencji, podkreślając, że wersję bezpłatną udostępnił jedynie z myślą o testach.
4. IntelliJ IDEA z JetBrains - jest to kosztowne narzędzie. Roczna licencja to prawie 800 zł i początkującemu programiście może sprawiać pewne problemy. Mimo to warto zajrzeć do bezpłatnej, 30-dniowej wersji testowej i przekonać się, na czym polega stopień zaawansowania bardziej rozbudowanych edytorów kodu. Być może w przyszłości, gdy osiągniesz wyższy poziom wtajemniczenia, będziesz szukał właśnie takich rozwiązań.
Rozwiąż test predyspozycji
5. CodeSandbox - edytor opracowany głównie z myślą o tworzeniu aplikacji internetowych (dobry do treningu Reacta lub Angulara). Poza standardowymi rozwiązaniami, czyli np. możliwością udostępnienia adresu URL do projektu, można za jego pośrednictwem konwertować i kompresować kod. CodeSandbox pozwala również na pisanie aplikacji z możliwością korzystania z pakietów npm, czyli gotowych fragmentów kodu umieszczonych w zewnętrznych paczkach (animacje, biblioteki, których nie trzeba programować od nowa), a wszystko online!
Tym samym zachęcamy do wypróbowania różnych edytorów, bo o tym, z którego będziesz chciał korzystać, zdecydują nie tylko umiejętności, ale także indywidualne preferencje. Tworząc swoje pierwsze strony internetowe, postaraj się napisać ten sam kod w kilku różnych edytorach, a dopiero później wybierz ten, na którym będziesz na co dzień pracować.
Szkolenie Front-end: React
Wtyczki edytorów kodu
Poza możliwością darmowego korzystania z tego typu narzędzi, bądź określonej ceny za licencję, wyglądem i funkcjonalnością, jedną z różnic jest też dostęp do dodatkowych wtyczek. To dzięki nim będziesz mógł usprawnić proces kodowania. Niektóre edytory mają je zainstalowane fabrycznie, inne wymagają jednak ręcznego pobrania.
6. Emmet - znacznie przyspiesza pisanie kodu HTML poprzez automatyczne uzupełnianie znaczników.
7. ESLint - sprawdza Twój kod i wskazuje, co należy w nim poprawić. Opcjonalnie może też niektóre błędy poprawiać automatycznie.
8. Bookmarks - zamiast wpisywać między linie kodu komentarze (widoczne tylko dla programisty), możesz skorzystać z wtyczki do zakładek, która doda je w dowolnej linii kodu i przypomni o notatce w odpowiednim momencie.
9. Path Intellisense - wtyczka do Visual Studio podpowiadająca składnię kodu. Automatycznie uzupełnia takie elementy, jak href, img src lub rel.
Edytory online
Możesz także skorzystać z narzędzi dostępnych w sieci bez konieczności pobierania plików, zakładania konta czy rejestrowania się gdziekolwiek. Co prawda posiadanie konta da Ci nieco więcej uprawnień, ale nie jest to konieczne.
10. CodePen - jest zdecydowanie jednym z najpopularniejszych edytorów, który można szybko opanować i w prosty sposób zaprezentować rezultaty swojej pracy innym. Składa się z trzech okien dla HTML, CSS i JS. Posiada wbudowane narzędzia do sprawdzania i wskazywania błędów. Każda sekcja jest widoczna oddzielnie, ale widzimy także efekt całościowy, czyli np. interaktywną stronę główną, na której działają wszystkie linki, dodane filmy czy przyciski. CodePen to także setki projektów udostępnionych przez innych użytkowników. Można je podglądać także w warstwie kodu, uczyć się na nich i wzorować.
11. JSFiddle - to z kolei bardziej zaawansowany edytor online. Umożliwia pracę przy aplikacjach, ocenę kodu, udostępnianie jego fragmentów czy współpracę z innymi developerami. Składa się z wydzielonych sekcji dla HTML, CSS i JS oraz panel, w którym widzimy rezultat stworzonego kodu. Obsługuje także projekty, w których wykorzystano React i JSX, jQuery, Vue, Preact, TypeScript, CoffeeScript, SCSS, CSS Grid, PostCSS lub Bootstrap.
Rozszerzenia przeglądarki
Jeśli używasz Chrome, jako najpopularniejszej obecnie przeglądarek witryn? To spróbuj zmierzyć się z Chrome Canary. Na razie dostępna jest tylko wersja beta, którą stworzono specjalnie dla programistów. Niektórzy mówią, że tak będzie wyglądała przyszłość Chrome. Jest ona codziennie aktualizowana i wciąż przybywa jej nowych funkcji, a jednocześnie wciąż nie jest dopracowana, więc wymaga odpowiedniej dozy umiejętności i... cierpliwości. Sprawdźmy niektóre rozszerzenia:
12. Tampermonkey - pozwala nam używać naszego własnego skryptu JS na stronie innej osoby. Dlaczego mielibyśmy to zrobić? Istnieją strony internetowe, które mogą mieć dość irytujące funkcje, takie jak okno wyskakujące na czacie lub powiadomienia push, które wyskakują co 5 sekund. Jeśli chcesz korzystać z witryny, ale nie chcesz, aby denerwowały Cię niepotrzebne rozpraszacze, możesz napisać własny skrypt dla konkretnej witryny i ukryć na niej wszystko, co Ci przeszkadza.
13. Stylus - podobna zasada, ale w tym przypadku odnosi się wyłącznie do stylu i CSS. Chcesz pokolorować okno Facebooka na zielono? Chcesz zmienić tło strony, albo rozmiar czcionki? Po to właśnie stworzono to rozszerzenie.
14. Wappalyzer - zdarza się, że trafiasz na jakąś ciekawą stronę internetową i Twoją uwagę przyciąga nieznane wcześniej rozwiązanie. Zastanawiasz się: Ciekawe jak to zrobili? Oczywiście zawsze możesz przeanalizować kod źródłowy i sprawdzić go linijka po linijce, ale nie musisz. Dzięki Wappalyzer możesz bez wysiłku sprawdzić wszystkie technologie, które zostały użyte na konkretnej stronie i wykorzystać zaprezentowane pomysły u siebie.
15. Page Ruler - wirtualna linijka, która pozwala zmierzyć (w pixelach) na stronie wszystko to, co da się zmierzyć, np. szerokość strony czy grafik, w tym także miejsca przeznaczonego dla elementów, które dopiero chcemy dodać.
Społeczność
16. GitHub - to zdecydowanie najpopularniejsze narzędzie wykorzystywane przez developerów z całego świata, a zarazem największa społeczność programistów w internecie. Bezpłatne prywatne i publiczne repozytoria, czyli rodzaj magazynu danych, które można udostępniać innym. Git pozwala na pracę w zespole na odległość i poprzez zapisywanie wszystkich zmian i poprawek pozwala na ukończenie kodu bez błędów.
17. BitBucket - jeśli pracujesz w zespole, możesz komentować poszczególne elementy kodu, a także dodać własną część. BitBucket pozwala współpracować przy tym samym projekcie maksymalnie 5 programistom.
Bootcamp Kodilli zawiera cały moduł poświęcony efektywnej współpracy między programistami. Jeśli chcesz się rozwijać w branży IT, jest to absolutna podstawa, którą musisz opanować.
Raz utkniesz i co dalej?
Imponującą bazą informacji zarówno dla początkujących jak i zaawansowanych programistów jest serwis społecznościowy Stack Overflow. Można w nim zadawać pytania dotyczące wszelkich zagadnień związanych z kodowaniem, a także wspierać swoją wiedzą innych developerów.
Oczywiście to nie jest jedyne forum związane z IT i na pewno znajdziesz w internecie wiele równie przydatnych. Jeśli jednak rozpoczniesz naukę kodowania z Kodillą, uzyskasz dostęp do platformy, na której będziesz się mógł dzielić swoimi doświadczeniami z innymi Kursantami, a także zadawać pytania Mentorom. Nie jest ich może tak wielu, jak „na stacku”, ale wszystkich łączy to samo - bootcamp Kodilli, dlatego z pewnością o wiele szybciej znajdziesz odpowiedzi na trapiące Cię pytania, niż szukając ich samodzielnie w sieci.
Chcesz sprawdzić, który język programowania jest dla Ciebie najlepszy?
Rozpocznij QUIZ
Leave a Comment