domino 2

a tool for collaging thoughts

motivation

what domino is trying to do and why i created it

technical details

information about how domino works and how it was made

source code

the source code and build scripts for domino are available on github

contact

you can contact me on twitter, on mastodon, or by email

how to use

how to make your own boards with domino

future

ideas and intentions for future versions of domino
domino is a tool for collaging fragmentary thoughts and ideas without the friction of assembling them into linear writing
the format of domino sits somewhere between a mine map, a board of post-it notes, and a collage
the name "domino" comes from being reminded of the game of dominoes where tiles with matching sides are chained together
the idea is to transcribe a stream of thoughts into cards, and then arrange them spatially to imply connections and structure

domino 1

check out the first iteration of domino for more context
i get so much spam that i don't necessarily find every email that's sent to me.. poke me on twitter if you mail and i miss it
domino is written in html/css/javascript and released as a single standalone html file
the domino build process uses pug to generate the html including all the javascript and css files inline
the source is intended to be human "readable" but right now it's very poorly written and uncommented becasuse it's a prototype
i prefer to make tools using plain javascript without minification and bundling, and using few third party dependencies
i want the tool to be "user serviceable", at least in the sense that the final page isn't obfuscated and making your own changes is straight forward
in domino 1, exported boards were also a fully functional copy of the domino editor, i have abandoned this for now
it's not difficult to resurrect this in the future, but i think it was confusing to people trying to just read domino boards
once again i'm using my "low tech template" for the build process
i will experiment with this idea in other projects probably. you can read about a related prototype in the link below
i don't have any plans to support editing on mobile. i'm not sure it could be made a pleasant experience anyway
let me know if you ever edited using domino 1 on mobile, and if you're interested in editing with domino 2 on mobile
if you find any bugs or have any feedback about usability or features, please let me know
font importer (upload or via google fonts)
more control over image embedding/compression
more sophisticated loading so cards can show up before all the images have fully downloaded

navigating

moving around and reading a domino board
click and drag the background to pan freely around the board
a domino board is a collection of hand placed cards
a card may have a row of icons that can be clicked on to either jump somewhere else in the board or open another website
you can zoom in and out with the mouse wheel (or pinching on touchscreen)

editing cards

creating, manipulating, and editing cards in the board

editing board

editing board title and style, and the styles shared by all cards
click and drag to move cards around
click and drag the bottom right corner of a card to resize it
click without dragging to select/deselect a card
double-click a card to open the editor sidebar with it selected, or double click empty space to create and edit a new card
when dragging cards, all selected cards are moved at once
you can also open the editor sidebar using the 🔨 icon at the bottom left of the screen
the styles tab of the 🔨 sidebar allows you to edit the styles shared between all cards

saving

new, save, load, import, export
the 💾 button at the bottom right of the screen saves the board to your browser's internal storage
to change to another board open the switch board section on the board tab of the 🔨 sidebar
you can export your board to a standalone web page (.html file) using the options in the publish section of the board tab of the 🔨 sidebar
if you have a neocities account and you trust my publisher app, there is a feature to publish directly to neocities
use the dropdown to select the style to edit, and the checkboxes to decide which elements will be controlled by the style
there's also a box for writing custom css that will apply to cards with that style
you will need to poke around at the example styles and the card structure to make use of this feature
the board title and background color can be changed on the board tab of the 🔨 sidebar
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
with only one card selected, you can click link in the selection tab to add a line link to another card
with multiple cards selected, you can click group to join them with a background box
use middle click drag to pan without accidentally dragging cards
hold ctrl when beginning to drag cards to drag copies of the cards intead
you can also press ctrl+s at any time to save
you can press the delete key to delete everything you have selected
💾
📂