Jak projektanci powinni nauczyć się kodować? Git, HTML/CSS, zasady inżynierii (część 2)

Dosłownie, tomy zostały napisane na temat kontroli wersji. Niemniej jednak zacznę od krótkiego wyjaśnienia i innych treści wprowadzających, aby pobudzić Twój apetyt na dalsze studia.

Kontrola wersji (nie mylić z historią wersji ) jest w zasadzie sposobem na współpracę ludzi we własnych środowiskach nad pojedynczym projektem, z jednym głównym źródłem prawdy (często nazywanym gałęzią „master”).

Przejdę dzisiaj to absolutne minimum, które musisz znać, aby pobrać projekt, wprowadzić zmiany, a następnie wysłać go do mastera.

Istnieje wiele rodzajów oprogramowania do kontroli wersji i wiele narzędzi do zarządzania i hostowania kodu źródłowego (być może słyszałeś o GitLab lub Bitbucket). Git i GitHub to jedna z bardziej powszechnych par, moje przykłady będą odwoływać się do GitHub, ale zasady będą miały zastosowanie do większości innych menedżerów kodu źródłowego.

Na bok :

• Aby uzyskać bardziej wyczerpujące i techniczne wprowadzenie, zobacz artykuł Tobiasa Gunthera.
• Jeśli wolisz bardziej praktyczne podejście, GitHub ma doskonały przewodnik krok po kroku.

Twój pierwszy wkład

Zanim wykonasz te czynności, musisz skonfigurować kilka rzeczy:

1. Konto GitHub,
2. Node i NPM zainstalowane na Twoim komputerze,
3. Wysoka tolerancja na ból lub niski próg proszenia innych o pomoc.

Krok 1: Widelec (uzyskaj kopię kodu na swoim koncie GitHub)

W serwisie GitHub dokonasz rozwidlenia (fork = utwórz kopię kodu na swoim koncie; na poniższej ilustracji niebieskie, pomarańczowe, czerwone i zielone linie pokazują rozwidlenie) danego repozytorium (repo).

Robisz to, przechodząc do repozytorium w GitHub i klikając przycisk "Rozwidlaj", obecnie w prawym górnym rogu repozytorium. To będzie „początek” — twój widelec na koncie GitHub.

Na przykład przejście do https://github.com/yourGitHubUsername/liferay.design powinno pokazać rozwidlenie repozytorium Liferay.Design.

Krok 2: Klonuj (pobierz kod na swój komputer)

W terminalu przejdź do miejsca, w którym chcesz zapisać kod. Osobiście mam folder /github w moim folderze /user — ułatwia mi to zorganizowanie go w ten sposób. Jeśli chcesz to zrobić, oto kroki — po wpisaniu tych poleceń w oknie terminala naciśnij klawisz ↵ , aby wykonać:

 cd ~/ ## you'll usually start in your root directory, but just in case you don't this will take you there mkdir github ## this creates a "github" folder — on OSX it will now be located at users/your-username/github cd github ## this command navigates you inside the github folder

Teraz, gdy jesteś w folderze /github , sklonujesz (pobierz kopię kodu na swój komputer) repozytorium.

 clone https://github.com/yourGitHubUsername/liferay.design

Po wprowadzeniu tego polecenia zobaczysz w terminalu aktywność — coś takiego:

 Cloning into 'liferay.design'... remote: Enumerating objects: 380, done. remote: Total 380 (delta 0), reused 0 (delta 0), pack-reused 380 Receiving objects: 100% (380/380), 789.24 KiB | 2.78 MiB/s, done. Resolving deltas: 100% (189/189), done.

Krok 3: Zainstaluj (uruchom go na swoim komputerze)

Przejdź do folderu /project . W tym przypadku wprowadzimy cd liferay.design . Większość projektów zawiera plik README.md w folderze /root , który jest zazwyczaj miejscem początkowym instalacji i uruchamiania projektu. Dla naszych celów, aby zainstalować, wpisz npm install . Po zainstalowaniu wpisz npm run dev .

Gratulacje! Masz teraz witrynę dostępną na komputerze lokalnym — zazwyczaj projekty informują Cię, gdzie jest uruchomiona. W takim przypadku otwórz przeglądarkę i przejdź do localhost:7777 .

Krok 4: Zatwierdź (wprowadź pewne zmiany i zapisz je)

Zatwierdzenie to zbiór zmian, które wprowadzasz; Słyszałem, że opisano to jako zapisywanie twoich postępów w grze. Istnieje wiele opinii na temat struktury zatwierdzeń: moja jest taka, że ​​powinieneś utworzyć zatwierdzenie, gdy osiągniesz jedną rzecz, a jeśli usuniesz zatwierdzenie, nie spowoduje to całkowitego zerwania projektu (w granicach rozsądku).

Jeśli nie przychodzisz do repozytorium z myślą o zmianie, dobrym miejscem do odwiedzenia jest zakładka „Problemy”. Tutaj możesz zobaczyć, co należy zrobić w projekcie.

Jeśli masz pomysł na jakąś zmianę, śmiało go zrealizuj. Po zapisaniu plików, oto kroki wymagane do utworzenia zatwierdzenia:

 git status ## this will print out a list of files that you've made changes in git add path/to/folder/or/file.ext ## this will add the file or folder to the commit git commit -m 'Summarize the changes you've made' ## this command creates a commit and a commit message

Wskazówka : Najlepsza rekomendacja, jaką kiedykolwiek widziałem dla wiadomości o zatwierdzeniu, pochodzi z „Jak napisać wiadomość o zatwierdzeniu Git” autorstwa Chrisa Breamsa. Prawidłowo sformułowany wiersz tematu zatwierdzenia Git powinien zawsze zawierać następujące zdanie: „Jeśli zostanie zastosowany, to zatwierdzenie będzie [tutaj wiersz tematu]”. Aby uzyskać więcej informacji na temat zatwierdzeń, sprawdź „Why I Create Atomic Commits In Git” autorstwa Clarice Bouwer.

Krok 5: Push (Wyślij swoje zmiany do swojego Origin)

Po dokonaniu zmian na komputerze, zanim zostaną one połączone z gałęzią master (dodane do projektu), muszą zostać przeniesione z lokalnego do zdalnego repozytorium. Aby to zrobić, wpisz git push origin w wierszu poleceń.

Krok 6: Pull Request (poproś, aby Twoje zmiany zostały scalone z Upstream)

Teraz, gdy Twoje zmiany przeszły z Twoich palców do komputera, do zdalnego repozytorium — nadszedł czas, aby poprosić o ich połączenie z projektem za pomocą żądania ściągnięcia (PR).

Najłatwiej to zrobić, przechodząc do strony swojego repozytorium w serwisie GitHub. Tuż nad oknem pliku pojawi się mały komunikat, który mówi „Ta gałąź to X zatwierdzeń z wyprzedzeniem nazwa-repo: gałąź”, a następnie opcje „Wyciągnij żądanie” lub „Porównaj”.

Kliknięcie opcji „Żądanie ściągnięcia” przeniesie Cię na stronę, na której możesz porównać zmiany, a przycisk „Utwórz żądanie ściągnięcia” przeniesie Cię na stronę „Otwórz żądanie ściągnięcia”, na której możesz dodać tytuł i dołącz komentarz. Zwięzły, ale wystarczająco szczegółowy komentarz pomoże opiekunom projektu zrozumieć proponowane zmiany.

Istnieją narzędzia CLI, takie jak Node GH (GitHub niedawno wydał również wersję beta swojego narzędzia CLI), które umożliwiają inicjowanie i zarządzanie żądaniami ściągnięcia w terminalu. W tym momencie możesz chcieć skorzystać z interfejsu internetowego i to świetnie! Ja też.

Dodatkowy krok: zdalny (połącz wszystkie repozytoria)

W tym momencie mamy trzy referencje do repozytorium:

1. upstream : główne repozytorium, które śledzisz, często jest to repozytorium, które rozwidlałeś;
2. origin : domyślna nazwa sklonowanego pilota;
3. local : kod, który jest aktualnie na twoim komputerze.

Jak dotąd masz #2 i #3 — ale #1 jest ważny, ponieważ jest głównym źródłem. Utrzymanie tych trzech rzeczy w jednej linii pomoże zachować czystość historii commitów. Pomaga to opiekunom projektów, ponieważ eliminuje (lub przynajmniej minimalizuje) konflikty scalania podczas wysyłania żądań ściągnięcia (PR) i pomaga uzyskać najnowszy kod oraz aktualizować lokalne i źródłowe repozytoria.

