Exploring the History pushState and replaceState Methods

Поділитися
Вставка
  • Опубліковано 28 вер 2024
  • This tutorial is about an important part of the History API - the pushState and replaceState methods that allow us to change what is written in the location bar of the browser as well as manage the History Array for the current tab.
    Code from video: gist.github.co...

КОМЕНТАРІ • 26

  • @Evildragonfirez
    @Evildragonfirez 3 роки тому +3

    Great explanation, quick question though, what's the name of the extension to highlights the bracket pairing?

  • @CodingNuggets
    @CodingNuggets 3 роки тому +4

    I really liked your explanation of these two. Thanks Steve. See you soon!

  • @rodrigocastilla3375
    @rodrigocastilla3375 9 місяців тому

    This is awesome thanks a lot !

  • @겨울유자차
    @겨울유자차 3 роки тому

    Until 12:40 ..hmm OK I think that I read about it in Oreilly Books but what can I do?
    I'm really looking forward to Next lecture. Thanks for posting!

  • @ksepastremenos
    @ksepastremenos 2 роки тому

    great video

  • @Gabriel-kp1oo
    @Gabriel-kp1oo Рік тому +1

    Great video! But I'm confused because when I refresh it gives me a 404. How can I handle that. I mean when I reload I get the same information and not the 404 code

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  Рік тому +1

      If you change the url and refresh the page then the browser wants to load whatever url is there. If it doesn't exist you get a 404 error.
      To redirect before the page loads you need server-side redirects

  • @casperr3717
    @casperr3717 3 роки тому +1

    You should do voice-over work man!. Cleanest explanation on the internet about this subject i subbed. :)

  • @mohamadaidilndt4147
    @mohamadaidilndt4147 3 роки тому +1

    Hi steve..i'm not so clear regarding this method..could you provide some usecase example.This changing history state but what really happen in real actually..does it also can cloning into new state?

  • @eduardogodinho951
    @eduardogodinho951 Рік тому

    Perfect, thanks

  • @abhim6380
    @abhim6380 3 роки тому +1

    I can't understand that [, url].. It probably means optional but why is it written like that

  • @jayteecollins1279
    @jayteecollins1279 8 місяців тому

    I watched several videos about this topic and this was explained well. I just subscribed.

  • @yuriiya7752
    @yuriiya7752 2 роки тому

    Bravo professor, that is exactly what I needed, perfect lecture! Thank you so much! I will smash that subscribe button!

  • @AllenMarsam
    @AllenMarsam 3 роки тому

    Thanks for tour tutorial.

  • @dylanm7638
    @dylanm7638 3 роки тому

    your explanations are always great, as a beginner your contents are very helpful, every time I watch tutorials I always feels something is missing, I have read few books but they are great but quite outdated,
    so how can I up-to-date my knowledge, there are thousands of tutorials, I have no idea where to start,
    please give me some ideas , thanks a lot

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому +1

      1. Accept that you will never be up-to-date on everything. There is far too much for anyone to learn every topic. After 25 years I still learn new things every week.
      2. Everything in the field of web development is always changing and evolving. The speed of change is also increasing because every day new developers are contributing new code, libraries, and ideas. This will never stop. Don't focus on being up-to-date. Focus on how to do a few things and build on that.
      3. Books can be outdated but are still valuable information.
      4. Learn HTML first. Learn CSS second. Learn client-side Javascript third. Learn server-side Javascript fourth.
      5. Build projects. Pick websites that you like and see if you can build a clone of them. Start simple and add more features.

    • @dylanm7638
      @dylanm7638 3 роки тому +2

      @@SteveGriffith-Prof3ssorSt3v3 oh my god, I don't know how to thank you, thanks for your time, I really appreciate this. thank you so much

  • @ravenkavoori
    @ravenkavoori 3 роки тому

    hi steve thank you for this it really helps a lot, just one question I don't see a jquery documentation on History API does this mean all browsers have the same implementation?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому +2

      No. It means that jQuery is an old library that is no longer updated and does very little with the newer HTML5 APIs.
      Here is a playlist that will help you transition away from jQuery to write proper vanilla JS. ua-cam.com/video/J_Q8EYXKzQs/v-deo.html

    • @ravenkavoori
      @ravenkavoori 3 роки тому +1

      @@SteveGriffith-Prof3ssorSt3v3 thanks again.

    • @ravenkavoori
      @ravenkavoori 3 роки тому

      hi @@SteveGriffith-Prof3ssorSt3v3 as you advised me to watch the jQuery Rehab series to move from jquery to vanilla javascript, after the series I'm already convinced of the transition to vanilla javascript for my web apps, one thing I'm not certain is if I'll use the fetch API for all my ajax request instead of XMLHttpRequest will it also work on my mobile app using Cordova I wanted to have one codebase for me to easily maintain both web app and mobile app.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3  3 роки тому +1

      @@ravenkavoori yes. Fetch has been supported in all browsers for at least five years.