Page Transitions with 0 Lines of JAVASCRIPT!

Поделиться
HTML-код
  • Опубликовано: 29 янв 2025

Комментарии • 43

  • @voldemortvi4264
    @voldemortvi4264 Год назад +13

    Dev you are my favorite teacher on the internet Buddy ! i know u have heard this so many times but i really appreaciate your content brother

  • @developedbyed
    @developedbyed  Год назад +24

    Anyone remember how annoying it was to set up Barba.js or get stuff working with React's transition group?
    Thank god all that is going away soon 😅

  • @svr666_
    @svr666_ Год назад +3

    Can you create a video were u do the same effect with just js?

  • @juliscapucin
    @juliscapucin Год назад +1

    That's so awesome! Thank you!

  • @Noritoshi-r8m
    @Noritoshi-r8m Год назад +3

    We need a 0 Javascript React type of transitions, browsers need to do more like this, Javascript bloats our websites so much.

  • @MostafaFaragOnline
    @MostafaFaragOnline 9 месяцев назад

    what are you use to put your image in video in right bottom of the screen . the name of the program you use pleas

  • @natuerliches-lebendgefluegel
    @natuerliches-lebendgefluegel Год назад

    Hi, I am looking for an option to let my landing page fade out and then show the shop site. Could not find anything so far. Hope you can help me here.

  • @xSalamz
    @xSalamz Год назад

    Nice! I am going to try this on my WordPress site.

  • @mathnewph
    @mathnewph Год назад

    Wonder if it's work well with spa ? Beacause when you Switch page, HTML isn't fully loaded

  • @filipvabrousek6900
    @filipvabrousek6900 Год назад

    Thanks so much!
    It works nicely.

  • @Beskha
    @Beskha Год назад +1

    Yeah thats really helpful.

  • @jjstantonza
    @jjstantonza Год назад

    Lovely ending to the video lol 👏

  • @kingsmanSmBanglaGaming
    @kingsmanSmBanglaGaming Год назад +1

    my brain not working anymore...

  • @markfoxlaursen5303
    @markfoxlaursen5303 7 месяцев назад

    Can you add the source code, in the description? For simplicity :D

  • @Way_Of_The_Light
    @Way_Of_The_Light Год назад

    So is it like preloading the next page? How is it loading the next page so fast when making a http request?

    • @MicahKillian
      @MicahKillian Год назад

      Server-side rendering is lightning fast.

    • @Way_Of_The_Light
      @Way_Of_The_Light Год назад

      @@MicahKillian sorry I’m new to web development. Whenever I have to go to another page in a rails app, I have to wait for the http response to finish loading. How will this technology make that process fast?

    • @xNaii1
      @xNaii1 Год назад

      it's loading other html file on image click and at same time doing transition instead of displaying straight.
      It works fast because these html files doesn't have anything that would add any loading time

    • @MicahKillian
      @MicahKillian Год назад +2

      @@Way_Of_The_Light View Transitions are simply baking a well known UI pattern into the browser (rather than relying on JavaScript libraries).
      Web servers are designed specifically to take on HTTP requests and return HTML. They have been battle-tested and optimized for that task for several decades. When the webserver is in charge of returning HTML, it's called Server-Side Rendering.
      You don't need JavaScript to do a majority of web development. People new to web dev are given the impression that modern web development must be done with some JavaScript framework like React. Using such frameworks to produce HTML is called Client-Side Rendering (because the HTML is produced on the client/browser, not the server). Server-Side Rendering is far faster and easier to use than Client-Side Rendering.
      JS frameworks are actually clumsily returning to SSR because they realized the absolute shit show that CSR is even for simple tasks.

  • @dynamohack
    @dynamohack Год назад +1

    not working on edge wth

  • @SandraWantsCoke
    @SandraWantsCoke 10 месяцев назад

    It just does not work :/ maybe they deprecated that meta tag?
    It works with HTMX though. Also, many examples on the web don't work even though it seems they're linking to working samples.
    Do you by any chance have a repo that I can quickly check? The sample site you have in description does not have that meta tag either, they probably use javascript, which I don't want to do.

  • @alex11CV
    @alex11CV Год назад

    Amazing video!! But for some reason when i code using live server it shows my site and font sizes are nice and adequately big lol , once it’s live all the fonts grow bigger than they were coded :/ any solutions ?

  • @oscar_cornejo
    @oscar_cornejo 9 месяцев назад

    Can it be used in Next.js?🤔

  • @hmenorjr
    @hmenorjr Год назад

    GGyyyaaaahhh~ Safari's not yet supported. 🤣🤣🤣

  • @AbidAnsari-tl2sx
    @AbidAnsari-tl2sx Год назад

    How to add in react there is only one html file

    • @developedbyed
      @developedbyed  Год назад

      Wait for them to come out with a special hook soon 😂 or you can still implement it via JS

    • @ban_droid
      @ban_droid Год назад

      you dont need this api, this api is not for SPA, SPA is 1 page and you could easily create transition between components

  • @yungxix6343
    @yungxix6343 Год назад

    Awesome

  • @PerryCodes
    @PerryCodes 5 месяцев назад

    What if I told YOU, that I'm far from gorgeous?

  • @Dhsidhsusjs
    @Dhsidhsusjs Год назад +2

    Can't think of a scenario where i would be only making sites in HTML & CSS

  • @mostafakheder7721
    @mostafakheder7721 Год назад

    Amazing 🤩🤩🤩

  • @Benbeno77
    @Benbeno77 Год назад

    what is your vs code theme?

    • @alman_harbi
      @alman_harbi Год назад

      I have the same theme. It is called "Tokyo Night", very cool one.

    • @Terms-and-Conditions
      @Terms-and-Conditions Год назад

      @@alman_harbi Excuse me sir what exactly do you think you're doing? that is classified information

  • @oleksandr.brazhii
    @oleksandr.brazhii Год назад +1

    Sadly the transitions are still glitchy and freezing in Chromium browsers. So other browser engines won’t get the feature in nearest future.

  • @ShakkeerTheCoder
    @ShakkeerTheCoder Год назад

    please zoom in...

  • @zidaneuchiha1554
    @zidaneuchiha1554 Год назад

    Halo bang saya dari indonesia

  • @josephmanni7491
    @josephmanni7491 Год назад

    #1

  • @yangerrai1605
    @yangerrai1605 Год назад

    First 😮