7GUIs in Vanilla HTML, CSS, JavaScript
Languages and libraries
ui implementation examples
SHOW HN2021
How HN took it
7 positive, 10 neutral or asking, 1 mixed, 4 critical, out of 22 comments about the project. Thread score +0.11.
Idea: 4 for, 0 againstExecution: 0 for, 3 againstDesign: 2 for, 1 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Good teaching example of vanilla DOM and MVC approaches
From 2 comments
I think this is a good teaching example of doing GUIs with the DOM and the MVC approach. It builds up step by step to introduce all the concepts.…
dsego on HNI like it, and it's also a good example of why a framework will start to be useful if you get more complex code. When we arrive at the CRUD widget,a simple <script> dep on…
BiteCode_dev on HN
Reassuring example of what plain JS can do
From 1 comment
These examples are very reassuring to me. Sometimes, after a long day of fighting whatever trendy JS framework my current project uses, I may be tempted to advocate for a "back…
adlpz on HN
Objections
Code becomes hard to maintain as state grows in larger apps
From 3 comments
This is what you can end up with, managing all possible state changes manually. I've done this myself with jQuery, show/hide, enable/disable elements. Turns into a game of…
dsego on HNThe problem is when you have a large app with multiple components and plenty of state to manage. These things always look easy when they are small toy isolated projects. This…
dmix on HNIt works well until you need to manage many states in one page. Even with knockout js, when an application become a little complex, it become hard to develop.
fendy3002 on HN
Cells example lacks keyboard navigation and has Safari and iOS bugs
From 3 comments
The cells example would be improved by keeping the top left corner clear by making that cell stick in place and on top: ``` #colHeadings .rowHeading { z-index: 3; top: 0; } ``` I…
chrismorgan on HNThe Cells example doesn't seem to work properly on my Mac in Safari: https://7guis.bradwoods.io/cells/
wsc981 on HNCells and Circle do not work on iOS
whatsapps2020 on HN
Some task UX designs are poor, e.g. CRUD and circle drawer
From 2 comments
Imagine if a GUI programming benchmark had GUI specifications with reasonable UX? The 7GUIs designs are criminally bad, especially CRUD and Circle drawer.
tobr on HNI don’t believe that the UX problems here are motivated by reducing complexity. Perhaps the circle drawer one, where any reasonable redesign would turn it into a direct…
tobr on HN
Requests
Add keyboard navigation to the cells example
From 1 comment
The cells example would be improved by keeping the top left corner clear by making that cell stick in place and on top: ``` #colHeadings .rowHeading { z-index: 3; top: 0; } ``` I…
chrismorgan on HN
Add undo/redo as a requirement
From 1 comment
Very cool. I had to code a Cells app in Java back in university, too. One thing though: add undo/redo to the Cell task as a requirement. After all, "a good paradigm should give…
WA on HN
Questions
What are the alternatives to managing state manually?
From 1 comment
What are the other options here then? Not trolling just wondering. If an app has state it has to be dealt with somewhere...
tonetheman on HN
Alternatives named
petite-vue
From 1 comment
I like it, and it's also a good example of why a framework will start to be useful if you get more complex code. When we arrive at the CRUD widget,a simple <script> dep on…
BiteCode_dev on HN
SlickGrid
From 1 comment
> because I've longed for an open source, liberally licensed, spreadsheet component for the web I assume SlickGrid (https://github.com/6pac/SlickGrid/wiki/Examples) didn't…
jhgb on HN
React and Vue
From 1 comment
So let's look at the data: According to stateofjs survey: 100% of JS developers know what React is, 80% are using it, 88% are satisfied. There is no "one size fits all" but…
Otek on HN