DEV Community: Pew Pew Prompts

🤖 How to Force Cursor AI Agents into 🧑‍🎓 Always following Project Rules using 💡 Auto-Rule Generation Techniques

Pew Pew Prompts — Wed, 16 Apr 2025 20:53:03 +0000

This tutorial guides you through creating structured Cursor rule files (.mdc) based on documented best practices. We will use a dedicated AI agent within Cursor, configured specifically for formatting these rules correctly. Following these steps ensures your rules are consistent and effectively guide the AI's behavior in your project.

✅ Prerequisites

Cursor AI code editor installed.
Basic understanding of Cursor's features (like chat and repo prompts).
A set of best practices you want to enforce, documented preferably in a Markdown file within your project.

1️⃣ Step 1: Obtain the Rule Generation Rule

The core of this process relies on a specific Cursor rule designed to guide the AI in creating other rules correctly. Think of it as a meta-rule: a rule about how to make rules.

This isn't a separate "agent" in the typical sense, but rather a standard Cursor rule file (.mdc) containing detailed instructions (its system prompt) on how to format and structure new rule files based on user input or best practices documents.

Recommendation: Adding this rule allows Cursor to efficiently create and update other rules for your project whenever you ask it to, ensuring consistency by always referencing these formatting guidelines. To do so follow the following steps:

Create the directory .cursor/rules/core-rules/ if it doesn't exist.
Save the content below into a file named .cursor/rules/core-rules/rule-generating-agent.mdc.
(Optional) Cursor has a built in view for showing cursor rules, unfortunately this view may cause updates, by agents, to be lost. To prevent this add the following to your cursor settings, so the files get opened like regular files:

"workbench.editorAssociations": {
  "*.mdc": "default"
}

For this tutorial we will reference the content of this rule file as instructions loaded directly into the chat.

Credits: The original rule definition used here comes from the cursor-custom-agents-rules-generator project. The project gets updated frequently and the rule you see here might be outdated by the time your read this. You can find the latest version here. Many thanks to BMad for sharing this useful resource рџ™Џ.

Content for rule-generating-agent.mdc:

---
description: "This rule is essential for maintaining consistency and quality in rule creation across the codebase. It must be followed whenever: (1) A user requests a new rule to be created, (2) An existing rule needs modification, (3) The user asks to remember certain behaviors or patterns, or (4) Future behavior changes are requested. This rule ensures proper organization, clear documentation, and effective rule application by defining standard formats, naming conventions, and content requirements. It's particularly crucial for maintaining the rule hierarchy, ensuring rules are discoverable by the AI, and preserving the effectiveness of the rule-based system. The rule system is fundamental to project consistency, code quality, and automated assistance effectiveness."
globs: 
alwaysApply: true
---
# Cursor Rules Format

## Template Structure for Rules Files

---
description: `Comprehensive description that provides full context and clearly indicates when this rule should be applied. Include key scenarios, impacted areas, and why following this rule is important. While being thorough, remain focused and relevant. The description should be detailed enough that the agent can confidently determine whether to apply the rule in any given situation.`
globs: .cursor/rules/**/*.mdc OR blank
alwaysApply: {true or false}
---

# Rule Title

## Critical Rules

- Concise, bulleted list of actionable rules the agent MUST follow

## Examples

&lt;example&gt;
{valid rule application}
&lt;/example;&gt;

&lt;example type="invalid";&gt;
{invalid rule application}
&lt;/example;&gt;

### Organizational Folders (Create if non existent)
All rules files will be under an organizational folder:
- .cursor/rules/core-rules - rules related to cursor agent behavior or rule generation specifically
- .cursor/rules/my-rules - gitignore in a shared repo, rules specifically for ME only
- .cursor/rules/global-rules - these will be rules that are ALWAYS applied to every chat and cmd/ctrl-k context
- .cursor/rules/testing-rules - rules about testing
- .cursor/rules/tool-rules - rules specific to different tools, such as git, linux commands, direction of usage of MCP tools
- .cursor/rules/ts-rules - typescript language specific rules
- .cursor/rules/py-rules - python specific rules
- .cursor/rules/ui-rules - rules about html, css, react
* create new folders under .cursor/rules/ as needed following similar grouping conventions,
    - for example `.cursor/rules/cs-rules` if we started using c# in a project

## Glob Pattern Examples
Common glob patterns for different rule types:
- Core standards: .cursor/rules/*.mdc
- Language rules: *.cs, *.cpp
- Testing standards: *.test.ts, *.test.js
- React components: src/components/**/*.tsx
- Documentation: docs/**/*.md, *.md
- Configuration files: *.config.js
- Build artifacts: dist/**/*
- Multiple extensions: *.js, *.ts, *.tsx
- Multiple patterns: dist/**/*.*, docs/**/*.md, *test*.*

