More

    Drogi Pamiętniczku, … czyli dziennik programisty w Gatsby.js

    Pomysł na zapisywanie krótkich wpisów na podsumowanie dnia pracy pojawił się u mnie całkiem niedawno. Zainspirowałem się pewną praktyką stosowaną przez żeglarzy, czyli tak zwanym dziennikiem jachtowym. Wbrew pozorom programowanie i żegluga mają wiele punktów wspólnych, a sam pomysł na archiwizowanie elementów pracy może wzbogacić nasz warsztat. Co za tym przemawia?

    Po pierwsze, w ciągu dnia jesteśmy w stanie pracować nad różnymi zadaniami: od naprawy błędu na produkcji, po wymyślanie nowych funkcjonalności. I wszystko to nadaje się na wpis w naszym dzienniku. Dzięki prowadzeniu takich zapisów, w każdym momencie będziemy w stanie wrócić do naszych notatek. Po drugie, próbując opisać w kilku słowach interesujący fragment kodu lub rozwiązania, pomagamy naszemu mózgowi zapisać sobie na trwałe tę informację.

    Pewnie mógłbym znaleźć jeszcze wiele innych argumentów, które opowiadają się za tym rozwiązaniem. Jednak te dwa okazały się wystarczające, żeby samego siebie przekonać do wcielenia tego projektu w życie.

    Opis projektu

    Zacznijmy od wymagań jakie postawiłem sobie podczas tego zadania. Jako, że będzie to dziennik programisty, nie mogłem pójść na skróty i zapisywać notatki w formacie .txt. Nie byłoby to ani praktyczne, ani wygodne.

    Jeśli planujemy zapisywać fragmenty kodu, to bezkonkurencyjny będzie Markdown. Można wykorzystać do tego jedną z wielu aplikacji webowych, która umożliwia zapisywanie notatek, jak na przykład Notion.

    Jeśli nie masz ochoty na napisanie własnego rozwiązania, jest to odpowiedni moment na życzenie Ci wytrwałości z dokumentowaniem swojej pracy i do następnego!

    Jeśli nadal ze mną jesteś, przechodzimy do konkretów. Zdecydowałem się na Gatsby.js czyli JavaScriptowy generator stron statycznych, w którym piszemy za pomocą Reacta. Ponieważ pracuję na różnych stacjach roboczych, lubię mieć dostęp do narzędzi z dowolnego miejsca. Będę pisać w formacie markdown, bo jak to tak przeglądać niepokolorowany kod. Gatsby będzie generował HTML z naszych plików .md. Voila!

    Koło jak podaje Wikipedia:

    “Wynalezione w połowie IV tysiąclecia p.n.e. w Mezopotamii.”

    Nie będziemy więc tego robić na nowo. Tutaj z pomocą w Gatsbym przychodzą szablony. Wykorzystam Code Notes stworzony przez Zandera Martineau. W tym rozwiązaniu za darmo dostajemy tagi, tryb nocny i wyszukiwarkę, więc wszystko czego potrzebujemy do archiwizacji naszego dziennika.

    Czas na kod

    Jeśli nie masz zainstalowanego Gatsbiego, odsyłam Cię do oficjalnej dokumentacji. Stwórzmy folder dla naszego repozytorium za pomocą Gatsby-CLI.

    gatsby new code-notes https://github.com/MrMartineau/gatsby-starter-code-notes
    
    cd code-notes

    Ze względu na bug występujący w szablonie musimy doinstalować dwie paczki.

    npm install theme-ui gatsby-plugin-theme-ui

    Teraz pozostaje nam już tylko wystartowanie serwera Gatsby i możemy się cieszyć gotowym dziennikiem programisty 🎉. Domyślnie dostępny będzie on pod adresem: http://localhost:8000/

    gatsby develop

    Tak jak wspomniałem, chcę mieć dostęp do swoich notatek z dowolnego miejsca, więc trzeba zakasać rękawy i pora opublikować nasz dziennik za darmo na GitHubie.

    Publikowanie repozytorium

    Zacznijmy od stworzenia repozytorium na Githubie.

    git init
    git remote add origin {LINK_TO_YOUR_REPO_URL}
    npm install gh-pages

    Musimy jeszcze tylko dodać konfigurację w pliku gatsby-config.js do naszej podstrony w GitHub Pages

    module.exports = {
        pathPrefix: "/snippnotes",
        ...
    }

    Żeby ułatwić sobie automatyzację, dorzucimy jeszcze tylko skrypt do package.json.

    "scripts": {  
        ...    
        "deploy": "gatsby build --prefix-paths && gh-pages -d public"  
    },

    Od opublikowania naszego dziennika dzieli nas ostatni krok. Zamykam oczy, naciskam ENTER, a magia dzieje się sama.

    npm run deploy

    Mój przykładowy dziennik znajdziesz tutaj.

    Tworzenie notatek

    Mamy gotową stronę, ale fajnie byłoby w wygodny sposób tworzyć nasze wpisy do dziennika. Tutaj z pomocą przychodzą programy do pisania markdownów. Uwierz mi na słowo, sprawdziłem ich naprawdę sporo m.in.: Boostnote, Typora, Notion, Zettlr, Notable, Ghostwriter oraz mój osobisty faworyt Obsidian.

    Dlaczego Obsidian? Ponieważ poza możliwością budowania grafu naszych wszystkich dokumentów ma wbudowane wsparcie dla pisania dziennych wpisów.

    Konfiguracja Obsidiana

    Stwórzmy kryptę zlokalizowaną w folderze gdzie znajduje się nasze repozytorium.

    Wejdźmy w ustawienia i włączmy wtyczkę Daily notes. To własnie ona będzie wykonywała trochę pracy za nas.

    Skonfigurujmy naszą wtyczkę, żeby generowała nam plik w odpowiednim formacie.

    Stwórzmy w folderze notatkę o nazwie example.md, będzie to szablon naszej notatki.

    ---
    title: Note
    tags:  
    - js
    emoji: 👋
    ---
    
    # Title
    

    Naciskając na Open today’s note zostanie wygenerowany plik markdown w odpowiednim formacie z dzisiejszą datą.

    Już tylko podmiana nazwy folderu zawierającego wpisy w gatsby-config.js i cała robota za nami. Zgodzisz się, że nie było to skomplikowane?

    plugins: [    
        {      
            resolve: 'gatsby-theme-code-notes',      
    	options: {       
                contentPath: 'snippnotes',
    	    ... 
        }
    ]

    Podsumowanie

    Bardzo mocno zachęcam do tworzenia własnego dziennika. Dzięki stosowaniu powszechnego formatu dokumentów, łatwo będzie wyeksportować wpisy w inne miejsce. Spinając klamrą tematykę artykułu z inspiracją do jego powstania zakończę pozdrowieniem:

    Ahoj (programistyczna) przygodo!

    Link do repozytorium

    Mateusz Korczyński
    Fullstack Developer orbitujący głównie wokół Javy i Reacta. Posiada 5-letnie doświadczenie komercyjne od mikroprzedsiębiorstwa po korporacje. Jednak swoje miejsce na ziemi znalazł w software housie. Miesiąc bez poznania nowego frameworka jest dla niego miesiącem straconym, więc stara się ciągle trzymać rękę na pulsie.

    Latest articles

    Automatyzacja z Pythonem – pobieranie kolekcji filmów z YouTube

    Automatyzacja czynności, które są czasochłonne, to według mnie największa zaleta nauki programowania. Często zadania wymagające od nas klikania, czekania i przepisywania captchy...

    Programowanie funkcyjne w JS

    Jeśli bierzesz udział w rozmowach rekrutacyjnych na stanowisko regular lub senior developera, to pewnie niejednokrotnie miałeś lub miałaś do czynienia z takimi...

    Własny plugin do Figmy w React.js

    Jeśli udało Ci się kiedykolwiek pracować z Figmą, istnieje spora szansa, że narzędzie przypadło Ci do gustu. Tak przynajmniej było w moim...

    Wykorzystanie Virtual DOM na przykładzie Reacta

    Virtual DOM to bardzo popularne rozwiązanie znane z Reacta. Co to dokładnie jest? W jaki sposób działa w Reactcie? O tym opowie...

    1 Comment

    Leave a reply

    Please enter your comment!
    Please enter your name here

    Related articles

    X