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.

Od już dłuższego czasu, w pracy spędzam czas na implementacji szeroko pojętej dostępności(ang.: accessibility). Ostatnio musiałem dla atrybutu aria-label ustawić wartość, która jest zmienna. Napisałem sobie prostą funkcję, która zwraca wartość dla tego atrybutu.

Tylko nie mogłem tego podpiąć, w taki sposób:

<button aria-label="{{ getAriaLabel() }}">...

Ponieważ przy kompilacji otrzymałem taki błąd: Can't bind to 'aria-label' since it isn't a known property of 'button'

Jeśli wartość atrybutu jest dynamiczna należy posłużyć się zapisem:

<button attr.aria-label="{{ getAriaLabel() }}">...

Przedrostek attr. załatwia sprawę. To się odnosi oczywiście do wszystkich atrybutów.

Załóżmy, że potrzebujesz za pomocą kodu dodać atrybut do elementu HTML.

Ustawmy atrybut: aria-label. W tym wpisie opiszę dwa sposoby jak można to zrobić.

Sposób 1: setAttribute

Pierwszy sposób jest bardzo prosty: wywołujemy na elemencie któremu chcemy ustawić atrybut funkcję: setAttribute. Przykład:

const buttonEl = document.querySelector('#my-button');
buttonEl.setAttribute('aria-label', 'Some button');

Pobieramy referencę do elementu HTML i ustawiamy wartość atrybutowi.

Sposób 2: createAttribute i setAttributeNode

Druga metoda jest trochę bardziej rozbudowana:

const buttonEl = document.querySelector('#my-button');
const attribute = document.createAttribute('aria-label');
attribute.value = 'Some button 2';
buttonEl.setAttributeNode(attribute);

Najpierw za pomocą funkcji: createAttribute tworzymy atrybut. Nadajemy mu wartość, a na koniec za pomocą: setAttributeNode przypisujemy atrybut do elementu. Pierwsza metoda jest jednak wygodniejsza ;)

Czytając tytuł tego wpisu można odnieść wrażenie że postawiłem krzyżyk na motywacji. Ale to nie tak.

Motywacja popchneła mnie do stworzenia tego bloga. Motywacja sprawiła że zacząłem uczyć się rysować. Mógłbym tak wymieniać wiele rzeczy, które zacząłem dzięki motywacji. No właśnie kluczowe słowo: zacząłem.

Problem z motywacją

Ile razy zdarzyło Ci się wpaść na ciekawy pomysł tak że porwał Cię na całego? Co wtedy czułeś: pewnie euforię, podniecenie oraz przypływ energii. Wyznaczamy sobie cel i dążymy do niego. Na początku jest fajnie bo motywacja nas napędza do działania. Ale czas leci, w nasze poczynania wkrada się rutyna. Czujemy, że nie jest tak dobrze jak było na początku.

Podejmując decyzję o stworzeniu własnego bloga obiecałem sobie, że będę trzymał się jednej zasady: będę wypuszczać minimum jeden wpis na tydzień. Pisząc ten wpis mogę śmiało powiedzieć, że trzymam się tego celu - blog działa od kilku miesięcy, a wpisy się pojawiają. Dlaczego się na to zdecydowałem? Nie raz widziałem jak autorzy blogów na początku z pełnym zapałem dodawali swoje wpisy, ale w pewnym momencie ich blogi zaczeły powoli zamierać. Wpisów pojawiało się coraz mniej, aż w końcu między jednym wpisem a drugim powstaje kilku miesięczna luka. Dlaczego tak się dzieje?

Spójrzmy na ten schemat:

Na początku jest motywacja. Jest ona dobra bo daje nam siły do wykonania zadania. Zmotywowani wyznaczamy sobie cel. Motywację często czujemy bo koncentrujemy się na wynikach jakie chcemy osiągnąć zapominając o pracy jaka na nas czeka. Kiedy wyznaczamy sobie cel długoterminowy motywacja da nam siły tylko na początku naszych działań. Później pojawia się rutyna, a nasza motywacja spada. Często wtedy mówimy: "Nie mam motywacji", "Nie mogę się zmotywować". Mamy wtedy kłopot.

