Starting to get back into interactive stuff is nice.
Month: May 2021
MinimalComps2 v1.3.0
minimalcompsI’m super excited to announce the latest official build of MinimalComps2. I’ve put a lot of work into these. Been seriously obsessed over them to be honest.
That’s a live demo, not a screenshot, so have a play around. The source for that demo is here. It includes instances of all 22 components in the set.
As you can see there have been several new components added since last week. I’m quite happy with all of them but I won’t go into detail about them here. Better to check the demos and docs, API documentation and source code.
For each new component I’ve made recently, I’ve made sure that:
- They are fully documented. I’m using jsdoc for this at the moment. I’ll probably do a bit of work on the documentation theme, but overall, I’m happy with it. In fact, ALL components are fully documented now, not just the new ones.
- They are fully unit tested. I actually wrote my own unit test framework. Silly I know, but I wanted it to work the way I wanted it to work. Other testing frameworks I was trying were too bloated and complex. I had a lot of fun writing this one. It’s a minimal unit testing framework, which is appropriate. Unit test frameworks are actually super simple. I think people tend to overengineer them and make them do too much. They start to morph more into integration test frameworks than purely unit testing. All the new components are fully tested. In all, nine out of the twenty two components are tested, so there’s more to do there. But that’s close to 300 individual assertions. Doing this has uncovered a lot of little bugs, so it’s been 110% worth it.
- Each new component has a live demo on the main site showing how it is used.
There is more work to be done on these, but I think I’m done with creating new components. Everything I added in this release was on the early list of components I wanted to create. That list is now officially empty. I’m sure I’ll have an idea or two later on, but I’m satisfied that the library fulfills its needs at this point.
The work going forward is mostly on wrapping up the unit testing, improving some standards and best practices throughout the code. I don’t feel like the code is too horrible, but there are places where I do one thing one way and a similar thing in a different way somewhere else. So getting some more consistency in there would be good. Raking the documentation over the coals too. Some of that was copied and pasted and I’m sure there are some minor errors here and there. And finally, doing more demos as examples of how to use different components.
I really hope people find these useful and hope to see some examples in the wild. If you use them, shoot me a link and I’ll share it around.
If you do find them useful and want to support the work in some way… buy me a beer/coffee/new car.
MinimalComps2
minimalcompsBack in 2008, when Flash was still a thing, I created a set of UI controls called MinimalComps. A basic history of Flash UI controls starts with the ones that were included with Flash called “UIComponents” and later updated to “V2 Components”. Although most of the rest of the user interface world calls these things controls or ui elements or widgets, in Flash the name “components” caught on and stuck.
A lot of people created custom component sets. In 2004 I created a full featured set called “BitComponents” which I sold to a company called BeamJive. I always enjoyed making custom components, usually one off for specific needs, but in 2008, I set to work creating MinimalComps.
The idea behind MinimalComps was that they should be simple to create and use. Lots of people were doing Flash experiments and creating quick one-off apps and prototypes and proof-of-concept projects. Most existing component sets had all kinds of complicated styling and layout and data binding features which made them powerful, but gave them a bit of a learning curve. I wanted something where you could throw together a quick user interface without thinking much about it. One of the goals was to be able to create and configure most of the components in a single line of code. If you look at, say, a range slider type of component from that time, setting it up would go something like this:
var slider = new Slider();
slider.move(20, 20);
slider.value = 50;
slider.min = 0;
slider max = 100;
someParent.addChild(slider);
slider.addEventListener("change", someChangeHandler);
Up to seven lines of code to create a single slider. Some apps might have a dozen sliders. You’re getting up close to 100 lines of code just to create the sliders!
MinimalComps looked more like this:
var slider = new Slider(parent, 20, 20, 50, 0, 100, someChangeHandler);
With a signature something like:
new Slider(parent, x, y, value, min, max, handler);
I know that’s a lot of parameters, but when you’re making a lot of them, it become second nature and in the long run, 12 lines of code is better than 84 lines of code that does the same thing.
Here’s what they looked like, by the way:
And that’s all they really looked like. I did later add a dark theme, but beyond that there was no theming, styling, not a whole lot of customization possible. In spite of those limitations, they became wildly popular in the Flash community. I think the height of it all was this Adidas ad/video that featured MinimalComps.
“Featured” is a stretch, but they did appear for maybe two seconds total. 🙂
Anyway, getting carried away with nostalgia. It was a good time. And then Flash died. Everyone moved to Processing or Unity3D or WebGL or, like me, just straight up JavaScript and Canvas.
I made multiple attempts to port MinimalComps to HTML, both via Canvas and HTML/CSS/JavaScript. But back in 2011, things were pretty rough in terms of the state of all of those technologies. It was just kind of painful and I gave up each time.
Jump to 2021 and things have changed. JavaScript has classes and all kinds of other very neat features. HTML has Web Components (there’s that word again) and the Shadow DOM, and CSS is … well, CSS is still CSS, but it’s probably improved somewhat. Long story short, it’s actually possible to build some pretty cool stuff now. Like MinimalComps2.
So here they are
Yeah, so MinimalComps2 is a thing now. I’ve been obsessed with it for the last several weeks. The Web Components / Shadow DOM technology has made this a lot easier. The goal was always to be able to just add a single library to your app and have all the components there. Not add multiple libraries plus CSS files, configure some kind of bundler, rely on some specific framework, etc. You can just throw the library in a script tag in your HTML file, or access it as a JS Module.
No complex layout system. Just give each component an x, y coordinate. Generally, you’ll first create a Panel component that serves as the parent and visually contains the rest of the UI, but it’s not required.
Oh, and here’s what they look like:
As you can see, I tried to stick to the original aesthetic (or lack thereof maybe). I did make some elements a bit larger (because of my eyes not being what they were 13 years ago?) but they can be made smaller if you’re into the whole barely visible thing.
Most of these components are brand new and 100% custom. Which is to say that the Button component is not a styled HTML button. Checkboxes, RadioButtons, Sliders, Dropdown, NumericStepper and ColorChooser are also built from the ground up. Why? Have you ever tried to do a custom style for a checkbox, radio button or range slider? And make it work on all platforms and browsers? It’s a CSS nightmare. I’m not saying it was easy to create these things from scratch rather than relying on existing elements, but it was a lot more fun and a lot less frustrating. And I could customize them in ways that would not really be possible across all platforms. For example, Firefox does not even support vertical range sliders. You have to hack it together with CSS rotation transforms. Same for reverse sliders where the max value is on the left or bottom and min is on the top or right. Not supported at all in HTML. Was very straightforward in a custom slider.
I was even able to implement focus indicators, tab navigation and keyboard activation for all the interactive components. I’m not saying they are fully accessible, but there is some progress there. They also work on the mobile browsers I’ve tried. It’s not a great experience on mobile to be honest, but basic functionality seems to be there.
More info
If you want to learn more about MinimalComps2, read the docs, see a bunch of live demos, head over to the minimalcomps2.com site!
And if you want to get the libraries themselves (one for global/script tag, one for JS modules) head over to the github repo: https://github.com/bit101/minimalcomps2
I’ll have more info here as things evolve. Hoping to get some small fraction of the excitement over these that the original version had!