Josherich's Blog

Deep dive on going from Vue to Htmx in a large-scale production app

office on my bike so it’s just what it is nice all right well I am joined today uh by Brock Benson and I was just saying this is the first time I’ve ever seen uh that name otherwise known as AKA Maples. Am I pronouncing that correctly? You are, yeah, nice. Okay, so I’ve come across Maples on Twitter um at Brock and um basically, you know, my understanding is you have taken a product and I believe rewritten it in HTM X. It was sort of an existing thing and you’ve sort of taken what was maybe view and turned it into HTM X. Um, so that’s my kind of, you know, first sort of uh reason for this.

But maybe just some background, like what’s your sort of tech stack and what’s the app that you are developing? Yeah, so think like basically the, from an app standpoint, kind of think about it as um simply put, think of sort of like the Turbo Tax of business valuation. Okay, so allowing, instead of it being outsourced to consultants and they get back and forth with documentation, “Oh, we need this, here’s a questionnaire, let’s schedule a call,” all of that kind of stuff. Um, the system is built around get your quote online, get started in five minutes, walk through online signing of the document, you know, the agreement, walk through a questionnaire.

The questionnaire’s dynamic in terms of defining what documents will be needed based on how you respond. From there, the documents are uploaded, there’s a set, you can have multi-users with access to a client, so you can have your accountant upload stuff, whatever. Um, those documents we don’t require a format, which is, because if you require a client to put their data in your format, they’re not a client. Yeah, they will never use you. So that’s gotten to like allow document types, you know, certain documents can be Word or PDF and so on, parsing those, you’re doing like formats and so on, all of that, right?

Okay, it’s a big grand scale, very ambitious project. Um, anything that starts with the phrase “the Turbo Tax of…” Yeah, yeah, so the goal is to do 15 to 20,000 a year. Wow, which would require 50 and there’s, you know, via estate and gift tax, via financial reporting, litigation, you know, just divorce—there’s tons of needs for business valuations.

But they tend to be very expensive. I have looked this up within the last month; I have looked up what it would take to get a business valuation. It’s, uh, it’s difficult and costly. Yeah, so like right currently at this stage, um, somebody can be done with their part of the process in 45 minutes if they have those together, we have all the information we need.

So like a long story of it, right? Like how I started with the idea was like, I’m like a prior business, how annoying it was. Um, spent a year and a half at Price WRS Cooper after an earlier venture and, uh, wanted to learn and see how the process was and I’m like, first of all, it’s not very sophisticated what these people are doing. Yeah, umbrella, you’re just paying for the liability shield, basically. Um, interesting, all right.

And I kind of thought about it, and the vast majority of people are cut out of the market because the cost of entry is too high. It’s like, I really should get this done but it’s right, yes, I mean small businesses are like operating at the margins and it’s like if you’re gonna ask that much to evaluate the small business, like that’s our profit. For the, you know, there may be a shareholder dispute, you know, there’s a partnership that’s dissolving and they need to get rid of a partner, which happens—all of these things—and you’re like, God, it’s going to cost me 10 grand in six months to get this done, and you’ll have it for what about 2,500 bucks and you’ll have it in a day.

Wow, right? Like that’s the—you know, it’s hugely ambitious but like so because what it required was developing every single model that would possibly be needed in a code and flexible manner to allow. It has to be super flexible, right, in terms of what it can handle. And then, um, the system needs to have the logic and the understanding on what, based on these parameters, what to then, what process to follow, right? So you can kind of think of, um, there’s a large number of model, you know, LLM kind of models and agents that are sort of on a specific task, so documents into our standardized format, which matches with public company data that we have, a data warehouse that we’re feeding it, you know.

So there’s go in the back go Langs running in the back end doing that. Okay, that using an LLM or using, you know, whatever, just using two external data sources and we have redundancies built in in case somebody, you know, we can’t lose our data, right? Um, so we’ve got, um sorry, somebody else just came in, so no worries.

So currently there’s seven different segments where there’s models learning to do a specific segment of the analysis, right? And those will be chained together because they kind of have to be. Um, but from the admin side of the system, what it really is is just like an observability and training, right? So here’s the decision that the systems made. Yeah, we have to be able to go and validate that, determine if that’s accurate, make notes as to why, so on. So that data then is reused to make it better at doing a specific segment, right?

In order to have that means access to everything we would need public company data, all the charting, all the everything we would have for the final report that’s generated. So, um, again I was probably extremely stupid to do this. Yeah, so very ambitious project. Um, it covers a lot, yeah, yeah, and you’re using LLMs so it’s new. You know, I mean you’re working with new stuff, you’re training stuff. Um, I mean I’ve been doing that for six plus years on that.

Um, okay, so like machine learning stuff before chat GPT made it fun because everybody, you know, it’s like kind of feels like a new shiny thing, but this has been used right. Significantly smaller models that are very purposely—they’re only trained on a specific task. So, um, lots of IFL statements to get this down to a very defined task and they can do much better with that and I don’t need the noise of, you know, what’s the capital of wherever, right?

Yeah, and you probably get a lot fewer hallucinations on data if you’ve limited it down to a world that it can understand. It tends to be, at least what I found, is the better approach to using those models is like build a sort of a template around what they are accessing and what their mission is, right? At least that’s what I found.

Now, yeah, okay. So your app is, uh, you know, there’s this customer-facing side which is, let me just—if you have, you know, don’t—no need to give specifics if you don’t want to, but just a rough estimate of scale of like how many users. Like is this something that’s in production now being used or is this something you’re working on for the future, like launch date kind of thing? No, it’s in use now. Um, I kind of went about it in two paths. The first easier path was to focus on sort of institutional clients, so venture, private equity.

Good choice, they got money. Well, also primarily because of data quality. Okay, right, so they’re audited financials which make getting the data into the system significantly easier. Yeah, yeah. Um, it’s very, very hard when you’re dealing with a small business that’s dealing out of a shoebox. You’re getting PDFs from their accountant or you have to go off their tax returns and figure out what data we need off of that, so there’s a whole realm of things there that I have not dug into, but that’s some of the challenges to get to that scale.

We’ll be figuring out that kind of component, um, which is going to be hard. Yeah, definitely. Okay, so you’re in production and you have this sort of customer-facing side but you said there’s also an admin side, um, where you and your staff are using this to kind of validate the processes. Yeah, so basically we can run any segment with all the detail and I can show a little bit of some stuff. Um, and I think I put some out with like 20e rolling trading multiples monthly for all the public peer group, right, with charts and so on you can generate a report section.

Okay, for that, um, so that could be pieced in the report section. It just basically creates a PDF or a PowerPoint. Okay, and purposely so that I can add a new section in and just export within the system, just download a specific section, throw it in there, boom, and we’re good. And every business in America can run a PowerPoint so well, but also then it just converted to PDF and it looks great. Um, gotcha. All the, all the tables, charts, everything are, if they’re charts, they’re JavaScript rendered into Puppeteer, so they look like pixel perfect and they’re, you know, tooltips, all of that.

And then the other charts, what’s great is they’re just HTML templates that are fed from the backend data that then images same way just like loaded basically to Puppeteer snapshot it, save it. Awesome. Yep, okay, so there’s a lot. Yeah, so and your staff—uh like what’s the size of that app? Is that a lot of, do you have, is it a lot of people working with you or is it sort of you and a couple people? Like what’s the sort of setup?

It was primarily me for—for wow, just seeing if it was possible. Yep, um every day all day. So you got to build the tool for yourself. Like this is the tool I want to use for myself, basically built it. Like so the first goal was, okay, can I use this tool to complete a, do a complete valuation at the standard I would want which is like the highest investment banking kind of level standard and you knew that standard from your previous work at Price.

You know, with yeah when I was at PWC and then um in grad school I got involved in a startup that started, starting a company that um, this was right when it became mandatory for public companies to expense options. It used to be a footnote and it became mandatory, it was Fas 123r. Don’t even—it’s like I don’t know, it’s a stupid accounting standards. Someone will long accounting, nobody knew what the hell they were doing. Um, my area of research was in option theory, option pricing, and then it got into sort of executive sort of non-transferable sort of equity comp.

Within companies is different than publicly traded options that you can sell; you can’t, there’s no liquidity to sell an option in a private company. There’s, like, rating and all those things, so got into how to value those and that kind of component and um started a company doing that. Yeah, so I’ll just make a quick aside. This is just, I’ve talked about this many times—this is such a great way to uh, you know, be a developer is to work somewhere else first and just really understand that business.

That’s where you’re going to get these kind of innovations, that’s just, you know, my little aside opinion. And what I’m hearing from sounds like subject matter expertise is like super. That’s why it’s, I have friends who can help on all off and you know, general database schemas and so on, right? Yeah, but when it comes to building specific models on how are we going to value this or what data do we need and so on, you run into a problem where they could be the best developers in the world and some of my friends are amazing developers, but they don’t know the questions, they don’t know what they don’t know, right?

Yeah, so like when I’m looking at building something, I’m like, what are the edge cases that I need to think about? This is, you know, like as an example in one of the things there may be a time when you want to move the date forward to when this event could happen. Well, it’s not—you know, like you have to have a date override, like you know, like little crazy things you just wouldn’t think about unless you dealt with them over and over and over again, right?

And know that stuff ahead of time instead of finding out about it when it’s such a huge pain to change later on. You’re changing your data structure, you’re—what? Why would a date be changeable? You know, why can you go into the future? It doesn’t make sense. But like if you know the business, a funny aside is like the first um probably the first 10 or 20 I did with the system I had the dab version open and was coding as I was completing an analysis.

Nice, that’s good. So like that’s just how you—you kind of have to like figure that out as you go along, right? Yeah, that’s your ed. That and that’s a feature that then is in there, right? Yeah, yeah. So just to bring it back to HTM X here, so what was that decision process the first time you sort of decided or maybe just looked into HTM X?

Yeah, um, so the core JS apps are in view3. As we know, there was a V2 that was a problem, so when you build a giant, you know, there the number of views and so on is enormous for the ad system to be able to have observability and all the—and be able to run every single piece of everything, it’s huge. Well, what happened when view2 I can’t run with TypeScript and so on on a local box? I can’t even—I can barely even open the thing, let alone run it, and it’s bogging down and so on.

So it has to be out there, right? Yeah, um, well V2 is not supported, security patches anymore unless you pay for that above now with another side company, right? Um, okay, so and also v3s I like it a lot more in terms of the setup function and so on. Like I think it’s a much—it’s much more spelt kind of like, and that way it’s a much cleaner way and there’s some usability that’s great and so on.

Um, but yeah, the fear of having to rewrite again on a system where it’s really I don’t have a problem with a really gorgeous fat client for a client-facing app, right? Right, where you want the real look and feel and so on—I don’t have a problem with that. You can get that really easily with those frameworks, that’s what they’re great at. Right, I have a big problem when it’s on a back end. No one’s going to see the light of—that’s not going to see the light of day to a client and you’re kind of stuck in this like crap, I’ve got, you know, you don’t open it up for three months, let’s just hypothetically say, and you’ve got all these deprecation warnings and so on.

And you make an update, it breaks everything, you know? This is the idea. So that’s what got me kind of thinking about, you know, I heard somebody shx and thought about it and for, you know, 90% of the code that is written even in a frontend-facing standpoint is internal, right? There are some components that will be shared across depending on the type of user.

So with our institutional users, there’s a full historical cap table and they can see visualizations, they can run distributions and that kind of thing. But still, like, I mean, the fraction of what they see relative to what’s there makes no sense. Yeah, unless I have a beautiful-looking system internally to look at then, yeah, right?

Yeah, well I mean also and what you’re talking about with, you know, opening it up and having things be deprecated and you know, so you know, you’re probably just probably as part of a build process and stuff. Um, and I mean, I think to me that’s one of the kind of like sleeper long-term things that I think gives HTM X, uh, and other tools like it, um, that are these sort of more complete lower-level projects, um just a huge advantage.

Because I think I’m in a similar situation where the businesses that I run, I’m the one that programs it. So it’s such a huge benefit to me to be able to just leave it alone for a while. You know, I can let it sit for a year and I don’t have to worry that when I come back to it, “Oh, what’s happening now?” Like, and that did happen to me with view as well. I heard that like hundred year—you know, I’m like, “It’s dead on.”

Yeah, I’ve—like, I’ve had the pain, so it was not as painful to rewrite and it’s not all done on the admin side yet. Yeah, there’s—there’s actually, and then funny enough, there’s actually features in the HTM X version that aren’t in the JS version because it’s just so easy to do, right? It’s like, I want a piece of data in a template? I’m like, “Oh, it’s just right there.” I’m on the back end, I don’t have to rewrite. You know, I don’t have to add this to a serializer to flip it front.

Yeah, we’re already in the database like we’re right here. I can refetch it if I need to be quicker, you know, to line what I want and so on. But I don’t need to deal with that, which is like super nice. Um, yeah, and I came up with some tricks with HTM X to make it feel more like a SPA and I’ll talk about those for sure.

Yeah, yeah, but I think like the—what really got me was vendor the file—that’s my file. I wrote some extensions that I—oh really? Yeah, so there um, one was normally with like an Ajax download, right? You’re going to get like a page refresh. Okay, yeah, so or you’re not going to have any status on what’s going on, right? Um, so I have a little extension that lets me have a spinner until the download file is downloaded and then it’s gone. So it’s like, feels like an SPA. Like just, I—it took a second to write and I’m like, I just want, like, if I’m going to be in this all the time, I want it to, you know, be nice.

So, why not? Yeah, um, that’s, yeah, that’s cool. So that was like the nice thing to have, like, okay, this file is my file, it’s out on our CDN, it’s there, it’s mine. We used Chart.js, built that version, built it, boom. Totally. So like, that is—there’s no external, it’s mine, right? Okay, so you brought that in and like maybe even modified it to—I built it. So just like, clone the repo, build it. Okay, right? So it’s like there is no like call out to anything that’s, right?

Um, hyperscript. That’s funny. Yeah, hyperscript too, huh? I’ve had a hard time with hyperscript getting the syntax in a way that matches what I’m expecting when you start getting crazy on the events. Um, yeah, you start realizing, you know, like the DOM’s just a big event bus, right? You just bounce events around and listen for them and it’s like that’s pretty nice. Um, so there’s some pretty cool things that could—theory—so that’s, you know, and then we use um doc sign kind of stuff.

Sign okay, Y to actually like do the official part, do the official signing. Um, we use Stripe but that’s internally. We don’t have a—we don’t do that on the HTM X side. We create invoices, which is what people want. So I don’t, we don’t have no elements out there, that’s the dependencies. Interesting, wow, that’s really, really low dependencies. And you might never need to update your charts, you know, JS or whatever. I mean, you may—maybe they’ll have something—but it’s like we have, uh, there’s one more dependency, it’s flat picker.

The reason I went with that is zero dependencies, yep, on that. It’s a little larger, um, but you know, during the whole load of the app, I mean it’s not like it’s a landing page for a marketing site. Right? So sorry, but what does flat picker do? Um, it’s just a date… Uh, date picker. Oh, got to. But it’s no dependencies. Um, there’s some other like smaller date pickers that are super nice but they don’t have some of the flexibility in terms of jump back years really easily.

