I don’t agree with using CSS to hide the code on mobile. The mobile check is basically not rendering all the other code whereas using the CSS check means you render everything even when it can’t be used. Furthermore, if you are on a small window you basically hide it for no reason. Using dynamic imports could also be better.
I disagree because the CSS approach accounts for viewport changes. Perhaps not pertinent to this project because the idea is to have a keyboard. But in other situations you do want to have the functionality ready for when the user changes from portrait to landscape on a tablet ;)
yup you're right, but in cases when you use ssr, css will be more preferable because isMobile wiil be always false on server, and if client is mobile device it will lead to hydration mismatch
1. Are those real improvments to commit messages? You added a convention, which is not really helpful for a small team, it just makes commit messages harder to read. And you lost semantics in logo commit. 2. Using document width to determine, if user has a physical keyboard, maybe will get you more errors, than user agent. There are phones with high resolutions and small windows on pc. Furthermore, site can be perfectly working, when you shrink it, but your change will just hide it all. 3. The plurality of a type should be determined by semantics, not by conventions. Even if you have a type Result - nothing prevents you to need a Result[][] type. It is fine to have ResultsList or something like that. Even better example is the developer's second type: AccuracyMetrics. I hope that it is clear, that this type should be plural, though it is not an array. Sorry for my English.
1. That’s right 2. Perfect 3. This, this is killing me, because, as Josh said, the types should be on singular, in the industry, on huge teams ( like the ones that work at yahoo ) this is the standard, the types is defined as singular, not as plural, because in time, you will have the following situation: - users: Users[] = [your_users_array] - const user: Users = users[0] Got my point? An object is defined as singular because you would use the object probably as singular in a the future, and using the plural type for a singular, doesn’t make so much sense, and is a part of design patterns used in industry.
@@serbanmarin-eusebiu if type is User, it obviously should be singular. If type is AccuracyMetric { metric1: number, metric2: number, metric3: number } it should be plural, because it is not one metric semantically. With "Results" it is not obvious, what the author meant.
@@serbanmarin-eusebiu I agree with @funtaps even though Im all for neet conventions. The word "results" can be seen from two different perspectives: 1. A list of a result with a specific format (an instance of a result) or 2. Results as a set of keys and values (metrics) representing a specific result. I would prefer "Results" as the object/interface is static within the context of the application (aka. it doesn't represent an instance of a bigger thing).
As for the first one - this convention isn't really usable if there are task mention tags, like #21 or AP-335. Using convention only takes extra space and makes the commit message even more unreadable, especially in the UI of GitHub.
If mobile use is being restricted solely because of the keyboard instead of actual unsupported features, you could potentially be restricting phones and tablets that have a Bluetooth keyboard connected.
I like the improvements to commit messages. That's one of the first things we did on our small team, because everyone's commit messages and titles for PRs were so different. I wonder too, if showing that the project pushed PRs up instead of commiting direclty to main could show a level of profesionalism. Then someone could write more about the changes they were making, even if they were the only person on the project. I also wonder if the original intention of the one big hook in the main App.tsx file was about setting up a container/presentational component pattern. By adding all the logic into the App.tsx all the child components are presentational, and can be more easily tested, and updated, with limited mocking. I agree though, splitting up the hook makes sense.
It looks like the guy was trying to do a form Dependency Injection with his TimeCategory component, which can be good since it does make testing really simple. But it does remove part of the advantages of using hooks and in more complicated projects could end up with either the main Application component having to have a complicated render with every component being compositional, or you end up with prop drilling. The downside of using hooks inside components without DI is you couple to that hook, and when testing you need to know which hooks it is using so you can mock them correctly. So advantages and disadvantages here. But yeah, useSystem should be broken into smaller chunks as there's a lot of functionality there and it would be a pain to test as it is.
Would be better to use CSS to check for touch rather than width to allow users to shrink browser. Something like @media (hover: none) and @media (pointer: coarse)
about the conditional rendering in this video. It seems to me that it makes sense, because in this way we do not load and render a bunch of components just like that if the device does not meet the requirements. Thus, we can make lazy (dynamic) loading of the component when, if anything, it is needed. CSS just hides it and there is only a visual meaning to it
9:58 - Except this use agent package checks the device properties like Browser version, and Device properties like the OS, then this implementation is correct.
@@neofox2526 don't reinvent the wheel, just import and use it if no performance issue, you can do a wrapper or custom hook based on external packages, so you can swap anytime you want
But what if the user shrinks the browser window to look at something else while he types? Then that breaks the whole website and the easy fix would be a disaster
It depends on how much he shrinks the site. But it wouldn’t make sense as a user to shrink it below Tablet screensize 🤷🏻♂️ this use case is maybe less than 1%
If you want to initialize a state in a hook once then you would want to pass the hook down as a prop so the component has access to it. I have controls and timeline components and i pass useTimeline down to controls components so it can control the timeline
to all interviewers: if you had to choose: a guy who writes bad commits but has professional code, or a guy who writes super commits but is an amateur. i rest my case
8:02 this is a huge mistake. By calling useSystem() in two different places, you are essentially duplicating another set of the game's entire state/logic in another place. I think what you meant to do is either: 1. Keep the code where you destructure setLocalStorageValue and additionally make useSystem dependent on a global context/redux store. 2. Pass the entire return value of useSystem as a prop to TimeCategory, and then destructure that prop inside TimeCategory.
Type at plural don't always come for arrays, for example component props types. What you find to want to be singular is mostly "entity" based types (like User, Product, etc)
I don't think commit messages should be anally specific - that's what you use a Pull Request for to describe the changes being made. I think commit messages are usually never done right anyway as in my company we just give a quick run down of a change in them but they arent all descriptive or all encompassing. It seems nowadays that these small non-descript things needs to be intrusive enough to make the process more of a administrative process than actually just creating something. I think these conventions should be implemented within a pull request title and body, not to the commit. The example of "adding image - logo" is more than enough for a short commit message. You said it yourself, that the commit indeed is just adding an image. So there's no reason to overly commit to the "the commit messages must follow XYZ principle", that should be saved for the actual PR body when given up for review.
I think most of these make sense 👍🏻 If there's another project you review, maybe you could consider adding in a few words about testing. Even if this is a fun project for a resume, the author would probably still like to have (automatic) dependency updates. Having some tests is much better than nothing. Looks like they wanted to have some tests but the only test file is empty. Another thing I saw in the code is that the author could use "as const" to define some static configuration, although this is more of a curiosity than an actual useful suggestion in this case. Nice project!
One more thing: the project could use a lockfile. I see it had a commit to remove the yarn lock file, but I don't see a lockfile on the main branch. A lockfile is used to store the exact versions of packages that were used, and having it committed in the repository means a future developer (maybe the author themselves) is guaranteed to have the exact same packages installed. If there is no lockfile, there is a needless chance of getting some build/runtime errors.
All these suggestions are “nitpicks” except for maybe the hook restructure. As long as you commits aren’t “chore: wip” write whatever you want. It literally doesn’t matter. Most teams use PRs and squash so you never see the original commit msg Width check for disabling stuff could be problematic runs the risk of disabling stuff when it shouldn’t. The Results type is hold the Result’s just like if you had a Settings type that had language and dark mode etc, you wouldn’t call that type Setting? Also who cares? Find and replace is a thing if it’s meaning changed. These are all extremely superficial things and worrying about these things is what keeps people as a beginner. Learn how to use hooks properly, how to do safer conditional render. Hell how to actually style things effectively is more important. With AI starting to write a lot of code know what is bullshit and not is more valuable that how to name things.
Josh, sorry to say it, but I think you don’t understand the needing of user-agents. Let me clear things for you, as long as you are on desktop, even if you shrink the window, it is gonna use the desktop user agent, which is perfect, because you can use the keyboard. In addition, just think about it, if someone want to shrink the window to fit in the left/right side a UA-cam tutorial or something to improve his typing skills( for example ), he would not be able to do it because in the most cases, the window would be much smaller than the media-query breakpoint. I respect your videos, sometimes makes a lot a sense, but sometimes you forgot to think outside of the box and see the actual needing of features. So, keep it up with the good stuff, and make a little more research on before, just a piece of advice. 🤗😄😅
The good thing with using the width instead of the user agent (which would be janky anyways since browsers might not send expected mobile user agents) is that the page might just not work responsively below a certain threshold. But in this project it does not really matter as there is no mobile support at all, so from my opinion I'd say use conditional rendering (which Josh did not do, it's all rendered but then hidden via css) based off of viewport width. Also maybe build support for mobile and create a functioning mobile view.
yeah, research common sense, very good. thanks for "clearing things up for me" but this is literally just an oversight on his part caused by routine development
Hi Josh 👋 Can you make a video about compound components pattern in nextjs, and especially how to use it with server components? Thanks for sharing your knowledge :)
wow! this was really useful, as someone who's been a back-end developer for so long now trying to get into react, am just learning a lot. how do i submit my front-end projects for review?
My phone counts as large by your CSS implementation. In fact, it probably would count as 2xl. You wouldn't want to use device size to discriminate between mobile and PC. Especially when there is a such a variety of screen sizes between mobile and PC.
Are you sure about that? I thought css media querries are not literal pixels, but actually relative to device size, so a phone with a 4k screen wouldn't actually be considered 4k pixels.
@@edhahaz That's not the question. You could resize you desktop browser. The semantic is "I don't want this on mobile" not "I don't want this on this viewport size"
I disagree with the conventions of type names. If the interface 'Results' is indeed an object of the full results, then 'Results' is named correctly. There is no reason to go above and beyond about this. A comment to the type would probably have helped, but as you can tell from the interface itself, it seems like it's a proper object with the cumulative values.
I don't think there's a true answer as it's more of a personal preference than a good/bad practice. Personally I prefer singular "Result" because I think it makes more sense when reading the type
beautiful video, but I would argue that making the game hide on small screen is bad considering why he did that in the first place. you're hiding just on small screen which connects to a responsive design, he did that not because a phone is small (you can have tablets larger than your laptop screen), but because the tracking hook he used does not work without a keyboard (e.g. doesn't work on a digital one -mobile/laptop). so by your approach, someone with a big enough tablet can reach this website and play the game even when he can't. using mobile agent here is the right approach, but as you said hard coding the values and getting all the agents probably will take him a lot of time and he will some, for that case he should use a library like `react-device-detect`(769k weekly downloads), which renders a view based on the browser's agent with agent sniffing.
It really depends. But the most important thing is. *You* *can* *tell* *right* *away* *what* *is* *the* *commit* *for* Most conventions wants it present tense also. Now here is the question are you A.) Unit / Individual committer. (People who usually commit the basic functional stuff) B.) Block commiter? (People who collect most action before committing. )
Before we change something. we should know what we are changing. I think. Example. (technically the reason result have s is because the person coding thinks the interface have a lot of members) result here is an interface. by convention it should have capital I so shouldn't it be IResult? IResult is very vague. If you look at the purpose. It is the user result. So maybe it should be IUserResult. Extra advice or opinion Interface on most cases I think shouldn't be made plural. So no or don't use IUserResults. Instead make the one referencing it the plural or something. Ex. (Singular) const [userResult, setUserResult] = useState(...) (Plural) const [userResults, setUserResults] = useState(...) (Another way of making it plural is) const [userResultLists, setUserResultLists] = useState(...)
Your advice to use CSS to show/hide instead of conditionally rendering is really bad in the example. Why would you render anything out if you intend for it to not be usable. Furthermore... you can still use media queries as the condition to check against when rendering so if the main point you wanted to make was to drive condition off of media query instead of user-agent you could still have done so. I think you should explore these topics more before making videos, there's been a lot of "interesting" advice in your recent videos.
to be honest, your changes in commit messages add no value - what empty space did the commit remove? what image did the first commit add? if those are good commits, you might as well make every commit with message "add new code", because that's just as unspecific
Hi. It's me again :)))) I think comments for youtubes affect positively on your channel! 😇❤ Could you please make the following video: example of user authorization, registration, user roles. Please use nextjs 14, typescript, server actions, nextauth 5, prisma, shadcn ui, react-hook-form, zod, sonner. Have a nice day 😘
Third , hey bro , you are amazing , but we need more videos about how to setup projects and finish them as fast as possible , or by another way how to really become a 10x freelnace dev
Josh I have a question ⁉️ I use mongoose for my db in nextjs I wrote a mongoConnect() function that I call each time i want to use any model to work with database. It is repeated code. What is the convention for connecting to db? Please Help ❤
the way I see the custom hook for devices is like an excuse he/she made to just keep practicing some logic and react functionality in general, something that the "easier" way with a couple of css lines won't give you as a beginner, the tip you gave is alright I guess, not the best approach either lol, it looks more like a work around to me tbh.
Relax with the commit messages, friends. It doesn't matter, especially if you're the only one working on the project. If it's a larger project use pull requests to merge into main (preferably squash and merge) and use some convention around PR titles. No one likes being forced to think about some convention around writing commit messages.
git messages is fine, but they are meaningless. In real world you cannot just add all changes under one message. And if you want to find something in history, that will not help to find the issue. So basically you just putting some "convention" weight on your team shoulders.
style: add image is just as useless as add image - logo. Your refactor comment change was just as useless. commitlint isn't a convention either, it enforces a convention. Can't watch more than 4 minutes.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
I don’t agree with using CSS to hide the code on mobile. The mobile check is basically not rendering all the other code whereas using the CSS check means you render everything even when it can’t be used. Furthermore, if you are on a small window you basically hide it for no reason. Using dynamic imports could also be better.
I disagree because the CSS approach accounts for viewport changes. Perhaps not pertinent to this project because the idea is to have a keyboard. But in other situations you do want to have the functionality ready for when the user changes from portrait to landscape on a tablet ;)
I agree, smaller viewport doesn't mean we are on mobile. It could simply be because I am snapping my Windows
window.matchMedia will capture viewport changes :)
yup you're right, but in cases when you use ssr, css will be more preferable because isMobile wiil be always false on server, and if client is mobile device it will lead to hydration mismatch
You do realise that JS runs after html and css, in modern bundling right?
1. Are those real improvments to commit messages? You added a convention, which is not really helpful for a small team, it just makes commit messages harder to read. And you lost semantics in logo commit.
2. Using document width to determine, if user has a physical keyboard, maybe will get you more errors, than user agent. There are phones with high resolutions and small windows on pc. Furthermore, site can be perfectly working, when you shrink it, but your change will just hide it all.
3. The plurality of a type should be determined by semantics, not by conventions. Even if you have a type Result - nothing prevents you to need a Result[][] type. It is fine to have ResultsList or something like that. Even better example is the developer's second type: AccuracyMetrics. I hope that it is clear, that this type should be plural, though it is not an array.
Sorry for my English.
1. That’s right
2. Perfect
3. This, this is killing me, because, as Josh said, the types should be on singular, in the industry, on huge teams ( like the ones that work at yahoo ) this is the standard, the types is defined as singular, not as plural, because in time, you will have the following situation:
- users: Users[] = [your_users_array]
- const user: Users = users[0]
Got my point? An object is defined as singular because you would use the object probably as singular in a the future, and using the plural type for a singular, doesn’t make so much sense, and is a part of design patterns used in industry.
@@serbanmarin-eusebiu if type is User, it obviously should be singular. If type is AccuracyMetric { metric1: number, metric2: number, metric3: number } it should be plural, because it is not one metric semantically. With "Results" it is not obvious, what the author meant.
@@serbanmarin-eusebiu I agree with @funtaps even though Im all for neet conventions. The word "results" can be seen from two different perspectives: 1. A list of a result with a specific format (an instance of a result) or 2. Results as a set of keys and values (metrics) representing a specific result. I would prefer "Results" as the object/interface is static within the context of the application (aka. it doesn't represent an instance of a bigger thing).
never apologize for ur english u write better english than me as a native
As for the first one - this convention isn't really usable if there are task mention tags, like #21 or AP-335. Using convention only takes extra space and makes the commit message even more unreadable, especially in the UI of GitHub.
If mobile use is being restricted solely because of the keyboard instead of actual unsupported features, you could potentially be restricting phones and tablets that have a Bluetooth keyboard connected.
Very good point!
I like the improvements to commit messages. That's one of the first things we did on our small team, because everyone's commit messages and titles for PRs were so different. I wonder too, if showing that the project pushed PRs up instead of commiting direclty to main could show a level of profesionalism. Then someone could write more about the changes they were making, even if they were the only person on the project.
I also wonder if the original intention of the one big hook in the main App.tsx file was about setting up a container/presentational component pattern. By adding all the logic into the App.tsx all the child components are presentational, and can be more easily tested, and updated, with limited mocking. I agree though, splitting up the hook makes sense.
It looks like the guy was trying to do a form Dependency Injection with his TimeCategory component, which can be good since it does make testing really simple. But it does remove part of the advantages of using hooks and in more complicated projects could end up with either the main Application component having to have a complicated render with every component being compositional, or you end up with prop drilling.
The downside of using hooks inside components without DI is you couple to that hook, and when testing you need to know which hooks it is using so you can mock them correctly. So advantages and disadvantages here.
But yeah, useSystem should be broken into smaller chunks as there's a lot of functionality there and it would be a pain to test as it is.
Would be better to use CSS to check for touch rather than width to allow users to shrink browser.
Something like @media (hover: none) and @media (pointer: coarse)
Spot on
Yeah, it's a great idea. I always use this approach in my personal projects
but there is some laptops that has touch screen and will be blocked from seeing content right?
about the conditional rendering in this video. It seems to me that it makes sense, because in this way we do not load and render a bunch of components just like that if the device does not meet the requirements. Thus, we can make lazy (dynamic) loading of the component when, if anything, it is needed. CSS just hides it and there is only a visual meaning to it
I guess the display: none proprety is doing that is it does not let the element be on the dom...
@@mobythereal no, display: none doesn't delete the element from the dome, it just hides it and makes it not to take any space on the page
style commit prefix its not about ui changes, it means codestyle changes
9:58 - Except this use agent package checks the device properties like Browser version, and Device properties like the OS, then this implementation is correct.
but you dont need to check the entire user agent for the same basic functionality
Yes you are very correct my friend, I'm just giving that as an example @@neofox2526
@@neofox2526 don't reinvent the wheel, just import and use it if no performance issue, you can do a wrapper or custom hook based on external packages, so you can swap anytime you want
But what if the user shrinks the browser window to look at something else while he types? Then that breaks the whole website and the easy fix would be a disaster
It depends on how much he shrinks the site. But it wouldn’t make sense as a user to shrink it below Tablet screensize 🤷🏻♂️ this use case is maybe less than 1%
Great job josh! Code reviews are so important for beginners.
If you want to initialize a state in a hook once then you would want to pass the hook down as a prop so the component has access to it. I have controls and timeline components and i pass useTimeline down to controls components so it can control the timeline
Is that a joke when he did a whole hook to detect mobile version for optimization and you just tell him to hide it with css 😢😢 ?
3:25 - there is no need to use template literal here
fjahahah
nice
Style conventional commit message is for code style not styling in the UI sense
Exactly
@@StabilDEV he's nuts
1. Is doing the most. and really not a problem just depends on what you care more on. looking atbthe code or the commit message
to all interviewers: if you had to choose: a guy who writes bad commits but has professional code, or a guy who writes super commits but is an amateur. i rest my case
This was fun, would love to see more such content. Though any video which you make is legit awesome anyways 😀
3:00 arent commit message sipposed to be presemt tense? `style: adds logo` to tell what the commit (it) is doing.
8:02 this is a huge mistake. By calling useSystem() in two different places, you are essentially duplicating another set of the game's entire state/logic in another place. I think what you meant to do is either:
1. Keep the code where you destructure setLocalStorageValue and additionally make useSystem dependent on a global context/redux store.
2. Pass the entire return value of useSystem as a prop to TimeCategory, and then destructure that prop inside TimeCategory.
Exactly. I was surprised that no one else noticed that
Really interesting video. Would be really cool if you could do more like these😀
Type at plural don't always come for arrays, for example component props types. What you find to want to be singular is mostly "entity" based types (like User, Product, etc)
0:40 blinder warning 🤭
I don't think commit messages should be anally specific - that's what you use a Pull Request for to describe the changes being made. I think commit messages are usually never done right anyway as in my company we just give a quick run down of a change in them but they arent all descriptive or all encompassing. It seems nowadays that these small non-descript things needs to be intrusive enough to make the process more of a administrative process than actually just creating something.
I think these conventions should be implemented within a pull request title and body, not to the commit. The example of "adding image - logo" is more than enough for a short commit message. You said it yourself, that the commit indeed is just adding an image. So there's no reason to overly commit to the "the commit messages must follow XYZ principle", that should be saved for the actual PR body when given up for review.
I think most of these make sense 👍🏻
If there's another project you review, maybe you could consider adding in a few words about testing. Even if this is a fun project for a resume, the author would probably still like to have (automatic) dependency updates. Having some tests is much better than nothing.
Looks like they wanted to have some tests but the only test file is empty.
Another thing I saw in the code is that the author could use "as const" to define some static configuration, although this is more of a curiosity than an actual useful suggestion in this case.
Nice project!
One more thing: the project could use a lockfile. I see it had a commit to remove the yarn lock file, but I don't see a lockfile on the main branch.
A lockfile is used to store the exact versions of packages that were used, and having it committed in the repository means a future developer (maybe the author themselves) is guaranteed to have the exact same packages installed.
If there is no lockfile, there is a needless chance of getting some build/runtime errors.
No body gives this in-depth knowledge and tips thanks for that
All these suggestions are “nitpicks” except for maybe the hook restructure.
As long as you commits aren’t “chore: wip” write whatever you want. It literally doesn’t matter. Most teams use PRs and squash so you never see the original commit msg
Width check for disabling stuff could be problematic runs the risk of disabling stuff when it shouldn’t.
The Results type is hold the Result’s just like if you had a Settings type that had language and dark mode etc, you wouldn’t call that type Setting? Also who cares? Find and replace is a thing if it’s meaning changed.
These are all extremely superficial things and worrying about these things is what keeps people as a beginner. Learn how to use hooks properly, how to do safer conditional render. Hell how to actually style things effectively is more important.
With AI starting to write a lot of code know what is bullshit and not is more valuable that how to name things.
This wasnt a code review of React. This was a public shaming of someone who doesnt follow your specific conventions and style guides.
Wow. I forked the project at once. Great review Josh
This is very helpful for new beginner like me. Thank you very much!!!
Josh, sorry to say it, but I think you don’t understand the needing of user-agents. Let me clear things for you, as long as you are on desktop, even if you shrink the window, it is gonna use the desktop user agent, which is perfect, because you can use the keyboard. In addition, just think about it, if someone want to shrink the window to fit in the left/right side a UA-cam tutorial or something to improve his typing skills( for example ), he would not be able to do it because in the most cases, the window would be much smaller than the media-query breakpoint. I respect your videos, sometimes makes a lot a sense, but sometimes you forgot to think outside of the box and see the actual needing of features. So, keep it up with the good stuff, and make a little more research on before, just a piece of advice. 🤗😄😅
The good thing with using the width instead of the user agent (which would be janky anyways since browsers might not send expected mobile user agents) is that the page might just not work responsively below a certain threshold. But in this project it does not really matter as there is no mobile support at all, so from my opinion I'd say use conditional rendering (which Josh did not do, it's all rendered but then hidden via css) based off of viewport width. Also maybe build support for mobile and create a functioning mobile view.
yeah, research common sense, very good. thanks for "clearing things up for me" but this is literally just an oversight on his part caused by routine development
I agree with the css change, lots of extra code removed for the actual non-mobile user
Josh, I'm fetching on the server with trpc and mutating on the client, how do I revalidate data?
conditionally render by checking only the device width is too junior to become a review on code
3:59 I’ll definitely be using these going forward
what does chore mean exactly?
commitlint conventions were super helpful did not know about that
Hi Josh 👋 Can you make a video about compound components pattern in nextjs, and especially how to use it with server components? Thanks for sharing your knowledge :)
wow! this was really useful, as someone who's been a back-end developer for so long now trying to get into react, am just learning a lot.
how do i submit my front-end projects for review?
My phone counts as large by your CSS implementation. In fact, it probably would count as 2xl. You wouldn't want to use device size to discriminate between mobile and PC. Especially when there is a such a variety of screen sizes between mobile and PC.
Are you sure about that? I thought css media querries are not literal pixels, but actually relative to device size, so a phone with a 4k screen wouldn't actually be considered 4k pixels.
@@edhahaz That's not the question. You could resize you desktop browser. The semantic is "I don't want this on mobile" not "I don't want this on this viewport size"
This was so helpful. Need more of these videos 🙏
Would you recommend Angular 17 vs next.js?
Removing whitespace should fall under style and not refactor since it doesn't necessarily change the meaning of the code.
So does refactor
You answered a lot of my questions in this video
I disagree with the conventions of type names. If the interface 'Results' is indeed an object of the full results, then 'Results' is named correctly. There is no reason to go above and beyond about this. A comment to the type would probably have helped, but as you can tell from the interface itself, it seems like it's a proper object with the cumulative values.
nope, he is right on that, it should be singular, again, dosent really matter…
@@wisdomeluehow about ResultValues
No I agree types are singular except if the tyoe itself is an array.
I don't think there's a true answer as it's more of a personal preference than a good/bad practice. Personally I prefer singular "Result" because I think it makes more sense when reading the type
beautiful video, but I would argue that making the game hide on small screen is bad considering why he did that in the first place.
you're hiding just on small screen which connects to a responsive design, he did that not because a phone is small (you can have tablets larger than your laptop screen), but because the tracking hook he used does not work without a keyboard (e.g. doesn't work on a digital one -mobile/laptop).
so by your approach, someone with a big enough tablet can reach this website and play the game even when he can't.
using mobile agent here is the right approach, but as you said hard coding the values and getting all the agents probably will take him a lot of time and he will some,
for that case he should use a library like `react-device-detect`(769k weekly downloads), which renders a view based on the browser's agent with agent sniffing.
i dont think commit messages is a deal breaker
Actual commit messages in my $900m dollar company’s repos:
“try this”
“wtf is this”
“try fixing”
“linter bs”
“I hate CSS”
Can anyone tell me any best way for commit
It really depends. But the most important thing is.
*You* *can* *tell* *right* *away* *what* *is* *the* *commit* *for*
Most conventions wants it present tense also.
Now here is the question are you
A.) Unit / Individual committer. (People who usually commit the basic functional stuff)
B.) Block commiter? (People who collect most action before committing. )
Before we change something. we should know what we are changing. I think.
Example. (technically the reason result have s is because the person coding thinks the interface have a lot of members)
result here is an interface. by convention it should have capital I so shouldn't it be IResult?
IResult is very vague. If you look at the purpose. It is the user result. So maybe it should be IUserResult.
Extra advice or opinion Interface on most cases I think shouldn't be made plural. So no or don't use IUserResults.
Instead make the one referencing it the plural or something.
Ex.
(Singular)
const [userResult, setUserResult] = useState(...)
(Plural)
const [userResults, setUserResults] = useState(...)
(Another way of making it plural is)
const [userResultLists, setUserResultLists] = useState(...)
At work we use Context instead of hooks.
Someone just forked monketype and shared it 🤣🤣
MonkeyType has a lot more features. I think they just got inspiration from it
Watched full video, It was great
Thanks!
Git commits often involves different changes in code so you can't specify the exact change.I personally use "1:commit" and so on....
Thank god you're not my coworker
@@goosybs 😂
Interesting. So, how other people will know what exactly has been changed from reading your commit message before checking the actual source codes?
you don't just make changes and commit whenever you feel like it, that isn't how you're supposed to use git
Atomic hooks is very important point.
how to get a job as a react dev? :(
Best video!
Your advice to use CSS to show/hide instead of conditionally rendering is really bad in the example. Why would you render anything out if you intend for it to not be usable. Furthermore... you can still use media queries as the condition to check against when rendering so if the main point you wanted to make was to drive condition off of media query instead of user-agent you could still have done so.
I think you should explore these topics more before making videos, there's been a lot of "interesting" advice in your recent videos.
wait, so that's a beginner react code? I feel so down right now knowing that this is a beginner one 😂
If this code is written by a beginner then who am I 😂?
Thank you Josh
More of this please!
to be honest, your changes in commit messages add no value - what empty space did the commit remove? what image did the first commit add? if those are good commits, you might as well make every commit with message "add new code", because that's just as unspecific
Hi. It's me again :))))
I think comments for youtubes affect positively on your channel! 😇❤
Could you please make the following video: example of user authorization, registration, user roles. Please use nextjs 14, typescript, server actions, nextauth 5, prisma, shadcn ui, react-hook-form, zod, sonner.
Have a nice day 😘
As if recruiters would know what a commit is or gave a fuck about the commit conventions.
Third , hey bro , you are amazing , but we need more videos about how to setup projects and finish them as fast as possible , or by another way how to really become a 10x freelnace dev
lol
Josh I have a question ⁉️
I use mongoose for my db in nextjs
I wrote a mongoConnect() function that I call each time i want to use any model to work with database.
It is repeated code. What is the convention for connecting to db?
Please Help ❤
instead of writing mongoconnect fn everytime export the function and call
Only 90k subscribers. Really?
You should have 500k minimum.
the way I see the custom hook for devices is like an excuse he/she made to just keep practicing some logic and react functionality in general, something that the "easier" way with a couple of css lines won't give you as a beginner, the tip you gave is alright I guess, not the best approach either lol, it looks more like a work around to me tbh.
Make more of these!!
well your own code need code review by at least a senior dev
Relax with the commit messages, friends. It doesn't matter, especially if you're the only one working on the project. If it's a larger project use pull requests to merge into main (preferably squash and merge) and use some convention around PR titles. No one likes being forced to think about some convention around writing commit messages.
chore: fix
Fourth here ✋🏾
Also I'm surprised first guy has the same name as me 😅.
Why are you using my code on the thumbnail?
mobile assessment is correct tho
I edge to your videos
first 🤓
one of the 2 first comments
🤓🤓🤓🤓
git messages is fine, but they are meaningless. In real world you cannot just add all changes under one message.
And if you want to find something in history, that will not help to find the issue.
So basically you just putting some "convention" weight on your team shoulders.
disliked, I disagree with nearly 80% of what you said. the comments are clear.
style: add image is just as useless as add image - logo. Your refactor comment change was just as useless. commitlint isn't a convention either, it enforces a convention. Can't watch more than 4 minutes.
Can't agree with all your improvements. :(
Somehow this video made me hate React even more....
Anyone who cares about commit messages should be fired immediatly
First Comment