Escape the box with Houdini
- In early March this year, when the impact of COVID-19 really dawned on us and we realised we'd not be meeting in person for some time to come, like so many other conferences, we immediately started investigating how we could move what we did online.
We already decided we weren't simply going to go into survival mode.
Online was going to be a significant, if not the sole way we delivered these events for some time to come.
So while it was a very stressful time, it was also quite exciting to imagine from scratch, what our conferences might look like online. Our first step was to look at the existing platforms for hosting online events and we looked at plenty of them but none we felt really would help us deliver the kind of event we had in mind.
So that meant we were going to have to build our own solution.
We had a couple of advantages over most event organisations, we've been developing for the web for many years and we really understood it.
And already, we'd been working on Confab, a platform for conference videos, for quite some time. Now, to be clear, "we" here means just a couple of people, our main developer May and me and we won't mention how I fell and broke a rib, pro tip, don't break a rib and go to ER during a global pandemic and the impact that had on our already constrained time and resources. So we needed to focus on developing a great online conference experience and not on all those other things, building, integrating, deploying, that developing for the web means these days. And expecting hundreds or more people simultaneously tuning in, when your solid CDN was vital.
Again something that we didn't want to have to devote our time and effort to.
Now, when you're a little bit about Platform.sh who'd exhibited at this very conference a few years back and their mission is to enable organisations to focus 100% of their time on building amazing experiences and zero time managing infrastructure, which sounded literally like exactly what we needed. And we made it this far, in no small part, thanks to Platform.sh.
I could go on about how they support dozens of the most common languages, frameworks and databases, from PHP to Node.js, to Drupal, WordPress, Gatsby, Rails and many more out of the box, how they take care of upgrading and the security of the languages, databases and frameworks that you use, how they have data centres all over the world, including right here in Australia and how they support AWS, Azure, Google Cloud and other major cloud hosting providers.
But you should simply check them out for yourself and talk to the people from Platform.sh here, to see if what they offer is right for your needs. And lastly, I just wanna extend a huge thanks to Platform.sh for helping us get this far and to be delivering this event to you.
Welcome back, in this bracket, we'll hear about how you can extend the capabilities of CSS with a set of APIs collectively known as Houdini and we'll learn why they're actually called that. Plus we'll learn how all those delightful animations on the web ,maybe presenting an accessibility challenge for some of our users and what we can do to lessen the impact on them. Sometimes don't you wish you could write your own CSS, not the rules, but actually the language.
What if you can add your own features? Well, did you know you can, and our next speaker, Ruth John, who's a creative developer based in Bath, is gonna tell us all about it.
It's called Houdini and it's a way in which you can create your own features of CSS.
It sounds too good to be true? Well let's find out.
Please welcome to hear all about it, Ruth John.
CSS is a powerful technology for styling web content, with one significant drawback (no not specificity). We’re restricted to the styling primitives built into the language (and browser), which relies on others to specify and implement them, and can take years.
Well, until now. Enter Houdini.
Houdini is a set of lower level APIs that allow us to essentially create our own visual style, layout, and animation properties for CSS. Sounds like magic? That’s why it’s called Houdini.
In this presentation creative developer Ruth John will show us how the illusion is created.
Escape the box with Houdini
Ruth John, Creative Developer
Note Ruth will tweet the resources – follow @rumyra
Ruth wrote documentation about CSS Houdini for MDN docs and this intro to Houdini comes from that experience.
Houdini is a suite of APIs to help developers have better to access to CSS through JavaScript. They are designed to solve the problem of features being unavailable for quite a long time.
What’s under the Houdini banner?
- Typed OM
- CSS Pain API
- Properties & Values
- Layout API
- Animation Worklet
Ruth will be focusing on the first three partly due to time constraints, but also as they are closer to workable browser support.
Typed OM underpins a lot of the other APIs. It’s access to CSS values as types in JavaScript. A quick syntax refresh to set the scene:
button {
border-width-top: 4px;
}
buttonis the selectorborder-width-topis the property4pxis the value
Typed OM gives access to the value, the 4px.
To access CSS values at the moment we need to use fairly cumbersom syntax including getComputedStyle which returns values as a string. So then you have to process the string to work out the value separately from the unit and so on. Then we have to put it all back together again to set the new style as a string.
Wouldn’t it be better if we could get style as an object splitting the value and unit? element.computedStyleMap().get('property') lets you do that. So you get { value: 4, unit: "px"} instead of a string. Then you can manipulate and set the value as a number instead of a string.
Value types include…
CSSStyleValue– not used by itself much, it is the subclass behind the othersCSSNumericValueCSSUnitValueCSSMathSum– if you use calc/min/etc it will come back as a CSSMathSumCSSTransformValue– rotations, skews, etcCSSKeywordValue– values that are unquoted words like autoCSSUnparsedValue– unknowable values like custom propertiesCSSImageValue– a loose type as there are so many kinds of images
…and there are more to come. The idea is to have a different type for every value we have in CSS.
So how can we create one of these values?
new CSSUnitValue(10, px)
or
CSS.px(10)
Both create { value: 10, unit: "px" }
attributeStyleMap methods:
element.attributeStyleMap().set('border-top-width’, CSS.px(10))
element.attributeStyleMap().has('border-top-width’)
element.attributeStyleMap().delete('border-top-width’)
element.attributeStyleMap().clear()
element.attributeStyleMap().get('border-top-width’)
There are also numeric methods for working on numeric types. You can add, subtract and find values; you can convert them using to; and test with equals.
So that’s Typed OM and it may seem like quite a lot when we can already manipulate style with JS, but it underpins everything else.
Properties & Values – we’ve probably all seen CSS variables by now; and we can use setProperty to manipulate them from JS.
This also means we can use JS to do things like generate our own custom gradient, then make it available using CSS.registerProperty – this is linked back to the type set in Typed OM.
Workers are JS scripts that run off the main thread – ie. in the background. It communicates with the main thread using messages.
Worklets are the same, but with a predefined class and access to predefined properties specified in its API.
This set us up to understand the CSS Paint API, which lets us register a paint worklet wherever we might want to use an image in our CSS. We already have that; but a worklet opens up opportunities to handle things like resizing images.
It works like this:
.slide {
background-image: paint(dots)
}
CSS.paintWorklet.addModule('dots.js’)
Inside dots.js you can then write code to create the image with HTML5 canvas.
To finish up, a quick look at Layout and Animation – they basically work the same way as Paint but letting you manipulate layout and animation. The key concept is that you can access worklets in your CSS; and those worklets have access to the element.
Please check these things out and give feedback to the W3C about what you want to see in them.
