Let's make an htop-like in your browser (with Rust)

Follow me on Mastodon: hachyderm.io/@fasterthanlime
Support me on Patreon or GitHub: fasterthanli.me/donate
You can find the code at: github.com/fasterthanlime/axact
Contents
00:00 Adding tokio & axum
03:45 Pushing it to GitHub
04:19 Measuring CPU usage with sysinfo
11:05 Adding a JSON endpoint
14:03 Serving HTML
17:20 A dynamic page with Vanilla JS
21:50 Using preact and htm without a bundler
26:43 From text to styled div soup
31:41 Bridging sync & async Rust
36:02 Suddenly lock contention
38:33 Who doesn't love websockets
42:56 websocat and the load-bearing semi-colon
45:17 Consuming Websockets from JS
47:06 Using tokio's broadcast channel
50:39 Thanks for watching

[@Dygear]

A tech KZbinr that _ACTUALLY_ programs. Thank god.

[@Dygear]

I'm going to have to watch this again to fully understand it. But damn, you crushed this video! Great, great work as always Amos!

[@astkh4381]

Other youtubers program too

[@fasterthanlime]

Hey Tom Scott once used ChatGPT to write some Google Apps Script, I'm fairly sure that qualifies.

[@biigsmokee]

Also 1:55, showing us alternate keybinds and unexpected output rather than cutting it. Your rust memory editing dll is the best tutorial I've seen so far

[@gavintantleff]

@@fasterthanlime don’t forget his whole the basics series, and the video who’s title updates

[@fasterthanlime]

Code's here, errata is below: github.com/fasterthanlime/axact I used an auto-subtitle that transcribed "serde_json" as "Sir De Jason" and I don't know if I'll ever recover. Correction: the front-end world is not a mess at all I don't know what I was thinking haha don't shun me plz Correction 2: std::thread::spawn would've been a better choice than tokio::task::spawn_blocking for a background task that never returns. Correction 3: the next version of Axum will ship #[must_use] on the Websocket's response, which would've caught the "load-bearing semicolon" bug: github.com/tokio-rs/axum/releases/tag/axum-v0.6.10

[@nekodjin]

😅

[@funkintonbeardo]

Doing front end work makes me want to hit my little toe to doors repeatedly.

[@SimonBuchanNz]

I think tokio spawn_blocking is at worst the same as std thread spawn? I wouldn't consider it a big deal.

[@baggern]

​@@SimonBuchanNz tokio has a thread pool and if you never yield, it could end up blocking the entire runtime

[@SimonBuchanNz]

@@baggern that's if you use regular spawn. Spawn_blocking is fine.

[@antoniocs8873]

Dude... the amount of stuff you know... I've been in backend programming for years and have done some js in the past... but man... never in a million years would I be able to jump into the multitude of stuff you just did, especially debugging the websocket issue. Truly impressive.

[@esthevann]

Gotta be a lot of work to subtitle all of this. Good shit

[@fasterthanlime]

I usually hand-subtitle my shorter videos. For this one, KZbin's auto thing was taking forever so I used github.com/m1guelpf/auto-subtitle which is powered by Whisper and - I'm pleased with the results. ~1.5h of fixing them by hand would have made them perfect (much less work than captioning everything from scratch) edit: I fixed everything, but it was more like 2.5h 🙃

[@DivineDarknesss]

Your breadth of knowledge, skill & speed is inspiring! Wild to see you create this in two hours.

[@fasterthanlime]

So this is a lot more prep work than is visible from the edited version - I spent a half day before that building a way more complicated app! This was shot a couple days after, so it was still fresh in my mind. There were one or two dead-ends while recording where I had to reset, so you know - room for improvement 🧐

[@ebonilha]

wow, I actually learned something really valuable from this video: opening the same file in two IDE tabs when it has grown to big vertically

[@GJonasKs]

Awesome video! I would love to see a “convert this to production”-video, where you handle errors, make generic views etc. 😊

[@jerth]

Seconded, that's a great idea

[@xymist5605]

How much of you being so fast is editing, and how much is a genuinely ridiculous typing speed? You have a really efficient workflow, by the looks of it.

[@ApocalypeX]

