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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Top comments (15)
I recommend:
notion.so for recording notes,specs, product owner feedback and planning.
Postman when working with REST APIs.
I prefer Firefox devtools over Chrome, so it's a good alternative to mention.
Redux devtools for working with apps that implement redux for state management.
Hyper.js for a pleasant and productive terminal experience.
The list goes on, but these plus some of what you mentioned are what I have on everyday.
Thanks!
I also find myself using compressor.io and Coolors a lot.
With the rapid pace of change in the tech industry, it can be difficult to predict which skills will be in demand in the future ?
However, there are top 10 skills that are essential for any front-end developer.
Great list!
I'd love to also add something like Charles Proxy to the list! Any tool to help you easily mock a backend API will help speed up Dev and make it easier to work towards a new API spec.
IMHO the description for GitHub was pretty bad. There's a distinction between Git and GitHub and the paragraph here is just very murky in general.
Thanks, will have a look on that!
Updated, thanks!
I think that this one should be mentioned. I use inline one-liner(with one path and one d="...") svgs for icons in React, so I'm handling svg optimization like a boss with svg omg
I like to use Google's Squoosh App myself for image compression. Works great and you get a preview with a slider
Altair is an Insomnia alternative that's fantastic as well for anyone interested!
No 1 tool every front end developer requires is Node.
I hadn't heard of it before, looks pretty interesting, thanks!
I use squoosh for converting and compressing images.
Awesome article I love figma. Will always find way to develop stuff with it.