𝕮
@chrisshank23
Followers
1,152
Following
284
Media
337
Statuses
3,558
Explore trending content on Musk Viewer
Edmundo
• 263422 Tweets
CHARLOTTE X TIKTOKLIVE99
• 228971 Tweets
#Narin
• 226687 Tweets
ANILPIN WE ARE THE ONE
• 194506 Tweets
#ปิ่นภักดิ์EP6
• 186729 Tweets
#光る君へ
• 108845 Tweets
KIM TAEHYUNG
• 54227 Tweets
プロジェクトKV
• 53756 Tweets
Zapatero
• 50873 Tweets
東京ドーム
• 39376 Tweets
İdam
• 30738 Tweets
Kostic
• 29906 Tweets
ポルノグラフィティ
• 27650 Tweets
SEVENTEEN AT LOLLAPALOOZA
• 21604 Tweets
NFL Sunday
• 15407 Tweets
ماهر الجازي
• 15325 Tweets
源氏物語
• 15153 Tweets
#降り積もれ孤独な死よ
• 14706 Tweets
LESSONS FROM BIU
• 13654 Tweets
Pinned Tweet
A personal update ✨:
I'll be on sabbatical this year! 😄 Here are some of the areas in computing I'll be to exploring this year:
3
2
52
Stopped using the HTML drag and drop API, now using pointer events with `setPointerCapture()` and `elementFromPoint()`. In a much better place now!
Figuring out how to retarget arrows to other HTML elements. Currently trying out the HTML drag and drop API, but it might not be ideal...
3
3
48
5
103
1K
“Unit: A General Purpose Visual Programming Language and Environment built with a primary focus on Developer Experience.”
17
156
1K
This is all of the custom CSS you currently have to write in order to animate an object along an arrow in `quiver`!
11
78
821
Perfect, declarative arrows ⤴
@steveruizok
@JungleSilicon
Random idea i’ve had for a while is to wrap perfect arrows in a custom element + resize observer for declarative HTML arrows
0
0
12
9
40
496
This was written about 25 years ago... it's continues to be the prevalent way that user interfaces are built and as argued in this book likely the source of many bugs and edge cases that exist today.
7
21
202
A little script that creates arrows between URI fragments on a web page ⤵
@OrionReedOne
One topology to scrape are any URI fragments on a web page and create arrows between the anchor and the element it’s referencing. Particularly interesting when combined with your web canvas explorations!
1
0
3
6
11
158
Touching up the Xanadu rendering. If the link targets an element with `display: inline` then the associated text will be outlines accordingly. Also the entire link is now a single `clip-path` so it should look smoother.
3
8
128
Oh no 🙈
7
5
112
If only diagrams like these were directly executable instead of relegated as a comment 🥲
9
2
91
Seamless transitions between different representations of statecharts 🤯
5
1
87
Introducing the Little Languages Reading Club, a monthly/bi-monthly club where we collect set of papers/essays on a given topic and dive in.
2
12
71
End goal is to achieve the original mockups for Xanadu
Touching up the Xanadu rendering. If the link targets an element with `display: inline` then the associated text will be outlines accordingly. Also the entire link is now a single `clip-path` so it should look smoother.
3
8
128
3
5
73
“ Composability: Designing a Visual Programming Language” by John Austin (2024)
0
10
68
What if visual connection could be declaratively expressed in HTML? What if there was a tiny toolkit that enabled all kinds of connection/arrows to be built? What if arrows were not trapped in canvases as they historically have been?
That is what I'm exploring with `quiver`!
1
7
66
Propagator model/flow-based programming operating on HTML elements and it's all authored in HTML.
starting to figure out how to use the DOM as a substrate for live programming that would work on any website ✨
3
0
17
1
6
63
"InterState: A Language and Environment for Expressing Interface Behavior" by Oney, Myers, and Brandt (2014)
A live programming environment for defining user interfaces using state machines and data model constraints!
4
8
64
The scope of what I called "perfect-arrow" has changed since I first started working on it! This project is now called `quiver` and it's tagline is:
"Your quiver of declarative arrows for the web. ⤵"
0
3
61
“Seeing the Forest for the Trees: Hierarchical Display of Hypertext Structure” by Feiner (1988)
2
4
62
“Achieving Self-Sustainability in Interactive Graphical Programming Systems” by Joel Jakubovic (2024)
Love this framing of finding “notational freedom”!
2
6
58
Attachable arrows have been on web for a while now so on the surface there is nothing that new here. But the key insight is that arrows have been trapped in canvases b/c their auto layout has been tightly coupled to the dragging/resizing events of the elements they attach to.
3
5
53
purple 💊
State machines as language (
@StateML_org
)
2
4
54
“Edge Compression Techniques for Visualization of Dense Directed Graphs” by Dwyer et al. (2013)
1
5
49
Figuring out how to retarget arrows to other HTML elements. Currently trying out the HTML drag and drop API, but it might not be ideal...
3
3
48
Let's compare the "noise" of that different textual formats impose on authoring statecharts, particularly JSON, SCXML, and
@StateML_org
's DSL. Here is a comparison between JSON and StateML:
5
8
45
Started prototyping hyperedges with
@OrionReedOne
.
Undirected hyperedges are more or less synonymous with sets. The one below is using rendered using a convex hull algorithm:
2
6
45
I loved these fading scroll animations that
@azlenelza
made in this demo. If both parts of a link aren't on a screen, then they shouldn't be as prominent. I recreated the effect using the new scroll-driven animations coming to browsers soon.
2
2
42
Working on a recording I've been wanting to do for a long time! Any related questions/topics you'll be interested in me covering?
4
5
37
`perfect-arrow` is now on NPM!
🚧 Beware though it's still in active development... expect bugs and breaking changes until it hits 1.0.0.
Check out a demo here:
1
2
36
Just published part one of a series figuring out what "behavioral paradigm for building web UIs" looks like. I walk through a demo exploring patterns that decouple where events originate in the UI from where they are handled by behavior. The patterns are:
1
2
37
This is a custom element that wraps around
@steveruizok
's `perfect-arrow` library and
@samthor
's `viz-observer` library (to observe element movement and resizing).
Early repo here:
5
3
34
1/ Component frameworks like React, Vue, ect. are moving towards aggressively co-locating behavior within components. For new developers, simple apps, and low-level components this is great! Let’s try to unpack where this tends to fall apart and what we should do about it! 🧵
2
5
32
My ramblings on architecting a statechart engine for
@StateML_org
Working on a recording I've been wanting to do for a long time! Any related questions/topics you'll be interested in me covering?
4
5
37
2
3
31
“CrossCode: Multi-level Visualization of Program Execution”
Principles seem to to be rooted in multi-modality and progressive disclosure!
2
4
31
okay I may have just cataloged all of the papers/talks/essays I've posted on twitter over the overs and put them into one repo.
80 papers, 80 links to essays/talks
6
2
27
Added View Transition API to a POC of a potential
@StateML_org
visualizer! Took 10 LOC to add, a little polish on the animations would make this legit.
4
4
28
I guess one of the things I’m exploring is how to leverage the DOM (via custom elements) as MVC widgets, which is close to the original conceptions of MVC/smalltalk.
was thinking of react, state-view separation, mvc, etc. and came to this:
thanks
@magnemg
for this gem! "mvc widget" is super useful mental modal.
2
1
15
0
4
27
All quotes are from
1
1
25
"Facts about State Machines" is such a good essay!
0
3
25
Would anyone be interested in the story of how statecharts have influenced client-side routing? I’ve been doing some research on it lately, the connection is quite interesting!
9
0
26
Been noodling with
@ncthbrt
on a new primitive for defining routes using tagged template literals! It's composable, requires no regex, encodes/decodes data to/from the route, has great type-inference, and is less than 500 bytes compressed.
4
0
26
"Visual representation of patterns for deriving statecharts from flow expressions"
1
1
25
Exploring how to progressively enhancing anchors into Xanadu links! Also improved the text wrapping algorithm.
Touching up the Xanadu rendering. If the link targets an element with `display: inline` then the associated text will be outlines accordingly. Also the entire link is now a single `clip-path` so it should look smoother.
3
8
128
0
0
24
This diagram gets a little into the weeds. To take a step back, the premise of these explorations is that with the current component paradigm has helped us have a consistent view layer, but we lose an holistic understanding of the system’s behavior.
2
3
24
TIL you can detect element movement, resizing and appearance using IntersectionObserver and some neat tricks
1
3
22
“You’ve reached computer programming nirvana. Your journey has led you down many paths, including believing that God wrote the universe in LISP, but now the truth is clear in your mind: every problem can be solved by writing one more compiler.”
0
2
21
Noodling on the "Swiss cheese model for software robustness"!
The point is that leveraging varying forms of static analysis and formal methods prevents the existence of entire classes of bugs before you start testing.
0
2
22
Let's visualize what Matt is exploring here:
Brewing an idea for a blogpost on Statechart Driven Development.
The problem:
1. Task estimation is broken
2. User stories are brittle and hard to change
3. Discovery/refinement of implicit states must be a first-class part of any project
7
6
84
1
4
22
Working on a new video on trying to visually articulate the value proposition of state machines. Here is a teaser:
3
3
22
Could this be a foundation for visualizing and interacting with version control in a canvas?
2
2
21
Perf testing arrows ⤵️
JS execution time and memory consumption is surprisingly okay for this type of "observer an element move". Plus there's already a lot of low-hanging fruit to optimize 🍊
1
1
21
Extended
@tobyshooters
self-modifying html page using the File System Access API and IndexDB. Once a save file is chosen we persist the file handler across sessions. (it only works in chromium browsers atm, but it can be progressively enhanced)
A first attempt—a self-modifying html page with inlined base64 images. Since it's just raw html, MacOS is able to preview it with quicklook. Since the images are base64, it's all contained in a single file.
8
7
70
2
2
23
One of the last parts of this conversation was how visual programming representations can best make use of 2D space. To me, this is broadly one of the unresolved problems in the space. I don't think or want a strict framework, but I can see some broad guidelines going a long way.
In this part we discuss: paradigm shifts in programming tools, the viability of visual programming for general purpose programming, …usability possibilities that have not been explored for visual programming systems…”
0
0
9
2
1
21
I want to see a community re-emerge around little languages. Mainly, how can we make it easier to build small, multi-modal notations that embody a specific paradigm? With a focus on notations that can executed across many computing environments and be composed with each other.
2
1
19
“Finite-State Machines - All models are wrong but this one is useful” by Raj Saxena & Chris Ford
2
4
20
"Could No-Code Be Code? Toward a No-Code Programming Language for Citizen Developers" by Avishahar-Zeira & Lorenz (2023)
2
1
19
I talked about stuff at a thing!
My "slides" are here:
A lightning talk by
@chrisshank23
Towards a topological interchange format for executable notations, hypertext, and spatial canvases:
a vision of an interchange format rooted in describing topological relationships
1
2
6
5
0
20
An *intention* is a semantically meaningful description of a raw user event. Declaratively mapping raw events to intentions in HTML and using event delegation opens up new tradeoffs for component and application architectures. Here is a simple example:
3
1
19
I’ve noticed that there seem to be 3 different concerns for the URL:
- The URL as a resource
- The URL as an action
- The URL as the state of an app
2
0
19
Oh wow CSS `attr()` will eventually be able to be used on any css property 👀
```html
<div length="5"></div>
<style>
div {
width: attr(length em, 0px);
}
</style>
```
3
2
19
Fun fact, we can use event delegation with custom elements without having to deal with cleaning up event listeners or dealing with memory leaks using this pattern:
2
5
31
What other types of arrows/connection would you be interested to see? ⤵️
These are already in the works:
- Curved Arrows
- Orthogonal Edges
- Xanadu Links
- Hyperedges
@chrisshank23
If you’re taking requests I’ve been thinking about a “HyperArrow” which is a (directed or undirected) hyperedge, 1-N in, 1-N out…
Wondering what the generic approach to this is without lots of complex routing logic…
3
0
5
3
3
17
starting to figure out how to use the DOM as a substrate for live programming that would work on any website ✨
3
0
17
One *possible* convergent evolution between biology and software is selective message-passing. Particularly the parallels between cells and communicating state machines!
3
2
17
If you want to use statecharts as a tool to reveal complexity then I highly recommend naming/externalizing actions, guards, ect. The point is to *ease* into implementing behavior not trying comprehend all of the behavior at once.
1
1
17
Built a tiny router on top of this new routing primitive.
- 1.3kb compressed (I haven't started to code golf yet 😈)
- 100% type-safe
- Isomorphic (supports SSR)
- Decoupled from any particular component framework or state mangamgent library
- URLs are opaque
1
2
17
Just started working on hyperedges... I have an idea for how the API should look, but haven't implemented the rendering algorithm yet
Source:
Demo:
0
1
17
@sliminality
To me what differentiates statecharts is that it is both a *visual* mental model and a data structure. As a mental model they make you draw a map of your logic as opposed to handwritten directions. It fundamentally inverts how we usually build out UIs.
1
4
16
I wonder if progressive typography could be used as a proxy for these evergreen ratings?
Seedling -> scribbly notes
Budding -> default markdown style
Evergreen -> beautifully set and illustrated like “Timeful Texts” ()
Despite popularising the horticultural metaphor of Seedling > Budding > Evergreen ratings on digital garden notes, I wish there were other varieties out there.
Baking and carpentry metaphors would work just as well. Notes could be raw, half-baked, or roasted.
16
6
118
2
4
16
Been thinking about how programming languages are higher-dimensional entities and their textual representation is a 2D projection. 🤔 Maybe a visual metaphor for this is anamorphic art! 🎨
1
3
15
Maybe the
@_ohmjs
editor will be available in VSCode in the future. 👀
(still some work to get there!)
2
0
16
A statechart is the bouncer of events, the guardian of the datamodel, and the composer of side-effects.
0
2
15
Part 2 of exploring a behavioral paradigm for web UIs - What is the bottom-up approach?
Just published part one of a series figuring out what "behavioral paradigm for building web UIs" looks like. I walk through a demo exploring patterns that decouple where events originate in the UI from where they are handled by behavior. The patterns are:
1
2
37
1
3
15
The first principles of these canvas interactions are the ability to define topological relationships (e.g. connectedness) between entities and to annotation those relationships.
1
2
15
Hidden in terminology of statecharts is a metaphor based on chemistry. I've been thinking about how we can expand on this metaphor to better foster understanding of these concepts!
4
0
15
Oh look the principles behind higraphs were reinvented 30 years later 🤪
“Edge Compression Techniques for Visualization of Dense Directed Graphs” by Dwyer et al. (2013)
1
5
49
2
1
14
“Searching for Justice in Programming Language Design” by Amy Ko (2023)
(releasing later in the fall)
1
2
14
One example that I am working on right now is a web component for an embeddable
@StateML_org
visualizer. If JavaScript is disabled or fails to load, the browser will fallback to rendering the semantic HTML in the slot.
1
1
14
Wow this is an amazing talk about programming language design rooted in empirical evidence! 🤯
"Evidence-Oriented Programming" by Andreas Stefik
2
2
14
“Log-it: Supporting Programming with Interactive, Contextual, Structured, and Visual Logs” by Jiang, Sun and Xia (2023)
1
3
14
I have been working on a cool side project that is "actorfying" Web APIs so they are easier to integrate into xstate. It's not close to being complete, but I am considering publishing what I have very soon!
2
2
14
A tangent thread is about how spatial canvases come into play. Particularly thinking about
@tldraw
's early vision to provide a platform for other to build spatial canvases...
(Note: I'm not extremely knowledgeable about how spatial canvases are implemented)
One principal I've found helpful is to start by defining topological relationships like connection and containment between different concepts of a VPL. Visual syntax can be derived from those relationships as can textual syntax.
0
0
4
1
1
13
Love this exploration of using color to shrink the distance between modalities! Been exploring similar topics with statecharts via
@StateML_org
.
colors to connect your code, the syntactic form, and the explanation + selectable level of specificity in the explanations and examples!
1
1
15
0
2
13