You don't need DOM

  Рет қаралды 30,203

Tsoding Daily

Tsoding Daily

4 ай бұрын

Previous Episodes: • Music Visualizer
References:
- Tsoding - Musializer - github.com/tsoding/musializer
- github.com/ocornut/imgui
- • Immediate-Mode Graphic...
- nu11 - KZfaq - / @nu11_ft
- nu11 - WIP Works 2016-2022 - / nu11-wip-works-2016-2022
- pilotredsun - Achievement (full album) - • pilotredsun - Achievem...
Chapters:
- 0:00:00 - TBD

Пікірлер: 126
@blackhaze3856
@blackhaze3856 4 ай бұрын
Tsoding becoming unintentionally the Grinch of web dev. I love it
@Salantor
@Salantor 4 ай бұрын
Unintentionally...?
@alexandrucomanescu9857
@alexandrucomanescu9857 4 ай бұрын
You’re one of the reasons why I still believe in the internet and society.
@whannabi
@whannabi 2 ай бұрын
Don't do anything crazy the day he stops uploading because at some point he will.
@fragproof
@fragproof 4 ай бұрын
I started a Raylib app to mess around with audio. This is very helpful because my instinct was to start abstracting a UI in the traditional manner. This gives me a much better idea of how to structure the code.
@ratchet1freak
@ratchet1freak 3 ай бұрын
about dear imgui's disambiguation of IDs, you can manually push and pop ids to that stack, you can decide to push a string, a pointer or a integer. So if you are iterating over a list of things you can do a PushID(i); at the start of the for loop body to prep the stack for that id and then PopID() at the end.
@jesusmgw
@jesusmgw 4 ай бұрын
Casey is even more of programming legend than I thought if he created this.
@ronp6108
@ronp6108 4 ай бұрын
Making a 2x2 single color image is pretty easy in GIMP btw
@Vulto166
@Vulto166 4 ай бұрын
I would love to have support for some kind of themes in the future. I'd like to make it look like Cava.
@alurma
@alurma 4 ай бұрын
java script developer be like: where callback
@MRECoelho
@MRECoelho 4 ай бұрын
This comment made my day!
@arjayonan2953
@arjayonan2953 4 ай бұрын
You're a really great programmer. I wish I can have the same skill as you.
@user-xs7bp3oo3g
@user-xs7bp3oo3g 3 ай бұрын
it takes a lot of time and effort just put the time and you will get better don't put yourself down you can do it !
@gto433
@gto433 4 ай бұрын
It will be interesting if you continue making your own react like framework, thats great
@Dr-Zed
@Dr-Zed 4 ай бұрын
Making JS "developers" uncomfortable be like
@StarContract
@StarContract 4 ай бұрын
JavaScript is the Chad's choice. It's OK if you can't handle the speed
@Ujjawal_Gupta
@Ujjawal_Gupta 4 ай бұрын
​@@StarContractSpeed and JS in same sentence? 😌
@mipselqq3133
@mipselqq3133 4 ай бұрын
​@@Ujjawal_Guptajs is not slow
@cyanide0081
@cyanide0081 4 ай бұрын
​@@mipselqq3133no just every application that's ever been developed using it
@yestechguy-fj9tm
@yestechguy-fj9tm 4 ай бұрын
@@mipselqq3133 but it bloated and chunky
@SimpleVar
@SimpleVar 4 ай бұрын
You never needed id's or keeping track of active element for the problem you were trying to solve. Just add one bool flag per clickable element: When a mouse-down happens and you have hoverover - set your flag to true. When a mouse-up happens you check if you initiated the click by simply checking that flag (and react to the click..), and immediately after this you unset your flag NO MATTER where the mouse is - this makes releasing outside unsets your flag, and no other element had their flags set because they did not have hoverover when the click was initiated, so no reaction. The hoverover check (aka hit-test) is independent to this idea, so any approach can fit. Some ideas for the future: allow for alpha-test (clickthrough fully transparent pixels) or having clickables within clickables (some global flag to indicate click was handled this frame) Hope you find that useful
@priyakdey7891
@priyakdey7891 4 ай бұрын
Alexey I love your streams and content . I started working in IT with any background in CS, literally nothing. Went through support projects and what not and just survived. It was nothing more than a job for me. In 2019 I took a break and studied real hard to learn development, though I never knew what to learn, I just learnt depths of Java and its frameworks. 2020 I was introduced to twitch and learnt so much from all you streams. 9 years and still learning, your way to thinking and breaking down a problem is really really brilliant and following that approach these stupid leetcode problem are not just interview material to me, it’s fun to solve these and think in depth, implement these techniques in real projects. I wanna say thanks a lot. @Tsoding. ❤
@alang.2054
@alang.2054 4 ай бұрын
Don't want to be rac*st but you sound Indian or Russian for some reason
@VACatholic
@VACatholic 4 ай бұрын
I'm at 1:33:00. I'm assuming Jai accepts an identifier not to disambiguate collisions, but for the loop example you have. Identifier would be `i` in your code, as its in a loop.
@SiiKiiN
@SiiKiiN 4 ай бұрын
I'm curious why you need to maintain component IDs, wouldn't you abstract click down and click up as, unclick -> click and click -> unclick. This way each element only maintains its own state, if a component is unclicked and it was previously clicked then you know it's clicked.
@djupstaten2328
@djupstaten2328 4 ай бұрын
I like the approach. I think it's probably a good idea to have a worker thread run in the background dealing with input, so as to not block and cause hitches.
@Toctave
@Toctave 4 ай бұрын
Sorry to be blunt, but based on what ? I don't see how input handling could be slow at all, the kernel handles interrupts itself in the background and the OS's API just read whatever the kernel has to say, it's not a slow process.
@zaid4708
@zaid4708 4 ай бұрын
​@@Toctavebased on your mom
@TerminalHeatSink
@TerminalHeatSink 4 ай бұрын
Input is handled by raylib on every frame, regardless if there is input or not
@djupstaten2328
@djupstaten2328 4 ай бұрын
@@Toctave based on the fact that the GPU doesn't actually handle or detect user input, it needs to be interpreted by the cpu which will then forward instructions. This leaves the potential for a briefly 'frozen' ui if the processing isn't instantaneous. With a separate thread you can free up the infamous 'ui thread'. It's a very basic concept.
@djupstaten2328
@djupstaten2328 4 ай бұрын
@@TerminalHeatSink What exactly do you mean by 'handled' when there is no actual input TO handle?
@edhahaz
@edhahaz 4 ай бұрын
The web has an implementation problem, the ideas are solid.
@Catterjeeo
@Catterjeeo 3 ай бұрын
It's all Skill issues all the way down
@RandomGeometryDashStuff
@RandomGeometryDashStuff 4 ай бұрын
54:26 what about using half of id for non-variable components: full screen button has id (0x100000000) track panel buttons have id (i | 0x200000000) you would get collision only if you somehow load more than 0xffffffff musics
@io1921
@io1921 4 ай бұрын
currently learning c . eveyrthing make sense now
@RandomGeometryDashStuff
@RandomGeometryDashStuff 4 ай бұрын
19:40 can mouse pressed and released same frame?
@tomdeu79
@tomdeu79 4 ай бұрын
after about an hour i realized that i missread dom with Doom. So when comes the gaming part xDD. ??
@God-vl5tk
@God-vl5tk 4 ай бұрын
Streamin When?
@re_detach
@re_detach 4 ай бұрын
Very interesting perspective on "humans are the gradient descent" of this "model/black box" of a program that is trained on the code you are outputing (as the optimizer). Gonna chew on that for a while. After all, machine learning and AI is just humans trying to get out of their biological bodies and into technological ones.
@guilhermemonteiro604
@guilhermemonteiro604 4 ай бұрын
Present, teacher!
@jasio583
@jasio583 4 ай бұрын
where I can find a link to your discord?
@31redorange08
@31redorange08 4 ай бұрын
In Java Swing/AWT that's called passive/active rendering.
@aetherialKilix
@aetherialKilix 4 ай бұрын
like adding components vs. overriding the paint method? is that what you mean?
@ecosta
@ecosta 3 ай бұрын
I see what you meant, but immediate mode is different. Swing/AWT still constructs a tree of components.
@RandomGeometryDashStuff
@RandomGeometryDashStuff 4 ай бұрын
18:21 click is not just mouse button release when hovering over, notice how you hovered over `Unwatch` and released mouse button but nothing happened edit: he talks about that 19:16
@LALO-cv4ck
@LALO-cv4ck 4 ай бұрын
Mista azusin
@andrewgrasman8951
@andrewgrasman8951 4 ай бұрын
In this example we see that the requirement is mouse down then mouse up as you mouse up on another button that isn't clicked 18:30
@andrewgrasman8951
@andrewgrasman8951 4 ай бұрын
Ope
@abelrashid5184
@abelrashid5184 4 ай бұрын
How did you learned to do this ? Can you provide some resources that I can learn from ?
@yds6268
@yds6268 4 ай бұрын
It's years of experience. You just need to have enough motivation to learn things. Pick up a project you really want to do (like developing a website or a game), then pick any tool you like and start using it. There's a ton of tutorials online for anything. Anyway, that's how I learned programming. I just did stuff and googled for information I needed.
@rccsab
@rccsab 4 ай бұрын
If you want to learn C and this programming style, check out handmade hero.
@ecosta
@ecosta 3 ай бұрын
@@yds6268 - exactly. Also, if the tool you selected doesn't fit your needs, try to improve it, learn a new tool or implement one yourself. Rinse and repeat.
@RandomGeometryDashStuff
@RandomGeometryDashStuff 4 ай бұрын
53:43 what if hash collision?
@ecosta
@ecosta 3 ай бұрын
I had the same question. I think it should be fine for small UIs (i.e. Musiializer) but I don't trust this idea for complex UIs.
@OCEAN-fc9wl
@OCEAN-fc9wl 4 ай бұрын
Hello, im an intermediate in C and I understand it quite well, I want to start watching your videos to learn more but i dont know where to start, can someone help?
@arrannis5882
@arrannis5882 4 ай бұрын
You can open almost any playlist. They usually separate videos on different project and quite often built with C. You can start from this project or Olive.c (it is library for visualization)
@Stroopwafe1
@Stroopwafe1 4 ай бұрын
Just... start watching? Ideally from a first episode in a series so it's easier to follow along, but not required because he goes over what he did and what the goal is every episode. There's no requirement to watching...
@cristo_sal
@cristo_sal 4 ай бұрын
45:32 exactly this is an example of the “midwit” meme. Only true geniuses understand that the code should impose its will on you, not the other way around.
@azteccrov6113
@azteccrov6113 4 ай бұрын
Some guys just need sub
@gorenbk
@gorenbk 4 ай бұрын
do i?
@shubhamsingh3068
@shubhamsingh3068 4 ай бұрын
Immediate UI is basically a FP way of doing UI.
@user-sn9dy5sq1q
@user-sn9dy5sq1q 4 ай бұрын
I guess it is the other way around
@user-qm4ev6jb7d
@user-qm4ev6jb7d 4 ай бұрын
No, the FP way is Model-View-Update. You still construct the whole UI at every frame, but as an actual tree, not as a sequence of function calls. And then, after you've done all the rendering, you collect all the events that happened, and decide what to do with them. Not with many little callbacks, but with one centralized "Update" function.
@ecosta
@ecosta 3 ай бұрын
There are some similarities, but a FP UI would be different. More like transforming an UI into a form of function that takes the world state as input and outputs the graphical state.
@c4ashley
@c4ashley 4 ай бұрын
I recently wrote a console application. As the UI got more complicated, I realised it was what would be considered "immediate-mode." This is ImTui. Then it kept growing and getting more complicated, and I was having to pass multiple callbacks into ever-growing function signatures... I almost considered introducing some OOP! 😲
@ecosta
@ecosta 3 ай бұрын
Very interesting. I would love to see it in action. But I suspect there is something "non-immediate" if you are using callbacks.
@c4ashley
@c4ashley 2 ай бұрын
@@ecosta I'll put it on the hub at some point. It's basically just a wrapper for a few common tasks I do in FFmpeg.
@rubyciide5542
@rubyciide5542 4 ай бұрын
But you need a good brain to do that
@RandomGeometryDashStuff
@RandomGeometryDashStuff 4 ай бұрын
01:37:30 git push?
@qaqkirby9781
@qaqkirby9781 4 ай бұрын
when turn to rust?
@gerooq
@gerooq 3 ай бұрын
Ngl this just sounds like React, atleast in the way you're describing it in code.
@ecosta
@ecosta 3 ай бұрын
If you get only React (no Redux, libs, webpack, etc), use it without Component class (only functions). Then yeah. Very similar concept. But I would say the React way of passing callbacks doesn't align with the original Immutable mode intent.
@gerooq
@gerooq 3 ай бұрын
passing callbacks where exactly@@ecosta
@ecosta
@ecosta 3 ай бұрын
@@gerooqWhen you instantiate a component and pass attributes like "onclick", "onmouseover", etc
@rafaelfeldfix114
@rafaelfeldfix114 4 ай бұрын
You have convinced me exactly why we need DOM and react
@lolcat69
@lolcat69 3 ай бұрын
Nah
@jayjayojatinho9012
@jayjayojatinho9012 4 ай бұрын
Do it in Delphi and be more happier
@Faery69
@Faery69 4 ай бұрын
miss me with embarcadero stuff
@caio757
@caio757 4 ай бұрын
What is a DOM properly, is a widget?
@ecosta
@ecosta 3 ай бұрын
Please excuse me if this wasn't your question, but DOM stands for Document Object Model. It is the way web browsers model the "document" (i.e. the web page being displayed). In a nutshell, it is a tree of html components (div, span, etc).
@caio757
@caio757 3 ай бұрын
@@ecosta so is a data structure of the html components
@ecosta
@ecosta 3 ай бұрын
@@caio757 In general lines, yes. But what we call DOM is standardised - all browsers support that same data structure
@RealCatDev
@RealCatDev 4 ай бұрын
hallo! So you german or not?
@Ginko713
@Ginko713 4 ай бұрын
He is Russian
@khuntasaurus88
@khuntasaurus88 4 ай бұрын
he is russian
@samuraijosh1595
@samuraijosh1595 4 ай бұрын
He is Russian. They're like Germans but even smarter.
@cutebedbugs644
@cutebedbugs644 4 ай бұрын
😅 and they dance with bears ?
@martingrof1685
@martingrof1685 4 ай бұрын
​@@samuraijosh1595I think it's the other way around
@BurninVinyl
@BurninVinyl 4 ай бұрын
Ok but you still need a library, my slavic comrade. EDIT: even "Python" has a "library" called tkinter inside the language and there is no need to look around to find another one. With C or C++ without Raylib or IamGui or others, you can't do it so easily like the webdev does.
@ecosta
@ecosta 3 ай бұрын
It's more about the journey than the end goal. I love his approach of "let me try doing my thing until my thing isn't fun anymore". 😄
@wlcrutch
@wlcrutch 3 ай бұрын
emacs SUCKS
@siriusleto3758
@siriusleto3758 4 ай бұрын
Really, if it's a one-person project and if you're a lonewolf, a lot of things won't make sense. Now try to manage a project with many people without a standardized data hierarchy, it will be pandemonium.
@robuinoyr1371
@robuinoyr1371 4 ай бұрын
Cool, learn bunch of stuf thanks
Easy Annoying Popups in C
1:37:31
Tsoding Daily
Рет қаралды 26 М.
I regret doing this...
1:20:07
Tsoding Daily
Рет қаралды 60 М.
How did CatNap end up in Luca cartoon?🙀
00:16
LOL
Рет қаралды 7 МЛН
Don’t take steroids ! 🙏🙏
00:16
Tibo InShape
Рет қаралды 42 МЛН
I fixed Lua
2:16:48
Tsoding Daily
Рет қаралды 42 М.
Hiding Information Inside of PNG
1:53:49
Tsoding Daily
Рет қаралды 47 М.
Read a paper: Ropes-- an alternative to Strings
6:51
Vivek Haldar
Рет қаралды 7 М.
ChatGPT Can Now Talk Like a Human [Latest Updates]
22:21
ColdFusion
Рет қаралды 406 М.
This UI component library is mind-blowing
8:23
Beyond Fireship
Рет қаралды 543 М.
Hiding Data Inside of Executable Files
1:55:14
Tsoding Daily
Рет қаралды 24 М.
I tried React and it Ruined My Life
1:19:10
Tsoding Daily
Рет қаралды 110 М.
A simple BIOS for my breadboard computer
21:53
Ben Eater
Рет қаралды 320 М.
Machine Learning in C (Episode 1)
2:31:07
Tsoding Daily
Рет қаралды 208 М.
My Viewers DDoSed my Go App
2:36:31
Tsoding Daily
Рет қаралды 50 М.
Распаковка айфона в воде😱 #shorts
0:25
Mevaza
Рет қаралды 1,6 МЛН
Save Work Efficiently on Your Computer 18/05/2024
0:51
UNIQUE PHOTO EDITING
Рет қаралды 306 М.
3D printed Nintendo Switch Game Carousel
0:14
Bambu Lab
Рет қаралды 3,6 МЛН
Эволюция телефонов!
0:30
ТРЕНДИ ШОРТС
Рет қаралды 5 МЛН