POV: When you pair program with the vim guy at work

[@fasterthanlime]

When I shut up it's editing, when I talk you can see how fast I really type. I'll do a WPM test on stream one of these days, if that's what the people want.

[@FryuniGamer]

​​@@fasterthanlime I think this is more perceptible when editing code then on a WPM test You not only type fast but you know your hotkeys and combos, so you reach your goal much faster then if you typed everything and the part that you do type is very fast

[@twothreeoneoneseventwoonefour5]

It is a pretty normal typing speed, idk what you are talking about. What part was ridiculous? I never thought that I am a power user or anything, but I also use VIM (motions) and WM (awesomewm), not even remotely to the max efficiency, yet I am around the same speed. You guys are much slower? I think it is around average in our world.

[@supernenechi]

I bet a lot of that speed actually comes from the Vim extension. How he moves through the document still looks like insanity to me though, even as a full time Vim user xD

[@MrKeebs]

Love this format of condensing a lot of small concepts into a video, I for one learned a whole lot. Thank you!

[@theherk]

You work at a dizzying pace. I can edit text and commit quickly, but no way my old brain can think this quickly. Respect.

[@thekwoka4707]

And while talking and explaining....

[@AsyncEgg]

Your coding videos are a breath of fresh air, and amazing content. They include the right amount of “what is he doing here?” to spark immense motivation and curiosity to do this while still being understandable enough to follow. Please do more of these!

[@eudrino]

It was a full hour of enternatiment, thank you for the great content, keep up!

[@user-il8ek2mx5w]

You answered every one of the questions that I had going into this video. Outstanding!

[@wetfloo]

Damn man, you're so fast and know so much. You inspire me and remind me why I started programming in the first place!

[@jakubrembiasz8942]

You're an excellent coder! Your video is amazing. Many thanks and please continue sharing your knowledge. KZbin is filled with numerous "programmers," but you stand out as the only one who provides truly informative and practical content. Much appreciation!

[@walidlezzar2357]

Packed with good stuff!! I want to see thousands of these

[@ISKLEMMI]

You taught me a lot of things I didn't know in this video. (Even some incidental stuff like the -F/--features flag in cargo add was new to me, too.) Thank you for sharing! I haven't finished watching this video quite yet, but I just had to say that I genuinely laughed when you discovered that unit implements IntoResponse. That's such a sneaky bit of unexpected behavior!

[@adel8206]

Really great stuff. I hope there will be more of that content!

[@l3p3]

19:25 I would just add the "defer" attribute to the script tag so it is fetched in background and run after dom loaded! ;-) PS: Then the double slash in beginning of fetch. Haha, I am glad I am not the only smart persons doing such mistakes.

[@SealedSun]

That was a great balance between being authentic (running into issues) without letting the video drag on (cutting to the solution). :)

[@user-yi9tq7xg2w]

Wow, really interesting video, before watching I’d thought that 50 minutes long video will be boring, but I’d been wrong, it was very informative. Hope you will make more videos in this style in the future, I really like it. Thanks for your efforts!

[@Uzaku1991]

This was educative, interesting and impressive! 10/10

[@Charls93xx]

Really chill video, liked it a lot!

[@scriptozavr]

Awesome video, thanks for making it.

[@lighty262]

It's super entertaining watching you code. That speed is insane.

[@Chubbywubbysandwich]

I think he is speeding up the video when he types...

[@lighty262]

@@Chubbywubbysandwich I also thought that, but if you watch closely, he's not. He's just used to hotkeys

[@lighty262]

Though I can also code with that speed but, his pace is really insane, I can't react the same as he did, cause if it's me it will take at least a second to process and read the errors/warnings.

[@fasterthanlime]

@@lighty262 some parts are set at 2x speed (mostly when I don't talk).

[@maor1993]

Awesome Video! Learned quite a lot 🎉

[@ahuggingsam]

Really cool video, I learned a ton. Thanks!

[@dirty-kebab]

This was highly interesting to watch. I’ve recently become interested in Rust, but I mostly work with Go

[@DrIngo1980]

That was very entertaining and educational. 👍 Thank you. I gotta take a look at your code later as well. 🙂

[@fasterthanlime]

Thanks for watching!

[@jerth]

Love this format!

[@user-scc_]

Really helpful! Thank you.

[@uwumarie]

great video, i really enjoyed watching it :)

[@stdmpa]

This almost makes me feel bad for typing not as fast as you do, LOL. Loved the video. Thank you for all the work!

[@nickyyyyy]

Amazing work please keep at it

[@mattyaykes5143]

Incredible content ! Didn't see the 50 minutes go by ! ^^ Rust is amazing ! :D You could've done your front in webassembly to have a 99.9% rust stack ;)

[@roughedge-machineworks]

This video was great.. earned you a subscribe for sure..

[@futuretrees]

Learned so much. Unscripted is a vibe! And you're fast

[@rodelias9378]

Good one! Thanks!!

[@Baron-digit]

Rockstar! Awesome videos!

[@battatia]

This was really fun :)

[@petter9078]

You are very skilled

[@nya5551]

thanks for video, need more)

[@trueizoslav]

As always, great content, thanks! One question tho, what are you using for window management / resizing?

[@fasterthanlime]

AltSnap

[@trueizoslav]

@@fasterthanlime thanks

[@adnanjpg]

amazing content. the wireshark debugging at 44:00 is impressive, can you make a video longly talking about that?

[@seanhdr4k629]

Thank you so much for this informative and well-explained tutorial! 🌟 Your guidance on setting up a Rust backend with real-time WebSocket communication and integrating it with a Preact frontend has been incredibly helpful. I especially appreciated the hands-on examples and clear explanations. I've subscribed to your channel and liked this video as I found it very valuable and am looking forward to more of your content! 👍 I was wondering if it might be beneficial to explore error handling and reconnection strategies a bit more, particularly for the WebSocket connections. For example, I got 'Error sending message via WebSocket: Error { inner: Io(Os { code: 32, kind: BrokenPipe, message: "Broken pipe" }) }' panic error when refreshed the page. Implementing graceful error handling on the Rust side (instead of '.unwrap()' ) and adding automatic reconnection logic in the JavaScript code (not only .onmessage, having .onclose, onerror as well) could further enhance the robustness and user experience of the applications built following your tutorial..?

[@wateenafzal2963]

Awesome video...!!! Coool VSCode Setup what extensions do you have and what editor configs have you applied....ridiculous typing speeeed...Loved it!!!!

[@holly_hacker]

I would love an article on how frameworks like axum and actix-web create those handler functions that seem to detect what their parameters are and inject the correct things. It's a technique that may be useful for some other scenarios but I have no clue how it works.

[@Kiaulen]

I second that! Without some kind of attribute/decorator, it feels super magical.

[@Artentus]

Essentially Axum defines a Handler trait which is implemented for functions with certain signatures. It involves a lot of code repetition in the library which is done through macros. It looks like Axum implements the trait for any function between 0 and 16 compatible parameters. If a function had more than 16 parameters the "magic" would stop and it couldn't be used.

[@baggern]

I'd love to read an article on how Bevy & Axum do their queries!

[@bigtymer4862]

Inspiring!!

[@derekdreery]

BTW, at least on Linux, when you ask for the CPU usage you essentially get the number of ticks that the CPU was busy/idle (+ some other states) since boot. If you want to give the usage in any given period, you need to know what the ticks were at the beginning and the end, and then subtract one from the other. That's what this library will be doing under the hood somehow. I personally think it makes more sense to have an API that requires you to sample at two points in time and gives the average usage in that interval (or Duration in Rust lingo). Otherwise you're getting something that's making a whole lot of assumptions about how you want to do this sampling.

[@fasterthanlime]

Yeah that makes a lot of sense and I feel like sysinfo's interface is a bit awkward here!

[@narigoncs]

For the mutex version, would it have made sense to use RwLock instead of a Mutex? Because then multiple requests can have read access at the same time to the CPUs

[@fasterthanlime]

Probably - I didn't bother because I knew where the video was going and the Mutex wasn't going to live long (nor prosper)

[@max_ishere]

44:00 Finally that "forgot semicolon" is actually true and caused a bug

[@TheInspctrcat]

At first I could not understand what was the goin on with yr windows, then I googled Altdrag, thanks, bro!