You kind of have to toggle back just endlessly. This you know, so there’s a lot more flexibility there, and that’s it. So you really are embracing the like low dependency, low dependencies, you know, and kind of local JavaScript being able to kind of mess with your own stuff.

Yeah, I wrote a bunch of um hyperscript behaviors to reuse for auto-complete. Um, okay, which is feeding from the backend. The dropdowns fed from the backend—when you say hyperscript behaviors, this is like you just—you mean you’re writing hyperscript in there, or is that like a specific ter? Like instead of having a giant thing of hyperscript to handle tab, you know, arrow down, arrow up, select, you know, enter—all those in a behavior that then is just, so I did that for menu for like dropdown menus with accessible keyboard actions and also with an auto—that auto-complete like just search sends a call to the backend that’s cached after that, so if they make the same search, it’s just like immediate.

Um, nice. Like a couple things like that, but see, I mean those are mine. Yeah, gorgeous.

Yeah, nice. So, what was your learning process for this? Does it just, I mean sounds—if I had to guess from listening to you like you probably kind of just dove in and tried stuff out, but do you do like courses? Do you do like tutorials? Like just kind of put the code in your site? So I think it was significantly easier, like to rewrite at the scale of the rewrite that was done, um, was easier because there was already—look, all the backend code is there.

What was feeding the APIs is there, right? Y, there’s some slight modifications to list, you know, like for triggers and things like that. Um, there were, but like the framework was there. It was like, can I replicate this? And as time went on it got faster to replicate that. There were some challenges, like for sure. I think probably the most significant is, um, cache is great for a client, like, you know, experience but it becomes a necessity when you have big calculations running and you use that data somewhere else.

Like you can’t just keep running these giant calculations over and over. Yeah, so that was kind of the challenge. Um, and also the data can be dynamic. What comes into a calculation can change based on any number of factors, so that need validated, right? So, I can’t really browser cache a lot of stuff because it’s hard to selectively choose a browser cache to—you know, you just kind of nuke the whole thing, which is what when they log out, it’s just nuked, right? That’s fine but I can’t nuke everything. Um, some pages could be browser cached.

Like as an example, um, there’s like a full Fred search, like, um, all the econ data and stuff that’s needed, all the bond yields, all that kind of stuff—that’s part of the analysis part that’s needed. The system needs for an economic section of the report and all that changes; that’s just cached for a day. So you go to that page, you go, first it loads because it’s got like this suggestion and so on; you come back and it’s just like brown.

Right, like no problem, but a lot of other stuff was challenging figuring that out and cache and validation, which is something you don’t deal with necessarily the same. Like caching and validation on the front end is hard but you’re dealing with like data coming from one endpoint. You know, you may have a key on that, of course, right? Like you can kind of share that around; it’s just kind of just in virtual state.

We’re not a store for it, but it’s kind of just in virtual state, um, and you can kind of use it where you need to. And when you make a mod, a mutation to that something that would impact that, you just change it, right? Um, that’s—you refetch it in the background like you can do that, but it’s really hard. Like, I would love to browser cache the marketing site stuff, which still needs a ton of work—I haven’t even gotten to that.

Um, that’s browser cache play all over the place, yeah, with the preload extension of HMX and you’re just like, dude, it’s like, yeah, it’s instant if you’re not doing these kind of calculations. It’s instant, right? And if nothing’s variable, like a delay on a blog post or something of an hour—like, big deal, right? Like no big deal, right? Um, but I can’t have that when everything’s dynamic.

Like how they—You know, like documents can change and so on. So, yeah, the caching—there’s some limitations there on the HMX side just I think just the scope of the calculations being run and the challenges when everything is its own page, right? Yeah, if you have subsections within a page that may be sharing the same data throughout, those are, you know, in an SPA, that data is just especially on the top level shared down through where you need it, right?

Interesting. So, so you would, with your front end setup, you would be actually running the calculations on the front end also revalidating, theoretically? Yeah, so they suggested outcomes from the system. Yeah, right, and then run the calculation to validate and just see if, oh, we selected something different here’s why, so on that kind of thing. Gotcha. So there’s suggestions, but we have to, you know, it has to be validated, so you’re rerunning the calculations.

Yeah, okay, okay. Okay, so moving stuff, you know, just in general, putting more stuff on the server side using HTM X, you’re—the caching was kind of your biggest challenge there, you’d say? Not on the, you know, funny—not on the client stuff really. Like anything that we would want—like I’ve got some clients who are using um an HDMX version. Okay, which is kind of cool.

Um, as I said, I think there’s some features in there that—well, I know there’s some features that I like a lot in there that aren’t in the other one. Um, but yeah, caching was just a hard thing, and using it in the way we use it to revalidate from an admin side, um, I can be a little more aggressive on cache and validation when it’s just the admin side.

Yeah, yeah. Like it’s not—I’m not concerned about my experience, I’m just concerned I don’t want to wait. I don’t want to set a longer timeout on the ISX timeout to get what I need, right, on a request. I don’t want to have to override it relative to six seconds because sometimes there are some big calculations, um, or if you’re running a whole report section with all the images and all the content—they’re big.

Yeah, and if that’s run once, I want it to be cached, but then if something changes, because you’re like, “Oh, that’s not right,” that has to be invalidated to run again. It’s more—it’s not a necessity but it just makes usability of the system. Yeah, care about like the speed per se, like, right? But I mean you probably—it would probably piss you off if it were slow. You know, if it’s gonna take me five or ten minutes every time I try to do a little thing.

To read up it’s not going to work if we are lucky enough to get to a scale we want to where there’s like 50 of these a day. Exactly. Like there’s just things we have to kind of—it’s easier to think about those now a little bit. At least have a plan, and you may not implement the whole plan but you’re like, “I, okay, I know how this can be handled.” Or can it be?

Or because a lot of us was testing, okay, right? Like so the advantage is like there are two systems anyway. It’s not like I was writing it from scratch and there was a timeline and so on, right? There’s systems, working systems that are there which made it a much nicer. I could take the time to write a really cool auto-complete, right?

Or I could, you know, I could do some things because it wasn’t under like the pressure this has got to be done on a timeline. Yeah, yeah, you’ve got a version of it up and running and it’s a matter of you know, what do you want to make better? I sort of put my foot in the water a little bit and was like, okay, is this going to work for some of these things? And I picked a hard thing, nice.

Perfect. I was like, okay, okay, okay, you know, I kind of kept going and now there’s like—yeah, like, and I will actually say even if we never use this site, the HTM X version, I would say that it has made the system significantly better. Interesting, wow. Because of, I believe wholeheartedly that the more you have as dumb of a front end as possible, and you are in a significantly better world.

Right? Yeah, I mean, I’m there with you; just speed stuff aside. I think having a kind of dumb front end will help with if you—I don’t know if you ever end up having to display a lot of data and things like that. Um, but the sites that I work on, you know, people will say like, “Oh, you can’t show that much to users.” You know, no user wants to see a thousand rows at once, you know?

And um, that’s not what I’ve seen. Like users, they want to see everything. They want to see all their data. Sometimes, it’s not everybody, but um, you know, my experience has been the dumber the browser or the dumber the—you know, the frontend code, the client side, the dumber the client, the faster the browser is just going to throw that up there. Um, so and then you do have to cache on the back end.

There’s like a super funny thing like, you know, having—like I can, you know, pages that look identical, one in a full JavaScript framework—identical styling, literally the identical page next to an HTM X version of the page and it’s like super fun to be able to look at those. Yeah, I mean, they’re identical; the systems are all intents and purposes identical. I just mirrored over.

Wow. Um, Ian, that’s a cool case study. What’s that? That’s a cool case study, just, I mean, if you know, I haven’t done a code count like drop, um, because I haven’t—yeah, like, not everything’s there, and there’s certain things where you’re just like, it’s not quite as easy to do.

