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.

Koniec wakacji, ale w na blogu trochę się działu. Oto podsumowanie: wrzuciłem 9 wpisów.

Produktywność:

• Co zabiera energię?
  
• Czy TODO lista działa?
  
• Blokowanie czasu

TypeScript:

• Typ Union
  
• Typ type

Inne:

• Recenzja: Książka You Are Your Own Gym
  
• Refaktoring: Instrukcje warunkowe

MongoDB:

• Eksport i Import bazy danych

Wrzuciłem jeden komiks: I will do it tomorrow

Przeczytałem cztery książki:

• Informacja zwrotna - Jakub Żulczyk
  
• Zrozumieć komiks - Scott McCloud
  
• Shuggie Bain - Douglas Stuart
  
• O mrówkach i dinozaurach - Liu Cixin

Przesłuchałem także cztery audiobooki:

• Wzgórze psów - Jakub Żulczyk
  
• Essentialism: The Disciplined Pursuit of Less - Greg McKeown
  
• The War of Art - Steven Pressfield
  
• Anything You Want - Derek Sivers

Każdy, kto przynajmniej poznał podstawy, któregoś z języków programowania napotkał na instrukcję warunkową: if.

Z tą instrukcją jest taki problem, że w łatwy sposób można pogorszyć czytelność kodu. Szczególnie jeśli korzystamy z zagnieżdżonych instrukcji warunkowych.

Unikaj zagniżdżonych instrukcji warunkowych

Nie jest tajemnicą, że programista częściej czyta kod niż go pisze. Dlatego naszym celem powinna być taka implementacja która zostanie zrozumiana przez innego programistę bez większego wysiłku.

Spójrzmy na poniższy kod:

if (is_file_uploaded) {
  if (is_file_extension_is_correct) {
    // Oczekiwana operacja
  } else {
    // Zgłoś błąd
  }
} else {
  // Zgłoś błąd
}

Zagnieżdżenie powoduje, że kod staje się trudniejsz w czytaniu i programista musi spędzić więcej czasu na jego analizę.

Można na szczęście go uprościć. Wystarczy trzymać się zasady: niech oczekiwany wynik będzie wykonany lub zwracany na końcu funkcji.

Ten sam kod, ale po refaktoringu:

if (!is_file_uploaded) {
  // Zgłoś błąd
}

if (!is_file_extension_is_correct) {
  // Zgłoś błąd
}

// Oczekiwana operacja

Wystarczyło użyć negacji w instrukcjach warunków i udało nam się pozbyć zagnieżdżeń! Taki kod czyta się znacznie lepiej.

Czas to wartość

Każdy z nas ma tyle samo czasu do wykorzystania. Dlaczego jest tak, że jedna osoba, w ciągu dnia zrobi znacznie więcej niż inna? Załóżmy że obie te osoby mają podobny poziom wiedzy i doświadczenia, więc te czynniki odpadają. Żeby odpowiedzieć sobie na to pytanie należałoby prześledzić, jak osoba bardziej wydajna wykorzystała czas, który miała.

Czas to zasób. Jest on ograniczony: nie możemy go zwiększyć. Więc powinniśmy się zastanowić nad tym: jak wykorzystać ten okres, który mamy do dyspozycji?

Jedną z technik na lepsze wykorzystanie czasu jest: blokowanie

Blokowanie czasu

Sama idea jest bardzo prosta: wyznaczasz sobie zadanie, określasz kiedy zamierzasz się tym zająć, i wreszcie: decydujesz ile czasu zamierzasz na to poświęcić.

Ta technika sprawdza się wtedy gdy trzymasz się reguły: podczas pracy nad zadaniem skupiasz się tylko na nim.

Czyli nie pozwalasz sobie na "krótkie 5-minutowe" przerwy. To działa gdy jesteś skupiony na swoim celu i nie tracisz niepotrzebnie energii na przełączanie kontekstu.

Stąd wzieła się nazwa: rezerwuję czas na zadanie i zajmuję się tylko tym na przykład przez godzinę.

Dlaczego to działa?

Celem tej techniki jest skupienie Twojej uwagi na zadaniu. Jeśli jesteś skupiony i nie pozwalasz się rozpraszać, to szybciej dane zadanie zrobisz. Lepiej wykorzystujesz czas, który masz i możesz zrobić dzięki temu więcej rzeczy.

Często wykorzystuję blokowanie czasu do budowania nawyków. Na przykład: poświęcam na czytanie 1 godzinę dziennie.

Samo blokowanie czasu wprawdzie nie zapewni Ci że zadanie zostanie wykonane, w ciągu wyznaczonego okresu(może Cię do tego celu przybliżyć), ale nie powinieneś się tym zbytnio zamartwiać. Jeśli pracujesz w skupieniu, to liczy się progres.

Sprawdza się to szczególnie kiedy masz kilka zadań do zrobienia. Rezerwując czas pracy nad nimi dostajesz informację zwrotną ile zostanie Ci czasu na inne ewentualne rzeczy. Albo po prostu zorientujesz się że tego jest tak dużo, że albo coś przesuwasz na kolejny dzień lub z tego rezygnujesz.