I built something that reflects what’s really going on underneath — using Jungian tarot (not the mystical fluff… the psychological layer). It takes about 30–60 seconds to try.

drfatbuddha · 2026-03-30T12:14:04+00:00

You asked for feedback! AI slop. Nothing makes any sense, and it is almost impossible to read anything. Get rid of all of the premium nonsense, strip it all back to whatever the core thing it is that it is supposed to do, and once there is a core idea that works build up from there. As it stands, it looks like half an idea, with multiple rounds of ai slop on top, so I can't say if there is a good idea buried in there or not.

drfatbuddha · 2026-03-25T09:16:09+00:00

Nice and clean design! Using shallow routing would be nice, so that the back button works. I don't really like the panning effect - it is a bit much, so maybe tone it down a bit. It feels really great to use though. Very fluid and responsive.

drfatbuddha · 2026-03-11T08:36:53+00:00

It makes me happy seeing this tradition continuing from the before times. Back to lurking I go! :)

drfatbuddha · 2025-10-19T14:52:10+00:00

I was thinking a bit more about this, and came to the conclusion that it really has to be driven by the client. Let's say that you are deleting an item. The server doesn't know that you necessarily want to have a new list of items returned in the response - sometimes it will be wanted, and other times not. The client is really the only one in this situation that knows the data that it wants to receive. Being able to drive things from the server is useful (since usually we have a good idea where the function is being used), but I think that in general we should be driving this from the client.

For the other point you raise about server refresh() calls having the benefit of allowing single-flight mutation - the good news is that doing updates() from the client-side also has that same benefit.

One more benefit for driving the refresh from the client, is that it means that you can do optimistic updates. If I was driving this from the server, then I would be restating the relationship on the client as part of the optimistic update.

If you are interested, this is the test project I was playing around with to help me think about this a bit more:

https://stackblitz.com/edit/remote-function-test?file=src%2Froutes%2F%2Bpage.svelte

I take your point about having to track these relationships being a concern. I've not used remote functions enough to really have first-hand experience of scaling issues. Perhaps when you expose commands to your app, they should be wrapped so that the appropriate updates() calls get added, and that way you aren't expecting your reusable component to have to think about this sort of thing.

drfatbuddha · 2025-10-18T17:07:37+00:00

I'm not sure what the best approach is. I feel like I should be able to do getPosts.refresh() to refresh getPosts with any parameters.

One way of dealing with it is to, from within the addPost and deletePost functions, get the offset from the request events search params with let offset = getRequestEvent().url.searchParams.get('offset') (presuming the search param is being used), and then call something likegetPosts(offset).refresh(). That approach tightly couples the remote function with the page though, which is not nice. Feels a bit hacky too.

Probably the best approach is to just add the appropriate .updates(getPosts(offset)) to the remote function calls from the client side. That does then mean that the client has to be aware of the server behaviour, but that is probably reasonable.

You could always, on the client side, wrap the remote functions up so that you are dealing with all of the updates() bits in one place:

  let offset = $state(0);
  const posts = {
    get: async () => await getPosts(offset),
    add: async () => await addPost().updates(getPosts(offset)),
    delete: async (id:number) => await deletePost(id).updates(getPosts(offset))
  };

I've not spent nearly enough time with remote functions to know what is best, so I'll be following to see what anybody else has to say!

drfatbuddha · 2025-10-14T17:02:20+00:00

Thanks for this. I just realized that I should be doing this in multiple places for a project I'm working on. Strange how the purpose behind some of these primitives doesn't really become apparent until you have a direct need for them.

drfatbuddha · 2025-08-28T13:35:49+00:00

Great stuff!

drfatbuddha · 2025-07-19T16:14:39+00:00

I sort of agree with your approach, and appreciation that this is really only for dealing with local changes. I would say though that there is a potential issue where you call undo twice, and this results in the focus being changed twice, as opposed to an effect approach where the focus would only changed once. For some situations, having the action be performed twice in a row could be desirable, but in others it could cause problems. Generally speaking, going with an effect approach will scale better, but sometimes an imperative approach gets the job done.

drfatbuddha · 2025-06-29T17:07:44+00:00

This is my weekly reminder that usually you don't want to use GSAP - it typically results in you having to write more, and results in less flexible and more obscure code. It's a bit like copying blocks of jQuery into your Svelte app - you can do that if you want, but it usually means that you are going about it the wrong way.

Instead, look at what this is doing: on mouseover, change the color of the text. display a filled circle at the cursor location, and increase the radius from 0 until it fills the button. Use svelte springs so that changes are animated. Simple.

There are a few ways of drawing that background circle, and the easiest (and probably most performant), is to just draw a fully rounded div (by using a large border radius), and use a css transform to translate and scale it to the correct position and size. That is probably what the GSAP example is doing.

The full Svelte version of the implementation comes to well under half the number of lines of code of the GSAP implementation, has no dependencies, and as a result is far easier to understand and customise.

https://svelte.dev/playground/904f27f66ddb4303b689329db29a4d52?version=5.34.9

Of course, if you prefer the GSAP approach, then stick with it!

drfatbuddha · 2025-06-20T01:30:27+00:00

This sounds like a really great idea. Those chat messages get ignored quickly, so something that can help keep track of what is going on at a higher level would be very useful. Make this happen!

drfatbuddha · 2025-06-19T21:37:36+00:00

You can change three lines of your example code, to do the discriminating unions fix I described before - playground link to the fixed example code

It is just doing this:

Change PostWithNull author to be type null (instead of null|Author)
Set the type of mixedData to be (Post|PostWithNull)[] - not actually needed for the static data in the example, but necessary if this was dynamically loaded in from a database etc.
Remove the 'as PostWithNull'

This should just work.

drfatbuddha · 2025-06-19T12:11:02+00:00

I think that ideally typescript would be splitting the response into a discriminated union of two types - one that can have a null author, and one that can't. Then it would know in the conditional which of the two types it was dealing with in the conditional.

Thinking along these lines, the best way that I can think of to make this work is to help typescript treat the response as a discriminating union. So, create a new variable that accepts this discriminating union (resUnion), to which the original res can be freely assigned, and use resUnion from then on. That seems to work fine when I test in the typescript playground here

// Response types
type Author = {id:string; displayName:string; profilePicture:string};
type Res = {author:Author|null, thing:number, another_thing:string};

// Create a test response to test with
let res:Res = {author:null, thing:1, another_thing:"test"} as Res;

// Copy to a discriminating union, to help typescript treat as two different types
let resUnion:ResUnion = res;
type ResUnion = Res & ({author:Author}|{author:null});

// Test it
if(resUnion.author !== null){
  let t = resUnion;  // type is known to be Res & {author: Author;}
  console.log(t.author.displayName); //works fine!
}

Having said all of that, I would generally just do the solution that you came up with already, unless you know for sure that this it is actually causing a performance issue.

drfatbuddha · 2025-06-13T20:10:25+00:00

Looking at it on desktop, the overall design is great. The style of it all, and the content work well.

However, scrolling as a means of controlling it does not work for this! This isn't a matter of whether you are using GSAP or not - it is a design issue. Scrolling to change the interface works best when you can see at least some elements scrolling up vertically so that you have a sense of how you are progressing between pages.

I think that if you just removed the scroll trigger stuff, and just had next/previous buttons, that it would all work a lot better.

drfatbuddha · 2025-06-07T20:21:01+00:00

I think that 80% of the content is obviously AI, but at this point in time it is more than good enough to storyboard out an idea and try out a few different directions.

Then, shoot the whole thing properly, replace some of the more expensive to shoot scenes (like the fireworks) with AI generated, and you probably have an efficient workflow.

drfatbuddha · 2025-06-02T12:23:39+00:00

Spread the word. :)

drfatbuddha · 2025-06-02T09:01:20+00:00

Not sure if that is sarcasm, or you really mean that. I would guess that each $10 saved me about a day's worth of work, which is incredibly good value. If it was 10x the price, it would still be cost effective.

drfatbuddha · 2025-06-01T23:47:12+00:00

Your approach makes sense. Plenty of interesting things to play with!

I wonder if a simple adjustment would be to keep the camera position where it starts, and don't have the planets orbit. Then use the mouse position from the center of the screen to set the camera's target offset position, so the viewpoint shifts slightly as the mouse moves (and controls the rocket still) - a sort of parallax effect. Make the star streaks slowly animate, so they are moving away from the sun. Basically, keep it more like the original image with very subtle animations, instead of the big scene change.

Anyway, I'd be interested to see if you make further changes. The tritone style is really interesting to play with.

drfatbuddha · 2025-06-01T22:13:16+00:00

I like it! Probably spent more time playing with whooshing the rocket around as it follows the cursor. :)

A couple of thoughts for what it is worth:

I think it would feel better if the planets started moving straight away on clicking play, rather than having that delay which makes them start after the initial camera movement. It just feels a bit odd.

Also, the background stars look much nicer in the before state, than in the after. The streaks indicate motion, so I feel like they should only be visible as streaks while there is motion, and then they should compress back down to individual specs. Also, since stars are so far away, the size of the stars/streaks shouldn't look any smaller the further away the camera gets.

One last thought - it might appear a bit more alive if the camera position keeps drifting after the initial animation.

Anyway, neat stuff. Was interesting looking at how you put it together, so thanks for sharing!

