Dowiedz się, w jaki sposób w Chrome DevTools możesz debugować zmiany w HTML

Spis treści

  1. Wprowadzenie
  2. Zatrzymywanie się na modyfikacji HTML
    1. Modyfikacja wewnątrz elementu
    2. Modyfikacja atrybutu elementu
    3. Usunięcie elementu
    4. Kod w repozytorium Github
  3. React – zatrzymywanie się na modyfikacji HTML
    1. Kod w repozytorium Github
  4. Podsumowanie

Wprowadzenie

Możliwość debugowania zmian w HTML była funkcjonalnością, o której sam długo nie widziałem. Co prawda jest ona dużo bardziej użyteczna w JS niż w React, warto jednak o niej wiedzieć – nadal przecież powstają strony nieużywające frameworków JS. Możliwość zapięcia się na zmiany HTML może również być użyteczna w sytuacji, gdy nasza aplikacja używa bibliotek zewnętrznych GUI, by móc sprawdzić np dlaczego jakiś element został ukryty. Stąd ten krótki wpis – myślę że to drobna rzecz o której naprawdę warto wiedzieć.

Zatrzymywanie się na modyfikacji HTML

Chrome DevTools umożliwia zareagowanie w 3 sytuacjach:

  1. Modyfikacja wewnątrz elementu
  2. Modyfikacja atrybutu elementu
  3. Usunięcie elementu

By móc przetestować każdy z nich po kolei, stwórzmy plik HTML który zawierał będzie potrzebną nam strukturę DOM:

<div>
  <button id="remove">Remove element</button>
  <button id="add-class">Add class to element</button>
  <button id="add-content">Add content to element</button>
</div>
<div id="element">
  <p>
    Child
  </p>
</div>

Efektem będą 3 przyciski modyfikujące element div pod nimi:

Tak utworzona struktura pozwoli nam na dodawanie obsługi każdej sytuacji.

Modyfikacja wewnątrz elementu

Zaznaczmy opcję Break on > subtree modifications:

Modyfikacja taka może zajść w sytuacji, gdy przykładowo pobraliśmy z żądania do serwera nowe obiekty z listy i chcemy wyświetlić je użytkownikowi. Napiszmy kod, który będzie dodawał nowe dziecko do elementu child:

const element = document.querySelector('#element');
  
document.querySelector('#add-content').addEventListener('click', () => {
  const child = document.createElement('p');
  child.innerHTML = 'Child'; 
  element.appendChild(child);
});

Kod ten po kliknięciu odpowiedniego przycisku utworzy paragraf i doda go wewnątrz elementu.

Kliknięcie przycisku „Add Content” przy włączonych Dev Toolsach spowoduje zatrzymanie się kodu na linii, która modyfikuje drzewo DOM elementu:

Dodatkowo po prawej stronie jest wyświetlona informacja o tym, co się stało – „Child div#element added”.

Modyfikacja atrybutu elementu

Zaznaczmy opcję Break on > attribute modifications:

Konieczność zapięcia się na taką sytuację może pojawić się wtedy, gdy dany element modyfikowany jest w wielu miejscach – przykładowo element jest z różnych powodów ukrywany / pokazywany odpowiednią klasą. Wtedy, by wiedzieć kto dodał klasę, można podpiąć się pod modyfikację atrybutu.
Napiszmy kod, który będzie dodawał losową klasę do elementu:

document.querySelector('#add-class').addEventListener('click', () => {
  element.classList.add(`some-class${new Date().getTime()}`);
});

Kliknięcie przycisku „Add class” spowoduje zatrzymanie wykonywania kodu i przeniesienie nas do miejsca modyfikacji:

Usunięcie elementu

Zaznaczmy opcję Break on > node removal:

Możliwość taka może przydać się np w sytuacji, gdy w złym momencie usuwa nam się informacja o cookie.
Napiszmy kod który po kliknięciu przycisku usunie element:

document.querySelector('#remove').addEventListener('click', () => {
  element.parentElement.removeChild(element);
});

Kliknięcie przycisku „Remove element” spowoduje zatrzymanie aplikacji:

Kod w repozytorium Github

Adres repozytorium: https://github.com/radek-anuszewski/html-debug

