Inspiration
Mindful of how delicate, unique, and valuable the Earth is, we think every drop of effort or ignorant negligence counts. If the negative impacts of CO2 emissions immediately manifested themselves, we would not have let our planet approach its tipping point before seriously fighting climate change. So much CO2 now litters the atmosphere and our oceans that only a bit more — perhaps what could be produced in this decade — will send our planet into a coma from which only substantial carbon-negative technologies, expensive artificial sunlight mitigation, or millions of years of natural processes could save it. Therefore we must look to every corner of human activity to conclude our carbon-producing practices, including web technology. This is why we created Swampy, a two-part (website and Google Chrome extension) effort to let users know of the price of normal activities such as loading Google.com.
What it does
Using the "Website Carbon" website-environmental-impact API, we created a website that would take in any URL a user would input and display a batch of condensed, critical information about the carbon footprint that loading that website had (this API considered factors such as the host server of the website, their energy source, and time to load). We also had the ambition of also considering the light emitted by the screen of the website (with darker websites saving energy as blue and white websites wasting the most). The Chrome Extension component consists of a button that harmlessly converts the background colors of the current website to a dark energy-saving green as well as an algorithm that collects every URL loaded by the user, to be used for a calculation of their digital carbon-footprint on that session of browsing. There is a "Results" HTML page accessible through the extension that displays the list of URLs, offers the option to reset the list, and calculates through the same API the carbon footprint of the user (these last two are being debugged).
How I built it
There are 2 parts to Swampy; the website and the Chrome extension. The website is made with HTML, CSS, and JavaScript, with the help of JQuery and Ajax. The website uses an API to retrieve how much a given website produces carbon. The extension is also like a website, but build in a different fashion. Most of it is in JavaScript, and followed Google’s requirements.
Challenges I ran into
We had a lot of trouble with CORS and Origin Access policies. We wanted to incorporate more APIs to enhance the web experience, but we got errors about CORS and how it blocked the transmission to the API. We searched for a while and could not find a solution. We also utilized the Cors NPM package, which is supposed to unblock the CORS issue from happening, but it did not all the time. Google extensions also places many limitations. We could not even use JQuery nor Ajax to make the API requests, so we had to spend a lot of time on a seemingly small problem.
Accomplishments that I'm proud of
The most impressive thing we thought we did was the time we spent ideating on the first night and the first half of Saturday. Instead of just jumping at a half-baked idea that might not have been our best, we engaged in debate and came to the area of environmental awareness and protection. That first night of ideating allowed us to reach the best idea we collaboratively had as well time to get to know each other a bit more before coding.
What I learned
We learned that it is okay to sacrifice some time for the sake of knowing that you are going in a well-chosen and good direction. Sometimes, as engineers, we are inclined to start building something instead of consciously planning its general idea and execution of the plan. By having the patience to plan and make sure we were building something worth using by people, we were securing that this Hackathon was the best possible experience all of us could have.
What's next for Swampy
Getting more data points to make rating websites even more accurate.
Log in or sign up for Devpost to join the conversation.