
Imagine being in the final stages of a critical project. Everything seems on track, but a bug surfaces, throwing the entire schedule into chaos. According to a study by the [IBM System Science Institute](https://www.researchgate.net/figure/IBM-System-Science-Institute-Relative-Cost-of-Fixing-Defects_fig1_255965523), the cost to fix a bug found after product release can be up to 6 times higher than if caught during the design phase. This scenario is all too common in software development.

Catching bugs late in the development process is frustrating and costly. As renowned software developer [Martin Fowler](https://www.martinfowler.com/) once said, "*Any fool can write code that a computer can understand. Good programmers write code that humans can understand.*" Unit testing ensures that code is functional, maintainable, and reliable.

This guide on unit testing will explain why writing unit tests matters, discuss the different unit-test frameworks available, how unit-testing practices have evolved, and provide some pro tips for writing maintainable unit tests. It will also show how [Cody](https://sourcegraph.com/cody) can enhance the whole process.

Now, let’s break down the details.

Before we discuss the unit test framework, let’s understand why unit tests matter.

Unit testing is the practice of isolating individual units or functions of your code. A "**unit**" refers to the smallest testable part of an application, such as a function, method, or class.
Testing at the unit level ensures that each "**unit**" of your software works correctly. If issues occur, they can be fixed early, saving time and resources.

Unit tests also serve as documentation, providing insight into what the code should do. This is important for future maintenance and other developers who might work on the project. Unit testing frameworks facilitate writing, executing, and managing tests by providing tools and frameworks.

These tools and frameworks offer developers a way to test single functions, often through assert statements or method attributes, and determine whether the test method has passed or failed.

Popular frameworks include:

- **JUnit (Java):** [JUnit](https://www.javatpoint.com/junit-tutorial) is widely used to write repeatable tests for units of code in Java.
- **Jest (JavaScript):** [Jest](https://jestjs.io/) is a popular testing framework for JavaScript, known for its simplicity and powerful features.
- **PyTest (Python):** [Pytest](https://pytest.org/) is a versatile framework for writing simple and scalable test cases in Python.
- **Testing (Golang):** The standard [Go testing](https://pkg.go.dev/testing) framework is designed to integrate seamlessly with Golang's ecosystem.

These frameworks offer features like test discovery, setup and teardown mechanisms, and rich assertion libraries, making it easier to implement and maintain tests for a wide range of software. Next, let's break down the key components of a unit test.

## Deconstructing a unit test

A typical unit test has three key components, each testing the application's functional behavior.

1. **Arrange:** This is the phase where you set up the initial state for the test. A good unit test focuses on a single state change, so the **arrange** step prepares the necessary input and the environment for the test.

2. **Act:** The **Act** component executes the state change or computation. The actual operation or method being tested is executed with the predefined inputs from the **Arrange** phase. For example, the `FindClosestBanks` function can be triggered with the input, as shown in the code snippet below.

3. **Assert:** Assert verifies that the code behaves as expected and checks if the output matches the expected behavior. If the code behaves as anticipated, your test passes; if not, it's back to the drawing board.

Let's look at an example of a **unit test in Golang** using the [testing package](https://pkg.go.dev/testing), illustrating the three components of a unit test:

```go
    func TestFindClosestBanks(t *testing.T) {
        // Arrange
        banks := []Bank{
            {Name: "Bank A", X: 1, Y: 1},
            {Name: "Bank B", X: 2, Y: 2},
            {Name: "Bank C", X: 5, Y: 7},
        }
        expected := "Bank A"
    
        // Act
        result := FindClosestBanks(banks, 1, 1)
    
        // Assert
        if result != expected {
            t.Errorf("expected %v, got %v", expected, result)
        }
    }
```

In this example, the three components of a unit testing process are implemented:

- **Arrange:** The `banks` slice and the `expected` result are set up.
- **Act:** The `FindClosestBanks` function is called with the input.
- **Assert:** The function's result is compared with the expected value using `t.Errorf` if they do not match.

Understanding these components is important for writing effective unit tests. Next, let's review the advantages of unit testing to the development process.

## Advantages of unit testing

The essence of code testing, especially unit testing, goes beyond just verifying the basic functionality of an application; they include:

- **Improved code maintainability:** Unit tests serve as living documentation for your code, making it easier for new developers to understand and modify the codebase. They highlight the intended use of the code and ensure that future changes don't introduce new issues.

- **Faster development cycles:** With unit tests in place, developers can refactor code confidently, knowing that breaking changes will be caught early. This leads to more efficient and fearless coding.

- **Early bug detection:** Unit tests help identify bugs early by testing individual components of the application in isolation, reducing the cost and effort required to fix them.

- **Safety net for refactoring:** As the [codebase](https://sourcegraph.com/blog/how-cody-provides-remote-repository-context) matures, refactoring becomes essential. Unit tests act as a safety net during this process, allowing the development team to improve the code without fear of introducing regressions.

![Advantages of unit testing](https://storage.googleapis.com/sourcegraph-assets/blog/gp-how-to-write-unit-tests/image_001.png)

Some developers might underestimate the importance of unit testing, but let's consider the consequences of discovering bugs late in the development cycle:

- **Costly fixes**: Bugs become embedded in the codebase over time. Fixing them later requires modifying multiple sections, leading to a domino effect of changes and additional testing, increasing development costs and time.

- **Time crunch and pressure:** With deadlines looming, fixing late-stage bugs creates pressure to rush out a potentially flawed product. This can lead to cutting corners on testing and a high risk of regressions (new bugs introduced by fixes).

- **Quality and reputation at stake:** Bugs discovered by users after release damage the product's quality and user experience. Frequent updates can affect the brand's trust and lead to costly rework.

## Evolution of unit testing practices

As software development evolved, so did unit testing practices. From manual testing to sophisticated mocking frameworks and comprehensive code coverage tools, it is improving to address complex software architectures and agile development demands.

![Evolution of unit testing](https://storage.googleapis.com/sourcegraph-assets/blog/gp-how-to-write-unit-tests/image_002.png)

1. **Early days:** [Manual testing](https://www.browserstack.com/guide/manual-testing-tutorial) was the norm, which involved manually reviewing and testing software, simulating the behavior of a real user, and identifying errors without using automated tools.

2. **Rise of frameworks:** Dedicated testing tools and frameworks emerged, like [JUnit](https://junit.org/junit5/) and [NUnit](https://nunit.org/), providing structure and automation. This boosted efficiency and repeatability.

3. **Focus on mocks and stubs:** [Mocking frameworks](https://www.telerik.com/products/mocking/unit-testing.aspx) became popular, allowing developers to simulate dependencies on mock objects (databases, external services) and isolate units for better testing.

4. **Test-driven development (TDD):** This approach refined the typical development process by having developers write tests before implementing the code.

5. **Modern era:** [AI-powered assistants](https://sourcegraph.com/blog/how-to-choose-the-ai-coding-assistant-that-works-best-for-your-engineering-team) like [Cody](https://sourcegraph.com/cody) are on the scene, providing automated unit tests, identifying edge cases, and streamlining development workflows.

To effectively write good unit tests and maintain them, let’s look into the practical tips for creating effective and maintainable unit tests, including code snippets that demonstrate various scenarios (positive, negative, and edge cases)

## How to write good and maintainable unit tests

Below are practical tips and strategies for writing unit tests that check code functionality and ensure long-term maintainability:

- **Naming:** The unit test's name should clearly describe its purpose. You should be able to understand the method's behavior from the test name without looking at the code. This supports documentation and readability. When tests fail, you can easily detect which scenarios are not executing correctly. The name of the unit test should include the method being tested, the testing scenario, and the expected behavior.

- **Use AAA pattern:** Follow the [Arrange-Act-Assert](https://automationpanda.com/2020/07/07/arrange-act-assert-a-pattern-for-writing-good-tests/) (AAA) pattern to ensure tests produce consistent results given the same inputs. Avoid external dependencies and states that can lead to unreliable or inconsistent results.

- **Readable:** Tests should be easy to understand and act as documentation for the code. Use clear naming conventions and organize tests logically.

**Different types of unit test scenarios**
Unit tests include diverse scenarios, from positive and negative to edge cases. Each scenario validates code behavior under specific circumstances.

**Positive scenario**
The positive scenario tests the `add` function with typical input values (`1` and `2`). It verifies that the function returns the expected result of `3` under normal conditions.

```go
    func TestPositiveAdd(t *testing.T) { 
      result := add(1, 2) 
      if result != 3 { 
        t.Errorf("Expected 3, but got %d", result)
      }
    }
```

**Negative scenario**
For a negative scenario, the `add` function is tested with unexpected inputs, such as a string (`"1"`) instead of an integer. This test ensures that the function correctly handles such cases by expecting a panic, thus validating error-handling mechanisms.

```go
    func TestAddNegative(t *testing.T) {
      defer func() { 
        if r := recover(); r == nil { 
            t.Errorf("Expected panic for adding string and int") } }() add("1", 2) }
```

**Edge case**
The edge case scenario tests the `add` function with boundary conditions, specifically both operands set to `0`.

```go
    func TestEdgeAdd(t *testing.T) { 
      result := add(0, 0) 
      if result != 0 { 
      t.Errorf("Expected 0, but got %d", result) 
      } 
    }
```

After defining test scenarios, the next step is to run the unit tests and interpret the results, identifying whether tests have passed or failed.

## Running unit tests and interpreting results

Running unit tests is straightforward with most frameworks. To run **unit tests in Go** using the testing framework, navigate to your project directory that contains the test and run the `go test` command:

```bash
    go test
```

To understand the result, unit test outcomes are categorized into two:

- **Passed tests:** When the unit test execution is passed, it confirms that the application code functions as intended. Look for a green checkmark or similar indicator to denote success.

- **Failed tests:** A failed test signals an issue that needs attention. Go provides detailed error messages pinpointing the exact failed assertion and the values involved.

You can automate the entire manual process of writing unit tests and create a maintainable test using Cody; let’s see how Cody can optimize and simplify this process.

## Simplifying unit testing with Cody

Manual unit testing can be time-consuming, especially for developers working with large codebases. It's easy to miss crucial edge cases that could lead to bugs. This is where [Cody, Sourcegraph's AI coding assistant](https://sourcegraph.com/cody), comes in. Cody streamlines unit testing with [automation features](https://sourcegraph.com/docs/cody/capabilities), making the process more efficient and helping developers catch potential issues quickly.

**To begin using Cody:**

- Sign up for a [Sourcegraph](https://sourcegraph.com/) account using your preferred authentication method—GitHub, GitLab, or Google.
- Install Cody for [VS Code](https://marketplace.visualstudio.com/items?itemName=sourcegraph.cody-ai), IntelliJ, or Neovim.

![Sign in to Cody](https://storage.googleapis.com/sourcegraph-assets/blog/gp-how-to-write-unit-tests/image_003.png)

Let's use a **Go word search program** as an example. It includes a function that takes in three letters to find a word stored in a slice of words, as shown below:

```go
    package main
    import (
        "bufio"
        "fmt"
        "os"
        "strings"
    )
    func searchWords(words []string, query string) []string {
        var results []string
        for _, word := range words {
            if strings.Contains(word, query) {
                results = append(results, word)
            }
        }
        return results
    }
    func main() {
        words := []string{"apple", "banana", "cherry",  "elderberry", "fig", "grape", "honeydew", "kiwi", "lemon"}
        scanner := bufio.NewScanner(os.Stdin)
        fmt.Println("Enter three letters to search for a word:")
        scanner.Scan()
        query := scanner.Text()
        if len(query) != 3 {
            fmt.Println("Please enter exactly three letters.")
            return
        }
        results := searchWords(words, query)
        if len(results) > 0 {
            fmt.Println("Words found:")
            for _, result := range results {
                fmt.Println(result)
            }
        } else {
            fmt.Println("No words found containing the given letters.")
        }
    }
```

Once Cody is installed and set up in your development environment, you can leverage its capabilities to generate unit tests for this Go program.

**Writing unit tests with Cody**
Let’s generate unit tests for the **Go search program** described above in the code snippet by following these steps:

1. **Generate unit tests**: Open your Go program in your code editor where Cody is installed. Use Cody's **COMMANDS** in the editor, as shown below, to **Generate Unit Tests** for the `searchWords` function.

![Generating unit tests](https://storage.googleapis.com/sourcegraph-assets/blog/gp-how-to-write-unit-tests/image_004.png)

Cody analyzes the function and automatically generates comprehensive unit test cases, ensuring thorough coverage of various input scenarios. The next step is to review the generated test for modification.

1. **Review generated tests**: Cody provides a set of unit tests you can review and modify if necessary. These tests help ensure the `searchWords` function behaves as expected under different conditions.

![Go program](https://storage.googleapis.com/sourcegraph-assets/blog/gp-how-to-write-unit-tests/image_005.png)

1. **Code analysis**: After the modification, Cody can perform code analysis to detect any syntax errors, code style violations, and other potential issues without executing the code. This helps maintain code quality and consistency.

![Code analysis](https://storage.googleapis.com/sourcegraph-assets/blog/gp-how-to-write-unit-tests/image_006.png)

1. **Execute tests**: Finally, you can run the generated unit tests directly from the command-line interface using the `go test` framework CLI for Go. Cody integrates with popular testing frameworks, ensuring your tests are executed efficiently.

![Using Go test](https://storage.googleapis.com/sourcegraph-assets/blog/gp-how-to-write-unit-tests/image_007.png)

## Wrapping up

Unit testing ensures code quality, maintainability, and reliability in software development. Using tools like Cody, developers can master unit testing and enhance their development workflows all the way to production.

Remember, effective [unit testing](https://sourcegraph.com/blog/how-to-write-unit-tests-for-svelte-web-apps) is not just about writing tests – it's about creating a culture of quality and confidence in your codebase.

To explore more features on how Cody can streamline your unit testing process, [sign up](https://sourcegraph.com/cody) [for a free forever account](https://sourcegraph.com/cody) and take your development workflow to the next level.


Ekemini Samuel

Ado Kukic

Discover the essentials of unit testing: key components, best practices, and the advantages of using frameworks and tools like Cody for efficient testing.

How to write unit tests


Do you spend countless hours on tedious, repetitive tasks that hinder your software development process? You're not alone. [A McKinsey study](https://www.mckinsey.com/capabilities/mckinsey-digital/our-insights/unleashing-developer-productivity-with-generative-ai) shows that developers spend up to 30% or more of their time on routine and manual tasks, leading to burnout and decreased productivity. Imagine if you could reclaim that time for innovation and complex problem-solving.

Automation is the key to streamlining your workflow and boosting productivity. By automating mundane tasks, you can focus on what truly matters: **building high-quality software**. This guide will look into the benefits of automation and provide practical steps to integrate it into your software development cycle.

**TL;DR: Automation streamlines your workflow and boosts productivity by handling repetitive tasks. To automate repetitive tasks in software development, follow these steps:**

Step 1: Identify the repetitive tasks

Step 2: Choose the right tools for automation

Step 3: Implement the automation tool

Step 4: Tips for integrating automation into your code workflows

Step 5: Follow best practices for maintaining and updating automation workflows

Let’s get into the details.

## Step 1: Identify the repetitive tasks

This process begins with a thorough analysis to identify repetitive tasks that consume a significant portion of your time. Here are some examples of the common tasks that are repeated in the software development process:

1. **Code formatting**: Code formatting guarantees that the written code adheres to predefined standards and styles, promoting readability and maintainability. Automation tools can apply these style rules across the entire codebase, enforcing consistency without the developer reviewing each code line manually.
2. **Writing and running tests**: Continuous testing is crucial in identifying bugs early and writing high-quality software, but it can be time-consuming when handled manually. Automating the writing, running of unit, integration, end-to-end, and acceptance tests ensures the delivery of higher quality software and improved developer efficiency.
3. **Deployments**: Transferring code from one environment to another, for example, from testing to production, requires serious attention to detail to avoid errors. Automating this process makes the deployments faster and more reliable. They can be executed with a simple push of a button, reducing downtime and increasing deployment frequency.
4. **API documentation**: Keeping API documentation up-to-date is important for internal developers and external users, and manually updating this documentation can be tedious. Automation tools can generate and update API documentation directly from the codebase, making sure that the documentation is always accurate and reflects the latest changes without requiring additional developer effort.
5. **Code reviews**: While the critical and creative aspects of code reviews cannot be fully automated, routine elements like checking for style violations, code consistency, or simple bugs can be automated. Automation tools can scan the code for these common issues before the human review process, streamlining the review by allowing humans to focus on more complex considerations.
6. **Database schema migration**: This is another task that benefits from automation. As applications change and grow, so do their underlying databases, requiring updates to the database schema. Manually managing these migrations is risky and can lead to downtime. Automation tools can handle these migrations seamlessly so that the database schemas are updated without manual intervention, thus reducing risk and effort.

Now that we have identified some examples of tasks that need to be automated let's discuss how to choose the right tools for your automation setups and integration.

## Step 2: Choose the right tools for automation

Selecting the right tools is essential for achieving effective automation. Identifying and choosing the best tools involves considering several important factors. These criteria can guarantee that the automation solutions are efficient, scalable, reliable, and adaptable to future needs. Evaluating each tool against these standards strengthens your automation strategy, enhancing productivity and operational excellence. Here are some of the criteria you should look out for when choosing the right automation tools:

- **Compatibility**: Verify that the tool integrates well with your existing technology stack.
- **Ease of use**: Look for user-friendly tools that require minimal setup and don’t have complex workflow.
- **Scalability**: Go for tools that can grow with your project’s needs.
- **Community support**: Choose tools with strong community or vendor support for troubleshooting and updates.
- **Reliability**: Choose tools that won't let you down or don’t have a known number of issues. They should work and save you valuable time.
- **Customizability**: Look for tools you can adjust to fit your needs and confirm that they work just right for your projects.
- **Integration capabilities**: Your tools should interact nicely with each other so that everything in your workflow connects in perfect harmony.
- **Security**: Find safe automation tools to keep your work secure. Always choose tools that meet data privacy regulations and are ransomware-free.
- **Cost-effectiveness:** Find cost-saving tools that give you good value for your money, are not too expensive, and give you a good return on investment.
- **Performance**: For job satisfaction, opt for fast and efficient tools that get you where you're going and save you time. 
- **Documentation and learning resources**: Choose tools with clear instructions to help you learn and solve problems without confusion.

**Some popular tools for automation include:**

- [**Sourcegraph Cody**](https://sourcegraph.com/cody): A code AI assistant that helps developers write, understand, and maintain code.
- [**ESLint**](https://eslint.org/): A code linter that automates code formatting and bug detection by applying predefined coding standards, enhancing productivity and code quality. It streamlines workflows by forcing consistency across the codebase.
- [**Jenkins**](https://www.jenkins.io/): An open-source automation server that supports building, deploying, and automation in software development.
- [**GitHub Actions**](https://github.com/features/actions)**:** This is a custom workflow or automation script integrated with GitHub. It enables the automation of workflows directly from your repository.
- [**Travis CI**](https://www.travis-ci.com/)**:** Similar to GitHub actions, this is a CI/CD tool that handles the building, testing, and deployment automation process using a custom workflow or script.
- [**Ansible**](https://www.ansible.com/): An open-source tool for task automation like software provisioning, configuration management, inventory management, and application deployment via playbooks.
- [**Puppet**](https://puppet.com/docs/puppet/6/puppet_overview.html): An automation tool that manages infrastructure and application delivery, providing version control and audit capabilities.
- [**Terraform**](https://www.terraform.io/): An infrastructure as a code tool that enables the management of cloud services through automation scripts, removing the struggle of using manual processes and configurations.

While knowing the right criteria to check when choosing your automation tools is key to optimizing your workflow, understanding how to implement the tools is also very important. Let’s look at an example implementation using the custom command feature in Cody by Sourcegraph for automation.

## Step 3: Implement the automation tools (Cody custom commands)

[Cody](https://sourcegraph.com/cody) by Sourcegraph is a powerful VSCode extension that can be customized to fit your workflow automation needs. It leverages artificial intelligence (AI) to offer quick, ready-to-use commands for common actions such as writing, describing, fixing, and refactoring code.

These commands allow you to run predefined actions with smart context-fetching anywhere in the editor. Like the autocomplete and chat feature in Cody, the commands feature will search for context in your codebase to provide more contextually aware and informed answers.

Cody’s built-in commands can handle tasks like:

- `edit` - For editing, fixing, and generating new code.
- `explain` - For explaining code.
- `test` - For generating unit tests.
- `doc` - For generating code documentation.
- `smell` - For improving code quality.

You can also create custom commands with Cody, which will be the focus of the next section. Writing API specs for your application is a tedious task developers must complete to provide a well-documented API for external use. You can automate this process using Cody's custom commands, which will generate documentation for each endpoint in the file where the command is run.

**Implementing custom commands with Cody VSCode extension**
Setting up the Cody VSCode extension is straightforward. The illustration below shows how to create an account and install the extension in your VSCode code editor:

1. If you don’t already have an account, go to the [Cody by Sourcegraph](https://sourcegraph.com/cody) website and sign up.
![Sign up for a Cody account](https://storage.googleapis.com/sourcegraph-assets/blog/5-steps-to-automate-repetitive-tasks-in-software-development/image_001.png)

2. To install the extension, click the VSCode icon in the dashboard area after signing up. It will automatically take you to the code editor to complete the installation process. Alternatively, you can open your code editor, click **View** from the top-level menu, select **Extensions**, and search for Cody AI. Install the extension and log in with the authentication method you used at sign-up.
![Instructions on how to set up the VSCode extension for Cody](https://storage.googleapis.com/sourcegraph-assets/blog/5-steps-to-automate-repetitive-tasks-in-software-development/image_002.png)

> Support for the commands feature may vary by IDE extension. Read the [**feature parity reference to learn what commands are available in your IDE**](https://sourcegraph.com/docs/cody/clients/feature-reference#commands).

Now that your setup is complete, you can create custom commands via the Cody extension. A good use case of custom commands is generating an open API specification for Swagger from the codebase using Cody’s custom commands. Here are the steps to follow to achieve that:

1. Clicking the **Custom Commands** button will prompt you to create a new reusable command or open the settings for Cody for your workspace or user account. Select **New Custom Command.** 
![Clicking the Custom Commands button to create a new command](https://storage.googleapis.com/sourcegraph-assets/blog/5-steps-to-automate-repetitive-tasks-in-software-development/image_003.png)

2. The second step is to choose how the command runs. For this example, insert the new code generated above the selected code.
![Choosing how you want it to run. You are inserting the result above the existing code.](https://storage.googleapis.com/sourcegraph-assets/blog/5-steps-to-automate-repetitive-tasks-in-software-development/image_004.png)

3. After creating the name and setting how the command will run, you will add the prompt that Cody will use to perform the desired actions.
![A precise and descriptive prompt for Cody to use for code generation.](https://storage.googleapis.com/sourcegraph-assets/blog/5-steps-to-automate-repetitive-tasks-in-software-development/image_005.png)

4. Select the context in which the new command will run. For this example, set the command to pick context from the current file and the open tabs in our code editor.
![Select the context that the custom command will use to give the best result.](https://storage.googleapis.com/sourcegraph-assets/blog/5-steps-to-automate-repetitive-tasks-in-software-development/image_006.png)

You can save your custom command settings to your machine globally for all workspaces or to a particular workspace. In this example, the setting was saved for all workspaces or projects. Below is a 60-second video demo showing how the custom command works for code generation.

<Video
  source={{
    mp4: 'blog/a_simpler_way_to_understand_legacy_code/custom-command-cody'
  }}
  loop={true}
  caption="Creating custom commands with Cody"
/>

> Note that the quality of your custom commands' responses depends on which large language model (LLM) Cody uses. Cody uses Claude 3.5 Sonnet by default, but you can upgrade to Pro to access other models like GPT-4o and Gemini 1.5 Pro.

Now that you know one of Cody's automation techniques for open API specs generation from your codebase, you should understand how to merge this technique into the workflow.

## Step 4: Integrate the automation into your code workflows

As there isn’t a one-size-fits-all approach to automation and considering each person’s system is unique, here are some tips for integrating designed automation into your code workflow:

1. **Start small, think big:** First, automate the most repetitive tasks. These are usually the low-hanging fruit that can be automated quickly and easily. Once these tasks run smoothly, gradually expand your automation efforts to include more complex processes till you achieve wider coverage. This step-by-step approach allows you or your team to adapt to new automation tools and techniques without getting overwhelmed.
2. **Stay up to date:** Regularly update your automation scripts and tools. Automation technology continually evolves, with new features and security enhancements being released regularly. By keeping your tools and scripts up to date, you ensure you’re leveraging the latest advancements and maintaining a secure environment. Regular updates also help avoid potential vulnerabilities and compatibility issues interrupting your automated workflows.
3. **Create a feedback loop:** Establish a feedback loop with your team. Continuous feedback is essential for improving and enhancing your automation processes over time. Encourage team members to share their experiences, challenges, and suggestions for improvement. This collaborative approach encourages a culture of continuous improvement and innovation, guaranteeing that your automation strategies remain aligned with your organization's evolving needs.

Next are some best practices for maintaining and updating these integrations over time to ensure workflow longevity.

## Step 5: Maintain and update the automation 

1. **Modularity**: Keep your commands in components to facilitate easy updates and maintenance. By designing your automation scripts in modules, you can isolate different functionalities and make them easier to manage and reusable. This approach allows you to easily update or replace specific parts of your automation setup without updating the whole system. 
2. **Documentation**: Document each custom command so team members can understand and use it effectively. Comprehensive documentation serves as a reference, which in turn helps you to quickly understand the functionality of every piece of your automation workflow. If a team is involved, onboarding new people to use the automation setup will not be a struggle. Clear documentation reduces the learning curve and minimizes the risk of errors or miscommunications.
3. **Testing and monitoring**: Regularly test your commands and monitor your automated tasks to confirm they perform as expected and not introduce new issues. Regular testing helps you identify and address potential issues early, preventing disruptions in your automated workflows. Consider using the automated testing tools discussed above to streamline this process for consistent and thorough coverage.

## Conclusion

Embracing automation in the software development process has the potential to transform workflows, save time, and increase productivity. Identifying repetitive tasks, selecting the appropriate tools, and implementing customized solutions can greatly improve your coding standards and reduce the burden of routine tasks.

[Cody](https://sourcegraph.com/cody) is a valuable tool for automating various development activities including code generation, refactoring, documentation, fixing coding issues, and generating unit tests.

Integrating Cody into your workflow unlocks new levels of project efficiency and results in faster, more reliable, and higher-quality outcomes.


Desmond Obisi

Automate repetitive tasks in software development and boost productivity with these 5 actionable steps.

5 steps to automate repetitive tasks in software development


Legacy code, often referred to as inherited or outdated code, is a common challenge for developers and engineering teams. It may use obsolete technology, have little to no documentation, or contain complex dependencies. A recent study by Krugle shows that developers spend only 11% to 30% of their time [fixing technical debt](https://www.krugle.com/resources/downloads/Krugle_WP_Hidden_Costs_of_Code_Maintenance.pdf), and about half of that time is just to understand the source code they're trying to maintain. This shows how challenging it can be to understand legacy systems and why we need simpler, more effective ways to handle them.

Despite these challenges, understanding legacy code is important to keeping existing software running smoothly. This article will explore tips for understanding and working with legacy code. We'll learn to navigate, document, and refactor legacy code the right way.

First, let's look at some key strategies for understanding legacy code.

## Strategies for understanding legacy code

![](https://storage.googleapis.com/sourcegraph-assets/blog/a_simpler_way_to_understand_legacy_code/image_001.png)

The following strategies provide a comprehensive roadmap for assessing, documenting, and improving legacy codebases:

- Assessing the codebase
- Documentation and comments
- Code analysis tools
- Version control history
- Refactoring and cleanup
- Testing and validation

### Assessing the codebase

When dealing with a legacy codebase, the initial steps are essential in forming a comprehensive understanding. Start by setting up the development environment and running the code to ensure it works as expected. This helps identify immediate issues and provides a baseline for future improvements.

Developers can employ various tools and techniques to gain a high-level overview of the codebase. Code linters, such as [ESLint](https://eslint.org/) for JavaScript or [Pylint](https://pypi.org/project/pylint/) for Python, can identify syntactical errors and potential issues. Dependency analyzers and architecture visualization tools can help visualize the project's dependencies and map out the code's structure, making it easier to understand how different modules interact while providing a broad overview of its organization.

### Documentation and comments

After a clear overview of the codebase, leveraging existing documentation and comments is the next step toward understanding legacy code. They offer insights into the code's original purpose, design decisions, and potential pitfalls. Review any available documentation, including README files, inline comments, and external documentation.

Legacy applications often lack sufficient documentation, requiring a complete rewrite of the existing documentation during the code review process. To address this, adopt strategies such as annotating code with descriptive comments, maintaining a detailed changelog, and creating comprehensive README files for future reference.

### Code analysis tools

Static analysis tools help understand legacy code without running it. They identify issues, code smells, and security vulnerabilities. Popular tools like [SonarQube](https://www.sonarsource.com/products/sonarqube/), [PMD](https://pmd.github.io/), and [CAST](https://www.castsoftware.com/highlight/how-it-works) offer features to improve code quality.

These tools also reveal code dependencies and structure, such as tightly coupled modules and cyclical dependencies. Visualizing these relationships allows developers to prioritize refactoring and address critical issues first.

### Version control history

In addition to analysis tools, version control systems, such as Git, help us understand the history of a legacy codebase. By analyzing commit logs, developers can trace the code's changes, identify significant modifications, and understand the reason behind each change.

[Git commands](https://git-scm.com/book/en/v2/Git-Basics-Viewing-the-Commit-History) such as `git blame` and `git log` are handy in this phase. `git blame` shows the last modification for each line of a file, helping to identify who made changes and why. `git log` provides a chronological list of commits, which can be filtered and analyzed to understand the development timeline and key changes.

### Refactoring and cleanup

With a thorough understanding of the code's history and structure, the next step is to improve it through careful refactoring and cleanup. 

Refactoring is the process of restructuring existing code without changing its external behavior. This step is essential for improving the maintainability and readability of legacy code. However, it should be approached carefully to avoid introducing new bugs.

Deciding when to refactor involves evaluating the code's complexity, maintainability, and performance. Techniques such as automated testing, code reviews, and incremental changes can achieve bug-free code and ensure safe refactoring. Best practices include:

- Focusing on small, manageable changes.
- Using feature branches in version control.
- Continually testing the code to verify that refactoring has not affected functionality.

### Testing and validation

Testing and validation ensure that refactoring and other changes do not break existing functionality. Writing tests for legacy code, especially code without tests, is vital for validating changes and preventing regressions. Different tests, such as unit tests, integration tests, and end-to-end tests, ensure code reliability.

In addition to these strategies, leveraging tools like Cody can further simplify the process. Next, let’s explore how to use Cody to understand legacy code effectively.

## How to use Cody to understand legacy code

[Cody](https://sourcegraph.com/cody) is a AI coding assistant designed to help developers and engineering teams understand, write, review, and refactor code and accelerate code generation and software development. It is powered by Sourcegraph's [code search](https://sourcegraph.com/code-search), which it uses to retrieve context from a codebase and extend its capabilities.

By utilizing Cody, you can focus on building better and more efficient software with the help of AI-enabled assistance. Cody's key features include:

- [**Autocomplete**](https://sourcegraph.com/docs/cody/capabilities/autocomplete): With the autocomplete feature, Cody makes coding easy for developers using the StarCoder Large Language Model (LLM) to get fast and accurate code predictions. It analyzes code as it is typed, offering suggestions for subsequent lines – single lines of code and multi-line functions. It works across different programming languages.
- [**Chat**](https://sourcegraph.com/docs/cody/capabilities/chat)**:** Cody allows you to ask technical questions and get contextual answers about your codebase or specific snippets using prompts such as "Add helpful debug log statements."
- [**Commands**](https://sourcegraph.com/docs/cody/capabilities/commands)**:** Think of them as shortcuts for everyday coding tasks. These allow you to run predefined actions with smart context-fetching anywhere in your codebase. You can also speed up certain actions by creating custom commands for those repetitive tasks.

With the above features, Cody helps software developers by providing insights into legacy code structure, identifying potential issues, and suggesting improvements. Its intuitive interface and detailed reports make it easier to understand complex codebases and prioritize refactoring efforts.

### Using Cody: Practical example

Now that we've covered the strategies for understanding legacy code, let’s take a look at Cody in action on some legacy code.

To get started with Cody:

- Create an [account](https://sourcegraph.com/cody) using one of these authentication methods - GitHub, GitLab, or Google.
- Install Cody for any of Sourcegraph's supported IDE - VS Code, IntelliJ (or any other JetBrains IDE), or Neovim.

> NB: VS Code is the IDE used in this section.

![Cody VS Code sign in screen](https://storage.googleapis.com/sourcegraph-assets/blog/a_simpler_way_to_understand_legacy_code/image_002.png)

The snippet below is a code example of a legacy Python-based management system developed over the years with contributions from various developers, resulting in inconsistent coding styles and lacking documentation.

```python
    class Inventory:
        def __init__(self):
            self.items = {}
    
        def add_item(self, name, quantity):
            if name in self.items:
                self.items[name] += quantity
            else:
                self.items[name] = quantity
    
        def remove_item(self, name, quantity):
            if name in self.items:
                if self.items[name] >= quantity:
                    self.items[name] -= quantity
                    if self.items[name] == 0:
                        del self.items[name]
                else:
                    print(f"Cannot remove {quantity} of {name}. Only {self.items[name]} available.")
            else:
                print(f"Item {name} not found in inventory.")
    
        def get_inventory(self):
            return self.items
    
        def print_inventory(self):
            for item, quantity in self.items.items():
                print(f"{item}: {quantity}")
    
    # Usage
    inv = Inventory()
    inv.add_item("Apple", 10)
    inv.add_item("Banana", 5)
    inv.remove_item("Apple", 3)
    inv.print_inventory()
```

Using Cody’s chat feature, we can prompt it to understand the structure and flow of our Python-based management code base as shown below: 

![Giving Cody a descriptive prompt to help understand the structure and flow of the code](https://storage.googleapis.com/sourcegraph-assets/blog/a_simpler_way_to_understand_legacy_code/image_003.png)

Cody can also help with our example code base through refactoring, unit tests, and documentation. Let’s take a look at each of these.

**Refactoring**
Ordinarily, code refactors can be challenging, especially in a complex codebase. With Cody's `Commands` feature, we can identify code smells in our Python code. To do this, we select the `Find Code Smells` command by the left sidebar in the Cody tab:

![Finding code smells](https://storage.googleapis.com/sourcegraph-assets/blog/a_simpler_way_to_understand_legacy_code/image_004.png)

**Unit tests**
Writing unit tests helps clarify expected behavior and expose hidden assumptions and potential bugs. Cody simplifies this process by enabling developers to code with tests, providing a command that quickly generates unit tests.

To write unit tests using Cody, we select the `Generate Unit Tests` command by the left sidebar in the Cody tab:

![Writing Unit test by clicking on the Generate Unit Tests command](https://storage.googleapis.com/sourcegraph-assets/blog/a_simpler_way_to_understand_legacy_code/image_005.png)

**Documentation**
Documentation helps future collaborators and creates a roadmap for future improvements. To document our code using Cody, we select the `Document Code` command by the left sidebar in the Cody tab:

![Using the document code command to generate documentation](https://storage.googleapis.com/sourcegraph-assets/blog/a_simpler_way_to_understand_legacy_code/image_006.png)

Using Cody with our example codebase, we can see how it simplifies refactoring, testing, and documentation. 

## Wrapping up

Working with legacy systems can be a task, but it becomes manageable and fun with the right approach and tools, especially when developers prioritize the *code with tests* approach. Developers can effectively understand and improve legacy code by assessing the codebase, leveraging documentation, utilizing code analysis tools, understanding version control history, refactoring wisely, and implementing comprehensive testing.

AI-assisted coding tools like Cody further simplify challenges with legacy code and complex systems, providing valuable insights and automated assistance. Give [Cody](https://sourcegraph.com/cody) a try today for your legacy codebase.


Shuaib Oseni

Discover essential tips and tools to understand and improve legacy code.

A simpler way to understand legacy code


<Alert type="secondary">This is a guest blog post from our community. <a href="https://discord.com/servers/sourcegraph-969688426372825169" target="_blank">Join our Discord</a> to meet the author and connect with other developers passionate about Code Search and AI!</Alert>

Leveraging AI to accelerate your workflow as a software engineer is no longer considered a lazy approach; instead, it allows you to focus on more critical aspects of your work. In this article, we'll delve into how you can speed up the setup and development of your Node.js (Express.js) APIs using Sourcegraph Cody. Before we begin, let's briefly discuss what Node.js is.

## What is Node.js and Express.js?

[Node.js](https://nodejs.org/en) is a JavaScript runtime environment that runs on the Chrome v8 JavaScript engine. In this article, we'll build our API using the Express.js framework and TypeScript. Express.js is one of the most popular Node.js web application frameworks that provides a robust set of features for web applications and APIs.

## Setting up Express with the help of Cody

First, I’ll create an `app.ts` file in the src folder (you can decide to use any folder structure you like) and I’ll use [Cody](https://sourcegraph.com/cody) to  generate my `package.json` file with the prompt:  

> Hey Cody, create a package.json content for my Express.js app using typescript with ts-node

Cody generates the package.json content for me, which I can further edit if needed. Asking Cody to generate the `package.json` file is much easier compared to installing all required packages manually. Here is the `package.json` content Cody generated:  

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/speeding-up-your-nodejs-development-with-cody/image_001.png"
/>

To continue with the server setup, I’ll also ask Cody to generate a simple Express server using this prompt:

> Hey Cody, can you generate a basic express server,that is exportable without .listen() for me?

and we have our basic app. In this article, I will build a multimedia app that merges videos together, converts video to audio, generates a thumbnail for a video, and splits a video into smaller chunks based on specified duration. I’ll be making use of [ffmpeg](https://ffmpeg.org/) via the node fluent-ffmpeg package.

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/speeding-up-your-nodejs-development-with-cody/image_002.png"
/>

PS: To make use of the fluent-ffmpeg package, you will need to have ffmpeg and ffprobe install on your host computer, check the [documentation](https://www.ffmpeg.org/download.html) on installing ffmpeg.

## Advanced set up

Another setup task that will really make you a productive developer is to write Bash scripts for repetitive tasks such as: creating controllers, routers, etc. In this case, I’ll use Cody to create a Bash script to automate repetitive tasks.

> Hey Cody, Generate a bash script that creates a file and takes a flag or input to create files, e.g auth.controller.ts takes in the input such as "auth", it also generates router file in the same format in the folder named with the input name under the src folder

Cody generates my bash script for me and then I add the `makecontroller` command to the scripts in the `package.json` file. This bash script generated allows me to create template controllers and routes instead of having to do them repetitively.

```json
"makecontroller":"bash ./scripts/controllerMaker.sh"
 // make use of the path to your bash script
```

And you can make use of

```bash
npm run makecontroller
```

Here’s the Bash script Cody generated for me:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/speeding-up-your-nodejs-development-with-cody/image_003.png"
/>

When building APIs, error handling is one of the most crucial things to take into consideration. In Express.js, error handling can be handled using a global error handler for fatal errors in the app. Before creating the global error handler, I need to create a custom error class that makes the JavaScript Error object more useful in our Express.js app. I prompted Cody:

> Hey Cody, can you generate a CustomAPIError class which extends the Error class, the constructor takes in code, message and optional status and the message can be inherited from the parent class?

Cody generated the `CustomAPIError` class and I added more functionality to the code:

```ts
class CustomAPIError extends Error {
  public message: string;
  public code: number;
  public status?: string;
  constructor(message: string, code: number, status?: string) {
    super(message);
    this.code = code;
    this.status = status;
  }
}
const createCustomError = (message: string, code: number) => {
    return new CustomAPIError(message, code);
};
export {CustomAPIError,createCustomError};
```

With this, I can always call the `createCustomError` function to create errors within my app. From here I can create a global error handler:

```ts
import { Request, Response, NextFunction } from "express";
import { CustomAPIError } from "../../errors/customErrors";
export const globalErrorHandler = async (
    err: any,
    _: Request,
    res: Response,
    __: NextFunction
) => {
    return res
        .status(500)
        .json(
            {
                message: err instanceof CustomAPIError ? err.message : "Something went wrong,please try again later.",
                statusCode: err instanceof CustomAPIError ? err.code : 500,
                data: null,
            }
        );

};
```

The next thing I’ll do is create a handler for 404 (Not Found) error, prompting Cody:

> Can you create a handler that handles 404 error in my Express.js server?

and my 404 handler as shown below:

```ts
import { RequestHandler } from "express";

export const notFound: RequestHandler = (req, res) => {
  return res.status(404).json({
    statusCode: 404,
    message: "This path exists somewhere in space time but not here",
    data: null,
  });
};
```

## Building the multimedia app endpoints

There are four functionalities our multimedia app does, and I will create the four endpoints by running my  `npm run makecontroller` script.

```ts
import express from 'express';
import { ffmpegController } from './fluent-ffmpeg.controller';

const router = express.Router();

router.post("/merge-videos",ffmpegController.mergeVideos);
router.post("/convert-video-to-audio",ffmpegController.convertVideoToAudio);
router.post("/generate-thumbnails",ffmpegController.generateThumbnails);
router.post("/split-video",ffmpegController.splitVideo);
export default router;
```

Then I move forward to create my controllers; editing the controller template that was already created.

```ts
import { Request, Response } from 'express';
import ffmpeg from 'fluent-ffmpeg'
import { uploadAudioToCloudinary, uploadToCloudinary, uploadVideoToCloudinary } from '../utils/helpers';
import path from 'path';
const parentDirectory = path.resolve(__dirname, '../../');

export const ffmpegController = {
  mergeVideos: (req: Request, res: Response) => {
    const video1Path = req['files']['video_one'].path;
    const video2Path = req['files']['video_two'].path;
   
    const outputPath = parentDirectory + "/output/mergedVideo.mp4"

    ffmpeg()
      .input(video1Path)
      .input(video2Path)
      .on('end', async () => {
        try {
          const url = await uploadVideoToCloudinary(outputPath, 'mergedVideo')
          res.status(200).json({ message: 'Videos merged successfully', data: { url } })
        } catch (error) {
          console.log(error)
          res.status(500).json({ message: error.message });
        }

      })
      .on('error', (err) => {
        res.status(500).json({ message: err.message });
      })
      .mergeToFile(outputPath, 'tempDir');
  },
  convertVideoToAudio: (req: Request, res: Response) => {
    const videoPath = req['files']['video'].path;
    const audioOutputPath = parentDirectory + "/output/audio.mp3"

    ffmpeg(videoPath)
      .output(audioOutputPath)
      .on('end', async () => {
        try {
          const url = await uploadAudioToCloudinary(audioOutputPath, 'convertedAudio')
          res.status(200).json({ message: 'Video converted to audio successfully', data: { url } })
        } catch (error) {
          console.log(error)
          res.status(500).json({ message: error.message });
        }
      })
      .on('error', (err) => {
        console.error(err);
        res.status(500).send('An error occurred while converting video to audio');
      })
      .run();
  },
  generateThumbnails: (req: Request, res: Response) => {
    const videoPath = req['files']['video'].path;
    const thumbnailOutputPath = parentDirectory + '/output/thumbnail.png';

    ffmpeg(videoPath)
      .screenshots({
        timestamps: ['50%'],
        filename: 'thumbnail.png',
        folder: 'output',
        size: '320x240'
      })
      .on('end', async () => {
        try {
          const url = await uploadToCloudinary(thumbnailOutputPath, 'thumbnail')
          res.status(200).json({ message: 'Thumbnail generated successfully', url });
        } catch (error) {
          console.log(error)
          res.status(500).json({ message: error.message });

        }

      })
      .on('error', (err) => {
        console.log(err);
        res.status(500).json({ message: 'An error occurred while merging videos', error: err.message });
      });
  },
  splitVideo: (req: Request, res: Response) => {
    const { chunkDuration } = req.body;
    const videoPath = req['files']['video'].path;
    const splittedVideosUrl: string[] = [];

    ffmpeg.ffprobe(videoPath, async (err, metadata) => {
      if (err) {
        res.status(500).json({ message: err.message });
        return;
      }

      const duration = metadata.format.duration;
      const numChunks = Math.ceil(duration / chunkDuration);
      const placeholderArray = new Array(numChunks).fill(0);
      const promises = placeholderArray.map(async (_, i) => {
        const startTime = i * chunkDuration;
        const endTime = Math.min((i + 1) * chunkDuration, duration);

        return new Promise((resolve, reject) => {
          ffmpeg(videoPath)
            .outputOptions([
              '-ss', startTime.toFixed(2),
              '-t', (endTime - startTime).toFixed(2),
              '-c', 'copy'
            ])
            .output(`output/chunk_${i}.mp4`)
            .on('end', () => {
              splittedVideosUrl.push(`output/chunk_${i}.mp4`);
              resolve(splittedVideosUrl);
            })
            .on('error', (err) => {
              console.error(`Error creating chunk ${i}:`, err);
              reject(err);
            })
            .run();
        });
      });

      try {
        await Promise.all(promises);
        res.status(200).json({ message: 'Video split successfully', data: { url: splittedVideosUrl } });
      } catch (err) {
        console.error('Error splitting video:', err);
        res.status(500).json({ message: 'Error splitting video' });
      }


    });
  }
};
```

In the controller for merging videos, you’ll notice that the client app can only merge two videos which can be limiting. A user should be able to merge more than two videos together. I had an idea on how to approach the problem but the implementation was not flowing. With Cody, I highlighted the section I needed help with and  initiated a chat using <kbd>Cmd/Alt</kbd> + <kbd>L</kbd>  and Cody came to my rescue.

<Figure
  src="https://storage.cloud.google.com/sourcegraph-assets/blog/speeding-up-your-node-development-w-cody/image5.png"
/>

## Documenting your code with Cody

Documentation is an important aspect of software engineering, although it is always advisable to write self-documenting code, but there are times we still need to document code. In my Express.js app, I created a custom error class, which may or may not be strange to someone new to the codebase. Thanks to Cody once again; I can generate docs for my code, using <kbd>Cmd/Alt</kbd> + <kbd>D</kbd>, and here are the docs generated by Cody:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/speeding-up-your-nodejs-development-with-cody/image_004.png"
/>

## Writing unit tests with Cody

Unit testing is another important part of software engineering, that can take time and sometimes can be boring. Again, Cody can help generate unit tests, here's how:

On the left side of VS Code in the Cody tab, you’ll see a  "Generate Unit Test" command. Clicking it will task Cody with generating a Unit test for my merge video controller as shown:

<Figure
  src="https://storage.cloud.google.com/sourcegraph-assets/blog/speeding-up-your-node-development-w-cody/image4.png"
/>

With the initial test cases created,I can still edit and add additional test cases according to my needs. Cody makes it easier for me to kickstart my unit testing. The end-to-end testing of the app can be done using any API Client of your choice and the complete code of this app can be found on [Github](https://github.com/oluwatobiisaiah/multimedia-app)

## Other use cases Cody in speeding up your Node.js development

Cody's capabilities go beyond generating code. It's a very powerful tool that can be used to improve your codebase, for example, by using the "Find Code Smell" feature. Here's a review I got from Cody for my custom error class.

<Figure
src="https://storage.cloud.google.com/sourcegraph-assets/blog/speeding-up-your-node-development-w-cody/image6.png"
/>

Finally , I’ll be creating a [custom command](https://sourcegraph.com/docs/cody/capabilities/commands#custom-commands) with Cody. This helps me to tailor Cody based on my project requirement, especially for recurring tasks like Integrating with your build system to suggest fixes for errors/warnings in the latest build, generating commit messages, etc.

For this sample app I will be creating custom commands to create template controller function in the fluent-ffmpeg.`controller.ts`, which enables me to easily add new controllers based on the style and format of previous controllers created in the file. To create this custom command I make use of <kbd>Cmd/Alt</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>  and I made use of the prompt:

> Create a template controller function that can be used to add more feature to the app as part of creating a new controller function.
My `cody.json` looks like:

```json
{
    "commit-message": {
        "description": "Commit message for current changes",
        "prompt": "Suggest an informative commit message by summarizing code changes from the shared command output. The commit message should follow the conventional commit format and provide meaningful context for future readers.",
        "context": {
            "selection": false,
            "command": "git diff --cached"
        }
    },
    "extra-ffmpeg-feature": {
        "prompt": "Create a template controller function that can be used to add more feature to the app as part of creating a new controller function",
        "context": {
            "selection": false,
            "currentFile": true
        },
        "mode": "insert"
    },
    "readme": {
        "description": "Readme for current dir",
        "prompt": "Write a detailed README.md file to document the code located in the same directory as my current selection. Summarize what the code in this directory is meant to accomplish. Explain the key files, functions, classes, and features. Use Markdown formatting for headings, code blocks, lists, etc. to make the it organized and readable. Aim for a beginner-friendly explanation that gives a developer unfamiliar with the code a good starting point to understand it. Make sure to include: - Overview of directory purpose - Functionality explanations - Relevant diagrams or visuals if helpful. Write the README content clearly and concisely using complete sentences and paragraphs based on the shared context. Use proper spelling, grammar, and punctuation throughout. Surround your full README text with triple backticks so it renders properly as a code block. Do not make assumptions or fabricating additional details.",
        "context": {
            "currentDir": true,
            "selection": true
        }
    }
}
```

I have also added commands to generate commit messages and readme file content. This is a super powerful way of making Cody work for you. When I run the extra-ffmpeg-feature command, it creates a template controller that follows the style of previous controllers. I can then fine-tune it to my requirements, and it makes my work super easy.

<Figure
src="https://storage.cloud.google.com/sourcegraph-assets/blog/speeding-up-your-node-development-w-cody/image3.png"
/>

Beyond all the examples that have been mentioned in this article, Cody can be seen as your productivity buddy; making your setup and development process faster and allowing you to spend more time on business logic while building your apps. So, go ahead and [give cody a try](https://sourcegraph.com/cody), and watch as your developer experience and productivity soar.


Oluwatobi Adedeji

In this article, we'll delve into how you can expedite the setup and development of your Node.js (Express.js) APIs using Sourcegraph Cody.

Speeding up your Node.js development with Cody


Writing code for front-end applications is undoubtedly a crucial aspect of application development. However, an equally crucial aspect developers often overlook is writing tests for an application. An application's usability is one of the main factors you should consider in development, so it is important to ensure it is bug-free, has the best code quality, and works efficiently. We can verify this factor through testing, which basically entails testing our application to ensure it works as expected just before it gets to the end user.

In this article, you will learn about writing unit tests in [Svelte](https://svelte.dev/), a JavaScript framework.

## Prerequisites

This article will break down complex concepts in a manner that is easily understood. However, a knowledge of the following will be beneficial:

* Knowledge of [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
* Knowledge of [Svelte](https://svelte.dev/)
* [Node.js](https://nodejs.org/en) installed on your computer

## Unit testing — What’s that about?

If you have no prior knowledge of unit testing and you guessed the meaning to be the testing of unit components, then you’re 80% correct. Just before we dive into unit testing, let’s have a recap on what testing is all about. Testing, a stage in the [Software Development Life Cycle (SDLC)](https://sourcegraph.com/blog/developer-productivity-thoughts), entails checking a particular application for bugs and whether or not it meets the customer’s requirements.

Unit testing is a type of software testing that tests the functionality of the smallest parts of a particular application in isolation or as a **unit**. It ensures individual parts of components of an application work as expected and meets its requirements. In a bit, we’ll see how to implement this functionality and test components in a Svelte application.

## Setting up our environment

Now that we have discussed the basic concept of unit testing, we can proceed to set up our Svelte environment. In this tutorial, we’ll be using [degit](https://sourcegraph.com/github.com/Rich-Harris/degit), a project scaffolding tool, to set up our Svelte app. You can do so by running the following command in your terminal:

```bash
npx degit sveltejs/template svelte-test-app
```

Navigate to the svelte-test-app project directory:

```bash
cd svelte-test-app
```

Install the dependencies and run the command to execute the starter project:

```bash
npm install

npm run dev
```

We’ll work with the [Svelte testing library](https://testing-library.com/docs/svelte-testing-library/intro/) and [Vitest](https://vitest.dev/) as a test runner. We can install these libraries by running this command:

```
npm install -D @testing-library/svelte @testing-library/user-event vite vitest
```

Here’s a quick breakdown of the library and tools we have installed in the above code:

* **@testing-library/svelte**: Svelte testing library that provides the basic functionality of rendering svelte test components, querying the output, firing events with the `fireEvent` function, and monitoring updates.
* **@testing-library/user-event**: a library for simulating user events(such as clicking and typing) in testing.
* **Vitest**: a Vite test runner to run our unit tests.

## Further configuration

Already excited to get started with writing unit tests in Svelte? Just one final bit of configuration and we dive right in! Go to your `vite.config.js` file and add these configurations to aid the build and test process.

```javascript
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  test: {
    globals: true,
  },
});
```

Finally, in your `package.json` file, add the scripts to run your tests:

```bash
"test": "npx vitest run",  
"test:watch": "npm run test -- --watch"
```

And we’re all set on the configuration front!

## Working principle

If you have no experience writing unit tests or tests in general, then this section is for you. What does it really mean to write tests? How does it work? Technically, writing tests entail two stages:

* Writing code to be tested.
* Writing code that describes the expected behaviour of the tested component.

A test is successful and will pass if there’s a perfect match between a component's expected behaviour and the component's actual behaviour. A test will fail if the behaviour of a component does not align with the assertions written in a test. We’ll see how this works in a bit.

## Writing a basic unit test in Svelte

In this section, you’ll see how to write a basic unit test in Svelte. We already established that we must have a component or piece of code to be tested before we proceed to writing tests. Let’s create a simple Svelte component that renders some text:

```html
//App.svelte
<script>
  export let name;
</script>

<h1>Hello {name}!</h1>

<style>
  h1 {
    color: blue;
    font-family: 'Comic Sans MS', cursive;
  }
</style>
```

We also write this code in our `main.js` file:

```javascript
import App from "./App.svelte";

const app = new App({
  target: document.body,
  props: {
    name: "Dev",
  },
});

export default app;
```

In this simple piece of code, we dynamically rendered a text that should display “Hello Dev!” in the browser. By performing tests, we can see if this piece of code works and displays in our browser without actually opening the browser. Let’s write a test for this piece of code in Svelte.

```javascript
import { render, screen, } from "@testing-library/svelte";
import "@testing-library/jest-dom/extend-expect";
import App from "./App.svelte";

  test("says hello dev!'", () => {
    render(App);
    expect(screen.getByText("Hello Dev!")).toBeInTheDocument();
  });
```

And voila! We’ve successfully written our first unit test in Svelte. Don’t be scared. I’ll explain every bit of this code, and we’ll see if the test passes or fails.

First, we import the render and screen functions from the Svelte testing library (remember we installed this earlier). The render function renders the component to be tested into a simulated DOM environment. In contrast, the screen function allows us to perform operations to query and interact with the rendered component. In simpler terms, the render function provides the component for operations by the screen function.

The test function takes two arguments: a string, which is usually a descriptive name of how the test should behave, and the actual function, which contains the logic and assertions of the test case. In our test, we have the first argument of the test function as “says hello dev!” which implies we should expect the result to be a text that says “Hello Dev!”. It doesn’t end there. The second argument, which you can say is the most important, defines the logic that confirms whether or not a text named “Hello Dev!” is present in the DOM.

In the test function, we render our App component, which creates a version of it to be tested in a simulated DOM environment. The following logic gets a match of “Hello Dev!” and then confirms if it is in the document. Let’s see the result when we run the test.

To run this test, we use the `npm run test` command. Remember we configured the test command in our `package.json` file while we were setting up our environment. Here’s the result:

![Output Demo](https://storage.googleapis.com/sourcegraph-assets/blog/gp-how-to-write-unit-tests-for-svelte-web-apps/svelte-test-pass-1.png)

And there! We have a successful test since a text named “Hello Dev!” is present in the DOM.

An important tip to note when working with text-based tests is case sensitivity. The text in the DOM should be the exact match of the text being passed in the test function. Here’s what happens when we pass a string of “Hello dev!” instead:

![Output Demo](https://storage.googleapis.com/sourcegraph-assets/blog/gp-how-to-write-unit-tests-for-svelte-web-apps/svelte-test-fail-1.png)

As expected, the test fails because we’re searching for a string that does not exist in the DOM.

## Testing component events

Now that we know how to write a basic unit test in Svelte, let’s see how we would test component events in Svelte. If you’re new to Svelte, [component events](https://learn.svelte.dev/tutorial/component-events) allow two components to interact with one another, most times from a child component to a parent component. Consider the code below that creates a component event:

```javascript
<script>
  let count = 0

  const increaseByOne = () => {
    count += 1
  }
</script>

<button on:click={increaseByOne}>
  Clicked {count} times
</button>

```

This simple function starts counting from 0 and increases by one every time a user clicks on the button. Now, we want to test if this works. The text should reflect the number of times the user clicks the button. Let’s see how we write a test for this in Svelte:

```javascript
import { render, fireEvent } from "@testing-library/svelte";
import { test, expect, vi } from "vitest";
import App from "./App.svelte";

test("App dispatches a click event with the correct count", async () => {
  const increaseByOne = vi.fn();
  const { getByText, component } = render(App, {
    props: {
      on: {
        click: increaseByOne,
      },
    },
  });

  const button = getByText("Clicked 0 times");
 
 await fireEvent.click(button);
 expect(button).toHaveTextContent("Clicked 1 times");
 
 await fireEvent.click(button);
  expect(button).toHaveTextContent("Clicked 2 times");
});

```

In the code above, we simulated different stages of user interaction (in this case, clicking the button) by using the `fireEvent` function. What we’re trying to achieve here is to get the correct count with each click event from the user. So, when we call the `fireEvent`, we expect the count to have increased by one, meaning the user has successfully interacted with the button. When we run the test command on this, here’s the result:

![Output Demo](https://storage.googleapis.com/sourcegraph-assets/blog/gp-how-to-write-unit-tests-for-svelte-web-apps/svelte-test-pass-2.png)

And there! We have a passed test on a component event.

## Testing the Context API

Moving forward, we'll see how to run unit tests on the context API in Svelte. The context API provides an efficient way for elements to communicate with each other without having to pass data and functions as props. Using context API, let's create a logic that toggles between light and dark mode. For easy readability and to have a well-structured codebase, we'll create a separate file to handle our context data.

```javascript
// ThemeContext.svelte

<script context="module">
  export const themeContext = {};
</script>

<script>
  import { setContext } from 'svelte';

  let theme = 'light';

  const toggleTheme = () => {
    theme = theme === 'light' ? 'dark': 'light';
    setContext(themeContext, theme);
  };

  setContext(themeContext, theme);
</script>

<button on:click={toggleTheme}>Toggle Theme</button>
```

Here, we create the logic to control the behaviour and toggle between light and dark when the button is clicked on. We can then use this inside our `App.svelte` file:

```javascript
//App.svelte
<script>
  import { getContext } from 'svelte';
  import ThemeContext, { themeContext } from './ThemeContext.svelte';

  const theme = getContext(themeContext);
</script>

<main>
  <ThemeContext>
    <div data-testid="theme-display">Current theme: {theme}</div>
  </ThemeContext>
</main>
```

This code above gives a light theme by default, then toggles between dark and light themes when the button is clicked on. We want to ensure this code behaves exactly as expected when it’s run. Here’s how we write a test for this:

```javascript
import { render, fireEvent, screen } from "@testing-library/svelte";
import { test, expect } from "vitest";
import "@testing-library/jest-dom";
import App from "./App.svelte";

test("toggles theme between light and dark", async () => {
  render(App);

  const toggleButton = screen.getByRole("button", { name: "Toggle Theme" });
  const themeDisplay = screen.getByTestId("theme-display");

  expect(themeDisplay).toHaveTextContent("Current theme: light");

   await fireEvent.click(toggleButton);
   expect(themeDisplay).toHaveTextContent("Current theme: dark");

   await fireEvent.click(toggleButton);
   expect(themeDisplay).toHaveTextContent("Current theme: light");
});
```

Similar to how we tested component events in the previous section, we use the `fireEvent` function to simulate a button click, which controls the light and dark themes. First, we write an assertion that confirms the theme is set to a light theme when the page is loaded. If the assertion is true, then proceed to simulate a button click that should change the theme (set to light by default) to dark. We then simulate another button click, which should change the theme (currently on a dark theme due to the first button click) to a light theme. If all of these assertions align with the actual behavior, then the test passes. When we run our test, here’s the result:

![Output Demo](https://storage.googleapis.com/sourcegraph-assets/blog/gp-how-to-write-unit-tests-for-svelte-web-apps/svelte-test-pass-3.png)

There! It works as expected and the test passes.

## Automating unit tests

Let’s face it: sometimes, all we want to do is write the code for a particular functionality and see it work on a browser without worrying about writing tests. We’ve all been there. Luckily, [Cody](https://sourcegraph.com/cody), an AI code assistant, comes to the rescue! Cody has a feature to generate a unit test. All you need to do is highlight the code you want to generate a unit test and allow Cody to do its job. The great news is that it doesn’t just generate unit tests for Svelte components but also for all other languages! Let’s see how it works. We can go ahead and create a simple “Guess the number” game in Svelte:

```javascript
 <script>
  let score = 0;
  let target;
  let guess;

  function newTarget() {
    target = Math.floor(Math.random() * 100) + 1;
  }

  function handleGuess() {
    if (guess === target) {
      score++;
      newTarget();
    } else if (guess > target) {
      alert('Too high!');
    } else {
      alert('Too low!');
    }
    guess = '';
  }

  newTarget();
</script>

<main>
  <h1>Guess the Number</h1>
  <p>Score: {score}</p>
  <input type="number" bind:value={guess} />
  <button on:click={handleGuess}>Guess</button>
</main>
```

Already thinking of how to generate a unit test for a code like this? Well, don’t. We just let Cody think and, of course, generate the code. Here:

![Output Demo](https://storage.googleapis.com/sourcegraph-assets/blog/gp-how-to-write-unit-tests-for-svelte-web-apps/screendemo.gif)

_Using Cody to generate unit tests_

The screencast above shows that a unit test was generated for our sample code in seconds. Cody allows you to code more while typing less.

## Conclusion

In this article, we learned about unit tests and how to generate them in Svelte. We then went on to write a basic test, unit tests for component events, unit tests for the context API, and we automated the process of writing unit tests with [Cody](https://sourcegraph.com/cody). Happy Coding!

---

Cody can help you code faster, improve your productivity, and unlock new knowledge. Give [Cody](https://sourcegraph.com/cody) a try today!


James Amoo

Discover how to implement unit tests for individual components in a Svelte application and ensure your code is bug-free and meets requirements.

How to write unit tests for Svelte web apps


<Alert type="secondary">This is a guest blog post from our community. <a href="https://discord.com/servers/sourcegraph-969688426372825169" target="_blank">Join our Discord</a> to meet the author and connect with other developers passionate about Code Search and AI!</Alert>

SIMD, Single Instruction Multiple Data, is a way of speeding up computationally intensive tasks by applying the same operation to multiple data items in one go. For this to be applicable, some requirements need to be met, such as data layout or access patterns.

In [OpenRCT2](https://openrct2.org/) (free and open source remake of RollerCoaster Tycoon 2) we care a lot about performance and there’s long been a piece of code I suspected could be improved by applying the SIMD approach. I’ve been putting it off due to having to write a lot of code that probably wouldn’t make it to the repository, but I found Cody doesn’t complain about any of that and it dutifully came to help.

The code in question is used for arranging paint order and implements checking of bounding box intersections. With a single click of [Explain Code](https://sourcegraph.com/docs/cody/capabilities/commands), Cody explains in detail the responsibilities of this function:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/enhancing-openrct2-performance-a-journey-cody-simd/image_001.png"
/>

Before we start changing anything, let's generate some tests. With the function still highlighted, that's just one more click on [Generate Unit Tests](https://sourcegraph.com/docs/cody/capabilities/commands).

Cody explained it didn’t know what testing framework I used and assumed (correctly, as many C++ projects do) that I use [GoogleTest](https://google.github.io/googletest/). It then proceeded to generate test cases for all available scenarios. After a minor cleanup from the comments left in the code, I had my tests ready. The template was correctly recognized and had tests generated. The inclusion of a `.cpp` file instead of `.h` surprised me, but it was the correct approach for testing a `static` function without having to remove the modifier.

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/enhancing-openrct2-performance-a-journey-cody-simd/image_002.png"
/>

Helpful instructions on how to set up the tests with my project are easily provided

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/enhancing-openrct2-performance-a-journey-cody-simd/image_003.png"
  caption="Prompt: How do I compile tests in TestPaint.cpp"
/>

The first rule of performance tuning is you need to have data to verify your assumptions and measure any gains or losses. Using the prompt `Please write Google Benchmark for highlighted code` opened a new file filled with a simple benchmark I could use as a starting point.

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/enhancing-openrct2-performance-a-journey-cody-simd/image_004.png"
  caption="Prompt: Please write Google Benchmark for highlighted code"
/>

With all the tests and benchmarks at the ready, let’s actually apply some SIMD. `Rewrite selected function with x86 SIMD intrinsics` implemented what I long had in mind.

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/enhancing-openrct2-performance-a-journey-cody-simd/image_005.png"
/>

Cody delivers:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/enhancing-openrct2-performance-a-journey-cody-simd/image_006.png"
/>

With tests passing, let’s see what kind of performance improvements this delivers:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/enhancing-openrct2-performance-a-journey-cody-simd/image_007.png"
/>

That doesn’t look quite right. 3x slower than original code. Let’s have Cody explain what’s wrong with this approach: `Can you explain why the highlighted SIMD code is slower than its scalar equivalent in function CheckBoundingBoxScalar?`

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/enhancing-openrct2-performance-a-journey-cody-simd/image_008.png"
/>

OK, that’s a lot of useful information. It seems the code isn’t bottlenecked on the ALU (arithmetic logic unit), but on memory instead. But then again, Cody mentioned the prefetch effectiveness depends on various factors and I’ve decided to test if moving the prefetch to a place earlier in the paint ordering loop would improve performance.

Using another benchmark implemented earlier and a known performance-sensitive map, the code with no prefetch results are:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/enhancing-openrct2-performance-a-journey-cody-simd/image_009_crop.png"
/>

And with prefetch implemented:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/enhancing-openrct2-performance-a-journey-cody-simd/image_010_crop.png"
/>

**A ~5% win, for something that initially had been 3x slower!** I’m happy with that result. Cody helped me finally find the bottleneck and implement a decent improvement. You can [check the merged PR here](https://github.com/OpenRCT2/OpenRCT2/pull/21894).

## Conclusion

SIMD optimizations can be a powerful tool for improving performance, but it's crucial to understand the underlying bottlenecks and test assumptions thoroughly. With the assistance of AI tools like Cody, developers can streamline the process of writing tests, benchmarks, and optimized code, ultimately leading to better performance gains. Oh, and if you want to download and play OpenRCT2 yourself, check it out at [https://openrct2.org/downloads](https://openrct2.org/downloads)

---

Cody can help you code faster, improve your productivity, and unlock new knowledge. Give [Cody](https://sourcegraph.com/cody) a try today!


Michał Janiszewski

Learn how Michał Janiszewski used SIMD to optimize the OpenRCT2 project. With the help of Cody, Michał was able to achieve a significant performance improvement.

Enhancing OpenRCT2 performance: a journey with Cody and SIMD


<Alert type="secondary">This is a guest blog post from our community. <a href="https://discord.com/servers/sourcegraph-969688426372825169" target="_blank">Join our Discord</a> to meet the author and connect with other developers passionate about Code Search and AI!</Alert>

Excluding the visually appealing nature of graphically represented data, data represented using images is statistically easier to understand compared to textual data. Suppose you want to convey a rank on some data. You can choose to serially rank the data or adopt a better functionality for visualizing this data using [D3.js](https://d3js.org/), an open source JavaScript library for visualizing data. 

This article discusses data visualization using [D3.js](https://d3js.org/) and enhancing your productivity using [Cody](https://sourcegraph.com/cody).

## Prerequisites

This article will break down complex concepts to be easily understood. However, to properly follow through, you’ll need:

* [Node.js](https://nodejs.org) installed on your machine
* Knowledge of [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
* Basic data visualization concepts
* [Cody](https://sourcegraph.com/cody) AI assistant installed in your editor. 

## What is data visualization?

Before we get into the technical aspects, it’s important to understand the concept of data visualization and why we visualize data. One way to convey data is to use text. However, there are situations where textual representation of data does not suffice. For example, showing the rank of some data in ascending order. In conveying data, the most important factor to consider is the comprehension of viewers or anyone who reads the data, which means a conscious effort must be adopted to convey data, through text or graphics. 

Data visualization refers to the graphical representation of data using visual elements, such as charts, graphs, maps, and tables. 

## D3.js 

[D3.js](https://d3js.org/) (or simply D3, short for Data-Driven Documents) is an open source JavaScript library used to visualize data on the web. It is an extremely fast and flexible library. It allows you to express creativity in data visualization using HTML, CSS, and JavaScript (at the basic level). The term “Data-Driven Documents” means the visual elements are dynamically generated from the data provided, which makes D3 exciting to use. You provide the raw data and it generates the visual element. We’ll see how this works in a bit. 

## Cody AI

A key factor in choosing a library or tool in software development is ease of use, or how well it aids developers’ productivity. With Cody in the picture, this becomes less of a worry because it adds the missing piece to your development workflow. 

[Cody](https://sourcegraph.com/cody) is an open-source coding AI assistant developed by Sourcegraph that aids your development process by providing context-aware solutions based on your codebase. It has features such as code autocomplete, AI-powered chat with multiple large language models (LLMs), provides explanations on your code, can help optimize code for best practices, and more. In this article, you will learn how Cody helps you enhance productivity when visualizing data with D3.js. 

## Why use D3.js for data visualization?

The use of D3.js in data visualization is beneficial for many reasons, some of which include: 

* **Flexibility**: As I mentioned earlier, one aspect where D3.js stands tall, especially in comparison with other visualization libraries, is its flexibility. This is particularly interesting for developers looking to explore the full capabilities of data visualization without restriction. Unlike other libraries with pre-built charts, D3.js provides APIs to build any sort of chart you can imagine based on your data. 
* **Dynamic manipulation**: D3.js provides ease in manipulating visual elements. Once you change the values of the data, the visualization automatically updates in tune with that change. 
* **Scalability**: When dealing with graphically represented data or visual elements, developers are often concerned about performance and speed. D3.js is highly scalable for use in small and large projects. 
* **Support for Animations**: D3.js allows you to apply custom animations to your visualizations, making it more engaging and visually appealing. 
* **Framework Support**: As a JavaScript library, D3.js works with all JavaScript frameworks, making it widely used by a highly active community of users. 

## Getting started with D3.js

Now that you have learned about data visualization and the features of D3.js, it is time to see how it works in our application. In this article, we will be working in a Vanilla HTML environment. You can load D3.js from a CDN like so:

```html
<script type="module">
  import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
</script>
```

## Working principle

D3.js allows developers to bind arbitrary data to the DOM, which makes it easy to manipulate and update data in real-time. In this section, we will go through the basic logic of selecting elements to be visualized, modifying the elements with custom styling, and joining the data. 

### Selecting elements

The concept of selecting elements in D3.js isn’t so strange, especially from a JavaScript background. Selecting elements basically entails targeting the particular element you want to modify and visualize. 

Suppose you want to visualize elements with the class `chartbox`, you simply use the `.chartbox` class selector, or a `div` element selector to select a `div` element. D3.js provides two methods of selecting elements; the `d3.select()` method and the `d3.selectAll` method. The `d3.select` method selects only the first matching element while `d3.selectAll` selects all matching instances in the DOM(from top to bottom). Consider the practical example below to learn more about how the select methods work:

```html
<div>
  <h1>Cody by Sourcegraph is the best AI coding assistant</h1>
  <h1>Cody by Sourcegraph is the best AI coding assistant</h1>
  <h1>Cody by Sourcegraph is the best AI coding assistant</h1>
</div>
```

Then I select the `h1` element with the `.select()` method:

```javascript
d3.select("h1").style("color", "red");
```

Here’s the result:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/gp-exploring-data-visualization-with-d3-cody/image_001.png"
/>

We see that only the first `h1` element is affected because we used the `.select()` method. We can toggle the codebase to target all matching instances of `h1` using the `.selectAll()`. Rather than manually make the changes, we can allow Cody to make further edits or manipulation by simply **telling it to do so**, since we already established a context in our codebase.

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/gp-exploring-data-visualization-with-d3-cody/image_002.gif"
  caption="Using Cody's Edit Command"
/>

And there! Come on, how interesting is this? I tell Cody to _change the method to .selectAll and the color to blue_, and then click on **accept** (since it’s precisely the change I want to make). Here’s the result:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/gp-exploring-data-visualization-with-d3-cody/image_003.png"
/>

There you go. It acts just as expected, targeting all instances of `h1`. 

### Modifying elements

The next step after the selection of elements is to modify them. Yes, you’ve targeted the element, what styles do you want to pass into it? How do you want it to behave? In the previous section, we saw how we could select elements in D3.js and then change the text color of those elements. When an element is selected, several operations can be performed on it, which entails what modifying elements is all about at the basic level. Here’s an example for your understanding:

```javascript
d3.select("div")
    .attr("class", "container") // adds a class named "container"
    .style("color", "blue")      // changes the color to blue
    .append("h2");               // appends element h2 to div
    .remove()                      // removes selected element from DOM
```

### Joining data

D3.js allows you to bind data from an array to a specified element using the `.join()` method. This method makes it easy to manipulate data and pass new values to an element. The `.join` method returns the updated version of the selected element. Let’s see how this works:

```javascript
let codyFeatures = [
    "Code Autocomplete",
    "Context-aware solutions",
    "Optimize Codebase",
  ];

  d3.select(".cody")
    .selectAll("h1") 
    .data(codyFeatures)
    .join("h1")
    .attr("class", "cody")
    .text((d) => d);
```

Here, I created an array called `codyFeatures` which contains some features of Cody AI. Then I selected the first element with a class of `.cody`, passed the array as a parameter in the `.data` method, and used the `.join` method to bind the values of the array to the element (in this case, the `h1` element). In summary, I dynamically joined the array to the h1 element. Here’s how the result looks:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/gp-exploring-data-visualization-with-d3-cody/image_004.png"
/>

And there! We have our result just as expected. 

## Visualizing data using charts

Now that we’ve discussed the basic syntax and logic of D3.js. Let’s dive into using some of that logic to create charts to convey some textual data. Here, we want to convey data on a bar chart based on the value in an array of numbers. Let’s start by defining the width and height of our chart.  

```javascript
const width = 600;
const height = 200;
```

We set our width to 600 so it contains the value of 9 numbers without compression. The next step is to create an array of numbers to represent the data to be visualized.  

```javascript
const values = [100, 90, 80, 60, 50, 40, 30, 20, 10];
```
 
We now have the dimension of our chart set and our array of numbers defined. The next step will be to create our SVG container using the `d3.create()` method. SVG helps to visualize data by creating customizable containers. Let’s see how it is done: 

```javascript
const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height);
```
 
After creating an SVG element here, we modify the element just like we discussed earlier. The `.attr()` method takes in the property and the value. We already defined the values for our width and height earlier. Now, we want to design what each bar of the chart would look like: 

```javascript
 svg.selectAll("rect")
    .data(values)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 60)
    .attr("y", d => height - d)
    .attr("width", 50)
    .attr("height", d => d)
    .attr("fill", "purple");
```
 
This particular block of code utilizes all the concepts we discussed earlier — selecting elements, modifying elements, and binding elements. We start by selecting all the elements and then bind the values of the array so they correspond to each element. The `.enter()` method serves as a placeholder for data with no corresponding elements in the DOM. Next, we append the `rect` element to the SVG to convey a particular piece of data. Then we proceed to evenly space the bars and make sure the height of the bars is based on the values of the numbers. That is, the largest numbers represent the tallest bars. We set the color of the bars to purple(just because that’s the theme at Sourcegraph). 

On a final bit, we append our SVG node to the DOM so it reflects on our browser.  

```javascript
let chart = document.getElementById("chart");

chart.append(svg.node());

<div id="chart"></div> //html
```

Here’s the full code: 

```javascript
const width = 600; 
const height = 200;

const values = [100, 90, 80, 60, 50, 40, 30, 20, 10];
const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("rect")
    .data(values)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 60)
    .attr("y", d => height - d)
    .attr("width", 50)
    .attr("height", d => d)
    .attr("fill", "purple");

let chart = document.getElementById("chart");

chart.append(svg.node());

<div id="chart"></div>
```

Here’s the result:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/gp-exploring-data-visualization-with-d3-cody/image_005.png"
/>


Here, we see the chart is in descending order, just as we arranged the numbers in the array. How about toggling the codebase so our chart appears in ascending order? We can always call on our good old friend, Cody, to help. Let’s give it a try:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/gp-exploring-data-visualization-with-d3-cody/image_006.gif"
  caption="Using Cody to arrange our chart in ascending order."
/>

And there! I simply tell Cody to _modify this code so the chart appears in ascending order._ It takes in the highlighted piece of code as context and then provides a context-aware solution by rearranging the values of the numbers of the array. Let’s see how the result looks:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/gp-exploring-data-visualization-with-d3-cody/image_007.png"
/>

It acts just as we expect it to, in ascending order. I have to say a big thank you to Cody for all the help. 

## Animation and transition in D3.js

When talking about appealing and eye-catching visualization, we must also talk about animation. Animation, when used correctly, add that extra bit of spice to our visualization and make it better. In this section, we will talk about how to apply animation to your visualization in D3.js. 

### The `.transition()` method

This handles the basic functionality of making elements move in D3.js. Without transitions, all elements appear instantaneously on your web browser when loaded or reloaded. Transitions give the flexibility to control the progression of elements on the browser. With the `.transition` method in D3.js, we can monitor the current state of elements and the target state. So, rather than only working with a single (final) state, we’re working with two states here. The element then moves in tune with the difference in values of the two states. We’ll see how that works in a bit. 

### The `.duration()` method

The `.duration()` method is also important in making transitions at the basic level. As you have probably guessed, it allows us to control the time frame of our animation. You can make your animation slow or fast depending on the particular use case. 

### Adding animations 

Having understood the basic concept of the `.transition()` and `.duration()` methods in D3.js, we can then add animation to our chart. First, we need to revisit our codebase and make a few changes to the properties so we have two states; the current state and the desired or target state. Let’s start by providing the width and height of the bars at the current state and then defining it at the target state. At the current state, we have:

```javascript
svg
    .selectAll("rect")
    .data(values)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 60)
    .attr("y", (d) => height - d)
    .attr("width", 0)  // width at current stage
    .attr("height", 0); // height at current stage
```

Here, we see that the width and height are set to 0, which means it doesn’t exist at the current stage. We can then set some values at the target stage like so:

```javascript
d3.selectAll("rect")
    .transition() // transition method
    .duration(2000) // duration set to 2000ms
    .attr("fill", "purple") // color of bar set
    .attr("width", 50) // value for width at target stage
    .attr("height", (d) => d); //  value for height at target stage
```

In the above code, we select all the `rect` elements with the `selectAll` method, using the .`transition` method, and then set our duration to 2000ms which makes the animation run for 2 seconds. Then we proceed to set the styles of the bar at the target stage(remember we set the width and height to zero at the start stage). 

Here’s the full code:

```javascript
// current stage
svg
    .selectAll("rect")
    .data(values)
    .enter()
    .append("rect")
    .attr("x", (d, i) => i * 60)
    .attr("y", (d) => height - d)
    .attr("width", 0)
    .attr("height", 0);

// target stage
  d3.selectAll("rect")
    .transition()
    .duration(2000)
    .attr("fill", "purple")
    .attr("width", 50)
    .attr("height", (d) => d);
```

Here’s the result:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/gp-exploring-data-visualization-with-d3-cody/image_008.gif"
/>

And there! We’ve added animation to our chart. Feel free to make some changes and explore!

## Conclusion

In this article, we learned about data visualizations with D3.js, the features of D3.js, how to get started with D3.js, the working principle and logical structure of visualizing data in D3.js, and how to visualize data using charts in D3.js. Also, we used Cody as a coding assistant to enhance our productivity. Apart from the fact that we made some queries to Cody to help write our code, it was also super helpful with the autocomplete feature as I wrote the code.

---

Cody can help you code faster, improve your productivity, and unlock new knowledge. Give [Cody](https://sourcegraph.com/cody) a try today!


This article explores data visualizations using D3.js, covering its features, getting started, working principles, and how to create charts with the help of Cody.

Exploring data visualization with D3.js and Cody


<Alert type="secondary">This is a guest blog post from our community. <a href="https://discord.com/servers/sourcegraph-969688426372825169" target="_blank">Join our Discord</a> to meet the author and connect with other developers passionate about Code Search and AI!</Alert>

Hello, my name is Charles Goode and I’m an electrical engineering major at Kennesaw State University. I’m here to tell you about Kennesaw Motorsports and to walk you through how I completed my first project on the team with the help of [Cody](https://sourcegraph.com/cody). 

## Kennesaw Motorsports

[Kennesaw Motorsports](https://www.ksumotorsports.com/) is a college competition team where students from various majors come together with one mission: _to build race cars_. Each year, we build two formula-style vehicles to compete in a competition held by the Society of Automotive Engineers, known as [Formula SAE](https://en.wikipedia.org/wiki/Formula_SAE). Each team is evaluated by industry professionals on presentation, design, cost, and performance to give future engineers the experience they can’t get in the classroom.

![](https://storage.googleapis.com/sourcegraph-assets/blog/leveraging-cody-to-implement-gps-data-logging/image_001.jpeg)

## My First Project with Cody

I will walk you through how Cody helped me complete my first project on the team. Going into this project, I needed more experience writing code and messing with microcontrollers and electronics. Despite my situation, I was able to complete my project quickly with the help of Cody. 

The project aims to implement a GPS data logger in our race car. We collect a ridiculous amount of data throughout our system, and the ability to plot the position of our car as it goes around a track can help us perform much better data analysis.

Hardware Involved 

* [Teensy 4.0 Microcontroller](https://www.pjrc.com/store/teensy40_pins.html)
* [Adafruit Ultimate GPS Breakout Board](https://www.adafruit.com/product/746)
* [Adafruit Micro SD Breakout Board](https://www.adafruit.com/product/254)

First, I start with the Teensy and the GPS. Before I mess with the Micro SD card or get into plotting, I want to make sure the GPS will work correctly.

For prototyping, I am using a breadboard and jumper wires. Below, you'll find the layout of the hardware and wiring instructions.

 
![](https://storage.googleapis.com/sourcegraph-assets/blog/leveraging-cody-to-implement-gps-data-logging/image_002.jpeg)


* 3V to Vin (3V on Teensy to GPS VIN)
* GND to GND
* TX to RX (Pin 8 on Teensy to GPS RX)
* RX to TX (Pin 7 on Teensy to GPS TX)

Now everything is wired up correctly, I can ask Cody to write some code for my project.

![](https://storage.googleapis.com/sourcegraph-assets/blog/leveraging-cody-to-implement-gps-data-logging/image_003.png)

_Prompt: Write me some basic code for using an Adafruit Ultimate GPS with a Teensy 4.0_

Cody quickly delivers, and the code runs perfectly once I install the necessary library. As you can see, the serial monitor is now printing the coordinates and letting me know the date, time, and satellite information.

Now that we have our microcontroller and GPS working together, we can add the microSD breakout board. This will allow us to print the data from the GPS in a .CSV file for further analysis. 

Here is the updated hardware layout and additional wiring instructions. 

![](https://storage.googleapis.com/sourcegraph-assets/blog/leveraging-cody-to-implement-gps-data-logging/image_004.jpeg)

* SCK to CLK (Pin 13 on Teensy to microSD CLK)
* MISO to DO (Pin 12 on Teensy to microSD DO)
* MOSI to DI (Pin 11 on Teensy to microSD DI)
* CS to CS (Pin 10 on Teensy to microSD CS)

Now that everything is wired up correctly, I can ask Cody for additional code. This time, I mentioned the microSD breakout board and specifically asked only to send the GPS coordinates to the CSV file.

![](https://storage.googleapis.com/sourcegraph-assets/blog/leveraging-cody-to-implement-gps-data-logging/image_005.png)

_Prompt: Open a CSV file on the SD card and print the GPS coordinates_

Cody quickly tells me which libraries I need and completely rewrites the code to fit my specifications. Once I upload this, the coordinates begin printing without the unnecessary information from before. 

I will now plug the Micro SD card into my computer to confirm it opened the file and correctly formatted the coordinates. 

![](https://storage.googleapis.com/sourcegraph-assets/blog/leveraging-cody-to-implement-gps-data-logging/image_006.png)
 
All the data is formatted correctly, but we need some real data to plot this correctly. The next time we tested one of our cars, I collected some real data from the CSV file. Now that we have the data needed, we must visualize it. There are a few ways to do this, but I picked MATLAB. I cannot do this inside my IDE, but Cody can still be helpful. 
 
![](https://storage.googleapis.com/sourcegraph-assets/blog/leveraging-cody-to-implement-gps-data-logging/image_007.png)

I asked Cody for a MATLAB script, and it was quickly delivered. I went to MATLAB, pasted in the script, and it ran perfectly. Once I input the data from our testing day, it plotted it. Here is the data visualized using the plot function.

![](https://storage.googleapis.com/sourcegraph-assets/blog/leveraging-cody-to-implement-gps-data-logging/image_008.png)

As you can see, Cody was able to help me complete my first project quickly. 

## Favorite command

Cody has many features, but one of the most important features for people trying to learn is the **“Explain Code”** command. 

![](https://storage.googleapis.com/sourcegraph-assets/blog/leveraging-cody-to-implement-gps-data-logging/image_009.png)

With the “Explain Code” command, Cody quickly gives me an in-depth explanation of the code. I am trying to learn from this project, so understanding the code is essential.

Within seconds of my command, Cody gives me an in-depth explanation of how the entire program functions. With this information, I can see exactly how the outcome is achieved and can return to this chat to help me complete similar functions in my next project. 


## Conclusion

A major key to being successful as a team or as a company is making meaningful relationships, and we are thankful to have one with Sourcegraph. We are always looking for ways to grow as a team, and receiving support from a fast-growing company in the Software and AI industry is a major leap in the right direction—big thanks to the team at Sourcegraph for supporting our journey towards innovation and success. 

To learn more about Kennesaw Motorsports, visit our website [here](https://www.ksumotorsports.com/)!

---

Cody can help you code faster, improve your productivity, and unlock new knowledge. Give [Cody](https://sourcegraph.com/cody) a try today!

Charles Goode

Charles Goode, an electrical engineering student at Kennesaw State University, shares his experience using Cody to rapidly implement a GPS data logging system for the university's Formula SAE racing team, Kennesaw Motorsports.

Crossing the Finish Line Faster: Leveraging Cody to Implement GPS Data Logging


<Alert type="secondary">This is a guest blog post from our community. <a href="https://discord.com/servers/sourcegraph-969688426372825169" target="_blank">Join our Discord</a> to meet the author and connect with other developers passionate about Code Search and AI!</Alert>

**Hey there, fellow Digital Nomads!** Craving that perfect blend of beachside cocktails and coding deadlines? Ever wished your hotel room came with a built-in IDE, not just a mini bar? Well, strap on your walking shoes and ditch the laptop, because we're about to unlock the secret to mobile coding freedom: [Termux](https://termux.dev/) and [Cody](/cody).

Think of Termux as your secret Swiss Army knife for Android. It's a Linux shell disguised as an app, giving you access to a whole ecosystem of developer tools, right on your tablet. No more lugging around heavy laptops, just whip out your trusty tablet and get coding under that palm tree. 

But wait, there's more! Termux isn't just a fancy terminal, it's your portal to a full-fledged coding environment. 

Enter Visual Studio Code (VS Code), the lightweight code editor that's like your coding bestie. Imagine VS Code, but shrunk down and living inside Termux, ready to party anywhere you go. Open it in any browser, on any device, and boom – instant coding paradise.

But the real magic spell comes with Cody. Think of Cody as the Obi-Wan Kenobi to your coding Luke Skywalker. Cody autocompletes your code, suggests solutions, and even refactors your messy bits like a coding Yoda. No more staring blankly at the screen, Cody's got your back (and your code's future).

<Figure 
  src="https://storage.googleapis.com/sourcegraph-assets/blog/cody-on-the-road/image1.jpg"
  alt="Cody as the Obi-Wan Kenobi "
  caption="Cody as the Obi-Wan Kenobi "
/>

With Termux, VS Code, and Cody, the world is your office, and every sunrise is a new coding adventure. Ready to level up your mobile coding game? Buckle up, let's dive into the nitty-gritty!

## Unleashing Your Inner Coding Nomad - Installing Termux, VS Code Web, and Cody

Alright, time to roll up our sleeves and get our hands dirty! We're about to transform your tablet into a coding powerhouse, and trust me, it's easier than wrangling a stubborn Wi-Fi hotspot.

First up, Termux. Ditch the Google Play Store, we're going rogue with f-droid, the independent app haven. Here's the link: [Termux (F-Droid)](https://f-droid.org/en/packages/com.termux/) Just tap, install, and boom – instant Linux playground!

Next up, VS Code Web. It's like magic, but without the capes and weird spells. Just a few quick commands in Termux, and voila – you'll have a web-based coding playground ready to rock.

Here's the quick and dirty guide for the installation wizards among you:

```bash
pkg install tur-repo
pkg update
pkg upgrade -y
pkg install -y \
  build-essential \
  binutils \
  pkg-config \
  python3 \
  nodejs-lts
node -v
pkg install code-server
```

Now, unleash the coding beast with one final command: `code-server .`

Open up your browser and navigate to [localhost:8080](http://127.0.0.1:8080) and **Boom!** You've officially got VS Code Web up and running, ready to code like there's no tomorrow even if you're coding on a beach in Bali. Visit the [coder docs](https://coder.com/docs/code-server/latest/termux#installation) for more information and issues.

Finally, the pièce de résistance: Cody, your AI coding sidekick. Download the extension from within VS Code Web extensions tab.


<Figure 
  src="https://storage.googleapis.com/sourcegraph-assets/blog/cody-on-the-road/image2.jpg"
  alt="Screenshot of my tablet with Termux on the left and VS Code with Cody on the right"
  caption="Screenshot of my tablet with Termux on the left and VS Code with Cody on the right"
/>

## Cody: Your AI-powered assistant for Android development

Remember that moment when Luke Skywalker first met Obi-Wan Kenobi? That "whoah, this coding life just got a whole lot cooler" feeling? Well, Cody's basically his coding equivalent – your AI sidekick who elevates your Android development game to Jedi-level. No more staring blankly at the screen, struggling with syntax or logic. Cody's got your back.

Whether you're building a simple game or a complex social media app, Cody is your secret weapon. 

Here's how Cody can help you build Android apps:

* **Android-specific suggestions:** Cody knows all the ins and outs, offering suggestions for activities, layouts, and even resource files.
* **Help with complex tasks:** Need to implement a custom view or handle complex logic? Cody's got your back, providing code snippets and examples to get you started.
* **Speed up your development:** Forget wasting time on boilerplate code or debugging simple errors. Cody takes care of those pesky details, letting you focus on the big picture.

The possibilities are endless, nomads! With Cody, you can build games, productivity apps, social media platforms – anything your nomadic heart desires. And you can do it all from the comfort of your hammock, beach towel, or even that questionable air mattress you found in a hostel in Laos.

With Cody by your side, you'll be coding Android apps like a pro, no matter where your nomadic adventures take you.


<Figure 
  src="https://storage.googleapis.com/sourcegraph-assets/blog/cody-on-the-road/image3.jpg"
  alt="Codying on the beach"
  caption="Codying on the beach"
/>

## Bonus: Nomad coding hacks and fun facts

Alright digital nomads, we've unlocked the secrets of coding on the go with Termux, VS Code Web, and Cody. But the adventure doesn't stop there! This bonus chapter is your one-stop shop for optimizing your nomadic coding experience and uncovering some fun facts to fuel your wanderlust.

### Termux tweaks for the tech-savvy Nomad

* **Power up your shell:** Don't settle for the default bash shell! Install [zsh](https://www.zsh.org/) for a more customizable and powerful experience with plugins, themes, and autocompletion.
* **Keyboard ninja moves:** Master essential keyboard shortcuts for faster navigation and editing. Learn to copy, paste, and yank like a pro!
* **Remote access:** Manage your Termux environment from anywhere! Set up SSH access to remotely connect and tinker with your code from another device.

### Fun facts to fuel your Nomadic coding soul

* **Digital Nomad boom:** The number of digital nomads globally is expected to reach 1 billion by 2035! That's a whole lot of laptops on beaches (and hopefully, more Termux tablets!).
* **Fastest Wi-Fi:** South Korea holds the crown for the world's fastest average internet speeds. Get your coding fix in Seoul's bustling cafes or serene temples.
* **Digital Nomad visa paradise:** Estonia offers a special "digital nomad visa" for remote workers, making it a haven for location-independent coders. Imagine coding from a medieval town like Tallinn!

---

Cody can help you code faster, improve your productivity, and unlock new knowledge. Give [Cody](https://sourcegraph.com/cody) a try today!

Tino Wening

An informal guide for digital nomads, showcasing how Termux and Cody turn your tablet into a beach-friendly coding hub. Ditch the laptop for a lightweight setup with Termux's Linux shell, Visual Studio Code's web interface, and Cody.

Coding on the road with Android and Cody


<Alert type="secondary">This is a guest blog post from our community. <a href="https://discord.com/servers/sourcegraph-969688426372825169" target="_blank">Join our Discord</a> to meet the author and connect with other developers passionate about Code Search and AI!</Alert>

---

## Friends, Coders, Netizens, lend me your snippets!


To start with, let's talk about the significance of Custom Commands within the realm of programming and automation. Commands play an important role by giving you the ability to define specific actions for your needs, saving you time. Consider scenarios like utilizing Cody to insert specific types of comments, code editing, or even language translation for entire files. In even more simplistic terms, they let you make a button that does a thing, then you can click that button to do that thing an unlimited amount of times without having to type anything again!  Sound good? I bet it does...so let's talk about it in the context of our main man Cody.

Cody makes it easy to create and integrate custom commands into your workflow.

In essence, Custom Commands serve as the virtuosos of your coding orchestra, ensuring a harmonious and efficient coding experience.


## Using Commands with Cody

With Commands, you can effortlessly create and execute reusable prompts without ever opening the Chat sidebar. This improvement streamlines your workflow and unlocks a new level of productivity.

**An example command JSON that would sit comfortably in your cody.json file:**

```json
    "algorithm-analysis": {
      "description": "algorithm-analysis",
      "prompt": "Analyze and document the algorithms used in the code, detailing their efficiency and how they achieve their intended purpose.",
      "context": {
        "codebase": true,
        "selection": true,
        "currentFile": true
      }
```

This would then be called in your editor with a slash command: `/algorithm-analysis`


## Getting started with Custom Commands

![](https://storage.googleapis.com/sourcegraph-assets/blog/codyception-coding-cody-tools-with-cody-001.png)

You can [create Custom Commands](https://sourcegraph.com/docs/cody/capabilities/commands#custom-commands) directly in Visual Studio Code. But, to make your life easier with getting started with Custom Commands, I [created a handy little tool](https://cody.kynlo.co.uk) that you can use to generate custom commands!

![](https://storage.googleapis.com/sourcegraph-assets/blog/codyception-coding-cody-tools-with-cody-002.png)

Now, nobody is forcing you to use my little tool, and you are absolutely free to go create these manually!  There's [highly detailed documentation](https://sourcegraph.com/notebooks/Tm90ZWJvb2s6MzA1NQ==#custom-commands-194e6b3f-f682-475f-9c66-cfcc84d05c66) written by the amazing [beatrix](https://twitter.com/3eatrix), for those who want to dive even deeper into all of that beautiful behind-the-scenes code!


## Examples of time-saving commands

![](https://storage.googleapis.com/sourcegraph-assets/blog/codyception-coding-cody-tools-with-cody-003.png)

```json
    "implement-code-localization-support": {
      "description": "implement-code-localization-support",
      "prompt": "Implement code localization support in the current project, enabling adaptation to different languages and cultural preferences.",
      "context": {
        "codebase": true
      }
    },
    "check-code-code-smells": {
      "description": "check-code-code-smells",
      "prompt": "Check and identify code smells in the current project, suggesting refactoring for improved code quality.",
      "context": {
        "codebase": true
      }
    },
    "evaluate-code-external-apis": {
      "description": "evaluate-code-external-apis",
      "prompt": "Evaluate and report on the usage and reliability of external APIs in the current project, suggesting updates or replacements.",
      "context": {
        "codebase": true
      }
    },
    "implement-code-database-indexing": {
      "description": "implement-code-database-indexing",
      "prompt": "Implement code database indexing strategies in the current project, optimizing data retrieval and query performance.",
      "context": {
        "codebase": true
      }
```

## The cody.json file: tailoring commands to your needs

Customizing commands is made easy with the `cody.json` file. Here's how you can leverage it:

### Project-specific commands

Create `cody.json` in the `.vscode` directory of your project to make commands accessible only in that workspace. Cody will have access to these custom commands when working on the project.

### Global commands

Create a new `cody.json` file in the `.vscode` directory of your home directory for commands accessible across multiple projects. Cody will have access to these global custom commands in any workspace.

### Workspace vs. user commands

Understanding the scope of your custom commands is essential:

- `cody.json` in a project's `.vscode` folder: Commands are available only in that workspace.
- `cody.json` in the home `.vscode` folder: Commands are available globally across all workspaces.

This flexibility allows you to organize project-specific commands separately from reusable commands which are accessible globally, enhancing your customization capabilities with Cody.

### Running commands made simple
Executing commands is a breeze with these options:

- Type / in the chat box and select your desired command from the pop-up list.

- Use ctrl+shift+v (cmd+shift+v on macOS) anywhere in your document to open the Command Menu, and just like magic, you can select and run commands without the chat sidebar.

- Right-click on selected code to open the Cody context menu and choose a command.

- Search for >Cody: Commands Menu in your Command Palette to access the Command Menu.

## Conclusion

Cody swiftly became my favorite AI Coding Assistant, thanks to the arsenal of available models, especially GPT-4 Turbo, and the stellar Cody Pro features. The fantastic team and vibrant community, especially on Discord, set Cody apart. Unmatched support and lightning-fast bug fixes and feature additions make Cody a coding gem.

I hope this glimpse into Cody and the enchantment of Custom Commands sparks your curiosity. Now that you're deep into this post, you're probably itching to try these methods and commands yourself! [Try Cody today](https://cody.dev) for yourself. 

Finally, why not [join us on Discord](https://discord.com/servers/sourcegraph-969688426372825169) and share some of your creations with us!

With that, I bid you farewell!


Kynlo Akari

This post with teach you how Custom Commands in Cody can simplify your coding process by automating repetitive tasks, saving you time and effort.

Codyception: coding Cody tools with Cody for coding with Cody


<Alert type="secondary">This is a guest blog post from our community. <a href="https://discord.com/servers/sourcegraph-969688426372825169" target="_blank">Join our Discord</a> to meet the author and connect with other developers passionate about Code Search and AI!</Alert>

React is a popular frontend library used for building interactive user interfaces. React is a common choice for many organizations. 

In this tutorial, we will build a React app that when given a keyword will generate tweets using GPT-3 . We will use [Cody](https://sourcegraph.com/cody) as our AI assistant, and learn about five tips to enhance our React development experience with AI.

## Prerequisites

1. [Node.js](https://nodejs.org/en) installed on your machine
2. Basic knowledge of developing web apps using React
3. TypeScript (optional)
4. An [OpenAI API key](https://platform.openai.com/docs/api-reference). 
5. [Cody](https://sourcegraph.com/docs/cody#getting-started) AI assitant installed in your editor. 

## Cody overview

Cody is a coding AI assistant developed by Sourcegraph which has the complete context of your codebase, and can provide context aware answers. Cody has many features like chat to answer any questions, provides usefel code completions (code autocomplete), commands, and more. In this tutorial, we will be using many of these features to help build our app effectively.

## Top 5 tips for using Cody with React

### 1. Add enough context

The first tip while using Cody to keep in mind is always to provide the required context, which is info about the coding question or the bug, to get a helpful response. Cody uses three types of context to give the result keyword context, graph context and the codebase context. Codebase context is used by Cody when the repository is indexed, while in another case, the keyword context is used. For this project, all of the responses provided by Cody will be using the keyword context.

Let's see a few examples of Cody's input prompt, how to provide enough context and build the search bar for our tweet generator app.

The first question I asked Cody is: `I want to build a React app using GPT-4, which can generate the tweet content for me to post on Twitter. Tell me how to begin with this app and how I can develop it in the best possible way.`

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_1_1.jpg" width="280" height="320" /></td>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_1_2.jpg" width="280" height="320" /></td>
  </tr>
 </table>

Let's break down this prompt and understand how it has enough context for the answer.
1. Libraries info is mentioned
2. Application details are mentioned
3. The question is clearly asked

You can see that all the required context is mentioned, so it gave us the proper result by telling about the starter point of the application as how to use `GPT-4` from the `openai` npm package, and the other details to keep in mind. It also mentioned the testing, and the deployment method one can follow to deploy the application.

What if the same question is asked without providing enough context? Let's see the result with this question: `I want to develop a React app to generate tweet content. Tell how to develop`

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_2_1.jpg" width="280" height="320" /></td>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_2_2.jpg" width="280" height="320" /></td>
  </tr>
 </table>

You can see that it responded but it could be better so further extra steps would be required to get the desired result.

You can see in the above examples how providing enough context with the prompt can result in a better response from Cody. Let's now build the search bar for this application, which would accept comma-separated keywords for generating the tweet content and the app UI.

I asked Cody first about the UI components I needed to develop for this app, and looking at the results, it provided a helpful response.

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/input_prompt_3.jpg" width="280" height="320" /></td>
  </tr>
 </table>

 You can find the code for each UI component [here](https://github.com/deepak2431/tweets-generator/tree/main/src/components).

Next, I asked about how to build the search input box along with a submit button. Cody provided me with the code snippets of the state to be used, the different UI components and the handler function. So, definitely a good job here too!

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_4_1.jpg" width="280" height="320" /></td>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_4_2.jpg" width="280" height="320" /></td>
  </tr>
 </table>

One thing to notice here is that now, for the subsequent prompt input, we are just using `this app`, and it has the context of the app. This is because whenever Cody answers a question, it considers the previous input of the same chat as a context, too.

The `Home.tsx` code till now would look like this:

```typescript

import React, { useState } from "react";

import SubmitButton from "./components/SubmitButton";
import Footer from "./components/Footer";
import Header from "./components/Header";
import SearchInput from "./components/SearchInput";

const Home = () => {
  const [keywords, setKeywords] = useState("");

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setKeywords(e.target.value);
  };

  const handleInputSubmit = () => {
    console.log(keywords);
  };

  return (
    <div className="home">
      <Header />
      <div className="content">
        <h2>Create Viral Tweet Content With Keywords</h2>
      </div>
      <div className="input_container">
        <SearchInput
          placeHolder="Enter Keywords"
          value={keywords}
          handleChange={handleInputChange}
        />
        <SubmitButton
          buttonText="Generate Tweet"
          handleClick={handleInputSubmit}
        />
      </div>
      <Footer />
    </div>
  );
};

export default Home;
```

### 2. Input clear prompts

The second tip is that whenever you use Cody, constantly input clear and concise prompts. Let's look into some example prompts that we will use with our app to make this clear. 

I input Cody this prompt: `I want to use the keywords from the input to generate the Tweet content. Write me the code for it.`

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_5_1.jpg" width="280" height="320" /></td>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_5_2.jpg" width="280" height="320" /></td>
  </tr>
 </table>

You can see that it was not able to generate any code as it is asking for more clear prompt details so can provide helpful code which can be used. What if we clarify in the prompt that it should be for the React app?

The updated Cody prompt: `I want to use the keywords from the input to generate the Tweet content using the openai npm package in a React app. Write me the code for it.`

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_6_1.jpg" width="280" height="320" /></td>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_6_2.jpg" width="280" height="320" /></td>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_6_3.jpg" width="280" height="320" /></td>
  </tr>
 </table>

A small changes in prompt made huge difference in the result. The results it gave is mostly perfect which can be used. Awesome job by Cody here! 

This is the `generateTweet` function for our app:

```typescript
  const generateTweet = async() => {

    const response = await openai.chat.completions.create({
      messages: [{ role: 'user', content: `Generate a viral tweet using the keywords: ${keywords}` }],
      model: 'gpt-3.5-turbo',
    })

    const tweet = response.choices[0].message.content;

    console.log(tweet)
  }
```

This is why it is always good to keep in mind that you add as much clarity as you can in the prompts to get a better response. 

So now, we are done with 80% of our app, and we need to render the generated results using the Twitter Card UI component.

### 3. Use commands effectively

The commands is one of the favourite features of Cody for many users because of it being so developer-friendly to use. You can use commands to ask a question, fix a bug, make a refactor or edit any portion of your code.

Let's see if I can use the `/edit` command of Cody to edit the `Home` component to render the generated tweet and also hide the input search box and button when it is being displayed.

Cody prompt for the `/edit` command: Update the Home component to render the TweetCard in the UI below the header. Also, hide the input box and the button using a state when the Tweet is rendered.

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/input_prompt_7.gif" width="680" height="520" /></td>
  </tr>
 </table>

You can see in the result how Cody considered the selected code and the prompt to update the code correctly, which will render the tweets. It also added a state variable to hide the search box. 
There are some minor typos which Cody did, such as using the wrong props name of the TweetCard, which can be updated easily. So, it's 98% CORRECT results with a 2% typo. This is how Cody can help you improve your productivity.

You can also use the Cody inline chat feature to ask any question related to any section of the codebase you have.

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/input_prompt_8.gif" width="680" height="520" /></td>
  </tr>
 </table>

There is a list of other Cody commands which you can use as per your use case. 

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/commands.jpg" width="520" height="430" /></td>
  </tr>
 </table>

What if I want to create any commands of my own? So, the good thing is that's also possible with Cody. You can create your custom commands with your prompts and different configurations in a simple JSON format. You can check more about the custom commands [here](https://docs.sourcegraph.com/cody/custom-commands).

### 4. Wrap up the project

Whenever you're working on a project or a feature, after you finish the development, there are many other things to take care of, like writing documentation, adding tests, completing TODO, etc. Cody can be a great help and save ample time for you.

Let's create a custom command to add tests for our designed app components, which we can use to add all our tests. You can directly use the  `/edit` commands with the prompt, but it's always a good idea that if you are doing something repetitively with Cody, then create a custom command for it.

Custom Command: `/add-test`

```json
{
  "commands": {
    "add-test": {
      "prompt": "Write a unit test for the selected React component.",
      "context": {
        "codebase": true,
        "selection": true,
        "currentDir": false,
        "openTabs": false
      },
      "description": "Add test for the app components."
    }
  }
}
```

This is what a custom-commands JSON looks like after creating one. You can directly use this by adding it to the `cody.json` file.

The `/add-test` command is in action.

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/input_prompt_9.gif" width="680" height="520" /></td>
  </tr>
 </table>

Similarly, you can use the `/doc` command to add documentation to any components.

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/doc.jpg" width="350" height="320" /></td>
  </tr>
 </table>

You can also use the `/edit` command, which we used before for TODO or the `/ask` command to understand how to resolve this. Cody is always there to help you with any coding task you need!

### 5. Navigate codebases faster

The last tip I would like to discuss is how to navigate any codebase faster with Cody. Assume you developed this application and then passed it to another team or developer to further expand on it. Now, how can the developer understand this codebase faster and get the answers to questions like the components used, how tweets are generated, rendered, etc? For all this, Cody is a savior. 

Let's see this with the [React](https://github.com/facebook/react) library codebase by Facebook, which we have used in this app. 

Question 1: Tell me how the React library is implemented using the current codebase as the context.

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/react_1.jpg" width="520" height="380" /></td>
  </tr>
 </table>

You can see that Cody explained the React codebase in brief, as well as the structure of the repo and the algorithms this library uses.

Let's understand more about the DOM diffing algorithm.

Question 2: Tell me more about the DOM diffing algorithms, and explain to me the code of it

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/react_2.jpg" width="520" height="380" /></td>
  </tr>
 </table>

Cody explained the diffing algorithm in detail, its time complexity, and the different functions which are used.

You can also look at any function in detail using the prompt `/search {keyword}`.

<table>
  <tr>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_10_1.jpg" width="280" height="320" /></td>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_10_2.jpg" width="280" height="320" /></td>
    <td><img src="https://storage.googleapis.com/sourcegraph-assets/blog/blog-react-cody-tip-images/prompt_10_3.jpg" width="280" height="320" /></td>
  </tr>
 </table>

## Conclusion

In the blog, we saw five different tips for using Cody as an code AI assistant for building React applications. The tips mentioned here can be used with any project, framework, or library. Cody can help you code faster, improve your productivity, and unlock new knowledge. Give [Cody](https://sourcegraph.com/cody) a try today!


Deepak Kumar

Learn how to best leverage Cody in your React based applications.

Top 5 tips for using Cody with React


<Alert type="secondary">This is a guest blog post from our community. <a href="https://discord.com/servers/sourcegraph-969688426372825169" target="_blank">Join our Discord</a> to meet the author and connect with other developers passionate about Code Search and AI!</Alert>

In the world of programming, understanding the structure and flow of your code is crucial for maintaining, refactoring, and debugging. While code provides a textual representation of your program's logic, sometimes a visual representation can be more intuitive and helpful. Enter flowcharts – diagrams that map out the flow of execution in your code.

We'll dive into the world of [Mermaid](https://mermaid.js.org) and explore its potential for generating flowcharts. But first, let's address the elephant in the room: what is Mermaid?


### What is Mermaid?

Imagine a tool that enables you to create diagrams and flowcharts using simple text commands. That's the magic of Mermaid, a JavaScript-based charting and diagramming library that transforms plain text into visually appealing diagrams.

Think of it as a modern-day version of cave paintings, where instead of depicting scenes on rock walls, you're using text to paint a picture of your code's structure and flow.


### Using Mermaid with Cody to generate flowcharts

Now that you have a basic understanding of Mermaid, let's explore why combining it with Cody, is a match made in diagramming heaven.

Cody's superpower lies in its ability to analyze code and extract its essential structure. This means that Cody can automatically generate a flowchart of your code, saving you the time and effort of manually creating one.

But here's the twist: Cody doesn't just generate a flowchart; it generates a Mermaid-compatible flowchart. This means that you can seamlessly integrate Cody's flowchart output into Mermaid, allowing you to further customize and refine your diagrams.

In essence, Cody and Mermaid are like two peas in a pod, complementing each other to create a powerful flowcharting duo.


### Benefits of using Cody and Mermaid to generate flowcharts

The benefits of using Cody and Mermaid to generate flowcharts are twofold:

* Save time and effort: Cody automates the flowchart creation process, freeing up your time to focus on more meaningful tasks.

* Enhance understanding: Visualizing your code's structure using flowcharts can significantly improve your understanding of complex codebases.

* Improve communication: Flowcharts serve as excellent communication tools, allowing you to clearly convey code structure to others.

So, if you're looking for a way to streamline your flowcharting process and gain a deeper understanding of your code, Cody and Mermaid are your go-to tools.


### Use Cody to generate a flowchart of a code snippet

Now, let's delve into the exciting task of generating flowcharts from code files. Here we open up a JavaScript file and selecting the following function that serves as an example: 

```js
let a, b, c;
a = 1;
b = 2;
c = a + b;
```

With Cody primed and ready to assist, feed the prompt: 


    > "Hey, Cody, can you generate a flowchart of this selected code snippet in Mermaid format?"

Cody, our trusty AI coding assistant, will spring into action, meticulously analyzing the snippets structure and logic. It will then deftly craft a Mermaid-formatted flowchart, a visual representation of the code's flow and execution path. This flowchart will serve as a valuable tool for grasping the code's inner workings and identifying potential areas for improvement. If you haven't already installed Mermaid, an essential tool for visualizing Mermaid-formatted flowcharts, Cody will provide you with the Mermaid code directly:

```mermaid
graph TD
    A[Start]
    B[a = 1]
    C[b = 2] 
    D[c = a + b]
    E[End]

    A --> B
    B --> C
    C --> D
    D --> E
```

Simply copy and paste this code into a Mermaid viewer, and voilà! The flowchart will magically appear before your eyes, revealing the code's intricate dance in all its glory. A Mermaid viewer and editor can be found at [mermaid.live](https://mermaid.live/). If you are using VS Code you can install [this plugin](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid) which adds Mermaid diagram and flowchart support to VS Code's built-in Markdown preview.

This is the generated flowchart:

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/guest-blog-post-using-cody-and-mermaid-to-generate-flowcharts.png"
  caption="Cody for VS Code generating Mermaid flowcharts"
/>

This seamless integration between Cody and Mermaid empowers you to visualize your code effortlessly, transforming complex logic into a visually intuitive representation. As you navigate the flowchart, you'll gain a deeper understanding of the code's structure and behavior, enabling you to identify potential areas for optimization and refinement.

### Other use cases with Cody and Mermaid

Cody's talents extend far beyond simply generating flowcharts. Together with Mermaid, Cody empowers you to revolutionize your coding workflow, transforming it into a visual symphony of creativity and efficiency.

Imagine the thrill of effortlessly generating UML diagrams, showcasing the intricate relationships between classes and objects in your code. Cody's expertise in understanding code structures seamlessly translates into Mermaid-formatted UML diagrams, clearly visualizing the code's architecture.

Beyond UML diagrams, Cody's versatility shines through in its ability to generate a variety of diagrams, including sequence diagrams, Gantt charts, and even state diagrams. These diagrams serve as invaluable tools for documenting code behavior, process flows, and state transitions, ensuring that your code remains lucid and well-structured.

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/guest-post-flowchart-cody-gantt.png"
  caption="Cody: create a Gantt diagram of @.../detect-multiline.ts formatted for Mermaid."
/>

So, go ahead and unleash Cody's flowchart-generating prowess, and watch as your code transforms into a masterpiece of visual clarity. Embrace the power of visual storytelling and let your code flow like a well-designed diagram, a testament to your coding mastery.


<hr style={{marginTop:"2rem",marginBottom:"2rem"}} />

To get started with Cody, check it out on [sourcegraph.com](https://sourcegraph.com/cody).


What are the benefits of using Cody and Mermaid to generate flowcharts? Guest author, Tino Wening, gives a visual guide to understanding your codebase.

Flowcharting Your Code: A Visual Guide to Understanding Your Codebase


<Alert type="secondary">This is a guest blog post from our community. <a href="https://discord.com/servers/sourcegraph-969688426372825169" target="_blank">Join our Discord</a> to meet the author and connect with other developers passionate about Code Search and AI!</Alert>

_Ever thought about climbing Mount Everest in flip-flops?_ That’s how I felt diving into _PHP_ for the first time.

A few weeks ago, a professional endeavor landed on my desk: creating a printing API. The goal was to build a library in PHP that lets developers easily play with commands to scan and print documents programmatically. With an already functional Python API version in my arsenal, I was initially optimistic about the task. Translating the code to another language, PHP in this case, seemed like a straight path. However, the catch was my complete lack of familiarity with PHP, making the experience seem like a herculean effort at first glance. To add to the challenge, I imposed a time constraint on myself. So now I had to learn a new language and build a full-blown project that I could share with the world.

This task entailed a couple of different things

* Building and publishing an entire PHP package with easy install instructions and simple commands to print/scan documents while cleanly hiding all the API complexity.
* Build comprehensive documentation for those keen on exploring edge cases.
* Add decent testing/error handling to maintain code and take future developments into account.

Ultimately, my goal was to offer this functionality to PHP users

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/guest-post-arafat-khan-php-python/image_1.png"
  caption="Rough Outline of the Print API"
/>

While I knew that I knew nothing about PHP, I also knew that I had help that I could rely on. I started with the only two things that I had at the time:

* My fully functional Python repo to use as a reference
* [Cody](https://about.sourcegraph.com/cody) -> A code AI assistant from Sourcegraph

I fired up my Python repo in VS Code and started out with some basic PHP setup questions to help me out with the setup steps of the PHP project

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/guest-post-arafat-khan-php-python/image_2.png"
  caption="My Python project in VS Code with Cody’s chat panel"
/>

These are just silly PHP 1O1 questions but for someone who didn’t have the slightest clue of what they were doing, this was such a timesaver. It’s almost as if I had a mid-level PHP Developer sitting next to me who was guiding me through the whole process. After answering my questions, it would also give me a couple of different follow-up questions that it already knew I would ask. That was surprisingly helpful. I would literally just press the button to ask the pre-decided follow-up questions and those questions would help me gain a better understanding of the flow.        

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/guest-post-arafat-khan-php-python-image-3-full-035250.png"
  caption="Basic PHP Project Setup Questions"
/>

Drawing from my Python background, I communicated with Cody using Python analogies. This approach worked wonders. Cody translated my Python-centered queries into PHP solutions, making the learning curve smoother.

In a pre-Cody era, I would have crawled the Internet, sifted through hours-long tutorials, and juggled between numerous blogs to get a grip on PHP’s basics. While video tutorials serve their purpose, isn’t it more efficient to have a guide that delivers instant answers tailored to your needs?

This is exactly where Cody came in. It would give me a lot of foundational advice that I needed to setup my repo and understand the basics of PHP. I could frame my questions in any way that I wanted, and I would get useful answers to just the EXACT thing I needed at the moment. In just a few hours, with Cody’s assistance, I set up a basic “Hello World” package complete with tests and documentation.

The foundation of the PHP package was laid, and all that remained was to build the actual API upon it. The real challenge lay in replicating the API’s intricate structure, a fusion of authorization, settings, and upload requests, all harmoniously functioning within OOP’s realm. The rough outline of the API looks like this


<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/guest-post-arafat-khan-php-python/image_4.png"
  caption="Flow for Print API"
/>

To do the real building, I started out with the root of the entire codebase, which is the Auth class(This class will authorize all the calls going to the Print API and validate them). The goal was very simple, select my Python code and ask Cody to generate a basic PHP scaffolding for it.

<YouTube
  title="Cody select and explain" 
  id="N-9QUjpv1qY"
  showTitle={true}
/>


You can see how easy it is to select some Python code and ask Cody to convert it. This gives us a good starting point for the outline of the class that we are looking for.

```php
<?php

class AuthCtx {

  // Properties
  private $_baseUrl;
  private $_printerEmail; 
  private $_clientId;
  private $_clientSecret;

  private $_expiresAt;
  private $_accessToken = '';
  private $_refreshToken = '';
  private $_subjectId = '';

  // Constructor
  public function __construct($baseUrl, $printerEmail, $clientId, $clientSecret) {
    
    // Initialize properties
    $this->_baseUrl = $baseUrl;
    $this->_printerEmail = $printerEmail;
    $this->_clientId = $clientId;
    $this->_clientSecret = $clientSecret;

    // Call auth method
    $this->_auth();

  }

  // Authenticate or re-authenticate
  private function _auth() {

    // Check token expiration
    if ($this->_expiresAt > time()) {
      return;
    }  

    // API endpoint
    $method = 'POST';
    $path = '/api/1/printing/oauth2/auth/token?subject=printer';
    
    // Headers
    $headers = array(
      'Content-Type' => 'application/x-www-form-urlencoded'
    );

    // Authentication
    $auth = array($this->_clientId, $this->_clientSecret);

    // Request data
    if ($this->_accessToken == '') {
      $data = array(
         'grant_type' => 'password',
         'username' => $this->_printerEmail,
         'password' => ''
      );
    } else {
      $data = array(
        'grant_type' => 'refresh_token',
        'refresh_token' => $this->_refreshToken
      );
    }

    // Make API request
    try {
      $body = $this->send($method, $path, $data, $headers, $auth);
    } catch (Exception $e) {
      throw new Exception('Authentication error: ' . $e->getMessage());
    }

    // Handle errors
    if (isset($body['error'])) {
      throw new Exception('Authentication error: ' . $body['error']);
    }

    // First time, get refresh token
    if ($this->_accessToken == '') {
      $this->_refreshToken = $body['refresh_token'];
    }

    // Update tokens
    $this->_expiresAt = time() + $body['expires_in'];
    $this->_accessToken = $body['access_token'];
    $this->_subjectId = $body['subject_id'];

  }

  // Make API request
  public function send($method, $path, $data, $headers, $auth) {
    
    // Re-authenticate if needed
    if (!$auth) {
      $this->_auth(); 
    }

    // Make HTTP request and handle response

  }

}
```

This is a very decent scaffold for the entire Auth class. We have the private/public variables, most of the auth method already implemented, and the outline of the send method. This is a great starting point, I already learned so much about PHP syntax just from this, and now I can build things on top of it. Brick by brick, by selecting segments of my Python code, I can understand them and then re-create them in PHP, too. I kept doing the iterative work of selecting different parts of my Python code and asking more questions on it to piece it all together to make my PHP code.


Obviously, we are dealing with LLMs here, so nothing is perfect. Occasionally, Cody would hallucinate and give me an imperfect response, and in those cases, I would have to use my programming background and some common sense to tweak the code. I would also try my best to write as much code myself because that teaches you the intricacies of the syntax and the common mistakes that people tend to make, and it’s generally a great learning experience.


Cody can be surprisingly helpful even when you just want to write all the code yourself. One of the classic mistakes while writing PHP as a newbie is missing the `$` sign before variables, as shown below. With Cody, it’s easy just to ask it to fix them for you. It’s much better than the natural IntelliSense fixes that come with VS Code by default. I appreciate this feature as it saves me from tedious single-character bug fixes.

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/guest-post-arafat-khan-php-python/guest-post-arafat-khan-php-python-image-5-full.png"
  caption="PHP Variable fixes with Cody"
/>

The other thing that I really enjoyed was the improved speed of coding.

Typically, the coding process goes like this:

1. Conceptualize
2. Draft imperfect code
3. Refine
4. Comment
    
However, with Cody, I experienced a much faster approach:

1. Conceptualize
2. Comment
3. Generate near-perfect code
4. Refine

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/guest-post-arafat-khan-php-python/image_6.jpg"
  caption="Couldn’t resist adding an AI image to show the contrast of two Coders"
/>

Sometimes, I would just describe what the function is “supposed” to do in a comment, and just like magic, Cody would write it for me.
            <div>
                <YouTube title="Autocomplete with Cody" id="UdMCERz9hcY" />
            </div>
The above example is Cody’s autocomplete feature. It works surprisingly well for all kinds of code completion tasks, especially when your repo already has a reasonable amount of code to give it context. This autocomplete system is grounded in a complex foundation, and for those interested in its intricacies, you can delve deeper [here](https://about.sourcegraph.com/blog/the-lifecycle-of-a-code-ai-completion).

All these features, such as _autocomplete, explanation, code fixes, and testing,_ made my job as a programmer a lot easier. I was able to build the building blocks of my code, and then, inch by inch, I was getting closer to completing the entire project. As I was building more and more of this codebase, a question that crossed my mind was:

## Why use Cody when you have Chat GPT-4?

I like the speed and convenience of Cody, as well as the ability to use it directly in VS Code, but there is another major reason why I prefer Cody. Cody can answer questions about your entire codebase and sift through all the different parts to find the most relevant information pertaining to your question. It uses the [Claude 100K model](https://www.anthropic.com/index/100k-context-windows) (soon to be the [200K model](https://www.anthropic.com/index/claude-2-1)) so it has the capacity to fit in so much more context than my copy-pasting hacks ever could. Take, for example, this question

<Figure
  src="https://storage.googleapis.com/sourcegraph-assets/blog/guest-post-arafat-khan-php-python/image_7.png"
/>

I asked a question here that touches 11 different files, each of which would easily exceed the context window of ChatGPT (Never mind the copy-pasting hassle). It sifts through all the files and shows me how they are interconnected and what calls touch which parts. This to me, is the most important feature of Cody: the ability to answer questions that are deeply tangled in the complexity of the codebase. It helps me answer questions that I simply can’t find through a simple copy-paste because the real problem is that sometimes _I don’t even know where to look_ when I am dealing with very large codebases. And here's the best part: Cody is soon going to support GPT-4.5-Turbo(So all the Open AI fans still get to stay with their favourite models)


## Conclusion


   Cody has made me faster and improved my dev workflow so much that I don’t think I will be coding without it in the future. The daunting Everest climb of learning PHP began to feel more like a stroll in the park. Every obstacle I encountered was promptly addressed, either by directly consulting Cody or by utilizing the resources and code suggestions it provided.


    In a mere span of three days, I not only developed a functional PHP API for Printing but also deepened my PHP understanding. This journey underscored the potential of efficient, transformative learning with the right tools.


    You can check the codebase yourself

* [Python Code](https://github.com/arafatkatze/epson-connect-python) — [Python Docs](https://epson-connect-api.readthedocs.io/en/main/?badge=latest)
* [PHP Code](https://github.com/arafatkatze/epson-connect-php) —[ PHP Docs](https://arafatkatze.github.io/epson-connect-php/packages/Epsonconnectphp-Epson.html)
* [Print API Blog](https://medium.com/@Arafatkatze/epson-connect-api-for-developers-a-comprehensive-guide-ae639a80eefb)

    To anyone embarking on a similar journey or facing the challenge of diving into unfamiliar territory, I would say that AI tools in 2023 are like the Internet in the late 90s. You can deny its existence and impact all you wish, but there is very soon going to be a future that’s so deeply entwined with AI that you won't be able to think of a life without it. I strongly recommend people try out AI coding assistants. There’s quite a few out there, but Cody is the best one.


<hr style={{marginTop:"2rem",marginBottom:"2rem"}} />

To get started with Cody, check it out on [sourcegraph.com](https://about.sourcegraph.com/cody).


Arafat Khan

When tasked with creating a printing API in PHP despite having zero experience, Arafat Khan leveraged Cody to transform what felt like an Everest climb into a swift 3 day project that resulted in a fully functioning API.

Welcome to the Sourcegraph Community

Our community is driven by a shared passion for open source and developer productivity, fueled by the power of AI tools & code search.

Our experts are the heart of our community

Kynlo Akari

Deepak Kumar

Tino Wening

Supporting open source

Events

2024-10-27

2024-11-01

2024-11-06

2024-11-18

2024-11-19

2024-12-26

2024-10-11

designFAO

2024-09-30

AI Dev Tools Night

2024-09-18

Your Cody questions answered live!

2024-08-08

Your Cody questions answered live!

2024-08-06

AI Dev Tools Night

2024-06-25

AI Engineer World's Fair

2024-06-24

AI Dev Tools Night

2024-06-17

Collision

2024-03-20

Learning TypeScript Livestream

2023-11-29

AWS: ReInvent

2023-11-06

KubeCon

2023-10-20

React Advanced

2023-10-08

AI Engineer Summit

2023-10-02

GopherCon

2023-05-10

Open Source Summit

2023-04-09

PyCon

Blog posts