Improve readability of console output about dev-proxy HOT 28 CLOSED

Option 8

Inverted labels

Warp:

Built-in VSCode terminal:

Terminal:

cmd:

from dev-proxy.

Right now, my thinking goes towards:

• banded output (rather than assigning an ID for each request)
• icon mode with icons Nerd Font or ascii icons with whole lines colored (option 1)
• text mode following option 8

Rationale:

• banded output allows you to directly see to which request each message relates, without having to scroll back and match the ID to a URL
• when you start using the Proxy or you don't use it that often, the different icons could be cryptic, so text mode is self-explanatory
• after you've used the Proxy for a while, you might want to condense the output and use icons instead of text labels
• if you care about your terminal experience, you likely have a Nerd Font installed and we should use it when possible to give you a great experience
• if you don't have Nerd Font, ascii icons are the next best thing

🙋‍♂️ Thinking of it, should we combine option 8 (text labels) with option 1 (icons) so that you can start getting used to icons and at some point remove the text label?

from dev-proxy.

Great work on producing these options!
I really like 1 & 8.

from dev-proxy.

I like it!
We do need to ensure that we use some iconography as well as color for the different types of messages we're outputting for accessibility reasons.
Open question for this, can we find enough text icons in the default character sets across Windows/Linux/Mac or do we need to have the users install a nerdfont?

from dev-proxy.

Great suggestion @waldekmastykarz a clearer output will really help.

can we find enough text icons in the default character sets across Windows/Linux/Mac or do we need to have the users install a nerdfont?

I think we should stick to using text icons and colour coding, but we could also check to see what the emoji support is across the three OS as an alternative to text icons.

from dev-proxy.

I suspect the lowest common denominator will be cmd on Windows or remote sessions when using the proxy in a container. Let's propose a few designs through a simple console app that we could run across the different terminals to verify it's working as intended. If we choose to use something based on an optional dependency like nerdfont then we should give folks an option to have a readable output without it.

from dev-proxy.

Here's how the output could look like with Nerd Fonts:

The key part is that user must be using a non-Mono Nerd Font, because for Mono fonts icons are illegible.

Here are some alternative icons that we could consider:

from dev-proxy.

Loved option 7 & 9. Great thread everyone. I came to the repos to suggest readability. So glad to see the maintainers are already thinking about.

from dev-proxy.

Option 4

Emoji icons with colored text

Warp:

Built-in VSCode terminal:

Terminal:

cmd:

from dev-proxy.

Definitely Option 8 because it's the most explicit and easy to follow with the eyes

from dev-proxy.

Thank you for your opinion and the reasoning @tmeckel 😊

from dev-proxy.

Hey @waldekmastykarz your ideas are great, I don't know if I can improve them, if I may add, I would suggest using the Nerd Font for the icons, we would gain more "real state" in the output and I guess, a better visual representation, I've been using Oh-My-Posh for quite some time now and it was the first thing that came to my mind when I was reading your suggestions.

from dev-proxy.

