dev-resources.site

for different kinds of informations.

"How AI is Revolutionizing Crocheting: My Journey with Copilot and ChatGPT4"

Published at

1/11/2025

What I Built

Planned Pooling Web App

Introduction

Welcome to the Planned Pooling Web App, a tool specifically designed for crocheters who want to experiment with color patterns and yarns. This web app allows users to explore the world of intentional color pooling by visualizing how different yarns and color combinations interact across a project. It helps you plan your crochet projects by showing you how colors will align and pool in a grid, giving you the opportunity to experiment and adjust your choices until you achieve the perfect pattern.

This app is inspired by the concept of transitions—the subtle, yet powerful changes that occur as one color morphs into another, much like the way a caterpillar transforms into a butterfly. It allows users to experience and control these transitions, turning the sometimes unpredictable world of color pooling into a planned, manageable journey. Whether you're a beginner or a seasoned crocheter, this tool will help you visualize your project before you start, making the creative process smoother and more enjoyable.

Purpose and Features

The Planned Pooling Web App is designed for crocheters who want to visualize and plan color pooling projects. The app helps you experiment with different yarns and patterns, allowing you to perfect your crochet project before picking up the hook.

Key features include:

Live Yarn Preview: Instantly see how different color combinations look when worked into a stitch grid.
Stitch Calculator: Determine the perfect stitch count and pattern alignment for your yarn colors.
Personalized Suggestions: The app provides guidance on common yarns that work well for color pooling techniques.
Step-by-Step Guides: Learn how to master color pooling with educational content, including a swatch calculator for finishing size.
Export to Excel: Save your yarn combinations, stitch counts, and pattern details in an Excel file for easy reference.

Target Audience

This web app is built for crocheters who want to experiment with color pooling techniques and create beautifully planned crochet projects. It’s ideal for:

Beginner Crocheters: Those who are new to the concept of color pooling and want a tool to help plan their projects.
Seasoned Crocheters: Experienced crafters who want to explore new color patterns and improve their color pooling skills.
Creative Makers: Anyone who enjoys experimenting with yarn combinations and needs a visual guide to perfect their designs.

How It Works

The app allows users to:

Select Yarn Colors: Choose from a variety of color options using a color picker.
Input Stitch Counts: Specify how many stitches per color to use, helping you maintain a consistent pattern throughout the project.
Preview: View the color pooling in real-time as the app calculates how the colors will interact with one another in the context of your project.
Download: Export your planned pattern into an Excel sheet to keep track of your work.

Creative Vision: Transitions and Transformations

The theme of this web app is centered around the transitions and transformations that happen when color and stitch patterns evolve across a project. Just as metamorphosis transforms a caterpillar into a butterfly, this app transforms your raw material—the yarn—into a masterpiece. The dynamic grid visualizations serve as a metaphor for evolution—how tiny changes, stitch by stitch, come together to create something beautiful and intricate.

The user journey itself also mirrors a personal transformation: from confusion and uncertainty about how the yarn will behave in a project, to confidence and clarity through the real-time previews and guided input options.

Utilizing GitHub Copilot

In developing this web app, I utilized GitHub Copilot as an essential tool for streamlining the development process. The autocomplete, suggestions, and context-aware code assistance provided by Copilot allowed me to:

Accelerate the creation of complex JavaScript functions for the yarn preview and grid visualizations.
Implement effective error handling and user input validation quickly.
Develop key features like the Excel export functionality by generating precise and optimized code for handling data in the background.

This experience emphasized the importance of transitions and transformations, both in coding and in creative design, as Copilot helped me transform my ideas into a functional, interactive tool.

Accessibility

The Planned Pooling Web App was designed with accessibility in mind:

Color Accessibility: Colors are used in a way that contrasts well with the background for users with visual impairments. Users can also adjust colors if needed.
Keyboard Navigation: The app is fully navigable via keyboard, ensuring that users with limited mobility can interact with it easily.
Screen Reader Support: Descriptions for color inputs and stitch counts are provided to ensure compatibility with screen readers.

Future Improvements

While this app is functional and ready to help users plan their color-pooling projects, future updates will include:

Expanded yarn database with a broader range of brands and colors.
Advanced pattern suggestions and algorithms to generate personalized recommendations.
Mobile app version for easier access on-the-go.

Getting Started

To get started with the Planned Pooling Web App:

Simply visit the app's homepage and start experimenting with yarn color combinations.
Use the color picker to select your yarn colors.
Input stitch counts and preview your planned pooling pattern.
Download the pattern as an Excel sheet or continue refining your choices.

Conclusion

The Planned Pooling Web App is more than just a tool—it's a journey through transformation. With each stitch, each change in color, you're witnessing the power of gradual transformation at work. By providing a guided, visual way to plan color-pooling crochet projects, this app brings the beauty of change to the fingertips of creators everywhere.

Demo

https://github.com/spinner77/PlannedPooling

Repo

https://github.com/spinner77/PlannedPooling

Copilot Experience

Here is the complete list of all the copilot prompts and AI support I used to make this project. Almost all of the code used to make this webapp is generated by either copilot or ChatGPT4.

I found copilot became less effective the more I used it, so I changed models when I found the code being generated wasn't working as expected and this seemed to solve the issues. In general, copilot is good at generating boilerplate code, generating functions and methods from natural language prompts but is poor at debugging its own code. This is when I opted to use ChatGPT4 to assist with debugging and this seemed to be an effective strategy overall.

Co-Pilot Updates

Create and open a HTML file with boilerplate HTML for a web app.
Add a header to the HTML which will have the text "Planned Pooling Generator" and space for a logo to be added later.
The app is to be in three main sections:
- First section: Explains what the app is for and how to use it, running across the top of the page.
- Second section: Runs down the left side of the page and will include buttons to add colors and inputs for how many stitches each color will have.
- Third section: A live grid generated from the color and stitches variables.
When the user clicks on the 'Add Color' button, a color picker and number of stitches input should appear each time to build a list of colors and stitches.
Add tooltips to the Add Color button and the color picker and number of stitches input.
Change the cursor on the Add Color button and the color picker.
In the controls section, add an input for how many stitches across the user wants their project to be, with a tooltip explaining its purpose.
Develop the logic for the live grid: The grid should repeat the colors inputted by the user (e.g., red, green, blue in a repeating pattern).
Fix a bug where entering "1" into the "number of stitches across" input results in a grid that is too wide.
Adjust the grid orientation so that it runs from bottom-left to top-right.
Implement alternating stitch directions (left to right on one row, right to left on the next, etc.).
Add a remove color button next to each color/stitch input so users can easily modify their selections.
Ensure the live grid updates when the remove button is clicked.
Modify the JavaScript logic to use if (row % 2 !== 0) for alternating stitch patterns.
Enable the live grid to shrink to fit its container when there are a large number of stitches.
Ensure the live grid updates whenever the number of stitches for a color or the color itself is changed.
Make the squares of the live grid smaller when the number of stitches across is small for better user experience.
Address an issue where the grid squares are distorted (taller than wide) and there are gaps between columns.
Modify the layout so the container shrinks to fit the grid, with the squares resizing to fit the maximum container size when needed.
Use ChatGPT-4 to resolve the live grid issues by maintaining square shape and ensuring user-friendly visuals.
Add a "Save" button to the live grid, allowing the user to save the grid as an image on their local computer.
Debug the "Save" button functionality to ensure the live grid can be saved as an image.
Focus on enhancing the visual appeal of the app by creating a clean, modern layout with a creative, earthy color palette.
Focus on making the page visually appealing with a user-friendly design and creative color scheme.
Add a swatch calculator to the controls section that calculates the finished blanket width based on swatch gauge and number of stitches in a row.
Ensure the controls section spans the entire width of the page, with the swatch calculator on the left and color picker on the right.
Position the live grid section below the controls section.
Make the controls section a main content container rather than a sidebar.
Split the controls section into two containers: the left side for the swatch calculator and the right side for the color picker.
Display the swatch calculator on the left and the color picker on the right, making both areas equal in size.
Update the swatch calculator to show the final blanket width based on the swatch gauge and number of stitches in a row.
Use the existing "number of stitches in the row" input for the swatch calculator calculation.
Put additional information about color pooling in a dropdown so the user can access it optionally.
Move the "What is Planned Pooling?" section to the left side and create another section with a dropdown for instructions on how to use the site on the right.
Set the background for the header to assets/background-875120.jpg.
Change the header font to something creative.
Set the main section background to assets/neule-888375_1920.png.
Change the main container back to its original state and set the body background to the new image.
Enhance the visibility of the header text.
Change the color of the header text to something brighter, but keep the same effect.
Change the "Learn More" buttons to a lozenge shape.
Remove the border from the number of stitches input box.
Make the "number of stitches in the row" input match the .stitches-input.
Ask ChatGPT-4 if it is possible to save the live grid from the app as an Excel spreadsheet, including other data.
Use JavaScript libraries to implement the Excel export functionality, with a step-by-step guide.
Collect data for the Excel spreadsheet, including hook size, yarn weight, final blanket width, colors used, and stitch counts, with the live grid formatted correctly.
Provide the full updated JavaScript code for saving the live grid data in an Excel workbook.
Modify the Excel export to represent colors as actual colors, not hexadecimals, and ensure the cells are appropriately sized.
Ensure that the "Save Grid" and "Export to Excel" buttons are separate features, and provide the updated JavaScript code with all fixes.
Debug the save grid and export to Excel functionalities, ensuring both work as expected.
Change the "Save Grid" button to match the appearance of other buttons.
Style the "How to Use This App" section to match the "What is Planned Pooling" section.
Make the "What is Planned Pooling" and "How to Use This App" sections the same size.
Halve the height of both the "What is Planned Pooling" and "How to Use This App" sections and ensure they are aligned.
Choose a different font for the heading.

