Ostatnio, w pracy stanąłem przed takim problemem: musiałem na podstawie pewnego zbioru danych(zwykła tablica stringów) posortować ten zbiór i wykorzystać go do wyświetlenia danych.

W JavaScript to nic trudnego wystarczy wywołać metodę: sort... No, ale z tą metodą jest pewien problem. Przykład:

const data = ['option 5', 'option 2', 'option 4', 'option 3', 'option 1'];
data.sort();
console.log(data);

Wyświetli:

Array(5) [ "option 1", "option 2", "option 3", "option 4", "option 5" ]

Jak widać metoda sort posortowała elementy tablicy na której została funkcja wywołana.

A co w przypadku, gdy nie chcemy zmieniać oryginalnej tablicy, a po prostu dostać nową posortowaną?

Rozwiązanie:

const data = ['option 5', 'option 2', 'option 4', 'option 3', 'option 1'];
const sortedData = [...data].sort();

console.log('data: ', data);
console.log('sortedData: ', sortedData);

Wyświetli:

data: Array(5) [ "option 5", "option 2", "option 4", "option 3", "option 1" ]
sortedData: Array(5) [ "option 1", "option 2", "option 3", "option 4", "option 5" ]

Skorzystaliśmy tutaj z operatora spread ...data. Zapis:

[...data]

Tworzy po prostu kopię z oryginalnej tablicy. Następnie sortujemy kopię i uzyskujemy to czego potrzebowaliśmy :)

Od uruchomienia minął już niemal miesiąc więc przygotowałem małe podsumowanie co udało mi się dodać, w ciągu tego okresu.

Przede wszystkim zakładałem, że będę dodawać wpis co tydzień i to się udało osiągnąć. A nawet więcej! W kwietniu nie licząc tego wpisu udostępniłem: 6 wpisów.

Poniżej lista wpisów, które dodałem w tym miesiącu:

• Wpis powitalny

SSH:

• Jak zablokować logowanie się przez roota
• Jak zarządzać połączeniami przez SSH

Webstorm:

• Webstorm: Git i podgląd schowka
• Webstorm i Live Templates

Inne:

• PM2: Jak uruchomić skrypt działający w tle

Mam kilka pomysłów czym zająć się, w maju. Zobaczymy co z tego wyjdzie :)

Wychodzę z założenia, że jeśli można ułatwić sobie pracę należy starać się to robić, jak najczęściej. W Webstormie istnieje mechanizm o nazwie: Live Templates służy on do korzystania z wcześniej przygotowanych fragmentów kodu jest to szczególnie przydatne kiedy często korzystamy z powtarzalnych fragmentów. W tym wpisie opiszę, jak się nim posługiwać.

Lista szablonów

Webstorm posiada wbudowaną listę fragmentów kodu gotowych do użycia. Dodatkowo możemy zdefiniować czy dany szablon kodu ma być dostępny w TypeScript, JavaScript, Angular, React.

Najpierw dowiemy się gdzie znajduje się lista fragmentów kodu do użycia. W edytorze wciśnij kombinację klawiszy:

CTRL + SHIFT + A

W polu do wyszukiwania wpisujemy:

Live templates

Po wybraniu tej opcji wyświetli się lista szablonów gotowych do użycia:

Szablony są zgrupowane, w różnych kategoriach jak: JavaScript, HTML, Angular, React czy Vue.

Dodanie własnego szablonu

Dowiedzmy się teraz jak dodać własny szablon. Załóżmy, że chcemy dodać taki oto kod:

it('should ', () => {
  // given
	
  // when
	
  // then
});

1. Zaznaczamy kod który chcemy zmienić w szablon.

2. Na klawiaturze klikamy: CTRL + SHIFT + A

3. Z listy wybieramy opcję: Save as Live Template...

Wyświetli się okno do stworzenia szablonu.

