9

v1.4.2, 2021/6/10 UTC

stackMarks

Preview

StackMarks-Demo2-SpectricSO Notice: There have been breaking changes to the UI. This preview is outdated (per version 1.0). View the most updated preview in the user manual at the bottom of this post.

About

Inspired by this meta post ("Additional Features for Bookmarks") and this one ("Allow users to create custom categories into which to sort bookmarks").

StackMarks™ benefits:

Jump to the bottom of this post to view the user manual

License

StackMarks™ is licensed under the MIT License.

Download

StackMarks™ is available for installation here. It's recommended to choose the latest version - new versions generally introduce new features which may break due to outdated practices etc,.

[ Unminified | Minified (saves space) ]

Don't know how to install a userscript? Check out How to Install.

Platform

Browser Support

IE Chrome Firefox Safari Edge Opera
✔️ 8 1 ✔️ 4 ✔️ 3.5 ✔️ 4 ✔️ 12 ✔️ 11.5

1 SO Design Guidelines theoretically doesn't support IE anymore

Contact

New ideas? Leave an answer below.

Encounter a bug? Leave an issue at my Github repository here: https://github.com/SpectricSO/stack-scripts/issues Although I'm probably more quick to respond if you leave an answer too

todo list

  • ✔️ (done, v1.2) Add notes to each bookmark, customize title in bookmarks list
  • ✔️ (done, v1.3) Add search for bookmarks, collapsible categories for long list of bookmarks (preserved, collapsed categories will remain collapsed even upon closing/reopening).
  • ✔️ (done, v1.4) Import feature to import bookmarks over to StackMarks™ (good for users who have accumulated a lot of bookmarks over time and want to search them etc,.)

changelog

  • [v1.3]
    • Major UI Changes:
      • Removed header with 'StackMarks™' and switched with just a small description to remove screen clutter
    • Added collapsible category functionality
      • If you have many bookmarks, you might want to collapse a few categories to save scrolling. Just click the category name and the corresponding list will collapse
    • Added search functionality
      • Searches all bookmarks, checks whether the title or link contains the query and shows the bookmarks that satisfy the condition. Results are shown as you type. Note that all categories are uncollapsed and category names are hidden. To restore the view to the original, remove the contents of the input (selecting all + delete).
  • [v1.4]
    • Import bookmarks
      • When you visit the bookmarks tab of your profile (e.g, https://stackoverflow.com/users/14251221/spectric?tab=bookmarks), a '+StackMarks' button will appear beside the heading. Click this button, choose a category and select the bookmarks you wish to add to StackMarks™. For more information, please see the 'Migrating over to StackMarks™' section in the User Manual below
    • Fixed a category minimize/maximize bug, should work now
  • [v1.4.2]
    • Added keyboard shortcut option Ctrl + Shift + Y for Firefox users

Code

Languages:

  • JavaScript

Frameworks:

  • jQuery (native)

StackMarks™ User Manual

StackMarks™ does not have a huge learning curve - its simple and intuitive design makes using it extremely simple and easy.

Getting started

The dashboard is the home of all your bookmarks. It shows all your categories, and under the categories it lists the bookmarks under each category. It is toggled with the keyboard shortcut Ctrl + Shift + K or Ctrl + Shift + Y (for Firefox users). An example of what your dashboard may look like:

enter image description here

When hovering over a category or bookmark, a red 'delete' icon will appear on the right. Double clicking this icon will delete the category/bookmark. To undo this action, make sure to click 'Cancel'.

Before adding any new bookmarks, you need to first create a new category. To do so, click the 'New Category' button to the right of the 'Save and Close' button on the bottom and enter the category name into the input. Then click 'Add'. You have now created a category!

Migrating over to StackMarks™

Want to use StackMarks™ while keeping your previous bookmarks? Go to the bookmarks tab of your profile (e.g, https://stackoverflow.com/users/14251221/spectric?tab=bookmarks) and click the '+StackMarks' button beside the heading:

enter image description here

Select the category you wish to save the bookmarks in, then choose the bookmarks to save (take note of the 'Select all' and 'Deselect all') buttons:

enter image description here

Adding bookmarks to a category

Just like traditional bookmarks, there will be an icon beside the post which allows you to bookmark it. It should look like this:

Once you click it, you will be prompted with an add new modal:

enter image description here

The title is what you will see in the dashboard. It is by default the title of the question. Notes can be used to quickly remember why you made the bookmark in the first place.

Make sure to include a title. If you don't, you probably won't be able to click the link in the dashboard ;)

The notes are optional. Make sure to select a category (not done automatically). then click 'Add'.

Viewing the result after adding

Once you've added a bookmark, reopen the dashboard. Note that if you added a note, an [N] icon will appear beside your bookmark. To view this note, hover over the item:

enter image description here

Search

The search feature is pretty self-explanatory. When you enter into the search field, results are displayed as you type. When you search, all collapsed categories are uncollapsed and their names removed.

If you remove all the contents in the input field, the original view will be restored (e.g, categories collapsed, category names shown). Here's a preview:

enter image description here

The search checks whether the bookmark title or link includes your query.

Improve this question
9
  • 3
    I've tagged this for now "favorite" as we don't have a "bookmark" tag (yet). I'll check with the other mods to see if we do a rename or add a new tag and create a synonym.
    – rene ♦
    Commented Jun 8, 2021 at 5:10
  • 2
    An awesome userscript. Keep the great work. :)
    – Ghost
    Commented Jun 8, 2021 at 13:57
  • 4
    This is amazing work, and impressively thorough!
    – zcoop98
    Commented Jun 8, 2021 at 17:03
  • 1
    This is interesting and looks nice. Is it supposed to completely bypass the built in bookmarks features? Seems like it works as a standalone with no integration to existing unless I am missing something or perhaps next step is to start an integration?
    – charlietfl
    Commented Jun 9, 2021 at 12:59
  • @charlietfl As of right now it is standalone, but I suppose an 'import from bookmarks' feature would be nice. Thanks for the suggestion!
    – Spectric
    Commented Jun 9, 2021 at 13:11
  • 2
    What I have considered doing for some time is creating my own UI in the Bookmark section of profile that pulls in my bookmark data from the stack api and marries a categorization and notes system in localStorage. If your categorization modal was bound to the default bookmark icon rather than your own it would help move in such a direction. As a user with years of collecting them I currently have many pages of them in the current "dumb list"
    – charlietfl
    Commented Jun 9, 2021 at 13:13
  • 2
    @charlietfl Yes, that sounds like a good idea. I might consider releasing that as a major release (v2.0 ?)
    – Spectric
    Commented Jun 9, 2021 at 13:18
  • 1
    Just a heads up– by storing your scripts in separate version folders on GitHub, you defeat the update mechanism of your userscripts, which means that users have to manually reinstall the script each time there's an update. The beauty of version control is that you don't have to maintain separate version side-by-side, as your previous versions are always stored and available forever.
    – zcoop98
    Commented Jun 9, 2021 at 21:27
  • btw, do you have a separate source for those scripts? It looks to me like the names are already mangled thus making it harder to suggest a pull request with a feature/fix :)
    – 0Valt
    Commented Jun 10, 2021 at 9:46

6 Answers 6

Reset to default
4

How do you remove a bookmark from a StackMark category?

Presumably I should be able to click the red trashcan to remove an entry, but it currently (v1.4) appears at the top right of the box where I can't reach it:

Animated gif showing that the trash icon is impossible to click

Improve this answer
1
  • 2
    This bug has been patched in v1.4.1
    – Spectric
    Commented Jun 9, 2021 at 21:12
3

Please do not use Ctrl + Shift + K as Keyboard Shortcut. In Firefox, When you click Ctrl + Shift + K, it opens developers tools console.

Check Firefox Shortcuts Documentation, Go to Opening and closing tools > Open Web Console.

Screenshot:

Preview

Bug (When you press Ctrl + Shift + K):

Preview

Improve this answer
1
  • 2
    Patched in v1.4.2 - users have now the option to use Ctrl + Shift + K or Ctrl + Shift + Y.
    – Spectric
    Commented Jun 10, 2021 at 13:22
2

Edit categories name.

I can delete categories but also I want to edit name. So my proposal is to edit categories name as you might write them wrong or you want to change name later. and the button will be here:

Preview

Simply beside delete button.

Improve this answer
2

Make it works in Stack Apps Exchange. Your userscript works on Stack Overflow but doesn't work in Stack Apps Exchange, so I prefer to use:

// @match       *://*.askubuntu.com/*
// @match       *://*.mathoverflow.net/*
// @match       *://*.serverfault.com/*
// @match       *://*.stackapps.com/*
// @match       *://*.stackexchange.com/*
// @match       *://*.stackoverflow.com/*
// @match       *://*.superuser.com/*
// @exclude     *://api.stackexchange.com/*
// @exclude     *://blog.*.com/*
// @exclude     *://chat.*.com/*
// @exclude     *://contests.*.com/*
// @exclude     *://data.stackexchange.com/*
// @exclude     *://elections.stackexchange.com/*
// @exclude     *://openid.stackexchange.com/*
// @exclude     *://stackexchange.com/*

It will be great for users who have bookmarks in Stack Apps Exchange.

Thanks for this answer.

Improve this answer
1

The problem is caching text in the categories name input, Like I have created a new category with name "Test", so when I create new category, I see "Test" is printed in the categories name input like so:

Preview

Improve this answer
0

I have found this bug while I want to bookmark something.

I am using Windows10 - Firefox 89.0.1.

Bug

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .