Do czego to służy?

Czy często masz tak, że któryś już raz piszesz ten sam tekst? Na przykład treść e-maila? Drobne frazy jak: "Pozdrawiam XYZ"? W którymś momencie robi się to nudne, a nawet wręcz uciążliwe. W którymś momencie doszedłem do wniosku, żeby to jakoś usprawnić.

Na szczęście jest rozwiązanie tego problemu! Espanso to darmowa aplikacja umożliwiająca użytkownikowi wykorzystanie skrótu tekstowego po wpisaniu którego zostanie wygenerowany szablon tekstowy wcześniej zdefiniowany przez użytkownika. Niesamowicie ułatwia i przyspiesza to pracę.

Aplikacja działa na systemach operacyjnych: Linux, Windows, MacOS. Została napisana w języku Rust.

Instalacja

W tym wpisie pokażę jak zainstalować wersję na Linux'a: a konkretnie na Ubuntu. Można to zrobić na kilka sposobów.

Możesz po prostu wykorzystać aplikację: "Ubuntu Software" i za pomocą wyszukiwarki znaleźć aplikację: Espanso.

Inny sposób to użycie komendy i instalacja za pomocą snapa. Wpisujemy:

sudo snap install espanso --classic

Już po zainstalowaniu aplikacji odpalamy komendę:

espanso start

Może się zdarzyć, że wyskoczy błąd, ponieważ może brakować jakichś pakietów. W takim wypadku wystarczy zainstalować brakujące pakiety i uruchomić powyższą komendę jeszcze raz.

Pierwsze kroki

Po uruchomieniu aplikacji wpisz obojętnie gdzie (na przykład w edytorze tekstowym) komendę:

:espanso

Zaraz po wpisaniu tego wyświetli się:

Hi there!

Konfiguracja

Jeśli chcesz dodawać własne szablony, musisz edytować plik konfiguracyjny. Gdzie znajduje się ten plik?

Wpisz komendę:

espanso path

Wyświetli się coś takiego:

Config: /home/user/.config/espanso
Packages: /home/user/.local/share/espanso/packages
Data: /home/user/.local/share/espanso

Pod Config znajduje się ścieżką do pliku z szablonami. Ten plik to: default.yml:

/home/user/.config/espanso/default.yml

Plik jest napisany w formacie YAML.

Wystarczy go otworzyć za pomocą edytora tekstowego i można dodawać własne szablony.

Istnieje jeszcze dodatkowa komenda, która uruchomi automatycznie edycję pliku z szablonami:

espanso edit

Uruchomi ona edycję pliku za pomocą domyślnego edytor tekstowego, w Twoim systemie operacyjnym.

Dodwanie własnego szablonu

Otwórzym plik default.yml do edycji. Zobaczymy coś takiego:

matches:
  - trigger: ":espanso"
    replace: "Hi there!"

Pod matches dodajemy nasze szablony. Z tej racji, że plik konfiguracyjny jest zapisany, w formacie YAML ważne są wcięcia.

Musimy zdefiniować dwie rzeczy:

Skrót - Po wpisaniu którego zostanie wygenerowany szablon tekstowy. Ustawiamy go pod trigger.

Treść - Szablon, którego chcemy używać. Ustawiamy go pod replace.

Czyli jeśli chcemy dodać coś w stylu:

Pozdrawiam

Marcin

Piszemy:

  - trigger: ":pzdr"
    replace: |
              Pozdrawiam

              Marcin

Przydatne komendy

Oto lista komend przydatnych do użycia:

• espanso start - Uruchamia aplikację w tle. Jeśli zrobiłeś to już wcześniej, to po ponownym uruchomieniu komputera nie będziesz musiał robić tego znowu.

• espanso status - Informuję Cię czy aplikacja jest uruchomiona.

• espanso path - Podaje ścieżki. Do pliku konfiguracyjnego itp.

• espanso edit - Otwiera plik konfiguracyjny (zawierający szablony) do edycji, w domyślnym edytorze tekstu.

• espanso log - Informuje o ewentualnych błędach. Jest to szczególne przydatnie kiedy pomylisz się, we wprowadzaniu danych do pliku z szablonami jeśli popełnisz jakiś błąd składniowy.

Podsumowanie

Espanso to aplikacja, która znacznie przyspieszyła moją pracę z tekstem. Ma bardzo wiele do zaoferowania. Oczywiście wszystkich rzeczy tutaj nie opisałem, ale możesz znaleźć więcej informacji na stronie z dokumentacją

We wrześniu opublikowałem 8 wpisów:

Angular:

• Material Icons
  
• Jak ustawić dynamiczną wartość atrybutowi elementu HTML?

Produktywność:

• Nie polegaj na motywacji

JavaScript:

• Jak dodać atrybut do elementu HTML?
  
• Canvas: Jak wyczyścić płótno?
  
• 10 funkcji przydatnych do pracy z tablicami

Inne:

• Recenzja: Endel aplikacja która pomoże Ci się skupić

Git:

• Jak cofnąć niewysłane zmiany?

Przeczytałem trzy książki:

• Kolej podziemna - Colson Whitehead
  
• Genialna przyjaciółka - Elena Ferrante
  
• Focus - Daniel Goleman

Przesłuchałem dwa audiobooki:

• Alien: Out of the Shadows - Tim Lebbon
  
• The Art of Noticing - Rob Walker

Poniżej znajdziesz listę funkcji, które przydają się podczas pracy z tablicami:

1. Find

Funkcja ta służy znalezienia pierwszego wystąpienia elementu spełniającego warunek wyszukiwania, w danym zbiorze.

Przykład:

const data = [
 { id: 1, title: 'Article 1' },
 { id: 2, title: 'Article 2' },
 { id: 3, title: 'Article 3' }
];
	
const itemFound = data.find(item => item.id === 2);
console.log(itemFound); // { id: 2, title: 'Article 2' }

Jeśli element nie zostanie znaleziony to funkcja find zwróci: undefined.

Jako pierwszy parametr przyjmuje: funkcję, która będzie wywoływana przy każdej iteracji do momentu znalezienia elementu lub dojścia do końca tablicy. Przyjmuje ona trzy parametry:

item - To aktualnie przetwarzany parametr.

index - To indeks aktualnie przetwarzanego elementu tablicy.

array - To tablica, na której została wywołana funkcja find.

W zależności od potrzeb można wywołać find także w taki sposób:

data.find(item => item.id === 2);

data.find((item, index) => {
  console.log('index: ', index);
  return item.id === 2
});

data.find((item, index, array) => {
  console.log('array: ', array);
  return item.id === 2
});

2. Filter

Funkcja jest przydatna kiedy chcemy przefiltrować dane na podstawie określonego warunku. Zwraca ona nową tablicę ze wszystkimi elementami, które spełniły warunek.

Przykład:

const data = [1, 'Hello World', {}, 7, 10];

const isNumber = (item) => !isNaN(item);
const onlyNumbers = data.filter(isNumber);
console.log(onlyNumbers); // [1, 7, 10]

Funkcja filter zwróci pustą tablicę, jeśli dla żadnego elementu filtrowanie tablicy nie zostanie spełniony warunek.

Funkcja filtrująca, którą przekazujemy jako pierwszy parametr do filter także przyjmuje trzy parametry identycznie, jak w przypadku funkcji find.

3. Map

Ta funkcja także tworzy nową tablicę. Służy ona do mapowania każdego elementu iterowanej tablicy i zmiany na format, jaki nas interesuje.

Przykład:

const data = [1, 2, 3];
const mapToObject = (item) => {
  return { value: item };
};
const result = data.map(mapToObject);

console.log(result); // [ { value: 1 }, { value: 2 }, { value: 3 } ]

4. Reduce

Ta funkcja także iteruje po każdym elemencie danego zbioru. Inną ciekawą jej cechą jest to, że w funkcji iteracyjnej przekazuje skumulowaną wartość z poprzednich iteracji oraz aktualnie iterowaną wartość.

Lepiej zobrazuje to poniższy przykład:

const numbers = [1, 2, 3, 4];

const total = (totalValue, currentValue) => totalValue + currentValue;
const result = numbers.reduce(total);
console.log(result); // 10

reduce jako pierwszy parametr przyjmuje funkcję zwaną reducer. Przyjmuje ona cztery parametry:

previousValue - Wartość poprzedniego wywołania funkcji iterującej.

currentValue - Wartość aktualnie iterowanego elementu.

currentIndex - Indeks aktualnie iterowanego elementu.

array - Iterowana tablica

Dodatkowo reduce przyjmuje drugi parametr: initialValue jest to wartość początkowa, która zostanie przekazana do funkcji iteracyjnej (reducer) przy pierwszym wywołaniu.

Przykład:

const numbers = [1, 2, 3, 4];

const total = (totalValue, currentValue) => totalValue + currentValue;
const result = numbers.reduce(total, 10);
console.log(result); // 20

5. Slice

Służy ona do pobrania fragmentu tablicy. Tworzy płytką kopię, w formie nowej tablicy.

Przykład:

const data = ['Barcelona', 'Juventus', 'Liverpool', 'Bayern Monachium'];

console.log(data.slice(1)); // [ "Juventus", "Liverpool", "Bayern Monachium" ]

console.log(data.slice(0, 2)); // [ "Barcelona", "Juventus" ]

console.log(data.slice(-1)); // [ "Bayern Monachium" ]

console.log(data.slice(1, -1)); // [ "Juventus", "Liverpool" ]

console.log(data.slice()); // [ "Barcelona", "Juventus", "Liverpool", "Bayern Monachium" ]

Przyjmuje dwa opcjonalne parametry:

