DEV Community: kalokli8

LLM Prompting best practices

kalokli8 — Sat, 11 Oct 2025 16:57:58 +0000

Introduction

This blog post is based on what I learn from 'Introduction to Generative AI for Software Development' from DeepLearning.AI. I think this will be a good revision material for following the best practice of using LLM prompting.

I have summarized four key strategies for effectively leveraging large language models (LLMs) in software development, based on insights from a recent module. It covers optimal prompting techniques and how developers’ roles evolve when working with LLMs. Below are four main points to guide developers in maximizing the benefits of LLMs while maintaining control over their projects.

1. Be Specific in Prompts

To get the most out of an LLM, provide detailed and specific prompts. Include extensive context about your project, such as problem descriptions or large code snippets. LLMs, built on transformer models, can handle substantial amounts of text, so don’t shy away from long prompts. The more precise your input, the more accurate and relevant the LLM’s response will be. Vague queries often lead to generic outputs, so clarity is key.

2. Assign Roles and Seek Expert Feedback

Assigning a role to the LLM helps tailor its output to your needs. For example, asking it to act as a “helpful coding tutor” might yield beginner-friendly code with detailed comments, while an “expert programmer” role could produce more concise, optimized solutions. Additionally, you can assign the LLM as an expert in domains like software testing or cybersecurity and request feedback on your existing code. This approach helps identify flaws, suggest optimizations, and improve overall code quality.

3. Iterate with Feedback and Experiment

Treat LLM interactions as iterative conversations. If the initial response isn’t perfect, provide feedback and refine your prompts to get closer to your desired outcome. LLMs retain context within a conversation, making it easier to tweak results over multiple exchanges. Beyond refinement, adopt a curious mindset—experiment with complex tasks like refactoring entire libraries or analyzing intricate codebases. Even if some experiments fail, exploring the LLM’s capabilities can uncover new possibilities for your workflow.

4. Prioritize Testing and Learning

While LLMs can generate code quickly, always review and test their output rigorously to ensure it functions correctly and integrates well with your codebase. Avoid the temptation to copy-paste without scrutiny. LLMs also serve as powerful learning tools, suggesting designs, libraries, or approaches you might not have considered. Use follow-up questions to explore pros and cons or request example code. However, as the context expert, you must critically evaluate all suggestions to ensure they align with your project’s needs. Your judgment remains essential in driving successful outcomes.

Conclusion

Integrating LLMs into software development can transform your workflow, but it requires thoughtful prompting and active oversight. By being specific, assigning roles, iterating with feedback, experimenting boldly, and prioritizing testing and learning, you can harness LLMs effectively. Ultimately, you remain in the driver’s seat, ensuring the code meets your project’s unique requirements. With these best practices, you’re equipped to code smarter and more efficiently alongside LLMs.

What are those curve values in staggered menu animation?

kalokli8 — Thu, 06 Jul 2023 02:45:11 +0000

https://docs.flutter.dev/cookbook/effects/staggered-menu-animation

In the above official doc, it does not explain this code

final animationPercent = Curves.easeOut.transform(_itemSlideIntervals[i].transform(
_staggeredController.value),
);

List<Widget> _buildListItems() {
  final listItems = <Widget>[];
  for (var i = 0; i < _menuTitles.length; ++i) {
    listItems.add(
      AnimatedBuilder(
        animation: _staggeredController,
        builder: (context, child) {
          final animationPercent = Curves.easeOut.transform(
            _itemSlideIntervals[i].transform(_staggeredController.value),
          );
          final opacity = animationPercent;
          final slideDistance = (1.0 - animationPercent) * 150;

          return Opacity(
            opacity: opacity,
            child: Transform.translate(
              offset: Offset(slideDistance, 0),
              child: child,
            ),
          );
        },
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 36, vertical: 16),
          child: Text(
            _menuTitles[i],
            textAlign: TextAlign.left,
            style: const TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ),
    );
  }
  return listItems;
}

After some studying, these three values are all between 0.0 to 1.0.

_staggeredController.value represents the current progress of the overall animation,

_itemSlideIntervals[i].transform(_staggeredController.value) is used to control the timing of the animation for each menu item, and

Curves.easeOut.transform(_itemSlideIntervals[i].transform(_staggeredController.value)) applies an easing curve to the animation.

