In 2022 I asked myself, what if my manager could leave comments for me directly on the live website for all the website edits instead of sending bunch of screenshots and videos...
This is how I started with an idea of a "simple" browser extension that allows you to leave comments on any site, anywhere on the screen.
Spoiler, it was not SIMPLE
There were multiple steps where I though this is almost impossible:
1. I didn't know how to always attach the comment to the correct HTML element on the screen, I couldn't just use X/Y positions since then it wouldn't be responsive. Currently I have 4 ways I try to find the correct element. I use element's IDs, class , outerhtml and attributes. It works correctly in 95% of cases. P.s. Do you know any other ways to find the correct element in the DOM?
2. Not being able to use any 3rd party library for extension development since it is just pure HTML, CSS and JS... You can't even use scripts from CDN. I had to manually build a text editor which was one of the most painful things I had to.
3. Making it real time was another big pain. Extensions background page gets deactivated when not used, which means it is literally impossible to maintain a socket connection. But I was able to write a code that wakes up the background page every time it goes to sleep and connects the socket again.
I stopped all of my freelance projects and now me and 3 other people work on this tool full time, we recently became #1 on Product Hunt: "https://www.justbeepit.com/"
There are still many issues we are trying to solve such as using it on iFrames or inside scrollable objects, etc.. but we are tackling these issues one by one.
It seems a good way for the user to highlight what changes he wants. But, is it easy for the creator to identify what each user wants? it seems complicated
Instead of beep I can take a screenshot, use the built in annotation tools easily accessible in my screenshot software to add highlights and notes, paste the screenshot into the chat window that I already have open to the relevant individual or team.
Not the person you’re replying to but CleanShotX [0] is my favorite tool for this. Yes macOS has improved their screenshot annotation tools but they suck compared to CleanShotX. I take way more screenshots now to covey information and it’s invaluable to quickly explain a UI. I make guides for work or my clients with it all the time. I use it to highlight the button they need to click, label “1”, “2”, “3”, for the order of operations, pixelate data that isn’t important or I want to hide, and more.
Yes I could open the screenshot in a photo editor or similar but it’s so quick to do in CleanShotX that in literally less than 5 seconds I can: take a screenshot, highlight what I’m talking about, and have the image sent off to my coworker. Being so fast it reduces the friction to 0. I highly recommend it.
A simple features list and a short "how it works" on the site would be nice, the homepage is not great in my opinion: zooming breaks it, some parts of the text just having a different harder to read font, a bunch of videos overlayed on top of eachother, for some reason only a part of the site has a custom cursor
Product and extension look pretty decent, haven't tried it though but I have seen similar ones which integrate with Jira, Trello, etc. to automatically create tickets, unsure if this one does it, might be worth looking into it if not
13 comments
[ 4.9 ms ] story [ 43.4 ms ] threadThis is how I started with an idea of a "simple" browser extension that allows you to leave comments on any site, anywhere on the screen.
Spoiler, it was not SIMPLE
There were multiple steps where I though this is almost impossible: 1. I didn't know how to always attach the comment to the correct HTML element on the screen, I couldn't just use X/Y positions since then it wouldn't be responsive. Currently I have 4 ways I try to find the correct element. I use element's IDs, class , outerhtml and attributes. It works correctly in 95% of cases. P.s. Do you know any other ways to find the correct element in the DOM?
2. Not being able to use any 3rd party library for extension development since it is just pure HTML, CSS and JS... You can't even use scripts from CDN. I had to manually build a text editor which was one of the most painful things I had to.
3. Making it real time was another big pain. Extensions background page gets deactivated when not used, which means it is literally impossible to maintain a socket connection. But I was able to write a code that wakes up the background page every time it goes to sleep and connects the socket again.
I stopped all of my freelance projects and now me and 3 other people work on this tool full time, we recently became #1 on Product Hunt: "https://www.justbeepit.com/"
There are still many issues we are trying to solve such as using it on iFrames or inside scrollable objects, etc.. but we are tackling these issues one by one.
Instead of beep I can take a screenshot, use the built in annotation tools easily accessible in my screenshot software to add highlights and notes, paste the screenshot into the chat window that I already have open to the relevant individual or team.
Yes I could open the screenshot in a photo editor or similar but it’s so quick to do in CleanShotX that in literally less than 5 seconds I can: take a screenshot, highlight what I’m talking about, and have the image sent off to my coworker. Being so fast it reduces the friction to 0. I highly recommend it.
[0] https://cleanshot.com
Product and extension look pretty decent, haven't tried it though but I have seen similar ones which integrate with Jira, Trello, etc. to automatically create tickets, unsure if this one does it, might be worth looking into it if not