├── .gitignore
├── CONTRIBUTORS.md
├── README.md
├── databases.md
├── general.md
├── how-to-start.md
├── html-css.md
├── inspirations.md
├── js.md
├── roadmap.md
├── security.md
├── tools.md
├── version-control.md
└── web-structure.md
/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by .ignore support plugin (hsz.mobi)
2 | ### Example user template template
3 | ### Example user template
4 |
5 | .idea
6 | *.iml
7 | out
8 | gen
9 |
--------------------------------------------------------------------------------
/CONTRIBUTORS.md:
--------------------------------------------------------------------------------
1 | # Twórcy
2 |
3 | * [Grzegorz Dyl](https://github.com/Rekseto)
4 | * [Wojciech Wilkowski](https://github.com/wwilkowski)
5 | * [Piotr Aueternum](https://github.com/Piotr-Aueternum)
6 | * [Michał Miszczyszyn](https://github.com/mmiszy)
7 | * [Tomasz Durda](https://github.com/Dzordzu)
8 | * [Tomasz Jakut](https://github.com/Comandeer)
9 | * [Kacper Duras](https://github.com/kacperduras)
10 | * [Antoni Kępiński](https://github.com/xxczaki)
11 | * [Kasper Seweryn](https://github.com/wvffle)
12 | * [Jakub Biesiada](https://github.com/JB1905)
13 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Polscy Web Developerzy dla początkujących.
2 |
3 | Polskie środowisko web developerskie jest zaniepokojone problemem, z którym spotykają się początkujący w tej dziedzinie.
4 | Chętni do rozpoczęcia nauki często sięgają po nie w pełni poprawne źródła, co rodzi licznie powtarzające się błędy w przyszłości, w efekcie wpływające na poziom web devu w Polsce. Repozytorium wychodzi na przeciw tym, którzy od początku swojej "kariery" chcą kroczyć poprawną ścieżką i na starcie rozwijać w sobie dobre nawyki.
5 |
6 | ## Jak zacząć?
7 | Dla osób zupełnie nowych w tematach webdeveloperki utworzyliśmy [krótki artykuł](./how-to-start.md) wprowadzający podstawowe terminy i systematyzujący bazowe informacje związane z tym zagadnieniem.
8 |
9 | ## Zródła, których z przedstawionych wyżej powodów należy unikać lub zwyczajnie brać na nie poprawkę:
10 |
11 | * [W3Schools](https://www.w3schools.com/)
12 | * (https://forum.pasja-informatyki.pl/34559/w3schools-nie-szerzmy-falszywej-propagandy)
13 | * (http://gal.steinitz.com/blog/2013/07/21/why-w3schools-is-bad-for-the-internet/)
14 | * (https://www.webkrytyk.pl/2017/10/29/w3schools-com/)
15 | * [Kursy programowania z kanału Pasja Informatyki](https://www.youtube.com/user/MiroslawZelent)
16 | * (https://forum.pasja-informatyki.pl/122259/co-jest-nie-tak-z-najnowszym-odcinkiem-kursu-miroslawa-zelenta)
17 | * (https://www.webkrytyk.pl/2015/02/28/wideokursy-1-kurs-js-i-css-miroslawa-zelenta/)
18 | * (https://www.webkrytyk.pl/2015/12/31/wideokursy-2-kurs-php-miroslawa-zelenta/)
19 |
20 | ## Zródła w pełni godne polecenia:
21 | * [Systemy kontroli wersji](./version-control.md)
22 | * [HTML i CSS](./html-css.md)
23 | * [JavaScript](./js.md)
24 | * [Generalnie](./general.md)
25 | * [Bazy danych](./databases.md)
26 | * [Inspiracje](./inspirations.md)
27 | * [Bezpieczeństwo](./security.md)
28 | * [Narzędzia](./tools.md)
29 | * [Sieci](./web-structure.md)
30 | * [Roadmap](./roadmap.md)
31 |
32 | ## Twórcy
33 | Projekt jest tworzony wolontaryjnie i nieodpłatnie przez [genialnych web developerów](./CONTRIBUTORS.md).
34 |
--------------------------------------------------------------------------------
/databases.md:
--------------------------------------------------------------------------------
1 | # Bazy danych
2 |
3 | ## SQL
4 |
5 | * [Microsoft](https://docs.microsoft.com/en-us/sql/)
6 | * [Dokumentacja Typeorm](https://typeorm.io)
7 |
8 | ## NoSQL (Not Only SQL)
9 |
10 | * [Dokumentacja MongoDB](https://docs.mongodb.com/)
11 | * [Dokumentacja Mongoose](https://mongoosejs.com/docs/guide.html)
12 | * [Dokumentacja Neo4j](https://neo4j.com/sandbox-v2/?ref=product) - może być dostępny jedynie po zalogowaniu
13 |
--------------------------------------------------------------------------------
/general.md:
--------------------------------------------------------------------------------
1 | # Generalne
2 |
3 | * [blog Comandeera](https://blog.comandeer.pl)
4 | * [Smashing Magazine](https://www.smashingmagazine.com/)
5 | * [Internet bez barier](http://internet-bez-barier.com/)
6 | * [WebKrytyk](https://www.webkrytyk.pl/)
7 | * [Caniuse (Spis wsparcia dla poszczególnych przeglądarek)](https://caniuse.com/)
8 | * [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)
9 | * [WCAG 2.0 - zasady dostępności w sieci od W3C](https://www.w3.org/TR/WCAG20/)
10 | * [WCAG 2.1 - rozwinięcie WCAG 2.0](https://www.w3.org/TR/WCAG21/)
11 |
--------------------------------------------------------------------------------
/how-to-start.md:
--------------------------------------------------------------------------------
1 | # Jak zacząć
2 |
3 | ## Spis streści
4 | TODO: Wstawić spis
5 |
6 | ## Wstęp
7 | Początek przygody z programowaniem może być całkiem trudnym wyzwaniem. Przede wszystkim mamy przed sobą mnóstwo, nie zawsze wartościowych, informacji. Potem pojawiają się problemy związane z ich segregacją, a następnie prawidłową kategoryzacją.
8 | Z tego powodu postanowiliśmy udostępnić Wam - przyszłym programistom - zbiór materiałów porządkujący
9 | najważniejsze informacje o nowoczesnym webdevie. Mamy nadzieję, że prezentowane i udostępniane tutaj treści ułatwią Wam zdobywanie i poszerzanie wiedzy o obecnej 'webówce'.
10 |
11 | ## Od tekstu do strony
12 | Pewnie każdy słyszał o HTMLu. Ten legendarny język znaczników (nie programowania) już od 25 lat umożliwia nam, zwykłym zjadaczom chleba, na wyświetlanie tekstu na ekranach naszych urządzeń. Jednak jak to się dzieje, że wpisując www.github.com/Rekseto/PolishWebDevForBeginners otrzymujemy jeden z najbardziej przydatnych spisów treści dla początkujących webdevelperów?
13 |
14 | Najpierw coś oczywistego - część widoczna od strony użytkownika:
15 | 1. Wpisujemy adres strony do przeglądarki
16 | 2. Czekamy od mniej niż sekundy do kilkunastu sekund na załadowanie się strony
17 | 3. Zamykamy 10 okienek inforumująch o newsletterach, RODO (GIODO), ciasteczkach itp.
18 | 4. Cieszymy się stroną
19 |
20 | Teraz zobaczmy jak to wygląda w uproszczeniu od strony maszyny:
21 | 1. Bierzemy daną *domenę* i wysyłamy odpowiednie *zapytanie* do **serwera DNS**. Orzymujemy adres zgodny z *IPv4* lub *IPv6*, wskazujący na inny serwer. Tłumacząc na język "człowieków": Wpisany adres (albo jego część) wysyłamy do innego komputera trzymającego listę wszystkich adresów w internecie (zapisanych w postaci tekstu). Ten komputer szuka naszego adresu i jeśli on istnieje to wysyła do nas informacje zwrotną w której umieszczony jest adres prowadzący do innego komputera (zapisany w postaci cyferek i kropek). Czyli np. dla wpisanego www.facebook.com/jakis-smieszny-link do **serwera DNS** wysyłany jest adres www.facebook.com. W odpowiedzi powinniśmy uzyskać np. 69.63.184.142
22 | 2. Orzymujemy odpowiedź od serwera, jeśli strona istnieje idziemy dalej
23 | 3. Kierujemy się pod uzyskany adres. Tam ponownie wysyłamy nasze *zapytanie*. Dodatkowo (poza pełnym adresem strony) w *zapytaniu* mogą być inne informacje np. dotyczące imienia użytkownika.
24 | 4. Serwer, który jest najczęściej *hostowany*, przetwarza nasze zapytanie i zwraca *klientowi*, czyli naszemu komputerowi (ale nie nam bezpośrednio), odpowiedź w postaci pliku tekstowego. Tłumacząc:
25 | Inny komputer (ten na który wskazuje "numerkowy adres"), który jest najczęściej wynajmowany przez osobę posiadjącą stronę, analizuje to co mu wysłaliśmy i tworzy plik tekstowy (zazwyczaj w postaci pliku HTML, ale nie zawsze!), a następnie nam go wysyła
26 | 5. Nasza przeglądarka wykorzystuje swoją maszynę do renderingu (dla Firefoxa będzie to Gecko, a dla Google Chrome będzie to Chromium), a następnie, jeśli to konieczne, wysyła kolejne zapytania (HTML może zawierać informacje na temat dodatkowych plików potrzebnych do załadowania strony)
27 | 6. Wyświetlamy odpowiednią treść użytkownikowi
28 |
29 | Tak w skrócie to wygląda
30 |
31 | ## Popularne języki
32 | W dobie dzisiejszego internetu możemy wyróżnić kilka kluczowych technologii umożliwiających bezproblemowe kreowanie i modyfikowanie treści. Są nimi:
33 | * **HTML (HyperText Markup Language)** - język znaczników (a nie programowania!) pozwalający na określenie celu w jakim został stworzony każdy element strony. Dla przykładu, pozwala on na 'powiedzenie' przeglądarce, że dany tekst jest artykułem, a tekst poniżej jest np. nóżką strony.
34 |
35 | * **CSS (Cascading Style Sheets)** - jest to zbiór reguł, wedle których przeglądarka interpretuje, a następnie wyświetla wszelkie treści wizualne jak np. kolory, marginesy, czy pogrubienie tekstu.
36 |
37 | * **JS (Javascript)** - język programowania mający ogomną ilość zastosowań. Wykorzystuje się go między innymi do frontendu, czyli dziedziny w której programista skupia się na wyglądzie aplikacji i prezentacji danych. Dodatkowo JS jest stosunkowo prostym i potężnym narzędziem w pracy przy backendzie, będącym niejako odwrotnością frontendu. Programowanie backendowe polega głównie na kontrolowaniu wszystkiego co dzieje się w 'bebechach' strony - połączenia z bazą danych, zwracania odpowiedniej strony po wpisaniu adresu 'google.com' itp.
38 |
39 | * **PHP (Personal Home Page, PHP Hypertext Preprocessor)** - język programowania mający zastosowanie w backendzie. Możemy nazywać go nieśmiertelnym dinozaurem, gdyż 'umiera' (wychodzi z użytku) już od ponad dekady. Co jest interesujące, jego nowe wersje są bardzo szybkie, wydajne i bezpieczne, zaś sam język jest fundamentem dla ponad 60% stron internetowych.
40 |
41 | * **SQL (Structured Query Language)** - język służący do operacji na bazach danych (opartych głównie na relacjach, cokolwiek to słowo dla Was teraz znaczy)
42 |
43 | * **NoSQL (Not Only SQL)**
44 |
45 | * **GIT** - system kontroli wersji. Służy do kontrolowania zmian w projekcie, ułatwia pracę zepołową i umożliwia szybki wgląd i edycję historii projektu.
46 |
47 |
48 |
--------------------------------------------------------------------------------
/html-css.md:
--------------------------------------------------------------------------------
1 | # HTML i CSS
2 |
3 | ## HTML
4 |
5 | * [MDN sekcja HTML](https://developer.mozilla.org/pl/docs/Learn/HTML)
6 | * [Specyfikacja W3C](https://w3c.github.io/html/introduction.html#introduction)
7 | * [Specyfikacja Living Standard od WHATWG](https://html.spec.whatwg.org/multipage/)
8 | * [Semantyczny HTML](http://tutorials.comandeer.pl/html5-blog.html)
9 | * [Polski kanał kodu.je](https://www.youtube.com/playlist?list=PL5nf3UIj1JtUwEgjEPo9LurVKKX5bH1IP)
10 |
11 | ## CSS
12 |
13 | * [MDN sekcja CSS](https://developer.mozilla.org/pl/docs/Web/CSS)
14 | * [CSS-Tricks](https://css-tricks.com/)
15 | * [BEM](http://getbem.com/)
16 | * [BEM](https://en.bem.info/) - bardziej szczegółowe podejście do tematu
17 | * [Stylus](http://stylus-lang.com/)
18 | * [SASS](http://sass-lang.com/) LUB [LESS](http://lesscss.org/) - oraz ich [porównanie](https://css-tricks.com/sass-vs-less/)
19 | * [Darmowy kurs CSS Grid](https://cssgrid.io/)
20 |
--------------------------------------------------------------------------------
/inspirations.md:
--------------------------------------------------------------------------------
1 | # Inspiracje
2 |
3 | * [Awwwards](https://www.awwwards.com/)
4 | * [CollectUI](http://collectui.com/)
5 | * [One Page Love](https://onepagelove.com/)
6 | * [Creative Portfolios](http://www.creative-portfolios.com/)
7 |
--------------------------------------------------------------------------------
/js.md:
--------------------------------------------------------------------------------
1 | # JavaScript
2 |
3 | ## ES vs JS
4 |
5 | Czym się różnią te dwa skróty? ES jest standardem, zaś JS jest jego implementacją (czyli wykonaniem).
6 | Do tej pory największym przełomem był ES6 powstały w 2015 roku. Tę wersję powinien znać każdy web developer. Dla ciekawych [strona po angielsku opisująca szerzej ten temat](https://flaviocopes.com/ecmascript/)
7 |
8 | ## TypeScript
9 |
10 | Jest to coraz bardziej popularny język, a właściwie superset JavaScript, czyli rozszerzenia dodające m. in. typowanie statyczne. Rozwiązanie posiada zestaw narzędzi w tym kompilator (transpiler) i dedykowane wtyczki do edytorów kodu. Projekt rozwjany jest przez Microsoft, a kod źródłowy dostępny jest w publicznym repozytorium.
11 | [Dokumentacja](https://www.typescriptlang.org/)
12 |
13 | ## Nieskategoryzowane
14 |
15 | * [Najważniejsza biblioteka JS - VanillaJS](http://vanilla-js.com/)
16 | * [MDN sekcja JS](https://developer.mozilla.org/pl/docs/Web/JavaScript)
17 | * [Exploringjs](http://exploringjs.com/)
18 | * [JavaScript.Info](https://javascript.info/)
19 | * [YouDontKnowJS](https://github.com/getify/You-Dont-Know-JS/blob/master/README.md)
20 | * [Mythbusters JS](https://mythbusters.js.org/)
21 | * [Wzorce projektowe](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)
22 | * [Fun Fun Function](https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q)
23 | * [overment](https://www.youtube.com/channel/UC_MIaHmSkt9JHNZfQ_gUmrg/featured)
24 | * [JavaScript 30](https://javascript30.com/)
25 | * [ES6 for Everyone](https://es6.io/)
26 | * [Lista przydatnych snippetów na różne okazje](https://codetogo.io/)
27 | * [Czym jest Event loop?](https://youtu.be/8aGhZQkoFbQ)
28 |
29 | ## React
30 |
31 | React to jedna z najpopularniejszych bibliotek do tworzenia aplikacji webowych. Stworzona została przez Facebooka w 2013 roku i obecnie jest używana przez firmy takie jak Twitter, Reddit, Uber, Netflix i Airbnb.
32 |
33 | * [Dokumentacja](https://reactjs.org/docs/getting-started.html)
34 | * [Darmowy Kurs React po Polsku w postaci wpisów na blogu](https://typeofweb.com/kurs/react-js/)
35 | * [Inny Kurs React, również darmowy i po Polsku](http://szczecinski.eu)
36 | * [React for Beginners](https://reactforbeginners.com/) - Płatny kurs po angielsku, stworzony przez cenionego developera, Wesa Bosa.
37 | * [Overreacted](https://overreacted.io/) - Blog Dana Abramova, pracownika Facebooka i współtwórcy Reduxa. Niektóre posty zostały przetłumaczone na Język polski.
38 | * [React Router](https://reacttraining.com/react-router/) - Jeden z najpopularniejszych routerów do Reacta.
39 | * [Reach Router](https://reach.tech/router) - Alternatywa dla React Router, stworzona przez Ryana Florence'a.
40 | * [Redux](https://redux.js.org/) - Najpopularniejsza biblioteka do zarządzania lokalnym stanem aplikacji.
41 | * [MobX](https://mobx.js.org/) - Alternatywa dla Reduxa.
42 | * [Next.js](https://nextjs.org/) - Framework do Reacta, ułatwiający tworzenia aplikacji i dodający wiele funkcjonalności, min. renderowanie po stronie serwera (SSR).
43 | * [Gatsby](https://www.gatsbyjs.org/) - Framework do Reacta, którego celem jest ułatwienie tworzenia szybkich aplikacji. Częściowo alternatywa dla Next.js.
44 |
45 | ## Vue
46 |
47 | Vue, podobnie jak React jest biblioteką do tworzenia interfejsów użytkownika. Projekt został stworzony w 2014 roku przez Evana You, byłego pracownika Google. Obecnie ma prawie 150 tysięcy gwiazdek w serwisie Github.
48 |
49 | * [Dokumentacja](https://vuejs.org/v2/guide/)
50 | * [vue-router](https://router.vuejs.org/) - Oficjalny router do Vue.
51 | * [Vuex](https://vuex.vuejs.org/) - Biblioteka do zarządzania stanem aplikacji, odpowiednik Reduxa.
52 | * [Nuxt.js](https://nuxtjs.org/) - Framework do Vue, wzorowany na Next.js
53 |
54 | ## Angular
55 |
56 | * [Dokumentacja](https://angular.io/docs)
57 | * [RxJS](https://rxjs.dev/) - Biblioteka do tworzenia aplikacji w oparciu asynchroniczność i programowanie reaktywne.
58 | * [NgRx](https://ngrx.io/) - Biblioteka do zarządzania stanem aplikacji, oparta na RxJS.
59 |
60 | ## Inne
61 |
62 | * [Event loop](https://www.youtube.com/watch?v=8aGhZQkoFbQ&feature=youtu.be&fbclid=IwAR3-lP97INfmRzM9xLJWwwFIFw0QBszBhB0AtWaUtOvcK5O5e5YHgEbgbnI)
63 |
64 | ## Budowanie Projektu (module bundlers)
65 |
66 | Gdy w naszym projekcie korzystamy z wielu rodzajów plików, bundler przekształca je, minifikuje i (w zależności od konfiguracji) rozdziela na mniejsze kawałki (chunki). Bundlery są często wykorzystywane np. przy tworzeniu aplikacji z użyciem Reacta i Vue.
67 |
68 | * [Webpack](https://webpack.js.org/) - Najpopularniejszy module bundler, wykorzystywany przez korporacje takie jak Trivago, Adobe, czy Shopify.
69 | * [Parcel](https://parceljs.org/) - Alternatywa dla Webpacka, niewymagająca konfiguracji.
70 | * [Rollup](https://rollupjs.org/guide/en) - Inna alternatywa dla Webpacka.
71 |
--------------------------------------------------------------------------------
/roadmap.md:
--------------------------------------------------------------------------------
1 | # Roadmap
2 | W internecie znajduje sie ogromna ilość tzw. roadmaps do zostania web developerem. Poniżej, możecie znaleźć przykłady kilku:
3 |
4 | * [Developer Roadmap (kamranahmedse)](https://github.com/kamranahmedse/developer-roadmap)
5 |
--------------------------------------------------------------------------------
/security.md:
--------------------------------------------------------------------------------
1 | # Bezpieczeństwo
2 | * [PDO (PHP)](https://phpdelusions.net/pdo)
3 | * [OWASP](https://www.owasp.org/index.php/Main_Page)
4 | * [NodeJS (film Codetech)](https://www.youtube.com/watch?v=0dgmeTy7X3I)
5 | * [CVE details](https://www.cvedetails.com/)
6 | * [OAuth 2.0 - wprowadzenie](https://sekurak.pl/oauth-2-0-jak-dziala-jak-testowac-problemy-bezpieczenstwa/)
7 |
8 | ## Dla średiozaawansowanych
9 | * [JOSE (Javascript Object Signing and Encryption) - kiedy NIE używać](https://paragonie.com/blog/2017/03/jwt-json-web-tokens-is-bad-standard-that-everyone-should-avoid)
10 |
--------------------------------------------------------------------------------
/tools.md:
--------------------------------------------------------------------------------
1 | # Narzędzia
2 | * [PageSpeed Insight - narzędzie od Google do optymalizowania działania stron](https://developers.google.com/speed/pagespeed/insights/?hl=pl)
3 | * [GTmetrix - PageSpeed z dodatkowymi narzędziami](https://gtmetrix.com/)
4 | * [Test my site with Google - narzędzie od Google testujące szybkość strony na telefonach](https://testmysite.withgoogle.com/intl/pl-pl)
5 | * [Pingdom Tools - narzędzie pozwalające na test szybkości strony z różnych lokalizacji](https://tools.pingdom.com/)
6 | * [HTML Validator - walidator HTML'a](https://validator.w3.org/)
7 | * [CSS Validator - walidator CSS'a](https://jigsaw.w3.org/css-validator/)
8 | * [WAVE - szuka błędów dostępności na stronie](https://wave.webaim.org/)
9 | * [IDI Web Accesibility Checker - podobnie jak wyżej, ale może sprawdzać również lokalne pliki](https://achecker.ca/checker/index.php)
10 | * [Color Contrast Checker - sprawdza czy kolor tekstu i tła zachowują odpowiednio wysoki kontrast](https://webaim.org/resources/contrastchecker/)
11 | * [Check My Colours - sprawdza kontrast na całej stronie](http://www.checkmycolours.com/)
12 | * [Rgba to hex - konwerter rgba do hex](https://tdekoning.github.io/rgba-converter/)
13 |
--------------------------------------------------------------------------------
/version-control.md:
--------------------------------------------------------------------------------
1 | # GIT
2 |
3 | **Git jest narzędziem do kontroli wersji. Dzięki niemu można łatwo cofnąć, dodać, czy edytować wprowadzone w kodzie zmiany**
4 |
5 | * [Oficjalna strona i dokumentacja](https://git-scm.com/)
6 |
--------------------------------------------------------------------------------
/web-structure.md:
--------------------------------------------------------------------------------
1 | # Sieci
2 |
3 |
4 |
5 | ## Dla średniozaawansowanych
6 | * [Bezpieczeństwo sieci](https://www.youtube.com/watch?v=BZTWXl9QNK8)
7 | * [Mit (sieci komputerowe)](https://www.youtube.com/watch?v=QOtA76ga_fY)
8 | * [Bsides Warsaw](https://www.youtube.com/channel/UCexBIw_UJOz-H1PD9I9zkGw/videos)
9 |
--------------------------------------------------------------------------------