React – zatrzymywanie się na modyfikacji HTML

Jeśli używamy Reacta, zatrzymywanie się na modyfikacjach nie jest już tak użyteczne. Napiszmy prosty kod, gdzie widoczność elementu jest zależna od flagi:

function App() {
  const [visible, setVisible] = useState(true);

  const removeElement = () => setVisible(false)
  return (
    <div>
      <div>
        <button onClick={removeElement}>Remove element</button>
      </div>
      {visible && (
        <div>
          <p>
            Child
          </p>
        </div>
      )}
    </div>
  );
}

Jeżeli podepniemy się pod Break on > node removal, oczywiście zatrzymamy się na usunięciu elementu, jednak debug zatrzyma się w kodzie Reacta, sam stos wywołań również będzie Reactowy:

Analogicznie mało powie nam debug przy modyfikacji drzewa DOM czy atrybutów elementu.

Kod w repozytorium Github

Jeśli chcesz na własne oczy przekonać się o prawdziwości wniosków, które wrzuciłem wyżej – możesz pobrać aplikację z repozytorium i uruchomić lokalnie:

https://github.com/radek-anuszewski/html-debug-react

Podsumowanie

Możliwość podpięcia się pod zmianę w HTML jest ciekawą funkcjonalnością, użyteczną w pewnych kontekstach. Warto o niej pamiętać przy pisaniu projektów w czystym JS bądź narzędziu które modyfikuje HTML bardziej bezpośrednio niż na przykład React.

GraphQL w React #3 – cache, WebSocket i debugowanie w Apollo Client

Ten post jest trzecim z serii o GraphQL:


Spis Treści

  1. Wprowadzenie
  2. Zarządzanie cache w Apollo Client
    1. Cykliczne powtarzanie zapytania do serwera
    2. Ręczna aktualizacja cache
  3. Dwukierunkowa komunikacja z serwerem za pomocą Subscription i WebSocket
    1. Obsługa Subscriptions i WebSocket na serwerze
    2. Obsługa Subscriptions i WebSocket na kliencie
    3. Kod obu aplikacji na Github
  4. Debugowanie za pomocą Apollo Developer Tools
    1. Zakładka GraphQL
    2. Zakładka Queries
    3. Zakładka Mutations
    4. Zakładka Cache
  5. Podsumowanie

Wprowadzenie

Poprzednie dwa posty omówiły podstawy zastosowania GraphQL zarówno na stronie serwera jak i klienta. Możliwości Apollo Client wykraczają jednak daleko poza wysyłanie zapytań na serwer.

Czym więc zajmiemy się w tym wpisie?

  1. Cache’owaniem danych przez Apollo Client
  2. Dwukierunkową komunikacją pomiędzy serwerem a klientem
  3. Debugowaniem za pomocą Apollo Developer Tools

Zmęczenie wadami podejścia REST oraz rosnąca popularność GraphQL powodują, że warto przeczytać ten post i zgłębić wiedzę na temat Apollo Client.

Kod tego posta będzie rozszerzeniem kodu 2 poprzednich: GraphQL w React #1 – poznaj podstawy GraphQL! oraz GraphQL w React #2 – połącz się z serwerem dzięki Apollo Client.

Czytaj dalej GraphQL w React #3 – cache, WebSocket i debugowanie w Apollo Client

Dotychczasowa działalność Frontcave na Youtube

Spis Treści

  1. Wprowadzenie
  2. Dotychczasowe nagrania
    1. CSS GRID – webinar Tarnow Devs
    2. Redux Toolkit – wprowadzenie
    3. Niemutowalność w React z ImmerJS – wprowadzenie
  3. Podsumowanie

Wprowadzenie

Poza wpisami na blogu, istnieje kanał Frontcave na Youtube. Choć w tym momencie nie jest on tak aktywny jak sam blog, są już plany na kolejne nagrania. Tutaj zaprezentowane zostaną dotychczasowe nagrania.

Czytaj dalej Dotychczasowa działalność Frontcave na Youtube

GraphQL w React #2 – połącz się z serwerem dzięki Apollo Client

Ten post jest drugim z serii o GraphQL w React:

Spis Treści

  1. Wprowadzenie
  2. Użycie klienta Apollo Client do załadowania danych z serwera
    1. Wystartowanie serwera
    2. Utworzenie klienta i pobranie danych z serwera
      1. Udostępnienie klienta w aplikacji
      2. Pobranie i wyświetlenie danych za pomocą hooka useQuery i zapisanie danych za pomocą hooka useMutation
        1. Komponent Animals i pochodne – ładowanie danych przez useQuery
        2. Komponent Owners i zapisywanie danych przez useMutation
    3. Kod aplikacji na Github.
    4. Pełny kod aplikacji
  3. Podsumowanie

Wprowadzenie

Ponieważ w poprzednim poście przy pomocy biblioteki Apollo Server postawiliśmy serwer GraphQL, dziś używając Apollo Client stworzymy część kliencką aplikacji. Za jej pomocą pobierzemy dane z serwera.

Czytaj dalej GraphQL w React #2 – połącz się z serwerem dzięki Apollo Client

GraphQL w React #1 – poznaj podstawy GraphQL!

Spis treści

  1. Wprowadzenie
  2. Podstawy GraphQL
    1. Schema
      1. Scalar types
      2. Object types
      3. Input types
      4. Root types
    2. Resolvers
  3. Uruchomienie serwera GraphQL
    1. Instalacja i implementacja
      1. Instalacja serwera Apollo
      2. Uruchomienie serwera Apollo
    2. Pełny kod aplikacji
    3. Kod w repozytorium Github
    4. Queries – wysyłanie żądań na serwer
      1. Kod w repozytorium Github
  4. Podsumowanie

Wprowadzenie

Popularność GraphQL rośnie z dnia na dzień – warto więc być zorientowanym w temacie, zważywszy że jego stosowanie ma wiele zalet:

  • jasno zdefiniowane API dzięki schematom
  • pobieranie tylko potrzebnych danych – brak zjawiska nadmiarowych danych
  • Brak konieczności poprawek backendowych, jeżeli zmienią się potrzebne w danym widoku dane (w rozsądnych ramach oczywiście)
  • duża popularność, GraphQL jest stosowany między innymi przez takie firmy Github, Starbucks czy Twitter.

Warto więc poznać podstawy GraphQL.

Czytaj dalej GraphQL w React #1 – poznaj podstawy GraphQL!

Poznaj bibliotekę Yup, która pomoże Ci z walidacją formularzy

Spis treści

  1. Wprowadzenie
  2. Zastosowanie biblioteki
    1. Prosta walidacja true / false
    2. Walidacja ze zwrotką zawierającą błędy
    3. Własne teksty dla błędów walidacji
  3. Zastosowanie Yup w React
    1. Czysty React bez bibliotek
      1. Pełny kod
      2. Kod na github
    2. Wsparcie w bibliotekach do obsługi formularzy w React
  4. Podsumowanie

Wprowadzenie

Choć od dawna HTML5 udostępnia nam możliwość walidowania formularzy za pomocą atrybutów na polach takich jak required, min, max, minlength czy maxlength, to rozwiązanie rzadko kiedy jest wystarczające. Nie mamy chociażby możliwości stylowania popupu informującego o błędzie walidacji, nie możemy zmienić też tekstu błędu. Dodatkowo, wygląda on różnie w różnych przeglądarkach.

Co prawda, CSS dostarcza pseudoklasy związane z walidacją, opisane np tutaj: Styling Form Inputs in CSS With :required, :optional, :valid and invalid i na ich podstawie, budując skomplikowane selektory możnaby kolorować pola, wyświetlać użytkownikowi błędy itd jednak nadal potrzebujemy walidacji w JS choćby wtedy, gdy chcemy sprawdzić coś niestandardowego jak UUID.

Biblioteka Yup służy do budowania schematów walidacji obiektów oraz parsowania jednych obiektów na drugie. Choć naturalnym miejscem jej użycia są walidacje formularzy, nie jest do tego ograniczona – walidować i parsować można np dane z API backendowego, ponieważ Yup waliduje bezpośrednio obiekt z danymi, nie ma powiązania z np DOMem.

Czytaj dalej Poznaj bibliotekę Yup, która pomoże Ci z walidacją formularzy