Virtual DOM for Your Terminal

Рет қаралды 38,622

Күн бұрын

Previous Episodes: • Multiuser Chat (4at)
References:
- Bug - / 1724878712926052530
- Tsoding - 4at - github.com/tsoding/4at
Support:
- BTC: bc1qj820dmeazpeq5pjn89mlh9lhws7ghs9v34x9v9
- Servers: zap-hosting.com/en/shop/donat...
Chapters:
- 0:00:00 - Announcement
- 0:00:39 - Intro
- 0:01:18 - Demo
- 0:03:09 - Problem on Window
- 0:05:17 - Terminal Virtual Buffering
- 0:06:04 - Virtual DOM of React
- 0:06:42 - Meta does not develop React for you
- 0:07:22 - Crossterm is Too "Low-Level"
- 0:08:04 - How do you implement a Virtual Buffer?
- 0:08:44 - struct Buffer
- 0:10:18 - Multi-Dimensional Arrays in Rust
- 0:13:12 - impl Buffer
- 0:13:43 - struct Cell
- 0:15:02 - Outlining Buffer API
- 0:17:11 - Buffer::put_cell()
- 0:19:19 - Buffer::put_cells()
- 0:22:17 - Compilation errors
- 0:23:13 - Buffer::new()
- 0:27:41 - Buffer::resize()
- 0:29:34 - Preparing Buffer Instance
- 0:31:14 - Buffering status_bar()
- 0:38:15 - Visualizing the Buffer
- 0:45:17 - Buffering Chat::render()
- 0:48:33 - Factoring out Prompt::render()
- 0:53:51 - Buffering Prompt::render()
- 0:56:13 - Visualizing Final Buffer
- 0:57:54 - Double Buffering
- 1:00:00 - Buffer::diff()
- 1:08:49 - Buffer::clear()
- 1:10:05 - Patching the Buffer
- 1:12:41 - "Swaping" Buffers
- 1:13:52 - Initial Flush
- 1:14:36 - Compilation Errors
- 1:16:30 - Potential Patching Optimization
- 1:17:14 - Q: How many years I need to learn Programming to be so "Fluent"?
- 1:18:30 - Testing the Client for the First Time
- 1:20:35 - Fixing the coordinates
- 1:21:27 - Selection works!
- 1:23:17 - Fixing the colors
- 1:26:36 - Patching Optimization
- 1:29:45 - Resizing the Terminal
- 1:31:48 - Optimizing X movement
- 1:34:43 - Testing with Server Locally
- 1:36:05 - Committing changes
- 1:36:52 - Requesting Feedback from Windows Users
- 1:37:25 - How to use 4at client
- 1:38:36 - Deploying to urmom
- 1:39:14 - Receiving Feedback from Windows Users
- 1:40:09 - DDoS Session
- 1:41:42 - Outro

Пікірлер: 102

@thisguyisnotable 4 ай бұрын

this guy can never run out of content

@ade5324 4 ай бұрын

as long as new javascript libraries keep coming, we wont run out of content

@thisguyisnotable 4 ай бұрын

@@ade5324 amen brotha 🤠

@ruchanadguzel1237 4 ай бұрын

Probably there are more than 10 videos upcaming. This guy studies before stream and then streams. Walking treasure

@Anubis_moe 4 ай бұрын

He is not a guy .. he is a talented programmer

@LSHV 4 ай бұрын

@bresent 4 ай бұрын

“It works on real operating systems Linux, unfortunately I got some reports from a video game os called.. doors? Oh yea its windows, kind of expected” That line got me 😂😂

@itsdrdy5551 4 ай бұрын

What’s the timing?

@dnkreative 4 ай бұрын

Doors - operating system for gaming. Pi Doors - Raspberry Pi build of Doors OS for gaming,

@ZaaackBR 4 ай бұрын

@@itsdrdy5551 3:08

@jaumeguimeramarquez2244 4 ай бұрын

I don't know what l like the most. Either his irony or his wisdom ❤

@itsdrdy5551 4 ай бұрын

add a count element so we can see in real time in the terminal how many users are connected

