Author name: ITMAITY

tech blog

GitHub Copilot: Meet the new coding agent

We are excited to introduce a new coding agent for GitHub Copilot. Embedded directly into GitHub, the agent starts its work when you assign a GitHub issue to Copilot or prompt it in VS Code. The agent spins up a secure and fully customizable development environment powered by GitHub Actions.  As the agent works, it pushes commits to a draft pull request, and you can track it every step of the way through the agent session logs. Having Copilot on your team doesn’t mean weakening your security posture – existing policies like branch protections still apply in exactly the way you’d expect. Plus, the agent’s pull requests require human approval before any CI/CD workflows are run, creating an extra protection control for the build and deployment environment.  Using state-of-the-art models, the agent excels at low-to-medium complexity tasks in well-tested codebases, from adding features and fixing bugs to extending tests, refactoring code, and improving documentation. You can hand off the time-consuming, but boring tasks to Copilot that will use pull requests, CI/CD, and all of your existing tooling while you focus on the interesting work. A detailed look To run the new coding agent, assign one or more GitHub issues to Copilot. It’s as easy as that. You can do this on github.com, in GitHub Mobile, or through the GitHub CLI, just as you would assign the same issue to one of your team members or yourself. You can also ask Copilot to open a pull request from Copilot Chat on GitHub or right in VS Code like this: > @github Open a pull request to refactor this query generator into its own class Once an issue is assigned to it, the agent adds an 👀 emoji reaction and starts its work in the background. It boots a virtual machine, clones the repository, configures the environment, and analyzes the codebase with advanced retrieval augmented generation (RAG) powered by GitHub code search. As the agent works, it regularly pushes its changes to a draft pull request as git commits and updates the pull request’s description. Along the way, you’ll see the agent’s reasoning and validation steps in the session logs, making it easy to trace decisions and spot issues.  With the power of Model Context Protocol (MCP), you can give the coding agent access to data and capabilities from outside of GitHub. MCP servers can be configured in the repository’s settings. And, of course, all your GitHub data can be pulled in from the official GitHub MCP Server. And the agent isn’t limited to just text – thanks to the power of vision models, it can see images included in GitHub issues you assign to it, so you can share screenshots of a bug or mockups of what your new feature should look like. Once Copilot is done, it’ll tag you for review and you can leave comments asking for it to make changes. It will pick those comments up automatically and propose code changes. The agent also incorporates context from related issue or PR discussions and follows any custom repository instructions, allowing it to understand both the intent behind the task and the coding standards of the project.  The Copilot coding agent is opening up doors for human developers to have their own agent-driven team, all working in parallel to amplify their work. We’re now able to assign tasks that would typically detract from deeper, more complex work—allowing developers to focus on high-value coding tasks. James Zabinski, DevEx Lead at EY Integrated, configurable, and secure All SWE agents need a compute environment to do their work. For agent mode in VS Code, it’s the CPU of your PC or Mac, or a remote development container like GitHub Codespaces. When we started the work on Project Padawan, there was only one answer to which cloud compute we should use: GitHub Actions. Introduced in 2018, Actions is the largest CI/CD ecosystem in the world with more than 25,000 actions in the GitHub Marketplace. Every weekday, GitHub-hosted and self-hosted runners execute more than 40 million daily jobs. Open source projects, startups, and large enterprises all rely on GitHub Actions to run their build, test, and deploy workloads. Our coding agent is designed from the ground up to keep your project secure and ensures that its work gets a review before it goes to production. The following policies are applied by default: The agent can only push to branches it created, keeping your default branch and the ones your team created safe and secure The developer who asks the agent to open a pull request cannot be the one to approve it – so any “required reviews” rule you have set up in your repository will be honored  The agent’s internet access is tightly limited to a trusted list of destinations that you can customize GitHub Actions workflows won’t run without your approval, giving you the chance to spot-check the agent’s code Existing repository rulesets and organization policies are considered as well. The GitHub Copilot coding agent fits into our existing workflow and converts specifications to production code in minutes. This increases our velocity and enables our team to channel their energy toward higher-level creative work. Alex Devkar, Senior Vice President, Engineering and Analytics, Carvana Get started today The new coding agent is available to all Copilot Enterprise and Copilot Pro+ customers. All you need to get started is enabling the agent in the repositories where you want to use it, and if you’re a Copilot Enterprise user, an administrator will need to turn on the policy too. Additionally, you can now activate agent mode in more IDEs, including Xcode, Eclipse, Jetbrains, and Visual Studio. Beginning June 4, 2025, Copilot coding agent will use one premium request per model request the agent makes.  Whether it’s code completions, next edit suggestions, chat, agent mode, or now coding agent, GitHub Copilot has always had one mission: To keep you in the magical flow state. To do the things you don’t want to do, so you have

tech blog

Redefining AI Connectivity with Dell’s Optimized Infrastructure

