The most up-to-date information about Chuánqí is available at https://chuanqisun.com
Hello world!
>My name is Chuánqí. >I create tools for the curious mind.WORK
I wear multiple hats at work. One as an developer, another as a designer, and increasingly, a third as a Prompt Engineer for LLM. My trans-disciplinary process navigates the product team towards the Goldilocks zone of collaboration, where the needs and constraints from business, users, and technology are in perfect balance. Currently, I lead UX design and frontend development at Microsoft.
HITS
Microsoft’s knowledge base for product decision makers.
Details
HITS is a two-sided network for creators and consumers. I draw inspiration from behavioral economics to design mechanisms that bootstrap the ecosystem. The project also honed my skills on creating and maintaining an enterprise-scale design system that balances internal vs. external consistencies and reconciles historical conventions vs. newly formed interaction patterns.
HITS taught me invaluable lessons in working with legacy systems: how to prevent the dev team from drowning in technical debt and how to re-platform without disrupting the business. HITS also gave birth to several successful spin-off projects, including a query expression builder, a React and Storybook based email RPEL, and a visual programming tool inside FigJam!
Read the story about HITS- React
- GraphQL
- TypeScript
- JAMStack
- Knockout
- Serverless
- Docker
- .NET
- LLM
- Python
Dynamics 365
Microsoft’s business application platform.
Details
Dynamics 365 introduced me to system thinking. Every problem must be solved at the interconnect between the platform team, internal solution teams, partner solution teams, business organization, and business’ customers. I learned valuable lessons in balancing the interests from all of the stakeholders above and designing systems that outlasts the change of people and processes.
I used in-browser rapid prototying to communicate and inform design decisions. I co-authored three design systems that empowered an entire team of frontend engineers. I pioneered an algorithmic color contrasting system and invented an iframe based technique for documenting React components.
- React
- TypeScript
- Angular
- RxJS
Power BI
Microsoft’s Business intelligence solution.
Details
I was not on the Power BI design team, but through collaboration and mentorship I was introduced to data visualization and info graphics design. I devoured the classic designer books from Edward Tufte, Don Normon, Steve Krug, and Alan Cooprer, and took online courses on typography, color theory, information architecture, and interaction design. This period of learning paved the foundation for my later work as a designer.
I learned my first lessons in MV* framework. Many great developers selflessly coached me on design patterns, unit and e2e testing, and the cryptic art of debug CSS when IE support was still a must. I picked up D3.js as my go-to tool for data visualization and pushed the adoption for design systems before Brad Frost popularized the practice.
- AngularJS
- D3.js
- .NET
- C#
Commvault
Enable file backup and restore in macOS Finder.
Details
Commvault is an enterprise-facing data storage service. My internship project aims allow file-related operations directly from the OS native menus, similar to what Dropbox offers. Since macOS is known to be strictly locked down, I had to come up with creative ways to “hack” up a solution.
- Objective C
Lenovo
Stress testing the original ThinkPad X1.
Details
As a huge fan of the ThinkPad product line, I joined Lenovo when it was preparing to integrate its latest ThinkPad with the upcoming Windows 8. I learned about UEFI, SMBus, and Windows Management Instrumentation. I stress tested the BIOS module and learned about the error margin the hardware must operate on.
- C Language
- Windows 8 ADK
PROJECTS
I’m a Human-Computer Interaction nerd. I go to great lengths to create systems, tools, and experiences that are functionally powerful and visually delightful. For these projects I would happily trade in my sleep.
osmos::craft
Push people to discover, ingest, organize, connect, generate, and share knowledge.
Details
The project includes a set of apps that share similar goals.
- A web-based RSS reader running entirely from a GitHub repo.
- A browser bookmark manager optimized for capture and retrieval speed.
- A web-based text editor for networked note-taking, self-hostable on any Git repository.
- (In progress) An all-in-one learning environment that brings together all of the above.
The project helped me grow from a consumer of libraries to a creator of them. For this project, I’ve designed a concurrent task scheduler, a WYSIWYG text editor, an HTML templating engine, a DOM diffing and rendering algorithm, an RSS/Atom feed parser, and a unit test framework, all from scratch. I’m currently designing an operation-based conflict-free replicated data type for the TODO app.
- TypeScript
- Node.js
- Docker
Tab Dance
Delightful tab management
Details
In my attempt to making browser tabs easier to manage, I added keyboard affordance to the browser’s built-in tab system, allowing users to select, move, and close tabs without touching the mouse.
The design was inspired by my code editor keybindings optimized for VIM.
- TypeScript
Torex
Generate types for JSON
Details
Typed Object Reflection (Torex) is a mini compiler that generates TypeScript interface for any JSON object. The functionality comes in handy when you need to manipulate arbitrarily large JSON data with LLM generated code. Instead of prompting LLM with the full data that often exceeds the model’s token limit, Torex compresses the data to its schema.
I brushed up compiler design skills and practiced test-driven development for Torex.
- TypeScript
- Compiler
Plexchat
High throughput Azure OpenAI Chat Client
Details
Azure OpenAI API poses complex rate limits for chat completion requests. I built Plexchat to handle bursts of request by saturating the network without exceed the limits on context window, tokens per minute, and request frequency. It also handles errors and timeout in a sensible way.
Plexchat allowed me to gain 10X productivity in prompt engineering where batch processing is often needed. It also equipped me with new knowledge for designing and implementing robust concurrent systems.
- TypeScript
- LLM
Iter
A frontend for Azure OpenAI Chat models.
Details
I built Iter because Azure’s OpenAI Playground was not conducive to experimentation. Specificially, I wanted an editable and branchable chat history tree and hot-swappable models so I can rapidly explore, iterate, and compare prompts. Since I knew exactly what I needed, I was able to hack the app together in just two days.
During this project, the redux state management concept finally clicked when I was working on the chat history tree. I also learned a great deal about the Streams API and successfully wrapped it in the JavaScript Async Generator to decode and render the chat messages as the server streams them to the client. The scope of the project is quite small, though a little extra work in the future could turn this into a compelling alternative to ChatGPT for prompt engineers.
- HTML
- CSS
- TypeScript
- React
- LLM
Pixel Pusher Online
An MMORPG running inside Figma
Details
The project exploited the multiplayer API and conflict-free data structure from the popular design tool Figma. The outcome is a pixel-art styled game, with real-time and multiplayer capabilities, running on the canvas inside any Figma file.
Figma is not a real game engine. The avatar walk animation is built from scratch using a DIY spritesheets engine, optimized for framerate. The UI is rapidly prototyped as an embedded web app that communicates with the main thread using messages.
The project helped me pick up some linear algebra and pixel art design skills.
- HTML
- CSS
- TypeScript
- Preact
Turbo Query for Azure DevOps
Instantly search and filter up to 20,000 work items from Azure DevOps.
Details
My work project, hosted on Azure DevOps, suffered performance issues as it got too large. So I built this browser extension to help my team stay productive at work. The extension stores the entire project into the browser Indexed DB using Dexie.js and provides an instant search experience using an in-memory full-text search engine powered by flexsearch.
The biggest technical challenge is to strike the balance between data freshness, search and index performance, network consumption, and offline capability. It took me a while to implement the client/service architecture using the Web Workers API and an IPC abstraction layer, but the 60 FPS search UX in the final product was worth the effort.
- Web Worker
- React
- Indexed DB
SpaceMouse Anywhere
Use 3Dconnexion SpaceMouse in your favorite design apps.
Details
This project is my HCI treasure trove. It was challenging to identify the most intuitive direct manipulation model. Based on experiments and user feedback, I built dozens of prototypes with different sensitivity curves and activation thresholds, and evaluated their effectiveness on realistic tasks. The final solution allows simple preference for manipulation target (canvas vs. camera) and offers customization for the power user.
Performance is at the center of this driver. The Figma plugin was written with no dependency to reduce CPU and memory load. A “game loop” was implemented from scratch to achieve the bare-metal speed. Smooth interaction was ensured with the requestAnimationFrame API.
The SketchUp web extension reversed-engineered an wasm API to simulate mouse and keyboard events. A concurrent buffer algorithm was used to allow mismatched input/output rate.
- HTML
- CSS
- TypeScript
Accessifiers
A non-profit service to help people discover accessible apps.
Details
The project is constrained by engineering resource and requires high standards on accessibility. I emphasized on reducing complexity of the tech stack so volunteers from diverse backgrounds can feel comfortable when contributing. I promoted plain CSS over CSS-in-JS, semantic HTML with BEM over third party UI toolkits so the app will be, and will remain, accessible despite the ever-changing landscape of frontend frameworks. To facilitate asynchronous collaboration, I improvised a preview system based on GitHub actions so each PR has an immutable URL for sharing.
- React
- Storybook
- HTMl
- CSS
- JavaScript
Clicademy
A sandbox for digital marketing students.
Details
It’s difficult to become a market analyst without real data. It’s difficult to get real data without becoming a market analyst. Clicademy solves this chicken-and-egg problem by creating a self-sustained ecosystem that allows user to generate data while learning analytics.
I produced branding assets and lead frontend engineering for this project. The constraints posed by the WordPress platform required careful tradeoff between cost of maintenance and brand expression. My rapid prototyping process allowed us to validate the solution against real customers on very step we took.
- WordPress
OData Filter Builder
A library that programmatically builds the OData filter expression for the Azure Cognitive Search API.
Details
A spin-off project from the HITS product. I enjoyed the challenge in the nitty-gritty of compiler design. The project allowed me to practice test-driven development and architect the system with Object-Oriented design. It was rewarding to see multiple layers of abstraction working in unison to serialize the syntax tree into the correct expression. The library currently powers the search experience in the HITS product.
- TypeScript
Switchboard
Instant access to Dynamics 365 demo environments.
Details
Dynamics 365 is a B2B platform that creates apps on-demand for each customer, causing difficulty when designers and PMs need to view their own work. The tool provides a one-click solution to allow instant access to demo environments.
The app repurposed browser automation testing tool to co-pilot with human users, eliminating repetitive and error prone steps. The tool was written from scratch three times, with each iteration learning from its predecessor while exploring new opportunities.
- Initial version was a CLI. It was fast and nerdy, but became difficult for non-technical users.
- The second version was a GUI app based on electron. It was intuitive to use but app installation became the bottleneck for adoption.
- The current version is a cloud service that requires no installation. It has the lowest barrier to entry at the cost of limited integration with the native OS.
- Node.js
- Electron
- Puppeteer
- Svelte
- Lit
cursors
A podcast about culture, design, and business at Microsoft.
Details
The project considers the producers’ experience as important as the listeners’. I adopted WordPress as a headless CMS for its simple admin experience. The frontend was intentionally decoupled from WordPress to realize a highly custom brutalist design by Jeremy Barnes. I also learned a great deal building an audio player from scratch, and publishing the podcast on iTunes.
- Headless WordPress
- HTML
- CSS
- JavaScript
- Web Audio
529 Legion
Web and print resume for a bike racing team.
Details
529 Legion is a mountain bike racing team and community event organizer. Every year 529 Legion presents its achievements and calls for continued support as it renews its sponsorship. I worked with the team manager to design and produce the print resume and the team website for three years in a row.
Read the resume (2019)- Adobe Illustrator
- Figma
- Squarespace
- HTML
- CSS
Power Loops
The next gen dev experience for Microsoft Power Apps Control Framework.
Details
The project was a concept demo, inspired the hot module reloading from webpack. Developer productivity was low because each change could only be reviewed after a full deployment. The concept demo solves the problem by creating a mini container environment to satisfy all the I/O requirements (similar to Docker), so developers can preview their changes locally, with instant reload.
The project was successfully productionized into the Power Platform CLI.
- Node.js
- Yeoman
- Commander
Contrast Matrix
Ensure accessibility for an entire palette.
Details
WCAG 2.0 requires minimum contrast ratio for UI elements. Existing tools only validate one foreground/background pair at a time, creating a bottleneck in the designer’s workflow as the complexity of the UI grow. The tool solves the problem by generating a matrix of foreground/background color pairs so all possible color pairs can be validated at once. The palette can then be exported and imported for reuse.
I collaborated with Adam Ferch to realize his design in code.
- HTML
- CSS
- JavaScript
Jasmine Mock Factory
A unit test utility that creates a mock of anything.
Details
Test-driven development was hard to practice because of the up-front cost in wiring up the mocks. This utility solves the problem by providing a universal mock object with zero setup for every unit test.
I practiced TDD for the project itself and leveled up my TypeScript game as I worked with self-referential types from the ES6 proxy API. To enable open-source contributions, I implemented a CI/CD pipeline with automated testing and coverage report.
- TypeScript
- Karma
- Jasmine
- Travis
- Coveralls
Oblique
Source of inspiration for creative professionals.
Details
A tongue-in-cheek inspiration generator. I practiced social platform API integration at the height of the Web 2.0 movement. I also sweat the details in the logo.
- HTML
- CSS
- JavaScript
- Facebook API
- Twitter API
Course inSight
Interactive course browser that uses machine learning and data visualization to help students design their academic path.
Details
The project integrates a course catalog with natural language processing and cloud database to provide recommendations based on the concepts extracted from a given course, revealing meaningful connections between courses that are not available through existing technologies.
The project synthesized several concepts floating in my head around that time:
- The course catalog crawler was designed based on the search engine crawler from CS50 (Software Design and Implementation).
- The Natural Language Processing algorithm was inspired by the Machine Learning lectures from CS74 (Machine Learning and Statistical Data Analysis).
- The data visualization was inspired by my internship with Microsoft on the Power BI product.
- Bash script
- HTML
- CSS
- JavaScript
- D3.js
- Alchemy API (IBM Watson)
Hanover Weather Audiovisual Experience
Transform weather data into an audiovisual rollercoaster ride.
Details
A experiential art project produced for a film and music studies class. To put my learning from CS02 (Programming for Interactive Audio-Visual Arts) into practice, I composed this piece in Processing and had loads of fun watching the reaction from my professor and classmates. While collaborating with 2 other students, I am the primary creator of the experience.
- Processing
- Java
MidiEvo
A sequencer and looper for any MIDI input device.
Details
A tool for musicians to compose MIDI loops. Ensuring the speed of I/O became the critical piece for this project. Without using expensive hardware, I implemented a quantized time alignment algorithm to improve the output quality.
- Processing
- Java
- MIDI
IOT Lights Control Panel
An IoT Hub controlling smart lights for a 91,800 sqft field house.
Details
The smart lights installed in the field house at Dartmouth was not conversing energy as much as it should due an out-dated centralized scheduling system. To improve lighting efficiency, I worked with DALI lab to allow field house users adjust lighting on-demand. The project taught me lessons in collaboration with stakeholders and designers. I also had fun learning a NoSQL cloud database and the Backbone framework.
- IoT
- Parse
- Backbone
- HTML
- CSS
- JavaScript
Gesture-controlled Learning Game
Help user achieve learning goals while winning $1000 from Intel.
Details
Using a prototype infrared camera and a computer vision SDK for head and hand tracking, I created a primitive 3D environment to explore the use cases of the novel interaction. The project revealed the performance limitation from the hardware and the software at the time, but our gesture based navigation pattern had become commonplace in today’s AR/VR applications.
My team, lead by Fei Yu, had won the $1000 early submission prize from the Intel Perceptual Computing Challenge.
- Intel Perceptual SDK
- Unity
- C#
Eye Tracker Data Analysis
Modeling cognitive bias from eye movement.
Details
A research project lead by Alireza Soltani. I used machine learning techniques to identify correlations between brain activities and eye saccades. The research project taught me the rigor and patience in the scientific endeavour, and also showed me the practical side of machine learning just as I finished CS74 (Machine Learning and Statistical Data Analysis).
- MATLAB
- Support Vector Machine
Language Detection from Speech Samples
Detect spoken language using a natural language processing pipeline.
Details
A research project in collaboration with Jingwei Pan, for CS74 (Machine Learning and Statistical Data analysis). I experimented with Support Vector Machine and Neural Network to differentiate Chinese, French, and English.
- MATLAB
- Support Vector Machine
- Neural Network
I/O
I collect beautiful gems from brilliant minds, and occasionally throw a few back into the pond, watching the ripples unwind.
Essays
Digests
Influenced by
- Bret Victoron Principles
- Jeremy Keithon Resilience
- Elon Muskon Grit
- Robert M. Pirsigon Quality
- Ayn Randon Individualism
Education
I’m forever grateful for my liberal arts education at Dartmouth College. In addition to all the courses you would expect from a Computer Science degree, I have also received rigorous training in drawing, photography, film studies, audio-visual programming, and 3D animation. The most unforgettable lecture? Having Alison Ouellette-Kirby and Noah Kirby teach us melting and pouring 2,220 °F liquid iron into our hand-prepared clay molds! I graduated in 2015 with the highest honors.
