[{"_1":2,"_186":-5,"_187":-5},"loaderData",{"_3":4,"_185":-5},"routes/search",{"_5":6,"_51":52,"_139":140},"articles",[7,29,40],{"_8":9,"_10":11,"_12":13,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28},"title","Szczepienie kodu, czyli jak Typescript radzi sobie z Dependency Injection","description","Dependency Injection (DI) to wzorzec projektowy stosowany w celu zwiększenia modularności i testowalności kodu. Umożliwia to oddzielenie tworzenia obiektów od ich używania, co prowadzi do lepszej separacji odpowiedzialności i łatwiejszego zarządzania zależnościami. W TypeScript, DI można zaimplementować na kilka sposobów, w tym za funkcji wstrzykujących, które są odpowiedzialne za tworzenie i wstrzykiwanie zależności. Przyjrzyjmy się, jak można zaimplementować DI w TypeScript z wykorzystaniem prostych przykładów.","keywords",[14,15,16],"typescript","wzorce","javascript","categories",[14,15],"createdAt",["D",1718841600000],"id","6c42ebc1-cfe3-4a60-86fd-7ea82f3a5bc7","slug","dependency-injection-kontra-typescript","content","

Dependency Injection (DI) to wzorzec projektowy stosowany w celu zwiększenia modularności i testowalności kodu. Umożliwia to oddzielenie tworzenia obiektów od ich używania, co prowadzi do lepszej separacji odpowiedzialności i łatwiejszego zarządzania zależnościami.

W TypeScript, DI można zaimplementować na kilka sposobów, w tym za funkcji wstrzykujących, które są odpowiedzialne za tworzenie i wstrzykiwanie zależności. Przyjrzyjmy się, jak można zaimplementować DI w TypeScript z wykorzystaniem prostych przykładów.

#Spis Treści

Podstawy Dependency Injection
Prosty przykład DI
Wstrzykiwanie zależności za pomocą funkcji wstrzykującej

#1. Podstawy Dependency Injection

W Dependency Injection chodzi o przekazywanie zależności do obiektu zamiast tworzenia ich bezpośrednio wewnątrz obiektu. Dzięki temu można łatwo wymieniać zależności, co ułatwia testowanie i modyfikowanie kodu.

#2. Prosty przykład DI

Rozważmy prosty przykład, w którym klasa UserService potrzebuje instancji UserRepository:

class UserRepository {\n  getUser(userId: number): string {\n    return `User ${userId}`;\n  }\n}\n\nclass UserService {\n  private userRepository: UserRepository;\n\n  constructor(userRepository: UserRepository) {\n    this.userRepository = userRepository;\n  }\n\n  getUserName(userId: number): string {\n    return this.userRepository.getUser(userId);\n  }\n}\n\nconst userRepository = new UserRepository();\nconst userService = new UserService(userRepository);\n\nconsole.log(userService.getUserName(1)); // User 1\n

W powyższym przykładzie UserRepository jest wstrzykiwany do UserService przez konstruktor.

#3. Wstrzykiwanie zależności za pomocą funkcji wstrzykującej

Aby lepiej zarządzać zależnościami, możemy użyć kontenera IoC. Przykład poniżej pokazuje, jak można to zrobić przy użyciu prostego kontenera DI:

const dependencies: Map<string, any> = new Map();\n\nfunction inject<T>(dependency: new () => T): T {\n  if (dependencies.has(dependency.name)) {\n    const dep = dependencies.get(dependency.name);\n    if (dep) {\n      return dep;\n    }\n  }\n\n  const dep = new dependency();\n  dependencies.set(dependency.name, dep);\n  return dependencies.get(dependency.name);\n}\n\nclass UserRepository {\n  getUser(userId: number): string {\n    return `User ${userId}`;\n  }\n}\n\nclass UserService {\n  protected userRepository = inject(UserRepository);\n\n  getUserName(userId: number): string {\n    return this.userRepository.getUser(userId);\n  }\n}\n\nclass ExtendedUserService extends UserService {}\n\nconst extendedUserService = inject(ExtendedUserService);\n\nconsole.log(extendedUserService.getUserName(1)); // User 1\n

W tym przykładzie używamy funkcji do rejestrowania i rozwiązywania zależności.\nFunkcja inject przyjmuje, jako generyczny argument, zależność, którą na podstawie statycznej nazwy zapisuje i przechowuje, dzięki czemu potem mamy dostęp do wspólnej instancji tej zależności.\nTakie podejście pozwala na łatwe rozszerzanie klas, nie potrzebujemy pamiętać o zależnościach w konstruktorze klasy

#Podsumowanie

Dependency Injection w TypeScript to potężna technika, która może znacznie ułatwić zarządzanie zależnościami i poprawić testowalność oraz modularność kodu. Przedstawione powyżej przykłady pokazują różne podejścia do implementacji DI, w tym bezpośrednie wstrzykiwanie przez konstruktor, korzystanie z funkcji wstrzykujących, używanie dekoratorów. Dzięki tym technikom można tworzyć bardziej elastyczne i łatwe w utrzymaniu aplikacje.

","resourceUrl","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/articles/dependency-injection-kontra-typescript.md",{"_8":30,"_10":31,"_12":32,"_17":34,"_19":35,"_21":36,"_23":37,"_25":38,"_27":39},"Obserwatorium, czyli wzorzec projektowy obserwatora","Wzorzec projektowy Obserwator (ang. Observer) jest jednym z najważniejszych wzorców projektowych, szczególnie użytecznym w kontekście programowania reaktywnego i aplikacji, które muszą reagować na zmiany stanu. W TypeScript możemy zaimplementować ten wzorzec w sposób typowany, co dodatkowo zwiększa bezpieczeństwo i czytelność kodu.",[14,15,33],"programowanie",[14,15],["D",1718841600000],"1317bbdb-6202-4c73-9039-9ee134d006ce","obserwatorium-czyli-wzorzec-projektowy-obserwatora","

Wzorzec projektowy Obserwator (ang. Observer) jest jednym z najważniejszych wzorców projektowych, szczególnie użytecznym w kontekście programowania reaktywnego i aplikacji, które muszą reagować na zmiany stanu. W TypeScript możemy zaimplementować ten wzorzec w sposób typowany, co dodatkowo zwiększa bezpieczeństwo i czytelność kodu.

#Czym jest Wzorzec Obserwatora?

Wzorzec Obserwatora polega na tym, że obiekt (obserwowany) zarządza listą zależnych obiektów (obserwatorów) i automatycznie powiadamia ich o zmianach swojego stanu. Jest to realizowane za pomocą metod do subskrybowania, odsubskrybowania oraz powiadamiania obserwatorów.

#Korzyści z używania Wzorca Obserwatora

Reaktywność: Automatyczne powiadamianie obserwatorów o zmianach stanu.
Luźne Powiązania: Obserwatorzy nie muszą znać szczegółów implementacji obiektu, który obserwują.
Elastyczność: Łatwość dodawania nowych obserwatorów bez zmiany istniejącego kodu.

#Implementacja Wzorca Obserwatora w TypeScript

#Przykład 1: Prosta Implementacja

Poniżej znajduje się prosta implementacja wzorca Obserwatora w TypeScript:

// Interfejs obserwatora\ninterface Observer {\n  update(message: string): void;\n}\n\n// Klasa obserwowana\nclass Subject {\n  private observers: Observer[] = [];\n\n  subscribe(observer: Observer): void {\n    this.observers.push(observer);\n  }\n\n  unsubscribe(observer: Observer): void {\n    this.observers = this.observers.filter((obs) => obs !== observer);\n  }\n\n  notify(message: string): void {\n    this.observers.forEach((observer) => observer.update(message));\n  }\n}\n\n// Implementacja obserwatora\nclass ConcreteObserver implements Observer {\n  constructor(private name: string) {}\n\n  update(message: string): void {\n    console.log(`${this.name} received message: ${message}`);\n  }\n}\n\n// Użycie wzorca Obserwatora\nconst subject = new Subject();\n\nconst observer1 = new ConcreteObserver(\"Observer 1\");\nconst observer2 = new ConcreteObserver(\"Observer 2\");\n\nsubject.subscribe(observer1);\nsubject.subscribe(observer2);\n\nsubject.notify(\"Hello, Observers!\");\n\n// Output:\n// Observer 1 received message: Hello, Observers!\n// Observer 2 received message: Hello, Observers!\n

W tym przykładzie Subject zarządza listą obserwatorów i powiadamia ich za pomocą metody notify. Obserwatorzy implementują interfejs Observer, który definiuje metodę update.

#Przykład 2: Rozbudowana Implementacja z Typowaniem

W bardziej zaawansowanej wersji możemy użyć typów generycznych do zarządzania różnymi typami danych:

// Interfejs obserwatora z typem generycznym\ninterface Observer<T> {\n  update(data: T): void;\n}\n\n// Klasa obserwowana z typem generycznym\nclass Subject<T> {\n  private observers: Observer<T>[] = [];\n\n  subscribe(observer: Observer<T>): void {\n    this.observers.push(observer);\n  }\n\n  unsubscribe(observer: Observer<T>): void {\n    this.observers = this.observers.filter((obs) => obs !== observer);\n  }\n\n  notify(data: T): void {\n    this.observers.forEach((observer) => observer.update(data));\n  }\n}\n\n// Implementacja obserwatora\nclass ConcreteObserver<T> implements Observer<T> {\n  constructor(private name: string) {}\n\n  update(data: T): void {\n    console.log(`${this.name} received data:`, data);\n  }\n}\n\n// Użycie wzorca Obserwatora z typem generycznym\ninterface User {\n  name: string;\n  age: number;\n}\n\nconst userSubject = new Subject<User>();\n\nconst userObserver1 = new ConcreteObserver<User>(\"User Observer 1\");\nconst userObserver2 = new ConcreteObserver<User>(\"User Observer 2\");\n\nuserSubject.subscribe(userObserver1);\nuserSubject.subscribe(userObserver2);\n\nuserSubject.notify({ name: \"Alice\", age: 30 });\n\n// Output:\n// User Observer 1 received data: { name: 'Alice', age: 30 }\n// User Observer 2 received data: { name: 'Alice', age: 30 }\n

W tej wersji Subject i Observer są typowane generycznie, co pozwala na bardziej elastyczne i bezpieczne przekazywanie danych.

#Zakończenie

Wzorzec Obserwatora w TypeScript jest potężnym narzędziem, które pozwala na łatwe zarządzanie zmianami stanu i reaktywnością aplikacji. Dzięki silnemu typowaniu w TypeScript, implementacja tego wzorca jest jeszcze bardziej bezpieczna i czytelna. Implementując ten wzorzec, można znacząco poprawić strukturę i elastyczność kodu, co jest szczególnie ważne w dużych i złożonych aplikacjach. Dzięki temu wzorcowi, komponenty mogą komunikować się ze sobą w sposób luźno powiązany, co ułatwia ich testowanie, modyfikowanie i rozbudowę.

Wzorzec Obserwatora w TypeScript można łatwo zaimplementować na różne sposoby, dostosowując go do specyficznych potrzeb projektu. W powyższych przykładach pokazaliśmy zarówno podstawową implementację, jak i bardziej zaawansowaną wersję z typami generycznymi. Zachęcam do eksperymentowania z tym wzorcem w swoich projektach, aby lepiej zrozumieć jego potencjał i korzyści.

#Przykładowy Projekt z Wykorzystaniem Wzorca Obserwatora

Aby zobaczyć, jak wzorzec Obserwatora może być użyty w bardziej realistycznym scenariuszu, rozważmy prostą aplikację monitorującą zmiany temperatury:

// Interfejs obserwatora\ninterface Observer<T> {\n  update(data: T): void;\n}\n\n// Klasa obserwowana\nclass TemperatureSensor {\n  private observers: Observer<number>[] = [];\n  private temperature: number = 0;\n\n  subscribe(observer: Observer<number>): void {\n    this.observers.push(observer);\n  }\n\n  unsubscribe(observer: Observer<number>): void {\n    this.observers = this.observers.filter((obs) => obs !== observer);\n  }\n\n  setTemperature(temp: number): void {\n    console.log(`Setting temperature to ${temp}`);\n    this.temperature = temp;\n    this.notify(temp);\n  }\n\n  private notify(temp: number): void {\n    this.observers.forEach((observer) => observer.update(temp));\n  }\n}\n\n// Implementacja obserwatora\nclass TemperatureDisplay implements Observer<number> {\n  update(temp: number): void {\n    console.log(`Temperature Display: ${temp}°C`);\n  }\n}\n\nclass TemperatureLogger implements Observer<number> {\n  update(temp: number): void {\n    console.log(`Logging temperature: ${temp}°C`);\n  }\n}\n\n// Użycie wzorca Obserwatora\nconst sensor = new TemperatureSensor();\nconst display = new TemperatureDisplay();\nconst logger = new TemperatureLogger();\n\nsensor.subscribe(display);\nsensor.subscribe(logger);\n\nsensor.setTemperature(25); // Output: Setting temperature to 25\n//         Temperature Display: 25°C\n//         Logging temperature: 25°C\n\nsensor.setTemperature(30); // Output: Setting temperature to 30\n//         Temperature Display: 30°C\n//         Logging temperature: 30°C\n

W tym przykładzie TemperatureSensor pełni rolę obiektu obserwowanego, który powiadamia swoich obserwatorów (TemperatureDisplay i TemperatureLogger) o zmianach temperatury. W praktycznym scenariuszu można by zastosować ten wzorzec do monitorowania różnych parametrów i reagowania na zmiany w czasie rzeczywistym.

","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/articles/obserwatorium-czyli-wzorzec-projektowy-obserwatora.md",{"_8":41,"_10":42,"_12":43,"_17":45,"_19":46,"_21":47,"_23":48,"_25":49,"_27":50},"Signalizacja, czyli koncept Signals w Typescript","Signal to koncepcja pochodząca z programowania reaktywnego, której celem jest uproszczenie komunikacji między komponentami oraz zarządzania stanem aplikacji. W TypeScript, dzięki silnemu typowaniu, można zaimplementować sygnały w sposób bezpieczny i efektywny.",[14,15,44],"signals",[14,15],["D",1718841600000],"784eadef-93a0-4710-b093-cdcb5ef52ea4","signalizacja-czyli-koncept-signals-w-typescript","

Signal to koncepcja pochodząca z programowania reaktywnego, której celem jest uproszczenie komunikacji między komponentami oraz zarządzania stanem aplikacji. W TypeScript, dzięki silnemu typowaniu, można zaimplementować sygnały w sposób bezpieczny i efektywny.

#Czym jest Signal?

Signal (sygnał) jest obiektem, który reprezentuje strumień danych, który może być obserwowany i reagować na zmiany tych danych. W kontekście frontendu, sygnały mogą być używane do reagowania na zdarzenia użytkownika, zmiany stanu aplikacji, czy asynchroniczne operacje, takie jak żądania sieciowe.

#Korzyści z używania Signal

Reaktywność: Umożliwiają budowanie aplikacji, które automatycznie reagują na zmiany danych.
Czytelność: Poprawiają czytelność kodu poprzez eliminację złożonych zależności i ręcznego zarządzania stanem.
Modularność: Ułatwiają zarządzanie stanem w skomplikowanych aplikacjach poprzez oddzielenie logiki zarządzania stanem od komponentów.

#Implementacja Signal w TypeScript

#Przykład 1: Prosty Signal

Poniżej przedstawiono prostą implementację sygnału w TypeScript:

type Listener<T> = (value: T) => void;\n\nclass Signal<T> {\n  private listeners: Listener<T>[] = [];\n\n  subscribe(listener: Listener<T>): void {\n    this.listeners.push(listener);\n  }\n\n  unsubscribe(listener: Listener<T>): void {\n    this.listeners = this.listeners.filter((l) => l !== listener);\n  }\n\n  emit(value: T): void {\n    this.listeners.forEach((listener) => listener(value));\n  }\n}\n\n// Użycie sygnału\nconst numberSignal = new Signal<number>();\n\nnumberSignal.subscribe((value) => {\n  console.log(`Received value: ${value}`);\n});\n\nnumberSignal.emit(42); // Output: Received value: 42\n

W tym przykładzie zdefiniowano klasę Signal, która umożliwia subskrybowanie, usuwanie subskrypcji oraz emitowanie wartości do wszystkich subskrybentów.

#Przykład 2: Zaawansowany Signal z Typowaniem

Poniższy przykład przedstawia bardziej zaawansowaną implementację sygnału z wykorzystaniem typów generycznych:

type Listener<T> = (value: T) => void;\n\nclass Signal<T> {\n  private listeners: Set<Listener<T>> = new Set();\n\n  subscribe(listener: Listener<T>): void {\n    this.listeners.add(listener);\n  }\n\n  unsubscribe(listener: Listener<T>): void {\n    this.listeners.delete(listener);\n  }\n\n  emit(value: T): void {\n    for (const listener of this.listeners) {\n      listener(value);\n    }\n  }\n}\n\n// Użycie sygnału z typem generycznym\ninterface User {\n  name: string;\n  age: number;\n}\n\nconst userSignal = new Signal<User>();\n\nuserSignal.subscribe((user) => {\n  console.log(`User: ${user.name}, Age: ${user.age}`);\n});\n\nuserSignal.emit({ name: \"John Doe\", age: 30 }); // Output: User: John Doe, Age: 30\n

W tym przykładzie Signal używa Set do przechowywania subskrybentów, co zapobiega wielokrotnemu dodawaniu tego samego subskrybenta. Zastosowanie typów generycznych pozwala na tworzenie sygnałów obsługujących dowolne typy danych.

#Zakończenie

Signal w TypeScript to potężne narzędzie do budowania reaktywnych aplikacji, które mogą automatycznie reagować na zmiany stanu. Dzięki silnemu typowaniu TypeScript, implementacja sygnałów jest bezpieczna i efektywna, co przyczynia się do tworzenia bardziej zrozumiałych i łatwiejszych w utrzymaniu kodów. Implementując sygnały, możemy znacząco uprościć zarządzanie stanem w naszych aplikacjach i poprawić ich architekturę.

","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/articles/signalizacja-czyli-koncept-signals-w-typescript.md","courses",[53,67,82,97,107,119,129],{"_8":54,"_10":55,"_12":56,"_17":61,"_19":62,"_21":63,"_23":64,"_25":65,"_27":66},"Wprowadzenie do Semantycznego HTML","Semantyczny HTML polega na używaniu elementów HTML, które jednoznacznie opisują swoje znaczenie i cel. Elementy semantyczne nie tylko definiują strukturę dokumentu, ale również pomagają w interpretacji jego zawartości zarówno przez przeglądarki, jak i przez wyszukiwarki internetowe oraz technologie wspomagające (np. czytniki ekranowe).",[57,58,59,60],"html","semantyka","seo","dostępność",[57,59],["D",1720137600000],"72e09b19-8a9f-42a0-8429-6bbc5fc4edfc","semantyczny-html","

#Czym jest semantyczny HTML?

Semantyczny HTML polega na używaniu elementów HTML, które jednoznacznie opisują swoje znaczenie i cel. Elementy semantyczne nie tylko definiują strukturę dokumentu, ale również pomagają w interpretacji jego zawartości zarówno przez przeglądarki, jak i przez wyszukiwarki internetowe oraz technologie wspomagające (np. czytniki ekranowe).

#Zalety używania semantycznego HTML

Lepsza czytelność kodu: Semantyczne elementy HTML sprawiają, że kod jest bardziej zrozumiały zarówno dla programistów, jak i dla narzędzi analitycznych.
SEO: Wyszukiwarki internetowe lepiej rozumieją i indeksują semantyczny HTML, co może pozytywnie wpłynąć na pozycjonowanie strony.
Dostępność: Technologie wspomagające, takie jak czytniki ekranowe, mogą lepiej interpretować i nawigować po treści semantycznie oznaczonej.
Łatwiejsza konserwacja: Strony z semantycznym HTML są bardziej uporządkowane, co ułatwia ich modyfikację i utrzymanie.

#Semantyczne elementy HTML

#`<!DOCTYPE html>`

Deklaracja typu dokumentu HTML5, która informuje przeglądarkę o wersji HTML używanej w dokumencie.

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Semantyczny HTML</title>\n  </head>\n  <body>\n    <!-- Zawartość strony -->\n  </body>\n</html>\n

#`<header>`

Zawiera wprowadzenie lub zestaw linków nawigacyjnych.

<header>\n  <h1>Tytuł strony</h1>\n  <nav>\n    <ul>\n      <li><a href=\"#home\">Home</a></li>\n      <li><a href=\"#about\">About</a></li>\n      <li><a href=\"#contact\">Contact</a></li>\n    </ul>\n  </nav>\n</header>\n

#`<nav>`

Definiuje blok nawigacyjny, zawierający linki do innych części strony lub do innych stron.

<nav>\n  <ul>\n    <li><a href=\"#home\">Home</a></li>\n    <li><a href=\"#about\">About</a></li>\n    <li><a href=\"#contact\">Contact</a></li>\n  </ul>\n</nav>\n

#`<main>`

Reprezentuje główną zawartość dokumentu. Powinien być unikalny i zawierać główny temat strony.

<main>\n  <article>\n    <h2>Artykuł</h2>\n    <p>Treść artykułu...</p>\n  </article>\n</main>\n

#`<article>`

Oznacza samodzielną jednostkę treści, która mogłaby być dystrybuowana niezależnie.

<article>\n  <h2>Artykuł</h2>\n  <p>Treść artykułu...</p>\n</article>\n

#`<section>`

Reprezentuje sekcję dokumentu, która zawiera grupę treści o podobnym temacie.

<section>\n  <h2>Sekcja</h2>\n  <p>Treść sekcji...</p>\n</section>\n

#`<aside>`

Oznacza sekcję, która zawiera treści mniej istotne lub dodatkowe w stosunku do głównej treści.

<aside>\n  <h2>Sidebar</h2>\n  <p>Informacje poboczne...</p>\n</aside>\n

#`<footer>`

Zawiera informacje o autorze, prawa autorskie, linki do polityki prywatności itp.

<footer>\n  <p>&copy; 2023 Moja Strona. Wszelkie prawa zastrzeżone.</p>\n</footer>\n

#`<figure>` i `<figcaption>`

Używane do oznaczenia ilustracji, diagramów lub innych elementów graficznych oraz ich opisów.

<figure>\n  <img src=\"obrazek.jpg\" alt=\"Opis obrazka\" />\n  <figcaption>Opis obrazka</figcaption>\n</figure>\n

#`<time>`

Reprezentuje określony czas, datę lub oba.

<time datetime=\"2023-06-29\">29 czerwca 2023</time>\n

#`<mark>`

Oznacza tekst, który jest wyróżniony ze względu na kontekst.

<p>To jest <mark>ważne</mark> słowo.</p>\n

#`<address>`

Oznacza informacje kontaktowe.

<address>\n  <p>Jan Kowalski</p>\n  <p>ul. Przykładowa 1</p>\n  <p>00-000 Warszawa</p>\n</address>\n

#Ograniczenia i wyzwania

Niewłaściwe użycie: Używanie elementów semantycznych w niewłaściwy sposób może prowadzić do zamieszania i problemów z dostępnością.
Starsze przeglądarki: Starsze przeglądarki mogą nie obsługiwać wszystkich semantycznych elementów HTML5.
Większa dokładność: Tworzenie semantycznego HTML wymaga większej dbałości o szczegóły i zrozumienia struktury dokumentu.

#Podsumowanie

Używanie semantycznego HTML przynosi wiele korzyści, takich jak lepsza czytelność kodu, lepsze pozycjonowanie w wyszukiwarkach i większa dostępność dla osób niepełnosprawnych. Dzięki semantycznym elementom HTML możemy tworzyć bardziej strukturalne i zrozumiałe strony internetowe.

#Zadania do wykonania

#Zadanie 1

Stwórz prostą stronę HTML z nagłówkiem (<header>), główną treścią (<main>), sekcją nawigacyjną (<nav>) i stopką (<footer>).

\n Pokaż rozwiązanie\n

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Zadanie 1</title>\n  </head>\n  <body>\n    <header>\n      <h1>Moja Strona</h1>\n    </header>\n    <nav>\n      <ul>\n        <li><a href=\"#home\">Home</a></li>\n        <li><a href=\"#about\">About</a></li>\n        <li><a href=\"#contact\">Contact</a></li>\n      </ul>\n    </nav>\n    <main>\n      <p>Główna treść strony...</p>\n    </main>\n    <footer>\n      <p>&copy; 2023 Moja Strona. Wszelkie prawa zastrzeżone.</p>\n    </footer>\n  </body>\n</html>\n

#Zadanie 2

Dodaj do strony z Zadania 1 sekcję (<section>), która zawiera artykuł (<article>) oraz blok poboczny (<aside>).

\n Pokaż rozwiązanie\n

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Zadanie 2</title>\n  </head>\n  <body>\n    <header>\n      <h1>Moja Strona</h1>\n    </header>\n    <nav>\n      <ul>\n        <li><a href=\"#home\">Home</a></li>\n        <li><a href=\"#about\">About</a></li>\n        <li><a href=\"#contact\">Contact</a></li>\n      </ul>\n    </nav>\n    <main>\n      <section>\n        <article>\n          <h2>Artykuł</h2>\n          <p>Treść artykułu...</p>\n        </article>\n        <aside>\n          <h2>Blok poboczny</h2>\n          <p>Informacje poboczne...</p>\n        </aside>\n      </section>\n    </main>\n    <footer>\n      <p>&copy; 2023 Moja Strona. Wszelkie prawa zastrzeżone.</p>\n    </footer>\n  </body>\n</html>\n

#Zadanie 3

Umieść na stronie obrazek z podpisem, używając elementów <figure> i <figcaption>.

\n Pokaż rozwiązanie\n

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Zadanie 3</title>\n  </head>\n  <body>\n    <header>\n      <h1>Moja Strona</h1>\n    </header>\n    <nav>\n      <ul>\n        <li><a href=\"#home\">Home</a></li>\n        <li><a href=\"#about\">About</a></li>\n        <li><a href=\"#contact\">Contact</a></li>\n      </ul>\n    </nav>\n    <main>\n      <section>\n        <article>\n          <h2>Artykuł</h2>\n          <p>Treść artykułu...</p>\n        </article>\n        <aside>\n          <h2>Blok poboczny</h2>\n          <p>Informacje poboczne...</p>\n        </aside>\n        <figure>\n          <img src=\"obrazek.jpg\" alt=\"Opis obrazka\" />\n          <figcaption>Opis obrazka</figcaption>\n        </figure>\n      </section>\n    </main>\n    <footer>\n      <p>&copy; 2023 Moja Strona. Wszelkie prawa zastrzeżone.</p>\n    </footer>\n  </body>\n</html>\n

To tyle na temat semantycznego HTML! Zachęcam do dalszego zgłębiania tematu i praktycznego zastosowania zdobytej wiedzy.

","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/courses/semantyczny-html.md",{"_8":68,"_10":69,"_12":70,"_17":76,"_19":77,"_21":78,"_23":79,"_25":80,"_27":81},"Renesans w JS, czyli nowoczesny JavaScript","JavaScript jest językiem programowania, który jest powszechnie stosowany do tworzenia dynamicznych i interaktywnych stron internetowych. W ciągu ostatnich lat JavaScript znacznie ewoluował, wprowadzając nowe funkcje i poprawiając istniejące mechanizmy. W tym kursie omówimy najważniejsze elementy nowoczesnego JavaScript, w tym ES6 i nowsze.",[16,71,72,73,74,75],"kurs","wprowadzenie","przewodnik","web","frontend",[72,16],["D",1719705600000],"5c595a92-7c31-4ced-859f-6875f555188f","nowoczesny-javascript","

JavaScript jest językiem programowania, który jest powszechnie stosowany do tworzenia dynamicznych i interaktywnych stron internetowych. W ciągu ostatnich lat JavaScript znacznie ewoluował, wprowadzając nowe funkcje i poprawiając istniejące mechanizmy. W tym kursie omówimy najważniejsze elementy nowoczesnego JavaScript, w tym ES6 i nowsze.

#Zmienne: `let` i `const`

W nowoczesnym JavaScript zmienne są definiowane za pomocą let i const zamiast var.

let pozwala na deklarację zmiennych, które mogą być zmieniane.
const pozwala na deklarację zmiennych, które są stałe i nie mogą być zmieniane.

#Przykłady:

let zmienna = \"To jest zmienna\";\nzmienna = \"Zmieniona wartość\";\n\nconst stala = \"To jest stała\";\n// stala = 'Zmieniona wartość'; // Spowoduje błąd\n

#Funkcje strzałkowe

Funkcje strzałkowe to skrócony zapis funkcji, który również pozwala na lepsze zrozumienie kontekstu this.

#Przykład:

// Standardowa funkcja\nfunction dodaj(a, b) {\n  return a + b;\n}\n\n// Funkcja strzałkowa\nconst dodaj = (a, b) => a + b;\n

#Szablony stringów (Template Literals)

Szablony stringów umożliwiają interpolację zmiennych i wyrażenia w łańcuchach znaków za pomocą backticków (`).

#Przykład:

const name = \"Jan\";\nconst greeting = `Cześć, ${name}! Jak się masz?`;\nconsole.log(greeting); // \"Cześć, Jan! Jak się masz?\"\n

#Destrukturyzacja

Destrukturyzacja pozwala na wyodrębnienie wartości z tablic lub obiektów i przypisanie ich do zmiennych.

#Przykład z tablicą:

const liczby = [1, 2, 3];\nconst [jeden, dwa, trzy] = liczby;\nconsole.log(jeden, dwa, trzy); // 1 2 3\n

#Przykład z obiektem:

const osoba = { imie: \"Jan\", wiek: 30 };\nconst { imie, wiek } = osoba;\nconsole.log(imie, wiek); // Jan 30\n

#Spread operator (`...`)

Spread operator pozwala na rozwinięcie elementów tablicy lub obiektu.

#Przykład z tablicą:

const liczby = [1, 2, 3];\nconst wiecejLiczb = [...liczby, 4, 5, 6];\nconsole.log(wiecejLiczb); // [1, 2, 3, 4, 5, 6]\n

#Przykład z obiektem:

const osoba = { imie: \"Jan\", wiek: 30 };\nconst nowaOsoba = { ...osoba, miasto: \"Warszawa\" };\nconsole.log(nowaOsoba); // { imie: 'Jan', wiek: 30, miasto: 'Warszawa' }\n

#Promisy

Promisy są używane do obsługi operacji asynchronicznych.

#Przykład:

const obietnica = new Promise((resolve, reject) => {\n  const sukces = true;\n\n  if (sukces) {\n    resolve(\"Operacja zakończona sukcesem!\");\n  } else {\n    reject(\"Operacja zakończona niepowodzeniem.\");\n  }\n});\n\nobietnica\n  .then((result) => console.log(result))\n  .catch((error) => console.log(error));\n

#Async/Await

Async/Await to składnia, która upraszcza pracę z promisami i sprawia, że kod asynchroniczny wygląda jak kod synchroniczny.

#Przykład:

const asyncFunction = async () => {\n  try {\n    const result = await obietnica;\n    console.log(result);\n  } catch (error) {\n    console.log(error);\n  }\n};\n\nasyncFunction();\n

#Zadania do wykonania

#Zadanie 1

Napisz funkcję strzałkową, która przyjmuje dwa argumenty i zwraca ich sumę.

\n Pokaż rozwiązanie\n

const dodaj = (a, b) => a + b;\nconsole.log(dodaj(2, 3)); // 5\n

#Zadanie 2

Utwórz obiekt reprezentujący samochód, z atrybutami marka, model i rok. Następnie użyj destrukturyzacji, aby wyodrębnić te wartości i wyświetlić je w konsoli.

\n Pokaż rozwiązanie\n

const samochod = { marka: \"Toyota\", model: \"Corolla\", rok: 2020 };\nconst { marka, model, rok } = samochod;\nconsole.log(marka, model, rok); // Toyota Corolla 2020\n

#Zadanie 3

Stwórz tablicę liczb od 1 do 5. Następnie użyj operatora spread, aby dodać liczby 6 i 7 do tej tablicy.

\n Pokaż rozwiązanie\n

const liczby = [1, 2, 3, 4, 5];\n\nconst wiecejLiczb = [...liczby, 6, 7];\n\nconsole.log(wiecejLiczb); // [1, 2, 3, 4, 5, 6, 7]\n

#Zadanie 4

Napisz funkcję asynchroniczną, która używa promisów do symulacji opóźnienia (np. za pomocą setTimeout). Funkcja powinna zwracać wynik po 2 sekundach.

\n Pokaż rozwiązanie\n

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));\n\nconst asyncFunction = async () => {\n  console.log(\"Czekam 2 sekundy...\");\n  await delay(2000);\n  console.log(\"2 sekundy minęły!\");\n};\n\nasyncFunction();\n

To tyle na temat podstaw nowoczesnego JavaScript! Zachęcam do dalszego eksperymentowania i zgłębiania tego tematu, aby tworzyć bardziej zaawansowane i interaktywne aplikacje.

","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/courses/nowoczesny-javascript.md",{"_8":83,"_10":84,"_12":85,"_17":91,"_19":92,"_21":93,"_23":94,"_25":95,"_27":96},"Wprowadzenie do metodyki BEM","Czym jest BEM? BEM (Block, Element, Modifier) to metodyka nazewnictwa klas CSS, która pomaga tworzyć komponenty interfejsu użytkownika w sposób modularny i łatwy do utrzymania. BEM dzieli interfejs na bloki, elementy i modyfikatory, co pozwala na lepszą organizację kodu CSS.",[71,86,87,88,89,90,57],"css","bem","metodyka","metodyki","stylowanie",[72,86,57],["D",1719705600000],"fdc3c682-5a35-49c8-9f01-ec941701c165","szybszy-css-czyli-wprowadzenie-do-bem","

#Czym jest BEM?

BEM (Block, Element, Modifier) to metodyka nazewnictwa klas CSS, która pomaga tworzyć komponenty interfejsu użytkownika w sposób modularny i łatwy do utrzymania. BEM dzieli interfejs na bloki, elementy i modyfikatory, co pozwala na lepszą organizację kodu CSS.

#Struktura BEM

#Blok

Blok jest samodzielnym komponentem, który może istnieć niezależnie. Może to być przycisk, nagłówek, formularz itp. Blok jest reprezentowany przez klasę główną.

<div class=\"block\">Treść bloku</div>\n

#Element

Element jest częścią bloku, która nie może istnieć bez niego. Elementy są reprezentowane przez klasę bloku, po której następuje podwójny podkreślnik (__).

<div class=\"block\">\n  <div class=\"block__element\">Treść elementu</div>\n</div>\n

#Modyfikator

Modyfikator zmienia wygląd lub zachowanie bloku lub elementu. Modyfikatory są reprezentowane przez pojedynczy podkreślnik (_).

<div class=\"block block--modifier\">Treść zmodyfikowanego bloku</div>\n<div class=\"block__element block__element--modifier\">\n  Treść zmodyfikowanego elementu\n</div>\n

#Przykład

Przykładowy kod HTML z zastosowaniem BEM:

<div class=\"button button--primary\">\n  <span class=\"button__text\">Kliknij mnie</span>\n</div>\n

Odpowiadający kod CSS:

.button {\n  padding: 10px 20px;\n  border: none;\n  cursor: pointer;\n}\n\n.button--primary {\n  background-color: blue;\n  color: white;\n}\n\n.button__text {\n  font-size: 16px;\n}\n

#Zasady BEM

Nazwa bloku: Powinna być krótka i jednoznaczna, opisująca funkcję lub zawartość komponentu.
Nazwa elementu: Powinna jasno określać, co robi element w kontekście bloku.
Nazwa modyfikatora: Powinna opisywać, jak zmienia się blok lub element.

#Przykłady

#Formularz logowania

HTML:

<form class=\"form form--login\">\n  <div class=\"form__group\">\n    <label class=\"form__label\" for=\"username\">Nazwa użytkownika</label>\n    <input class=\"form__input\" type=\"text\" id=\"username\" name=\"username\" />\n  </div>\n  <div class=\"form__group\">\n    <label class=\"form__label\" for=\"password\">Hasło</label>\n    <input class=\"form__input\" type=\"password\" id=\"password\" name=\"password\" />\n  </div>\n  <button class=\"form__button form__button--submit\">Zaloguj się</button>\n</form>\n

CSS:

.form {\n  max-width: 300px;\n  margin: 0 auto;\n  padding: 20px;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n}\n\n.form--login {\n  background-color: #f9f9f9;\n}\n\n.form__group {\n  margin-bottom: 15px;\n}\n\n.form__label {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: bold;\n}\n\n.form__input {\n  width: 100%;\n  padding: 8px;\n  box-sizing: border-box;\n}\n\n.form__button {\n  display: inline-block;\n  padding: 10px 20px;\n  border: none;\n  cursor: pointer;\n}\n\n.form__button--submit {\n  background-color: blue;\n  color: white;\n}\n

#Zadania do wykonania

#Zadanie 1

Utwórz komponent karty produktu (product-card) z elementami dla tytułu (product-card__title), opisu (product-card__description) i ceny (product-card__price). Dodaj modyfikator dla karty wyróżnionej (product-card--featured).

\n Pokaż rozwiązanie\n

HTML:

<div class=\"product-card product-card--featured\">\n  <h2 class=\"product-card__title\">Nazwa produktu</h2>\n  <p class=\"product-card__description\">Opis produktu</p>\n  <span class=\"product-card__price\">99,99 zł</span>\n</div>\n

CSS:

.product-card {\n  border: 1px solid #ccc;\n  padding: 15px;\n  border-radius: 5px;\n}\n\n.product-card--featured {\n  border-color: gold;\n  background-color: #fffbf0;\n}\n\n.product-card__title {\n  font-size: 18px;\n  margin-bottom: 10px;\n}\n\n.product-card__description {\n  font-size: 14px;\n  margin-bottom: 15px;\n}\n\n.product-card__price {\n  font-size: 16px;\n  font-weight: bold;\n}\n

#Zadanie 2

Stwórz nawigację (nav) z elementami dla pozycji nawigacji (nav__item) i linków (nav__link). Dodaj modyfikator dla aktywnego linku (nav__link--active).

\n Pokaż rozwiązanie\n

\n HTML:\n

<nav class=\"nav\">\n  <ul>\n    <li class=\"nav__item\">\n      <a href=\"#\" class=\"nav__link nav__link--active\">Home</a>\n    </li>\n    <li class=\"nav__item\"><a href=\"#\" class=\"nav__link\">O nas</a></li>\n    <li class=\"nav__item\"><a href=\"#\" class=\"nav__link\">Kontakt</a></li>\n  </ul>\n</nav>\n

CSS:

.nav {\n  background-color: #333;\n  padding: 10px;\n}\n\n.nav__item {\n  display: inline;\n  margin-right: 15px;\n}\n\n.nav__link {\n  color: white;\n  text-decoration: none;\n}\n\n.nav__link--active {\n  font-weight: bold;\n  text-decoration: underline;\n}\n

#Zadanie 3

Utwórz sekcję artykułu (article) z elementami dla nagłówka (article__header), treści (article__content) i stopki (article__footer). Dodaj modyfikator dla nagłówka z obrazkiem (article__header--with-image).

\n Pokaż rozwiązanie\n

\n HTML:\n

<article class=\"article\">\n  <header class=\"article__header article__header--with-image\">\n    <h1>Tytuł artykułu</h1>\n    <img src=\"image.jpg\" alt=\"Obrazek w nagłówku\" />\n  </header>\n  <section class=\"article__content\">\n    <p>Treść artykułu...</p>\n  </section>\n  <footer class=\"article__footer\">\n    <p>Stopka artykułu</p>\n  </footer>\n</article>\n

CSS:

.article {\n  border: 1px solid #ddd;\n  padding: 20px;\n  border-radius: 5px;\n}\n\n.article__header {\n  margin-bottom: 15px;\n}\n\n.article__header--with-image img {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n\n.article__content {\n  margin-bottom: 15px;\n}\n\n.article__footer {\n  font-size: 14px;\n  color: #777;\n}\n

To tyle na temat podstaw metodyki BEM! Zachęcam do dalszego eksperymentowania i zgłębiania tego tematu, aby tworzyć bardziej modularne i łatwe do utrzymania style CSS.

","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/courses/szybszy-css-czyli-wprowadzenie-do-bem.md",{"_8":98,"_10":99,"_12":100,"_17":101,"_19":102,"_21":103,"_23":104,"_25":105,"_27":106},"Wprowadzenie do CSS","CSS (Cascading Style Sheets) to język służący do opisywania wyglądu i formatu dokumentu HTML. CSS pozwala na oddzielenie treści od prezentacji, co umożliwia tworzenie estetycznych i spójnych stron internetowych. W tym kursie omówimy podstawy CSS, w tym selektory, właściwości, sposoby załączania CSS do HTML oraz JavaScript, a także przedstawimy kilka zadań do wykonania.",[86,57,71,72,73,74,75],[72,86],["D",1719705600000],"f2b95dee-8393-49b6-b9c0-3b4c7be4110f","wprowadzenie-do-css","

CSS (Cascading Style Sheets) to język służący do opisywania wyglądu i formatu dokumentu HTML. CSS pozwala na oddzielenie treści od prezentacji, co umożliwia tworzenie estetycznych i spójnych stron internetowych. W tym kursie omówimy podstawy CSS, w tym selektory, właściwości, sposoby załączania CSS do HTML oraz JavaScript, a także przedstawimy kilka zadań do wykonania.

#Sposoby załączania CSS do HTML

#Inline CSS

Inline CSS jest stosowany bezpośrednio w atrybucie style elementu HTML.

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Inline CSS</title>\n  </head>\n  <body>\n    <h1 style=\"color: blue;\">Witaj, świecie!</h1>\n  </body>\n</html>\n

#Internal CSS

Internal CSS jest umieszczony w sekcji <head> dokumentu HTML, wewnątrz elementu <style>.

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Internal CSS</title>\n    <style>\n      h1 {\n        color: blue;\n      }\n    </style>\n  </head>\n  <body>\n    <h1>Witaj, świecie!</h1>\n  </body>\n</html>\n

#External CSS

External CSS jest zapisany w osobnym pliku z rozszerzeniem .css i dołączony do dokumentu HTML za pomocą elementu <link>.

<!-- index.html -->\n<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>External CSS</title>\n    <link rel=\"stylesheet\" href=\"style.css\" />\n  </head>\n  <body>\n    <h1>Witaj, świecie!</h1>\n  </body>\n</html>\n

/* style.css */\nh1 {\n  color: blue;\n}\n

#Podstawowe selektory CSS

#Selektory elementów

Selektor elementu stosuje style do wszystkich elementów danego typu.

h1 {\n  color: blue;\n}\n

#Selektory klas

Selektor klasy stosuje style do elementów, które mają określoną klasę.

<h1 class=\"naglowek\">Witaj, świecie!</h1>\n

.naglowek {\n  color: blue;\n}\n

#Selektory identyfikatorów

Selektor identyfikatora stosuje style do elementu z określonym identyfikatorem.

<h1 id=\"naglowek-glowny\">Witaj, świecie!</h1>\n

#naglowek-glowny {\n  color: blue;\n}\n

#Podstawowe właściwości CSS

#Kolory

Kolory można definiować za pomocą nazw kolorów, wartości szesnastkowych, RGB lub HSL.

h1 {\n  color: red; /* Nazwa koloru */\n  color: #ff0000; /* Wartość szesnastkowa */\n  color: rgb(255, 0, 0); /* RGB */\n  color: hsl(0, 100%, 50%); /* HSL */\n}\n

#Tło

Właściwości tła pozwalają na ustawienie koloru tła, obrazka tła, powtarzania obrazka tła, pozycji obrazka tła itp.

body {\n  background-color: lightgray; /* Kolor tła */\n  background-image: url(\"tlo.jpg\"); /* Obrazek tła */\n  background-repeat: no-repeat; /* Brak powtarzania obrazka */\n  background-position: center; /* Pozycja obrazka */\n  background-size: cover; /* Rozmiar obrazka */\n}\n

#Marginesy i wypełnienia

Marginesy (margin) i wypełnienia (padding) pozwalają na kontrolowanie odstępów wokół elementów.

p {\n  margin: 20px; /* Margines wokół elementu */\n  padding: 10px; /* Wypełnienie wewnątrz elementu */\n}\n

#Ramki

Właściwości ramek pozwalają na dodanie obramowania wokół elementów.

div {\n  border: 1px solid black; /* Obramowanie */\n  border-radius: 10px; /* Zaokrąglone rogi */\n}\n

#Zadania do wykonania

#Zadanie 1

Stwórz stronę HTML z elementem <h1>, który ma kolor czerwony przy użyciu External CSS.

\n Pokaż rozwiązanie\n

<!-- index.html -->\n<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Zadanie 1</title>\n    <link rel=\"stylesheet\" href=\"style.css\" />\n  </head>\n  <body>\n    <h1 class=\"red\">Witaj, świecie!</h1>\n  </body>\n</html>\n

/* style.css */\n.red {\n  color: red;\n}\n

#Zadanie 2

Utwórz paragraf (<p>), który ma zielone tło, 20 pikseli wypełnienia i zaokrąglone rogi o promieniu 10 pikseli.

\n Pokaż rozwiązanie\n

<!-- index.html -->\n<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Zadanie 2</title>\n    <link rel=\"stylesheet\" href=\"style.css\" />\n  </head>\n  <body>\n    <p class=\"green-bg\">To jest paragraf</p>\n  </body>\n</html>\n

/* style.css */\n.green-bg {\n  background-color: green;\n  padding: 20px;\n  border-radius: 10px;\n}\n

#Zadanie 3

Stwórz div, który ma niebieską ramkę o grubości 2 pikseli, a wewnątrz niego umieść tekst \"To jest div\".

\n Pokaż rozwiązanie\n

<!-- index.html -->\n<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Zadanie 3</title>\n    <link rel=\"stylesheet\" href=\"style.css\" />\n  </head>\n  <body>\n    <div class=\"blue-border\">To jest div</div>\n  </body>\n</html>\n

/* style.css */\n.blue-border {\n  border: 2px solid blue;\n}\n

#Zadanie 4

Utwórz stronę HTML z trzema nagłówkami (<h1>, <h2>, <h3>) o różnych kolorach za pomocą selektorów klas.

\n Pokaż rozwiązanie\n

<!-- index.html -->\n<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Zadanie 4</title>\n    <link rel=\"stylesheet\" href=\"style.css\" />\n  </head>\n  <body>\n    <h1 class=\"red\">Nagłówek 1</h1>\n    <h2 class=\"blue\">Nagłówek 2</h2>\n    <h3 class=\"green\">Nagłówek 3</h3>\n  </body>\n</html>\n

/* style.css */\n.red {\n  color: red;\n}\n\n.blue {\n  color: blue;\n}\n\n.green {\n  color: green;\n}\n

To tyle na temat podstaw CSS! Zachęcam do dalszego eksperymentowania i zgłębiania tego tematu, aby tworzyć bardziej zaawansowane i estetyczne strony internetowe.

","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/courses/wprowadzenie-do-css.md",{"_8":108,"_10":109,"_12":110,"_17":113,"_19":114,"_21":115,"_23":116,"_25":117,"_27":118},"Czym jest DOM?","Czym jest DOM? DOM (Document Object Model) to interfejs programistyczny dla dokumentów HTML i XML. Umożliwia dynamiczne manipulowanie strukturą, stylem i treścią dokumentów. DOM reprezentuje dokument jako drzewo obiektów, gdzie każdy element, atrybut i tekst w dokumencie jest węzłem drzewa.",[71,57,111,112,72],"dom","struktura",[72,57],["D",1719705600000],"c5ceb63c-cf7a-4fc2-8b8e-5e2164c36d80","wprowadzenie-do-dom","

#Wprowadzenie

DOM (Document Object Model) to interfejs programistyczny dla dokumentów HTML i XML. Umożliwia dynamiczne manipulowanie strukturą, stylem i treścią dokumentów. DOM reprezentuje dokument jako drzewo obiektów, gdzie każdy element, atrybut i tekst w dokumencie jest węzłem drzewa.

#Struktura DOM

DOM przedstawia dokument HTML jako drzewo hierarchiczne:

<!DOCTYPE html>\n<html>\n  <head>\n    <title>Przykład DOM</title>\n  </head>\n  <body>\n    <h1>Witaj, świecie!</h1>\n    <p>To jest akapit.</p>\n  </body>\n</html>\n

Powyższy dokument HTML jest reprezentowany w DOM jako:

#document\n   |\n   +-- html\n        |\n        +-- head\n        |     |\n        |     +-- title\n        |            |\n        |            +-- \"Przykład DOM\"\n        |\n        +-- body\n              |\n              +-- h1\n              |     |\n              |     +-- \"Witaj, świecie!\"\n              |\n              +-- p\n                    |\n                    +-- \"To jest akapit.\"\n

#Podstawowe operacje na DOM

DOM udostępnia wiele metod do manipulacji dokumentem. Oto kilka przykładów:

#Wybieranie elementów

#`getElementById`

Wybiera element na podstawie jego identyfikatora (ID):

<p id=\"myParagraph\">To jest akapit.</p>\n\n<script>\n  const para = document.getElementById(\"myParagraph\");\n  console.log(para.textContent); // \"To jest akapit.\"\n</script>\n

#`getElementsByClassName`

Wybiera wszystkie elementy z określoną klasą:

<p class=\"myClass\">Akapit 1</p>\n<p class=\"myClass\">Akapit 2</p>\n\n<script>\n  const paras = document.getElementsByClassName(\"myClass\");\n  console.log(paras.length); // 2\n</script>\n

#`querySelector` i `querySelectorAll`

Wybiera elementy za pomocą selektorów CSS:

<p class=\"myClass\">Akapit 1</p>\n<p class=\"myClass\">Akapit 2</p>\n\n<script>\n  const firstPara = document.querySelector(\".myClass\");\n  console.log(firstPara.textContent); // \"Akapit 1\"\n\n  const allParas = document.querySelectorAll(\".myClass\");\n  console.log(allParas.length); // 2\n</script>\n

#Manipulacja elementami

#Zmiana tekstu

<p id=\"myParagraph\">To jest akapit.</p>\n\n<script>\n  const para = document.getElementById(\"myParagraph\");\n  para.textContent = \"Zmieniony tekst akapitu.\";\n</script>\n

#Zmiana atrybutów

<img id=\"myImage\" src=\"image.jpg\" alt=\"Obrazek\" />\n\n<script>\n  const img = document.getElementById(\"myImage\");\n  img.src = \"newImage.jpg\";\n  img.alt = \"Nowy obrazek\";\n</script>\n

#Dodawanie elementów

<ul id=\"myList\">\n  <li>Element 1</li>\n</ul>\n\n<script>\n  const list = document.getElementById(\"myList\");\n  const newItem = document.createElement(\"li\");\n  newItem.textContent = \"Element 2\";\n  list.appendChild(newItem);\n</script>\n

#Usuwanie elementów

<p id=\"myParagraph\">To jest akapit.</p>\n\n<script>\n  const para = document.getElementById(\"myParagraph\");\n  para.remove();\n</script>\n

#Zadania do wykonania

#Zadanie 1

Napisz kod HTML z listą (ul) i trzema elementami (li). Następnie za pomocą JavaScript dodaj czwarty element do listy.

\n Pokaż rozwiązanie\n

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Lista</title>\n  </head>\n  <body>\n    <ul id=\"myList\">\n      <li>Element 1</li>\n      <li>Element 2</li>\n      <li>Element 3</li>\n    </ul>\n    <script>\n      const list = document.getElementById(\"myList\");\n      const newItem = document.createElement(\"li\");\n      newItem.textContent = \"Element 4\";\n      list.appendChild(newItem);\n    </script>\n  </body>\n</html>\n

#Zadanie 2

Utwórz formularz z polem tekstowym i przyciskiem. Po kliknięciu przycisku zmień tekst przycisku na \"Wysłano\".

\n Pokaż rozwiązanie\n

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Formularz</title>\n  </head>\n  <body>\n    <form id=\"myForm\">\n      <input type=\"text\" id=\"myInput\" />\n      <button type=\"button\" id=\"myButton\">Wyślij</button>\n    </form>\n    <script>\n      const button = document.getElementById(\"myButton\");\n      button.addEventListener(\"click\", () => {\n        button.textContent = \"Wysłano\";\n      });\n    </script>\n  </body>\n</html>\n

#Zadanie 3

Napisz kod HTML z obrazkiem. Za pomocą JavaScript zmień źródło obrazka na nowe po kliknięciu na niego.

\n Pokaż rozwiązanie\n

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Obrazek</title>\n  </head>\n  <body>\n    <img id=\"myImage\" src=\"image.jpg\" alt=\"Obrazek\" />\n    <script>\n      const img = document.getElementById(\"myImage\");\n      img.addEventListener(\"click\", () => {\n        img.src = \"newImage.jpg\";\n      });\n    </script>\n  </body>\n</html>\n

#Zadanie 4

Utwórz stronę HTML z trzema akapitami. Użyj JavaScript, aby zmienić kolor tekstu wszystkich akapitów na niebieski.

\n Pokaż rozwiązanie\n

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Kolor tekstu</title>\n  </head>\n  <body>\n    <p>Akapit 1</p>\n    <p>Akapit 2</p>\n    <p>Akapit 3</p>\n    <script>\n      const paragraphs = document.querySelectorAll(\"p\");\n      paragraphs.forEach((p) => {\n        p.style.color = \"blue\";\n      });\n    </script>\n  </body>\n</html>\n

To tyle na temat podstaw DOM! Zachęcam do dalszego eksperymentowania i zgłębiania tego tematu.

","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/courses/wprowadzenie-do-dom.md",{"_8":120,"_10":121,"_12":122,"_17":123,"_19":124,"_21":125,"_23":126,"_25":127,"_27":128},"Wprowadzenie do HTML","Co to jest HTML? HTML (HyperText Markup Language) to podstawowy język wykorzystywany do tworzenia i strukturyzowania stron internetowych. HTML używa elementów, które definiują różne części dokumentu, takie jak nagłówki, akapity, linki, obrazy, i wiele innych.",[71,57,111,112,72],[72,57],["D",1719705600000],"a02067f3-329c-4cd9-8307-707d961e7234","wprowadzenie-do-html","

#Co to jest HTML?

HTML (HyperText Markup Language) to podstawowy język wykorzystywany do tworzenia i strukturyzowania stron internetowych. HTML używa elementów, które definiują różne części dokumentu, takie jak nagłówki, akapity, linki, obrazy, i wiele innych.

#Podstawowa struktura dokumentu HTML

Każdy dokument HTML ma określoną strukturę, która składa się z kilku kluczowych elementów:

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Tytuł strony</title>\n  </head>\n  <body>\n    <h1>Witaj, świecie!</h1>\n    <p>To jest przykładowa strona HTML.</p>\n  </body>\n</html>\n

#Wyjaśnienie struktury

<!DOCTYPE html>: Deklaracja typu dokumentu określająca, że dokument jest w HTML5.
<html>: Korzeń dokumentu HTML.
<head>: Zawiera meta informacje o dokumencie, takie jak kodowanie znaków i tytuł strony.
<meta charset=\"UTF-8\">: Określa kodowanie znaków dokumentu.
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">: Zapewnia poprawne wyświetlanie na urządzeniach mobilnych.
<title>: Tytuł strony wyświetlany na karcie przeglądarki.
<body>: Zawiera treść strony, która jest widoczna dla użytkownika.

#Podstawowe elementy HTML

#Nagłówki

HTML posiada sześć poziomów nagłówków, od <h1> do <h6>, gdzie <h1> jest najważniejszym nagłówkiem, a <h6> najmniej ważnym.

<h1>Najważniejszy nagłówek</h1>\n<h2>Drugi poziom nagłówka</h2>\n<h3>Trzeci poziom nagłówka</h3>\n

#Akapity

Akapity są tworzone za pomocą elementu <p>.

<p>To jest akapit tekstu.</p>\n

#Linki

Linki są tworzone za pomocą elementu <a>, który zawiera atrybut href określający adres URL.

<a href=\"https://www.example.com\">Kliknij tutaj, aby przejść do Example</a>\n

#Obrazy

Obrazy są dodawane za pomocą elementu <img>, który zawiera atrybut src wskazujący na źródło obrazu oraz alt opisujący obraz.

<img src=\"obrazek.jpg\" alt=\"Opis obrazka\" />\n

#Listy

Listy nieuporządkowane (<ul>) i uporządkowane (<ol>) zawierają elementy listy (<li>).

<ul>\n  <li>Element listy 1</li>\n  <li>Element listy 2</li>\n  <li>Element listy 3</li>\n</ul>\n\n<ol>\n  <li>Element listy 1</li>\n  <li>Element listy 2</li>\n  <li>Element listy 3</li>\n</ol>\n

#Formularze

Formularze są tworzone za pomocą elementu <form>, który zawiera różne elementy wejściowe, takie jak pola tekstowe (<input>), pola wyboru (<input type=\"checkbox\">), przyciski radio (<input type=\"radio\">), i przyciski (<button>).

<form action=\"/submit-form\" method=\"post\">\n  <label for=\"name\">Nazwa:</label>\n  <input type=\"text\" id=\"name\" name=\"name\" />\n  <input type=\"submit\" value=\"Wyślij\" />\n</form>\n

#Zadania do wykonania

#Zadanie 1

Utwórz stronę HTML, która zawiera:

Nagłówek <h1> z tytułem \"Moja pierwsza strona\".
Akapit z krótkim opisem.
Link do dowolnej strony internetowej.

\n Pokaż rozwiązanie\n

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Moja pierwsza strona</title>\n  </head>\n  <body>\n    <h1>Moja pierwsza strona</h1>\n    <p>To jest krótki opis mojej pierwszej strony internetowej.</p>\n    <a href=\"https://www.example.com\">Kliknij tutaj, aby przejść do Example</a>\n  </body>\n</html>\n

#Zadanie 2

Utwórz stronę HTML, która zawiera:

Obrazek z atrybutem src wskazującym na dowolny obrazek z internetu.
Alternatywny tekst opisujący obrazek.

\n Pokaż rozwiązanie\n

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Strona z obrazkiem</title>\n  </head>\n  <body>\n    <img src=\"https://via.placeholder.com/150\" alt=\"Przykładowy obrazek\" />\n  </body>\n</html>\n

#Zadanie 3

Utwórz stronę HTML, która zawiera:

Listę nieuporządkowaną z trzema ulubionymi potrawami.
Listę uporządkowaną z trzema krokami do ugotowania jednego z tych potraw.

\n Pokaż rozwiązanie\n

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Lista potraw</title>\n  </head>\n  <body>\n    <h1>Moje ulubione potrawy</h1>\n    <ul>\n      <li>Pizza</li>\n      <li>Sushi</li>\n      <li>Spaghetti</li>\n    </ul>\n    <h2>Jak ugotować spaghetti</h2>\n    <ol>\n      <li>Ugotuj makaron.</li>\n      <li>Przygotuj sos pomidorowy.</li>\n      <li>Wymieszaj makaron z sosem.</li>\n    </ol>\n  </body>\n</html>\n

#Zadanie 4

Utwórz formularz HTML, który zawiera:

Pole tekstowe do wprowadzenia imienia.
Pole typu radio do wyboru płci.
Pole typu checkbox do zaznaczenia zgody na przetwarzanie danych.
Przycisk do wysłania formularza.

\n Pokaż rozwiązanie\n

<!DOCTYPE html>\n<html lang=\"pl\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Formularz</title>\n  </head>\n  <body>\n    <form action=\"/submit-form\" method=\"post\">\n      <label for=\"name\">Imię:</label>\n      <input type=\"text\" id=\"name\" name=\"name\" /><br /><br />\n\n      <label>Płeć:</label>\n      <input type=\"radio\" id=\"male\" name=\"gender\" value=\"male\" />\n      <label for=\"male\">Mężczyzna</label>\n      <input type=\"radio\" id=\"female\" name=\"gender\" value=\"female\" />\n      <label for=\"female\">Kobieta</label><br /><br />\n\n      <input type=\"checkbox\" id=\"consent\" name=\"consent\" />\n      <label for=\"consent\">Zgadzam się na przetwarzanie danych osobowych</label\n      ><br /><br />\n\n      <input type=\"submit\" value=\"Wyślij\" />\n    </form>\n  </body>\n</html>\n

To tyle na temat podstaw HTML! Zachęcam do dalszego eksperymentowania i zgłębiania tego tematu, aby tworzyć bardziej złożone i interaktywne strony internetowe.

","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/courses/wprowadzenie-do-html.md",{"_8":130,"_10":131,"_12":132,"_17":133,"_19":134,"_21":135,"_23":136,"_25":137,"_27":138},"Wprowadzenie do JavaScript","JavaScript jest językiem programowania, który jest powszechnie stosowany do tworzenia dynamicznych i interaktywnych stron internetowych. W tym kursie omówimy podstawy JavaScript, w tym zmienne, typy danych, operatory, struktury kontrolne, funkcje oraz obiekty.",[16,71,72,73,74,75],[72,16],["D",1719705600000],"616c8855-34a3-4370-809d-a01e88514820","wprowadzenie-do-javascript","

JavaScript jest językiem programowania, który jest powszechnie stosowany do tworzenia dynamicznych i interaktywnych stron internetowych. W tym kursie omówimy podstawy JavaScript, w tym zmienne, typy danych, operatory, struktury kontrolne, funkcje oraz obiekty.

#Zmienne

Zmienne w JavaScript mogą być deklarowane za pomocą var, let i const.

#Przykłady:

var x = 5; // Deklaracja zmiennej za pomocą var\nlet y = 10; // Deklaracja zmiennej za pomocą let\nconst z = 15; // Deklaracja stałej za pomocą const\n

#Typy danych

JavaScript obsługuje różne typy danych, w tym liczby, łańcuchy znaków (string), boolean, obiekty i tablice.

#Przykłady:

let liczba = 42; // Typ danych: Number\nlet tekst = \"Hello, World!\"; // Typ danych: String\nlet prawda = true; // Typ danych: Boolean\nlet obiekt = { imie: \"Jan\", wiek: 30 }; // Typ danych: Object\nlet tablica = [1, 2, 3, 4, 5]; // Typ danych: Array\n

#Operatory

Operatory w JavaScript obejmują arytmetyczne, porównania, logiczne i przypisania.

#Przykłady:

// Operatory arytmetyczne\nlet suma = 10 + 5; // Dodawanie\nlet roznica = 10 - 5; // Odejmowanie\nlet iloczyn = 10 * 5; // Mnożenie\nlet iloraz = 10 / 5; // Dzielenie\n\n// Operatory porównania\nlet rowne = 10 == 10; // Porównanie wartości\nlet identyczne = 10 === 10; // Porównanie wartości i typu\nlet nierowne = 10 != 5; // Nierówność\n\n// Operatory logiczne\nlet iOperator = true && false; // Operator logiczny AND\nlet lubOperator = true || false; // Operator logiczny OR\nlet nieOperator = !true; // Operator logiczny NOT\n\n// Operatory przypisania\nlet a = 10;\na += 5; // Dodanie i przypisanie\na -= 5; // Odejmowanie i przypisanie\n

#Struktury kontrolne

#Instrukcja warunkowa `if`

Instrukcja if służy do wykonywania kodu warunkowo.

let wiek = 18;\n\nif (wiek >= 18) {\n  console.log(\"Jesteś pełnoletni\");\n} else {\n  console.log(\"Jesteś niepełnoletni\");\n}\n

#Pętla `for`

Pętla for służy do wykonywania kodu wielokrotnie.

for (let i = 0; i < 5; i++) {\n  console.log(i);\n}\n

#Pętla `while`

Pętla while służy do wykonywania kodu, dopóki warunek jest prawdziwy.

let i = 0;\n\nwhile (i < 5) {\n  console.log(i);\n  i++;\n}\n

#Funkcje

Funkcje pozwalają na grupowanie kodu, który może być wykonywany wielokrotnie.

#Deklaracja funkcji

function dodaj(a, b) {\n  return a + b;\n}\n\nlet wynik = dodaj(5, 10);\nconsole.log(wynik); // 15\n

#Funkcje strzałkowe

Funkcje strzałkowe to krótszy zapis funkcji.

const dodaj = (a, b) => a + b;\nlet wynik = dodaj(5, 10);\nconsole.log(wynik); // 15\n

#Obiekty

Obiekty pozwalają na grupowanie powiązanych wartości i funkcji.

#Tworzenie obiektu

let osoba = {\n  imie: \"Jan\",\n  wiek: 30,\n  przedstawSie: function () {\n    return `Cześć, mam na imię ${this.imie} i mam ${this.wiek} lat.`;\n  },\n};\n\nconsole.log(osoba.przedstawSie()); // Cześć, mam na imię Jan i mam 30 lat.\n

#Tablice

Tablice to struktury danych, które przechowują listę elementów.

#Tworzenie i manipulacja tablicami

let liczby = [1, 2, 3, 4, 5];\nconsole.log(liczby[0]); // 1\n\nliczby.push(6); // Dodanie elementu na końcu tablicy\nconsole.log(liczby); // [1, 2, 3, 4, 5, 6]\n\nliczby.pop(); // Usunięcie ostatniego elementu z tablicy\nconsole.log(liczby); // [1, 2, 3, 4, 5]\n

#Zadania do wykonania

#Zadanie 1

Napisz funkcję, która przyjmuje dwie liczby jako argumenty i zwraca ich iloczyn.

\n Pokaż rozwiązanie\n

function iloczyn(a, b) {\n  return a * b;\n}\n\nlet wynik = iloczyn(5, 10);\nconsole.log(wynik); // 50\n

#Zadanie 2

Utwórz obiekt reprezentujący książkę z atrybutami tytul, autor i rok. Następnie dodaj metodę, która zwraca opis książki.

\n Pokaż rozwiązanie\n

let ksiazka = {\n  tytul: \"W pustyni i w puszczy\",\n  autor: \"Henryk Sienkiewicz\",\n  rok: 1911,\n  opis: function () {\n    return `${this.tytul} to książka napisana przez ${this.autor} w roku ${this.rok}.`;\n  },\n};\n\nconsole.log(ksiazka.opis()); // W pustyni i w puszczy to książka napisana przez Henryk Sienkiewicz w roku 1911.\n

#Zadanie 3

Napisz funkcję, która przyjmuje tablicę liczb i zwraca największą liczbę z tej tablicy.

\n Pokaż rozwiązanie\n

function znajdzNajwieksza(tablica) {\n  let najwieksza = tablica[0];\n  for (let i = 1; i < tablica.length; i++) {\n    if (tablica[i] > najwieksza) {\n      najwieksza = tablica[i];\n    }\n  }\n  return najwieksza;\n}\n\nlet liczby = [1, 2, 3, 4, 5];\nconsole.log(znajdzNajwieksza(liczby)); // 5\n

#Zadanie 4

Utwórz tablicę, która zawiera kilka imion. Następnie użyj pętli for, aby wyświetlić każde imię w konsoli.

\n Pokaż rozwiązanie\n

let imiona = [\"Jan\", \"Anna\", \"Krzysztof\", \"Maria\"];\n\nfor (let i = 0; i < imiona.length; i++) {\n  console.log(imiona[i]);\n}\n// Jan\n// Anna\n// Krzysztof\n// Maria\n

To tyle na temat podstaw JavaScript! Zachęcam do dalszego eksperymentowania i zgłębiania tego tematu, aby tworzyć bardziej zaawansowane i interaktywne aplikacje.

","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/courses/wprowadzenie-do-javascript.md","projects",[141,159,173],{"_8":142,"_10":143,"_12":144,"_150":151,"_19":152,"_153":154,"_21":155,"_23":156,"_25":157,"_27":158},"E-Przychodnia","Aplikacja typu e-commerce mająca na celu ułatwienie korzystania z dobrodziejstw służby zdrowia. All-in-one, znajdziesz tutaj możliwość umawiania wizyt, wyszukiwania najbliższych placówek zdrowia, podgląd skierowań i recept i wiele innych opcji.",[14,145,146,147,148,149],"e-commerce","projekt","angular","nestjs","crud","technologies",[14,147,148],["D",1740787200000],"status","IN_PROGRESS","5c810f8a-1e49-4598-ae9a-e2807a0675c3","e-przychodnia","","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/projects/e-przychodnia.md",{"_8":160,"_10":161,"_12":162,"_150":167,"_19":168,"_153":169,"_21":170,"_23":171,"_25":157,"_27":172},"Password Generator","Aplikacja do generowania hasła, wedle podanych wytycznych.",[14,163,164,165,166],"aplikacja","hasło","password","generowanie",[14],["D",1740787200000],"COMPLETED","6caac6e1-f877-4aab-bdd8-e994b05eada3","password-generator","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/projects/password-generator.md",{"_8":174,"_10":175,"_12":176,"_150":181,"_19":182,"_153":169,"_21":183,"_23":178,"_25":157,"_27":184},"Rock-Paper-Scissors","Prosta gra każdemu dobrze znana, czyli papier-kamień-nożyce. Gra wykonana za pomocą React Native",[14,177,178,179,180],"gra","rock-paper-scissors","mobile","react-native",[14,180],["D",1740787200000],"d9ac6a9e-9a56-49eb-8a1a-96f76d65ab5b","https://github.com/jakubszpil/jakubszpil.github.io/edit/main/app/content/projects/rock-paper-scissors.md","root","actionData","errors"]

#Spis Treści

#1. Podstawy Dependency Injection

#2. Prosty przykład DI

#3. Wstrzykiwanie zależności za pomocą funkcji wstrzykującej

#Podsumowanie

#Czym jest Wzorzec Obserwatora?

#Korzyści z używania Wzorca Obserwatora

#Implementacja Wzorca Obserwatora w TypeScript

#Przykład 1: Prosta Implementacja

#Przykład 2: Rozbudowana Implementacja z Typowaniem

#Zakończenie

#Przykładowy Projekt z Wykorzystaniem Wzorca Obserwatora

#Czym jest Signal?

#Korzyści z używania Signal

#Implementacja Signal w TypeScript

#Przykład 1: Prosty Signal

#Przykład 2: Zaawansowany Signal z Typowaniem

#Zakończenie

#Czym jest semantyczny HTML?

#Zalety używania semantycznego HTML

#Semantyczne elementy HTML

#<!DOCTYPE html>

#<header>

#<nav>

#<main>

#<article>

#<section>

#<aside>

#<footer>

#<figure> i <figcaption>

#<time>

#<mark>

#<address>

#Ograniczenia i wyzwania

#Podsumowanie

#Zadania do wykonania

#Zadanie 1

#Zadanie 2

#Zadanie 3

#Zmienne: let i const

#Przykłady:

#Funkcje strzałkowe

#Przykład:

#Szablony stringów (Template Literals)

#Przykład:

#Destrukturyzacja

#Przykład z tablicą:

#Przykład z obiektem:

#Spread operator (...)

#Przykład z tablicą:

#Przykład z obiektem:

#Promisy

#Przykład:

#Async/Await

#Przykład:

#Zadania do wykonania

#Zadanie 1

#Zadanie 2

#Zadanie 3

#Zadanie 4

#Czym jest BEM?

#Struktura BEM

#Blok

#Element

#Modyfikator

#Przykład

#Zasady BEM

#Przykłady

#Formularz logowania

#Zadania do wykonania

#Zadanie 1

#Zadanie 2

#Zadanie 3

#Sposoby załączania CSS do HTML

#Inline CSS

#Internal CSS

#External CSS

#Podstawowe selektory CSS

#Selektory elementów

#Selektory klas

#`<!DOCTYPE html>`

#`<header>`

#`<nav>`

#`<main>`

#`<article>`

#`<section>`

#`<aside>`

#`<footer>`

#`<figure>` i `<figcaption>`

#`<time>`

#`<mark>`

#`<address>`

#Zmienne: `let` i `const`

#Spread operator (`...`)

#`getElementById`

#`getElementsByClassName`

#`querySelector` i `querySelectorAll`

#Instrukcja warunkowa `if`

#Pętla `for`

#Pętla `while`