Lowkey, never heard about portals before this video, which probably speaks to my (in)experience with React and most of frontend/fullstack development. With that being said, I know I can always count on your videos to give me a new POV and more ideas to implement, which I always love to experiment with. As always, thank you Theo!

@arashitempesta

7 ай бұрын

been working with react a while and portals I've seen them mostly relegated for handling things like modals and such, before portals you had the classic popup context in the root of the app where you triggered an action to open it, and just passed the content to render through it, portals make it waaaay easier if you need to ensure is high up in the tree. But this way of using them to ensure components remain stable between renders while being able to change where they are placed in the DOM, I feel something clicked in my brain

@ArcticPrimal

7 ай бұрын

really people have mostly use them for modals

@nclsDesign

6 ай бұрын

In also just very recently heard of portals when I started using Radix UI

I was the secondary dev for the Oppenheimer movie website. That was a crazy 4 months, the project was a beast, but it came out beautiful

@mikeha

7 ай бұрын

whose idea was it to automatically set the language based on the user's location, and not to provide a way to change the language? This is the most annoying thing in website design today. Not everyone in Latin America speaks Spanish, there are a lot of expats who would prefer to see the English site but it forces it over to Spanish with no way to change it

@mrpocketsss

7 ай бұрын

@@mikeha That's a great question. I'm honestly not sure. There was a language selector designed initially, but at some point it went away in favor of using the geographical detection.

@gm42069

7 ай бұрын

It's a really awesome website for sure! BWhat did you use to create this 3D scroll effect?

@MTSxoff

7 ай бұрын

It's a crazyy website. How long have you been a developer for?

@mrpocketsss

7 ай бұрын

@@gm42069 I'm not sure what our 3d designer used to create the 3d scene - but he set up the cameras and movement. And then we used lenis to control the scrolling of the page, webgl to render the 3D scene, and just regular vue to update the position of the camera and scene to render.

Worked on a drag and drop feature for a product management tool in my company , i was really proud of it , and making it work perfectly makes me more confident in myself everyday. Seeing what you built here makes me wonder how much things had to be managed in your code. Its mind blowing , shout out to theo fr ! ❤

@skyhappy

7 ай бұрын

What libraries did you use for it

@DanielClipsTVS

7 ай бұрын

@@skyhappy react beautiful dnd

I once made a css animation of a cup filling up with piss for Michael Reeves and he ended up using it as a stream overlay. Really proud of that one 😊

@roid1510

7 ай бұрын

Hat off to you sir. I loved that overlay

@anuvette

6 ай бұрын

can u link me clips ?

Man, I love this positivity streak you've been on! Great video.

That dude who said "I'm in a react component" made me chuckle so bad

Nice. For those who have never used this pattern before, you can think of inverse portals like ur pulling in a component to some location in the DOM. Portals are niche, but super powerful when you need em. One example I had for them was when we had an expensive query to load data, and the UI loading you can think was like a small widget. Product wanted some aggregated data to appear in lets say the header bar of the page, which is more at the root of the application. And it only is to appear when data is loaded. So portals let our data live where it was fetched from and managed. In the widget. But then a tiny piece of the data, could find its way elsewhere. And when the widget goes away, it takes away the tiny piece of data with it.

@ghulammujtaba9236

7 ай бұрын

That's impressive. Is there any library that makes working React portals easy or some easy-to-understand guide?

@michaelchen8910

7 ай бұрын

@@ghulammujtaba9236 Its pretty easy just on its own. You put what you want inside a portal, tell the portal where your target element is. Done. I would just start with the official docs. I think perhaps the name make it sound more ethereal and complex than it actually is.

disagree, the coolest thing youve built is this community

@leparkorcraft3100

7 ай бұрын

W rizz

@namesare4fools

7 ай бұрын

so true

@everyhandletaken

7 ай бұрын

Wow, I like that comment! Nice one

@tokiomutex4148

7 ай бұрын

let likes = 69;

@xX_dash_Xx

7 ай бұрын

🍆🚴‍♂️

This drag-n-drop dynamic UI is very similar to what we've built at LeetCode (we call it Dynamic Layout). I know it's complex, but end UX definitely worths it!

The craziest thing of this story is you saying your manager jumped in and did some real work

Really cool, very great use case for portals. Congrats!🎉

Thanks for sharing, really cool ui and ux and the use of portals was a very creative idea! ❤

I build a service in Rust that optimizes product images very well, with tracing and logging. with it, we reduced a lot of costs regarding how we store and serve images, with various improvements to come.

Thank you for sharing your experiences with us. ❤ I'm trying something with Micro Frontend and it's pretty fun. Also, I sometimes have difficulty conveying what I have learned. As far as I understand, it is a skill that will improve with experience :)

I have so many questions... I don't even know if I could sum it up into words right now. This flips my understanding Here's a few: 1. Was it normal that your manager could... One. Jump into code as proficiently if not more proficiently as you. Two. Have the time to jump into code at all instead of full-time managing things. 2. How did you divy up the work among the other devs? Did you choose what you wanted to work on and then just present it to the other devs on how to do stuff and had work broken down that they could pick up? Was there project management? Jira? Did you need to make tickets and a full roadmap? Who made the tickets? How did that workflow work? 3. Did you have a designer Figma this up? 4. How did you go from "We want a mod view." to "We know what the mod view will look like, act like, contain." How long did that take? Months?

I built a similar page in a Vue app once that also had arbitrary panels containing an assortment of components that weren't all defined ahead of time. I used the awesome golden-layout package to handle all the panels, then hooked up a heap of custom logic to get all my components loading. This was back in the Vue 2 days so I didn't have the composition API to help with building the components or the Teleport component (like a portal) to populate my toolbar with the active elements controls so it was some pretty complex code. Was also really happy with the result though.

Very interesting video about something cool that I wasnt aware of. Portals and react mosaics sounds very cool! Thanks for sharing :)

I’ve never thought of using portals like this, im gonna watch that other video and experiment, thanks a lot Theo! Awesome video:)

This was a great video format. Thanks Theo!

Oh nice. Love the videos you put out. Thank you so much ❤

That's a really cool project Theo, great explanation! When I was at high school (2019?) I had a summer job where I had to build a system to display ads on multiple computers. I was probably in my first year of serious programming so it was a big task for me. Previously I always used PHP, but wanted to switch things up, so I chose React for the admin ui (here you uploaded assets, created the scenes and registered displays), it had some cool drag n drop features. For the backend I used Express and surprisingly it went smooth. The client app was vanilla js and was refetching the api every minute to check if the scene has changed. For the display computers I used Arch (install was successful on the second try haha) and setup a startup script that would open Chrome in kiosk mode and appended a mac address to the client app url so you could distinguish the displays. It was a really fun project where I learned a lot, since then I sticked with React.

Oh, _you're_ the guy who makes it so some chat history loads when I load into a new page! Thanks!

Reading the title of the video, I thought you were going to talk about your moustache.

I am very proud on my working drag and drop functionality lately. My buddy and me got it finally working now. It was a challenging task for us, since we both aren't good in CSS and furthermore also had an mosaic layout of the containers. It finally clicked for us with a flex and the column-count properties. After countless hours of broken layouts this was just bliss. Best thing was, that we motivated each other and that got me ambitious.

Would love to hear a more in depth talk about how the drag and drop with the portals work, which you said you can talk about for hours! :)

Currently working on an inventory/note taking app. Inventory is organized by Collections. One functionality the tool requires is the ability to send emails about the collection. The previous version of the tool would create an eml file for the user and download it. The user would then have to open the file with outlook then send it. With the new version I’m using ransack table to allow the user to select which items they would like the email to be generated for. I built the email template using react email. But one feature I really wanted was to give the user the ability to edit the content of the populated template so I implemented a rich text editor using tiptap editor, that takes in the html generated by react email. This essentially gives the user an editable preview of the outgoing email and no more downloading of eml file. Created an api that connects to our mail server and allows sending of emails directly from the app.

this is really cool mate. well done!

