The input has an inputMode prop that you can set to numeric, this will avoid those arrows that show up on inputs where the type is set to number and you'll still only be able to enter numbers in the input.

@WebDevCody

Жыл бұрын

awesome thanks for that info!

@grenadier4702

Жыл бұрын

Sadly, we hav Explorer 2.0, *cough* safari *cough* that doesn't suppoert that

Bro a 38 min that feels like 15 min, you explain so well. Good job :D

Good stuff and thanks for including the "behind the scenes" troubleshooting of the API.

Hello! I am truly grateful for these videos. I have had finished the odin project but had been scared to apply for jobs, your channel and you really help me get through that fear. Keep these challenges coming!!!

@velifurkanturkoglu1387

Жыл бұрын

Also I must say that to whoever might read these, If you are someone who is bored at watching videos that teach "useState in React" kind of videos, watching this channel and experiencing his thought process will help you better than watching countless udemy courses. You are so through and to the point and this 40 mins of video basically feels 10 mins!

@WebDevCody

Жыл бұрын

Thanks for watching, I’m glad you enjoy my content!

@buraksurumcuoglu8303

Жыл бұрын

@@WebDevCody You're also my favorite React content creator lately, by a long shot. I love watching the live coding/refactoring and the thought process is just pure guidance for us juniors. Keep up the good work Cody, thanks a lot!

Enjoying these vids, subscribed for sure!

This was cool and well explained. Honestly, AdventOfCode is also a really good practice for interview question and its a fun way to mix coding and the festive month. In my experience interviewers fail to give you practical examples like you've shown and still give these hardly ever used algorithm type questions.

Never knew about the `new Array` method, and never used the debugger (which is a shame, and I should learn it). And the proxy thing, that's extremely helpful. Learnt so much in 40 min, your videos are definitely worth the time, Thanks :)

Those kinds of videos are awesome. They are literally better than clone projects. Because we can understand the basics of .tsx, and gives us a better understanding when we are using real-life scenarios or side projects. I hope you keep doing interview content

COOL project, very useful for improving in many things. I'm a React developer too

This is awesome! I was just doing a project with a grid

your live coding is like watching short detective story and good for quick lunch

Interesting and educational, thank you.

Binging these videos for an upcoming full-stack interview, solid work man

@imaginaryworld599

10 ай бұрын

how did the interview went?

@sid6576

10 ай бұрын

@@imaginaryworld599 Rejected

@PsychoDude

7 ай бұрын

Did u get a job until now?

@sid6576

7 ай бұрын

yes@@PsychoDude

nice I learnt a lot, you are my new fav list channel

@WebDevCody

Ай бұрын

Thanks man!

I think the way you wrote the setGridValue function is incorrect, because you are actually mutating the state directly. For example: const x = [[1,2],[3,4]]; const y = [...x]; y[0][0]=5; console.log(x[0][0]); prints 5 insted of 1. This is because 2d array is array of refrences to arrays, so by doing [...x], you just copy only references to those nested arrays but not arrays themselves. I think what you need to do is: const x = [[1,2],[3,4]]; const y = x.map(a => [...a]); y[0][0]=5; console.log(x[0][0]); Mutating state like you did can lead to very hard to detect bugs. Am I right or am I missing something?

@WebDevCody

Жыл бұрын

Sounds accurate. It’s probably better to make sure I do a full copy of the nested arrays

Can you please implement drag and drop inside a grid in react project? And make sure the scrolling behavior remains same on every screen.

There we go! Thanks for hearing me out! Advanced next, please!

@WebDevCody

Жыл бұрын

I’ll try to think of a more advanced challenge.

@tomiis4

Жыл бұрын

@@WebDevCody I'm not sure how advanced it is. But I think it will be good to see some sorting or path finding algorithm visualizer.

@maharta8458

Жыл бұрын

@@tomiis4 jesus, i'm a cs student and i will never be able to do that on my own