@legendrags 4 ай бұрын

yeah it would be a cosmetic and a bit of use for uh special people

@korigamik 4 ай бұрын

@@legendragswho are the special Bros

@deno8322 4 ай бұрын

WHEN I SEE YOUR VIDEOS I JUST SIMPLY SAY: "WTF IS THAT POSSİBLE?!?!?!" "BUT WHYY?!?!" (btw I love ur channel, ur so good)

@Alfred-Neuman 4 ай бұрын

Yeah, I wish I could understand everything he's doing. I'm even struggling with some very normal concepts in Javascript... :( To be honest, If I could make one wish, I'd probably do like most people and go directly for a large sum of money instead of learning anything. Then a big secured money delivery vehicle would probably crash in my apartment and render me paralyzed for the rest of my life. (We should be careful what we wish for.)

@deno8322 4 ай бұрын

@@Alfred-Neuman Lmao

@rkdeshdeepak4131 4 ай бұрын

You can rebind the tmux keys to keep the same directory for new windows/panes.

@necuz 4 ай бұрын

Ok, so Windows Terminal is so slow that if you simply do a clear and then re-render the screen basically blinks? Is that really the case?

@TsodingDaily 4 ай бұрын

I think we need to do a PhD research to figure that out.

@morphx666 4 ай бұрын

That is simply not true. I have done many terminal-based apps that require a high fps and they work just fine... if done correctly.

@jacksonlevine9236 4 ай бұрын

@@morphx666 Could you briefly summarize the correct way? I am curious

@typedef_ 4 ай бұрын

@@jacksonlevine9236 with unreal engine

@SeishukuS12 4 ай бұрын

@@jacksonlevine9236 On win32, you can read and write to the console text buffer directly, basically like drawing pixels on a screen. I've done double buffered text terminal stuff that way, don't recommend though, it's a bit of a pain.

@hamzadlm6625 4 ай бұрын

3:10 is the reason I watch this guy haha

@tens0r884 4 ай бұрын

the GOAT i do believe

@lptimey 4 ай бұрын

1:36:30 would wine work? I think I can remember that you used it once before but I’m not shure.

@andreshockey 4 ай бұрын

the circus-clown architecture gets me every time

@labsendeyshent 4 ай бұрын

haha yes, react for terminal

@Ross-ng4xl 4 ай бұрын

My favorite React channel < 3

@TheAlexgoodlife 4 ай бұрын

Damn you grew up in Russia during the 90s, good to see you found success

@secondengineer9814 3 ай бұрын

For copying the buf_curr to buf_prev, could you just put_cell each time you render a patch cell?

@fefeisbored1958 4 ай бұрын

i think they introduced that delay in the search bar so it won't take forever when it's searching for one letter in a really big document.

@merveillevaneck5906 10 күн бұрын

you know your opinions are quite extreme but in all honesty im here for the constant jabs at anything that doesnt agree with you 😆 keep making content like this

@hukuna9957 4 ай бұрын

So cool

@cornjulio4033 4 ай бұрын

very cool episode

@quarxdmz 4 ай бұрын

Doors!!! hahaha, you got me thinking

@leigh7529 4 ай бұрын

29:17 beatboxing is essential when resizing buffers

@God-vl5tk 4 ай бұрын

Is it Mr. Zoozin' ?

@ekshalibur 4 ай бұрын

a-mista a-zozin

@0ia 4 ай бұрын

tsoding pronounced zoozin

@yaksher 4 ай бұрын

I'm so confused why he's using &[char] instead of &str and then constantly complaining about needing to convert his strings into &[char]

@phillipbeck886 4 ай бұрын

Maybe I just couldn't follow, but is there any reason for having two buffers and calculating the diff instead of having a Patches vec that gets cleared every frame and appending to it on put_cell / put_cells?

@pwii 4 ай бұрын

if you replace the value of one cell many times it would create an element in the patches array for every operation, while having a second buffer replaces that element directly and only one operation is needed to draw it

@phillipbeck886 4 ай бұрын

@@pwii oh, makes sense. Hadn't thought of that. Thanks for the response

@jiraibozo 4 ай бұрын

istg i had that idea yesterday

@anon_y_mousse 4 ай бұрын

The reason why most people have problems with their terminal is because they're using the curse-or instead of abbreviating the variable name to just cur. And let me tell you, using the curses library doesn't help, especially when you set the output to hex. Just asking for trouble. God help you if you select things with witches. Hopefully you have an escape broom.

@noctavel 4 ай бұрын

no flickering in 4at now, but lots of flickering in the most radioactive region of Siberia...

@TsodingDaily 4 ай бұрын

Building Virtual Dome next

@tomaspecl1082 4 ай бұрын

Doors OS? More like Backdoors OS :D

@averythin348 4 ай бұрын

❤

@BrandonWingerAir 4 ай бұрын

Maybe Chrome has to send your keystrokes to a server before they show up

@AEF23C20 4 ай бұрын

глобальный смысл следующий: напишите собственную консоль, на собственном рендере, с собственным пулом команд, и возможностью подключения внешнего буфера строк есть процесс, в нём два потока - основной и поток рендера если вы меняете буфер в основном потоке, то поток рендера чекает буфер и выводит изменения в буфере строк понятное дело что если изменений нет - то перерендер не нужен, а если изменения есть - то гребите с конца буфера последние 25 строк и рендерьте их и естественно нужен фпс-лимитер, на 15фпс-ов или сколько вам там нужно это не суть смысл - внешний буфер работает в основном потоке и делайте с ним что хотите, а поток рендера чекает изменения и выводит эти изменения всё это работает БЕЗ блокировок вообще и т.к. поток рендера чекает изменения редко, то в буфер можете валить хоть миллиарды строк - рендер отрендерит без проблем миллиарды строк, и на самом деле - нет, рендер отрендеривает последние 25, со скоростью 15фпс-ов, т.е. если закидываете на вывод миллиард - бОльшая часть будет просто скипнута рендером итого: сколько бы вы строк не забрасывали в консоль - консоль строчки прожуёт и выведет это самое главное в консоли - что бы она не жрала память на рендере второе главное - рендер не должен блокировать основной поток, это там где буфер болтается всё остальное уже фигня) можете накрутить на это всё что хотите, собственный буфер команд, режим терминала, шифрование из коробки итд итп у меня собственная консоль используется в качестве ядра любого процесса-модуля, потому что мои приложения многопроцессовые все так вот каждый процесс-модуль запускается в моей консоли, и каждая исполняемая часть модуля запускается набором команд, но команды можно ловить из внешнего буфера сколько бы их ни было - они все заюзаются с разделяемой памяти в итоге моё по - это например пять процессов и соответственно пять консолей где консоли сами себе и друг другу команды пишут и исполняют их, а я это всё вижу глазками))) все ошибки вижу, время исполнения, всё это пишется в логи автоматом, итд итп смысл: можно вмешиваться в процессы через консоли и отлаживать всё это дело, потому что вменяемых многопроцессовых отладчиков не существует щяс я на этапе того, что бы мои процессы-консоли общались друг с другом удалённо, ну что бы в итоге получить быстрое банальное развёртывание децентрализованных приложений - собственно и всё) на этом можно ехать хоть куда и писать абсолютно всё

@AEF23C20 4 ай бұрын

и да, эта самописная консоль жрёт при 15фпс-ах аж 0.2% ядра, т.е. четыре консоли враз отрендеривая любое кол-во строк - выжрут не более 1% процессора, а так и есть - тесты именно это и показывают тестовый проц - intel gen3, i5 3570k без фпс-лимитера оно выдаёт 1000+ фпс-ов, причём БЕЗ драйвера видеокарты, он нахрен не нужен, т.к. юзается галимый гди, а гди может ВСЁ из коробки, и это супербыстрый рендер, работающий тупо на проце

@jacksonlevine9236 4 ай бұрын

Russia has Adderall too?

@LSHV 4 ай бұрын

„twitter is very dangerous website, with propaganda“ -Rexim, 2023.9

@benjamingriffith4991 4 ай бұрын

Sub for life here lol ty for this vid

@younesch1998 4 ай бұрын

I haven't seen the video yet ,please tell me you are trying to fix the web by building a text-based terminal browser 🤩

@fiona9891 Ай бұрын

lynx exists, it works about as well as you'd expect for a terminal browser

@younesch1998 Ай бұрын

Yes but most of the website layouts are not displayed correctly, i am thinking about a solution that extracts only text content then format it in a standard way like markdown

@josedejesuslopezdiaz 4 ай бұрын