Discover how Dell’s optimized infrastructure revolutionizes AI connectivity, driving agility, scalability and unparalleled productivity.   ​  ​Discover how Dell’s optimized infrastructure revolutionizes AI connectivity, driving agility, scalability and unparalleled productivity. AI Solutions Blog | Dell

tech blog

Now Shipping: Dell AI Platform with Intel

Introducing Dell AI Platform with Intel, powered by Intel Gaudi 3 AI accelerators, the latest addition to the Dell AI Factory.   ​  ​Introducing Dell AI Platform with Intel, powered by Intel Gaudi 3 AI accelerators, the latest addition to the Dell AI Factory. AI Solutions Blog | Dell

tech blog

The Road to an AI Revolution

Michael Dell takes a trip into a ‘golden hour of progress’.   ​  ​Michael Dell takes a trip into a ‘golden hour of progress’. Artificial Intelligence Blog | Dell

tech blog

Microsoft Build 2025: The age of AI agents and building the open agentic web

TL;DR? Hear the news as an AI-generated audio overview made using Microsoft 365 Copilot. You can read the transcript here.   https://msblogs.thesourcemediaassets.com/2025/05/Build2025_OMB_AI-generated_AudioOverview_Final.mp3 We’ve entered the era of AI agents. Thanks to groundbreaking advancements in reasoning and memory, AI models are now more capable and efficient, and we’re seeing how AI systems can help us all solve problems in new ways. For example, 15 million developers are already using GitHub Copilot, and features like agent mode and code review are streamlining the way they code, check, deploy and troubleshoot. Hundreds of thousands of customers are using Microsoft 365 Copilot to help research, brainstorm and develop solutions, and more than 230,000 organizations — including 90% of the Fortune 500 — have already used Copilot Studio to build AI agents and automations. Companies like Fujitsu and NTT DATA are using Azure AI Foundry to build and manage AI apps and agents that help prioritize sales leads, speed proposal creation and surface client insights. Stanford Health Care is using Microsoft’s healthcare agent orchestrator to build and test AI agents that can help alleviate the administrative burden and speed up the workflow for tumor board preparation. Developers are at the center of it all. For 50 years Microsoft has been empowering developers with tools and platforms to turn their ideas into reality, accelerating innovation at every stage. From AI-driven automation to seamless cloud integration and more, it’s exciting to see how developers are fueling the next generation of digital transformation. So, what’s next? We envision a world in which agents operate across individual, organizational, team and end-to-end business contexts. This emerging vision of the internet is an open agentic web, where AI agents make decisions and perform tasks on behalf of users or organizations. At Microsoft Build we’re showing the steps we’re taking to make this vision a reality through our platforms, products and infrastructure. We’re putting new models and coding agents in the hands of developers, introducing enterprise-grade agents, making our platforms like Azure AI Foundry, GitHub and Windows the best places to build, embracing open protocols and accelerating scientific discovery with AI, all so that developers and organizations can go invent the next big thing. Here’s a glimpse at just a few of the announcements today: Reimagining the software development lifecycle with AI AI is fundamentally shifting how code is written, deployed and maintained. Developers are using AI to stay in the flow of their environment longer and to shift their focus to more strategic tasks. And as the software development lifecycle is being transformed, we’re providing new features across platforms including GitHub, Azure AI Foundry and Windows that enable developers to work faster, think bigger and build at scale. GitHub Copilot coding agent and new updates to GitHub Models: GitHub Copilot is evolving from an in-editor assistant to an agentic AI partner with a first-of-its-kind asynchronous coding agent integrated into the GitHub platform. We’re adding prompt management, lightweight evaluations and enterprise controls to GitHub Models so teams can experiment with best-in-class models, without leaving GitHub. Microsoft is also open-sourcing GitHub Copilot Chat in VS Code. The AI-powered capabilities from GitHub Copilot extensions will now be part of the same open-source repository that drives the world’s most popular development tool. As the home of over 150 million developers, this reinforces our commitment to open, collaborative, AI-powered software development. Learn more about GitHub Copilot updates. Introducing Windows AI Foundry: For developers, Windows remains one of the most open and widely used platforms available, with scale, flexibility and growing opportunity. Windows AI Foundry offers a unified and reliable platform supporting the AI developer lifecycle across training and inference. With simple model APIs for vision and language tasks, developers can manage and run open source LLMs via Foundry Local or bring a proprietary model to convert, fine-tune and deploy across client and cloud. Windows AI Foundry is available to get started today. To learn more visit our Windows Developer Blog. Azure AI Foundry Models and new tools for model evaluation: Azure AI Foundry is a unified platform for developers to design, customize and manage AI applications and agents. With Azure AI Foundry Models, we’re bringing Grok 3 and Grok 3 mini models from xAI to our ecosystem, hosted and billed directly by Microsoft. Developers can now choose from more than 1,900 partner-hosted and Microsoft-hosted AI models, while managing secure data integration, model customization and enterprise-grade governance. We’re also introducing new tools like the Model Leaderboard, which ranks the top-performing AI models across different categories and tasks, and the Model Router, designed to select an optimal model for a specific query or task in real-time. Read more about Azure AI Foundry Models. Making AI agents more capable and secure AI agents are not only changing how developers build, but how individuals, teams and companies get work done. At Build, we’re unveiling new pre-built agents, custom agent building blocks, multi-agent capabilities and new models to help developers and organizations build and deploy agents securely to help increase productivity in meaningful ways. With the general availability of Azure AI Foundry Agent Service, Microsoft is bringing new capabilities to empower professional developers to orchestrate multiple specialized agents to handle complex tasks, including bringing Semantic Kernel and AutoGen into a single, developer-focused SDK and Agent-to-Agent (A2A) and Model Context Protocol (MCP) support. To help developers build trust and confidence in their AI agents, we’re announcing new features in Azure AI Foundry Observability for built-in observability into metrics for performance, quality, cost and safety, all incorporated alongside detailed tracing in a streamlined dashboard. Learn more about how to deploy enterprise-grade AI agents in Azure AI Foundry Service. Discover, protect and govern in Azure AI Foundry: With Microsoft Entra Agent ID, now in preview, agents that developers create in Microsoft Copilot Studio or Azure AI Foundry are automatically assigned unique identities in an Entra directory, helping enterprises securely manage agents right from the start and avoid “agent sprawl” that could lead to blind spots. Apps and agents built with Foundry further benefit from Purview data security and compliance controls. Foundry also offers enhanced

tech blog

Vibe coding: Your roadmap to becoming an AI developer

Editor’s note: This piece was originally published in our LinkedIn newsletter, Branching Out_. Sign up now for more career-focused content >  Pop quiz: What do healthcare, self-driving cars, and your next job all have in common?  If you guessed AI, you were right. And with 80% of developers expected to need at least a fundamental AI skill set by 2027, there’s never been a better time to dive into this field. This blog will walk you through what you need to know, learn, and build to jump into the world of AI—using the tools and resources you already use on GitHub.  Let’s dive in. 1. Learn essential programming languages and frameworks 💬 Mastering the right programming languages and tools is foundational for anyone looking to excel in AI and machine learning development. Here’s a breakdown of the core programming languages to zero in on: Python: Known for its simplicity and extensive library support, Python is the cornerstone of AI and machine learning. Its versatility makes it the preferred language for everything from data preprocessing to deploying AI models. (Fun fact: Python overtook JavaScript as the number one programming language in 2024!) Java: With its scalability and cross-platform capabilities, Java is popular for enterprise-level applications and large-scale AI systems. C++: As one of the fastest programming languages, C++ is often used in performance-critical applications like gaming AI, real-time simulations, and robotics. Beyond programming, these frameworks give you the tools to design, train, and deploy intelligent systems across real-world applications: TensorFlow: Developed by Google, TensorFlow is a comprehensive framework that simplifies the process of building, training, and deploying AI models. Keras: Built on top of TensorFlow, Keras is user-friendly and enables quick prototyping. PyTorch: Favored by researchers for its flexibility, PyTorch provides dynamic computation graphs and intuitive debugging tools. Scikit-learn: Ideal for traditional machine learning algorithms, Scikit-learn offers efficient tools for data analysis and modeling. Spoiler alert: Did you know you can learn programming languages and AI frameworks right on GitHub? Resources like GitHub Learning Lab, The Algorithms, TensorFlow Tutorials, and PyTorch Examples provide hands-on opportunities to build your skills. Plus, tools like GitHub Copilot provide real-time coding assistance that can help you navigate new languages and frameworks easily while you get up to speed.  2. Master machine learning 🤖 Machine learning (ML) is the driving force behind modern AI, enabling systems to learn from data and improve their performance over time. It bridges the gap between raw data and actionable insights, making ML expertise a must-have if you’re looking for a job in tech. Here are some key subfields to explore: Deep learning: A subset of ML, deep learning uses multi-layered neural networks to analyze complex patterns in large datasets. While neural networks are used across ML, deep learning focuses on deeper architectures and powers advancements like speech recognition, autonomous vehicles, and generative AI models. Natural language processing (NLP): NLP enables machines to understand, interpret, and respond to human language. Applications include chatbots, sentiment analysis, and language translation tools like Google Translate. Computer vision: This field focuses on enabling machines to process and interpret visual information from the world, such as recognizing objects, analyzing images, and even driving cars. Luckily, you can explore ML right on GitHub. Start with open source repositories like Awesome Machine Learning for curated tools and tutorials, Keras for deep learning projects, NLTK for natural language processing, and OpenCV for computer vision. Additionally, try real-world challenges by searching for Kaggle competition solutions on GitHub or contribute to open source AI projects tagged with “good first issue” to gain hands-on experience.  3. Build a GitHub portfolio to showcase your skills 💼 A strong GitHub portfolio highlights your skills and AI projects, setting you apart in the developer community. Here’s how to optimize yours: Organize your repositories: Use clear names, detailed README files, and instructions for others to replicate your work. Feature your best work: Showcase projects in areas like NLP or computer vision, and use tags to improve discoverability. Create a profile README: Introduce yourself with a professional README that includes your interests, skills, and standout projects. Use GitHub Pages: Build a personal site to host your projects, case studies, or interactive demos. Contribute to open source: Highlight your open source contributions to show your collaboration and technical expertise. For detailed guidance, check out the guides on Building Your Stunning GitHub Portfolio and How to Create a GitHub Portfolio. 4. Get certified in GitHub Copilot 🏅 Earning a certification in GitHub Copilot showcases your expertise in leveraging AI-powered tools to enhance development workflows. It’s a valuable credential that demonstrates your skills to employers, collaborators, and the broader developer community. Here’s how to get started: Understand GitHub Copilot: GitHub Copilot is an AI agent designed to help you write code faster and more efficiently. Familiarize yourself with its features, such as real-time code suggestions, agent mode in Visual Studio Code, model context protocol (MCP), and generating boilerplate code across multiple programming languages. Explore certification options: GitHub offers certification programs through its certification portal. These programs validate your ability to use GitHub tools effectively, including GitHub Copilot. They also cover key topics like AI-powered development, workflow automation, and integration with CI/CD pipelines. Prepare for the exam: Certification exams typically include theoretical and practical components. Prepare by exploring GitHub Copilot’s official documentation, completing hands-on exercises, and working on real-world projects where you utilize GitHub Copilot to solve coding challenges. Earn the badge: Once you complete the exam successfully, you’ll receive a digital badge that you can showcase on LinkedIn, your GitHub profile, or your personal portfolio. This certification will enhance your resume and signal to employers that you’re equipped with cutting-edge AI development tools. Check out this LinkedIn guide for tips on becoming a certified code champion with GitHub Copilot.  Source Ready to begin? The AI revolution is calling, and it needs developers like you! There’s no better time to dive in and get started, as new models and capabilities are launching every day. For example, GitHub Copilot now offers

