updated_at: 5 Mar, Wed, 03:37 posted_on: 5 Mar, Wed, 03:25
Editor Updates
Url file loading
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()
updated_at: 3 Mar, Mon, 16:03 posted_on: 3 Mar, Mon, 16:03
The feed is also a workshop.
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".
updated_at: 3 Mar, Mon, 16:01 posted_on: 3 Mar, Mon, 16:01
Do a post about the potluck website I made.
A decently written blog post.
Notes.
updated_at: 3 Mar, Mon, 15:45 posted_on: 3 Mar, Mon, 15:35
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.
updated_at: 3 Mar, Mon, 15:47 posted_on: 1 Mar, Sat, 14:40
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.
1 March 2025
updated_at: 1 Mar, Sat, 04:40 posted_on: 1 Mar, Sat, 03:07
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.
28 February 2025
updated_at: 1 Mar, Sat, 02:35 posted_on: 1 Mar, Sat, 02:33
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 .
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.
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.
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.
Last Slider impl was a little loose, so I got the gears to be tighter together. They're still a little loose than what I would have wanted it to be but they work pretty well.
using one hand for one direction, and vice versa — if for instance this was controlling animation, one hand would be reverse and the other would be forward...
Thinking about creating extension control gears to control speed...
I started the crafting interpreters book yesterday. It takes you through writing a compiler+interpreter in first Java and then C. I'm going to be following the book with Typescript and Zig.
Wrote the implementation of a REPL and a Lexer yesterday that reads through the text and produces a Token stream:
Why am I doing this
Firstly to just learn, this stuff is super intriguing and I wanna know what pipeline my javascript travels through before its executed on what they call bare metal. I've also been wanting to learn about memory management for a while now. Last time this lead me to Rust, which was probably the wrong choice for the job, considering it obsfucates memory management through complex borrow checker patterns, though I did learn a lot in working in rust and started appreciating type systems. Anyways, I'm hoping crafting interpreters will help me learn the memory management stuff through using either C or Zig (whatever I end up using)
The other — I've realised I am very much interested in this domain (programming languages) of CS. Although I'm not interested in optimizations and speed and all of that stuff (mostly cause that stuff is better left to the CS majors) I think where my intersection — being a graphic designer and also having this interest in CS — will benefit me is visual programming languages.
When we think of Visual programming languages, we think scratch. The issue with most VPLs is that they are just a stylization over already existing Programming languages. Though what would a deterministic (or not) language look if the primitives were based on space and geometry. What would the Lexing -> AST -> Runtime chain look if syntax was based on interaction of lexemes in space.
Why (i think) people don't experiment with this
Mostly because any programming language when being created is thought as text, so writing, testing, running and all the tooling an resources are made with this base assumption. Programs are files that are edited with text editors.
Node based programming again is a frontend that outputs the same.
Though we can have this sort of spatial programming if we have a graphical editor... and then diagnostics would be based on where objects are in space rather than textual syntax.
[ps the vocabulary is lacking above, will come back to edit and refine this post] [TODO: add a WIP/Draft renderer for the feed]
Yesterday I fell into a rabbit hole. I was going through permacomputing writings and there was a section on programming which linked to a this blog and Zig was second to Assembly in terms of Syscalls and size. If yousee the benchmarks:
Zig seems to have a very close mapping to Assembly, that means very little abstraction. But it seems (from a general scan of people writing and talking about it (blogs, youtube)) that it is a very enjoyable writing experience. Of course, it is a low level language, so that means you have to do manual memory allocation and such. I've always wanted to try making a project where I need to do manual memory allocation, just to learn about it so I was intrigued at this point.
Also the minimal abstraction thing reminded me of Devin from 100rabbits' talk:
This was a very influential talk for me and since then I've been thinking of computation very differently. I won't go into that talk right now, that's for another day but reader should definitely check this out.
Anyways,
So in my rabbit hole I watched a talk by the author of the language
I really appreciated the ethical orientation towards language design. Even the foundation that is run is non-profit and sustainable in the are.na way, i.e. seek to raise enough money only to sustain a practice and not to extract capital from it. And overall orientation towards corporation and authors own personal actions mirroring this position.
I think I'm encouraged to learn this language -> so I can also learn about lower level computing protocols and paradigms. Not sure what the scope of this exploration will be, will know more once I start tinkering with the language to see how hard/easy it is. To start of I'm thinking of making either:
A version of the static site generator that produces this website (currently written in javascript)
An api client for are.na --> (and depending how that goes maybe writing another offline proxy server for are.na in Zig) --> and if that works then a CLI client for using offline are.na data to make media pipes (querying and giving parameters for outputing files (can be piped with opencv, fffmpeg, pdf, etc to make media object for design))
As some of you may know I have been working on an Editor. I won't go in depth to explain exactly what it is, but essentially its a code editor that outputs to an iframe, and the idea is to be able to make it modular and interoperable and be able to edit the editor itself as you work in it.
I've been struggling to figure out what to name it, but after careful consideration, I have decided to name it editor.
I think the non specificity of what kind of editor it is, is interesting. It can be a code editor, but it can also be a photo editor or a vector editor or a json editor or a pdf editor, etc etc.
Also thinking, as a designer I think it would be cool if we could have a basic engine kind of thing for graphics and then we could just design our own tools. For instance game (engines) design tools are just gui based programming that make it super easy to make a game. So what if we had software that were graphic engines in this sense and you tinker it to fit your needs project to project and have some barebones versions for getting started as well.
Also recently found out about How Observable Runs / Observable | Observable . This is essentially what I'm thinking, but a little more barebones. Locally hostable, easily implementable, barebones that are more collection of concepts rather than a monolithic implementation. And the components I make in those would be the thing to put effort into.
| | | | The tool or the algorithm isn't the thing that does the drawing, the tool/algorithm changes are perception of the thing we are drawing and the process of drawing it. --Future Sketches Speaker Series: Baku Hashimoto
| | | Anyways, it's going to be called Editor. (the other options were buffalo and clockwork, ik not the best ideas...)
Calendar systems are so intriguing and complicated. I've been researching these different systems with all these different variations and the crux of most of them have been:
Using celestial bodies (Sun, Moon and Constellations) as markers of time
In order to anticipate and predict seasons for festivals and agriculture (festivals heavily linked to agriculture).
Reconciling the inconsistencies between orbitting of moon around earth and earth around sun. (Leap years and such)
Its also really cool to see how advanced these time keeping technologies were so early on (2000 years ago they had an accurate estimate of earths orbit time down to seconds).
Anyways working on a publication + poster + (maybe an animation) with omama putting together all of these ideas.
Report from the calendar reform committee set up in india in 1957 trying to study all the variations of calendars in use across the country and try to reconcile them for a calendar that can take into consideration all the festivals while also work with the gregorian calendar used for civic purposes. The report is quite interesting and written in a very approachable language.
From the shallow reading that I did, it seems they wanted to have the two calendars, gregorian for civic purposes and the vikram samvat for festivals and cultural purposes. They proposed a change for the gregorian callendar where all years would start on the same weekday making it "better for mankind" for instance see chapter: world calendar,
There is also a whole section on reconcilling different dating systems and making sense of different timekeeping technologies so they can be put on a linear scale for archaeological purposes.
Overall lost of interesting things to think about, especially interested in understanding how multiple viewpoints on timekeeping can coexist. Also just thinking of celestial bodies as a timekeepers is a reframing of time I hadn't thought of even when it's literally out there.
yes, mechanical and digital. Digital being all computation is binary, the values in the gears cannot be between 1 and 2 or 7 and 8 etc, it can only be 1 or 2. The discrete nature makes it digital. He talks about certainty mechanisms like using ball bearings and springs to make sure there are no middle values, etc.
I've been intrigued by gears and other forms of tangible mechanics and I'm hoping to start exploring these for my Independent study this semester.
Laser cutting at the Xfab studio is super cheap so I'm thinking just finding wooden scraps and cutting out various sizes of gears so I can modular-ly use them and make interchangeble mechanics that can be used with arduino/computer-vision/sound.
I did a first attempt at making a wooden slider today:
The gears are offset farther than ideal so the actual slider is very loose. Though this was the first time I used the laser cutters, so I'm quite happy I got something out of it. Now just gotta commit to this, iterate and build on top of this and see where it goes.
Added Link styles to feed & added a no javascript checkbox! -> that changes size of the divs.
Its a trick where you can use checkbox :checked psuedoclass and use the sibling selector : ~ to select neighbouring elements and change their css. No js required :)
input:checked~div {
max-width: 1200px;
}
Also added a clause to not render any blocks named draft, so I can have private "unpublished" text blocks in the channel.
Wanted to do this as an exercise+practice in static site generation. Maybe even an opportunity to make a static site generator.
While making this, as you can see above on the right, I highlighted comments all of which start with SECTION mark. Wondering about a Neovim shortcut which will jumpstart a regex search : /SECTION: Which will easily allow me to jump to a section in the file. Thinking of single file programs with essentially really good navigation.
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?