Why the SingleChildScrollView widget load all data at once(does not lazy loading)?

kalokli8 — Wed, 28 Jun 2023 09:45:53 +0000

The fundamental difference between SingleChildScrollView and CustomScrollView lies in their design and intended use-cases.

SingleChildScrollView is a simple widget that combines a scrollable area with a single child. It's intended to be used where there is a need to make a single child scrollable. This child widget is typically a Column, Row, or Flex that contains a large number of items. All the children of these widgets are loaded at once, which might lead to performance issues if the list is very long. In other words, SingleChildScrollView does not support lazy loading.

On the other hand, CustomScrollView is a more complex widget that can contain multiple children, each of which could be a scrollable area (a Sliver). Slivers are a lower-level primitive that describe part of the layout and can change their behavior based on the scroll position. This makes CustomScrollView more flexible and capable of handling complex layouts.

Some of the slivers like SliverList or SliverGrid support builder delegates (SliverChildBuilderDelegate), which create children on-demand, as they scroll onto the screen. This is the mechanism that enables lazy loading in CustomScrollView.

In essence, if you need to display a potentially large list of widgets and want it to be efficiently loaded, it's better to use CustomScrollView with slivers. If you just need to make a relatively small number of widgets scrollable, SingleChildScrollView would be a simpler choice.

Dart cascade notation (..) and usage in list

kalokli8 — Tue, 17 Jan 2023 04:05:13 +0000

A bit introduction: according to dart.dev:

Cascades (.., ?..) allow you to make a sequence of operations on the same object. In addition to accessing instance members, you can also call instance methods on that same object. This often saves you the step of creating a temporary variable and allows you to write more fluid code.

var paint = Paint()
  ..color = Colors.black
  ..strokeCap = StrokeCap.round
  ..strokeWidth = 5.0;

The constructor, Paint(), returns a Paint object. The code that follows the cascade notation operates on this object, ignoring any values that might be returned.

The previous example is equivalent to this code:

var paint = Paint();
paint.color = Colors.black;
paint.strokeCap = StrokeCap.round;
paint.strokeWidth = 5.0;

You can also not assign the value and just run some functions.
Let's play around and see these examples:

class Cat {
  String sound() => 'hi';
  String sound2() => 'hi2';
}

void main() {
  // Create a Cat instance
  final cat = Cat();

  print(cat.sound()); // 'hi'
  print(cat..sound()..sound2()); // Instance of 'Cat'


  print([]..add(1)); // [1]

  print([].add(1));
  // Error: This expression has type 'void' and can't be used.
  // You can't print void value.

  [].add(1); 
  // The array is [1].The add method returns 
  // void and the value is not assigned to any variable.



  List<int> num = [1];
  num.add(2); 
  num.add(3); 
  print(num);
  // [1,2,3]

  // It is equivalent:
  List<int> num2 = [1]..add(2)..add(3);
  print(num2);
  // [1,2,3]

}

Finally, I find this link useful when encounter errors of
'Cannot add to an unmodifiable list' or 'The default value of an optional parameter must be constant':

https://stackoverflow.com/questions/66550202/how-to-add-to-an-existing-list-got-unsupported-operation-cannot-add-to-an-unm

Basically it means the 'const' keyword makes the list unmodifiable. You can use spread operator(...) or List.from() to make a new array to solve this problem.

chat.messages = [...chat.messages, message];
chat.messages = List.from(chat.messages)..add(message);

SVG intro

kalokli8 — Mon, 18 Jul 2022 10:28:31 +0000

What is SVG?

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics

Why SVG does not lose clarity? (It scales to any size while maintaining quality)

An SVG image's data is stored as XML instead of pixels, and consists of components that can be scaled to any level without losing source quality.

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.

Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic

Example Code of a triangle:

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

Explanation:
M = moveto
L = lineto
Z = closepath

Capital letters means absolutely positioned, lower cases means relatively positioned.

Source: W3 school

How to add dark mode (Color theme)

kalokli8 — Tue, 28 Jun 2022 06:46:10 +0000

Operating System

In Mac, you can choose your color theme:
System Preferences --> General --> Appearance

The prefers-color-scheme CSS media feature is used to detect if the user has requested a light or dark color theme.

