 Okay, so yeah, my name's Chris, like Nathan said. Surrock Online pretty much everywhere. And as he mentioned, I work at Adapar. We're working hard to prevent the next financial meltdown by making the world of financial data more open and transparent. So if that sounds interesting to you, we are hiring in fact. So ping me on Slack or send me an email. So positioning things in the DOM is hard. Specifically things that are positioned relative to other things, like tooltips, pop-ups, modals. Just the other week at Adapar we had this issue where a dropdown, as you can see, was clipped by its container element. Maybe you've run into something like this before in your career. The dropdown is positioned using position absolute. And normally this works great. It looks like it hovers below the select menu. But in this specific case, there is an parent element with overflow hidden. So we can't see our dropdown and we look like bad developers. Another thing that is hard is animating things in the DOM. And until LiquidFire, we really didn't even have a good story for that in Ember. Now with LiquidFire we do for most things, but specifically for modals, it's still pretty hard and there isn't really a great path to doing that. So it goes without saying that positioning things and animating them is really hard. And I came up against this problem a while back and I found a great library called tether.js and it's wrapper Ember tether. So tether.js solves the positioning part of this problem. All we have to do is provide a target, any selector for any element on the screen, an attachment, top left, bottom right, and you're good to go. This Ember wrapper is amazing and I highly recommend it. If all you need to do is positioning. But as I mentioned before, doing both of them is pretty hard and after I spent a while trying to combine the two, I decided to make a library that would do it for you. So without further ado, let's take a look at LiquidTether. So as you can see, the API is very similar to Ember tether. You can actually use this as a drop-in replacement at any point. So if you don't have LiquidFire yet but you expect to in the future, you can use Ember tether for now and then install LiquidTether later on and just do a find and replace. And as you can see from the transition, you use it just like any other LiquidFire helper. You just select the LiquidTether using its class and give it a transition. One thing to note about these transitions is it's best to think about it as if you're animating an overlay that is the size of the window and transparent that the modal lives in. This makes positioning things a lot easier. You don't have to worry about the offset x or y values, where the modal is on the page. You're just animating an entire screen in and out. And it also has the side effect of making all the standard LiquidFire transitions work out of the box. Now let's say you wanna do something a little more complicated. Here we have a modal dialog that fades in when we first open it. And then when we go forward, it moves to the left. When we go backward, it moves to the right. And when we close it, it fades back out. To do this in LiquidTether, you would use the stack property. It does what it sounds like. Every LiquidTether that gets put into the DOM gets popped onto that stack and that only the top one on the stack is showing at any given time. The value property on the LiquidTethers will be passed into the to value from value between value matches for LiquidFire. And you can decide which animation to use out of the box. Another way to have more dynamic tethers is to actually just use a dynamic target. This is new in LiquidTether too. And you can just bind it to a dynamic value. And as you update it, it'll move around the page. This is using the fly to example. You could also use fade or anything else. There's also the ability to have custom destinations if you need to have fine grain control over where the tethers are attached in the DOM. By default, LiquidTether takes care of all of this for you. And you can also just send a component. You don't have to use the block helper. Finally, LiquidTether is built on top of LiquidWarmHole which is basically LiquidTether without the tethering logic. So if you just want the animation logic for those overlays and you wanna do your own positioning logic, you can use LiquidWarmHole for that. And that's pretty much everything. Thanks. Any questions? Do you mean Ember modal dialogue? I do not believe that you would be able to use this as a drop-in replacement, but it would be a good idea to write a library that wraps LiquidTether or maybe even make a PR to Ember modal dialogue that does that. Yeah, it should work. Cool. Thank you. Any other questions?