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

  Рет қаралды 6,510

FollowAndrew

FollowAndrew

Жыл бұрын

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) 💖
kzfaq.info?s...
🌐 Website 🌐
followandrew.dev
📢 Social Media 📢
TWITTER (@followandrewedu) ➞ / followandrewedu
#html #followandrew

Пікірлер: 22
@gioba4912
@gioba4912 Жыл бұрын
Genius! You're the BEST! This was my intro to Template Tag.
@photoinshot1355
@photoinshot1355 Жыл бұрын
Brilliant thanks! Did not know anything about the Template tag.
@nullzero9224
@nullzero9224 5 ай бұрын
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
@FollowAndrew
@FollowAndrew 5 ай бұрын
Good to know!
@kevinwiens4804
@kevinwiens4804 Жыл бұрын
Thanks Andrew this is sweet!
@paevents8064
@paevents8064 Жыл бұрын
An awesome tutorial
@suvrotica
@suvrotica 5 ай бұрын
New for me loved it
@mikaelfarro
@mikaelfarro Жыл бұрын
Thanks
@mikaelfarro
@mikaelfarro Жыл бұрын
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 Ай бұрын
Be careful how you use innerHTML
@mdbdrrhm
@mdbdrrhm Жыл бұрын
How or can one use it in ReactJS?
@Vortexo07
@Vortexo07 3 ай бұрын
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 2 ай бұрын
Not sure there? Check casing for all code, var names etc. I've seen casing issues work locally, but not live
@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 Жыл бұрын
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)
@MattCurney
@MattCurney Жыл бұрын
Cool! This is supported in all browsers yeah?
@FollowAndrew
@FollowAndrew Жыл бұрын
Yep 97.77% coverage as of this comment.
@peterloader974
@peterloader974 6 ай бұрын
And if each card is different, what then? It seems redundant to me.
@Markus-iq4sm
@Markus-iq4sm 4 ай бұрын
then you do not have a `template`, obviously
@Silverflame1
@Silverflame1 2 ай бұрын
You can change the content of the cloned template with JavaScript. I suppose it's easier then always creating new elements.
@makingtheweb6620
@makingtheweb6620 Жыл бұрын
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.
New DVH CSS Unit!!!
3:42
FollowAndrew
Рет қаралды 6 М.
CSS Flexbox Tutorial - Learn the right way
35:41
FollowAndrew
Рет қаралды 4,5 М.
Heartwarming: Stranger Saves Puppy from Hot Car #shorts
00:22
Fabiosa Best Lifehacks
Рет қаралды 22 МЛН
ОСКАР vs БАДАБУМЧИК БОЙ!  УВЕЗЛИ на СКОРОЙ!
13:45
Бадабумчик
Рет қаралды 5 МЛН
Was ist im Eis versteckt? 🧊 Coole Winter-Gadgets von Amazon
00:37
SMOL German
Рет қаралды 39 МЛН
Используем Template в JavaScript для клонирования элементов
15:00
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 18 М.
CSS Tips And Tricks I Wish I Knew Before
12:12
Lama Dev
Рет қаралды 444 М.
HTML Templates Instead Of Reactivity | Prime Reacts
12:42
ThePrimeTime
Рет қаралды 110 М.
Common HTML tags and what they are for (HTML/CSS Basics)
11:24
Engineer Man
Рет қаралды 41 М.
Top 10 CSS Features You Should Know & Use in 2023
19:56
Lukas | Web Development & Design
Рет қаралды 308 М.
Pure CSS tree view with custom tree icons
31:34
FollowAndrew
Рет қаралды 18 М.
The problems with viewport units
13:23
Kevin Powell
Рет қаралды 355 М.
HTML Tables Tutorial with CSS Styling - Crash Course
29:03
FollowAndrew
Рет қаралды 140 М.
5+ Must Know HTML Tags That Almost Nobody Knows
15:33
Web Dev Simplified
Рет қаралды 613 М.
How to Use Slots With JavaScript Web Components
15:31
dcode
Рет қаралды 3,7 М.