So here's some updates on progress I've made with the plugin system. The way I'm going about it is seeing what are my needs and then figuring out how a plugin could do this. Once I think through that, I can add that to the plugin surface. So right now the plugin surface, or as I call it -> the controller is very messy... but I think over time it will clean itself out. So here goes...

Render Cycle

The first thing to get absorbed into the plugin system was individual block renderers. I started off with... turning all the render blocks into a plugin. I made a repository (an array) for rendererers and whenever a block is being rendered it will check through the renderer repo and find the first one the matches the match statement.

Hooks

Wee wooo

Then I added hooks! added a hook for markdown:link.

if hook returns handled = true, then that can be used as the markdown link. this made the feature where — if there is a link to a block, it becomes a button that you can click and focus the block on canvas — be possible to be turned into a plugin!

How it works:

Preview blocks when there's an are.na block link

Next plugin I added: for when there is a link to an are.na block instead of making it a button, it should get the block and create an inline preview. Specifically added this cause this is how my feed is structured. Only text blocks get published and links to other media blocks get resolved and inlined.

Uses the same markdown:link hook

And then uses a new markdown:after-rendered hook to asynchronously fetch if needed and replace.

This is how it looks....

And then....

I added bunch of fun plugins!

NON DESTRUCTIVE PDF ANNOTATIONS!

Drag and drop for files!!!

jpeg, jpg, png, gif, mp3, mp4, and pdf

Subtitle / transcripts on video

Whenever there is a parseable srt content in the description show them as subtitles and also have the possibility to mount a transcript panel to scroll through and stuff

Video annotations

essentially just timestamps, but can copy text with timestamp when transcript is available

Group list layout

• sticky

• auto order

• size based on first block

Pin Blocks

Cut/paste Blocks from region to region

Come a long way since I last posted on this feed. This was also the first time I started out the design in figma and then later implemented it in html/css. There's still some refining to do in terms of UI I think, I'm not totally happy with it.

BUT. I think it looks great and works really well and I'm happy it's almost done :)

I'm thinking for this one I'm going to embed a tutorial as a startup sequence for users loggin in for the first time. I don't usually do this but I think I should start caring more about UX and Usability.

Connected it to Are.na so images can be hosted there. Also Are.na's new API lets you store key value pairs on blocks as metadata. Using this to store socket data on the block.

In this scenario the mechanisms of the [node based] will still stay the same, but instead of connecting wires to reference another node or creating a flow of data, it would be location references. Same as spreadsheets, eg. e4, b8.

When a node is dragged from a position to another, it will also update all its references to its new location.

The components width will be set in -> cols and rows. This component is 3 cols and 4 rows, etc. The values in pixels will be a dependant value on the sum of the rows and cols. The rows + cols can be resized and that would change the pixel size of the components that exist on that axis.

Node connections (lines) can be optional. If references are known, connections can be automatically drawn on demand if connections need to be visualized.

The address of a component will be the top-left cell. A cursor will be implemented that traverses the spreadsheet, when it lands on a components top-left cell, the component is current active component. When a component is active, it receives key presses and can incorporate that to edits its data/ui.

To multi select, move, rename, delete, etc. Create an action queue, review, edit and execute.

~ thanks to → issue ~ weeewooo!

It's still pretty buggy and I don't know how exactly should the content of this website translate to the RSS.

For instance should I leave the videos and images in? I don't know... right now I just embed the entire post as CDATA (which allows you to embed html in the description) but some readers render the posts with video funny... so I added a style tag that limits the width of the video to 500px.

Anyways...

Feed Link

Will be posting some updates on whats been happening over the past two months because I wanna document it here.

Till then, here's a compiled video of all the books I've been making using the publication tools:

Things to add here...

• fold typeface

• physarium book

• edge printing on paragraph stepper and edgeprinted book

• Wood setup

• wood setup at home

• video with all the stuff

connected it to this typesetting tool that leaks words as the textboxes are moved around. The residue generates the quad trees.

Print out long strips of paper with measurements

Fold into letterform

Unfold

Enter fold lines into an interface

TADA!

Functions work now! This was a funky exercise to figure out how to make work. But they work now!

A function declaration node will follow all the nodes it connects to till it finds a return node . Then it will create a virtual system for all the tracked nodes and export it as a function closure. Whenever this function is applied, it will just use that function and see what data flows into the return node and just return that data.

Text updates when you change it :)

Here is how the variables work.

And you can still position stuff

What I think I need to work on now is making all the nodes visually different than one another so the navigability is easier and you can find what needs to be found.

I need to add a sidebar/property editor also, just so each node can expose more data that its tiny UI can show.

And finally searching through nodes and finding them in someway?

I will be posting on instagram, and I've mentioned some thoughts about that before over . But finally what I've finally come to decide is to post monthly, so first week of every month, a recap of the previous month. And instead of fitting media to Instagram constraints, I will be posting screenshots and screen-recordings from elsewhere on the web. As if to say, "If you want the full picture get out of Instagram, look at stuff outside the platform". I would obviously prefer not to engage with it at all, but I feel like I need some exposure for my work on that platform, and without which I may struggle to find work. But I'm not sure if this is true, but again I would rather err on the safer side.

Anyways. My primary posting would be here on the feed, and for those interested can subscribe to the RSS.

physarum - Sage Jenson

So I implemented a basic low res version for it

Made it so it renders ascii chars instead of circles

Then constrained it into the walls of a letterform. The sad part now is that the organic forms that the physarium produces is completely hidden now since it doesn't have the room to move...

