+```
+
+Nem önzáró 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útuma, ami meghatározza a fájl nevét, és a hozzá vezető útvonalat.
+
+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:
+
+_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).
+
+### 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.
+
+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; } +``` + +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) +* [`less`](https://github.com/less/less.js) +* [`stylus`](https://github.com/stylus/stylus) +* [`post-css`](https://github.com/postcss/postcss) + +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. + +_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) + +### CSS framework + +* [`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 Loader & Bundler + +* [`Webpack`](https://github.com/webpack) + +### Design Patterns (tervezési minták) + +* [`Revealing Prototype Pattern`](https://gist.github.com/zcaceres/bb0eec99c02dda6aac0e041d0d4d7bf2) + +# Források + +1) `w3c` +2) [`css`](http://web.axelero.hu/fodorsi/html/css1.html) diff --git a/utmutatok/root.md b/utmutatok/root.md new file mode 100644 index 0000000..35cd6f1 --- /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 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(t) _útmutató_ + +- Fullstack Developer 2019 + +> Ide is nagyon szívesen várunk ötleteket, nyiss hozzá egy [issue](https://github.com/arphox/tudasbazis/issues)-t!