Cool tut especially using the debugger to debug

i am coding my own sudoku currently over on github ( github -> bloodiko -> sudoku (also on github pages)) a good solution for the spacing issue of the grid is to use "repeat(9, min-content)" making it possible to even dynamically adjust cells based on screen hight later on. (but overall my sudoku is not that advanced yet, and my code probably massivly overcomplicated, but i tried what i can do.) Also: Keep in mind that spread (...) will only apply to the outer array (row). not the inner array(col/cell) this makes it not totally new, but just partially new with cols/cells still beeing references.

@WebDevCody

Жыл бұрын

that's good info, css is my weakest skill, so there is a lot of I forget exists when doing flex box and grid layouts. Yeah the ... will remain the same references to all the elements, but provide you a new array reference, which is fine in this case. I just wanted to tell react to re-render, and providing it a 100% brand new array is not necessary to achieve that.

@Ebiko

Жыл бұрын

@@WebDevCody true I needed it in some cases, that's why I mentioned it. Also I didn't know this min-content css stuff myself, my brother showed me, and helped me there with my project which was cool.

You teach not only about the sudoku but also teach us how to use proxy 😃

@mostafabazyar4483

Жыл бұрын

gods know how meny years i had this cors problem

Nice video with some cool concepts! Though, is it me or is your UI rendering the rows as columns? At 16:23 in the vid you are editing UI row 1, cell 6, but in your data model its updating row 5 cell 1? And isnt that the reason you lateron have to swap the rowIndex and colIndex?

@WebDevCody

Жыл бұрын

Yeah something is a bit backwards

what extensions do you use for those inline error hints and colored block markers? also i like your stuff :)!

@WebDevCody

Жыл бұрын

error lens and rainbow indent

I've been practicing and watching these react interview questions for a while now, incase I want to make a switch to a new company/job. However, I'm coming to realise there are quite a few companies out there who don't even test you on React at all. Even for a front-end engineer role, topics on system design, Leetcode (med to hard) and maybe a basic front-end test in vanilla JS are most likely to come up. I know this is more prevalent in FAANG companies, but could you share more insight on this topic? Are newer more modern small/mid sized companies still following this practice? From what I've heard from my senior engineers, there are definitely still some companies out there who don't test you on JS frameworks and assume from your knowledge of DSA and vanilla JS you are competent enough to pick up any JS framework.

@WebDevCody

Жыл бұрын

That is probably true. I haven’t done real interviews for react positions in a while so idk what the standard is. The title is a bit more of a click bait but the challenges are still good to practice doing. I do think being able to demonstrate you can build something basic in react does sell yourself as a developer. If a company is confident in hiring someone who can reverse a binary tree, then that’s up to them. I personally don’t want someone to spend the first month of their paychecks learning react if I was running my own business

@Immacio

Жыл бұрын

@@WebDevCody Thanks for the reply and your insight. You make a good point about paying someone to learn react in their first month. Keep up the dope content, I've been watching every single video you've put out for the last few months

Great video thanks!

gotta say this is my favorite react contents

Awesome content. Did you get Lasik by chance? No glasses this time 🤓

@WebDevCody

Жыл бұрын

nope, I just left my glasses down stairs and I was too lazy to walk back down to get them

@0kJaymie

Жыл бұрын

@@WebDevCody Haha nice. I wouldn’t be able to see without mine

Nice content! Looking at the response, wouldn't it simpler to use 1 dimensional array? 🤔

can someone tell me how to make shorts where I can show my browser and code in the same time I find it really very difficult

I have had so many problems with referencing the same object with Array.fill() that I immediatelly saw your mistake and was like "Oh no" xD

Good job babe!!!

Amazing!

You deserve more subscribers

This challenge is good for interview question.

styling to remove default arrows on number input /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; }

I think it would've been better to use a ref to read the content when required and not triggering a render each time the user writes a number. It would probably not be a problem here because it is supposed to hold a single number but when your using the input for a long text the lag is pretty noticeable as you press the keys faster.

