I bet you haven't heard of this cool HTML tag & trick!

Поділитися
Вставка
  • Опубліковано 5 гру 2022
  • Today we're going to look at the html template tag. It's a tag that sort of does literally nothing! Meaning it makes all of the html/css/js that's inside of it do nothing, not even visible!
    Learn about this fancy html tag and how you can leverage it for some fairly common use cases.
    💖 SUBSCRIBE (Please) 💖
    ua-cam.com/users/FollowAndrew?s...
    🌐 Website 🌐
    followandrew.dev
    📢 Social Media 📢
    TWITTER (@followandrewedu) ➞ / followandrewedu
    #html #followandrew

КОМЕНТАРІ • 22

  • @gioba4912
    @gioba4912 Рік тому +1

    Genius!
    You're the BEST! This was my intro to Template Tag.

  • @photoinshot1355
    @photoinshot1355 Рік тому +1

    Brilliant thanks! Did not know anything about the Template tag.

  • @nullzero9224
    @nullzero9224 4 місяці тому +3

    Nice. A small note regarding defer and type="module". They should not come together. When you declare a script as of type "module" , the processing of the script contents is deferred.The charset and defer attributes have no effect according to MDN docs. Its only enough to use defer

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

    Thanks Andrew this is sweet!

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

    An awesome tutorial

  • @suvrotica
    @suvrotica 4 місяці тому

    New for me loved it

  • @mikaelfarro
    @mikaelfarro Рік тому +3

    I usually use `` in js to make html then add it to innerHTML of a created element

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

      Good tip here, the template literals are great especially if needing to pass in dynamic data

    • @tochimclaren
      @tochimclaren 14 годин тому

      Be careful how you use innerHTML

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

    Thanks

  • @Vortexo07
    @Vortexo07 2 місяці тому +1

    Hello
    I've made a e-commerce site on which the products section is made with template tag but unfortunately I don't know why, upon hosting on internet, the contents of the template dissappears even tho it works perfectly fine while normally...
    What could be the issue...I REALLY APPRECIATE your help! 😢

    • @FollowAndrew
      @FollowAndrew  Місяць тому

      Not sure there? Check casing for all code, var names etc. I've seen casing issues work locally, but not live

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

    How or can one use it in ReactJS?

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

    Cool! This is supported in all browsers yeah?

    • @FollowAndrew
      @FollowAndrew  Рік тому +1

      Yep 97.77% coverage as of this comment.

  • @Tony.Nguyen137
    @Tony.Nguyen137 Рік тому

    Which performs better?
    1. Innerthtml = `…`;
    2. template tag or
    3. your first solution with create Element, addClass…
    Or it doesnt matter?

    • @constantine9074
      @constantine9074 Рік тому +3

      as far as I know innerHTML has some security issues , till today I was using always createelement and appendchild (which is lil bit more code)

  • @peterloader974
    @peterloader974 5 місяців тому

    And if each card is different, what then? It seems redundant to me.

    • @Markus-iq4sm
      @Markus-iq4sm 3 місяці тому

      then you do not have a `template`, obviously

    • @Silverflame1
      @Silverflame1 Місяць тому

      You can change the content of the cloned template with JavaScript. I suppose it's easier then always creating new elements.

  • @makingtheweb6620
    @makingtheweb6620 Рік тому +1

    I am going to suggest that the spec needs to ban outright divs as people use them in demos. The title doesn't fit the video as it goes off course about JavaScript and wasn't what I was looking for in search.