Jack Sleight

Force Alpine component re-initialisation on hot reload In a previous post I outlined a method for hot reloading Statamic's live preview using Alpine's Morph plugin. It works, but there's an issue: Alpine components on the page don't re-initialise when the...

jacksleight.dev/posts/force-...

Statamic 6 is here! 🚀

A redesigned Control Panel, a modern Vue 3 + Inertia foundation, a new UI component library, a long list of architectural & performance improvements, and that's just scratching the surface.

This is a new beginning, ready for what comes next. ❤️

According to Google (AI) they have the same logical widths of 375 px. But maybe there are other factors.

Anyway it’s not a major issue at all, especially as it’s so close to the end.

Awesome post, incredibly well done as always. 💯

I know I’m in the minority with an iPhone Mini but I noticed a little issue on the smaller screen. The text in this demo wraps, causing height changes that make the rest of the article below jump up and down a bit.

Oh thought of another:

Ability to pass dynamic vars from the template to the layout (basically the feature from your Antlers Layouts addon, but built in).

I would LOVE more control over partial scopes and param parsing. eg:

- Ability to prevent partials leaking vars into parent scope.
- Ability to prevent partials inheriting parent scope.
- Some kind of spread syntax to pass a bunch of specific params to a partial in one go.

If that’s what you mean?

debug-root-margin.js GitHub Gist: instantly share code, notes, and snippets.

Ever struggled to debug an intersection observer's root margin? I know I have! So I wrote a little helper that plonks a big red box over the observer's intersection area: gist.github.com/jacksleight/...

Year progress: 75%
Website progress: ehhh… 35%?

Thanks! Yeah exactly, and it’s my go-to JS framework, so figured it would be useful to have Alpine versions of the techniques for future reference.

Thoroughly enjoying @joshwcomeau.com 's Whimsical Animations course! And because I wanted extra work for some reason I’m also doing alpinejs.dev versions of all the exercises.

Agreed! No clue whatsoever.

Woop! 🙌 Love the new branding.

Have a great time!

Totally, Boost is too much.

Oh, you’re suggesting Quad (four snack size in one sitting)? Excellent idea! 🍫🍫🍫🍫

Also, forget snack size, see if you can find a duo.

My #1 favourite chocolate bar. Literally bought one an hour ago. 👍👍

Got that universal single-file Blade/Livewire component experiment working pretty nicely now. Here's the repo if anyone's interested: github.com/jacksleight/...

Now working without the trait and with renderless actions. I do love Livewire!

Computed Livewire properties aren't available client-side, but sometimes they'd be really useful. So I built a little utility to make that possible.

Under the hood this is just dispatching an event with the data on each update. You can of course do that yourself, but I like the simplicity of this.

I’m so glad I found your account, your own posts and the things you share are always so interesting!

Thanks for all the good reads. 🙂👍

A way to either override the PHP that component tags are compiled to or implement custom component tags without duplicating all that regex would be ace.

Within the templates I’m using a prepare strings callback to split out the various parts (using regex) maybe the parser could handle some of that?

I’ve been chipping away at this recently:
bsky.app/profile/jack...
bsky.app/profile/jack...

Still pretty rough and kinda hacky but it’s functional. A more official/robust way to do it would be ace. Would love your thoughts on it.

Of course! 💯

Unified component experiment continues. Blade components now use an inline class for props, so the syntax can be identical to Livewire. Now upgrading a Blade component to Livewire is as simple as switching “BladeComponent” for “LivewireComponent” and adding the Livewire things.

Tagged @statamic.bsky.social Bard Texstyle v3.5. Includes a handful of small but hopefully useful features:

✳️ Heading styles that can apply to any level
🫥 Ability to hide parts of text content
🎨 CP CSS for specific attribute values
☑️ A couple of other little extras

statamic.com/addons/jacks...

Finally (ish) is wildcard heading styles, so you can have a single heading style that can be applied to multiple heading levels.

Next up is custom control panel CSS for individual attribute values.

Working on some new features for Bard Texstyle 3.5. First one is the ability to hide parts of text content, useful if you need to temporarily remove something. Hidden content is completely excluded from the rendered HTML.

So you're saying my code is perfect? That's what you're saying? Great!