paint-brush
Stone Soup and Super Power 🦸‍♂️by@AgrawalAnanyaa
182 reads

Stone Soup and Super Power 🦸‍♂️

by Ananya AgrawalJune 9th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Ananya Agrawal is the founder of Super Power, a chrome extension that allows editing CSS directly on the website without even opening console. He recently read The Pragmatic Programmer — By Andy Hunt and Dave Thomas. Super Power is a Chrome extension that empowers developing static websites directly from the browser. It took a long discussion and heated argument to come up with the way to do this. We devised a way to commit these changes and pull other person’s changes. We won Prototype 2019 (Headout)

People Mentioned

Mention Thumbnail

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - Stone Soup and Super Power 🦸‍♂️
Ananya Agrawal HackerNoon profile picture

I recently read The Pragmatic Programmer — By Andy Hunt and Dave Thomas. The book introduced me to the Stone Soup story which is as follows.

Stone Soup🍜
The three soldiers returning home from war were hungry. When they saw the village ahead their spirits lifted — they were sure the villagers would give them a meal. But when they got there, they found the doors locked and the windows closed. After many years of war, the villagers were short of food, and hoarded what they had. Undeterred, the soldiers boiled a pot of water and carefully placed three stones into it. The amazed villagers came out to watch. “This is stone soup,” the soldiers explained. “Is that all you put in it?” asked the villagers. “Absolutely — although some say it tastes even better with a few carrots….” A villager ran off, returning in no time with a basket of carrots from his hoard. A couple of minutes later, the villagers again asked “Is that it?” “Well,” said the soldiers, “a couple of potatoes give it body.” Off ran another villager. Over the next hour, the soldiers listed more ingredients that would enhance the soup: beef, leeks, salt, and herbs. Each time a different villager would run off to raid their personal stores. Eventually they had produced a large pot of steaming soup. The soldiers removed the stones, and they sat down with the entire village to enjoy the first square meal any of them had eaten in months……

This story made me rethink how we made Super Power🦸‍♀️, a chrome extension that empowers developing static websites directly from the browser.

Check the CSS of any element you hover over, instantly, and copy its entire rules with a single click. To copy the CSS…superpower.launchaco.com

On 27th September 2019🔖 a Tweet about document.designMode got viral and marked the beginning of Super Power🦸‍♀️.

When I first came across this tweet I got excited about it and shared it with Gautham🕵🏻 saying it is like getting `Super Power` and discussed the possibility of making something on top of it in the upcoming hackathon. To which Gautham🕵🏻 suggested having a way to play with all the CSS properties similar to this🤯.

Then came the hackathon day where I🙋🏻, Arsh🧔 and Siddhant👼 planned to make:

1. Super Power🦸‍♀️ (everybody was kind enough to let me name it Super Power only 😛), a chrome extension that will allow editing CSS directly on the website without even opening console.

While we were executing this plan of ours and talking to people around us, someone suggested having an ability to

2. Copy the changed CSS and inserting it into our code on editor.🐣

During the mid evaluation, to our utter surprise judges showed a great interest in the idea and Pranjal👨🏻‍🎓 told that it will be really great if we could devise a way of

3. Versioning the changes done using Super Power. 🐥

It took a long discussion and heated argument to come up with the way to do this.
We devised a way to commit these changes and pull other person’s changes. Siddhant👼 implemented it while Me🙋🏻and Arsh🧔 were sleeping joining 8 chairs each.

With this came the end of hacking time and during the final evaluation, judges suggested to maybe add functionality to

4. Allow adding commit messages. 🐤

We managed to add this functionality before the final presentation.

And we won Prototype 2019 (Headout) 😍

This story of Super Power🦸‍♀️ is parallel to the Stone Soup Story🍜 quoted at the top. While we started on with just a document.designMode what we got at the end was something completely different. It took a lot of small contributions from our surrounding to came up with the Super Power🦸‍♀️ we have today.

Here’s a demo video showing why what Super Power can do 😛

Thank you for reading. If you like the article give it a clap 👏

ABOUT ME:

I am Ananya Agrawal. I am currently pursuing my B.Tech at IIIT Allahabad. I would really love to talk to you if you are a budding programmer like me so please reach out to me via https://twitter.com/AgrawalAnanyaa.