How did this not exist before???

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ธ.ค. 2024
  • The browser finally has a way to move elements! moveBefore() is a very exciting new API that has a ton of potential use cases.
    Check out UploadThing! uploadthing.com
    SOURCES
    groups.google....
    state-preservi...
    bsky.app/profi...
    Coolest thing I built vid: • The Coolest Thing I Ev...
    Check out my Twitch, Twitter, Discord more at t3.gg
    S/O Ph4seOn3 for the awesome edit 🙏

ความคิดเห็น • 97

  • @mrdeun3655
    @mrdeun3655 5 วันที่ผ่านมา +144

    Damn, he ran out of sponsors and had to result to default option, adverts for adverts.

    • @cherubin7th
      @cherubin7th 5 วันที่ผ่านมา +10

      Reminds me of "your ads here" posters in the city.

    • @codewithmoses
      @codewithmoses 4 วันที่ผ่านมา +2

      Sponsor him, lol 😅

    • @SIGMA_BLYAT
      @SIGMA_BLYAT 4 วันที่ผ่านมา

      ​@@cherubin7thYOUR MOM IS HERE

  • @Kay8B
    @Kay8B 5 วันที่ผ่านมา +88

    How long until we get a moveAfter() ?

    • @ValerianAndStuff
      @ValerianAndStuff 4 วันที่ผ่านมา +3

      5 years

    • @ΣτάθηςΣταθόπουλος-σ7ρ
      @ΣτάθηςΣταθόπουλος-σ7ρ 4 วันที่ผ่านมา +4

      Yeah it was weirdly specific placement

    • @husseinkizz
      @husseinkizz 4 วันที่ผ่านมา

      or just do normal dom manipulation and do whatever placement you want, when did moveBefore, after deserve a youtube video, are we serious :)

    • @Kay8B
      @Kay8B 4 วันที่ผ่านมา +4

      @@husseinkizz did you even watch the video? Did you not see the issue with normal dom manipulation....

    • @trafficface
      @trafficface 4 วันที่ผ่านมา

      Canary means whenever, but I was waiting for backdrop filter for YEARS

  • @nemikolh
    @nemikolh 5 วันที่ผ่านมา +8

    Wooooo that API is going to be huge for WebContainer and its previews.
    For TutorialKit which uses Astro we had to use a fork of Astro temporarily exactly for that reason. And for the previews we have them absolutely positioned to make sure their state is not lost.
    Thanks for sharing this! ❤

  • @ThingEngineer
    @ThingEngineer 4 วันที่ผ่านมา +9

    “This goes way beyond what we can do with react.”
    I find myself saying that a lot.

  • @Igstefano
    @Igstefano 5 วันที่ผ่านมา +7

    I could barely notice the sneaked-in thumbnail in 4:10. Can't believe how stealth the editor was.
    Jokes aside, this API seems pretty cool. Not something you will use everyday, but something you'll be glad exists when you do need it.

  • @rrraewr
    @rrraewr 5 วันที่ผ่านมา +25

    Me moving the mute button for the autoplay video into accordions when the mouse comes to close

    • @User948Z7Z-w7n
      @User948Z7Z-w7n 5 วันที่ผ่านมา +2

      Me muting entire browser tab

  • @noamrosenthal
    @noamrosenthal 3 วันที่ผ่านมา

    Small correction: In the current DOM, an element is not deleted and recreated, it's removed and re-inserted. When that happens some state is preserved (e.g. playback position), but some state is not (like content window).

  • @JonathanLoganClark
    @JonathanLoganClark 4 วันที่ผ่านมา

    Amazing! This reduces the need for so many processes behind the scenes.

  • @raimondszakis8337
    @raimondszakis8337 4 วันที่ผ่านมา +1

    With each day I appreciate my companies 10 year old custom built framework, we sort of have it sorted. In our case instance that represents component and it's state in virtual dom is never destroyed when we want to place it elsewhere. I will guess it's tied to parent which created it in first place. Till this day I am not sure was this intentional or not but I do like how it works.
    Just to clarify it's far from what new feature offers, there are edge cases

  • @edwardallenthree
    @edwardallenthree 4 วันที่ผ่านมา +1

    I love the dialog element. This is awesome too.

  • @camoman1000
    @camoman1000 4 วันที่ผ่านมา +8

    So is no one going to talk about the colors are actually orange and green not red and blue??

    • @shapelessed
      @shapelessed 4 วันที่ผ่านมา

      Nah, I'm sure it's just an image calibration issues... It's totally red and blue!

    • @LucasMakes
      @LucasMakes 4 วันที่ผ่านมา +2

      Well let me nitpick a sec, it looks more like washed out red and teal.

    • @adnan7698
      @adnan7698 4 วันที่ผ่านมา +1

      I heard Brainstorm

    • @camoman1000
      @camoman1000 4 วันที่ผ่านมา

      It's definitely a pale red/orange and teal/green

  • @jordanbrennan1296
    @jordanbrennan1296 4 วันที่ผ่านมา

    Thank you for covering web platform tech, do more!

  • @zwanz0r
    @zwanz0r 4 วันที่ผ่านมา

    React portal is a lifesaver. So cool! Used it recently to fix modal bugs. Thanks for that vid!

  • @jzitnik
    @jzitnik 2 วันที่ผ่านมา

    I've personally done this using a shadow DOM. Then the doesn't loose the state. But it is great to see this new feature.

  • @EvanTech-v3q
    @EvanTech-v3q 5 วันที่ผ่านมา +10

    Sorry if this is off topic, but I haven't moved to bsky yet, and I'm asking if I should?

    • @JoshuaDuncan-g7n
      @JoshuaDuncan-g7n 5 วันที่ผ่านมา +4

      Yes, is the answer

    • @javierflores09
      @javierflores09 5 วันที่ผ่านมา +9

      people are saying it is the better twitter but it is really just twitter with a smaller following, once it becomes big enough it'll just be the same old twitter we all hated

    • @luciascarlet
      @luciascarlet 5 วันที่ผ่านมา +2

      @@javierflores09 that's not true at all due to its architecture

    • @erierierierierie
      @erierierierierie 5 วันที่ผ่านมา

      ​@@javierflores09it's smaller because all the nazis stayed on twitter. most people i follow have moved over at this point, and there's increasingly more people deleting their twitter accounts entirely

    • @JoshuaDuncan-g7n
      @JoshuaDuncan-g7n 4 วันที่ผ่านมา +5

      @javierflores09 not true at all. It's decentralized and built with algorithm that you can control (based on your likes, not your scrolling activity). Additionally, the community is much more positive and outspoken against propaganda, and the algorithm doesn't punish you for content or links. (X's algorithm has been shown to show posts less if they contain a link to another page, or if they mention bluesky for example). This is bad because it means posts with real references aren't promoted on the app and fake news is everywhere. Also if you want to point your following to let's say an app you made or your new business, good luck because X's algorithm won't show it to many people.

  • @youhan96
    @youhan96 3 วันที่ผ่านมา +1

    @0:28 Oh! You React Devs!

  • @JohnSmith-op7ls
    @JohnSmith-op7ls 4 วันที่ผ่านมา +1

    How? Because the W3C is slow and incompetent and has been since day 1. It’s why it took like 12 years to finish the HTML 4 standards and Microsoft and Netscape just did their own thing because people needed to get things done and couldn’t wait a decade for simple functionality to get standardized.
    This is primarily what kept to so much browser feature support fragmentation for so long.

  • @shapelessed
    @shapelessed 4 วันที่ผ่านมา +3

    1:57 - No, Theo. We will in fact, not see...

    • @Efecretion
      @Efecretion 4 วันที่ผ่านมา

      ? He was literally showing it on screen.

    • @shapelessed
      @shapelessed 4 วันที่ผ่านมา

      @Efecretion There are sometimes these comments that are so absolutely stupid, you don't know how to respond to them... Yeah, he was. So large and squished it was hard to get the general picture.

    • @Efecretion
      @Efecretion 4 วันที่ผ่านมา

      @@shapelessed the hierarchy could not have been more clear. I'm very confused on how any of that was confusing to you

  • @PristinePerceptions
    @PristinePerceptions 4 วันที่ผ่านมา

    Damn... I can already imagine Rick rolls now dancing around the whole screen along with him. Try pausing that video now 😂

  • @livingcode
    @livingcode 2 วันที่ผ่านมา

    Can we preserve the state of a component when using conditional rendering in React?
    For example, if we render a component when a condition is true, fill some inputs, or modify its display elements, and then unmount it when the condition is false, can we get the same state back when the condition becomes true again?
    Here’s a simple example:
    {showForm && }
    If showForm becomes false, the MyForm component unmounts. When showForm turns true again, does React preserve the input values, or is the component state reset? If not, how can we achieve this?

  • @trafficface
    @trafficface 4 วันที่ผ่านมา

    Huge, but it must be keeping a reference in memory and perhaps all the Dom now have this new thing?

  • @DreadFullStack
    @DreadFullStack 4 วันที่ผ่านมา +1

    transition-all duration-0 0:44

  • @DaniDipp
    @DaniDipp 5 วันที่ผ่านมา +6

    Will this support CSS transition?

  • @theMonkeyMonkey
    @theMonkeyMonkey 4 วันที่ผ่านมา

    I think it's super powerful, but since you're now able to mutate things ( rather than having nice discrete short lifespans ) that's going to lead to a ton of difficult to solve problems ( as before some nasty state situation would have been harder to get to ( since constant element replacement ), and even if they were encountered, they could be disposed of and replaced quickly.
    I think if used sparingly it will become incredibly valuable, but looking at the current state of software engineering, the benefits of immutability will discarded quickly, and this will become overused causing some difficult to solve issues.

  • @Salbeira
    @Salbeira 5 วันที่ผ่านมา +2

    I bet it doesn't change current behavior but why would you call input.remove() at 6:55? An element can only have one parent so appendChild itself should reparent an element without having to call remove before. Intuitively, this should already have the state preserving behavior, though if appendChild implies a remove from the DOM and a subsequent add to the parent child list ... yeah this can get very confusing.

    • @profesor08
      @profesor08 5 วันที่ผ่านมา +3

      but it doesn't, state is not preserved, video is paused.

    • @Salbeira
      @Salbeira 4 วันที่ผ่านมา

      @@profesor08 My question should have been rephrased "Is there a reason remove is called at all, or is it unneccessary due to ...?", the rest was more fluff about that it probably doesn't matter about what the video is about.

  • @JB-fh1bb
    @JB-fh1bb 2 วันที่ผ่านมา

    This fundamentally breaks a foundation of HTML: it's hierarchy
    It feels reasonable right now because of what I would say was a bad fork in the road that was popularized and pushed by React. That is ignoring the browser standards and treating the browser as the platform you use to deliver applications.
    It has benefits for sure but it also comes at a cost that I don't think is worth it. The open web.

  • @leonardomoraes1658
    @leonardomoraes1658 4 วันที่ผ่านมา

    Now we need a way to let contexts menus beign rendered outside of parents with overflow, this would kill the rest of portaling mess.

  • @jagadeesh_damarasingu
    @jagadeesh_damarasingu 4 วันที่ผ่านมา

    Hey Theo!
    do we have any video on 'Dev Containers', couldn't find one in your channel.
    would like to know your opinion on it.

  • @shapelessed
    @shapelessed 4 วันที่ผ่านมา

    Please tell me there will be moveAfter and moveInto equivalents... It's all nice and everything but I can instantly see people spamming anchor elements to move other elements against...

  • @ymi_yugy3133
    @ymi_yugy3133 5 วันที่ผ่านมา

    This is pretty cool and looks like it will fix a bunch of annoying behavior in frameworks. Also the flag is already in stable chrome.

  • @djedidiaha
    @djedidiaha 3 วันที่ผ่านมา

    What if you snapped your fingers before the ad, then have the quirky nerdy smokes sfx like the old days? I think it would fit quite nicely

  • @martoxdlol
    @martoxdlol 4 วันที่ผ่านมา

    I'm thinking of making a software product just to be advertised in a Theo's video

  • @TheProcessor
    @TheProcessor 4 วันที่ผ่านมา

    Did you create the twitch portal stuff yourself? I thought you mentioned that you used react-reverse-portal

  • @Mempler
    @Mempler 4 วันที่ผ่านมา

    Thats neat, i had some really weird workaround for this before... for example not reparent it but move the position and calculate the absolute position.
    Horrible hack, but it looks good enough

  • @deatho0ne587
    @deatho0ne587 5 วันที่ผ่านมา

    I will do something like this when asked to & only when asked, but will remember it at that time. Extremely since it is not in browsers yet.

  • @MadsterV
    @MadsterV 5 วันที่ผ่านมา

    By separating state from rendering this is moot. I've been able to do this for years without new APIs.

  • @andrewzuo86
    @andrewzuo86 4 วันที่ผ่านมา

    Oh, like GlobalKey in Flutter! Or like normal keys if the hierarchy doesn't change.

  • @MilanJ
    @MilanJ 5 วันที่ผ่านมา +1

    react portals the ocky way

  • @NHCH
    @NHCH 4 วันที่ผ่านมา

    Am I wrong or this is not an API but just a method?

  • @XCanG
    @XCanG 5 วันที่ผ่านมา

    Why only "before"? Where is after?

  • @stonedoubt
    @stonedoubt 4 วันที่ผ่านมา

    Why not prependChild?

  • @skswldms
    @skswldms 5 วันที่ผ่านมา

    Wait that's just crazy

  • @TaiGroot
    @TaiGroot 5 วันที่ผ่านมา

    gdi why'd you have to hit me with that 25 and older

  • @whydoyouneedmyname_
    @whydoyouneedmyname_ 5 วันที่ผ่านมา

    This is so cool

  • @matthewdolman
    @matthewdolman 5 วันที่ผ่านมา

    19% of react devs go to primeagen to learn about react😂

  • @Keyshooter
    @Keyshooter 5 วันที่ผ่านมา +1

    if the video was muted why i can heard it in my head?
    also, this new feature is sweet

  • @zwanz0r
    @zwanz0r 4 วันที่ผ่านมา

    I want to reparent! @Theo, will you be my new dad?

  • @davidolufemi9247
    @davidolufemi9247 5 วันที่ผ่านมา +1

    In on the dot

  • @jonerno
    @jonerno 4 วันที่ผ่านมา

    Safari can't createWritable().

  • @ralphlaurage
    @ralphlaurage 4 วันที่ผ่านมา

    I swear this is already a thing with JQuery no? Or am I trippin...

  • @rwbcodes
    @rwbcodes 4 วันที่ผ่านมา

    I've heard you say you are color blind and you proved it calling that color blue instead of green haha

  • @dasten123
    @dasten123 5 วันที่ผ่านมา +7

    What does this have to do with React?? Man, React people always talk like everyone is using it..

    • @t3dotgg
      @t3dotgg  5 วันที่ผ่านมา +12

      Over 50% of frontend jobs are in React my man. Not everyone, but it's a very relevant example when new APIs are released.

    • @dasten123
      @dasten123 5 วันที่ผ่านมา +2

      @@t3dotgg I don't mind the example you showed being for React. I guess I was just excited to see a video about a cool new browser API and didn't get what I expected

    • @moon_bandage
      @moon_bandage 5 วันที่ผ่านมา +2

      You can swap out React for any frontend framework here. The essence of what he's telling remains the same, without this API you have to keep the state of the nodes reactive (even stuff you may not necessarily need to be reactive) so a frontend framework can completely recreate this branch of the DOM elsewhere and make it appear as if it moved, Theos example was a good one in showcasing the benefit imo, this seemingly minor addition to the DOM api is actually huge!

  • @pixiedev
    @pixiedev 4 วันที่ผ่านมา

    React: its not fun to do.
    vue: I can do this in a single line 😅 just wrap it in Teleport Component 😎.

  • @RyanF470
    @RyanF470 4 วันที่ผ่านมา

    htmx ftw

  • @JasonJA88
    @JasonJA88 4 วันที่ผ่านมา

    noice...

  • @rohitkharche7562
    @rohitkharche7562 4 วันที่ผ่านมา +2

    Ads banners will now became even more difficult to close, they can keep the close button anywhere now 😂

  • @TheidiotAmongUs
    @TheidiotAmongUs 5 วันที่ผ่านมา

    E

  • @ymi_yugy3133
    @ymi_yugy3133 5 วันที่ผ่านมา

    Please tackle accessibility proactively and don't just rely on customer feedback. Having a usable web, shouldn't require you to hit up devs all the time. Also good luck finding contact info if the site isn't accessible.

    • @t3dotgg
      @t3dotgg  5 วันที่ผ่านมา +4

      Never said you shouldn't be proactive! If you took that message from what I said here, you are part of why so many people get annoyed by accessibility advocates

  • @jul1us.05
    @jul1us.05 5 วันที่ผ่านมา

    third

  • @gamer-gw9iy
    @gamer-gw9iy 5 วันที่ผ่านมา

    You're doing too much at this point