Blog

3 January 2022

Thank you for the encouragement over the past year!

The new release introduces the observe event and the handy fading commands. I'd been putting off making those, as I'm a firm believer in using CSS for transitions. But on numerous occasions I just wanted there to be a command there which I could just simply use to fade in and fade out elements, without mucking about with classes. So I thought I'd make them anyway. The performance is fine, it turns out, and they have actually been handy.

The observe event came about through a discussion on GitHub with dragontheory (https://github.com/Active-CSS/active-css/discussions/186). He came up with the idea, and I converted into in a syntax that would work with CSS. It's an amazing new paradigm and worthy of an article all by itself. Time will show what amazing things can be done with it. Just don't overuse it if there's a simpler method, as it's heavier on performance in comparison to regular events. There were performance considerations that I had on this one, but I think it's good to ignore those thoughts sometimes. If devs need it, they are only going to find a way to write it themselves anyway. Performance is a problem for the language developer to solve, not the user. And if you don't implement great new ideas, you don't get progress. So keep bringing them on!

I found that special selectors were not working consistently in the core, so I consolidated and rewrote the selector handling in the core. So that should be more consistent. I speeded up the event flow to compensate for the increased selector power, so you shouldn't notice anything detrimental in that area. In fact, it may even be a bit quicker now.

Don't forget that there is a special < selector in ACSS that you can use to get the closest parent element that matches. Like if you are doing an event on a sub-element in an li tag, you can use "& < li" as a target selector to attack the li tag itself. That can be handy. You should also now be able to use more complex selectors like "& < container #myIframe -> container h1". That wasn't working correctly before. It's not really mentioned in the docs, but it can get you out of complexity if you can remember that the closest selector operator ("<") is there. Again, there are performance implications, but these are isolated to the use of the selector itself and it doesn't affect performance anywhere else.

Another handy one is you can now reference attributes in custom elements that you trigger. The attributes from the calling event should now be available in the triggered event. It will look for the attribute in the target selector first, and if not found it will look in the event selector.

These are niche fixes, and you probably won't run into these unless you are really using the features of ACSS.

None of the changes in 2.9.0 should break backwards compatibility. The core should now be in line more with the docs.

As ever, please let me know of any bug fixes. I always get them fixed, but I don't always know they are there unless someone points them out. There are tests, and I also do a lot of manual tests. But these tests only test what they actually test. I don't have a big team of testers - the only person who has ever helped me on this and reported bugs has been dragontheory, who has been an amazing help. So if you are reading this and want to help, then help would be greatly appreciated in the area of testing.

By the end of 2022, I think the core should be stable enough for converting into version 0.9.0 of Action CSS and telling the broader world about it. There's a number of things I want to improve before then though. Hopefully I would have gotten back on the extension by that point too. I've been putting it off as there have been too many other things to add. But the extension is a really amazing debug tool for new developers, so fingers crossed I can get back onto that.

Ok chaps - have a great new year! And remember, you don't need anyone's approval to demonstrate awesomeness!

All the best,
Rob.