I've made map visualizer for Travian web-game back in 2006. The challenge was to fill 800x800 grid with dots of sizes 1-10, which highlights in group while you hover, say about 10 of a primary group and 100 secondaries, using nothing but jquery while trying to be responsive to user input. It fails miserably on performance. So I end up putting all possible classes on every dot and rewriting over input events, letting the browser do the rendering instantaneously. That was cute little hack, but my most satisfying work is on backend, some of which made my company huge buck and saves thousands in cost.

This is one of the best use cases of portals I've seen!

I build a drag and drop app for my final project at the university, my reviewers gave it 100/100, it was hard but it was fun and i am very proud of it

Oh that's gold. I wish it was open source because I am atm building a very similar tool. Great stuff 👏

Portals are great! I have used it on a table filter to render the current filter state on a chip in other place of the Dom

Worked on a Project Management software and was given like 2 weeks to make it. I went over the deadline and was going to deliver it 3 days after the deadline. The client said that they don't want it anymore as they went for a paid Project Management software like a week after assigning me the project but then forgot to tell me about it. Kinda hate them for it but still proud that I manage to make something like that in 3 weeks :) It ain't much but it was a fun project.

I ran into almost the exact same situation, and ended up with a very similar solution and state management and performance implications. To make my components draggable between multiple areas of my app, I also used React portals. It just uses 1 type of portal host, though, so that each area can both define and accept components. An area can then be entirely hidden (sort of app drawer) to prevent rerendering the components. I keep a dynamic map of the placement in local storage. As for the state problem, I ended up converting all such state to a global state solution, as it genuinely is in fact global state and can be properly solved at that level if you have access to that part of the code. It's actually important that you get a new instance when portaling to a new parent, as otherwise many libraries would not properly function (anything that uses a ref).

I've build a ray tracer that simmulates how sound reflects from 3D structures... it was hard as hell, noone uses it, but it was so much fun :D

I don't know if this is awesome from other people's opinion, but something I liked building in the past was when Clubhouse was going viral all over the world and they didn't have a desktop app so I made an unofficial one for Windows/Linux/Mac using Electron, and also then when Bluesky took off, I built my own client just to experiment with it which is called Kite.

That was cool. Kudos. React component trees are not the same as the DOM tree. So yes, React Portals is the way to go here.

Something I'm working on now is something specific to GIS, but I'm porting an old application from its current framework to a new one, because the old one is being deprecated. The framework itself is pretty neat, it's essentially a wysiwyg editor to create simple single- or multi-page mapping applications, and it supports custom widgets. The new framework uses React for the rendering which is nice (or terrible depending on who you ask), but each widget is isolated from one another and the only communication you can have between them requires you to use Redux. What I'm most proud of about the port so far is sort of building a system that sits on top of the framework to abstract away almost all of the boilerplate (including the actual defining of a Redux store). And I also made it so that custom widgets can even opt-in to have their state stored in the URL, and only state they want stored there. It's completely invisible to the widget code itself and it just works. Stuff where it *just works* is usually where I end up the most proud.

Very cool innovation. If you were going to build the same thing today, would you still do it the same way, using the same packages? Or would you use a different package/approach?

Ooh i worked for our companies internal team that supported this out of the box and supports all the frameworks out there.

Didnt really develop it but it definitely helped the productivity and work satisfaction in the team. We had this enterprise Java Based CMS that was a pain to work with. Had to install it on your machine locally and itd always crash. Also had issues with different versions/configurations for different projects. Oh yea didnt work with M-chip macbooks either until its october update I containerized the application and did my best to make it as simple to use for devs with no docker experience. General satisfaction went up in the team and we hit historic lows in crashes.

Back then you had to do tons of stuff on top of mosaic but i would love to have your review on how much mosaic has upgraded now and what are the things to not fall into to avoid wasting time. Please consider making one video on this!!

Very inspiring to me, thanks a lot!

I went searching portals after two seconds of watching this video.

