Czym jest technika pomodoro?

Technika pomodoro służy do poprawy własnego skupienia. Skupiony pracujesz lepiej, ponieważ nie pozwalasz sobie na rozpraszanie. Swoje zadania wykonujesz szybciej.

Sam kiedyś miałem duży problem ze skupieniem. Często się rozpraszałem, a przez to więcej czasu musiałem poświęcić na pracę. Postanowiłem coś z tym zrobić.

Pomodoro to była pierwsza metoda, z jakiej skorzystałem, w celu poprawy własnego skupienia. I korzystam często z niej do dziś.

Jak to działa?

Mechanizm działania techniki pomodoro jest banalnie prosty:

1 Ustaw minutnik na 25 minut. Czas jest umowny, możesz ustawić mniej, ale minimum jak dla mnie to 15 minut.
2 Uruchom minutnik, niech odlicza czas. W tym momencie zaczynasz pracę nad zadaniem.
3 Kiedy czas minie możesz zapisać sobie, że zaliczyłeś jedną sesję pracy. 4 Jeśli tego potrzebujesz, zrób sobie przerwę maksymalnie: 5 minut.
5 Zacznij kolejną sesję: uruchom znowu minutnik.
6 Jeśli zaliczysz trzy sesje pracy, polecam zrobić sobie dłuższą przerwę: 15 - 20-minutową

Uwaga: Ta technika zadziała, ale pod jednym warunkiem! Musisz trzymać się zasady, że kiedy masz uruchomioną sesję pracy, to skupiasz się tylko na zadaniu, a nie że na minutę włączysz sobie YouTube'a.

Jeśli masz problem ze skupieniem możesz potraktować stosowanie techniki pomodoro jako trening na skupienie. W tej technice ważna jest regularność.

Są różne techniki na skupienie. Możesz na przykład poprawić swoje skupienie na pracy poprzez dźwięk. Napisałem wpisy na ten temat: tutaj i tu

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}`);
});