This is a submission for the GitHub Finish-Up-A-Thon Challenge
What I Built
Style-sight, formerly rmrf-css(😒 Meh, lame name;didn't intend to make that rhyme), is a live-previews based, intuitive web service for purging unused styles, testing and downloading the exact CSS for all stylesheets used on a webpage.
It works as a proxy server that mirrors websites(that can't be completely legal, can it?) for the sake of auditing their CSS only! 🫰
With recursion too; that is trimming and adding styles from other webpages visited under the same domain! 😉.
Don't believe its mirroring powers? Check out a "Google.com" mirrored through the web service
WARNING: only visit this link above in a browser you aren't signed in to Google on to avoid risking being logged out
Where It Started
rmrf-css was a MVP I built about two years ago as a solution to the need for a UI-based accurate detection and download of unused styles, among others, from the CSS of webpages online.
I used it on websites I built with TailwindCSS when deploying to production.
It is immortalized with no future updates on 
at https://rmrf-css.vercel.app
What It Meant
The idea of purging unused styles from existing websites is in much need but rmrf-css couldn't solve pain points of aggregating styles across pages despite it including selector strings present in scripts in it analysis.
It needed to be of more value to other people aside me to truly sell
And so the idea of a web service with:
- live previews when purging styles from webpages
- aggregating styling across pages for a wider coverage of trimmed styles was born as a potentially viable SAAS in my mind(Not to toot my horn but the cool name - StyleSight, came pretty later after some trials)...
Demo
StyleSight, hosted with ❤️ on Render at: https://style-sight.onrender.com
Availabile on Github at: https://github.com/ogbotemi-2000/style-sight
The Comeback Story
TL:DR; The idea didn't first work as expected but the innovation of proxying websites into iframes was verified through it.
I had long since known that servers do not enforce CORS when communicating between each other so I always move website proxying logic to the server in my past trials
Cloudflare Worker Approach
I abandoned rmrf-css on GitHub(sorry, the repo contains some out-of-context files and folders; will remove them soon) and tried an approach of loading webpages through a Cloudflare Worker proxy in iframes and reading them as ELTAI.
It flunked, I decided, since it couldn't proxy Google.com even when it occasionally proxied Github with an idea to extract data from webpages, transform and/or load it into a database as a web-based ELT pipeline.
My Experience with GitHub Copilot
Creating a Proxy Sever
The Node.js proxy server crafted by Copilot in less than two minutes after my prompts worked at once and dwas in no way inferior to the one I built for ELTAI above as a Cloudflare Worker which took me more than a few hours to get to work properly
Fixing Previous Gotchas
Issues with relative URLs and same-server API requests which took me days and some head-banging to fix in my Cloudflare Worker project were done by Github Copilot, via my assistance and guides, in minutes.
The best part? I still had issues despite my fix because I couldn't bring myself to refactor the code to consider cookies which affect page load for sites like Google.
However, Github Copilot could do that in minutes via my prompt thereby making my development far easier.
Making it Production-Grade
Github Copilot even suggested to me that the code isn't secure and efficient for online use and went on to refactor it after I had asked it to convince me why such security patches are needed and allowed them thereof.
Quicker Development Time
The UI was hand-crafted by me in vanilla JavaScript and HTML with tailwindcss v2.2.19 raw CSS file.
This was sdone for the sake of speed and clarity in the logic of tied loops for reading and analysing stylesheets and pages of proxied sites.
However, the server was bootstrapped by Github Copilot and that quickened my development time.
I became aware of this challenge on the 29th of May and had a complete server before the next day through Github Copilot. I spent the days up until the 4th of June brainstorming UI ideas, prototypes and state algorithms for the web service to make the UX easy and straightforward while being powerful for both mere mortals(😏 hehe) and developers
I couldn't have remade rmrf-css into StyleSight in the few days it took me without Github Copilot assistance.
I plan to roll out this idea as a SAAS so watch out for it!
Top comments (0)