Hints and tips for using development tools for the newbie developers
I’ve always been interested in the IT-sphere, and for the past couple of years, I’ve been having an on-and-off relationship with coding, project management, and design. This time, however, it was different; I was serious and I decided to start my development journey by learning full-stack development at Microverse.
I took the time to write these hints and tips on what I’ve learned so far to save you or someone out there some time and frustration. This took a couple of hours to write so I hope that all of these tips are as useful to you as they are to me.
This writing is about using tools and useful points which could be helpful while development.
IDE and extensions
As the IDE for the development, I’m using Visual Code. It is easy to install, has lots of extensions, and a clear interface.
I found a very useful stylelint extension for fixing CSS code and find bugs in HTML.
Also, I was using Live Server for live updates in any default browser.
After some time when I mastered HTML + CSS, it was a little time-wasting typing that repetitive code for the page structure HTML, body, head, and so on. So I started using Emmet Abrreviations by VScode which is very handy and saves time a lot.
Some example of using emmet abbreviation
- Creates a div block with class name container;
- Creates nav block with class name nav-menu
- Creates unordered list tag
- Multiplication means the creation of six list items
- Creates an anchor tag inside list item with href attribute and “Item #” value.
- Tag attributes could be specified in square brackets
- While values could be indicated using curly brackets
If you want to know more abbreviations just go to the official documentations page
Browser and extensions
For testing purposes could be used any browser, in my case I’m a Google Chrome user, so I stayed using this browser.
Browser dev tools have a lot of cool features that are easy to use and understand.
When we are looking at the code using Inspect(Ctrl+Shift+I), colors, we wanted to use, could be given differently, for example in RGB, but we wanted hex values. We could easily look up the needed color value just by clicking on that color and holding the Shift button on the keyboard.
Sometimes we need to send and share the whole page screenshots to someone to get feedback or just to show what we have just accomplished, in these cases, there is a handy extension for Chrome called Full Page Screen Capture and the user has several save options.
Many companies require pixel-perfect development from front end developers, to get this done there are a lot of extensions which are layering original design prototypes in the page. While I was developing pages I used PixelPerfect extension.
By layering the needed design we don’t have to switch between tabs or apps checking the design correctness.
If you are learning React, install the React Dev Tools extension.
It could be a little bit harder to remember all of this and use them at the beginning, but after practice, it would become easy stuff! Leave your comments below and feel free to contact me if you have any questions!
