Maybe I'm mis-understanding what you're looking for. Here's HTML live preview in VSCode

https://www.youtube.com/watch?v=4-VhMGFe_1k

Using this plugin

https://marketplace.visualstudio.com/items?itemName=daiyy.quick-html-previewer

I agree with you the Chrome DevTools are better than the VSC Debugger. I don't know what if any features of the Chrome DevTools can't be written via chrome extensions (since there are extensions that add features to the devtools)

AFAIK most of the DevTools are written in JavaScript using the extension API so it might be possible for VSCode to apply them to an HTML page, though I suspect rather than copy the tools they should just let the HTML plugin expose the existing devtools for its preview.

You might also argue that trying to stuff too many things into one place might make it jack of all trades master of none. It might be better to talk to the Chrome team and see if they can come up with an API to tell you embed your editor of choice in the devtools? I don't know. At some point it feels like the 2 things are going to conflict with each other. VSC is a code editor, not a JavaScript editor, so I'd prefer it not hard code a JavaScript debugger and then in turn need a C++ debugger, C# debugger, a Swift debugger, a Rust debugger, etc... At the same time, of course I want better tools period.

A few maybe relevant links.

You can run the devtools on the devtools (debug the debugger)

https://docs.google.com/document/d/1WNF-KqRSzPLUUfZqQG5AFeU_Ll8TfWYcJasa_XGf7ro/edit#

Only pointing that out just to show that the devtools are written in JavaScript so if you feel like contributing you can either copy them into an vscode plugin, or add/propose changes to chrome to help get the solution you're looking for.

I think the confusion was just because I mentioned live browser for previewing HTML, but that’s just one use case. The real goal is of course better dev tool integration when making entire web apps.

I’m not sure the line between JavaScript editor and code editor matters much. VS Code is Chromium, the dev tools are already bundled in to it. And of course any special dev tools could (and probably should) be extensions, just like everything else. The VS Code app just doesn’t expose things like Chromium web views and the dev tools to extension developers, if they did, I’m guessing this work would already be well underway.

The assumption I’m challenging is whether the dev tools should be part of the IDE or the browser (I don’t see the benefit of VS Code in Chrome, I want my dev tools next to the source code). I think they’d be more useful as part of the IDE (via extensions), because they’d have more seamless interaction with the source files. This is how Xcode (the other dev environment I know well) works, and I’d imagine most IDEs for non-web programming language. The whole browser dev tools concept seems to be a historical artifact of there not having been a better place to put these tools before, but with VS Code where it is today is argue that’s a better place now.

(Running a web server process in the terminal is another similar historical artifact. VS Code has a decent solution to this with launch.json files.)

Regarding “I don't know what if any features of the Chrome DevTools can't be written via chrome extensions (since there are extensions that add features to the devtools)”. The idea is to be able to jump to the relevant files in your editor from the dev tools, like easily edit the source HTML for a tag. You can do this today with Workspaces but it’s so many steps to setup because the dev tools are so far from the IDE that it’s not worth it to use. It’s UX problems being solved here, not what’s technically possible.

We’ll there goes VS Code's last weakness... https://blogs.windows.com/msedgedev/2020/10/01/microsoft-edge-tools-vscode/

Jack Rusher Finally got around to look at this in the detail it deserves. Lots of overlap with my own https://github.com/activepapers/activepapers-pharo project in spirit, but a completely different substrate and technology stack. More in a comment on Sam's post!

I read the introduction blogpost for ActivePapers and attempted to watch the screencast, but the link is dead! Do you have the video hosted anywhere now? 🙂

It looks like http://peervideo.net is dead. The video for part 2 is also hosted on Vimeo (https://vimeo.com/339361206). I'll have to check my laptop for a copy of the first part!

Jack Rusher By way of review, I did play with Obsidian for a bit. I liked the simplicity, and thought it was well put together. The link map is cute, though I'm not sure I would use it for anything useful - perhaps it would help find related things if I had a very big database. I imported my personal vimwiki into it, and it went without a hitch.

