You don't need DOM

[@blackhaze3856]

Tsoding becoming unintentionally the Grinch of web dev. I love it

[@Salantor]

Unintentionally...?

[@fragproof]

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.

[@robert-m6u7d]

You’re one of the reasons why I still believe in the internet and society.

[@w花b]

Don't do anything crazy the day he stops uploading because at some point he will.

[@jesusmgw]

Casey is even more of programming legend than I thought if he created this.

[@arjayonan2953]

You're a really great programmer. I wish I can have the same skill as you.

[@mouloudagaoua]

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 !

[@ronp6108]

Making a 2x2 single color image is pretty easy in GIMP btw

[@ratchet1freak]

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.

[@VACatholic]

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.

[@rafaelfeldfix114]

You have convinced me exactly why we need DOM and react

[@lolcat69]

Nah

[@Vulto166]

I would love to have support for some kind of themes in the future. I'd like to make it look like Cava.

[@alurma]

java script developer be like: where callback

[@MRECoelho]

This comment made my day!

[@RandomGeometryDashStuff]

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

[@edhahaz]

The web has an implementation problem, the ideas are solid.

[@Catterjeeo]

It's all Skill issues all the way down

[@djupstaten2328]

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]

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]

​@@Toctavebased on your mom

[@TerminalHeatSink]

Input is handled by raylib on every frame, regardless if there is input or not

[@djupstaten2328]

@@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]

@@TerminalHeatSink What exactly do you mean by 'handled' when there is no actual input TO handle?

[@priyakdey7891]

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]

Don't want to be rac*st but you sound Indian or Russian for some reason

[@Dr-Zed]

Making JS "developers" uncomfortable be like

[@StarContract]

JavaScript is the Chad's choice. It's OK if you can't handle the speed

[@Ujjawal_Gupta]

​@@StarContractSpeed and JS in same sentence? 😌

[@mipselqq3133]

​@@Ujjawal_Guptajs is not slow

[@cyanide0081]

​@@mipselqq3133no just every application that's ever been developed using it

[@somebodysomeone5594]

@yestechguy-fj9tmjs isn’t bloated, npm is (its really chaotic, with the leftpad and everything package. and for some reason an is-odd package, and an is-is-odd package to check if a function is is-odd, AND the ansi-red package, ansi-orange, ansi-yellow…)

[@tomdeu79]

after about an hour i realized that i missread dom with Doom. So when comes the gaming part xDD. ??

[@RandomGeometryDashStuff]

53:43 what if hash collision?

[@ecosta]

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.

[@RandomGeometryDashStuff]

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

[@RandomGeometryDashStuff]

19:40 can mouse pressed and released same frame?

[@andrewgrasman8951]

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]

Ope

[@gto433]

It will be interesting if you continue making your own react like framework, thats great

[@SimpleVar]

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

[@31redorange08]

In Java Swing/AWT that's called passive/active rendering.

[@aetherialKilix]

like adding components vs. overriding the paint method? is that what you mean?

[@ecosta]

I see what you meant, but immediate mode is different. Swing/AWT still constructs a tree of components.

[@cristo_sal]

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.

[@AndarManik]

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.

[@io1921]

currently learning c . eveyrthing make sense now

[@God-i2]

Streamin When?

[@0msdev]

Immediate UI is basically a FP way of doing UI.

[@СергейГордиенко-п4д]

I guess it is the other way around

[@СергейМакеев-ж2н]

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]

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.

[@LALO-cv4ck]

Mista azusin

[@re_detach]

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.

[@c4ashley]

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]

Very interesting. I would love to see it in action. But I suspect there is something "non-immediate" if you are using callbacks.

[@c4ashley]

@@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.

[@RandomGeometryDashStuff]

01:37:30 git push?

[@afterschool2594]

The web technologies is one of the most advanced technologies out there yet the most popular one is only the DOM. I mean bro they have WebAudio and WebGPU and the best part is its on any modern device in the world and it's pretty much standardized. It's so much waste I think that less people acknowledge this part of the web (The browser)

[@guilhermemonteiro604]

Present, teacher!

[@rubyciide5542]

But you need a good brain to do that

[@OCEAN-fc9wl]

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]

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]

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...

[@gerooq]

Ngl this just sounds like React, atleast in the way you're describing it in code.

[@ecosta]

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]

passing callbacks where exactly@@ecosta

[@ecosta]

@@gerooqWhen you instantiate a component and pass attributes like "onclick", "onmouseover", etc

[@jasio583]

where I can find a link to your discord?

[@abelrashid5184]

How did you learned to do this ? Can you provide some resources that I can learn from ?

[@yds6268]

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.

[@tialeilaforever]

If you want to learn C and this programming style, check out handmade hero.

[@ecosta]

@@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.

[@jayjayojatinho9012]

Do it in Delphi and be more happier

[@Faery69]

miss me with embarcadero stuff

[@qaqkirby9781]

when turn to rust?

[@ariabk]

do i?

[@caio757]

What is a DOM properly, is a widget?

[@ecosta]

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]

@@ecosta so is a data structure of the html components

[@ecosta]

@@caio757 In general lines, yes. But what we call DOM is standardised - all browsers support that same data structure

[@azteccrov6113]

Some guys just need sub

[@BurninVinyl]

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]

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". 😄

[@UnrealCatDev]

hallo! So you german or not?

[@Ginko713]

He is Russian

[@khuntasaurus88]

he is russian

[@samuraijosh1595]

He is Russian. They're like Germans but even smarter.

[@cutebedbugs644]

😅 and they dance with bears ?

[@martingrof1685]

​@@samuraijosh1595I think it's the other way around

[@siriusleto3758]

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.

[@wlcrutch]

emacs SUCKS

[@robuinoyr1371]

Cool, learn bunch of stuf thanks