There comes a moment in the life of every web developer when we ask ourself Is it good to continuously improve this application? We learn new knowledge and it turns out that a project can be written better. Continuous improvement it’s something natural in the IT world. But it’s also good to know when to stop. Did I abandon my app or I chosen continuous improvement?
Big question opposite to Continuous Improve.
When you reflect on continuous improvement, opposite to that appears the second question: do I really want to get down to it, it works fine. In my case, it worked, but there were a few bugs that I did not catch before and there were some comments about the reception of the application, so I decided to refine version 1.0.
I am talking about the FrontEnd Quiz, which I decided to improve so that it works like a web application, without having to reload the page while the application is running.
It seemed to me that it wouldn’t be difficult because the mechanism of the application’s operation will not change much. The only thing that will change is the code layout, namely the packing of the existing code into the components and their proper linking with the control container. I found out for myself that when something sounds harmless, it will definitely take more time than planned.
Little trouble during Continuous Improve.
Initially, I had trouble understanding the data flow logic of the application and setting up the controller so that everything worked fine.
This is what I was expecting, because I did it only once during the course and not on my own, but only imitating the teacher. Fortunately, nothing teaches us like practice it’s ower continuous improvment.
I have finally dealt with this challenge. Then it was the data distribution in the application. Here were new challenges. The data between the components is transferred as objects.
This forces a different way of recalling and working with them. Later, it turned out that if you want to find out which checkbox is selected from HTML, you need to delve into the parameters passed by the event. Fortunately, during the JS course, I learned some useful tricks that allowed me to review the logic of events and connect to them.
Basically, every element of the application is a new problem. Fortunately, each of them was solved. At the moment, there are only two elements missing in the application: a summary of the results and information about what went wrong, i.e. which questions could have been answered better. That’s to be done next week and I’ll be ready to swap the test on the site. I love continuous improvement 😉
How I discovered ESLint
While creating applications in JS, I used Code Sandbox several times to speed up the work with the code, and in fact, catch errors. On this occasion, it turned out that there is something like ESLint.
It is nothing more than a tool that, on the one hand, helps to catch errors in the code, and on the other hand, suggests how to improve the code so that it meets the generally accepted rules.
Installing Eslint isn’t difficult, but there are some topics you should know about. Below I will show you how to install Eslint for a JavaScript project. Those will be my little gift for you if you like continuous improvement.
You should start by installing the NPM Eslint package in your project. Install the package in the main project directory using the command:
Npm i eslint –save-dev
The next step is to initialize the ESlint package with the command:
./node_modules/.bin/eslint –init
A few configuration questions will appear in the console, after answering, the tool will be pre-configured to run.
That’s not all. It’s worth installing an external extension that will help you keep the code in one of the generally recognized standards, for example, Airbnb, Google, Facebook. In my case, I used the Airbnb standard. To install it, you need to use the command:
npx install-peerdeps –dev eslint-config-airbnb-base
After installing the package, open the .eslintrc.js file and replace eslint: recommended with Airbnb-base in “extend”.
You need to add the code to the package.json file that allows us to run eslint from the command line:
„scripts”:
{
„eslint: „eslint .”
}
Now you can use the package by running the program with the npm run eslint command. This is also a good tool for continuous improvement because as a result of the work of the extension, you will get a list of problems and errors in the console. It only remains to remove the errors found.
This week I spent almost seventeen hours of programming entirely working on the new code for the FrontEnd Quiz application.
