[Go Make Things] The code complexity journey

By rahmat hidayat

Friday, December 6, 2024

​ One of the responses I got to yesterday's article about how I built my own code sandbox Web Component was a bit of awe at the simple truck I used to handle live syntax highlighting. A lot of developers struggle with building simple solutions. But my code rarely starts off simple. It usually starts off as a hot mess of "wow it's finally working!", and takes a few rounds of revisions to get something simple, clean, and maintainable. Today, I wanted to talk about that journey! Let's dig in… A recap If you didn't watch the whole thing (it's long, I don't blame you!), the rendered output is a <pre> element and <textarea> element rendered into a parent <div> and positioned on top of each other using some CSS. Here's a simplified version… <div class="sandbox-editor"> <pre class="sandbox-mirror"></pre> <textarea class="sandbox-text"></textarea> </div> .sandbox-editor { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; column-gap: 0; row-gap: 0; } .sandbox-text, .sandbox-mirror { grid-area: 1 / 1 / 2 / 2; margin-bottom: 0; min-height: 15em; } The <pre> and <textarea> elements are also styled to look exactly like each other: same font family, same padding, same font size, and so on. The only difference between the two is that the <textarea> is given a transparent text-color and background, but with a visible cursor. .sandbox-text { background-color: transparent; border: none; color: transparent; caret-color: #272727 } Whenever the user types in the <textarea>, the .value of that field is mirrored into the <pre> element, and a script is run to add syntax highlighting. That highlighted text "shows through" the transparent <textarea> text, making it look like the text their typing is being highlighted. Because everything is the same size and font, all of the characters line up, they can copy/paste intuitively, and so on. It works really well, but it was the last of many attempts I made at this! How other tools handle this I started by researching how other code sandbox tools handle this. Sandpack Josh Comeau's courses use Sandpack, a React-based library for embedding CodeSandbox editors. Sandpack uses a <div> with the [contenteditable="true"] attribute on it, and highlights the text in real time as the user types. I tried this approach initially, but found it janky as hell and prone to lots of weird edge case bugs. Obviously, Sandpack has all of those ironed out. But addressing them meant throwing a lot more JavaScript at the problem than I wanted to. It feel overengineered and antithetical to what I teach. CodePen Like my approach, CodePen uses a <textarea> element, and mirrors it into a <pre> element. Unlike my approach, they visually hide the <textarea>. This works wonderfully… but again adds a ton of complexity and extra JavaScript. The blinking cursor? It's a <span> element that has its visibility toggled on and off of it with JavaScript and inline CSS in an endless loop to make it blink. Because the <pre> element is the only one that's visible, any time the user clicks on it, JavaScript has to shift focus back into the <textarea> where the typing actually happens. It's brilliant engineering! But there's just so much than can go wrong! How I landed on my approach In a phrase: trial-and-error! I started building out by using [contenteditable="true"]. Keeping the cursor in the right place, avoiding jank, and copy/pasting properly proved annoying difficult. I found CodePen's approach solved a lot of those problems, but introduced some new ones. The whole thing that got me to "just overlap them" started because I didn't want to have to code my own blinking cursor when the browser just gives you that for free with a <textarea> element. And I didn't want to constantly manage focus, either. I don't think I came up with the idea myself. I'm pretty sure I stumbled upon a throwaway StackOverflow comment that suggested it as an idea in response to someone else's question. But I'll be damned if I could find the source again! I initially didn't even both with positioning or hiding things. I started off with… Can I mirror this text in another element and highlight that in real time? If you find yourself struggling with complexity, it's good to remind yourself that you don't need to just magically have the answers. I watch a lot of engineering and science YouTube (not software engineering, real engineering). One thing they all have in common is they try a lot of shit before they land on something that works. Idea => Experiment => Fail => Learn => Repeat. Every time you fail, you learn something new. You can use what you learn to try a different approach, and learn some more. Cheers, Chris ​ Want to share this with others or read it later? View it in a browser.​ ​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+