WorkFlowy Bookmarks and Bookmarklets: a Dead-Easy Setup for Your Favorites in Any Browser

blog-book-button

If you’re looking for a simple setup which lets you see your saved searches and bookmarked lists in a tree view… and you’re not up to figuring out text expansion app Hotkeys, then this post is for you.

We’re going to be taking a look at WorkFlowy bookmarks and bookmarklets, which require no more than a drag and drop to your browser’s toolbar. I’ll be throwing a couple of rawbytz’s incredibly useful one-click bookmarklets into the mix. I’d also like to show you a way to view a WorkFlowy-only set of bookmarks whenever you need them.

Look what the cat dragged in

Did you know that you can save any WorkFlowy list or saved search as a bookmark in your browser toolbar? Here are some plusses:

  • They’re accessible while in any of your WorkFlowy lists
  • They stay wherever you put them, in the order you put them
  • You can organize them in tree-based folders
  • You can rename them to whatever you like
  • They’re good to go in any browser of your choice

All you do is drag any WorkFlowy URL to your toolbar to create a new one. In the following GIF you’ll see an example of how to create a saved search bookmark: I search from my home page for all of the changes made to my account within the last minute, using the “last-changed:” operator. I then drag the resulting WorkFlowy URL to my browser toolbar and edit the name of the bookmark:

Last-changed:1 use case

No matter where I am in WorkFlowy, when I click on the newly created bookmark above, it will search from my home page for all changes made in the last minute. And, pray tell, why might I want to search for all changes made within the last minute from my home page??

Rawbytz put me on to this. And it’s really smart. I always have lists that I want to relocate from my home page to somewhere (much) deeper. Look at how I add an empty space to both my target and destination list. Both lists show up when I hit my new bookmark, making it a cinch to transfer my target list:

Growing pains

If you like the idea of quick-access bookmarks, you’ll probably start racking them up. So how to keep them organized – and your toolbar clutter-free? The obvious recourse would be to pop all of your WorkFlowy bookmarks into a WorkFlowy folder in your toolbar. But what if you want an easy-to-reach WorkFlowy-only space for WorkFlowy bookmarks? You’ll want to take a look at this…

Neater Bookmarks

Here’s a nice little discovery: There are dozens of bookmark browser extensions/ add-ons available for whatever browser you hang out in. The example I’m giving below is a Chrome extension called Neater Bookmarks.

  • This allows you to keep your bookmarks toolbar collapsed, while you activate your extension via a keyboard shortcut.
  • You get a popup panel with a tree-view of your bookmarks, expanded and collapsed just the way you last left them.

Above you can see, once again, how I make use of my last-changed:1 saved search bookmark.

rawbytz’s WFcount bookmarklet

Another great thing about the setup in this post is that you can now group your bookmarks and bookmarklets together in one place. A bookmarklet is like a bookmark that contains JavaScript code that acts upon the tab you currently have open.

Here’s rawbytz’s WorkFlowy Count bookmarklet in action. What I’m getting is a count of how many books I’ve sold in week 27. (WFcount can also count time!)

rawbytz’s WorkFindy bookmarklet

There is a chrome extension for WorkFindy, but rawbytz has also created a bookmarklet which you can take anywhere. This is what it does: No matter where you are in WorkFlowy, when you activate this bookmarklet, a popup window will appear where you can enter your search phrase – for which it will search WorkFlowy globally.

In the below GIF you will see that if you highlight a tag, word or phrase before activating WorkFindy, WorkFindy will jump straight to the search from your home page:

Everything in moderation

Now I wouldn’t recommend that you go bookmark crazy. I’d reserve this setup for but a few specialized lists, saved searches and bookmarklets. Otherwise you’d be missing out on putting some other great navigational dynamics into practice. One such example: List Title Tags.


Get EXCLUSIVE bite-sized  WorkFlowy  updates: tips, tricks & news about FREE online workshops with Frank Degenaar. Sign up here.

