The colors on the sliders are misleading because it isn't really reading the color, but the grayscale values, so in theory all of them can be grayscale and it would still work.
TODO: abrupt progression instead of smooth gradient. Gradients with stops and what not.
Questions: Can I encode bezier animations in color?
I implemented saving and outputing html files and a mechanism to traverse levels. Just have to make it a little smoother to work. Right now its very jaggedy, mostly because I don't know how it should work.
The current implementation outputs the html file with a SOURCE_PATH variable which can be used to navigate back to the source files. I think this is the way to do it.
Also re-watched Nada Amin's Programming should eat itself talk which I think got the cogs turning for me about metaprogramming. Though the talk mostly goes over my head.
I wanna implement something like this for my workflow.
The way I'm thinking is it would be a ui where I can see the screenshots (or can custom generate covers based on params) and those would be the branches of the code. Git branches sound very interesting in concept, but anytime I think of using them and consider merging and all of that stuff, I feel like its going to be not worth using because it will just escalate complexity and things are prone to go wrong. So if I could implement something based on git branches, I'll figure out how it works and then maybe I can use it... and maybe think of how I can engage in process differently using this branching sort of structure to iterate in different directions....
Like there can be multiple ways of implementing something... and whatever seems promising you work on it in parallel.
The goal today was to get LSP/intellisense/autcomplete working. So I can get tooling over the code. Tsserver is a package maintained by microsoft that lets you create a virtual filesystem in the browser and get diagnostics, completions, linting, refernce trees and basically tooling over your code. I had seen this was possible before but it is a whole task to set this up. So I started by getting this tsserver connected to the editor. This took much longer than I would have wanted it to.
Reconciling blocks, character positioning
The main issue with connecting the tsserver to the editor was reconciling the splitting of the file. The main function of the editor is to give you components that add up to the file. So a file is split up into smaller self contained chunks. This works all and good till the tsserver returns a {from, to} position for the diagnostics.
Each codemirror instance can work with from and to position only relative to its own state and has no way of knowing what had come before or after it. The way I fixed it was adding start property in each blocks state which the parent of the block manages. So everytime you save a file it increments and assigns a start value to each block.
There was also a whole thing about managing a live version of the file seperate than the file that is saved for iframe to update (can't update iframe at every key press, but need autcomplete response at each key press, so have to maintain two versions..)
Autocomplete + Linting/Diagnostics
So anyways got all of that working and here is a demo of getting a reference to functions defined in another block. And when you mistype it, or don't pass in expected value -> it shows you errors.
I did some writing in it and honestly its pretty helpful and works pretty well, feels quite robust, not as good as neovim obviously but pretty great for a web editor.
Editor Reference passing
Finally, this is something I will work further on tomorrow... but a sneak peak:
I am able to pass the reference of Editor to the iframe, so the code running in the iframe is able to edit the editor. The below video will make it more clear, the editor outputs an iframe with buttons that onclick change the positioning of the editor.
File saves itself
The next one is going to be, creating a file in the editor that will output an interface and have functionality that will read the editor's state and save the state to a file locally using the fs functionality implemented on the local server. So will be writing a js script that will save itself using itself.
Basically made his own touch designer but writes assembly + gui components? Pretty rad. Also references Uxn and the 100 rabbits stack. Dance stuff in the beginning was interesting too, how he thinks of composing through directed graph functions .
So I got the editor to work on a canvas and its been fun using it since then. I was busy playing around and working with the editor so haven't spent much time working on the editor. Anyways, just some stuff I've recorded over the past week.
Editor in editor
The whole idea that made me make this editor was having the editor be able to edit itself at multiple levels. Partly goes back to ideas in this video, titled: "programming should eat itself"
An instance of editor runs and instance of editor that is running in an editor
Progression of editors
Here's a quick overview of progression of editors, nothing comprehensive, just loading the files of each editor.
Editing syntax highlighting
A video of changing css for the (2)editor's syntax highlighting, from (1)editor while (2)editor outputs parts of conditional design manifesto .
JSON viewer + code navigator
A JSON viewer that renders the current code's navigation tree. The tsserver running for the editor responds a json blob with the whole navigation tree, and each item has a start position in it, the json viewer checks if a key is named 'start' and value is a number, and if it is, it will send a message to the editor to focus on the given position.
Here is the speedrun:
Here is the final functional demo
Will be working on this further. Will make it embedded in the editor so it can be searchable and one can easily navigate to symbols in the editor.
Also need to implement a scroll to active block position for the canvas. Will also look into the canvas library I'm using I think it has a zoom to rectangle function, so could think of saving and navigating to rectangles and saving these. And then I can have a save and navigate to certain views.
Also Thinking about how the navigation tree can be used for metaprogramming for javascript/typescript. For instance you can query the editor for current tree. Have a matcher, say match the global scope Editor. Then for each of Editor's methods do something. And that can be outputed and added to script. Or it could also be used to templativize making a display component for a class. Like if you make a display component for Editor, you could have a live feed of its internals as the editor runs. And if you have templativizer, it could generate render methods and match statements and generate a function which you can manually fill in. Hopefully this is verbose enough to let me remember this idea.
I thinking looking into the architecture of theatre.js would be really nice because it seems to have very similar workflows as I have been working with the editor, namely these:
Editor edits state
State can be used independently
making editors for state, and letting them interoperate
live edit data and see output
While this is three.js specific I can use these qualities to just use in anything js essentially with the editor.
what kind of things do you notice making your own tools. When you're building entireity of functionality and tweaking each single detail, what kind of thoughts cross by:
Eg. Oh I really wanna be able to click this block to be active which would be a note on me expecting -> (mouse and keyboard to work in coherence)
The thing come out of this would be 1. just an archive of ui/ux research kind of notes, but framed as my personal inclinations and how I incorporate them + 2.it would also be documentation for anyone else to learn and lastly the presentation of this documentation would be awesome to do in the editor, as -> editor views.
State -> which also includes the display (panzoom position included) + movement locked or something.
^ | _____ As files/websites.
Also I need to figure out bundling because that will show me how to export out webpages out of the editor (in the form of packages.) (resolve and push dependencies). This will also help me backend on are.na or something.
Other examples
Autosave. Some kind of confirmation when something is saved. Need for feeling safe about your files, these past few weeks me working in the editor, it always feels so precarious. I also want to implement some sort of versioning because I am also scared of overwritting my files. So yeah, maybe another solution is using swp files and having a history of swp files. So its cache-versioing that you can just clear if you feel so or smth.
Git I wonder if I could use git in a way where it tracks an entire folder, but since all my interactions with this folder happens through a node server, maybe each fs call can make a commit for any file change and then this commit can have a certain grammar, and I can query the commit tree for a single file's history that I can track.
If I port the feed to the editor, I can workshop blog pages. For instance I can start with combining feed posts, or writing one long feed post and exporting it as a webpage. And I can edit and refine the blocks on feed.a-p.space. Sanchari used a term called "soft-studio" I'm wondering if I can think of Feed as a "soft-studio".
Until now if you wanted to load a file in the editor, you used the loader-object. Where you would enter the file path and press enter.
I added url based file loading today. It would have been super easy if the editor had a base url. Currently I have multiple versions of the editor as files that I can open and run them through /fs-run/* endpoint.
Anyways, so if I want to run editor five I go to: (url)/fs-run/editor/five.json
for six: (url)/fs-run/editor/six.json
for canvas: (url)/fs-run/editor/canvas-editor.json
and so on.
Today I added:
Which basically says open utils/fileviewer using editor/canvas-editor
This one says open editor/canvas-editor source file using editor/canvas-editor. (editor-editor)
Design Refresh
Added an Autofocus
Whenever an element gets active (either using mouse or arrow keys[h, j, k, l]) the editor gets its x, y, w, h and zooms in on that region. This is useful when using only keyboard and don't wanna switch to mouse, the view will automatically follow the cursor. And also works with mouse :)
Component write Component
Just added a component that will run the code you give it and render it in the component itself. So a mini sandbox of sorts. Will be useful to make GUI widgets - inputs, renderers while working on things...
This will, should have access to both states... will run in editor runtime but will have access to iframe runtime through m()
A components that takes the top level function and treats it like a render function for a render div in the component.
Have to add support to have tsserver work in this... maybe will have it take the source file as context...
Autofocus
On click autofocus the block in frame
And also the ability to transition it smoothly. Smooth transition doesn't make it snap to size..., will probably make snapping it's own thing have smooth move and instant move... maybe just need a config object
