Moje notatki z WTF

Cześć!

Tutaj znajdą się notatki. W czasie powtórki ze szkolenia postanowiłem zapisać przydatne rzeczy z podziałem na HTML CSS i JS. P.S. notatki są chaotyczne, ale zrozumiałe dla mnie 🏇🏇🏇🏇🏇🏇

HTML - szkielet

http, https, url, jak działa przeglądarka? (https: //cotenfrontend.pl:443/ index.html? parametr=wartość): adres www --> przeglądarka szuka serwera --> odpytuje serwer --> serwer wysyła do przeglądarki html --> przeglądarka wczytuje html i szuka dodatkowych zasobów --> parsuje i renderuje stronę.
kody: 100 - hold on, 200 - OK, 30x - złe miejsce ale przekieruję, wiem gdzie, 404 - brak zasobu, 50x - błąd serwera.
root "/" jeśli go nie podamy, przeglądarka szuka ścieżki względem podanego adresu (może nieznaleźć, np jak jesteśmy na podstronie), jeśli podamy - szuka zaczynając od głównego adresu strony.
div nie ma znaczenia semantycznego! Tylko jako opakowanie gdy nie istnieje inny odpowiedni semantyczny znacznik.
HTML to instrukcja a DOM to już gotowa, "złożona" strona (przykład: instrukcja a złożony mebel z IKEI 😄)
elementy, które będą używane przez JS, powinny mieć klasę np. ".element--js".
dany element np. "header" to węzeł czyli node.
debugging: sprawdź, czy zapisałeś plik, czy edytujesz właściwy plik, czy odświeżyłeś przeglądarkę, można w F12 w zakł. Network włączyć "disable cache", czy nie ma błędu w edytorze (devtoolsach), czytaj błędy, zajrzyj do zakłądki Network (kody błędów), pogadaj z kaczką!, wygoogluj problem!, stackoverflow, czytaj dokumentację, GitHub issues.
przydatne linki: developer.mozilla.org || devdocs.io || caniuse.com || css-tricks.com/almanac || www.w3.org/TR/html52/ || www.w3.org/TR/CSS/ ||
dl - description list: dl - znacznik główny, dt - description title, dd - opis.
tabele - nie używamy do budowania layoutu!
formularze: cała składnia => FORMS, wysłanie forma - action="url://z-którym-gadamy", bezpieczniejsza i zalecana jest metoda POST, enctype - jeśli wysyłamy pliki,zmieniamy na multipart/form-data, atrybut required - pole obowiązkowe, pattern - wpisane dane muszą mieć określoną formę (html5pattern.com/Names). Walidacja po stronie frontendu nie zastępuje walidacji po stronie backendu!
.gitignore - umieszczamy tam nazwy plików których nie chcemy dodawać do repo na GitHubie.
GIT - branche: git branch nazwaBrancha- tworzy nowy branch, git checkout nazwaBrancha - przeskakujemy pomiędzy branchami; branchy używamy np do testowania nowych funkcji. Żeby wypchnąć nowy branch wpisujemy komendę git push --set-upstream origin nazwaBrancha. Jeśli chcemy dodać zmiany do brancha master - musimy przejsc na master i użyć komendy git merge nazwaBrancha.
hiperdivoza i inne choroby 😃 semantyczny HTML = mający znaczenie! hiperdivoza - pakowanie wszystkiego w DIVy (nie wiadomo jakie znaczenie semantyczne mają elementy). Spanownica - opakowanie wszystkiego w spany, co nie chcemy zeby przeszło do następnej linii (znowu - nie wiadomo co jest czym na stronie). Zespół A.Buttona - mylenie znaczników a i button. a - nawigacja między dokumentami i kotwice wewnątrz dokumentu, button - akcje w danym dokumencie. Sekcjonosceptyzm - nieużywanie znaczników semantyznych main, section, article. Dysnagłówkizm - błędne używanie nagłówków. Alistonoza - nieuzasadniona niechęć do używania znaczników ul ol li. Problemoformizm - błędne używanie formularzy (problemy z dostępnością! Każdy input musi mieć label, placeholder nie zastępuje label, jeśli nie ma label w projekcie, użyj aria-label). Tabelofobia - unikanie używania tabel za wszelką cenę.
Lekarstwo na powyższe choroby - po pierwsze - użyj validatora po drugie - pisząc HTML myśl jaką treść reprezentuje!
zasady projektowania graficznego: zacznij od prawdziwej treści!; naszkicuj wstępy schemat na papierze; porzuć wizję strony idealnej, zacznij od najniższego poziomu który daje jakąś wartość; działaj krok po kroku; projektując trzymaj sie siatki gridowej; zacznij od czarnego/białego /odcieni szarości; kolory zostaw na koniec i ogranicz je do minimum; nie wymyślaj koła na nowo; wykorzystaj gotowe elementy;
przydatne linki: dribbble || behance || refactoring UI || awwwards || siteinspire || codepen || codrops || CSS design awards || pdkit
znaczniki w sekcji head - "title" - tytuł strony; meta tagi og - title, description, url, image. Pozwalają wpłynąć na to, co się wyświetla przy wysyłaniu linku np na Facebooku. Image możemy wygenerować przy użyciu CANVA. Rozdzielczość 1200x630px. Narzędzie na FB o nazwie og debug - pozwala na podgląd jak się to nam wyświetli i czy nie ma błędów.
Dostępność: WAI - web accessibility initiative - organizacja w ramach W3C. Publikuje Web Content Accessibility Guidelines (WCAG). a11y - projekt społecznościowy. Mają "sprawdzacz kontrastu" - narzędzie do sprawdzenia czy kontrast na stronie będzie wystarczający. Polska - Fundacja Widzialni - materiały, szkolenia, audyty. Zasady pisania dobrze dostępnych stron: pisz semantycznie; zadbaj o kontrast; dobrze dobieraj kolory ==> colorsafe; unikaj autoplay'a; nie ograniczaj rzeczy czasowo; nie usuwaj :focus i outline; stosuj alt w obrazkach i kończ opisy kropką; ARIA - Accessible Rich Internet Applications - atrybuty pomagające zwiększać dostępność, opisywać rzeczy, które mogą być problematyczne dla osób niepełnosprawnych (np. aria-label); rozszerzenie do Chrome'a - CHROMEVOX.
PWA - Progressive Web Applications - pozwalają na twozenie aplikcaji bez konieczności poznawania nowych technologii; łatwa aktualizacja i dystrybucja; działają offline; technologia rozwijająca się. Dwa podstawowe pliki manifest.json i service worker.js; generowanie ikon - npm run generate-icons
testowanie na różnych przeglądrkach - np. browserstack. Możemy testować strony na maszynach wirtualnych - virtualbox (nie ma maców). Koncepcja Progressive enhancement - nawet jeśli strona nie wygląda idealnie na starszych przeglądarkach, to fajnie jeśli będzie można chociaż przeczytać treść. Można użyć @supports w CSSach (opis w 11.05). Najlepiej na starcie projektu ustalić/zapytać zleceniodawcę jakie przeglądarki mają być wspierane.
optymalizacja - devtools->network; lighthouse - audyt strony; web.dev; mozna skompresowac obrazy tinypng; wydzielenie krytycznego CSS do sekcji head web.dev/extract-critical-css
multimedia - wprowadzone w HTML 5. Tag audio pozwala wstawić plik z dźwiękiem na stronę controls - wyświetla playera, loop - zapętla. Tag video - także 'controls' i 'loop'. Standard - pliki .mp4. Oba tagi mogą być sterowane przy pomocy JS (podstawowy szkielet jak zbudować swojego playera - lekcja 12.02). Filmy z youtube - wrzucamy przy użyciu iframe, na zasadzie kopiowania kodu.
licencje - jeśli brak info to zakładajmy że nie można użyć danego zasobu. tldrlegal - zawiera informacje o typach licencji. Strony z darmowymi materiałami: undraw || flaticon || drawkit || unsplash || pixabay || ccsearch ||
jak założyć stronę na Github na krótkim adresie - wyjaśnienie w lekcji 12.06. Opcjonalnie ==> dokumentacja od GH

CSS - style

display: inline-block jak inline, ale można zmieniać parametry np width i height.
margin: (x) auto - "zadziała", czyli wyśrodkuje, tylko elemety które mają zdefiniowaną szerokość!
przydatna własność - position:sticky
caniuse.com
float nie służy do budowania layoutu!
clear:both - "czyści" z obu stron, czyli rozszerza "pudełko" do takiej wielkości jakiej jest największy float. Ogólnie float - rzadko używany (i dobrze bo jest ciulowy).
BEM: block - element nadrzędny; element - część bloku (nie musi być bezpośrednim dzieckiem!); modifier - jeśli element ma jakąś cechę odróżniającą od innych elementów tego typu. Zapis: block__element--modifier. Wydzielamy bloki analizując strukturę naszego HTML na stronie. Lepiej nie robić zbyt wielu zagnieżdżeń, żeby nie było zbyt skomplikowanie.
rekomendowana normalizacja: normalize.css + (html {box-sizing: border-box}, *, *:before, *:after {box-sizing:inherit}).
flex-box - idealny do wyśrodkowania elementów. Domyślne wartości flex- : direction - row, wrap - nowrap
justify-content - do ustawiania elementów wzdłuż osi flex-direction, align-content - wzdłuż osi przeciwnej. Align-self - align content ale dla pojedynczego elementu. Order - kolejność elementów. Flex-grow - proporcje jak element ma rosnąć względem innych. Flex-shrink - to samo ale jak ma się kurczyć. Flex-basis- określenie min.wielkości elementu.
GRID - numeracja siatki zaczyna się od 1. Przykład: grid-template-columns: repeat(4, 1fr) 2fr; minmax(minwartość, maxwartość);
grid musi się zamykać w regulanych prostokątach.
grid-column: początek/koniec (można wpisać nr, albo nazwę, albo "span + przez ile elementów ma się rozciągać"; subgrid - dopiero w planach!
!!!grid a flexbox!!! - grid do layoutów, flex do pozycjonowania elementów na stronie.
mobile first: najpierw stylujemy na urządzenia mobilne, potem dodajemy media queries dla większych ekranów. Najpierw definiujemy własności które obowiązują na całej stronie, a potem modyfikujemy te właściwości które mają się zmieniać w miarę zwiększania rozdzielczości.
pseudoelementy - ::before, ::after - tworzymy je za pomocą właściwości content: "". Używane do upiększania elementów.
SASS vs SCSS - zdaniem Maćka SCSS łatwiejszy, czytelniejszy (opiera się na nawiasach klamrowych, a SASS na wcięciach jak Python). Przydatny link sassmeister.com. Definiowanie zmiennych: $nazwaZmiennej: właściwość. @mixin i @include: poprzez @mixin nazwa definiujemy zestaw właściwości, które potem możemy zawrzeć w danym elemencie wpisując @include nazwa. Możemy też zapisać w formie funkcji przyjmującej parametry. @extend: pozwala łączyć elementy wspólne dla wielu selektorów. Parent selector "&" - najważniejsza funkcja. WAŻNE - nie można edytować plików .css wygenerowanych przez preprocesor.
node - sass - paczka do przetwarzania plików .scss na .css.
import w css/scss: @import "żródło". dobra praktyka to stworzyć moduły w scss dla poszczególnych bloków, następnie importować je wszystkie do głównego pliku.
zmienne w CSS (custom properties) definiujemy za pomocą selektora :root, :root {--nazwaZmiennej: wartość}, następnie można wywołać gdziekolwiek. Ułatwia pracę, tzn. zmieniamy potem tylko w jednym miejscu, a zmiana obowiązuje wszędzie gdzie użyto zmiennej. Aby zmienić za pomocą JS, należy użyć wyrażenia: document.documentElement .style.setProperty ('--nazwaZmiennej', 'wartość').
prefixy - autoprefixer. autoprefixer jest załączony do webpacka.
Animacje - dynamikę przejścia określa właściwość transition, wartości: name duration timing function delay. Jest też właściwość "will-change" (mało popularna). Własność transform - pozwala w wygodny sposób przekształcać element lub zmieniać jego położenie. Posiada 3 główne funkcje: translate (zmienia położenie elementu względem osi x,y lub obu), scale (zwiększa/zmniejsza element), rotate (obraca element o żądany kąt). Transform-origin pozwala określić punkt względem którego element będzie transformowany.
@keyframes - pozwala napisać animację danego elementu. Sposób zapisu:
@keyframes nazwa {x%/from {właściwość, np transform: wartość} y%/to {właściwość:wartość}}
Posiada różne parametry np. duration, timing-function, delay, iteration-count, direction, fill-mode, play-state. Wygodne narzędzie do animowania obiektów z którymi użytkownik nie ma bezpośredniej interakcji.
frameworki CSS: Bootstrap - zawiera gotowe klasy, elementy, layouty i pozwala na budowanie stron szybko i bez większej znajomości HTML, CSS itd. Warto zapoznać się z dokumentacją . Popularny, lecz odchodzi się od niego.
frameworki CSS: Tailwind - powstał, żeby nie trzeba było pisać CSSów :) polega na dodawaniu do elementów HTMLa odpowiednich klas (wielu, wielu klas :)); instalowanie przy pomocy npm (najpełniej można korzystać z jego zalet) lub CDN. Również warto zajrzeć do dokumentacji.
selektory ~ + > [] w CSS: '+' - selektor bezpośredniego rodzeństwa - element bezpośrednio po danym elemencie, tego samego typu. '~' - selektor "ogólnego" rodzeństwa - działa na każdy element tego samego typu, po danym elemencie. '>' - selektor bezpośredniego dziecka - obejmuje wszystkie bezpośrednie dzieci danego elementu. '[ ]' - selektor atrybutów - pozwala na wybranie elemntów z określonym atrybutem lub nawet z określoną wartościa danego atrybutu. 3 najważniejsze przypadki: selekcja po fragmencie zawartości: [atrybut*='fragmentWartości']; jeśli element musi zaczynać się od czegoś: [atrybut^='początek']; jeśli ma się kończyć to zamiast ^ - znak $.

JavaScript - akcja!

ECMA Script 6+ - specyfikacja ułatwiająca życie developerom JSa. JS to sąsiad z najwyższego piętra i może wpływać na wszystkie pozostałe elementy strony internetowej. elementy JS: wartości, zmienne, operacje porównywania, literały, obiekty, funkcje.
backtick "`": `Nazywam się ${zmienna}.`zmienna to nie wartość! Tylko przypisanie już istniejącej wartości. const - zmienna mająca stałe połączenie z jedną wartością, let - możemy przepinać połączenie, ale definiujemy tylko raz. typeof zmienna - sprawdzamy typ zmiennej. immutability - nie możemy zmieniać warości primitive values w JS, jedynie połączenie pomiędzy nimi a zmiennymi.
Szukanie elementu po klasie - document.querySelector( ".nazwaKlasy" ). Dodanie treści do HTML poprzez JS - element.innerHTML = `treść`.
deklarowanie funkcji: function nazwaFunkcji(argument/y) {ciało funkcji - tu przypisujemy argumenty, deklarujemy co funkcja ma robić/zwracać} . Następnie funkcję wywołujemy wpisując jej nazwę i w nawiasie określamy argumenty. Zalety - nie powtarzamy kodu (DRY), lepsza czytelność/przejrzystość, łatwiej szukać błędów, odpowiedzialność za wykonanie zadania w jednym miejscu.
funkcja strzałkowa - łatwiejszy(?) sposób zapisu deklaracji funkcji: const funkcja = (argumenty) => {ciało funkcji}; nie jest zamiennikiem tradycyjnego zapisu (nie tworzy kontekstu THIS, nie ma dostępu do ARGUMENTS i SUPER. Zazwyczaj nie zobaczysz różnicy.
obiekt w JS - const obiekt = {key: value, key2: value,} key - unikalny w ramach obiektu - value - mogą to być prymitywy / funkcje / zagnieżdżenia (obiekty). W obiektach zmienne nazywamy własnościami (properties), a funkcje to metody. Dot notation - nazwaObiektu.property - możemy pracować na wybranych właściwościach obiektu. Bracket notation - nazwaObiektu[' nazwaWłasności']
immutability w obiektach - "constem" są połączenia nazwy obiektu z obiektem, własności obiektu można przepinać!
operatory porównania: == - równe "zwykłe", === - równe, sprawdza typeof, != - różne, !== - różne, sprawdza typeof,
if('wyrażenie logiczne') {'wykonaj ten kod jeśli true'}, if(warunek)&&(warunek) - oba muszą być true, if(warunek)||(warunek) - OR (wystarczy że jeden jest true),
if(warunek) {wykonaj kod jeśli true) else {wykonaj kod jeśli false}, if(){} else if (){} else() {} (jeśli pierwszy true, to pomija resztę, itd.)
! - not (odwraca wartość wyrażenia logicznego),
switch(zmienna){case x: funkcja; break case y:funkcja; break; default: funkcja;
addEventListener - może być na click lub inną aktywność. ogólny zapis: element .addEventListener ('click', () => {kod})
node.js - to taki JavaScript który jest uruchamiany poza przeglądarką (nie ma dostępu do DOM). Za jego pomocą możemy testować skrypty bez pisania HTMLa. Komenda w konsoli do uruchomienia plików *.js - node nazwapliku.js
npm: zestawy narzędzi potrzebne do konkretnych zadań, gotowe do pobrania. Inicjalizacja - npm init (-y), instalowanie paczek npm install 'nazwa paczki' --save(-dev) (save do paczek które widać na stronie, save-dev do pazek, których używamy do rozwoju oprogramowania), powstają pliki package.json i package-lock.json, oraz katalog node_modules, gdzie są pliki paczek (jego nie commitować - z reguły zajmuje masę pamięci). Alternatywa dla NPM - YARN. NPX - komenda do korzystania z paczki bez instalacji (w node.js). Skrypty npm - można definiować w pliku package.json w pozycji scripts.
import/export w JS - CommonJS (głównie do node.js) oraz ES6 Modules. W pliku z funkcją wpisujemy export + nazwa funkcji, potem definiujemy funkcję. W pliku gdzie funkcję wykonujemy - wpisujemy import (nazwa funkcji) from 'ścieżka'. W taki sposób można importować też zmienne. export default pozwala przy imporcie nazwać element importowany tak, jak chcemy (inny sposób - import nazwa1 as nazwa2 ).
WEBPACK - pozwala na łatwe i szybkie "ogarnięcie" 😆 projektu. Podajemy swoje pliki jako input, a Webpack "wypluwa" pliki zminifikowane i zrozumiałe dla przeglądarki. Koncepcja i dokumentacja w linku. Domyślnie operuje na plikach .js, ale posiada też loadery, które umożliwiają ładowanie innych plików np. .html, .css. Pluginy - pozwalają na wykonywanie operacji. Mode - development (dla nas) i production (dla "ludzi 😃"). Możliwości webpacka zwiększamy instalując paczki npm. Sourcemap - pozwala na łatwiejszy podgląd żródła kodu (podglądamy plik zrozumiały dla nas a nie ten zrozumiały dla przeglądarki).
webpack-starterkit - w katalogu /dist znajdują się pliki przznaczone do publikacji na serwerze.
tablice indeksujemy od zera. Pobieranie elementu z tablicy: tablica[index]. Operacje na tablicach: spr. długości tablicy - tablica.length, dodanie elementu - tablica.push(element), dodanie elementu na początku - tablica.unshift(element), usunięcie elementu z początku - tablica.shift(), z końca - tablica.pop(), sprawdzenie czy mamy element w tablicy - tablica.indexOf(element), usuwanie n elementów z tablicy - tablica.splice(index, n), pobieranie n elementów od danej pozycji - tablica.slice(index, stop)
pętle - do wykonywania powtarzających się bloków kodu. Podstawowa pętla - for (inicjalizacja; warunek stop; wyrażenie inkrementacji) {kod}, najczęściej używamy "i" jako licznika pętli. i++, i-- : postinkrementacja, postdekrementacja; ++i, --i - preinkrementacja, predekrementacja.
Pętla while - while (war. logiczny) {kod}, pętla do while - do {kod} while (warunek); pierwszy blok kodu wykona się zawsze. Pętla for .. in - for (let propertyName in object) {kod}, pętla for..of - for (element of tablica) {kod}.
local storage - localStorage.setitem('nazwa', 'wartość') lub analogicznie - removeItem jeśli chcemy usunąć; obiektów nie możemy bezpośrednio wrzucić do local storage - trzeba użyć najpierw operacji JSON.stringify(object); analogicznie żeby stringa zmienić z powrotem w obiekt używamy JSON.parse(string)
destrukturyzacja: pozwala na "wyciąganie" z obiektów i tablic ich własności(elementy). spread operator (np. ...nazwaObiektu ) pozwala na wrzucenie wszystkich własności do innego obiektu (tablicy)
API - application programming interface: zestaw funkcji/narzędzi, pozwala na wykonywanie operacji w aplikacji bez konieczności poznania jej budowy od środka. Popularnym sposobem konstruowania API jest REST - Representational State Transfer. Ostatnio bardzo popularny również GraphQL. Aplikacja POSTMAN pozwala na podglądanie żądań, wysyłanie ich i tworzenie. Lista publicznych i darmowych API
Fetch API - opiera się o mechanizm zwany promise. Schemat zapisu - lekcja 11.04.