Tools I use as a Web Developer in 2024
Last Update On: Oct 20, 2024
As a web developer, leveraging online tools can make your work more efficient and your life easier. The tech stack for a web developer is quite complex, covering everything from basic computer science and software engineering to state management, design patterns, web security, build toolchains, animation, graphic design, UX design, and much more.
Here are some tools I frequently use in my daily development work:
ChatGPT
Without a doubt, ChatGPT has been the most talked-about tool in recent years. It’s incredibly versatile. Here are a few ways I use it:
Data Format Translation: For example, converting JSON to a table or vice versa, and extracting specific fields from an error log. Before ChatGPT, you might have needed to write shell or Node.js scripts for these tasks. ChatGPT makes it extremely easy.
Exploring Uncharted Territories: You can figure out almost anything if you know how to ask. When you encounter a problem, there's no need to read a thick book or long and tedious docs. Ask ChatGPT first, follow its guidance, and things will get much easier.
Utility Functions or Script Creation: Prompt ChatGPT with what you need, and it will write the code for you. You become a supervisor rather than a coder. While it might not be faster due to multiple rounds of prompts and answers, it is definitely easier, which is also an advantage.
AI Editor
Cursor Editor: https://www.cursor.com/
GitHub Copilot: https://github.com/features/copilot
Recently, I've been amazed by the increase in coding efficiency thanks to AI editors, specifically the Cursor Editor. It's incredibly smart in code completion and small-scale code refactoring. Often, you just need to "accept" its suggestions, which can insert or modify many lines of code quickly. You should give it a try.
JSON Formatting/Viewing/Editing
JSON Editor Online: https://jsoneditoronline.org/
This is a very useful tool for formatting, viewing, and editing JSON strings.
Despite its powerful JSON formatting capabilities, I also created a JSON format tool that can handle not only JSON strings but also JavaScript object-style strings. As a web developer, writing a JavaScript object is often much faster. Check it out here.
JSON Path
Find nodes in a JSON string using JSON path.
Base64 Encode/Decode
Handle Base64 encoding and decoding.
XML Format
https://www.freeformatter.com/xml-formatter.html
This website can format various types of data, not just XML, which is very useful.
SVG Compress
https://www.zhangxinxu.com/sp/svgo/
Compress and convert SVG files provided by artists, which is beneficial for webpage performance.
SVGR
https://react-svgr.com/playground/
When you need to control the details of an SVG, you can convert it to a React component using SVGR.
JSON to TypeScript
https://transform.tools/json-to-typescript
If your backend is not Node.js, you might need a converter to quickly generate type definitions.
Color HEX and RGB Converter
https://www.2createawebsite.com/build/hex-colors.html
This website may not be the most beautiful, but it is fast and efficient for converting HEX to RGB and vice versa.
GZIP Compress and Decompress
https://facia.dev/tools/compress-decompress/gzip-decompress/
This tool is very useful for debugging GZIP compressed data.
Animation Generation
https://tools.webdevpuneet.com/css-easing-generator/
Generate Bezier functions for CSS animations.
Gradient Generation
https://mdigi.tools/gradient-generator/
You don’t have to remember the gradient rules; this tool does it for you.
Regular Expression Tool
Not sure if your regular expression is correct? Test it first with this tool.
These are just a few of the many useful tools I use as a web developer. If you don't find what you need from the list above, try Googling it.
Thanks for reading, stay awsome!