I like the temperature converter one because it immediately introduces some of the more fuzzy design questions and annoying details that pop up when you implement data binding.
Such as: when exactly should the other side update? When the user switches focus (where to?) or on every keystroke? Does it make sense to a user that they temporarily see the Fahrenheit value for 2°C if they really want to type in 20°C? What happens if they type an invalid value (or clear the box, which they often have to do)? What happens if they type an incorrect value and then type something into the other field? Etc etc.
I think there are a lot of interesting tensions between a "formally correct" system and one that feels usable and intuitive to use. Especially with bidirectional data flow, they show up quickly.
I implemented these a while ago in Clojure because it was part of the job application process at roam research.
Didn't even get a reply... it cost me quite some hours to do this in a language I have almost no experience in.
At least there was the upside that I got to experience Clojure and Om which was great to learn about :D
The author Eugene unfortunately passed away in 2019.
This is pretty neat. The complexity jump from CRUD to Circles and Cells is pretty radical, though.
I feel like a Master/Detail task would be a nice addition, and it could include a resizable divider so that the GUI framework's layout functionality is exercised.
Excellent list of UI challenges. I’ve been working through a similar list of my own to see if I can make a widget library I’m building in Nim do this [1]. Building on an event-driven immediate mode GUI has been fun.
Now I’m totally going to run off this list. I've only got circles and cells left before I can do all of these challenges.
This is missing challenges which include async content and proper error handling, which are both essential in modern web development.
For example:
You're loading or submitting content asnychronously and must handle different loading states in order to give the user feedback. If an action fails due to spotty internet you must also include a retry or refresh button.
You load a model form to modify some data, and when you submit your changes someone else has already made modifications to the model.
Not in the list: an example in C and Lua with IUP (an underrated library)
Great idea, would be nice to use this to compare different GUIs framework. Interested in c++ immediate GUIs, shadertoy.com like GUI and Red language https://www.red-lang.org/
Implementation in Slint: https://github.com/slint-ui/slint/tree/master/examples/7guis
Implementation in Racket: https://github.com/mfelleisen/7GUI
I’ve been writing SwiftUI lately and it’s the most productive GUI toolkit out there.
Taylor Holliday of the Audulus fame is porting it to Rust
I did this exercise with Godot Engine : https://triptych.neocities.org/sevenguis/index.html
I was wondering if one could write something actually worth taking home and showing to others.
1 - Make your resume into a slide show with background music.
2 - Create fancy transitions
3 - replace the numbers in your slideshow resume with fast running counters that count up to the desired value.
4 - add something original that you feel should be part of the task
5 - create a fully functional inquiry form as the final slide of your resume
6 - All tasks are optional, have the amount of work you put in reflect how desperately you need this job.
Nice list. One change I would make for the CRUD example is to do a Todo list instead since it might be more useful/doesn’t teach bad assumptions about names.
Do similar tasks exist that would apply more generally to picking up any programming language? Working on non-trivial projects seems to be a great way of learning new languages and tools, and I wonder if there are a set of projects that would touch on a decent chunk of a what is offered by a typical language.
Then again, every language has its strengths and weaknesses so perhaps such projects do not exist?
It has been taken over and moved to a new site
The website hasn’t been rebuilt but you can see the list of implementations here: https://github.com/7guis/7guis/blob/master/site/src/containe...
It’s a useful list. I think some of the interaction design could do with updating though - things like disabling buttons without explanation and popping up modals for data entry are no longer universal UI toolkit tropes. Different interactions might be more idiomatic in different contexts and - while you’ll learn a lot by implementing these exactly as specified, in some cases it might be an uphill struggle - and the reason could be that the framework is trying to tell you to implement it another way.
So a second version of this challenge might be to implement the same capability, through a more native interaction idiom. Suspect much can be learned by doing it both ways.
Only 8 days late, but I have an implementation of this in PyScript as well: https://jeff.glass/project/the-7-guis-pyscript/
Very pragmatic, there's more to this I think than we might recognize.
Using these as template starting points is a great idea.
First time heard about this, now I know why the vuejs examples I am learning is calle 7 examples: https://vuejs.org/examples/#hello-world
this is like the Todo applications for GUI
I did an implementation using We components https://crisdosyago.github.io/der.Knall.Gerust/7guis/
> In addition, all cells which depend on C must be reevaluated. This process repeats until there are no more changes in the values of any cell (change propagation).
What if there are circular dependencies?
I tried this out using Lazarus and Free Pascal and it seems pretty trivial to do - except for the timer example which will take a little bit more time.
Some of these seem like they could be really cool challenges in the context of a designer/engineer job interview
Nice. I might try these out in AppKit
This is awesome. More! Thank you.
Related:
Show HN: 7GUIs in Vanilla HTML, CSS, JavaScript - https://news.ycombinator.com/item?id=28600804 - Sept 2021 (56 comments)
7GUIs - https://news.ycombinator.com/item?id=24958725 - Nov 2020 (56 comments)
7GUIs: A GUI Programming Benchmark (2018) - https://news.ycombinator.com/item?id=21883306 - Dec 2019 (16 comments)
7GUIs – A Notational Usability Benchmark for GUI Programming - https://news.ycombinator.com/item?id=15703230 - Nov 2017 (6 comments)
7GUIs – A Notational Usability Benchmark for GUI Programming - https://news.ycombinator.com/item?id=9050480 - Feb 2015 (17 comments including "Very cool to see my master's project here on hn")