Mija drugi miesiąc działalności bloga. Oto podsumowanie!

W maju na blogu pojawiło się 7 nowych wpisów. Konkrety:

JavaScript:

• Jak posortować tablicę nie zmieniając oryginału?
• Jak zmienić string w HTML Element?

SSH:

• Jak dodać klucz publiczny SSH na serwer?

Webstorm:

• Jak ustawić własny skrót klawiszowy?
• Jak włączyć tryb pełnoekranowy?

NodeJS:

• NodeJS: Wczytywanie plików

Dodałem także nowy dział: Książki. W tym miesiącu przeczytałem trzy pozycje:

• Nie każ mi myśleć - Steve Krug
• Inteligencja emocjonalna - Daniel Goleman
• Jest krew... - Stephen King

Jakiś czas temu stanąłem przed takim problemem: miałem zapisany w string szablon za pomocą HTMLa na przykład:

<div class="foo">
  <h2 class="title">Nagłówek</h2>
  <p>
  Lorem ipsum...
  </p>
</div>

I potrzebowałem przekonwertować stringa na HTML Element. Można to zrobić w taki sposób:

const stringToHtml = (htmlString) => {
    const parent = document.createElement('div');
    parent.innerHTML = htmlString;
    return parent.children.item(0);
};

Ta metoda sprawdza się gdy mamy tylko jeden kontener a w środku reszta danych. Dla tej metody nie zadziała:

<div class="foo">
  Foo
</div>
<div class="bar">
  Bar
</div>

Jak wywołamy funkcję stringToHtml dla takiego szablonu dostaniemy tylko pierwszy element.

Poniżej inna wersja po małej modyfikacji:

const stringToManyHtmlElements = (htmlString) => {
    const parent = document.createElement('div');
    parent.innerHTML = htmlString;
    return parent.children;
};

Jak wywołamy tą funkcję dostaniemy w rezultacie: HTMLCollection. Przykład:

const divs = stringToManyHtmlElements('<div>a</div><div>b</div>');
console.log('Div A: ', divs[0]);
console.log('Div B: ', divs[1]);

Żeby wczytać plik wystarczy nam moduł wbudowany w NodeJS o nazwie: fs. W tym wpisie podam przykłady dla dwóch metod, które pozwalają wczytać plik w sposób synchroniczny lub asynchroniczny. Warto także mieć na uwadze to, że opisane metody wczytują plik do pamięci. Jeśli zamierzasz wczytać duży plik będzie to miało negatywny wpływ na pracę programu. W takim przypadku warto zainteresować się strumieniami.

Synchroniczne wczytywanie pliku

Wczytywanie pliku, w sposób synchroniczny oznacza, że wątek główny zostanie zablokowany do momentu zakończenia tej operacji.

Posłużymy się metodą readFileSync:

const fs = require('fs');

try {
  const data = fs.readFileSync('./file-to-load', 'utf8');
  console.log(data);
} catch (error) {
  console.log(error);
}

Metoda readFileSync przyjmuje dwa parametry. Pierwszy parametr to ścieżka do pliku który chcemy wczytać. Drugi argument jest opcjonalny możemy w nim określić sposób kodowania(domyślnie przymuje wartość null) wczytywanego pliku oraz flagę operacji(domyślnie ma wartość r). Ten drugi parametr dodatkowo można przekazać jako string lub zwykły obiekt, więcej informacji znajdziesz pod tym linkiem.

Żeby obsłużyć ewentualny błąd przy wczytywaniu pliku korzystamy w wersji synchronicznej metody z obsługi wyjątku.

Asynchroniczne wczytywanie pliku

Żeby wczytać plik, w sposób asynchroniczny używamy metody: readFile

const fs = require('fs');

fs.readFile('./file-to-load', 'utf8' , (error, data) => {
  if (error) {
    console.log(error);
    return;
  }
  console.log(data);
});

Dwa pierwsze parametry są takie same jak dla wersji synchronicznej. W wersji asynchronicznej mamy trzeci parametr. Jest to zwykła funkcja zwrotna. Zwraca ona dwa parametry. Pierwszy parametr to ewentualny błąd przy próbie wczytywania, a drugi to dane z pliku.

Ścieżka do pliku

Przy pracy w z plikami warto wiedzieć jeszcze o istnieniu zmiennej o nazwie:

__dirname

Zwraca ona ścieżkę absolutną do katalogu który zawiera wywołany skrypt. Spójrzmy:

|--server
|  |--index.js
|  |--models
|     |--some-model.js

Gdy wywołamy w pliku some-model.js z tą linijkę kodu:

console.log(__dirname);

Otrzymamy:

/home/user/server/models

No dobra, ale po co nam ta informacja? Dwa powyższe przykłady bazują na ścieżce względnej i nawet nie powinniśmy wczytywać w ten sposób plików! Problem jest taki, że my nie mamy wpływu z jakiej lokalizacji skrypt zostanie wywołany. Dla jasności spójrz jeszcze na poniższy przypadek:

Weźmy pierwszy przykład:

fs.readFileSync('./file-to-load', 'utf8');

I załóżmy że wywołujemy skrypt, w miejscu w którym się on znajduje na przykład będzie to ścieżka /home/user/myscript:

node load-file.js

Plik zostanie wczytany poprawnie.

Teraz drugi przypadek. Wywołujemy ten sam skrypt, ale na przykład ze ścieżki: /home/user czyli jeden katalog wyżej:

node myscript/load-file.js

Oto wynik:

Error: ENOENT: no such file or directory, open '/home/user/file-to-load'

Używając tej zmiennej będziemy mieli pewność, że plik zostanie wczytany poprawnie:

const fs = require('fs');

try {
  const data = fs.readFileSync(__dirname + '/file-to-load', 'utf8');
  console.log(data);
} catch (error) {
  console.log(error);
}

Praca, w trybie pełnoekranowym ma jeden duży plus: zwiększa nasze szanse na pracę w skupieniu. Przez to, że cały ekran jest zasłonięty możemy skoncentrować się na naszym zadaniu. Nie widzimy żadnych ikonek informujących, że czeka na nas wiadomość z komunikatora lub nieprzeczytany e-mail.

W Webstormie żeby przejść w tryb pełnego ekranu należy wybrać:

View -> Appearance -> Enter Full Screen

Domyślnie nie ma skrótu klawiszowego dla tej akcji. Dlatego warto go sobie ustawić. Jak ustawić skrót klawiszowy w Webstormie dowiesz się z tego wpisu.

Blog wzbogacił się dzisiaj o nowy dział: Książki

Znajdziesz tam listę książek które czytałem lub przesłuchałem. Listę będę aktualizował na bieżąco.