Empowering Junior Devs with htmx - Sheena O'Connell
Alright. So thank you for joining today, Sheena. I'm joined by Sheena O'Connell. And let's see, so you online, you are an educator, software engineer, writer, and creator of systems. So does that sound is that updated?
Lazarus:Is that up to date? Does that sound right?
Sheena:It's pretty up to date. It's very hard to summarize what I do. That's that's the the best that's the that's the current working version. Yeah.
Lazarus:And so so you've been, you said you were just recently at a conference?
Sheena:Oh, yeah. I've been doing quite a lot of them lately. So I sort of fell in love with conferences a bit, recently. Like, I started going to PICON South Africa, many, many years ago, and that was the one conference that I always went to. And a couple of years ago, I went to DjangoCon US, which was my first like overseas big conference and that was freaking fantastic and since then I've been I've been going to a lot.
Sheena:So this year, I went to Paco in Italia. I'm actually wearing their fantastic t shirt. It's so funny.
Lazarus:From Italia. Import nice. Yes.
Sheena:Yes. I like the Italians. They're great. Yeah. That's good.
Sheena:Yeah. It was it was a very funny conference. And I came from, Europie EuroPython, just now. So I was there
Lazarus:Oh, wow.
Sheena:Doing a talk about AI in education, and that was quite a lot of fun.
Lazarus:Yeah. Wow.
Sheena:And then the next one coming up is DjangoCon US again. So I'm quite looking forward to that.
Lazarus:Oh, you're a keynote speaker at it?
Sheena:Yeah. Yeah. So I'm quite Wow. Awesome. Excited about that.
Sheena:Yeah. So also just talking about, tech education and stuff.
Lazarus:Okay. Awesome. So so you I mean, it looked you know, just looking at the I mean so I'll just say, first of all, reason for, you know, asking you to come on and thank you so much for for giving me some time on this, but, you you put a post out there, called an HTML success story, where you kind of, like, went through, you know, your your business and or at least one project, I should say, of your business and kinda talked about that. So that's just kind of some of the some of the background. But mainly you so it says you also teach other tech educators.
Lazarus:So you're like an educator of educating like one meta level above a tech educator.
Sheena:Yeah. Yeah. So I've spent a lot of time teaching people individually. So I started working for Uzi, my current employer, 2019. That was a while ago, back, before the pandemic when things were a little different and taught a lot of people, foundational skills.
Sheena:And then we scaled up and went remote, so now I mostly get other people to be good at teaching. And that's quite stimulating. It's, there are a lot of rabbit holes to to go down over there, but it's, like a nice intersection of software and UX and techno and and psychology. So it's quite a lot of fun.
Lazarus:Interesting. So okay. So you and you said you're about you're based in South Africa. Yeah. And what was the name of the company?
Lazarus:Umuzi. Umuzi? Okay. C
Sheena:I. Yeah. It's it's all over
Lazarus:the place. Umuzi. Okay. Yeah. It means what?
Sheena:It kind of means home. It's it's one of the
Lazarus:things that I'm talking about.
Sheena:Direct translation into English, but it kind of kinda means home.
Lazarus:Yeah. I think English speakers are always a little surprised when there's a word that doesn't translate. It's like, what does that mean? But then it's like, then you find out like, oh, okay. Yeah.
Lazarus:Yeah. Yeah. So your day to day is kind of like a lot of teaching of other, stuff, like, still some teaching of other teachers, but now you're sort of moving to more conference and talks and stuff like that and articles.
Sheena:So the conference and talks aren't really part of my job. This is like, I I like side quests quite a lot. I I struggle to just do one thing. I I need
Lazarus:to go and and do everything for him.
Sheena:No. No.
Lazarus:A real life Zelda player. There we go. Okay.
Sheena:Yes. A lot of side quests. So at work, yeah, primarily at the moment, I'm working on just like big system things. Like, we're scaling up in different ways and need to deal with different kinds of accreditation and things like that. So at the moment, it's entirely exciting that it is stuff that needs to be done.
Sheena:For play, I I do the conference things, and I try to I try to do a lot of tech education stuff in my own personal capacity because it's just like really it's close to my heart. It it matters to me a lot. It's one of those things where it's the intersection of what you're good at and what the world needs, and, it it seems quite necessary right now just because the tech education space is really a bit of a wild west. Like, there's lots of boot camps and everybody's sort of inventing their own way of teaching things and, there's a lot of people out there with, you know, the heart's in the right place, but they're falling into the same pitfalls that I fell into, like, years ago. And let's avoid that.
Sheena:And there's also a lot of just pseudoscience around learning that is wasting a bunch of people's time. There's a lot of bad practices. So something I'm super interested in at the moment is, like, open source communities tend to have a lot of well, the Python open source communities tend to have a lot of an emphasis on teaching and supporting each other. So in Python, there's like Jamo Girls and that's about teaching women to do web dev. And there's PyLadies as well, which is again, like a woman focused one.
Sheena:This is something else by, like, Numfocus, which is more focused on data science. And all of these things are fantastic and, touch a lot of lives that they're completely volunteer run. And the volunteers are they have their technical skills, but they haven't been trained as teachers and there's actually a whole skill set there. So my current thing is I want to figure out ways to just amplify things like that to make them more effective, by making content and potentially potentially certain interactions. So just say, like, okay, cool.
Sheena:Let's let's just take these volunteers and make them, like, more effective.
Lazarus:Right, right. Nice, that's cool. So so like an example of something you might so like are you sort of showing people, you know, for instance how to make a video course? If so they're trying to make something for people or is it more like in the moment when you're like setting up events and stuff like that?
Sheena:So it's more like in the moment of teaching. So, something I've seen a lot. When you're kind of watching peep like, volunteers in a room looking after a bunch of noobs, you'll see, like, one of the noobs is like, oh, no. Help me. And then volunteer will go off and be like, I'll help you do it like this.
Sheena:And then they just, like, solve the problem. And then they feel really good. They solve the problem. And and the new person, they can continue on that they've learned nothing. So a lot of what goes into good teaching is making sure that the person that you're teaching actually interacts with the content.
Sheena:And, like, the way I think about it is, like, sort of like a bit of a loop. So step 1 is like really get into their head and try to understand what they are like, what is their understanding? What is their actual problem? If they're getting a question wrong, sometimes it's easy to to feel frustrated. But if you can replace it with curiosity, then things seem to work a bit better.
Sheena:She was like, oh, it's really interesting that you thought that. Why did you think that?
Lazarus:Yeah. Like like, what is your mental model for, like like, you know, you have to figure out what's happening in their head, and then you can, like, boo. Okay. This goes here now.
Sheena:Yeah. So it's like ask a bunch of questions upfront. A lot of people say hands off the keyboard, but I say hands on the keyboard if you're, like, in an intentional way. Not to solve their problem for them, but to say, okay. If I do this, what happens?
Sheena:What do you think?
Lazarus:Yeah.
Sheena:That's that's very helpful. So try to understand the learner, step 1. Then, step 2 is to say, like, okay. Cool. I found these holes in your understanding.
Sheena:Let's plug those holes. Okay. Now let's check that I plugged those holes, by saying, do you understand? Because if you say, do you understand? They'll say, yes.
Sheena:Yeah. Yeah. I get it. Yeah. So it's it's like teaching those little, like, little loops like that.
Sheena:Like, just little frameworks that people can follow that'll make them way more effective without actually needing to know all of the science of of how learning works.
Lazarus:So so you're making it sound like a like an actual dev framework. Like, you've got little loops running and you're, like, you're using you're pulling you're pulling in different components based on what you need for that person's projects. And then you're like accessing, okay, you run this loop now and then this one. It's, like, really a frame. I mean, it's, like, mental models.
Lazarus:Funny. Yeah. Yeah. That's funny.
Sheena:Yeah. It is it is very much like that. It's been quite helpful to go and talk at conferences about things like this because it's forced me to distill this knowledge into a format that's like, okay, I need to fit all of this into, like, the 45 minute talk. How? How?
Sheena:And then you're like, okay, what's the most important bit? Cut away a whole lot of, like, oh, actually it's just a loop. So that's been that's been very helpful. Yeah.
Lazarus:No. That's cool. So yeah. So the the HTMLX project, the HTMLX success story that you wrote about, is this for your job or is this, like, is this for your, you know, official job or is this part of your kind of other research
Sheena:and projects? Yeah. So we've got this, actually, I can't really talk about that. So when COVID happened, it was really hard because we were an on-site training provider and we had people that would literally bust into this place called Jeffiestown in South Africa, like, from all around the country. And we had this, apartment block that we, turned into a bunch of studios where people could work and we set people up with accommodation and then COVID happened.
Sheena:Like, shit. What do we do now?
Lazarus:Ugh. God. This is the one thing that nobody is allowed to do.
Sheena:So so we had to send everyone home, but we want that all set up to support them, like, even a little bit. And learner management systems exist, but there aren't any, like, really tech focused ones. There's a lot of, LMSs that have, you know, GitHub plugins and stuff. It's like software development as an afterthought. It's not, like, baked into the thing.
Sheena:And so we ended up deciding to build our own, and then use Django for that because it's fantastic. I really like Django. Yeah. But at the time, this was, this was early 2020. So I think it was, like, lockdown happened in March for us.
Sheena:I think that version 1 of HTMX came out in September or October, so like that wasn't a thing at the time. And so we had Django on the back and then a bunch of APIs with Django race framework and then used Guardian to have, like, object based permission and things. And then on the front end, we had React and Redux and, Saga. And it was it, like, it worked really well. It's a common pattern, and it's great.
Sheena:And, like, I knew all those tools so I could just go into my cave and hack at this thing and make it happen. But it became quite difficult to get other people to be productive on it because, a lot of the people on our team were pretty junior coders. Well, at the time actually, like a lot of people on our team were leaving, But, we were we mostly worked with a lot of junior coders. And the reason for that is because we teach at a very fundamental level, what we did at the time. So, like, if you're trying to teach somebody how a for loop works or how a return statement works, you don't need, like, some senior developer or, like, some senior lecturer.
Sheena:You just need, like, somebody who knows what's up and they have a teacher's heart. They sort of know how to teach. And so we had all these, like, junior developers running around. And if you don't give them something to build, then they sort of wilted a little bit. And so I was like, cool.
Sheena:Let's try and get them let's try and get them going on this. And it was just such a difficult process, to get people productive because it's like, not only do you need to understand how, like, the back end and the front end interacts, like, really well, but, like, there's a huge stack of tools that you need to understand. And,
Lazarus:yeah, so just keeping it running on the
Sheena:Yeah. Yeah. Just setting it up was like an ordeal. And we made it as, like, as simple as possible and made the docs really good and, like, put a lot of effort into learning how to craft tasks well because I think that there's, like working with juniors is hard. It's like a skill set on its own.
Sheena:Like how do you get these folks to be productive? And we're a very, top we're a very bottom heavy team so I have lots of juniors, not that much at top to to support all of them. So it's like shit, how do we get these people to be able to do stuff? And it was yeah, it was tough. Like, tried and tried and was tough.
Sheena:And then when h tmx came along, like, I didn't really dig into it until fairly recently because front end development land has like a lot of like a lot of fashionable things happen, and they come and they go, and there's just way too much to know about. And so I was like, oh, HMX, it's another front end framework, whatever. Yeah. We went to a DjangoCon, and, somebody there was talking about their movement, their shift to HTMX and how it made their sights just like way faster and lighter. I was like that's really interesting because we actually need something faster and lighter because the people we teach are, often like in pretty underserved communities or underserved people, and so they don't necessarily have good devices.
Sheena:Like, from a resource perspective, this sounds promising, but rewriting an application is something like like if you get that thought, you should like step away from the keyboard and have a conversation.
Lazarus:Yeah. Let's make sure this is it's every developer's first thought, and it's not always the best one.
Sheena:Yeah. Stop, drop, and roll. And so I I just, I wandered around the conference. Like, whenever I heard, like, H2X, I, like, got into the conversation. I was like, tell me more.
Sheena:And,
Lazarus:there were
Sheena:a lot of just, friendly, knowledgeable people who've who've been using it, like, for hard problems, and it just sounded like it would work. And it seemed like a common pattern now in Django land is to use HTMLX with, like, a sprinkling of Alpine JS, and it works wonders.
Lazarus:Yeah.
Sheena:So I tested it out, and I made sure I was like, okay. Cool. What are the all the hardest parts of this application we're building? And all of it. Like, I I proof of concept, like, all of it in an afternoon.
Sheena:And I was like, hey. Okay. Then I tested it out with some team members. I'm like, can't build this. And I was like, oh, I think you did a really good job.
Sheena:Yeah. And so the technology itself is super exciting for me, but like the potential ecosystem shift is really exciting for me because I think junior developers really struggle to get work, especially junior web developers, just because like web dev has gotten really complicated. When I started it was simple, and now it's hard. And it's hard for people to get jobs and be productive in those jobs, and it's a giant mess. And if you can just, like, take things and simplify it and make make people productive, That's awesome.
Sheena:So I think it's going to make junior developers more hireable, which is a beautiful thing in my opinion.
Lazarus:Yeah. I mean, I think, like, just my experience with getting started with HTMX feels so similar where it's like, I so you sort of just can't believe that, you know, that because I mean, I I will say I never got deep into the React world. I did try with Vue, Vue JS. That was kind of my my biggest effort in that direction besides, like, Ember way back in the day. And, you know, it was now when I go back and I have to work, you know, I saw I I do projects and I end up sticking with them.
Lazarus:So I have projects from, I don't know, 15 years ago still running that I still update. And, you know, it's just kind of how it's worked out. My clients never leave, so I've got some old clients hanging around and and my own projects. And so when I have to go back to my view projects, like that is not a fun experience. And and view has changed and I can't do updates and, you know, I don't even there's no more Ember or anything like that and I don't need to react.
Lazarus:But it's like those projects and even, you know, I'm I'm in I do Laravel. So even old Laravel and Livewire was the other one, that sort of it does a similar kind of hypermedia. Have have you I think Django does Django have something like Livewire? Maybe. Maybe not because Okay.
Lazarus:So so Livewire is actually it's actually created by the same person who created Alpine. Caleb Porzio. It is a way to develop in PHP that sort of obscures the, server client. You know, you write everything on the server k. And your actions sort of take place and they communicate with the server and it's, yeah, it's sort of a hypermedia kind of, you know, setup.
Lazarus:But even that, you know, you when I go back to older Livewire projects, the versions keep changing, the updates keep changing. So, you know, what you're talking about where you have, you know, people who are coming to you and maybe their maybe their browser is not going to be the most up to date. Maybe their device is not going to be the most up to date. Like what I've found with HTMX is I can slap it into any there's I have not come across a single project of mine that I can't just throw HTMX into the head and then use it and build something super cool and modern with it. And it's just like I'm like, this is unreal.
Lazarus:Like I you know, I have I don't know how many projects out there but every single one of them now when I work on it, I'm just like, yeah, I'll just throw a h t m x in there and that's my new, like, my new features are all gonna use that because why not? I don't have to do anything else. That's kind of unreal. So yeah.
Sheena:It's so so powerful. There's still, like, a lot that I wanna learn about it and, supporting tools as well. I was listening to your podcast to figure out, like, who's this? It was really good. Like, yeah.
Sheena:So it's, like, hyper script.
Lazarus:Sorry.
Sheena:Just froze. I have not looked into yet. That looks super cool as well. I know.
Lazarus:Sorry. You just froze on me. Okay. Sweet. Last thing I heard was just, like, who is this guy?
Sheena:Oh, I just wanted to know, like, who who are we talking to.
Lazarus:Yeah. Yeah.
Sheena:Yeah. Personality wise, but I I've I've actually been enjoying the content. Yeah.
Lazarus:Nice. There's not a ton of personality in the pod I mean, it's more educational, I would say, at this point than a real podcast, but I'm trying to move it into, you know, conversations and stuff like that. So yeah.
Sheena:It's it's good. It's it's, I I I've been enjoying it. I'm I'm definitely gonna listen to it more as well.
Lazarus:Oh, nice. Well, yeah. No. I like I actually like making educational content. So, you know, I think it's I I think it's actually super cool what what you're doing.
Lazarus:And and actually, you know, the last interview I did was with, Carson Gross, the HTMLX creator. And and he talked about, you know, he's a teacher too. He's a professor. And it's all about teach like, the there's a certain h t m x ethos and it's like helping new developers, helping young developers, helping people, you know, have a concept. And, you know, his whole thing is sort of practice before theory.
Lazarus:Like first you learn a little bit, first you learn how to do stuff, and then you can talk about the theory and fill your gaps and stuff like that. That's nice. That's cool. Yeah.
Sheena:I will listen to that one. It's really awesome. I suppose like if he's explicitly designing the stuff to make it easy for new people to get into web dev, like so, one of the cool things about Python is that it's really newbie friendly. So keep like, it's a great learning language, but you can also do hardcore things with it and so people tend to learn it and then just stick with it. Because you like yeah, you can just do so much and HTMLX feels like it might go in a similar direction as well if it is like, a tool for teaching people, but also hardcore.
Sheena:So yeah.
Lazarus:Yeah. I mean, it's very low level, which, like, is powerful. You know, if if you are the sort of person, and like I think a lot of people are, who can sort of take those low level ideas and and find in new and interesting ways, you know. I think there's there's a very high ceiling. I think that's true with, you know, Django from what I know about Django.
Lazarus:I don't really use I use Laravel, but they're similar in a lot of ways. But yeah, it's a very high ceiling. There's not really much you can't do with it. And I kind of feel like, you know, with HTMLX, it's sort of on the same thing.
Sheena:Something I've been doing that might be a bit of a hack. I'm not sure. Like, sometimes if I need to have a more complicated interaction as the, as the response from the HTML call come comes in, then I'll have the HTML that needs to be appended or whatever wherever it needs to go. But then I'll also add, like, a little script tag saying, like, call this and call this function also. And it's been working really well, and it's not, like, it's it's not code that can be sketchy.
Sheena:It's not code that can come from a user and be injected into the front end or anything like that. But I'm not sure if it's, like, I'm not sure if it's bad practice at this point.
Lazarus:Yeah. See, I think so one thing, I think it's very low opinionated on what's good practice and bad practice. You know, from my perspective, so let me I'll just, you know, this is strictly my own opinion. So like what's an example of a like a JavaScript you like a so you have the functions already defined in your main, you know, somewhere else. You have them defined on, like, your your main template or whatever.
Sheena:JavaScript file somewhere. Yeah. So an example is, so we've got a Kanban board. So the learner management system, from the learner's perspective, it's a Kanban board because we're trying to get people embedded in something that feels sort of like a professional environment even from, like, when they're learning. And so if somebody clicks a button on one of their cards, it might change the state of that card, but it also might not.
Sheena:It depends because sometimes the loan is trying to do things that aren't allowed and or some sometimes there's some blocking thing. And so, what happens is that there's a call that goes off to the back end and then it comes back and it's like, Here's what the card looks like now and the status has changed to this. And so maybe the card will stay where it is and maybe it will move. And so the the JavaScript that pops up is to say, like, cool. Let's move it across.
Sheena:And there's also some stuff about modals and alerts. So it's like, okay. Move it across and call this other function that shows up in modal, and then that's that's that uses Alpine, to do that. So those like extra little script tags at the end, have been very, very helpful. And it's, you know, it's fairly simple to reason about.
Sheena:I think that there's a lot of danger of creating spaghetti code with, like, all these little partial templates in the back end, and some of them have extra behavior and some of them don't. And so you have to be, like, very, very particular about naming conventions and whatnot.
Lazarus:Yeah.
Sheena:Yeah. I'm just curious to see if anybody else is doing something like that.
Lazarus:So, I mean, just the my first thought and and, like, I don't do a ton of stuff like that right now. So I'm not like the I'm not an expert. But my first thought is that that sounds like events. Like it sounds like you, you know, you might if you're running just like straight, like, JavaScript code to call a function, there might be some setup because the h t m x hat does actually have a very nice kind of integration with events and you can trigger stuff from events and you can, you know, call events directly from, I'm trying to remember what some of the some of the attributes are. But you can work with events.
Lazarus:So h x on is kind of your, oh, did it is it freezing a little bit? Yeah. So so h x on is like your sort of event, you know, one of your main event ones. So you can h x trigger, you can trigger stuff from events but h x on is like you can set your own. You can write your own JavaScript code in there directly as well.
Lazarus:So maybe it makes sense in your case, like but, like, I mean, I'm of the mind, like, if it works and it's mentally makes sense and you can follow it, then that's good. But, you know, I I would say like it sort of sounds like an event situation because you're gonna be reusing a lot, you know, move card or whatever is maybe some event and and that trigger you have that set up. But it's it's basically the same as what you're talking about. Like, you're just calling the function and, so I mean that sounds fine to me. And what I usually do honestly is, like, I do less on the client side I think so I'm a little maybe more willing to, in the case you're talking about, if the card is gonna move I might be refresh I might be redrawing that whole section.
Sheena:The whole column.
Lazarus:And then
Sheena:columns. Yeah.
Lazarus:Yeah. I mean, you know, it does depend but like that's or I might figure out on the server side which place it's gonna go to and then, you know, you can you can target that. You can choose like, okay. Okay. Even with the, you know, with the you can do like the h x swap OOB where you set the target from the server side which place it's gonna go to.
Lazarus:So I do think you have some options there but, like, I'm not really, you know, I I don't really feel I feel like part of this because it's low level, you know, if you find an option and it's also relatively new, so you might find something that other people haven't thought of. And, like, if it works really nicely for you, you know?
Sheena:Yeah. Yeah. And it's I I think it's easy to reason about. Like, you don't need to learn any, like, even any HT. I suppose if if you're comfortable with a certain amount of DOM manipulation with plain old JavaScript, then then it's key.
Sheena:But if you're not, then so I guess it depends on what skill set you have coming in. Yeah. That's cool. I have another question for you. Oh, yeah.
Sheena:So Hey. Wait a minute. I'm interviewing you. Okay. You go first.
Sheena:No. No. You go. So, I think it was Livewire that you mentioned that sort of abstracts the communication between the client and the server. So you write stuff in one place, and it just happens to happen on the front end, and it happens to send some stuff to the back end.
Sheena:And, like Yeah. It seems interesting. Like, I I I write code in next as well with like another thing that I do, and I find that like having all of the code in one code base where you have like some stuff's on the server and some stuff's on the client, That's convenient in a lot of ways, but it hides details in a way that's like, it makes me uncomfortable, I suppose, because I find that like with working with junior developers again and people who are early in their career, if they aren't quite sure where the thing is running then they sometimes make subtle mistakes. It's just like, Oh, in order to understand that subtle mistake, you actually need to understand this body of knowledge and that that is happening over there and communicating like this. And so it seems to me like that's a nice way to, get people to implement all sorts of weird bugs.
Sheena:Like some stuff should just stay explicit and not abstracted. And I think the other side of that is, like, some, like, let's take something like, so let's say there's a back end piece and a front end piece and they're talking a whole lot, and you can't quite reason about how that communication is happening. Like maybe there's something really inefficient happening on the backend. Like one of the main arguments that I've found against things like GraphQL. Like, there's the n plus one problem, but there's also, like, if you're writing these queries on the front end and they're using a database, you're not necessarily like writing optimized queries.
Sheena:You're not thinking about it at all. And so it just causes all sorts of, like, it makes it really, really hard to optimize the back end, because certain things have been abstracted and made easier. So, yeah, like, what do you what do you think about abstracting the communication between the print and the back end?
Lazarus:Yeah. So I guess, you know, with so I like, I I I love LiveWire, and, I think that sometimes those abstractions are yeah. That's tough because, you know, I'm mainly switching to HTMX, but I'm not sure it's because of that. Like, you know, I do think, for instance, with HTMX, every single time, you know, I'm adding a new route and I'm adding and that's okay, that's fine. With Livewire, I'm not sure that you know, you don't really need to sort of to sort of plan out every route.
Lazarus:It's more about the the usage of it. And if it works, you know, that's that's the problem is, like, as long as everything works, you don't it's okay to not think about it because it's very clear when you're looking through a LiveWire kind of thing. You know, you know, your mental model doesn't need to be much more complicated than, like, this is gonna happen on the client and it's gonna let the server know and the server is going to do what it needs to do and update the page correctly. Like, there isn't a much more complicated mental model. Obviously it's doing a lot more complicated things like in reality of hydration and but you don't really need to know any of that stuff.
Lazarus:And in my mind that's okay for most things. I think the only issue I've had with with using Livewire for stuff like that is that because it needs to keep like a virtual dom essentially in itself, you end up, once you have a lot of things on the page, you start to feel that more. And I feel that way with react and vue and those things too. The more stuff you put into the client side where it has to keep that in memory and has its own mental model, the slower your client side starts to feel. And I'm someone who likes to put a lot of data on the page.
Lazarus:I I like to, you know, most of the apps I work in, maybe it's just the users I work with, but they wanna see a list of 500 things sometimes, you know. And trying to do that in react and, you know, it's like it's just you they wanna scroll and stuff like that. So I don't really have an issue with the abstracting it away. Maybe just because I think Livewire did a good job of it. Like when you're reading the code and you're on the back end or on the server side there's really there's the the function, the component they call it, and then there's the, you know, the blade, the template.
Lazarus:So those are really the 2 parts. So when you're looking at the code, it's pretty clear to see how though there's only 2 places to look and it's sort of clear to see how they're interacting. And you just sort of make that assumption that they're going to talk to each other. So yeah, I guess in the big picture I don't really mind it. But yeah.
Lazarus:I I do think there's there's some, when there's an error, that's actually one thing. You know? Livewire, it's it's good. It's there's no when I've had problems, I feel very lost, I will say. Because, like, it's beyond my you know, there'll be like, what's the error?
Lazarus:It's like essentially a hydration error. This ID doesn't match or something like that. And it's because in the communication they hash both sides and those hashes have to match. And usually it's because I gave a variable the wrong name or something. It's a protected name like ID or something like that.
Lazarus:But when there's an error it's, like, very confusing what it is, but the errors are not that common, I guess I would say.
Sheena:Okay. Yeah. That's, it sounds like LiveWire has put some effort into making things clear, the end user or the Yeah. The programmer. That's that's quite nice.
Sheena:Yeah. Things like next is like, what? So this is happening on the server. You just say use client and now it's on the client, but it's like but they're calling each other. Yeah.
Sheena:It's like not it's it's not obvious. Yeah. I always worry about things that just feel too much like magic. That's
Lazarus:Yeah. And there's probably a bit of that for some people, but I I think because Livewire starts from the back end and most of the people who are programming with it are so comfortable with the back end, you know, it's it's almost like this very cohesive, comfortable back end experience, but now you get to access a little bit of the front end. So that's kind of I think that's sort of the, you know,
Sheena:That makes sense.
Lazarus:Keeps people from makes this backwards like the other way around.
Sheena:It's like you're comfortable with the front end. Let's just like make the back end accessible with the switch
Lazarus:Which sounds so hard. Yeah. Like, the back the back end world is so you know, you've I mean, you've seen Django, how it's built up over the last 20 years. Like, you can't just kinda, like, throw something together for the back end. Like, the back end is a big world of, you know, features and everything like that.
Lazarus:So
Sheena:It says the front end these days. It's, it's huge. Yeah. Going on.
Lazarus:Yeah. Oh, there. Yeah. Yeah. Yeah.
Lazarus:Okay. So yeah. So let me let me, just kind of the the HTML first of all, I'll just say the HTML success story article that you put up, was a great article. Just like diagrams, video embeds, very, like, natural flow to it. Thanks.
Lazarus:And one of the things you mentioned was kind of the the h t m x limitations. And and you said that you kind of came over those, like came up against those and used reach for alpine. Is that is that sort of the general is that I guess what did you feel like you were you know, I didn't really come from the react world, but you've been building with react. What did you feel like you lost from React when you started using HTMLX?
Sheena:I think the one thing was, so Alpine, the way I explained it to myself is that it's a really tiny little state management library, and React is really good at state things. So you just say, alright. This Boolean this this attribute is, like, true or false. And if it's true, that thing's showing. And if it's false, it's not.
Sheena:And that's very helpful. So h t m x is great at updating the DOM, but it's, as far as I know, everything is like everything goes to the server and back. In. And sometimes you just don't need that. Sometimes you just want to show a model and then make it go away and the information's already there.
Sheena:So it's that kind of thing that I use Alpine for. The other thing that I found tricky or not not tricky, just like it just feels a bit messy. So in something like React or its many cousins, you can define these components and you can just say, like, this is a button and this is my button. And I can call and I can say button, type primary or whatever, and then it'll come up and it'll look in a certain way. And it's really like, it's nice to code in because it like you can just use the same kind of angle brackets as HTML and you don't need to do anything crazy there.
Sheena:But then as soon as you want to do that kind of thing without something that supports component libraries in that way, like it just like, you have to make another plan. So the plan that we made, there was to have a, like, a bunch of templates, variables, like styles variables that we made available in all of the templates. So you could say button, class equals, styles dot primary button, something like that. And then it would always look the same way. And that works pretty well.
Sheena:And it's like, yeah, it work it works pretty well. But I think that there's probably a better way. So, I mean, web components aren't a React thing. It's it's now it's now a web thing. And so you don't need to use, like a heavy front to end framework to do web components.
Sheena:So this is something I want to look into and see if I can just, like, yeah, just get it to play nice. So there are some very lightweight frameworks. The one is lit html or litdev. I don't know what they're calling themselves. But, it's cool because it's just really, really lightweight and just like a very nice way of defining, web components.
Sheena:So that might be an option or it might be or it might be good to just to, like, go to basic, like, like, the stuff the browser knows type web components. I think that'll solve all the problems. And that's one of the big complaints that I've seen as well from people because I was like I asked the Internet, like what what what is wrong? Like what what are the boundaries of your team? And like having to make little partial templates for every little thing so your stuff is consistent is something that people don't like and it's there's a good reason for that.
Sheena:It's not nice. But I think there's a
Lazarus:good reason about it. So Yeah. Okay. So when and when you say so components so like, you know, like I I do use like I I've, you know, Alpine components is something that I, have have tried before. But I will say, like, you know, is is the big thing, like, a more visual or is it more, like the functionality of like, you know, for instance, a modal.
Lazarus:Like this is a, you know, the modal is sort of a big thing where it's like, you want it to have that feel of like, oh, okay. It's like smoothly appears and it like, you know, covers the back, you know, it's like, so do you feel like the, these components are it's more about the visual side of it or is it sort of a a client functionality as well or both?
Sheena:I I think well, for me right now, it's more of a visual thing, because the code is just feeling, like, a bit not as dry as I'd like it to be. Or if I make it dry, then it's got these, like, weird partial inclusions. And it's so so the visual thing is is an aspect of it. Like, something that we had when we were working in React that was really nice was a storybook. And then you can just, like, have, like, here is what all of our components look like and like how they behave if you give them different attributes.
Sheena:And that was great because now we have a source of truth of, like, what our stuff looks like. And you can go and play with that and tweak that, and it updates everywhere. And you don't need to, like, like, dig around on on other pages. It's just like we have a page for that. And this is like, I I don't think there's a good solution for that yet, but, yeah, it's something that comes up a lot if you're building just big front ends.
Sheena:It's like you want a a central place to keep all your front end design stuff.
Lazarus:Yeah. So so that's interesting. So I'm just trying to think what that would look like in sort of an HTMLX world. And I mean, you know, I think the main thing is you would you would have to have, yeah, these kind of like generic versions of everything. And then maybe, you know I guess the way I would do that right now, and the way I'm already doing it so I I did I put it I did an episode on, how to build a modal Was kind of one of the and this is just, you know, my opinion on how to build a modal.
Lazarus:And what I found first was like, okay. Yeah. You can take one of these other components like alpine and, you can find these modals around and Bootstrap has them. And then you just use that and you, like, fill the content of the modal with HTMLX. But your main thing is you're using this other component.
Lazarus:And that is, that was sort of my first take on it. Like, oh yeah. Okay. You can just use any modal. My second take on it, and I ended up doing 2 episodes because of this, is like, well, wait a minute.
Lazarus:Like if you that model is now using this other JavaScript library,
Sheena:it has to be initialized every time.
Lazarus:So if you're script library, it has to be initialized every time. So if you're loading it as a partial, you have to make sure you run that initial problem. And the way that I ended up doing it, and the way that I ended up doing it, and actually I was just like, I was so surprised and, I I guess happy about it was, like, the built in browser, the built in HTML dialog option. Like, you know, I spent probably an hour styling it, maybe half an hour, half an hour, an hour styling it and adding some stuff, but I used the HTML dialog tag and this work, you know, once you get, the transition going for it, you don't have to initialize anything. It you can load it as a partial, and it was exactly the functionality of, you know, the other modals that I was using.
Lazarus:You know, once you added some, basically just add some CSS transitions onto it, including like, I use transform, I use scale, so it just kind of has a nice little pop up, you know, so it kind of like grows into the thing. So I think what I'm doing right now, and I'm, you know, I also I think you're right. Like, I think it would be really nice to have a single place to go and be like, here's the copy paste like I do for,
Sheena:it. But,
Lazarus:oh, man, my voice sounds so funny when I hear that. So oh, damn. I can hear I can hear an echo for some reason. I could try the echo cancellation thing, but it's funny to hear my own voice.
Sheena:Some reason, my headphones just decided to disconnect. Wow. Back on. Could you say something?
Lazarus:Testing. Testing. Nice. Wonderful. Thank you.
Sheena:Yeah. Okay. Alright. I was like, what? Alright.
Sheena:Yes.
Lazarus:So so I I would check out, like, and this is just what I'm, you know, I think it'd be awesome to have a place to just go. Here's the component. Maybe there is and I just have a don't you know, I don't know it, but, like, here's the things that work straight directly with the browser. Maybe they need a little bit of JavaScript, but maybe not. You know, there's a lot of stuff with the browser now where it's like the the less I have to initialize each time, the less JavaScript I have to run, the more that is just built into HTML, the sort of happier, you know, I'm gonna be.
Lazarus:Because then I don't need to worry about if did it load from a partial, did it not, did they refresh the page? Like I if you don't have to think about that that's great. So, Anthony Alaribe, who spoke at h t m x, I'm sorry, who spoke at Big Sky Devcon, he did a talk on leveraging the browser, and it was like 6 points where, like, people don't know that the browser can do this was basically the thing. And and, that was like hugely, influential for me now because I think like all those times where I feel like I would have had to get a 3rd party JavaScript package and kind of figure out how to work with it, HTML has improved and the browsers have improved such that they have their own tools. And that's where I got the dialogue.
Lazarus:You know, it's like the idea of using the dialogue and then with a little bit of additions, like, that's now my modal system. So, like, I don't know. I don't know where the thing where you copy paste from is yet. I definitely I hope that exists and exists soon and like I can figure out how to like link to it because that's what I used to do. I do that with tailwind, you know, and like it's so nice to just be like, this is what I want my site to look like.
Lazarus:I just copy this big thing and I paste it in. So I still do that with Tailwind, but yeah, when you're talking about more complex interactions and stuff like that and, I don't quite feel like I have a single spot I can go to yet.
Sheena:Yeah. Yeah. Yeah. Me as well. I we also use Tailwind.
Sheena:Tailwind is great. Yeah. But it is, yeah, there's still quite a tricky thing to to get right. I don't know. Maybe maybe I'll figure out the web component thing.
Sheena:I'll let you know. Yeah.
Lazarus:No. I'm I'm curious too because I it it is like a phrase I hear, a web component, you know, and I'm just like, you know, is this the sort of thing that I'm looking for? And I I don't really know the answer to that yet.
Sheena:Yeah. Like, it's one of those things that a browser can do, and most people think it's it's a thing that React can do. It's like no the browser can do this too. So Yeah.
Lazarus:And it's Yeah. No. No. No. I was surprised.
Lazarus:Yeah. No. I I I'll see if I can send you that link. The problem was they didn't post that was one of the videos from the big sky devcon that didn't get posted on its own. So it's kinda like a little harder to find.
Lazarus:But yeah. Anthony Alaribay and he's just a smart guy and and is doing kind of a lot of stuff showing that what the browser can do. Yeah.
Sheena:But if you send me the link that would be very helpful.
Lazarus:Yeah. And I'll do that instead. That's easier than trying to find find it. I'll put it on the show notes too. So I think like a big thing it sounds like for you, and and one of the things I really liked, the initial thing about, you know, you're tweeting about this h t m x success story really was empowering the junior devs.
Lazarus:And I feel like, you know, that's maybe your whole that's like part of the whole concept of your work and missions. Yeah. So I feel like maybe that is that is maybe the the biggest takeaway of the, you know, switching to HTMX in my mind is, you know, I'm a big believer in that too. I've worked at a lot of places and I think one of my favorite things was always mentoring kind of the the junior devs and like watching somebody go from even not being a developer at all and not thinking they can program to becoming a developer and leaving the company that they worked at and going to work as a web developer somewhere else. And like, this is exciting to me.
Lazarus:It's it's yeah. No. I I love that stuff. And so I haven't, you know, h t m x is relatively new. I don't I'm not in that position to sort of teach people anymore.
Lazarus:But yeah, like I guess if what's what is a little more of your experience like working with the junior devs and and showing them h t m x? How does that kinda click for people?
Sheena:So we don't teach it at the moment. I would very much like to teach it, that the way we work is very demand led and very, like so so the courses that I'm most involved in are ones that run-in South Africa and we're very much we're about economic activity. We're about like taking people and turning them into folks that can look after their families. And there are a lot of people who are just like on the edge of being successful at something. They just need like a bit of training and a push in the right direction and the right introductions.
Sheena:And so we're very, yeah, it's so cool. Like there's well, there's like so many unemployed people. There's this huge pool of unemployed people and there are people at the bottom who we're just like, we can't help. We're sorry. But we try to find the people that we can help.
Sheena:And then for those folks, we help them into specific jobs and those jobs are with generally South African corporates and they have a set of tools that they that they use. And so we have to train people to fit in there. And so it's like, okay cool, you use this, this and this. We'll we'll train them in that but then we'll also try and give them just a really solid foundation in encoding itself. So it's like, like you'll get a whole lot of self taught coders out there who don't know really what a return statement does really.
Sheena:Like, it's actually quite common for people to think that return and print are the same thing when they're starting out because when they learn, they learn with the red ball, and so it just gets muddled up. And so we just make sure that, like, all of these weird foundational, like, pitfalls that they're going to fall into, like, we just make sure that they don't. And we make sure that we set them up with metacognition skills. So, the way I think about teaching code is almost like we teach them to code so we can teach them to learn and then they can teach themselves what they need to later. And we teach them what the corporates want just so they can get their job and then like they'll branch off from there.
Sheena:So, yeah, HCMX doesn't have a place yet in South African corporate, but I would very much like to like to change that.
Lazarus:Yeah. Yeah.
Sheena:Yeah. It's a hard thing to change.
Lazarus:So so this is you're talking about your actual, like the students of the the sys you know, the the company you work for and stuff like that. But I mean, internally you're also teaching junior devs. Right? That's the sort of, the second, you know, the the closer layer and those are the ones who you have sort of worked with with h t m x.
Sheena:I didn't really need to teach them much. I was like, here's here's the docs. Scurry that. Let me know if you get stuck, and they figured it out. So, like, they really didn't need much.
Sheena:So that was that was quite nice. Like, I think I just needed to show them, like, here's some, here's some tricks that I learned, like, the thing about how we style buttons and whatnot, like class equals some some, like, variable, and then that variable is just a list of, like, Talend classes on the back end. So it's all defined in one place, and then you can just use it all over the place.
Lazarus:Right.
Sheena:So so I did have to show them some stuff like that and there were some things where I'd be like okay cool we need pagination in a bunch of different places. Like I'll do it first over here and I'll explain what I did. Okay, cool. Now we also need it over there. And then they just go and and do it.
Sheena:So, a lot of the time it is just like give, like, give them something to emulate and then they they figure it out. But I think also the the juniors on my team are, like, they're gonna go far. Like, they are super bright. I'm so impressed with them. Like, a lot of them a lot of
Lazarus:them are also and say that
Sheena:Yeah.
Lazarus:I'm gonna go on a limb and say that they have a good person in place to to to be to be the person who mentors them.
Sheena:Thanks. It's like
Lazarus:you got your, yeah.
Sheena:They also like, some of them we hired from our own programs because,
Lazarus:Oh, nice.
Sheena:Typically yeah. So so that's like a really, really long job job interview. That's like a year long job interview.
Lazarus:Yeah. Yeah. Really. You really know. You really know at that point.
Lazarus:Yeah.
Sheena:Yeah. So that's that's been very good. So now they teach themselves. The hard part really of teaching is is the really foundational stuff, like, like, getting people to understand loops and functions and all of that because, like, when people start out, they do a lot of pattern matching or they do a lot of memorization instead of understanding because school systems teach you that memorizing is understanding, and you should do that a lot. And so they memorize things and they parent things, and it's like like getting a person to click, like, that's what understanding means.
Sheena:That's tricky. And then another tricky thing is, like, you get a person to, like, if you give a person a problem to solve. Like, cool. You're sitting and you're watching some birds, and you need to count the birds and tell me how many birds there are of different types. Then they can do that with a pen and paper.
Sheena:But as soon as you say, like, cool. The birds are in an array, then they just, like, they, like, do something completely wild and different. And so just trying to be like, okay. No. Like, get the machine to think like you're thinking.
Sheena:Like, think about this like a human and get the machine to think like like implement the steps that you're at that you would actually yourself do. Like teaching that kind of like algorithmic translation, just for foundational problems. Like that's that's pretty golden for people. So yeah, like basic code literacy and foundational problem solving and how to assess your own understanding of these things, and then people do, like, really well.
Lazarus:Yeah. No. That's awesome. So I want to respect your time. I think we said 11, you know, you have until 11 o'clock.
Lazarus:Do you have a does there got time for one more or or or I think I'm good.
Sheena:Yeah. I've got time for one more. It's all good. Okay. Yeah.
Sheena:We can
Lazarus:do that. So so, you know, you you've had you've been on the side of kind of like using this in a real way, and you you're switching projects over, and you're thinking about it. Like, what do you if you were to think of it as like an ecosystem, like what do you you know, the HTML ecosystem, like what do you feel like you know, we already talked about the web components as maybe one piece that if there's some solution for like basic things in HTML. Is there anything else you can think of that you sort of wish was out there when you and you and your junior devs were kind of working through stuff?
Sheena:So I think, like, one thing that I've been thinking about that I haven't quite, like like, it's on I haven't delved into it properly, but it's on the edge of of the edge of my thoughts, I suppose. It's like that problem of abstracting the relationship between the client and the server again. So let's take pagination as an example. Like, every time we implement it, we have to go through a certain bunch of steps, and it's not very dry. It's like, okay.
Sheena:You you draw the fur so the way that we're doing it is, like, draw the first page, and then there's, like, the next button, and then you click the next button, and then it gets replaced with another page and potentially another next button. And so that's working really well, but it's got a whole bunch of different moving parts and some of it feels quite repetitive. And is there, like, a nice way to abstract, like, patterns like that? There's probably a bit, like, nicer ways to do pagination as well. It's just like we sometimes want the button to disappear and sometimes we don't.
Sheena:Yeah. But, like, taking that like, that's one kind of, like, full stack feature thing that you tend to use a lot. Like how do you just make that simple to plug in? But maybe there's some kind of class based view on the back end and it's got like a function for generating the first page and it's got a thing about the partial that's for individual elements or I don't know. So so that needs some some thoughts.
Lazarus:Yeah. I guess my first thought on that is, you know, does what's the templating language in Django? Is there It's
Sheena:got its own one, but it's based on a thing called Jinja templates. I'm not I don't really like the Django templating language. I think it's a it's a little bit restrictive because it's like, let's make sure that the templating language doesn't do too much thinking. And so it does restrict you a little bit. Yeah, so I don't know, like I'm kind of it's tricky to to move to something else at this point in in our project, but I I think, like, different ones would suit me better.
Lazarus:Interesting. So the reason I ask is I just, you know, I'm trying to think how I would do that. Like, if I'm adding pagination, you know, I'd probably start exactly the way you did. And and one once there's enough, I guess my first thought would be that that there would be, some sort of just like a a template partial that is like an, you know, include pagination and then you pass it the thing. Like here's the link for the next page.
Lazarus:Although you might even not need that because you're it's already sort of you probably do. You probably need the URL for the, you know, the next page and and then you pass the page number and the URL. You know, something like that would be would feel pretty reusable to me. And I don't know if that's why I'm wondering if Django has kind of these components that you can sort of include and pass variables to as part of your templates. Is that sort of
Sheena:so so the tempersing library, like, you can have partials, and those partials can have, parameters. And so that that can potentially work, but it still it still just feels a little messy. It seems like it seems like that you'd have, like, a whole lot of different partials that are kind of related.
Lazarus:Yeah. Because pagination really does work a little differently.
Sheena:A partial for, like, one of the list items, maybe. So, like, okay. Cool. Render each list item using this thing. And maybe another partial for, like, the container that all of the list items are in.
Sheena:So it's like, cool. We wanna load the container, then we wanna load, like, the first page and then make so there's yeah. So it seems like something that's quite abstractable. Yeah.
Lazarus:Yeah. I mean that's usually what I do. Like just because when you end up, you know, I usually do have one partial for each item in a long list, and then I do have one partial for the whole thing. That way you can do filters up at the top, and then you're just loading the whole list. And then you can make edits to the each row, and then you're just loading that row.
Lazarus:Or when you delete it, you can just delete that row. So I think that's probably my most, you know, the pattern I use the most. But yeah, I mean, if everything really ends up being the same, I guess that's what I would kind of like do is like once you've done 10 paginations or 5, it's like, well, okay. What is actually the same here? Because yeah, if you try to like abstract it too early, you're just gonna end up with like, oh, well, the pagination is weird on this page.
Lazarus:Like, this doesn't work. And so we need a custom thing for this and it and then it gets more complicated than just seeing it right in front of you.
Sheena:Yeah. Yeah. Definitely.
Lazarus:And in terms of like educational material and stuff like that, the docs felt like they pretty much have a lot of the the use cases covered for you guys.
Sheena:And they're yeah. And, like, a lot of it is very simple. Like, a lot. Yeah. So you don't really need that that much.
Sheena:Like, I think the the first page of the docs, like, covers most of what you need.
Lazarus:That's good.
Sheena:Yeah. Yeah. I'm super impressed by it.
Lazarus:Nice. Cool. So, yeah. Anything else you kind of want to, you know, I just like like anything else you wanna sort of, mention, promote, anything like that? Any, conference you said you're doing a conference talk soon?
Lazarus:If people want to see you, hear you at a conference?
Sheena:Yeah. So, DjangoCon US is coming up in September.
Lazarus:Oh, DjangoCon US. Nice.
Sheena:Yeah. And then, PyCon South Africa is coming up in October and that's also super fun. Escape, which is a South African one. I don't that's early September. Yeah.
Sheena:There's quite a lot coming up. Quite a lot. So all of those conferences are freaking fantastic. I think Escape, you can watch online as well. Yeah.
Sheena:Next year we're doing Django Python South Africa in South Africa. So that's gonna be so it's gonna be huge.
Lazarus:So,
Sheena:yeah, lots of conferences coming up.
Lazarus:Where's the one in the US? Where's DjangoCon US this year?
Sheena:It is in Raleigh in North Carolina.
Lazarus:North Carolina. Okay. Nice.
Sheena:Yeah. So it's gonna be cool. It's also just like a lovely community. Super warm. Part of doing a keynote there is getting interviewed for their blog.
Sheena:And the guy who interviewed me for their blog, I met at my first DjangoCon and he was like this new Django developer. He was like, oh, I like he was still nervous and now he's so embedded in the community and it's just a lovely thing to see. It's just a very welcoming place that likes to grow people, so yeah, I love that community. And I think the other thing to plug is just like, my blog. I'm working on some stuff around like, I wanna make a community thing for people who want to get better at at teaching, just like for like, I I mentioned that thing in the beginning around leveling up people who volunteer for teaching things.
Sheena:I think there are a lot of teachers' hearts out there, so I want to amplify their effects and see if I can, like, make opportunities for teachers instead of just, like
Lazarus:Nice.
Sheena:Yeah. Yeah. That that's that's the thought. So if anybody's keen on that, then, like, keep keep an eye on what I'm doing, and I'll announce something in the, like, hopefully soon.
Lazarus:Awesome. Awesome. Well, so thank you.
Sheena:By September, definitely.
Lazarus:By September. Yeah. I mean, you're gonna be busy with several conferences, but you'll probably have to talk about it at those conferences, whatever you're working on. So That's why.
Sheena:Yeah. Yeah. Oh, this this was a lovely conversation. Thank you.
Lazarus:Thank you so much for taking the time. I really appreciate it, and, this is awesome to hear your experience working with stuff.
Sheena:Oh, good. Thank you so much. Thanks for the podcast. It's been it's been helpful and entertaining.
Lazarus:Oh, I hope so.
Sheena:Really great chat. Yeah.
Lazarus:Great. Alright. Well, have a good rest of your day.