tech blog

Code. Create. Commit. Welcome to dev/core

What does it mean to be a developer? That question was at the heart of our thinking behind the new GitHub Shop collection: dev/core. The collection celebrates the developer’s layered experience—from the code, through the world of creation, to the unique identity of you, the developer, the builder, the person at the core of it all.  Ok, that sounds poetic, we hear you say. But how does that translate into merch? Our dev/core collection captures what it is to be a developer but also brings an exciting update to our core basics. Made by developers, for developers. Let’s dive into it.  A developer from head to toe The <header> cap and <footer> socks are for those who know their way around a codebase—and an outfit. The cap kicks things off, a nod to the top of every great project. Down below, the socks wrap things up with comfort. Together, they bookend your look the way you bookend your code. Getting back to the basics Inspired by the all-time favorite black Invertocat hoodie, these two new builds level up your dev uniform. One features our iconic Octocat mascot reimagined in ASCII. The other reps GitHub Copilot, your favorite AI pair programmer. One nods to our roots as developers. The other looks to what’s next. For when your brain hits Ctrl+Alt+Vibes Throw it back to your first build—when the code was janky, the caffeine was flowing, and the dream was big. This tie-dye tee channels that raw, colorful chaos that got you into being a dev in the first place. It’s got startup energy. Garage band energy. “I learned CSS on a forum in 2004” energy. The graph you obsess over (now in tote form) There’s something deeply satisfying about watching your contribution graph fill up day by day, square by square, with every commit and small (or large) breakthrough. This tote celebrates that love with a contribution graph in the shape of our Invertocat, worn proudly on your side.  Write code, wear code The ASCII tee is a tribute to the early days of building—when text was all you had and all you needed. It’s a direct tribute to the roots of development—where every line of code is a building block. Look familiar? You might recognize it from thegithubshop.com homepage, where we’ve created your very own interactable version. You can spin it, shake it, fidget with it— perfect for when your stand-up is getting a little dull.  Made for developers, by developers Developers are at the heart of what we do, because they’re the core of who we are. Our shop isn’t just a shop. It’s also chock-full of fun developer finds, and we’re not just talking about the swag now. We’ve even added a hidden CLI: type git [space] into the search bar. Have fun! In our dev/core collection, you can mix and match to create new patterns on our images by tapping on the dev/core pill. This unlocks a tool palette to customize the ASCII pattern, size, and speed. The dev/core collection is more than merch—it’s a wearable nod to the builders, the dreamers, and the committers who shape the internet every day. From the clean lines of ASCII art to the playful and colorful additions, each piece is carefully designed for you. So whether you’re pushing code, sipping coffee, or staring into the abyss of your terminal, suit up in something that gets it. This is your core.  🤫 Psst… use the code “GITHUBBLOG15” at checkout to get free shipping from today until June 1. Your laptop’s looking a bit bare, btw. We’ve dropped a few new stickers in the mix too—just saying. Check out the dev/core collection at thegithubshop.com.  The post Code. Create. Commit. Welcome to dev/core appeared first on The GitHub Blog. ​ Company news, News & insights, GitHub Shop The GitHub Blog

tech blog

Real‑world video demo: Using different AI models in GitHub Copilot

Claude 3.7 Sonnet, Gemini 2.5 Pro, GPT-4… developer choice is key to GitHub Copilot, and that’s especially true when it comes to picking your frontier model of choice.  But with so many frontier generative AI models now available to use with GitHub Copilot (and more coming seemingly every day), how do you pick the right one for the job—especially with the growing capabilities of Copilot Chat, edit, ask, and agent modes? In a recent video, I worked with GitHub’s Developer Advocate Kedasha Kerr (aka @ladykerr) to answer this exact question. Our goal? To build the same travel‑reservation app three different ways with Copilot ask, edit, and agent modes while swapping between Copilot’s growing roster of foundation models to compare each AI model in real-world development workflows.  We set out to build a very simple travel‑reservation web app (think “browse hotel rooms, pick dates, book a room”). To keep the demo snappy, we chose a lightweight stack: Backend: Flask REST API Frontend: Vue.js, styled with Tailwind Data: a local  data.json file instead of a real database That gave us just enough surface area to compare models while scaffolding the app, wiring up endpoints, and adding tests, docs, and security tweaks along the way .  Here are a few key takeaways from our video (which you should watch).  But first, let’s talk about Copilot’s three modes GitHub Copilot gives you three distinct “modes:” ask, edit, and agent mode.  Ask is there to answer questions, edit is a precise code‑rewriting scalpel, and agent mode can drive an entire task from your prompt to the finished commit. Think of it this way: Ask answers, edit assists, agent executes.  What it does (nuts & bolts) Ideal moments to reach for it Ask mode Analyzes the code you highlight (or the context of your open file) and returns explanations, examples, or quick fixes without touching your code. No diffs, and no saving. It’s just conversational answers. • Debug a puzzling stack trace• Refresh your memory on a library or pattern• Grab a snippet or algorithm on the fly Edit mode You select one or more files, describe a change in a plain-language prompt, and Copilot applies inline edits across those files. But first, it shows you a diff, so you can approve every change. • Add error handling or refactor repetitive code• Tight, multi‑file tweaks in a brown‑field codebase• Apply team style rules via custom instructions Agent mode Feed it a high‑level prompt and Copilot plans steps, runs terminal commands, edits multiple files, and keeps iterating autonomously while surfacing risky commands for review. Great for project‑wide, multi‑step work. • Scaffold a new service or feature from a README• Large bug fixes that touch many modules• Automated clean ups (e.g., migrate to Tailwind everywhere) Learn more about ask, edit, and agent mode Tip 1: No matter what model you use, context matters more than you think The model you use is far from the only variable, and the context you offer your model of choice is often one of the most important elements.  That means the way you shape your prompt—and the context you provide Copilot with your prompt and additional files—makes a big difference in output quality. By toggling between capabilities, such as Copilot agent or edit mode, and switching models mid-session, we explored how Copilot responds when fed just the right amount of detail—or when asked to think a few steps ahead. Our demo underscores that different modes impact results, and thoughtful prompting can dramatically change a model’s behavior (especially in complex or ambiguous coding tasks).  The takeaway: If you’re not shaping your prompts and context deliberately, you’re probably leaving performance on the table. For a deeper dive into model choice, the guide “Which AI model should I use with GitHub Copilot?” offers a comprehensive breakdown. Tip 2: Copilot agent mode is a powerful tool Agent mode, which is still relatively new and evolving fast, allows Copilot to operate more autonomously by navigating files, making changes, and performing repository-wide tasks with minimal hand holding.  This mode opens up new workflow possibilities (especially for repetitive or large-scale changes). But it also demands a different kind of trust and supervision. Seeing it in action helps demystify where it fits in your workflows. Here are two ways we used agent mode in our demo:  One‑click project scaffolding: Kedasha highlighted the project README and simply told Copilot “implement this.” Agent mode (running Gemini 2.5 Pro) created the entire Flask and Vue repository with directories, boiler‑plate code, unit tests, and even seeded data.  End‑to‑end technical docs: I started using agent mode with Claude 3.5 and prompted: “Make documentation for this app … include workflow diagrams in Mermaid.” Copilot generated a polished README, API reference, and two Mermaid sequence/flow diagrams, then opened a preview so I could render the charts before committing . Tip 3: Use custom instructions to set your ground rules Another insight from the session is just how much mileage you can get from customizing Copilot’s behavior with custom instructions.  If you don’t know, custom instructions let you lay down the rules before Copilot suggests anything (like how APIs need to be called, naming conventions, and style standards).  Kedasha in particular underscored how custom instructions can tailor tone, code style, and task focus to fit your workflow—or your team’s.  One example? Using custom instructions to give every model the same ground rules, so swaps between each model produced consistent, secure code without re‑explaining standards each time. Whether you’re nudging Copilot to avoid over-explaining, stick to a certain stack, or adopt a consistent commenting voice, the customization options are more powerful than most people realize. If you haven’t personalized Copilot yet, try custom instructions (and check out our Docs on them to get started). Tip 4: The balance between speed vs. output quality No matter what model you use, there are always tradeoffs between responsiveness, completeness, and confidence. A larger model may not provide quick suggestions when you’re working through an edit, for instance—but a smaller model may not offer the best refactoring suggestions, even if it’s faster in practice.  TL;DR: It’s not about chasing the “best” model—it’s

tech blog

GitHub for Beginners: Building a React App with GitHub Copilot

Welcome to the next episode in our GitHub for Beginners series, where we’re diving into the world of GitHub Copilot. This is our sixth episode, and we’ve  covered quite a lot of ground. You can check out all our previous episodes on our blog or as videos. Today we’re going to use GitHub Copilot to help us build a frontend project using React. In the previous episode, we created a backend API for the travel itinerary builder, Planventure. We’ll continue that work and create a React client that leverages our API to interact with Planventure. To see a full description of what we’ll be building, go to this repository and switch to the client-start branch to get started. For the demos in this series, we’re using GitHub Copilot in Visual Studio Code. Copilot is available in other IDEs, but the available functionality may vary depending on your environment. content. What you’ll need Before we get started, here’s what you’ll need:  A code editor like VS Code The latest version of Node.js  A package manager like npm Access to GitHub Copilot — sign up for free!  Alternatively, you can use a GitHub Codespace to build in the cloud—you’ll still need Copilot access if you’re using a codespace. You can click the Open in GitHub Codespaces button in the repo. What we’re building We’re creating a frontend app that connects to the backend API we created in the previous episode. We’ll be using the React library, so it’s recommended that you’re familiar with using React to build client side applications. More specifically, we’ll be using: React with Vite for the client. Material UI as the component library. Our goal is to build a working frontend app that has the following features: Authenticate users Add protected routes Add trips and itinerary information Edit existing itineraries Let’s get started! Resolving errors Since Copilot is a generative AI assistant, you might get different results even when sending the same prompt multiple times. Because of this, it’s impossible to predict when you might receive errors or what those errors will be. If an error does appear at any point in this process, use Copilot Chat to help you debug and address the error. To do this, copy the error message, open Copilot Chat, enter @workspace /fix, and then paste the error message. Copilot will then attempt to find a suggested solution to your error. Review the suggested changes, and then try again. Step 1: Initial setup Before we get started, we need to create the appropriate working environment. Clone the Planventure repository by opening your terminal in your code editor and running the following command. git clone https://github.com/github-samples/planventure Navigate to the planventure-client directory and switch to the client-start branch. cd planventure-client git switch client-start Install necessary dependencies. npm install Start the server. npm run dev Open a browser to http://localhost:5173 to verify the app is running. Become familiar with the code by examining the existing files. Note that some basic components have already been installed and configured. Open Copilot Chat and send it the following prompt to get a basic summary of the existing code: @workspace Tell me about the configuration setup in the react app. Now that the initial setup is complete, take a look at the GitHub issue to read detailed information about what we need to build. Step 2: Create login and registration forms The first thing we need to add is authentication. We’ll do this by building login and registration forms. But first, we need to create an AuthLayout component to use for all authenticated routes. Open Copilot Chat and use the model selector to select the Claude Sonnet 3.5 model. Send Copilot the following prompt. @workspace Create AuthLayout component with navigation and centered content. Hover over the proposed solution, click …, and then select Insert into New File. Review the added code and save the file. You should always review the code provided by Copilot so that you understand what it is doing and make sure it addresses your prompt. Now that we’ve created the AuthLayout component, it’s time to build a login form to implement it. Send the following prompt to Copilot Chat. @workspace Build a LoginForm component with email/password fields and validation. Create a new folder named auth under the src/components folder. Navigate back to Copilot Chat, hover over the proposed solution, click …, and then select Insert into New File. Review the added code and save the file in the auth folder. Return to Copilot Chat and choose Edits from the dropdown. Use the Add Files button to add the following files if they are not already listed in the working set: AuthLayout.jsx LoginForm.jsx Routes.jsx Send Copilot Edits the following prompt. Create a new loginPage. Update route and authLayout as needed. Review and accept all the changes from Copilot Edits. Don’t forget to save your files. Send the following prompt to Copilot Edits to update the Home component. Update the navbar to use the new loginpage and add a get started button to the home page that routes to the login page. Review the code and make any necessary changes. Then save all of the updated files.  Navigate back to the browser page and refresh it to see the latest changes.  Commit your changes to the repository. You can use Copilot to automatically generate a commit message by clicking the sparkle button in the top-right corner of the commit message box. Now we have a Get started button on the UI and the login page. Next we need to create a sign up page so that new users can register. Open up Copilot Chat and send it the following prompt. @workspace Create SignupForm component matching the login form style and a new SignUpPage. Be sure to update routing. Hover over the proposed solution to add a SignupForm component in the auth folder, click …, and then select Insert into New File. Hover over the proposed solution to add a SignupPage component in the pages folder, click …,

