W lipcu opublikowałem 2 wpisy:

Webstorm:

1. Jak dodać wiele karetek w kodzie?

JavaScript:

1. Jak dodać element do DOM względem innego elementu?

Przeczytałem 2 książki:

1. Ogień i krew część 2 — George R.R. Martin
2. Manazuru — Hiromi Kawakami

Przesłuchałem 6 audiobooków:

1. Make Your Bed — William H. McRaven
2. Stroiciel fortepianów — Chiang-Sheng Kuo
3. Ziemiomorze. Tehanu — Ursula K. Le Guin
4. Moja kuzynka Rachela — Daphne Du Maurier
5. Pieśń Lodu i Ognia. Nawałnica mieczy. Stal i śnieg — George R.R. Martin
6. Paradyzja — Janusz A. Zajdel

Dodawanie elementu obok innego

Metoda insertAdjacentElement pozwala na dodanie elementu względem już istniejącego w drzewie DOM. Za pomocą niej możesz dodać nowy element "przed" lub "za" już istniejącym.

Wywodzi się ona z interfejsu: Element. Żeby ją wywołać, musisz posiadać referencję do już istniejącego elementu w DOM.

Przykład:

HTML:

<div id="content">Some content</div>

Załóżmy, że chcesz dodać nowy element "za" elementem o id: content.

JavaScript:

const contentEl = document.getElementById('content');
const newElement = document.createElement('div');
newElement.innerText = 'New element';

content.insertAdjacentElement('afterend', newElement);

Wynik:

HTML:

<div id="content">Some content</div>
<div>New element</div>

Metoda insertAdjacentElement przyjmuje dwa parametry.

Pierwszy parametr to pozycja, w której ma zostać umieszczony element obok istniejącego. Przyjmuje następujące wartości:

1. beforebegin — Doda nowy element "przed"
2. afterbegin — Doda nowy element w środku "przed" pierwszym elementem dzieckiem
3. beforeend — Doda nowy element w środku "za" ostatnim elementem dzieckiem
4. afterend — Doda nowy element "za"

Najlepiej to zilustruje następujący przykład:

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  Some content
  <!-- beforeend -->
</div>
<!-- afterend -->

Drugi parametr to element, który ma zostać dodany.

Sposób 1: Klawiatura + mysz

Wciśnij przycisk Alt i następnie zlokalizuj miejsce, w którym chcesz umieścić dodatkową karetkę. Wciśnij lewy przycisk myszy.

Sposób 2: Klawiatura

Możesz umieścić dodatkowe karetki poniżej lub powyżej aktualnej lokalizacji korzystając tylko z klawiatury.

Wciśnij dwa razy przycisk Ctrl (za drugim kliknięciem nie zwalniaj klawisza), używając strzałek góra/dół na klawiaturze możesz dodawać nowe karetki.

W czerwcu opublikowałem 1 wpis:

Webstorm:

1. Praca z JSDoc

Przeczytałem 1 książkę:

1. Unit Testing Principles, Practices, and Patterns — Vladimir Khorikov

Przesłuchałem 6 audiobooków:

1. Feel Good Productivity — Ali Abdaal
2. Korona śniegu i krwi — Elżbieta Cherezińska
3. Ludzkie dzieci — P.D. James
4. Ostatnie życzenie — Andrzej Sapkowski
5. Tekst — Dmitry Glukhovsky
6. Artemis — Andy Weir

Webstorm i JSDoc

Tworzenie dokumentacji za pomocą JSDoc można zautomatyzować. Wystarczy, że przed funkcją napiszesz: /** i naciśniesz klawisz Enter:

/**function sum(a, b) {
	return a + b;
}

Zostanie wygenerowana dokumentacja:

/**
 * 
 * @param a
 * @param b
 * @returns {*}
 */
function sum(a, b) {
	return a + b;
}

JSDoc i Typescript

Dodatkowo można poinformować Webstorm, żeby stworzył dokumentację kodu wraz z typami danych.

Czyli mając kod:

/**function sum(a: number, b: number): number {
    return a + b;
}

Możesz wygenerować to:

/**
 *
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
function sum(a: number, b: number): number {
    return a + b;
}

Żeby tak się stało, upewnij się, że jedna opcja w ustawieniach jest zaznaczona.

Przejdź do Settings (CTRL + ALT + S) -> Editor -> Code Style -> TypeScript. Zakładka: Code Generation. Sekcja Comments i zaznacz opcję: Include types in JSDoc.