7GUIs

https://eugenkiss.github.io/7guis/tasks/

by miguelrochefort • 4 years ago

753 113 4 years ago

eugenkiss.github.io

jollybean• 4 years ago

Very pragmatic, there's more to this I think than we might recognize.

Using these as template starting points is a great idea.

RcouF1uZ4gsC• 4 years ago

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.

__ryan__• 4 years ago

I agree with the premise, but please, anything other than a todo list.

ttoinou• 4 years ago

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/

adamnemecek5• 4 years ago

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

https://github.com/audulus/rui

tayistay3• 4 years ago

I'm the author of rui, in case anyone has questions :)

sawaali• 4 years ago

How different is the state managementin SwiftUI compared to the state in rui?

anonymouse008• 4 years ago

So I’m still not sold on SwiftUI, and I’m beginning to think I’m learning the wrong paradigms to “get it.”

What would you say are the core concepts that make it click for you? Do you have any resources to recommend?

adamnemecek5• 4 years ago

Did you watch any WWDC videos? Also the objc.io book on the topic is decent.

ohgodplsno• 4 years ago

Except for the part where components are locked to an iOS/macOS version. Still have to support iOS 13 ? Have fun basically doing everything with only VStacks.

Compose at least makes it only a library bump away.

andrekandre3• 4 years ago

  > Compose at least makes it only a library bump away.

this to me is the most annoying thing with regard to swiftui and apple development in general... especially considering swiftui views are mostly wrapping uiviews....

bowsamic5• 4 years ago

I like SwiftUI, but somehow I still like UIKit and even AppKit a little more. Some things are still just slightly too broken in SwiftUI, for example navigation. In the WWDC talk when they introduced SwiftUI they said that we can let Apple do the work of making the UI just by listing what we need, but I don't trust Apple to do this yet.

adamnemecek5• 4 years ago

You can go back and forth relatively easily. I think that even if most of your views are still NSViews/UIViews SwiftUI makes sense even just to hook them up. ViewControllers are an anti-pattern.

copperx2• 4 years ago

Yours is the first positive comment I read on HN about SwiftUI.

adamnemecek5• 4 years ago

Why are people complaining? That it’s buggy or that it’s fundamentally flawed?

tayistay3• 4 years ago

That could be because early on, SwiftUI was pretty rough. Compile errors were inscrutable and there were various gotchas. It's gotten a whole lot better, and at this point I'd say is mostly a pleasure to use.

jeffreyrogers2• 4 years ago

It's unlike any other UI Framework I've used and at first I didn't like it. If you approach SwiftUI without doing things the way the framework expects you too it's going to be frustrating. Once I learned how SwiftUI wanted me to think about the UI I found it pleasant to use. The documentation has improved a lot too (as have the third party tutorials), although there are still some suprises that I've encountered.

There is at least one important feature that is missing that many desktop apps need so I can't unreservedly recommend it for that yet, but for mobile development it is very nice. I am much more productive with SwiftUI than anything else.

Ygg2• 4 years ago

First time I see it, pretty nice framework. Rust needs more of those.

raphlinus• 4 years ago

Watch this space. Specifically I am writing up my ideas for a fusion of SwiftUI and Druid, inspired in large part by Taylor's work on rui. This work is conceptual at the moment, not a finished product, but I am hopeful it will be a better direction for UI in Rust.

michaelsbradley• 4 years ago

Implementation in Racket: https://github.com/mfelleisen/7GUI

evandale• 4 years ago

