Write Code With GitHub Copilot... and Why It's Better Than ChatGPT

In this video, Jeremy McPeak from Envato Tuts+ demonstrates the capabilities of GitHub Copilot, a powerful AI tool that assists developers in writing code more efficiently. Trained on millions of lines of code, Copilot offers insightful suggestions and can significantly reduce development time by identifying patterns in code. The video showcases how to integrate Copilot with Visual Studio Code and use it to build a simple calculator application from scratch. It highlights the tool's ability to suggest code snippets based on context, including HTML elements, Bootstrap integration, and JavaScript functionality. The summary also touches on the tool's pricing, free trial, and the need for a GitHub account. Jeremy emphasizes Copilot's practicality for professional coders and its potential to enhance the coding experience through a more streamlined and intuitive process.

Takeaways

• 🤖 GitHub Copilot is a groundbreaking tool that assists in writing code by offering insightful suggestions based on patterns it identifies in your code.
• 📚 Trained on millions of lines of code, Copilot functions as a virtual coding teammate, saving developers significant time by providing code suggestions.
• 💡 To utilize GitHub Copilot, an extension must be installed in your code editor, and it integrates with Visual Studio Code among others.
• 💻 The tool prompts developers with suggestions as they write code, and it can be influenced by holding down the Alt or Cmd key for cycling through different options.
• 💰 GitHub Copilot is not free, with the cheapest plan costing ten dollars a month, but it offers a 30-day free trial for users to evaluate its value.
• 🔗 Copilot can be directed by comments in the code, which allows developers to specify what they want the tool to do, tailored to the language they are using.
• 🌐 By using data attributes, Copilot assists in creating a calculator application with event delegation for button clicks, enhancing the user interface and experience.
• 🎨 The tool also helps with styling by suggesting CSS rules that are relevant to the HTML document being worked on.
• 🔧 Copilot supports object-oriented programming by generating methods for a calculator object, including adding numbers and operators, and evaluating expressions.
• 🛠️ Event delegation is set up with a few keystrokes using Copilot, which simplifies adding event listeners for interactive elements in the application.
• ✅ Despite the potential for errors, such as forgetting to link the JavaScript file, GitHub Copilot streamlines the development process compared to other methods like using ChatGPT.

Q & A

What is GitHub Copilot and how does it assist in writing code?

GitHub Copilot is a groundbreaking AI tool that has been trained on millions of lines of code from various programming languages and repositories. It acts as a virtual coding teammate, offering insightful suggestions to help developers write code faster and save valuable time by identifying patterns in the code.

How does GitHub Copilot provide suggestions for coding?

GitHub Copilot provides suggestions as developers type their code. It prompts developers with what it thinks they want to do next, based on the patterns it identifies in the code being written. It can also generate code based on comments written by the developer.

What is the cost associated with using GitHub Copilot?

GitHub Copilot is not free. The cheapest subscription plan is ten dollars a month. There is a free trial available, but it requires a GitHub account and a payment method to be provided. If the trial is not canceled after 30 days, it will begin charging the user.

How can developers start using GitHub Copilot?

To start using GitHub Copilot, developers need to install an extension for their code editor. Once the extension is installed, they must sign in using their GitHub account. After signing in, they can begin using Copilot, which will be indicated by an icon in the bottom right-hand corner of the screen in Visual Studio Code.

How does GitHub Copilot utilize comments to generate code?

GitHub Copilot can generate code based on comments written by the developer. For instance, if a developer writes a comment indicating a desire to add Bootstrap to a file, Copilot will prompt them to add Bootstrap. Developers can specify what they want Copilot to do within a comment, and the comment syntax depends on the language being used.

What is the process of using data attributes in HTML to create a calculator interface?

Data attributes in HTML can be used to store custom data related to the element. In the context of creating a calculator interface, data attributes like 'data-value' for numeric buttons and 'data-operator' for operator buttons are used. These attributes can then be accessed through JavaScript to determine the action to be taken when a button is clicked.

How does GitHub Copilot assist in styling a web application?

GitHub Copilot can suggest relevant CSS selectors and properties based on the HTML elements present in the document. It prompts developers with styling rules that they might want to apply, such as setting the width, margin, and text alignment for elements.

What is event delegation and how is it used in the context of a calculator application?

Event delegation is a technique in JavaScript where an event listener is attached to a parent element instead of individual child elements. This reduces the number of event listeners and improves performance. In the context of a calculator application, event delegation can be used to handle click events for all calculator buttons by attaching a single event listener to the calculator container.