But the motion is pretty interesting and organic.

So I just iterated a bunch on this

And I think this form looks awesome!

Going to turn this into a screen print :)

Pointy thing

Made a Bone folder

Also made this bandsaw box!!

This is one way I'm thinking of setting it up. This may take place as a group looking thing. The group will be a node that outputs a function and can be referenced as a variable. The group will have inputPoint and an OutputPoint. The group will construct a function composition by traversing the nodes contained within it.

It will take the nodes that connect to inputPoint and follow them to each node that is connected to its ouput. While traversing, construct a transform function map. Once you make it to the output node, close the transform function map and export it as a function closure.

Some things to consider -> When does the function get recompiled ? (when any nodes inside emit a change... in a sense all of these nodes output to the group. Being in a group means to ouptut into it...)

So generally things are going well. Currently the base of the whole reactive graph system is working well. And adding new nodes isn't as hard, although in the future will definitely be moving transformation functions and render into one file and export as an object type thing.

Anyways, so whats to do now...

• a list view for selecting which node to add, maybe like a command bar. Maybe can also use this to compose node trees, for instance perhaps I can type—
  
  slider > *2 > {x} to make a slider thats connected to a multiplier node which exports as an x property. Instead of making 3 separate nodes and setting their values. So I get speed of typing code by the graphic qualities of canvas :)

• Make connections selectable, some easy way to mass manipulate them also... change which side it connects and stuff.

• I think its time to add deletability... delete nodes and edges

• copy multiple nodes with their edges intact. So if for instance I copy a set of nodes, then it will also go through all edges and see if the edges are connections between one of the selected nodes (crucial to check that both from and to are selected) and if they are, copy those edges with whatever new id you give the nodes.

• make a connection mode so can easily connect nodes, right now connecting nodes, you have to aim for the edge point (which also often interferes with draggin) and then connect to another edgepoint where you have to aim and stuff again, I wanna be able to just draw a line from one node to another and just connect that.

Revamped the graph system so its simpler to make new nodes and manage them. Still contemplating the validation system I have... that might need some clean up.

Also contemplating adding reverse flow. So basically the circle that gets outputted on canvas could be overlaid with a bounding box that I could drag.

Updates from the drag can be sent back in a reverse flow, essentially I would inform the circle element which in turn has to find what supplied it the x and y coordinates and propogate the flow to them.

This eventually would turn into sort of like a constraint solver. For instance what if the source leads to an add node or something. Which value do you propagate the change to? Maybe someway to choose? choose at random? ask / specify / lock icon... wont flow back unless all locks in place... if not will error out or smth?

Is this worth putting in the time and effort into?

Makes it easier to follow relationships :)

Normal lines

Proof of concept:

Essentially will have views for drawable tings, so here is a circle for example.

This circle can be connected to a canvas and it will show the circle.

Messages can be sent to the circle, such as x = 50, or y = 150, etc to set the properties of the circle by connecting nodes to the Circle obj.

when circle changes it propagates this change to the canvas.

Also taking a screen printing class... so expect to see more of this stuff!

I moved with ideas of extreme configurability and the awesomeness of Org mode. But I never got into Org mode (because of inferior portability compared to markdown) and I didn't get that into configuring emacs. I did some playing around, wrote some Elisp functions and had a nice workflow going, but I think its been pretty clunky. Things work but they're not as lighweight as nvim I'd say. And I don't think thats what emacs is, 'Emacs is an OS'.

So yeah, I think for now, I want something lighter. But I've learned a lot of things from emacs in terms of interaction possibilities. How you navigate through your system, how to spawn and keep servers running etc.

I think I wanna bring those things back and use TMUX + Nvim combo to sort of rebuild that. Keeping focus on simplicity so things are easy to change.

And maybe at some point I can also look at fennel, and possibly write my config in that?

We'll see...

Update Number #2 (JAN 17): since having started this post, I began a refactor and now the refactor is done... Fully rewrote the repo to make it more easier to work with and better organised and performance wise much better + added undo redo by using a reversible store object.

Whatup gang! Some updates on the Are.na Canvas. I'm making this entry on the canvas itself, I've been using it daily over the past few days and its been pretty great. Everything works and feels smooth!

Let me outline all the stuff I added!

Jump to blocks

Drag interactions

Making Block

Making Group

Multiselect

// add video

Editing blocks

Double click to edit...

Groups

Moving groups around

~~Open and edit in Obsidian~~

Had this in first version, haven't added back after refactor.

Copy paste blocks

// add video.

Copy a block link, and cmd+v will just add that block as a connection to the channel and show it on the canvas

Some other things~~

I added colors as well, and did some work on the ui

I made this space as the home page for the canvas, so new users can find all the info they need to use it. Not sure if it's sufficient and easy to navigate(?)

I still need to implement groups, and making new blocks. Maybe make the canvas infinite, like it can start of at a certain size and grow based on farthest away block or something.

Added mini-map and light mode

The minimap doesn't respond to scale change because the math for that is going to be funky and I dont care enough at this moment for that type of accuracy so I'm just going to let that be.

Found some other really cool Are.na Canvases

From this block ->

@Justin Liang's Hypercanvas https://www.are.na/block/40838466 Also their friend @Connie ⛱'s link dump project.

@Nico Chilla linked @fergarram ☠︎ ’s previous project suna.garden which sent me on a rabbit hole to @fergrarram's journal which I thought was really cool cause it reminded me of this space :) And also rediscovered unit.software~~ got super excited, tried to use it a little but ultimately gave up because I couldn't find resources to guide me through its mechanics...