tandemcode

2.0.0 • Public • Published

very simple online playground for visually creating web applications

GOALS:

  • UX similar to regular browsers
    • right click inspect element (source code though)
  • built extensions API for windows to hook into
  • developing a language that is optimial for visual development, not hand writing.
    • visual first, hand-writing second.
  • appeal to developers first
    • similar to chrome inspector for now - evolve later on
  • low barrier to entry. Install text editor dev tools, start using with project

COMPONENTS TO START VISUAL DEV QUICKLY:

  • CSS Inspector*
  • HTML inspector* (show source code)
  • rich visual tools for CSS properties
    • color picker
    • convert measurements (px -> %)
  • stage tools
    • measuring between elements
    • [ ]
  • Move style properties to CSS declaration

ROADMAP:

  • 1-1 map of code + visual representation. I.e: CSS & HTML Inspector
  • Augment CSS & HTML inspector
  • ...
  • DSL for visual programming
  • 100% visually editable

LITMUS:

  • rebuild mesh.js.org (as async await iterator library)
  • rebuild paperclip.js.org
  • test against 4k styles

COOL TO HAVE:

  • SVG editing

IMMEDIATE:

  • finish synthetic browser
  • synthetic browser tests
  • connect with browser sync
  • properly reload CSS
  • cleanup socket.io connections

NON-GOALS:

  • to cover 100% of UI design & development

  • to attract people with no knowledge of HTML & CSS.

  • POLISH:

  • preview mode for windows (opens window in iframe)

  • zoom indicator

  • measurement tooling

  • highlight elements based on text cursor position

  • copy + paste elements

  • meta keywords for controlling UI

    • <meta name="no-tools" />
    • <meta name="device=ios5" /> for ios tool overlay
    • <meta name="background-task" /> hides window from stage
  • AWS lambda for rendering

  • persisting to local storage needs to reload sibling windows

  • POST needs to reload sibling windows (not self)

  • [ ]

  • COMPATIBILITY CHECKLIST:

  • works with browser sync

  • works with webpack HMR

  • UX

  • notify user when window doesn't have source maps

    • possibly dim or overlay elements that are not editable
    • use popdown
  • identify non-editable elements

CLEANUP:

  • remove file caching. Source of truth needs to be a dev server
  • file cache namespaced to workspace
  • normalize urls - http://site.com/ -> http://site.com
  • use old DOM rendering code
  • synthetic window timers
  • keep measurements when resizing
  • XHR handler for server

BUGS:

MVP:

  • save workspace online

After validating:

  • remote renderer

Readme

Keywords

none

Package Sidebar

Install

npm i tandemcode

Weekly Downloads

1

Version

2.0.0

License

ISC

Last publish

Collaborators

  • crcn