6 thoughts on “WorkFlowy Bookmarks and Bookmarklets: a Dead-Easy Setup for Your Favorites in Any Browser

    1. A lot more could be learned from the comments section in all posts were people to share their M.O. and raise questions about a post’s content 🙂

  1. Thanks for the great tips! They are really helpful.
    On the side note, I liked the color blocks that you are using as shown in GIFs. Can you let me know what those are and what purpose do they serve?

    1. Hi Sumeet,

      The color blocks are stylized tags via the Stylish extension. Here’s a post where I talk about using tags for Life Logging : https://blog.workflowy.com/2016/01/14/lifelogging-tag-count/

      In some cases I just use color tags to visualize priorities. Here’s the code for some simple 3-character tags. You can pop this into Stylish and tag with #gr to get a green tag, #or to get an orange tag, etc.:

      /* GREEN COLOR TAG */
      [ title~=”#gr” ] {
      background-color: #04B404 !important;
      font-family: monospace !important;
      color: #04B404 !important;
      box-shadow: 3px 3px 3px #E6E6E6;
      }

      /* BLUE COLOR TAG */
      [ title~=”#bl” ] {
      background-color: #01A9DB !important;
      font-family: monospace !important;
      color: #01A9DB !important;
      box-shadow: 3px 3px 3px #E6E6E6;
      }

      /* YELLOW COLOR TAG */
      [ title~=”#ye” ] {
      background-color: gold !important;
      font-family: monospace !important;
      color: gold !important;
      box-shadow: 3px 3px 3px #E6E6E6;
      }

      /* ORANGE COLOR TAG */
      [ title~=”#or” ] {
      background-color: orange !important;
      font-family: monospace !important;
      color: orange !important;
      box-shadow: 3px 3px 3px #E6E6E6;
      }

      /* RED COLOR TAG */
      [ title~=”#re” ] {
      background-color: red !important;
      font-family: monospace !important;
      color: red !important;
      box-shadow: 3px 3px 3px #E6E6E6;
      }

      /* BLACK COLOR TAG */
      [ title~=”#bk” ] {
      background-color: black !important;
      font-family: monospace !important;
      color: black !important;
      box-shadow: 3px 3px 3px #E6E6E6;
      }

  2. last-changed is so great! I kinda wish it had a shorthand (lc: win anyone?) but i’ve set it as a starred and just modify from there. Great place to always track inboxes, homepage etc. However – I can’t believe there is an is:shared, embedded etc but no is:tagged? This would be phenomenal if used with -#tagname (- as shorthand for not a tag, does not work with non-tags obviously). Conversely, also noting AND and OR are not shorthanded to +#tag (as a reciprocal to the former). Why? Maybe – is easier than ‘not’ or maybe auto-activation from spacing is all one needs. Which it is, because it is indeed handier. Only a little strange to have one end of syntax work as expected, to find the other.. missing. Incorporated elsewhere. Granted, wouldnt have thought of it not having stumbed upon the negation-operator, earlier today..

    Back on topic, OR would be a trick to shorthand. What would best not set off all manner of troubles but stay within context, and ease? Pipe(|), ampersand(&), double pipe,.. all have their own fallings and character specific pros.

    Of course, workfowy’s simple but elegant ‘oneword’ syntax simplifies things. ie if you spaced out ‘- #tag’ you would get two search terms using AND instead. Combine this with the later (acknowledged and blogged about elsewhere here) conscious efforts of using ?? as a faux-tag and you have a number of interesting uses rear its head. Example case, I use == to quickly define new findings, especially terms. So say I encounter my own appropriated use of ‘faux’ in a context, long after my understanding has faded, can (consciously) search ‘== faux’ (order and lowercase not mattering, just checked) to locate the original explanation notes. Expanding on this, one can also utilize synonymous, even atonymous (though this may create too many false positives, better to separate into ‘hided’ child node) features of any normal thesaurus..!

    Other cases off the top of my head are the very markdown friendly >> for quotes (or even quotes within quotes), ** for empasised text, ratings and oon for when n is a number tracking something. There are certainly many more. (Always inviting examples! Noting also that I/anyone may use or ‘construct’ them differently) These are tags that are not really tags but not true words for context searching either. They tend to have a whole subsystem, differing as much as higher systems (tags folders searches, what else) do, depending on the individual. There is no right or one-size-for-all system because of it, but at least with workflowy, especially with its strangely flexible LACK of a tag editor, it always feels somewhat right now. Definitely fast.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s