I noticed when you hide a panel on the side bar, it turns into an icon. Although hovering over the icon shows the name of the panel, it would be cool if the icon showed up next to the name when the panel is mounted. This would make the mental association between function/name and icon quicker and more intuitive.

@The123Maylor

7 ай бұрын

I gotta add that this is one of the coolest GUIs I've ever seen 🙌

@t3dotgg

7 ай бұрын

Fair points! iirc we couldn't make the icon look good at the smaller height for the panels. Might bug the designer w/ this idea tho 👀

This look bomb, congratz.

i am forever thankful for this

I thought i have build pretty cool project, but when i saw the video, i just totally forget what i have build lol Great stuff thanks for sharing with us.

react portals reminds me of z-index in css, cool feature but i don't think anybody needs it in 99% of cases and probably easy to abuse. I didnt even know the feature (portals) existed until a couple weeks ago.

@yowremco

7 ай бұрын

You probably dont have that much experience if you think 99% of cases don't need z-index.

@geraldseydoux2252

7 ай бұрын

@@yowremco I have decades of experience and he's correct, if you understand dom hierarchy and positioning there's almost never a need to use it. Sounds like you're projecting tbh.

@RaZziaN1

7 ай бұрын

99% don't need it, portals are for this 1% @@yowremco

I've just finished developing something really cool for react that makes composability and advanced patterns a breeze. Hopefully with some good documentation I can get the idea across

@vladimirfilipovic5845

7 ай бұрын

Do you have a github repo for that?

Is there an example somewhere of the functionality of keeping the component state while moving it?

I need to make a dashboard that has essentially this exact same functionality in terms of docking, resizing and moving and hearing this is not encouraging at all lool

I love locking things to keep them safe.

I literally would have quit coding if I didn’t watch your vids Theo. Just got done debugging my own embarrassing code. But I now have a functioning API and App so…the shame is overridden with joy and learning. I love coding!!! ❤

Does anyone knows a repo for something like this? the sidebar drag and drop on the panel with the mosaic

ohh this is what radix does thanks I learned new thing today

Is it a bad idea to just sync state with local storage? When a component is unmounted and remounted, you can sync it back again. I’m guessing you need this anyway to persist state on refresh?

@deformercr6680

7 ай бұрын

They had no control over how any of the widgets manage their state

@OryginTech

7 ай бұрын

@@deformercr6680 ahhhh that makes sense. I can’t even imagine working on a project that convoluted. Gross. Pretty cool solution in this case.

@rortan

7 ай бұрын

​@@OryginTechit's not gross it's just how most big tech companies work. What would definitely be gross is if some random engineer from another team who doesn't even know how your code works goes ahead and completely refactors your team's state solution. Requirements change but when you're dealing with mission critical code refactors become expensive quick

@OryginTech

7 ай бұрын

@@rortan yeah I get it, I’ve worked in said big company and quit because of issues like this and other reasons. In my experience it’s usually inexperienced managers breaking features up into tiny parts and then getting some junior engineer to write a small component without any oversight. Then you have to merge multiple of these small components into a feature and it screws everything up. There’s never enough time to go back and fix things. You also get the legacy components you need to work with once in a while.

hey, but how do you keep the positions after page refresh when dnd, do you save indexes in the db?

for now coolest thing I have built is a full stack app, I am a frontend dev, i know backend but it always has been too intimidating but tRPC simplified it well..

Fun thought experiment: With the same requirements and constraints, how would you do this project with your current knowledge of React? Maybe go one step further than a thought experiment, make a prototype.

I'm a university student an the coolest thing i have built is probably an electronjs app, using java jar file to print pdfs.

The thing I'm most proud of is that I develop multiple new features & UI enhancements of a cannabis POS system app made in angular. 11 months of hilarious hard work with my manager to accomplish the roadmap.

Seems logical, keep the basics alive but hidden and render when needed

Not sure but maybe block order changing could be done with order property for flex items without losing state.

So cool!

its pretty cool

The chrome extension called Chat GPT File Uploader Extended. That is my cool thing :P

Genius state solution

I assume the difficult part was not dragging and dropping, but telling react you've modified the dom

Man hearing about the disagreements between workflows and tough deadlines is unfortunate. Especially the whole limited access to the codebase you needed. Ideally everyone could be on the same page for the greater good of the project but that’s not how these things seem to work. I’m happy you found a way around it but I wish that wasn’t the norm.

Have you ever thought about creating some online courses? I think you'd do well with that. Thanks for the videos.

I wish I build something this cool eventually. Sadly, I am just too bad for this stuff Back to making forms and f*ing them up!

Which tool is that for drawing diagrams? 8:40

I wish that was open source! Would love to check out the code.

Now I am realizing you kind of look like 'Mobius' from 'Loki'. 😀

React project difficulty level: 10/10

i made my personal portfolio using nextJS 13 with next ui v2 (SSR) and im rendering component , but in production on vercel i had some issue for server component especially in typerscript , the worst decision of my life for using ts for first time and that for my portfolio , i wasted too much time and the fix was a comment 😔 {/* @ts-expect-error Server Component */}

3:34 "we had a very short deadline, in about 6 MONTHS" 🤣 cmon thats not short

so you mean by that you not actually moving the comonent you moving the portal right ??

What is the drawing software?

Simpler alternative to using/hacking portals together: use a single global state manager

Portal 3: Mods!!!

(fire)(fire)(fire)🔥

Nice to know that twitch spies on you

… damn I was proud of converting an a open source api to graphql with zero prior knowledge, and then this guy comes on and flexes all over us.

a TODO app LMAO XD

❤

havent built it yet.. not at that level. i have built stock scanners that have made me money and gui interfaces for arduino boards.

Beautiful solution but RAM will cry in the corner.

Makes me wonder if you really needed this to be React based - you can use vanilla js with React... Sometimes, that's the less complex solution.

Crazy that twitch was dedicating that many dev hours for something that probably doesn't add much value to twitch in terms of growth.

@arashitempesta

7 ай бұрын

Kinda sad that I understand what you mean, in general I disagree that they dont help in growth as moderation tools are extremely important for something like streams and its still one of the main differentiators between youtube and twitch, but at the same time, they ... arent main revenue drivers so being able to get 3 engs and so much time into it kinda shows how twitch was back then

@t3dotgg

7 ай бұрын

I promise you I personally watched Twitch invested 100x the hours in things 10000x worse

Hesitant to share but, hell ideas are cheap... I'm throwing around a better goal setting idea for streamers and content creators. A streamer/content creators sets a goal, then their fans throw money into a pool. If streamer completes the goal, they get the money, if they dont (some how socially enforced), it gets released back to the original donors.

Smart

@t3dotgg

7 ай бұрын

Kind

2:59

what library is this?

Twitch obviously really have piles of cash to pay 3 engineers and a PM and a QA for 6 months to re-implement frameset and behaviour in react. It's impressive noone thought this thru properly, even I do admire persistence to make it that good. Unfortunately, I witness such short sightedness more and more in React and other web-dev communities, despite browsers becoming more and more powerful environment. I'm not sure what's up with that, is it laziness to understand and read docs or it's just no longer cool to write efficient code.

@manupadev

7 ай бұрын

What would you suggest as an alternative. I'm really curious

@vilaahmed

7 ай бұрын

@@manupadev I already said, a frameset :) why going above and beyond to create something that will be not so worthy, a liability instead of an asset. As a user, it might be fun to play with for an hour or so but beyond that it looses it's value to them. Anyone remembers Office 2007 and it's menus and toolbars that were so customizable that you can even remove them? Well, guess which feature overwhelmed their support department 😄

@RawbLV

Ай бұрын

Framesets are deprecated

Hello world

when a frontend r3t4rd discovers OOP

I built a todo app once...

@wlockuz4467

7 ай бұрын

I built a todo app that was connected to the internet!

Functional programming... with JS... makes me laugh every time... Also, this FP obsession on the UI side of things, is what brought frontend development back to the stone age. FP is utterly the wrong thing to use as a main "pattern" in UI. Just open the bloody DOM and you'll see why.