7GUIs

Related:<p><i>Show HN: 7GUIs in Vanilla HTML, CSS, JavaScript</i> - <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=28600804" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=28600804</a> - Sept 2021 (56 comments)<p><i>7GUIs</i> - <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24958725" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24958725</a> - Nov 2020 (56 comments)<p><i>7GUIs: A GUI Programming Benchmark (2018)</i> - <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=21883306" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=21883306</a> - Dec 2019 (16 comments)<p><i>7GUIs – A Notational Usability Benchmark for GUI Programming</i> - <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=15703230" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=15703230</a> - Nov 2017 (6 comments)<p><i>7GUIs – A Notational Usability Benchmark for GUI Programming</i> - <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=9050480" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=9050480</a> - Feb 2015 (17 comments including &quot;Very cool to see my master&#x27;s project here on hn&quot;)

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.<p>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 <i>have</i> to do)? What happens if they type an incorrect value and then type something into the other field? Etc etc.<p>I think there are a lot of interesting tensions between a &quot;formally correct&quot; 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.<p>Didn&#x27;t even get a reply... it cost me quite some hours to do this in a language I have almost no experience in.<p>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.<p>Source: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24961110" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=24961110</a>

This is pretty neat. The complexity jump from CRUD to Circles and Cells is pretty radical, though.<p>I feel like a Master&#x2F;Detail task would be a nice addition, and it could include a resizable divider so that the GUI framework&#x27;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.<p>Now I’m totally going to run off this list. I&#x27;ve only got circles and cells left before I can do all of these challenges.<p>1: <a href="https:&#x2F;&#x2F;github.com&#x2F;elcritch&#x2F;fidgets" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;elcritch&#x2F;fidgets</a>

This is missing challenges which include async content and proper error handling, which are both essential in modern web development.<p>For example:<p>You&#x27;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.<p>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)<p><a href="https:&#x2F;&#x2F;www.tecgraf.puc-rio.br&#x2F;iup&#x2F;en&#x2F;7gui&#x2F;7gui.html" rel="nofollow">https:&#x2F;&#x2F;www.tecgraf.puc-rio.br&#x2F;iup&#x2F;en&#x2F;7gui&#x2F;7gui.html</a>

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 <a href="https:&#x2F;&#x2F;www.red-lang.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.red-lang.org&#x2F;</a>

Implementation in Slint: <a href="https:&#x2F;&#x2F;github.com&#x2F;slint-ui&#x2F;slint&#x2F;tree&#x2F;master&#x2F;examples&#x2F;7guis" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;slint-ui&#x2F;slint&#x2F;tree&#x2F;master&#x2F;examples&#x2F;7guis</a>

Implementation in Racket: <a href="https:&#x2F;&#x2F;github.com&#x2F;mfelleisen&#x2F;7GUI" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mfelleisen&#x2F;7GUI</a>

I’ve been writing SwiftUI lately and it’s the most productive GUI toolkit out there.<p>Taylor Holliday of the Audulus fame is porting it to Rust<p><a href="https:&#x2F;&#x2F;github.com&#x2F;audulus&#x2F;rui" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;audulus&#x2F;rui</a>

I did this exercise with Godot Engine : <a href="https:&#x2F;&#x2F;triptych.neocities.org&#x2F;sevenguis&#x2F;index.html" rel="nofollow">https:&#x2F;&#x2F;triptych.neocities.org&#x2F;sevenguis&#x2F;index.html</a>

I was wondering if one could write something actually worth taking home and showing to others.<p>1 - Make your resume into a slide show with background music.<p>2 - Create fancy transitions<p>3 - replace the numbers in your slideshow resume with fast running counters that count up to the desired value.<p>4 - add something original that you feel should be part of the task<p>5 - create a fully functional inquiry form as the final slide of your resume<p>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&#x2F;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.<p>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<p>The website hasn’t been rebuilt but you can see the list of implementations here: <a href="https:&#x2F;&#x2F;github.com&#x2F;7guis&#x2F;7guis&#x2F;blob&#x2F;master&#x2F;site&#x2F;src&#x2F;containers&#x2F;Implementations.js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;7guis&#x2F;7guis&#x2F;blob&#x2F;master&#x2F;site&#x2F;src&#x2F;containe...</a>

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 <i>exactly</i> 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.<p>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: <a href="https:&#x2F;&#x2F;jeff.glass&#x2F;project&#x2F;the-7-guis-pyscript&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jeff.glass&#x2F;project&#x2F;the-7-guis-pyscript&#x2F;</a>

Very pragmatic, there&#x27;s more to this I think than we might recognize.<p>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: <a href="https:&#x2F;&#x2F;vuejs.org&#x2F;examples&#x2F;#hello-world" rel="nofollow">https:&#x2F;&#x2F;vuejs.org&#x2F;examples&#x2F;#hello-world</a><p>this is like the Todo applications for GUI

I did an implementation using We components <a href="https:&#x2F;&#x2F;crisdosyago.github.io&#x2F;der.Knall.Gerust&#x2F;7guis&#x2F;" rel="nofollow">https:&#x2F;&#x2F;crisdosyago.github.io&#x2F;der.Knall.Gerust&#x2F;7guis&#x2F;</a>

&gt; 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).<p>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&#x2F;engineer job interview

Nice. I might try these out in AppKit

This is awesome. More! Thank you.