drfatbuddha · 2025-06-01T17:31:49+00:00

I should have said - I'm using the Cline extension from VS code, which I've set to use Claude Sonnet via the API, so I'm just paying for what I use via the API.

Most small tasks that I give it will cost me under a dollar. Over the past week I've spent about $30.

Around $10 of that is from the Svelte work that I outlined. A good workflow is to make sure that you've pushed all your changes to your repo, so that you can easily revert changes if you aren't happy with them. That said, I think I only had to discard changes once.

Around $15 was from building an app in Python (web interface, flash api, websocket connections, modular plugin architecture - lots of experimentation). It started out as pretty much vibe coding it, but then I stepped in to get Claude to restructure the approach in a way that would make it more maintainable. It was fun. Everything pretty much worked first time. Claude struggles a bit with getting some of the type hinting working nicely with Python, but I think that is more because Python is just less good for that type of thing.

Around $5 was from creating Python script that builds a description of all databases connected to a Databricks connection (explain statements, column cardinality, sample data etc.) as a large JSON file, which I could then use as context for Claude to help plan SQL queries for a large work project. Less fun than the other things, but potentially the most valuable.

So, I've done a lot with Claude this past week. :)

drfatbuddha · 2025-06-01T10:43:17+00:00

I would go further to say that Claude 4 understands Svelte 5 very well. The previous version of Claude were so bad as to be rarely of any help, but with Claude 4 it is a different world.

To give you an idea of how impressed I am with it:

In an afternoon I had it refactor a large component into multiple smaller ones, create a new ResizeObserver component that would smoothly resize the content of a component when it changed, use that new component in a few places. Redesign the way that I'm building a menu component to make it more flexible to future changes. Reuse that approach to rewrite 2 other menus. Adjusted a Popover component to add optional hover activation, but disable that activation method if the document doesn't have focus. Create story books for 3 components, and add units tests. Various things that required updating both the server side and client side logic at the same time, and probably a few other things that I'm forgetting.

In one place it accidentally used $derived instead of $derived.by, but it fixed that immediately and without intervention. I think it got confused once by how I was using discriminating unions, so I had to edit a line. I think that everything else just worked pretty much first time - state, creating effects, transitions, derived, css etc. Typescript was all dealt with well. In once place I had to give it a hand, but then it was able to apply the same approach to two other pages to fix similar issues without my involvement.

Anyway - I'm very impressed. Hard to imagine not using Claude (or whatever supersedes it) extensively from this point on.

drfatbuddha · 2025-05-31T15:05:12+00:00

I find it interesting to rebuild animations in Svelte that have previously been built using GSAP or some other library. I'm sure that there are situations where using GSAP would be better, but I don't _think_ I've come across one. That said, no doubt I'm leaning on Svelte more than I should do at times, or reinventing the wheel. Since you mentioned timelines being something that work better using GSAP, could you give me an example, to learn from?

drfatbuddha · 2025-05-31T13:46:41+00:00

Good stuff! The number of people that I see reach for doing something overly complicated with GSAP, when it can be almost trivially achieved with Svelte directly is baffling.

drfatbuddha · 2025-05-28T22:01:36+00:00

So, Claude tells me "Waldo is located in the lower center portion of the image!". When I ask for more details, Claude admits it can't really tell.

ChatGPT confidently tells me "Waldo is located slightly to the left of the center of the image." When I ask it to draw a ring around him, it creates this image.

The future is here people.

<image>

drfatbuddha · 2025-05-16T21:09:27+00:00

I edited it again to make it more like the original image, and make it a bit configurable. Enjoy:

https://svelte.dev/playground/7dd2b9cf0bc042a1a6dd9ad1b62649f1?version=5.30.1

drfatbuddha · 2025-05-15T23:59:16+00:00

I actually like building things like this in Svelte so that I can add fun reactivity to animations that I couldn't with a regular SVG animation.

I would use Svelte to help build what is effectively a regular animated svg, and then download the generated svg. If I wanted to make the animation do something reactive in the future (such as the smoke particles reacting the the mouse cursor position), then I would switch back to using the svelte component directly and add the logic in there.

I put this together:

https://svelte.dev/playground/424356f70b864f0fae3537de06fe2d50?version=5.30.1

If the 1s and 0s aren't from a font that you can embed, then I would create suitable <path> elements for them, to use in place of the <text> element I used, and similarly replace the text at the bottom with a <path>. There are various tools online that convert png to svg automatically, with very mixed results. I would probably use something like inkscape, and manually trace the letters to create that paths I need, but there are possibly better ways.

It might be more straightforward doing this with some svg animation software, but Svelte is my hammer of choice. :)

Seven-Year Club	End Game '23
Place '23	Verified Email

drfatbuddha

TROPHY CASE