Doing UI in C to Piss Off the React devs
Вставка
- Опубліковано 12 лип 2024
- Previous Episodes: • Music Visualizer
Chapters:
- 0:00:00 - Announcement
- 0:00:40 - What is Musializer
- 0:06:02 - Plans for today
- 0:08:40 - Twitch UI Dark Patterns
- 0:10:38 - Supermarkets Dark Patterns
- 0:11:41 - bool fullscreen
- 0:19:00 - Important Disclaimer
- 0:19:42 - Can you compile C with Webpack?
- 0:21:50 - Planning the Next Epic Move
- 0:22:33 - On stopping FFmpeg process
- 0:25:13 - Placing the Button
- 0:31:27 - Prettifying the Button
- 0:34:56 - Highlighting the Button
- 0:38:16 - Drawing Button Icon in Inkscape
- 0:41:12 - Getting Inspiration from UA-cam
- 0:42:35 - How I make my thumbnails
- 0:45:40 - Preparing Icon Image
- 0:47:45 - Planning Resource Management
- 0:48:42 - About Hotreloading in C
- 0:50:28 - Music Break
- 0:50:50 - Adding Icon to the Button
- 0:58:05 - Tweaking the Icon
- 1:03:55 - Making the Button Clickable
- 1:05:09 - Factoring out the button component
- 1:09:12 - Planning the Hiding of the Button
- 1:10:07 - Isn't that cool? tsodinPause
- 1:10:45 - How I Architect my Software
- 1:13:33 - Adding TODOs
- 1:14:48 - Hiding the Button by Timer
- 1:19:20 - Real Programmers write their own Event Loop
- 1:20:22 - Proper Timer Initialization
- 1:22:05 - Planning the Next Epic Move
- 1:24:26 - About telemetry
- 1:27:48 - Drawing icon spritesheet
- 1:43:52 - Loading icon spritesheet
- 1:50:13 - Switching icons
- 1:58:22 - Icon index from state bits
- 2:00:25 - Outro
References:
- Tsoding - Musializer - github.com/tsoding/musializer
- nu11 - UA-cam - / @nu11_ft
- nu11 - WIP Works 2016-2022 - / nu11-wip-works-2016-2022
- pilotredsun - Achievement (full album) - • pilotredsun - Achievem...
- Inkscape: inkscape.org/
Socials:
- Twitch: / tsoding
- Twitter: / tsoding
Support:
- BTC: bc1qj820dmeazpeq5pjn89mlh9lhws7ghs9v34x9v9 - Наука та технологія
I don't think react devs are fast enough to react to this😅
They are still waiting for node_modules to download XD
I'm dead
I c
Im dead bro 💀
@@niculaelaurentiu1201 npx wait-for-two-hours
Clicked because of the title. Stayed because of your dev setup.
- No AI
- No prompt engineering
- No selling anything
Loved all 2 hrs. Thank you 🙏
30 mins in, and no React,
he really is doing UI in C
just Emacs, that's all you need
@@joaopedrodeamorimpaula8965 i prefer base vanilla vi with screens, but whatever gives a good workflow without disrupting coding cadence I suppose!
Never really tried EMacs in all my 40+ years of professional coding but it does look cool 😎
pain
and linux with tiling window manager
i'm impressed you go to the effort of properly chaptering these streams, nice one 👍
#music break
And this is truly one of the better reasons to program in C - to piss off the soy latte children that constantly rail against all things older than their birth year
when you spent XXX hours on project to be so nice, then make the video (+X hours) this is basically nothing .. a little pleasure if anything :D
Most programmers have OCD (I have it totally - I need to polish and polish AND POLISSSSSHHHH every little thing on project/video etc.) do I would be maybe more surprised if it wouldn't be there ._.
Dude is a legend
@@TheSulrossare there really people like that though and are you even a normal regular person? Ive been programming all my career for a living but I don't let it govern my entire personality or how I view others. Let alone a single framework or language.
This is like if you worked in forestry and you have people who like hand saws and people who like chain saws forming dumb factions online and calling each other stupid shit like soyboy over it.
They're literally just tools guys calm down. They're not a defining personality trait and definitely nothing to be this tribalistic over.
You aint pissing us off, I love this.
You love being pissed off
(Not negative comment)
@@vlad7269 ikr, better than pissed on
@@leduyminh48 disagreed
@@Cobalt985yoooooooo
@@Cobalt985💀huh
As someone who works with react in his day job i appreciate your effort to actually understand what is going on. I wish i could approach every new technology in that manner. Unfortunately often (at least at work) there is no time for that. I have no understanding for those who get offended if someone is genuinely trying to explore and understand how something works. Keep them VODs coming. Love it.
@@user-ql9mp5yf6c banco
It's the smugness and elitism that rubs people the wrong way. I've never met any web developer who gets offended at someone learning the inner workings of a tool. In fact, many of them recommend doing that to get a better understanding of the framework being used. However, it's when people act like they know better, are better, and generally look down on web devs that rubs people the wrong way. Not the method of learning.
@@daneparchmentjr the problem is that most web devs refuse to learn or don't show interest in learning how things works really, they just want stuff that works and are easy to use thats it, its understandable that for some people this is just a 9-5 job and thats it, but for others there's no excuses, i dont really look down on anyone since im not a genius or anything but im drifting away from web dev for this exact reason, im tired of working with people that don't know shit that refuse to document himself on how things work and often are in some senior/manager role, this doesn't happen in system/embedded programming, down there people know their shit
@@sharkpyro93 Just because you've had a shitty experience with poorly qualified individuals. Doesn't mean that most web developers are like that. My counterpoint is that where I work and many of the other places where I know people, all have web devs who know there stuff and understand their tools.
Web development has the highest job saturation atm, so of course numbers wise there are going to be more devs who aren't qualified for their roles than in other mediums.
And of course this happens in every other programming medium as well. Don't pretend like it doesn't. Just again because embedded devs are more specialized they have a lower saturation of jobs and thus there are less devs that would be unqualified. But it still happens.
Even Tsoding, in his own video didn't even try to understand why the tools worked like they do, and what problems they are solving. So he's a perfect example of what you're refering to from the embedded/low side of things
@@daneparchmentjrI am a web dev. He is better lol. The modern web is a bloated overabstracted joke. I do it because it pays.
As a react dev, I’m not pissed off.
Honestly, more than anything, I’m impressed. Well done dude!
Yeah, because the real intent behind this video was to piss off C devs. And he did a fine job!
exactly
Amazing work, thank you so much for sharing this. Such care for quality is delightful
Not usually one to jump in with feature suggestions, but I think there should be another type of plugin, one that renders meta-data from the audio file over the visualization. E.g "Artist - Track Name (year)" ... then you can combine viz + metadata-render plugins in different ways for different presentation styles.
Subscribed in like 2 minutes!
You are the man, bro!
Thank you for sharing!
You are literally the God of C. You have absolutely harresned the complete power of C . Excellent job man.
I would argue that this isn't really C but just knowing how to do things. You can be a master of C and still have to look up how to create a window.
@@DanniDuckok
the language itself is not that hard to master, it depends on what field you're working in
@@Tigregalis ok
@@markpozsar5785 ok
Just reading the title makes me laugh out loud. 😂😂
Lol same here
I love the simplicity of Tsoding's code. Sometimes I have a weird tendency of overcomplicating originally simple ideas - like modularising code that could stay "monolithic" without any issues or "mental cost". I think all my attempts at UIs based on "quad-rendering" ends up massively overcomplicated when simple bounds via variables would resolve.
Over the last 30 years, I have noticed that too many modern coders cannot simplify or encode the original problem enough to produce a good solution.
I think the ongoing degradation of code quality is mainly due to this.
I haven't coded much at all in the last 10 years :/
@@_Stin_ I feel that. After 20 years in this industry, I gave up on pushing for quality at my job. I feels like one day I'll have to explain what a "loop" is. Specially after AI tools like GitHub pilot becomes more popular.
@@_Stin_We can tell, there are many talented people, for you to be to out for 10 years and explain that modern code is shit is ironic.
@@jeanpierre5941 I would guestimate that only ~30-40% of code written in the last 15 years is fit for it's intended purpose and has any level of dependability or reliability. GNU broke things when they stopped having to produce code that did anything - Many programmers even cite the lack of any warranty as liberating. O_o
I find it hard to trust large software houses more than bedroom coders after seeing the source code for Windows and Office, let alone the Linux offerings lol
People are generally lazy and programmers are generally people...
Have you seen the mess of code that constitutes our banking infrastructure? Our government infrastructure or our even just our School Information Management Systems?
Imagine being told "You don't have to make it that secure/reliable/good, the contract is only worth $88000."
@@_Stin_ Completely agree. I'm a Linux and Unix admin, but do some coding and have read tons and tons of old C code that is still around from probably the 80's I would assume. I don't know how to describe it other than "tight". As simple as humanly possible. The notes and comments are out of this world too. Its like reading a proper textbook.
The thing that pisses me off a lot is the fact that we (soft.devs) are supposed to do a whole analisys of the code before doing any modification/improvement, but as you perfectly pointed out, we have to create a whole simulation of how things would work while also convincing everybody else, up until reality strikes and you now have to explain yourself why things are slower than expected...
It's part of being an engineer
1:24:26 that's why I think open source is so important, you can actually reach someone, and talk to them about your needs, or you can write your own code, and contribute, addressing your needs!
Wow, you can contact actual devs? All I get is forgotten inboxes, stale web sites with years-old articles and other lost members of the 'Linux community' asking questions and offering 'best' guesses - or telling me I've asked the 'wrong' question in the 'wrong' way O_o
Expert or detailed knowledge is still rare to get hold of and is usually hidden. ...IMHO.
@@_Stin_ I should have specified, about using/creating github issues.
Tsoding.. please understand.. us React devs work with React not because we hate low lvl C shit, but because these are the only jobs that exists in the tsoding-marked. If we could all do cool C shit and make money of course we would
as a javascript dev all i can say is your impressive and im not mad.
This content is nuts. I do work with fourier and similar transformations a lot and have an emedded background. Any UI / GUI framework i came across by now does not really work for me. But i really love TheCherno and your way of dealing with that stuff.
Makes me wonna add those stuff to my code and not close my laptop amd appreciate that i have studied some serious engineering not web dev. Oh damn did it at home.
>programming UI in C
>spend 2 hours to end up with 3 buttons
yep sounds about right
Gotta cut him a bit of slack -- he's doing more than pounding out code in those 2 hours.
Cope harder lol
It's because of you that I've been learning RayLib, and as I've been learning the ins and outs I've been writing a bit of a wrapper for it so I can have a config file and just load the GUI elements up in one go. I just may have to add this to my own language's standard library because it'd be pretty useful to be able to change the GUI on the fly even after a program has been compiled.
This is amazing man, always inspirtional!
This was the video that finally made me subscribe and finish a stream. I am making a game engine with a C base, so I expect this to be massively helpful. Been reading alot of OpenGL and Raylib Documentation, lets do this!
SDL f2w
@@flintfrommother3gaming Vulkan for the win my fellows. SDL or GL are gimmicks by now.
I love the title of this video, ha! I started learning C++ because I got so tired of building things with Node/JS and React, and not truly understanding how things were working behind the scenes.
ah i'm being bulled again :'(
im just making my money, dad...
It's ok, my dear! I also did js development for money. There is nothing to be ashamed of. We all need to eat. 🫂
This is one of my favorite UA-camrs , love the content
I've came to the conclusion that companies have most certainly realized that ''confusion = retention''.
I think this may be short-term. When something that worked for 10 years becomes really confusing, I keep using it out of habit. Hopefully, I eventually break the habit after the mental association of “this works” is gone.
Atlasian CEO and Jira Product Manager , aproves this comment.
49:20 It is UNREAL just how true this is about software techniques being forgotten and then reinvented decades later as the hot new thing. And I don't mean that to be taken in a pessimistic way to dismiss new things. I'm not sure this phenomenon is a "problem" that can be "solved". There are often good reasons for it when an idea fizzles out the first time and then becomes relevant again in a different context.
@TsodingDaily I was always wondering if a GUI done in C could do custom window management without utilizing the actual Window-Manager or the hooks (of the OS/Core) provided, meaning: Is it possible to split the elements inside your Musializer into separate windows in relation to the main (visualization) window, without explicitly requesting the actual position/dimensions/focus/etc. from the system (OS/WM) and can these subwindows be spawned without the OS/WM-hooks. What i am thinking of is little modules/subwindows, that can only run attached to the main window (instead of splitting the view inside of it), but are not themselves represented in the process/task-view, meaning they shall not be treated at all standalone.
So far the only way i found to do so was by creating a transparent window, use that as a sandbox and write my own layout/wm, but this is icky, requires working with the actual window-manager too, which makes cross-platform approaches unfeasible (if you want to support all major systems and Desktops/Widget-Systems) because it gets big and convoluted and it is easy to oversee/slip-in errors unknowingly breaking the modularization.
Any input appreciated.
Keep up the great work!
i don't know about doing that in C, but this can easily be done using a GUI framework such at Qt.
FWIW it sounds like the multiple-document interface (MDI) approach
@@resresres1 I mean, if Qt can do it, so can you. It may just be a pain in the ass.
The title is so funny 🤣 and the content is awesome. +1 sub
I love that video+your narration
I’m actually a react dev learning C and I enjoyed this video a lot! 😄
"It's kinda cool, it boosts your ego" (1:59:49) - i can relate to that :D
React devs still waiting for node_modules to download
2015 called
They want their joke back
@@cowabunga2597 Let's send both the joke and React back to 2015 forever.
@@cowabunga2597 It's not my problem they are waiting since 2015 to download XD
@@cowabunga2597 2023 called, it wants to know why 2015 joke is still relevant.
Actually we are updating package.json
Seeing some react devs complaining about the video just shows how things are wrong today. I'm also a front-end developer, but I really like to see Tsoding doing some C shit because I always learn a lot. The video is really great, made understand better about how one manage to render things using a low level language such as C.
Tsoding deserves more recognition for his job! Keep up with the good work mate!
Wait, are there actually react devs complaining about this video?
@@Tigregalis unfortunately yes. People nowadays see programming languages as a football team lmao
I don't get why front-end devs would hate on C when everything they use is made in C, the interpreter, browser, webserver, operating system, kernel, routers and switches, and so on. I bet a majority of all software, hardware, and the internet itself uses C in some way, if not primarily.
@@theRPGmaster yeah, don't know why either. Wish I was high IQ do to some stuff with C, but my brain can't conceive something complex as memory allocation and pointers, lmao.
@@henriquemarques6196 It's a blessing and a curse. Sometimes I wish I was a UX guy instead, lol. It's still worth it to have low-level control. And the basics of pointers and memory is pretty easy. I explained it to a layman the other day, clicks pretty fast.
One day in my university, the teacher straight up asked to make a calculator in C with full UI, but didn't even bother to tell how lmao and only gave us 1hr☠️
We kept asking him to understand, we don't know this shit, but he himself didn't know how to, so he just kept ignoring us and insisted on doing in C
I researched a lot, made something, but ended up showing a react project 😂 and showed him a random C code 😂. Shit takes hours to do ui in C with no understanding, he wanted us to do it in 1.
i was afraid i missed a c stream under the impression that it was typescript
I just started to learn coding.
I have not a clue what you talking about but I think you're a genius.
Upvoted for name alone. Well done.
This shit is Gold, man. You're keeping this section of the internet alive
I am a react dev, but I also coded my UI in C a while ago, with raw opengl calls (not recommended). I wish everyone to learn C (not C++)
True C++ sucks
bro ur video so great. love it 🙏🙏
Hey Rexim, is there a fixed lag between videos appearing on Twitch and on here?
clicking anywhere while in fullscreen should exit fullscreen imo. That way you also don't need a button (that has to be hidden and stuff)
That doesn't account for misclicks tho, it'll be really annoying if, while setting it up in a second monitor you click while moving the window and exit the full-screen, maybe it could work but it might just be better to require full intent to exit that mode
@@cesarHPM91 Unlike misclicking the shutdown button on Windows, it is pretty cheap to enter full-screen mode again :D
@@lievenpetersen fair enough lmao
"How I architect software" section is just perfect
Cool project, cool video, thx
Musializer is cool!
Is there any plans to implment other types of visuals, like bars for example?
this gives me the vibes of "Anything you can do I can do better"
dude you're awesome!
Thank you for doing that
How about writing some visual rice stuff for Linux in C😅
i second this. i need tsoding wm. :D
1:35:00 Texture atlases are somewhat rare on the web these days but they were very common 7-10 years back while forums were popular. Minecraft wiki uses a texture atlas for block icons but that's about it. People generally use woff icon fonts these days.
That inspires me actually, not piss off. Casual Tsoding W
Fantastic!
ахахахахаха))) посмотрел пока первые 6 минут, но уже весело))
tickling balls😂😂😂
Оч круто, рад наткнуться на тебя)
Another Mr Tsoding vod. Big poggers
damn bro you are streaming on twitch? i have to follow you then :)))) great content btw
after watching all Musializer videos, i can say c is easy and beautiful.
C is simple, not easy.
@@phillipanselmo8540 have you ever used js
@@phillipanselmo8540 Depends on what you want to do.
Wow you both have 36 likes as the time of writing my comment and now I'll make them 37 😀
Then maybe variables and functions where named wrong, they should be too short and completely not descriptive or reasonable.
C was my second language, so I have no issue writing anything in C :). I taught myself assembler way back in the day using DOS DEBUG command. Pre internet days, so I had to learn everything from the library and experimentation. When I discovered C suddenly writing programs became 1000% easier :). I later went to university and discovered that I was already using many of the patterns they were teaching due to the fact that I had the low level background.
Weakest white person or strongest black person?
Spoko filmik. Leci subik.
As a React dev, this video mesmerized me if anything.
I love this man.
2:41 .. I would just stay at this "It's (almost) impossible to use UI without a library - if you use UI in C without dependencies you basically created your own library". I wrote (almost) because if you write it with intention of it "not be a library" you technically can somehow mix code from "other stuff" with the "ui stuff" and then yep, I would not call it library then .. 😅
I'm not a React dev (yet) I'm very much enjoying plain HTML/CSS/JS in my early stages until I become aware
I like Vanilla Webdev too!
NOOOO, DONT BECOME A BLOAT SOY DEV, CONTINUE USING JUST HTML AND CSS NOOOOOOOO
It’s great to know vanilla web dev, but don’t let anyone dissuade you from learning react. The reality is that it’s the most use web framework and if you wish you find employment in this industry it’s pretty much essential to know.
Beast-level coding on this channel.
👏👏👏 you the best, thank you
React Devs will never financially recover from this.
Neither will I but it was worth it.
I'm curious as to why you use booleans for state instead of enums for things like rendering, capturing, etc. are they not exclusive?
After this project I'm working on, I'll learn React and shut up about it being too weird. This video was an inspiration to me.
React devs are to slow to react. The VDom is still reconciling what happen in this video.
hilarious. genuine quality. modern classic.
Using this for mpd would be insane
imagine if you were forced to render dynamic pages statically and label it futuristic
Love to see UI development in anything other than Javascript. I'm currently stuck with it and it's a love-hate relationship.
Consider exploring Jetpack Compose on Kotlin Multiplatform. It essentially uses the Android Jetpack but sits ontop of the different Kotlin platform runtimes (JVM for dekstop, WASM for web and Native for mobile) to run cross platform while allowing sharing business logic. Essentially, it's similar to what Microsoft are doing with MAUI but sitting ontop of a strong batte-tested rendering engine (skia) and a more mature project.
I hate JS too but it's difficult to justify other languages for UI when we know that the web is what UI is all about. It's more straight forward to make your own unified UI library in a JS framwork on the web than it is fighting with implementations of QT or even worse rendering vulkan from scratch.
I've started making some stuff with Vue
... A bunch of comp files just for a form? Why so complicated?
React dev, I'm not sure why this would piss me off. Vanilla code is cool, making UIs fast is cool too. How long have you been working on this?
yay, with no irony, after that upgrade musializer look became very solid.
I'm a React dev and I loved this vid!
im not pissed off, im impressed
How many times did you forget and did the "Rendering Video"....? I feel your pain bro. 😎
But the UI building with C is just awesome!!! 💙
I'm a react developer and I can't gt mad at you for your beautiful, really beautiful skill. I am at awe.
No framework - Those blind framework zealots will have your eyes for this!
I say well done for not using frameworks. You code has a high probability of working, stably, on many systems and for a long time as a result.
Reminds me of WIMP coding back in the day - Creating my windows at runtime according to settings.
Can you tell I hate frameworks? ;) In my experience, although they can sometimes speed up coding, they often just get in the way of good coding.
10/10 for actually doing some proper programming.
"let me reload my webpack bundle" i am zozzling right now!
ever thought of using the one mechanism that is superb for vector graphics to support app icons? font.
Best thumbnail ever
tsoding being legit funky @50:30
This is so familiar to when I made a UI in monogame
Vanilla DOM is plenty fast actually
Bro this dude is OG
17:15 analyzation? Yes, that's an English word. In common use, analysis and analyzation are the same thing. The technical difference is that analyzation is a means to an end, while analysis is an end in itself; i.e. engineers perform analyzations, mathematicians perform analysis. Why are those separate words? I don't know either, but I suppose it's the same thing as the difference between running and a foot race.
Also, analysation is the alternate spelling for analyzation that my phone is insisting I autocorrect to; apparently that's the British/Canadian version. I'm American, analyzation is the correct phonetic spelling, and you weirdos on the other side of the pond can pound sand for all I care. Britain invented "soccer", "though", and the imperial system of weights and measures, so I think it's safe to say that "colour" and "analysation" are also wrong.
PS: the word "analyzation" is slowly starting to look like a goofy collection of letters and not an actual word. Please send help, I fear someone has slipped drugs into my breakfast.
Engagement Vim style! 🤣🤣🤣 that cracked me up!
Great!
look at how much they struggle just to mimic a fraction of our power - react devs probably
I instantly like this.
What desktop environment do you use?
One thing I keep thinking whenever you do hot-reload: it would be interesting if you had an external tool monitoring the Musializer's src and, whenever there was a change, automatically invoke the compilation again... that would make you even more productive = ).
There are various tools that do this with ionotify I believe. They can be tricky to set up though
does somebody know what font he is using for his terminal/vim?
"On modern social media, [...] you need to tickle their balls a little bit."
- Tsoding, 2023
I Love the title of this video.
GOOOD
I'm sorry for my ignorance, but what is he using to do all this?(I mean, text editor and terminal, etc.)
Emacs
As a react developer I'm pissed 😡😡😡
Thanks for making this video