Motywacja to emocja. Emocja ma to do siebie, że się pojawia, ale dość szybko zanika. Jest takie pojęcie: słomiany zapał ono dobrze określa czym jest motywacja. Dlatego nie warto na niej polegać!

W takim razie co z tym można zrobić?

Rozwiązanie? Dyscyplina!

Dyscyplina pozwala na osiągniecie wyznaczonego celu. Szczególnie wtedy, gdy nasz cel jest długoterminowy. Nawet wtedy, gdy wpadamy w rutynę dnia codzinnego. Poza tym pamiętajmy, że nie zawsze będziemy pracować nad interesującym zadaniem. Realizując zadanie szczególnie takie, które będzie trwało dłuższy czas warto mieć świadomość tego, że przyjdą gorsze dni. Mając wypracowaną dyscyplinę nie będziemy polegać na naszych emocjach, ale na wypracowanym nawyku.

Masz cel długoterminowy? Stwórz dyscyplinę:
1 Ustal, w jakie dni zamierzasz nad nim pracować
2 Ile czasu zamierzasz poświęcić danego dnia nad realizacją celu?
3 Zacznij działać
4 Zamień to w nawyk

Ja na przykład stworzyłem dyscyplinę pisania wpisów do tego bloga: pracuję nad wpisami 3 razy w tygdoniu. W zależności od dnia na pisanie poświęcam od 30 minut do 1 godziny.

Dyscyplinę możemy wypracować za pomocą:
1 Poprzez planowanie
2 Wyznaczaj bloki czasowe
3 Korzystaj z TODO listy
4 Działanie zamieniaj w nawyk
5 Jeśli cel jest duży rozbijaj go na mniejszy - jasno sprecyzowany

Podsumowanie

Możesz polegać na motywacji i jak surfer sunąć po fali, ale musisz mieć świadomość tego, że fala, w którymś momencie się kończy. Raczej prędzej niż później. Wtedy chęci do pracy znacznie spadają.

Ale możesz też wykorzystać falę(motywację), która Cię unosi do dania sobie rozpędu do pracy w dłuższej perspektywie poprzez zbudowanie dyscypliny. Decyzja należy do Ciebie.

Ikony to użyteczne elementy interfejsu użytkownika. Często na stronach lub aplikacjach internetowych są to zamienniki tekstu. Są bardzo intuicyjne - użytkownik nie musi się zastanawiać po prostu wie, że jak w to kliknie znajdzie to czego szuka.

Nic dziwnego, że twórcy często korzystają z ikon, w swoich aplikacjach. Nieraz korzystałem z Font Awesome.

Angular Material także oferuje spory zestaw ikon gotowych do użycia. Możesz używać ich nawet wtedy, gdy nie korzystasz z Angulara, ale o tym za chwilę.

Lista ikon

Zanim podam przykład, jak używać te ikonki warto najpierw poznać gdzie znajdziemy ich listę.

Listę ikon znajdziesz tutaj.

Ikony są podzielone na kategorie. Oczywiście jest wyszukiwarka do szybkiego dostępu do interesującej nas ikony.

Przykłady użycia

Kiedy w swoim projekcie aktywujesz obsługę angular material do pliku index.html dodawana jest linijka:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Ona wystarczy żeby zacząć używać tych ikon - i nie musi to być aplikacja napisana w Angularze!

Kiedy wejdziesz na stronę z listą kliknij na jakąś ikonę. Po prawej stronie wyświetli się panel. Zauważ, że każda ikona zawiera swój unikalny identyfikator. Na przykład dla ikony Menu będzie to: menu. Gdy chcemy użyć ikony piszemy:

<span class="material-icons">menu</span>

Czyli używam jakiegoś tagu HTML, korzystamy ze specjalnej klasy CSS, a na koniec używamy tego identyfikatora.

Jest jeszcze inny sposób na korzystanie ikon:

<mat-icon>menu</mat-icon>

Przy czym, żeby korzystać z tego zapisu musimy dodać dodatkowo specjalny moduł do naszej aplikacji:

import { MatIconModule } from '@angular/material/icon';

@NgModule({
  exports: [
    MatIconModule
  ]
})	

Jak dołączać moduły z angular material znajdziesz tutaj.