There is a saying "as a full-stack developer, you need to learn everything" - pirple.
As it is true for you to learn everything as a full-stack web developer, you also need to be familiar with a lot of tools that will make your job easier and faster.
Full-Stack web development covers both front-end and back-end web development. So this article spans across front-end and back-end web development tools.
For each of the tools I outline, I will not fail to tell you what specific part of web development that tool belongs to.
Tools
1. VSCode - Text Editor
VSCode (Visual Studio Code) is a text editor that is used to write and manage code. A text editor falls into both a front-end and back-end tool.
VSCode is the most popular text editor so far, is the most used text editor according to the 2019 Stack Overflow Developer Survey.
It is most popular because of its unending extensions that just keep getting better. Its UX is no different as it is very customizable.
VSCode enables intellisense. Intellisense provides smart completions, code hints and suggestions, snippets.
VScode also enables a built-in debugger, built-in Git management (Git management is discussed below), Integrated Terminal with multiple terminal support.
Other text editors are Atom, Sublime Text. Geekflare has an extensive list of the best text editors in 2021.
2. GitHub - Git repository manager
GitHub is the most popular and most used Git repository manager. It is so because of its numerous features and its accessibilities.
GitHub is where big companies like Facebook, Google, Twitter, Microsoft, etc host their source codes, build, ship, and maintain their software.
It was voted as the most used collaboration tool in the 2020 Stack Overflow Developer Survery.
GitHub has tools for issue tracking, code review, collaboration, continuous integration, and general code management.
GitHub is for both front-end and back-end web development.
As we have said, GitHub is a Git repository manager. And Git is a distributive version control system. A version control system also called source code management is a software utility that manages and tracks changes to your source code.
Git is the most used version control system. A lot of developers are so used to it that they don't even know that there are others. I didn't know before doing this research.
Other Git repository managers are GitLab, BitBucket. See a list of others.
3. Postman - API Testing
Postman is an API testing tool used to test if APIs meet expectations.
Postman is beyond a testing tool, with Postman you can collaborate to build APIs. This really benefits teams who are building an API.
With tools like this, you do not need to build a front-end interface to test if your APIs are as expected.
An API testing tool is a back-end tool. Nordic APIs has a good list with pros and cons of API testing tools.
There are some APIs like Facebook API and Spurwing API that enables testing in their API documentation. That can save you the stress of getting an API testing tool to test their APIs.
Also, there is some very good API testing tool available as extensions in the VSCode text editor like Thunder Client.
4. Chrome DevTools - Browser DevTools
Chrome DevTools is a set of web development tools built into the Google Chrome browser. It is common amongst all other browsers, but the features in that of Chrome are exceptional.
With these tools, you can
- View and change the DOM,
- View and change a page's style,
- Debug JavaScript in the console,
- Debug JavaScript with the built-in debugger
- Run and see messages JavaScript in the console,
- Optimize website speed,
- View and change web storage and cookies.
- Inspect network activity,
- Optimize websites for different devices.
Other web browsers with the DevTools are Mozilla Firefox, Edge.
Chrome DevTools is a front-end tool.
5. Bootstrap - CSS Frameworks
A CSS framework is a library that eases and speeds up design with the CSS language.
Center aligning a div in CSS has being a pain in the ass for many developers and/or designers. But with CSS frameworks you can do that within a split second.
Bootstrap is one of the most popular CSS frameworks developed by Twitter, Bootstrap has a large community that you can run to for help if there be a need for that.
One beautiful thing about Bootstrap and other CSS frameworks is that it is easy to learn and to adapt to.
Other notable CSS frameworks are TailWind, Foundation. Geekflare has an insightful list of CSS frameworks with pros and cons.
Bootstrap is a front-end tool.
You might be interested in 20+ Places to Learn Programming for Free
6. React - JavaScript Libraries
React is a popular JavaScript library that is used to build user interfaces (both web and mobile) and single-page applications.
With React a collection of prewritten code snippets can be used and reused to perform common JavaScript functions.
Specifically and elaborately, React allows us to create reusable UI components. These components are what make up our website.
There are maintained supporting packages and libraries that make building complex applications with React possible.
These packages can be accessed with NPM and/or yarn - discussed in this article.
Other JavaScript Libraries are jQuery, fullPageJS. Here are others you would find useful.
React is a front-end tool.
7. Vue.js - JavaScript Frameworks
Vue.js is a popular JavaScript framework for building user interfaces (web, mobile and desktop) and single-page applications.
Vue.js is a very light framework that has a positive impact on your SEO. Altexspot has an outlined pros and cons of VueJS.
Vue.js may be for one-page applications, but complex applications that will require routing, state management, and building tooling are offered through officially maintained supporting libraries and packages.
Other frameworks are Angular, Svelte. You can find a list of some others here.
Vue.js is a front-end tool.
8. Figma - Design Tools
Figma is a design tool that helps with mockups, prototyping, and testing. While Figma may not be the best design tool out there, but it is the best option to start with.
Apart from personal use, Figma is reliable because of its enabled real-time collaboration. As a team of designers, you can make use of Figma to collaborate and design great things.
Other design tools that may be best options for personal and professional use are Adobe XD, InVision Studio, Sketch. Creativeblog has listed 22 web design tools in this article.
You might be interested in How to Become a Web Developer in 2021
9. NPM - Package Managers
NPM which stands for Node Package Manager is a package manager for JavaScript and NodeJS (a JavaScript run-time environment).
NodeJs is a JavaScript runtime environment that basically extends JavaScript into a server-side scripting language.
With NodeJS, we can execute JavaScript outside of the browser. And with that, we can build awesome servers for our websites using JavaScript.
NPM is where we can find packages to use for our apps, both front-end, and back-end. These packages can also be installed into our projects via NPM CLI.
Other package managers for JavaScript and NodeJs are yarn, and pnpm.
Yarn is also a very popular package manager, and developers often find it difficult to decide which to use between NPM and yarn. Logrocket has made a comparison between these two package managers.
10. Sass - CSS PreProcessors
With tools like Sass (Syntactically Awesome Style Sheet), CSS has had an increase in its simplicity and readability. Sass is a CSS preprocessor which enable us to use logic in CSS.
CSS preprocessors are programs that add new features in CSS such as variables, nesting, mixins, inheritance selector, functions, and mathematical operations.
Other CSS Preprocessors are Less and Stylus. See a comparison here.
Sass is a front-end tool.
Conclusion
A farmer without his tools is just another man. But a farmer with his tools but has no idea how it works is yet another dumb man. As a developer you are no different, get acquainted with the tools you NEED.
Alright, have a nice time trying these tools out and sticking with the needed ones. Until next time, if you find this article useful and would love to see more of this, you can support me by becoming a Patron. Or you can buy me a coffee.
Top comments (10)
All those tools for coding! I'd like to add Stoplight studio as a nice GUI to document your API according to OAS. Documentation is just so important.
I use all of these you mention (except bootstrap, dropped it for Tailwind), however, React and Vue are Frontend frameworks. We can argue if that is a tool, but if, then we totally miss Backend related "tools" (maybe worth 1 bullet point then mention Rails, Django, Node, Next/Next, Buffalo, ..) and condense react+Vue into Frontend-Tools.
For me, full stack should also include being able to deploy your stuff, so possibly mention Terraform, Capistrano, Vercel, Jenkins,...
Oh, and throw in some CI/CD & automation tools, e.g. Jenkins (again), Buddy.works, CircleCI, GitHub Actions (although they aren't very mature yet). Since we all love automation ;)
Checking on my time logging, which tool I use most, I get to good old Terminal.. possibly the most powerful and versatile tool of all! It's so worth learning some she'll scripting!
You know these are really good points you mentioned. Truth is, the article wasn't really organized to cover all, but I will reorganize to cover all aspect of Full-Stack development, down to deployment, maintenance and publicity.
Though I did mention NodeJs.
Great list. Although for 2021 going forward, I’d swap out Bootstrap in favor of Tailwind CSS.
Oh really!. Why would you do that? Is there anything in particular that would make you switch?
It was forced upon me with the release of Laravel Jetstream, which is out of the the box Laravel Vue SPA. After using bootstrap for like a decade I decided to give it a try. I’m a huge fan of Vue. I quickly realized after using it that not only is it crazy flexible for use with vue, my code is much more maintainable
Oh I see. I honestly don't use CSS frameworks so I can't tell.
But the main reason I picked Bootstrap over Tailwing in this article is because of its community.
React is also a framework. A difference between a library and a framework is that a framework makes you write code in a certain structure. A library allow you to to use functions in your own code.
I can't be able to talk much on this for now, but what I do know is that React behaves like a framework because it has some of framework's properties.
The time for web assembly is here and frameworks like Blazor have arrived and are ready to go. It is time to migrate to web v3.0 with WASM.
Thank you. Appreciate you.