Dlaczego (i jak) piszę kod za pomocą ołówka i papieru PlatoBlockchain Data Intelligence. Wyszukiwanie pionowe. AI.

Dlaczego (i jak) piszę kod ołówkiem i papierem

Jeśli myśl o kodzie pisma ręcznego wydaje się głupia, może cię zaskoczyć świadomość, że jest to nieuniknione. Jeśli nie masz pewności, pomyśl o ostatniej rozmowie kwalifikacyjnej, którą odbyłeś, i pamiętaj, że w pokoju przesłuchań nie było komputera — tylko Twoi rozmówcy, czysta kartka papieru i niebieski długopis.

Dla uczniów spośród was to jeszcze większa sprawa, ponieważ wasze oceny trzymają się linii kodu, które strategicznie wcisnęliście w dostępne miejsce na arkuszu odpowiedzi.

I nie tylko to, doświadczeni programiści mogą wskazać paczkę arkuszy A4, które wyjęli z biurowej kserokopiarki, aby napisać szczególnie złożony algorytm, nad którym pracowali.

Więc bez względu na to, czy jesteś studentem egzaminu, potencjalnym kandydatem do pracy, czy kimś, kto chce rozwiązać swój programowy ślepy zaułek, mam nadzieję, że ten artykuł pomoże ci, gdy przyłożysz pióro do papieru, aby kodować.

Chociaż skupię się na analogowym aspekcie pisania kodu, możesz zastosować te kroki do kodowania w dowolnej formie lub języku. Potraktuj to również jako ogólne wytyczne dotyczące kodowania, które działają specjalnie dla mnie, ale mogą być również bardzo przydatne w Twojej pracy.

Po co to zapisywać?

Zanim zaczniemy, ważne jest, aby zrozumieć, że nikt nie oczekuje, że zapiszesz gotowy do produkcji kod w notatniku. To nie jest tak, że możesz wrzucić to do edytora kodu i skompilować bez błędu. Gdyby celem było stworzenie doskonałego kodu, siedziałbyś przed komputerem w pokojach przesłuchań i salach egzaminacyjnych.

Celem kodu pisma ręcznego jest wcześniejsze przepracowanie logiki. Istnieje chęć jak najszybszego „włączenia się do przeglądarki” w projektowaniu, ale powszechnie znana jest mądrość w ręcznym szkicowaniu projektów. Medium o niskiej wierności zachęca do szybkich eksperymentów i niedrogich błędów.

Trud polegający na próbach wymyślenia, jak jednym kliknięciem wpłynąć na otaczające przedmioty (z my ostatni artykuł)

To samo może dotyczyć kodu, głównie podczas opracowywania składni i semantyki. To powiedziawszy, uzyskanie prawidłowej składni i semantyki to zawsze plus, choć nie jedyny punkt skupienia całego ćwiczenia pisma ręcznego.

Zobaczmy, od czego możemy zacząć, jeśli chodzi o kod pisma ręcznego.

Poznaj swoje pytanie

Na ostatnim roku studiów nie mogłem odbyć stażu ani nawet uczestniczyć w rozmowach kwalifikacyjnych w kampusie z powodów zdrowotnych. W rezultacie moja pierwsza rozmowa kwalifikacyjna była dość dosłowna i miała wysoką stawkę.

Kiedy teraz patrzę wstecz, wywiad był całkiem łatwy. Ale ponieważ nigdy wcześniej nie brałem udziału w jednym, byłem niespokojny. Pierwszą rzeczą, o którą pytali ankieterzy, było to, czy mogę wyświetlić odwrócony trójkąt złożony z gwiazdek. Jak powiedziałem, było łatwo — nic takiego for pętla nie radzi sobie, prawda? Ale jak powiedziałem, mój niepokój też przebił się przez dach.

Wziąłem głęboki oddech, przycisnąłem dłoń do pustej kartki papieru, którą dla mnie rozłożyli, przesunąłem ją jak najwolniej w moją stronę na stole (oczywiście kupując czas), kliknąłem długopisem, a potem coś zrobiłem prawo.

Najpierw narysowałem odwrócony trójkąt z gwiazdek. W ten sposób znalazłem stopy na ziemi, aby zacząć odpowiadać na ich pytanie.

Widziałem, jak genialni programiści robią coś złego po prostu dlatego, że nigdy w pełni nie pojmują tego, co rozwiązują.

Pytania, z którymi pracujemy, nie przypominają pytań, które rozwiązują fizycy czy matematycy. Otrzymują zestaw parametrów i znajdują brakujące; nasze pytania są również naszymi wynikami. Powiedziano nam już, jakie są nasze wyniki — musimy wymyślić, jak je osiągnąć. Dlatego ważne jest, aby dobrze znać pytanie, ponieważ zobaczysz wynik.

Zapisywanie lub rysowanie tego, co chcesz uzyskać, jest jednym z najlepszych sposobów na rozpoczęcie kodowania. Rozumiem, że w naszej szybko rozwijającej się branży oczekuje się, że musimy przejść od razu do programowania, uruchamiając demo „hello world”. Wspaniale jest zapoznać się z nieznaną składnią i pozbyć się niepokoju związanego z próbowaniem czegoś nowego.

Ale kiedy ktoś zadaje ci pytanie i podaje wynik, do którego należy się popracować, czy nie byłoby lepiej po prostu to najpierw odłożyć? To pytanie/wynik jest nie tylko punktem wyjścia, ale także punktem odniesienia. Na każdym etapie kodowania możesz się temu przyjrzeć, aby upewnić się, że pracujesz w tym kierunku i że jesteś na dobrej drodze.

Więc niezależnie od tego, czy w arkuszach odpowiedzi, czy w czystej kartce A4, na której zamierzasz pisać, zacznij od chwili i zapisz, co chcesz wydrukować. Możesz umieścić go na marginesie lub w rogu, jeśli nie chcesz, aby był częścią twojej odpowiedzi. Po prostu upewnij się, że jest to miejsce, w którym możesz się do niego odwoływać.

Nakreśl swój kod

Ten krok jest jak miecz obosieczny. Może dostarczyć Ci mapę drogową do Twojego programu lub zmarnować Twój czas. Moim zadaniem jest upewnienie się, że to pierwsze.

Przede wszystkim więc lubię mówić: zarysowanie kodu jest niepotrzebne, jeśli zakres Twojego problemu lub pytania jest niewielki. Ponownie, ta praktyka nie jest ani nakazowa, ani uniwersalna dla wszystkich projektów lub sytuacji. Wyobraź sobie, że jestem twoim ankieterem i proszę o napisanie, jak wyśrodkować element na stronie internetowej za pomocą CSS na tak wiele sposobów, jak to możliwe. Nie będziesz potrzebował do tego konspektu. Fragmenty kodu są stosunkowo małe dla każdej metody.

Ale teraz powiedzmy, że przydzielę ci napisanie aplikacji internetowej, która przechwytuje podpisy użytkowników za pomocą interfejsu ekranu dotykowego, a następnie zapisuje podpis na serwerze. Nie takie proste, prawda? Musisz wymyślić więcej niż jedną rzecz. Być może mały zarys może pomóc.

  1. Interfejs użytkownika do przechwytywania podpisu — HTML Canvas? WebGL?
  2. Wyłącz zdarzenia wskaźnika w pozostałej części strony internetowej, gdy użytkownik podpisuje
  3. Konwertuj i zapisz przechwycony obraz do pliku PNG — JS
  4. Następnie przekonwertuj go na obiekt typu blob (być może) i zapisz w tabeli danych dziennika użytkownika.

Napisałem przybliżoną sekwencję działań, które, jak sądzę, będę musiał kodować. Mogło być krótsze lub dłuższe, w zależności od tego, czego od niego chciałem.

