Praca z kodem bywa często uciążliwa, szczególnie gdy skaczemy pomiędzy dużą ilością plików.

Mając dużo zakładek, chcemy przeskoczyć do pliku, którego zakładka akurat nie jest w zasięgu naszego wzroku. Czujemy przytłoczenie.

Ten problem można obejść na kilka sposobów, jednym z nich jest szybki podgląd na listę plików, które były ostatnio edytowane.

W Webstorm mamy taki skrót klawiszowy:

CTRL + E

Lub z menu:

View -> Recent files

Wyświetli się okno z listą plików.

Jedna rzecz, na którą warto zwrócić uwagę: na liście znajdą się pliki zarówno edytowane jak i te ostatnio otwarte. Na przykład jeśli otworzysz sobie jakiś plik, ale go nie edytujesz, to wskoczy on na samą górę listy.

Jeśli chcemy mieć podgląd tylko zmienionych plików, klikamy jeszcze raz skrót klawiszowy: CTRL + E.

Na samej liście może się znajdować duża liczba plików. Żeby szybko znaleźć interesujący nas plik, możemy skorzystać z filtra: po prostu piszemy na klawiaturze nazwę pliku i sama lista zostanie skrócona.

Operator from

Operator from zamienia podaną, w parametrze wartość w obiekt typu Observable.

Za pomocą tego operatora możesz stworzyć Observable z tablicy, Promise lub iterowalnego obiektu.

Przykłady

Przykład 1

import { from } from 'rxjs';

const observable = from([1, 2, 3]);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: 1
// value: 2
// value: 3

Przykład 2

W przypadku gdy jako parametr przekażemy ciąg znaków operator from potraktuje to jako tablicę znaków. Oznacza to, że każdy znak zostanie wysłany jako pojedyncza wartość.

import { from } from 'rxjs';

const observable = from('Hello');
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: H
// value: e
// value: l
// value: l
// value: o

Jeśli przekażemy łańcuch znaków za pomocą tablicy, ten tekst zostanie przesłany jako jedna wartość:

import { from } from 'rxjs';

const observable = from(['Hello']);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: Hello

Przykład 3

Za pomocą tego operator możemy zmienić Promise w Observable:

import { from } from 'rxjs';

const promise = new Promise(resolve => resolve('Some value'));

const observable = from(promise);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: Some value

Przykład 4

Załóżmy, że mamy dokument HTML, który zawiera taką strukturę:

<h2>Some header 1<h2>

...

<h2>Some header 2<h2>

...

<h2>Some header 3<h2>

I chcemy pobrać treść z nagłówków h2. Przykład:

import { from } from 'rxjs';

const allH2 = document.querySelectorAll('h2');

const observable = from(allH2);
observable.subscribe(value => console.log('value: ', value.innerText));

// Wynik:
// value: Some header 1
// value: Some header 2
// value: Some header 3

Angular udostępnia prosty mechanizm integracji Frontend'u z Backendem. Nazywa się proxy.

Załóżmy, że nasza aplikacja (frontend) działa na porcie: 4200. Mamy także backend, który działa na porcie: 3000. W tym przypadku mamy dwa różne porty, a to jest problem, ponieważ nie jesteśmy w stanie się odwołać do skryptu backendowego.

Ten problem możemy łatwo rozwiązać, konfigurując proxy.

Konfiguracja proxy

Zanim opiszę jak to zrobić, najpierw kilka słów jak to działa. Proxy sprawia, że frontend, który działa na przykład na porcie 4200 będzie mógł się odwołać do backendu, który działa pod innym portem.

Czyli na przykład mamy backend takim API:

• getUsers
• addUser

Za pomocą proxy będziemy mogli odwołać się do tego API na przykład tak: http://localhost:4200/api/getUsers.

Proxy możemy skonfigurować, w dwóch krokach:

Stwórz plik proxy.conf.json

Zwartość pliku: proxy.conf.json:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": "true",
    "pathRewrite": {"^/api": ""}
  }
}

W polu target podajemy adres, pod którym działa nasz backend.

Dzięki takiej konfiguracji będziemy mogli we frontendzie wywoływać API, w taki sposób: http://localhost:4200/api/someEndpoint.

Dodanie pliku proxy.conf.json

Teraz zedytujmy plik: package.json i w scripts dodajmy taką linijkę:

{
  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json"
  },
}

To wszystko. Uruchamiamy backend i frontend:

npm run start

Mamy dostęp do backendu we frontendzie.

Uwaga: Tego sposobu używa się zwykle, w trybie development. Jeśli chodzi o wersję produkcyjną, to można stworzyć virtual host.

Model danych

Biblioteka Mongoose dysponuje kilkoma walidatorami, które określamy w modelu dokumentu:

const PersonSchema = new Schema({
name: { type: String, required: true },
age: { type: Number, min: 18 }
});
const PersonModel = mongoose.model('person', PersonSchema);

Spróbujmy zapisać model danych, który jest niepoprawny:

const noNamePerson = new PersonModel({ age: 16 });
try {
await PersonModel.create(noNamePerson);
} catch(error) {
console.log('error: ', error);
}

W tym przypadku zwróci błąd walidacji.

Walidacja danych

A co w przypadku, gdybyśmy chcieli sprawdzić poprawność danych przed ich zapisem?

Istnieje metoda validateSync, która poinformuje nas o ewentualnych błędach:

const noNamePerson = new PersonModel({ age: 16 });

const validateErrors = noNamePerson.validateSync();
console.log(validateErrors);

try {
await PersonModel.create(noNamePerson);
} catch(error) {
console.log('error: ', error);
}

Jeśli nie ma błędów zmienna validateErrors będzie pusta. W przypadku błędów walidacji zwróci obiekt, do którego można się dostać w taki sposób:

const validateErrors = noNamePerson.validateSync();
console.log(validateErrors.errors.title);
console.log(validateErrors.errors.age);