Like, there’s a couple of things, um, where there’s just so much data involved in different options you can, you know, for example, like cost of equity, right? There’s rolling betas, there’s correlations, there’s returns, there’s market risk premium, all of that. So in the frontend, in the JavaScript one, you just—all that data is calculated at once because a lot of it’s interdependent, like the prices you’re using are used for all of that.

So the stock prices you grab from are used for all of those calculations. So you just—it just sends it all to the frontend, it calculates it, sends it all. So then you go from tab to tab, you’re like, fine, I can totally do that. In the HTM X version, I’m probably gonna have to, but it just—and then if I’m using hyperscript, which I am, um, yeah, I’ve got to listen to—like, there’s like 20 different tabs effectively.

Okay, combination, so on, if all that data is calculated at once and sent forward, so it’s going to—those are all going to be created in the DOM and I’m going to have to toggle between which one is which one, you right? So it’s—yeah, like I’ve hit some scale. Like, I wouldn’t suggest, like, just go out there and do that on a very intense—intensive, like equivalent of the trading app.

Um, yeah, you can do, and the reason it works is because that is—it’s okay for that data to just live on the client side like that. State is really just for the current user in that moment to mess with the numbers. If that were to be saved, that would have to go to the server, you know? So, you know, that is, I think, a good example of something that works on the client side.

Yeah, and there’s no storing like in—it’s just in virtual, yeah. Right, like on the frontends I use, um, TanStack query which is great; the version is great. So it’s got k-e-k and validations and so on, it’s great from that standpoint. It can refetch on an interval and super simple. Um, I’m definitely not reinventing that frontend crap, that’s for sure.

Um, I’ll let those—I’ll let people with significantly more intelligence than me worry about that stuff and I’ll focus on my little niche. Um, but yeah, I’ve definitely come up against some roadblocks. They’re not insurmountable, and certain parts of to reread on certain things, I did it that way, and I’m like, “Oh, this is super great.” Um, it’s not as elegant, but it’s like super.

Yeah, so you know, one thing that I’ve liked about sort of following your journey on Twitter, um, with HTM X, is you know, I think you’ve shown some of the good and the bad. Um, you’ve been sort of honest along the way about, I don’t know, I wrote down one tweet that just started—I think it was just from all—maybe this month even. Just today, I hate HTM X was how it started, you know?

So and I don’t remember what that one was about. I think maybe it was having to do with caching and or something or maybe just couldn’t hit something on the frontend. But you’ve come across several of those, right? Where it’s like, doesn’t mean everything’s easy. I definitely don’t want to come off as some like, well, I probably should preface that because I am like wholeheartedly a perfectionist.

Um, like even if I’m just going to look at it, so like everything I do, I think is garbage. That’s just like the nature of what I do because I’m like, it’s—you know, it’s just how it is. Um, I don’t that motivates me still or whatever. Well, I know it does. Um, but I don’t have time to get to it. There’s just too many things.

Yeah, yeah, it’s just. But uh, I don’t want to come off with some like speed. Like caching is like, you got to cache everything and so on. The caching, from my standpoint, was so to out of usability, right? Like it was not an over optimization. Like things have got to be fast. I did a couple of—and I’ll talk about a couple of little tweaks that are just kind of fun things that like bothered me about a rendered, a server rendered site, yeah.

Um, and I did those but those were like five lines of code to do them, right? Like super easy, but they make you feel like you’re on SPA. Um, interesting, the caching stuff was solely from a, like, just again a usability.

Like when you’re running, so like let’s say you have ten peer public companies and you’re running ten-year monthly cumulative rolling multiples with econom—you know, like, um, cumulative weighted averages and so on on top of all that for a giant chart with tables and so on. Those are just big calculations.

Yeah, fast per se, like fast in G, but not fast from like an immediate response kind of thing. And you can’t keep slamming—like I don’t want to keep slamming those calculations over and over and waiting. And I’d like to be able to bounce to a section to get more information on, okay, why was that selected, then come back and it’s cached, and I hit it again and it’s like right there.

Right, just from like a—When you’re, that may be fine in isolation of like one, if you’re just doing one little thing. But if you’re bouncing around validating a lot of different things, all the assumptions that are going into an analysis, and you’ve got to come and rerun those every time and wait for however long to do that, it just wasn’t very usable.

Yeah, so that’s where that all came from. Um, as it should. I mean, this is what, you know, you’re the person—if a lot of programmers don’t are not necessarily building sites that they have to use themselves, um, it makes a big difference if you’re the person using it what your focus is going to be.

Um, and usability, I mean that really should, in my opinion, like every web developer should have that front and center because, uh, that’s what it’s all about. You want, like, you know, a second, like that’s not like some crazy thing, and I don’t mind waiting two seconds or whatever, right? But if that cumulative adds up, if you’re balancing to ten different pages and you’ve got to come back, when in the front, when the JS version you’re just like, oh, it’s just there, right?

Yeah, yep. So, you know, it’s not—it’s not the same in that um—but like this is definitely an extreme case. Some of the—as extreme case of where you can do it in a relatively smart way with—a relatively smart way?

HMX since in somewhat limited caching I mean there’s some the system itself there, there’s some added requirements that like get in the way of things in terms of uh like if an engage if evaluation is completed, none of the none of the assumptions can be edited, there needs to be a track record. You can’t change after once it’s hit this point it can’t, it’s done, that’s just in the system, that’s just right.

So, everywhere that any of that stuff you have to oh is the engagement done right um, I wanted to know what changes were made by who, those kind of things are important. Yeah, there’s like a lot of little hiccups that you can run into, but like from a client facing side um yeah I think that like if I were better at styling, that’s probably my I have little if any I you know I’m like programming I don’t want worried about like styling too much, but it’s a necessity right like the perception of your system is often times sadly um looked at as, you know, people look at it and get a perception of quality. So yeah that’ll probably be a next step, but function you know the functionality stuff is is isolated from the front end enough that it’s not going to be hard to make some of those changes.

There will be a very big change that needs to be made coming forward moving away from the Enterprise sort of clients to individual who’s may use the system once in their entire life right. In that case you needel needs to be there and handholding and so on that needs to be there um you know to date it’s been CFOs of venture companies, venture back companies, like they know what they’re doing yeah speaking um so it’s pretty simple to have a to have a system that’s just like here’s the questions here’s the next section questions but documents they know what those documents are they know it’s not a big deal it’s going to be very challenging probably that step so I don’t we’ll see.

Yeah so you mentioned that you had you had a few tricks that you’ve kind of uh you know whether it’s for sort of turning your MPA like an MPA setup into kind of feeling like an Spa. So like what what do you would do you remember any of those one a really simple one is um so let’s say that I’ll use this example right so there’s a messaging kind of related to an engagement or a client within the system so that if a client if somebody has an issue they can send a message within there right so there’s a list there’s a standard no big deal right and they’re nested and all whatever right it’s like not a big deal to do that um a lot people solved that problem long ago on how to design a messaging app that’s not a big deal um okay yep but you know you could have a bunch of messages or you could have a bunch of clients if you’re a venture capital firm you may have 20 companies on the system right and and we want to see status of where all of those are within a list right okay like that’s a client looking to their last valuation, what’s the status of the valuation, so we know right.

