# Learn with me: HTMX and HonoJS

## Метаданные

- **Канал:** devaslife
- **YouTube:** https://www.youtube.com/watch?v=hMcE6E8JjXA
- **Источник:** https://ekstraktznaniy.ru/video/38133

## Транскрипт

### Segment 1 (00:00 - 05:00) []

What is HTMX? Hey, what's up? It's Takuya here. Welcome back to my channel. Today I'm gonna do a learn with me type of video. So I'm gonna learn a new technology. And I'd like you to learn with me. And today you've got a nice singing bowl here. I love this sound. It helps me focus when I start coding. It's very soothing. So let's relax. Take a deep breath. Cool. Let's get started. Today I'm gonna learn HTMX. Have you ever heard it? I hear that it is for rendering the webpages. But it helps communicate between the web server. It is not like just a server-side framework. It is for the client-side like React or Angular. But it looks similar to HTML, just like React. But it lets you directly write how the browser interacts with the server. That's what I know. That's all what I know at the moment. So I don't know anything about how actually you can use it. And how much efficiently you can build websites, web apps with HTMX. So this is actually the first time I try HTMX. And today, this time, I'm gonna take a note while learning how to use HTMX. So let's create HTMX.

### Segment 2 (05:00 - 10:00) [5:00]

And I'll take a note while learning HTMX. So it will be helpful to know how I actually learn new technologies. And how taking tech notes helps you learn efficiently. So, yeah, let's do it. So, what is HTMX in the first place? Okay, so HTMX 2. 0 has been released. Is it like recently? It is not currently marked as latest. Okay, so it is currently in alpha or beta or release candidate stage. So you don't have to try it at the moment, I guess. Okay, so HTMX gives you access to AJAX, CSS transitions, web sockets, and server sent events directly in HTML. Okay, so my understanding looks like correct at the moment. And using attributes, so you can build modern user interfaces with the simplicity and the power of hypertext. So, it is a client-side framework where you can directly annotate how you would like to interact with your servers. I think that's correct. And motivation, why is it necessary? Why should only A and form be able to make HTTP requests? And why should only click and submit events to get them? Why should only get and post methods be available? Yeah, that makes sense. So, HTML is so limited when you want to build web apps. So, yeah, these questions make so much sense. So, they extended HTML to be able to specify how to send requests, like post and where to swap the content, I guess. And HX post. Alright, so let's copy and paste this example code. So, just note how you can write HTMX here. When your user clicks on this button, AJAX requests to slash clicked. And replace the entire button with the HTML response. Entire. So, outer HTML means the entire... I don't understand. So, let's... Next page. Where is the tutorial? Quick start. Okay, let's try it. I guess you don't have to install the npm package. Let's create try-htmx. And you can simply paste. So, it loads HTML from unpkg. com. So, it is already ready to open it in the browser. So, we have index. html. Right? Okay. But, we don't have the server yet. So, it will cause an error, I guess.

### Segment 3 (10:00 - 15:00) [10:00]

But, it issued a POST request. As expected. Right? It is a CORS error. Cross origin... Cross-origin resource... I forgot. Cross-origin resource security or something. Error. So, we have to set up a server for using HTMX. Let's do it later. And, read the doc's introduction for more in-depth. In a nutshell. Migration. Is it already 2. 0. 1? Alright. Unpack. View. So, is there any template project available? I guess just reading doesn't help me understand. Yeah, I'd like to get a template project to get started. Oh, no. You redirect to Google. Okay. HTMX template project. How to build it. Go. Okay. Awesome. Blog posts. Django. HTML. Go. Go integration compilation. Rails. Giraffe. IntelJ. Code. Igniter. Can't you use it with Vercel? So, you need to set up a server. There are some template projects for using Go and Rails. Django. Rails. I want to use Node. js or Bun for server side. HTMX. What can I search? So, Vercel. Is it possible to use it on Vercel? HTMX. js is a server side framework for HTMX. Oh, really? So, where is the official repository? It is by Big Sky Software. Okay. There is also an organization called htmxjs. It has only one. It's not popular. And no longer maintained. Okay, okay. All right.

### Segment 4 (15:00 - 20:00) [15:00]

Ah. Alicia Boilerplate. Hmm. It is also no longer maintained. Okay. Well, this time, I guess I can use Hono. js. That's what I learned in the previous session that I posted on my second channel. So, I forgot what was Hono. js. So, I remember that I also learned Hono. js here. And, yeah, so let's use Hono. js for the server side. Yeah. Server side program. So, I learned Hono. js. And I failed to use it on the Vercel. But, basically, it works pretty well. So, I'm gonna use it. Hmm. So, let's install Hono. And it allows you to use JSX to render the response. So, let's copy and paste it. Okay. Server. Index. ts. Can I find that image? Okay, okay. It works. Yes. Logo. Okay. Can I find the name of React? Yeah, I completely forgot how to use it. Yeah, let's... Okay. Let's just use their code here. And quick start. latest npm create. Okay, okay. So, server. Hmm. Create Hono. Okay. Target. Yes. Let's call it server. Fastly. Next JS. Vercel. Next JSX. Hmm. Okay. Let me just try... Let me just try Node. js this time. Do you want to install a project like this? Okay. Let's chill. Cool. Okay. Move HTML file to client.

### Segment 5 (20:00 - 25:00) [20:00]

