Notes from building a browser-based code editor
Write-ups of real problems met while building CodX Editor — browser security headers, running Node.js in a tab, live collaboration, and the awkward trade-offs that come with all three. Written as they were solved, not summarised afterwards.
Socket.IO Acknowledgements Have No Timeout
If the reply never arrives, your callback never runs. The promise behind the button never settles, and the button stays dead until the page is reloaded.
Read the articleOne CSS Rule for the Editor Broke Every Other Textarea
A syntax-highlighted editor needs an invisible textarea stretched over a coloured layer. Written as a bare element selector, that rule reaches every textarea you ever add.
Read the articleflex-basis: 100% Means Height in a Column
flex: 1 1 100% sets a size along the main axis. Change flex-direction to column and the main axis is vertical, so your 100% width silently becomes 100% height.
Read the articleLive Sessions Should Not Die With the Process
Every share link breaking on deploy is a design decision, not a fact of life. The trick is knowing which half of a session is worth writing down.
Read the articleOne Missing CSS Line Cut Our Blog In Half
Without box-sizing: border-box, a header at width 100% with padding is wider than the screen. With overflow-x hidden, it does not scroll. It just silently cuts the text off.
Read the articleNever Hand the Room to a Stranger When the Host Drops
Promoting a random participant when the host disconnects sounds like resilience. It is a way to give a stranger kick, ban and permission controls over a room they just walked into.
Read the articleThe Console Kept Showing Errors You Had Already Fixed
Assigning srcdoc does not kill the old document straight away. It can still throw after the console has been cleared, so a working program shows a stale error above its own correct output.
Read the articleHosting Other People's Code Without Wrecking Your Own Site
Letting anyone publish a project to your domain means search engines, and advertising networks, judge their pages as yours. The four decisions behind the publish route.
Read the articleYour Static Server Is Probably Serving Your Source Code
One ordinary line of Express publishes your entire project — server.js, package-lock.json, your log files. How to check in five seconds, and why the obvious options are not access control.
Read the articleGoogle Overruled My Canonical Tag
Search Console said my canonical was codxeditor.com and Google's was www.codxeditor.com. A canonical tag is only a signal — here is the redirect that settled it.
Read the articleWhy Running Node.js in the Browser Stopped Our Ads From Loading
CodX Editor runs Node.js inside the browser tab. Doing that requires two security headers, and those same headers silently block every advert on the site.
Read the articleThe vh Unit Is Lying to You on Mobile
Sizing anything to 100vh on a phone quietly hides part of it behind the browser toolbar. Here is what dvh does differently, and the 38 places one editor had to change.
Read the articleAbout this log
CodX Editor is a browser-based code editor built and maintained by one developer. Everything written here comes out of building and running it: a bug that took a day to understand, a browser behaviour that is not documented anywhere obvious, a decision that turned out to be wrong.
The posts are written after the problem is solved, while the details are still fresh, and they include the code that fixed it. Where something was fixed the wrong way first, that is described too — the wrong turn is usually the useful part.
What gets written about
- Browser platform behaviour — security headers, viewport units, iframe sandboxing, and the ways they interact badly with each other.
- Running Node.js in a tab — what WebContainer makes possible, and the limits that come with it.
- Live collaboration — shared editing, host handover, and permissions between people in the same room.
- Shipping as one person — the compromises that come with no team and no QA.
No newsletter, and no tracking beyond a count of how many times a published link is opened. If something here saves you an afternoon, that is the whole point.