Some days I'm unmotivated to learn but you do a good job breaking things down and making it more understandable. I appreciate the time you take to teach these "simpler" lessons it really helps me out.
Amazing Challenge, please keep going for this series! one more thing I want to say, your videos are amazing because they are spontaneity, no edit and no montage we support you dude
This video is really great! It's simple yet covers an important aspect web development, making it a perfect introduction to React. I'm totally sharing this challenge with our interns. It's an awesome way to get them started. I'll make sure to refer them to this video when they finish so that they can see your solution as well. Keep up the great work, Cody!
loved solving this simple problem, added some animations when you hover in between, elements space out and added animation when adding a cell, was fun.
Really nice video! Some fast and easy things I would do to make it even better (if this was a job interview) would be to set a max length of 1 for the input. Then a small tweak on the styling of the green area, maybe smaller width and then smaller height so it doesn't stay between the borders of each box. Could even place the green area inside a div with a bigger size and when the div is hovered it shows cursor pointer and shows the green box so the user can add a cell without going precisely into the middle of two cells with the cursor while still maintaining good aesthetics
i love your channel so bad bro, keep going with these videos, It motivates me a lot, I'm practicing a lot with your videos in search of getting my first job and you are part of it, thanks a lot bro
Love this content, great delivery and the speed was good. A tip I would like to share for your CSS - to get that .plus all the way to the right you can remove the right: -5px; then use left: 100%; with a transform: translateX(-50%); those values are great because if the width changes on your .plus you don't have to reposition it 😉
Nice little task! I would personally add onClick on every cell and just calculate if it was clicked on the edge (either right or left) and if so add a new cell (at index -1, +1 or 0 if index -1 < 0, that would also allow to add cells to the ends of the cells chain) and focus it so you enter new value instantly. Also, I guess cell should accept only one symbol at the time so whenever you enter new value previous one should be cleared out.
That was a cool challenge. As a tip for beginners, don't try to over optimize everything at the start. Type out the variables, type out the arrays, the functions so you can understand the flow a little easier.
@@rafaelneukirchen6619 ele sempre aparece na sessão de comentário de uns videos muito bons rs, muito bom saber que alguem que eu admiro tem os mesmo gostos que eu 🥰🥰
Please try to bring in more real world interview questions. An idea for you: participate in real interviews, then record a video solving the challenge you had.
you could handle that "in between" click without adding any elements. for example you could use clientX (cursor position) and element bounding rect to calculate if the click happened near the inside edge of the box.
@@lucascarman2578 its not more complicated. However, it depends of a use case because its more of am edge than in between click. Wont work with spacing between the boxes.
splice() doesn't work here, I believe it changes the original array. App crashes if I use splice. Just a bit confused here, why React doesn't allow you change prev in set function?
have try the method of Splice with setCell(prev=>prev.splice(idx,0,'_')) the console show the correct result , but the display didnt render the array, can you tell why ?
@@apexyu164 try setCell( prev => { prev.splice(idx,0,'_') return [ ...prev ] }) You have to spread the array otherwise it will keep the same reference and React wont re-render. Keep in mind that this mutates the original array so it's not recommended. You could accomplish the same in a non-mutating way with array.slice()
How do you get the CSS that comes from the beginning of the video? Is there a repo somewhere? The css I get when I start a new project with vite is very different.
that's pretty cool, I was working on a particularly similar personal project, but I was struggling with removing the cells with the double click event. What I would do is take the index and slicing the current array to remove the item. Problem was there wasn't a new index being generated after each item removed, and that would potencially mess up future items removed. Does anybody see a possible solution?
i did this challenge by myself before finish watching your video and all i did to detect the click event between the boxes was adding a span in the middle, using position didn't even crossed my mind :(
hi Cody, great video! honestly seeing people, like you, doing this so easily makes me wanna not quit and try to be more efficient with my code and learn a bit more everyday. I'm now starting my path in React.js, so thank u. pd: can u give us the name extensions that ur using for coding and the color theme? thanks! greetings from Argentina
If you already have the index of the cell that needs to be updated, why would you loop over the whole array? In my opinion, solution will be: const updatedCells = JSON.parse(JSON.stringify(cells)) updatedCells.splice(indexToUpdate,0,newCellValue) setCells(updatedCells)
@Web Dev Cody Can you please make video on handeling authentication in Nextjs. Like how can we use access token withou saving it in localstorage or cookies. setting inside internal state. like that
@@WebDevCody And one video could be of Implementing authentication using next 13 middleware. It would be great help. I couldnt get any article . I didnt even understand in docs
I think state needs to be elevated anyway since the child needs to append to the cell array, so the state of the cell can’t really live in the cell component anyway. Either way, two ways to skin a cat
Thank you for this video! Can you please in some future video explain why useEffect hook runs twice on mount, it messes up the application too much, especially the fetching data
It would be more performant to extract the cell logic into its own react component. This will let you give each cell its own update function so you do not have to worry about mapping over the cells and only altering the one at the correct index. This is why you almost always want list items to be independent react components. Definitely a cool beginner challenge though!
@@copsarebastards been a while since i watched this video so i don't remember how it's all made but instead of having one component for all cells and iterating over an array to find which was clicked and which one to update, it's better to extract the cell logic into it's own component and reuse that cell component multiple times. That way first - you avoid the rerender of the entire parent component when something changes, second - you get better Separation of concerns, third - you don't have to iterate and look through to figure out what was pressed and where which means less computation, fourth - you have huge flexibility in the component. Also this is the purpose of react - to build reusable components. The way the video shows would be alright (somewhat) if you had done it with vanilla js.
Because when you, for example, change the order of such an array that only has primitive values, React doesn't see this - keys remain the same because they are the index, despite the values at that index changing. And when you make it hard for React to detect state changes, you're shooting yourself in a foot. What you should do instead, is have an array of objects, each with the display value and an unique id, which you can dynamically generate (uuid() or stringified Math.random()) when adding new tiles on click.
Before you start learning any framework/library you've to know some basic concepts of the source language. In this case, javascript knowledge is essential. (basic things like loops, conditional ... and some new features like arrow functions, promises, destructuring, map, reduce, filter), you can search for a Roadmap to become a react developer.
Instead of input You could also use element property: contentEditable = true, which lets You perform inline update of element. It happens only on view side so we still need to update array/object/database data, etc, i.e. save data after unfocusing element
Usually I edit out maybe 1-2 minutes from videos depending on how much I clear my throat or say um or explain things poorly. Most of my videos I try to do a live as possible and just clean up the video
Some days I'm unmotivated to learn but you do a good job breaking things down and making it more understandable. I appreciate the time you take to teach these "simpler" lessons it really helps me out.
Amazing Challenge, please keep going for this series!
one more thing I want to say, your videos are amazing because they are spontaneity, no edit and no montage
we support you dude
Thanks man glad you enjoy my stuff!
This video is really great! It's simple yet covers an important aspect web development, making it a perfect introduction to React. I'm totally sharing this challenge with our interns.
It's an awesome way to get them started. I'll make sure to refer them to this video when they finish so that they can see your solution as well. Keep up the great work, Cody!
This was awesome. I would love to see more React practice problems like this.
I will watch every react problem you upload! I’ve never seen react problems before…usually it’s DSA. This is needed content
loved solving this simple problem, added some animations when you hover in between, elements space out and added animation when adding a cell, was fun.
Great video, thank you. :) Also props to folks in the comments mentioning how to improve upon it...
Been enjoying your videos, keep on going
Really nice video! Some fast and easy things I would do to make it even better (if this was a job interview) would be to set a max length of 1 for the input. Then a small tweak on the styling of the green area, maybe smaller width and then smaller height so it doesn't stay between the borders of each box. Could even place the green area inside a div with a bigger size and when the div is hovered it shows cursor pointer and shows the green box so the user can add a cell without going precisely into the middle of two cells with the cursor while still maintaining good aesthetics
i love your channel so bad bro, keep going with these videos, It motivates me a lot, I'm practicing a lot with your videos in search of getting my first job and you are part of it, thanks a lot bro
Love this content, great delivery and the speed was good. A tip I would like to share for your CSS - to get that .plus all the way to the right you can remove the right: -5px; then use left: 100%; with a transform: translateX(-50%); those values are great because if the width changes on your .plus you don't have to reposition it 😉
Your videos are so good to watch. Impressive work! Keep it up
Nice little task! I would personally add onClick on every cell and just calculate if it was clicked on the edge (either right or left) and if so add a new cell (at index -1, +1 or 0 if index -1 < 0, that would also allow to add cells to the ends of the cells chain) and focus it so you enter new value instantly. Also, I guess cell should accept only one symbol at the time so whenever you enter new value previous one should be cleared out.
That's a great idea!
I thought just the same thing, and i would have added a filter to remove item without value
Could you help explain this? I thought that was what he did with setCells and adding the new cell in between the two slices
Awesome stuff Cody!!
That was a cool challenge. As a tip for beginners, don't try to over optimize everything at the start. Type out the variables, type out the arrays, the functions so you can understand the flow a little easier.
Pesterenan por aqui?!!?!?! O.O
@@rafaelneukirchen6619 ele sempre aparece na sessão de comentário de uns videos muito bons rs, muito bom saber que alguem que eu admiro tem os mesmo gostos que eu 🥰🥰
Following your channel for few days and i love your contents specially the front end mentor challanges. 😊
Nice tuto! I really liked your style. True and authentic!
Great Job I really want to see you solve more challenges like this . Thank You
Which theme are you using in vscode ?
I loved that. Really made me wanna polish my knowledge of array methods 😂
The practice problem make me so excited. Thank you
why not place the span outside the div with classname cell and set it to display none and then onHover to display inline-block
i think so
Please try to bring in more real world interview questions. An idea for you: participate in real interviews, then record a video solving the challenge you had.
Yeah good idea
I’d watch that
Agree
Just came across your channel, instant sub 😊
thanks for these man, really enjoying it
about splice there is toSpliced which doesn't modify the array if I'm right.
More of this. This is soul of learning how to do programming
you could handle that "in between" click without adding any elements. for example you could use clientX (cursor position) and element bounding rect to calculate if the click happened near the inside edge of the box.
That was the way my brain went with it at first but his solution seemed a lot easier.
@@lucascarman2578 its not more complicated. However, it depends of a use case because its more of am edge than in between click. Wont work with spacing between the boxes.
Could you please tell how you make a selection rectangle with pixels like on 6:30?
This is a great video!
nice lesson
next task can be - prevent all cells from rendering while editing, and have only one cell rendered
Keep making these types of educational videos 👍
Put a button between instead. Span with onclick is an antipattern, you can't tab to it
yes good point
what is the vs code them do you use ? and what is the icon theme
This was very nice❤❤❤
What theme are you using for VS Code by any chance? The text color scheme is really nice!
Bearded theme
Respect. Awesome tutorial. 👌
splice() doesn't work here, I believe it changes the original array. App crashes if I use splice.
Just a bit confused here, why React doesn't allow you change prev in set function?
cge! tara! :D
awesome vid.
Does anyone know the plugin used in the video that shows the error right beside the code so that we don't need to hover on the error?
Error lens
At 10:00 when you’re writing the call back function. Could you not just:
setarray( prevArray => prevArray[indx] = e.target.value)
That modified the original array which goes against the way react expects you to update state
@@WebDevCody oh so you’re using map because it creates a copy of the original?
@@LeagueJeffreyG exactly, well it makes a shallow copy, but yes
@@WebDevCody cool stuff
have try the method of Splice with setCell(prev=>prev.splice(idx,0,'_'))
the console show the correct result , but the display didnt render the array, can you tell why ?
I think .splice() returns the removed elements so as is you’re setting prev to an empty array
@@allanmartinez6474 so what is the correct way of using with prev?
@@apexyu164 try setCell( prev => {
prev.splice(idx,0,'_')
return [ ...prev ]
})
You have to spread the array otherwise it will keep the same reference and React wont re-render. Keep in mind that this mutates the original array so it's not recommended. You could accomplish the same in a non-mutating way with array.slice()
Would .before()/.after() have better performance and be cleaner code?
Great video!
what is the vscode extension that you're using that puts de error in display without having to hover it?
error lens
Just out of curiosity do you have a video on your vscode theme / extensions etc?
probably, theme is bearded theme stained blue
How do you get the CSS that comes from the beginning of the video? Is there a repo somewhere? The css I get when I start a new project with vite is very different.
I may have had some left over css from an existing react directory
Np but a great tutorial!
that's pretty cool, I was working on a particularly similar personal project, but I was struggling with removing the cells with the double click event. What I would do is take the index and slicing the current array to remove the item. Problem was there wasn't a new index being generated after each item removed, and that would potencially mess up future items removed. Does anybody see a possible solution?
I would solve it by dividing the offsetx by width of thr parent element and floor it to get the index. To insert I would splice 0 at that index.
i did this challenge by myself before finish watching your video and all i did to detect the click event between the boxes was adding a span in the middle, using position didn't even crossed my mind :(
If you're already passing the index of the array you want to update, why map over it? Why not just directly update it?
Hi, what extension are you using for your theme please?. Nice video btw, really enlightening
bearded theme
which IDE are you using here ?
Amazing, Thank you .
Would have been a perfect opportunity to implement a linked list! Maybe I'll try it as exercise.
What is the name of the theme in vis you are using?
Bearded theme stained blue
hi Cody, great video! honestly seeing people, like you, doing this so easily makes me wanna not quit and try to be more efficient with my code and learn a bit more everyday. I'm now starting my path in React.js, so thank u.
pd: can u give us the name extensions that ur using for coding and the color theme? thanks! greetings from Argentina
bearded theme stained blue
Incredible!
having onClick in a spacer?
Should be a button, my mistake
If you already have the index of the cell that needs to be updated, why would you loop over the whole array?
In my opinion, solution will be:
const updatedCells = JSON.parse(JSON.stringify(cells))
updatedCells.splice(indexToUpdate,0,newCellValue)
setCells(updatedCells)
Or setCells(p => [...p].splice(i, 0, value));
@Web Dev Cody Can you please make video on handeling authentication in Nextjs. Like how can we use access token withou saving it in localstorage or cookies. setting inside internal state. like that
you could just store it in context, but you need to make sure you only ever navigate using the router.push or elements or else it'll clear out
@@WebDevCody And one video could be of Implementing authentication using next 13 middleware. It would be great help. I couldnt get any article . I didnt even understand in docs
Why would you loop over the cells when you can make a component for the cells and update the state in that component instead 👀
I think state needs to be elevated anyway since the child needs to append to the cell array, so the state of the cell can’t really live in the cell component anyway. Either way, two ways to skin a cat
Damn, that's some quality content. Just tired of todo apps,hooks tutorial
Good job babe!!!
what’s this color theme’s name??
bearded theme
what's your theme on vs code?
Bearded theme
Thank you for this video! Can you please in some future video explain why useEffect hook runs twice on mount, it messes up the application too much, especially the fetching data
React 18 strict mode, it’s supposed to help you find bugs
Pretty challenge. But, after accessing your website, I've see that isn't responsive. Why?
I haven’t gone back to make it responsive. Been focusing on other things
Why loop why not spread the array and update that index only ?
what is this vscode theme
bearded theme stained blue
Hey man nice video, btw which laptop you're using? It feel so smooth...
M1 air
@@WebDevCody thanks for replying fast, is it good enough for coding, I'm a MERN stack developer as well
Great challenge!
Use buttons instead of spans. divs and span with onClick are not buttons! Only input (type button and submit for forms) and button elements are.
yes, this slipped my mind while recording
It would be more performant to extract the cell logic into its own react component. This will let you give each cell its own update function so you do not have to worry about mapping over the cells and only altering the one at the correct index. This is why you almost always want list items to be independent react components. Definitely a cool beginner challenge though!
glad to see im not the only one that immediately thought about this. Hey, maybe there's hope for me yet :D
can you explain this a little more?
@@copsarebastards been a while since i watched this video so i don't remember how it's all made but instead of having one component for all cells and iterating over an array to find which was clicked and which one to update, it's better to extract the cell logic into it's own component and reuse that cell component multiple times. That way first - you avoid the rerender of the entire parent component when something changes, second - you get better Separation of concerns, third - you don't have to iterate and look through to figure out what was pressed and where which means less computation, fourth - you have huge flexibility in the component.
Also this is the purpose of react - to build reusable components.
The way the video shows would be alright (somewhat) if you had done it with vanilla js.
What is the name of the plugin he’s using that is typing helpfull comments like what is wrong with the code.
typescript + error lens probably
does anyone know which theme and fonts he is using ?
@Logan Laski thanks a lot !
from his description:
My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets
Why shouldn't we use ID as key?
Because when you, for example, change the order of such an array that only has primitive values, React doesn't see this - keys remain the same because they are the index, despite the values at that index changing. And when you make it hard for React to detect state changes, you're shooting yourself in a foot. What you should do instead, is have an array of objects, each with the display value and an unique id, which you can dynamically generate (uuid() or stringified Math.random()) when adding new tiles on click.
When I looked at your thumbnail I thought it was Pewdiepie coding
I clicked like when you renamed to TSX 💎
Can i skip learning javascript and go direct to learning react?
I wouldn’t
@@WebDevCody thanks for the response.
Before you start learning any framework/library you've to know some basic concepts of the source language. In this case, javascript knowledge is essential. (basic things like loops, conditional ... and some new features like arrow functions, promises, destructuring, map, reduce, filter), you can search for a Roadmap to become a react developer.
Instead of input You could also use element property: contentEditable = true, which lets You perform inline update of element. It happens only on view side so we still need to update array/object/database data, etc, i.e. save data after unfocusing element
I would mark this down since it tells me you don’t care for accessibility.
Thank you
You could have placed the button outside of the div without needing to do all those css
Probably to difficult for a junior developer
Now this is what needs to be asked in interviews!!!!
Not other shit theoretical stuff
it would be great for new comers to your channel like me to
add a playlist of interview practices problems
That's a great idea!
It’s a bad practice to use indexes as keys. It can cause unexpected behaviour
video is 22 mins long. how much time did you actually take?
Usually I edit out maybe 1-2 minutes from videos depending on how much I clear my throat or say um or explain things poorly. Most of my videos I try to do a live as possible and just clean up the video
easy, I would just review it in vue :p
i am gonna copy this just so i dont forget how to insert in the middle of 2 elements xDDD
Of course I can. I can just paste it into chat gpt and it will give me the answer.
cool
No context reducer I don't think this is gonna pass these are just leetcodes.
I’m not sure what you even said
I can) I'm sql developer)
123
You talk a bit to much and you tend to repeat the same stuff 2/3 times.
Thanks for the feedback