How can a code editor be useful for new learners and seasoned students of the craft? How can an editor adapt to optimize for both mobile screens and desktops? Do the answers to the first question overlap with the second?
New learners <-- --> Seasoned Students
Mobile Makers <-- --> Creators on Laptops
I’m working on the design of an editor with the team at Webmaker. It will be a web-based editor for making pages and apps for the web. This tool must be useful for people learning to make web things for the first time to fit Webmaker’s mission. Ideally, it will remain useful for people with more experience as well.
Yesterday, I was thinking about CSS and how different people might like to apply style to their creations. I drafted a few mockups to illustrate some ideas on how to cut across the use cases.
Style Themes <-- --> Handcrafted CSS
On one end of the spectrum, CSS themes are quick and easy. On the other end, freely written CSS is very powerful. Does this align with beginners and experts? Not exactly.
This tool would surface all the elements, classes, and ids used on page. A user would tap one of them and then tap an attribute on the right to modify. The form below would give them quick access to set the values. Typing is minimized, but flexibility is not.
An editor that can adapt to the skill, screen, and preferences of the user could be a very interesting tool for makers.