narzędzia do tworzenia stron internetowych przeszły długą drogę w ciągu zaledwie kilku lat. Dzięki temu postępowi możemy wykorzystać moc sprawdzonych bibliotek, aby usprawnić nasz przepływ pracy i skorzystać z większych możliwości w zakresie responsywnego projektowania. Nie tylko to, możemy budować rzeczy razem dzięki stale ulepszanym systemom kontroli wersji. Od dodatków do przeglądarek i wtyczek po procesory, które usprawniają Twój kod, nigdy nie było więcej możliwości tworzenia niesamowitych aplikacji internetowych.
ale wraz z rosnącą prawie codziennie liczbą narzędzi programistycznych, znalezienie najlepszego oprogramowania do wykonania zadania może czasami wydawać się zniechęcające. Aby ci pomóc, stworzyliśmy listę niezbędnych narzędzi do tworzenia frontendu. Jeśli chcesz dowiedzieć się o jednym w szczególności, po prostu wybierz go z listy poniżej.
- Sublime Text
- narzędzia programistyczne Chrome
- jQuery
- GitHub
- Twitter Bootstrap
- Angular.js
- Sass
nie chcesz czytać? Następnie obejrzyj poniższy film, w którym jeden z naszych specjalistów od kursów omawia narzędzia.
1. Sublime Text
zacznijmy od podstaw: pierwszorzędny edytor kodu-taki, który oferuje dobrze zaprojektowany, super wydajny i ultra szybki interfejs użytkownika. Jest kilka, które robią to dobrze, ale prawdopodobnie najlepszym (i najpopularniejszym) jest wysublimowany tekst.
pomysłowo prowadzony przez jednoosobowy zespół programistów, sekret sukcesu Sublime leży w szerokiej gamie skrótów klawiaturowych-takich jak możliwość jednoczesnego edytowania (dokonywania tych samych interaktywnych zmian w wielu wybranych obszarach), a także szybka nawigacja do plików, symboli i linii. A kiedy spędzasz 8+ godzin z edytorem każdego dnia, te cenne kilka sekund zapisanych dla każdego procesu naprawdę się sumują…
możesz zacząć kodować z Sublime w tym darmowym samouczku tworzenia stron internetowych (bez konieczności rejestracji).
2. Chrome Developer Tools
czy nie byłoby wspaniale, gdybyś mógł edytować HTML i CSS w czasie rzeczywistym lub debugować JavaScript, przeglądając dokładną analizę wydajności swojej witryny?
wbudowane narzędzia programistyczne Google Chrome pozwalają ci to zrobić. Dołączone i dostępne zarówno w Chrome, jak i Safari, umożliwiają programistom dostęp do wewnętrznych aplikacji internetowych. Ponadto paleta narzędzi sieciowych może pomóc zoptymalizować przepływy ładowania, a oś czasu daje głębsze zrozumienie tego, co przeglądarka robi w danym momencie.
Google publikuje aktualizację co sześć tygodni – sprawdź więc ich stronę internetową, a także Kanał Google Developers na YouTube, aby aktualizować swoje umiejętności.
3. jQuery
JavaScript od dawna jest uważany za podstawowy język front-end przez programistów, chociaż nie jest pozbawiony problemów: pełen niespójności przeglądarek, jego nieco skomplikowana i niedostępna składnia powodowała, że funkcjonalność często cierpiała.
tak było do 2006 roku, kiedy jQuery – szybka, mała, wieloplatformowa biblioteka JavaScript mająca na celu uproszczenie procesu front-end-pojawiła się na scenie. Poprzez abstrakcję wielu funkcji, które zwykle pozostawiono programistom do samodzielnego rozwiązania, jQuery umożliwiło większe możliwości tworzenia animacji, dodawania wtyczek, a nawet po prostu poruszania się po dokumentach.
i jest to wyraźnie udane – jQuery była zdecydowanie najpopularniejszą biblioteką JavaScript istniejącą w 2015 roku, z instalacją na 65% z 10 milionów najpopularniejszych witryn w sieci.
4. GitHub
to najgorszy koszmar każdego dewelopera – pracujesz nad nową funkcją projektu i nawalisz. Wejdź w systemy kontroli wersji (VCS) – a dokładniej na GitHub.
rozwijając swój projekt z usługą, możesz zobaczyć wszelkie wprowadzone zmiany, a nawet wrócić do poprzedniego stanu (Robienie nieznośnych błędów to przeszłość). Usługa hostingu repozytorium oferuje również bogatą społeczność programistów open-source (dzięki czemu współpraca między zespołami jest tak łatwa jak pie), a także zapewnia kilka innych komponentów, takich jak śledzenie błędów, prośby o funkcje, zarządzanie zadaniami i wiki dla każdego projektu.
wielu pracodawców będzie szukać doskonałych umiejętności Git, więc teraz jest idealny czas, aby się zarejestrować – plus jest to świetny sposób, aby zaangażować się i uczyć się od najlepszych dzięki szerokiej gamie projektów open-source do pracy.
5. Twitter Bootstrap
masz dość pisania w tym samym stylu dla kontenera? Co powiesz na ten przycisk, który ciągle się pojawia? Gdy zaczniesz regularnie tworzyć aplikacje front-end, zaczniesz zauważać pojawiające się te same wzorce.
frameworki UI są próbą rozwiązania tych problemów poprzez abstrakcję wspólnych elementów w Moduły wielokrotnego użytku – co oznacza, że programiści mogą szybko i łatwo tworzyć elementy nowych aplikacji.
najczęściej używanym z tych frameworków jest Bootstrap, kompleksowy pakiet interfejsu użytkownika opracowany przez zespół na Twitterze. Wraz z narzędziami do normalizacji arkuszy stylów, budowania obiektów modalnych, dodawania wtyczek JavaScript i mnóstwem innych funkcji, Bootstrap może radykalnie zmniejszyć ilość kodu (i czasu) potrzebnego do zbudowania projektu.
6. Kanciasty.JS
HTML jest zwykle kamieniem węgielnym zestawu narzędzi programisty frontend, ale ma to, co wielu uważa za poważną wadę: nie został zaprojektowany do zarządzania dynamicznymi widokami.
tutaj pojawia się AngularJS, otwarty framework aplikacji internetowych. Opracowany przez Google, AngularJS pozwala rozszerzyć składnię HTML aplikacji, co skutkuje bardziej wyrazistym, czytelnym i szybkim w rozwijaniu środowiskiem, które w przeciwnym razie nie mogłoby zostać zbudowane za pomocą samego HTML.
projekt nie jest pozbawiony swoich krytyków: niektórzy uważają, że tego rodzaju powiązanie danych powoduje bałagan, nierozdzielony kod, ale nadal uważamy, że jest to nieoceniona umiejętność, którą należy mieć w zestawie front-end.
7. Sass
narzędzia programistyczne, które oszczędzają czas, są twoim najlepszym przyjacielem i jedną z pierwszych rzeczy, których dowiesz się o kodzie, jest to, że musi być suchy („nie powtarzaj się”). Drugą rzeczą, której prawdopodobnie się nauczysz, jest to, że CSS zwykle nie jest zbyt suchy.
wejdź do świata preprocesora CSS, narzędzia, które pomoże Ci napisać łatwy do utrzymania, przyszłościowy kod, a jednocześnie zmniejszy ilość CSS, którą musisz napisać (utrzymując go na sucho).
chyba najbardziej popularny wśród nich jest Sass, ośmioletni projekt open-source, który w dużej mierze zdefiniował gatunek nowoczesnych preprocesorów CSS. Chociaż początkowo jest to trochę trudne do opanowania, kombinacja zmiennych, zagnieżdżania i mixinów Sass sprawi, że po skompilowaniu Twoje arkusze stylów będą bardziej czytelne i (co najważniejsze) suche.
wnioski
Jeśli pomysł nauczenia się tych narzędzi frontend i wyruszenia w 7-miesięczną podróż, aby zostać programistą, podoba Ci się, naprawdę polecam zapoznanie się z nowym kursem tworzenia stron internetowych z Careerfoundry. Został zaprojektowany, aby nauczyć Cię podstawowych technologii frontend od podstaw, zanim przejdziesz do obdarowania cię bardzo poszukiwanymi umiejętnościami w tworzeniu JavaScript. Będziesz sparowany z dwoma doświadczonymi programistami do mentoringu online i korepetycji, a także masz gwarancję pracy: jeśli nie dostaniesz pracy jako programista stron internetowych w ciągu 6 miesięcy od ukończenia szkoły, otrzymasz zwrot pieniędzy. Skontaktuj się z doradcą zawodowym już dziś, aby dowiedzieć się więcej i dołącz do naszej pierwszej pełnej kohorty.