Top tools for a junior frontend developer

##Introduction

It's hard to choose what to learn when you're starting your journey as a frontend developer. There're plenty of sources, courses, tutorials or frameworks to choose from. You might get confused starting researching all above. One practical approach is a craftsman road where you learn the process by tools. I've created a list of top tools for junior frontend developer and explained why you should use them. Follow me to get more tutorials!

#GitHub

GitHub is a web-based hosting service for version control using Git. It offers all of the distributed version control and source code management (SCM) functionality of Git as well as adding its other features. It provides access control and several collaboration features such as bug tracking, feature requests, task management, and wikis for every project. Github is also a great community where you find and collaborate a lot of open source projects.

github

#Chrome Dev Tools

It's a set of developer tools built into the Chrome browser. With DevTools you can access the internals of any web application, see how it performs on different screen sizes and change any page. You can edit pages real-time and diagnose problems quickly. It ultimately helps you build better websites and faster. Additional network tools can help you optimise your loading flows while a timeline gives you a knowledge of what the browser is doing at the moment.

chrome

#React Developer Tools

React is a popular javascript framework among web development last years. However, Google Chrome Developer tools cannot examine the Dom as React Components. Don’t be confused; there is a Chrome Extension called React Developer Tools that allows you to get into the nitty-gritty of how data is passed through components.

react

#Pixel Perfect

This chrome extension helps develop your websites with per-pixel sharpness! It's for web developers and markup designers. PerfectPixel allows developers to put a half-transparent image overlay over the top of the developed HTML and perform pixel perfect comparison among them.

#Visual Code Editor

Visual Studio Code is the number one code editor for building and debugging modern web and cloud applications. It’s very customizable, has built-in git, massive list of integrations, powerful autocomplete and debugging features. It’s a powerful multilanguage IDE, super fast and simple. Also, free an open source.

vsc

#Codepen

Codepen it’s amazing web-based and community-driven code editor. You can see right away results of code. It’s a magic place for designers and front end developers where people are sharing and commenting on their front end skills. It’s a great source of inspiration for new ideas and ways to code. The editor is used for: prototyping new ideas, instant bug testing, sending clients things to look at, evaluating potential hires and finding inspiration.

codepen

#GraphQL and GraphQL Editor

GraphQL is a query language for APIs. It's very trendy nowadays and recognised by leading tech organisations. GraphQL Editor makes understanding GraphQL schema a lot easier. Plan it out by linking visual blocks and our editor will transform them into a code! Create fake backend out of GraphQL, and you could power up your application.

GraphQL Editor

#Npm

It's a package manager for JS. It helps to find packages of reusable code and compile them in new ways. It has over 470,000 free code packages in the database to be used by you. This web dev tool is a command-line utility for interacting with a repository that aids in the package. It also has team features with your private namespace.

npm

#Webpack

It's a bundler for javascript and friends which packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, CoffeeScript, LESS, ... and your custom stuff.

webpack

#Figma

Figma is a design app but very trendy and good to collaborate with designers. Every Figma file has Code Mode where a developer can inspect design files. When designer share view-only files with the developer, he will have access to Code Mode where they can examine, comment, and export without having full edit access to the files.

figma

#Web.dev

Every web project needs proper feedback and testing. With this tool, you can check how your website performs according to modern standards. You can measure things: performance, PWA status, accessibility or SEO. Also, you can practice skills: like load speed, network resilience or data security. Check how your website performs over time, and keep track as you learn on your schedule.

web.dev

#Terminal

A terminal is a text-based interface you can type your commands in. A shell takes these commands and tells the operating system to execute them. Getting familiar with tools like Git from the terminal gives you more power and flexibility over GUI. In the end, a GUI is a graphical shell in front of a command-line tool. Being “closer to the metal”, it can also help you to get out of trouble in case a GUI is stuck or messed up. It's an essential productivity tool in a developer's arsenal.

terminal

#Others

Caniuse.com - are you worried about browser compatibility for some cutting edge ideas? Try this site and see if you can use it.
StackOverflow - that site doesn't need explanation ;)
TinyPNG- Advanced lossy compression for PNG images
Compressor.io - another image compression tool
Notion.so - recording notes, specs, product owner feedback and planning.
Postman - when working with REST APIs.