We frontendzie automatyczne przekompilowanie kodu po jego zmianie to standard. Można to samo zrobić w NodeJS.

Podam dwie wersje dla "zwykłego" JavaScript i dla TypeScript.

Wersja dla JavaScript

Instalujemy nodemon

Nodemon to narzędzie, które zrestartuje Twoją aplikację napisaną pod NodeJS od razu gdy kod się zmieni.

Instalujemy:

npm i --save-dev nodemon

Konfiguracja

W pliku package.json w scripts podpinamy nodemon:

{
   ...
   "scripts": {
      "serve": "nodemon index.js"
   }
}

Wystarczy teraz tylko odpalić skrypt serve:

npm run serve

i zmienić kod, a skrypt sam się przełąduje (i oczywiście zapisać zmiany pliku!).

Wersja dla TypeScript

Jeśli nie podpinałeś TypeScript'a z NodeJS to tutaj dowiesz się jak to zrobić.

Wersja dla TypeScript jest bardzo podobna do poprzedniej:

Instalacja

Oprócz nodemon zainstalujemy także: concurrently. To narzędzie służy do uruchomienia kilku komend naraz. Po co to nam się dokładnie przyda, opiszę za chwilę.

npm i --save-dev concurrently nodemon

Konfiguracja

W pliku package.json w scripts podpinamy:

{
   ...
   "scripts": {
      "serve": "concurrently \"tsc --watch\" \"nodemon -q dist/index.js\""
   }
}

Pod serve wywołujemy dwa polecenia. Żeby, to zrobić posługujemy się concurrently. Składnia jest prosta po słowie: concurrently podajemy w nawiasach: "" dane polecenie, które chcemy wywołać. W tym przypadku jest, to: tsc --watch — będzie nasłuchiwać ewentualnych zmian, w kodzie TypeScript. A drugie polecenie po prostu zrestartuje skrypt, gdy zmiany w TypeScript zostaną przekompilowane do docelowego pliku JavaScript.

W tym wpisie zakładam, że masz już stworzony plik: package.json. Jeśli nie to wywołaj komendę:

npm init

Żeby dodać obsługę TypeScript, po stronie NodeJS wystarczy:

Zainstaluj TypeScript

Zainstaluj lokalnie TypeScript za pomocą:

npm i typescript

Wygeneruj plik tsconfig.json

Jak sama nazwa wskazuje plik tsconfig.json służy do przechowywania konfiguracji TypeScripta. O samej konfiguracji będzie za chwilę, ale najpierw stwórzmy sam plik.

Do stworzenia tego pliku użyjemy npx. Jeśli masz zainstalowany npm minimum w wersji 5.2.0 powinieneś mieć do tego dostęp.

Wywołujemy:

npx tsc --init

Otwórz plik tsconfig.json. Będzie tam wiele zakomentowanych linijek. Znajdź taką:

// "outDir": "./",

I zmień ją na:

"outDir": "dist",

Możesz wykasować wszystkie zakomentowane linijki. Powinieneś mięć coś takiego:

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs",  
    "outDir": "dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

Instalacja zależności

Żeby sprawdzić, czy to rzeczywiście działa zainstalujmy bibliotekę Express:

npm i express

Jeśli chcemy używać TypeScript, po stronie NodeJS będziemy potrzebować także definicji typów. Dla większości bibliotek te definicje są instalowane domyślnie z biblioteką, ale niektóre nie. Dlatego warto zainstalować brakujące.

Zainstalujmy te:

npm i @types/express @types/node

Uruchomienie

Zostało nam sprawdzenie, czy wszystko działa.

Zanim uruchomimy skrypt, edytujmy plik package.json i dodajmy do sekcji scripts taką zawartość:

"scripts": {
	"build": "tsc",
	"preserve": "npm run build",
	"serve": "node dist/index.js",
},

Skrypt build kiedy zostanie wywołany przekompiluje nam kod z postaci w wersji .ts na .js i umieści, w folderze dist.

Skrypt preserve jest zawsze wywoływany przed wywołaniem skryptu serve. Czyli skompiluje nam kod, ponieważ skryptu build sami jawnie nie wywołujemy.

Skrypt serve uruchomi nam już skompilowany kod.

Zaraz uruchomimy kod, ale najpierw musimy mieć, co uruchomić.

Stwórz plik o nazwie: index.ts i wrzuć taką zawartość:

import express from 'express';
const app = express();

app.listen(3000, () => console.log('Powered by NodeJS and TypeScript!'));

Mamy już wszystko!

Uruchom komendę:

npm run serve

Zauważ, że zostanie uruchomiona sekwencja skryptów, które definiowaliśmy wcześniej. Najpierw zostanie uruchomiony: preserve potem: build a na koniec: serve.

Jak podpiąć się pod klawiaturę?

Żeby obsłużyć klawiaturę, w JavaScript posłużymy się zdarzenia

Obsługa klawiatury w JavaScript odbywa się za pomocą zdarzeń.

Mam następujące zdarzenia:

keydown — To zdarzenie jest wysłane kiedy użytkownik wciśnie klawisz na klawiaturze.

