Skip to content

Instantly share code, notes, and snippets.

@eonist
Last active December 14, 2024 02:12
Show Gist options
  • Save eonist/22e7458f9b38424af9d1bfd791b796a4 to your computer and use it in GitHub Desktop.
Save eonist/22e7458f9b38424af9d1bfd791b796a4 to your computer and use it in GitHub Desktop.
My_favorite_ai_coding_prompts.md

The art of prompt coding 🦾

Visitors GitHub Gist stars

Apps used: Cursor.so / github copilot chat / Amazon Q / codeium

img

⚠️️ Before you disregard the idea of prompt coding ⚠️️ Don't! Because everyone will be prompt-coding soon enough.

This is like when humanity stopped using horses for transportation and started using cars. 🐴 👉 🚗

Table of Contents

img

(Let's dive into it)

Gotchas:

Good to know about prompt coding

  • When you restart the LLM, it's like getting a new agent. The new agent may behave slightly differently from the previous one because every agent has its unique personality, just like a person. They also learn differently from each other. Sometimes, a reboot is necessary to start afresh and get back to basics, as the saying goes, "The Ghost in the Machine."
  • Making code modular is essential because LLMs have limited memory and can only handle a maximum length of text. Therefore, it is easier for LLMs to reason about well-structured and modular code, where each module is no more than 100-200 LOC. This is also a good coding practice in general.
  • Being imperative seems to yield better output. For instance, you can use commands like "Make code cleaner,", "Apply styling", "Improve structure," etc.
  • Starting a new chat with a slightly modified prompt can result in better output. - If you are working on something slightly complex, then break it down into smaller chunks. The GPT4 LLM has limitations in computing power, so if it doesn't yield the desired output, try breaking things down further or rephrase your prompt.
  • Do things in steps. For example, "1. The selected cases are from XCTest" "2. Describe in detail what each case does" Follow up with "Be more comprehensive."
  • Ask questions as if you were talking to a person. Highlight the code you want to ask about to give the LLM more context and ask questions like "Is this correct?" "Any typos?" "Is it nil or null?" "Can font color be used in CSS transition?" The LLM will reason about your code and provide you with advice or answers.
  • You can use TextExpander (macOS) to remember and write your most frequent prompts.
  • Prompts marked with a ⭐ emoji are my favorites

Prompt stepping:

img

Prompting prompts: (Using text expander as the "prompt expander")

img

Comment code:

Commenting is essential for understanding

The great thing about commenting your codebase is that the LLM understands better how to help you with tasks. Also the code-base will be easier to comprehend, and comments are non-destructive so your code keeps on running as is.

  • Move trailing comments above variables: 1. Move comments above variables 2. Convert to javadoc 3. Remove empty lines
  • Improve comments in a file: suggest comment improvments for this file and add them
    • Alternatie: What does this line do? and add it as a comment
    • Sometimes example code is lost: suggest comment improvments for this file and add them, and keep example code
  • To get more comprehensive comments: add comprehensive comments in this file
  • ⭐ Add code to lines in a method: add inline comments in the selected code
    • Sometimes empty lines are added: add inline comments in the selected code, and dont add empty line breaks
    • Sometimes refrasing helps: add inline comments inside the method or add inline comments to the selected method
    • Seems like the most precise prompt for this is: Add Comment on Current Selection
    • Comment each line and append the comment to the end of the line: add inline comments to the selected code (append comment to the end of each line)
  • Finish a parameter comment: complete the fixme
  • Fix a messy code block comment: fix the messy comment that is selected, clean it up. make it better
  • Sometimes you want the comment block styled append this: add asterisk character to each line
  • Sumarize what a class does: add a general comment regarding what the selected class
  • Sometimes the LLM will arrange comments on a straight line. use this prompt to fix that: dont use a straight line when you add the comments
  • Sometimes the LLM will put the inline comments in the wrong place. above the code instead of after, if so do this: put the comments after the code in the selected code
  • move comments from above lines to at the end of lines: move comment to end of the line
    • More adamant command to move a line from above to the end of a line: take each comment and move it to the end of the line of the code bellow it. To the far right or for each comment move it to the line bellow it to the end at the far right
    • Nuclear option to move a comment from above to the right: 1. take each comment 2. move it to the end of the line bellow it
    • ⭐ Nuclear otion 2: for each line with a comment, take the comment and move it to the end of the line bellow it
  • Make an example of a method an add it to the comment: make an example for this method and add it to the comment
  • To make the LLM give you comments without vertical space use: don't include empty vertical spaces pre or post
  • Comment imports (it's nice to know what they do): comment each import and add the comment to the end of the line for each line or more simple: comment imports (append comment to end of line)
  • Sometimes the LLM will add vertical empty space you dont want, fix that with this prompt: dont add empty vertical space or drop the vertical empty space between lines or more adamant: there are lines in the selection that are empty, remove these
  • Improve comments, but style it with the projects linting file: improve comment for the selected code (restrict formating to the swiftline file the project uses)
  • ⭐ Explode a long call with comments: 💥 add inline comments to the selected code (for just the selected line) (make a new line for each comma) (After using this prompt, the LLM might think you want to explode all lines, a tip to avoid this is to append "dont change any code" in your next prompt)
    • More adamant alternative: 1. Add more vertical space in the selected code by making a new line after each comma. 2. For each new line created append a comment about that line to the end of the line
    • Explode a long call with comments in steps (some calls are stuborn and you have to be more adamant about what you want) : 1. Add more vertical space in the selected code by making a new line after each comma. then select the new lines and prompt: add inline comments to the selected code
  • Add instructions about cvs structure to a comment: add description about the format of the banks.csv then add the selected text to a comment and format it nicely
  • Add instructions about a json structore to a comment: make instructions about json structur brands.json
  • ⭐ Getting an example output from an example in a comment: what would be an example of an output from the code in the selection? (this saves you from running the actual code) follow up wtih: and what would the call be for that output? And the LLM will give you the call to the output 🤯 Adding these to an example in a comment would make the code more readable.
  • Make and example of a selected code and add it to the comments: make an example of the selected method that we can add to the comment, then add that example to the comments (The LLM will also create a description regarding what the example does. Its nice to add this as a comment above the example)
  • Class description: Create a descriptive description for this class and add it to the comment
  • If there is a todo or fixme in a comment. You can ask the LLM to: Solve fixme or solve todo 💥
  • If there is incomplete documentation in the code: finish the docummentation in the selection or simpler: complete param doc
  • Describe the underlaying meaning of a series of method calls: 1. for each method call. 2. Make a short oneliner descripton of what the method does. 3. Append the oneliner as a comment for each line
  • Anchoring preexisting comments: by wrapping your current comments in /**/ the LLM seems to ignore them and wont delete them when you make the LLM add new comments to a piece of code.
  • Add context to a method call: make a comment about the underlaying meaning of the call, make the comment succinct, keep the higher level meaning
  • ⭐ Comment css oneliners: append a comment to the end of the line about what properies is represented, (dont include the actual values) from: padding: 24px 0; to this: padding: 24px 0; /* Sets padding to top/bottom and left/right */ So much more readable ✨
  • Reversing oneliners: make this style into multiple styles This will "explode" a oneliner into respective styles like so: from: font: bold 28px var(--font-family); to: font-weight: bold; font-size: 28px; font-family: var(--font-family);
  • Add documentation on where something is used: - Fixme: ⚠️️ Add doc, regarding where this is used? highlight the text, and prompt: Fix comment. And it will add the reference to where the method is used

Markdown:

Readme markdown etc

  • List to numbred list: change from list to numbered list
  • To improve the structure of a readme markdown file: make suggestions on how to improve this readme doc
  • To make "table of content": can you suggest a markdown index for the selected readme file (sometimes you have to save a file as readme.md for the LLM to create the index, or else it will suggest some phyton script instead)
  • To make an index (same as TOC) of a .md file: 1. make a readme table o content of the selected readme file. 2. Make sure the output is in raw markdown syntax
  • Sometimes markdown files are too complex or big. In this case, select partially and prompt with: make index of selection
  • Update a prexisting "table of content" aka toc: update the toc with the new change
  • ⭐ Making a TOC in raw markdown: create toc and format it as raw markdown code
  • Update mit License to latest format: update to latest mit License format
  • Can you make a description for the [insert name of library] library. Creates a nice description for your library
  • Make a full readme based on a class: create boilerplate readme for [insert name your class here]
  • Create examples for your readme based on some class api: create more exmaples on how to use the mockgen class
  • Make an example for one method call: `create an example of using the selected method
  • Improve markdown language: improve language in the selected markdown. output to raw markdown (sometimes the LLM will return the result as normal text, thats why we are adamant about outputting to raw markdown)
  • Make code examples based on a library: can you create some examples for common usecases when using the Account library? then Can you make code examples of these examples you just described?
  • Convert comments to JavaDoc esque comment fencing: convert comments to use javadoc style * (don't include return value) or just: javadoc the comments followed by add * to the left side to add * fencing
  • Make an example that results in a speccific output. The LLM will figure out what the input is. 🐼 add an example using the selected code. The output should be: "panda-will-boat-fair-death-desire-blue-forest" and add it to the comment
  • Sometimes getting raw markdown is tricky, appending the output works everytime: Improve langanguage in this list, output it as raw markdown
  • ⭐ Make documentation that includes documentation regarding method parameters: improve comment for the selected code (add parameter comments) or add parameter doc to comment regarding the selected code
  • Consolidate parameters into a group: consolidate params into parameters: style syntax alternative: consolidate params into parameters in the selected comment
  • ⭐ Make a list of raw urls to a nice descriptive markdown list that describe what the urls link to: convert to markdown links with text as a short oneline about the content in the link (1. output as raw markdown, 2. format as markdown links, 3. description first, 4. link last, 5. as a list)
  • "Numerify" a list: make this list numerical, output in raw markdown

List to table: `

img

Structure:

Improve code structure

  • Convert code to tripple qoute multiline text: complete fixme + fix use triple quote string multiline fencing -> """..."""
  • ⭐ Lint / refactor / improve code based on a set of rules / style guide: improve this code with the rules from https://google.github.io/swift/ (Highlight the code you want to improve)
  • Add class type to variables: add type to vars - > let str = "" -> let str: String = ""
  • ⭐ Improving documentation language: improve the language
  • Make numbers more readable: make the numbers more readable by using _ 0.45353535 -> 0.453_535_35
  • Fix indentation in this file: correct the indentation in the selected code, but don't change the content
  • ⭐ Indent json, yaml, html, css etc: indent the selection properly (don't delete comments)
  • ⭐ Improvoving code: Anything I could improve in this code? This will give you suggestions of how to improve code. Like suggesting global variables in css. Or how to name things better etc.
  • Transform code into a oneliner: (select some code) then prompt: make oneliner:
border-style: solid;
border-width: 4px;
border-color: var(--link-color); 

into this: border: 4px solid var(--link-color);

  • Asking which design pattern to used on a OTP utlity class: what design pattern could we use to refactor this code -> The code in this file is already using the Factory Method design pattern to create OTP accounts. However, the code could be refactored to use the Builder design pattern to make it more flexible and easier to read. The Builder pattern would allow the code to create OTP accounts with optional parameters, making it easier to create accounts with only the necessary parameters. Additionally, the Builder pattern would allow the code to create OTP accounts with default values for optional parameters, making it easier to create accounts with default values.

Refactor:

Refactor code

  • If you have some Fixme or Todo comments in a comment. You can highlight them and prompt: complete fixme and the LLM will try to complete the tasks. If they are not too complex.
  • Converting From one framework to another: (From UIKit to swiftUI) how would this look like in swiftui?
  • Invert and replace colors: whats the inverted color values of the selection? then replace the values. This will invert any color in a text selection and replace the values
  • ⭐ Combine tasks (if they are connected and simple enough) like: structure this with each case on each line and comment the line, put the comment at the end of the line (for switch, case, enum etc)
  • Restructure a one-liner to use more vertical space: 1. restructure the selected line to use more vertical space. 2. comment each line 3. append the comment to the end of the line
    • More adamant restructure prompt in steps (if the above fails): restructure the selected line to use more vertical space. then add inline comments to the selected code, append comment to end of line, not above it ⚠️️ (A good idea could be to get an overall comment for the higherlevel meaning of a line before it is "exploded") ⚠️
    • Even more adamant: 1. Add more vertical space in the selected code by making a new line after each comma. 2. For each new line created append a comment about that line to the end of the line (append comments to the end)
    • ⭐ Nuclear option: Add more vertical space in the selected code by making a new line after each comma. Then make a meaningful comment about each line, and add that comment to the end of the line to the far right
  • Add type to a variable: add the type to the variable I.e: var str = "Hello" after -> var str: String = "Hello"
  • ⭐️ Refactor a ternary to if else: refactor the ternary to use if else
  • Refactor if else to a ternary: Refactor if else to a ternary
  • Renaming classes: Can you suggest some alternative names for the selected class name? followed by some more?
  • ⭐️ Simplify code: is it possible to write the selection simpler? alt: compress selected styles if you want to add a comment: compress selected styles, and add comment to each value describing what they are, append the comment at the end of the line (the last part is key, or css wont be parsed correctly) from this:
padding-left: 24px;
padding-right: 24px;
padding-top: 32px;
padding-bottom: 32px;

into this:

padding: 32px 24px;
  • ⭐ And adding comment that make it more readable: 1. Compress into one style. 2. Append a comment to the end of the line about what properies is represented, (don't include the actual values)
  • ⭐ Format comments in javadoc fencing: use javadoc style commenting fence or if that fails try: Format the comments like this:
/**
 *
 */

Extras:

Extra tips and tricks

  • Asking about a css thingy you have forgotten: I want to target the first .page item with a custom padding. How do I do that? -> .page:first-of-type { padding-top: 20px; } (much faster than going to StackOverflow and wading through unrelated code)
  • Extract values from text. select all the 4 string values output: A list of all text that is 4 in length.
  • Replace values in text: Add one of the values here: "I5Fl, d8j8, XsYY" to the selected text, in place of all id value
  • The LLM is your buddy. Ask it trivial stuff like: whats the link to Monteserrat on google fonts? -> Here's the link to Montserrat on Google Fonts: https://fonts.google.com/specimen/Montserrat or is the correct url to feather icons: https://www.feather-icons.com/? -> Yes, that is the correct URL for Feather Icons.
  • Add code blocks: add jekyll code that gets a value from general.yml with key download-universal output: {{ site.data.general.download-universal }}
  • Ask questions about code like: is the style that is selected vertical or horisontal? style: column-gap: 12px; answer: The column-gap property is used to set the gap between columns in a multi-column layout. So, it is a horizontal style.
  • Find nicer fonts: Recommend fonts are better than we have now? (Using Montserrat) recomends: open sans (similar in style to Montserrat, but has a slightly softer look.) , roboto (clean and modern look, similar to Montserrat.), lato (known for its readability and clean design). Follow up with I want to add link href with all open sans fonts. What does the html element look like for that? to add these fonts to your website
  • Highlight a link in a file. And ask cursor to can you make one sentence summary of the selected link?. The LLM will create text that describes what the website in the link is about. Shorter: whats the selected link about
  • You can generate a commit message based on the changes made: make a commit message based on the changes made or make a commit message
  • Add logic to cryptic .xml config files like .plist: add a comment aboute what each lines does and append it to the end of the line
  • Create random strings with terminal: I need a short random string of 4 in length. how can I generate that with terminal for mac
cat /dev/urandom | LC_CTYPE=C tr -dc 'a-zA-Z0-9' | head -c 4; echo
  • Interpreting code succinctly: describe what this line does, high level to add that description as a comment: describe what this line does, high level, then add that description as a comment to the end of the line (this works on multiline selections as well) alternativly: add a comment to end of each line about what each line represents
  • Create exotic and bright debug colors: rename this to be one two three etc. but keep the prefix. And use a random named color from standard web colors. make the list 30 items long. use more exotic colors. that are strong and bright. but make sure they are named follow up with use real numbers instead of written numbers if you want real numbers from this: --debug-bg-one: blue; to this:
--debug-bg-one: IndianRed;
--debug-bg-two: SeaGreen;
--debug-bg-three: DeepPink;
--debug-bg-four: DodgerBlue;
/*...and so on*/
  • Add comments what each line in a .gitignore file: can you add comments to the selected .gitignore file
# Ignore macOS-specific files
.DS_Store

# Ignore build artifacts
/.build

# Ignore package dependencies
/Packages

# Ignore Xcode project files
/*.xcodeproj

# Ignore Xcode user-specific data
xcuserdata/

Strategy

Ways of thinking about prompt-coding

  • Sometimes going right for a solution too quick just ends up failing.
  • A strategy is sometimes to get something simple working, and then ask the LLM to iterate on that instead.
  • Then step by step add more complex functionality.
  • And sometimes Its better to start over with a different starting point. Like code from another language and ask the llm to convert that to the desired language. and then iterate on that like the gif bellow:

img

The resulting script:

  1. you need to intall python3 first
  2. in terminal cd ~/desktop/
  3. then python3 github_stats.py
import json
import urllib.request
import ssl

username = input("Enter your GitHub username: ")

url = f"https://api.github.com/users/{username}/events"
context = ssl.create_default_context()
context.check_hostname = False
context.verify_mode = ssl.CERT_NONE

req = urllib.request.Request(url)
req.add_header("Accept", "application/vnd.github.v3+json")
with urllib.request.urlopen(req, context=context) as response:
    events = json.loads(response.read())

lines_added = 0
lines_deleted = 0
for event in events:
    if event["type"] == "PushEvent":
        for commit in event["payload"]["commits"]:
            commit_url = commit["url"]
            req = urllib.request.Request(commit_url)
            req.add_header("Accept", "application/vnd.github.v3+json")
            with urllib.request.urlopen(req, context=context) as response:
                commit_data = json.loads(response.read())
                lines_added += commit_data["stats"]["additions"]
                lines_deleted += commit_data["stats"]["deletions"]

print(f"Total lines of code added by {username}: {lines_added}")
print(f"Total lines of code deleted by {username}: {lines_deleted}")
print(f"Net lines of code added by {username}: {lines_added - lines_deleted}")

Conformed refactoring

Refactor based on external ideas / concepts

Refactor something based on the instructions of a github library readme file: Use this example: https://github.com/eonist/With/blob/master/README.md#example and use the same idea on the selected code. But only on the selected code not the entire file follow up with: drop the button value, just return the with closure then drop the return then also use .init directly instead of the class name feathericonbutton

From this:

let button = FeatherIconButton(icon: .xCircle, size: .small)
button.addTarget(self, action: #selector(removeCell), for: .touchUpInside)
return button

to this:

with(FeatherIconButton(icon: .xCircle, size: .small)) {
   $0.addTarget(self, action: #selector(removeCell), for: .touchUpInside)
}

Another name for Conformed refactoring could be: "Constrained refactoring" or "Rule-bound refactoring"

I think of it as "reservoirs of information". We can then query this information with a question we have. In code, I refer to this as "conformed refactoring", where I can ask my "code bot" to rewrite something based on the concept or API of a GitHub README file. Essentially, a book is like a "game cartridge" that you plug in. You can then ask for the top 10 relationship books about the problem you have, and get coached by the books. The chatbot acts as the mediator. Soon, you will be able to do this with Chat GPT-4, now that they are opening up for external sources.

img

This will allow you to get help with a single line of text in the Chat GPT-4 app on your iPhone. For example, if you are having trouble with XYZ, you can ask "According to the book 'Men Are from Mars, Women Are from Venus', how should I solve my problem?".

img

You can also ask external link how to do things like: in the selected link there is a description regarding updating submodules. whats the commandline call it uses? link: https://eon.codes/blog/2021/09/24/sub-module/ output: The article in the selected link describes how to update submodules using the following command: git submodule update --init --recursive 🤯

Check your new productivity:

Proof is in the pudding

  1. save this as github_stats.sh on your desktop.
  2. then in terminal cd~/desktop
  3. then in terminal bash -x commits.sh
  4. Type in your github user-name 👉 And it will spit out your commit count for today
#!/bin/bash

# Prompt the user to enter their GitHub username
read -p "Enter your GitHub username: " username

# Get the total commit count for the user
commit_count=$(curl -s "https://api.github.com/users/$username/events" | grep -c "PushEvent")

# Print the total commit count
echo "Total commit count for $username: $commit_count"

Or check out Github_stats_v2 (With added streak feature)

Here is how the v2 script looks like in action:

img

Bug fixing

Debugging error and fixing bugs

Coming soon

Links:

Resources and links

Todo:

Improvments and todos

  • Structure prompts in a table with TextExpander shortcut. Bonus: Make github copilot chat create the table 🤯
  • Make a bash script that gets LOC for the day for a github user. Without using JQ or python etc. JSON parsing is hard without these. So figure out how to parse json with something else. 🚫
  • Structure TOC into tree structure, group things etc
  • Make v3 of the github script. More stats, avarages etc. Format the output in a table like structure. 👈

img

Got feedback or suggestions? DM me @ x.com/eoncodes or on linkedin

@eonist
Copy link
Author

eonist commented Mar 7, 2024

refactoring tip: "make fileprivate static lets of these variables, use the name from the comment above each init"

@eonist
Copy link
Author

eonist commented Mar 8, 2024

✨ Really powerful prompt: 1. Select some code you want some other code to look like. Copy it. 2. Select the code you want to structure and ask: structure the selected code like this: (paste the code you want to structure to) sometimes you need to be more adamant: "refactor selected code to this structure. (keep the code, just change structure)"

@eonist
Copy link
Author

eonist commented Mar 10, 2024

@eonist
Copy link
Author

eonist commented Mar 13, 2024

Holy prompt: "Do the fixme"

@eonist
Copy link
Author

eonist commented Mar 13, 2024

...and keep the comments

@eonist
Copy link
Author

eonist commented Mar 19, 2024

God prompt: "fix the syntax error"

@eonist
Copy link
Author

eonist commented May 28, 2024

A great way to use AI code copilots, without breaking the flow (copilots are slow sometimes) is to add a comment in code when the need to ask a copilot arise, then circle back later during maintenance runs or when focus hours has peaked.

@eonist
Copy link
Author

eonist commented May 28, 2024

This is cool:

My prompt:
can you suggest some hex-colors that would match these descriptions: pale-purple, hazy-mint, suntan-orange
ANSWER | PHIND INSTANT MODEL

Based on the descriptions provided (pale-purple, hazy-mint, suntan-orange), here are suggested hex-colors that could match these descriptions:

Pale-Purple: A soft, almost lavender shade of purple. From the sources, a good match might be #E6E6FA which represents Lavender, a very light and pale shade of purple 4.
Hazy-Mint: This suggests a muted, slightly desaturated mint green. While none of the exact shades were listed in the sources, a close approximation could be #8A9A5B, which is described as Sage Green, offering a hint towards the minty side but with a touch of gray to give it a hazy effect 4.
Suntan-Orange: This implies a warm, golden orange similar to the color of suntanned skin. A suitable choice might be #FF5733, which is a vibrant orange that could represent the warmth and glow of suntanned skin 4.
These colors should closely align with the descriptions given, providing a visually appealing and cohesive set of hues for various design applications.

using phind.com

@eonist
Copy link
Author

eonist commented May 28, 2024

phind.com and codemate.bot are my preferred code research copilots. free and no registration needed. phind.com may ask for registration at some point. use a disposable mail to not get forever spammed etc

@eonist
Copy link
Author

eonist commented May 28, 2024

Here is what Codemate.bot came up with

my prompt:
can you suggest some hex-colors that would match these descriptions: pale-purple, hazy-mint, suntan-orange

copilot Answer
To suggest hex-colors that match the given descriptions, I will first find the appropriate color codes and then provide them in the hexadecimal format.

Pale-purple:

Purple is a combination of red and blue. To make it pale, we can reduce the intensity of both red and blue. A suitable hex-color for pale-purple could be #D1E0.

Hazy-mint:

Mint is a light shade of green, which is a combination of blue and yellow. To make it hazy, we can reduce the intensity of green. A suitable hex-color for hazy-mint could be #B2D0.

Suntan-orange:

Orange is a combination of red and yellow. To make it suntan, we can reduce the intensity of red and increase the intensity of yellow. A suitable hex-color for suntan-orange could be #F5A9.

So, the suggested hex-colors for the given descriptions are:

Pale-purple: #D1E0

Hazy-mint: #B2D0

Suntan-orange: #F5A9

@eonist
Copy link
Author

eonist commented May 28, 2024

A new free to use code copilot is made by amazon: called "Q"

@eonist
Copy link
Author

eonist commented May 29, 2024

Create 3 colors in hex. 1: destressed purple that works on white background for text. 2: A minty retro green, also eligble for text on white background, and a suntan tangereen. also eligble for text on white background. Make two sets. One for light mode and one for dark-mode. the darkmode version has to work with near black background

ANSWER | PHIND INSTANT MODEL

Creating color schemes that are both aesthetically pleasing and functional across different backgrounds requires careful consideration of contrast and visibility. Here are three colors for each set (light mode and dark mode) based on your requirements:

Light Mode Colors
Distressed Purple: This color should stand out against a white background but not be too harsh on the eyes. A softer shade of purple might work well.
Hex Code: #9A5DFF
Minty Retro Green: A vintage-inspired green that complements white backgrounds and is suitable for text.
Hex Code: #39CCCC
Suntan Tangerine: A warm orange that pairs nicely with white for readability.
Hex Code: #F59E0B
Dark Mode Colors
For dark mode, we need colors that will stand out against a near-black background. These colors should have enough contrast to ensure readability.

Dark Distressed Purple: A deeper purple to maintain the theme but with higher contrast for dark mode.
Hex Code: #66107A
Dark Minty Retro Green: A darker shade of green that still offers good contrast against a dark background.
Hex Code: #006400
Dark Suntan Tangerine: A darker, more saturated orange to ensure visibility against the dark background.
Hex Code: #C70039
These color choices aim to balance aesthetics with functionality, ensuring that the text remains readable and visually appealing in both light and dark modes. The hex codes provided are just starting points; you may need to adjust them slightly based on your specific design needs and preferences.

@eonist
Copy link
Author

eonist commented May 29, 2024

With Amazon Q copilot we have to be more specific. With commands like: Can we refactor the selected code simpler and better?

@eonist
Copy link
Author

eonist commented Jul 7, 2024

Amazon Q

Its not as easy to use as GitHub copilot chat or cursor, but it has its merits. So being expressive regarding what the output should be is important.

Gotchas:

  • Start a new chat often
  • Keep only one file open at the time
  • Ask Amazon Q to work on selected code only
  • If Amazon Q answers some complete jibirsh from someone else's code unrelated to your question, just start a new chat and ask the same question in a different and more expressive way.
  • Missing type declarations can be added by double tapping the missing type
  • Amazon Q will also make a sound if a syntax error is introduced

Examples of succinct commands:

  • "add more contextual documentation in the comments for the selected code"
  • "complete the param comment"
  • "add param comment for selected line"
  • "complete the param doc for selected code"
  • "complete comment for selected line"
  • "finish the comments for the params in the selected code"
  • "make a description in the comment about the purpouse of this method"

@eonist
Copy link
Author

eonist commented Jul 7, 2024

Cursor.so:

cursor gif

Gotchas:

  • ⭐️ For more complex problem solving. Use the more expensive models like gpt4 or gpt4 32bit (expensive)
  • ⭐️ Also use the more complex models if you want to add documentation on how something complex works, that needs advance reasoning etc. gpt4 and gpt4 32bit (you need to add your own openAI key if you plan to do a lot of these as cursor only includes a few of these etc)
  • ⭐️ You can have many inline code solver windows in cursor. If gpt is slow etc. (you can also switch models if your throttled)
  • ⭐️ To use less tokens, when using your own OpenAI key, but without loosing valuable context. One strategy is to open sub-modules in cursor. instead of working from the main project. Provided the code is organised in smaller packages. (micro service vs monolithic code) Smaller modules have smaller codebases, and creates less tokens that are sent and processed by OpenAI. Provided you don't need the context from the main project. (The produced result might also be better as its POV is the module)
  • cmd + k 👉 generate code (inline) (up and down arrow to toggle previous used snippets) (it also has follow up instructions that can refine requests)
  • cmd + L 👉 chat with code (make sure you select a piece of code first, to give the chat an area to focus on, provided that is what you want)
  • Select a piece of code, cmd + k -> inline edit with gpt etc, press up arrow for previous calls etc (also cmd + k)
  • When using cursor, copilot++ kicks in to autocomplete. just start typing. and hit tab to autocomplete the ai generated suggestion. Great for adding descriptions to comment blocks etc. (also supports a few multiple line selections ) it make take a few seconds for the AI autocomplete to show up. You can begin to write - Desc... and it will generate a description etc. Press the tab button to fly through a bunch of code with AI. One after the other. Its a bit like dancing with code, once you get the hang of it
  • Cursor can also rewrite current comments and description. Most of the time making the description more succinct and clear
  • The copilot++ is not as good as gpt4. For better comments use. cmd + L with gpt4

Snippets:

  • "fix all fixmes in the selection"
  • "solve the fixme"
  • "doc each line, append comment to end of line"
  • "add param doc"
  • "use javadoc comment fencing"
  • "add description for this variable" (works for function, struct, class etc) (select entire code block including comments)
  • "improve description" (can be used on description and comments)
  • "use the syntax format that existed" (a follow up prompt)
  • "Doc where this is used" (since Cursor sees all files, it can find references across the project)
  • "Make this more elaborate" (great for making examples more detailed etc)
  • "Make a summary" Select a piece of code and type this
  • "refactor this? (keep comments)" (using cmd + L 👉Cursor chat)
  • "remove empty vertical space, dont replace it with new empty space" removes empty space in comments
  • "refactor this into multiple methods, dont delete any comments"
  • "suggest better names for this class" (cursor chat) (use gpt4)
  • "anything we should add to this readme?" (cursor chat, use gpt4 or better)

Chat with the code:

  • cmd + L to prompt chat 👉 "any of the selected cases that are not called?" (shows which cases are unused)

Using cursor to make summaries of long reads

  • copy a long read from ft, wsj, nyt or thenewyorker or theatlantic. and prompt: "what's the main points"
  • whats the sentiment here? (copy all the comments from a long read)

@eonist
Copy link
Author

eonist commented Jul 8, 2024

Insight nugget:

"One reason Leonardo DaVinci wrote a lot of comments in his drawings was to provide additional context and explanations for his ideas. His densely penned commentary, often written in mirror script due to his left-handedness, accompanied his illustrations
. These comments allowed him to record his thoughts, observations, and insights, making his drawings more than just visual representations."

@eonist
Copy link
Author

eonist commented Jul 8, 2024

Codeium

https://codeium.com/

  • Is a free AI autocomplete and code chat. Not as polished as cursor but not too bad.
  • Works in vscode
  • installation is all over the place, like Amazon Q. but you will get there. 😅
  • cmd + I prompts the inline autocomplete

@eonist
Copy link
Author

eonist commented Aug 8, 2024

Writing unit tests with AI:

  1. Find the methods to test
  2. Ask copilot to make example doc in the comments for the selected method
  3. Copy the example and ask copilot to make a unit test of the code
  4. Run the unit test in terminal
  5. When it fails, usually the copilot will get something wrong, copy the error message
  6. Select the unites method that fails and paste the error message along with fix: "error msg here"
  7. Repeat "copy-error-fix -flow" until the unit tests runs
  8. if tests fail, copy the failure msg and fix it with copilot in the same way we fixed errors

Testing coverage in a flash 🚀

(its also possible to just ask copilot to write tests for a library or codebase, but doing some things manually can be worth it)

@eonist
Copy link
Author

eonist commented Sep 8, 2024

Cursor tip

Generate commit msg and title: @Codebase suggest a commit title and msg based on current changes

(if the output isn't right on the money, just ask the AI to make it more about what you highlevel intention was, like: "Make it more about Fixing the FAQ target / expand mechanism" )

@eonist
Copy link
Author

eonist commented Sep 8, 2024

cursor prompt tip:

1.find urls for the products in this list 2.add markdown links to each of the products [product](url)

@eonist
Copy link
Author

eonist commented Sep 11, 2024

cursor as a copywriter: (use gpt4)

suggest better variotions of this text

or

create a few variations of this text with gpt4 this yields a about 5 different variations

@eonist
Copy link
Author

eonist commented Sep 11, 2024

Cursor as a summariser and find the core of a text: (use gpt4)

What are the main points in this article

@eonist
Copy link
Author

eonist commented Sep 22, 2024

Finding svgs for html img icons: find urls for these svgs

@eonist
Copy link
Author

eonist commented Oct 6, 2024

Handy prompt in cursor to find typos:

find typos in @Codebase

@eonist
Copy link
Author

eonist commented Oct 15, 2024

"Off hour" cleanup in cursor:
find places in the @Codebase that doesnt have parameter documentation

@eonist
Copy link
Author

eonist commented Oct 16, 2024

helpful clean up prompt in cursor:
suggest areas in the @Codebase that we should priortizie improving?

@eonist
Copy link
Author

eonist commented Oct 16, 2024

Make comments more readable:
make this max 80 character wide. without changing the text. just adding more lines and align text to :

More adamant version:
make this max 80 character wide. without changing the text. just adding more lines and make sure text is aligned vertically to the : character

@eonist
Copy link
Author

eonist commented Oct 30, 2024

Future of prompt coding:

I believe the future might involve continuously interacting with our code. Today, one of the main challenges is that our instructions often lack enough context. But with agentic processes, this could soon become the new standard. It would work similarly to sharing ideas with a team member, letting them work on it, and then reviewing their output.

With a voice interface and collaborative agents, I could instruct them to, for example, "Refactor this module," "Reduce complexity," or "Add documentation to improve readability." After some time, results would come back, sometimes with multiple options to choose from. I could then pick one, request further changes, and repeat the process as needed.

@eonist
Copy link
Author

eonist commented Dec 10, 2024

"enrich this code with more comments" 🥰

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment