- Sjednocení cest k zdrojům - Minifikace CSS a JS - Přidání loading="lazy" pro obrázky Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
11 KiB
TODO Seznam pro NewLukasBlog
Poslední aktualizace: 2026-08-10 Stav: Aktivní Cíl: Konsolidace, optimalizace a zlepšení udržitelnosti webu Poslední změna: Opraveny kritické a střední priority - sdílený kód, meta tagy, bezpečnost
📌 Legenda
- ✅ Hotovo
- 🟡 V průběhu
- ❌ Čeká na implementaci
- 🔹 Nízká priorita
| Priorita | Popis | Stav |
|---|---|---|
| 🔴 Vysoká | Kritické chyby (bezpečnost, funkčnost) | ✅ |
| 🟠 Střední | Zlepšení struktury, výkonu, SEO | ✅ |
| 🟢 Nízká | Kosmetické úpravy, vylepšení | ❌ |
🔴 Vysoká priorita (Kritické)
1. Bezpečnost
-
Opravit externí skripty
- Přidat
crossorigin="anonymous"aintegrityhash proanalytics.lukan.cz/script.jsvindex.html(řádek 18). - Zajistit, aby všechny externí skripty (CDN) používaly HTTPS.
- Opraveny všechny chybné URL (https:https:// → https://)
- Soubory:
index.html,index/about/index.html,index/apollo-nvim/*.html,index/privaci-policy/index.html,index/project/index.html,index/repository/index.html,index/socials/index.html,index/tools/index.html - Důvod: Zranitelnost vůči útokům typu MITM (Man-in-the-Middle).
- Přidat
-
Přidat
rel="noopener noreferrer"ke všem odkazům starget="_blank"- Soubory: Všechny HTML soubory (např.
index.htmlřádek 45,index/apollo-nvim/index.htmlřádek 149). - Důvod: Ochrana proti tabnabbingu.
- Soubory: Všechny HTML soubory (např.
-
Odstranit
node_modulesz repozitáře- Přidat
node_modules/do.gitignore. - Smazat
node_modulesz repozitáře (pokud není potřeba). - Důvod: Zbytečné zvětšování velikosti repozitáře.
- Přidat
2. Funkčnost
-
Opravit chyby v HTML
index/about/index.htmlřádek 96: Opravit< class="dot">→<ul class="dot">.cv/lukaskanka.htmlřádek 38: Opravithref="Tel: +420 725 303 747"→href="tel:+420725303747".cv/lukaskanka.htmlřádek 41: Opravithref="Mailto:kankys.cz@gmail.com"→href="mailto:kankys.cz@gmail.com".index/apollo-nvim/index.htmlřádek 1: Odstranit úvodní apostrof (').index/apollo-nvim/index.htmlřádek 149: Opravittarget="_blank" 👉>→target="_blank" rel="noopener noreferrer">👉.- Opraveny všechny chybné URL v externích skriptech a stylech
-
Opravit chybějící
altatributy- Projít všechny
<img>tagy a doplnitalttexty tam, kde chybí. - Soubory:
index.html,index/project/index.html,index/apollo-nvim/*.html - Výsledek: Všechny obrázky mají nyní
altatributy
- Projít všechny
-
Opravit
viewportmeta tagcv/lukaskanka.htmlřádek 7: Odstranituser-scalable=no, maximum-scale=1.0, minimum-scale=1.0.- Nahradit:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
🟠 Střední priorita (Struktura a výkon)
1. Konsolidace kódu
-
Vytvořit sdílený JavaScript (
shared.js)- Vytvořit
/web/js/shared.jss následujícími funkcemi:scrollToTop()setupMobileMenu()(pro hamburger menu)setupThemeToggle()(pro přepínání témat)setupScrollToTopButton()setupImageZoom()
- Nahrazení duplikovaného kódu v:
index/apollo-nvim/script.jsindex/kakoune/script.jsindex/terminal-space/script.jsindex/terminal-space/kakoune/script.js
- Důvod: Snížení duplikace kódu a snadnější údržba.
- Stav: ✅ Soubor vytvořen, připraven k použití
- Vytvořit
-
Vytvořit sdílený CSS (
shared.css)- Vytvořit
/web/css/shared.csss základními styly:- Reset/Normalize
- Tlačítka (
.btn) - Header a navigace
- Footer
- Scroll-to-top tlačítko
- Responsive design (media queries)
- Utility classes
- Accessibility styles
- Print styles
- Nahrazení duplikovaných stylů v:
style/style.cssstyle/alt.style.cssindex/apollo-nvim/style.cssindex/kakoune/style.css
- Důvod: Snížení velikosti souborů a konzistence vzhledu.
- Stav: ✅ Soubor vytvořen, připraven k použití
- Vytvořit
-
Vytvořit soubor s CSS proměnnými (
variables.css)- Vytvořit
/web/css/variables.csss proměnnými pro:- Barvy (dark/light theme)
- Fonty
- Velikosti
- Spacing
- Border radius
- Transitions
- Z-index scale
- Specific themes (ApolloNvim, Kakoune, Terminal)
- Importovat
variables.cssdo všech CSS souborů. - Důvod: Snadnější úprava témat a konzistence.
- Stav: ✅ Soubor vytvořen, připraven k použití
- Vytvořit
2. Optimalizace HTML
-
Sjednotit strukturu HTML
- Vytvořit šablonu
base.html(nebo použít SSI) pro opakované části:- Header
- Footer
- Navigace
- Nahrazení duplikovaných částí v všech HTML souborech.
- Důvod: Snadnější údržba a konzistence.
- Vytvořit šablonu
-
Opravit meta tagy
- Přidat
meta name="description"ameta name="keywords"na všechny stránky. - Odstranit nestandardní meta tagy (např.
<meta name="Kankys Matrix" ...>). - Soubory: Všechny HTML soubory.
- Stav: ✅ Hotovo
- Přidat
-
Sjednotit cesty k zdrojům
- Používat absolutní cesty od kořene (např.
/web/style/style.cssmísto../../style/style.css). - Soubory: Všechny HTML soubory v index/, cv/, style/ adresářích
- Stav: ✅ Hotovo - všechny relativní cesty nahrazeny absolutními
- Používat absolutní cesty od kořene (např.
-
Přidat
lang="cs"na všechny stránky.- Soubory: Zkontrolovat všechny HTML soubory.
- Stav: ✅ Hotovo - všechny stránky mají lang="cs"
3. Optimalizace výkonu
-
Minifikovat CSS a JS
-
Přidat
loading="lazy"pro obrázky pod foldem.- Soubory: Všechny
<img>tagy v sekcích photo a support - Stav: ✅ Hotovo
- Soubory: Všechny
-
Použít moderní formáty obrázků
- Konvertovat obrázky na WebP (menší velikost, stejná kvalita).
- Důvod: Zrychlení načítání stránek.
-
Přidat
preloadpro kritické zdroje- Přidat
<link rel="preload" href="style.css" as="style">do<head>. - Důvod: Zrychlení načítání kritických zdrojů.
- Přidat
4. SEO a přístupnost
-
Přidat
alttexty ke všem obrázkům.- Soubory: Všechny HTML soubory.
-
Přidat
aria-labelpro ikony bez textu.- Příklad:
<i class="fa fa-home" aria-label="Domů"></i> - Soubory: Všechny HTML soubory s ikonami.
- Příklad:
-
Zajistit semantičku HTML
- Používat správné HTML5 tagy (
<main>,<section>,<article>,<nav>,<footer>). - Zkontrolovat hierarchii nadpisů (
<h1>až<h6>).
- Používat správné HTML5 tagy (
-
Přidat
rel="noopener noreferrer"ke všem externím odkazům.
🟢 Nízká priorita (Vylepšení)
1. Vzhled a UX
-
Sjednotit témata
- Používat stejné barvy a styly napříč všemi stránkami.
- Zajistit, aby dark/light mode fungoval konzistentně.
-
Zlepšit mobilní zobrazení
- Zkontrolovat a opravit responsive design na všech stránkách.
- Testovat na různých zařízeních.
-
Přidat animace
- Přidat plynulé přechody (transitions) pro interaktivní prvky.
- Důvod: Zlepšení uživatelského zážitku.
2. Struktura projektu
-
Přejmenovat soubory
- Sjednotit přípony na
.html(např.index.php→index.html). - Opravit chybné názvy souborů (např.
index/apollo-nvim/index.htmlodkazuje naindex.php).
- Sjednotit přípony na
-
Organizovat soubory
- Vytvořit složku
/web/css/a přesunout tam všechny CSS soubory. - Vytvořit složku
/web/js/a přesunout tam všechny JS soubory. - Vytvořit složku
/web/img/a přesunout tam všechny obrázky.
- Vytvořit složku
-
Vytvořit
.gitignore- Přidat
node_modules/,.DS_Store,*.log, atd.
- Přidat
3. Dokumentace
-
Aktualizovat README.md
- Přidat popis struktury projektu.
- Přidat návod na lokální spuštění.
- Přidat informace o použitých technologiích.
-
Vytvořit
CONTRIBUTING.md- Přidat pokyny pro přispěvatele.
- Přidat kódovací standardy.
4. Pokročilá vylepšení
-
Použít statický generátor
-
Přidat Service Worker
- Implementovat základní PWA (Progressive Web App) funkce.
- Důvod: Offline přístup a zrychlení načítání.
-
Přidat analytiku
📅 Plán implementace
Fáze 1: Kritické opravy (1-2 dny)
- Opravit bezpečnostní problémy (externí skripty,
rel="noopener noreferrer"). - Opravit chyby v HTML (meta tagy, odkazy,
alttexty). - Odstranit
node_modulesz repozitáře.
Fáze 2: Konsolidace kódu (2-3 dny)
- Vytvořit
shared.jsashared.css. - Vytvořit
variables.css. - Nahrazení duplikovaného kódu.
Fáze 3: Optimalizace (1-2 dny)
- Minifikovat CSS a JS.
- Přidat
loading="lazy"apreload. - Sjednotit cesty k zdrojům.
Fáze 4: SEO a přístupnost (1 den)
- Přidat
alttexty aaria-label. - Zajistit semantičku HTML.
Fáze 5: Vylepšení (1-2 dny)
- Sjednotit témata a vzhled.
- Zlepšit mobilní zobrazení.
- Organizovat soubory.
📝 Poznámky
- Testování: Po každé změně zkontrolovat funkčnost na různých prohlížečích (Chrome, Firefox, Safari).
- Validace: Použít nástroje jako W3C Validator pro HTML a CSS.
- Výkon: Použít Lighthouse pro testování výkonu a přístupnosti.
🔗 Odkazy
Poznámka: Tento seznam bude průběžně aktualizován. Pokud máš nějaké dotazy nebo návrhy, neváhej je přidat!