keyup — Zdarzenie zostaje wysłane kiedy zwolni wciśnięty klawisz.

Podpięcie obsługi zdarzeń klawiatury

Kod wygląda następująco:

document.addEventListener('keydown', (e) => {
  console.log('Keydown event code: ', e.code);
});

document.addEventListener('keyup', (e) => {
  console.log('Keyup event code: ', e.code);
});

Obiekt KeyboardEvent

Kiedy następuje interakcja użytkownika z klawiaturą, wysłane zostaje zdarzenie typu KeyboardEvent. Otrzymujemy je przy nasłuchiwaniu zdarzeń: keydown i keyup.

Ma następujące właściwości:

Atrybut code

Informuje jaki klawisz został wciśnięty.

document.addEventListener('keydown', (e) => {
  console.log('Keydown event code: ', e.code);
});

Dla liter dostaniemy wartość: KeyA, KeyB itd.

Dla liczb: Digit1, Digit2 itd.

Jeśli chcesz sprawdzić, czy został wciśnięty lewy lub prawy: Shift, Alt lub Ctrl skorzystaj z tego atrybutu.

Atrybut key

Także informuje jaki klawisz został wciśnięty, ale z tego atrybutu dowiem się znacznie więcej niż z code.

Jest to przydatne kiedy bierzemy pod uwagę, jaki język jest obsługiwany oraz układ klawiatury. Dodatkowo dzięki temu atrybutowi dowiemy się, czy została wciśnięta duża, czy mała litera.

document.addEventListener('keydown', (e) => {
  console.log('Keydown event code: ', e.key);
});

Dla liter dostaniemy wartość: a, b, c, d itd.

Dla liczb: 1, 2, 3, itd

Klawisze: Shift, Ctrl, Alt

Załóżmy, że chcemy sprawdzić, czy został wciśnięty któryś z klawiszy: Shift, Ctrl, Alt. Możemy to zrobić za pomocą specjalnych atrybutów: shiftKey, ctrlKey, altKey.

Jeśli któryś z tych klawiszy został wciśnięty przy odpowiednim atrybucie zostanie ustawiona wartość true.

Przykład dla przycisku Ctrl:

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'a') {
    console.log('Clicked CTRL + A!');
  }
});

Atrybut repeat

Jeśli chcemy się dowiedzieć czy wciśnięty klawisz dalej jest przytrzymywany możemy posłużyć się atrybutem repeat. Jeśli ma wartość true to znaczy, że dany klawisz cały czas jest wciśnięty:

document.addEventListener('keydown', (e) => {
  console.log(`key: ${e.key} is repeat: ${e.repeat}`);
});

Pod koniec października poddałem się zabiegowi: laserowa korekcja wady wzroku.

Co skutkowało tym, że przez jakiś czas nie wrzucałem nowych wpisów na bloga. W tym wpisie opiszę, jak to wszystko mniej-więcej wyglądało.

Jak do tego doszło?

Trochę ponad rok temu poszedłem na badania kontrolne do okulisty. Pani lekarz powiedziała mi, że nie jest dobrze. Różnica między lewym a prawym okiem jest dość duża.

To nie jest tak, że przed zabiegiem byłem ślepy jak kret. Po prostu na lewe oko widziałem znacznie gorzej niż na prawe.

Okulistka napisała mi na kartce dwie kliniki, które poleca zajmujące się laserową korekcją wady wzroku. To, że poddam się zabiegowi, było pewne. Pytanie tylko, kiedy.

Zadzwoniłem zarówno do jednej jak i drugiej kliniki. Co zdecydowało, że wybrałem tą, a nie inną? W jednej z nich po prostu miałem szybszy termin badań kontrolnych :)

Badania kontrolne

Jeśli chcesz poddać się zabiegowi, musisz najpierw przejść badania kontrolne. Lekarz sprawdza, czy nie ma żadnych przeciwwskazań.

Za takie badanie zapłaciłem 300 zł. Trwały one 2 godziny.

Oczy były sprawdzane pod różnymi urządzeniami. Pomiędzy badaniami pacjent wypełnia ankietę.

W trakcie jednego badania są skraplane oczy. Nie pamiętam już może: dwa lub trzy razy. Jedne krople sprawiały, że oczy zaczęły piec, ale to nie był nie wiadomo jaki ból :)

W końcu już po samych badaniach pacjent czeka na decyzję o tym czy może zostać poddany zabiegowi. Decyzja zapada tego samego dnia,

Na spotkaniu lekarz informuje, z jakiej metody leczenia może skorzystać pacjent, ponieważ jest ich kilka. W moim przypadku nie było żadnego wyboru. Była możliwa tylko jedna metoda: FemtoLASIK.

Zostałem poinformowany o cenie leczenia. Właściwie to były dwie ceny. Pierwsza (niższa) jeśli zdecyduję się na zabieg, w ciągu miesiąca od dnia zrobienia badań kontrolnych lub cena wyższa jeśli później. Przy czym jedna uwaga: jeśli od badań upłynie więcej niż trzy miesiące, to musimy je zrobić na nowo.

Zdecydowałem, że chcę poddać się zabiegowi, jak najszybciej się da. Termin zabiegu wyznaczono mi dokładnie za tydzień od zrobienia badań kontrolnych.

