We're launching our new Elixir book! 🎉
Programming Nerves: from web developer to hardware maker.
If you've ever been curious about hardware but felt intimidated, this is for you.
Beta available now (38% off), or download free chapters to get started.
#ElixirLang
I’m catching up with CSS with @piccalil.li “Complete CSS” course. It feels like a book (?) to me which is exactly how I like it.
Many “wow we can do that now” moments too, very happy I can take this course
Delightful, this is very inspiring work !
Finally did it bsky.app/profile/gfra...
Here's the last call site if you want to check the code yourself: github.com/phoenixframe...
JS.set_attribute/2 under the hood runs DOM.putSticky(el, name, operation) which stores the "operation" function in a private key in the DOM element.
While patching, DOM.applyStickyOperations(toEl) re-plays all stored DOM operations which should stick through patching!
Think of CSS transitions, caret position, scroll state. All is preserved while efficiently updating the DOM.
morphdom `onBeforeElUpdated(fromEl, toEl)` callback allows tapping into the transform. LV uses it to re-apply DOM "sticky" operations to the toNode, the "target" state.
LiveView server-side renders new HTML, and sends to client the smallest diff necessary to update the client DOM to match the server state
The DOM patching is done by morphdom, which transforms the existing DOM tree to match a new DOM tree in order to preserve internal state of the original elements
TLDR; LiveView "sticky" DOM operations re-run when DOM is patched with new HTML
Demo: gio.wtf/demos/sticky...
Here's the explanation of how it works:
Why LiveView DOM patching doesn't overwrite attributes updated through JS commands? This is one of the top questions I received after my "mastering live view reconnects" talk.
I finally have time to explain it 😁
Answer and link to demo in the thread 🧵
Cool to see #PhoenixLivewView featured on latest @thoughtworks.com Tech Radar
“well-suited for building highly interactive frontends without the need for a full JavaScript framework”
Avoiding unnecessary JS bloat is key to achieve high performance at low cost
www.thoughtworks.com/radar/langua...
Great initiative from jump.ai 👏
Consider sponsoring to Wikipedia today (:
I believe this is a solved problem in the sense that the tools are there. DX could be improved tho to make it more obvious tho: www.youtube.com/watch?v=AnbW...
Would love to hear your thoughts. And totally agree with Elixir happiness 😁
Elixir Radar issue 481 is out! 📣
You can read it here: buff.ly/gJLStkm
This issue comes with content from @josevalim.bsky.social @solnic.dev @wojtekmach.bsky.social @gfrancischelli.bsky.social , Chris O'Donnell and Baptiste Chaleil. Thank you!
#ElixirLang
Thank you ❤️
I’ll try to give it a proper answer when I get some free time
Thank you 💕!! I think a higher level API for this should probably be possible 🤔
My talk at #ElixirConf is live 🎉
100% biased but I highly recommend watching it if you are doing #LiveView #Elixir 😁
I explain not only how to fix reconnect issues, but even how to eliminate them with some software design adjustments that also improve DX and UX!
www.youtube.com/watch?v=AnbW...
One of my fav talk from this conf. Great stuff 😁
Espero q tenha se divertido tanto quanto eu 😁
So for the "Pure UI" logic, where to draw the line between using JS commands versus relying on LV assigns which might make UX suffer if connection is slow? That's the criteria I'm trying to come up with, so devs can use it to guide design decisions. What state should be tracked in the client only?
Heey thanks for engaging! Optimistic UI covers a lot of what I'm looking, but not everything. Some UI interactions have nothing to do with accessing remote data. But lots of LV developers fall in the mistake of using assigns to control some piece of UI that could be controlled by JS commands
Thanks! Didnt know this video. In my experience there’s usually a way to leverage JS cmds to drive the UI and fix UX when server feels distant. I’m trying to arrive at a definition/rule that helps identifying when this is possible. If u dont mind sharing some specific example would be very helpful 🙏
Heey Petar, in your experience how does UX gets impacted negatively? Did the JS commands help? Thanks you for sharing 🙏
We are hiring an #elixirlang engineer in the EU (UK, Ireland, Netherlands, Spain or Portugal).
No need to already know Elixir. We will teach you. Want to work on an amazing team?
Go here: job-boards.greenhouse.io/workera/jobs...
If you have questions on the role. DM me.
See you there! elixirconf.eu 15-16 May 2025
Very excited to share I'll be presenting "Phoenix LiveView: Mastering Reconnects for a Seamless User Experience" at @elixirconfeu.bsky.social 😁
#elixirconfeu
Hey something like it yes, there's a bare minimal proof of concept here github.com/samaraolivei...
With those other interop tools being available, don't you think saying *no JS is a core idea* isn't very accurate?
Thanks mate! What are your thoughts on js hooks and JS.dispatch then, aren't they encouraging to write JS?
Personally I see Phoenix.JS just as a convenience layer of interoperability plus composability goodies.
