logo Czechitas HTML a CSS 2

Komunitní balíčky

Na internetu se pohybuje spoustu dobrých duší, které napsaly a volně poskytují užitečný kód tak, abychom ho nemuseli psát znovu. Takové kódy najdeme typicky třeba na GitHubu nebo ve specializované databázi balíčků npmjs.com. Jak balíček použít je většinou popsáno v README.md.

Kromě toho, že v balíčku může být předchystaný kus CSS nebo HTML, často se v něm nachází i JavaScript či jiný neznámý kus kódu, který funkce dříve zmíněných jazyků rozšiřuje.

Při výběru balíčku je vhodné sledovat počet stažení, datum poslední aktualizace na npmjs

sass blíček na npmjs

a počet hvězdiček na GitHubu.

github hvězdičky

Všechny tři údaje nám napoví, jak kvalitní balíček je. V druhé řadě je také důležité README.md, aby bylo jasné, jak balíček použít. Hodí se také demo, ze kterého lze kolikrát nejlépe vykoukat, jak se vše má chovat dohromady a případně po nahlédnutí do zdrojového kódu si můžeme i dovyjasnit způsob nasazení.

Skrývající se hlavička

Představme si, že máme na webu hlavičku, která zabírá hodně místa, a tak bychom ji chtěli schovat, když uživatel scrolluje dolů. Na to se nám může hodit například balíček hiding-header.

Galerie s obrázky přes celou stránku

Pokud bychom uživatelům chtěli umožnit rozklikávat menší fotky do větších detailů, můžeme použít třeba fslightbox.

Úkol na teď

Postupuj podle zadání na github.com/…/Cviceni-Npmjs-galerie.