W polu: Abbreviation wpisujemy nazwę skrótu za pomocą którego będziemy wywoływać ten szablon. Na przykład w tym przypadku: it-unit. Ważne żeby nazwa skrótu była unikalna. W polu Description możemy dodać opis szablonu ale nie jest to wymagane. Jeśli do szablonu chcielibyśmy coś jeszcze dodać to możemy to zrobić, w polu Template text.

Wywołanie szablonu

Czas teraz na skorzystanie ze stworzonego szablonu. Przejdź do edytora i zacznij pisać: it- z listy wybierz it-unit i kliknij klawisz Enter lub Tab szablon zostanie dodany.

Stworzony fragment kodu możemy użyć także w inny sposób. Kliknij: CTRL + J wyświetli się lista szablonów zacznij wpisywać nazwę swojego szablonu. Wybierz z listy interesujący szablon i potwierdź swój wybór.

Parametry szablonu

Oprócz samego szablonu możemy także definiować jego parametry. Wróćmy do naszego przykładu i zedytujmy go do takiej postaci:

it('should ', () => {
  // given
  $GIVEN$
	
  // when
 $WHEN$
	
  // then
  $END$
});

Parametry w szablonie tworzymy za pomocą składni:

$NAZWA_PARAMETRU$

Z kolei: $END$ wskazuje na miejsce gdzie ma się znaleźć kursor kiedy pozostałe parametry zostaną wypełnione.

Jeszcze jedna uwaga na temat nawigacji pomiędzy parametrami. Jeżeli chcesz przeskoczyć do następnego parametru wystarczy wcisnąć klawisz Enter lub Tab. Ale jeśli Twój parametr składa się więcej niż z jednej linijki kodu i chcesz przejść do kolejnej wciśnij: SHIFT + ENTER lub SHIFT + TAB to sprawi, że nie przeskoczysz do następnego parametru.

Klasyczne połączenie się z serwerem przez SSH w terminalu wygląda tak:

ssh user@host

A co jeśli możnaby ten zapis skrócić? Na przykład do takiej postaci:

ssh myserver

Nie trzeba pamiętać nazwy użytkownika i hosta, wystarczy skrót.

Można to zrobić, w bardzo prosty sposób. SSH posiada plik konfiguracyjny o nazwie: config. W Ubuntu znajduje się on, w ścieżce:

~/.ssh/config

Zedytujmy ten plik:

nano ~/.ssh/config

Wpisujemy dane:

host myserver
    hostname: 123.123.11.22
    user john

W pierwszej linijce podajemy nazwę skrótu, którym będziemy się posługiwać przy połączeniu. W drugiej linijce wpisujemy adres hosta, a w trzeciej nazwę użytkownika na jakiego chcemy się zalogować.

Teraz możemy napisać w terminalu:

ssh myserver

Uwaga: Upewnij się że Twój klucz publiczny znajduje się na serwerze z którym zamierzasz się połączyć.

Podgląd schowka

Webstorm posiada bardzo wygodną funkcjonalność do podglądu tego, co znajduje się w schowku(ang.: stash) Gita.

Załóżmy, że masz w schowku jakiś kod. Chcesz wiedzieć co aktualnie się tam znajduje. Lub przełączasz się między gałęźami(ang.: branches) i w pewnym momencie chcesz użyć tylko niektórych fragmentów kodu na aktualnej gałęzi. Wszystko to można uzyskać, w szybki sposób za pomocą Webstorma.

W tym wpisie przedstawię jak obsłużyć schowek od strony GUI, a nie za pomocą komend :)

Z menu wybieramy: Git -> Uncommitted Changes -> Unstash changes...

Jeśli coś znajduje się w schowku zostanie to wyświetlone na liście.

Żeby sprawdzić co jest, w schowku wybieramy element z listy i klikamy opcję View. Wyświetli się lista zedytowanych plików. Wystarczy dwukrotnie kliknąć w dany plik aby sprawdzić, co tam się znajduje.

Za pomocą edytora możemy wybrać interesujące nas fragmenty lub wszystkie zmiany.