Copilot Features That Felt Like Magic

This post isn't about the typical Copilot development workflow. Instead, I want to share a few new workflows that felt so magical I just had to write about them.

TL;DR: For busy readers, this post highlights four non-obvious GitHub Copilot features that feel like magic:

1. Batch Image Processing: Using local command-line tools like ImageMagick to resize, optimize, and convert a folder of images.
2. Creating Reusable Instructions: Generating a detailed instruction file to automate the same complex task in future sessions.
3. Proactive Tool Building: Anticipating a need and building a simple web-based UI to manage JSON content without being asked.
4. Data Structuring: Turning unstructured, messy notes from various sources into clean, structured JSON.

It all started a week ago when my friend Vikram asked for help setting up a website for his B2B travel management business. He needed a site to showcase services, packages, testimonials, an image gallery, and a contact form. He also asked about the costs to develop and run such a website. I told him I'd find a good HTML template, add his content, and host it on a free service like Netlify — all in exchange for a large pizza. He agreed.

I searched for a suitable HTML template but couldn't find anything that satisfied me. On the weekend, with my promise to Vikram in mind, I decided to start from scratch with Copilot, beginning with a blank index.html file. Within a few hours, I had a fully functional, responsive website with all the features he requested. After a few iterations and tweaks, the website went live. It's nothing fancy, just a regular single-page static site. You can see it here: astroholidayz.com.

The development process itself was standard: using GitHub Copilot in VS Code's agent mode, I'd ask for a feature, it would write the code, and I'd preview, tweak, verify, and commit.

But along the way, I discovered some capabilities that felt like magic.

Magic #1: Batch Processing Images

The website has an "Our Services" section with thumbnail images. Initially, I used placeholder images from Unsplash. When Vikram sent the actual images, I saw they were all different sizes and formats. Manually resizing, converting, and optimizing them would have been tedious. I decided to ask Copilot for help, knowing it could execute local commands.

I installed ImageMagick, a free and open-source tool for image manipulation. Then, I put all the images in a folder and gave Copilot this prompt:

Prompt: "I have added thumbnail images for each service under the "Services" title in index.html file. Currently uses free images from Unsplash. Properly crop, and convert to optimal size, the images that I added in the services/ directory using imagemagick (installed in this computer). Then use those images in the index.html file for the "Services".

Copilot executed a series of commands to process the images and then presented a summary of its operations — from cropping and optimizing to the total file size reduction it achieved:

Curious, I asked Copilot if WebP would be a better format than JPEG.

Prompt: "Is converting those images to webp more effective? Or JPEG is fine?"

What happened next was unexpected.

Copilot converted the JPEGs to WebP and then generated a comparison table showing the file size savings for each image:

Then, upon my confirmation, Copilot replaced the thumbnail images in the "Our Services" section of the index.html file, correctly matching the images to the service titles.

This entire process, which would have taken me hours manually, was done in just a few minutes.

Automating the "UAE Memories" Photo Gallery

Encouraged by this success, I used the same approach for the "UAE Memories" photo gallery. This led me to my second magical discovery.

Vikram gave me 12 images to use in the gallery — all from different sources, with different dimensions, orientations, weird filenames, and formats. Here's what I needed:

1. Create thumbnails to display on the page.
2. Create large, optimized versions to show when clicked on a thumbnail.
3. Keep a backup of these originals to use in the future.
4. Use a sequential filename.
5. Update the gallery image placeholders in index.html to use the new images.

I gave the task to Copilot, and in minutes, it transformed the raw files into a polished gallery, organizing the image files neatly:

I realized that I'd need to repeat this process whenever adding new images. That's when I tried something new and discovered the next bit of magic.

Magic #2: Creating Instructions for Future Copilot Sessions

I asked Copilot: "I will need to add more images to the gallery in the future. Write an instructions file that I can use with Copilot in the future when adding new images. I should be able to say "Hey Copilot, here are a few images, read the instructions in this file, process the images accordingly, and update the index.html". Create the instructions file."

To my surprise, Copilot generated a detailed file with a complete set of instructions for future sessions. Now, all I have to do is add the new set of images and point Copilot to this file. This was a game-changer.

Here's an excerpt from the instructions file it created. Click here to see the full file.

## Image Processing Guidelines

### 1. Naming Convention
- **Original files**: `memory-XX.jpg` or `memory-XX.webp` (where XX is 01, 02, 03, etc.)
- **Thumbnails**: `memory-XX_thumb.webp`
- **Large images**: `memory-XX_large.webp`

### 2. Image Specifications

#### Thumbnails (`thumbnails/` folder):
- **Size**: 360×240 pixels (3:2 aspect ratio)
- **Format**: WebP
- **Cropping**: Subject-focused cropping to highlight the main subject/action
- **Quality**: 80-85% for optimal balance of quality and file size
- **Purpose**: Display in gallery grid, clickable to open large image

#### Large Images (`large/` folder):
...

#### Original Images (`original/` folder):
... 

### 3. Processing Commands (ImageMagick)
...// commands
...

### 5. Workflow for Adding New Images
...// workflow details

I tested this by adding a new set of images in a separate Copilot session, and it worked perfectly!

Magic #3: Copilot Built a Content Management Tool Without Me Asking for It

I had confirmed with Vikram that he wouldn't need to update the website content frequently. However, I anticipated that the "Featured UAE Packages" section, which lists tour packages, would require regular updates.

Initially, the tour packages were hard-coded in the HTML. To make updates easier, I decided to move the content to a separate JSON file that would be fetched and rendered on page load. Copilot handled this refactoring for me. You can see the JSON file here: astroholidayz.com/data/packages.json.

This JSON is simple, but editing it isn't easy for non-developers. Copilot seemed to understand this and went a step further: it created a web-based UI to manage the JSON content. With this tool, a non-developer can load the JSON, add or edit packages through a form, and generate the updated JSON for the website. You can see the tool here: astroholidayz.com/data/package-manager (I'm not using it, you will see why in a moment).

This wasn't something I had asked for, but Copilot anticipated the need and provided a proactive solution.

Magic #4: Turning Raw Notes into Structured JSON

This last one might not seem like "magic", but it was incredibly helpful. Vikram sent me the tour package details through various channels — WhatsApp, Google Docs, and email. The information was unstructured and scattered. Here's a sample:

He also sent updates and additions in separate messages. Manually parsing this information and updating the JSON file would have been a chore.

By this point, I had seen Copilot's automation capabilities. So, whenever I received an update, I would paste it into a text file and ask Copilot to update the packages.json file. It worked flawlessly every time, saving me a lot of effort.

Conclusion: The Immense Potential of AI Assistants

AI assistant tools like Copilot feel like having a superhero assistant at your disposal. The productivity boost is huge — tasks that once took weeks can now be done in hours. For instance, this website project, which would have taken a couple of weeks to deliver, was completed in a few hours over a weekend.

Important: AI assistants are not magic wands. You still need to know what you're doing. Having an AI-powered surgical tool doesn't mean you can perform surgery without being a surgeon. You need the knowledge and expertise to guide the tool effectively. But for an expert, these tools can multiply productivity immensely.

In the end, the real payment for this project was the incredible experience and the new insights I gained. I'm thankful to Vikram — for the wonderful learning opportunity and the large pizza.

Disclaimer: Copilot was used to edit this article for grammar, clarity, and overall quality.

#productivity #ai