Introduction
As a new developer, I often wondered what skills I needed to learn to help me become a good developer, the skills I needed to be able comfortable coding on my own, the skills I needed to help me debug or improve my projects and I have found three tools that are invaluable to any developer: new or experienced. These three tools are Pseudo-coding, using the Developer Tool and reading Documentation to further understand a programming language. I will be sharing how I used the Developer tool to improve the UI(user interface) and responsiveness of a recent ReactJS project.
Developer tools (or "development tools" or short "DevTools") are programs that allow a developer to create, test and debug software. (as defined by mdn web docs Developer Tools). The developer tool can be found in most current browsers and is used by developers to inspect and debug the website or web project. You may use the Developer Tools link to find learn more.
Perequisite:
Basic knowledge of how to use the computer and the internet.
Basic knowledge of HTML, CSS and JavaScript.
How to use the Developer tool.
Using the developer tools in your browser:
You will need to have a website or your web project opened on your computer to access the developer tool. Inside the website or web project, press the following keys on your keyboard:
Ctrl + Shift + I
You can also right-click inside the web page and select 'Inspect' from the drop-down menu.
The above-mentioned ways to access the browser developer tools are not the only ways to access developer tools but are the only ways I will mention in this article.
The above image shows the developer tool opened on my hashnode blog as I created this article. The HTML code is shown for the webpage at the bottom left and the CSS is shown at the bottom right.
Looking at the top of the developer tool, from the left to right, you will notice there are two icons before you see the menu options. The first icon is used to select an element on the web page to inspect it.
My Github API Project Using ReactJS
I used the developer tool to improve on the existing features of one of my Altschool Africa second-semester projects.
The code: My Github API Project
The project involved implementing an API fetch of my GitHub portfolio, showing a page with a list of all my repositories on GitHub(the page should implement pagination for the repo list), and creating another page showing data for a single repo clicked from the list of repositories using nested routes while using all the necessary tools in react. Implementing the proper SEO, Error Boundary (showing a page to test the error boundary) and 404 pages. Good UI and Designs are important.
It was a challenging project to work on and I delivered on every feature required but I always felt I could have done better in terms of the UI and the responsiveness of the app. Hence, I chose to improve the UI and responsiveness of my Github API project as my second-semester holiday challenge.
The Toggle device tool
As you can see from the above two pictures, my Github API app looked very good on a large screen but not very good on a smaller screen. Even though it may be considered a responsive web page but not in a very good way.
The second icon at the top of the developer tool is used to check the responsiveness of your web page. It is called the Toggle device toolbar.
When you click on it, it will open up the different screen sizes options and display your web page or app based on the screen size you select from the drop-down menu (see the picture below with the toggle icon and the screen sizes menu highlighted)
Clicking on the toggle device tool again returns your web page to the original web page display.
This revelation by the developer tool on my app's UI made me re-examine my CSS code.
The selector tool
I used the select icon to select the elements on my page and it revealed to me what was happening in my CSS code and revealed where changes had to be made.
As you can see in the above image, the selector tool is the first icon on the top of the developer tool, when it is selected, it is blue and so, when you hover over your web page, the styles code is shown and the HTML element for that part of your web page is also highlighted in grey.
The styles code shows me the width of my page for this screen size: 70.960 X 246.400 with a margin of 16px.
With the help of the developer tool, I was able to improve the UI and the responsiveness of my Github API app.
A better responsive page is born
With the help of just two features of the developer tool: the selector and the toggle device, I was able to get my app to be better in its responsiveness and UI.
It is seen in the images above the improved responsiveness of the web page for both large and small screens.
Conclusion
As developers, we tend to just jump into our code when we feel the need to improve on features when we could use the developer tool to help guide us in these improvements.
The developer tool will reveal where in your code you need to make changes. This greatly reduces the chance of destroying the work you had done before. Remember, the developer tool can also be used to examine the JavaScript code and not just the HTML and CSS codes.
When you examine the top of the developer tool in my images, you will notice the other menu options apart from the selector and toggle icons. They are Elements, Console, Sources, Network, Performance, Memory,... etc, these are part of the tools that are also very useful to a developer in improving their applications but are not discussed in this article.
I encourage developers to explore the use of the developer tool and use it consistently to improve your applications.
If you have a particular tool you use as a developer, a tool that has helped improve your applications, other than the web developer tool, please leave us a comment as we will be happy to also learn from you.