Ustaw pilota zdalnego sterowania

Aby śledzić pilota upstream, w terminalu wprowadź następujące dane:

 git remote add upstream https://github.com/liferay-design/liferay.design

Teraz sprawdź, jakie masz dostępne piloty — wpisz git remote -v w swoim terminalu, powinieneś zobaczyć coś takiego:

 origin https://github.com/yourGitHubUsername/liferay.design (fetch) origin https://github.com/yourGitHubUsername/liferay.design (push) upstream https://github.com/liferay-design/liferay.design (fetch) upstream https://github.com/liferay-design/liferay.design (push)

Umożliwi to szybkie uzyskanie najnowszej wersji tego, co jest nadrzędne — jeśli nie pracowałeś w repozytorium od dłuższego czasu i nie masz żadnych lokalnych zmian, które chcesz zachować, jest to przydatne polecenie, którego używam :

 git pull upstream master && git reset --hard upstream/master

Pomoc GitHub to świetne źródło odpowiedzi na to i wiele innych pytań, które możesz mieć.

HTML i CSS: zaczynając od semantyki

W sieci istnieje nieskończona ilość zasobów do nauki HTML i CSS. Na potrzeby tego artykułu dzielę się tym, co polecam na podstawie błędy, które popełniłem jak po raz pierwszy nauczyłem się pisać HTML i CSS.

Czym są HTML i CSS?

Zanim przejdziemy dalej, zdefiniujmy HTML i CSS.

HTML oznacza HyperText Markup Language.

Hipertekst:

„Hipertekst to tekst wyświetlany na ekranie komputera lub innych urządzeniach elektronicznych z odniesieniami (hiperłączami) do innego tekstu, do którego czytelnik może natychmiast uzyskać dostęp”.

— „Hipertekst” na Wikipedii

Język znaczników:

„…system dodawania adnotacji do dokumentu w sposób syntaktycznie odróżniający się od tekstu”.

— „Język znaczników” na Wikipedii

Jeśli nie wiesz również, co oznacza wiele z tych słów — krótko mówiąc, HTML jest kombinacją odniesień (łączy) między dokumentami w sieci i znacznikami , których używasz do nadania tym dokumentom struktury.

Aby uzyskać dokładne wprowadzenie do HTML i CSS, gorąco polecam wprowadzenie do HTML i CSS pierwsze kroki, zarówno w dokumentacji internetowej Mozilla Developer Network (MDN) . To, wraz z doskonałymi artykułami, które dostarczają strony internetowe, takie jak CSS Tricks, 24 Ways i niezliczone inne, zawiera w zasadzie wszystko, do czego kiedykolwiek będziesz potrzebować w odniesieniu do HTML/CSS.

Istnieją dwie główne części dokumentu HTML : <head> i <body> . - <head> zawiera elementy, które nie są wyświetlane przez przeglądarkę — metadane i linki do zaimportowanych arkuszy stylów i skryptów. - <body> zawiera rzeczywistą zawartość, która będzie renderowana przez przeglądarkę. W celu renderowania treści przeglądarka odczytuje kod HTML, udostępnia podstawową warstwę stylów w zależności od typów użytych tagów, dodaje dodatkowe warstwy stylów udostępnianych przez samą witrynę (style są zawarte w/odwołania się z elementu <head> lub są wbudowane) i to właśnie widzimy na końcu. (Uwaga: często istnieje również dodatkowa warstwa JavaScript, ale jest to poza zakresem tego artykułu.)

CSS oznacza kaskadowe arkusze stylów — służy do rozszerzenia kodu HTML, ułatwiając nadawanie dokumentom niestandardowego wyglądu i stylu. Arkusz stylów to dokument, który mówi HTML, jak powinny wyglądać elementy (i jak powinny być umieszczone) poprzez ustawienie reguł opartych na znacznikach, klasach, identyfikatorach i innych selektorach. Kaskadowanie odnosi się do metody określania, które reguły w arkuszu mają pierwszeństwo w nieuniknionym przypadku konfliktu reguł.

„„Kaskadowe” oznacza, że ​​style mogą przechodzić (lub kaskadowo) z jednego arkusza stylów do drugiego, umożliwiając używanie wielu arkuszy stylów w jednym dokumencie HTML”.

