Magazyn sieciowy

HTML 5 udostępnia programiście API do zapisywania i przechowywania danych o nazwie magazyn sieciowy. Mamy dwa rodzaje magazynów: magazyn lokalny: local storage oraz magazyn sesji: session storage.

Oba mechanizmy korzystają z tego samego interfejsu. Oznacza to, że wszystkie metody dostępne w magazynie lokalnym będą dostępne, w magazynie sesji.

Można zapytać, po co powstały i to jeszcze dwa dodatkowe funkcjonalności skoro istnieje coś takiego jak: cookies? To, co różni ciastka od local/session storage to, że dane w tym drugim są przechowywane wyłącznie po stronie klienta (po stronie przeglądarki). Nie można się do nich dostać po stronie serwera tak jak w przypadku ciastek. Ciastka mają także pewne ograniczenia co do ilości przechowywanych, w nich danych. Wprawdzie takie ograniczenie istnieje także po stronie magazynu sieciowego, ale tam możemy umieścić znacznie więcej danych.

Istnieje pewna różnica między magazynem lokalnym a sesji, ale o tym w dalszej części wpisu. Skupmy się teraz na wspólnym interfejsie.

API magazynu sieciowego

Zapis i odczyt działa na zasadzie: klucz --> wartość.

Do magazynu lokalnego odwołujemy się za pomocą obiektu: localStorage. Do magazynu sesji mamy dostęp poprzez obiekt: sessionStorage.

Z tego powodu, że interejs dla obu magazynów jest taki sam, w przykłądach przyjąłem jedną nazwę dla magazynu storage. Wystarczy, że ją podmienisz na localStorage lub sessionStorage, a będzie działać.

Do pracy z danymi przyda nam się takie API:

Zapis danych

Jeśli chcesz zapisać lub nadpisać dane możesz skorzystać z metody: setItem:

storage.setItem('someData', 'My data');

Pierwszy parametr to unikalny klucz, którym będziemy się posługiwać. Jeśli już taki klucz istnieje i go użyjesz do zapisu, to po prostu nadpiszesz poprzednie dane. Drugi argument to dane, które chcemy zapisać.

Istnieje inny sposób na zapis:

storage['someData'] = 'My data';
storage.extraData = '123';

Odczyt danych

Do pobrania zapisanych danych możemy użyć: getItem:

const data = storage.getItem('someData');

lub:

const data = storage['someData'];
const extraData  = storage.extraData;

Usuwanie danych

Jeśli chcemy skasować dane pod konkrentym kluczem korzystam z funkcji: removeItem:

storage.removeItem('someData');

Kasowanie wszystkich danych

Jeśli chcesz skasować wszystko, co zawiera magazyn sieciowy, użyj funkcji: clear:

storage.clear();

Metoda key

Obiekt magazynu sieciowego zawiera właściwość length. Zwraca ona ilość przechowywanych elementów, w magazynie:

storage.length;

Z kolei key przyjmuje jeden parametr: indeks danego elementu. W rezultacie zwraca nazwę klucza. Przykład:

for (let i = 0; i < storage.length; i++) {
  const key = storage.key(i);
  const value = storage[key];
	
  console.log(key, value);
}

Tylko uwaga: nie będziesz mieć gwarancji, że kolejność jest zachowana, w jaki sposób je dodałeś do magazynu-implementacja zależy od przeglądarki.

Jak zapisać/odczytać obiekt?

Do magazynu sieciowego można zapisać tylko łańcuch znaków. Bardziej złożone typy danych musimy przekonwertować do stringa i wtedy możemy dane zapisać:

Zapis obiektu

const myObject = {
  title: 'Some object',
	amount: 7,
	tags: ['tag 1', 'tag 2', 'tag 3']
}
const objectToSave = JSON.stringify(myObject);
storage.setItem('myObject', objectToSave);

Odczyt obiektu

Po wczytaniu zapisanego obiektu musimy dokonać konwersji ciągu znaków w obiekt:

const myObject = JSON.parse(storage.getItem('myObject'));

console.log(myObject.title);

Różnice między local a session storage

Magazyn dzieli się na dwa rodzaje: magazyn lokalny (local storage) oraz magazyn sesji (session storage). Oba mają ten sam interfejs. Ale są różnice między nimi:

Magazyn lokalny

Przede wszystkim dane przechowywane, w tym magazynie są trwałe — w takim sensie, że gdy użytkownik zamknie stronę, a następnie do niej wróci, to dane dalej tam będą. Dane, w takim magazynie przechowywane są, w obrębie domeny. Uwaga: znaczenie ma także protokół! Jeśli zapiszesz dane pod protokłem: http i będziesz próbować wczytać dane pod https mimo takiej samej domeny nie będziesz mieć do nich dostępu.

Dostęp do magazynu lokalnego mamy poprzez globalny obiekt o nazwie: localStorage.

Magazyn sesji

Dane zapisane, w magazynie sesji są trwałe do momentu jej zamknięcia, to jest do zamknięcia zakładki przeglądarki.

Dostęp do magazynu sieci mamy poprzez globalny obiekt: sessionStorage.

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;