My client-side only AI web application workflow
History / Edit / PDF / EPUB / BIB / 3 min read (~481 words)Over the past month I've started building client-side only AI web applications (e.g., ai-text-editor, a private ai-language-assistant to teach myself Chinese Mandarin).
I've gone with this approach because it lends itself very well to vibe coding with vibe-kanban.
I've configured the Dev Server Script
option to open the index.html
file in my browser and it works immediately, no need to build assets or start a backend server.
This speeds up iteration cycle considerably.
This approach is also great because it produces a tool that can then be used directly in the browser from any device, without needing to install anything.
I can run what I built on my phone, on my work computer, one someone else's computer easily by pointing them out to the project's GitHub Pages URL which serves the application and is "production" ready.
I haven't really picked any frontend libraries or frameworks, just vanilla HTML/CSS/JS.
That is something I need to explore (e.g., react, svelte, solid, tailwind, vue.js, etc.) but for now I want to keep things simple.
For the past few projects I've used Claude Code.
I ask Claude to create the common CLAUDE.md
.
Additionally, I ask Claude to maintain a SPEC.md
file that describes the features of the application.
In many cases the database relies on the browser's localStorage
API and IndexedDB to store data, which is sufficient for my needs.
I ask Claude to maintain a DATABASE_SPEC.md
file to describe the database schema.
Claude typically goes for a index.html
, app.js
, and styles.css
file structure.
While it is ok for the first few iterations of the project, I usually ask Claude to refactor the code to split it into multiple files and modules as the codebase grows.
Doing so speeds up some of the iteration process since it doesn't end up reading large irrelevant chunks of the file when making edits.
It also makes it easier to review changes since I use the files modified as an indication of whether it worked on the right part of the codebase.
The main downside of this approach is that generally the app.js
file ends up being quite large (e.g., 1000+ lines of code) since it contains all kind of global state and logic.
With this approach I've been able to fairly effectively work on small projects (~40 hours of work) and get something functional out the door that would have taken me weeks and where I'd probably have given up mid-project due to all kind of minor problems.
- Use an
importmap
and javascript modules - Imports
- llm.js to do LLM calls directly from the browser
<script type="importmap">
{
"imports": {
"llm.js": "https://esm.sh/@themaximalist/llm.js@1.0.1?target=node",
}
}
</script>
<script type="module" src="app.js"></script>
I recently moved to Windows 11.
I had created only a local account during creation but at some point I configured OneDrive to use my wife's account.
This resulted in her account being bound as the "primary" account of the computer.
This is not what I wanted.
I looked online for a solution but all the instructions I found didn't have the screen I had.
I initially tried a regedit fix but it didn't work.
Here is how I fixed it:
- Go to Settings > Accounts > Your info.
- This is the "weird part", click on "Sign in with a Microsoft account instead".
- Follow the instructions using a different account.
- The previous account will be "detached" from the computer and you will now be using a local account.
- If you go in Settings > Accounts > Email & accounts, you will see that the previous account is still listed under "Accounts used by other apps" but that you can now remove it (which you couldn't do previously).
Hope this helps!
In software development, understanding the difference between being effective and being efficient is crucial for delivering high-quality products.
Effectiveness is about doing the right things - choosing the correct features to implement, solving the right problems, and aligning development efforts with business goals. An effective developer ensures that their work has a meaningful impact and contributes to the project's success.
Efficiency, on the other hand, is about doing things right - optimizing code, reducing resource usage, and minimizing development time. Efficient developers focus on speed and resource management, ensuring that solutions are implemented with minimal waste.
Balancing effectiveness and efficiency leads to better outcomes. For example, writing highly optimized code for a feature that users don't need is efficient but not effective. Conversely, delivering valuable features slowly or with unnecessary complexity may be effective but not efficient.
In summary, successful software development requires both: building the right solutions (effectiveness) and building them well (efficiency).
I have a git
repository with 25k commits in it and 7k+ files.
Under Windows 11 using WSL, I noticed that git
operations were significantly slower compared to running them natively on Windows.
I have a script that I use to synchronize many branches that was taking forever to execute, but should have been relatively fast.
It also had trouble with line endings which caused issues when merging branches but reminded me of a setting I used to configure in my ~/.gitconfig
a very long time ago.
Given that git
configuration under Windows and WSL are separate, I had to update the ~/.gitconfig
file in my Linux environment with the following.
[core]
autocrlf = true
This immediately fixed my problem and git
was fast again.
When I started using WSL on Windows 11 I had slow network performance issues.
We're talking running speedtest-cli
and getting ~3 Mbps download speeds while my connection can reach 400 Mbps.
After searching online for a while and trying a variety of things I finally found a solution.
In %USERPROFILE%\.wslconfig
add the following:
[wsl2]
networkingMode=mirrored
With this fix applied I'm now getting ~400 Mbps download speeds in WSL, matching my native Windows performance.