tech blog

Documentation done right: A developer’s guide

With all the work involved in creating and maintaining a project, sometimes writing documentation can slip through the cracks. However, good docs are a huge asset to any project. Consider the benefits: Better collaboration: Clear, consistent documentation ensures everyone’s on the same page, from your immediate team to outside stakeholders. Additionally, docs promote independent problem solving, saving core contributors the time and effort of answering every question. Smoother onboarding: By providing ways to get started, explaining core concepts, and including tutorial-style content, good documentation allows new team members to ramp up quickly. Increased adoption: The easier it is to understand, set up, and run your project, the more likely someone will use it. With these benefits in mind, let’s take a look at some important principles of documentation, then dive into how you can quickly create effective docs for your project. Key tenets of documentation There are three key principles you should follow as you document your project. Keep it clear Use plain language that’s easy to understand. The goal is to make your documentation as accessible as possible. A good guideline is to ask yourself if there are any acronyms or technical terms in your documentation that some folks in your target audience won’t understand. If that’s the case, either swap them for simpler language, or make sure they’re defined in your document. Keep it concise Document only necessary information. Trying to cover every possible edge case will overwhelm your readers. Instead, write docs that help the vast majority of readers get started, understand core concepts, and use your project. Additionally, keep each document focused on a particular topic or task. If you find yourself including information that isn’t strictly necessary, move it into separate, smaller documents and link to them when it’s helpful. Keep it structured Consider the structure of each document as you write it to make sure it is easy to scan and understand: Put the most important information first to help readers quickly understand if a document is relevant to them. Use headings and a table of contents to tell your readers where to find specific information. We suggest using documentation templates with common headings to quickly and consistently create structured content. Use text highlighting like boldface and formatting elements like bulleted lists to help readers scan content. Aim for 10% or less text highlighting to make sure emphasized text stands out. Be consistent with your styling. For example, if you put important terminology in bold in one document, do the same in your other content. Organizing your documentation Just as there are principles to follow when writing individual documents, you should also follow a framework for organizing documents in your repo.  There are many approaches to organizing documentation in your repo, but one that we’ve used for several projects and recommend is the Diátaxis framework. This is a systematic approach to organizing all the documents relevant to your project.  Applying a systematic approach to documenting your repositories can make it easier for users to know where to go to find the information that they need. This reduces frustration and gets folks contributing to your project faster.  Diátaxis divides documents based on their purpose into four categories:  Tutorials: Learning-oriented documents How-to guides: Goal-oriented instructions for specific tasks Explanation: Discussions providing understanding of the project Reference: Technical specifications and information Each document in your repository should fit into one of these categories. This helps users quickly find the appropriate resource for their current situation, whether they need to learn a new concept, solve a specific problem, understand underlying principles, or look up technical details. This can also be a helpful guide to identify which documentation your repository is missing. Is there a tool your repository uses that doesn’t have a reference document? Are there enough tutorials for contributors to get started with your repository? Are there how-to guides to explain some of the common tasks that need to be accomplished within your repository?  Organizing your documentation according to this framework helps ensure you’re taking a holistic approach to building and maintaining key content for your project. Documenting your project Want to test out this framework and guidelines for yourself? Check out this example repository with a docs folder structure and documentation templates that you can copy into your own project. The post Documentation done right: A developer’s guide appeared first on The GitHub Blog. ​ Developer skills The GitHub Blog

tech blog

GitHub Issues search now supports nested queries and boolean operators: Here’s how we (re)built it

