Dude I just watched this whole thing in the regular bing search because I was expecting to only be watching for a second. Wow, very thankful for this tutorial.
Some valuable lessons here, not just specific to React. Break it down into small features. Build a vertical slice that gets the basics of the app flow working then add detail to flesh out the functionality. This used to be called 'top-down-design' when I did a programming degree (many moons ago now), but the principles are the same.
I guess we could skip the JS part to calculate the height of each card, if we use grid instead of absolute positioning. Basically, apply - `display: grid` on `.card` - `grid-area: 1 / 1 / 2 / 2` on `.card .front, .card.back` so that they are placed one over the other. I think the height will be calculated based on the largest element, but someone should confirm this. And, then you can rotate the `.back` 180 deg and it should work.
@20:46 mark, just saving my spot. I got an idea for a project I can build to showcase my skills and that 3d animation is what I was looking for, but I may do a vertical flip, like on Quizlet.
Woah, cloned the repo and ran it, the flips still show the back (backface-visibility) in Firefox 75.0, any idea why or how to identify and avoid such limitations going forward?
i catch myself speaking words from random languages lately, and this would be a cool thing for people to learn new language words from images. I'll keep this in the watch later to reference it! thanks for the tutorial
No problems in Firefox, but I have an issue in Chrome. When I flip the cards some of them turn blank (different cards each time). Then, when I hover over them, the answer appears briefly. Is it something to do with the backface visibility. I'm stumped!
Thank you so much Kyle for this tutorial. When looking at the code, I was unsure about why you put in the max-width for the .container class. Could you explain, why we need to limit the container to a certain width?
heyy there i always watch your tutorials they are very useful thanks for that .... i have a question for you ... i made back-end server with node.js and when i try it with postman it works perfectly it shows json data and i used it for android app ... and now i want this server to make webapp and i'm afraid that when i use same link for the android app i used the json data comes and anyone can use postman and get all the data and that's bad right? so how can hide the json data from user. Sorry for my english
Yeah you're right, it should be in a self contained component, I think he just wanted to breeze by the concepts of the video and just didn't bother creating a separate component.
anyone have any idea why I'm getting the following error and the card isn't flipping? *Custom property ignored: not scoped to the top-level :root element .card.flip { --rotate-y: 180deg; } *
Nevermind, I figured it out. I'm using Gatsby and that was giving me some problems. I didn't need to use a variable for the Y rotation. Instead, I used .card.flip { transform: rotateY(180deg); }
at 14:31, you appear to have removed any mechanism to connect the front and back classes to the flip state. This is pretty confusing as you are losing the key functionality at this juncture. I'm sure you resolve it later somehow, but it seems like poor process to not have this functioning before moving on.
You can avoid making your own decode string function by using the he library. It is already included as a module by default so just import it and decode a string by using he.decode('your string').
Can anyone help with the issue which I am facing on the video timer ?[9.58 ] when i edit the question and save the changes as shown in the video. the browser is not refreshing in the flashCard. When I add some h1 tag in app.js itself and edit the text, the browser is refreshing. React version is ^18.2 I know it may seem to be a simple Issue. Solutions Appreciated. Thanks
can anyone share how would you break it down into more components, such as a component for the header, and then category select... I tried doing this and exporting useRef variables but got some errors
read the new official react documentation. most tutorials on youtube, including this one, are teaching some bad habits when it comes to the usage of useEffect
Hi, You almost lost me when you were calculating the height of the elements, because it got very complicated for me. I solved that in a different way. I remove all the flex related properties from the .card element, then I removed the position: absolute from the .front element, and added position: absolute, top: 50%, left: 50%, and translate(50%, -50%) to the .back element.
Hi WebDev simplified, I enjoy your content. But just as a note, your statement about keys preventing rerendering is incorrect. Keys are used in *reconcilation* not re-rendering. Keys are also often used in practice to hint React on when to destroy and re-construct a class component (when keys changed)
Hi Kyle, i never miss ur video. I want to take ur react course for my semester project. But I can't afford it , it's too expensive in indian rupees. If u could help me i will be glad. And this video is great as always. Thanks for the youtube videos.
Hum the backface-visibility or maybe the transform-style property does not work correctly in last FirefoxDev version... accordingly to caniuse.com they should but nevertheless they don't... any ideas? Tried prefix but nothing happen...
Hey, if you put backface visibility on .card .front, .card .back as well and then copy the padding, height, width, border-radius box- shadow and the alignment into .card .back it should work
@@richardme123 Thanks, I actually solved adding this selector: .card.flip .front { opacity: 0; } It should work using opacity, display or visibility... also top:50%; transform translate(-50%); but the other 3 are simplier.
Was not able to get right api with params, don't know why. If somebody have the same problem just .get this api `opentdb.com/api.php?amount=${amountEl.current.value}&category=${categoryEl.current.value}` without params
hey bro i am 14year old boy i love to watch your videos and i've learned many much from you. I request you to please create a seperate video on how to posts using markdown. I'ld love if u create that........
If you loop through an array how the array index cannot be unique? Besides you can always run your own increment. Date should not be used in this case.
ReactJs is cool, it dominates US job markets, but I think Svelte will surpass React sooner or later, because Mr. Rich Harris, the creator Of Svelte, make Svelte a much better development tool / language / tech, and it is so easy to learn and get started/acquainted and is much powerful than ReactJS. Mr. Rich Harris apparently knows programming better than Facebook, I am sure people will love Svelte and fully embrace it pretty soon, It is time for ReactJs to take a rest / step aside !!!
There is no difference between all these frameworks which are basically inconvenient backend style templating tools with manual data binding and inline js code.
I don't understand what you mean when you say "I'm destructing that all the way up here." It would be better if you just use props or else explain what you are doing better.
It would have been far less confusing if where you set your useState you had a different name for the current state than 'flashcards' because when you write flashcards = {flashcards} we don't know which side of the equation is what. Same when you do the same thing in passing props to the flashcard component.
those extensions that make coding faster, like rfc creating the code, are not good for beginners... beginners need to type as much as they can because they need to memorize things BUT lets be honest, these video are just entertainment and advertisement for your courses.. who really wants to learn goes to the computer and types npx create-react-app and starts playing around
@@aammssaamm I took your very helpful advice and looked up few links , his way comes up in most of them its either that or using regex or jquery. Do you have a better solution or should i keep reading documentaion maybe im missing something www.w3resource.com/javascript-exercises/javascript-string-exercise-35.php javascriptkit.com/script/script2/removehtml.shtml stackoverflow.com/questions/822452/strip-html-from-text-javascript
