Flexbox in 3d?? How is this even possible

I am absolutely blown away with pmndrs/uikit. I always love what the poimandres crew is cooking but this is some next level stuff. React Three Fiber devs are eating good today
SOURCES
/ 1762069894932160943
docs.pmnd.rs/u...
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏

[@abhinav.robinson]

Everyones gangsta until flex overflows and z-index bugs in 3D

[@andgoedu]

z-index: 1000000; :p and just override everything - i make it broken from the start 😂

[@abhinav.robinson]

@@andgoedu z-index: (max_safe_int) :3

[@perz1val]

Z in 3D is just the 3rd dimension. When overlaying flat planes in 3D you'd need "z-index" for each axis which could be realized with quaternions xD

[@abhinav.robinson]

@@perz1val yes, and have you seen texture clipping bugs in game. I might be wrong but that would be the same thing here with UI.

[@thabo256]

shouldn't it be w-index then?

[@cherubin7th]

How to center in 3D D:

[@mrdoob]

Center is default in 3D 🤓

[@martijnvdven]

After making sure our React apps could take inline SQL just like the original PHP days, it is now time to make sure our React apps can inherit Flash as well!

[@lukasmolcic5143]

ok boomer

[@sauravyash]

dinosaur grindset

[@brandonwinston]

I started programming in 3d engines and when I started web dev i was surprised this kind of UI wasn't around.

[@fev4]

you know what, this is actually a great way to avoid web scrappers

[@NAMEYOUTUBER]

good luck to the bots trying to scrape data in the z-axis

[@shawn-skull]

and so SEO

[@shawn-skull]

and so SEO

[@d4v3w]

Reminds me of those good old Flash swf pages 20 years ago

[@ktxed]

history tends to repeat itself. we rediscovered php as htmx or 'use server' and canvas rendering as an homage to swf.

[@jamesryan864]

Would a hidden, unstyled, static dom copy work for a11y?

[@WhatsuppFudd]

The rant part on the canvas bug is food for thought on how little skills on drawing (2d or 3d) exist in web dev community. Just as D3S seems like a game changer but at the end of the day it's just a thin wrapper on svg, a new version of VRML minus an event/transition model is not going to change the fundamentals on the lack ef visualization skillsets in the web ui/ux world.

[@shapelessed]

If your fan starts spinning then there's a simple solution. Take it out 👀

[@corewwwi]

hold it

[@900bands]

put it in rice

[@scrapmine]

If they want a mac without fan noise they can get a macbook air.

[@atomparish]

My PC has NEVER been quieter thanks for the tip!

[@shapelessed]

@@scrapmine Coincidentally, that's exactly what I did. I have a Ryzen 7 3700X PC that somehow idles at 27'C on air cooling at 170RPM, but goes up to 70'C at load and makes a fair amount of noise (not the annoying kind, but the wooshing air kind of sound) I just switch to my M2 Air in the evenings because it's dead silent. Then I only hear the high pitch from the docking station's coils -_-

[@staaky]

the b5x-stateful error message could be from a browser extension, 1password currently has that bug

[@ego-lay_atman-bay]

I use a block based programming language (like scratch) called snap, which uses morphic.js, a canvas ui library that the snap dev made (it's a reimplementation of morphic in javascript). It's not the best canvas ui library, but it is still pretty good.

[@craigalbert8054]

Looks like their own docs didn't put a size on the Canvas element.

[@dimpleyadav874]

I wonder if i can use this to make my spline tool canvas tag responsive or maybe i can embed my spline scene thru uikit and ditch spline tool altogether

[@Fanaro]

It is mindboggling that it took this long for us to get here though, considering that 3D videogame interfaces have existed for decades and decades by now.

[@elirane85]

Well, have you ever tried to use a website that has "game" like ui? It looks good but it's maybe one of the worst ways to present information. Game menus/ui are usually a small part of your application, not the main thing and they are not what you focus on when playing the game. When your entire application in the UI, all of this "fluff" gets in the way of actually using it effectively. But that's just my opinion, maybe other people do want their google searches to have bright flashing colors and 7 different types of effects ;)

[@codeChuck]

1. What do I think? - I think, that I should do some project for me and make money on it. 2. Is the future 3D? - The future sites are same old 2D, but with 3D embeds for better experience, as you said. Some of them would be entirely in 3D. - Also the example you showed sucks hard, because I hate useless moving parts on the screen, that block actual useful UI. And UI should be static. Moving parts are good in video games. 3. Should we expect more component libraries to show up and challenge the way we think about things? - What? Of course! What kind question this is? We are JS devs! New lib or update everyday! Deploy to prod on save! 4. Is this a real competitor for the old days of flash? - Why not? It better to be fast, and do not burn the video card in the process.

[@oneeyefpv]

Kind of ironic that Theo hates on Flutter / Dart, but props this library ... lots of bias going on

[@karlgustav9960]

Actually 3d accessibility is not that difficult using web components. I’m currently building my own web component factory, but you can probably go with something like a-frame or lit components. The trick is to have to host component not use shadow Dom directly, but to add a child Div and put the canvas in a shadowroot in there. That way all simblings inside the host web component can receive keyboard input and tab focus. There is absolutely no need for r3f a11y that way. I implemented it as a wrapper around react components, using a component context to communicate between the react world and the webcimponent world, but I did this for convenience. Also using r3f you can set the frameloop to „demand“ then you MacBook stops glowing :-)

[@yugalkishor557]

is software engineering overhyped?

[@kubre]

Flexbox in 3d is not achievement we should be worried

[@zuma206]

i didn't know there were flexbox haters

[@sinewaveaddict]

@@zuma206 same

[@waleedsharif618]

Flexbox is the best

[@dannyisrael]

Someone explain this to me plz.

[@NabekenProG87]

Hasnt there been a Svelte 3D library for some time now? But as far as I can remember it was only a proof of concept

[@NabekenProG87]

@@hicoop Thats what I was thinking of, didn't remember the name. Glad to hear it got some updates since last time I used it, definietely going to check it out

[@TBTapion]

I wish these things were made more framework agnostic Edit: pressed post a little too quickly. This is incredibly cool though. The flexibility of just having normal dom elements like this in the canvas is great

[@absurd0000]

R3F dev here, stoked to play with this!

[@thedavistheory7674]

Give some love to the react xr repo, last commit was 10 months ago I think

[@snatvb]

I am from big game dev and work on big product. So, yes, we use React & Typescript to build GUI :) so, we had xml as language to describe scenes in games. Now we got jsx - that really powerful and gives you a lot of possibilities :) I hope this will continue to develop

[@atxorsatti]

weird flex but ok

[@niuniujunwashere]

"weird *flex*" i see what you did there... ;)

[@gullinbursti]

Reminds me of the PaperVision3D days.

[@AvanaVana]

15:00 pronounced “dry”. As in German, for…3. As in R3F & 3D. 20:45 ew…no. I was an old macromedia flash and director (also…quark immedia…anyone remember that one??) developer years ago, but some things should just stay dead.

[@vitalysuper3193]

I like how devs still push examples that doesn’t work with out of the box configs 😊

[@alirezakarampoor8914]

it's always funny to see front end devs rediscovering things that are considered old tech in other areas XD like WOW now we can render UI in opengl inside a canvas , game devs and imgui users are laughing so hard right now .

[@preyescar1]

Super hyped, this will make developing 2D with 3D so much easier than using html elements 😊

[@SG_01]

It's a nice idea, but I'm not integrating an always running browser into Unreal, Unity or Godot or similar just to run a UI like this, and even if I did it would likely not be performant enough for most games, let alone AR / VR application. Remember that the target for that is at least 90 fps, preferably 120+, and you also still have a game to run next to that.

[@ThatBidsh]

I feel like this is just Declarative style programming for 3D, which isn't really anything new, but there's a ton of room for improvement with the workflows involved in that

[@vitalysuper3193]

2024: we can render a button! This a revolutionary

[@wrathop274]

Bro got skill issued in the middle of the video.

[@Bryan-zo6ng]

Can I create a VR app now in React?

[@Matt23488]

I've been a web dev for 10 years and the number of times I have tried to figure out why a page element is missing and it turned out to be something stupid like 'height: 100%' causing the element to collapse is mind-boggling.

[@spartanatreyu]

has a default size though. The reason their canvas wasn't working was because they won't using , they were using some spaghetti dependency hell's reimplementation of . If they weren't trying to compose all of these libraries human-centipede style, they could have just used the canvas element and your single rendering library of choice.

[@connorskudlarek8598]

For the AI bros, this right here is why AI won't replace software developers for decades. This is a unique bit of software that AI has never been trained on and does not have emergence to create apps like this. Learning this and figuring out how to make cool stuff with it is what you'll be doing as an engineer.

[@superbryntendo]

I might use this for temporarily banned users... It'd be super entertaining to just make their experience hilariously bad while they're on "timeout".

[@PootCoinSol]

it's weird not just putting the styling inside className. But I'm not a webdeveloper so what do I know

[@yugalkishor557]

is software engineering overhyped ? because of these so called indian youtubers glamorize it ?

[@Vin50000]

when he says go back to the 360 era at 4:53, I don't think he realizes that console came out 19 YEARS AGO

[@hank9th]

What exactly is UIkit? I see that word used in a lot of different contexts (e.g. as a web thing, or as being compared to Apple SwiftUI) and I can't quite wrap my head around it.

[@goodthink_ing1]

