penge / my-notes Goto Github PK

Notes will be stored to Chrome sync (as are right now).

Everything else (font type, font size, current page, mode - light/dark) will go to Chrome local.

Reason:
Notes can be shared across computers.
Everything else is computer specific.

It seems that the new version of My Notes was disabled because it required another permission: to read my browsing history – something I wouldn't think necessary for a new-tab note-taking extension.

Could you elaborate on the permissions required by the extension? Something like "Replace new tab" would make sense on its own – it is, after all, decidedly a new-tab replacement extension – while browsing history access raises a bit of a concern.

What do you think about adding tabs?
For example I want to keep different pages with notes and quickly switch between them.

Something like this:

If that sounds like a good idea I can help to implement

After typing the note, I would open a new tab again, to see if my changes have been properly saved. Most of the time, the aren't. Often enough, latest-added words phrases are missing, and I can't be sure they will be saved properly once I close the tab I was editing in.

It would be excellent if I could jot the notes down and close the tab, knowing full well that everything I'd left on the "page" is safe with the extension.

Originally created by @FirebrandCoding here #46

Builds

• https://penge.imfast.io/my-notes/3/notes.html
• https://penge.imfast.io/my-notes/2/notes.html
• https://penge.imfast.io/my-notes/1/notes.html

Branch

https://github.com/penge/my-notes/tree/next

This message will be updated on new builds.

Having view-changing toggle hover over a portion of the text sounds like a UX accident waiting to happen.

My suggestion is to take it out of the scope of the text field, like this:

(I'm sure you can do better than this, especially considering how eye-catching the current-page black is.)

This eliminates the risk of mis-clicking while navigating the text and opens the doors for future page-related improvements.

Ideally, this means you can have as many pages as you want, since the container is flexible by default. (You could before, of course, but this form factor makes it much easier to navigate.) You can even resolve having more pages than is comfortable navigating on the device by adding a ... pseudo-tab that lists all the pages à la Chrome's bookmarks.

If you want user control over their pages, add a + button after all the pages, and a ╳ button (or a 🞡-rotated button) for each page when there's more than one. Naturally, prompt the user before closing if the page contains any data.

My Notes 3 is almost here!

I am now testing the new features — it would be great if you could join!

Here's how you could help out with the testing:

• to confirm the functionality
• to experience the UI/UX and provide feedback

See Testing Checklist for details.

My Notes 3

• can Create / Rename / Delete the notes (#64, #66)
• improved Editor that supports HTML and an easy way to insert bold, italic, underline, strikethrough, Heading 2, Heading 3, paragraph, horizontal rule, unordered list, ordered list (#59, #72)
• Google Drive backup with automatic two-way sync (on every open, close, refresh of My Notes), which uploads new and edited notes to Google Drive, and downloads new and edited notes from Google Drive (#53)
• better integration with the browser, which comes down to:
  • name of the open note is displayed in the browser's Tab (#65)
  • Back/Forward buttons (or associated shortcuts) can navigate between last open notes (#69)

Testing Checklist

Here's a list of things to test, which is also a detailed list of the new features. Any additional playing around is very welcome.

Create / Rename / Delete

1. Can create a new note (see New note button)

   • new note is added to the NOTE_LIST in an alphabetical order; also in every other open My Notes tab NOTE_LIST
   • new note name needs to be unique – creating a note with the name taken by an existing note should not be allowed

2. Can rename the note (see three dots button)

   • can rename the note from the NOTE_LIST

     • while renaming the note, it should be highlighted in blue
     • after the note is renamed, the name should be updated, tiles should be updated in an alphabetical order; renaming should be applied in every open My Notes tab NOTE_LIST and NOTE_DETAIL for the same note
     • note should NOT be renamed if the new name is taken by an existing note

   • can rename the note from the NOTE_DETAIL

     • while renaming the note, it should be highlighted in blue
     • after the note is renamed, the name should be updated; renaming should be applied in every open My Notes tab NOTE_LIST and NOTE_DETAIL for the same note
     • note should NOT be renamed if the new name is taken by an existing note

3. Can delete the note (see three dots button)

   • can delete the note from the NOTE_LIST

     • while deleting the note, it should be highlighted in red and proceed only if you type "delete"
     • after deleted, it should be removed from the NOTE_LIST; also from every other open My Notes tab NOTE_LIST and if in NOTE_DETAIL, it should jump to an updated NOTE_LIST

   • can delete the note from the NOTE_DETAIL

     • while deleting the note, it should be highlighted in red and proceed only if you type "delete"
     • after deleted, it should jump to an updated NOTE_LIST; also update every other open My Notes tab NOTE_LIST and if in NOTE_DETAIL, it should jump to an updated NOTE_LIST

   • creating a new note with the name as deleted one should be possible

Editing

4. The new Editor can style the content, or insert the elements

   • buttons for bold, italic, underline, etc., should apply the style, or insert the element
   • keyboard shortcuts should work too after selecting a text, like CTRL+B for bold
   • styles can be combined, such as bold + italic

5. Editing the note content is synchronized across the other My Notes tab(s)

   • changing the note content should be updated after 1 second in every other open My Notes tab NOTE_LIST and NOTE_DETAIL for the same note

Browser integration

6. The title in the browser's Tab should change accordingly:

   • when in NOTE_LIST to "My Notes"
   • when in NOTE_DETAIL to note's name

7. Can use Back/Forward buttons (or associated shortcuts) to navigate between the recently open notes

   • if the note in the history was meanwhile renamed or deleted, navigating to it should open NOTE_LIST

Google Drive

8. Google Drive in Options does the following:

   • after enabled:

     • My Notes folder is created in your Google Drive – if it doesn't exist; and if it exists – existing folder should be used
     • it should display a link next to "Backup location:"; when clicked, it should open in the new tab newly created or existing My Notes folder in your Google Drive
     • your notes should be immediately uploaded to Google Drive / My Notes
     • Time of sync should be displayed next to "Last sync:"
     • NOTE_LIST should have "Sync Now" button displayed, with "Last sync:" and "Open in Google Drive"
     • if enabled from a second computer, existing notes should be downloaded

   • after disabled:

     • it should remove the link next to "Backup location:", remove the time next to "Last sync:"
     • NOTE_LIST should have hidden "Sync Now" button, "Last sync:", "Open in Google Drive"
     • uploaded notes should stay if Google Drive

9. When My Notes is Open/Closed/Refreshed, or "Sync Now" is clicked, following should happen:

   • towards Google Drive

     • notes that are new, are uploaded creating a new file
     • notes that are updated, are uploaded updating the existing file

   • towards My Notes:

     • files that are new, are downloaded as new notes
     • files that are updated (manually in Google Drive, or from other computer's My Notes), are downloaded and update the content of the note

   • if Google Drive / My Notes folder is deleted by you, the synchronization should stop (and hide/reset the elements related to the synchronization)

   • if Google Drive in Options is disabled, the synchronization should stop (and hide/reset the elements related to the synchronization)

Testing Members

# MEMBERS

A=penge (me)


# RESULTS

    A
1   +
2   +
3   +
4   +
5   +
6   +
7   +
8   +
9   +

-   => not tested
!   => not working
+   => working 

I have tested all, but will do again.

How to join

If you'd like to join, simply let me know here. I will soon prepare the branch with a commit we will be testing.

1. Let me know
2. Checkout the code
3. Install My Notes
4. Send me your My Notes installation ID, example: ofdfapdmkkhenkgihklcdcmjbfkdojci
5. I'll create for you a Client ID in Google Cloud Platform, and send it back to you
6. Put the Client ID in manifest.json and reload My Notes
7. Proceed with Testing Checklist
8. Send me back your results / feedback

Before the testing starts, the source code will be freezed and the branch / commit ID will be provided.

In My Notes 2.x, the selection saved using the context menu is stored to the top of 1/3.

Clipboard

My Notes 3.x will allow to rename the notes. Something like 1/3 is no longer fixed.
To solve this, there will be a special note added called Clipboard:

• serves to receive the selection
• can be edited just like any other note
• cannot be renamed or deleted

I have found note renaming (and creation) can be improved by removing the trailing space.

There are many great extensions that replace New Tab, but only one extension can do this at a time (which puts other extensions to the side).

I'll chose a different approach:

1 click on My Notes icon will open My Notes in a New Tab

This will have several benefits:

• New Tab remains unchanged, makes extension less intrusive (it doesn't override the settings)
• User continues to see bookmarks in New Tab (setting that bookmarks are automatically visible only in a New Tab)
• User is more in control (when to open My Notes, and how many times to open it)
• Newly open Tab can have favicon (My Notes icon)
• The extension does not override New Tab and can live alongside other extensions

Downsides:

• New Tab open this way will have an URL that might not be "nice" as it will be a path to the extension

When the scroll bar appears, the buttons (for dark mode & font size) appear over top of it.

Ideally, the buttons should be to the left of the scroll bar.

Editor in My Notes 3 can insert any arbitrary HTML. Meaning, if you find an image on the internet you'd like to insert, like a picture of a cake:

Simply right-click on the image and select "Copy Image" from the dropdown.

Then, in My Notes right-click and select "Paste".

Result

This issue is created to primarily let you know this is possible.
And possibly to have a discussion how this could be improved, like providing a picture's URL and having it inserted.

It would be great if there was a save button. This would allow users to save notes to a file or within the browser for later use.

Related to #57: consider adding an option to focus the notes <textarea>. This should make taking notes slightly easier if it's something you do often in the browser. The HTMLElement.focus() method should assist with that.

Also, add Esc keybind to escape <textarea> focus and re-focus the address bar. You can use the .blur() method on document.activeElement to achieve that.

Add option to export notes.

Export – Open, Closed, or All Notes
Format – .txt or .md

If exporting more than 1 note, put them in .zip

No need to save on Ctrl, Alt, Shift, arrow keys, or other.

Keys that don't change the text, will no longer trigger the save (because text remained unchanged).

Exception

A special exception is Tab and Ctrl+Tab as those will change the text, indent the text forward or backward.

I don't know whether it was possible to port the existing notes into the new version of the extension. Seeing how they're essentially the same item in the extensions menu, using the same Chromium API, I think that might have been possible.

Now that I've lost my notes, I think it's a good idea to remind you – as well as any developer reading – that retaining saved data over version bumps is really fucking important. Pardon the swearing: it's important to me that the weight of the matter gets across accurately.

At the very least, consider letting the users know that their data may be lost in transition, so that at least there's a chance to copy it to an intermediary text file.

(I'm naturally assuming you had tested the data retention behavior before releasing the the new version extensively.)

Focus mode will allow users to hide the controls in the corner (font size, light/dark mode toggle) and hence maximize the focus on the text area.

Entering or Leaving Focus mode will be done by a keyboard shortcut.

I assumed, on seeing release notes, that what the "Focus by default" option does is focus the <textarea> element of the notes, making it easier to take notes when opening a new tab.

Instead what it does is engage focus mode.

It's an excellent option with an unclear title. Consider renaming it to "Focus mode on by default" so as to not confuse the user.

To new users, it may also be useful to explain what focus mode is. Consider adding a brief explanation of the different between default and focus mode under the category title or the checkbox itself in the options.

After updating to version 2.3.2 I can't get MyNotes to appear when I open a new tab.

Was there a setting before?

The site that you have provided is not found in chrome store.

Google Fonts is a library of a thousand beautiful fonts that can be retrieved in a simple way, and fast.

Here's a generic example how to retrieve a font:

<link href="https://fonts.googleapis.com/css?family=FONT+NAME&display=swap" rel="stylesheet">

font-family: "FONT+NAME", monospace;

This is how it would work behind the scenes. As for My Notes user, it would be more simple. Simple as typing a font name.

A new editor in My Notes 3.0 (see #72) can be improved to support Tables.

Required functionality:

• Insert a new table

• Modify the table size in the following ways:

  • Insert row above
  • Insert row below
  • Insert column left
  • Insert column right
  • Delete row
  • Delete column

• Set Heading row(s) and/or Heading column(s)

I lost my notes yesterday and not sure what happened. Maybe because of the new update yesterday Jan 30? What I did was to reinstall the plugin again. Do you think in cases like this, we should be able to save it online instead of local storage?

Its an awesome extension, helping me a lot in day to day life. More wonderful features are also coming.

Was just wondering if there is any plan to add support for using Markdown, it will help me to have checklists, headings, sections, tables in a single place to manage my notes better. For e.g. I keep the sprint plan always handy in my notes tab (along with many other day to day notes or other important items for the project) and if I have the option to use markdown I will be able to manage them better.

Add a beautiful toggle to switch between Light Mode and Dark Mode.

This feature will have higher priority than OS settings.

Reasons:

• Someone has Dark mode on Mac, but wants to use Light mode My Notes
• Someone has Light mode on Mac, but wants to use Dark mode My Notes

Therefore, the preference of Light Mode / Dark Mode is not defined by OS, but by the user, based on his preference.

Like in title. White page is bad for people using dark modes.

Right now, font size is saved on every change (not really necessary).

To keep write quota within limits, save font size just once, during beforeunload.

beforeunload will be called when the tab is about to be closed.

Update to a new version can bring interesting features, and these can be overseen if UI remains unchanged.

The idea is to have notification that is displayed everytime when a new version has been installed.

Preview of the notification:

New version 2.3 has been installed.

See what's new    Close

See what's new would open https://github.com/penge/my-notes/releases in a New Tab

Close would close the notification

Besides the chrome extension, My Notes could be used as a standalone app.

Add manifest, service worker registration, service worker.
Switch from chrome storage (not available in PWA) to IndexedDB (use IDB-Keyval wrapper).

Benefits:

• beautiful UI (no tabs, no address bar, more space)
• works as separate application (great for Chrome OS)
• across devices

Downsides:

• no Chrome Storage and no Chrome Sync (this is not a deal breaker if using just 1 computer, it that case it would work the same)
• fragmentation (1 app becomes 2)

I like this extension, but would really prefer to be able to set the font family of the notes, because I need the font to be monospaced for this to be useful to me.

I wouldn't mind opening a PR but I don't have a ton of free time at the moment. If you are open to it but don't want to implement, I'll see what I can do! :)

My Notes 3 isn't even out yet, and there are already great features to add!

I start typing todo (or Todo, or TODO), if there is a note => it is open.

This. Is. Real. Stuff.

debounce

Save text only 1 time per 1 second to avoid MAX_WRITE_OPERATIONS_PER_MINUTE quota which is to be 120 write operations per minute. Use debounce to do so, and set immediate to true.

beforeunload

User might open the window and quickly type something (not paste, but type) and quickly close the window. Leverage beforeunload event to save the text immediately in such a scenario.
Reason: This might happen very quickly, the window might be closed before debounce gets a chance to triggered again.

My Notes 1 and 2 are using <textarea> to write down the notes in plain text. This doesn't allow to use styles to organize the content visually better. Here's how it can be improved.

Required features

• Headings (h1, h2, h3)
• bold
• italic
• underline
• and possibly more

Options

This can be done either by creating something, or using existing solution. Creating something seems better as feature list is not huge and creating something is quite simple.

Here are some options for the reference and also inspiration.

Known WYSIWYG editors are:

• Slate
• Draft.js
• ProseMirror
• Quill
• CKEditor
• TinyMCE
• Editor.js
• More at https://github.com/JefMari/awesome-wysiwyg

Quill looks nice, but seems not maintained:

• https://medium.com/@jhchen/the-state-of-quill-and-2-0-fb38db7a59b9 (Sep 2017)
• quilljs/quill#2435 (Roadmap)
• https://github.com/quilljs/quill/graphs/commit-activity
• https://github.com/quilljs/quill/releases

Known Code editors are:

• Ace (powers Cloud9)
• Monaco (powers VS Code)
• CodeMirror
• More at https://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

My Notes will have a beautiful icon in the Chrome Extensions page.

There has been a requirement in having a Todo list.

I am now evaluating how that could be done and if it's necessary.

How I manage a Todo list and might be efficient, is like this:

This gives me an option to write down a Todo list with additional notes (which I found to be a good combination) or write down nested Todos (a combined task).

What do you think. Is a Todo list really necessary? Or is it already there?

Use viewport to achieve a good font size on Android / Kiwi browser.

When I click tab, it doesn't tab or space the text. Instead, it puts focus on the search bar.

It might be possible to add this functionality, but I'm not entirely sure how.

Maybe it can keep focus on the textbox and add a tab or spacing character to the textbox.

Let's be bold. Let's be strict.

"use strict";

My Notes 3 will allow to set a name to the note, this could be displayed in the browser's tab as well.

Title:

• set to note name when open

• set to "My Notes" when no note open

Web Store interprets the permission called "tabs" in the worst case scenario, by showing a following message:

Add "My Notes"?


It can:

Read your Browsing history

The only message worse than that would be:

It can:

Read your Browsing history and send to a remote server.

This doesn't do good justice as it's claiming something that's not true. And just because something is possible with a certain permission, it's unholy to claim as a real thing.

This message is shown before installing version 2.3. This version requires "tabs" permission so it can replace New Tab as an optional setting, to show My Notes in New Tab. Prior versions did so declaratively via manifest.json and it was no optional. Declarative New Tab replacement is limited and restricted compared to programmatic, and so it doesn't require "tabs" permission, but also doesn't bring further customization like the mentioned optional setting.

The proposed solution to this is:

• Open My Notes with 1 click on the icon.
• Remove the optional setting and tabs permission.

Use IIFE to enclose the javascript from the outside world.

Now

Tab will switch between textarea and Chrome's search box.

Expected

• Tab will indent the text forward (--> 2 spaces)
• Shift+Tab will indent the text backward (<-- 2 spaces)

Stage 1

That means, this will work only when no text is selected.
Forwarding selected text, or forwarding text selection, is much more complicated topic that can be solved in future. Same applies for Backwarding.
Edit: Especially when reaching the end of the line. Variable font and variable window width make it complicated to identify the end of line and when to stop.

History API allows to store the information of currently open note, and notes, that have been visited before.

Then, BACK and FORWARD in the browser, can be used to quickly navigate between last open notes. This can be also done using keyboard shortcuts (based on the OS you use). In Chrome OS for example, this would be very easy and fast with the arrow keys next to esc:

This navigation would not only be fast and better than currently defined shortcuts (jump to page 1,2,3) but also remembered on page refresh.

The font size wil be changable in a range (from, to) using cute buttons in the bottom right corner.

I tested with Firefox and the extension appears to work without any problems. The only change you'll need is to add a gecko id in the manifest.json file.

DAMN Chrome Storage. It has been updated, and it's faster. But not lighting fast as it should be.

There is a MAX_WRITE_OPERATIONS_PER_MINUTE. (which is 120)

Source:
https://developer.chrome.com/apps/storage

This solution will be quick. Instead of listening to "input" event, I will save data only on "keyup" event. Fast typers might need wait for further optimizations, but that will come next.

My Notes is a replacement for New Tab and therefore can be open multiple times.

The goal is to detect if there is (are) other My Notes tabs already open, and to keep edits only in one place (one tab). In other words, the goal is to prevent cross editing in multiple My Notes tabs. Cross editing can cause problems like which version should be saved last.

If there is already open My Notes in the browser, display a message or even better, display a Link, that will jump (highlight) to the tab with already open My Notes.

The goal is changed. Allow cross editing by saving pages individually (save only pages that are edited in the current tab).