There are a few goals and motivations for this application:
- Provide tooling that enables you to most of your application development visually, and without needing to write code.
- Provide tooling that augments the development of web applications, not abstract it.
- Speed up development process with a more intuitive approach to building applications.
- Increase understanding of CSS & HTML with built-in documentation, suggestions, and tools (like intellisense).
- Speed up development cycles by including design, prototyping, and development into one application.
- Reduce barrier for non-coders who want to create applications.
- Provide CSS tooling for animations, 3D, and other features that are hard to code by hand.
- Include all cross-browser testing, development, and debugging into one application.
Your contribution to this project will help fund for the development of tooling that focuses on these goals.
Who's this application intended for?
- Professional web developers
- Teams that want to reduce the barrier for contributing to the development of web applications
- Collaboration (see features below) would enable developers to invite designers, and other teammates to co-develop web applications.
- Tandem is extensible, meaning that teams can add features that fit their application needs (kind of like a CMS), and team workflow.
- Tandem will be integratabtle with other systems such as Jenkins (for visual QA testing), Optimizely (for a/b testing), and Launch darkly (for feature flagging).
- Individuals who are starting to learn how to code.
- Companies that want to integrate Tandem into their own product.
- Tandem's core is modular enough to be usable in other visual editing contexts.
Current top features of Tandem:
- Writes code in HTML, CSS, Sass, TypeScript, and JSX.
- Integrates with Atom, and Visual Studio Code.
- Visual tools for media queries, filters, gradients, fonts, css flexbox, measuring, dragging items, responsive testing, and more.
- Multiple live previews allows you to see how code changes affect your application in different states, pages, and sizes.
- Hot swapping HTML & CSS ensures that your visual editing is fluid, and never interrupted.
- Interact with previews like a normal web browser.
- Interactions (clicks, keyboard inputs) synchronize with other previews in different device sizes, and browser rendering engines.
Planned for Tandem:
Below are the current top features planned for Tandem.
- More native rendering engines (Firefox, Safari, iOS, Android) will enable you to do all of you visual testing directly within Tandem. You will also be able to interact with these previews visually, and launch multiple browsers in parallel to design & debug HTML & CSS as you're coding.
- Collaborative editing will enable you to share your workspace with designers, and other team members who can work with you to create pixel perfect applications.
- More developer tools & documentations to help make it easier for developers to create their own Tandem extensions to fit their own, or team workflow.
- Community extensions page that enables people to customize Tandem.
- Test builder would enable you to visually create Selenium tests directly within Tandem.
- Intellisense-like suggestions for HTML & CSS would help you pick the right HTML & CSS features for your application.
- Animations tools with an iMovie-like interface for intuitively creating motion in your application.
- 3D tooling
- Dependency graph strategies for Webpack, SystemJS, and Rollup, would speed up preview hot swapping, and unlock live reloads as you're writing code in your text editor.
And many other features in in the pipeline. Cast vote here for features you'd like to see.