Skip to content

Instantly share code, notes, and snippets.

@tomhodgins
Created October 19, 2017 03:43
Show Gist options
  • Save tomhodgins/19440e60b5ef029a4b96fc514432271a to your computer and use it in GitHub Desktop.
Save tomhodgins/19440e60b5ef029a4b96fc514432271a to your computer and use it in GitHub Desktop.

Design Environment

Environment Principles

  • All documents are objects with a type (text, image, audio, video, hypertext)
  • You can extend the types of documents (think like making document templates)
  • You can nest, transclude, or link objects inside other objects
  • Your environment has a concept of a 'current selection' of 0-∞ objects
  • The context of your environment UI is always relative to the type(s) and number of objects held in the 'current selection' at all times
  • There are no 'programs' or applications, everything is system-wide. If you teach the system to read and record JPEG, every image-modifying method has the ability to make use of that.

UI

  • There are 4 distinct UI areas: visual preview (interactive), code view (view/edit properties and data), toolbars (filled with methods and functions relevant to the selected object(s)), and a text-based command prompt
  • Visual Preview: is a GUI window with a graphical representation of the file
  • Code View: is either a text-editor allowing you to manually edit any part of the file or else a specialized key/value UI for the current object
  • Toolbars: are panels that display tools, functions, methods, and actions that can be performed on the object(s) in the current selection
  • Command Prompt: allows you to select, script, and operate on the objects in the current selection
  • Though your default toolbar updates with the current selection, you can make toolbars persist, they will just show as disabled if their action doesn't apply to the selection

Mental Experiment

Typesetting a resume

You could create a new hypertext document that contains text as well as image objects.

An empty white window appears on your desktop. The code editor is empty because the file has no data, and functions and tools relevant to editing hypertext documents appear in your toolbars.

You could click the 'add text object' button, but instead you type add text into the command prompt.

After you submit the command to add a new text object to your empty resume document, you notice the text object show up in your visual editor, because it is selected when it's created, your toolbar switches to tools related to text input and typesetting. In your code editor you see the data representing the text object appear.

You begin typing code directly into the file in the visual editor.

As you type, the code editor stays perfectly in sync.

You switch to the code editor and copy/paste the object a few times.

After you are done pasting the object the visual editor updates showing multiple text objects in your document

You select the resume document itself and then in the command prompt you type select all text objects

In your visual editor and code editor, the text objects from your document appear selected. In your toolbars functions related to having multiple text objects appear like visual object alignment in the document, merging multiple objects into one, etc.

You click on the align items tool in your toolbar and then when the objects appear aligned in your visual editor you click and drag them to the location on your page where you want them to appear in the visual editor.

Finally, now that you have the text boxes and layout how you want them you fill them out with your content. You are able to style the objects differently and your document is complete :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment