In modern aviation, there are machines capable of flying themselves, but we don't trust them because we know it's not a question of "if" they fail, but "when" and "how". Therefore, by having a pilot and a copilot to operate it, we are provided with the guarantee of safety we need to use it.
When comparing an Airplane with Artificial Intelligence (AI), there are some similarities: A Machine capable of operating on its own that requires an external factor (a human) to provide the initial inputs and ensure things are working as expected.
Advanced AI has taken the world by storm. And, like Pandora's box, it's not something that can be undone, but learn from it and adapt. To benefit from this change, you first need to understand how it works and what this new tool is capable of. Below, you will find some insights and examples of how you can use an AI and fly with it during Frontend development.
For this purpose, the examples are based on the GitHub Copilot Chat, but it should work similarly to any other AI tool.
1. Define a Context
For effective use of the AI, provide context, especially with a new project. Treat interactions as a conversation, breaking down the problem and discussing solutions, akin to pair programming. Start with a broad goal before diving into details.
For example, when building a calculator with Vue, you could write a comment like this.
/*
Create a calculator component with the following features:
- use Vue 3 composition API
- use TypeScript
- Show results as I type
- Support all basic math operations
*/
GitHub Copilot can quickly generate the base code for the new component.
2. Break Down the Problem
Communicate your main goal and the steps to achieve it. Breaking down the process helps it be understood better. Let it generate code after each step instead of all at once.
Continuing with the calculator example, you could now add the Numpad and their styles as a next step.
create a numpad with basic operators in html using tailwind, the buttons should be squared, rounded and with the gray color
3. Define an Outcome
Learning from examples benefits both humans and AI pair programmers. For example, we might want to extract names from an array and store them in a new array. By giving examples, we can help GitHub Copilot understand our intent.
/*
Map through an array of objects
Example: Extract names from the data array
Desired outcome: ['Harry', 'James', 'Potter']
*/
4. Prompt Examples
Here are some prompt examples of how to interact with it and give you ideas to create your own.
As a rule of thumb: Always validates the content/code generated by an AI. It is not perfect and can generate things that do not make sense (Hallucinates) or do not work.
Prototyping
The AI code generation accelerates prototyping, allows quick design iterations, early problem detection, and boosts team collaboration.
Create a Method
Create a function that does something.
create a function to sort product by name
Create a Regex
Regex can be hard to write, but the AI can help you with that.
create a regex to validate email address
Convert X to Y
You can use the following example to convert a JSON object to Typescript, or even another language like Swift, C# or Python.
convert the following json to typescript and order properties alphabetically
{
id: 1,
name: 'John Doe',
birthday: '1990-01-01',
city: 'Berlin,
country: 'Germany'
}
Or transform a value into something else. For example, convert a hex color to its equivalent RGBA.
equivalent rgba color for #ff0033
Code Refactoring
The AI can help you optimize your code by suggesting better ways to do things.
improve the function_name function
Or get some suggestions on how to refactor a method into smaller ones.
make the function_name function smaller by splitting it into smaller chunks
Debugging
The AI can identify software issues by scrutinizing code patterns, logs, or anomalies that could lead to bugs.
Explain a Method
explain the function_name function
Code Insight
Where is the error in the function dateRange when executing it with the following parameters: '2022-01-01', '2022-12-31', { interval: 'ME' }
Documentation
The AI can analyze code and related resources to automatically generate concise, contextual documentation for developers.
Document a Method
generate documentation for the function function_name
Testing
The AI can automate testing creation and help you quickly analyze code, identify potential vulnerabilities, and simulate various test scenarios.
Create Test
Create a unit test for a method.
create unit test for the function_name function
or for a component.
create unit test for the component_name.vue component
Add Test Cases
You can also add test cases to an existing test.
test function_name function against undefined, null, empty string or numbers.
Learning
The AI can help you learn new things by providing you with documentation and examples.
How To
You can ask for documentation on how to use a method, or even set a context such as I'm learning javascript and I'm going to ask questions about the language and its built-in methods, and then processed and type only Array.reduce().
how to use the Array.reduce() method in javascript
Is it also possible to clarify a topic.
What is the difference between "for of" and "for in" in javascript
4. Conclusion
AI tools like GitHub Copilot can significantly enhance the process of software development. By defining a context, breaking down the problem, defining an outcome, and using the correct prompts, developers can effectively communicate with the AI to improve their development experience. However, it's crucial to remember that AI is not infallible. Always validate the generated content and code to ensure it meets your requirements and expectations. As we continue to adapt and learn from these advanced AI tools, they will become an increasingly integral part of our development workflows, acting as a reliable copilot in our coding journey.
What are your thoughts on AI? How do you use it? Let us know in the comments below!
Top comments (2)
Great article 👏🏽👏🏽
Useful advices, thank you 🙌