overment.com - #3 Tworzenie szablonu

Uczy się JavaScriptu? Dołącz do kursu "Opanuj JavaScript" -- https://przeprogramowani.pl/kurs-javascript -- Trzeci odcinek serii, podczas której wspólnie stworzymy stronę overment.com. W tym filmie pokazuję jak wygląda proces projektowania strony od "pustej kartki" do gotowego szablonu. To właśnie w tym miejscu bardzo przydatne okazują się wcześniejsze planowanie i przegląd inspiracji. 🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1 📩 Zapisz się na newsletter: https://overment.com/newsletter 👉 Sprawdź też: https://facebook.com/overment https://overment.com/discord https://overment.com/instagram Tworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB. Link do poprzedniego odcinka serii: http

overment.com - #2 Projektowanie

Uczy się JavaScriptu? Dołącz do kursu "Opanuj JavaScript" -- https://przeprogramowani.pl/kurs-javascript -- Drugi odcinek serii, podczas której wspólnie stworzymy stronę overment.com. Link do poprzedniego odcinka serii: https://www.youtube.com/watch?v=1dwed3WHIYo Linki do stron, które pojawiły się na filmie: - Material Design (Google) https://material.io/design/ - Fluent Design (Microsoft) https://www.microsoft.com/design/fluent/ - Adele (zbiór "języków projektowania") https://adele.uxpin.com/ - Biblioteka komponentów Material Design dla Vue.js https://vuetifyjs.com/en/ Inspiracje: - Laracasts.com https://laracasts.com/ - Pitch https://pitch.com/ - https://www.behance.net/gallery/61527707/Product-App-Landing-Page-Design - https://www.behance.net/gallery/71320979/Landing-page-Investment-fund-cryptocurrency-ico - https://www.behance.net/gallery/71152113/SEO-Social-Media-Marketing-Landing-Page - https://www.behance.net/gallery/66739563/Illustration-Undersea-Concept-Landing-Page-V1 -

overment.com - Planowanie projektu

Pierwszy odcinek serii, podczas której wspólnie stworzymy stronę overment.com. Przed rozpoczęciem projektu ważne jest zaplanowanie zakresu prac oraz wybór narzędzi. W tym odcinku wyjaśniam dlaczego ważna jest odpowiedź na pytanie "Dlaczego chcę zrealizować ten projekt". Oprócz tego wspominam również o trendach i inspiracjach, przydatnych podczas definiowania zakresu projektu. Tego projektu nie realizuję w zgodzie z ŻADNĄ metodyką zarządzania projektami. W zamian, pokazuję co należy wiedzieć w sytuacji gdy podejmujemy się projektu w pojedynkę. 🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1 📩 Zapisz się na newsletter: https://overment.com/newsletter 👉 Sprawdź też: https://facebook.com/overment https://overment.com/discord https://overment.com/instagram Tworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśn

CSS Grid - #4 Auto-fill | Auto-fit

Uczy się JavaScriptu? Dołącz do kursu "Opanuj JavaScript" -- https://przeprogramowani.pl/kurs-javascript -- CSS Grid na pierwszy rzut oka wydaje się być mocno przekombinowaną funkcją specyfikacji CSS. Bardzo szybko okazuje się jednak, że jest zupełnie inaczej a największą rolę w tym temacie odkrywają wartości auto-fill oraz auto-fit, dzięki którym definiujemy sposób rozmieszczenia elementów na powierzchni siatki. Link do repozytorium: https://github.com/iceener/css-grid/tree/master/04-auto-fill-auto-fit 🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1 📩 Zapisz się na newsletter: https://overment.com/newsletter 👉 Sprawdź też: https://facebook.com/overment https://overment.com/discord https://overment.com/instagram Tworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Sku

CSS Grid - #3 Nazwane obszary

Uczy się JavaScriptu? Dołącz do kursu "Opanuj JavaScript" -- https://przeprogramowani.pl/kurs-javascript -- CSS Grid umożliwia rozmieszczanie obszarów na powierzchni zdefiniowanej siatki. Jednym ze sposobów pracy z siatką, są nazwane obszary. W tym filmie dowiesz się w jaki sposób korzystać z właściwości takich jak grid-template-areas oraz grid-area. Pokażę Ci również jak nadawać nazwy liniom wierszy oraz kolumn. Link do repozytorium: https://github.com/iceener/css-grid/tree/master/03-named-areas 🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1 📩 Zapisz się na newsletter: https://overment.com/newsletter 👉 Sprawdź też: https://facebook.com/overment https://overment.com/discord https://overment.com/instagram Tworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam s

Praktyczny kurs Git - #12/12 Tagi

Tagi to jedna z funkcji gita, umożliwiająca oznaczanie ważnych commitów. Zwykle tagami oznaczamy miejsca w historii repozytorium, w których zakończyliśmy pracę nad kolejną wersją aplikacji. W tym filmie pokazuję dlaczego warto korzystać z tagów i jak praktycznie je wykorzystać. 🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1 📩 Zapisz się na newsletter: https://overment.com/newsletter 👉 Sprawdź też: https://facebook.com/overment https://overment.com/discord https://overment.com/instagram Tworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Skupiam się przede wszystkim na: HTML, CSS, JavaScript, Node.js i mySQL / mongoDB.

Praktyczny kurs Git - #12 Tagi

Praktyczny kurs Git - #11 Rebase

Film jest częścią serii Kurs Git po polsku od podstaw https://www.youtube.com/playlist?list=PLjHmWifVUNMKIGHmaGPVqSD-L6i1Zw-MH Chcesz zawsze pozostać na bieżąco z programowaniem? Dołącz do mojego newslettera: 📩 Zapisz się na newsletter: https://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description 🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_... 🎓 Więcej moich kursów znajdziesz na: https://overment.com/eduweb (reflink) Tworząc #overment (np. kursy i tutoriale) najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest naprawdę istotne. Znajdziesz u mnie filmy dla front-end, back-end i full-stack developerów. Główne tematy moich filmów to m.in: JavaScript, Node.js (Express.js / Nest.js) ale również HTML, CSS oraz bazy danych (mySQL i mongoDB). Dodatkowo zawsze

Praktyczny kurs Git - #10 Rozwiązywanie konfliktów

Podczas łączenia zmian, git analizuje różnice w plikach i łączy wprowadzone zmiany automatycznie. W sytuacji gdy zmiany dotyczą tego samego fragmentu pliku, występuje tzw. konflikt (eng. conflict). Konflikt należy rozwiązać ręcznie, wskazując które zmiany mają zostać zachowane. W tym filmie wyjaśniam dokładnie jak to robić w przypadku konfliktu przy łączeniu gałęzi (merge conflict), usunięciu plików (delete conflict) i pull requestów (pull request conflict). Wykorzystuję w tym celu polecenia takie jak: - git merge - git branch - git checkout - git push - git pull - git commit Film jest częścią serii Kurs Git po polsku od podstaw https://www.youtube.com/playlist?list=PLjHmWifVUNMKIGHmaGPVqSD-L6i1Zw-MH Chcesz zawsze pozostać na bieżąco z programowaniem? 📩 Zapisz się na newsletter: https://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description 🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1 🎓

Praktyczny kurs Git - #9 Zdalne repozytorium i fork

Uczy się JavaScriptu? Dołącz do kursu "Opanuj JavaScript" -- https://przeprogramowani.pl/kurs-javascript -- Praca ze zdalnym repozytorium jest jedną z ważniejszych idei Gita i systemów kontroli wersji w ogóle. Z tego filmu dowiesz się w jaki sposób podłączyć lokalne repozytorium ze zdalnym (remote repository) oraz w jaki sposób pracować z repozytorium do którego nie masz dostępu poprzez kopię re. Wszystko to na przykładzie serwisu Github. Wykorzystane polecenia: - git push / git pull - git branch - git remote add - git fetch - git checkout - git commit 🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1 📩 Zapisz się na newsletter: https://overment.com/newsletter 👉 Sprawdź też: https://facebook.com/overment https://overment.com/discord https://overment.com/instagram Tworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych

CSS Grid - #2 Rozmieszczanie obszarów

Uczy się JavaScriptu? Dołącz do kursu "Opanuj JavaScript" -- https://przeprogramowani.pl/kurs-javascript -- CSS Grid pozwala na dowolne rozmieszczanie elementów na powierzchni siatki. W tym celu wykorzystujemy informację dotyczące położenia elementu względem numerów linii siatek. Pozycjonowanie możliwe jest dzięki właściwościom takim jak grid-row oraz grid-column. W filmie przedstawiam również słowo kluczowe span (span keyword CSS Grid). Link do repozytorium: https://github.com/iceener/css-grid/tree/master/02-positioning 🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1 📩 Zapisz się na newsletter: https://overment.com/newsletter 👉 Sprawdź też: https://facebook.com/overment https://overment.com/discord https://overment.com/instagram Tworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych słowach wyjaśniam Ci to, co jest na

Praktyczny kurs Git - #8 Czym jest branch?

Uczy się JavaScriptu? Dołącz do kursu "Opanuj JavaScript" -- https://przeprogramowani.pl/kurs-javascript -- Dzięki Branch'om (eng. gałąź) w Gicie mamy możliwość rozwijania różnych wersji projektu niezależnie od siebie. W tym odcinku wyjaśniam czym dokładnie jest branch oraz jakie są podstawowe polecenia niezbędne do tworzenia (git branch [name]), usuwania (git branch -D [name]) i przełączania się pomiędzy branch'ami (git checkout [branch_name]). Na koniec znajdziesz informację jak wyglądają podstawowe dobre praktyki zarządzania branch'ami w repozytorium. 🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1 📩 Zapisz się na newsletter: https://overment.com/newsletter 👉 Sprawdź też: https://facebook.com/overment https://overment.com/discord https://overment.com/instagram Tworząc filmy najwyższą wartością jest dla mnie Twój czas. Moja strategia polega na tym, aby dotrzeć do źródła tematu i świadomie odrzucić niepotrzebne elementy. W ten sposób w prostych

CSS Grid - #1 Wprowadzenie

Uczy się JavaScriptu? Dołącz do kursu "Opanuj JavaScript" -- https://przeprogramowani.pl/kurs-javascript -- Tutorial wyjaśniający podstawowe zasady CSS grid oraz sposób definiowania siatek z pomocą właściwości grid-template-rows, grid-template-columns oraz grid-gap. CSS Grid określa zasady definiowania layoutów w oparciu o system siatki i rozmieszczania elementów zgodnie ze współrzędnymi. W przeciwieństwie do standardowego modelu pudełkowego (eng. box model) jest bardziej elastyczny i intuicyjny. Posiada również mniej ograniczeń w perspektywie dostosowania wyglądu aplikacji do ekranów wielu urządzeń. Link do repozytorium: https://github.com/iceener/css-grid/tree/master/01-introduction 🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1 📩 Zapisz się na newsletter: https://overment.com/newsletter 👉 Sprawdź też: https://facebook.com/overment https://overment.com/discord https://overment.com/instagram Tworząc filmy najwyższą wartością jest dla mnie Twó

Praktyczny kurs Git - #7 Polecenie git stash

Polecenie git stash umożliwia przeniesienie niezatwierdzonych zmian z katalogu roboczego na tzw. stos. Inaczej mówiąc "odkładamy je na później". git stash - Dodaje zmiany na stos. git stash push - j/w. ale umożliwia dodanie flagi -m "[komentarz]" git stash show (-p —patch) - pokazuje jakie zmiany znajdują się na stosie git stash list - wyświetla listę zmian odłożonych na stos git stash pop (apply & drop) - przywraca zmiany ze stosu (i usuwa je z niego) git stash drop - usuwa zmiany ze stosu git stash apply - przywraca zmiany ze stosu (zostawiając je jednocześnie) git stash branch - tworzy nowy branch zawierający zmiany z wybranego stosu. Chcesz zawsze pozostać na bieżąco z programowaniem? 📩 Zapisz się na newsletter: https://overment.com/newsletter?utm_campaign=newsletter&utm_medium=social-media&utm_source=youtube&utm_content=description 🔔 Subskrybuj mój kanał - https://www.youtube.com/overment?sub_confirmation=1 🎓 Więcej moich kursów znajdziesz na: https://overment.com/eduweb (re

REST API #10 - Autoryzacja i Uwierzytelnienie (JWT)

Ostatni odcinek serii, którego tematem są autoryzacja oraz uwierzytelnienie użytkownika z pomocą JSON Web Tokens (JWT). Wspólnie przejdziemy przez proces implementacji tokenów w aplikacji node.js (express.js / mongoDB) w poszczególnych krokach: 1. Rejestracja (tworzenie nowych użytkowników) 2. Logowanie (generowanie tokenów) 3. Zabezpieczenie ścieżki (dostęp tylko dla zalogowanych użytkowników) Narzędzia które wykorzystuję: - Passport.js (http://www.passportjs.org/) - Passport-local (https://github.com/jaredhanson/passport-local) - Passport-local-mongoose (https://github.com/saintedlama/passport-local-mongoose) - jsonwebtoken (https://www.npmjs.com/package/jsonwebtoken) Więcej o Json Web Token przeczytasz na oficjalnej stronie: https://jwt.io/ Link do repozytorium projektu: https://github.com/iceener/rest-api-in-practice-node-js-source/tree/master/10-security Cała seria dostępna pod adresem: https://www.youtube.com/watch?v=P9b8-BrWdYs&list=PLjHmWifVUNMLjh1nP3p-U0VYrk_9aXVjE 🔔