Five tools every front-end developers should use.

ou may not be a front end developer but you could at least read through or even shared with front-end developers you know. It's a good day to read something enlightening. I will recommend you to take a pen and note or open up your Google keep ( or any more taking app) because you're about to learn and unlearn.

In every field or industry there are always a way of doing things, like best practices. So after this article ask yourself

What have I been doing right or wrong?

Let's roll💧.

What is Front end Devlopment and why it's lucrative?

Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript or additional frameworks for a website or Web Application so that a user can see and interact with them directly- front end Masters.

Front end development is a very lucrative role in field of software development because of f many reasons but I will mention few.

It is an entry/ path to other specializations e.g backend development (Node JS) devops or mobile devlopment.
Curriculum and requirements is very straightforward and clear.

Numerous and quality learning resources.

Since I began learning front end development, I have seen so many roadmaps and curriculum and I feel very sorry for people following some roadmaps. Why? Because they fail to add important concept and topics as part of the roadmap. And that's what this article is for.

We will be looking out 6 tools every front end developer should and must use🥴.

Disappointed? You may be asking why on Earth I have Google as my number one. Yes Google and Social media, you're working on your portfolio and want to add a gradient, but you forgot. How would go about it? You may decide to try another option but that's very wrong. That's why Google is there, it has been one of my best help over the years even before I started coding. My friends sometimes ask me why I know so much ( Google is the 🥴). Don't be afriad to ask. That's why I listed those platforms above.

🤖 Stackoverflow: You will get specific answers to your questions from the community.

🤖 Twitter: being one of the biggest supportive community for developers and techies you can also ask questions and probably add hashtags like

#100daysofcode 
#codenewbie and many others

🤖 Discord: you can find online learning communities and check out their discord channel. You will get help too there.

So l try exploring ways you can use these platforms to your benefit as a developer. We are in an information age where you get answers to your questions with the tap of a button. Here's a post to help you improve your googling skills

Use Google like a pro

2. Chrome dev tools🤷‍♂️

( Browser Dev tools.)

Chrome dev tools really make live easier from testing out features you'll like to add to your page to debugging JavaScript to validation of CSS rules and even responsiveness and even many other features I haven't discovered (you can help with that in the comments section). But did you know the word "Browser Dev tools" is emboldened why? Chrome Dev tools is a specifics under browser dev tools. It's a type of dev tool by Google and it's as grown so much popularity. I have talked to few developers who complain about Chrome dev tools and gave testimonies of how they tried other dev tools and things were easier. But chrome has some nice updates and you may to check it out.