So there’s like some information there for them on that it’s got to do some looking around to do that so it’s not like you’re going to click on the client or the company’s Tab and go right there there’s going to be a lag of however long all of that is determined is is the engagement completed or not, what’s the status with the progress percentage all of that takes a while right um can’t browser cache that right has because that list is defined, it’s totally fine if you’re on a browser cache a page where you’re doing the same modification request too that’ll invalidate in the browser fine right whatever you return will just be the new cache well a list that’s dependent upon all these other sections yeah other tables that you’re checking the updated you know time stamps and all this stuff yeah so I have a cool little caching thing in Redd that I did to overcome that um in like a super easy way but so what I do is I just created I send this to shell back browser casts the shell of the page y with a with an hmx load when that shell hits so it’s loading from the cache the inner pieces of that but it’s just sending back the shell which is browser cache that’s not dependent upon anybody or a user or whoever it’s the same for everybody yeah so now they bounce to like once that Shell’s been in the C in the browser cache you hit the tab to go to companies you go right there and then there’s just the loading State as you bring in you’re not like lagging to a page yeah yeah so that’s interesting y it’s just like a super small little like just send back the shell of what I want to show in turn to just the header and it’ll be the same for everybody and then within there have a loading St have just your loading state with a HDMX Gap to wherever you’re going and just replace the loading State yep with the list interesting yeah so it was like kind of a so like you can bounce around just like an Spa to those pages and just but you don’t unlike an Spa once that’s been loaded it’s not in you know so you’re always waiting for the loading but it’s like sub it’s like 120 milliseconds from the cach something 100 milliseconds from the cash it’s not not yeah so so one thing that I mean I’m just I’m that that that sounds like a good setup um I just that reminds so I just did something with a modal uh recently where it was the same sort of deal it’s like you want I’m reusing the same model over and over again and you want it to pop up with specific data that could take a little while you know to generate but because it’s about your specific row um and I found that that same setup that you just talked about but rather than doing it so you have the the modal has like the outer part you know that’s the same everywhere so that’s that pops up no matter what the logic for closing the whole thing it’s like tied to yeah that’s all front end so you know that’s immediate um and then I actually put the trigger to load that data inside the model on a mouse enter for the tab that so you know something like that also is just a possibility where it’s like okay now we can that nice little bit of time where it takes you to click you can subtract that from your from your negative you know from your so there’s a lot of um like so if somebody wants to contact us within the questionnaire there’s like a you know help on sections I can even show it I don’t mind um but a drawer that comes out with specifics to contact us right well that’s a mouse that’s a mouse and that’s a specific that’s browser cash because that’s only going to come under one request type it’s just like it’s going to always look the same so it’s a mouse over it grabs it real quick they click it like over it just is like right there um yeah did that a lot with anything that’s not dependent on a lot of other factors like other pages and so on where it’s very hard to invalidate browser cache I pre-load that if it’s client facing and um yeah and cash the hell out of it yep um so did you get into the headers of each I’m trying to remember I I couldn’t see a specific tweet on this but this is something that I almost never use although you know on the podcast I’ve talked about it um but just realistically in my apps I haven’t really needed to check the headers on stuff that often um but just I know that you kind of went in pretty deep on almost every aspect of HDMX as far as I can tell trigger the so example like one page um sub page there will even well even more than that even within the questionnaire so um if there was like more than one dependent dropdown I sort of just said I’m not doing that on the front end like I’m just not going to have a jble like giant crazy hyperscript like if unchange from this element you know if the value is this then like I’m just was right um and I like refuse to use Alpine just not because I don’t like Alpine but if I’m GNA use Alpine I might as well use view in my so um so I have um like dependent fields that will fetch on a change from another field and it will come back and select well the back end is listening is watching the trigger from where that was to know what partial return interesting okay so like you you change from like no we we have debt as an example or whatever that’ll trigger the fill in below it that’ll single a request and the trigger will be that um select field which will then just fill in send back like three related fields that need to be completed so there’s some of that which is kind of nice like one giant page you know one giant HTML file with uh like five or six partials just listening that are just listening for different um triggers right there is no trigger if there is no trigger I know it’s coming it’s a full right if it’s you know that whole thing yeah okay so that kind of like a lot of server sent events on the back end you do you use server sent events on the back end not server sent events sorry but like reaps and um what HX reap HX retarget y so if there’s error send back a notification right at the B like those kind of things instead of just send that throw that before and to the body okay that kind of stuff like there’s a lot of that yeah just it’s I the logic I mean there’s a there’s a crap validation there’s just no way around it yeah yeah as there should be with something that’s uh you know validating kind of data so like you you get your quote online you answer a certain way that has to be validated that you respond that way on the question right and then that’s just beyond just the validation of the whole questionnaire right so it’s like I think there’s uh there’s well over 5,000 lines of validation related components just on the back end for that like different because there’s just a lot of you know much easier to it may look why I know it looks prettier when you have it in the transition group on the front end of view and it just like slides around all pretty um but guess what you’re you’re doing that there to make it look pretty and you’re also doing it here to make it look to make it make sure make it accurate yeah yeah yeah that’s the I mean that is something a lot of so many times it seems like you’re you’re you have to duplicate some stuff if you are trying to do a lot of validation on the client side yeah like I would send all the choice Fields forward on an option request at the page and pre-load those um so that I always made sure that like let’s say the full attorney list that we have of options like because we ask who your attorney is who your accountant is because there’s we can learn information on because they have different how they present your financials or whatever oh really it’s like yeah like that granular right like how like then then that’s a criteria that could be used like your attorney’s good when proor okay let’s look at all the other good one Proctors as a proxy to help maybe right the system yeah yeah that makes variable yeah it’s just like we store for every single line so there’s a financial statement for a year then there’s 600 and something possible financial statement items depending on the type like it’s those are all separate within the database um but we store where your data in your financial statement was in terms of row position in your statement was it a child or a parent was it like nested or not um so that that’s all information that then the system can look at later as it learns right to like well if it’s a parent I know I can ditch all the ch right like there it lets it like eliminate choices which can get better results so but yeah like that validation stuff gets crazy when you’re trying to replicate on the front end so there are some really tremendous benefits um I really need to get into view transition The View transitions API if I want to really make it yeah I’ve been feeling that too where it’s like I know this is out there and I have not gotten into it yet um but I mean it just seems the promise of it is just so good right like if you know if if you want to sort of add that and you’re already using this approach of swapping in you know HTML Snippets The View transitions promise of being able to just smoothly uh you know I was talking to um uh Jason cross the other day he mentioned that um it could it was actually doing like a bitmap you know like pixel to pixel before and after which is not at all my image of how that was how that would work like well that’s so I have like I use the the within hmx I have the global transitions on yeah but because in that app there’s actually a the targets not the not the body for the Target because there’s just a lot going on there yeah yeah there’s actual there’s like an actual sidebar like that you know the whole thing so um I could probably redo the whole layout but I don’t want I wouldn’t want to redo like 80 different pages that’s how crazy the whole thing would get into so like now we’re down the path um but I have it on but I have the time set basically to zero gotcha so funny what it does though is it it prevents Jitter there’s no Jitter oh nice okay CU it’s still it’s still on yep it’s still looking at it but it’s just not delaying the swap because it messes up the sidebar on the global because it still kind of does the whole thing even though this doesn’t change let’s say um so that was kind of a cool little by turning it off like that’s a nice little tip yeah just turn it on and set it to zero if you want to feel like an Spa just like there’s some little things you’ll have to like work within there on transitions on things that are very dramatically different um yeah yeah but it works on a pretty good global scale that’s for sure that’s cool and I would highly recommend the preload the pre like back to that like I would I cannot tell you how many when there’s um like a client like there’s a list of files to upload Y and there’s like an upload upload these are required this is not whatever but like upload hover over that’s grabbed so by the time they do it it’s like an immediate drawer to like drag and drop their file and so on like it just makes the like when you have a when your when your view or whatever is only returning one state of the world yeah c browser cache that have your endpoint be the exact same you know put or post to that endpoint browser cach it and do a prefetch it like it just makes things like I don’t have a single client side rendered modal or drawer or anything it’s all backend wow interesting so when you is this an extension you said the prefetch oh yeah yeah the um let me see what because I you know that’s I I really haven’t used the extensions much I’m hoping to kind of get into them um I would probably do like a you know Mouse enter but if there’s an easier way to do that I’m I’m all about it yeah it’s one of it’s one of the like the the class tools and preload I think I think it is just yeah so preload extension so I use um within the app other than the couple of extensions I wrote um just for specific use cases and uh I got I’m like so overwhelmed in term of my time but uh like I still owe Carson like an essay and I’m just like such a we got it’s just like yeah I really that’ll be the last thing I ask you about in a few minutes here I would I would love to hear about that essay but anyway sorry keep going yeah like it’s it’s all about these like yeah but um so the head support extension okay lot I oh so you can swap out up at the top easily primarily for um Js files work for things that I’m not going to use all throughout the app right got certain things need to be preloaded because there’s other factors that are like other things are sort of dependent upon those are always going to be used or whatever but like um some of my own like input formatting for for like comma you know like numbers and so make them like usable like nice and just to be clear this is the ability basically to add stuff in to the Head tag to merge it you can define the strategy you want to merge it and use a uh I think it’s an HX hold on I’ve got the file I think it’s a yeah HX preserve said to True okay yeah preserve that’ll keep everything you have in your need and the other ones will just be merged onto there and if they’re already there they won’t be adjusted you just define your strategy and on the so if it’s a full page reload I have it because I I’ll have like a page HTML and then a page partial HTML and this one fits you know like feeds into there but on this one I’ll have like the general stuff right like the head and so and I’ll just include that as an extra items if there’s extra JS files I need for that page and then I’ll have if it’s an hmx request is an hmx request then throw this header info on there merge so you’re using both the built-in header you’re checking the built-in headers that are coming back and using the the header the head extension to add JS files or whatever other includes you might need depending on how yeah depending on how there were some reasons why I forgot yeah I know there’s there’s there’s a method to my madness normally um seems stupid but then I take it out I’m like oh it’s not working now there was my yeah yeah that’s how everything works you’re like you go some crazy code and you’re like this is ludicrous what were you doing you try to rewrite it you’re like oh that wasn’t ludicrous I now I understand what you were doing yeah over time you you begin to respect more and more the gigantic ludicrous things like I mean you gota you get into a certain space where you have Clarity into everything going on and when you look at it from the outside when you have none of that Clarity you’re just like this is a monstrosity of craziness what are you doing yeah yeah yeah so using um yeah so the head support class tools and the preload extension okay and the preload one allows you just define like Mouse over I think the default is like I think the default is like but it’s it’s not as I’m like not the most aggressive and not the least aggressive okay because partially I I can prefetch items because this there’s a very well-defined progression through the system which affs some luxuries right that you can like what I would say is if you have well-defined process you can take advantage of going and grabbing things because you there’s a significantly high probability they’re going to go to there or they have to go there as a Next Step so you can kind of just make the experience even better certainly if it’s a big half if it’s you know the request is going to be intensive you can go grab it either on a I think there’s a with I think they have an init on that so when that just page loads with that uh preload extension defined on a specific thing it’ll just grab that route the minute you come to the page okay yeah so I actually have that on the marketing site for one page which is the quote go get your quote page so they hit that it’s like you’re right there yeah yeah you don’t want any delay right there well it’s also just it’s grabbing all the options all the you know valuation types and the cost the all of those things so it’s you know yeah I don’t want to be like lag to go to like the critical entry point yeah yeah nice so that’s like the one that there’s a prefetch the rest are mouseovers but those are browser cached anyway so I’m not worried about like I’m not scared of a few requests yeah I mean this is you know you’ve I can tell you’ve put a lot of thought into the architecture of there probably way too much that’s what it’s all about that’s why we’re here you know you gotta build something good into most of these things um yeah I tend to be somebody who kind of always thinks about like the edge case unfortunately and I mean it’s I think if I hadn’t found program it’s not very good in the rest of your life but it’s it works well programming yeah it’s a little bit of uh a little bit of seeing the future you know that’s kind of how I think of it sometimes when I’m like going when I’m working on a site I’m like you know they’re gonna what if they do this and you just you sort of just know it’s gonna happen at some point yeah like the idea of um if you’re already in building something right like you might as well just going a little deeper going as deep as you reasonably can given what you know is kind of my take right don’t try to plan for the don’t assume you’re never going to rewrite it at some level but going as deep as you can with your what you know now like should kind of always be the I don’t tend to want to write things just to like get it done yeah also it’s I don’t work for somebody else so it’s probably some of that too yeah it’s going to come back to bite you and and that’s you know you do something half who wrote this crap oh oh yeah I’m trying to think of uh yeah the mouse over on the preload extension with modals and drawers and things like that are like because there’s just a single end point where you’re getting or modifying it to one end point would like abuse that like crazy I just use it makes you it it makes such a difference in terms of just it allows me not to have any there’s there’s not a like I said a single drawer or modal that’s served in the front end yeah it’s all from the back end I mean it’s sufficient too because you don’t have that sitting on your in your Dom uh I mean maybe maybe you have the shell of it or something like that but the actual full data you just don’t need to load that in the beginning and you also none of it it’s all every I don’t have a yeah there’s not a single piece that’s uh I think well the only thing that’s there is like a log out confirmation little thing that’s there but that’s in like a component like a web component that I did and it’s just like cloned in when it happens and because I wanted that to be sort of fast I didn’t want that to be a back request and I wasn’t going to preload a log out there’s no need to yeah for it to kind of weird like it would also just I think create some weird issues anyway so that’s the only one it’s like you’re pre- logged out yeah do that you can’t really do that um so but everything else I would highly recommend that and I think like the the the hmx trigger yeah makes your life like really cool because you can just return a different partial based on what element is I think you have to have an ID on it though is the only thing on that element so that can get a little weird are are you saying HX Target you mean right the the header no no no there’s um I’m going to look at one real quick hold on so the worst part of this whole thing is I know where all of these things are within this whole thing isn’t that weird how you can yeah you just you have a map of you know God knows how many lines of code somewhere in your head something breaks something breaks within this giant monstrosity of chaos and I know exactly where it’s broken like pretty much like 99% of the time and it’s like yeah my wife is like no wonder you don’t have any time for me I’m like totally I’m just like I have no more bandwidth it’s all stored up with where all these things are walk people through your app on the phone and you’re just like all right you’re going to click this you’re going to see this get this totally okay so I’m trying to find the header real quick um so I’m just I’m thinking it must have been HX Target only because you’re saying that it has you know you have an ID and then it’s the trigger match it’s the trigger is it the trigger okay yeah yeah yeah so targets so I think I think I maybe Carson will 100% know this um I’d have to look it real quick but that’s what my code says and it works perfectly um nice you have to have an ID on the element though and if you do the element of that ID that ID name is sent with a request okay yep yep I gotta so now you they’ll just be like if so first it will look if there’s a trigger at all Y and then you just fine your triggers logic like if it’s this else R if it’s this return this it makes it like kind of cool um yeah so that’s one I I remember I you know I even did an episode of podcast on it but it was so long ago and the thing is I just haven’t used those so so it’s uh you know it doesn’t get it doesn’t stick until I’m actually having to use them like that um but yeah I mean that gives you a lot of flexibility you can know where this came from you know what’s the what’s the context that this snippet needs to be returned yeah and I’m definitely sending back a lot of events with different things to trigger different things yeah so like listen you know like send like uh table data event right like to the front end and listen on in hyperscript for the event which is where hyperscript is excessively gorgeous interesting it’s just it’s designed I mean it’s just Carson of course would know more about this but it appears to me that it is like fundamentally designed around like listening for events are like one of its like super strong factors so just having something sitting there listening for an event from the body sending that back and handle the transition to the table view because the data is going to be there right um is like super nice nice and fairly easy to I mean as easy as if I hear that like these things aren’t maintainable again I’m gonna like lose it because I’m like there’s no there’s no giant app in the world that is like easily maintainable right as because it’s like by the nature of these things they should be complicated um but like that doesn’t mean it’s like you gotta save your complexity for where it matters that you know just kind of my opinion on it like and you know to me sort of keeping things as simple as possible in the HTML and on your front end State and all this kind of stuff has just like I’ve reaped the benefits of it and it’s only been a year and I kind of expect to continue reaping those benefits uh the more time I think you can build some really solid patterns that you just use consistently to make like a good experience and that’s where I think um I think having a single HTML file for a page with partials yeah I mean it’s a giant maybe you know if you don’t like a big context window I like a big context window in terms of like what’s going on I have this is an exact representation of what I’m seeing on the page is like a kind of nice thing instead of oh yeah got this like reusable component over here that I’m importing 400 things from the component file you know folder on my frontend app and like what is this doing again and you know I like the idea of it all just being in one there’s huge benefits of that um yeah so that with partials and triggers are like can just like a consistent and and sending events from the back end like that to do something when there’s a successful event or whatever and you want to show different You Want To Hide A you want to hide something when there’s something’s going to come back right you can like trigger transition of that when the event happens and then swap it in so there like some nice little things you can do yeah yeah so all right so I mean I’ll just you know I don’t want to I don’t want to take too much of your time here um but if you have do you have a few more minutes just to so you know this is kind of an incredible like large scale app that you’re building um I don’t you know this is probably just in terms of of different people I’ve spoken to on the on the podcast this is definitely in the larger scale and also like you’ve gone deep on some HTM X stuff so if you know just from my perspective anything that you are that I’m sure people would be interested to see anything that you’re willing to share I know this is a private kind of app and stuff like that but some of those tips and tricks like you know I think are are awesome to to see and you know um if there’s anything like that little Snippets and stuff like that you come across um what in the vein of that what’s your sort of um what’s the angle or maybe that’s maybe you don’t know yet of the essay that you sort of talked about um someday you know putting together for the HDMX oh dude it’s like I I think it’s um like 100% like love hate nice I there are like I said there are pieces where the hmx version of the exact same thing like outshine y there’s and I I think I tweeted something about this like as a um what may appear to be like little things little little features that aren’t material features that you can just easily add that you can’t so easily add because you don’t have that data or whatever right in the uh in the front end right but the things you can just those little the cination of those little things you can add those add up to then be material yeah so I think that that kind of love hate of when you’re trying to do really big calculations and you don’t want to redo this and I just thinking you have to get into Cash stuff just to make it functional yeah that sucks and that’s when I like want to burn the whole thing down like 100% okay but then temporary calculations yeah and then I would miss all those like easy wins like there’s just so many easy wins with um hmx right there’s a single source of validation right and most of the the responses like they’re so fast on sections that I don’t even worry about validating really on the front end other than like this Fields required we’re not hitting that kind of thing and just do it it’s super fast right and again I’m not scared of requests like that’s not a big deal like whatever we even at scale we’re not going to be a big we’re going to like invert the thing largely right is that per user they’re more valuable we don’t need a lot of users to be valuable versus like a Facebook where it’s like they’re not valuable per user they need a ton of users so they run Dev volume and scale and all those things yeah there not even an issue on my mind like keep just requests all day long who cares right Facebook’s not doing the sort of calculations that you’re doing either yeah and I mean they’re doing some stuff on the back end for sure um but I think a lot of that’s like pre calculated and so on and a lot of ours are dynamic in a sense um which is a little bit more challenging um I think we can move a little more to pre-calculated later as the system gets better then it’s just kind of like a later validation yeah yeah right which would be super nice um yeah and if it does I have no idea I don’t know what the how many who need to the system goes oh I know how to do this now I have no idea or if it’s possible I don’t know we’ll see um yeah but yeah those easy wins that would Pro that would definitely be the like tradeoff from like uh day to day like you go try to do something and sometimes I’ll just be like I’m going just write this in the Gs framework other times I’m like [ __ ] I’m I don’t want to have to go get all that data send that forward godam rewrite all all the interface all the types need to be uh because it won’t compile because it’s all in typescript and now it’s not matching and that doesn’t exist like I don’t want to deal with that I’m like go write the hmx one yeah at some point at some point we got to do a break here because the maintaining of all of it is not a like not a good thing so I think the the next big thing and probably something I would suggest for people that are going to get into where you’re really swapping hard into the dog which is HMS you’re just slamming into the dog um The View transitions API like I need to really dig into that and probably write the package to dynamically do what I want to do when to where I want and so on and I think that can be done um and maybe that’ll be a really nice thing for people to be able to use because I think that being able to define that transition where you want it easily within transitions within the view transitions API I think would be like I think it’s just the polish that is what is probably the limiting factor interesting yeah and I mean with the view transitions like I said I haven’t really gotten into them yet they’re still relatively new and that’s sort of um one of those things that now that it’s in the browser yeah like it’s only going to get better so I think I think leaning into that as like the future you know way to sort of approach that feels pretty good to me yeah I forgot what that that recent thing with also the that has been an ISX Prof profile and I I looked at it and saw kon’s tweet on it with like the move before whatever like whatever that feature was that was finalized now in chrome or whatever little things like that that are super becomes more necessary eventually but not something to worry about too much.