Yeah. Package. json to client. Yeah. That's clean. And... So, it looks like the server package. json. So, it installed the node type and JSX server. So, you can start there by running there. All right. Error. Why? I don't see any use. Okay, that's because I use port 3000 for the other purpose. So, I want to change the port. I guess... Is that possible? No. Unfortunately, it's not possible. Watch. TSX. Watch. What actually does it do? Oh, okay. All I have to do was to change the port variable. So... No. Server. Dev. Yeah. It is currently running on port 3001. And... Let's type it. Pass 1. Hello, Hono. Now, it should be possible to... Render the... Implement the click. API. Click. Hello, Hono. You clicked the button. All right. So, I'd like to... I'd like to output the HTML. I mean... I'd like to send this HTML from Hono. js. And how to do that. So, Hono lets you send simple text by using text. And... Is there any other method for... Yeah, that's it. So, I wanna use... This. So, HTML. Maybe it's easy. That looks cool. So, let's use it. Okay. So, this time... I don't need this note. All right. So, yeah. It works really well with Hono. js. So, you create an index page. And you can implement it with Hono. js, like so. And you can do this. So, it'll be nice to paste this link. And you can return HTML by doing so. Right. That's cool. So, import html. raw from Hono. html. And a new Hono index. index. html html. html Nice. So, h1. hello.

### Segment 6 (25:00 - 30:00) [25:00]

Does it work? Nice. And you can also use... Yep. Oh, actually, I noticed that the syntax highlighting is working in this HTML string with it all. That's cool. So, it should be returned HTML. Right. Okay. Now, it should be possible to send an HTTP request. Nice. It works. Everyone. Welcome to HTML. So, I managed to get it to work. Like so. So, entry point. It looks like this. You can create like this. Nice. So, you no longer need a client repository. All right. That's interesting. Wait, what's next? Okay. So, it is recognized as HTML. Is that right? Not found. Oh, it's post. Hello. It is to explain. Not to explain. Yep. Yeah, yeah. So, let's create... Okay, okay. It recognizes as HTML. Nice. Here. Okay. It works like a charm. Oh, nice. So, Hono supports children props. So, you can create a template. All right. So, you don't have to write JavaScript to send post requests and replace the DOM with the response data. Which is nice. HX slash is the common prefix. So, HX is the common prefix for HTML. Syntax. Trigger modifiers. Trigger can also have a few additional modifiers that change its behavior. For example, if you want a request to only happen once, you can use the once modifier for the trigger. Makes sense. So, it only triggers once. When mouse enter, it sends a post request to slash mouse entered. Yeah, mouse here, mouse here. So, it specifies outer HTML. Inner HTML. Okay. So, if you... Yml.

### Segment 7 (30:00 - 35:00) [30:00]

Click me, click me. So, if you change this to inner HTML... Please. What happened? Yeah. So, it replaces the inner HTML of the bottom element. A few moments later. So... Oh, okay, okay. So, there is... So, it imports some CSS files. So, there is a base. css. And index. css. Yeah, it's... Okay. It is pretty simple. So, this has nothing to do with HTML itself. So... Where is HTML script? Ah, here. So, it was HTML. And hyper script. Okay. Why hyper script? Easy approach of language modem. Font. Front ends. So, that's gonna be another story. It's... The version is quite old. I don't know why. It's because the TodoMVC project is pretty old. Old now. So, I guess it is from this project. I guess. View on hyper script. No. Really? Oh, I don't understand. But, let's ignore it. So, yeah, it is... Okay. So, hx-target. Target! Oh, nice. Okay. So, you can specify. I guess... Target. Right? After beginning. If I'm right... With... hx. target. The ID of the target element. If it exists. Okay. So, let's try it. Let's create... Before... I believe it's... Before begin. After begin. And... ID equals... Swap me. Oops. Okay. Alright. No? Oh, I forgot to specify the target. hx. target is... Swap me. hx. target. swapme. Okay, it should work. Oh. Target error. Why? Because I forgot to append...

### Segment 8 (35:00 - 39:00) [35:00]

The... Shape. Okay. So, you can change innerHTML. I guess. It's... Alright. The place. Yeah. Works. That is cool. Oh, you can... Use it like so. Nice. Okay. I think that's... It's time to... It's time to wrap up. So, this was... Looks great. So, you can easily integrate and Integrate with the server without writing JavaScript code. I think... If you wanna avoid to write complex JavaScript code for the client side, It would be very useful HTMX would be very, very useful. So, you can easily, quickly, build web apps. Simple web apps. Like... This example project, like TodoMVC Toodoo would be one of the complicated apps. So, you can use it for building any web apps, basically. But I thought it would be nice for simple web apps. Because, I guess you wanna write some logics on the client side. Instead of the server side. So, I guess you'll end up writing some JavaScript code. Like authentications or client side processing, data processing, something like that. So, it not solves everything. But it is nice. It looks so nice. I like it. Yeah. So, that's it. So, thank you. And... I'm gonna share this note publicly, here. So, you can view what I take today... On the web, here. So, I put the link down below. So, please check it out. So, I hope it's helpful for taking tech notes in your workflow And... I hope you learned what is HTMX and How to use HTMX as well So, that's it. So, by the way... I recently created a Discord server for the Inkdrop users. where you can hang out with the other users and motivate each other. So, it would be helpful for learning how to take notes. And get inspirations like this. I've been running this server with close friends. and I've been trying to figure out... How to set up the Discord server for my use case. It's been working great. My friends have been sharing their... What they learned by sharing their notes on the web. Federico shares one of the notes here. He learned about SVG. Yeah, It's been so nice to see what they learned through their tech notes And it is so inspiring I find myself very fun to do that. So, please come and join us. If you have an Inkdrop account. I'm looking forward to seeing you on the server. Thank you for watching. And have a productive day. Let's chill.