Focus Point
Chrome ext. to keep the attention of your audience exactly on what you want to highlight. 6th vibe coded mini-app.
Promises are promises.
Nonetheless I am not a coder and have very little experience in programming, six months ago, in March, I took a challenge with myself to explore vibe-coding, for the sake of learning with AI, to produce a mini-app every month.
Today, I am giving birth to the sixth one: Focus Point.
Focus Point is a tool for anyone presenting, showcasing, demonstrating or teaching others through a computer screen. Whether in presence or at a distance, its only purpose is to highlight in a unique, but very effective way, anything you want to bring the attention of your viewers to.
You can use it with your son or a with student sitting next to you, in a classroom, at an event where you using a projector, in a live webinar, or when recording a demo or tutorial to be published on the web.
In the spirit of minimalist information design practices, Focus Point achieves its goal not by adding or applying something special to the content that needs to be highlighted, but rather by doing the opposite: by muting down everything else.
I got the inspiration to build this tiny mini-app by a now-defunct, turn-of-the-century software app for Windows PCs, that I used during my live, in person, training classes around 1995-2003. (The name of that application was MagLens and it was part of a small suite of four programs called Milori Training Tools.)
What I Have Learned By Creating It
(which you can take home)
This time around, the big lesson was only having a lot of patience.
Now that Bolt makes it super-easy to have an always updated version of your code on Github, while allowing you to step back to any point of your code development, the only obstacle was the AI itself.
Surprising but true, the Claude AI engine powering Bolt, it’s not always at ease even in situations like these, where apparently the features are very limited and there are not many variable to control. It may also be that my prompting has still margins for improvement, but still, I had to spend quite a few hours more than I would have expected to arrive at the present version.
The key points where the code generator stumbled where essentially two:
a) making the very basic feature work (this took a long time, though the AI had perfectly understood what I wanted, each release it provided had some problems and in many instances it just wouldn’t do what it was meant to).
b) enabling a working keyboard shortcut. I thought this would have been kid’s play, but again Claude/Bolt stumbled on it tens of times. Either the shortcut wouldn’t work, or it would conflict with some other existing one, and so, just to find a key combination that would work it took a good one hour.
This is why I say that the big lesson was in the end to be very patient, and to insist in asking what I wanted, while pointing out to the AI, the silly choices it was making.
As a matter of fact I caught it creating code or images we didn’t need at least three times. A ton of paid tokens went wasted each time the AI, realized it had been going on a dead-end street and realized, it had to restart coding the app from zero.
Something that I learned this time, and which did help troubleshoot many of the obstacles we encountered, was to become aware of Chrome Developer Tools. Being a non-technical person I really never used it this facility, but since AI itself asked me if I could take some screenshots of the messages appearing in the Developer Tools console, I learned how to rapidly access this space and started sharing with the AI whichever relevant messages appeared there.
That helped a great deal in zeroing on what was not working and taking the necessary countermeasures.
N.B.: Unlike the other four previously released mini-apps (WebPage TimeDetector, CCPD Video Finder, Personal Tab and Cape Canaveral), these last two mini-apps, Focus Point and Reading Time Calculator, are both accessible by everyone.
What You Can Do With It
Focus Point is for anyone who, from time to time, needs to present, highlight, showcase, teach or demonstrate, either in a live setting or online, content or images displayed by a computer.
The key benefit is its ability to constrain the visual attention of your audience to any specific area of the screen you deem relevant.
Focus Point achieves this by darkening and blurring everything outside of a customizable area that you can define on your screen. Once you have drawn your focus area, the only stuff that remains visible on your screen is whatever is inside of it. Everything else is darkened and blurred.
The Focus Point area can be easily resized and repositioned on the screen in real-time, so that you can go over different parts of your screen content highlighting only the elements that you want focus on.
How To Use Focus Point
Here’s a short video tutorial (<2 mins) showing you how to use Focus Point.
Download and Install
To install Focus Point Chrome extension just follow these steps or look at the short video tutorial I have created for you.
1) Create a folder on your computer. Name it Focus Point.
2) Click on this link to download the Focus Point Chrome extension. In the Dropbox page that opens click on the top right on Download.
4) Save the .zip file inside the Focus Point folder and then double-click the .zip file to uncompress it.
6) On your Chrome browser address bar type chrome://extensions and press Enter. Make sure that on the top right of your screen you’re set on Developer Mode
7) On the top left of your screen click on Load Unpacked. In the dialog window that opens find the Focus point folder. Click on it once and then click the Select blue button on the bottom right.
8) Now the Focus Point Chrome extension will appear in your list of installed Chrome extensions. To make the extension visible and clickable at all times, click on the Extensions icon displayed on the right side of the address bar, locate Focus Point and then click the pin icon next to it.
Video tutorial (3 mins) that shows you how to install Focus Point.
I hope you will find Focus Point useful.
Suggestions, comments, critiques are all very welcome. I am here to experiment and learn.
from Koh Samui (Thailand)
Robin Good