Cena: 7550 zł

Zabieg — laserem po oczach

Dzień przed zabiegiem musiałem wypić 2 litry wody.

Nadszedł dzień zabiegu. Musiałem przejść jeszcze raz te same badania kontrolne, ale już bez skraplania oczu i były krótsze.

Następnie był czas na przygotowanie do zabiegu. Zostały mi podane krople do oczu — trzy razy. Jest to znieczulenie.

Po jakimś czasie odbyłem spotkanie z panią lekarz, która przeprowadzała mój zabieg. Dodatkowo zostały mi sprawdzone oczy jeszcze raz.

No i w końcu przyszedł czas już samego zabiegu. Lekarka powiedziała mi, że będzie mnie informować na bieżąco, co się dzieje, żeby nie panikować itp.

Wyglądało to tak, że położyłem się na specjalnym materacu. Następnie zakładane było na oko — nie wiem jak, to poprawnie określić — specjalna obręcz, tak żebym nie mógł mrugać podczas zabiegu.

I się zaczęło: pani lekarz informowała mnie, żeby patrzeć, w stronę światła, które widzę. Informowała mnie także, kiedy laser zostanie uruchomiony i żebym skupił wzrok, w jednym punkcie. Po wykonaniu zabiegu na jednym oku przyszła pora na drugie.

Sama praca lasera trwa krótko: maksymalnie do 30 sekund.

I co tyle? Nie. Ponieważ mój zabieg polegał na użyciu dwóch laserów, a nie jednego. Sam proces wyglądał podobnie, jak poprzednio, ale ciekawie zrobiło się pod sam koniec. W pewnym momencie zacząłem widzieć białą plamę, która zaczęła się rozszerzać.

W czasie zabiegu założono mi soczewki na oczy, które są ściągane drugiego dnia, w czasie wizyty kontrolnej.

Już po otwarciu oczu widziałem ok, ale miałem białą mgiełkę przed oczami. To normalne, a ta mgiełka znika po kilku godzinach.

Lekarka sprawdziła mi jeszcze raz oczy i zostałem odprowadzony do pomieszczenia, gdzie pacjent odpoczywa po zabiegu.

Zabieg nie boli.

Jakieś 30 minut po zabiegu zaczęły mnie piec oczy, to takie uczucie jakbyś kroił cebulę. Działo się tak, ponieważ przestało działać znieczulenie.

Rehabilitacja

Musiałem zrealizować receptę na krople. Trzy rodzaje.

W dniu zabiegu, po powrocie do domu musiałem, w zależności od kropli, co 2 godziny lub co godzinę skraplać oczy.

Dostałem także specjalne osłonki, które musiałem przez tydzień nosić podczas snu.

Drugiego dnia po zabiegu musiałem stawić się, podczas wizyty kontrolnej. Następnie będę musiał się pojawić miesiąc, pół roku, rok po zabiegu.

Pierwszego właściwie przeleżałem, w łóżku. Przez pierwsze 4 dni nie korzystałem z komputera, TV itp. Sam blask na ekran sprawiał dyskomfort, ale to normalne i zostałem o tym poinformowany.

Po upływie tygodnia, w zasadzie już mogłem normalnie funkcjonować. Zdarzało się, że czasami momentami widziałem gorzej, ale to też normalne. Im dalej, tym lepiej.

Kiedy piszę te słowa, czuję się bardzo dobrze, myślałem, że rehabilitacja będzie bardziej uciążliwa.

Czy warto?

No dobra, ale jak efekty? Poprawę widać właściwie od razu. Wprawdzie, w lewym oku nie jest super, ale też zostałem o tym poinformowany, że lewe oko będzie tym słabszym. Ponieważ, tak dużą miałem wadę. Mimo to jest lepiej.

Ogólnie jestem zadowolony, ale jeśli miałbym komuś doradzać, czy powinien poddać się zabiegowi to trudno powiedzieć. Wszystko zależy od kilku czynników: jeśli Twoja wada nie jest duża, to chyba bym odradził. Cena zabiegu też nie jest mała. Najlepiej porozmawiać o tym z lekarzem o swoich oczekiwaniach.

W październiku opublikowałem 4 wpisy:

Inne:

• Espanso to narzędzie, które zwiększy Twoją produktywność
  
• Skupienie poprzez dźwięk

JavaScript:

• Magazyn sieciowy local storage i session storage

Dodałem jeden komiks: How does motivation work?

Przeszedłem także zabieg: laserowej korekcji wady wzroku. Co spowodowało, że musiałem trochę zmniejszyć swoją pracę przy komputerze. Więcej o zabiegu napiszę, w oddzielnym wpisie.

Przeczytałem dwie książki:

• Narzędzia Tytanów - Timothy Ferriss
  
• Czysta architektura - Robert C. Martin

Przesłuchałem trzy audiobooki:

• Metro 2033 - Dmitry Glukhovsky
  
• Metro 2034 - Dmitry Glukhovsky
  
• Ludzie. Krótka historia o tym, jak spieprzyliśmy wszystko - Tom Phillips