From f4e0bd565451eb5e3408f1719d742a0005593ca9 Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 15:46:10 +0300 Subject: [PATCH 01/18] fullstack dev init --- .../fullstack-developer/fullstackdeveloper.md | 25 +++++++++++++++++++ utmutatok/root.md | 9 +++++++ 2 files changed, 34 insertions(+) create mode 100644 utmutatok/fullstack-developer/fullstackdeveloper.md create mode 100644 utmutatok/root.md diff --git a/utmutatok/fullstack-developer/fullstackdeveloper.md b/utmutatok/fullstack-developer/fullstackdeveloper.md new file mode 100644 index 0000000..0777945 --- /dev/null +++ b/utmutatok/fullstack-developer/fullstackdeveloper.md @@ -0,0 +1,25 @@ +#Fullstack (web) developer, 2019 + +##Egy falatnyi történelem + +A webes, illetve a webes alkalmazásfejlesztés hatalmasat fejlődött az elmúlt akár 5 évben, sőt, mióta léteznek modern webalkalmazásokhoz használatos framework-ök, komoly változás következik be akár minden hatodik hónapban. Ilyenkor természetesen, illetve jobb esetben, a fejlesztőre van bízva, hogy ezeket mennyire, és milyen intenzitással hajlandó követni. + +##Mi az a fullstack fejlesztő? + +A fullstack fejlesztő az alkalmazás összes rétegét és annak összes stackjét ismeri: + +- Szerver, Network, és hosting ismerete +- alkalmazás skálázhatóságának imserete +- cloud storage ismerete +- adat redundancia +- adat modellek imserete +- relációs, nem relációs adatbázisok ismerete +- üzleti logika ismerete +- api réteg ismerete +- mvc pattern ismerete +- clean code alkalmazása +- user interface átfogó ismerete +- modern frameworkok ismerete +- user experience +- tisztában lenni az end-user igényeivel + diff --git a/utmutatok/root.md b/utmutatok/root.md new file mode 100644 index 0000000..debaac7 --- /dev/null +++ b/utmutatok/root.md @@ -0,0 +1,9 @@ +# Útmutatók + +Itt alapvetően olyan _útmutatókat_ próbálunk összeszedni, amelyek a szakma egy-egy specifikus területére jellemzők, segít up-to-date maradni az adott területet érintő technológiákkal, ugyanakkor segíthet elternatívát is találni egy adott probléma megoldására. + +Jelenleg a következő témakörökhöz készül _útmutató_ + +- Fullstack Developer 2019 + +> Ötleteket nagyon szívesen várunk ide is, nyiss hozzá egy [https://github.com/arphox/tudasbazis/issues](issue)-t! \ No newline at end of file From 6c2cfe1124332929ceb73c924c13a4ac32768fd5 Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 15:54:07 +0300 Subject: [PATCH 02/18] folder name changed --- .../{fullstack-developer => fullstack}/fullstackdeveloper.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename utmutatok/{fullstack-developer => fullstack}/fullstackdeveloper.md (100%) diff --git a/utmutatok/fullstack-developer/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md similarity index 100% rename from utmutatok/fullstack-developer/fullstackdeveloper.md rename to utmutatok/fullstack/fullstackdeveloper.md From 2df98346b5d45068dc00e566b56e142dde0feccc Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 18:23:28 +0300 Subject: [PATCH 03/18] fullstackdev links added --- utmutatok/fullstack/fullstackdeveloper.md | 66 +++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 0777945..7d226cb 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -23,3 +23,69 @@ A fullstack fejlesztő az alkalmazás összes rétegét és annak összes stackj - user experience - tisztában lenni az end-user igényeivel +## Az alapok + +* [`html`](https://www.w3schools.com/html/) +* [`css`](https://www.w3schools.com/css/) +* [`javascript`](https://developer.mozilla.org/hu/docs/Web/JavaScript) + +## CSS + +### Preprocesszorok + +* [`dart-sass`](https://github.com/sass/dart-sass) +* [`less`](https://github.com/less/less.js) +* [`stylus`](https://github.com/stylus/stylus) +* [`post-css`](https://github.com/postcss/postcss) +* [`css-in-js`](https://github.com/cssinjs/jss) +* [`emotion`](https://github.com/emotion-js/emotion) + +### CSS frameworks + +* [`bulma`](https://github.com/jgthms/bulma) +* [`foundation`](`https://github.com/zurb/foundation-sites) +* [`flexgrid`](https://github.com/ptb/flexgrid) +* [`Gridlex`](https://github.com/devlint/gridlex) +* [`Flexbox Grid`](https://github.com/kristoferjoseph/flexboxgrid) +* [`sharps`](https://github.com/awinogradov/sharps) + +### Task runners + +* [`npm scripts`](https://docs.npmjs.com/misc/scripts) +* [`gulp`](https://github.com/gulpjs/gulp) + +### Javascript + +* [`ES6`](https://www.ecma-international.org/ecma-262/6.0/) +* [`ES7`](https://www.ecma-international.org/ecma-262/7.0/) +* [`Typescript`](https://github.com/Microsoft/TypeScript) +* [`flow`](https://github.com/facebook/flow) + +### Package Manager + +* [`npm`](https://github.com/npm/cli) +* [`yarn`](https://github.com/yarnpkg/yarn) + +### Javascript Framework + +* [`react`](https://github.com/facebook/react) +* [`preact`](https://github.com/developit/preact) +* [`gatsbyJS`](https://github.com/gatsbyjs/gatsby) +* [`VueJS`](https://github.com/vuejs/vue) +* [`Angular`](https://github.com/angular/angular) + +### JS State + +* [`redux`](https://github.com/reduxjs/redux) +* [`mobx`](https://github.com/mobxjs/mobx) +* [`rxjs`](https://github.com/ReactiveX/rxjs) +* [`flux`](https://github.com/facebook/flux) + +### Module Lodader & Bundler + +* [`webpack`](https://github.com/webpack) + +### Design Patterns + +* [`Revealing Prototype Pattern`](https://gist.github.com/zcaceres/bb0eec99c02dda6aac0e041d0d4d7bf2) + From c88c0db1816a1e308972d7c559e10f55d8f24eac Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 18:44:09 +0300 Subject: [PATCH 04/18] html + css added --- utmutatok/fullstack/fullstackdeveloper.md | 45 +++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 7d226cb..78b4589 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -22,6 +22,46 @@ A fullstack fejlesztő az alkalmazás összes rétegét és annak összes stackj - modern frameworkok ismerete - user experience - tisztában lenni az end-user igényeivel + +### Bővebben + +A `HTML` (azaz `The Hypertext Markup Language`) az alapja minden weboldalnak, vagy webalkalmazásnak. A `HTML` határozza meg a weboldal (vagy webapp) szerkezetét, struktúráját, és a tartalmát. + +A `CSS` (azaz `Cascading Style Sheet`) egy egyszerű módszer arra, hogyan adjunk _stílust_ az oldalainkoz, amivel definiáljuk, hogy mi hogyan nézzen ki. + +A stíluslapokon stílusmegadásokkal (stílusdefiníciókkal) formázhatjuk meg a kívánt oldalelemeket: a böngésző az itt megadott definíciók alapján fogja megjeleníteni az oldalt. A böngészők nem teljesen kompatibilisek egymással a stíluslapok használatát illetően, ezért teszteljük oldalainkat a több böngészőben, ha lehetséges, illetve a 4-esnél kisebb verziójú böngészőkben is. + +A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnunk a `.html` oldalainkhoz. + +`` + +#### Stílus szabályok + + > öröklödés, szelektorok, osztályok, stb. + + A stílusok öröklődhetnek, és a tagen belüli stílusdefiníciókkal felülírhatjuk a globális stílusmegadásokat. Ez azt is jelenti, hogyha egy tag-hez tartozik globális és lokális stílusmegadás is egy adott tulajdonságra, akkor a lokálisan megadott érték felülírja a globálisan megadottat az adott helyen. (Általában a később megadott, tehát a dokumentumban lejjebb található stílusmegadás érvényesül.) De ha a stílusmegadás végén az !important kulcsszót is elhelyezzük, biztos, hogy az ott megadott stílus fog megjelenni, nem lehet lokálisan felüldefiniálni azt. + + ``` + body { + color: #000; + } + ``` + + A `html` tageket ún. osztályokkal láthatjuk el, amikkel aztán hivatkozhatunk rájuk a `css` fájlokban. + +`html`: + + ``` +

class="text"> + hello world +

+ ``` + +`css`: + +``` +.text { border: 1px solid #000; } +``` ## Az alapok @@ -89,3 +129,8 @@ A fullstack fejlesztő az alkalmazás összes rétegét és annak összes stackj * [`Revealing Prototype Pattern`](https://gist.github.com/zcaceres/bb0eec99c02dda6aac0e041d0d4d7bf2) +# Források + +1) `w3c` +2) [`css`](http://web.axelero.hu/fodorsi/html/css1.html) +) () \ No newline at end of file From 9724558fd4b3b4434d25e52703bd8bce44036ca9 Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 19:10:56 +0300 Subject: [PATCH 05/18] typo fix --- utmutatok/fullstack/fullstackdeveloper.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 78b4589..1407723 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -1,10 +1,10 @@ -#Fullstack (web) developer, 2019 +# Fullstack (web) developer, 2019 -##Egy falatnyi történelem +## Egy falatnyi történelem A webes, illetve a webes alkalmazásfejlesztés hatalmasat fejlődött az elmúlt akár 5 évben, sőt, mióta léteznek modern webalkalmazásokhoz használatos framework-ök, komoly változás következik be akár minden hatodik hónapban. Ilyenkor természetesen, illetve jobb esetben, a fejlesztőre van bízva, hogy ezeket mennyire, és milyen intenzitással hajlandó követni. -##Mi az a fullstack fejlesztő? +## Mi az a fullstack fejlesztő? A fullstack fejlesztő az alkalmazás összes rétegét és annak összes stackjét ismeri: From 0eb21a18f2eda64fb828a0d6c2fedb7286a28582 Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 19:19:19 +0300 Subject: [PATCH 06/18] hun fix --- utmutatok/fullstack/fullstackdeveloper.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 1407723..1a53763 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -8,7 +8,7 @@ A webes, illetve a webes alkalmazásfejlesztés hatalmasat fejlődött az elmúl A fullstack fejlesztő az alkalmazás összes rétegét és annak összes stackjét ismeri: -- Szerver, Network, és hosting ismerete +- Szerver, Network, és hoszting ismerete - alkalmazás skálázhatóságának imserete - cloud storage ismerete - adat redundancia @@ -21,7 +21,7 @@ A fullstack fejlesztő az alkalmazás összes rétegét és annak összes stackj - user interface átfogó ismerete - modern frameworkok ismerete - user experience -- tisztában lenni az end-user igényeivel +- tisztában lenni az végfelhasználó igényeivel ### Bővebben From a7a111e85c949d600ec4e83270e21f88df2e4a40 Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 19:26:36 +0300 Subject: [PATCH 07/18] html example + tag list --- utmutatok/fullstack/fullstackdeveloper.md | 24 +++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 1a53763..58f736a 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -23,10 +23,32 @@ A fullstack fejlesztő az alkalmazás összes rétegét és annak összes stackj - user experience - tisztában lenni az végfelhasználó igényeivel +## Az alapok + ### Bővebben A `HTML` (azaz `The Hypertext Markup Language`) az alapja minden weboldalnak, vagy webalkalmazásnak. A `HTML` határozza meg a weboldal (vagy webapp) szerkezetét, struktúráját, és a tartalmát. +A `HTML` fájl `tag`-ekből, áll, aminek alapvetően két típusát különböztetjük meg: + +1) Önzáró tagek (_self-closing_) + +Pl.: + +``` +logo +``` + +2) + +1) Nem önzáró tagek (_self-closing_) + +``` +hello worlds +``` + +Az összes `HTML` tag-ről elérhető egy teljes lista [itt](https://www.tutorialrepublic.com/html-reference/html5-tags.php) + A `CSS` (azaz `Cascading Style Sheet`) egy egyszerű módszer arra, hogyan adjunk _stílust_ az oldalainkoz, amivel definiáljuk, hogy mi hogyan nézzen ki. A stíluslapokon stílusmegadásokkal (stílusdefiníciókkal) formázhatjuk meg a kívánt oldalelemeket: a böngésző az itt megadott definíciók alapján fogja megjeleníteni az oldalt. A böngészők nem teljesen kompatibilisek egymással a stíluslapok használatát illetően, ezért teszteljük oldalainkat a több böngészőben, ha lehetséges, illetve a 4-esnél kisebb verziójú böngészőkben is. @@ -62,8 +84,6 @@ A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnu ``` .text { border: 1px solid #000; } ``` - -## Az alapok * [`html`](https://www.w3schools.com/html/) * [`css`](https://www.w3schools.com/css/) From 3a3e915bf1fc6c3462e4976168c63147057e0d6e Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 19:34:02 +0300 Subject: [PATCH 08/18] example added --- utmutatok/fullstack/fullstackdeveloper.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 58f736a..4475c87 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -47,6 +47,23 @@ Pl.: hello worlds ``` +A `HTML` tageket _tulajdonságokkal_ más néven attribútumokkal tudjuk ellátni. A fenti példában, az `img` tag-nak az `src` (azaz _source_, forrás) egy attribútuomat, ami meghatározza, a fájl nevét, és a hozzá vezető útvonalat. + +Vannak alapvető szabályok, amiket be kellt tartani `HTML` írása közben, ilyen például az a szabyályrendszer ami leírja, hogy adott elemnek milyen _leszármazottjai_ lehetnek. + +Például: + +_helytelen_: + +``` + + + +``` + +Ugyanis az `a` tag nem tartalmazhat `label` taget. Az ilyen, és ehhez hasonló hibák kijavítására való a [`w3c validator`](https://validator.w3.org/). + + Az összes `HTML` tag-ről elérhető egy teljes lista [itt](https://www.tutorialrepublic.com/html-reference/html5-tags.php) A `CSS` (azaz `Cascading Style Sheet`) egy egyszerű módszer arra, hogyan adjunk _stílust_ az oldalainkoz, amivel definiáljuk, hogy mi hogyan nézzen ki. @@ -153,4 +170,3 @@ A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnu 1) `w3c` 2) [`css`](http://web.axelero.hu/fodorsi/html/css1.html) -) () \ No newline at end of file From 747b01c85b948e13d0044bf06eb3b657351524c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A1roly=20Ozsv=C3=A1rt?= Date: Sun, 14 Apr 2019 19:01:13 +0200 Subject: [PATCH 09/18] root - typo, link fix --- utmutatok/root.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/utmutatok/root.md b/utmutatok/root.md index debaac7..35cd6f1 100644 --- a/utmutatok/root.md +++ b/utmutatok/root.md @@ -1,9 +1,9 @@ # Útmutatók -Itt alapvetően olyan _útmutatókat_ próbálunk összeszedni, amelyek a szakma egy-egy specifikus területére jellemzők, segít up-to-date maradni az adott területet érintő technológiákkal, ugyanakkor segíthet elternatívát is találni egy adott probléma megoldására. +Itt alapvetően olyan _útmutatókat_ próbálunk összeszedni, amelyek a szakma egy-egy specifikus területére jellemzők, segít up-to-date maradni az adott területet érintő technológiákkal, ugyanakkor segíthet alternatívát is találni egy adott probléma megoldására. -Jelenleg a következő témakörökhöz készül _útmutató_ +Jelenleg a következő témakörökhöz készül(t) _útmutató_ - Fullstack Developer 2019 -> Ötleteket nagyon szívesen várunk ide is, nyiss hozzá egy [https://github.com/arphox/tudasbazis/issues](issue)-t! \ No newline at end of file +> Ide is nagyon szívesen várunk ötleteket, nyiss hozzá egy [issue](https://github.com/arphox/tudasbazis/issues)-t! From 0fe81973d2534ef8bf62b5fd3c39d1e1bf5840a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=A1roly=20Ozsv=C3=A1rt?= Date: Sun, 14 Apr 2019 19:15:40 +0200 Subject: [PATCH 10/18] =?UTF-8?q?fullstackdeveloper.md=20-=20sok=20el?= =?UTF-8?q?=C3=ADr=C3=A1s=20&=20kin=C3=A9zet=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utmutatok/fullstack/fullstackdeveloper.md | 61 +++++++++++------------ 1 file changed, 29 insertions(+), 32 deletions(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 4475c87..73f8612 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -8,48 +8,45 @@ A webes, illetve a webes alkalmazásfejlesztés hatalmasat fejlődött az elmúl A fullstack fejlesztő az alkalmazás összes rétegét és annak összes stackjét ismeri: -- Szerver, Network, és hoszting ismerete -- alkalmazás skálázhatóságának imserete +- Szerver, hálózat, és hosting ismerete +- alkalmazás skálázhatóságának ismerete - cloud storage ismerete - adat redundancia -- adat modellek imserete +- adat modellek ismerete - relációs, nem relációs adatbázisok ismerete - üzleti logika ismerete -- api réteg ismerete -- mvc pattern ismerete +- API réteg ismerete +- MVC pattern ismerete - clean code alkalmazása - user interface átfogó ismerete - modern frameworkok ismerete - user experience -- tisztában lenni az végfelhasználó igényeivel +- tisztában lenni a végfelhasználó igényeivel -## Az alapok +## Alapok -### Bővebben +### HTML -A `HTML` (azaz `The Hypertext Markup Language`) az alapja minden weboldalnak, vagy webalkalmazásnak. A `HTML` határozza meg a weboldal (vagy webapp) szerkezetét, struktúráját, és a tartalmát. +A `HTML` (azaz `HyperText Markup Language`) az alapja minden weboldalnak, vagy webalkalmazásnak. A `HTML` határozza meg a weboldal (vagy webapp) szerkezetét, struktúráját, és a tartalmát. -A `HTML` fájl `tag`-ekből, áll, aminek alapvetően két típusát különböztetjük meg: +A `HTML` fájl `tag`-ekből áll, aminek alapvetően két típusát különböztetjük meg: -1) Önzáró tagek (_self-closing_) - -Pl.: +1. Önzáró tagek (_self-closing_) +Pl.: ``` logo ``` -2) - -1) Nem önzáró tagek (_self-closing_) +2. Nem önzáró tagek (_non self-closing_) ``` hello worlds ``` -A `HTML` tageket _tulajdonságokkal_ más néven attribútumokkal tudjuk ellátni. A fenti példában, az `img` tag-nak az `src` (azaz _source_, forrás) egy attribútuomat, ami meghatározza, a fájl nevét, és a hozzá vezető útvonalat. +A `HTML` tageket _tulajdonságokkal_ (más néven attribútumokkal) tudjuk ellátni. A fenti példában, az `img` tag-nak az `src` (azaz _source_, forrás) egy attribútuma, ami meghatározza a fájl nevét, és a hozzá vezető útvonalat. -Vannak alapvető szabályok, amiket be kellt tartani `HTML` írása közben, ilyen például az a szabyályrendszer ami leírja, hogy adott elemnek milyen _leszármazottjai_ lehetnek. +Vannak alapvető szabályok, amiket be kell tartani `HTML` írása közben, ilyen például az a szabyályrendszer ami leírja, hogy adott elemnek milyen _leszármazottjai_ lehetnek. Például: @@ -63,10 +60,10 @@ _helytelen_: Ugyanis az `a` tag nem tartalmazhat `label` taget. Az ilyen, és ehhez hasonló hibák kijavítására való a [`w3c validator`](https://validator.w3.org/). - Az összes `HTML` tag-ről elérhető egy teljes lista [itt](https://www.tutorialrepublic.com/html-reference/html5-tags.php) -A `CSS` (azaz `Cascading Style Sheet`) egy egyszerű módszer arra, hogyan adjunk _stílust_ az oldalainkoz, amivel definiáljuk, hogy mi hogyan nézzen ki. +### CSS +A `CSS` (azaz `Cascading Style Sheets`) egy egyszerű módszer arra, hogy _stílusokat_ adjunk az oldalainkoz, amikkel definiáljuk, hogy mi hogyan nézzen ki. A stíluslapokon stílusmegadásokkal (stílusdefiníciókkal) formázhatjuk meg a kívánt oldalelemeket: a böngésző az itt megadott definíciók alapján fogja megjeleníteni az oldalt. A böngészők nem teljesen kompatibilisek egymással a stíluslapok használatát illetően, ezért teszteljük oldalainkat a több böngészőben, ha lehetséges, illetve a 4-esnél kisebb verziójú böngészőkben is. @@ -108,7 +105,7 @@ A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnu ## CSS -### Preprocesszorok +### Preprocesszor * [`dart-sass`](https://github.com/sass/dart-sass) * [`less`](https://github.com/less/less.js) @@ -117,7 +114,7 @@ A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnu * [`css-in-js`](https://github.com/cssinjs/jss) * [`emotion`](https://github.com/emotion-js/emotion) -### CSS frameworks +### CSS framework * [`bulma`](https://github.com/jgthms/bulma) * [`foundation`](`https://github.com/zurb/foundation-sites) @@ -126,12 +123,12 @@ A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnu * [`Flexbox Grid`](https://github.com/kristoferjoseph/flexboxgrid) * [`sharps`](https://github.com/awinogradov/sharps) -### Task runners +### Task runner -* [`npm scripts`](https://docs.npmjs.com/misc/scripts) -* [`gulp`](https://github.com/gulpjs/gulp) +- [`npm scripts`](https://docs.npmjs.com/misc/scripts) +- [`gulp`](https://github.com/gulpjs/gulp) -### Javascript +### Javascript * [`ES6`](https://www.ecma-international.org/ecma-262/6.0/) * [`ES7`](https://www.ecma-international.org/ecma-262/7.0/) @@ -153,16 +150,16 @@ A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnu ### JS State -* [`redux`](https://github.com/reduxjs/redux) -* [`mobx`](https://github.com/mobxjs/mobx) -* [`rxjs`](https://github.com/ReactiveX/rxjs) -* [`flux`](https://github.com/facebook/flux) +- [`redux`](https://github.com/reduxjs/redux) +- [`mobx`](https://github.com/mobxjs/mobx) +- [`rxjs`](https://github.com/ReactiveX/rxjs) +- [`flux`](https://github.com/facebook/flux) -### Module Lodader & Bundler +### Module Loader & Bundler * [`webpack`](https://github.com/webpack) -### Design Patterns +### Design Patterns (tervezési minták) * [`Revealing Prototype Pattern`](https://gist.github.com/zcaceres/bb0eec99c02dda6aac0e041d0d4d7bf2) From 102f63d3968a94a243831764e9960b5fc38ea3dc Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 21:30:06 +0300 Subject: [PATCH 11/18] improvements --- utmutatok/fullstack/fullstackdeveloper.md | 97 +++++++++++++++++++---- 1 file changed, 82 insertions(+), 15 deletions(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 4475c87..156b871 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -8,26 +8,26 @@ A webes, illetve a webes alkalmazásfejlesztés hatalmasat fejlődött az elmúl A fullstack fejlesztő az alkalmazás összes rétegét és annak összes stackjét ismeri: -- Szerver, Network, és hoszting ismerete -- alkalmazás skálázhatóságának imserete +- Szerver, hálózat, és hosting ismerete +- alkalmazás skálázhatóságának ismerete - cloud storage ismerete - adat redundancia - adat modellek imserete - relációs, nem relációs adatbázisok ismerete - üzleti logika ismerete -- api réteg ismerete -- mvc pattern ismerete +- API réteg ismerete +- MVC pattern ismerete - clean code alkalmazása - user interface átfogó ismerete - modern frameworkok ismerete - user experience -- tisztában lenni az végfelhasználó igényeivel +- tisztában lenni a végfelhasználó igényeivel -## Az alapok +##Alapok -### Bővebben +### HTML -A `HTML` (azaz `The Hypertext Markup Language`) az alapja minden weboldalnak, vagy webalkalmazásnak. A `HTML` határozza meg a weboldal (vagy webapp) szerkezetét, struktúráját, és a tartalmát. +A `HTML` (azaz `Hypertext Markup Language`) az alapja minden weboldalnak, vagy webalkalmazásnak. A `HTML` határozza meg a weboldal (vagy webapp) szerkezetét, struktúráját, és a tartalmát. A `HTML` fájl `tag`-ekből, áll, aminek alapvetően két típusát különböztetjük meg: @@ -39,9 +39,9 @@ Pl.: logo ``` -2) +2) Önzáró tagek (_self-closing_) -1) Nem önzáró tagek (_self-closing_) +1) Nem önzáró tagek (_non-self-closing_) ``` hello worlds @@ -66,7 +66,13 @@ Ugyanis az `a` tag nem tartalmazhat `label` taget. Az ilyen, és ehhez hasonló Az összes `HTML` tag-ről elérhető egy teljes lista [itt](https://www.tutorialrepublic.com/html-reference/html5-tags.php) -A `CSS` (azaz `Cascading Style Sheet`) egy egyszerű módszer arra, hogyan adjunk _stílust_ az oldalainkoz, amivel definiáljuk, hogy mi hogyan nézzen ki. +#### HTML Frameworkok + + + +### CSS + +A `CSS` (azaz `Cascading Style Sheet`) egy egyszerű módszer arra, hogy adjunk _stílusokat_ adjunk az oldalainkoz, amikkel definiáljuk, hogy mi hogyan nézzen ki. A stíluslapokon stílusmegadásokkal (stílusdefiníciókkal) formázhatjuk meg a kívánt oldalelemeket: a böngésző az itt megadott definíciók alapján fogja megjeleníteni az oldalt. A böngészők nem teljesen kompatibilisek egymással a stíluslapok használatát illetően, ezért teszteljük oldalainkat a több böngészőben, ha lehetséges, illetve a 4-esnél kisebb verziójú böngészőkben is. @@ -106,14 +112,75 @@ A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnu * [`css`](https://www.w3schools.com/css/) * [`javascript`](https://developer.mozilla.org/hu/docs/Web/JavaScript) -## CSS -### Preprocesszorok +#### Preprocesszorok * [`dart-sass`](https://github.com/sass/dart-sass) * [`less`](https://github.com/less/less.js) * [`stylus`](https://github.com/stylus/stylus) * [`post-css`](https://github.com/postcss/postcss) + +A preprocesszorok olyan programok, amely `CSS`-t generál, a preprocesszorok saját szintaktikájából. Azeknek a hagyományos `CSS` írásával szemben olyan előnyei vannak, mint pl a változó használat, ciklusok, _nested_ szelektorok, mixinek. Ezek használatával a `CSS` írása gyorsabb, a kód tagolható, átlátható. Ezen felül segít elkerülni a kódismétlést is, amelyek nagyobb projekteknél különösen hasznos. + +A(z egyik legelterjettebb), a `sass`, vagy újabban `dart-sass`, ugyanis a régi `ruby` implementációja már elavulttá vált, az új verzió pedig a [`dart-sass`](https://github.com/sass/dart-sass) névre hallgat. + +_natív_ `CSS` kód: + +``` +body p { color: #fff; } + +``` + +A fenti selector a `body`-tagkben az összes `p` tagban lévő szöveg színét fehérre állítja. + +Ugyanez, az `SCSS` által is biztosított ún _beágyazott_ (nested) szintaktikával a következőképpen alakul: + +``` +body { + p { + color: #fff; + } +} +``` + +Majd pedig a fordító az `.scss` fájlunkból készít `.css`-t. + +Az `dart-sass`, a `less`, és a `stylus` is hasonló módon működik. Néhány szintaktikai eltérés van ezek között, azonban az közös, hogy mindegyiket _natív_ `CSS`-re kell fordítani, amiket a megszokott módon be kell húzni a `HTML` fájlokba. + +Ezek használata akkor javallott, ha semmilyen front-end frameworkot (amikről lentebb lesz szó) nem használunk, azaz lényegében a _hagyományos_ módon építünk weboldalat. + +Ezeken felül van még néhány `css-in-js` elképzelésen alapuló megoldás is. Lényeges különsbég az `SCSS`, `LESS` és társai között, hogy ezekből nem lesz _natív_ `CSS` kód, hiszen ahogy a neve is mutatja, ezek a `CSS` deklarációk `Javascript`-ben lesznek, pl. egy javascript [`objektumban`](http://gabor.molnar.es/blog/2013/05/05/javascript-programozas-jegyzet-objektumok/). + +``` +const Title = styled.div` + color: #fff; + padding: .5rem; + color: #000; +`; +``` + +Ezt a megoldást akkor érdemes használni, ha valami Javascript frameworkot használunk, vagy szeretnénk használni egy jövőbeli projekthez. A fenti példa a [`styled-components`](https://github.com/styled-components/styled-components) nevű, `ReactJS`-ez írt komponens _formázó_ csomag (_pacakge_). + +A `styled-components`-en kívül, a `JSS`, ami framework független, de az elve ugyanaz: + +``` +const styles = { + '@global': { + body: { + color: '###' + } +} +``` + +`CSS`-hez nagyon hasonlító stílus deklarációkat írunk, de `JS` szintaktikával. + +Ezek előnyei: + +A `JSS` egyedi osztályneveket generál amikor a deklarált stílusok `CSS`-re konvertálódnak. Ez azt a problémát oldja meg, hogy modern web komponensek fejlesztésekor a stílusok között átfedés (`conflit`) lépjen fel. Természetesen, ha haználunk bármilyen konvenciót, ez a probléma nem is lépethe fel, azonban nagyon gyorsan, nagyon átláthatlan és csúnya `CSS`-t kapnánk, ami jelentősen ront a skálázhatósági faktoron is. + +Ha használni szeretnénk valamilyen modern `javascript` frameworkot, ez a megközelítés javallott. + +* [`styled-components](https://github.com/styled-components/styled-components) * [`css-in-js`](https://github.com/cssinjs/jss) * [`emotion`](https://github.com/emotion-js/emotion) @@ -126,7 +193,7 @@ A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnu * [`Flexbox Grid`](https://github.com/kristoferjoseph/flexboxgrid) * [`sharps`](https://github.com/awinogradov/sharps) -### Task runners +### Task runners * [`npm scripts`](https://docs.npmjs.com/misc/scripts) * [`gulp`](https://github.com/gulpjs/gulp) @@ -158,7 +225,7 @@ A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnu * [`rxjs`](https://github.com/ReactiveX/rxjs) * [`flux`](https://github.com/facebook/flux) -### Module Lodader & Bundler +### Module Loader & Bundler * [`webpack`](https://github.com/webpack) From a3e81c468fe4b647567d217e34fbf597d2ede8f1 Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 21:33:55 +0300 Subject: [PATCH 12/18] reorder --- utmutatok/fullstack/fullstackdeveloper.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index d505ec8..055f89e 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -25,6 +25,10 @@ A fullstack fejlesztő az alkalmazás összes rétegét és annak összes stackj ##Alapok +* [`html`](https://www.w3schools.com/html/) +* [`css`](https://www.w3schools.com/css/) +* [`javascript`](https://developer.mozilla.org/hu/docs/Web/JavaScript) + ### HTML A `HTML` (azaz `Hypertext Markup Language`) az alapja minden weboldalnak, vagy webalkalmazásnak. A `HTML` határozza meg a weboldal (vagy webes alkalmazás) szerkezetét, struktúráját, és a tartalmát. @@ -101,11 +105,6 @@ A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnu .text { border: 1px solid #000; } ``` -* [`html`](https://www.w3schools.com/html/) -* [`css`](https://www.w3schools.com/css/) -* [`javascript`](https://developer.mozilla.org/hu/docs/Web/JavaScript) - - ### Preprocesszorok * [`dart-sass`](https://github.com/sass/dart-sass) From 9b6bab18041a70aff5c2a0b621d55c9d4974cd1a Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 21:35:22 +0300 Subject: [PATCH 13/18] typo fixes --- utmutatok/fullstack/fullstackdeveloper.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 055f89e..9434386 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -120,7 +120,6 @@ _natív_ `CSS` kód: ``` body p { color: #fff; } - ``` A fenti selector a `body`-tagkben az összes `p` tagban lévő szöveg színét fehérre állítja. @@ -172,7 +171,7 @@ A `JSS` egyedi osztályneveket generál amikor a deklarált stílusok `CSS`-re k Ha használni szeretnénk valamilyen modern `javascript` frameworkot, ez a megközelítés javallott. -* [`styled-components](https://github.com/styled-components/styled-components) +* [`styled-components`](https://github.com/styled-components/styled-components) * [`css-in-js`](https://github.com/cssinjs/jss) * [`emotion`](https://github.com/emotion-js/emotion) From 6a4771a7b13c1c397b9382ec2d971b3e07a0a616 Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 21:35:52 +0300 Subject: [PATCH 14/18] typo --- utmutatok/fullstack/fullstackdeveloper.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 9434386..2b705a2 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -171,7 +171,7 @@ A `JSS` egyedi osztályneveket generál amikor a deklarált stílusok `CSS`-re k Ha használni szeretnénk valamilyen modern `javascript` frameworkot, ez a megközelítés javallott. -* [`styled-components`](https://github.com/styled-components/styled-components) +* [`styled-components`](https://github.com/styled-components/styled-components) * [`css-in-js`](https://github.com/cssinjs/jss) * [`emotion`](https://github.com/emotion-js/emotion) From cec9f1714259a0977fa193e4423cd2a179695dce Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 21:36:39 +0300 Subject: [PATCH 15/18] typo in list --- utmutatok/fullstack/fullstackdeveloper.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 2b705a2..58cf510 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -193,8 +193,8 @@ Ha használni szeretnénk valamilyen modern `javascript` frameworkot, ez a megk * [`ES6`](https://www.ecma-international.org/ecma-262/6.0/) * [`ES7`](https://www.ecma-international.org/ecma-262/7.0/) -* [`Typescript`](https://github.com/Microsoft/TypeScript) -* [`flow`](https://github.com/facebook/flow) +* [`Typescript`](https://github.com/Microsoft/TypeScript) +* [`flow`](https://github.com/facebook/flow) ### Package Manager From d5d092addd3098cfe0dc15435c72f0b538aa9719 Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 21:37:59 +0300 Subject: [PATCH 16/18] typo fixes --- utmutatok/fullstack/fullstackdeveloper.md | 26 +++++++++++------------ 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 58cf510..36b49bb 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -177,12 +177,12 @@ Ha használni szeretnénk valamilyen modern `javascript` frameworkot, ez a megk ### CSS framework -* [`bulma`](https://github.com/jgthms/bulma) -* [`foundation`](`https://github.com/zurb/foundation-sites) -* [`flexgrid`](https://github.com/ptb/flexgrid) +* [`Bulma`](https://github.com/jgthms/bulma) +* [`Foundation`](`https://github.com/zurb/foundation-sites) +* [`Flexgrid`](https://github.com/ptb/flexgrid) * [`Gridlex`](https://github.com/devlint/gridlex) * [`Flexbox Grid`](https://github.com/kristoferjoseph/flexboxgrid) -* [`sharps`](https://github.com/awinogradov/sharps) +* [`Sharps`](https://github.com/awinogradov/sharps) ### Task runners @@ -194,7 +194,7 @@ Ha használni szeretnénk valamilyen modern `javascript` frameworkot, ez a megk * [`ES6`](https://www.ecma-international.org/ecma-262/6.0/) * [`ES7`](https://www.ecma-international.org/ecma-262/7.0/) * [`Typescript`](https://github.com/Microsoft/TypeScript) -* [`flow`](https://github.com/facebook/flow) +* [`Flow`](https://github.com/facebook/flow) ### Package Manager @@ -203,22 +203,22 @@ Ha használni szeretnénk valamilyen modern `javascript` frameworkot, ez a megk ### Javascript Framework -* [`react`](https://github.com/facebook/react) -* [`preact`](https://github.com/developit/preact) -* [`gatsbyJS`](https://github.com/gatsbyjs/gatsby) +* [`React`](https://github.com/facebook/react) +* [`Preact`](https://github.com/developit/preact) +* [`GatsbyJS`](https://github.com/gatsbyjs/gatsby) * [`VueJS`](https://github.com/vuejs/vue) * [`Angular`](https://github.com/angular/angular) ### JS State -- [`redux`](https://github.com/reduxjs/redux) -- [`mobx`](https://github.com/mobxjs/mobx) -- [`rxjs`](https://github.com/ReactiveX/rxjs) -- [`flux`](https://github.com/facebook/flux) +- [`Redux`](https://github.com/reduxjs/redux) +- [`Mobx`](https://github.com/mobxjs/mobx) +- [`RxJs`](https://github.com/ReactiveX/rxjs) +- [`Flux`](https://github.com/facebook/flux) ### Module Loader & Bundler -* [`webpack`](https://github.com/webpack) +* [`Webpack`](https://github.com/webpack) ### Design Patterns (tervezési minták) From 8793611b845a5bf40a495f46736202fd4ca8ade5 Mon Sep 17 00:00:00 2001 From: Richard Zilahi Date: Sun, 14 Apr 2019 22:00:38 +0300 Subject: [PATCH 17/18] typo + md fix --- utmutatok/fullstack/fullstackdeveloper.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 36b49bb..6b44b4e 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -65,7 +65,7 @@ _helytelen_: Ugyanis az `a` tag nem tartalmazhat `label` taget. Az ilyen, és ehhez hasonló hibák kijavítására való a [`w3c validator`](https://validator.w3.org/). -Az összes `HTML` tag-ről elérhető egy teljes lista [itt](https://www.tutorialrepublic.com/html-reference/html5-tags.php) +Az összes `HTML` tag-ről elérhető egy teljes lista [itt](https://www.tutorialrepublic.com/html-reference/html5-tags.php). ### CSS @@ -105,6 +105,8 @@ A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnu .text { border: 1px solid #000; } ``` +A `CSS` szelektorok listája megtalálható [itt](https://www.w3schools.com/cssref/css_selectors.asp). + ### Preprocesszorok * [`dart-sass`](https://github.com/sass/dart-sass) @@ -112,7 +114,7 @@ A `CSS` definíciókat `.css` fájlokban tároljuk, amit aztán hozzá kell adnu * [`stylus`](https://github.com/stylus/stylus) * [`post-css`](https://github.com/postcss/postcss) -A preprocesszorok olyan programok, amely `CSS`-t generál, a preprocesszorok saját szintaktikájából. Azeknek a hagyományos `CSS` írásával szemben olyan előnyei vannak, mint pl a változó használat, ciklusok, _nested_ szelektorok, mixinek. Ezek használatával a `CSS` írása gyorsabb, a kód tagolható, átlátható. Ezen felül segít elkerülni a kódismétlést is, amelyek nagyobb projekteknél különösen hasznos. +A preprocesszorok olyan programok, amelyek `CSS`-t generálnak, a preprocesszorok saját szintaktikájából. Azeknek a hagyományos `CSS` írásával szemben olyan előnyei vannak, mint pl a változó használat, ciklusok, _nested_ szelektorok, mixinek. Ezek használatával a `CSS` írása gyorsabb, a kód tagolható, átlátható. Ezen felül segít elkerülni a kódismétlést is, amelyek nagyobb projekteknél különösen hasznos. A(z egyik legelterjettebb), a `sass`, vagy újabban `dart-sass`, ugyanis a régi `ruby` implementációja már elavulttá vált, az új verzió pedig a [`dart-sass`](https://github.com/sass/dart-sass) névre hallgat. @@ -181,7 +183,7 @@ Ha használni szeretnénk valamilyen modern `javascript` frameworkot, ez a megk * [`Foundation`](`https://github.com/zurb/foundation-sites) * [`Flexgrid`](https://github.com/ptb/flexgrid) * [`Gridlex`](https://github.com/devlint/gridlex) -* [`Flexbox Grid`](https://github.com/kristoferjoseph/flexboxgrid) +* [`Flexbox Grid`](https://github.com/kristoferjoseph/flexboxgrid) * [`Sharps`](https://github.com/awinogradov/sharps) ### Task runners From 55272a5c457826cf1a8567ace3131df3dc6a3aba Mon Sep 17 00:00:00 2001 From: Unc3nZureD Date: Mon, 15 Apr 2019 12:05:26 +0200 Subject: [PATCH 18/18] Fix styling --- utmutatok/fullstack/fullstackdeveloper.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utmutatok/fullstack/fullstackdeveloper.md b/utmutatok/fullstack/fullstackdeveloper.md index 6b44b4e..f5a9cbf 100644 --- a/utmutatok/fullstack/fullstackdeveloper.md +++ b/utmutatok/fullstack/fullstackdeveloper.md @@ -23,7 +23,7 @@ A fullstack fejlesztő az alkalmazás összes rétegét és annak összes stackj - user experience - tisztában lenni a végfelhasználó igényeivel -##Alapok +## Alapok * [`html`](https://www.w3schools.com/html/) * [`css`](https://www.w3schools.com/css/)