Behind the Scenes: The developer tools we use to build Turn Off the Lights

The Turn Off the Lights browser extension is a free and Open-Source project. And it is built with the latest web technology for modern web browsers. Here a behind-the-scenes overview of the developer tools we use to build the Turn Off the Lights on all platforms. And the handy Visual Studio Code extension we use in the code development of this project. That makes this code small, secure, stable for all web browsers.

Developer tools

What are developer tools?

That is the program or application to create this web page or to create a useful tool on the web. A website is built with HTML code, that gives the context of the web page. And the CSS provides the style of this web page. Whereby the Javascript can provide you dynamic function, such as detecting a click on a button that can open a new web page.

Visual Studio Code with the Turn Off the Lights browser extension project open

Visual Code

This is the application name from the company Microsoft, here we can see the complete file hierarchy of our project. That includes the HTML, JS, CSS, JSON files. And to write the text code instantly in a dark environment.

ESLint

ESLint is a static code analysis tool that makes the code understandable and identifying problematic patterns found in the JavaScript code. It makes sure the code style is on all the JavaScript files the same. And bring harmony to the way we write code.

Pretty Formatter

That makes it easy to compress the CSS file to minimal file size. This removed all the empty spaces, comments. So that to reduce to file size of the Turn Off the Lights project.

Live Server

To test these new changes, we test the web page online and instantly in the web browser. To do this we use the Live Server extension. That is the extension that provides us a local host from this current web page with all the settings automatically done for us.

Debugger for Chrome

This extension in Visual Studio Code helps to debug the JavaScript code in the Chrome browser. And it helps us find easy and fast the bug.

Then all this code will be published online on Github, so everyone can read and test the Open-Source project on his favorite web browser.

Support our Development

Now you know about the developer tools we use to build this amazing Turn Off the Lights browser extension. And how to keep the package small, so you can download and use it fast on your favorite web browser. If you like the free and open-source Turn Off the Lights browser extension. So please do not hesitate to support our work by making a small donation. And share this useful browser extension with your family, friends, and colleagues. And if you have any ideas, suggestions, or feedback. We appreciate it all to make it better for you as the user.

Do Browser extensions work also in the PWA window?

Yes, and you have a look and feeling like the website is an app on your computer. That with no address bar or tabs strip in the window. The app is in reality a web browser and so the Turn Off the Lights browser extension work here too.

What is PWA?

PWA or Progressive Web Applications are web apps that work and function like native apps, although they are built using HTML, CSS, and Javascript like regular web pages do. Websites with PWA support are intended to work on any platform that uses a standards-compliant browser, including both desktop and mobile devices.

How to install PWA?

It is very easy to install a PWA. For example, when you are on the YouTube.com website you will see in the address bar (in Google Chrome) an extra icon like a computer with an arrow point downward. When you installed the App, it will be added to your installed applications page (for Google Chrome at chrome://apps).

PWA download icon to install for example the YouTube app on your Windows or Mac computer

When you open a PWA you see the window with the website content such as YouTube.com. But on the top left of that window, you see the puzzle icon. When you click on this icon, you can choose the Turn Off the Lights browser extension and any other installed browser extensions. And it will dim the web page and highlight the video player. Also, other content features such as AutoHD (720p, 1080, 4K, 8K), Atmosphere Lighting, will work in the app window. All browser extensions will work just like in the regular web browser mode.

YouTube Progressive Web Applications window
YouTube app window with the dark layer enabled of the Turn Off the Lights browser extension

How to uninstall PWA

It is very easy, just like the install you must open the 3 dots and choose in the context menu the item “Uninstall”. And everything from the app is removed from your Windows or Mac computer.

Uninstall YouTube app

PWA is supported in the latest Google Chrome, Firefox, Safari, and Microsoft Edge web browser. If you like the free and open-source Turn Off the Lights browser extension. So please do not hesitate to support our work by making a small donation. And more awesome features are coming later this year that make video navigating and control even better. if you have any ideas, suggestions, or feedback. We appreciate it all to make it better for you as the user.

Earth Day 2021 and Demonstrate Support for Environmental Protection

It is Earth Day very soon. Many important environmental events have happened on Earth Day since 1970. That including the recent signing of the Paris Agreement, as Earth Day continues to be a momentous and unifying day each and every year. Earth Day is an annual event on April 22 to demonstrate support for environmental protection.

Celebrate Earth Day – Showing the mother earth

Earth Digital Event about climate and environmetal

Parallel to the Biden Administration’s global climate summit, EARTHDAY.ORG will have its Live digital event on its website. The global show begins at 12 PM Eastern Time.

Workshops, panel discussions, and special performances will focus on Restore Our Earth — that will cover natural processes, emerging green technologies, and innovative thinking that can restore the world’s ecosystems.

That will includes topics such as:

  • Climate and environmental literacy
  • Climate restoration technologies
  • Reforestation efforts
  • Regenerative agriculture
  • Equity and environmental justice
  • Citizen science
  • Cleanups, and more.

World climate leaders, grassroots activists, nonprofit innovators, thought leaders, industry leaders, artists, musicians, influencers, and the leaders of tomorrow will come to push us towards a better world.

Unique Earth Discount for Turn Off the Lights for Desktop app

And to celebrate Earth Day on 22 April 2021. We are giving a 50% discount (from 24,99$ to 12,49$) for the “Turn Off the Lights for Desktop” app from 22 April 2021 through 25 April 2021. It is our way to thank you and celebrate this annual event Day. So do not miss the deadline, and Get the “Turn Off the Lights for Desktop” app now!

The high quality “Turn Off the Lights for Desktop” is a Windows and Mac application, that help you to dim the screen manully and also automatically when you start up your computer. Or with your personal time schedule. Futhermore it have an option to highlight an application on top of the dark layer, to give you more focus and concentration on the work you are doing.