The splitting works well, and you can customize all the hotkeys. There are lots of settings, but they get out of the way and the interface is pretty clean.

The only real problem I have with it is that I can't use Vim keystrokes to edit the text. But in general it seems like a really nice tool for building a markdown database.

Chris Maughan As someone with a significant investment in his editor, I understand. Using a tool that fights my muscle memory is not very compelling. Thanks for the capsule review!

My trouble is I want it all:

• A markdown database I can trivially edit in Vim.
• A single command deploy of my database to a website for browsing
• The ability to make a slide presentation as a markdown file (Obsidian does this, though I haven't got around to trying it yet)
• The ability to live-code at any point in the text and see the output inline with controls for users to play with (Jupyter, etc.)That last part is the hard part, obviously. Your link this morning showing off the Dynamic notebook had me excited for sure....

When this is done well, it is great:

https://thebookofshaders.com/02/

Chris Maughan This is a similar set of requirements to what I was looking for which makes me wonder whether you've considered the "role your own with an existing text editor" approach I mentioned above? I suspect you have, and are really just looking for something that has those features built-in, but I'd be curious to hear your reasons explicitly.

Here's how I solve your requirements (so far, with gaps that illustrate the issues with this approach, but I'm playing the long game...):

• This is of course solved, the whole approach is based on this. Text files not a db though, which in my opinion is better.

• I haven't built this yet, except in my head, but the idea is just to make a script that either deploys via GitHub Pages, or a simply static site using Pug JS's built-in Markdown support.

• There are a few solutions for doing this. I use Deckset (https://www.deckset.com/) (Mac only).

• For the last one, I used to be really excited about this, but I've drifted from it for various reasons that aren't really important (mainly just it seems like anything I'd use this for, I can probably do faster in Excel). If I were trying to do this today though, I'd use VS Code, which has some interesting looking notebook support, although I've never tried it. For the record, one of the main goals for my app Repla (https://repla.app/plugins/live-coding/) is to do this type of thing in a text editor agnostic way. But like I've said I've drifted a bit from the idea.

Also found this one from July:

https://www.youtube.com/watch?v=x4brxbvAqGU

that “drag a bar out to create a new view of that aggregate data” moment at 1:50 is nerd goosebumps for me

The one that was amazing for me was hovering over the links to show the dependencies. That kind of hinting for provenance is amazingly powerful I felt.

Eve like partition of codebases into multisets with each set having a projectional view of its own or the ability to write a shader to visualize the underlying computational structure depending on the user type / context would be a powerful feature to leverage in an IDE.

An interesting challenge here is that information will get lost between presentations. It would be nice to allow people to write code in their preferred presentation, but perhaps prompt them to add information that will aid automatic generation of other presentations. The temp variable in the example stuck out to me for this.

I don't think "high-level" and "functions of functions of functions" are synonymous as the post suggests. In an array language, element-wise subtraction of two columns as "income - expenses" doesn't add any significant cognitive load.

https://youtu.be/L8VpCCIxuME short overview of project + projectional editor

data dependency resolution: https://youtu.be/hs42TeFytEk

project website: http://www.infra-structure.org/

http://www.christopherkhall.com/Hall17Infra.pdf introductory paper, tags: projectional editing, purely functional data structures, controlled effects

Oh, looks like there's finally some more content than just the dissertation. A while ago it looked pretty dead. Thanks for sharing!

Interesting stuff! Not sure the project is still alive though. The download page is disappointing and according to his Linkedin profile, Christopher Khal doesn't seem to still work on it.

i’m gonna try emailing him and/or implementing it

Implementing it? Great! Please share your progress here if you follow that path! 🙂

i’m gathering printer paper for the thesis. will definitely share

Seems relatively well thought out as these things go. God knows lots of people need an (extra) income source these days, and the best kind of under-the-api [1] job is one your computer can do for you.

[1] https://www.forbes.com/sites/anthonykosner/2015/02/04/google-cabs-and-uber-bots-will-challenge-jobs-below-the-api

took ’em 8 years, but they finally got a big part of Light Table in 🙂

just saw - this is so ass. any way to contact the wikia team?