Are you learning React? Are you interested in Styled Components? If yes||yes, check out my new series, free on YouTube. Else, article.exit(0).
The idea is to isolate dynamic, but simple, components from popular websites and re-created them using React and Styled Components. We are not building a full stack app here and the target length of each series is about 1 hour. So these are easily digestible videos.
To get a better idea of what is up, the GIF below is the first component - the YouTube tag input. It appears when a user is uploading an video and the tags are used to help with search functions or video sorting later on. While most def not the flashiest UI ever created, it does pack a lot of functionality into a small space. What I like is that on first glance the user sees a regular input[type='text'] element. Upon closer inspection there is much more going on. Tags are being saved somewhere. The text input's placeholder only shows up when there are no tags. Commas, and the enter key save a tag. Certain characters and multiple spaces are not allowed in tags. Each tag has a little x that deletes it. Tags are cut off after they get too long. How is all this happening?
Okay. Lets dig a little deeper. One neat feature of the YouTube tags input is how individual tags are deleted. This is done with the backspace key. If any text, not in a tag, is present, backspace functions normally - erasing a single letter at a time. Now if there is no text the backspace key will turn that last tag into selected text. Then of course one more press will erase the entirety of the tag. This is cool because it gives the user a intermediate step in tag deletion without being over the top, like a confirm dialog or something - I mean we are just talking about a tag here. So if you are wondering how to do that...watch the video.
On the other hand, no one is making you do anything. But I will say that trying clone UI features from other websites is a worthwhile practice. Even if you aren't a React person, use your preferred UI library/framework, or even vanilla JavaScript if you are feeling it. I have found that when my mindset is that of a user I don't really think about the code behind the functionality. And when something is easy to use the complexity behind the scenes is overlooked.
Thanks for reading.
Top comments (0)