Textový editor a todo list v prohlížeči s ukládáním do local storage
Určitě znáte ten trik s data URI a atributem contenteditable, který vám z tabu v prohlížeči udělá zápisník.
data:text/html, <html contenteditable> Jenže stačí neopatrně zavřít tab nebo ho znovu načíst, a text se nenávratně ztratí.
Sam Rawal z Mayo Clinic se s tím nechtěl smířit a vytvořil si jednoduchou stránku, která je celá editovatelná v prohlížeči a obsah ukládá do localstorage. Editoru říká focus.txt a můžete si ho buď otevřít z webu nebo stáhnout na Githubu a rozběhnout na svém serveru. Je to jen obyčejná statická stránka, takže poběží i na tom nejjednodušším hostingu.
Focus.txt neumí nic. Je jako Notepad ve Windows. Sam ho naučil jen to, že když řádek začíná odrážkou, bude další začínat odrážkou také. Místo prázdné stránky se načte text se třemi oddíly: notes (poznámky), tasks (úkoly) a done (hotovo). Tyhle tři sekce mají přidělené barvy pro snazší odlišení. Můžete si přidat i další vlastní sekce, a když klepnete na tlačítko update colors, také se obarví.
Až si focus.txt osedláte, můžete začít v textu psát %date% pro vložení aktuálního data, %time% pro vložení času a %check% pro emoji checkboxu ✅.
Sam doporučuje hotové úkoly přesunout ze sekce tasks do sekce done. Každý den můžete začít s čistým listem, a když na konci dne klepnete na tlačítko download, stáhne se vám textový soubor. „Takhle kdysi pracoval s úkoly můj redakční kolega na Lupě Mirek Zeman. Každé ráno vzal z tiskárny čistý list papíru a sepsal si úkoly na daný den. Večer papír zmuchlal a vyhodil do koše,“ vzpomíná Martin.
Úložiště localhost se nesychronizuje v uživatelském profilu prohlížeče, takže pokud focus.txt otevřete na počítači v kanceláři, nemusíte se bát, že by vás pronásledoval i v mobilu a doma. To může být pro někoho i nevýhoda.
Pokud chcete obsah úložiště zahodit a začít znovu, můžete buď ručně smazat text ze stránky, použít Web Developer Tools, nebo přes ikonku u adresy v adresním řádku dojít k nastavení úložišťě v prohlížeči a vymazat ho.
chrome://settings/content/siteDetails?site=https%3A%2F%2Ffocustxt.github.io Za tip děkujeme Danu Dočekalovi a Fast Company.