Jak projektanci powinni nauczyć się kodować? Edytory terminala i tekstu (część 1)

Jako projektant z wieloletnim doświadczeniem często zachęcam kolegów i reporterów do nabycia pewnych umiejętności kodowania. Podczas gdy wielu jest otwartych na ten pomysł, inni wzdragają się przed tym pomysłem. Zwykle słyszę jakąś odmianę „Nie studiowałem projektowania, aby zostać programistą”. Chociaż jest to zasadna obawa, chciałbym podkreślić dwie kwestie: lepsze zrozumienie materiałów zwykle prowadzi do lepszych wyników i istnieje ważne rozróżnienie między „kodowaniem” a „inżynierią oprogramowania”.

Ta dwuczęściowa seria artykułów powinna być przydatna dla wszystkich projektantów, którzy chcieliby zdobyć również umiejętności kodowania.

Zrozumienie surowców

Wbrew pozorom w projektowaniu nie chodzi o tworzenie pięknych makiet, ale o dostarczanie użytkownikowi końcowemu intuicyjnego, funkcjonalnego doświadczenia. Tego po prostu nie da się zrobić bez zrozumienia elementów składowych rozwiązania. Architekt nie będzie zbyt dobry w swojej pracy, jeśli nie zrozumie materiałów, jakich wymagają jej plany, a projektant nie będzie zbyt dobry, jeśli nie zrozumie materiałów, dzięki którym jego projekty ożywają - kod. Doświadczenie z kodowaniem pomaga projektantom zrozumieć, co jest możliwe, a co nie, oraz czy ich projekty będą w stanie skutecznie pełnić pożądane funkcje.

Zapewniam też kolegów, że znajomość kodowania nie oznacza, że ​​trzeba zostać inżynierem. Oba odnoszą się do różnych, choć powiązanych zestawów umiejętności. Jak niedawno napisał Kyle Thayer, doktorant na Uniwersytecie Waszyngtońskim, dziedzina informatyki (lub inżynierii) polega na dawaniu studentom „przeglądu naukowej dziedziny informatyki”:

„Celem dyplomu z informatyki jest przedstawienie studentom przeglądu naukowej dziedziny informatyki. Chociaż obejmuje to pewne programowanie, programowanie jest wykonywane głównie w celu poznania innych obszarów (np. systemów operacyjnych, algorytmów, uczenia maszynowego, interakcji człowiek-komputer). Stopień CS to dobry pierwszy krok na akademickim polu informatyki.”

— Kyle Thayer

Natomiast kodowanie oznacza po prostu zaznajomienie się z danym językiem programowania na tyle, aby wykonać zadanie. Poproszenie kogoś o nauczenie się podstawowego języka HTML lub JavaScript nie oznacza, że ​​musi zostać pełnoprawnym architektem oprogramowania. Wbrew temu, co niektórzy mogą pomyśleć, rozwidlenie repozytorium i kopiowanie/wklejanie odpowiedzi Stack Overflow nie czyni Cię inżynierem oprogramowania — ale może zwiększyć wartość, jaką wnosisz jako projektant do zespołu ds. rozwoju produktu.

A co z „niskim kodem”?

Niektórzy mogą powiedzieć, że wkraczamy w przyszłość o niskim kodzie, w której projektanci (i programiści) będą mogli tworzyć aplikacje za pomocą funkcji „przeciągnij i upuść” oraz GUI (graficznego interfejsu użytkownika). Zatem poświęcenie czasu na naukę języka programowania nie jest „tego warte”. Pojawienie się narzędzi takich jak Webflow, Modulz, FramerX, UXPin itp. wydaje się wspierać ten tok rozumowania. I to może być bardzo prawdziwe w przypadku wielu aplikacji — tworzenie witryny lub aplikacji bez jednego wiersza kodu jest łatwiejsze niż kiedykolwiek. Jeśli jednak nie rozumiesz podstawowych zasad, ograniczysz wartość, którą możesz dostarczyć za pomocą aplikacji o niskim kodzie.

Nie doszliśmy też jeszcze do punktu, w którym można tworzyć aplikacje na skalę korporacyjną z platformami o niskim kodzie. Jako projektanci musimy pracować w świecie, w którym żyjemy, a nie w tym, który sobie wyobrażamy, nadchodzi.

Biorąc to pod uwagę, każdy wnosi do stołu unikalną mieszankę umiejętności. Znajomość kodu nie jest absolutną koniecznością i powinna być po prostu zachęcana, a nie wymagana.

Gdzie zacząć?