@WebDevCody

Жыл бұрын

Yeah that might be a good useCase for uncontrolled inputs

Hey, what's your thoughts about using declarative methods instead? Do you think it would look better for the interviewer? ex: instead of for...for... using response.split(''), grid.push(response.splice(0, 9)) while length>0, etc, etc...

@WebDevCody

Жыл бұрын

Sure, either works. Idk about looking better or not, those are non important implementation details to me.

@jollyjoker6340

Жыл бұрын

Yeah, I think those oldschool for loops should be avoided. Good thinking on the splicing; my first thought was to do solution.forEach((n, idx) => newGrid[Math.floor(idx/9), idx%9]=n) but that still uses idexes unnecessarily

@jollyjoker6340

Жыл бұрын

And the other way at 32:00 could just be grid.flat().join('').replaceAll('0',.'')

@caick7

Жыл бұрын

@@jollyjoker6340 Yea. Declarative programming was the most beautiful thing I found out in 2020, makes code so more readable, right

@jollyjoker6340

Жыл бұрын

@@caick7 I want to avoid potential bugs too

Amazing

Only thing is here you are starting with the UI. The logic of how this works (state manipulation) is separate from the view (grid). It would be good showing that process as that is a much more professional practice

@WebDevCody

Жыл бұрын

It doesn't matter where you start as long as the end goal is the same. Every person's brain solves problems differently, and some people like to solve the visual aspect of the problem before solving the logic. "much more professional practice" is a snobby view point imo.

@MarkJKellett

Жыл бұрын

@@WebDevCody When I say professional I didn't mean it to sound snobby. And people do solve things in different ways. But it is also true that there are multiple things to solve and it's a good approach to identify them and consider them separately.

@WebDevCody

Жыл бұрын

@@MarkJKellett yeah that makes sense.

damn. u made it soo complicated. haha.

Should be used flat map

I don't know how to make good commits 😞😞😞😞😞

Why is it being transposed, that's my only question. It feels bizarre to me... is it because of CSSgrid?

Two things right off the bat - it’s pronounced SU DOE KU - please tell me you already knew that the puzzle was 9x9 before recording this video and that you only counted the cells to teach viewers

@WebDevCody

Жыл бұрын

I’ll leave that a secret just for you

@LiIRobJr

Жыл бұрын

@@WebDevCody ❤️ 😂

I just realized that you wear a little tiny hat, if you catch my drift. Why does KZread keep recommending so many of you to me?

@WebDevCody

3 ай бұрын

No clue what you mean 🫡

@lonnybulldozer8426

3 ай бұрын

@@WebDevCody I can't say it directly for obvious reasons, but let's just say your last name gave it away.

@WebDevCody

3 ай бұрын

​@@lonnybulldozer8426 nah, I'm Christian, not that is makes a different when teaching coding. One can't choose his last name 😎

@lonnybulldozer8426

3 ай бұрын

@Cody You and Mr. Hotz, eh? I'm noticing a trend here. Also, if you can't choose your last name, tell that to John Stewart.

This is not a good idea to change nested arrays like "array[i][j] = value". You still mutate your state which should be immutable. Kinda a proper way would be like this: ``` const newArray = [...array]; newArray[rowIdx] = newArray[rowIdx].map((val, colIdx) => colIdx === _colIdx ? newVal : val); ```

Says intermediate. Console.logs solution. Takes almost a half hour to solve it.

@WebDevCody

Жыл бұрын

Not sure what your point is?

Spread is a shallow copy. I default to json.parse(json.stringify(obj))

Hey Instead of parseInt(e.targer.value) you can do e.target.valueAsNumber

@WebDevCody

Жыл бұрын

Oh nice never used that but that’s cool!

@jordyvandertang2411

Жыл бұрын

Thats cool, does that also handle the NaN cases or would it throw an error?