Gorąco polecam zarysowanie kodu dla projektów klienta. Napisz konspekt wraz z wymaganiami użytkownika lub na odwrocie wydrukowanych modeli szkieletowych.

Szybka migawka wypunktowanych punktów zawiera mapę, listę rzeczy do zrobienia i listę kontrolną do sprawdzenia, gdy dojdziesz do końca projektu — prawie całe podsumowanie projektu na liście o niskiej wierności. Może również stać się szablonem do rozpoczęcia kolejnego podobnego projektu.

Ale jak powiedziałem wcześniej, ten krok jest jak miecz obosieczny. Będziesz musiał to skrócić dla egzaminowanych i rozmówców, gdy istnieją ograniczenia czasowe.

Jeśli nie wiesz od czego zacząć, zapisz tylko trzy podstawowe funkcje, które będziesz musiał zakodować w swojej aplikacji, a jeśli masz czas, zrób pięć.

Ale to jest o tym. Poświęć temu jak najmniej czasu i nie przejmuj się szczegółami. Zarys nie da ci dodatkowych punktów. Jest tam tylko po to, aby upewnić się, że masz wszystko pod kontrolą. Przechwytuje twoją początkową reakcję intuicyjną i zapewnia szczerość przez cały czas trwania projektu.

Skrót kontra skrót

Biały papier w linie z odręcznymi notatkami wykonanymi kursywą czarnym tuszem.
Krótki opis wyłączania zaznaczania tekstu

Czas zacząć kodować. Więc co piszesz? „Bdr” lub „border-radius"; "div -> p"Lub"<div><p></div></p>"; "pl()"Lub"println()"; "q()"Lub"querySelector()„?

Jeśli ktoś inny ocenia Twój kod, nie ma wyboru. Pomiń skróty, pseudokody, skróty Emmeta i wszelkie inne formy pisania stenograficznego. W przeciwnym razie nie ma powodu zakładać, że każdy, kto to czyta, wie, co oznaczają Twoje skróty.

To naprawdę zależy od ciebie.

Jeśli straciłeś kontakt z ręcznym pisaniem — a wielu z nas tak zrobiło — lepiej nie przesadzać z odręcznymi notacjami, ponieważ stają się one nużące. Jednocześnie nie ma czegoś takiego jak bycie zbyt oszczędnym w pisaniu. Nie, jeśli chcesz pewnego dnia spojrzeć wstecz i zrozumieć, co zapisałeś.

Mam otwarty plik w mojej aplikacji do robienia notatek i notatnik w linie na biurku, w którym zapisuję fragmenty kodu, które chcę zachować do późniejszego wykorzystania. Są niezorganizowani, po prostu długi strumień urywków. Dlatego przeglądając starsze notatki, nie wiedziałbym, co mam na myśli, gdybym nie spisał ich wyraźnie.

Cały czas zapominam składni. Na przykład używam notacji strzałkowej dla funkcji JavaScript od czasu jej wprowadzenia (ponieważ jest krótsza) i jestem prawie pewien, że ktoś nagle poprosi mnie o zdefiniowanie funkcji za pomocą function słowa kluczowego, mogę nawet zgubić nawiasy lub nazwę funkcji, wywołując błąd składni.

Nie jest niczym niezwykłym, że zapominamy składnie, których nie używaliśmy od jakiegoś czasu. Dlatego lepiej jest pisać notatki wyraźnie, gdy wiesz, że potrzebujesz ich do wykorzystania w przyszłości.

Niesekwencyjny przepływ kodu

W przeciwieństwie do ostatniego kroku, który nie dotyczy tych z was, rozmówców i zdających, ten jest przeznaczony specjalnie dla was.

Większość języków programowania jest interpretowana, kompilowana i wykonywana tak, że czasami wstępnie napisany kod w źródle jest wykonywany później po wywołaniu. Robimy to w JavaScript, na przykład za pomocą wywoływania funkcji — funkcje można zdefiniować na początku, a potem wykonać. Egzaminowani i rozmówcy mogą to wykorzystać, aby najpierw rozpocząć pracę nad krytycznym punktem twojej odpowiedzi.

Jak powiedziałem od samego początku, celem ręcznego pisania kodu jest przepracowanie lub przetestowanie logiki tego, co programujesz. Najlepiej, jeśli najpierw skupisz się na rozwiązaniu tego problemu.

Weźmy klasyczny przykład podręcznikowy — program do znajdowania nth Liczba Fibonacciego. Gdybym miał napisać do tego prosty zarys, wyglądałoby to mniej więcej tak:

  1. Uzyskaj dane wejściowe.
  2. Oblicz liczbę Fibonacciego.
  3. Podsumuj wyniki.
  4. Wydrukuj dane wyjściowe.

Wszystkie kroki w tym zarysie są niezbędne; jednak 1, 3 i 4 są bardziej obowiązkowe. Są konieczne, ale nie na tyle ważne, aby od razu się na nich skoncentrować.

Lepiej jest zacząć spisywać kod do obliczenia liczby Fibonacciego niż pobierać dane wejściowe. Zapakuj go w funkcję, a następnie zapisz kod sekwencyjnie i zapisz wiersz, aby wywołać tę funkcję tam, gdzie jest to właściwe.

Poświęć swój czas na pisanie kodu, który skupia się na sednie problemu.

Prawdziwi profesjonaliści mogą przeskoczyć do przodu. Powiedzmy, że mam projekt klienta i muszę pracować z pewną geometrią trójkąta — mam dwa boki, przeciwny kąt i muszę znaleźć długość trzeciego boku. I postanowiłem zacząć bazgrolić na papierze, zamiast otwierać mój IDE.

Najpierw oczywiście narysowałbym trójkąt (jest to coś, z czym mam duże doświadczenie, jak można powiedzieć). Zapisałbym kilka długości próbek i kątów. Potem pisałem formułę (na pewno komplement wyszukiwania online), a potem przeskakiwałem od razu do kodu funkcji.

Nie ma sensu spisywać obowiązkowych kroków, mimo że będę ich potrzebował w gotowym do produkcji kodzie. Ale byłoby inaczej, gdybym musiał napisać to na arkuszu odpowiedzi na egzaminie. Nie mogę pominąć pozostałych kroków; jednak nadal mogę zacząć od kodu formuły.

Pseudo kod

Chris już napisał poręczny artykuł o pseudokodzie że bardzo polecam Ci solidną lekturę.

Dla wszystkich tych profesjonalistów, którzy czują, że cały kod pisma ręcznego nie wydaje się być twoją filiżanką herbaty, ale nadal mogą być ciekawi, czy może ci to pomóc, to pseudo kod może być równowagą, której szukasz.

Przypomina to zarysowanie kodu, o czym wspomniałem w jednym z poprzednich kroków. Jest jednak krótsze i przypomina bardziej skrócone kodowanie. Czasami jest również określany jako „kod szkieletowy”.

Oto krótki pseudokod dla układu siatki CSS:

Grid
5 60px rows
6 100px columns

Nie ma co pisać! Tak więc, nawet jeśli przyłożenie ołówka do papieru jest doskonałe do tego typu rzeczy, równie skuteczne, szybkie i niedrogie jest wpisanie pseudokodu do dowolnego programu, którego używasz.

Przestrzeń i komentarze

Uważam, że kod to 90% słów kluczowych i 10% kart. Bez spacji spada czytelność słów. Wcięcia są również niezbędne w przypadku kodu pisanego odręcznie. Jednak proszę nie używać go na każdym poziomie, ponieważ szerokość papieru będzie Cię ograniczać. Rozsądnie używaj spacji, ale używaj ich.

Żółty papier bez podszewki z kodem napisanym odręcznie kursywą czarnym tuszem.
Nagrodzony fragment kodu OG, napisany z dodatkowym TLC

Jeśli piszesz kod na swój użytek, wierzę również, że jeśli prześledziłeś wszystko, o czym wspomniałem do tej pory i już spisałeś swoje wyniki i zarys na stronie, być może nie będziesz musiał nawet dodawać komentarzy. Komentarze szybko informują o tym, co robi następny zestaw kodu. Jeśli już napisałeś i przeczytałeś zarys kodu, komentarze są zbędnymi uwagami.

Jeśli jednak twój osąd mówi, aby odłożyć jedną, zrób to. Dodaj go po prawej stronie kodu (ponieważ nie będziesz mógł wstawić go między już napisane wiersze, tak jak w przypadku, powiedzmy, VS Code). Użyj ukośników, nawiasów lub strzałek, aby wskazać, że są to komentarze.

Dla zdających, którzy nie są pewni określonej składni, zapisz komentarze. W ten sposób przynajmniej pozwalasz osobie oceniającej twój artykuł poznać twoje zamiary z tym niepoprawnie sformatowanym kodem. I używaj tylko poprawnych ograniczników do oznaczania komentarzy — na przykład byłyby to ukośniki w JavaScript.

Analogowe kontra cyfrowe

Jak wspomniałem wcześniej, wszystko, co tutaj dostarczam, to ogólne porady dotyczące kodowania. Jeśli nie chcesz tego próbować na papierze fizycznym, działa również każda aplikacja do robienia notatek.

Ale jeśli masz zamiar wypróbować trasę cyfrową, radzę spróbować użyć czegoś innego niż zwykła aplikacja do robienia notatek. Pracuj z bardziej wizualnymi narzędziami cyfrowymi — diagramami przepływu, mapami myśli, makietami itp. Mogą one pomóc w wizualizacji wyniku, konturów i samego kodu.

Nie jestem zbytnio cyfrowym obywatelem (poza pracą w sieci i ostatnio przestawiam się na czytanie e-booków), więc trzymam się fizycznych notatników.

Moje ulubione narzędzia do ręcznego pisania kodu

Każdy ołówek i papier wystarczy! Istnieje jednak wiele opcji, a oto kilka wybranych narzędzi, których używam:

Nie ma sposobu na „pisanie” kodu

Mam nadzieję, że mój mały sposób ręcznego pisania kodu ołówkiem i papierem sprawi, że ocenisz sposób, w jaki już planujesz i piszesz kod. Lubię wiedzieć, jak inni programiści podchodzą do swojej pracy, a to jest mój sposób, aby dać ci wgląd w sposób, w jaki to robię.

Ponownie, nic tutaj nie jest naukową ani ścisłą sztuką. Ale jeśli chcesz spróbować odręcznego planowania kodu, oto wszystko, co omówiliśmy w ładnej uporządkowanej liście:

  1. Zacznij od zapisania (w razie potrzeby z przykładowymi danymi) danych wyjściowych swojego kodu.
  2. Napisz zarys kodu. Proszę ograniczyć się do trzech kroków w przypadku małych lub mniej skomplikowanych projektów.
  3. Używaj notacji odręcznych. Deweloperzy piszący dla siebie mogą używać notacji skróconych, o ile pismo jest czytelne i ma sens, gdy odniesiesz się do niego później.
  4. Kiedy masz ograniczenia czasowe, rozważ najpierw napisanie kodu, który rozwiąże sedno problemu. Później zapisz wywołanie tego kodu we właściwym miejscu w kodzie sekwencyjnym.
  5. Jeśli czujesz się pewnie, spróbuj napisać pseudokod odnoszący się do głównej idei.
  6. Używaj odpowiednich wcięć i spacji — pamiętaj o szerokości papieru.

Otóż ​​to! Mam nadzieję, że ten artykuł ułatwi Ci rozpoczęcie pracy, gdy będziesz gotowy do ręcznego pisania kodu. A jeśli siadasz do egzaminu lub rozmowy kwalifikacyjnej, mam nadzieję, że pomoże ci to skoncentrować się na prawidłowym zadaniu pytań.

Znak czasu:

Więcej z Sztuczki CSS