Going to get into web development? Take a tool with you, it’s scary out there. Let’s take a look at some common web development tools to speed up your workflow and be a better web developer!
Note that your mileage may vary a lot! This list just lists the most popular solutions out there in the wild, you still need to integrate them in your projects/learn about them.
#1 VSCode
VSCode needs no introduction, it’s a beautiful and powerful code editor supporting extensions, integrated terminal, snippets, themes, shortcuts, remote SSH, and much more – according to your needs. Running on the top of electron, it is cross OS compatible and is constantly developed by Microsoft as an open source project. Get VSCode now from official VSCode site
#2 Webpack
Webpack sells itself as a module bundler, but in reality, it is much more extensible than that. You can attach a plethora of plugins and tweak configuration to make it more robust and fit to your needs. Read more about Webpack on their official site.
#3 Cypress
Cypress is a great e2e testing tool which can actually spin up a headless or a full chrome window to run actual tests of your code. It can interact with asynchronous code in a very intuitive manner, i.e. waiting for resources to load/become available, unlike Selenium, which is quite an old technology made for automated testing of mostly static sites. Get cypress here.
#4 TypeScript
Writing plain JavaScript? It could be really painful to find subtle bugs and errors without proper linting. And to make it even more powerful with better type checking and module autocompletion, take TypeScript with you. It won’t be wrong to say that TypeScript really enables huge JavaScript codebase maintenance and refactoring a breeze. Get started with TypeScript
#5 Sentry
Sentry is an error reporting service for production. Many a times, especially on frontend, your users might face crashes or unexpected bugs. Sentry comes to rescue and sends you full stack trace/information of bug right into your dashboard so that you can fix that nasty bug on the next release cycle. Read about sentry here.
#6 Git
Git is the magical wand of any large project. Git is a Version Control System (VCS) allowing you to incrementally build a software, whilst maintaining a complete diff of the previous builds, hence, not losing any history. Most popular solution for hosting git repos is GitHub – which offers free public and private repositories. You can learn more about git here.
#7 Babel
Babel allows you to write bleeding edge JavaScript features, but transpile them to browsers in a standard they know and have implemented for long. For example, you can write ES2020 things in babel, and let it transpile it down to ES2015 version to ship it to browsers. It makes writing JavaScript really fun and convenient as it allows you to use JavaScript from future! Learn about babel here
#8 Material UI
Material UI is a specification from Google on how layouts should be created. On the top of Material UI, there are a lot of component libraries available for a number of frameworks like Angular or React or React Native. This eases the process of building a lot of components manually for developers, at the same time, providing them with fast and high quality designed components. Learn about Material UI here.
#9 Joi
Data validation is an important part of any application. This is because, you can never trust data coming from user. For large scale applications with multiple endpoints to reach to backend server, it can become very tricky to handle all the edge cases. Joi is a very handy library to validate all the incoming data through a strict schema predefined. Learn more about Joi here.
#10 Docker
Setting up docker for development comes with its own set of challenges (speaking from experience), but once done, it’s worth the investment. Partially because you remove the “it-works-on-my-machine” errors. Also, running code sandboxed has another benefit. In an unfortunate event if your web application is hacked or brought down, docker container would make sure that the attack is contained to only that particular container and no other service is affected (unless, of course, your container has apt security rules). Learn more about docker.
Source: https://www.freecodecamp.org/news/handy-web-development-toolkit/
