It’s really nice to review the basics of semantics directly with reactjs and not in an html file. Thanks!
@ByteGrad Жыл бұрын
Thanks, that was indeed the goal
@thethmuucodes11 ай бұрын
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.
@samuelsamson69011 ай бұрын
I love how you go straight to the point cover little things in a very huge way I really appreciate.
@trusht11 ай бұрын
I'm now inspired to replace unnecessary div elements throughout my app with more semantic tags. Thanks for the insights!🙏
@Waxaranai Жыл бұрын
sometimes people forgot to learn the basics, great content!
@core-developers Жыл бұрын
I didn't consider the importance of semantic tags until I started using them in schema structures. They make a significant difference in SEO
@Alexpereira1707 Жыл бұрын
As a junior developer I can affirm that this video is gold. Thanks a lot dude + subscribed
@pianistanton1 Жыл бұрын
how long have you been learning front end to get your first job? Is it still possible to get a job as a junior frontend? or everyone just need mid/senior?
@Alexpereira1707 Жыл бұрын
@pianistanton1 I would say that it's hard to get a job as a junior developer but if you're consistent with your daily code you'll get a job sooner or later. Also, try to create/fix github repos, recruiters often ask for it, at least in europe.
@Adenafun11 ай бұрын
Wow, that was great especially since I liked how fast and straight you talk about everything not jumping around the subject. Thanks a lot ❤
@Alex-bc3xe4 ай бұрын
You are really good teacher.
@abderrahmanemya6602 Жыл бұрын
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
@ROL4ND-CSS Жыл бұрын
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
@BladyCzlowiek Жыл бұрын
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
@ByteGrad Жыл бұрын
Thanks, appreciate it
@AlexMercadoGo Жыл бұрын
I wish I wasn’t leaving a Svelte team for a React team
@tomich207 ай бұрын
thanks, so many years, and now i understand the diff between article and section 🙌
@wizard.of.moz.47210 ай бұрын
This video was AMAZING! As soon as I started following your advice everything started to click! Please make one explaining forms, etc!
@MrPlaiedes11 ай бұрын
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.
@ByteGrad11 ай бұрын
Yep, fair point
@sivadhanushuppalapati404111 ай бұрын
This video and the content is too good.
@Ogos-End4 ай бұрын
Your vid has good semantic meaning..
@ElliottTheUnicorn11 ай бұрын
learned a lot, subbed
@aymenbachiri-yh2hd2 ай бұрын
Thank you so much
@tvujtatata9 ай бұрын
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.
@yuvalbra Жыл бұрын
what extensions you used with react and nextjs ?
@philipepics11 ай бұрын
is recommended using section with a heading tag, without causes warning
@user-ru8hn9hb5c11 ай бұрын
They didn't teach this in college, lol. Thanks!
@blackpurple9163 Жыл бұрын
This cleared up a lot of underlying doubts, great information, thanks for making it so easy
@joantsyn75783 ай бұрын
Great contents!👍
@boneykingofsomewhere Жыл бұрын
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
@ganesha3559 Жыл бұрын
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....
@ByteGrad Жыл бұрын
Thanks, appreciate it
@tszhong0411 Жыл бұрын
Thanks! I learned new things today.
@ahmednabil44563 ай бұрын
thanks
@Diego_Cabrera Жыл бұрын
You should make a video on the folder structure best practices.
@ByteGrad Жыл бұрын
It’s on the todo-list, thanks 👍
@cmdxen Жыл бұрын
another hidden gem channel 💯, sleek explanation
@thedelanyo Жыл бұрын
I guess they called this dividities. And the way first versions of reactjs was it feels natural to wrap everything with div
@touratica Жыл бұрын
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
@ByteGrad Жыл бұрын
Sorry about that, will increase volume
@fugduhhh Жыл бұрын
It's loud enough. Just hit the volume increase button a few times 😒
@purshotambohra213111 ай бұрын
@@fugduhhh correct
@tvujtatata9 ай бұрын
@@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.
@gotosleepqueen7959 Жыл бұрын
I learned a lot from this video!
@abishekbaiju17054 ай бұрын
Thanks a lot
@taborgreat11 ай бұрын
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.
@fdkgamer3631 Жыл бұрын
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
@takeshikriang Жыл бұрын
Great video. Clear and concise, thanks
@LynxBaretta Жыл бұрын
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!
@tomasburian655011 ай бұрын
Thanks for the good stuff, learned something new 👍
@manmittiwade Жыл бұрын
Please make tutorial on big project your portfolio website is amazing
@manpreetjord1885 Жыл бұрын
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.
@holyjack521511 ай бұрын
Here it goes refactoring… Thanks for a great video!
@jinx.love.you.6 ай бұрын
And I am that Junior Developer...
@jonzer3028 Жыл бұрын
Learned a lot, thanks.
@2gbeh Жыл бұрын
You said it all. I always encourage my studs to use HTML5 with strict XML guidelines 😎👍
@AWaterKnight11 ай бұрын
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.
@gurvirbaraich2028 Жыл бұрын
Great, you learned from the comment on your yesterday's video, but it would be nice if you could speak a bit more loud.
@AndrewAkaHrun Жыл бұрын
Amazing tutorial!
@gwesa292111 ай бұрын
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.
@zush2305 Жыл бұрын
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?
@eistache3182 Жыл бұрын
Ok I didn't know that React Fragments can have a key property, I wish I knew this 3 hours ago, literally.
@kamrulislam3841 Жыл бұрын
very impressive teaching but try to sound louder please
@404-not-found-service5 ай бұрын
woow Thanks
@CottidaeSEA Жыл бұрын
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.
@wchorski Жыл бұрын
i'd assume a lot of that is coming from no/low code page builders or CSS frameworks that prioritize modularity over markdown simplicity.
@CottidaeSEA Жыл бұрын
@@wchorski Partially, but a lot of it is just lack of thought, copy-paste, etc.
@marcowassink380311 ай бұрын
How do you get these code suggestions?
@Ogos-End4 ай бұрын
This video has good.. semantic meaning...
@ryostyles9904 Жыл бұрын
Is it same as using the empty fragment? ( Items )
@ck-dl4to Жыл бұрын
section + div everywhere
@maheshadusumilli783311 ай бұрын
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?
@_abuk Жыл бұрын
Couldnt you also use display:contents?
@jaycodes8790 Жыл бұрын
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.
@ByteGrad Жыл бұрын
Thanks. I actually have that on the todo-list haha, stay tuned
@prashlovessamosa Жыл бұрын
Hello brother when will you release react course on udemy still waiting already completed JS.
@ByteGrad Жыл бұрын
Soon. It won’t be released on Udemy. Make sure you’re on the email list :)
@JaGaNezhil Жыл бұрын
Great work❤
@kakaponick11 ай бұрын
Subheding for SEO as always H tag
@okkaraung9512 Жыл бұрын
waiting for your React, Nodejs and MERN stack courses on Udemy. Big fan.
@ByteGrad Жыл бұрын
Thanks, make sure you’re on the email list :)
@VadimCherepnin Жыл бұрын
Which Visual Studio Code theme do you use?
@maxterrain10 ай бұрын
Thank God I'm using Vue. It looks so complex, while vue is just html on steroids.
@luisllaboj Жыл бұрын
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?
@ByteGrad Жыл бұрын
I use CTRL + Space
@luisllaboj Жыл бұрын
@@ByteGrad Thank you!
@abhishekkadam2999 Жыл бұрын
is division/subdivision for section, etc. I don't think it's just for styling.
@Burrijw Жыл бұрын
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.
@harpo187bling Жыл бұрын
Professional React & Next.js
@ByteGrad Жыл бұрын
I’m finishing up the details. Make sure you’re on the email list for early-bird pricing 😉
@lel0uchfr199 Жыл бұрын
7:00 for the Link tag you should use to="/" instead of href="/"
@jeetgangwar1614 Жыл бұрын
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.
@lel0uchfr199 Жыл бұрын
@@jeetgangwar1614 oh never thought about it, thanks for correcting me and understand something I didn’t knew < 3
@adventureswithpasa Жыл бұрын
Stop using section, article always use div.
@user-ni9tf5yr6m Жыл бұрын
= ?
@tomfancode Жыл бұрын
Div is good😅 Sometimes, over engineering
@jerryalmeida Жыл бұрын
Stop using && in React Conditional Rendering, use the ternary operator instead
@nabeelali6753 Жыл бұрын
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
@Tin9102 Жыл бұрын
according to React docs, you should avoid using index as a key tho.
@complikatd Жыл бұрын
Your mic sounds grainy for some reason. It seems you're even using a Shure mic too.
@MageLink Жыл бұрын
I'm going to use many divs as I want
@TheNarstonerz11 ай бұрын
No !
@shariqueansari9439 Жыл бұрын
Awesome
@jayakumar9976 Жыл бұрын
This great.
@sujonpramanik1151 Жыл бұрын
It was awesome
@robertbutcher222 Жыл бұрын
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?
@ByteGrad Жыл бұрын
Fragment is still necessary because there will be a span as well for the first one (always need to return 1 React node)
@Code_express Жыл бұрын
speak slowly and speak loudly so we can understand what are you saying
@mac.ignacio Жыл бұрын
I say just stops using React and use other framework that has better DX.
@metaxx5253 Жыл бұрын
Div or die
@francismori7 Жыл бұрын
HTML cluttering is not an argument. The rendered code is for the browser, not for the developer.
@ByteGrad Жыл бұрын
We often want to inspect HTML in the inspector tool
@OpenDeepLearning Жыл бұрын
You stopped just when your channel started booming. Why is that?
@ByteGrad Жыл бұрын
I didn’t stop, more to come soon :)
@OpenDeepLearning Жыл бұрын
@@ByteGrad ok, great!
@user-dh9rh3js3u Жыл бұрын
Are you a robot | alien ?
@ByteGrad Жыл бұрын
🤣
@user-dh9rh3js3u Жыл бұрын
@@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
@flamme8587 Жыл бұрын
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 " "