start - Jest to indeks elementu (liczony od zera, jako pierwszy element), od którego miejsca ma pobrać dane. Można przekazać także wartość ujemną, oznacza ona miejsce elementu liczone od końca. Jeśli podany indeks wychodzi poza zakres tablicy, to zostanie zwrócona jako wynik pusta tablica.

end - Tutaj także przekazujemy indeks elementu. Za pomocą tego parametru określamy miejsce, do którego mają być pobierane dane. Może przyjąć wartość ujemną i działa podobnie jak, dla pierwszego parametru

6. Some

Funkcja służy do przeiterowania po elementach tablicy i sprawdzeniu, czy przynajmniej jeden element spełnia warunek określony w funkcji iterującej. Jako wartość zwraca true jeśli warunek został spełniony, w przeciwnym przypadku false

Przykład

const data = [1, 2, 3, 4, 5, 6, 7];

console.log(data.some(item => item > 3)); // true

console.log(data.some(item => item > 7)); // false

7. Unshift

Modyfikuje tablicę, dodając do niej jeden lub więcej elementów na jej początek. Jako wartość zwraca długość tablicy po tej operacji:

const data = [1, 2, 3];

data.unshift(4);
console.log(data);

data.unshift(5, 6, 7);
console.log(data);

8. Shift

Modyfikuje tablicę, usuwając pierwszy element. Dodatkowo jako wynik zwraca usunięty element, jeśli tablica jest pusta zwróci undefined:

const data = [1, 2, 3];

const removedElement = data.shift();
console.log('removedElement: ', removedElement); // 1
console.log('data: ', data); // [ 2, 3 ]

9. Pop

Modyfikuje tablicę, usuwając jej ostatni element. Dodatkowo jako wynik zwraca usunięty element, jeśli tablica jest pusta zwróci undefined:

const data = [1, 2, 3];

const removedElement = data.pop();
console.log('removedElement: ', removedElement); // 3
console.log('data: ', data); // [ 1, 2 ]

10. Includes

Informuje czy tablica zawiera określoną wartość:

const data = [1, 2, 3];

console.log(data.includes(3)); // true
console.log(data.includes(7)); // false

const colors = ['red', 'green', 'blue'];

console.log(colors.includes('green')); // true
console.log(colors.includes('black')); // false
console.log(colors.includes('Red')); // false

Przyjmuje dwa parametry:

searchElement - Wartość, jaką chcemy sprawdzić. Uwaga jeśli operujesz na stringach, weź pod uwagę, że wielkość liter ma znaczenie.

fromIndex - Indeks, od którego ma się zacząć przeszukanie. Domyślnie przeszukanie zaczyna się od pierwszego parametru: 0.

Od kilku dni zacząłem programować mały projekt w canvas. I wpadłem na problem jak wyczyścić całe płótno.

Canvas można wyczyścić na dwa sposoby.

HTML:

<canvas id="mycanvas" width="800" height="600"></canvas>

JavaScript:

  const canvasEl = document.querySelector("#mycanvas");
  const ctx = canvasEl.getContext('2d');

Sposób 1: clearRect

Wywołujemy metodę clearRect:

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

Sprawa jest prosta. W dwóch pierwszych parametrach podajemy współrzędne od których ma zacząć się się czyszczenie. W dwóch kolejnych podajemy szerokość i wysokość czyszczonego obszaru. Z tej racji, że chcemy wyczyścić całe płótno zaczynam od lewego-górnego punktu płótna, nastę;nie podajemy jego szerokość i wysokość dzięki czemu cały obszar zostanie wyczyszczony.

Sposób 2: Ustawienie wymiaru płótna na nowo

Ten sposób jest jeszcze prostszy niż poprzedni, ale jest niezalecany. Po pierwsze spowoduje to reset płótna: stracisz wszystkie ustawienia jak: transformaty, style wypełniania, obramowania itp. Podobno ten sposób jest także wolniejszy od tego pierwszego.

canvasEl.width = canvasEl.width;

Załóżmy mamy taki scenariusz: Zrobiłeś commit swojego kodu, ale nie wysłałeś tych zmian do repozytorium. Chciałbyś cofnąć commita.

Co można zrobić? Po pierwsze wywołaj komendę:

git reflog

Pojawi się lista z commitami. Ostatni commit - ten nasz nie puszczony to HEAD@{0}. Zakładam, że będziemy chcieli się cofnąć do przedostatniego commita(ostatniego wysłanego na serwer).

Mamy dwa sposoby:

Przypadek 1: Wycofanie commita bez straty zmiany

Piszemy:

git reset --soft HEAD@{1}

Ta komenda cofnie commita do stanu sprzed zatwierdzenia zmian. Czyli nie utracimy naszych zmian i będą oznaczone jako niezatwierdzone.

Przypadek 2: Wycofanie commita z usunięciem zmian

git reset --hard HEAD@{1}

Tutaj commit także zostanie confięty, ale stracimy dodatkowo nasze zmiany.