Dlaczego warto stosować testy/Do czego służą testy?

[..........]

TDD - test driven development - testowanie aplikacji na bieżąco, podczas realizacji kolejnych kroków, może to być związane z tworzeniem testu jeszcze przed napisaniem danego bloku kodu

Unit test - inaczej testowanie jednostkowe - polega na rozbiciu kodu na jak najmniejsze części i poddawanie ich testom …

Wraz z wzrostem wielkości projektu, większą rolę odgrywać będzie odpowiedni sposób strukturyzacji oraz modularyzacji plików zdefiniowanych w ramach niego stylów. Podział na odpowiednie moduły umożliwia również ponowne wykorzystanie wybranych części kodu w innych projektach.

Zwyczajowo przyjęło, się że plik, który importuje moduły (partials) a staje się łącznikiem pomiędzy nimi nazwany …

Sass oferuje następujące wbudowane moduły color, list, map, math, meta, selector, string

Używanie modułu odbywa się poprzez jego zaimportowanie na początku poprzez odowłanie się do słowa kluczowego @use nazwy modułu oraz użycia gwiazdki lub bez użycia gwiazdki - wówczas każda metoda musi być poprzedzona nazwą modułu

@use 'sass:math';
$half: math …

CSS na sterydach - czyli Syntactically Awesome Style Sheets

Sass jest językiem skryptowym rozszerzającym możliwości CSS i wymaga kompilacji na CSS tak aby mógł być interpretowany przez przeglądarki w tym celu można wykorzystać Gulpa (odpowiedniej wtyczki) lun wtyczki VSC.

Sass pozwala na:

* definiowanie zmiennych

* pisanie składni opartej na zagnieżdżaniu selektorów w …

NPM

Korzystając z domyślnej opcji instalacji paczki/wtyczki z NPM w przypadku Ubuntu stosując opcję instalacji globalnej należy wykorzystać uprawnienia administracyjne sudo. Aby uniknąć instalowania wtyczkę w ten sposób (i przekazywania im możliwości edytowania ustawień systemowych) należy zastosować niżej opisane kroki.

1) Należy stworzyć folder, w którym będą zapisane paczki …

Instalacja globalna

Gulp - jest narzędziem pozwalającym na zarządzanie wieloma zadaniami

Instalacja globalna Gulpa (wymaga wcześniejszej instalacji npm np. korzystając z nvm - Node Version Manager), która pozwala na wywoływanie komendy gulp globalnie przy pomocy terminala

npm install --global gulp-cli

Sprawdzanie instalacji (jej wersji)

gulp -v

zwraca:

CLI version: 2.2.1 …

min() - jest funkcją CSS i pozwala na oznaczenie najmniejszej wartości w przypadku szerokości obiektu i przyjmuje jedno lub więcej wyrażeń rozgraniczonych przecinkami jako parametry (istnieje możliwość mieszania jednostek np. px, vw, %) - najmniejszy z dwóch podanych parametrów w danym momencie jest obowiązujący.

.second-level {
  width: min(50vw, 400px);
}

Przykładowo powyższy …

Lokalna pamięć przeglądarki pozwala na przechowywanie danych przy pomocy JavaScript bezterminowo.

Dane przechowywane w lokalnej pamięci przeglądarki nie mogą przekroczyć 5mb i nie powinny znajdować się w nich dane poufne. Lokalna pamięć przeglądarki działa w sposób synchroniczny (odpowiada na zapytania po kolei).

Aby korzystać z tzw local storage (LS) można …

Zastosowanie trzech kropek wprowadzonych w ES6 - pozwala na rozwinięcie wyrażenia iterowalnego (wielokorotnie powtarzalnego/przejściowego) jako spread operator lub parametr rest.

Trzykropek można stosować w kontekście obiektów, tablic, stringów, zbiorów (setów) i map.

Spread Operator -> Rozproszenie

Dzieli kolekcję tworząc tablicę

Pozwala na rozciągnięcie (rozproszenie/rozwinięcie) obiektu mogącego ulec iteracji wewnątrz odbiorcy …

Klasy pozwalają na przypisanie metod bezpośrednio do (prototypów) obiektów przy pomocy jednego bloku (od ES6)

class Droid {
    constructor(name, occupation) {
        this.name = name;
        this.occupation = occupation;
    }

    logDroid() {
        return `this is ${this.name} a ${this.occupation} // metoda prototypowa -> __proto__: Object
    }
}

const c3po = new Droid('C-3PO', 'Protocol droid');
const r2d2 = new Droid …

Do tej pory pracowałem na Bionicznym Bobrze (Ubuntu 18.04) następnie Eonicznum Gronostaju (19.10) i gdy przyszedł czas na Skupioną Fossę (20.04) postanowiłem skorzystać z możliwości aktualizowania systemu - niestety w trakcie dokonywania się aktualizacji została ona przerwana w nieoczekiwany sposób, w wyniku czego system przestał się uruchamiać.

Przerwana …

Template strings lub też literals zwane po polsku łańcuchami szablonowymi

Łańcuchy szablonowe [wcześniej wspominałem o nich w tym miejscu] pozwalają na podstawianie zmiennych wewnątrz informacji przeznaczonymi do druku i zawartymi pomiędzy apostrofami [ warto pamiętać o tym, że stosowanie tego formatu zapisu nie wymaga używania sekwencji ucieczkowej -> /n]

Przykładowo:

const droid …

Kolekcje węzłów DOM

Typy węzłów

• element node
• attribute node
• text node
• comment node

NodeList

Uporządkowana lista wszystkich węzłów DOM (w tym również węzłów tekstowych oraz bloków tekstowych), obiekty można uzyskać poprzez odwołanie się do indeksu

querySelectorAll()/getElementsByName() - - metody document zwracające NodeList

NodeList posiada metodę forEach() !!

NodeList, jest static - zwrócona lista …

Propagacja wydarzeń (w górę) - event bubbling

W DOM domyślnie wydarzenia są przenoszone od dziecka lub rodzeństwa do rodzica lub rodzeństwa - oznacza to, że jeśli rodzic oraz dziecko mają nastawioną ten sam rodzaj akcji wywołującej (np. click) oraz różne lub tą samą wydarzenie wywołane, oba z nich dojdą do skutku chyba …

Nasłuchiwacz wydarzeń ;)

Aby dodać interakcji do strony internetowej przy pomocy JS należy do wybranego przez siebie elementu dołączyć tzw. 'nasłuchiwacz wydarzeń' (ang. event listener)

.addEventListener(wydarzenie, funkcja-przekazana-do-wywołania) - ta metoda przyjmuje dwa argumenty rodzaj 1) rodzaj wydarzenia np. 'click' (kliknięcie myszy) oraz 2) funkcję jaka ma się wywołać w momencie jego …

DOMContentLoaded

Na początek warto pamiętać o wydarzeniu DOMContentLoaded - nasłuchuje przeładowania przeglądarki -> pozwala na wywołanie funkcji zmieniającej elementy DOM w momencie załadowania całości drzewa DOM (jest to istotne w momencie gdy plik zawierający skrypt js jest podlinkowany w zamiast po )

Przykładowe zastosowanie "zamknięcie" zmian w bloku/funkcji -> w momencie przeładowania przeglądarki …

DOM - document object model

Selektory pojedynczych elementów

:::Istnieje możliwość łączenia selektorów z atrybutami :::

Przykładowe zastosowanie

document.getElementById('button-4').className // zwraca …

Obiekt document jest częścią obiektu window i został opisany poniżej. Wybrane metody obiektu window (globalny) ->

Window

alert() - pokazuje się okienko z ostrzeżeniem

window.alert('Hello world')

lub po prostu

alert('Hello world')

prompt() - wyskakuje okienko z informacją

confirm() - przyjmuje parametr

if(confirm('Are you sure?')) {
  console.log('Yes)
}

window.outerHeight …

Funkcja konstruktora pozwala na stworzenie wielu obiektów według zdefiniowanego schematu, który jest nazywany prototypem

Nazwa funkcji konstruktora często zaczyna się od dużej litery

Schemat:

  function NazwaFunkcji (właściwość) { // zdefiniowanie konstruktora, przekazanie właściwości
        this.atrybut1 = właściwość; //
        this.atrybut2 = function(argument) {  // funkcja zawarta w ramach obiektu stająca się metodą obiektu
              console.log(this …

Funkcja podczas wywołania odwołuje się do jej bieżącego kontekstu (sposobu jej wywołania, a nie miejsca jej deklaracji lub sposobu jej zdefiniowania) przy pomocy słowa kluczowegothis.

-> nie wskazuje na funkcję wewnątrz, której jest użyte ani na zakres (scope) funkcji

-> wskazanie kontekstu poprzez call, apply (lub bind)

-> wywołanie funkcji z wykorzystaniem …