Předností modulů je udržitelnost a čitelnost kódu.
Hlavní myšlenkou je import a export určitých částí kódu, tzn. že můžete kód rozsekat na několik částí, čímž se zvyšuje, již zmíněná přehlednost a udržitelnost.

2 typy exportu

• default (export default)
• standardní export (export)

Příklad

HTML struktura

<button id=”btnShowMess”>Show message</button>

<script type="module" src="app.js"></script> <!-- attribut type nastavíme na modul, aby prohlížeč věděl, že pracujeme s moduly -->

mess.js

export function Message(mess) {

console.log(mess);

}

app.js

import {Message} from ‘./mess.js’; // import funkce z mess.js

const btn = document.getElementById(“btnShowMess”);

btn.onclick = () => {

Message(“Hello world”);

}

Výsledek v konzoli po kliknutí na tlačítko Show message:

Pro instalaci NPM je nutné nejprve nainstalovat Node.js (JS runtime postavený na Chrome V8 JavaScriptovém enginu).

Instalace NPM

npm install npm@latest -g - na macu a linuxu bude potřebova instalaci provést s administrátorským oprávněním (sudo) tedy:
sudo npm install npm@latest -g

Struktura souborů

node_modules

• v této složce naleznete veškeré balíčky, které byly nainstalovány

package.json

• JSON, který uchovává všechny informace o projektu a taktéž seznam všech nainstalovaných balíčků

{ “name”: “start-project”, “version”: “1.0.0”, “description”: “”, “main”: “”, “author”: “”, “license”: “ISC”, “devDependencies”: { “browser-sync”: “².26.13”, “gulp”: “⁴.0.2”, “gulp-autoprefixer”: “⁷.0.1”, “gulp-clean-css”: “⁴.3.0”, “gulp-concat”: “².6.1”, “gulp-sass”: “⁴.1.0”, “gulp-sourcemaps”: “³.0.0”, “gulp-stylelint”: “¹³.0.0”, “gulp-terser”: “².0.0”, “node-sass”: “⁴.14.1” }}

Základní příkazy

npm init …

Pokud se chcete zbavit repetetivní, nudné práce a ušetřit si, tak spoustu času při vývoji Gulp je správnou volbou.

Pomocí Gulpu můžete optimalizovat obrázky, minifikovat soubory (css, js), spojovat soubory a mnoho dalšího.

Alternativy Gulpu jsou Webpack, Grunt a npm scripty.

Jmenuji se Matěj Kunc a momentálně se živím jako HTML/CSS kodér, v malém start-upu Rondo. Je to moje první full-time práce, za kterou jsem nesmírně vděčný.

Svůj studentský život jsem ukončil po střední škole. Během střední školy jsem pracoval pro několik firem. Stavěl jsem webové stránky na redakčním systému Wordpress( Elementor, Divi), ale zároveň jsem občas něco nakódil od základu.

Můj cíl je se stát FE developer, každý den se snažím nějakým způsobem vzdělávat a přiblížit se, tak této pozici. …

Tato vlastnost specifikuje, kde všude se uvnitř elementu bude vykreslovat obrázek nebo pozadí.

Výchozí hodnota je border-box.

Pro nastavení pozadí textu je v první řadě nutné nastavit background této vlastnosti. Přiřadíme zdroj obrázku, v mém případě url(“fire-bg.jpg”).

Dále deklarujeme background-clip s prefixem -webkit tedy -webkit-background-clip: text. Nestačí nám nastavit -webkit-background-clip na hodnotu text. Také musíme nastavit vlastnost color na transparent, jelikož barva textu přebíjí obrázek.

Výsledek bez vlastnosti color: transparent by vypadal takto:

1) Traversy Media

Co je to vlastně HTML DOM?

• zkratka DOM znamená (Document Object Model)
• je možné s ním manipulovat pomocí JavaScriptu