phuocng / mirror-a-text-area

Enhancing user experience through text area mirroring

Hey, I'm Phuoc Nguyen! 👋

I'm a software engineer from Vietnam 🇻🇳.

In my free time, I enjoy playing football ⚽ with my co-workers and Nintendo games 🎮 with my kids.

I also take care of my Border Collie 🐕. Here's a little secret: my zodiac sign is the dog.

I hope you find useful things in this digital space 🚀.

Collections 🚀

Check out this list of series that cover various topics in front-end development. They're incredibly useful for both learning and your day-to-day work, just like they are for me.

Best of all, they're all free and open to contributions. If you find them helpful, please consider giving them a GitHub star 😍. Your support is greatly appreciated!

• 1 LOC - GitHub 6667⭐

My top JavaScript utilities, in just One Line of Code!

• Cross Browser - GitHub 26⭐

Common ways to solve cross-browser compatibility problems

• CSS Animation - GitHub 74⭐

Awesome CSS animations: examples of stunning animations without external libraries

• CSS Layout - GitHub 7908⭐

A collection of popular CSS layouts and patterns that you can use right away

• Front-end Tips - GitHub 586⭐

Front-End development mastery: simple tips, tricks, and best practices

• HTML DOM - GitHub 6007⭐

Mastering DOM manipulation with vanilla JavaScript

• this vs that - GitHub 1431⭐

Understanding the difference between ˍˍˍ and ˍˍˍ in front-end development

In-depth series 🧪

Are you a front-end engineer looking to take your skills to the next level? Then you're in luck! I'm excited to present to you our in-depth series covering advanced techniques and patterns in front-end development.

Our series is designed to provide you with real-life examples that you can use for your applications. We understand that learning can be a daunting task, which is why we've curated our content to be both engaging and informative. You won't find any boring material here!

In this series, we'll cover a range of topics, including advanced CSS, JavaScript, as well as popular front-end libraries. Our goal is to help you become a more well-rounded and skilled front-end developer.

It's important to follow the posts in the correct order, starting from the first one and working your way to the last. There are some important techniques introduced in between that you won't want to miss.

• Mirror a text area - GitHub 11⭐

Enhancing user experience through text area mirroring

• Master of React ref - GitHub 14⭐

Your complete guide to mastering the use of "ref" in React

• Drag and drop in React - GitHub 8⭐

Master the art of drag and drop in React

Questions? 🙋

Do you have any questions about front-end development that you'd like to learn more about? Shoot me a message on Twitter or assign me a new issue.

I've got a long list of upcoming posts, but I want to make sure I'm covering the topics that you're most interested in. Let's learn together! Sharing knowledge is the best way to grow in this field 🥷.

Contact

• Twitter
• GitHub

mirror-a-text-area's Issues

Empty lines at the bottom of the scrolled area break the mirroring

(Hi. Thank you for putting all these interesting articles together.)
I believe there's an issue with the mirroring from the first article, and this issue find its way in the next parts as well.
Although you're setting the scrollTop of the mirrored div to the scrollTop of the textarea on scroll, it's still going out of sync for some reasons once one or more empty new lines are entered at the bottom of the textarea.
Here's a screenshot of the issue:

I just typed a few more "you\n\n"s so that the area gets a scrollbar, and then I scrolled up a bit.
I don't know why this is happening yet, but it's obviously not expected.
I've encountered and reproduced this in my own code too, when I was trying your first article (just doing the mirroring). I just used a red color (any color other than transparent works as well) instead of transparent, and it's in sync on scroll, however, as soon as I entered a newline at the last line, it went out of sync.

Displayed line numbers don't remain aligned with their corresponding text on mobile

These are screenshots of the issue:

I guess the root of this issue is related to the other issue I opened here: #11 Because this is again happening towards the end of the textarea. I.e., if I start from top and go towards the bottom, line numbers remain aligned for most of the path, however, as soon as it gets to the last lines, the line numbers don't move up with the scrolled lines anymore (which is in my opinion, very similar to what happened in the last issue I opened.)