Syntax example:

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

Result: https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/@media/prefers-color-scheme/_sample_.examples.html

Change to dark mode manually(such as switch toggle) using ‘class’ strategy in Tailwindcss

First, add "dark:" before the class you want in dark mode

 <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>

Then, in tailwind.config.js, add

module.exports = {
  darkMode: 'class',
  // ...
}

Resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

https://tailwindcss.com/docs/dark-mode

CSS units

kalokli8 — Sat, 21 May 2022 02:09:02 +0000

font-size: rem
width: % in combination with a max-width, ch
height: question urself "do i rly need to set height" if yes -> use a min-height
padding/margin: rem or em, em for padding of buttons
media queries: em

px only for little things like shadows, borders etc.

How to reverse a link list.

kalokli8 — Mon, 09 May 2022 05:33:47 +0000

reverse() {
let current = this.head;
let next = null;
let previous = null;

while(current !== null) {
  next = current.next;
  current.next = previous;
  previous = current;
  current = next;
}

this.head = previous;

}

visualization video:
https://www.youtube.com/watch?v=D7y_hoT_YZI&ab_channel=GeeksforGeeks

Grid Responsive

kalokli8 — Sat, 16 Apr 2022 09:38:19 +0000

display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;

XOR Python

kalokli8 — Mon, 11 Apr 2022 13:46:57 +0000

XOR Operator in Python is also known as “exclusive or”. It compares two binary numbers bitwise if two bits are identical XOR outputs as 0 and when two bits are different then XOR outputs as 1.

Bitwise operators in Python are also called binary operators. In calculation, the integers are first converted into binary, and later the operations are performed bit by bit.

a=  5  #0101
b = 3  #0011

result  = (a ^ b) #0110

print(result)

# Output
# 6 (0110)

print(True ^ True) // False
print(True ^ False) // True
print(False ^ True) // True
print(False ^ False) //False

find non-duplicate in [7,3,3,4,4,5,5]

def singleNumber(self, nums: List[int]) -> int:
    n=len(nums)
    r=nums[0]
    for i in range(1,n):
        r = r ^ nums[i] 

    return r

r = 7 ^ 3 ^ 5 ^ 4 ^ 5 ^ 3 ^ 4

Since XOR is associative and commutative, above
expression can be written as:
r = 7 ^ (3 ^ 3) ^ (4 ^ 4) ^ (5 ^ 5)
= 7 ^ 0 ^ 0 ^ 0
= 7 ^ 0
= 7

credit: https://itsmycode.com/xor-in-python/

How to write shorter code using python in Leetcode

kalokli8 — Sun, 10 Apr 2022 12:55:28 +0000

How to get index in a for loop in Python?

Naive: use a variable

count = 0
for i in range(5):
//  some code using count index
    count += 1

Smart: use enumerate function:

for idx, val in enumerate(ints):
    print(idx, val)

How to get unique key from value in dictionary?

// my_dict.items() look like this:
// [("a", 1), ("b", 2), ("c", 3)]

my_dict ={"a": 1, "b": 2, "c": 3}

def get_key(val):
    for key, value in my_dict.items():
        if val == value:
            return key

    return "no match"

my_dict = {"a": 1, "b": 2, "c": 3}
print(get_key(1))
print(get_key(2))

List Comprehension

Syntax:

newlist = [expression for item in iterable if condition == True]

fruits = ["apple", "banana", "cherry", "kiwi", "mango"]
newlist = [x for x in fruits if x != "apple"]
print(newlist)
output: ['banana', 'cherry', 'kiwi', 'mango']

What is drwx when using ls -la

kalokli8 — Sun, 10 Apr 2022 03:25:23 +0000

Display the content of a folder including hidden files and additional information using this command:

ls -la ~/.ssh

Note: l stands for long, it will display additional information about the files and directories
Note: a stands for all, it will display hidden files as well

~/.ssh: find .ssh folder in root directory

The terminal shows:
drwx--xr-x 1 user staff 3389 10 Apr 11:11 id_rsa

It is about file permissions on unix/linux/whatever on the net.
The first character tells you if it is a directory (marked as ‚d‘), then you continue in groups of three for read (‚r‘), write (‚w’) and execute (‚x’) permissions for the owning user, group and everyone else.