Webstorm: Nawigacja skróty klawiszowe

Opublikowano: 17.07.2021 - tagi: Webstorm Klawiatura

Poniżej znajdziesz kilka skrótów klawiszowych w Webstorm na temat nawigacji:

Przejście do konkretnej linii kodu - CTRL + G

Przejście do konkretnego pliku - CTRL + SHIFT + N

Przejście do następnej zakładki - ALT + STRZAŁKA W PRAWO

Przejście do poprzedniej zakładki - ALT + STRZAŁKA W LEWO

Przejście do następnej metody - ALT + STRZAŁKA W GÓRĘ

Przejście do poprzedniej metody - ALT + STRZAŁKA W DÓŁ

Przejście do terminala/edytora - ALT + F12

Przejście do danej klasy - CTRL + N

Lista ostatnio przeglądanych plików - CTRL + E


Dlaczego warto wstawać wcześniej?

Opublikowano: 15.07.2021 - tagi: Produktywność Nawyk

Co słyszysz z samego rana po przebudzeniu? Ja odgłosy chyba z tysięcy ptaków, które z samego rana postanowiły wydać z siebie przeróżnego rodzaju dźwięki.

Wstawanie z rana to dla wielu ludzi temat kontrowersyjny. Niektórzy nie wyobrażają sobie wstać godzinę wcześniej jeśli nie jest to konieczne. Inni z kolei nie mają z tym problemu. Ja należę do tej drugiej grupy.

Poniżej opisuję dlaczego zdecydowałem się na wcześniejsze wstawanie. Podam kilka wskazówek jak możesz zacząć wstać z łóżka z samego rana.

Dlaczego?!

Wstawnie z rana jest trudne. Wcześniejsza pobudka tym bardziej... Jeśli chcemy zacząć dzień z samego rana warto mieć ważny powód.

Zastanów się czym mógłbyś się zająć po wyjściu z łóżka. Ważne żeby było to coś co sprawi Ci przyjemność, a nie zmuszanie siebie bo "coś muszę". To jest szczególnie ważne na początku, kiedy będziesz budować nawyk wcześniejszego wstawania.

Kiedyś budząc się wcześniej pracowałem nad swoimi projektami, ale teraz moje plany się zmieniły. Aktualnie przez pierwszą godzinę po przebudzeniu nie poświęcam czasu na pracę. Robię rzeczy, które sprawiają mi przyjemność jak na przykład:

1 Czytanie - 15 minut

2 Medytacja - 10 minut

3 Rysowanie - 15 minut

Dodatkowo mogę zacząć pracę wcześniej przez co wcześniej ją skończę.

Zauważyłem także, że moja praca z rana jest bardziej produktywna niż po południu więc udaje mi się zrobić więcej rzeczy. Choć zdaję sobie sprawę, że nie wszystkim taki tryb może odpowiadać. Niektórzy wolą pracować po nocach :)

Jak zacząłem wstawać wcześniej?

Miałem kilka prób zbudowania nawyku wstawania z rana. I przyznam szczerze, że odniosłem wiele porażek. Miałem nawet często pretensje do siebie, że nie wstałem wcześniej!

Jeśli decydujesz się na pobudkę z rana ustal o jakiej godzinie chcesz się obudzić. To pierwszy krok poniżej podaję listę co jeszcze będzie ważne:

1 Staraj się iść spać o podobnej godzinie.

2 Niech Twój budzik nie będzie w zasięgu ręki. Żeby go wyłączyć musisz wstać z łóżka.

3 Ustal plan, co zamierzasz robić po przebudzeniu. Dodatkowo określ ile czasu zamierzasz poświęcić na zaplanową czynność.

Czy zamierzam to kontynuować?

Patrząc, w przeszłość zauważyłem, że moje wstawanie z rana przebiegało falami. Przez jakiś czas wstawałem wcześniej, a potem znowu mi się nie udawało :)

Dzięki planowi opisanemu powyżej udało mi się ustabilizować sytuację. Czasami zdarza mi się, że pośpię dłużej, ale to świadoma decyzja.

Podsumowanie

Pobudka z rana to coś, co daje mi dużo energii na resztę dnia. Głównie poświęcam ten czas to co lubię robić. Jeśli się zastanawiasz nad tym to gorąco polecam. Może być ciężko na początku, ale jeśli uda Ci się zbudować nawyk to w przyszłości, to zaprocentuje.


Angular: Komponenty typu Smart i Dumb

Opublikowano: 08.07.2021 - tagi: Angular Komponent Architektura JavaScript

Nieważne jakiego frameworka używasz czy to Angulara, Reacta lub Vue, w każdym z nich istnieje coś takiego jak: komponent.

Komponenty służą nam do budowania naszej aplikacji. Komponent możemy porównać do klocka. Budujemy nasz program z klocków. Im mniejszy jest taki klocek tym łatwiej nim operować. Jeszcze lepiej jeśli dany klocek możemy użyć do budowy innych rzeczy, czyli mówimy, że taki klocek jest reużywalny.

Jak życie pokazuje nasze aplikacje się rozrastają, w szybkim tempie często kosztem jakości kodu.

Architektura komponentu typu Smart i Dumb może pomóc w łatwiejszym utrzymaniu kodu. W tym wpisie przykładowy kod napisany jest w Angularze, ale ten wzorzec może być używany także w innych frameworkach i nie tylko.

Poniżej znajdziesz przykład tego wzorca. Zanim zaczniemy stwórz komponent o nazwie: BookList. W katalogu tego komponentu stwórz plik o nazwie: book.model.ts:

export interface Book {
  id: number;
  title: string;
  author: string;
  isRead: boolean;
}

Komponent typu Dumb

Komponent typu Dumb nazywany też: komponentem prezentacji charakteryzuje się następującymi cechami:

1 Służy tylko do wyświetlania danych.

2 Nie ma logiki biznesowej. Tutaj chodzi oto, że ten komponent nie przetwarza danych. Po prostu pobiera dane i je wyświetla.

3 Nie posiada zależności na przykład z serwisami.

W Angluar dane do tego komponentu będziemy przekazywać za pomocą Input a wysyłać za pomocą Output.

Zawartość pliku: book-list.component.ts:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Book } from "./book.model";

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.scss']
})
export class BookListComponent implements OnInit {

  @Input()
  books: Book[] | undefined;

  @Output()
  bookReadEvent = new EventEmitter<Book>();

  constructor() { }

  ngOnInit(): void {
  }

  bookReadAction(book: Book): void {
    this.bookReadEvent.emit(book);
  }
}

Teraz widok: book-list.component.html:

<div *ngFor="let book of books">
  <strong>{{ book.title }}</strong> - {{ book.author }} <button [hidden]="book.isRead" (click)="bookReadAction(book)">Przeczytane</button>
</div>

Komponent typu Smart

Komponent typu Smart z kolei posłuży nam do ogarnięcia logiki biznesowej i przekazaniu danych do komponentu prezentacji:

1 Obsługuje logikę biznesową.

2 Przekazuje dane do komponentu prezentacji.

3 Może posiadać zależności do serwisów itp.

Stwórz plik o nazwie: book-list.container.component.ts:

import { Component, OnInit } from '@angular/core';
import { Book } from './book.model';

@Component({
  selector: 'app-book-list-container',
  templateUrl: './book-list.container.component.html',
})
export class BookListContainerComponent implements OnInit {

  books: Book[] | undefined;

  constructor() { }

  ngOnInit(): void {
    this.books = [
      { id: 1, title: 'Wojna futbolowa', author: 'Ryszard Kapuściński', isRead: false },
      { id: 2, title: 'Mroczna wieża tom 1', author: 'Stephen King', isRead: false },
      { id: 3, title: 'Czarnobylska modlitwa. Kronika przyszłości', author: 'Swietłana Aleksiejewicz', isRead: false },
    ]
  }

  bookReadEvent(bookRead: Book): void {
    if (this.books) {
      this.books = this.books.map((book: Book) => {
        if (book.id === bookRead.id) {
          bookRead.isRead = true;
        }
        return book;
      })
    }
  }

}

Za pomocą metody: bookReadEvent odbieramy zdarzenie wysłane z komponentu typu Dumb i przetwarzamy dane tutaj.

Potrzebny będzie jeszcze widok dla: book-list.container.component.html:

<app-book-list
  [books]="books"
  (bookReadEvent)="bookReadEvent($event)">
</app-book-list>

Na koniec musimy jeszcze gdzieś dodać odwołanie do komponentu Smart żeby go wyświetlić na przykład w app.component.html:

<app-book-list-container></app-book-list-container>

Podsumowanie

Na tym prostym przykładzie przedstawiłem na czym polega idea komponentów typu Smart i Dumb. Dzięki takiemu podziałowi oddzielamy od siebie dwie odpowiedzialności: przetwarzanie danych(Smart), wyświetlanie danych(Dumb).

Dodatkowo takie podejście zapewnia nam reużywalność komponentów typu Dumb ponieważ nie tworzymy tam niepotrzebnych zależności.


Jakie podkasty aktualnie słucham?

Opublikowano: 01.07.2021 - tagi: Słuchanie Lista Podkast

Aktualnie słucham następujące podkasty:

BBC: Newshour - Aktualne wiadomości z całego świata. Wywiady, analizy. Podkast aktualizowany jest dwa razy dziennie. Jeden odcinek zwykle trwa 50 minut. Po angielsku.

BBC: Hard Talk - Stephen Sackur przeprowadza wywiady z ludźmi: polityki, biznesu, kultury itp. Podkast akutalizowany jest trzy razy, w tygodniu. Jeden odcinek zwykle trwa około 20 minut. Po angielsku.

Raport o stanie świata - Świetny polski podkast prowadzony przez Dariusza Rosiaka. Jak nazwa wskazuje, porusza tematy międzynarodowe. Podkast aktualizowany jest dwa razy, w tygodniu. Odcinek z środy trwa około 30 minut. Sobotni odcinek trwa już ponad dwie godziny. Dodatkowo raz, w miesiącu wypuszczany jest specjalny odcinek pod tytułem: Raport o książkach - trwa ponad dwie godziny.


Podsumowanie: Czerwiec 2021

Opublikowano: 30.06.2021 - tagi: Blog Podsumowanie Czerwiec 2021

W czerwcu działo się trochę na blogu. Dodałem 11 wpisów.

Lista:

Angular:

NodeJS:

Webstorm:

JavaScript:

Inne:

Pod koniec miesiąca dodałem nowy dział: Komiksy. Będę tam wrzucał różne mniej lub bardziej udane rysunki :)

W tym miesiącu dodałem jeden komiks:

Stworzyłem na Instagramie konto bloga: @marcindevblog

W czerwcu przeczytałem dwie książki:

Przesłuchałem jeden audiobook: