<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Blaze The Page</title>
</head>
<body>
<h1>Welcome to Blaze the Page</h1>
<label for="u">URL to blaze</label
><input name="u" id="u" type="text" placeholder="Write an URL..." /><button>
BLAZE IT!
</button>
<hr />
<h2>What?</h2>
<p>
What is "Blaze the page"? It is a small service that provides a minimal
version of a web page. Simply paste a URL and click the button to obtain
an extremely lightweight version of the page, concentrating solely on the
content.
</p>
<h2>Why?</h2>
<p>
One day, I exceeded my monthly data limit for high-speed browsing.
Consequently, my internet speed was reduced significantly. As a result,
web pages took an extremely long time to load, and I encountered timeout
errors 90% of the time. It was at that moment I contemplated a solution to
this issue and conceived the idea of Blaze this page.
</p>
<h3>How?</h3>
<p>
It's actually very straightforward. When you click on "BLAZE IT!", the URL
changes to https://ill-red-skunk-wig.cyclic.app?at= followed by the URL
you pasted. This address is where the backend is hosted. When the site is
accessed with the "at" parameter, a simple Node.js application retrieves
the content and generates an extremely lightweight version of the page,
retaining only the essential elements: the content. This minimal page is
the result of the request and will be displayed in your browser.
</p>
<h3>Does it work?</h3>
<p>
Yes. The purpose of keeping this page as minimal as possible is to make it
significantly lighter than a typical webpage. As a result, even with a
poor internet connection, you can load this page relatively quickly. When
you click on "BLAZE IT!", you receive a webpage that is only a few
kilobytes in size instead of several megabytes. This makes it feasible to
load the page even under challenging connection conditions, preventing
timeout errors from occurring.
</p>
<script>
const b = document.querySelector("button"),
i = document.querySelector("input");
b.addEventListener("click", () => {
location.href = `https://ill-red-skunk-wig.cyclic.app?q=${encodeURI(i.value)}`;
});
</script>
</body>
</html>