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.