An unusual approach to Front end Coding

Hacker News

Share card

An unusual approach to Front end Coding

TL;DR: A Vi-like Editor but for editing webpages. https://vivpage.com Why: Long ago I had the idea of typing simple commands (something like h1 hello world!) into the browser and have it materialize elements as I do so. So I quickly prototyped it in a couple days and found it really fast and fun to make website this way, especially if you're already proficient with the CSS framework you use, e.g in Bootstrap, just pull out a Jumbotron div for a quick hero section. With Vi as my inspiration, I then went to town with React non-stop for 3-4 weeks, and that effort culminated in Vivpage. So what can Vivpage do? 1. WYSIWYG: that's right, your changes are rendered right away. 2. Parallel Editing: you can edit (or apply an operation to) multiple elements or text at the same time. 3. Versatile Multi-Selection and Navigation: many different shortcut keys for jumping to a specific element or multi-selecting elements, e.g from current to last sibling, or all of children), and also CSS selector based selection (so you can select only elements that match div.col, for example). 4. CSS Framework Support: built-in support for Bootstrap, Bulma, Materialize, Tailwind, and UIkit, but you can also use any other framework you desire. 5. Element Splitting/Joining: Split an element along a specific child, or merge multiple elements (e.g divs) together. 6. Undo/Redo: BOY this is a tough one, but one that I think is really necessary. I made it really easy to go back and forth along the undo history (without using Redux, no less!) 7. More features to come: search/replace, reusable template library, cloud syncing (right now it saves to localStorage), integration with github/drive. Like Vi, it's not the fluffy and guide your hand tool that most expect - but I believe once you master even the basics of it, you can become really productive. Criticisms and feedback are welcome!