Recently I came across the following WorkFlowy question on Twitter:
Twitter is great for getting to the point, but often one might come across as unloving, uncaring and unsympathetic. This post is quite the opposite… it’s loving, caring and sympathetic toward those who’d like to simplify their link life in WorkFlowy. Perhaps a tad more minimalism would be in order for some – and I don’t think an embedded-link dynamic is necessarily a cure-all. In fact, I think the WYSIWYG (what you see is what you get) modus operandi we currently have is just perfect.
There’s something for everyone in this post. Let’s get to it…
WYSIWYG
Personally I like to see the entire construct of hyperlinks, just the way they are… but if you feel they clutter things up for you, here follow an assortment of tips to tame your links:
1. In the 2nd line of a note
I do this a lot. Pop your link into the 2nd link of a note. The link remains hidden until you tap/ click on the 3 dots: the note expands to reveal your (clickable) link:
2. Nested in a child list
I sometimes do this, especially if a tag index is involved – like in this shared list of all WorkFlowy blog posts:
In fact, in the above example, there’s no reason why the hyperlink could not go in the 2nd line of the note. Either way, I like to pop in a guillemet at the end of the line to indicate that there’s a link (or extra information) tucked away in a note or a child list:
3. Clip to WorkFlowy
One click of rawbytz’s Clip to WorkFlowy extension (or bookmarklet) copies both the tab title and URL of a site to the clipboard in one go, ready to paste into WorkFlowy:
A site’s tab title goes into a WorkFlowy list title… and the hyperlink into its note. Now if you wanted to clip an internal WorkFlowy list to link to elsewhere, Clip to WorkFlowy neatly packages your list title as a reference:
4. Link-shortening services
There are a handful of great services that can take monstrous links and give you a short-and-sweet link that takes you to where you need to go: ow.ly, bit.ly and goo.gl. I use bit.ly and, once again, tuck small lists away in notes. Here is how I might shorten a long-ish hyperlink (“MC” indicates that it’s a “MailChimp” URL):
Spice up your link life
These next 4 tips involve the Stylish extension. If you’ve been following the WorkFlowy blog over the last year, I’m sure you’ve at least heard of this beauty of a tool. If you’re a complete newbie, here’s a complimentary download of the entire chapter from my book.
5. Customize your link style globally
You may want your hyperlinks to stand out or look noticeably different from the rest of your text in WorkFlowy. Differentiation goes a long way in decluttering. You’ll have seen in all of the graphics thus far that I choose to style my links blue and use a font called “traveling _typewriter”. In your Stylish style, you’d only need to change those two pieces of information (highlighted below). If you’re new to this, don’t forget to download my Stylish chapter…
6. Customize your links by domain
In addition to a global link style, you can also customize your link styles according to their domain. Below you’ll see a screenshot of different colored links:
One can give different types of WorkFlowy links different colors. For instance, you can color shared and embedded WorkFlowy lists red and internal WorkFlowy lists purple. I color my Dropbox links green and WorkFlowy blog post links gold. All you need do is change up the domains and colors pictured in the following screen shot (You can change up other factors, but color is a good start)…
Here’s a shared list with the CSS code (courtesy of rawbytz)
7.1 Hide any part(s) of a link
I discovered that you can hide certain parts of a link… and the link will still function as it should. In the free chapter download, I walk you through how you can hijack WorkFlowy’s Underline span and do all sorts of things with it. Once again – originally a rawbytz brainchild. For this next hack, we’ll hijack the Underline+Bold+Italic combo to make certain parts of a link “disappear”. Let’s take my long-ish Dropbox link of a PDF download and see how we might simplify it:
All I do is hide the parts of the link I don’t want to see by Underlining+Bolding+Italicizing them. As you can see, the final link still works as the download goes into effect the moment I click on the remaining, trauncated link.
Naturally, there are multiple options at our disposal for truncating links this way. A couple more examples…
You could keep as much or as little of the beginning of the domain name. Remember, I’m not deleting anything, I’m hitting Ctrl+U,B,I:
We could also add a “www.” just after the “https://” and hide everything else. That gives us a clickable “www” link, which we can add a reference to if desired:
Here’s the CSS code you might want to install as a standalone style.
7.2 Name your own link
Following the advice here, here and here (Layne, Frank and rawbytz), you can append “?Your_Description_Here” to your URL and hide everything from the “?” back to get descriptive links like so:
* If you want to create your own links with a saved search, substitute the “?” with a “#”.
If you want to get “spaces” between words, include underscores: “Twitter:_WorkFlowy_Search”. You can take it a step further and make those underscores transparent by including this code in your Stylish style (and Underlining+Italicizing the underscores):
span.contentUnderline.contentItalic {
color: transparent !important;
}
8. Truncate long links to 250px
Copy (and create a standalone Stylish style with) the code in this comment by @nameanyone to truncate all your links to a maximum of 250 pixels long. When you hover over the links, they stretch to their actual length:
And that’s a wrap!
Do share any of your WorkFlowy link tips in the comments below. Pretty please with a cherry (or two) on top. 🍒
Get EXCLUSIVE bite-sized WorkFlowy updates: tips, tricks & news about FREE online workshops with Frank Degenaar. Sign up here.
So “embedded links” are not something you plan to work on anymore ? (https://workflowy.zendesk.com/hc/en-us/articles/203295805-Support-for-URL-s-and-customizable-web-links-Hyperlinks-) Is it too difficult ?
The solutions you suggest in this article won’t do it for me. Getting into Stylish (or Markdown) seems like too much work. I’m not very good with computers so what I like in Workflowy is the simplicity, the fact that anyone can use it. Embedded links would make the reading much easier, I hope you haven’t completely given up on it.
Thanks for a great app anyway !
I just thought of one teeny weeny little link trick that saves me time I thought I would add here. It only comes into play when you are split screening (i.e. two web browsers side by side). I do this quite often as I write formally a lot in WorkFlowy so I like to have my notes / thoughts in one browser and what I’m actually writing in the other.
Often your writing and your notes are in a similar place, and it’s a waste of time to navigate to that place twice (once in each browser). What can save time is either navigating once, and simply copying and pasting the address bar over to the other browser, or, right clicking on a bullet within that navigation pane (eg. ‘Formal Write Up’ bullet) and pasting that over to the other browser.
In general, I find right clicking on bullets, and copying the address over to my second pane handy / time-saving in quite a range of circumstances so keep it in mind any time you are split screening.
Anyway, as I say, it’s a tiny trick but if someone finds it saves a few seconds at some point, that’s cool 😉
Here is how I deal with links. They simply apear truncated when not hovered on.
/* Truncate a link when not hovered. */
.content .contentLink:not(:hover), .nameAnimated .contentLink:not(:hover) {
max-width: 256px !important;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom; /* because http://stackoverflow.com/questions/19362474/css-overflow-hidden-causing-text-alignment-problems */
white-space: nowrap;
display: inline-block !important;
}
A very elegant solution @nameanyone,
Works when copy pasting an entire outline to a Markdown text editor – even with inline image links visibly truncated. No interference when I hover over links to have the Imagus extension bring up an image preview. Impressive 🙂
Mmmm, this is nice, thanks!
If the target URL doesn’t have named anchors that conflict, it looks like you could add an ‘#’ and some text to the end of the URL and hide everything you didn’t want to show. That would give you more options for making the visible portion readable if the target’s name isn’t particularly helpful. For example, I could add “#website” to “http://peterson-peterson.com/” then hide the “http://peterson-peterson.com/#” portion leaving just “website” visible as a link. Perhaps there are characters besides ‘#’ one could add for a more general purpose solution.
Hi Layne,
Thanks for that… You can basically create an “embedded link” with exactly the word(s) you want:
One could go a step further and hide the underscores by hijacking, say, Underline+Italic and making them transparent… like so:
The end result, at face value, walks and talks like an embedded link.
I was reluctantly going to suggest this when I read the post. Reluctant, only because you need to test things out on a site by site basis. Generally speaking if the site already has a ‘#’ (fragment identifier) it’s probably a bad idea (like WorkFlowy for example!) An alternate is ‘?’ (query), using it the same method “?MyCustomLinkName”. Same guideline applies here… meaning neither will work with WorkFlowy searches.
Personally, I don’t think its worth the effort. I’m not terribly bothered by links in notes; big ones get truncated, and after playing with Dynalist’s implementation, I def not a fan of markdown as a “flowy” solution.
Thanks for balancing things out rawbytz. I’m with you on links in notes… and the un-flowy-ness of many an app in the category.
The problem with using # in WorkFlowy is the fragment is sticky. Keep an eye on your address bar, it doesn’t go away. ‘?’ seems to work better for WorkFlowy. You can make it work with WorkFlowy searches by doing a NOT search on your alias… if that makes sense! So your search box will look like this:
@mytagsearch -?My_Link_Name
Thanks rawbytz. That makes absolute sense. So using a “?” works perfectly for internal WorkFlowy links so that the appended text doesn’t stick in the URL. I’ve also found that with a couple of websites, “?” behaves itself. For the sake of “ease”, I’ve found that going back to “#” for saved searches (even though the fragment is sticky), does not hinder WorkFlowy navigation or search. The sticky appendage is cleared if you hit another saved search/ internal link which is not constructed with “#”, or else substitutes with a different fragment. Also, I’ve set up a tailor-made hotkey with PhraseExpress (Alt+H) which takes me to my home page by popping “https://workflowy.com/#” into the address bar. I use it often, so any fragments would be cleared (if I were to adopt this link-building method as my go-to). Also… WorkFindy clears fragements quite nicely 🙂
Thanks Frank, that last one in particular is a fantastic magic trick which I will definitely be employing for some of my permanent saved search links which clog up my screen. I like the idea of tiny url etc for shortening links, but sadly they won’t work offline anymore which is no good for me, but probably fine for some.
Perhaps #7 for some of your saved searches, preceded by a Unicode symbol of some sort (magnifying glass?)…
I’m not sure whether it’s a Windows or Chrome update… but recently I’ve become disenchanted with the new, revamped colored Unicode symbols. They used to be black, which was a good match for me. I don’t really want emojis in WorkFlowy. Who knows, I might warm to it one day…
Fwiw, the colored unicode seems like it’s browser specific. My WF list of unicode symbols renders in color on windows FF and Chrome, but on MS Edge it’s in black and white.
Yes, that’s a nice idea! I am having mixed feelings about the new unicodes too .. sometimes colour is nice, but these are a little cartoonish. Have you ever played with the idea of unicodes as tags with a phrase express macro?
Problem is that Unicode symbols are not clickable like tags. But here’s an interesting piece of CSS that you can play around with, which adds any Unicode symbol of your choice to a tag:
.contentTag[title*=“YOUR_TAG_HERE”]::after {
content: “ \1F304 ”;
position: relative;
}
Above, you can see that I set the unicode symbol to appear ::after the tag. You can have it appear ::before if you wish. You can also add a background color to the tag, which will include the symbol.
You can Google the code (content) for each symbol.
Notice the space before and after the symbol code. Those separate your Unicode pictograph from the tag text.
If you hide everything in a tag except the Unicode, you then get a clickable icon… but it’s too much work for it to be worth it for multiple tags/ instances.
Like you said, the icons now appear to be cartoonish:
Imagine my disgust when what used to be a perfectly aesthetic, black crescent moon (which I used to use)… now looks like a banana:
Thus ended my tinkering with Unicode.
Were you reading my mind? I was literally looking at ways to do this earlier this morning. Great post! Saved me the hassle.
Hey Richard, please to drop in again and tell us about any new additions to your workflow once you’ve had a chance to settle in.
Will do. I have a few ideas rattling around in this head of mine.