[@fasterthanlime]

I've switched to AltSnap since, it's a fork of AltDrag that's actually maintained!

[@silversword411]

You're doing a lot of video speed shifts, what software are you using for video editing? We need a clock in the vscode status bar ;)

[@c-antin]

Small question: What rust vscode extensions do you use? I don't have syntax highlighting for variables in format strings with rust-analyzer alone...

[@c-antin]

Seems like it's theme dependent.

[@c-antin]

It's a theme setting: code.visualstudio.com/docs/getstarted/themes#_editor-semantic-highlighting

[@vencler]

I was wondering more about your pc setup, do you have a list of hardware/peripheral/apps you use? Workflow feels super smooth and responsive, would be great if you share the info! Thank you

[@fasterthanlime]

I should probably make a video or article about it because the question keeps coming up. You can check my latest AMA on /r/fasterthanlime (reddit) that has _some_ answers.

[@vencler]

@@fasterthanlime God speed to you.

[@petter9078]

At 34:52, i see there is a mutex lock. Is there a scenario where we dont care about the accuracy, for instance, can we simply just read whatever value that is there, and skip the whole locking? Do you have to use a different datatype for this, or does this defeat the purpose of how this setup is intented to be?

[@dragonmax2000]

@fasterthanlime, I wonder if you have hints as what you did to make you feel so comfortable in programming with Rust. I like how you've been able to articulate things rather quickly with effortless familiarity. I'm aiming to achieve similar mastery of the act. What do you suggest that one can do to achieve such?

[@fasterthanlime]

I wrote in-depth articles about it for about 3 years - worked for me!

[@TheAriznPremium]

How do you change window sizes so fast? is this a keyboard shortcut or like a plugin or something?

[@HyperCodec]

What vsc extension are you using to get warnings and error so look like that?

[@beppyboo]

It's called "Error Lens"

[@uwumarie]

i would love to read an article about the axum thingy you talked about

[@peytonduncan9789]

What are you using to drag windows in a KDE-like fashion? That is, the resizing the moving with your mouse thing.

[@fasterthanlime]

That's AltSnap!

[@AchterHetBureau]

Do you a list with all your vscode extensions/settings somewhere? It looks really good!

[@fasterthanlime]

Most important are: rust-analyzer, Error Lens, GitLens. The font is Iosevka, theme is GitHub Dark.

[@FuzzyLitchi]

very cool!!

[@edboz_]

29:53 "So how do we get this to center?" Here you have and example how to center a div in CSS.

[@Billy-bz8dk]

What extensions do you have installed for vscode? Your setup looks so efficient.

[@marwanfikrat7716]

+1 I’d like to know what the theme is too

[@kkanishka1008]

I love how fast you are with vscode. Do you have a reason why you use vscode over neovim? and also maybe you can have a keyboard logger on the screen, so that I can look at what shortcuts you are using.

[@fasterthanlime]

I use vscode for its remote editing feature (this is all happening in a VM). A TUI editor like vim/nvim over SSH isn't the same thing, especially when there's latency involved. Also, the plug-in ecosystem is fantastic and most of the time it just works (VscodeVim has been shaky lately).

[@kkanishka1008]

@@fasterthanlime thank you for the reply. what service do you use for the VM? that's actually really smart to just have a separate VM for programming because wsl2 takes way too much ram.

[@Fortuna272]

How are you liking vscodevim? I heard it's a good gateway into vim itself and after numerous attemps I think I'm finally learning to like it! It seems like the best of both worlds between extensions and the visual side of vs code and the efficiency of vim motions.

[@fasterthanlime]

It's been great except for the time they broke undo, and I say this as a vim exile.

[@Fortuna272]

@@fasterthanlime That's been a bit of a curveball for me as well. Sometimes `u` straight up doesn't work so I'll resort to ``.

[@Muhammed-nani964]

Wow how u type and move so fast on vs code 😮 And it’s fun watching u 😂 ur amazing I want to learn rust do you have any advice I worked with node and react and I want to jump to something else 😂😂 Maybe java and spring or rust 😅

[@C3POtheDragonSlayer]

I would love to see Cool Bear show up in a video like this.