Apple "old" UI building framework. Quite wonky. SwiftUI replaces it. Very declaritive. Way better. UIKit sucked.

[@azuretan]

It’s used for a lot of things… YOOTheme has a library called UIKit too.

[@Fanaro]

Flutter done right?

[@MommysGoodPuppy]

as a vr dev, im hyped

[@arsheikh_insight]

what is the current web browser are you using now ?

[@kernel0verflow919]

Arc Browser by the Browser Company from NYC

[@arsheikh_insight]

@@kernel0verflow919 I will make one like this

[@hb50777]

Nd which theme is that on his vscode ?

[@LindseyMysse]

What about accessibility?

[@ChristopherCricketWallace]

I wonder if some people will like this because it would be much harder to scrape it for AI training. (not impossible, though).

[@audas]

Soooooooo - Flash AS3.0 - well, almost. Still a few years away. Rustwasm is bringing us closer - but this will help.

[@MattThomson]

Every time something like this happens I just wish we could have open sources flash instead of killing it off. Many years ago they used to use scale form for UI which was basically as3

[@audas]

@@MattThomson 100%. But the problem wasn't flash - the problem was Apple wanting the App store to be profitable - it was in all the major corporations interests to kill flash.

[@dragons_advocate]

1995 VRML flashbacks:

[@arthur...barros]

Macromedia Flash, been there, done that.

[@erentr7167]

this is just flutter but with 3d access

[@Lucas-gt8en]

flutter is just html but without

[@tonnoztech]

ei theo can you please make videos of 10 minutes rather than 20? I dont mind if you post double as much but I prefer shorter content. sometimes is difficult to allocate 20 min

[@edhahaz]

2026: How to make websites with Source engine. This is so cool, you can render at 80fps, unseen on web before

[@mikescholz6429]

Grid works in 3D.

[@tthecooljose4674]

them designers are coming

[@paul_sanchez]

did I see this live or is this a re-upload? I've definitely seen this before

[@trespaul]

7:08 france jumpscare

[@ikadekadigunawan5622]

it sound like a lot of core here

[@ktxed]

A usecase for vision pro lol 😂

[@LlamaPony]

flashify all the things

[@XEQUTE]

15:05 Matching cubes lmao marchine cubes theo

[@deckyfx2188]

this looks fun, but seems will cause debugging nightmare

[@sourabhmalviya1893]

Canvas is next flash

[@spartanatreyu]

always has been

[@med.brunofreire]

Well, Adobe Flash is coming back…

[@dominik_vit]

Now let’s add RSC

[@geexup_person]

React bros goes crazzzy

[@xGalasko]

LET HIM COOK

[@duro6969]

flexcube

[@IftekharHossen-rv7ht]

Make a video on directus cms. Best best best headless cms I have ever used.

[@razdingz]

hey man this is coool , more 3d stuff , maybe i can get job finally , and get the woman...

[@Nodsaibot]

lol F accessibility, 100% F it

[@engageintellect]

Awesome 👏

[@MitchKerry]

Yayy. Flash!

[@j.r.r.tolkien8724]

Please STOP!! 🤣

[@corymbuz]

r3dy ui is a similar (much worse version of this)

[@sapito169]

this is super cool but i dont need this use case

[@matthewpolak2167]

Why does your lip always look like it's running away from your teeth?

[@atxorsatti]

looking back and walking forward doesnt mean you are actually working forward. can we please stop this bullshit and actually focus on stuff that would make things more performant?

[@JeyPeyy]

That looks really cool and completely useless. Very impressive

[@Tobsson]

Cool. Cool, cool, cool. - Abed

[@SunsetTechuila]

Обед очки усы уютненько

[@valkyrieqp]

Thanks I hate it (as a 3D programmer)

[@Logan9312]

6:42 this is why JavaScript is the worst language

[@spartanatreyu]

That's not a problem with JS, it's a problem with crappy developers using too many dependencies to the point that they don't know how any of them works. This happens in every language that isn't a toy or only has one library with any usage.

[@darukutsu]

i read firefox in 3d 🤦‍♂️

[@dynamohack]

wow simple laptop have barely have juice to render the site and this is so cpu intensive not even usable wtf

[@merveillevaneck5906]

heavy dose of copium around 7:33

[@davidbriggs8109]

Yoga for multiple languages means it's supported in java, nodejs and c++ kzbin.info/www/bejne/rYSWdqCEnNeZmdksi=c5uRflFlqaFgo6mG&t=233

[@FUNNYcheese0806]

Ai proof your websites!

[@sub-harmonik]

wow more eye candy bloat, just what the javascript/web ecosystem needs

[@AncientSocrates]

That's cancer

[@samuelvishesh]

7:19 yeah, that’s why I hate dynamic languages like JS and Python. Cuz it doesn’t say what’s broken.