Note: I am not trying to degrade or discourage you Frome learning how to use chrome Dev tools ( infact it's recommended) even if you'll be using another tool you should try getting familiar because of some job specifications.

So it is browser developer tools generally. You can check out these Dev tools ( personally I have been using Firefox dev tools lately and I love it. It's kinda decent)

Firefox developer tools.
Repl.it
HTTP Toolkit.

You can check it how. But the major point is learning and understanding the usage of anyone of them properly and get the job done.

3. Version control systems ( Git)

Version control is the management of changes to documents, computer programs, large web sites, and other collections of information. Changes are usually identified by a number or letter code, termed the "revision number," "revision level," or simply "revision."

The various types of the version control systems are:

Local Version Control System.
Centralized Version Control System( SVN)
Distributed Version Control System( example is Git and mercurial)

Version control systems helps you keep track of changes in your work. Git is an example of version control and it's the most popular.

The importance of git can't be overemphasized, since it inception many things and change and gotten better. Version control should be used to keep track of changes and keep every member of the team working on a project. But a lot of roadmaps and tutorials fail to include this.

NOTE: Git is not something you learn after you've learnt HTML, CSS and JavaScript and frameworks. Even as you learn HTML and CSS you can start pushing your projects through Git to GitHub ( we're going to talk about GitHub in the next point). Tools or concepts like git should be learnt progressively and gradually.

Some basic things you need to learn in git are

✍️ Creating Repos

✍️ Branching and merging

✍️ Cloning & pull requests

✍️ Staging and commits

✍️ Tags and working copy

✍️ Contributing to open source

You will find out more as you learn.

4. GitHub

Take note GitHub is not another name for git neither a substitute don't get confused.

Git is a version control tool that will allow you to perform operations to fetch data from the central server or push data to it whereas GitHub is a core hosting platform for version control collaboration. GitHub is a company that allows you to host a central repository in a remote server - edureka.co

GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

So the things you will need to learn in GitHub are same as what is listed above for git, they are interwoven. There are many tutorial that help you understand how it works or you can use the official GitHub guide

There's one misconception about GitHub and git, you don't actually need Knowledge of Coding to start using them, you just need to follow instructions and steps to doing things. I have always thought I needed to know how to code very well befo I can use GitHub but they're all lies. Do you Know you can even use GitHub as a Documentations for your progress ( you just have to create a branch each time and merge it).

Go get a GitHub account ( it's free) and of you haven't been using yours, start making contributions ASAP 😁

5. Graphics and prototyping tools.

Do you want to create highly interactive mockups for your website, do you want to make your website responsive and have a good user experience. Even if these part of process is meant for UI and UX designers. It is still advisable and recommended for front end developer are to have basic knowledge design and creativity. So here's a list of few tools you can use:

InVision: it is web-based prototyping tool that allows designers to create highly interactive mockups for web and mobile projects.
Marvel: is a great mobile and web-based prototyping tool that excels in its ability to simplify the prototyping process. As soon as you’ve signed up for your Marvel account, you’re immediately dropped into the interface and can begin creating your first prototype. From there, you can easily upload your image files into Marvel and start adding gestures and transitions. I have use these tool once but it's was a presentation, it's quite simple and cool.
Figma: Figma is a browser-based UI and UX design application, with excellent design, prototyping, and code-generation tools. It’s currently the leading interface design tool, with robust features which support teams working on every phase of the design process.
Adobe XD is the Adobe prototyping tool for user experience and interaction designers. Adobe XD features are used for creating wireframes, prototypes, and screen designs for digital products such as websites and mobile apps.

I'll recommend getting familiar with Figma, AdobeXD or InVision just pick one it's about getting basics and how to find your way around creativity.

But personally I use Figma and it's kinda becoming mainstream.

6. Online coding environments( ONEs)/ Web IDEs.

Most developers depends on offline text editors or IDEs to code. But online coding environment and web IDEs have filled a gap over the years ( 😅 Even before I started Coding)

Online Coding environment (ONEs) are a bit different from web IDEs. ONEs are just like a typical text editor that works on the internet, most online Coding environment only have full support for ( HTML CSS and JavaScript) they allow you to see changes as you write your code. Examples of online Coding environment are:

Codepen

JSfiddle

A Web IDE is an online software program that is intended to help developers and engineers build software or website. A typical web IDE includes:

A powerful text editor.
A compiler.
Automation and debugging tools.

Examples of web IDEs are:

But there are some drawbacks of web IDEs though, they're not as power as offline or desktop IDE because they depend if the internet, it will be also hard managing large projects. But web IDEs certainly have a ⛅ future in development.

So you can just try hands on a Browser-based IDE if you like it. You may go vacation or holiday an maybe you did go with your PC and you feel you need to code. You can use an online Coding environment or web IDE in a cafe or anywhere.

There are many tools, amazing ones even I have not started using( because I have not really gone far in front end Devlopment) They're really good life savers, you can check out tools like:

Package managers( npm and Yarn) pick one.
Bundlers( webpack).
Cross-browser testing( Can I use and Am I responsive).

There are other amazing tools tools too, these are just the must use to make to the standard developer you want to be. Thanks for taking time to read this, don't forget to drop comments and share with your friends. 🚀🚀