Right now, no. I’ve said this too; I’ve said this too. I think that if you’re really solving a fundamental problem or a problem that people really care about, they don’t care. They’re going to give you way more leeway on everything else.

Absolutely, yeah, right? So like Craig’s List, it’s like the greatest example of just like the worst but most amazing website.

Yeah, yep, they somehow managed to keep Web 1.0 and be extremely useful, and nobody cares. No, I mean in fact people probably prefer it in a lot of cases.

Yeah, so, um, I mean I think it’s super intuitive. There’s no weirdness; it doesn’t feel this is the last thing I was saying about these things is, uh, JS Frameworks. The outcomes are very pretty. I’m talking like a fat client, right? Like a big giant fat client. They they’re really pretty and you can make them like super elegant, but there’s a sense of fragility to them, at least from my standpoint. Like things just feel a little like it could—you could slam it with something and it would break, right?

It is about right; you could slam it with something and it would break.

Um, but like the HMX version, yeah, it’s like slower and it’s a little clunkier, but like it’s like a, you know, solid old pickup truck, you know?

Yeah, I sometimes just when I’m developing my own stuff, I sometimes think of it as what I’m building is almost like a magazine page. Like I don’t want anything jumping around. I don’t want anything to feel that feeling of fragility that I think you’re describing. Like to me, there’s something when you get a server-rendered HTML page back, it just feels so solid. That’s an experience for myself and hopefully for other people because it’s something I care about that they appreciate too.

Well, here would be like a great example, right?

So headless UI, like package, um, that I use on the front end. So the autocomplete, great, right? Yeah, problem is that if the lists are large, if you have a very large list in an autocomplete and JavaScript is rendering that every time it moves what’s in view, right? It’s not like it’s just sitting there.

It’s kind of like, and it boogs. It’s terrible, right? I send the same in just the HTML dropdown. It’s just an HTML dropdown. Everything is fully rendered and you just zoom through there because the browser is like, this is just HTML.

Yeah, it’s not being re-rendered, so there’s like little things like that where you’re like, if your list is big enough, like, it’s weird when it’s if it’s going to—because you, yeah, like they don’t want to re—they don’t want to render the whole thing.

I don’t know how that—I have to look at. Actually, I don’t want to look at their code to see how it’

s just fun.

Yeah, I had a small interaction today with, um, you know, I don’t really know the guy, but Dax, um, who’s on Twitter and stuff, and I had a little interaction with him today where he was saying, like, I’m so sick of virtual scrolling. Like you can’t command-F, and it’s like, you know, I responded with something like, yeah, like virtual. You know, it’s like it’s so much easier to just use strict HTML, and then there’s basically no limit to your scrolling. You don’t have to use virtual scrolling. I’ve never, you know, it was kind of a surprise to me. I’ve never seen, uh, like too much HTML where a normal browser just can’t handle it.

