Another educator that use semantic tags properly and it feels satisfied. In a world of modern component based era, people are misusing 'div' everywhere. Thank you.
your videos suite my short attention span lol. you talk fast but calmly, and you get straight to the point, i learn a lot in a small amount of time. i would love to connect with you on linkedin
Nice video good information, one side note a is the same as a unless when you add an title, aria-label or aria-labelledby on the . Here's some more info on it --- A landmark containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology. Authors SHOULD limit use of the region role to sections containing content with a purpose that is not accurately described by one of the other landmark roles, such as main, complementary, or navigation. Authors MUST give each element with role region a brief label that describes the purpose of the content in the region. Authors SHOULD reference a visible label with aria-labelledby if a visible label is present. Authors SHOULD include the label inside of a heading whenever possible. The heading MAY be an instance of the standard host language heading element or an instance of an element with role heading. Assistive technologies SHOULD enable users to quickly navigate to elements with role region. Mainstream user agents MAY enable users to quickly navigate to elements with role region. --- As found on www.w3.org/TR/wai-aria/#region
As a lead dev, semantics are important for accessibility but eventually you'll likely be building components that are abstracted away from the actual web page. It's still important to minimize div soup.
what an exceptional video! Trust me, this is one of a kind. Your semantic tag explanation with a real world popular website as a review -- this content cannot be found anywhere in the web for this alone you need a Subscribe + Bell icon hit. bravo....
I really really like the content of this video a los of things that I was not paying attention and I was still doing like sometimes using divs instead of fragments and correct use of HTML semantics I that I was not aware of their correct meaning. Thanks!
I really like how informative your videos are, but it sure would be a lot easier to understand you if the sound were a bit louder. That said, keep up with the great content
@@fugduhhh When you need to do this for every audio content, it becomes annoying. I dont think such a small recommendation hurts anyone. Dont forget about accessibility that the video is also partly about.
That's really nice way of covering this topic. I had the same idea of diving in into HTML semantics, are there any good resources to read about this that you'd recommend?
Good stuff most people dont talk about. Personally, I am more interested in writing semantically correct markup although I am a bit confused when it comes to details. Nav without a Header if there is nothing but navigation in the header. Section in Main, if there is only 1 table and 1 button on the whole page.
Istg overwhelmed by everyone..Some people is saying div is everything..Some is saying don't start with the div..need a complete video on when to use div
great work. Covered some really good topics which people generally ignore because it still works for them. Just one thing, I thought I was watching the video on 1.25x but when I checked and it was normal speed.
This is really not an isolated issue in React. It's everywhere in the frontend world. I've seen many cases where multiple nested divs have been used for simple styling, instead of just putting the classes on the first div.
Just a tip. Do not use index from an array method as the unique key identifier, it can cause problems when the list is dynamic, meaning that items can be deleted or added. Some of the problems are: Re-rendering, State preservation and animation problems. Better to use an ID, a slug or a hash.
You can also return an array of elements, though I do not prefer that, either. I guess being able to pull out articles means that the structural content is meaningful, it does not have the environmental styling or accompanied behavior normally if you just pull out HTML code between opening and closing article tag. A lot of divs are spawned to use them for layouting as said in the video. This way, you can separate the concerns rather than passing the styling information to the contained element and making it their responsibility to correctly apply it.
good video. if you let your jaw relax (drop all biting force deep in your molars and cheeks) and use your jaw more while you talk (let it slide side to side and front to back loosely and with energy with each word), it'll really help with your pronunciation.
In the react-router-dom's component, the attribute to="/" is used. However, when using the component in Next.js, the attribute href="/" is used instead.
What is the keyboard shortcut to import components? Like for "Link" and "Footer" you click on something and they're instantly imported. How can I do that without having to click on the little lightbulb that imports it for me?
Hey Bytegrad. I tried searching your course in Udemy for CSS. But it is not appearing there while searching. Only with the link it is working. I am able to see only Javascript course. Can you help on how to find your CSS course from Udemy website?
Hey amazing content, Could you please make a video on "Modal based routing" in nextjs. How one can implement that on a large project. So that i can share a link of a modal directly.
All of these are just good-to-know. At work and in production, the hierarchy of importance is: 1) Functionality 2) Optimization 3) Design 4) "Best" practices aka nerdsht preferences such as these which are actually negligible
It serves no semantic purpose and is mostly ignored by screen readers and other assistive tech. The only purpose of a div is to contain other elements for styling, and in some cases, to represent a visual element that cannot otherwise be created with a more semantic element.
It’s really nice to review the basics of semantics directly with reactjs and not in an html file. Thanks!
Thanks, that was indeed the goal
I love how you go straight to the point cover little things in a very huge way I really appreciate.
sometimes people forgot to learn the basics, great content!
I'm now inspired to replace unnecessary div elements throughout my app with more semantic tags. Thanks for the insights!🙏
Another educator that use semantic tags properly and it feels satisfied. In a world of modern component based era, people are misusing 'div' everywhere. Thank you.
I didn't consider the importance of semantic tags until I started using them in schema structures. They make a significant difference in SEO
Wow, that was great especially since I liked how fast and straight you talk about everything not jumping around the subject. Thanks a lot ❤
your videos suite my short attention span lol. you talk fast but calmly, and you get straight to the point, i learn a lot in a small amount of time. i would love to connect with you on linkedin
this really is the best channel on youtube. The amount of knowledge I gained from this channel. I am looking forward to the nextjs course
Thanks, appreciate it
thanks, so many years, and now i understand the diff between article and section 🙌
This video was AMAZING! As soon as I started following your advice everything started to click! Please make one explaining forms, etc!
Nice video good information, one side note a is the same as a unless when you add an title, aria-label or aria-labelledby on the .
Here's some more info on it
---
A landmark containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology.
Authors SHOULD limit use of the region role to sections containing content with a purpose that is not accurately described by one of the other landmark roles, such as main, complementary, or navigation.
Authors MUST give each element with role region a brief label that describes the purpose of the content in the region. Authors SHOULD reference a visible label with aria-labelledby if a visible label is present. Authors SHOULD include the label inside of a heading whenever possible. The heading MAY be an instance of the standard host language heading element or an instance of an element with role heading.
Assistive technologies SHOULD enable users to quickly navigate to elements with role region. Mainstream user agents MAY enable users to quickly navigate to elements with role region.
---
As found on www.w3.org/TR/wai-aria/#region
What a fantastic video! This really taught me much more about the meaning and value of semantics and layouts, you got a subscriber buddy :D
learned a lot, subbed
another hidden gem channel 💯, sleek explanation
This cleared up a lot of underlying doubts, great information, thanks for making it so easy
I wish I wasn’t leaving a Svelte team for a React team
what extensions you used with react and nextjs ?
As a lead dev, semantics are important for accessibility but eventually you'll likely be building components that are abstracted away from the actual web page. It's still important to minimize div soup.
Yep, fair point
Thanks for the good stuff, learned something new 👍
Great contents!👍
Thanks! I learned new things today.
This video and the content is too good.
what an exceptional video! Trust me, this is one of a kind.
Your semantic tag explanation with a real world popular website as a review -- this content cannot be found anywhere in the web
for this alone you need a Subscribe + Bell icon hit.
bravo....
Thanks, appreciate it
Great video. Clear and concise, thanks
Thank you so much
You should make a video on the folder structure best practices.
It’s on the todo-list, thanks 👍
I really really like the content of this video a los of things that I was not paying attention and I was still doing like sometimes using divs instead of fragments and correct use of HTML semantics I that I was not aware of their correct meaning. Thanks!
I really like how informative your videos are, but it sure would be a lot easier to understand you if the sound were a bit louder. That said, keep up with the great content
Sorry about that, will increase volume
It's loud enough. Just hit the volume increase button a few times 😒
@@fugduhhh correct
@@fugduhhh When you need to do this for every audio content, it becomes annoying. I dont think such a small recommendation hurts anyone. Dont forget about accessibility that the video is also partly about.
I guess they called this dividities. And the way first versions of reactjs was it feels natural to wrap everything with div
Learned a lot, thanks.
I learned a lot from this video!
That's really nice way of covering this topic.
I had the same idea of diving in into HTML semantics, are there any good resources to read about this that you'd recommend?
They didn't teach this in college, lol. Thanks!
Good stuff most people dont talk about. Personally, I am more interested in writing semantically correct markup although I am a bit confused when it comes to details. Nav without a Header if there is nothing but navigation in the header. Section in Main, if there is only 1 table and 1 button on the whole page.
Istg overwhelmed by everyone..Some people is saying div is everything..Some is saying don't start with the div..need a complete video on when to use div
is recommended using section with a heading tag, without causes warning
Which Visual Studio Code theme do you use?
Thanks a lot
great work. Covered some really good topics which people generally ignore because it still works for them. Just one thing, I thought I was watching the video on 1.25x but when I checked and it was normal speed.
Amazing tutorial!
This is really not an isolated issue in React. It's everywhere in the frontend world. I've seen many cases where multiple nested divs have been used for simple styling, instead of just putting the classes on the first div.
i'd assume a lot of that is coming from no/low code page builders or CSS frameworks that prioritize modularity over markdown simplicity.
@@wchorski Partially, but a lot of it is just lack of thought, copy-paste, etc.
Please make tutorial on big project
your portfolio website is amazing
You said it all. I always encourage my studs to use HTML5 with strict XML guidelines 😎👍
Hello brother when will you release react course on udemy still waiting already completed JS.
Soon. It won’t be released on Udemy. Make sure you’re on the email list :)
Ok I didn't know that React Fragments can have a key property, I wish I knew this 3 hours ago, literally.
Just a tip. Do not use index from an array method as the unique key identifier, it can cause problems when the list is dynamic, meaning that items can be deleted or added. Some of the problems are: Re-rendering, State preservation and animation problems. Better to use an ID, a slug or a hash.
How do you get these code suggestions?
Your vid has good semantic meaning..
And I am that Junior Developer...
You can also return an array of elements, though I do not prefer that, either. I guess being able to pull out articles means that the structural content is meaningful, it does not have the environmental styling or accompanied behavior normally if you just pull out HTML code between opening and closing article tag. A lot of divs are spawned to use them for layouting as said in the video. This way, you can separate the concerns rather than passing the styling information to the contained element and making it their responsibility to correctly apply it.
Great, you learned from the comment on your yesterday's video, but it would be nice if you could speak a bit more loud.
thanks
good video. if you let your jaw relax (drop all biting force deep in your molars and cheeks) and use your jaw more while you talk (let it slide side to side and front to back loosely and with energy with each word), it'll really help with your pronunciation.
7:00 for the Link tag you should use to="/" instead of href="/"
In the react-router-dom's component, the attribute to="/" is used. However, when using the component in Next.js, the attribute href="/" is used instead.
@@jeetgangwar1614 oh never thought about it, thanks for correcting me and understand something I didn’t knew < 3
Is it same as using the empty fragment? (
Items
)
Great work❤
Here it goes refactoring… Thanks for a great video!
Professional React & Next.js
I’m finishing up the details. Make sure you’re on the email list for early-bird pricing 😉
What is the keyboard shortcut to import components? Like for "Link" and "Footer" you click on something and they're instantly imported. How can I do that without having to click on the little lightbulb that imports it for me?
I use CTRL + Space
@@ByteGrad Thank you!
Hey Bytegrad.
I tried searching your course in Udemy for CSS. But it is not appearing there while searching. Only with the link it is working. I am able to see only Javascript course. Can you help on how to find your CSS course from Udemy website?
Couldnt you also use display:contents?
waiting for your React, Nodejs and MERN stack courses on Udemy. Big fan.
Thanks, make sure you’re on the email list :)
according to React docs, you should avoid using index as a key tho.
Hey amazing content,
Could you please make a video on "Modal based routing" in nextjs.
How one can implement that on a large project. So that i can share a link of a modal directly.
Thanks. I actually have that on the todo-list haha, stay tuned
very impressive teaching but try to sound louder please
woow Thanks
Your mic sounds grainy for some reason. It seems you're even using a Shure mic too.
section + div everywhere
= ?
Stop using && in React Conditional Rendering, use the ternary operator instead
Div is good😅
Sometimes, over engineering
Subheding for SEO as always H tag
All of these are just good-to-know. At work and in production, the hierarchy of importance is:
1) Functionality
2) Optimization
3) Design
4) "Best" practices aka nerdsht preferences such as these which are actually negligible
is division/subdivision for section, etc.
I don't think it's just for styling.
It serves no semantic purpose and is mostly ignored by screen readers and other assistive tech. The only purpose of a div is to contain other elements for styling, and in some cases, to represent a visual element that cannot otherwise be created with a more semantic element.
This great.
It was awesome
Thank God I'm using Vue. It looks so complex, while vue is just html on steroids.
Using index as a key is not a good practice.
This video has good.. semantic meaning...
I'm going to use many divs as I want
HTML cluttering is not an argument. The rendered code is for the browser, not for the developer.
We often want to inspect HTML in the inspector tool
Awesome
About the button layout example, why do you even need a fragment? Couldn’t you just straight away map over the buttons inside the section?
Fragment is still necessary because there will be a span as well for the first one (always need to return 1 React node)
Are you a robot | alien ?
🤣
@@ByteGrad Yes Sir, I really struggled to find out a single expression on your face. seems like you are just reading news like an anchor person
speak slowly and speak loudly so we can understand what are you saying
Stop using section, article always use div.
i dont know are you just for real or just joking?
Div or die
Excuse me but, why you didn't show the empty element that works perfectly fine to wrap elements in a empty body instead of React.Fragment " "
No !
I say just stops using React and use other framework that has better DX.
Better idea… stop using react.
k, I'll start using instead