GitHub Models

I didn't use GitHub models as I am not familiar enough with it to use it within the 24hour timeframe of the challenge.

Conclusion

Reflection on My Experience with Copilot and AI in Developing the Planned Pooling Web App

Throughout the development of my planned pooling web app, I had a valuable learning experience with GitHub Copilot and AI. As a keen crocheter, I am always searching for ways to enhance my craft through technology, and using AI to build this app allowed me to explore how these tools can revolutionize the crocheting world. Copilot, in particular, proved to be incredibly useful in the early stages of development. It excelled at generating boilerplate code, as well as helping me translate natural language prompts into specific functions and methods. It was like having a knowledgeable assistant who could quickly provide code based on simple instructions, which saved me a lot of time and effort.

However, I found that Copilot's effectiveness began to decrease the more I used it. As the project grew in complexity, the generated code didn't always align with my expectations, especially when it came to debugging. Copilot struggled with fixing issues in the code, which led me to shift strategies. I decided to turn to ChatGPT4 for debugging assistance, and this shift proved to be an effective solution. ChatGPT4 provided clear explanations and debugging support that helped me resolve issues in the code, making it a valuable resource when Copilot's generated code didn't work as anticipated.

This experience highlighted a crucial aspect of working with AI: while these tools are excellent for generating initial code and handling straightforward tasks, they still require human oversight for more complex tasks like debugging. Nevertheless, the combination of Copilot and ChatGPT4 allowed me to continue developing the web app with minimal setbacks, and ultimately, I was able to create a tool that I am proud of.

The impact of this project, however, extends beyond my personal experience as a developer. As a crocheter, I believe that AI and tools like Copilot have the potential to dramatically change the crocheting world. Many crocheters are incredibly creative, yet the technical barrier to creating custom tools to enhance their craft is often too high. Most crocheters aren't programming literate, but with Copilot and AI, we can bridge that gap. These tools open the doors for crocheters to experiment and create bespoke apps tailored to their needs by simply using natural language prompts. This means that more people in the community can harness the power of technology to bring their creative visions to life, making the crocheting world more accessible and innovative.

In conclusion, my experience with Copilot and ChatGPT4 has reinforced my belief in the transformative potential of AI, not just for developers, but for creative communities like crocheters. The ability to create tailored tools without needing deep programming knowledge is a game-changer, and I believe this could empower crocheters to explore new dimensions of their craft, ultimately enhancing the creativity within the community.

githubchallenge Article's

30 articles in total