Originally, Issues search was limited by a simple, flat structure of queries. But with advanced search syntax, you can now construct searches using logical AND/OR operators and nested parentheses, pinpointing the exact set of issues you care about. Building this feature presented significant challenges: ensuring backward compatibility with existing searches, maintaining performance under high query volume, and crafting a user-friendly experience for nested searches. We’re excited to take you behind the scenes to share how we took this long-requested feature from idea to production. Here’s what you can do with the new syntax and how it works behind the scenes Issues search now supports building queries with logical AND/OR operators across all fields, with the ability to nest query terms. For example is:issue state:open author:rileybroughten (type:Bug OR type:Epic) finds all issues that are open AND were authored by rileybroughten AND are either of type bug or epic. How did we get here? Previously, as mentioned, Issues search only supported a flat list of query fields and terms, which were implicitly joined by a logical AND. For example, the query assignee:@me label:support new-project translated to “give me all issues that are assigned to me AND have the label support AND contain the text new-project.” But the developer community has been asking for more flexibility in issue search, repeatedly, for nearly a decade now. They wanted to be able to find all issues that had either the label support or the label question, using the query label:support OR label:question. So, we shipped an enhancement towards this request in 2021, when we enabled an OR style search using a comma-separated list of values. However, they still wanted the flexibility to search this way across all issue fields, and not just the labels field. So we got to work.  Technical architecture and implementation From an architectural perspective, we swapped out the existing search module for Issues (IssuesQuery), with a new search module (ConditionalIssuesQuery), that was capable of handling nested queries while continuing to support existing query formats. This involved rewriting IssueQuery, the search module that parsed query strings and mapped them into Elasticsearch queries. To build a new search module, we first needed to understand the existing search module, and how a single search query flowed through the system. At a high level, when a user performs a search, there are three stages in its execution: Parse: Breaking the user input string into a structure that is easier to process (like a list or a tree) Query: Transforming the parsed structure into an Elasticsearch query document, and making a query against Elasticsearch. Normalize: Mapping the results obtained from Elasticsearch (JSON) into Ruby objects for easy access and pruning the results to remove records that had since been removed from the database. Each stage presented its own challenges, which we’ll explore in more detail below. The Normalize step remained unchanged during the re-write, so we won’t dive into that one. Parse stage The user input string (the search phrase) is first parsed into an intermediate structure. The search phrase could include: Query terms: The relevant words the user is trying to find more information about (ex: “models”) Search filters: These restrict the set of returned search documents based on some criteria (ex: “assignee:Deborah-Digges”)  Example search phrase:  Find all issues assigned to me that contain the word “codespaces”: is:issue assignee:@me codespaces Find all issues with the label documentation that are assigned to me: assignee:@me label:documentation The old parsing method: flat list When only flat, simple queries were supported, it was sufficient to parse the user’s search string into a list of search terms and filters, which would then be passed along to the next stage of the search process. The new parsing method: abstract syntax tree As nested queries may be recursive, parsing the search string into a list was no longer sufficient. We changed this component to parse the user’s search string into an Abstract Syntax Tree (AST) using the parsing library parslet. We defined a grammar (a PEG or Parsing Expression Grammar) to represent the structure of a search string. The grammar supports both the existing query syntax and the new nested query syntax, to allow for backward compatibility. A simplified grammar for a boolean expression described by a PEG grammar for the parslet parser is shown below: class Parser < Parslet::Parser rule(:space) { match[” “].repeat(1) } rule(:space?) { space.maybe } rule(:lparen) { str(“(“) >> space? } rule(:rparen) { str(“)”) >> space? } rule(:and_operator) { str(“and”) >> space? } rule(:or_operator) { str(“or”) >> space? } rule(:var) { str(“var”) >> match[“0-9”].repeat(1).as(:var) >> space? } # The primary rule deals with parentheses. rule(:primary) { lparen >> or_operation >> rparen | var } # Note that following rules are both right-recursive. rule(:and_operation) { (primary.as(:left) >> and_operator >> and_operation.as(:right)).as(:and) | primary } rule(:or_operation) { (and_operation.as(:left) >> or_operator >> or_operation.as(:right)).as(:or) | and_operation } # We start at the lowest precedence rule. root(:or_operation) end For example, this user search string:is:issue AND (author:deborah-digges OR author:monalisa ) would be parsed into the following AST: { “root”: { “and”: { “left”: { “filter_term”: { “attribute”: “is”, “value”: [ { “filter_value”: “issue” } ] } }, “right”: { “or”: { “left”: { “filter_term”: { “attribute”: “author”, “value”: [ { “filter_value”: “deborah-digges” } ] } }, “right”: { “filter_term”: { “attribute”: “author”, “value”: [ { “filter_value”: “monalisa” } ] } } } } } } } Query Once the query is parsed into an intermediate structure, the next steps are to: Transform this intermediate structure into a query document that Elasticsearch understands Execute the query against Elasticsearch to obtain results Executing the query in step 2 remained the same between the old and new systems, so let’s only go over the differences in building the query document below. The old query generation: linear mapping of filter terms using filter classes Each filter term (Ex: label:documentation) has a class that knows how to convert it into a snippet of an Elasticsearch query document. During query document generation, the correct class for each filter term is invoked

Scroll to Top