[@fasterthanlime]

Everyone would! But... The logistics though

[@SimonBuchanNz]

Tldr on the "how does it do AppState" is generally that it has a FromRequest trait or the like that all parameters to a handler have to implement. I don't know if axum does this, it probably also does proc macro crap so it can get the parameter names...

[@fasterthanlime]

That's exactly what Axum does.

[@SimonBuchanNz]

@@fasterthanlime neat! I think I first saw this trick with an objective C interop library of all things, but it's probably pushed the furthest with Bevy.

[@tollertup]

Your workflow is insane! How do you resize and move windows so fast like that? Also, the front-end world do be crazy.

[@fasterthanlime]

I use a tool called AltDrag: stefansundin.github.io/altdrag/ - it still works on Windows 11, but you have to change some options for HiDPI displays and I need to restart it whenever changing the display config.

[@fetB]

KDE has shortcuts for that

[@superhawk6105]

babe new hour long Amos vid just dropped

[@ZynSays]

Just a heads-up about the code around 21:50 where you introduce preact - I'm not so sure preact handles multiple render() calls to the same root in an optimized way. There's nothing in the documentation that describes its behaviour when rendering to an already-rendered-to root, and it's certainly not the intended way to update the page. It very well may be re-building the whole DOM each time your update() function gets invoked, basically as if you had chosen not to use Preact at all and just generated some HTML in a template string or something. See e.g. preact issue #436 to confirm that this is not an intended use, though it is an old issue. The current documentation mentions a to-be-removed special third argument to render, specifically for replacing an existing root. editedit: I checked the source as well and it seems that, yep, it just rebuilds the entire Virtual and Browser DOM if you re-invoke render().

[@aperson4051]

Hey Amos, I'm pretty sure the tokio people recommend not putting never ending tasks into a spawn_blocking because it spawns onto a pool and thus you permanently reduce the pool size by 1. Instead they say, just spawn a regular std::thread here

[@fasterthanlime]

Yup, see pinned comment.

[@addmoreice]

Any chance you can do a Tauri app example that *isn't* yet another todo app which doesn't really do anything actually complex?

[@fasterthanlime]

Idk, what should the app do?

[@echobucket]

So that extra semicolon which caused your bug is why I think I'm always going to write "return"

[@baggern]

i don't think that would've helped, since it's perfectly ok to explicitly return the empty tuple

[@echobucket]

@@baggern No the point is if you get in the habit of putting in the "return" it's better. It's way easier to notice a missing "return" than a missing semicolon.

[@fasterthanlime]

In response to this video the Axum maintainers made the websocket response #[must_use], which would've caught that error!

[@RuslanKovtun]

Nice.

[@LeFriendBandit]

If loading JS from a file, I think it works easiest just to defer it? I wonder if this would've been fun to implement with tokio::sync::watch. I feel like this is such a good usecase for something like that. Where one thread can update and send on the channel, and any thread that reads it for an API call can just get the latest value. This uses a better lock I think? I'm not really sure. Edit: I got to the point in the video where you used the broadcast channel lol

[@fasterthanlime]

So because there's a fetch / a WebSocket request it might be just getting "lucky" with the DOMContentLoaded thing and we might still need an event listener, I'm not sure. Or maybe modules always run only when the DOM is ready. watch would be better than broadcast here, I didn't think of it in the heat of the moment!

[@YTCrazytieguy]

Fun!

[@JuanDelS]

At 33:35, we pass different copies of app_state to axum router and to spawn_blocking closure, but changes to the "copy" inside of closure are somehow reflected at the router app_state "copy". Don't know why this works and it confuses me a lot 😕

[@Rozza3]