crossterm team could add that code as a feature maybe.

@QckSGaming 4 ай бұрын

Too high level KEKW

@HWeingard 4 ай бұрын

I always forget the name of the other operating system. Doors. Thanks for reminding me about it.

@LSHV 4 ай бұрын

thx i thought it was trapdoors

@djupstaten2328 4 ай бұрын

Ansi spells not working? Perhaps for the better.

@user-sb5vt8iy5q 4 ай бұрын

hello mr zozin

@RealCatDev 4 ай бұрын

I forgor Windows isn't **real** operating system

@cobbcoding 4 ай бұрын

JSX for terminal when???

@TEHNOTRAHER 4 ай бұрын

unfortunately it already exists, google "react ink"

@dealloc 4 ай бұрын

Dioxus and React Ink already provides that.

@pe.... 4 ай бұрын

This title made me faint. Hope this is not true.

@neociber24 4 ай бұрын

Let's rewrite life in Rust

@watch-out733 4 ай бұрын

Bruh, stap!

@kmsskyquake7330 4 ай бұрын

DUDE AM LEGIT AM MAKING THE SAME THING FOR LAST 6 MONTHS AND MY FAVROITE KZfaq RELESASE A SIMMILAR VIDEO AM DEAD PHWAAAA !! i am making it in C tho

@jimshtepa5423 4 ай бұрын

маленькие мягкие окна

@AEF23C20 4 ай бұрын

одобряю всецело

@yablock0 4 ай бұрын

ono

@MrDody30 4 ай бұрын

Operating system for video games 🤣😂

@BrandonWingerAir 4 ай бұрын

Open the nindow

@eldyj 4 ай бұрын

4:25 no way, tsoding shows windows propaganda content on youtube!

@MrA6060 4 ай бұрын

gotta be honest .tv is not television but tuvalu.

@pookiepats 27 күн бұрын

React in my terminal is a hell no.

@briankrause5948 4 ай бұрын

Can you please 1 time spell out your name for me?

@cobbcoding 4 ай бұрын

T s o d i n g did that help

@briankrause5948 4 ай бұрын

nah the place where he says Amista Azuzin idk@@cobbcoding

@MemeConnoisseur 4 ай бұрын

@@cobbcodingnow can you spell all the numbers in your credit card ? Thanks

@LSHV 4 ай бұрын

@@MemeConnoisseur9 1 1

@MrPetzold123 4 ай бұрын

You can do everything, even the horrible (but idiomatic 😂) functional style programming like in (about) 1:04:00 😮😊... edit. needed to fix enumerate thingy in (about) 1:20:50 edit2. That iterator thingie is actually readable after reading Rust iterator docs for 1/2 an hour 🤣...

@ult1873 4 ай бұрын

no please!

@glowiak3430 4 ай бұрын

Windows is bad!!!!

@MyManJohnny 4 ай бұрын

Why is that? Is it because windows focuses mainly on experience of regular people and not developers?

@glowiak3430 4 ай бұрын

@@MyManJohnny windows is shit filled with bloat, spyware and ads not to mention it is slow as faq nothing runs without a dozen versions of visual c++ runtime viruses ravage it as if there was no security at all

@MyManJohnny 4 ай бұрын

Adds? Bloat? What are you talking about.. There are no adds.. By mentioning the dozen versions of c++ runtime you've confirmed what I said and I have no fucking clue what viruses are you talking about. If you manage to get a virus with active defender, it's your fault, you should know better and not install stuff from the sketchies websites you can find on the internet.

@LSHV 4 ай бұрын

yes

@ekshalibur 4 ай бұрын

win7 are gud!!!