Notatnik frontendowca

Praca z API

API (Application Programming Interface) - (interfejs programistyczny) to sposób komunikacji pomiędzy różnymi elementami programowania.

REST API (Representational State Transfer) - standard określający zasady projektowania API. Nie jest to jedyny standard, ostatnio bardzo mocno zyskał na popularności GraphQL i warto się nim zainteresować.

Promise - przykład

                        
                            something()
                            .then((response) => {
                            do something;
                            })
                            .catch((error)=> {
                            })
                            console.log('test'); // może wykonać się przed akcją do something                             
                        
                    

FETCH API - interfejs pozwalający na asynchroniczne pobieranie zasobów.

                            
                                fetch("https://api.github.com/users/Andrzej-Jablonski-project/repos")
                                .then(resp => resp.json())
                                .then(resp => {
                                // w resp mamy jsona z odpowiedzią
                                })                                                         
                            
                        

CSS - kompatybilność

Narzędzia do sprawdzania:

• https://browserstack.com
• http://browsershots.org
• https://crossbrowsertesting.com
• https://www.virtualbox.org
• https://developer.microsoft.com/en-us/microsoft-edge/tools/vms

@supports - reguła, dzięki której kod zostanie zastosowany przez przeglądarkę, gdy właściwości w bloku są przez nią wspierane.

                            
                                                 @supports(display: grid){
                                                     .list {
                                                         display: grid;
                                                         grid-template-columns: 1fr 1fr;
                                                     }
                                                 }                             
                            
                        

JS

Hoisting - to przenoszenie deklaracji funkcji i zmiennych na początek naszego kodu, a właściwie na początek zakresu.

Use strict - zakres reguł, które muszą zostać przestrzegane w kodzie. Pomaga w unikaniu wielu błędów. Zalecane używanie.

Destrukturyzacja - wyciąganie "zmiennych" z obiektów i tablic do zewnętrznych zmiennych.

...spread operator przykład:

                        
                            const person = {
                                name: "andrzej",
                                age: 22
                            }
                            const home = {
                                size: "big",
                                color: "gray"
                            }
                            
                            const personHome = {
                                ...person,
                                ...home
                            }       
                        
                    

                        
                            const sum = (a, b, c) => {
                                return a+b+c
                            }
                             const numbers = [2,8,5];
                             console.log(sum(...numbers));
                        
                    

Typografia, jednostki

font-size - właściwość odpowiadająca za rozmiar fontu, jest dziedziczony.

font-family - odpowiada za krój fontu.

font-weight - grubość fontu.

line-height - wysokość wiersza w elemencie.

letter-spacing - odległość między znakami.

em - 1 em = font-size dla elementu (dziedziczony / ustawiony) * 1.

rem - 1 rem = font-size dla root elementu * 1.

Nie każda przeglądarka ma domyślnie ustawione font-size na 16px! Zaleca się zostawienie font-size domyślnego lub ustawienie na 16px.