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

    11 bibliotek, które powinien znać każdy iOS developer

    Przez dwanaście lat, App Store mocno zadomowił się na naszych urządzeniach mobilnych, oferując coraz to większą różnorodność aplikacji. W tym roku ich...

    Jak używać Web Components w Reactcie i Angularze

    Kontynuujemy temat użycia Web Components w budowaniu aplikacji. W tym wpisie przyjrzymy się ich zastosowaniu wraz z popularnymi frameworkami JS-wymi.

    Hacktoberfest – ten hackathon to małe piwo

    Hackathon to wydarzenie programistyczne polegające na zrealizowaniu w określonym czasie projektu zgodnego założeniami organizatora. Większość z was pewnie kojarzy słowo Hackathon. Najczęściej...

    #IThotStory, czyli największe wpadki programistów

    Co prawda programista to nie saper i może pomylić się więcej niż raz, ale każda wpadka niesie za sobą jakieś ryzyko. Zaliczyliście...

    Leave a reply

    Please enter your comment!
    Please enter your name here

    Related articles

    X