Istnieje nieskończona ilość narzędzi, języków, szkół, przewodników i innych zasobów dostępnych dla każdego, kto ma dostęp do Internetu — więc od czego zacząć? Ważne zastrzeżenie — w żadnym wypadku nie jestem ekspertem ani kimś bliskim inżyniera oprogramowania — a poniższe są spostrzeżeniami z mojego osobistego doświadczenia, a nie gwarantowaną ścieżką do sukcesu.

Wielu projektantów/programistów, których znam, zwykle zaczyna hakować szablony HTML i CSS na stronach takich jak MySpace, Geocities, Tumblr, Neopets i innych. Teraz, gdy sam mam wystarczająco dużo czasu, każdemu, kto zaczyna dzisiaj, polecam zacząć od przyjaznej powłoki interfejsu wiersza poleceń (CLI).

Terminal: niezbędne narzędzie

Aplikacja dla reżyserów z Hollywood, gdy na ekranie pojawi się haker komputerowy, terminal jest po prostu interfejsem, który umożliwia wykonywanie działań za pomocą wprowadzania tekstu, a nie graficznego interfejsu użytkownika (GUI), do którego większość ludzi jest przyzwyczajona. Pozwolę prawdziwym programistom wyjaśnić zawiłości i instrukcje techniczne, ale dla naszych celów wystarczy wiedzieć, że zapoznanie się z CLI jest korzystne z wielu powodów.

Terminal zapewnia dostęp do struktury plików i folderów komputera — w ten sam sposób, w jaki klikasz w Finderze lub Eksploratorze, nawigujesz za pomocą klawiatury w terminalu. Przyzwyczajenie się do tego zdecydowanie zajmuje trochę czasu, ale rozwijanie swojego modelu mentalnego w tym obszarze jest podstawą pracy w kodzie.

Podobnie jak wielu projektantów, używam środowiska macOS (wcześniej znanego jako OS X), ale poniższe informacje dotyczą innych systemów operacyjnych *nix (Linux, Unix), a także Windows PowerShell. Chociaż różne nowoczesne systemy operacyjne w dużym stopniu nakładają się na siebie, istnieją pewne różnice, które postaram się podkreślić.

Wyrażenia regularne

Kluczową cechą CLI jest możliwość używania wyrażeń regularnych (regex) w poleceniach. Pomyśl o wyrażeniach regularnych jako operacjach wyszukiwania wartości logicznych (używając cudzysłowów do wyszukiwania dokładnych fraz lub znaku minusa, aby wykluczyć słowa) na sterydach — umożliwiają one zdefiniowanie wzorca w ciągu tekstu, dzięki czemu można wykonać pewne działania na danych wyjściowych. Oto kilka przykładów z życia wziętych:

