
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

Jun 17, 2024

Code AI Summit

Jun 17-20, 2024

Collision

Jun 24, 2024

AI Dev Tools Night

Jun 25-27, 2024

AI Engineer World’s Fair

Oct 11, 2024

designFAO

Mar 20, 2024

Learning TypeScript Livestream

Nov 29, 2023

AWS: ReInvent

Nov 6, 2023

KubeCon

Oct 20, 2023

React Advanced

Oct 8, 2023

AI Engineer Summit

Oct 2, 2023

GopherCon

May 10, 2023

Open Source Summit

Apr 9, 2023

PyCon

Blog posts

How to write unit tests for Svelte web apps

Enhancing OpenRCT2 performance: a journey with Cody and SIMD