We wrześniu opublikowałem 8 wpisów:
Angular:
Produktywność:
JavaScript:
Inne:
Git:
Przeczytałem trzy książki:
Przesłuchałem dwa audiobooki:
Poniżej znajdziesz listę funkcji, które przydają się podczas pracy z tablicami:
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
});
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.
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 } ]
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
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
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
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);
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 ]
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 ]
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');
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.
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:
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.
git reset --hard HEAD@{1}
Tutaj commit także zostanie confięty, ale stracimy dodatkowo nasze zmiany.
Pewnie nie raz miałeś takie uczucie podczas pracy, że nie możesz się na niczym skupić. W takim momencie jakość pracy mocno spada. Chyba, że uda nam się wrócić na właściwe tory. Może nam, w tym pomóc skupienie poprzez dźwięk.
W sierpniu kupiłem sobie aplikację na smartfona o nazwie: Endel. Pozwala Ci między innymi lepiej skupić się poprzez generowanie dźwięku. Zakładasz słuchawki, odpalasz aplikację, i tyle. To naprawdę działa!
Jak już wspomniałem aplikacja jest płatna. Płatność działa na zasadzie subskrypcji. Można wybrać subskrypcję miesięczną lub roczną. Ja za pakiet roczny zapłaciłem: 100 zł. Wprawdzie korzystam z tej aplikacji od miesiąca, ale już zamierzam przedłużyć subskrypcję na kolejny rok. Aplikację można pobrać zarówno na telefony z iOS lub Androidem.
Używam jej głównie do skupienia się podczas pracy, ale ona służy nie tylko do tego. Jeśli potrzebujesz się zrelaksować, wybierz tryb: "Relax". Jest też specjalny motyw, który pomoże Ci zapaść, w głęboki sen. Jesteś zestresowany? Z odpowiednim dźwiękiem uspokoisz się.
Masz do dyspozycji kilka gotowych scenariuszy jak: medytacja(testowałem - to też działa!), czytanie, praca głęboka i wiele innych. Jest też specjalny motyw na ćwiczenia fizyczne.
Twórcy skuteczność swojej aplikacji opierają na badaniach naukowych, które wykazują że dźwięk ma wpływ zarówno na nasze samopoczucie fizyczne i psychiczne.
Możesz wybrać interesujący Cię motyw dźwiękowy, a także ustawić czas ile dana sesja powinna trwać. Firma tworząca Endel współpracuje także z różnymi artystami, którzy tworzą motywy muzyczne, które można dodać do aplikacji.
Podsumowując to był bardzo dobry zakup! Aplikacja pomaga mi lepiej skupić się na pracy, a co za tym idzie moja produktywność wzrasta. Jeśli szukasz czegoś takiego, to gorąco polecam.