1. Jeśli masz długą listę numerów telefonów w różnych formatach, możesz zdefiniować skrypt, który da ci spójne dane wyjściowe na podstawie wyrażenia regularnego — np.: (###) ###-#### dla Format numerów telefonów w USA.
2. Jeśli chcesz szybko zmienić nazwę grupy plików na konkretną sprawę — z kebab-case na CamelCase lub cokolwiek pomiędzy.

Oto kilka podstawowych poleceń terminala ^* , które pomogą Ci rozpocząć:

1. cd oznacza "Zmień katalog", wpisz to, a następnie ścieżkę do pliku lub folderu do przejścia - pamiętaj, że możesz wpisać nazwę folderu, ale musi on znajdować się w bieżącym folderze, aby do niego przejść.
2. ls wyświetla listę plików i folderów w bieżącym folderze.
3. pwd oznacza „Drukuj katalog roboczy” — wyświetli listę, w której aktualnie znajdujesz się na swoim komputerze.
4. mkdir i nazwa folderu stworzą folder w twoim katalogu roboczym.
5. użycie cd z .. przenosi Cię o jeden poziom wyżej — jeśli jesteś w /users/username/documents/2019 i wpiszesz cd ../.. skończysz w /users/username .
6. Dodatkowa wskazówka — naciśnięcie klawisza Tab spowoduje automatyczne uzupełnianie podczas wpisywania ścieżki folderu/pliku.

Uwaga : Poniższe polecenia będą działać w wierszu poleceń systemu Windows ( cmd ):

• cd , cd .. , mkdir , klawisz Tab do autouzupełniania ścieżki ( ls i pwd nie będą działać ) .

Bardziej nowoczesny wiersz poleceń systemu Windows (Windows PowerShell) obsługuje je wszystkie:

• cd , cd .. , ls , pwd , mkdir i Tab dla autouzupełniania ścieżki.

Pełną listę poleceń dostępnych w PowerShell można znaleźć na tej stronie pomocy Microsoft „Korzystanie ze znanych nazw poleceń”.

Zarządzanie plikami masowymi

Możesz masowo manipulować plikami i folderami za pomocą terminala — oto kilka pomysłów:

1. Możesz utworzyć foldery z trzech lat z podfolderami na każdy miesiąc za pomocą jednego polecenia — użycie mkdir -p i {list-of-years}/{list-of-months} spowoduje utworzenie folderów na każdy rok z podfolderami na każdy miesiąc. Użyj swojej wyobraźni, jestem pewien, że możesz to dobrze wykorzystać!
2. Możesz szybko posprzątać swój pulpit, używając mv Screen\ Shot* Screenshots — spowoduje to przeniesienie wszystkich plików, które zaczynają się od „Zrzutu ekranu” do folderu o nazwie „Zrzuty ekranu”.

Skrypty i konserwacja

Teraz, gdy mamy wgląd w potęgę wyrażeń regularnych i opcje dostępne w terminalu, możemy zacząć łączyć te rzeczy w skrypty . Jednym bardzo prostym, ale potężnym i powszechnie używanym skryptem jest zmiana nazwy plików Mike'a G:

 criteria=$1 re_match=$2 replace=$3 for i in $( ls *$criteria* ); do src=$i tgt=$(echo $i | sed -e "s/$re_match/$replace/") mv $src $tgt done

To, co pozwala ci ten skrypt, to zdefiniowanie zakresu ( criteria ), określenie, co chcesz zmienić ( re_match ) i co chcesz zmienić na ( replace ) — a następnie wykonać.

Istnieje niezliczona ilość innych skryptów, które można tworzyć poza tworzeniem i zmienianiem nazw plików — skrypt Vlad's Batch Resizing jest doskonałym przykładem możliwości oszczędzania czasu, które można utworzyć za pomocą skryptów bash.

Zaawansowane porady i wskazówki

Coś, co odkryłem przez lata, to to, że regularne resetowanie komputera i ponowna instalacja systemu operacyjnego pomaga zachować względnie porządek i zapobiega spowolnieniom, jakich doświadczają wszyscy po latach cyfrowego detrytu gromadzącego się na dyskach twardych. Dla wielu perspektywa wyczyszczenia komputera i przywrócenia wszystkiego z powrotem brzmi w najlepszym razie jak kilka dni pracy, a w najgorszym niemożliwy koszmar, z którego możesz nigdy nie wyzdrowieć.

Ale nie musi tak być — korzystając z kilku narzędzi wiersza poleceń, po utworzeniu kopii zapasowej, wyczyszczeniu i ponownej instalacji systemu operacyjnego możesz zainstalować nie tylko listę ulubionych aplikacji, ale także czcionki. minut przy użyciu Homebrew. (Homebrew jest przeznaczony tylko dla komputerów Mac i Linux. W systemie Windows wypróbuj Chocolatey, który jest solidną alternatywą.)

Jeśli jesteś zainteresowany — stworzyliśmy łatwy w obsłudze przewodnik konfiguracji, który pomoże Ci przygotować komputer do większości prac rozwojowych. Nasz przewodnik dotyczy systemu macOS, ale Owen Williams napisał również solidny przewodnik dla systemu Windows.

Jeśli nie masz czasu na całą serię samouczków Wesa na temat wiersza poleceń — przynajmniej bardzo polecam następujący stos:

1. O mój ZSH
2. zsh-autosugestie
3. zsh-podświetlanie-składni
4. Z-skok-around

Wybór edytora tekstu

Istnieje wiele opcji wyboru edytora kodu — Sublime Text i VS Code (Visual Studio Code) to dwie, z którymi mam największe doświadczenie i których obecnie używam.

Sublime Text był jednym z wcześniejszych edytorów tekstu, który stał się popularny wśród programistów front-end — był to złoty standard jeszcze kilka lat temu. Funkcje takie jak wiele kursorów, potężny menedżer pakietów i wysoce konfigurowalne skróty, które pozwalają szybko nawigować między plikami i folderami. Nie wspominając o niewiarygodnie lekkiej i szybkiej aplikacji, co sprawiło, że był to łatwy wybór.

VS Code (Visual Studio Code) pojawił się na scenie około 2015 roku, przejście z Atom i Sublime zajęło ludziom trochę czasu, ale VS Code stał się ulubionym edytorem wielu programistów. Oprócz prawie wszystkich funkcji Sublime, VS Code wyróżniał się wbudowanym terminalem i ścisłą integracją z Git. Ponadto Visual Studio Code ma bogaty ekosystem wtyczek, który pozwala rozszerzać i dostosowywać środowisko zgodnie z upodobaniem.

To wszystko znaczy — nie musisz być programistą, aby docenić funkcje dobrego edytora kodu. Znalazłem dla niego wiele zastosowań w mojej codziennej pracy; dwa, w szczególności, to możliwość używania wielu kursorów i używania wyrażenia regularnego do wyszukiwania i zastępowania tekstu w folderach plików. Przyjrzyjmy się bliżej obu.

Edycja z wieloma kursorami

Wyobraź sobie swój typowy edytor tekstu — tę migającą pionową linię, która pokazuje, gdzie trafi wprowadzany tekst? Teraz wyobraź sobie możliwość dodania więcej niż jednego kursora do tego okna, aby wszystko, co wpiszesz, pojawiło się wszędzie tam, gdzie znajduje się kursor!

To może jeszcze nie być zaskakujące — oto przykład, który pokazuje kilka sposobów, w jakie zaawansowany edytor tekstu może pomóc w tworzeniu codziennych usprawnień w przepływie pracy.

Tutaj mamy listę nazw, które musimy przekonwertować na adresy e-mail — chcielibyśmy również, aby wszystkie były pisane małymi literami, a następnie posortowane alfabetycznie. Można to zrobić za pomocą kilku naciśnięć klawiszy.

Po wklejeniu listy, Cmd + Shift + P wyświetla Paletę poleceń (wymyślny termin oznaczający przeszukiwalne menu, które zawiera wszystkie dostępne funkcje). Możesz w zasadzie wpisać w tym menu to, co chcesz zrobić, prawie wszystko, co możesz zrobić z tekstem, jest tutaj dostępne. Jeśli tak nie jest, prawdopodobnie istnieje wtyczka lub rozszerzenie, które możesz znaleźć.

Jesteśmy w stanie zmienić wielkość liter i posortować wiersze w ciągu kilku sekund — następnie naciśnięcie Ctrl + Shift + klawisze strzałek dodaje kursory, a cokolwiek wpisujemy, jest dodawane do każdego wiersza — w tym przypadku zmieniamy nazwy na adresy e-mail, ale twoja dzika wyobraźnia może znaleźć mnóstwo innych sposobów na wykorzystanie tego.

Możesz powiedzieć — cóż, mogę to zrobić w Excelu lub Arkuszach Google, co jest prawdą, ale odkryłem, że znacznie szybciej jest obsługiwać tego typu rzeczy w edytorze tekstu. Unikasz pisania formuł i wybierania rzeczy za pomocą myszy.

Którego edytora kodu powinienem użyć?

Jestem projektantem — więc oczywiście moja odpowiedź brzmi „to zależy”.

• Jeśli jesteś nowy w tych koncepcjach, polecam skorzystanie z bezpłatnej wersji próbnej Sublime — nadal jest to bardzo lekka aplikacja i nie zużywa zbyt wielu zasobów systemowych. Możesz dostosować powiązania klawiszy Sublime (fantazyjne słowo dla skrótów klawiszowych) i rozszerzyć jego wbudowaną funkcjonalność za pomocą wtyczek.
• Jeśli korzystasz z Sublime, Atom lub innego edytora — polecam również sprawdzić VS Code. Zespół firmy Microsoft naprawdę wykonał świetną robotę, czyniąc z niego potężny, a jednocześnie łatwy w użyciu edytor tekstu.

Osobiście korzystam z obu edytorów — Sublime działa błyskawicznie i otwiera się w ułamku sekundy, co pozwala na łatwe wklejanie i manipulowanie tekstem. Ale kiedy chcę wykonać poważniejszą pracę, używam VS Code. Trudno jest przebić pakiet „wszystko w jednym”, który zapewnia VS Code — żywy ekosystem wtyczek i rozszerzeń, potężna paleta poleceń i interfejs z możliwością hiperkonfiguracji oznaczają, że możesz naprawdę dostosować go do swoich potrzeb. Nie wspominając już o tym, że Microsoft jest bardzo zmotywowany, aby zapewnić, że jest to najwyższej klasy doświadczenie dla produktywności programistów.

Wniosek i co dalej?

W tym pierwszym artykule poznasz podstawy terminala, kilka hacków zwiększających produktywność na początek i powinieneś mieć lepsze pojęcie o tym, jaki edytor kodu wybrać. W następnej części będziemy kontynuować tematykę kontroli wersji, HTML i CSS oraz wprowadzenie do zasad inżynierii.

Coś nie w porządku?

Istnieje duża szansa, że ​​coś w tym poście było niejasne, tępe i/lub przestarzałe, i chciałbym mieć okazję, aby to ulepszyć! Proszę zostaw komentarz poniżej, napisz do mnie lub @wzmianka o mnie na Twitterze, abym mógł się poprawić.