Apps used: Cursor.so / github copilot chat / Amazon Q / codeium
This is like when humanity stopped using horses for transportation and started using cars. 🐴 👉 🚗
- Gotchas (Good to know about prompt coding 💡)
- Comment code (Commenting is essential for understanding 📝)
- Markdown (Readme markdown etc 📚)
- Structure (Improve code structure 🏗️)
- Refactor (Refactor code ✍️)
- Extras (Extra tips and tricks 👌)
- Strategy (Ways of thinking about prompt-coding 🧠)
- Conformed refactoring (Refactor based on external ideas / concepts 🔗)
- Check your new productivity (Proof is in the pudding 🍮)
- Bug fixing (Debugging error and fixing bugs 🐛)
- Links ( 💻)
- Todo (Improvments and todos ✅)
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:
Prompting prompts: (Using text expander as the "prompt expander")
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
- Alternatie:
- 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
oradd 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)
- Sometimes empty lines are added:
- 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
orfor 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
- More adamant command to move a line from above to the end of a line:
- 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
ordrop 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
- More adamant alternative:
- Add instructions about cvs structure to a comment:
add description about the format of the banks.csv
thenadd 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
orsolve 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
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?
thenCan 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 byadd * 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)
oradd 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: `
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 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.
thenadd 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
- More adamant restructure prompt in steps (if the above fails):
- 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 bysome 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
:
/**
*
*/
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
oris 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 withI 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
ormake 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 withuse 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/
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:
The resulting script:
- you need to intall python3 first
- in terminal
cd ~/desktop/
- 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}")
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.
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?".
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
🤯
Proof is in the pudding
- save this as
github_stats.sh
on your desktop. - then in terminal
cd~/desktop
- then in terminal
bash -x commits.sh
- 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:
Debugging error and fixing bugs
Coming soon
Resources and links
- AI code editor: cursor.so $20 a month or use your own GPT4 key for max speed
- Github copilot chat github.com (Uses codex LLM from OpenAI) $10 - $19 a month
- Hosting gifs: gifyu.com
- Here is how this Mini book is written: https://gist.github.com/eonist/3f3dd1902dd23bfeeaba3d83e9f0e9da
- perplexity.ai is nice when doing research from multiple sources
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. 👈
Got feedback or suggestions? DM me @ x.com/eoncodes or on linkedin
Styling design 1.make the tappable area twice the size of the fill area, 2.set the speed of this animation to 0.04, 3.add a stroke