How does GitHub Copilot help in object-oriented programming for a calculator application?

GitHub Copilot can assist in creating an object-oriented approach by suggesting methods and properties for a calculator object. It can prompt developers with methods for adding numbers, adding operators, and calculating the result. However, the specific implementation details and methods are ultimately determined by the developer's requirements.

What is the significance of using 'eval' in the context of a calculator application?

The 'eval' function in JavaScript is used to evaluate a string as a JavaScript expression and return its result. In the context of a calculator application, 'eval' can be used to calculate the result of an arithmetic expression entered by the user. However, it should be used with caution due to security concerns associated with evaluating arbitrary strings.

How does GitHub Copilot differ from other AI code generation tools like ChatGPT?

Unlike other AI code generation tools that may require multiple prompts and adjustments to generate the desired code, GitHub Copilot offers suggestions that fit seamlessly into the code being written by the developer. It provides a more integrated and fluid experience, allowing developers to write the code they want with minimal adjustments.

Outlines

00:00

🚀 Introduction to GitHub Copilot

Jeremy McPeak introduces GitHub Copilot, a tool that assists in writing code faster by providing suggestions based on patterns it identifies in the code. GitHub Copilot is trained on a vast amount of code from various programming languages and repositories. It offers a pair programming experience by suggesting code as the user types. The tool is not free, with a minimum plan costing $10 per month, but a free trial is available. The user must install an extension for their code editor and sign in with a GitHub account to use Copilot. The video demonstrates how Copilot prompts the user with suggestions as code is written and how it can be used with comments to include libraries like Bootstrap.

05:02

🌐 Building a Calculator UI with GitHub Copilot

The video continues with building a calculator application's user interface using HTML and GitHub Copilot. It shows how Copilot can generate HTML elements and attributes based on the user's input and preferences. The process involves creating a container for the calculator, input elements for the display, and buttons for numbers and operators. The video also covers how to use data attributes for event delegation and how Copilot can adapt its suggestions based on the patterns it identifies in the code. Customizations such as changing classes for styling and using different colors for button types are demonstrated. Finally, the video shows how to add a style element with Copilot's assistance to improve the calculator's appearance.

10:02

🔧 Implementing JavaScript Functionality

The video moves on to implementing the calculator's functionality with JavaScript. Jeremy outlines a plan to use object-oriented programming to create a calculator object with methods for adding numbers and operators to the display and evaluating expressions. Copilot is used to quickly generate code snippets for getting HTML elements, adding numbers and operators, and setting up event delegation for button clicks. The video also shows how to handle the clear functionality and calculate the result when the equal sign is clicked. Despite an initial oversight of not linking the JavaScript file, the video concludes with a working calculator that can perform basic arithmetic operations.

15:03

🎬 Wrapping Up and Final Thoughts

Jeremy wraps up the video by reflecting on the process of building the calculator application with GitHub Copilot. He contrasts the experience with using ChatGPT, noting that while the latter can provide close results, it often requires more back-and-forth and manual adjustments. In contrast, GitHub Copilot offers suggestions that fit seamlessly into the code being written. Jeremy expresses his intention to use Copilot regularly and encourages viewers to try it out, especially if they write code for a living. He ends with a call to like and subscribe to the Envato Tuts+ channel for more informative content.

Keywords

💡GitHub Copilot

GitHub Copilot is a groundbreaking AI-powered code generation tool that has been trained on millions of lines of code from various programming languages and repositories. It functions as a virtual coding teammate by offering insightful suggestions to help developers write code faster and more efficiently, thereby saving valuable time. In the context of the video, GitHub Copilot is used to write an application from scratch, identifying patterns in the code and significantly cutting down development time.

💡Virtual coding teammate

The term 'virtual coding teammate' refers to the collaborative aspect of GitHub Copilot, which works alongside developers to assist in the coding process. It is designed to behave as if it were a human partner, providing suggestions and completing code in a way that enhances productivity. In the video, the presenter uses GitHub Copilot to demonstrate how it can act as a virtual teammate in writing an application.

💡Code editor extension

A code editor extension is a software component that adds functionality to a code editor, often to support specific programming languages, frameworks, or development tasks. In the video, the presenter mentions the need to install an extension for GitHub Copilot in a code editor such as Visual Studio Code to utilize its features. This extension is crucial for integrating the AI's capabilities into the developer's workflow.

💡Event delegation

Event delegation is a technique in JavaScript where an event listener is attached to a parent element instead of individual child elements. This approach is used to handle events for all child elements under the parent, leading to better performance and more manageable code. In the video, the presenter discusses using event delegation for handling button clicks in the calculator application, which is a more efficient way to manage numerous similar events.

💡Object-oriented programming (OOP)

Object-oriented programming (OOP) is a programming paradigm based on the concept of 'objects', which can contain data in the form of fields and code in the form of methods. OOP is designed to increase code reusability and scalability. In the video, the presenter decides to use OOP to create a calculator object, which encapsulates the functionality and state of the calculator, making the code more organized and easier to maintain.

💡Data attributes

Data attributes in HTML are used to store custom data private to the page or application. These attributes are useful for storing additional information about an element that doesn't fit into any of the existing HTML5 attributes. In the video, the presenter uses data attributes to store the values and operators for the calculator buttons, which aids in implementing event delegation.

💡Bootstrap

Bootstrap is a popular front-end framework that provides a set of CSS and JavaScript-based design templates for typography, forms, buttons, tables, and other interface components, as well as optional JavaScript add-ons. In the video, the presenter wants to add Bootstrap to the application for styling purposes, demonstrating how GitHub Copilot can assist in including such frameworks through comments or direct code suggestions.

💡Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a distributed network that delivers content to users from multiple, geographically dispersed locations. CDNs are used to improve the performance and availability of web content, such as Bootstrap, by reducing latency and server load. The presenter in the video mentions using a CDN to include Bootstrap in the application, which is a common practice for loading external libraries efficiently.

💡Visual Studio Code

Visual Studio Code is a popular source-code editor developed by Microsoft for Windows, Linux, and macOS. It includes support for debugging, Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring. In the video, the presenter uses Visual Studio Code as the code editor for demonstrating the use of GitHub Copilot, highlighting its integration with the AI tool.

💡Code suggestion

Code suggestion, or IntelliSense, is a feature provided by many code editors and integrated development environments (IDEs) that suggests possible completions for the current line of code. GitHub Copilot takes this feature to a higher level by offering code suggestions based on the context and patterns in the code. The video showcases how GitHub Copilot provides code suggestions that help the presenter write the application more quickly.

💡Free trial

A free trial is a period during which users can use software or a service for free, usually to evaluate its features and benefits before deciding to purchase a subscription. In the context of the video, GitHub Copilot offers a 30-day free trial, which requires users to create a GitHub account and provide a payment method. The presenter emphasizes the value of trying the tool during this period, especially for those who write code professionally.

Highlights

GitHub Copilot is a groundbreaking AI tool that assists in writing code faster by offering insightful suggestions.

It has been trained on millions of lines of code from various programming languages and repositories.

Jeremy McPeak demonstrates using GitHub Copilot to write an application from scratch, showcasing its ability to identify patterns and save development time.

Codecanyon is presented as the ultimate marketplace for developers and programmers, offering solutions for web development, mobile apps, e-commerce, and more.

GitHub Copilot provides a pair programming experience by offering real-time suggestions as code is typed.

The tool is not free, with the cheapest plan costing ten dollars a month, but a free trial is available.

To use Copilot, an extension must be installed in the code editor of choice and requires a GitHub account sign-in.

Visual Studio Code is used in the demonstration, with an icon indicating the status of the Copilot extension.

Copilot prompts developers with suggestions for the next line of code based on the current context.

Developers can cycle through different suggestions using the Alt or Cmd key combined with bracket keys.

Copilot utilizes comments to understand what specific functionality the developer wants to implement.

The tool can generate code snippets based on specified comments within the code, tailored to the language being used.

HTML elements and attributes are automatically suggested by Copilot, following the patterns identified in the written code.

Data attributes like 'data-value' and 'data-operator' are used to distinguish between calculator buttons for numbers and operations.

Copilot recognizes and suggests appropriate CSS classes based on the context, such as 'btn-danger' for the clear button.

The tool assists in writing JavaScript by generating methods for calculator operations based on the developer's input.

Event delegation is set up using Copilot's suggestions, allowing for the handling of click events on calculator buttons.

Despite a minor oversight of not including the JavaScript file in the HTML, the overall development process with Copilot is efficient and effective.

In contrast to ChatGPT, GitHub Copilot provides more accurate and contextually relevant suggestions, requiring fewer prompts to achieve the desired outcome.

Jeremy McPeak highly recommends GitHub Copilot for daily use, especially for those who write code professionally.