Both of the April DEV challenges are antithetical to Earth Day.
Here's why:
Background
In case you missed them, there are 2 April challenges that just ended:
Websites are unnecessarily BIG and consume TOO MUCH energy.
The Internet currently consumes roughly the same amount of electricity as the entire United Kingdom, which is approximately 300 TWh/year (about 2% of the entire world's electricity usage).
By 2030, projections indicate that the Internet could consume around 21% of the world’s electricity.
This is due to several factors, the most prevalent being:
- Websites are just too dang big in the first place.
- The Internet of Things (IoT) continues to grow.
- The use of generative AI (more on that later).
How to Calculate a Website’s Carbon Footprint:
Tools like websitecarbon.com estimate the carbon footprint of any webpage.
The calculation looks at:
- Data transferred when a webpage loads.
- Energy source (is the hosting service known to offset, etc).
- Current average carbon intensity of electricity.
My current day job website, which I'm working daily to improve, is built on WordPress and scored an even C; "cleaner than 51% of all webpages globally."
It was a D when I started on it and I'm hoping to get it to A before the end of June (2024).
How to minimize the carbon footprint of your website
Energy efficiency isn’t solely technical.
Sure, it helps to be using a sustainability-focused server.
But, design and content play crucial roles.
These are often not thought of when working on the sustainability of a website:
- Image compression.
- Minimizing unnecessary scripts.
- Efficient code practices.
- Choosing sustainable hosting.
- Even SEO optimization.
AI is often unnecessary and consume TOO MUCH energy.
My confessions
I still use AI for some things, and I'm a big fan of WordPress which certainly is not the lightest website builder out there.
I'm not saying this stuff is evil. I was just on a website that I know took a lot of JavaScript et al. to work, but it was simply beautiful.
I just feel like we should be working on minimizing it as much as possible.
When a website is simply information, it doesn't have to be fancy.
First and foremost, a website needs to be able to convey the information it is meant to share.
My Challenge To YOU
Here's the original code in case they take the page down:
<body>
<header>
<h1>Welcome to Our Earth Day Celebration!</h1>
</header>
<section>
<article class="facts">
<h2>Did You Know?</h2>
<p>Earth Day was first celebrated on April 22, 1970, and now includes a wide range of events coordinated globally by EARTHDAY.ORG including 1 billion people in more than 193 countries.</p>
</article>
<article>
<h2>Why Celebrate Earth Day?</h2>
<p>Earth Day is more than just a single day — April 22. It's a day to remind us to take action in our communities and beyond, to protect the environment, restore damaged ecosystems, and live a more sustainable life.</p>
</article>
<article>
<h2>How You Can Help</h2>
<p>Join us in making a difference! Here are some ways you can contribute to preserving our planet:</p>
<ul>
<li>Reduce, reuse, and recycle.</li>
<li>Volunteer for cleanups in your community.</li>
<li>Conserve water and electricity.</li>
<li>Plant a tree.</li>
<li>Educate others about environmental conservation.</li>
</ul>
</article>
<div class="action-call">
<h2>Take Action Now</h2>
<p>Join our Earth Day quiz to test your knowledge and learn more about what you can do to help our planet!</p>
<a href="#">Start the Quiz!</a>
</div>
</section>
<div class="testimonial">
<h2>Inspiration Corner</h2>
<p>"The Earth does not belong to us: we belong to the Earth." - Marlee Matlin</p>
<p>This Earth Day, let's remember we are part of a larger ecosystem and our actions have a profound impact on our planet.</p>
</div>
<div class="events">
<h2>Join an Event</h2>
<p>Participate in local and global Earth Day events to take action towards a sustainable future. Check out <a href="#">events near you</a>.</p>
</div>
<footer>
<p>Happy Earth Day! Together, we can make a difference.</p>
</footer>
</body>
Here's my submission:
On CodePen.io.
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body {
margin: 3%;
font-size: 21px;
}
p {
margin-left: 3%;
}
h1 {
font-size: 55px;
}
h2 {
font-size: 34px;
}
.testimonial p:first-of-type {
margin-left: 13%;
font-style: italic;
}
</style>
<title>HTML 5 Boilerplate</title>
</head>
<body>
<header>
<h1>Welcome to Our Earth Day Celebration!</h1>
</header>
<section>
<article class="facts">
<h2>Did You Know?</h2>
<p>Earth Day was first celebrated on April 22, 1970, and now includes a wide range of events coordinated globally by EARTHDAY.ORG including 1 billion people in more than 193 countries.</p>
</article>
<article>
<h2>Why Celebrate Earth Day?</h2>
<p>Earth Day is more than just a single day — April 22. It's a day to remind us to take action in our communities and beyond, to protect the environment, restore damaged ecosystems, and live a more sustainable life.</p>
</article>
<article>
<h2>How You Can Help</h2>
<p>Join us in making a difference! Here are some ways you can contribute to preserving our planet:</p>
<ul>
<li>Reduce, reuse, and recycle.</li>
<li>Volunteer for cleanups in your community.</li>
<li>Conserve water and electricity.</li>
<li>Plant a tree.</li>
<li>Educate others about environmental conservation.</li>
</ul>
</article>
<div class="action-call">
<h2>Take Action Now</h2>
<p>Join our Earth Day quiz to test your knowledge and learn more about what you can do to help our planet!</p>
<a href="#">Start the Quiz!</a>
</div>
</section>
<div class="testimonial">
<h2>Inspiration Corner</h2>
<p>"The Earth does not belong to us: we belong to the Earth." - Marlee Matlin</p>
<p>This Earth Day, let's remember we are part of a larger ecosystem and our actions have a profound impact on our planet.</p>
</div>
<div class="events">
<h2>Join an Event</h2>
<p>Participate in local and global Earth Day events to take action towards a sustainable future. Check out <a href="#">events near you</a>.</p>
</div>
<footer>
<p>Happy Earth Day! Together, we can make a difference.</p>
</footer>
</body>
</html>
Top comments (0)