Skip to content

Latest commit

 

History

History
57 lines (35 loc) · 3.84 KB

README.md

File metadata and controls

57 lines (35 loc) · 3.84 KB
Raw

QuickNote

A simple text field in a self-contained HTML page that's quicker than a Post-it note. I typically live in the browser, which makes it the most efficient tool to capture what's on my mind.

Setting up QuickNote

Copy the HTML file wherever you want it. Locally, on your server, wherever. It's just the one file. #simplicity

You can open Quicknote even faster by:

  • Option A: Setting it as your browser's new tab page
  • Option B: Bookmarking it (Optional: add a custom keyboard shortcut)
  • Option C: Adding a site search shortcut (Chrome-based browsers only)

Using QuickNote

Whenever you need to jot something down, open QuickNote and just start typing.

The first line automatically populates with a header including the date the note was created. LocalStorage saves your note in case you accidentally refresh, close the tab, or your browser crashes.

Use the Copy or Share buttons to move your note to your PKMS of choice:

  • Copy drops the note title and text on your clipboard so you can paste it anywhere.
  • Share converts the note to JSON and triggers the browser's native Share Sheet for more advanced sharing options.
    • The JSON object includes separate title and text fields
    • It should work with any sharing extension that can handle JSON
    • I'm a fan of Apple Shortcuts since it gives you the flexibility to do almost anything with your note – here's an example shortcut for inspiration!

Once you've saved your note for posterity, use the Clear button to create a new blank note!

About QuickNote

Basic text input and editing should look and work fairly consistent on any browser or platform.

Full functionality assumes you're using a modern browser that supports current web best practices (Storage, Clipboard and Web Share). Sorry IE, you're out of luck.

If you're using a browser/device that's less than a couple years old, Quicknote should work just fine, except:

  • Share does not work in Chrome-based browsers on MacOS – Use Safari
  • These APIs are only available in secure contexts – over HTTPS or from local resources

#itscomplicated: Favicon support

Surprisingly, there is still no (simple) canonical way to approach favicons in 2023.

QuickNote includes link tags with favicons encoded inline in .png and .svg format. This should work for modern browsers without an additional HTTP request. I've also included the favicon in a couple other formats to support other use cases:

  • Safari only supports .png or .ico favicons in normal tabs (no SVG support), and uses a separate format for pinned tabs:

    <link rel="mask-icon" href="/safaricon.svg" color="#207EDF">

  • Old and niche browsers are a mixed bag – including favicon.ico in your site root will probably work for many of these but YMMV

  • Pretty app icons for mobile devices and browser apps require about a dozen extra files, a manifest, and a bunch more requests – this isn't a relevant use case for me but you can generate them if you want

Usage & feedback

Feel free to use or modify QuickNote as you see fit (GPL).

Finding QuickNote useful? Have a questions or suggestion? Let me know with an issue!