Let's learn to build UI faster by doing speed runs.
It started with this tweet where I asked who can make a todo list UI the fastest. The rules were very loosely specified.
The goal is to see how fast you can build a functional todo list UI (lets do different UIs in the future?). The goal is to learn, not to win. A slower entry might still teach us something. You can choose to add more functionality or styling. I think we will naturally see which entries have the best speed to quality ratio.
I'm most interested in UI code, not full-stack applications, you can of course build a full-stack app, but my main concern is how quickly I can "express" a UI, not build a functioning real word app.
I want to build UI faster, so if someone has a drastically faster way to build this, I want to know what that is!
Record a screencast (ideally narrate it!) and share the code. You can create an issue or PR here with your submission, or send it on Twitter.
Functions:
- Add a todo to the list
- Delete a todo from the list
- Edit the todo title
- Check off / toggle a todo item
- Blank state message, "No todos"
Considerations:
- Prevent empty todo titles (when adding or editing a todo)
- Style finished todos differently (cross out the title for example)
- No need to persist data
These are the first few submissions based on the original tweet, which left it very open to interpretation.
Antonio (@sarcevicantonio)
- Time ~30m
- Tech: Svelte
- Narrated Screencast
- Code
- Live
Pablo (@paoloricciuti)
- Time: ~18m
- Tech: Svelte
- Narrated Screencast
- Live
Nathan @trafnar
- Time: ~20m
- Tech: Imba
- Narrated Screencast
- Repo
- Live demo
Reaper (@barelyreaper)
- Time: ~35m
- Tech: Typescript / (thestack)
- Screencast
- Repo