You have to go unbelievably large, larger than a human would sort of want to ever use to be able to do that. And you know, I think he was kind of like, well, what do you mean? Like obviously the browser can’t handle it at some point. You know, it’s like he said, I’m hitting limits and I was like, I don’t know what your setup is, but if you’re hitting limits, I’m guessing you’re using a virtual DOM. That’s just like there’s no other way.

So what you’ll do is try to use like a virtualization library within that list.

Yeah, which, like, to make it a smaller rendered amount because it’s looping over every time there’s a movement. It’s like you can just just like jacking up.

Um, so yeah, adding to your overhead for your client side ultimately slows it down. It just speaks to like the solid, right? Like I can tell you if you try to scroll too fast, it like doesn’t keep. You got to like tab through it, right?

Yeah, well, the HTML version, like the one that I’ve got, like just returns just the dropdown in HTML as just like an, you know, absolute position. It looks just like it. Um, it literally like you can just like do whatever the hell you want in that thing and browsers are ridiculous.

They can render HTML like to an unbelievable amount these days.

I don’t think there’d be—I don’t think there’s, yeah, I don’t. I don’t know what the limit is, but I don’t think there is a limit honestly.

Yeah, um, all right, so I mean, anything else you kind of want to plug or mention or anything like that while you’re here?

No, let me just see. I’m prone to being all over the place, so I’m trying to see.

Yeah, I talked about the browser cache kind of challenges, sadly.

Yeah, the Clear Sight data, that’s, you know, just the D. If you have dynamic data like the browser caching is tough.

Problems at least that’s what I run into, and I’m sure there’s [ __ ] if there’s people that can. And there are vastly more knowledgeable people than I am about this stuff.

I wouldn’t say there’s that many. Well, there’s probably look, I guarantee there are people that would look at certain things like that’s just the nature of it.

Like I said, there’s probably ways I could rework it. I was literally trying to get it as close as I could to an SPA that was my bar. I didn’t have to do it right, right? So I chose to do it.

For me, in a lot of ways. And I think over the next, as time permits, right, right? Like there’s mission-critical stuff and then there’s like not mission-critical stuff.

I would love to see just the APIs related to the admin SPA just sort of going away.

Yeah, yeah, yeah, why have two setups like that? And you’ve gained—sounds like you’ve gained a lot of the sort of having it be close to the database and close to the back end while you’re there kind of gives you a lot of extra power.

I will say that the real determination, uh, I think that the admin side will be a long-term just because of, you know, figuring out some of the big calculation caching. It doesn’t have to be like a super-fast caching. I can be a little smart about things and not have to worry about performance critical other than just resource critical. Fine. Um, I think that’ll happen. I think the big determination will be from the client side.

Will be how I, if I’m able to really get into and understand transitions. Make things smoother and just a better experience. I think that’ll be a big piece and, to be honest, if I never get the full, if I just—the client component is always a JavaScript framework and that’s the only JavaScript framework and it’s a fraction of the whole thing. It’s a huge win.

Huge win, and what I can do is mock up things in HMX and get the whole thing worked out exactly how I want it to be in HMX where you can just go grab whatever you want and have a very well-defined setup that then defines the API response.

That’s a really good way to kind of do it too. Right? It’s like work out exactly what you want, all the data you’re going to need, all the little interactions you want. Then once you have it nailed down pretty well, you can easily transfer it over to an API. If that’s what you need to do from a pure client-side. Interesting just depending on your setup.

But yeah, yeah, like I mean if I’ll just put this one out there just because I’ve been thinking about it a lot. Have you looked at Data Star at all for sort of a front-end SPA-like behavior but you’re controlling it from the back end?

What I would—I shouldn’t say problems, I just say challenges. The data coming—it’s still data coming back from the back end. It’s still a back-end issue. You still have to figure out the usability component of big calculations that I can again just run once and share them around as needed for different things, right, to look at everything. You don’t have that need for them to be on the back end necessarily.

Yeah, like they can work on the client side if you wanted to.

Yeah, like it’s—and I’ll, I’m happy to show a couple of things if you want. Like it’s not that it all has to be broken up.

Because again, like some of them are, they all require the same data coming in. There’s a lot of interrelated—what they need and how they’re calculated. It just becomes a bit of a challenge if you’re returning all of that to HTML navigating through 20 different possible tabs where all those, you know, keeping track of that without like an Alpine JS or something like that would—I could do it easier in Alpine at least, probably more maintainable.

But just have an object at the top with, you know, that here’s the count we’re on or whatever, like view we’re on. And yeah, yeah, you can define all your variables and only client-side, and that’s fine.

Like that’s perfectly—that would, that and maybe if you are doing something really intensive like that, then maybe I would suggest don’t be stupid like me and just use Alpine.

I just was, like again, not that I don’t like Alpine, and Caleb, I think that he’s a super smart guy in terms of JS. I just wanted to see how minimal, how far I could get with like the minimal requirements, right? Which is awesome, and I think you’ll be well served by that. That’s my impression.

Regardless of like the outcome, like long term of what, if there were two JS apps still out of this—the what has been learned and the better the system is because of it.

Things have to be very well defined on the back end when there’s no stored state out in the front end. You can kind of make a bunch of changes and send those all back, and whatever the back end, like this specific view, only knows that. It requires much more defining and a structure, and I think just a much better software and scalability from that standpoint.

Things have to be much more structured than they do in sort of a—just go, like I said in a couple of tweets, like the JS Hammer. Just go fix everything out front if you want to.

You can do that really easily. You don’t have to be as disciplined about sort of where you get your data, right? We didn’t know all the questions that we wanted to ask at first, right? So really defining a model with all the questions and not having like endless migrations later on and so on. So there was like a JSON feel to start, right? Because it highly just like figured out as we went along as that it kind of coincided along with the HMX rewrite. You’re not going to go like deal with JSON within form fields and so on, and a back end as CH all world it’s just—but to the front end it doesn’t know the difference; it’s JSON; it’s like this is my native language.

It’s a much—I think you just get much further along in terms of like setting a solid structure. You’re ultimately working in HTML. What’s that?

So you’re working in HTML. So, ultimately, your browser wants HTML. So if you’ve built the whole thing in HTML, that’s one of the benefits of HMX in my mind. I just think like if I had known about it like years ago and it had probably been a little like where it is now years ago, I would have definitely started with that—with HMX as this default.

I just think that it’s a win well, yeah, there’s a thing where so the behavior I have now is I know the behavior I’m going to have in however long. It’s kind of cool about that. But I know I’m going to have that behavior.

So some of those pages have the reload, like on a timer, just to do it, right? They have to be up to date, yeah, absolutely.

Yeah, yeah, I still don’t know where—I don’t know where, but I’ll write about it eventually. Carson, if you’re watching, at some point, yeah, well I hope you do as well because I will, I am very interested to see that. Just put in a plug for it.

It’s tough when you’re a working dev to be doing writing and other stuff on the side.

But I really appreciate you talking to me about it. I hope it was at least moderately entertaining and helpful, but I’m loving it. I love going deep on this stuff and talking about it, so I appreciate you taking the time to do it.

Yeah, totally. Totally, it was really fun. I appreciate it.