To be honest, the same thought crossed my mind, and for that reason I think the NerdFont should be an optional thing since it is a +1 (I can't agree more with you) - not everybody will want to go this route if NerdFont is a requirment, I think for devs like myself that live on Terminal screens + Visual Studio Code plugins, having a tool that embraces the current Windows Terminal is a big advantage.

if we could have an option for "settings" we could define our own "icons", then the output would be rendered according to what we are using (NerdFont or not), under whatever I'm using classic MS-DOS Prompt, Linux Terminal, or Windows Terminal + NerdFont + Oh-My-Posh as example.

from dev-proxy.

I'm intrigued, both options are really good, I guess testing will determine which one is the best when troubleshooting things in a dev/production environment - just one question, like before when I commented about having some sort of "settings" - option, if you are aiming to incorporate, these two options are good candidates in your "settings" - just think about it.

from dev-proxy.

Right now, my thinking goes towards:

• banded output (rather than assigning an ID for each request)
• icon mode with icons Nerd Font or ascii icons with whole lines colored (option 1)
• text mode following option 8

Rationale:

• banded output allows you to directly see to which request each message relates, without having to scroll back and match the ID to a URL
• when you start using the Proxy or you don't use it that often, the different icons could be cryptic, so text mode is self-explanatory
• after you've used the Proxy for a while, you might want to condense the output and use icons instead of text labels
• if you care about your terminal experience, you likely have a Nerd Font installed and we should use it when possible to give you a great experience
• if you don't have Nerd Font, ascii icons are the next best thing

🙋‍♂️ Thinking of it, should we combine option 8 (text labels) with option 1 (icons) so that you can start getting used to icons and at some point remove the text label?

I really like option 1, 7 and 8 are equally good also

from dev-proxy.

🙋‍♂️ Thinking of it, should we combine option 8 (text labels) with option 1 (icons) so that you can start getting used to icons and at some point remove the text label?

I love this approach, 💯 in agreement with you.

from dev-proxy.

Looks awesome guys, I like nerd fonts, but it does not make it clearer perse. I'd say: just text labels (8) by default, and allow a configuration option to change to icon mode.

Fully in favor of the banded idea as well. 🤙

from dev-proxy.

In the following comments I added screenshots of some ideas so far. Use 👍 to vote on your preferred format. For reference, here's how we should output currently:

Additional info

Warp and Built-in VSCode terminal are captured on macOS Ventura. Terminal and cmd is a default setup on Win11.

What I find interesting that cmd isn't consistent in how it's showing the different characters. Sometimes it shows the bent arrow correctly but sometimes not, while it's the same character that's been copied and pasted. If we care about cmd support, then we could use → instead of ↪ which seems to be displayed in cmd just fine.

from dev-proxy.

Option 1

Colored ASCII icons and text

Warp:

Built-in VSCode terminal:

Terminal:

cmd:

from dev-proxy.

Option 2

Colored ASCII icons

Warp:

Built-in VSCode terminal:

Terminal:

cmd:

from dev-proxy.

Option 3

Inverted ASCII icons

Warp:

Built-in VSCode terminal:

Terminal:

cmd:

from dev-proxy.

Option 5

Indented

Warp:

Built-in VSCode terminal:

Terminal:

cmd:

from dev-proxy.

Option 6

Colored labels and text

Warp:

Built-in VSCode terminal:

Terminal:

cmd:

from dev-proxy.

Option 7

Colored labels

Warp:

Built-in VSCode terminal:

Terminal:

cmd:

from dev-proxy.

Option 9

Short color labels

Warp:

Built-in VSCode terminal:

Terminal:

cmd:

from dev-proxy.

Thanks for chiming in @MrDrSushi. That's a great idea, like you mentioned, to get some more screen estate back. The only limitation I see is that not everyone might have the font installed, so we'd have to build it as a +1, where we have a baseline symbols that work for everyone. That said, do you have suggestions for icons to use for the different types of messages?

from dev-proxy.

if we could have an option for "settings" we could define our own "icons", then the output would be rendered according to what we are using (NerdFont or not), under whatever I'm using classic MS-DOS Prompt, Linux Terminal, or Windows Terminal + NerdFont + Oh-My-Posh as example.

A good way about it would be for us to offer a binary switch for NerdFont on|off. If it's disabled, you get whatever works fine in the lowest common denominator. When it's on, you get default icons from us. On top, we'd offer the ability to customize with your own icons. How does that sound?

from dev-proxy.

We're refactoring the proxy to separate its core/runtime from the different features. This will allow us to organize the code better and allow others to add custom functionality #58.

We noticed, that this causes the different messages to run out of band:

To address this, we're thinking about two approaches:

1. To every captured request, assign an ID and prepend it to each message we log. This would look a bit like this:

While the output is condensed, it requires you to look up the URL for each ID which could be cumbersome if you have an app that issues many requests.

2. To every message append the context URL:

We use bands to group the related lines together and for each message you can quickly see to which request it applies. The downside is that it expands the log with the request method and URL for each message we log.

It would be great to hear your thoughts

from dev-proxy.