— Kaskada — Max Design

CSS często ma złą reputację — w witrynach z dużą ilością arkuszy stylów może szybko stać się nieporęczny, zwłaszcza jeśli nie ma udokumentowanych, spójnych metod (więcej o tym później) — ale jeśli używasz go w zorganizowany sposób i przestrzegasz wszystkich najlepsze praktyki, CSS może być Twoim najlepszym przyjacielem. Zwłaszcza dzięki możliwościom układu, które są teraz dostępne w większości nowoczesnych przeglądarek, CSS nie jest tak potrzebny do hakowania i walki, jak kiedyś.

Rachel Andrew napisała świetny przewodnik Jak nauczyć się CSS — i jedną z najlepszych rzeczy, które warto wiedzieć przed rozpoczęciem, jest to, że:

„Nie musisz angażować się w zapamiętywanie każdej właściwości i wartości CSS”.

— Rachel Andrew

Zamiast tego o wiele ważniejsze jest poznanie podstaw — selektorów, dziedziczenia, modelu pudełkowego i, co najważniejsze, sposobu debugowania kodu CSS (wskazówka: będziesz potrzebować narzędzi programistycznych przeglądarki).

Nie przejmuj się zapamiętywaniem składni właściwości background i nie martw się, jeśli zapomnisz o tym, jak dokładnie wyrównać elementy w Flexbox (CSS Tricks Guide to Flexbox jest prawdopodobnie jedną z moich 10 najczęściej odwiedzanych stron w historii! ); Google i Stack Overflow to Twoi przyjaciele, jeśli chodzi o właściwości i wartości CSS.

Niektóre edytory kodu mają nawet wbudowane autouzupełnianie, więc nie musisz nawet wyszukiwać w Internecie, aby na przykład znaleźć wszystkie możliwe właściwości obramowania.

Jedną z moich ulubionych nowych funkcji w Firefoksie 70 jest wskaźnik nieaktywnych reguł CSS. Zaoszczędzi Ci to godzin na zastanawianiu się, dlaczego styl nie jest stosowany.

Semantyka

Zacznijmy od kodu semantycznego . Semantyka odnosi się do znaczeń słów, kod semantyczny odnosi się do idei, że w danym języku istnieje znaczenie znaczników.

Istnieje wiele powodów, dla których semantyka jest ważna. Gdybym mógł to podsumować, powiedziałbym, że jeśli nauczysz się i użyjesz kodu semantycznego, znacznie ułatwi ci to życie, ponieważ dostaniesz wiele rzeczy za darmo — a kto nie lubi darmowych rzeczy?

Aby uzyskać pełniejsze wprowadzenie do kodu semantycznego, zobacz krótki wpis na blogu Paula Boaga na ten temat.

Semantyka daje wiele korzyści:

1. Style domyślne
   Na przykład użycie tagu nagłówka <h1> w tytule dokumentu sprawi, że będzie on wyróżniał się spośród reszty treści, podobnie jak nagłówek.
2. Dostępna treść
   Twój kod będzie domyślnie dostępny, co oznacza, że ​​będzie działał z czytnikami ekranu i będzie łatwiejszy w nawigacji za pomocą klawiatury.
3. Korzyści SEO
   Znaczniki semantyczne są łatwiejsze do odczytania przez maszynę, co czyni je bardziej dostępnymi dla wyszukiwarek.
4. Korzyści z wydajności
   Czysty HTML to podstawa witryny o wysokiej wydajności. A czysty HTML prawdopodobnie doprowadzi również do czystszego CSS, co oznacza mniej kodu, co przyspiesza Twoją witrynę lub aplikację.

Uwaga: Aby dokładniej przyjrzeć się semantyce i HTML, Heydon Pickering napisał „Semantyka strukturalna: znaczenie elementów podziału HTML5”, którą gorąco polecam.

Inżynierskie zasady i paradygmaty: podstawy

Abstrakcja

Istnieje mnóstwo zastosowań, stycznych i poziomów, które moglibyśmy zbadać nad pojęciem abstrakcji — zbyt wiele dla tego artykułu, który ma na celu dać krótkie wprowadzenie do pojęć, abyś był ich świadomy podczas dalszej nauki.

Abstrakcja jest podstawowym paradygmatem inżynieryjnym o wielu różnych zastosowaniach — na potrzeby tego artykułu abstrakcja to oddzielenie formy od funkcji. Zastosujemy to w trzech obszarach: tokeny, komponenty i zasada Don't Repeat Yourself.

Tokeny

Jeśli przez dłuższy czas korzystałeś z nowoczesnego narzędzia do projektowania, prawdopodobnie spotkałeś się z pomysłem tokena . Nawet Photoshop i Illustrator mają teraz pomysł na wspólne style w scentralizowanej bibliotece — zamiast na stałe kodować wartości w projekcie, używasz tokena. Jeśli znasz koncepcję zmiennych CSS lub SASS, znasz już tokeny.

Jedną z warstw abstrakcji z tokenami jest przypisanie nazwy do koloru — na przykład $blue-00 może być zmapowane na wartość szesnastkową (lub wartość HSL lub cokolwiek chcesz) — powiedzmy #0B5FFF . Teraz, zamiast używać wartości szesnastkowej w swoich arkuszach stylów, użyj wartości tokena — w ten sposób, jeśli zdecydujesz, że blue-00 to faktycznie #0B36CE , musisz to zmienić tylko w jednym miejscu. To fajna koncepcja.

Jeśli weźmiesz ten sam paradygmat abstrakcji i pójdziesz o krok dalej, możesz przyjąć token – i przypisać zmienną do wartości funkcjonalnej. Jest to szczególnie przydatne, jeśli masz solidny system i chcesz mieć różne motywy w systemie. Funkcjonalnym przykładem tego byłoby przypisanie zmiennej, takiej jak $primary-color i mapowanie, że do $blue-00 — więc teraz możesz utworzyć znacznik i zamiast odwoływać się do niebieskiego, odwołujesz się do zmiennej funkcjonalnej. Jeśli kiedykolwiek będziesz chciał użyć tego samego znacznika, ale z innym stylem (motywem), wystarczy zmapować $primary-color na nowy kolor, a znaczniki wcale nie muszą się zmieniać! Magia!

składniki

W ciągu ostatnich 3-4 lat idea komponentów i komponentów stała się bardziej adekwatna i dostępna dla projektantów. Koncepcja symboli (zainicjowana przez Macromedia/Adobe Fireworks, później rozszerzona przez Sketch, a następnie przeniesiona na wyższy poziom przez Figmę i Framera) jest teraz szerzej dostępna w większości narzędzi do projektowania (Adobe XD, InVision Studio, Webflow i wielu innych). inni). Komponentyzacja, nawet bardziej niż tokeny, może oddzielić formę czegoś od funkcji — co pomaga poprawić zarówno formę, jak i funkcję.

Jednym z bardziej godnych uwagi wczesnych przykładów jest komponent obiektu medialnego Nicole Sullivan. Na pierwszy rzut oka możesz nie zdawać sobie sprawy, że cała strona składa się zasadniczo z jednego komponentu, renderowanego na różne sposoby. W ten sposób możemy ponownie wykorzystać ten sam znacznik (formularz), nieznacznie go modyfikując poprzez przekazanie opcji lub parametrów i stylów — i zlecić mu dostarczanie różnych wartości (funkcji).

Nie powtarzaj się

DRY (Don't Repeat Yourself) to jedna z moich ulubionych zasad — tworzenie rzeczy, które można wielokrotnie używać, jest jednym z małych zwycięstw, jakie możesz odnieść podczas kodowania.

Chociaż często nie możesz (i prawdopodobnie nie powinieneś) dążyć do stosowania zasady SUCHY w 100%, za każdym razem — warto mieć tego świadomość, aby podczas pracy móc rozważyć, w jaki sposób może sprawić, że wszystko, nad czym pracujesz, będzie bardziej nadające się do ponownego użytku.

Uwaga dotycząca zasady trzech: Następstwem zasady DRY jest zasada trzech — zasadniczo, gdy raz ponownie użyjesz (skopiuj/wklej) czegoś trzy razy, powinieneś przepisać to na komponent wielokrotnego użytku. Podobnie jak Kodeks Pirata, jest bardziej wskazówką niż twardą i szybką zasadą i może się różnić w zależności od komponentu i projektu.

CSS i metodologie stylizacji: Atomic vs. BEM

Istnieje wiele różnych sposobów organizowania i pisania kodu CSS — Atomic i BEM to tylko dwa z wielu, z którymi możesz się spotkać. Nie musisz „wybierać” ani jednego, ani dokładnie ich przestrzegać. Większość zespołów, z którymi pracowałem, ma zazwyczaj swoją unikalną mieszankę, opartą na projekcie lub technologii. Dobrze jest się z nimi zapoznać, aby z biegiem czasu nauczyć się, jakie podejście przyjąć w zależności od sytuacji.

Wszystkie te podejścia wykraczają poza „tylko” CSS i stylizację i często mogą wpływać na używane narzędzia, sposób organizowania plików i potencjalnie na znaczniki.

Atomowe CSS

Nie mylić z Atomic Web Design — atomowy (być może bardziej trafnie określany jako „funkcjonalny”) CSS, to metodologia, która zasadniczo faworyzuje używanie małych, jednofunkcyjnych klas do definiowania funkcji wizualnych. Kilka godnych uwagi bibliotek:

1. Atomowy CSS autorstwa Steve'a Carlsona;
2. Tachiony Adama Morse'a;
3. CSS Tailwind autorstwa Adama Wathana.

To, co podoba mi się w tej metodzie, to to, że pozwala ci szybko stylizować i motywować rzeczy — jedną z największych wad jest to, że twoje znaczniki mogą być dość zagracone, całkiem szybko.

Sprawdź artykuł Johna Polacka na temat sztuczek CSS, aby uzyskać pełne wprowadzenie do Atomic CSS.

BEM

Filozofia BEM jest świetnym prekursorem wielu nowoczesnych frameworków JavaScript, takich jak Angular, React i Vue.

„BEM (Block, Element, Modifier) ​​to oparte na komponentach podejście do tworzenia stron internetowych”.

— BEM: Szybki start

Zasadniczo wszystko, co można ponownie wykorzystać, jest blokiem. Bloki składają się z elementów, czegoś, czego nie można używać poza blokiem i potencjalnie z innych bloków. Modyfikatory to elementy, które opisują stan czegoś lub sposób, w jaki wygląda lub zachowuje się.

Osobiście podoba mi się teoria i filozofia BEM. To, co mi się nie podoba, to sposób nazywania rzeczy. Zbyt wiele podkreśleń, łączników i może wydawać się niepotrzebnie powtarzalne ( .menu , .menu__item , itp.).

Zalecana literatura : BEM For Beginners napisana przez Innę Belaya

Dziękuję, Dalej (.js)

Po wystarczającym opanowaniu tych tematów nie martw się, wciąż jest wiele do nauczenia się. Jakieś sugestie:

1. Programowanie funkcjonalne i obiektowe
   Poruszyliśmy to lekko, ale poza CSS jest wiele do nauczenia się.
2. Języki i frameworki wyższego poziomu
   Typescript, Ruby, React, Vue to kolejne rzeczy, z którymi zmierzysz się, gdy już dobrze opanujesz HTML i CSS.
3. Języki zapytań i korzystanie z danych
   Poznanie interfejsów API GraphQL, MySQL, REST przeniesie Twoje umiejętności kodowania na wyższy poziom.

Wniosek: Projektanci, którzy kodują != Inżynierowie oprogramowania

Mamy nadzieję, że ten artykuł pokazał ci, że nauka kodowania nie jest tak trudna, jak mogłeś wcześniej sądzić. Może to zająć dużo czasu, ale ilość zasobów dostępnych w Internecie jest zdumiewająca i nie zmniejszają się — wręcz przeciwnie!

Jedną istotną kwestią, którą chcę podkreślić, jest to, że „kodowanie” to nie to samo, co „inżynieria oprogramowania” — możliwość rozwidlenia repozytorium i skopiowania/wklejenia kodu ze Stack Overflow może dać ci długą drogę, a większość, jeśli nie wszyscy, inżynierowie oprogramowania, których znam, zrobili to — musicie wykorzystywać swoje nowo odkryte umiejętności z mądrością i pokorą. Jeśli chodzi o wszystko, do czego możesz teraz uzyskać dostęp z pewną sprawnością inżynierską, jest o wiele więcej rzeczy, o których nie wiesz. Chociaż możesz pomyśleć, że funkcja lub styl są łatwe do osiągnięcia, ponieważ — „Hej, mam to do pracy w devtools!” lub „Zrobiłem to w Codepen”. — istnieje wiele procesów inżynieryjnych, zależności i metod, o których prawdopodobnie nie wiesz, a których nie znasz.

To wszystko znaczy — nie zapominaj, że wciąż jesteśmy projektantami. Naszą podstawową funkcją jest dodawanie wartości biznesowej przez pryzmat zrozumienia problemów klientów lub użytkowników i ich syntezy z naszą wiedzą o wzorcach projektowych, metodach i procesach. Tak, bycie „projektantem, który pisze kod” może być bardzo przydatne i rozszerzy twoją zdolność dodawania tej wartości — ale nadal musimy pozwolić inżynierom podejmować decyzje inżynierskie.

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ć.

Dalsza lektura

1. Coding Bootcamps vs. stopnie informatyki: czego chcą pracodawcy i inne perspektywy (Kyle Thayer)
2. Jak zacząć używać Sketch And Framer X (Martina Perez, Smashing Magazine )
3. Wprowadzenie do poleceń systemu Linux (autor: Paul Tero, Smashing Magazine )
4. Zostań zaawansowanym użytkownikiem wiersza poleceń dzięki Oh My ZSH i Z (Wes Bos, Smashing Magazine )
5. Lista typowych poleceń cmd.exe i Unix, których można używać w programie PowerShell ( Microsoft Docs )
6. regular-expressions.info (autor Jana Goyvaertsa)
7. regexone.com (naucz się wyrażeń regularnych za pomocą prostych interaktywnych ćwiczeń)
8. Zmiana rozmiaru wsadowego za pomocą wiersza poleceń i ImageMagick (autor: Vlad Gerasimov, Smashing Magazine )
9. Skróty i wskazówki dotyczące poprawy produktywności dzięki wysublimowanemu tekstowi (autor: Jai Pandya, magazyn Smashing )
10. Kod programu Visual Studio może to zrobić? (autor Burke Holland, Smashing Magazine )
11. Dlaczego historia wersji nie jest kontrolą wersji (Josh Brewer)
12. Nowoczesna kontrola wersji za pomocą Gita (autor: Tobias Gunther, Smashing Magazine )
13. „Hello World” (przewodnik krok po kroku na GitHubie)
14. Jak zainstalować Node.js i NPM na komputerze Mac (Dave McFarland)
15. Jak zainstalować Node.js i NPM w systemie Windows (autor: Dejan Tucakov)
16. Dlaczego tworzę atomowe Commity w Git (przez Clarice Bouwer)
17. Jak napisać komunikat Git Commit (autorstwa Chrisa Breamsa)
18. Kod semantyczny: co? Czemu? W jaki sposób? (przez Paula Boaga)
19. Semantyka strukturalna: znaczenie elementów podziału HTML5 (autor: Heydon Pickering, Smashing Magazine )
20. Projektowanie pod kątem wydajności: rozdział 4. Optymalizacja znaczników i stylów ( Lara C. Hogan, O'Reilly Media )
21. Obiekt multimedialny zapisuje setki linii kodu (autorstwa Nicole Sullivan)
22. Zdefiniujmy dokładnie, czym jest Atomic CSS (John Polacek, CSS Tricks )
23. BEM dla początkujących: Dlaczego potrzebujesz BEM (autor: Inna Belaya, Smashing Magazine )
24. JavaScript dla kotów: wprowadzenie dla nowych programistów
25. Roadmap.sh: programista frontend
26. Programowanie funkcjonalne a OOPS: wyjaśnij, że mam pięć lat
27. Dlaczego, jak i kiedy używać semantycznego HTML i ARIA (Adam Silver, CSS Tricks )
28. Semantyka HTML (eBook autorstwa Smashing Magazine )
29. Podstawy - HTML + CSS (na Syntax.fm )
30. Kaskada i dziedziczenie ( westciv.com )
31. Sztuczki CSS (Chris Coyier)
32. Pierwsze kroki z układem CSS (Rachel Andrew, Smashing Magazine )
33. Wprowadzenie do HTML (dokumentacja internetowa MDN)
34. Pierwsze kroki w CSS (dokumentacja internetowa MDN)
35. Pierwsze kroki w JavaScript (dokumentacja internetowa MDN)
36. 24 sposoby (Drew McLellan)