Recommend Firefox (with a Web Component)
Published on under the IndieWeb category. Toggle Memex mode
I don't recommend many products, but I do recommend Firefox for web browsing. It is fast, reliable, and its code helps us fight against a monopoly in browser engines, an expensive-to-develop piece of technology that powers a web browser.
I was exploring the blogosphere [^1] (in Chrome, I write with a slight frown on my face) and came across a blog with a red banner, reading:
Google is actively hurting the open web with its browser chromium, read more here. Consider switching to a better browser, such as Firefox.
This got me thinking: "how could I do something like this?"
I have happily used Firefox for years, preferring the browser over Chrome. I support the hard work that Mozilla does to help promote an open web ecosystem, from their participation in advancing open standards to maintaining a browser engine that helps us avoid a monopoly of Chromium. Chromium is a browser engine maintained by Google and is used as a foundation many Chrome alternatives like Arc and Edge.
I decided to create a web component to help me promote Firefox on my site. A web component is shareable HTML that you can add to your website.
Create a new JavaScript file on your website and add the following code:
class RecommendFirefox extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.options = [
"For a more privacy-focused browsing experience, I recommend Firefox.
",
"Support browser diversity. Install Firefox.
",
]
}
connectedCallback() {
if (navigator.userAgent.indexOf("Chrome") === -1) {
return;
}
var message = this.getAttribute("data-message") || this.options[Math.floor(Math.random() * this.options.length)];
this.shadowRoot.innerHTML = message;
}
}
customElements.define("recommend-firefox", RecommendFirefox);
Above, replace this.options with your own list of options. I wrote a few focused on two aspects that I like most about Firefox: the fact that their work helps us maintain a diversity of browser engines, and the privacy considerations in the browser compared to alternatives. There are many other points I could add, too -- speed, good user experience -- but I need to think more about what words I want to use.
Then, add the script onto your web page:
<script src="/firefox.js"></script>
Finally, add the component where you want it:
<recommend-firefox></recommend-firefox>
A message now appears in my site footer that is a random choice from the options in the code above.
Firefox, keep doing what you are doing. You make the web a better place.
The code in this article is licensed under a Creative Commons Zero license.
[^1]: Should we bring the word "blogosphere" back? What is the word for someone who pioneers the reintroduction of an older word?
Responses
Comment on this post
Respond to this post by sending a Webmention.
Have a comment? Email me at readers@jamesg.blog.