Racket is so neat. I started learning it through How to Design Programs (https://htdp.org/2022-2-9/Book/index.html) and I was blown away you could paste pictures into the source and assign them to variables and draw them on the screen. I'm not sure why I'm surprised they have a while GUI framework too.

giraffe_lady• 4 years ago

I'm surprised how often I reach for racket just to check something out or explore an idea quickly. I've never taken anything too far with it but it's an incredible tool for that, and because it's so easy to implement languages in it most languages have an implementation in it.

A couple weeks ago there was a burst of posts on HN about prolog, a language family I know nothing about. Took no time to spin up dr racket, find a prolog dialect in it, and play around.

I probably do something like that with it every couple months. And yeah being able to easily visually output stuff from a new language without having to grapple with the tooling and output quirks of a new language takes so much of the initial friction out.

ezfe• 4 years ago

You can technically do that in Xcode, but I don't think they love it as it's been getting harder to do, even though it does still work. For colors it's more interesting since the color itself can be embedded in the source code.

spdegabrielle2• 4 years ago

It’s not the only version either

See https://github.com/Bogdanp/racket-gui-easy/tree/master/examp...

  },
  {
    title: "Racket",
    technologies: ["Racket", "racket/gui"],
    link: "https://github.com/mfelleisen/7GUI/",
    src: "https://github.com/mfelleisen/7GUI",
  },
  {
    title: "GUI-Easy declarative GUI",
    technologies: ["GUI-Easy", "Racket", "racket/gui"],
    author: "Bogdan Popa",
    authorLink: "https://github.com/Bogdanp/",
    link: "https://github.com/Bogdanp/racket-gui-easy/tree/master/examples",
    src: "https://github.com/Bogdanp/racket-gui-easy/tree/master/examples",
  }  
]

azeirah3• 4 years ago

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

polalavik• 4 years ago

I would love to know, collectively, how much labor/time is wasted per year on applications that test whether someone is good enough to do “real” labor. It’s bonkers.

nerdponx• 4 years ago

It's one thing to have someone write a toy program. It's another to have someone write seven increasingly-complicated toy programs. That's really grotesque and overkill.

debo_• 4 years ago

You didn't get closure, but at least you got Clojure.

dylan604• 4 years ago

I think you're looking for the Dad Joke thread from a few days ago

ftkftk• 4 years ago

The joke all were thinking, but were afraid to type out. Kudos!

elwell• 4 years ago

Presumably they used ClojureScript, which does indeed use Closure compiler.

strangattractor• 4 years ago

I would not waste effort with these test if it is not a language or system you are familiar with (unless you want to for fun). The companies that do this are looking for code monkeys. They want to feed you tickets and get code in return. Many of the people critiquing the submitted code are often not qualified to do so.

t0astbread• 4 years ago

In general I'm also not a big fan of these interview assignments but I gotta say it probably heavily depends on how they're used. About a year ago I got my first Go job that way with little prior experience and it ended up being great.

Granted, my assignment was smaller and I knew they would get back to me. If I had been asked to develop a spreadsheet editor from first principles that would have been a major red flag.

josho• 4 years ago

I encourage candidates submitting something like this ask the hiring manager what will the process be. Questions like:

- Will feedback be provided on the submitted application?

- What does that feedback look like, are you spending 60 minutes asking about my implementation choices or will you also spend time offering feedback on how I could have improved my solution?

For any hiring managers by providing feedback to candidates you are showing that candidates will grow and develop on your team. By not providing feedback you risk ending up like Roam Research and loosing out on many potential applicants because you demonstrate that you aren't interested in developing your staff.

rashkov2• 4 years ago

More than that, I would ask what their acceptance criteria are. I’ve taken a test like this only to get feedback that felt like a giant “got you!” from the hiring manager. There’s so much that goes into coding one of these up, and there’s a limit to how much effort a candidate is willing to put into free work, so this felt kind of bad. This was for Thomson-Reuters on their Clojurescript team.

didibus• 4 years ago

I only see complaints when it comes to interviews. People either complain that they're asked leetcode questions which doesn't reflect the real work, or they complain that they were expected to implement real work tasks which takes too much time out of their week.

Unless your complaint was just about the lack of follow through, that's valid, kind of shitty to not be told that you didn't get the job at least.

Anyways, my point is, interviewing just sucks.

azeirah3• 4 years ago

0 Follow-up, that's my complaint. I don't mind doing hard exercises, I find them fun.

rl3• 4 years ago

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...

Don't feel bad, you're not the only one they didn't bother replying to:

https://news.ycombinator.com/item?id=26316793

r3vo• 4 years ago

The Author passed away. That's probably why you didn't receive a response.

azeirah3• 4 years ago

I'm sorry, who passed away? Rich Hickey? Conor Sullivan? Huh

bowsamic5• 4 years ago

Nice. I might try these out in AppKit

armadsen3• 4 years ago

Just for fun, I timed myself doing the first one in both AppKit and SwiftUI. I started with Xcode running but no project created yet, and hit stop when the app was launched and I had clicked the count button. It took me 1m57s to do it in AppKit, and 3m16s in SwiftUI. (I'm far more experienced with AppKit than SwiftUI).

bowsamic5• 4 years ago

Nice. Just out of interest (since I'm new to AppKit), did you decide to use Storyboard or a XIB?

bbatchelder• 4 years ago

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.

finiteseries• 4 years ago

From a web POV I think, yes, but from a platform with something like AppKit it’s very, very straightforward honestly.

Note they’re explicitly encouraging the use of something like JTable/NSTableView in the cells example, the focus is on appearance/behavior customization and change propagation. And in the circles example, undo/redo is ideally provided for “free” by the environment, and with the system’s drawing frameworks & dialogs it really does make for a simple task.

If the environment lacks these basic capabilities though..

armadsen3• 4 years ago

Yeah, I'm primarily an AppKit developer, and honestly the circle drawing task seems a bit easier than the CRUD task to me.

kbenson• 4 years ago

f the environment lacks these basic capabilities though..

And that's the point, right? You're evaluating the toolkit, and if it lacks the features to make these tasks fairly easy, then it's going to be harder to do a lot of straightforward things.

I imagine a similar set of tasks could (and have) easily be contrived for other common libraries/toolkits that are used, such as HTTP client libraries, numerical libraries, etc.

dang• 4 years ago

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")

ogoffart2• 4 years ago

Implementation in Slint: https://github.com/slint-ui/slint/tree/master/examples/7guis

nu11ptr• 4 years ago

Is a .slint file without an .rs file a complete example or just a work in progress? Curious how you do "cells" without a table widget (Not being a slint user it looks like they used loops to build a bunch of "Text" widgets, but it is the _logic_ of handling them as a cohesive table that I'm interested in, and that seems like a TON of work without a proper table widget)

ogoffart2• 4 years ago

Yes, the .slint file without a .rs file is a complete example.

They can be viewed with the online editor. For example, the cells: https://slint-ui.com/releases/0.2.2/editor/?load_url=https:/... The cells example is actually not finished and admittedly missing a lot of features, it is far from being a spreadsheet.

satnome• 4 years ago

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?

shadowgovt• 4 years ago

I like to implement a Conway Life engine for this purpose. Small self-contained problem that requires UI, timing loops / iteration, and graphics.

It's also embarrassingly parallelizable if your language supports parallelization primitives you want to exercise.

schwartzworld• 4 years ago

Games are a fun way of trying out a new toolset. I've implemented a few sudokus now.

noitpmeder• 4 years ago

Minesweeper is always fun!

bondant• 4 years ago

Not in the list: an example in C and Lua with IUP (an underrated library)

https://www.tecgraf.puc-rio.br/iup/en/7gui/7gui.html

marcodiego2• 4 years ago

IUP is definitely underrated. On the other hand, there are very few developers indeed.

jameshart• 4 years ago

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.

elcritch• 4 years ago

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.

1: https://github.com/elcritch/fidgets

rajnathani• 4 years ago

The author Eugene unfortunately passed away in 2019.

Source: https://news.ycombinator.com/item?id=24961110

Pr0ject2172• 4 years ago

6510• 4 years ago

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.

TheAceOfHearts• 4 years ago

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.

101008• 4 years ago

Is the second case handled by the "frontend"? Shouldn't be handled by the backend and then return an error state/message?

jjayjay• 4 years ago

It's not as simple as cases where both data and logic are local to the gui.

In this identified case, the gui has to react/behave correctly according to the results/errors of asynchronous remote logic over a spotty network.

xg152• 4 years ago

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.

mbreese• 4 years ago

It’s also good for data formatting. You don’t want to see 22.2222222C for 72F. Ideally when you adjust one, the values are internally consistent.

xg152• 4 years ago

Good point. This in turn shows the risk of endless event propagation loops: So you decide to solve the formatting problem by using floor() and only showing the integer parts.

So now when the user enters 72°F, it shows 22°C. However, in a naive implementation, updating the celsius field would trigger a change in the other direction as 22°C converted back would round to 71°F. But 71°F rounds to 21°C, triggering another change, etc etc.

onesolutiononly2• 4 years ago

Honestly I think a label, 1 textbox, and 2 buttons- 1 "convert to F" and 1 "convert to C" is just so much simpler.

Or even 2 completely separate pages, 1 for C and 1 for F.

adamrezich• 4 years ago

it's simpler and might even be a better UX, but that's not the point of this exercise

stux• 4 years ago

Reminds me of the principles brought up in this talk by Sean Parent:

https://youtu.be/0WlJEz2wb8Y

The temperature converter is a good example of an “implies” relationship, which Sean argues is difficult to model in UIs.

chii4• 4 years ago

I suspect a temperature converter should actually be modelled as a slider, with two labels showing both temperatures.

The user must drag the slider to find the temperature they have, and read the converted version. May be the slider is marked with different axis top and bottom (may be top is Celsius and bottom is Fahrenheit).

jes5199• 4 years ago

you don’t need a slider, just look at a photograph of a thermometer with both scales on it

modestmouse2• 4 years ago

These are some good UX questions, none of which have a really clear answer.

I think most of your 'when should the fields update' type of questions, have already been solved in Google Translate web UI. There, you can only update the left-sided input field. So there becomes this simple flow of: 1) decide which language you're translated from. 2) edit that value. 3) the UI picks up that a keystroke has not occurred in the last X seconds 4). The right-hand side field updates.

LeFantome• 4 years ago

That was kind of his point though. In order to deactivate one side you have to program that in the UI. Also, if you provide this kind of forced directionality to the two temperatures, you now how to make the units toggle on each side ( otherwise you can only convert from one fixed choice to the other - eg. C to F but not F to C ).

As soon as you start asking these questions, the UI requirements change.

spdegabrielle2• 4 years ago

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...

pketh• 4 years ago

Some of these seem like they could be really cool challenges in the context of a designer/engineer job interview

synergy20• 4 years ago

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

marcodiego2• 4 years ago

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?

magicalhippo• 4 years ago

Not stated, but I'd do what Excel does which is to have a maximum recursion level.

whiddershins• 4 years ago

Svelte won't let you. Knockout claims it isn't a problem. What happens in Excel, are you able to create circular dependencies there and crash Excel?

s-lambert• 4 years ago

How would Svelte prevent a user from creating an infinite recursion at run-time? It doesn't know what the cell's expressions are at compile time.

chii4• 4 years ago

What if there are circular dependencies?

You could model the dependencies as a directed graph, and ensure that there's no cycles in the graph, and if there is, don't evaluate and warn/error msg the user.

triptych• 4 years ago

I did this exercise with Godot Engine : https://triptych.neocities.org/sevenguis/index.html

andai• 4 years ago

I was nostalgic/excited by the 20 second loading bar, brings me back to the dialup days. Unfortunately afterwards I was greeted by a black screen. Looks like it doesn't work on my phone :( Time to get out of bed, I guess!

chii4• 4 years ago

would you recommend Godot for GUI applications that aren't games? Is it a good tool for it, and is it better than using electron?

graderjs• 4 years ago

I did an implementation using We components https://crisdosyago.github.io/der.Knall.Gerust/7guis/

Pr0ject2172• 4 years ago

This is awesome. More! Thank you.

pkphilip• 4 years ago

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.

Jigjig• 4 years ago

Only 8 days late, but I have an implementation of this in PyScript as well: https://jeff.glass/project/the-7-guis-pyscript/

7GUIs

Related Stories