This is because the AppState struct only has one field, which is an Arc. Arc implements Clone, so because all fields implement Clone Rust can derive the Clone impl for AppState with a macro. The Clone impl for Arc doesn't create new copies of the data, it just returns an extra reference to the underlying data - Arc being short for "Atomic Reference Count". The Atomic part means the count can be safely updated by multiple threads (it is both Send & Sync) , as opposed to an Rc (just Send I believe), which would be only for a single thread. Usually that would mean they are all immutable references, as the borrowing rules state that any shared references must be immutable, and only exclusive references can be mutable. This is why the Arc wraps a Mutex - Mutexes are one of the Rust types that use interior mutability. This means you can obtain a mutable reference via an immutable one. Mutexes enforce borrowing rules at runtime by guaranteeing there can only ever be a single mutable reference at any given time. This is achieved via some type system magic where a thread can lock the Mutex, which returns a MutexGuard, and whilst the thread holds that guard it will block other threads from locking it. The guard type is what actually provides the mutable reference, and when it is dropped the Mutex is free to be locked again by another thread. So basically the Arc means every clone just returns an immutable reference to the same Mutex & underlying data, and the Mutex allows those immutable references to be turned into mutable ones. The data is never copied anywhere. Hopefully that made sense? If you'd like to learn more, have a look around for resources on "concurrency primitives" - Jon Gjengset has some great videos on Mutexes and other types, there's plenty of blogs around, and the "Rust Atomics and Locks" book by Mara Bos is an excellent resource that explains all the nuts and bolts in a practical way. You can also dig into the standard library's docs for the types & traits mentioned, they do a decent job of outlining things usually!

[@JuanDelS]

@@Rozza3 Oh, I didn't realize that traits of struct fields can implicitly affect the struct in that way. That makes sense now. Thank you for such an elaborate answer. I'll definitely check the "Rust Atomics and Locks" book 🙂

[@Rozza3]

@@JuanDelS Ah, that particular magic is the "[derive(Clone)]" part - only derivable if all struct fields implement Clone, which is true for the Arc in this case. The derived Clone impl will just call .clone() on each field - saves typing it out manually. Glad you found the explanation helpful! 😊 I'm sure you'll enjoy the book

[@max_ishere]

Nice nice nice I need to make a tool as well

[@benoitranque7791]

Is that port forwarding in vscode an extension?

[@fasterthanlime]

Not a separate one, no. It works for SSH remotes and container remotes, so it's either handled by the generic "remote extension" or it's built into it.

[@Gosuo]

I would love to read an article about the axum types

[@fasterthanlime]

The extractor thingy? Here's the "short" version: docs.rs/axum/0.6.0/axum/handler/trait.Handler.html#implementors

[@ciso]

@@fasterthanlime Would really love to hear about long version. I think Bevy (game engine) also does something very similar with their queries.

[@Gosuo]

@@fasterthanlime Yes exactly, thanks! But like ciso said, I'm also interested in the long version, if you have the capacity of course. Great content btw, I always enjoy your videos/blogs.

[@Rozza3]

It's for actix-web rather than axum, but this is a good talk on the pattern: kzbin.info/www/bejne/bXWyiqekeL2omdk

[@ZoltanTemesvari_temy]

"I can do what I want: this is my video" 😃

[@Muhammed-nani964]

Wut is that keyboard it sound very cool

[@usercommon1]

thx for inspiration!

[@AdamChalmers]

Do you use Vim keybindings?

[@Kabodanki]

I've never seen instant legacy code being written in Rust before. I get it, it's nice for showing concepts and else, but this can't be said to be good code at all. Reminds of the glory days where people were doing tutorials where they store structured data in unstructured data store with their MEAN stack and call it a day.

[@jurienhamaker]

What remote server do you use? Baremetal? Vps? What provider?

[@fasterthanlime]

This is just a local VM in VirtualBox. For my online stuff, most of it is on fly.io (I used to work there), the rest is either on AWS or Hetzner.

[@peter9477]

For a while I thought your chair headrest was a humongous pair of earphones...

[@ihve]

great video. what is the font?

[@ihve]

It’s Iosevka

[@mwlo8635]

Which font are you using in vscode?

[@fasterthanlime]

Iosevka

[@EdgeGaming]

More code adventures with Amos pls

[@gimmypharel]

Whats the name of the window manager hes using?

[@fasterthanlime]

Windows 11, with AltSnap.

[@marshmellominiapple]

wizard

[@gluten2537]

you can use cargo-watch

[@eliott5891]

What font do you use

[@fasterthanlime]

Iosevka

[@mjphayes]

Should try it with leptos next time :)

[@yumimato]

or rust-dominator

[@derekdreery]

G R E A T content!