It's hard to believe Chat GPT was introduced to our lives merely two years ago. I'm old enough to remember how Google revolutionized my Internet use, but no other technology has disrupted the industry to such an extent since then. As a front-end developer, I’ve embraced tools like ChatGPT and its competitors (looking at you, Claude) to make my day-to-day work more efficient. So now, I would like to share some ways I’ve been using it with you.
But before we dive in, a warning — AI isn’t a magic wand that replaces the need for understanding code. If you’re a junior developer, take this as a friendly heads-up: AI's answers can range from spot-on to complete nonsense. Sometimes, it’s just close enough to be misleading. So, while AI is an incredible tool, it’s only as effective as your ability to evaluate and tweak what it gives you. Think of it as a coding assistant, not a replacement for your skills.
Also, don’t forget to be polite—you never know when AI might develop a conscience. ;)
1. Generate Layout Code From an Image
A recent addition to ChatGPT (new as of the end of 2024) allows you to provide it an image of an interface design, and ask it to convert it to actual code. You can even be specific with what libraries you want it to write the code with: "Convert this image to React with styled-components". This is a pretty amazing and time-saving feature, but it's not 100% perfect, so be careful!
Here's the result of my asking ChatGPT to convert this screenshot from Figma to React.
The image:
The result:
As you can see, the styles aren't 100% correct, but the most tedious part, the layout, was done correctly.
Example prompt:
"Based on the attached image, please generate react code with styled-components"
"Based on the attached image, please generate vue code with Tailwind CSS"
2. Generate CSS Animations
I've been a front-end developer for over 15 years, and yet, CSS animations remain a mystery to me. While I'm pretty good with CSS, animations feel like an entirely different beast. I can never seem to make them look smooth. Whenever I need one, I usually end up searching for a good example on CodeSandbox.io. However, now with the power of AI, I can ask it to generate it for me, and even give it instructions on how exactly I envision it (but can't execute it myself).
Example prompt:
"Create a CSS animation of a waiving div"
"Create a CSS animation of a bouncing div. The animation should last 1s and repeat 3 times"
You can also ask for improvements:
"It should feel more 'bouncy'"
3. Fixing TypeScript Errors
We’ve all been there: TypeScript is yelling at you, and you have no idea why. This is especially annoying when dealing with third-party libraries, where you're not in control. Instead of hunting through docs or Stack Overflow, you can simply paste the error into an AI chat and get tailored advice almost instantly. You can even paste the code itself and ask it to fix the issue for you. And, if you have some JS code you would like to convert to TS, it can do that for you as well.
Example prompts:
"Please explain the following TS error [ERROR]"
"Please fix the following TS code [YOUR CODE]"
"Please convert the following code from JS to TS [YOUR CODE]"
4. Converting One Code to Another
Need to convert a vanilla JS script into a React component? Or maybe some old jQuery code to something more modern? AI handles these transformations with ease. It’s not always perfect, but it’s usually a solid 90% there, which is a great jumping-off point.
I recently tried to convert some Hammer.js code to vanilla JS events and was pretty amazed at how accurately Claude did it.
Example prompts:
"Please convert the following code to [YOUR CHOICE HERE]"
5. Writing Tests
TDD or not, writing some test coverage for your code is important to making our codebase more reliable and less prone to future issues. However, writing tests is not necessarily fun and can sometimes be time-consuming.
From my experience, it's pretty good at covering multiple use cases, including edge cases, and it even creates test titles based on my requirements (For example, Given-When-Then).
Of course, the reality is not that simple, and in larger code bases testing is far more complex, but AI can still help you with at least determining what cases you might want to test for and do some of the heavy lifting.
Example prompt:
"Please write unit tests for the code I'll give you. Use GIVEN WHEN THEN format for the test title. [YOUR CODE HERE]"
"Please write react testing library tests for this component"
6. Generate Mock Data
You are waiting for your fellow Backend developer to finish the API you need for the new UI you're working on. In the meantime, you need some data to work with. Creating mock data is a tedious process manually, especially if the data structure is complex, or requires multiple API calls. Using AI it takes two seconds to generate any kinda mock data you need, and if your company works with Open API Schema, it's even simpler, since you can simply provide the AI with the schema, and not even give it examples.
Example prompts:
"Based on the attached API schema, create a mock data for the [API] API [YOUR SCHEMA]"
"Based on the following example, please create a mock data"
7. Accessibility
Web accessibility is an important aspect of building inclusive applications, ensuring they can be used by everyone, including people with disabilities. I believe it also makes the experience better for everyone since it simplifies the UX. Sadly, it is often overlooked, or shoved under the rug until legal knocks on the door. Also, it's not so straightforward, and there are tons of rules and special attributes you need to learn about to make your app more accessible. AI can help you with some of that, and give you suggestions for improving accessibility, such as adding proper ARIA roles, fixing contrast issues, or ensuring keyboard navigation.
Example prompts:
"Please suggest how I can make the following component accessible"
✨ Bonus round! Here are some more ways I'm using AI, but which are not specific to Front-end ✨:
Simplifying Code
My code writing style involves throwing everything on my mind into the IDE. Once the code works, I start a cleanup. I consolidate code, rename variables, and move functions around. Also, I believe in KISS (keep it stupid simple), so that "future me/colleague" can read my code and understand it without too much hassle (and too many comments). Using AI allows me to make some shortcuts in that process, provide it with complex code, and ask it to simplify it.
Example prompts:
"[YOUR CODE] please simplify this code"
Boiler plating
Starting a new project or feature can be intimidating when you’re staring at a blank screen. And it's especially true if you're trying some new programming language or library.
Example prompts:
"Generate a Tanstack Query hook to fetch paginated data from an API."
"Generate a boilerplate "to-do list" react app with Tanstack Router and Tanstack Query"
-- Special thanks to Eitan Peer for reviewing this article --