Patterns
I started working with Patterns a few years ago and for some reason I abandoned the user interface for where you can preview the patterns. I did not know the reason for it.
Component kit
Not that long ago I started to build Kirby Component Kit. It’s inspired by Patterns and has a UI (user interface) as well. I think the UI is even better than Patterns, but still, I stopped using the UI.
Summery: In both cases I stopped using the UI for the patterns/components. I still love the way to bundle things as components. I’ve also read stories from other people also abandoned the UI part in similar tools.
Why it continues to fail
I have a few ideas why I think the UI part fails.
We need to go to the tool first
To do something at all you need to leave the site and go to the tool first. It’s not much work but it needs to be done.
You need a configuration file for the preview
In most cases you need to setup this preview file with some custom data that should populate the preview. That can feel like double work, change the data in two places.
Iframes are harder to inpect
In both tools you preview the component in an iframe to keep the navigation around. You can also view the raw pattern but it’s an extra click and it results in going back and forth a lot. Not very super smooth.
You don’t see what you get
The components will show what they are supposed to show, but it may still be different in the real site with real scenarios. The tool is kind of an emulator for the real thing. So why use an emulator when it’s easier to see and inspect the real site directly?
How it can be fixed
We go back to basics and remove the UI completely and just browse the site.
Do I miss anything? Yes, I miss the possibility to inspect a single component. I don’t want to go to a tool where I can find my component. I want to find my component even faster than that so here is what I did.
Shortcut key to open menu
On any page I can now press ALT+ C as in “component” which will open a menu, right on the site. I never need to leave the current page. If I change my mind I can click the backdrop or ALT + C again to toggle (see image down the page).
HTML, CSS and JS
To make the shortcut and the menu work I need to inject a snippet that contains HTML, CSS and JS. It’s only injected if I’m logged in or on a localhost environment.
Even works inside the components
The shortcut menu also works inside the component. It means that from one component I can go to another one really fast.
Brower inspector works better
Now the browser inspector works better because we don’t have an iframe. When we look at the component, the component is all we see.
In my quick test it looks like this:
Preview options file
About the double work with having a preview file. In my test my options.php file looks like this:
return [
'page' => page('about'),
'values' => [
'hello' => 'world'
],
];
It will load the values from the controller of the page about with additional values. But you don’t need a preview options file at all. If no file is used, the values from the controller of the page home will be used.
Future
My idea of this is to improve it so that everyone can use it in a very simple way. I will go with a MIT license this time.
What do you think? Do you agree or not? What’s your own experience?
