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