## Critical Rules
- Rule files will be located and named ALWAYS as: `.cursor/rules/{organizational-folder}/rule-name-{auto|agent|manual|always}.mdc`
- Rules will NEVER be created anywhere other than .cursor/rules/**
- You will always check to see if there is an existing rule to update under all .cursor/rules sub-folders
- FrontMatter Rules Types:
    - The front matter section must always start the file and include all 3 fields, even if the field value will be blank - the types are:
        - Manual Rule: IF a Manual rule is requested - description and globs MUST be blank and alwaysApply: false and filename ends with -manual.mdc.
        - Auto Rule: IF a rule is requested that should apply always to certain glob patterns (example all typescript files or all markdown files) - description must be blank, and alwaysApply: false and filename ends with -auto.mdc.
        - Always Rule: Global Rule applies to every chat and cmd/ctrl-k - description and globs blank, and alwaysApply: true  and filename ends with -always.mdc.
        - Agent Select Rule: The rule does not need to be loaded into every chat thread, it serves a specific purpose. The description MUST provide comprehensive context about when to apply the rule, including scenarios like code changes, architecture decisions, bug fixes, or new file creation. Globs blank, and alwaysApply:false and filename ends with -agent.mdc
- For Rule Content - focus on actionable, clear directives without unnecessary explanation
- When a rule will only be used sometimes (alwaysApply: false) the description MUST provide enough context for the AI to confidently determine when to load and apply the rule
- Use Concise Markdown Tailored to Agent Context Window usage
- Always indent content within XML Example section with 2 spaces
- Emojis and Mermaid diagrams are allowed and encouraged if it is not redundant and better explains the rule for the AI comprehension
- While there is no strict line limit, be judicious with content length as it impacts performance. Focus on essential information that helps the agent make decisions
- Always include a valid and invalid example
- NEVER use quotes around glob patterns, NEVER group glob extensions with `{}`
- If the request for a rule or a future behavior change includes context of a mistake is made, this would be great to use in the example for the rule
- After rule is created or updated, Respond with the following:
    - AutoRuleGen Success: path/rule-name.mdc
    - Rule Type: {Rule Type}
    - Rule Description: {The exact content of the description field}

📋 Step 2: Document Your Best Practices

Before creating rules, you need the content for them. Gather the specific standards or best practices you want the AI to follow for a particular domain (like TypeScript coding standards, testing procedures, or commit message formats).

💡 Tip: Use AI for Research and Generation

You can leverage AI models with strong research capabilities (like Perplexity, Claude 3 Opus, GPT-4, or Grok) to help you generate this best practices document. Provide the AI with context about your project and ask it to research and compile relevant standards.

Example Prompt for AI:

Objective: Research and compile a list of best practices for {TECHNOLOGY_OR_DOMAIN} within the context of a {PROJECT_TYPE} project.

Context:
-   Our project uses: {LIST_KEY_TECHNOLOGIES_FRAMEWORKS}
-   Our team size is: {TEAM_SIZE}
-   Key priorities are: {LIST_PROJECT_PRIORITIES e.g., maintainability, performance, security}

Instructions:
1.  Research established best practices for {TECHNOLOGY_OR_DOMAIN}.
2.  Focus on practices relevant to {PROJECT_TYPE} and our priorities ({LIST_PROJECT_PRIORITIES}).
3.  Organize the findings into clear, actionable points suitable for documentation.
4.  Format the output as a Markdown document with appropriate headings.

---
Variable Definitions:
TECHNOLOGY_OR_DOMAIN = "TypeScript" // e.g., "Python", "React", "API Design", "Git Commit Messages"
PROJECT_TYPE = "web application" // e.g., "CLI tool", "mobile app", "data science project"
LIST_KEY_TECHNOLOGIES_FRAMEWORKS = "Node.js, Express, PostgreSQL" // e.g., "React, Next.js, Tailwind CSS"
TEAM_SIZE = "small (3-5 developers)" // e.g., "large (>10 developers)", "solo developer"
LIST_PROJECT_PRIORITIES = "code readability, test coverage, consistent error handling"

Create a Source Document: Compile these best practices into a clear document within your project. A Markdown file is recommended. For example, create a file named docs/typescript-best-practices.md.

Write Down Practices: List each best practice clearly.

Example content for docs/your-best-practices.md:

# Project Best Practices

## Use Consistent Naming Conventions
Variables, functions, and classes should follow the project's agreed-upon naming style (e.g., camelCase for variables, PascalCase for classes).

## Add Documentation Comments
Public functions and complex logic blocks should have clear documentation comments explaining their purpose, parameters, and return values.

## Handle Errors Gracefully
Anticipate potential errors and implement proper error handling (e.g., try-catch blocks, checking return values) instead of letting the application crash.

✨ Step 3: Generate Rules Using the Agent

Now, you will instruct the Rule Formatting Agent (from Step 1) to create the .mdc rule files based on your best practices document (from Step 2).

Open Cursor Chat/Repo Prompt: Start a new chat and select all files.
Reference Agent and Document: Make sure the Rule Formatting Agent is active (e.g., by mentioning @rule-generating-agent if you saved its prompt as a rule). Also, provide your best practices document as context (e.g., @docs/typescript-best-practices.md).

Instruct the Agent: Tell the agent exactly what to do using a detailed prompt. This prompt should reference the agent, the best practices document (using a variable), and specify the desired output (rule type, directory using a variable, naming, format adherence).

Example Prompt to Copy/Paste:

Note: Fill in the variable definitions at the end of this prompt before sending it.

Objective: Generate individual Agent Select Cursor rules based on the best practices outlined in the referenced document (`@{BEST_PRACTICES_DOC_PATH}`).

Instructions:
1.  For each distinct best practice found in the document, create a separate Agent Select rule file (`.mdc`).
2.  Follow all formatting and content requirements defined in your system prompt (`@rule-generating-agent`) for creating Agent Select rules.
3.  After generation, confirm success by listing the paths of the created rule files.

---
Variable Definitions:
BEST_PRACTICES_DOC_PATH =

@rule-generating-agent

Review Agent Output: The agent will respond with the necessary file operations (e.g., <file path="..." action="create">...) to generate the .mdc files. Review these operations before applying them.
Apply Changes: If the output looks correct, allow Cursor to apply the changes, creating the new rule files in your specified directory.

You might need to restart cursor or open the files for them to be indexed and take effect. Et voila. You have successfully generated structured Cursor rules from your documented best practices. By separating the knowledge gathering (Step 2) from the rule formatting (Step 3) and using a dedicated agent for formatting, you ensure consistency and maintainability in your AI-assisted development workflow. These rules will now automatically be referenced by Cursor's AI according to your project's standards.

Local Markdown Task Management For You & Your Agent with pewPewCLI ♡

Pew Pew Prompts — Wed, 16 Apr 2025 16:14:20 +0000

Hey guys & gals 😁🤙🤙 It's been a while since my last post. Much has changed since then and so has my way of working with Cursor and other AI tools. I'm here to share a very cool tool I've been working on and with:

TL;DR; pewPewCLI let's you specify where you keep your local task file(s) in a config yaml, after which you (and your agent) can use commands like pew next task to complete any current task and output the next.

🌍 Full Guide
🔗 GitHub
📦 NPM

💡 FYI: All three pages have proper readme with video / gif examples, which unfortunately I can't all post here due to platform size limitations.

Like many of you (I think) I've been playing around with hundreds of different combinations of prompts, rules, methods, strategies, etc. trying to find the perfect workflow / combination of methods and tools. I think I've kind of found it (for now 😅). It consists of three parts:

1. Pre-planning (instructions + context) with Repo Prompt
2. Planning with Google AI Studio (Gemini 2.5 Pro, or any model really)
3. Execution with Cursor and my markdown task management tool pewPewCLI

The end result of steps 1 and 2 is a plan to execute on your request in the form of a markdown file with unchecked checkboxes for your tasks. I won't go to deep into steps 1 and 2 for now. I'm in the process of making a couple videos showcasing the exact steps which I'll post in this thread when I have them.

If you have no idea how to do steps 1 and 2, try to follow these steps:

1. 📦 Download RepoPrompt - you'll use this to gather context, if you don't want to use RepoPrompt look at alternatives like Pastemax or Repomix
2. 🤖 You Are A Requirements Expert - Set this as your system/meta prompt.
3. 📝 Please Create Plan - Use this as a conversation starter and wrapper around your request
4. 📖 Building Context with Repo Prompt - Watch this, put everything together and press the copy button. In case you're not using RepoPrompt, find some way to put it all together.
5. 🤖 Google AI Studio - Go here and paste in everything, optionally answer some questions and then copy the markdown plan.

Most important thing is you have a markdown task plan that you can use. Once you have that go into your project in Cursor. Install and init the pew pew cli using:

npm install -g pew-pew-cli && pew init --force

Then, then, then 😁 use pew paste tasks and it will paste it in your local task file (which you can edit in .pew/config/paths.yaml.

Then instruct your agent to start working on the task file using nothing but pew next task. Use this plx-develop-tasks.md Prompt if you want. The tool will then automatically:

Complete your current task
Output only the relevant task
Only work and focus on the relevant task
Follow the plan rigorously
Show progress & completion status

This has been incredibly efficent for me, resulting in doing up to 80% of my work as freelance developer with this workflow. Not saying it's perfect or that it will one shot everything you put into it, but it comes very close. And pretty much always when things go wrong it's because I didn't check the plan well enough or I didn't give enough context.

I'd love for you to check it out. There's also a very cool feature which allows you to make QA-checklists, pre-checklists, after task checklists. Kind of like a task pipeline, which you can reuse everytime.

If you want to reset them just use pew reset tasks and it will ask you which files to reset.

It's still early in development so there are a few bugs here and there. I'm aware of those and fixing them asap. I originally made this in python, but decided to refactor it when I dedicded to share it. Anyway, hope it brings much productivity and efficiency. Feel free to contact me for anything through this post or other channels. I'll be making updates, videos and other stuff surrounding this workflow and tools and will try to keep this thread updated.

For easy reference I'll end this post with the current readme of the tool. Thank you for reading. Pew pew 🔫😁🤙

🌍 Full Guide
🔗 GitHub
📦 NPM

pewPewCLI ❤️ Agents' Fav Dev Tool 🔫

Lightweight CLI tool that enables collaborative local task file management between developers and AI agents.

💻 Install

Ensure you have Node.js and npm installed.

npm install -g pew-pew-cli && pew init

⚙️ Configuration

Local: .pew/config/ (specific to the current project/directory)
Global: ~/.pew/config/ (user-level settings)

`paths.yaml`

# List of files scanned by 'pew next task' and offered by 'pew reset tasks'
# Processed in the order listed. Absolute paths also work.
tasks:
  - relative/path/to/another/tasks/file.md
  - .pew/tasks.md
  # - /absolute/path/to/tasks.md

# Optional: Default target file for 'pew paste tasks'.
# If omitted, defaults to the first path listed under 'tasks:'.
paste-tasks: .pew/tasks.md

📝 Commands

Command	Description	Options
`pew init`	Initialize the `pewPewCLI` project structure in the current directory.	`-f, --force`: Force initialization even if `.pew` directory exists.
`pew set path`	Set a configuration value for a path (currently only `tasks`).	`--field <field>`: Field to set (only `tasks`). `--value <value>`: Path value to set. `-g, --global`: Set in global config (`~/.pew`).
`pew paste tasks`	Paste clipboard content into the configured task file.	Paste mode (`--override`, `--append`, `--insert`). Prompts if omitted. `--path <value>`: Specify target file path, overriding config.
`pew next task`	Marks the current task (`👉`) complete and displays the next available task.	None
`pew reset tasks`	Uncheck all completed tasks (`[x]`) in configured task files interactively.	None
`pew update`	Check for updates and install the latest version of `pew-pew-cli`.	None

📂 `pew init`

Creates the .pew directory and default configuration files (.pew/config/paths.yaml, .pew/tasks.md) in the current directory. It will prompt for the primary tasks file path unless --force is used.

# Interactive initialization
pew init

# Force initialization without prompts (uses defaults)
pew init --force

📂 `pew paste tasks`

Reads content from your system clipboard and writes it to a task file. By default, it targets the file specified by paste-tasks in paths.yaml (or falls back to the first file under tasks:). You can specify the mode (overwrite, append, insert) or the target path using options. If no mode is specified, it will prompt interactively.

# Paste and overwrite the default task file
pew paste tasks --overwrite

# Append clipboard content to a specific file
pew paste tasks --path specific/project/tasks.md --append

# Run interactively to choose mode
pew paste tasks

👉 `pew next task`

This is the core command for progressing through your task lists. It finds the current task marked with 👉, marks it as complete (- [ ] -> - [x]), removes the 👉, finds the next available incomplete task (- [ ]) across all files configured in paths.yaml (in order), adds the 👉 prefix to it, and displays the context of that new task.

# Process the current task and move to the next one
pew next task

📂 `pew reset tasks`

Resets completed tasks within your configured checklists. This command interactively prompts you to select which of the task files listed in your paths.yaml you want to reset. For each selected file, it changes all completed task markers (- [x] or - [X]) back to incomplete (- [ ]) and removes the 👉 prefix if present.

It helps restart repeatable workflows (like daily checklists, QA runs) without manual editing.

# Interactively select configured task files to reset
pew reset tasks

The prompt will show a summary of tasks within each file to help you select.

✨ `pew update`

Checks if a newer version of pew-pew-cli is available on npm and prompts you to install it if found.

# Check for and install updates
pew update

📝 Pew Pipelines (`pew next task`)

You can manage different checklists across multiple files (e.g., main dev tasks, QA checklist).

Configure paths.yaml: List all relevant files under the tasks: key in order.
Run pew next task: pewPewCLI processes tasks sequentially through the files listed.
Reset Checklists: Use pew reset tasks to uncheck completed items when you want to restart a workflow (like the QA checklist).

🤖 Example Agent Prompt

Here's a prompt you can adapt for an AI agent to use this tool once initialized in a project:

You are an AI assistant tasked with executing the next available milestones and set of tasks outlined in the provided plan. Follow these instructions carefully:

1.  **Review Task Plan:** First, carefully review the content of the {{TASK_FILE_LOCATION}} (typically `.pew/tasks.md`).

2.  **Understand Context:**
    *   Your goal is to complete the next available milestone (specifically Milestone `{{MILESTONE_NUMBER}}`) and its associated tasks sequentially.
    *   You must follow the plan exactly as specified in `{{TASK_FILE_LOCATION}}` without adding, removing, or changing steps or requirements unless explicitly instructed by a task.

3.  **Identify Next Task:**
    *   Locate Milestone `{{MILESTONE_NUMBER}}` in the `{{TASK_FILE_LOCATION}}` file.
    *   Identify the first uncompleted task listed under this milestone.
    *   Use the `pew next task` command to confirm and retrieve the details of this first task.

4.  **Research Project Context:**
    *   Based on the output of `pew next task`, thoroughly scan all related project files to gain a deep understanding of the task's requirements and the project's context.

5.  **Execute Tasks Sequentially:**
    *   Complete each task strictly in the order presented.
    *   Use the `pew next task` command *after* successfully completing the current task to mark it done and get the next one.
    *   Do not skip any tasks or alter their prescribed order.

6.  **Milestone Completion Review:**
    *   After completing *all* tasks for Milestone `{{MILESTONE_NUMBER}}`, review the implemented work for correctness and consistency.

7.  **Completion and Next Steps:**
    *   Once all tasks for the specified milestone are successfully completed and reviewed/fixed, ask the user for the next set of instructions.

**Always remember:**
*   Stick rigorously to the plan.
*   Focus exclusively on the tasks for the specified milestone.
*   Update the task file using `pew next task` immediately after completing each task.
*   Ensure high-quality output (code, documentation, etc.).
*   Run `pew` commands autonomously as needed ("yolo mode is on").

Begin your work by reading the `{{TASK_FILE_LOCATION}}`. Then, identify and start the first task for Milestone `{{MILESTONE_NUMBER}}` using `pew next task`.

MILESTONE_NUMBER = ALL
TASK_FILE_LOCATION = .pew/tasks.md

ACT

Two Days Indie Dev Life: Mailchimp, Webflow & Zapier - A Love Story

Pew Pew Prompts — Wed, 29 May 2024 13:16:43 +0000

My new landing page is done, I got my email form with download link working and I found a cool new tool for measurements. I also share some nice Webflow templating insights and how I made a very big mistake 😁. Let’s get into it.

Website & Leads

Two days ago I worked the entire day on the new homepage / landing page of the website. This is after I realised that many people reach my app for the first time via desktop web. Currently, my download links are set up to show the web app if they are visited on a desktop. I prefer them to leave their email so they can download the mobile app themselves later, as the mobile app currently has a much better user experience.

The web version works fine too, don't get me wrong. But some of the UI elements are not yet tuned for the web, which makes some things look out of proportion in certain places. No problem for functionality, but it does look a bit sloppy here and there.

I originally tried to make a download page (in addition to my new landing page) in Mailchimp, but I don't like the templates and the results I get with it. Note from the future, I was using the old builder so that might have to do with it. Either way I decided to go with Webflow. I initially only wanted to create a download page, but then I thought, while I'm at it, I might as well do the whole homepage/landingpage, because I now have a very cool new slogan that I want to reflect. This will improve my SEO and also make sure the website is up to date with all new features. So two days ago, after a good back workout, I went to my favorite place and started working.

Webflow Template

After about two or three hours I had to switch locations to regain my focus. I went to one of my new favorite spots in a park.

Once there I went to look for templates on Webflow. I quickly managed to find a good one that I wanted to use and started implementing it. A lesson I learned from implementing this template and a few templates in webflow before is the following.

Stick To Your Concept

Originally Float Note started out as a desktop application, but once the mobile version got developed mobile became the main app, web was set up and desktop got discontinued. Simply because of time issues, I might continue it one day.

You can save yourself a lot of time by choosing a template that really represents the concept you are selling. In my case now, a mobile app template is better than a desktop SaaS template.

This has to do with the different types of visual elements that are all tailored to mobile app screenshots. To save yourself a lot of time, it is useful if you download these screenshots, adjust them and use the same size (this is important) and then upload them again.

This will keep many animations working properly and most importantly keep proportions looking good. If you don't do this you often spend a lot of time keeping your template nice and responsive because you disturb it because of the different sizes of your screenshots.

Twitter Game

I’ve been active on twitter for about a week now. It’s still kind of new to me but something really cool happened yesterday. DEV.TO put one of my daily blogs in one of their tweets, they have like 300k+ followers, I couldn’t believe it. Very very cool, thanks a lot 🙏.

And while we’re at it I updated my twitter header yesterday. It was still blank and of course I thought this might be the perfect opportunity for me to promote my app. So I made a header, which at first looked great on my laptop but got all messed up on mobile. So I figured out a way to fix this, assuming that most mobiles will have the same kind of dimensions more or less.

I took a screenshot of my phone and enlarged it on top the design in Canva. This way I could see how my big design would turn out on the big screen and on mobile. By playing around with the opacity of the screenshot. It looks a bit messy but it worked! The challenge was keeping the big design look good. It’s easy to work around the island and battery level etc. But it’s a bit harder to still make it look good when those things are not there. I used some stars and planets to fill up the space where I felt it was too empty.

I’m pretty happy with the result for now. I shouldn’t spent too long on these kind of things, I have a tendency to play around with pixels for hours. Luckily I’m aware of this.

Tuesday Trip Day

Per usual I went to Eindhoven tuesday. After a go(o)d workout I moved myself to work at one of my clients.

There wasn’t much to do for me so I continued with setting up the landing page. My goal for today is clear. I want a page where users can leave their email and once they do, it should add the user to mailchimp and send a download link. The email should look a bit like this:

By the end of the day, I got it working. I spent a lot of time trying to build something decent in Webflow and Mailchimp. These tools are great for many things, but I find it difficult (read, not impossible & more important with my skills) to create anything in my head with them. I'm probably spoiled by Flutter and how easy things go and how my brain thinks that way. I pulled a few hairs out of my head today because of these tools.

Webflow & PixelSnap2

Above you see the final result of the download page on web. While working on this page I was going back and forth finetuning the design and I remembered there was this tool that could show you dimensions on the screen with the click of a button. I’m a pixel perfect guy by nature and I do a lot of measuring when I develop my apps, but I’m a bit more loose when I do something like this. However, some things were just too obvious. Like the download button would be bigger than form field. That just looked off. It has to do with the elements being drawn with their fonts + padding as starting point, instead of heights. Anyway what I wanted to tell you about is this tool! It’s so cool. It’s from the same company that build CleanShot X, the tool I use to create my screenshots. It’s called PixelSnap2.

With the press of a button you can put measurements on the screen and keep them there until you remove them. It’s so good for quick measuring! You press a button, you measure stuff, click a bit here and there if you want to and then go about your business. I can’t wait to use this while developing one of my apps.

Mailchimp Journey

After I got the web page working in Webflow I had to set up a Journey in mailchimp.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8toiew218nsgvfqggxpw.png

One of the more confusing parts of this was setting up the linking between Webflow and Mailchimp. Somehow I thought they would have a native integration with each other, but they don’t. So naturally I asked ChatGPT how to solve this.

One funny thing, I spent a good time on trying to figure out what the step_id was. It turns out it was part of the url that I had already. That’s what you get for ADHD scanning the documentation instead of reading it.

Once I set up the journey I used Zapier (for now) to link the two together. I’ve heard about Zapier before, I even played around with it but never had a real use case for it. I will replace it once it becomes too expensive but for now it’s a great solution. It worked great too, I could ask it in natural language what I wanted to do, then their AI set up the initial steps for me. One of the few apps where I see AI implemented in a really good way. Kudos to them.

After setting everything up I tested it and it works! Eureuka.

I did notice just now that the sender looks very techy. I thought I fixed that. I’m putting that in my Float Note inbox for later with Alfed and the query option of Float Note.

Big Mailchimp Mistake

So before we end this blog let me tell you about this one big mistake I made yesterday which caused me to accidently mail everyone that ever registered for Float Note to get an email. Before I set everything up correctly with Zapier I was on the wrong path. I get the data from the Webflow form but I selected the wrong campaign. So when I pressed the button to text the integration, it got the data from webflow but selected a campaign that sent my download link email to all current subscribers of Float Note. That’s messy! So everyone got an email yesterday with a download link, no context whatsoever. Really bad 😂. But honest mistake, you live you learn. I’m ‘glad’ it was only 200 people. And I see only two people unsubscribed. Stupid mistake, lesson learned.

Also I see a lot bounces, this has to do with DMARC I believe. I haven’t looked into it yet. But I will once I get my mail campaign game going. For now, we have more imortant stuff to attend to.

Thank you 🙏

Once again, thank you for reading if you came this far. I really appreciate the support I’m getting. It’s taking up a lot of time sometimes but it’s worth it. I’m still finding my way around building the perfect system for this. See you next time 🤙

About Me

About me: I’m an independent app developer with ADHD and the creator of Float Note, an app that tackles four common ADHD challenges: too many thoughts, trouble organizing, feeling overwhelmed, and staying focused.

Discount Code

It would mean a lot to me if you gave my app a try and let me know what you think through one of my socials. You can try it for free for 7 days and when the time comes, use code 🎫 “DEVLIFEOFBRIAN" to get 70% off your subscription for life. A gift for only a chosen few that read my blog 🙏. Also, if you really can’t pay for it, but you love the app. Send me a message and we’ll work something out.

Download

📲 Download it here or click the link in my bio (Android/iOS/web) ➡️ floatnote.com/download

A Day In My Dev Life

Pew Pew Prompts — Wed, 22 May 2024 22:23:04 +0000

Client Work, Float Note Features & A Lot Of Flutter Code

Each Tuesday I work in Eindhoven. I woke up at 4.30 and got myself in the train around 6. I slept around 3.5 hours this night, I know that’s not enough and sleep will probably catch up to me somewhere later in the day. But it is what it is. For now (7 am) I am feeling GOOD!! 😁 I’ve been testing the release and I’ve got a few things to fix.

☀️ New Day, New Bugs

Tasks are doing some weird stuff when you create a new task anywhere other than the inbox popup. I thought it was web related but I noticed it in the new release as well. I think it has to do with debouncer saving the tasks and then updating it because of the update. I spent some time on it but then I was in Eindhoven and I went to workout with a friend of mine. After which I went to one of my clients for a very cool assignment for today.

📝 App Features Inventarization

So a couple days ago I was asked to analyze a certain app and provide feedback in terms of UI/UX experience. For that same app today I was asked to inventorize the entire app in terms of features. We probably want to rebuild the app so a good overview of what the app can do now is where we start. I’m a big fan of Notion. I have most of my important documents in there terms of work and life, however when I started writing this blog I went looking for an app that made it easier to work with images and text. So I stumbled upon Bear. I’ve fallen in love with this application quickly (as I do with many things, or people 😂). I used to create the first feature inventory.

🚫 Flutter Code Bugfix: BlockDebouncer

After doing so my usual restlessness came out to play and I could not concentrate in the office anymore so I went outside. Before doing so I spoke to one of my colleagues and he told me he had some feedback regarding Floatnote.app. The onboarding felt a little slow to him, I agreed. It’s something I’ve noticed myself and head before from someone else. The text comes up like a typewriter, very cool but not very good UX. Especially for my target group, people with ADHD. So I took note of it in my app and put it on my daily todo list of things to fix for the next release. We might as well do it now right 😁.

But first things first, this bug has been eating me up. Floatnote.app is intended to be very fast and smooth when it comes to registering tasks. This bug messes up the whole user experience. The problem is that whenever you write something in the app, the sync will trigger and unwanted rebuild with old data, causing the stuff you just typed sometimes disappear or appear as a previous version of itself. It’s a bit of a race condition but very noticable. So I begon with creating a class that blocks any updates for a short period of time. A BlockDebouncer if you will.

We make sure we call this before any changes. The data is updated locally, so we don't need to sync at that time. After the debouncer finishes, it will allow syncs again to enable a smooth experience when you change something on another device.

block_debouncer.dart

Downside is I have to do this in all relevant places where I listen to updates and update tasks. Also not very maintainable because you are bound to forget this kind of thing when you create a view for exmaple that listens and updates. a better idea is to fix this at the source. I’ll improve this a little so the blocking is done at task source. This is how the class turned out:

import 'package:floatnote/features/core/util/debouncer.dart';

class BlockDebouncer {
  BlockDebouncer({
    required Duration duration,
  }) : _debouncer = Debouncer(duration: duration);

  // 📍 LOCATOR ------------------------------------------------------------------------------- \\
  // 🧩 DEPENDENCIES -------------------------------------------------------------------------- \\
  // 🎬 INIT & DISPOSE ------------------------------------------------------------------------ \\

  void dispose() => _debouncer.tryCancel();

  // 🎩 STATE --------------------------------------------------------------------------------- \\

  bool _canContinue = true;

  // 🛠 UTIL ---------------------------------------------------------------------------------- \\

  final Debouncer _debouncer;

  // 🧲 FETCHERS ------------------------------------------------------------------------------ \\

  bool get canContinue => _canContinue;

  // 🏗️ HELPERS ------------------------------------------------------------------------------- \\
  // 🪄 MUTATORS ------------------------------------------------------------------------------ \\

  void onChanged() {
    _canContinue = false;
    _debouncer.run(
      () {
        _canContinue = true;
      },
    );
  }
}

It will run every time a task changes, like this.

And then we block the update like this:

One thing to keep in mind if you’re going to use this yourself. If you’re blocking logic that’s also being debounced, then make sure that your block duration is longer than the logic duration otherwise it won’t work.

⏳ Feature Improvement: Float Note Durations

After Eindhoven I went to my favourite working spot and it started raining again. Such a shame it was very nice weather today. I’m not bothered easily, but when the sun disappears on such a nice day I’m a sad bwoi. Anyway, next up is adding a delete button to the duration sheet to quickly reset durations to 0 seconds. Another small improvement I’d like to add to this release.

Size Reporter Debugging

Adding clear button to the trailing part was an easy job, but that made the title not centered anymore. To offset this I also added the option to add extra padding to backbutton. Now in order for me quickly determine how much I need, I use my top secret widget extension I described in another article (here). The code looks like this while debugging the size:

And so the UI and logging gives me the right information like this:

So we need to add 24 padding + 16 for gap in between the two icons.

Improvement Madness

But now that I look at it, I think we can improve this sheet even a little more. It’s getting a little busy with all the icons, but I think it’ll be worth it if the use case is worth it. So I have logic ready to round the durations of your tasks in the tracking view. But I can also offer this per task in this sheet, right? That would be cool 😁.

Took a little longer than expected but I got the job done. The reason it took longer was because the current logic was also accounting for other tasks being around and using their DateTimes. After fixing it my battery almost died. It was almost dinner time so it’s kind of not done to sit inside with a laptop. I worked in restaurants for years, a laptop at the window looks very bad for the image.

Fortunately I found a good place, one restaurant had an upstairs with a big table and outlets. Very inviting for a workaholic and his laptop. Yes, I know my screen is dirty. We like to touch each other.

I opened my todo and wanted to quickly snooze some items. It was rather tedious to enter a date each time (pressing save to snooze until tomorrow) and it wasn't really fast either. Because I had to think if the date was right, move my hand to the save button and see if it worked. Too much effort! So, I convinced myself that if you want to update the snooze to a date beyond tomorrow, it doesn't matter if you have to go to the More menu because it's already an action that takes cognitive power and movements to get to the correct date. The extra click on the More button then doesn't matter that much compared to the total actions per outcome. But if you want to quickly snooze something, you just want it to go away quickly so you can move on to the next task and not have to think about it. That's my assumption right. I noticed that myself, so I changed that. Now if you press long, a task is quickly paused until tomorrow without the user having to enter anything else (I love it).

Around 21:00 it stopped raining so I decided to start moving home. Once I got home I finished most of the other todo’s and created a new build. I updated the changelog and then started testing the new features on web.

🏠 Home Sweet Home: Deeplinking Video

While being distracted I stumbled upon this video (No more broken links: Deeplinking success in Flutter) on LinkedIn. I have yet to look at it in more depth but it’s something I still need to implement in Floatnote.app. I used to do everything with dynamic links, but as you might know these will be discontinued in the near feature.

While testing web I noticed many bugs, especially the one I thought I fixed. I stayed up until 2, but didn’t manage to fix all of them. Don’t you hate it when that happens? I went to bed a very unsatisfied man.

🙏 Big Blogging Thanks

To end with a positive note. I’m so happy I started this journey of writing about my day. I’ve always liked documenting my journey in different ways but I feel like I finally found something I can maintain. I tried all kinds of strategies on Instagram, TikTok and YouTube but never kept to one, despite all the systems I tried building for it. I’d like to thank you, my dear reader. I don’t know if you come from LinkedIn, Reddit, Hashnode or somewhere else. But thank your for showing interest. The amount of views and reactions (and new users for my app!!🙏) I’m getting is really motivating. I like doing this and I’m very grateful you like reading about it.

See you tomorrow 🤙