Skrypty

Każdy, który chodź trochę programował we frontend prędzej czy później spotkał się z plikiem package.json. Zawiera on różnego rodzaju zależności, które są wykorzystywane w tworzonym projekcie. Często w tym pliku znajdują się także skrypty, które na przykład uruchamiają projekt lub testy. Spójrzmy na poniższy przykład:

{
   ...
   "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }
}

Powyższy fragment pochodzi z pliku package.json wygenerowanego przez Angulara. Pod scripts znajduje się lista kilku zadań/skryptów gotowych do uruchomienia za pomocą składni:

npm run nazwa-skryptu

npm run start

npm run build

Akurat w tym przypadku skrypty składają się z maksymalnie dwóch komend jak: ng serve. Takie przechowywanie skryptów jest szczególnie przydatne gdy polecenia są dość długie i zawiłe.

Więc skrypty pozwalają nam na usprawnienie pracy. Webstorm udostępnia funkcjonalność która pozwala na jeszcze wygodniejszą obsługę takich skryptów.

Konfiguracja w Webstorm

Samo wklepywanie w terminal poleceń nie wydaje się czymś trudnym. Z drugiej strony wyobraź sobie przypadek kiedy potrzebujesz się przełączać między różnymi skryptami. Za każdym razem musisz wklepywać npm run .... A nie lepiej użyć skrótu klawiszowego i w jeszcze szybszy sposób przełączać się między zadaniami? Ja wybieram tą drugą opcję.

Żeby skonfigurować skrypt przejdźmy do pliku package.json. Zauważ, że przy każdym skrypcie wyświetla się zielona strzałka:

Jeśli w nią klikniemy wyświetli się popup:

Mamy kilka opcji: możemy uruchomić skrypt. Włączyć go w trybie debugowania lub stworzyć dla niego konfigurację: Modify [script name] Configuration....

Ten popup możemy także wyświetlić za pomocą skrótu klawiszowego: Alt + Enter. Jeśli chcemy dany skrypt uruchomić bezpośrednio wystarczy kliknąć: Ctrl + Shift + F10. Te dwa skróty działają tylko gdy jesteś w pliku package.json.

My chcemy stworzyć konfigurację, która sprawi, że będziemy mogli uruchomić skrypt z dowolnego miejsca w projekcie. Wybieramy opcję: Modify [script name] Configuration...:

Nadajemy nazwę i zatwierdzamy. Mamy skonfigurowany nasz skrypt!

Obsługa skryptów

Po dodaniu skryptu zostanie on wyświetlony u góry w liście skryptów:

Skrót klawiszowy: Shift + F10 spowoduje uruchomienie skryptu, który wyświetla się w tej liście. Inaczej mówiąc bieżący skrypt.

Jeśli chcemy uruchomić inny skrypt niż bieżący najpierw klikamy skrót klawiszowy: Ctrl + Alt + F10:

Wybieramy skrypt do uruchomienia.

Żeby zatrzymać aktualnie uruchomiony skrypt klikamy: Ctrl + F2

Czym jest NVM?

NVM to skrót od: Node Version Manager. Jest to narzędzie, które ułatwi Ci życie w pracy związanej z NodeJS. Wyobraź sobie, że masz kilka aplikacji, które korzystają z różnych wersji NodeJS. Wystarczy jedna komenda i możesz szybko przełączyć się na daną wersję. Jeśli pracujesz z NodeJS i nie znasz tego narzędzie zachęcam do zapoznania się z nim.

Instalacja

NVM możesz zainstalować na takich systemach jak: Linux, MacOS, Windows. Poniżej pokazuję proces instalacji na Linuxie:

Wywołaj komendę:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

Czasami zdarza się że po instalacji i użyciu komendy nvm terminal informuje nas, że nie może znaleźć takiego polecenia. Zwykle pomaga zamknięcie terminalu i otwarcie go na nowo. Ale i jeśli to nie pomoże to dodatkowo wywołaj:

source ~/.profile

Przydatne komendy

Poniżej przedstawiam listę komend do codziennej pracy z NVM:

Instalacja/użycie konkretnej wersji

nvm use version-of-nodejs

Informacja o aktualnie używanej wersji

nvm current

Lista zainstalowanych wersji

nvm list

Ustawienie domyślnej wersji

nvm alias default 12.10.0

Lista możliwych wersji do zainstalowania

nvm ls-remote

Uruchomienie skryptu w podanej wersji NodeJS

nvm run 12.13.1 script.js

Co to jest Angular Material?

Obserwując rozwój aplikacji internetowych można dojść do wniosku, że z biegiem czasu możemy tworzyć coraz bardziej złożone funkcjonalności z mniejszym nakładem pracy. Dzieje się tak dlatego, bo używamy często narzędzi, które ktoś za nas napisał. Można to porównać do budowy domu z klocków. Pozwala to oczywiście na oszczędność czasu i skupieniu się na naszym celu. Angular Material to biblioteka, która pomoże Ci w łatwiejszym budowaniu interfejsu użytkownika.

Używając Material masz na start gotowe komponenty: jak kontrolki do formularzy, przyciski, popupy i wiele więcej.

Instalacja

Zanim zaczniemy instalację zakładam, że masz już postawioną aplikację Angular.

Żeby zacząć używać bibliotekę musimy ją zainstalować. Wejdź do katalogu swojej aplikacji i wywołaj komendę:

ng add @angular/material

Zacznie się proces instalacji. Będziesz pytany przez instalator o: wybranie motywu graficznego, czy ustawić globalnie style odnośnie czcionki(wybierz 'n' to Cię raczej teraz nie interesuje), czy ma być dodana obsługa efektów animacji(zalecam 'y'). To tyle jeśli chcesz poznać więcej szczegółów znajdziesz je pod tym: linkiem.

Pierwsze użycie

Stwórzmy plik o nazwie: material.module.ts o takiej zawartości:

import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  exports: [
  	MatInputModule
  ]
})
export class MaterialModule {}

Żeby zacząć używać któryś z komponentów Material trzeba je najpierw zaimportować. W tym przykładzie importujemy komponent do obsługi pól tekstowych.

Drugi krok to dodanie tego modułu do pliku: app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dla uproszczenia tego wpisu zakładam, że działamy na komponencie podstawowym czyli: app.component.ts, app.component.html.

Do pliku: app.component.ts dodaj:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  field = new FormControl();
}

Dobra ostatnia rzecz to po prostu dodanie naszej kontrolki do szablonu. Dodaj taki fragment do szabonu app.component.html:

<div *ngIf="field.value">
  Dzisiaj zjem pizzę: {{ field.value }}
</div>

 <div>
	<mat-form-field>
		<mat-label>Twoja ulubiona pizza?</mat-label>
		<input matInput [formControl]="field" placeholder="Pizza">
	</mat-form-field>
</div>

Krótkie wyjaśnienie:

mat-form-field - to kontener, w którym przechowujemy kontrolkę z biblioteki Material. To pole jest wymagane.

mat-label - Zwykła etykieta. Dodatkowo: w tym przypadku jeśli pole tekstowe nie ma fokusa, to wartość podana w tym tagu jest wyświetlana w kontrolce jako placeholder. Opcjonalne.

matInput - To dyrektywa która informuje, że chcemy skorzystać z modułu: MatInputModule. Tej dyrektywy możemy także użyć dla tagu textarea. To jest wymagane.

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]);