tandemcode
very simple online playground for visually creating web applications
Last updated 2 years ago by crcn .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install tandemcode 
SYNC missed versions from official npm registry.

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:

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

Current Tags

  • 2.0.0                                ...           latest (2 years ago)

2 Versions

  • 2.0.0                                ...           2 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 3
Last Day 1
Last Week 3
Last Month 3
Dependencies (49)
Dev Dependencies (40)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |