Väčšina z nás to pozná, nevieš si spomenúť na skratku alebo terminálové príkazy, ktoré si použil minulý týždeň. Namiesto hľadania cez google či zbytočného využívania AI na také banality, som si vytvoril cheat sheet.
Funguje v prehliadači, vyhľadáva okamžite a funguje aj offline.
Obsah článku:
- Čo to vlastne je...
- Instantné vyhľadávanie
- Žiadne "zbytočné" knižnice
- TAB navigácia & UX detaily
- Záver: Menej je viac
1. Čo to vlastne je...
Kytka9notes je statická webová apka — jediný index.html súbor, žiadny backend, žiadna databáza, žiadne npm závislosti pri spustení. Miesto, kde si ukladám príkazy, skratky, snippety a poznámky roztriedené do kategórií (macOS, Markdown, HTML, ...).
Každý záznam má typ — command, var alebo comment — a dá sa kedykoľvek odfiltrovať alebo vyhľadať (aj bez diakritiky)
Zámer je jednoduchý: otvoriť tab, napísať pár znakov, nájsť čo hľadáš.
- jeden html súbor
- nula npm závislostí
- offline dostupnosť
2. Instantné vyhľadávanie
Väčšina webových nástrojov pri hľadaní posiela požiadavku na server, čaká na odpoveď a potom prerenduje výsledky. Kytka9notes to robí inak — všetky dáta sú uložené priamo v JavaScripte a vyhľadávanie prebieha výhradne v pamäti prehliadača, bez akejkoľvek sieťovej komunikácie.
Technicky: celý dataset je JavaScript pole (array), ktoré sa načíta raz pri štarte stránky a zostáva v pamäti počas celej session. addEventListener('input', ...) zachytí každú zmenu v search poli a spustí .filter() nad týmto poľom. Výsledné záznamy sa vyrenderujú priamo do DOM bez frameworku, bez virtual DOM diffingu — len čistý innerHTML rewrite. Pre stovky záznamov je toto najrýchlejší možný prístup v prehliadači.
Vyhľadávanie v reálnom čase — výsledky sa filtrujú pri každom stlačení klávesy.
3. Žiadne "zbytočné" knižnice
Čistý vanilla JavaScript. Pri tomto projekte to nie je zaostalé myslenie, práve naopak. Pre nástroj, kde je cieľom maximálna rýchlosť pri minimálnom trení, je absencia frameworku zámer, nie nedostatok. Menej kódu = rýchlejší load = rýchlejšie hľadanie = viac času na skutočnú prácu.
Jediná externá závislosť pri renderingu je Font Awesome — pre ikonky, čo je rozumný kompromis medzi vzhľadom a váhou. Ostatné — dizajn, animácie, logika — je originálny CSS a JS od autora.
Kombinácia "všetky dáta lokálne + filter v JS + žiadny server" znamená, že kytka9notes funguje aj offline po prvom načítaní — ideálne na prácu v lietadle, v kaviarni bez WiFi.
4. TAB navigácia & UX detaily
Kedže ma baví pracovať prevažne klávesnicou a vyvarovať sa myške, stačí tabulátorom skočiť do vyhľadávacieho poľa a nájsť to potrebné.
V hlavičke je v podstate všetko dôležité info, plus aktuálny čas. Na konci stránky je celkový počet poznámok a dátum poslednej aktualizácie.
// Posledná aktualizácia stránky
const datum = new Date(document.lastModified);
const formatovanyDatum = datum.toLocaleDateString('sk-SK', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
document.getElementById('posledna-uprava').innerText = formatovanyDatum;
5. Záver: Menej je viac
Kytka9notes nie je produkt pre milióny používateľov. Je to presne to, čo hovorí README: "vytvorený pre pohodlie autora". A práve v tom je jeho sila. Bez kompromisov na UX kvôli onboardingu cudzích ľudí, bez feature bloat, bez analytiky sledujúcej každý klik.
Ak hľadáš inšpiráciu, ako si postaviť vlastný rýchly nástroj — jeden HTML súbor, čistý JavaScript, GitHub Pages — kytka9notes je skvelý príklad na preštudovanie. Zdrojový kód je verejný na GitHube a ukazuje, že niekedy je najlepší framework... žiadny framework.
Live stránka: ➤odkaz
GitHub: ➤odkaz
Keep coding :)
Top comments (0)