🚀 My ChatGPT Prompting Tips (with Frontend examples)

#webdev #chatgpt #promptengineering #productivity

No doubt, AI tools like ChatGPT and GitHub Copilot have revolutionized the way we approach coding. They're not just about saving time; they actually enhancing the whole developer experience(DX) more nicer. To make the most of this powerful tool, it's essential to know how to write effective prompts. In this tutorial, we'll delve into the best practices for frontend prompting with ChatGPT, with some specific examples. Let's get started! 😊

1. Be Clear and Specific

❌ "How do I center something?"
✅ "What's the best way to center a div element horizontally and vertically on a webpage?"

When crafting your prompt, be as clear and specific as possible. This helps ChatGPT understand your requirement and provide relevant information or code examples.

2. Specify Language and Context

❌ "Explain reduce"
✅ "Explain JavaScript's reduce() method, and include two simple code examples."

Try to provide context by specifying the programming language or technology you're working with. Also, consider your expertise level and project status to tailor the response effectively.

3. Break into Smaller Steps

✅ "Explain JavaScript's reduce() method to me as if I am a beginning developer just learning how to code. Provide an example of how I can use reduce() to calculate the total price of several items in a shopping cart."

Extension to the tip number two, break down a complex questions into smaller, actionable steps. This makes it easier for ChatGPT to provide a comprehensive answer.

4. Include Example Requests

❌ "How do I create a form?"
✅ "Your task is to create a form in JavaScript with one input that accepts a string and prints that string to the webpage in reverse on submit."

Including example requests helps ChatGPT understand precisely what you want to achieve and generates more accurate responses.

5. Request Relevant Details

❌ "Show me an example React component"
✅ "Create an example of React component that takes in at least one prop and demonstrates how to use hooks like useState and useEffect. The example should not be a typical 'Hello World' example like a counter or a greeting. Assume that I have already set up a React project."

Request specific details and your project status will help you receive a response tailored to your needs. Be explicit about your requirements to avoid generic answers.

6. Control Response Length

✅ Ask for steps: "Provide a brief 2-step explanation of creating a custom JavaScript event"

✅ Table: "Highlight the differences between React and Vue in a tabular format"

✅ Summarize with bullet points: "Please summarize in 3 bullet points why innerHTML should be avoided"

✅ Summarize as flow chart: "Use a flowchart to explain how to make a pull request on Github"

✅ Summarize as pseudo code: "Create pseudo code in the form of code comments describing how I can write a React component that displays the time in a user's local timezone."

We can control the length and formatting of responses by specifying your preferences. You can request concise answers, detailed explanations, or code snippets, depending on your requirements.

7. Role-Based Prompting

✅ "Act as a product owner to help me define crucial features for my app and write user stories."

✅ "Act as a software architect and help me determine which technologies to use for my web app."

✅ "Act as a senior engineer and advise me on best practices."

ChatGPT can acting different roles to assist you effectively, whether with project planning, technology decisions, or coding guidance.

8. Give Examples

✅ "Please write a function to total an array of numbers and return the value as a dollar amount:

Example input: [5, 40.5, 9, 45, 23, 50]
Example output: "$172.50"

Provide specific examples of th input and output results will helps ChatGPT provide precise code solutions to your request.

That's all! Remember that creating effective prompts is a skill that improves with practice. By following these best practices, we can unlock the full potential of ChatGPT and make your web development journey smoother and more productive. Feel free to comment on which one is most useful for you and happy coding! 🚀