Skip to content

Instantly share code, notes, and snippets.

View mindrones's full-sized avatar

Luca Bonavita mindrones

View GitHub Profile
@mindrones
mindrones / machine.js
Last active August 7, 2020 16:54
Generated by XState Viz: https://xstate.js.org/viz
Machine({
"id": "search",
"type": "parallel",
"states": {
"Search": {
"id": "Search",
"initial": "Empty",
"states": {
"Empty": {
"id": "Empty",
@mindrones
mindrones / machine.js
Last active August 7, 2020 16:14
Generated by XState Viz: https://xstate.js.org/viz
Machine({
"id": "screen",
"type": "parallel",
"states": {
"Form": {
"id": "Form",
"initial": "Simple",
"on": {
"TAB_CREATED": {
"target": "Form.Simple"
@mindrones
mindrones / .block
Created April 17, 2020 10:48 — forked from mbostock/.block
Multi-Line Voronoi
license: gpl-3.0
@mindrones
mindrones / EU_countries_by_year.yaml
Last active March 17, 2020 17:58
@svizzle/atlas boundaries
'2003':
- AT
- BE
- BG
- CH
- CY
- CZ
- DE
- DK
- EE
@mindrones
mindrones / README.md
Created October 16, 2019 11:57
Svelte docs interlinking
d3-array: true
d3-axis: true
d3-brush: true
d3-chord: true
d3-color: true
d3-contour: true
d3-delaunay: true
d3-dispatch: true
d3-drag: true
d3-dsv: true
@mindrones
mindrones / machine.js
Created July 16, 2019 09:56
Generated by XState Viz: https://xstate.js.org/viz
Machine({
"id": "search",
"type": "parallel",
"states": {
"Search": {
"id": "Search",
"initial": "Empty",
"states": {
"Empty": {
"id": "Empty",
@mindrones
mindrones / machine.js
Created July 16, 2019 09:47
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions

Serialising state and query in a URL

Assuming to describe a web application with a statechart, should we desire to share its state, how can we express it in the URL without relying on a server or hashing the state?

Can we make the current state of the application explicit and possibly user-friendly?

Can we also separate the current state of the app from the query and the actual data? For example: if we share a URL after having interacted with a chart, selecting people aged from 35 to 50 and living in France:

  • the state is selected (as opposed for example to unselectedor idle),
@mindrones
mindrones / App.html
Last active December 6, 2018 19:12
Dropdown
<select on:change="doSomethingWith(event)">
<option value="noerr">Por favor escolha uma opção</option>
<option value="err500" default>500</option>
<option value="err400" default>400</option>
</select>
{#if error}
<p>{error.status}: {error.msg}</p>
{/if}